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
2026-04-27 18:42:24 +02:00
parent c164c592fa
commit 12bed3cbe1
7 changed files with 71 additions and 94 deletions
--- a/static/js/fullscreen.js
+++ b/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);
-})();
--- a/static/style.css
+++ b/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); }
--- a/templates/about.html
+++ b/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>
--- a/templates/inactive.html
+++ b/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>
--- a/templates/profiles.html
+++ b/templates/profiles.html
@ -54,50 +54,49 @@
        {% endfor %}
    </div>
    </div>
+<script>
+    const labels = ['Energy', 'Calm', 'Relax', 'Sleep', 'Focus', 'Inspire'];

-    <script>
-        const labels = ['Energy', 'Calm', 'Relax', 'Sleep', 'Focus', 'Inspire'];
+    const profiles = {{ profiles | tojson }};

-        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) => {
-            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,
-                        borderColor: 'rgba(191,181,49,1)',
-                        pointBackgroundColor: 'rgba(0,0,0,0)',
-                        pointBorderColor: 'rgba(191,181,49,1)',
-                        backgroundColor: 'rgba(191,181,49,0.420)',
-			pointRadius: 0,
-			pointHoverRadius: 0
-                    }]
+        new Chart(ctx, {
+            type: 'radar',
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: name,
+                    data: data.values,
+                    fill: true,
+                    borderColor: 'rgba(191,181,49,1)',
+                    pointBackgroundColor: 'rgba(0,0,0,0)',
+                    pointBorderColor: 'rgba(191,181,49,1)',
+                    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: {
-                    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 } }
-                }
-            });
+    	    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>
--- a/templates/quiz.html
+++ b/templates/quiz.html
@ -47,23 +47,23 @@
    	</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;
+<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;
+        // 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>
-<script src="{{ url_for('static', filename='js/fullscreen.js') }}"></script>
+        card.classList.remove("active", "emphasis");
+        if (nextValue === 40) card.classList.add("active");
+        else if (nextValue === 80) card.classList.add("emphasis");
+    }
+</script>
+<a class="video-link" href="{{ url_for('video') }}">▶</a>
 <script src="{{ url_for('static', filename='js/idle.js') }}"></script>
 </body>
 </html>
--- a/templates/result.html
+++ b/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>