<!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>
                    <!-- Górny obrazek (header) -->
            <img id="headerImg" src="images/top.png" alt="Górny obrazek">
               <!-- Dolny obrazek (footer) -->
            <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>

        <div id="quizContent">


            <!-- Kontener z ekranami wstępnymi -->
<!--            <div id="quizContainer">

            </div>-->

            <!-- Kontener dla właściwego quizu -->
            <div id="quizSection" class="screen fade">
                <!-- Komunikat startowy -->
                <div id="playerMessage"></div>
                <!-- Kontener z pytaniem i opcjami -->
                <div id="questionContainer">
                    <h2 id="questionHeader"></h2>
                    <div id="optionsContainer"></div>
                </div>
            </div>

         








            <!-- Ekran 1: Call-to-action (intro) -->
            <div id="screen1" class="screen fade visible" style="position: relative;">
                <img src="images/intro.png" alt="Call to Action 1" class="ctaImage">
                <!--Nakładki pokrywające górną i dolną połowę obrazka--> 
                <div class="half-overlay top-half" style="border: 0px solid red;"></div>
                <div class="half-overlay bottom-half" style="border: 0px solid blue;"></div>
            </div>

            <!-- Ekran 2: Call-to-action -->
            <div id="screen2" class="screen fade">
                <img src="images/1.png" alt="Call to Action 2" class="ctaImage">
            </div>
            <!-- Ekran 3: Call-to-action -->
            <div id="screen3" class="screen fade">
                <img src="images/2.png" alt="Call to Action 3" class="ctaImage">
            </div>
            <!-- Ekran 4: Formularz zbierania danych -->
            <div id="screen4" class="screen fade">
                <p id="formTopText">
                    <b>Wypełnij krótki formularz</b> zanim zaczniesz i&nbsp;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="block.js?v=<?php echo time(); ?>"></script>
        <script src="script.js?v=<?php echo time(); ?>"></script>
        <script src="addons.js?v=<?php echo time(); ?>"></script>
    </body>
</html>
