init

2025-07-19 11:21:15 +02:00
commit 8211c503e1
7 changed files with 641 additions and 0 deletions
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>canculator quiz</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">
+</head>
+<body class="profiles-page">
+    <div class="logo-container">
+        <a href="{{ url_for('index') }}">
+            <img src="{{ url_for('static', filename='ccl.png') }}" alt="Logo" class="logo">
+        </a>
+    </div>
+    <div class="button-row">
+        <button type="button" class="magenta-button" onclick="location.href='{{ url_for('profiles_page') }}'">All Profiles</button>
+    </div>
+    <h2>What are you looking for?</h2>
+    <form method="POST">
+        <div class="cards-container">
+            {% set categories = [
+                {'name': 'Energy', 'desc': 'Boost endurance and alertness.'},
+                {'name': 'Calm', 'desc': 'Stay grounded and centered.'},
+                {'name': 'Relax', 'desc': 'Ease tension in body and mind.'},
+                {'name': 'Sleep', 'desc': 'Support restfulness and recovery.'},
+                {'name': 'Focus', 'desc': 'Enhance concentration and clarity.'},
+                {'name': 'Inspire', 'desc': 'Spark creativity and new ideas.'}
+            ] %}
+            {% for cat in categories %}
+            <div class="category-card" onclick="toggleCard(this, {{ loop.index }})">
+                <h3>{{ cat.name }}</h3>
+                <p>{{ cat.desc }}</p>
+                <input type="hidden" name="point{{ loop.index }}" id="point{{ loop.index }}" value="30">
+		<div class="checkmark">&#10003;</div>
+            </div>
+            {% endfor %}
+        </div>
+	<div class="button-row">
+            <button type="submit">Submit</button>
+    	</div>
+    </form>
+
+    <script>
+        function toggleCard(card, index) {
+            const input = document.getElementById(`point${index}`);
+            if (card.classList.contains('active')) {
+                card.classList.remove('active');
+                input.value = "30"; // inactive score
+            } else {
+                card.classList.add('active');
+                input.value = "69"; // active score
+            }
+        }
+    </script>
+</body>
+</html>