init

2025-07-19 11:21:15 +02:00
commit 8211c503e1
7 changed files with 641 additions and 0 deletions
@@ -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>