68 lines
2.9 KiB
HTML
Executable File
68 lines
2.9 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>cannamatch 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="page-container">
|
|
<div class="logo-container">
|
|
<a href="{{ url_for('index') }}">
|
|
<img src="{{ url_for('static', filename='cm.png') }}" alt="Logo" class="logo">
|
|
</a>
|
|
</div>
|
|
<div class="button-row">
|
|
<button type="button" class="magenta-button" onclick="location.href='{{ url_for('index') }}'">About</button>
|
|
<button type="button" class="magenta-button" onclick="location.href='{{ url_for('profiles_page') }}'">All Profiles</button>
|
|
<button type="button" class="magenta-button" onclick="location.href='{{ url_for('inactive') }}'">Interactive</button>
|
|
<button type="button" class="magenta-button" onclick="location.href='{{ url_for('quiz') }}'">Quiz</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" id="point{{ loop.index }}" name="point{{ loop.index }}" value="20">
|
|
<div class="checkmark">
|
|
<span class="first">+</span><span class="second">+</span>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="button-row">
|
|
<button type="submit">Submit</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<script>
|
|
function toggleCard(card, index) {
|
|
const input = document.getElementById(`point${index}`);
|
|
const values = [20, 40, 80];
|
|
let value = parseInt(input.value, 10);
|
|
if (isNaN(value)) value = 20;
|
|
|
|
// Find next value in the cycle
|
|
const nextValue = values[(values.indexOf(value) + 1) % values.length];
|
|
input.value = nextValue;
|
|
|
|
card.classList.remove("active", "emphasis");
|
|
if (nextValue === 40) card.classList.add("active");
|
|
else if (nextValue === 80) card.classList.add("emphasis");
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|