lucasvbr/nuitdelinfo-2023
1
0
Fork 0
mirror of https://github.com/LucasVbr/nuitdelinfo-2023.git synced 2026-05-13 17:21:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

pour toi loulou

Browse Source
This commit is contained in:
joniboy74prog
2023-12-08 05:31:15 +01:00
parent 5bd45d7a6f
commit f234dbb239
6 changed files with 86 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/index.html
+11 -9
View File
@@ -8,6 +8,8 @@
<link rel="stylesheet" href="style/init.css"> <link rel="stylesheet" href="style/init.css">
<link rel="stylesheet" href="style/navbarHorizontal.css"> <link rel="stylesheet" href="style/navbarHorizontal.css">
<link rel="stylesheet" href="style/main.css"> <link rel="stylesheet" href="style/main.css">
<script src="./src/konami.js" type="module" defer></script>
</head> </head>
<body id="accueil"> <body id="accueil">
@@ -26,15 +28,15 @@
</header> </header>
<main> <main>
<h1>Sauvons la planète,</h1> <h1>Sauvons la planète,</h1>
<h2>distinguons la réalité<br>des idées reçues.</h2> <h2>distinguons la réalité<br>des idées reçues.</h2>
<p id="sous-pres"> <p id="sous-pres">
Défiez les idées reçues sur l'écologie avec notre quiz captivant ! Défiez les idées reçues sur l'écologie avec notre quiz captivant !
</br> </br>
Testez-vous dès maintenant pour une expérience éducative et Testez-vous dès maintenant pour une expérience éducative et
amusante. amusante.
</p> </p>
<button id="btnjouer"><a href="./jouer.html">Essayer ce jeu</a></button> <button id="btnjouer"><a href="./jouer.html">Essayer ce jeu</a></button>
</main> </main>
front/jouer.html
+50 -161
View File
@@ -1,204 +1,93 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon site ecolo | Jeu </title> <title>Mon site ecolo | Jeu </title>
<link rel="icon" href="img/logo.svg" type="image/svg"> <link rel="icon" href="img/logo.svg" type="image/svg">
<link rel="stylesheet" href="style/init.css"> <link rel="stylesheet" href="style/init.css">
<link rel="stylesheet" href="style/navbarVertical.css"> <link rel="stylesheet" href="style/navbarVertical.css">
<link rel="stylesheet" href="style/jeu.css"> <link rel="stylesheet" href="style/jeu.css">
<script src="./src/score.js" defer></script>
</head> </head>
<body> <body>
<nav class="navbar" id="navbar"> <nav class="navbar" id="navbar">
<div class="nav-links"> <div class="nav-links">
<div class="logo"> <div class="logo">
<img src="./img/logo.svg" alt="Logo" width="40"> <img src="./img/logo.svg" alt="Logo" width="40">
</div> </div>
<a href="#" class="nav-link">Commerces</a> <a href="#" class="nav-link">Commerces</a>
<a href="#" class="nav-link">Habitats</a> <a href="#" class="nav-link">Habitats</a>
<a href="#" class="nav-link">Phénomènes</a> <a href="#" class="nav-link">Phénomènes</a>
<a href="#" class="nav-link">Energies</a> <a href="#" class="nav-link">Energies</a>
<a href="#" class="nav-link">Transports</a> <a href="#" class="nav-link">Transports</a>
</div> </div>
<div class="arrow"> <div class="arrow">
<label for="toggleNavbar"> <label for="toggleNavbar">
<img src="./img/arrow.svg" alt="arrow" width="10"> <img src="./img/arrow.svg" alt="arrow" width="10">
</label> </label>
<input id="toggleNavbar" type="checkbox"> <input id="toggleNavbar" type="checkbox">
</div> </div>
</nav> </nav>
<div id="starContainer"> <div id="starContainer">
<div class="star" id="star5"></div> <div class="star" id="star5"></div>
<div class="star" id="star4"></div> <div class="star" id="star4"></div>
<div class="star" id="star3"></div> <div class="star" id="star3"></div>
<div class="star" id="star2"></div> <div class="star" id="star2"></div>
<div class="star" id="star1"></div> <div class="star" id="star1"></div>
</div> </div>
<div class="container"> <div class="container">
<div class="choices"> <div class="choices">
<<<<<<< HEAD
<section id="left">
<img class="image" id="imgleft" src="./img/imgleft.png" alt="imgleft">
</section>
||||||| 05f6282
<section id="left">
<img class="image" id="imgleft" src="./img/imgleft.png"
alt="imgleft">
</section>
=======
<section id="left"> <section id="left">
<img class="image" id="imgleft" src="./img/imgleft.png" <img class="image" id="imgleft" src="./img/imgleft.png"
alt="imgleft"> alt="imgleft">
<div class="text-overlay">Votre texte ici</div> <div class="text-overlay">Votre texte ici</div>
</section> </section>
>>>>>>> 0d68aaf3e621087d415377c9f42334f300c50e68
<<<<<<< HEAD
<section id="right">
<img class="image" id="imgright" src="./img/imgright.webp" alt="imgright">
</section>
||||||| 05f6282
<section id="right">
<img class="image" id="imgright" src="./img/imgright.webp"
alt="imgright">
</section>
=======
<section id="right"> <section id="right">
<img class="image" id="imgright" src="./img/imgright.webp" <img class="image" id="imgright" src="./img/imgright.webp"
alt="imgright"> alt="imgright">
<div class="text-overlay">Votre texte ici</div> <div class="text-overlay">Votre texte ici</div>
</section> </section>
>>>>>>> 0d68aaf3e621087d415377c9f42334f300c50e68
</div> </div>
<div class="question"> <div class="question">
<h2>Question</h2> <h2>Question</h2>
<p>Lorem ipsum</p> <p>Lorem ipsum</p>
<button class="hide">Question suivante</button> <button class="hide">Question suivante</button>
</div> </div>
</div>
</div> <script>
<script> const rightSection = document.getElementById('right');
const rightSection = document.getElementById('right'); const leftSection = document.getElementById('left');
const leftSection = document.getElementById('left'); const buttonElement = document.querySelector('button');
const buttonElement = document.querySelector('button');
rightSection.addEventListener('click', () => { rightSection.addEventListener('click', () => {
rightSection.classList.remove('hide'); rightSection.classList.remove('hide');
leftSection.classList.add('hide'); leftSection.classList.add('hide');
buttonElement.classList.remove('hide'); buttonElement.classList.remove('hide');
}); });
leftSection.addEventListener('click', () => { leftSection.addEventListener('click', () => {
leftSection.classList.remove('hide'); leftSection.classList.remove('hide');
rightSection.classList.add('hide'); rightSection.classList.add('hide');
buttonElement.classList.remove('hide'); buttonElement.classList.remove('hide');
}); });
buttonElement.addEventListener('click', () => { buttonElement.addEventListener('click', () => {
augmenterCompteur(); augmenterCompteur();
buttonElement.classList.add('hide'); buttonElement.classList.add('hide');
rightSection.classList.remove('hide');
leftSection.classList.remove('hide');
});
let score = 20;
<<<<<<< HEAD
function augmenterCompteur() {
score += 5;
||||||| 05f6282
let score = 20;
=======
>>>>>>> 0d68aaf3e621087d415377c9f42334f300c50e68
<<<<<<< HEAD
if (score >= 5) {
document.getElementById('star1').style.visibility = 'visible';
}
if (score >= 10) {
document.getElementById('star2').style.visibility = 'visible';
}
if (score >= 15) {
document.getElementById('star3').style.visibility = 'visible';
||||||| 05f6282
function augmenterCompteur() {
score += 5;
if (score >= 5) {
document.getElementById('star1').style.visibility = 'visible';
}
if (score >= 10) {
document.getElementById('star2').style.visibility = 'visible';
}
if (score >= 15) {
document.getElementById('star3').style.visibility = 'visible';
}
if (score >= 20) {
document.getElementById('star4').style.visibility = 'visible';
}
if (score >= 25) {
document.getElementById('star5').style.visibility = 'visible';
}
if (score === 25) {
window.location.href = './easterEggEtoile.html';
}
=======
let score = 0;
function augmenterCompteur() {
score++;
if (score >= 5) {
document.getElementById('star1').style.visibility = 'visible';
}
if (score >= 10) {
document.getElementById('star2').style.visibility = 'visible';
}
if (score >= 15) {
document.getElementById('star3').style.visibility = 'visible';
}
if (score >= 20) {
document.getElementById('star4').style.visibility = 'visible';
}
if (score >= 25) {
document.getElementById('star5').style.visibility = 'visible';
}
if (score === 25) {
window.location.href = './easterEggEtoile.html';
}
>>>>>>> 0d68aaf3e621087d415377c9f42334f300c50e68
}
if (score >= 20) {
document.getElementById('star4').style.visibility = 'visible';
}
if (score >= 25) {
document.getElementById('star5').style.visibility = 'visible';
}
if (score === 25) {
window.location.href = './easterEggEtoile.html';
}
}
</script>
rightSection.classList.remove('hide');
leftSection.classList.remove('hide');
});
</script>
</body> </body>
</html> </html>
front/savoir.html
+20 -5
View File
@@ -28,27 +28,42 @@
<section> <section>
<h2>Commerce</h2> <h2>Commerce</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda debitis dolores eligendi, eum explicabo facilis fugit illum impedit in inventore natus nisi obcaecati odio quae, sequi. Modi quaerat reprehenderit rerum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda
debitis dolores eligendi, eum explicabo facilis fugit illum impedit
in inventore natus nisi obcaecati odio quae, sequi. Modi quaerat
reprehenderit rerum.</p>
</section> </section>
<section> <section>
<h2>Habitat</h2> <h2>Habitat</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam blanditiis deleniti impedit maxime perferendis quaerat quis. Assumenda beatae blanditiis deserunt ducimus explicabo illo, impedit ipsum iusto nemo reiciendis sunt?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam
blanditiis deleniti impedit maxime perferendis quaerat quis.
Assumenda beatae blanditiis deserunt ducimus explicabo illo, impedit
ipsum iusto nemo reiciendis sunt?</p>
</section> </section>
<section> <section>
<h2>Phénomènes naturels</h2> <h2>Phénomènes naturels</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis quisquam repellendus totam veritatis voluptatum. Debitis ea esse harum hic iure molestiae, officiis quam ut. Consectetur deserunt itaque neque omnis sed!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis
quisquam repellendus totam veritatis voluptatum. Debitis ea esse
harum hic iure molestiae, officiis quam ut. Consectetur deserunt
itaque neque omnis sed!</p>
</section> </section>
<section> <section>
<h2>Sources d’énergies</h2> <h2>Sources d’énergies</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto dignissimos dolor dolorem doloribus, dolorum eum eveniet inventore ipsum, labore laboriosam modi molestias mollitia nulla quia quo ratione tempore unde?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad
architecto dignissimos dolor dolorem doloribus, dolorum eum eveniet
inventore ipsum, labore laboriosam modi molestias mollitia nulla
quia quo ratione tempore unde?</p>
</section> </section>
<section> <section>
<h2>Transport</h2> <h2>Transport</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquam aperiam culpa delectus dignissimos iure iusto, nulla numquam sit. Adipisci aspernatur beatae cupiditate ipsa iste odio pariatur, perspiciatis praesentium reiciendis.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium
aliquam aperiam culpa delectus dignissimos iure iusto, nulla numquam
sit. Adipisci aspernatur beatae cupiditate ipsa iste odio pariatur,
perspiciatis praesentium reiciendis.</p>
</section> </section>
</main> </main>
front/style/easter eggs
-4
View File
@@ -1,4 +0,0 @@
Liste des easter eggs :
- Joyeux noël écologique ! : Répondez juste à toutes les questions du quizz
et une nouvelle page s'ouvre.
front/style/jeu.css
-21
View File
@@ -51,25 +51,6 @@ section {
z-index: 1; z-index: 1;
} }
.expanded {
position: absolute;
!important;
top: 0;
!important;
left: 0;
!important;
width: 100%;
!important;
}
/*#imgleft.expanded {*/
/* margin-right: -100vw;*/
/*}*/
/*#imgright.expanded {*/
/* margin-left: -100vw;*/
/*}*/
.image { .image {
object-fit: cover; object-fit: cover;
} }
@@ -85,12 +66,10 @@ section a {
#left { #left {
background-color: blue; background-color: blue;
/*background-image: url('');*/
} }
#right { #right {
background-color: red; background-color: red;
/*background-image: url('');*/
} }
.text-overlay { .text-overlay {
front/style/main.css
+5 -1
View File
@@ -5,7 +5,6 @@ body {
main { main {
display: inline-block; display: inline-block;
max-width: px;
margin: auto auto auto 191px; margin: auto auto auto 191px;
padding: 20px; padding: 20px;
} }
@@ -53,4 +52,9 @@ h2 {
border: none; border: none;
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
}
a {
text-decoration: none;
color: white;
} }