deleted: static/js/fullscreen.js

modified:   static/style.css
	modified:   templates/about.html
	modified:   templates/inactive.html
	modified:   templates/profiles.html
	modified:   templates/quiz.html
	modified:   templates/result.html

static/js/fullscreen.js

@@ -1,34 +0,0 @@
-(function () {
-  const btn = document.createElement('button');
-  btn.id = 'fsBtn';
-  btn.textContent = '⛶';
-  btn.title = 'Follscreen';
-  btn.style.cssText = `
-    position: fixed;
-    top: 0.75rem;
-    right: 0.75rem;
-    z-index: 99999;
-    background: transparent;
-    border: none;
-    color: rgba(255,255,255,0.1337);
-    font-size: 1.25rem;
-    cursor: pointer;
-    padding: 0.25rem 0.5rem;
-    transition: color 0.2s;
-  `;
-  btn.onmouseenter = () => btn.style.color = 'rgba(255,255,255,0.42)';
-  btn.onmouseleave = () => btn.style.color = 'rgba(255,255,255,0.1337)';
-  btn.onclick = () => {
-    if (!document.fullscreenElement) {
-      document.documentElement.requestFullscreen();
-      btn.textContent = '✕';
-    } else {
-      document.exitFullscreen();
-      btn.textContent = '⛶';
-    }
-  };
-  document.addEventListener('fullscreenchange', () => {
-    btn.textContent = document.fullscreenElement ? '✕' : '⛶';
-  });
-  document.body.appendChild(btn);
-})();

static/style.css

@@ -685,3 +685,16 @@ canvas.confetti-canvas {
   pointer-events: none; /* don’t block buttons/links */
   z-index: 9999;        /* stays above your charts/cards */
 }
+
+.video-link {
+  position: fixed;
+  top: 0.75rem;
+  right: 0.75rem;
+  z-index: 99999;
+  color: rgba(255,255,255,0.15);
+  font-size: 1.25rem;
+  text-decoration: none;
+  padding: 0.25rem 0.5rem;
+  transition: color 0.2s;
+}
+.video-link:hover { color: rgba(255,255,255,0.42); }

templates/about.html

@@ -38,7 +38,7 @@
 		</div>
     	</div>
     </div>
-<script src="{{ url_for('static', filename='js/fullscreen.js') }}"></script>
+    <a class="video-link" href="{{ url_for('video') }}">▶</a>
 <script src="{{ url_for('static', filename='js/idle.js') }}"></script>
 </body>
 </html>

templates/inactive.html

@@ -127,15 +127,14 @@
       </div>
   </div>
 </div>
-
 <script>
   window.appData = {
     profiles: {{ profiles | tojson }},
     initialUserData: [39,39,39,39,39,39]
   };
 </script>
+<a class="video-link" href="{{ url_for('video') }}">▶</a>
 <script src="{{ url_for('static', filename='js/inactive.js') }}"></script>
-<script src="{{ url_for('static', filename='js/fullscreen.js') }}"></script>
 <script src="{{ url_for('static', filename='js/idle.js') }}"></script>
 </body>
 </html>

templates/profiles.html

@@ -54,50 +54,49 @@
         {% endfor %}
     </div>
     </div>
+<script>
+    const labels = ['Energy', 'Calm', 'Relax', 'Sleep', 'Focus', 'Inspire'];
 
-    <script>
+    const profiles = {{ profiles | tojson }};
-        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');
 
-        Object.entries(profiles).forEach(([name, data], index) => {
+        new Chart(ctx, {
-            const ctx = document.getElementById(`chart-${index + 1}`).getContext('2d');
+            type: 'radar',
-
+            data: {
-            new Chart(ctx, {
+                labels: labels,
-                type: 'radar',
+                datasets: [{
-                data: {
+                    label: name,
-                    labels: labels,
+                    data: data.values,
-                    datasets: [{
+                    fill: true,
-                        label: name,
+                    borderColor: 'rgba(191,181,49,1)',
-                        data: data.values,
+                    pointBackgroundColor: 'rgba(0,0,0,0)',
-                        fill: true,
+                    pointBorderColor: 'rgba(191,181,49,1)',
-                        borderColor: 'rgba(191,181,49,1)',
+                    backgroundColor: 'rgba(191,181,49,0.420)',
-                        pointBackgroundColor: 'rgba(0,0,0,0)',
+    		pointRadius: 0,
-                        pointBorderColor: 'rgba(191,181,49,1)',
+    		pointHoverRadius: 0
-                        backgroundColor: 'rgba(191,181,49,0.420)',
+                }]
-			pointRadius: 0,
+            },
-			pointHoverRadius: 0
+            options: {
-                    }]
+                responsive: true,
+                maintainAspectRatio: false,
+                scales: {
+                    r: {
+                        min: 0,
+                        max: 100,
+                        ticks: { stepSize: 20, display: false },
+                        pointLabels: { font: { size: 15, weight: 'bold' }, color: '#FFF' },
+                        grid: { color: 'rgba(255,255,255,0.1337)', circular: false },
+                        angleLines: { color: 'rgba(255,255,255,0.1337)' }
+                    }
                 },
-                options: {
+    	    plugins: { tooltip: { enabled: false}, legend: { display: false } }
-                    responsive: true,
+            }
-                    maintainAspectRatio: false,
-                    scales: {
-                        r: {
-                            min: 0,
-                            max: 100,
-                            ticks: { stepSize: 20, display: false },
-                            pointLabels: { font: { size: 15, weight: 'bold' }, color: '#FFF' },
-                            grid: { color: 'rgba(255,255,255,0.1337)', circular: false },
-                            angleLines: { color: 'rgba(255,255,255,0.1337)' }
-                        }
-                    },
-		    plugins: { tooltip: { enabled: false}, legend: { display: false } }
-                }
-            });
         });
-    </script>
+    });
-<script src="{{ url_for('static', filename='js/fullscreen.js') }}"></script>
+</script>
+<a class="video-link" href="{{ url_for('video') }}">▶</a>
 <script src="{{ url_for('static', filename='js/idle.js') }}"></script>
 </body>
 </html>

templates/quiz.html

@@ -47,23 +47,23 @@
     	</div>
     </form>
     </div>
-    <script>
+<script>
-        function toggleCard(card, index) {
+    function toggleCard(card, index) {
-            const input = document.getElementById(`point${index}`);
+        const input = document.getElementById(`point${index}`);
-            const values = [20, 40, 80];
+        const values = [20, 40, 80];
-            let value = parseInt(input.value, 10);
+        let value = parseInt(input.value, 10);
-            if (isNaN(value)) value = 20;
+        if (isNaN(value)) value = 20;
     
-            // Find next value in the cycle
+        // Find next value in the cycle
-            const nextValue = values[(values.indexOf(value) + 1) % values.length];
+        const nextValue = values[(values.indexOf(value) + 1) % values.length];
-            input.value = nextValue;
+        input.value = nextValue;
     
-            card.classList.remove("active", "emphasis");
+        card.classList.remove("active", "emphasis");
-            if (nextValue === 40) card.classList.add("active");
+        if (nextValue === 40) card.classList.add("active");
-            else if (nextValue === 80) card.classList.add("emphasis");
+        else if (nextValue === 80) card.classList.add("emphasis");
-        }
+    }
-    </script>
+</script>
-<script src="{{ url_for('static', filename='js/fullscreen.js') }}"></script>
+<a class="video-link" href="{{ url_for('video') }}">▶</a>
 <script src="{{ url_for('static', filename='js/idle.js') }}"></script>
 </body>
 </html>

templates/result.html

@@ -295,7 +295,7 @@
     fire(rightOrigin);
   });
 </script>
-<script src="{{ url_for('static', filename='js/idle.js') }}"></script>
+<a class="video-link" href="{{ url_for('video') }}">▶</a>
 <script src="{{ url_for('static', filename='js/fullscreen.js') }}"></script>
 </body>
 </html>