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/navbarHorizontal.css">
<link rel="stylesheet" href="style/main.css">
<script src="./src/konami.js" type="module" defer></script>
</head>
<body id="accueil">
@@ -26,15 +28,15 @@
</header>
<main>
<h1>Sauvons la planète,</h1>
<h2>distinguons la réalité<br>des idées reçues.</h2>
<p id="sous-pres">
Défiez les idées reçues sur l'écologie avec notre quiz captivant !
</br>
Testez-vous dès maintenant pour une expérience éducative et
amusante.
</p>
<button id="btnjouer"><a href="./jouer.html">Essayer ce jeu</a></button>
<h1>Sauvons la planète,</h1>
<h2>distinguons la réalité<br>des idées reçues.</h2>
<p id="sous-pres">
Défiez les idées reçues sur l'écologie avec notre quiz captivant !
</br>
Testez-vous dès maintenant pour une expérience éducative et
amusante.
</p>
<button id="btnjouer"><a href="./jouer.html">Essayer ce jeu</a></button>
</main>
front/jouer.html
+50 -161
View File
@@ -1,204 +1,93 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon site ecolo | Jeu </title>
<link rel="icon" href="img/logo.svg" type="image/svg">
<link rel="stylesheet" href="style/init.css">
<link rel="stylesheet" href="style/navbarVertical.css">
<link rel="stylesheet" href="style/jeu.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon site ecolo | Jeu </title>
<link rel="icon" href="img/logo.svg" type="image/svg">
<link rel="stylesheet" href="style/init.css">
<link rel="stylesheet" href="style/navbarVertical.css">
<link rel="stylesheet" href="style/jeu.css">
<script src="./src/score.js" defer></script>
</head>
<body>
<nav class="navbar" id="navbar">
<nav class="navbar" id="navbar">
<div class="nav-links">
<div class="logo">
<img src="./img/logo.svg" alt="Logo" width="40">
</div>
<div class="logo">
<img src="./img/logo.svg" alt="Logo" width="40">
</div>
<a href="#" class="nav-link">Commerces</a>
<a href="#" class="nav-link">Habitats</a>
<a href="#" class="nav-link">Phénomènes</a>
<a href="#" class="nav-link">Energies</a>
<a href="#" class="nav-link">Transports</a>
<a href="#" class="nav-link">Commerces</a>
<a href="#" class="nav-link">Habitats</a>
<a href="#" class="nav-link">Phénomènes</a>
<a href="#" class="nav-link">Energies</a>
<a href="#" class="nav-link">Transports</a>
</div>
<div class="arrow">
<label for="toggleNavbar">
<img src="./img/arrow.svg" alt="arrow" width="10">
</label>
<input id="toggleNavbar" type="checkbox">
<label for="toggleNavbar">
<img src="./img/arrow.svg" alt="arrow" width="10">
</label>
<input id="toggleNavbar" type="checkbox">
</div>
</nav>
</nav>
<div id="starContainer">
<div id="starContainer">
<div class="star" id="star5"></div>
<div class="star" id="star4"></div>
<div class="star" id="star3"></div>
<div class="star" id="star2"></div>
<div class="star" id="star1"></div>
</div>
</div>
<div class="container">
<div class="container">
<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">
<img class="image" id="imgleft" src="./img/imgleft.png"
alt="imgleft">
<div class="text-overlay">Votre texte ici</div>
</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">
<img class="image" id="imgright" src="./img/imgright.webp"
alt="imgright">
<div class="text-overlay">Votre texte ici</div>
</section>
>>>>>>> 0d68aaf3e621087d415377c9f42334f300c50e68
</div>
<div class="question">
<h2>Question</h2>
<p>Lorem ipsum</p>
<button class="hide">Question suivante</button>
<h2>Question</h2>
<p>Lorem ipsum</p>
<button class="hide">Question suivante</button>
</div>
</div>
</div>
<script>
const rightSection = document.getElementById('right');
const leftSection = document.getElementById('left');
const buttonElement = document.querySelector('button');
<script>
const rightSection = document.getElementById('right');
const leftSection = document.getElementById('left');
const buttonElement = document.querySelector('button');
rightSection.addEventListener('click', () => {
rightSection.classList.remove('hide');
leftSection.classList.add('hide');
buttonElement.classList.remove('hide');
});
rightSection.addEventListener('click', () => {
rightSection.classList.remove('hide');
leftSection.classList.add('hide');
buttonElement.classList.remove('hide');
});
leftSection.addEventListener('click', () => {
leftSection.classList.remove('hide');
rightSection.classList.add('hide');
buttonElement.classList.remove('hide');
});
leftSection.addEventListener('click', () => {
leftSection.classList.remove('hide');
rightSection.classList.add('hide');
buttonElement.classList.remove('hide');
});
buttonElement.addEventListener('click', () => {
augmenterCompteur();
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>
buttonElement.addEventListener('click', () => {
augmenterCompteur();
buttonElement.classList.add('hide');
rightSection.classList.remove('hide');
leftSection.classList.remove('hide');
});
</script>
</body>
</html>
front/savoir.html
+20 -5
View File
@@ -28,27 +28,42 @@
<section>
<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>
<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>
<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>
<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>
<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>
</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;
}
.expanded {
position: absolute;
!important;
top: 0;
!important;
left: 0;
!important;
width: 100%;
!important;
}
/*#imgleft.expanded {*/
/* margin-right: -100vw;*/
/*}*/
/*#imgright.expanded {*/
/* margin-left: -100vw;*/
/*}*/
.image {
object-fit: cover;
}
@@ -85,12 +66,10 @@ section a {
#left {
background-color: blue;
/*background-image: url('');*/
}
#right {
background-color: red;
/*background-image: url('');*/
}
.text-overlay {
front/style/main.css
+5 -1
View File
@@ -5,7 +5,6 @@ body {
main {
display: inline-block;
max-width: px;
margin: auto auto auto 191px;
padding: 20px;
}
@@ -54,3 +53,8 @@ h2 {
border-radius: 10px;
cursor: pointer;
}
a {
text-decoration: none;
color: white;
}