initial commit

Css/choix.css

@@ -0,0 +1,125 @@
+
+*{
+    margin: 0;
+}
+
+body{
+    background-image: url("../img/91657.jpg");
+    background-size: cover;
+}
+
+.topbar{
+    background-image: url("../img/91657.jpg");
+}
+
+.topbar{
+    background-color: black;
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: solid 2px purple;
+}
+
+.topbar a{
+    color: white;
+    text-decoration: none;
+    padding: 10px;
+    margin: 0 10px 0 0;
+    font-weight: 900;
+    font-size: 17px;
+}
+
+
+.topbar a:hover{
+    background-color: pink;
+    border-radius: 15px;
+    color: #0d134b;
+}
+
+
+.topbar .nav .active a {
+    color: yellow;
+}
+
+.nav {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.topbar .titre{
+    font-size: 17px;
+    padding: 10px;
+    font-weight: bold;
+    text-transform: uppercase;
+     color: pink;
+}
+
+.topbar .titre:hover{
+    background-color: pink;
+    border-radius: 15px;
+    color: #0d134b;
+
+}
+
+.bouton
+{
+    
+    text-align: center;
+    align-items: center;
+    
+}
+
+.bouton a{
+    border-radius: 10px;
+    padding: 10px;
+}
+
+.titre{
+    color: white;}
+
+
+.container {
+        min-height: 90vh;
+        overflow: hidden;
+        display: flex;
+        justify-content: center; 
+        align-items: center;
+    }
+
+.section{
+    height: 300px;
+    text-align: center;
+}
+
+
+.bouton {
+    display: flex;
+    flex-direction: column;
+    align-items: center; 
+    margin-top: 20px; 
+}
+
+.bouton a {
+    border-radius: 10px;
+    padding: 10px;
+    margin-top: 10px; 
+    width: 150px; 
+    text-decoration: none;
+    background-color: pink;
+    color: #0d134b;
+    border: solid 5px purple;
+}
+
+.bouton a:hover{
+    background-color: purple;
+    border: solid 5px pink;
+    color: white;
+
+}
+
+
+
+
+
+

Css/main.css

@@ -0,0 +1,115 @@
+
+
+:root{
+    --title: #f8c27a;
+    --textShadow: 0 2px 2px rbga(0,0,0,.7);
+    --boxShadow: 0 0px 10px rgba(0,0,0,.2)
+}
+
+*
+{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body{
+    font-size: 14px;
+    width: 100vw;
+    overflow: hidden;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: sans-serif;
+ background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
+}
+
+.container
+{
+    background-color: rgba(255,255,255,0.2);
+    padding: 20px;
+    border-radius: 5px;
+    text-align: center;
+    box-shadow: var(--boxShadow);
+}
+
+h1{
+    font-family: 'Anton', sans-serif;
+font-family: 'Fjalla One', sans-serif;
+font-family: 'Kanit', sans-serif;
+font-family: 'Lobster', cursive;
+font-family: 'Rubik Wet Paint', cursive;
+font-family: 'Secular One', sans-serif;
+}
+
+
+p{
+    font-family: 'Luckiest Guy', cursive;
+
+    font-family: 'Quicksand', sans-serif;
+}
+
+.vies
+{
+    margin: 10px;
+}
+
+ion-icon
+{
+    font-size: 50px;
+    fill: rgb(255, 0, 0);
+}
+
+#inputBox
+{
+    background-color: #2acefc;
+    padding: 15px;
+    border: 5px;
+}
+
+#inputBox label 
+{
+    display: block;
+    margin-bottom: 8px;
+}
+
+input,
+button{
+    outline: none;
+    border: none;
+    padding: 3px 20px;
+    border-radius: 5px;
+}
+
+button
+{
+    background-color: teal;
+    color: white;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+button:hover{
+    transform: translateY(-2px);
+    background-color: rgb(3, 158, 158);
+}
+
+p#message
+{
+    margin: 20px auto 0 auto;
+}
+
+#rejouer
+{
+    display: none;
+    margin: 5px auto 0 auto;
+}
+
+#detail
+{
+    font-weight: bold;
+    font-size: 12px;
+    margin: 5px auto 0 auto;
+}
+

Css/style.css

@@ -0,0 +1,160 @@
+
+* {
+    margin: 0;
+}
+
+
+body, html {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    overflow: hidden;;
+}
+
+
+body{
+    background-image: url("../img/91657.jpg");
+    background-size: cover;
+}
+
+.header{
+    position: relative;
+}
+
+
+.topbar{
+     background-image: url("../img/91657.jpg");
+    background-color: black;
+    padding: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: solid 2px purple;
+}
+
+.topbar a{
+    color: white;
+    text-decoration: none;
+    padding: 10px;
+    margin: 0 10px 0 0;
+    font-weight: 900;
+    font-size: 17px;
+}
+
+
+.topbar a:hover{
+    background-color: pink;
+    border-radius: 15px;
+    color: #0d134b;
+}
+
+
+.topbar .titre{
+    font-size: 17px;
+    padding: 10px;
+    font-weight: bold;
+    text-transform: uppercase;
+     color: pink;
+}
+
+.topbar .titre:hover{
+    background-color: pink;
+    border-radius: 15px;
+    color: #0d134b;
+
+}
+
+ 
+.container{
+    position: absolute;
+    width: 100%;
+    height: 841px;
+    box-sizing: border-box;
+}
+
+
+.section{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    text-align: center;
+    width: 30%;
+}
+
+.section .titre-h3{
+    color: white;
+}
+
+.play{
+    background-color: pink;
+    padding: 20px;
+    border-radius: 30px;
+    display: inline-block;
+    text-align: center;
+    width: 100px;
+    height: 15px;
+    text-decoration: none;
+    margin-top: 60px;
+    font-weight: bold;
+    text-transform: uppercase;
+    color: #0d134b;
+    border: solid 5px purple;
+
+}
+
+.play:hover{
+    background-color: purple;
+    border: solid 5px pink;
+    color: white;
+
+}
+
+
+
+    
+
+@media (max-width: 522px){
+    .topbar {
+        background-color: #1a237e;
+        padding: 15px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .topbar .titre {
+        margin-bottom: 18px;
+        font-size: 22px;
+    }
+    
+    .nav {
+        display: flex;
+        flex-direction: column;  
+        justify-content: flex-end;
+        margin-top: 20px;
+    }
+
+    .nav a{
+        text-align: center;
+        margin-top: 5px;
+        padding: 7px;
+    }
+
+    .topbar{
+        position: relative;
+        text-align: center;
+    }
+
+    .topbar a{
+        text-align: center;
+    }
+      
+      .section {
+        margin-top: 80px;
+        width: 310px;
+
+      }
+  
+ }
+   

Js/dur.js

@@ -0,0 +1,105 @@
+// Element du DOM
+
+const divVies = document.querySelector('.vies');
+const message = document.getElementById("message");
+const formulaire = document.getElementById('inputBox');
+const input = document.getElementById('number');
+const essayerbtn = document.getElementById('essayerBtn');
+const rejouebtn = document.getElementById('rejouer');
+const body = document.getElementsByTagName('body')[0];
+
+// Modèle des coeurs
+
+const coeurvide = '<ion-icon name="heart-outline"></ion-icon>';
+const coeurplein = '<ion-icon name="heart"></ion-icon>';
+
+// Fond
+
+const froid = 'linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)';
+const tiede = 'linear-gradient(to top, #fddb92 0%, #d1fdff 100%)';
+const chaud = 'linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)';
+const treschaud = 'linear-gradient(to top, #ff0844 0%, #ffb199 100%)';
+
+const win = ' linear-gradient(to right, #f83600 0%, #f9d423 100%)';
+const loose = ' linear-gradient(to top, #e6b980 0%, #eacda3 100%)';
+
+// Play
+
+const play = () => {
+    const randomNumber = Math.floor(Math.random() * 501);
+    const totalVies = 11;
+    let vies = totalVies;
+
+    // Ajout de l'affichage initial des essais restants
+    const essaisRestantsSpan = document.getElementById("essaisRestants");
+    essaisRestantsSpan.textContent = vies;
+
+    console.log(randomNumber);
+
+    // Actualisation à chaque essaie
+    formulaire.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const valeurInput = parseInt(input.value);
+
+        if (valeurInput < 0 || valeurInput > 501) return;
+
+        if (valeurInput === randomNumber) {
+            body.style.backgroundImage = win;
+            message.textContent = `Bravo! Le nombre était bien ${randomNumber}.`;
+            rejouebtn.style.display = "block";
+            essayerbtn.setAttribute("disabled", "");
+        } else {
+            if (randomNumber < valeurInput + 3 && randomNumber > valeurInput - 3) {
+                body.style.backgroundImage = treschaud;
+                message.textContent = "C'est brulant!!!🔥🔥🔥";
+            } else if (randomNumber < valeurInput + 6 && randomNumber > valeurInput - 6) {
+                body.style.backgroundImage = chaud;
+                message.textContent = "C'est Chaud!🔥";
+            } else if (randomNumber < valeurInput + 11 && randomNumber > valeurInput - 11) {
+                body.style.backgroundImage = tiede;
+                message.textContent = "C'est tiède😑";
+            } else {
+                body.style.backgroundImage = froid;
+                message.textContent = "C'est froid🥶";
+            }
+            vies--;
+            verifyLoose();
+        }
+
+        actualiseCoeurs(vies);
+    });
+
+    const verifyLoose = () => {
+        essaisRestantsSpan.textContent = vies;
+
+        if (vies === 0) {
+            body.style.backgroundImage = loose;
+            body.style.color = '#990000';
+            essayerbtn.setAttribute("disabled", "");
+            message.textContent = `Vous avez perdu, le nombre était ${randomNumber}.`;
+            rejouebtn.style.display = "block";
+        }
+    };
+
+    const actualiseCoeurs = (vies) => {
+        divVies.innerHTML = "";
+        let tableauVies = [];
+        for (let i = 0; i < vies; i++) {
+            tableauVies.push(coeurplein);
+        }
+        for (let i = 0; i < totalVies - vies; i++) {
+            tableauVies.push(coeurvide);
+        }
+        tableauVies.forEach(coeur => {
+            divVies.innerHTML += coeur;
+        });
+    };
+    actualiseCoeurs(vies);
+
+    rejouebtn.addEventListener('click', () => {
+        message.style.display = "block";
+        document.location.reload(true);
+    });
+};
+
+play();

Js/facile.js

@@ -0,0 +1,103 @@
+//Element du DOM
+
+const divVies = document.querySelector('.vies');
+const message = document.getElementById("message");
+const formulaire = document.getElementById('inputBox');
+const input = document.getElementById('number');
+const essayerbtn = document.getElementById('essayerBtn');
+const rejouebtn = document.getElementById('rejouer');
+const body = document.getElementsByTagName('body')[0];
+
+// modèle des coeurs
+const coeurvide = '<ion-icon name="heart-outline"></ion-icon>'
+const coeurplein = '<ion-icon name="heart"></ion-icon>'
+
+// fond
+const froid = 'linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)';
+const tiede = 'linear-gradient(to top, #fddb92 0%, #d1fdff 100%)';
+const chaud = 'linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)';
+const treschaud = 'linear-gradient(to top, #ff0844 0%, #ffb199 100%)';
+
+const win = ' linear-gradient(to right, #f83600 0%, #f9d423 100%)';
+const loose = ' linear-gradient(to top, #e6b980 0%, #eacda3 100%)';
+
+// Play
+
+const play = () => {
+    const randomNumber = Math.floor(Math.random() * 101);
+    const totalVies = 6;
+    let vies = totalVies;
+
+    // Ajout de l'affichage initial des essais restants
+    const essaisRestantsSpan = document.getElementById("essaisRestants");
+    essaisRestantsSpan.textContent = vies;
+
+    console.log(randomNumber);
+
+    // Actualisation à chaque essaie
+    formulaire.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const valeurInput = parseInt(input.value);
+
+        if (valeurInput < 0 || valeurInput > 100) return;
+
+        if (valeurInput === randomNumber) {
+            body.style.backgroundImage = win;
+            message.textContent = `Bravo! Le nombre était bien ${randomNumber}.`;
+            rejouebtn.style.display = "block";
+            essayerbtn.setAttribute("disabled", "");
+        } else {
+            if (randomNumber < valeurInput + 3 && randomNumber > valeurInput - 3) {
+                body.style.backgroundImage = treschaud;
+                message.textContent = "C'est brulant!!!🔥🔥🔥";
+            } else if (randomNumber < valeurInput + 6 && randomNumber > valeurInput - 6) {
+                body.style.backgroundImage = chaud;
+                message.textContent = "C'est Chaud!🔥";
+            } else if (randomNumber < valeurInput + 11 && randomNumber > valeurInput - 11) {
+                body.style.backgroundImage = tiede;
+                message.textContent = "C'est tiède😑";
+            } else {
+                body.style.backgroundImage = froid;
+                message.textContent = "C'est froid🥶";
+            }
+            vies--;
+            verifyLoose();
+        }
+
+        actualiseCoeurs(vies);
+    })
+
+    const verifyLoose = () => {
+        essaisRestantsSpan.textContent = vies;
+
+        if (vies === 0) {
+            body.style.backgroundImage = loose;
+            body.style.color = '#990000';
+            essayerbtn.setAttribute("disabled", "");
+            message.textContent = `Vous avez perdu, le nombre était ${randomNumber}.`;
+            rejouebtn.style.display = "block";
+        }
+    }
+
+    const actualiseCoeurs = (vies) => {
+        divVies.innerHTML = "";
+        let tableauVies = [];
+        for (let i = 0; i < vies; i++) {
+            tableauVies.push(coeurplein);
+        }
+        for (let i = 0; i < totalVies - vies; i++) {
+            tableauVies.push(coeurvide);
+        }
+        tableauVies.forEach(coeur => {
+            divVies.innerHTML += coeur;
+        })
+    }
+    actualiseCoeurs(vies);
+
+    rejouebtn.addEventListener('click', () => {
+        message.style.display = "block";
+        document.location.reload(true);
+    })
+}
+
+play();

Js/moyen.js

@@ -0,0 +1,103 @@
+//Element du DOM
+
+const divVies = document.querySelector('.vies');
+const message = document.getElementById("message");
+const formulaire = document.getElementById('inputBox');
+const input = document.getElementById('number');
+const essayerbtn = document.getElementById('essayerBtn');
+const rejouebtn = document.getElementById('rejouer');
+const body = document.getElementsByTagName('body')[0];
+
+// modèle des coeurs
+const coeurvide = '<ion-icon name="heart-outline"></ion-icon>'
+const coeurplein = '<ion-icon name="heart"></ion-icon>'
+
+// fond
+const froid = 'linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)';
+const tiede = 'linear-gradient(to top, #fddb92 0%, #d1fdff 100%)';
+const chaud = 'linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)';
+const treschaud = 'linear-gradient(to top, #ff0844 0%, #ffb199 100%)';
+
+const win = ' linear-gradient(to right, #f83600 0%, #f9d423 100%)';
+const loose = ' linear-gradient(to top, #e6b980 0%, #eacda3 100%)';
+
+//PLay
+
+const play = () => {
+    const randomNumber = Math.floor(Math.random() * 151);
+    const totalVies = 8;
+    let vies = totalVies;
+
+    // Ajout de l'affichage initial des essais restants
+    const essaisRestantsSpan = document.getElementById("essaisRestants");
+    essaisRestantsSpan.textContent = vies;
+
+    console.log(randomNumber);
+
+    // Actualisation à chaque essaie
+    formulaire.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const valeurInput = parseInt(input.value);
+
+        if (valeurInput < 0 || valeurInput > 151) return;
+
+        if (valeurInput === randomNumber) {
+            body.style.backgroundImage = win;
+            message.textContent = `Bravo! Le nombre était bien ${randomNumber}.`;
+            rejouebtn.style.display = "block";
+            essayerbtn.setAttribute("disabled", "");
+        } else {
+            if (randomNumber < valeurInput + 3 && randomNumber > valeurInput - 3) {
+                body.style.backgroundImage = treschaud;
+                message.textContent = "C'est brulant!!!🔥🔥🔥";
+            } else if (randomNumber < valeurInput + 6 && randomNumber > valeurInput - 6) {
+                body.style.backgroundImage = chaud;
+                message.textContent = "C'est Chaud!🔥";
+            } else if (randomNumber < valeurInput + 11 && randomNumber > valeurInput - 11) {
+                body.style.backgroundImage = tiede;
+                message.textContent = "C'est tiède😑";
+            } else {
+                body.style.backgroundImage = froid;
+                message.textContent = "C'est froid🥶";
+            }
+            vies--;
+            verifyLoose();
+        }
+
+        actualiseCoeurs(vies);
+    })
+
+    const verifyLoose = () => {
+        essaisRestantsSpan.textContent = vies;
+
+        if (vies === 0) {
+            body.style.backgroundImage = loose;
+            body.style.color = '#990000';
+            essayerbtn.setAttribute("disabled", "");
+            message.textContent = `Vous avez perdu, le nombre était ${randomNumber}.`;
+            rejouebtn.style.display = "block";
+        }
+    }
+
+    const actualiseCoeurs = (vies) => {
+        divVies.innerHTML = "";
+        let tableauVies = [];
+        for (let i = 0; i < vies; i++) {
+            tableauVies.push(coeurplein);
+        }
+        for (let i = 0; i < totalVies - vies; i++) {
+            tableauVies.push(coeurvide);
+        }
+        tableauVies.forEach(coeur => {
+            divVies.innerHTML += coeur;
+        })
+    }
+    actualiseCoeurs(vies);
+
+    rejouebtn.addEventListener('click', () => {
+        message.style.display = "block";
+        document.location.reload(true);
+    })
+}
+
+play();

choix.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+ <html lang="en">
+ <head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>Choix / Numérologie</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' type='text/css' href='Css/choix.css'>
+ </head>
+ <body>
+
+    <header class="header">
+        <div class="topbar">
+            <p class="titre">Numérologie</p>
+            <nav class="nav">
+                <a href="index.html">Accueil</a>
+                <a href="#">Règles</a>
+                <a href="#">Contact</a>
+            </nav>
+        </div>
+     </header>
+
+
+     <div class="container">
+         <div class="section">
+         <h1 class="titre">Choisi(e) ton niveau</h1>
+
+         <div class="bouton">
+     <a class="choix" href="facile.html">Facile</a> 
+     <a class="choix" href="moyen.html">Moyen</a> 
+     <a class="choix" href="dur.html">Dur</a> <br>
+     <a class="choix sortir" href="index.html">Sortir</a>
+    </div>
+    </div>
+    </div>
+
+       
+     
+    
+     
+
+   
+
+    
+     
+ </body>
+ </html>

dur.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>Dur / Numérologie</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' type='text/css' href='Css/main.css'>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Anton&family=Fjalla+One&family=Kanit:ital,wght@0,100;1,800&family=Lobster&family=Rubik+Wet+Paint&family=Secular+One&display=swap');
+        </style>
+    
+</head>
+<header>
+       
+        
+
+</header>
+
+<body>
+    <div class="container">
+        <h1>Numérologie</h1>
+        <p>Trouve le bon nombre entre 0-500! Tu as <span id="essaisRestants">11</span> essais!</p>
+        <div class="vies">
+            <ion-icon name="heart-outline"></ion-icon>
+            <ion-icon name="heart"></ion-icon>
+                                
+            
+                                 <!-- Zone de jeu -->
+        </div>
+        <form id="inputBox">
+            <label for="number"> Entre un nombre:</label>
+            <input type="number" id="number" min="0" max="500" required>
+            <button type="submit" id="essayerBtn">Essayer</button>
+            <p id="message"></p>
+            <button id="rejouer">re-jouer</button>
+        </form>
+        <p id="detail"> * Brulant = &plusmn; 2;  Chaud = &plusmn; 5 ;  Tiède = &plusmn; 10 ;  Froid = + de 10.</p>
+        <br><a class="aca" href="index.html">Sortir</a>
+    </div>
+                               
+    
+                                <!-- Bouton exit -->
+                                   
+       
+                                 <!-- Ajout des icon -->
+
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+<script src="Js/dur.js"></script>
+</body>
+</html>

facile.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>Facile / Numérologie</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' type='text/css' href='Css/main.css'>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Anton&family=Fjalla+One&family=Kanit:ital,wght@0,100;1,800&family=Lobster&family=Rubik+Wet+Paint&family=Secular+One&display=swap');
+        </style>
+    
+</head>
+<header>
+       
+        
+
+</header>
+
+<body>
+    <div class="container">
+        <h1>Numérologie</h1>
+        <p>Trouve le bon nombre entre 0-100! Tu as <span id="essaisRestants">6</span> essais!</p>
+
+        <div class="vies">
+            <ion-icon name="heart-outline"></ion-icon>
+            <ion-icon name="heart"></ion-icon>
+                                
+            
+                                 <!-- Zone de jeu -->
+        </div>
+        <form id="inputBox">
+            <label for="number"> Entre un nombre:</label>
+            <input type="number" id="number" min="0" max="100" required>
+            <button type="submit" id="essayerBtn">Essayer</button>
+            <p id="message"></p>
+            <button id="rejouer">re-jouer</button>
+        </form>
+        <p id="detail"> * Brulant = &plusmn; 2;  Chaud = &plusmn; 5 ;  Tiède = &plusmn; 10 ;  Froid = + de 10.</p>
+        <br><a class="aca" href="index.html">Sortir</a>
+    </div>
+                               
+    
+                                <!-- Bouton exit -->
+                                   
+       
+                                 <!-- Ajout des icon -->
+
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+<script src="Js/facile.js"></script>
+</body>
+</html>

index.html

@@ -0,0 +1,31 @@
+ <!DOCTYPE html>
+ <html lang="en">
+ <head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>Home / Numérologie</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' type='text/css' href='Css/style.css'>
+ </head>
+ <body>
+     <header class="header">
+        <div class="topbar">
+            <p class="titre">Numérologie</p>
+            <nav class="nav">
+                <a href="/">Accueil</a>
+                <a href="choix.html" class="active">Jouer</a>
+                <a href="#">Règles</a>
+                <a href="#">Contact</a>
+            </nav>
+        </div>
+     </header>
+
+        <div class="container">
+            <div class="section">
+            <h3 class="titre-h3">Plongez dans le jeu de la numérologie ! <br> Trouvez le nombre secret en déchiffrant les tranches données. </h3> <h3 class="titre-h3"> <br> Êtes-vous prêt à percer les mystères des nombres ?</h3>
+             <a href="choix.html" class="play">Play</a>   
+            </div>
+            </div> 
+     
+ </body>
+ </html>

moyen.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>Moyen / Numérologie</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' type='text/css' href='Css/main.css'>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Anton&family=Fjalla+One&family=Kanit:ital,wght@0,100;1,800&family=Lobster&family=Rubik+Wet+Paint&family=Secular+One&display=swap');
+        </style>
+    
+</head>
+<header>
+       
+        
+
+</header>
+
+<body>
+    <div class="container">
+        <h1>Numérologie</h1>
+        <p>Trouve le bon nombre entre 0-150! Tu as <span id="essaisRestants">8</span> essais!</p>
+        <div class="vies">
+            <ion-icon name="heart-outline"></ion-icon>
+            <ion-icon name="heart"></ion-icon>
+                                
+            
+                                 <!-- Zone de jeu -->
+        </div>
+        <form id="inputBox">
+            <label for="number"> Entre un nombre:</label>
+            <input type="number" id="number" min="0" max="150" required>
+            <button type="submit" id="essayerBtn">Essayer</button>
+            <p id="message"></p>
+            <button id="rejouer">re-jouer</button>
+        </form>
+        <p id="detail"> * Brulant = &plusmn; 2;  Chaud = &plusmn; 5 ;  Tiède = &plusmn; 10 ;  Froid = + de 10.</p>
+        <br><a class="aca" href="index.html">Sortir</a>
+    </div>
+                               
+    
+                                <!-- Bouton exit -->
+                                   
+       
+                                 <!-- Ajout des icon -->
+
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+<script src="Js/moyen.js"></script>
+</body>
+</html>