Birthday Weekend 😍🪵

Voici un code complet en HTML, CSS et JavaScript (regroupé dans un seul fichier). C'est une page web interactive que tu peux ouvrir directement dans n'importe quel navigateur (Chrome, Safari, etc.) sur ordinateur ou téléphone !
Elle inclut le questionnaire initial avec validation des réponses, puis bascule vers l'interface interactive style rétro / tech inspirée de ton image, avec les onglets interactivement cliquables (FRIDAY, SATURDAY, SUNDAY) et les détails du programme.
Comment l'utiliser :
 * Copie tout le code ci-dessous.
 * Colle-le dans un fichier texte (par exemple avec Bloc-notes ou TextEdit).
 * Enregistre le fichier sous le nom index.html.
 * Double-clique sur le fichier index.html pour l'ouvrir dans ton navigateur !
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FIONA_OS // BIRTHDAY.EXE</title>
  <style>
    :root {
      --bg-color: #0f172a;
      --card-bg: #1e293b;
      --text-color: #f8fafc;
      --accent-color: #38bdf8;
      --accent-green: #4ade80;
      --border-color: #334155;
    }

    * {
      box-sizing: border-box;
      font-family: 'Courier New', Courier, monospace;
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-color);
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
      padding: 20px;
    }

    .container {
      background-color: var(--card-bg);
      border: 2px solid var(--accent-color);
      border-radius: 12px;
      padding: 25px;
      max-width: 650px;
      width: 100%;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    }

    h1, h2 {
      text-align: center;
      color: var(--accent-color);
      margin-top: 0;
      letter-spacing: 1px;
    }

    .quiz-step {
      display: none;
    }

    .quiz-step.active {
      display: block;
    }

    .question {
      font-size: 1.1rem;
      margin-bottom: 15px;
    }

    input[type="text"] {
      width: 100%;
      padding: 12px;
      border-radius: 6px;
      border: 1px solid var(--border-color);
      background-color: #0f172a;
      color: #fff;
      font-size: 1rem;
      margin-bottom: 15px;
      outline: none;
    }

    input[type="text"]:focus {
      border-color: var(--accent-color);
    }

    button {
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 6px;
      background-color: var(--accent-color);
      color: #0f172a;
      font-weight: bold;
      font-size: 1rem;
      cursor: pointer;
      transition: background 0.2s;
    }

    button:hover {
      background-color: #7dd3fc;
    }

    .error-message {
      color: #f87171;
      font-size: 0.9rem;
      margin-top: -10px;
      margin-bottom: 15px;
      display: none;
    }

    /* Interface Principal */
    #interface {
      display: none;
    }

    .terminal-header {
      border-bottom: 2px double var(--accent-color);
      padding-bottom: 15px;
      margin-bottom: 20px;
    }

    .info-line {
      margin: 8px 0;
      font-size: 0.95rem;
    }

    .progress-bar {
      width: 100%;
      background-color: #0f172a;
      height: 18px;
      border-radius: 4px;
      overflow: hidden;
      margin: 15px 0;
      border: 1px solid var(--border-color);
    }

    .progress-fill {
      height: 100%;
      width: 100%;
      background-color: var(--accent-green);
    }

    .nav-tabs {
      display: flex;
      gap: 10px;
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .tab-btn {
      flex: 1;
      background-color: #0f172a;
      color: var(--accent-color);
      border: 1px solid var(--accent-color);
      padding: 10px;
    }

    .tab-btn.active {
      background-color: var(--accent-color);
      color: #0f172a;
    }

    .day-content {
      display: none;
      background-color: #0f172a;
      padding: 15px;
      border-radius: 8px;
      border: 1px solid var(--border-color);
    }

    .day-content.active {
      display: block;
    }

    .event-item {
      margin-bottom: 12px;
      line-height: 1.4;
    }

    .packing-list {
      margin-top: 20px;
      padding: 15px;
      background-color: #0f172a;
      border-radius: 8px;
      border: 1px dashed var(--accent-color);
    }

    .welcome-msg {
      background-color: #1e1b4b;
      border: 1px solid #6366f1;
      color: #e0e7ff;
      padding: 15px;
      border-radius: 8px;
      margin-bottom: 20px;
      text-align: center;
      font-size: 1.05rem;
      line-height: 1.5;
    }
  </style>
</head>
<body>

  <div class="container">
    <!-- QUESTIONNAIRE -->
    <div id="quiz-container">
      <h2>🔒 SECURITY VERIFICATION</h2>
      
      <!-- Question 1 -->
      <div class="quiz-step active" id="step-1">
        <div class="question">> Question 1: What is your girlfriend’s name?</div>
        <input type="text" id="ans-1" placeholder="Entrez la réponse..." />
        <div class="error-message" id="err-1">Mauvaise réponse ! Réessaye 😉</div>
        <button onclick="checkQ1()">VALIDER</button>
      </div>

      <!-- Question 2 -->
      <div class="quiz-step" id="step-2">
        <div class="question">> Question 2: How do I call you most of the time?</div>
        <input type="text" id="ans-2" placeholder="Entrez la réponse..." />
        <div class="error-message" id="err-2">Indice : Petit c... ou mon petit c...</div>
        <button onclick="checkQ2()">VALIDER</button>
      </div>

      <!-- Question 3 -->
      <div class="quiz-step" id="step-3">
        <div class="question">> Question 3: Qu'est-ce qu'on fait de mieux à deux ?</div>
        <input type="text" id="ans-3" placeholder="Écris ce que tu veux..." />
        <button onclick="checkQ3()">VALIDER</button>
      </div>
    </div>

    <!-- INTERFACE APPRÈS VALIDATION -->
    <div id="interface">
      <div class="terminal-header">
        <h1>FIONA_OS // BIRTHDAY.EXE</h1>
        <div class="info-line">👤 <b>USER:</b> TOBIT</div>
        <div class="info-line">🎂 <b>EVENT:</b> BIRTHDAY WEEKEND</div>
        <div class="info-line">📍 <b>LOCATION:</b> MONT-TREMBLANT</div>
        <div class="info-line">📅 <b>DATE:</b> 02 ➔ 04 OCTOBER</div>
        <div class="info-line">📊 <b>STATUS:</b> 100% COMPLETE</div>
        <div class="progress-bar">
          <div class="progress-fill"></div>
        </div>
        <div class="info-line">> INITIALIZING BIRTHDAY PROTOCOL...</div>
        <div class="info-line">> LOADING WEEKEND...</div>
        <div class="info-line">> SURPRISES FOUND: ■■■■■■■■■■</div>
      </div>

      <!-- Message spécial -->
      <div class="welcome-msg">
        J'espère que tu vas aimer ton petit weekend petit coeur, il sera relaxant et rempli de simplicité ! Happiest birthday ❤️
      </div>

      <!-- Onglets jours -->
      <div class="nav-tabs">
        <button class="tab-btn active" onclick="showDay('friday', this)">[ FRIDAY ]</button>
        <button class="tab-btn" onclick="showDay('saturday', this)">[ SATURDAY ]</button>
        <button class="tab-btn" onclick="showDay('sunday', this)">[ SUNDAY ]</button>
      </div>

      <!-- Contenu Vendredi -->
      <div id="friday" class="day-content active">
        <h3>Vendredi 02/10</h3>
        <div class="event-item">🚀 <b>14h30 :</b> Fizeeeeeee 🚀🚨</div>
        <div class="event-item">🏕️ <b>17h00 :</b> Check-in au camping</div>
        <div class="event-item">🥳 <b>19h30 :</b> En route vers "Birthday dinner"</div>
        <div class="event-item">🍚 <b>20h00 :</b> On va manger du riz ce soir !!</div>
      </div>

      <!-- Contenu Samedi -->
      <div id="saturday" class="day-content">
        <h3>Samedi 03/10</h3>
        <div class="event-item">🗻 <b>10h00 :</b> Route vers l’infini et l’au-delà</div>
        <div class="event-item">🪵 <b>10h30 - 16h30 :</b> Christophe Colomb aventure version forêt 🛘</div>
        <div class="event-item">🍪 <b>17h00 :</b> Snacky time</div>
        <div class="event-item">🛀 <b>18h30 :</b> On sera BIENNNN 🧖🏽‍♂️</div>
      </div>

      <!-- Contenu Dimanche -->
      <div id="sunday" class="day-content">
        <h3>Dimanche 04/10</h3>
        <div class="event-item">🏕️ <b>10h30 :</b> Bye la nature</div>
        <div class="event-item">🧗🏽 <b>11h00 - 13h00 :</b> On s'envoie en l’air ? 😏</div>
        <div class="event-item">😕 <b>13h15 - 15h00 :</b> Retour à la réalité</div>
      </div>

      <!-- Que prendre -->
      <div class="packing-list">
        <b>🧳 Ce que tu dois amener :</b>
        <ul>
          <li>Vêtements chauds</li>
          <li>Chaussures d'extérieur</li>
          <li>Maillot pour faire trempette</li>
          <li>Vêtements pour frimer</li>
          <li><b>Et bien sûr TOI !!</b></li>
        </ul>
      </div>

    </div>
  </div>

  <script>
    function checkQ1() {
      const val = document.getElementById('ans-1').value.trim().toLowerCase();
      if (val.includes('fiona')) {
        document.getElementById('step-1').classList.remove('active');
        document.getElementById('step-2').classList.add('active');
      } else {
        document.getElementById('err-1').style.display = 'block';
      }
    }

    function checkQ2() {
      const val = document.getElementById('ans-2').value.trim().toLowerCase();
      if (val.includes('petit coco') || val.includes('mon petit coeur') || val.includes('petit coeur')) {
        document.getElementById('step-2').classList.remove('active');
        document.getElementById('step-3').classList.add('active');
      } else {
        document.getElementById('err-2').style.display = 'block';
      }
    }

    function checkQ3() {
      const val = document.getElementById('ans-3').value.trim();
      if (val.length > 0) {
        document.getElementById('quiz-container').style.display = 'none';
        document.getElementById('interface').style.display = 'block';
      }
    }

    function showDay(dayId, btn) {
      const contents = document.querySelectorAll('.day-content');
      contents.forEach(c => c.classList.remove('active'));

      const tabs = document.querySelectorAll('.tab-btn');
      tabs.forEach(t => t.classList.remove('active'));

      document.getElementById(dayId).classList.add('active');
      btn.classList.add('active');
    }
  </script>

</body>
</html>