xbl/cannamatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modified: app.py

Browse Source 
new file:   static/js/fullscreen.js
new file:   static/js/idle.js
modified:   templates/about.html
modified:   templates/inactive.html
modified:   templates/profiles.html
modified:   templates/quiz.html
modified:   templates/result.html
new file:   templates/video.html
This commit is contained in:
xbl
2026-04-16 20:27:39 +02:00
parent 02f0aa7de9
commit c164c592fa
9 changed files with 127 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app.py
View File

@ -55,3 +55,7 @@ def result():
if __name__ == "__main__": if __name__ == "__main__":
app.run(host='localhost', port=1337, debug=False) app.run(host='localhost', port=1337, debug=False)
@app.route("/video")
def video():
return render_template("video.html")

34
static/js/fullscreen.js Normal file
View File

@ -0,0 +1,34 @@
(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);
})();

16
static/js/idle.js Normal file
View File

@ -0,0 +1,16 @@
(function () {
const TIMEOUT_MS = 5 * 60 * 1000;
let timer;
function reset() {
clearTimeout(timer);
timer = setTimeout(() => {
window.location.href = '/video';
}, TIMEOUT_MS);
}
['mousemove', 'mousedown', 'keydown', 'touchstart', 'scroll', 'pointerdown']
.forEach(evt => document.addEventListener(evt, reset, { passive: true }));
reset(); // start the clock on page load
})();

2
templates/about.html
View File

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

2
templates/inactive.html
View File

@ -135,5 +135,7 @@
}; };
</script> </script>
<script src="{{ url_for('static', filename='js/inactive.js') }}"></script> <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> </body>
</html> </html>

2
templates/profiles.html
View File

@ -97,6 +97,8 @@
}); });
}); });
</script> </script>
<script src="{{ url_for('static', filename='js/fullscreen.js') }}"></script>
<script src="{{ url_for('static', filename='js/idle.js') }}"></script>
</body> </body>
</html> </html>

2
templates/quiz.html
View File

@ -63,5 +63,7 @@
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>
<script src="{{ url_for('static', filename='js/idle.js') }}"></script>
</body> </body>
</html> </html>

2
templates/result.html
View File

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

63
templates/video.html Normal file
View File

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>cannamatch</title>
<link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #000; overflow: hidden; }
.video-wrapper {
position: fixed;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
}
video {
height: 100%;
width: calc(100vh * 9 / 16);
object-fit: cover;
}
.btn-row {
position: fixed;
bottom: 2rem;
left: 0;
width: 100%;
display: flex;
justify-content: center;
gap: 1rem;
z-index: 10;
}
.btn-row a {
padding: 0.75rem 1.75rem;
background: #BFB531;
color: #000;
font-family: Arial, sans-serif;
font-weight: 700;
font-size: 1rem;
border-radius: 8px;
text-decoration: none;
}
.btn-row a:hover { background: #fff; }
</style>
</head>
<body>
<div class="video-wrapper">
<video src="{{ url_for('static', filename='video.mp4') }}"
autoplay muted loop playsinline></video>
</div>
<div class="btn-row">
<a href="{{ url_for('quiz') }}">Quiz</a>
<a href="{{ url_for('inactive') }}">Interactive</a>
</div>
</body>
<script src="{{ url_for('static', filename='js/fullscreen.js') }}"></script>
</html>