commit 8211c503e1e5c545f7a7dab7a21896b98fd5b8be
Author: xbl <xbl@6bit.ch>
Date:   Sat Jul 19 11:21:15 2025 +0200

    init

diff --git a/app.py b/app.py
new file mode 100755
index 0000000..2d35cab
--- /dev/null
+++ b/app.py
@@ -0,0 +1,31 @@
+from flask import Flask, render_template, request
+import math
+from profiles import profiles
+
+app = Flask(__name__)
+
+def euclidean_distance(a, b):
+    return math.sqrt(sum((x - y) ** 2 for x, y in zip(a, b)))
+
+@app.route("/", methods=["GET", "POST"])
+def index():
+    if request.method == "POST":
+        user_values = [int(request.form.get(f"point{i}", 2)) for i in range(1, 7)]
+
+        # Find 3 best matches sorted by distance ascending
+        sorted_matches = sorted(profiles.items(), key=lambda p: euclidean_distance(user_values, p[1]['values']))
+        top_matches = sorted_matches[:3]  # top 3 matches
+
+        return render_template(
+            "result.html",
+            user=user_values,
+            top_matches=top_matches,
+        )
+    return render_template("quiz.html")
+
+@app.route("/profiles")
+def profiles_page():
+    return render_template("profiles.html", profiles=profiles)
+
+if __name__ == "__main__":
+    app.run(host='0.0.0.0', port=1337, debug=True)
diff --git a/static/ccl.png b/static/ccl.png
new file mode 100755
index 0000000..90e1bb4
Binary files /dev/null and b/static/ccl.png differ
diff --git a/static/favicon.png b/static/favicon.png
new file mode 100755
index 0000000..59c3bec
Binary files /dev/null and b/static/favicon.png differ
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..e7f6716
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,319 @@
+/* === Reset & Base Styles === */
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    font-family: Arial, sans-serif;
+    box-sizing: border-box;
+    color: #222;
+}
+
+h1 {
+    font-size: 2.75rem;
+    font-weight: bold;
+    margin: 0 0 0.5em 0;
+    line-height: 1.2;
+}
+
+h2 {
+    font-size: 1.75rem;
+    font-weight: bold;
+    margin: 0 0 0.75em 0;
+    line-height: 1.3;
+    text-align: center;
+}
+
+h3 {
+    margin-bottom: 10px;
+    font-size: 1.3em;
+}
+
+p {
+    font-size: 1rem;
+    line-height: 1.5;
+    margin: 0 0 1em 0;
+    color: #333;
+}
+
+input[type="hidden"] {
+    display: none;
+}
+
+/* === Layout Containers === */
+body.profiles-page {
+    overflow-y: auto;
+    background: linear-gradient(69deg, #39ff14, #00ffcc, #adff2f);
+    background-size: 400% 400%;
+    animation: gradientMove 39s ease infinite;
+}
+
+.logo-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px 0;
+    background-color: transparent;
+}
+
+.logo {
+    width: 100%;
+    height: auto;
+}
+
+.grid {
+    max-width: 2000px;
+    margin: 0 auto;
+    padding: 20px;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 15px;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+/* === Cards === */
+.profile-card {
+    background: rgba(255, 255, 255, 0.39);
+    padding: 15px;
+    border-radius: 8px;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 90%;
+    max-width: 320px;
+    min-height: 320px;
+    margin: 0 auto;
+}
+
+.profile-card canvas {
+    width: 100% !important;
+    height: auto !important;
+    max-height: 250px;
+}
+
+.radar-container {
+    background: rgba(255, 255, 255, 0.39);
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    text-align: center;
+    box-sizing: border-box;
+}
+
+.radar-container h2,
+.radar-container h3 {
+    margin: 8px 0 10px 0;
+}
+
+.radar-container canvas {
+    width: 100% !important;
+    max-width: 320px;
+    height: 320px !important;
+    max-height: 320px;
+    object-fit: contain;
+    margin-bottom: 10px;
+}
+
+.radar-container p.info-text,
+.profile-card p.info-text {
+    text-align: center;
+    margin: 6px 10px 0;
+    font-size: 1rem;
+    color: #222;
+}
+
+/* === Category Cards === */
+.cards-container {
+    display: grid;
+    gap: 15px;
+    padding: 20px;
+    width: 90%;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.category-card {
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 10px;
+    padding: 20px;
+    text-align: center;
+    cursor: pointer;
+    border: 3px solid transparent;
+    transition: all 0.3s ease;
+    user-select: none;
+    position: relative;
+}
+
+.category-card.active {
+    border-color: #00aaff;
+    background: rgba(0, 170, 255, 0.2);
+}
+
+.category-card .checkmark {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    font-size: 18px;
+    color: green;
+    display: none;
+}
+
+.category-card.active .checkmark {
+    display: block;
+}
+
+/* === Matches === */
+.matches-container {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    align-items: center;
+}
+
+.matches-row {
+    display: flex;
+    gap: 15px;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+
+.best-card {
+    border: 2px solid gold;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+}
+
+.others-row {
+    justify-content: center;
+    align-items: center;
+    margin-left: auto;
+    padding-bottom: 15px;
+}
+
+.others-row .profile-card {
+    margin: 0;
+}
+
+/* === Buttons === */
+button[type="submit"],
+button.magenta-button {
+    display: block;
+    margin: 30px 0;
+    padding: 15px 40px;
+    font-size: 1.2em;
+    font-weight: bold;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+    transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+button[type="submit"] {
+    background-color: #00aaff;
+}
+
+button[type="submit"]:hover {
+    background-color: #0088cc;
+    transform: translateY(2px);
+}
+
+button[type="submit"]:active {
+    background-color: #006699;
+    transform: translateY(0);
+}
+
+button.magenta-button {
+    background-color: #ff00aa;
+}
+
+button.magenta-button:hover {
+    background-color: #cc0088;
+    transform: translateY(2px);
+}
+
+button.magenta-button:active {
+    background-color: #990066;
+    transform: translateY(0);
+}
+
+.button-row {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+    flex-wrap: wrap;
+    margin: 30px auto;
+    min-height: 5%;
+    width: 100%;
+    padding-bottom: 25px;
+}
+
+.button-row button {
+    margin: 0;
+}
+
+/* === Animations === */
+@keyframes gradientMove {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+/* === Media Queries === */
+@media (max-width: 600px) {
+    .radar-container {
+        width: 90vw !important;
+        max-width: none !important;
+        padding-bottom: 10px;
+        height: auto;
+    }
+    .radar-container canvas {
+        width: 90vw !important;
+        max-width: none;
+        height: 90vw !important;
+        max-height: none;
+    }
+    .logo {
+        max-width: 90vw;
+    }
+}
+
+@media (min-width: 900px) {
+    body.profiles-page {
+       	background-size: 400% 1600%;
+    }
+    .cards-container {
+        grid-template-columns: repeat(3, 1fr);
+        align-items: center;
+    }
+}
+
+@media (max-width: 899px) and (min-width: 600px) {
+    body.profiles-page {
+       	background-size: 400% 1600%;
+    }
+    .cards-container {
+        grid-template-columns: repeat(2, 1fr);
+        align-items: center;
+    }
+}
+
+@media (max-width: 599px) {
+    body.profiles-page {
+       	background-size: 400% 1600%;
+    }
+    .cards-container {
+        grid-template-columns: 1fr;
+        align-items: center;
+    }
+}
diff --git a/templates/profiles.html b/templates/profiles.html
new file mode 100755
index 0000000..58efd6d
--- /dev/null
+++ b/templates/profiles.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>canculator profiles</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <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('index') }}'">New Quiz</button>
+    </div>
+    <div class="grid">
+        {% for name, values in profiles.items() %}
+        <div class="profile-card">
+	    <div class="profile-name"><h2>{{ name }}</h2></div>
+            <canvas id="chart-{{ loop.index }}"></canvas>
+	    <p class="info-text">{{ values.info_text1 }}</p>
+    	    <p class="info-text">{{ values.info_text2 }}</p>
+        </div>
+        {% endfor %}
+    </div>
+
+    <script>
+        const labels = ['Energy', 'Calm', 'Relax', 'Sleep', 'Focus', 'Inspire'];
+        const profiles = {{ profiles | tojson }};
+
+        Object.entries(profiles).forEach(([name, data], index) => {
+            const ctx = document.getElementById(`chart-${index + 1}`).getContext('2d');
+            new Chart(ctx, {
+                type: 'radar',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: name,
+                        data: data.values,
+                        fill: true,
+                        backgroundColor: 'rgba(0, 150, 255, 0.24)', // electric blue fill
+                        borderColor: 'rgb(0, 150, 255)',             // electric blue border
+                        pointBackgroundColor: 'rgb(0, 150, 255)'
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        r: {
+                            min: 0,
+                            max: 80,
+                            ticks: {
+                                stepSize: 20,
+                                display: false
+                            },
+                            pointLabels: {
+                                font: { size: 14 }
+                            },
+                            grid: {
+                                color: 'rgba(255,255,255,0.69)',
+                                circular: true
+                            },
+                            angleLines: {
+                                color: 'rgba(255,255,255,0.69)',
+                                circular: true
+                            }
+                        }
+                    },
+                    plugins: {
+                        legend: { display: false }
+                    }
+                }
+            });
+        });
+    </script>
+</body>
+</html>
diff --git a/templates/quiz.html b/templates/quiz.html
new file mode 100755
index 0000000..bb8da16
--- /dev/null
+++ b/templates/quiz.html
@@ -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>
diff --git a/templates/result.html b/templates/result.html
new file mode 100755
index 0000000..f0feea3
--- /dev/null
+++ b/templates/result.html
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>canculator result</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
+    <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>
+    	<button type="button" class="magenta-button" onclick="location.href='{{ url_for('index') }}'">New Quiz</button>
+    </div>
+    <h2>Your Matches:</h2>
+    <div class="matches-container">
+        <div class="matches-row best-row">
+            {% set match_labels = ["Best", "Runner-up", "Maybe..."] %}
+            {% if top_matches|length > 0 %}
+                {% set name, match_values = top_matches[0] %}
+                <div class="profile-card best-card">
+                    <h3>{{ match_labels[0] }}</h3>
+                    <h2>{{ name }}</h2>
+                    <canvas id="radarChart-1"></canvas>
+                    <p class="info-text">{{ match_values.info_text1 }}</p>
+                    <p class="info-text">{{ match_values.info_text2 }}</p>
+                </div>
+            {% endif %}
+        </div>
+        <div class="matches-row others-row">
+            {% for idx in range(1, top_matches|length) %}
+                {% set name, match_values = top_matches[idx] %}
+                <div class="profile-card">
+                    <h3>{{ match_labels[idx] if idx < match_labels|length else 'Match' }}</h3>
+                    <h2>{{ name }}</h2>
+                    <canvas id="radarChart-{{ idx + 1 }}"></canvas>
+                    <p class="info-text">{{ match_values.info_text1 }}</p>
+                    <p class="info-text">{{ match_values.info_text2 }}</p>
+                </div>
+            {% endfor %}
+        </div>
+
+    </div>
+
+    <script>
+        const labels = ['Energy', 'Calm', 'Relax', 'Sleep', 'Focus', 'Inspire'];
+        const userData = {{ user | tojson }};
+        const matches = {{ top_matches | tojson }};
+
+        matches.forEach(([name, profile], index) => {
+            const ctx = document.getElementById(`radarChart-${index + 1}`).getContext('2d');
+            new Chart(ctx, {
+                type: 'radar',
+                data: {
+                    labels: labels,
+                    datasets: [
+                        {
+                            label: 'You',
+                            data: userData,
+                            fill: true,
+                            backgroundColor: 'rgba(255, 20, 147, 0.24)',
+                            borderColor: 'rgb(255, 20, 147)',
+                            pointBackgroundColor: 'rgb(255, 20, 147)',
+                        },
+                        {
+                            label: name,
+                            data: profile.values,
+                            fill: true,
+                            backgroundColor: 'rgba(0, 150, 255, 0.24)',
+                            borderColor: 'rgb(0, 150, 255)',
+                            pointBackgroundColor: 'rgb(0, 150, 255)',
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        r: {
+                            min: 0,
+                            max: 80,
+                            ticks: {
+                                stepSize: 20,
+                                display: false
+                            },
+                            pointLabels: {
+                                font: {
+                                    size: 14
+                                }
+                            },
+                            grid: {
+                                color: 'rgba(255,255,255,0.69)',
+                                circular: true
+                            },
+                            angleLines: {
+                                color: 'rgba(255,255,255,0.69)',
+                            }
+                        }
+                    },
+                    plugins: {
+                        legend: {
+                            display: true,
+                            position: 'top',
+                            labels: {
+                                font: {
+                                    size: 12
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+        });
+    </script>
+    <script>
+	window.addEventListener('load', () => {
+	  const bestCard = document.querySelector('.best-card');
+	  if (!bestCard) return;
+	
+	  const rect = bestCard.getBoundingClientRect();
+	  const colors = ['#FF00AA', '#FFD700']; // magenta and gold
+	
+	  function fire(xOrigin) {
+	    confetti({
+	      particleCount: 69,
+	      angle: xOrigin < 0.5 ? 60 : 120,
+	      spread: 69,
+	      origin: {
+	        x: xOrigin,
+	        y: (rect.top + rect.height / 2) / window.innerHeight
+	      },
+	      colors: colors
+	    });
+	  }
+	
+	  // Fire once from left and right edges of the best-card
+	  const leftOrigin = (rect.left) / window.innerWidth;
+	  const rightOrigin = (rect.right) / window.innerWidth;
+	
+	  fire(leftOrigin);
+	  fire(rightOrigin);
+	});
+	</script>
+</body>
+</html>