211 lines
10 KiB
JavaScript
211 lines
10 KiB
JavaScript
import '../styles/index.scss';
|
|
|
|
import DataTable from "react-data-table-component";
|
|
import React, { Component } from 'react';
|
|
import { createRoot } from 'react-dom/client';
|
|
|
|
|
|
const addr_prefix = "" //"http://localhost:8000"
|
|
|
|
|
|
class Main extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
text: "",
|
|
status: "",
|
|
faq: false,
|
|
};
|
|
}
|
|
onSubmit(event){
|
|
event.preventDefault();
|
|
let form = document.forms[0];
|
|
let formData = new FormData(form);
|
|
fetch("/api/register", {
|
|
method:"POST",
|
|
body: formData,
|
|
}).then(resp => resp.json()).then(json => {
|
|
if(json.reason){
|
|
this.setState({
|
|
text: json.reason,
|
|
status: "failed",
|
|
})
|
|
} else {
|
|
this.setState({
|
|
text: json.success,
|
|
status: "success",
|
|
})
|
|
}
|
|
});
|
|
}
|
|
togglefaq(){
|
|
this.setState({faq: !this.state.faq});
|
|
}
|
|
render(){
|
|
return (
|
|
<div>
|
|
{this.state.status == "success" &&
|
|
<div class="absolute container-fluid alert alert-success">
|
|
{this.state.text}
|
|
</div>}
|
|
{this.state.status == "failed" &&
|
|
<div class="absolute container-fluid alert alert-danger">
|
|
{this.state.text}
|
|
</div>}
|
|
{this.state.faq &&
|
|
<div class="shadow"></div>}
|
|
{this.state.faq &&
|
|
<div class="faq" onClick={(e) => this.togglefaq()}>
|
|
<div class="container" onClick={(e) => e.stopPropagation()}>
|
|
<button type="button" class="btn-close" aria-label="Close" onClick={(e) => this.togglefaq()}></button>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">K čemu slouží Tokken?</h5>
|
|
<p class="card-text">V kontextu Alkátor Race by se to dalo spíše nazvat kontrolním bodem. Závodník doběhne na určité místo, kde tokken sebere a následně ho zanese na další stanoviště, kde ho předáte kontrolorovi. Tím dáte najevo, že jste běžel trasu správě. Je to pojistka, aby jsi byl podctivý Alkátor a nešvindloval!</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Jak funguje Quíz?</h5>
|
|
<p class="card-text">Jedná se o překážku, kde na daném místě vylosujete otázku a běžíte k dalšímu stanovišti ke kontrolorovi. Mezi tím si můžete promyslet jednu z ze tří odpovědí (formát A,B,C). Špatná odpopvěď znamená panáčka. Navíc to má obdobnou funkci, jako Tokken.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Jak funguje Ruleta?</h5>
|
|
<p class="card-text">Na stanovišti na Vás budou čekat panáčky. Obsah může být cokoliv alkoholického i nealkoholického, od dobrot po blééé. Nejlepší na tom je, že podle čichu a barvy nemáte šanci poznat, o co se jedná. Jelikož panáčky jsou uzavřené a dobarvené potravinářským barvivem.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Musím v Alkátor race utíkat nebo se jinak fyzicky namáhat?</h5>
|
|
<p class="card-text">Strategii závodu si určím sám s pomocí mého osobního trenéra. Tudíž se zaměřím hlavně na alkohol a abych dorazil do cíle jako hrdina a ostřílený alko-veterán.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Kolik spoluúčastníků mám očekávat?</h5>
|
|
<p class="card-text">Zatím je kapacita závodu 50 účastníků.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Kolik lahváčů do sebe po cestě kopnu?</h5>
|
|
<p class="card-text">Celkem jsou 4 čekárny a v každé padne jeden lahváč.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">A co panákové?</h5>
|
|
<p class="card-text">To já upřímě nevím. Záleží na tvém skóre v soutěžích.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Jaká je trasa závodu?</h5>
|
|
<p class="card-text"></p>
|
|
<img src="/public/trasa.png" class="card-img-bottom"></img>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Co když jsem zde svůj dotaz nenašel?</h5>
|
|
<p class="card-text">Tak neváhej a kontaktuj nás na sociálních sítích nebo emailu, rádi pomůžeme.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
<div class="container">
|
|
<img class="logo" src="/public/logo.svg"></img>
|
|
</div>
|
|
<div class="container info text-center">
|
|
<div class="row">
|
|
<h1 class="col val">
|
|
<b>KDY?</b>
|
|
<br />
|
|
4.5.2024
|
|
</h1>
|
|
<div class="col"></div>
|
|
<h1 class="col val">
|
|
<b>KDE?</b>
|
|
<br />
|
|
Sobkovice
|
|
</h1>
|
|
<div class="col"></div>
|
|
<h1 class="col val">
|
|
<b>CENA</b>
|
|
<br />
|
|
690 kč
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div class="container text">
|
|
<p>Vítej člověče! Momentálně se nacházíš na oficiální stránce závodu ALKÁTOR RACE.</p>
|
|
<p>Závod kterej prověří tvoje tělo v celým spektru, a tím myslím opravdu celý spektrum, od bicepsů, přes prostor mezi mozkovými hemisférami, tam totiž vzniká kreativita, až po játra.</p>
|
|
<p>Pohybem se tady moc nešetří, teda pokud zrovna nesedíš v čekárně. Alkoholem se tady taky moc nešetří, a to zvlášť, když sedíš v čekárně.</p>
|
|
<p>Začínáš se v tom ztrácet? neboj, já taky. Budeš se plazit v bahně (když náhodou upadneš přímo do louže s bahnem). Šipky, ruleta, švihadlo, pneumatiky, quiz, skok v pytli a mnohé další disciplíny, prověří tvou žízeň, fyzickou výdrž, logické myšlení a alkoholovou toleranci organismu.</p>
|
|
<p>"Přelez, přeskoč, podlez, vypij! Tedy pivo zdolávej čestně a statečně, ne abys vynechával panáky, natož abys švindloval!"</p>
|
|
<p>Rozhodně se podívej na FAQ sekci, zde na stránce, kde najdeš důležité informace týkající se závodu ALKÁTOR RACE, včetně mapy, ve které jsou vyznačeny všechny stanoviště.</p>
|
|
<p>Sportem ku chlastu!</p>
|
|
</div>
|
|
<div class="container text text-center">
|
|
<h2>Stále nevíš jestli se zůčastníš? přečti si náš <button type="button" class="btn btn-warning" onClick={(e) => this.togglefaq()}>FAQ</button></h2>
|
|
</div>
|
|
<div class="container text-center text">
|
|
<h1>Zahájení registrací 1.4.2024</h1>
|
|
</div>
|
|
{/*<form onSubmit={(e) => this.onSubmit(e)}>
|
|
<h1>Registrace</h1>
|
|
<div class="mb-3">
|
|
<label for="first_name" class="form-label">Jméno</label>
|
|
<input type="text" class="form-control" id="first_name" name="first_name" />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="last_name" class="form-label">Přijmení</label>
|
|
<input type="text" class="form-control" id="last_name" name="last_name" />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="email" class="form-label">Emailová adresa</label>
|
|
<input type="email" class="form-control" id="email" name="email" />
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="date_of_birth" class="form-label">Datum narození</label>
|
|
<input type="date" class="form-control" id="date_of_birth" name="date_of_birth" max={new Date().toJSON().slice(0, 10)} />
|
|
</div>
|
|
<div class="mb-3 form-check">
|
|
<input type="checkbox" class="form-check-input" id="agreement" name="agreement" />
|
|
<label class="form-check-label" for="agreement">Souhlas se zpracováním osobních údajů</label>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Odeslat</button>
|
|
</form>*/}
|
|
<div class="container text-center social">
|
|
<div class="row">
|
|
<a class="col-lg-3" style={{"color": "black"}} href="mailto:info@alkator.cz"><b>info@alkator.cz</b></a>
|
|
<a class="col-lg-3" href="https://www.facebook.com/AlkatorRace"><img height="40px" src="/public/fb_logo.svg" /></a>
|
|
<a class="col-lg-3" href="https://www.youtube.com/@AlkatorRace"><img height="40px" src="/public/youtube_logo.svg"/></a>
|
|
<a class="col-lg-3" href="https://www.instagram.com/alkator_race/"><img height="40px" src="/public/instagram_logo.svg" /></a>
|
|
</div>
|
|
</div>
|
|
<div class="container video">
|
|
<iframe width="100%" height="800px" src="https://www.youtube.com/embed/H1UeXTBpsXw?si=kkh2_BBJXw56gVaP" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="true"></iframe>
|
|
</div>
|
|
<div class="container video">
|
|
<iframe width="100%" height="800px" src="https://www.youtube.com/embed/v3r2IAPdFFQ?si=kkh2_BBJXw56gVaP" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="true"></iframe>
|
|
</div>
|
|
<div class="container text">
|
|
IČ: 212 44 863<br />
|
|
Nejsme plátci DPH.<br />
|
|
Název společnosti: Zhoor s.r.o.<br />
|
|
sídlo: Červenovodská 548, Králíky, 561 69<br />
|
|
Číslo účtu: 131-2219860207/0100<br />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
const root = createRoot(
|
|
document.getElementById('root')
|
|
);
|
|
root.render(<Main />); |