Browse Source

tesgsegesgs

master
alexandre.aboulin 3 years ago
parent
commit
74da87201e
  1. 4
      app.js
  2. 7
      index.html
  3. 40
      master.css

4
app.js

@ -113,7 +113,9 @@ function gain(tirage){
return 0 return 0
} }
function regles(){ function regles(){
//afficher règles let overlay = document.getElementById("overlay-rules")
if(overlay.style.display == "none") overlay.style.display = "flex"
else overlay.style.display = "none"
} }
input.addEventListener("input", (e)=>{ input.addEventListener("input", (e)=>{

7
index.html

@ -58,10 +58,13 @@
<p>Banque : <span id="banque_score">1000</span></p> <p>Banque : <span id="banque_score">1000</span></p>
<p>Vous : <span id="joueur_score"></span></p> <p>Vous : <span id="joueur_score"></span></p>
<button class="button" onclick="regles()">Règles</button>
<div class="overlay" style="display: none;"> <div id="overlay-rules" style="display: none;">
<div class="overlay-container"> <div class="overlay-container">
Règles <h1>Règles</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Est magni quam harum error, neque quo sapiente, perferendis totam consectetur earum, itaque ducimus eum eaque quis expedita omnis dignissimos amet molestias?</p>
<button class="button is-red" onclick="regles()">Fermer</button>
</div> </div>
</div> </div>
<script type="text/javascript" src="app.js"></script> <script type="text/javascript" src="app.js"></script>

40
master.css

@ -1,5 +1,8 @@
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap');
body{ body{
background-color: #03183a; background-color: #03183a;
font-family: "Fredorka", sans-serif;
margin: 0; margin: 0;
} }
@ -72,9 +75,8 @@ body{
} }
.overlay{ #overlay-rules{
background-color: black; background-color: rgb(0, 0, 0, 0.5);
opacity: 0.5;
height: 100%; height: 100%;
width: 100%; width: 100%;
position: absolute; position: absolute;
@ -84,8 +86,36 @@ body{
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.overlay-container{ #overlay-rules > .overlay-container{
height: min-content;
padding: 2em;
border-radius: 20px;
opacity: 1;
background-color: white; background-color: white;
width: 40vw; width: 40vw;
height: 20vh; }
.button{
border: none;
padding: 0.6em 0.8em;
border-radius: 10px;
}
.button.is-white{
background-color: white;
transition: 0.2s ease-in-out;
}
.button.is-white:hover{
background-color: rgb(241, 241, 241);
transition: 0.2s ease-in-out;
}
.button.is-red{
background-color: rgb(228, 97, 97);
transition: 0.2s ease-in-out;
color: white;
}
.button.is-red:hover{
background-color: rgb(209, 88, 88);
transition: 0.2s ease-in-out;
}
h1, p{
margin-top: 0;
} }
Loading…
Cancel
Save