tesgsegesgs

app.js

@@ -113,7 +113,9 @@ function gain(tirage){
     return 0
 }
 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)=>{

index.html

@@ -58,10 +58,13 @@
 
     <p>Banque : <span id="banque_score">1000</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">
-            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>
     <script type="text/javascript" src="app.js"></script>

master.css

@@ -1,5 +1,8 @@
+@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap');
+
 body{
     background-color: #03183a;
+    font-family: "Fredorka", sans-serif;
     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%;
     width: 100%;
     position: absolute;
@@ -84,8 +86,36 @@ body{
     align-items: center;
     justify-content: center;
 }
-.overlay-container{
+#overlay-rules > .overlay-container{
+    height: min-content;
+    padding: 2em;
+    border-radius: 20px;
+    opacity: 1;
     background-color: white;
     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;
+}