<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#fbc2eb">
<title>Malicka & Lauraine — Forever ❤️</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
font-family: Arial, sans-serif;
-webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
/* ACCUEIL */
#accueil {
min-height: 100vh;
background: #171717;
display: flex;
justify-content: center;
align-items: flex-start;
}
.page-accueil {
position: relative;
width: 100%;
max-width: 480px;
margin: 0 auto;
}
.image-accueil {
display: block;
width: 100%;
height: auto;
}
.lien-accueil {
position: absolute;
z-index: 5;
left: 15%;
width: 70%;
bottom: 4%;
height: 10%;
display: block;
cursor: pointer;
background: transparent;
border: 0;
}
/* JEU */
#jeu {
min-height: 100vh;
padding: 16px;
background: linear-gradient(135deg, #ffe4ef, #fbc2eb, #fce7f3);
color: #75194d;
text-align: center;
}
.carte {
background: white;
max-width: 480px;
margin: 10px auto;
padding: 25px 18px;
border-radius: 25px;
box-shadow: 0 8px 25px #d98aaf70;
}
h1 { font-size: 26px; }
.sous-titre { line-height: 1.7; }
.niveau {
display: inline-block;
padding: 9px 15px;
border-radius: 22px;
background: #ffe4ef;
font-weight: bold;
font-size: 14px;
}
#question {
font-size: 21px;
line-height: 1.5;
margin: 25px 0;
}
.reponse, .bouton-jeu {
display: block;
width: 100%;
padding: 16px 12px;
margin: 13px 0;
border: none;
border-radius: 15px;
font-size: 17px;
font-weight: bold;
background: #f8d2e4;
color: #75194d;
cursor: pointer;
}
.reponse:disabled {
opacity: 1;
cursor: default;
}
.reponse.correct {
background: #22a95a;
color: white;
}
.reponse.wrong {
background: #ef4444;
color: white;
}
#feedback {
font-weight: bold;
line-height: 1.6;
min-height: 25px;
}
#suivant, .rose {
background: #e83e8c;
color: white;
}
.retour {
background: transparent;
color: #a32b69;
border: 1px solid #f3bad4;
padding: 12px;
border-radius: 14px;
font-weight: bold;
cursor: pointer;
}
.petit { font-size: 14px; line-height: 1.6; }
</style>
</head>
<body>
<!-- PAGE D'ACCUEIL -->
<section id="accueil">
<div class="page-accueil">
<img
class="image-accueil"
src="https://i.postimg.cc/sXtCc34P/Site-web-Lauraine-1.png"
alt="Malicka et Lauraine — Forever"
>
<button
class="lien-accueil"
onclick="ouvrirJeu()"
aria-label="Par ici : commencer notre jeu d'amour"
></button>
</div>
</section>
<!-- JEU DE COUPLE -->
<section id="jeu" hidden>
<div class="carte" id="carte">
<button class="retour" onclick="retourAccueil()">
← Retour à notre histoire ❤️
</button>
<h1>👀❤️ QUI DE NOUS DEUX… ?</h1>
<p class="sous-titre">
Bienvenue dans le jeu de <b>LAURAINE et MALICKA</b> 💗<br>
Pour chaque question, choisis la personne qui correspond le mieux !
Pas de triche 😂❤️
</p>
<p>1 = LAURAINE ❤️<br>2 = MALICKA 💗</p>
<p class="petit">
Choisis ta réponse et découvre si tu as vu juste ! 🥹
</p>
<div class="niveau" id="niveau"></div>
<p id="compteur"></p>
<h2 id="question"></h2>
<div id="reponses"></div>
<p id="feedback" aria-live="polite"></p>
<button id="suivant" class="bouton-jeu" hidden onclick="questionSuivante()">
Question suivante ❤️
</button>
</div>
</section>
<script>
const questions = [
{
level: "😂 NIVEAU 1 : FACILE",
q: "Qui aime le plus provoquer les disputes pour rien ? 😩",
correct: 2
},
{
level: "😂 NIVEAU 1 : FACILE",
q: "Qui est la plus têtue et veut toujours avoir raison ? 😔",
correct: 1
},
{
level: "😂 NIVEAU 1 : FACILE",
q: "Qui boude le plus longtemps après une dispute ? 😬",
correct: 2
},
{
level: "😂 NIVEAU 1 : FACILE",
q: "Qui aime le plus faire la victime alors qu’elle a commencé ? 😂",
correct: 1
},
{
level: "😂 NIVEAU 1 : FACILE",
q: "Qui dit « laisse-moi » mais veut qu’on insiste ? 🤣",
correct: 1
},
{
level: "😂 NIVEAU 1 : FACILE",
q: "Qui est la plus susceptible pour les petites choses ?",
correct: 2
},
{
level: "😂 NIVEAU 1 : FACILE",
q: "Qui aime le plus taquiner l’autre jusqu’à l’énerver ? 😆",
correct: 2
},
{
level: "😂 NIVEAU 1 : FACILE",
q: "Qui est la plus forte pour transformer un petit problème en grand débat ? 😭",
correct: 1
},
{
level: "😏 NIVEAU 2 : MOYEN 🍁",
q: "Qui est la plus jalouse dans le couple ? 😔😤",
correct: 2
},
{
level: "😏 NIVEAU 2 : MOYEN 🍁",
q: "Qui pose le plus de questions quand l’autre parle à quelqu’un ? 😬",
correct: 1
},
{
level: "😏 NIVEAU 2 : MOYEN 🍁",
q: "Qui fait semblant de ne pas être jalouse alors que ça la dérange ? 😂",
correct: 1
},
{
level: "😏 NIVEAU 2 : MOYEN 🍁",
q: "Qui peut changer d’humeur après avoir vu un simple message ? 🥰💔",
correct: 2
},
{
level: "😏 NIVEAU 2 : MOYEN 🍁",
q: "Qui aime le plus tester l’amour de l’autre ? 👀",
correct: 1
},
{
level: "😏 NIVEAU 2 : MOYEN 🍁",
q: "Qui peut dire « fais ce que tu veux » alors qu’elle ne veut surtout pas que tu le fasses ? 👏😹",
correct: 1
},
{
level: "💋 NIVEAU 3 : HARD 🔥",
q: "Qui aime le plus l’autre ? 😤❤️",
correct: 2
},
{
level: "💋 NIVEAU 3 : HARD 🔥",
q: "Qui réclame le plus d’attention ? 😭",
correct: 1
},
{
level: "💋 NIVEAU 3 : HARD 🔥",
q: "Qui envoie le plus de messages quand l’autre lui manque ? 🙂↔️",
correct: 2
},
{
level: "💋 NIVEAU 3 : HARD 🔥",
q: "Qui aime le plus entendre « je t’aime » ? 😭",
correct: 2
},
{
level: "💋 NIVEAU 3 : HARD 🔥",
q: "Qui pardonne le plus vite après une dispute ? 😔",
correct: 2
},
{
level: "💋 NIVEAU 3 : HARD 🔥",
q: "Qui a le plus peur de perdre l’autre ? 🥺",
correct: 2
},
{
level: "🥹 NIVEAU 4 : CHIENNE 😭",
q: "Qui commence souvent les disputes, puis finit par dire que c’est l’autre ? 😒",
correct: 1
},
{
level: "🥹 NIVEAU 4 : CHIENNE 😭",
q: "Qui attend que l’autre fasse le premier pas après une dispute ? 😤",
correct: 1
},
{
level: "🥹 NIVEAU 4 : CHIENNE 😭",
q: "Qui peut être fâchée et quand même vouloir un câlin ? ",
correct: 2
},
{
level: "🥹 NIVEAU 4 : CHIENNE 😭",
q: "Qui dit « je m’en fiche » alors qu’elle y pense toute la journée ? 😬",
correct: 1
},
{
level: "🥹 NIVEAU 4 : CHIENNE 😭",
q: "Qui revient dire « bébé, tu me manques » après avoir dit qu’elle ne voulait plus parler ? 😭❤️",
correct: 1
},
{
level: "🫦 NIVEAU 5 : OSÉ 🔥",
q: "Qui parle le plus de sexe ? 🫠",
correct: 1
},
{
level: "🫦 NIVEAU 5 : OSÉ 🔥",
q: "Qui aime le plus les bêtises mais ne veut pas l’avouer ? 😏",
correct: 1
},
{
level: "🫦 NIVEAU 5 : OSÉ 🔥",
q: "Qui voudrait passer toute une journée collée à l’autre ? 😭❤️",
correct: 2
},
{
level: "🫦 NIVEAU 5 : OSÉ 🔥",
q: "Qui commence les palabres et finit par proposer un moment très coquin, avec l’accord de l’autre ? 😔🫦",
correct: 1
},
{
level: "🫦 NIVEAU 5 : OSÉ 🔥",
q: "Qui est la plus capable de surprendre l’autre avec une initiative très osée, toujours avec son accord ? 😭❤️",
correct: 1
}
];
let index = 0;
let score = 0;
function ouvrirJeu() {
document.getElementById("accueil").hidden = true;
document.getElementById("jeu").hidden = false;
window.scrollTo(0, 0);
afficherQuestion();
}
function retourAccueil() {
document.getElementById("jeu").hidden = true;
document.getElementById("accueil").hidden = false;
window.scrollTo(0, 0);
}
function afficherQuestion() {
const q = questions[index];
document.getElementById("niveau").textContent = q.level;
document.getElementById("compteur").textContent =
"Question " + (index + 1) + " / " + questions.length;
document.getElementById("question").textContent = q.q;
document.getElementById("feedback").textContent = "";
document.getElementById("suivant").hidden = true;
const zone = document.getElementById("reponses");
zone.innerHTML = "";
["LAURAINE ❤️", "MALICKA 💗"].forEach((nom, i) => {
const numero = i + 1;
const bouton = document.createElement("button");
bouton.type = "button";
bouton.className = "reponse";
bouton.textContent = numero + ". " + nom;
bouton.onclick = function() {
if (zone.querySelector("button:disabled")) return;
zone.querySelectorAll("button").forEach(b => {
b.disabled = true;
});
if (numero === q.correct) {
bouton.classList.add("correct");
document.getElementById("feedback").textContent =
"Bonne réponse ! 💚🎉";
score++;
} else {
bouton.classList.add("wrong");
zone.children[q.correct - 1].classList.add("correct");
document.getElementById("feedback").textContent =
"Oups ! Ce n’est pas la bonne réponse 😂❤️";
}
const suivant = document.getElementById("suivant");
suivant.hidden = false;
suivant.textContent =
index === questions.length - 1
? "Voir la fin 💖"
: "Question suivante ❤️";
};
zone.appendChild(bouton);
});
}
function questionSuivante() {
index++;
if (index >= questions.length) {
document.getElementById("carte").innerHTML = `
<h1>💖 BRAVO À NOUS ! 💖</h1>
<p>Tu as terminé notre jeu d’amour 🥹❤️</p>
<h2>Je t’aime Mayouuu 🫶</h2>
<p>Maintenant, avoue… laquelle des deux est vraiment la plus provocatrice ? 😂❤️</p>
<h2>${score} / ${questions.length} 💗</h2>
<p>Tu as trouvé ${score} bonne(s) réponse(s) sur ${questions.length}.</p>
<button class="bouton-jeu rose" onclick="rejouer()">Rejouer 💋</button>
<button class="retour" onclick="retourAccueil()">Retour à notre histoire ❤️</button>
`;
} else {
afficherQuestion();
window.scrollTo(0, 0);
}
}
function rejouer() {
index = 0;
score = 0;
document.getElementById("carte").innerHTML = `
<button class="retour" onclick="retourAccueil()">← Retour à notre histoire ❤️</button>
<h1>👀❤️ QUI DE NOUS DEUX… ?</h1>
<p class="sous-titre">
Bienvenue dans le jeu de <b>LAURAINE et MALICKA</b> 💗<br>
Pour chaque question, choisis la personne qui correspond le mieux !
Pas de triche 😂❤️
</p>
<p>1 = LAURAINE ❤️<br>2 = MALICKA 💗</p>
<p class="petit">Choisis ta réponse et découvre si tu as vu juste ! 🥹</p>
<div class="niveau" id="niveau"></div>
<p id="compteur"></p>
<h2 id="question"></h2>
<div id="reponses"></div>
<p id="feedback" aria-live="polite"></p>
<button id="suivant" class="bouton-jeu" hidden onclick="questionSuivante()">Question suivante ❤️</button>
`;
afficherQuestion();
window.scrollTo(0, 0);
}
</script>
</body>
</html>