diff --git a/src/templates/frontend.jinja b/src/templates/frontend.jinja index 10f8d93655ffd764ed8d857447b264515eba75bc..f036bc6158310a0665936b3c205beeb6c8570817 100644 --- a/src/templates/frontend.jinja +++ b/src/templates/frontend.jinja @@ -21,6 +21,14 @@ document.getElementById("logo_left").src="../"+ data["current_team_logos"][0]; document.getElementById("logo_right").src="../"+ data["current_team_logos"][1]; + document.getElementById("oponent-img-left").src="../"+ data["current_team_logos"][0]; + document.getElementById("oponent-img-right").src="../"+ data["current_team_logos"][1]; + + document.getElementById("oponent-name-left").innerHTML=data["current_teams"][0]; + document.getElementById("oponent-name-right").innerHTML=data["current_teams"][1]; + + + answers_inner_html = "" for(answer in data["answers"]){ answer = data["answers"][answer]; @@ -50,16 +58,25 @@ document.getElementById("intro").style.display = "block"; document.getElementById("player_select").style.display = "none"; document.getElementById("final_screen").style.display = "none"; + document.getElementById("oponents").style.display = "none" } if(state == "player_select"){ document.getElementById("intro").style.display = "none"; document.getElementById("final_screen").style.display = "none"; document.getElementById("player_select").style.display = "block"; + document.getElementById("oponents").style.display = "none" } if(state == "final_screen"){ document.getElementById("intro").style.display = "none"; document.getElementById("player_select").style.display = "none"; document.getElementById("final_screen").style.display = "block" + document.getElementById("oponents").style.display = "none" + } + if(state == "oponents"){ + document.getElementById("intro").style.display = "none"; + document.getElementById("player_select").style.display = "none"; + document.getElementById("final_screen").style.display = "none"; + document.getElementById("oponents").style.display = "block" } @@ -80,7 +97,11 @@ } #final_screen{ - display:none; + display: none; + } + + #oponents{ + display: none; } h1, h2, h3, h4, h5 .h1, .h2, .h3, .h4, .h5{ @@ -112,6 +133,10 @@ margin-bottom: 7px; } + .largest{ + font-size: 150px; + } + .xxl{ font-size: 50px; } @@ -258,6 +283,23 @@ </div> </div> + <div class="container-fluid" id="oponents"> + <div class="row"> + <div class="col-5 text-center"> + <img id="oponent-img-left" width="500"> + <h2 id="oponent-name-left"></h2> + </div> + <div class="col-2 text-center"> + <h1 class="ccc-green largest">vs</h1> + </div> + <div class="col-5 text-center"> + <img id="oponent-img-right" width="500"> + <h2 id="oponent-name-right"></h2> + </div> + </div> + </div> + + </body> diff --git a/src/templates/layout.jinja b/src/templates/layout.jinja index 5602aa1e994c3372cbb08203b0e2a14bfa21cd9a..a7e0ccf91288953a769c781df6608ce04a3e13a1 100644 --- a/src/templates/layout.jinja +++ b/src/templates/layout.jinja @@ -27,6 +27,7 @@ <form method="POST" class="my-0"> <div class="btn-group"> <button class="btn btn-light" type="submit" formaction="/fe_intro">Intro</button> + <button class="btn btn-light" type="submit" formaction="/fe_oponents">Gegner</button> <button class="btn btn-light" type="submit" formaction="/fe_running">Aktuelle Runde</button> <button class="btn btn-light" type="submit" formaction="/fe_final">Ende</button> </div>