|
|
@@ -1,14 +1,73 @@
|
|
|
<!DOCTYPE html>
|
|
|
-<html lang="en">
|
|
|
+<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>silly_qiz</title>
|
|
|
+ <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>
|
|
|
+
|
|
|
+<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>
|
|
|
+ <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="zacalqiz = ! zacalqiz">Toggle Content</button>
|
|
|
+
|
|
|
</body>
|
|
|
+
|
|
|
</html>
|
