septima
/
silly_qiz


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
							<!DOCTYPE html>
<html lang="en"  x-data="{zacalqiz: false}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <title>Kvíz: Který učitel na GJS jsi ty?</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <style>
        body { background-color: #f0f4f8; }
        .gjs-blue { background-color: #0055a4; }
        .card { border-radius: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
    </style>
</head>
<body>
<script>
function quizApp() {
    return {
        zacalqiz: false,
        otazky: [],
 
        async startQuiz() {
            this.zacalqiz = ! this.zacalqiz
            const res = await fetch('/api/questions?count=5');
            this.otazky = await res.json();
        }
    }
}
</script>

<template x-if="!zacalqiz">
<div>
    <div >
    <h1>silly_qiz</h1>
    <h3 class="rainbow">toto bude mega giga silly qiz, aby jste mohli zjistit který z učítelů gimjs jste :3</h3>
        <a href="{{ url_for('questions.index') }}">Začít kvíz</a>
    </div>
</div>
</template>
<template x-if="zacalqiz">
<div  class="flex flex-col items-center justify-center min-h-screen p-4">

    <div class="card bg-white w-full max-w-lg p-6 border-t-8 border-blue-700">
        
        <h1 class="text-2xl font-bold text-center text-gray-800 mb-8">
            Který učitel na GJS jsi ty?
        </h1>

        <div class="mb-8">
            <p class="text-lg font-semibold text-gray-700 mb-4 text-center">
                Lorem ipsum dolor sit amet, consectetur?
            </p>

            <div class="space-y-3">
                <label class="block p-3 border rounded-lg cursor-pointer hover:bg-blue-50 transition">
                    <input type="radio" name="q1" class="mr-2"> Lorem ipsum dolor
                </label>
                <label class="block p-3 border rounded-lg cursor-pointer hover:bg-blue-50 transition">
                    <input type="radio" name="q1" class="mr-2"> Sit amet consectetur
                </label>
                <label class="block p-3 border rounded-lg cursor-pointer hover:bg-blue-50 transition">
                    <input type="radio" name="q1" class="mr-2"> Adipiscing elit
                </label>
                <label class="block p-3 border rounded-lg cursor-pointer hover:bg-blue-50 transition">
                    <input type="radio" name="q1" class="mr-2"> Sed do eiusmod
                </label>
            </div>
        </div>

        <div class="flex justify-between mt-10">
            <button class="px-6 py-2 bg-gray-200 text-gray-700 rounded font-bold hover:bg-gray-300 transition">
                Předchozí
            </button>
            <button class="px-6 py-2 gjs-blue text-white rounded font-bold hover:opacity-90 transition">
                Další
            </button>
        </div>

    </div>
</div>
</template>
    <button @click="startQuiz()">Toggle Content</button>

</body>

</html>