58 lines
2.3 KiB
HTML
Executable File
58 lines
2.3 KiB
HTML
Executable File
<!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">✓</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>
|