init

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