<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Quiz Zgodności</title>
    <link rel="stylesheet" href="style.css?v=<?php echo time(); ?>" />
  </head>
  <body>
    <!-- Header – pozostaje bez zmian -->
    <img id="headerImg" src="images/top.png" alt="Górny obrazek" />

    <!-- Footer – pozostaje bez zmian -->
    <img id="footerImg" src="images/bottom.png" alt="Dolny obrazek" />

    <!-- Warstwa ostrzegająca przy złej orientacji -->
    <div id="orientationWarning">
      <p>Proszę obrócić urządzenie w pionie.</p>
    </div>

    <!-- Główny kontener – cała zawartość quizu mieści się między header a footer -->
    <div id="quizContent">
      <!-- Ekrany wstępne -->
      <!-- Screen1: Intro / Call-to-action -->
      <div id="screen1" class="screen visible">
        <img src="images/intro.png" alt="Intro" class="ctaImage" />
        <div class="half-overlay top-half"></div>
        <div class="half-overlay bottom-half"></div>
      </div>

      <!-- Screen2: Call-to-action -->
      <div id="screen2" class="screen">
        <img src="images/1.png" alt="Call to Action 2" class="ctaImage" />
      </div>

      <!-- Screen3: Call-to-action -->
      <div id="screen3" class="screen">
        <img src="images/2.png" alt="Call to Action 3" class="ctaImage" />
      </div>

      <!-- Screen4: Formularz zbierania danych -->
      <div id="screen4" class="screen">
        <p id="formTopText">
          <b>Wypełnij krótki formularz</b> zanim zaczniesz i zburzysz bariery między Wami!
        </p>
        <input type="text" id="firstNameInput" class="form-input" placeholder="Imię pierwszej osoby" />
        <input type="text" id="secondNameInput" class="form-input" placeholder="Imię drugiej osoby" />
        <img id="startBtn" class="form-start-btn" src="images/start.png" alt="Start" />
      </div>
    </div>

    <script src="script.js?v=<?php echo time(); ?>"></script>
    <script src="block.js?v=<?php echo time(); ?>"></script>
  </body>
</html>
