Untitled drop (fork) (fork) (fork)

MMArie paule Toure·Published Oct 27, 2026
<!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>
Explore more drops →
Forked from vdO3BcockLoS.