meiri/alkator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add FAQ

Browse Source
This commit is contained in:
Martin Quarda 2024-03-13 10:55:32 +01:00
parent 1e2c412449
commit 5bb9c0da74
3 changed files with 73 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/public/trasa.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

52
frontend/src/scripts/index.js
View File

@ -14,6 +14,7 @@ class Main extends Component {
this.state = { this.state = {
text: "", text: "",
status: "", status: "",
faq: false,
}; };
} }
onSubmit(event){ onSubmit(event){
@ -37,6 +38,9 @@ class Main extends Component {
} }
}); });
} }
togglefaq(){
this.setState({faq: !this.state.faq});
}
render(){ render(){
return ( return (
<div> <div>
@ -48,6 +52,40 @@ class Main extends Component {
<div class="absolute container-fluid alert alert-danger"> <div class="absolute container-fluid alert alert-danger">
{this.state.text} {this.state.text}
</div>} </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">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>
</div>
}
<div class="container"> <div class="container">
<img class="logo" src="/public/logo.svg"></img> <img class="logo" src="/public/logo.svg"></img>
</div> </div>
@ -75,6 +113,9 @@ class Main extends Component {
<div class="container text"> <div class="container text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Aliquam erat volutpat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Aliquam erat volutpat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</div> </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>
{/*<form class="container" onSubmit={(e) => this.onSubmit(e)}> {/*<form class="container" onSubmit={(e) => this.onSubmit(e)}>
<h1>Registrace</h1> <h1>Registrace</h1>
<div class="mb-3"> <div class="mb-3">
@ -98,8 +139,19 @@ class Main extends Component {
<label class="form-check-label" for="agreement">Souhlas se zpracováním osobních údajů</label> <label class="form-check-label" for="agreement">Souhlas se zpracováním osobních údajů</label>
</div> </div>
<button type="submit" class="btn btn-primary">Odeslat</button> <button type="submit" class="btn btn-primary">Odeslat</button>
<<<<<<< HEAD
</form>*/} </form>*/}
<div class="container kontakt text-center social"> <div class="container kontakt text-center social">
=======
</form>
<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/7WB4J_j-VhM?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 kontakt text-center">
>>>>>>> aa695fd (add FAQ)
<div class="row"> <div class="row">
<a class="col-lg-3" href="mailto:info@alkator.cz"><b>info@alkator.cz</b></a> <a class="col-lg-3" 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.facebook.com/AlkatorRace"><img height="40px" src="/public/fb_logo.svg" /></a>

21
frontend/src/styles/index.scss
View File

@ -50,4 +50,25 @@ form.container{
.kontakt > div > a { .kontakt > div > a {
margin:auto; margin:auto;
padding: 10px; padding: 10px;
}
.shadow {
background: rgba(0,0,0,0.4);
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
}
.faq {
z-index: 2;
top: 0;
bottom:0;
left:0;
right: 0;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
} }