Add fullscreen live view at /live
- Schwarzer Hintergrund, Stream füllt den ganzen Bildschirm (object-fit: cover) - Overlay mit Uhrzeit und Einstellungs-Link erscheint bei Tap/Klick, blendet sich nach 3s aus - Vollbild-Button nutzt Fullscreen API - Auf Handys wird automatisch Landscape angefragt - Stream-Box auf Hauptseite ist jetzt klickbar und verlinkt auf /live Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Julian Vollmer
parent
496215c61a
commit
d9514e23d7
|
|
@ -139,6 +139,12 @@ def index():
|
||||||
return render_template("index.html", status=status)
|
return render_template("index.html", status=status)
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/live")
|
||||||
|
def live():
|
||||||
|
status = get_system_status()
|
||||||
|
return render_template("live.html", status=status)
|
||||||
|
|
||||||
|
|
||||||
@app.route("/api/status")
|
@app.route("/api/status")
|
||||||
def api_status():
|
def api_status():
|
||||||
return jsonify(get_system_status())
|
return jsonify(get_system_status())
|
||||||
|
|
|
||||||
|
|
@ -194,6 +194,7 @@
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
<!-- Stream -->
|
<!-- Stream -->
|
||||||
|
<a href="/live" style="text-decoration:none;">
|
||||||
<div class="stream-box">
|
<div class="stream-box">
|
||||||
{% if status.cam_available %}
|
{% if status.cam_available %}
|
||||||
<img src="/stream" alt="Kamera-Stream">
|
<img src="/stream" alt="Kamera-Stream">
|
||||||
|
|
@ -204,6 +205,7 @@
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
<!-- Status-Karten -->
|
<!-- Status-Karten -->
|
||||||
<div class="cards">
|
<div class="cards">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,214 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||||
|
<title>Babycam – Live</title>
|
||||||
|
<style>
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #000;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#stream {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#no-cam {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #444;
|
||||||
|
font-family: -apple-system, sans-serif;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#no-cam span { font-size: 3rem; }
|
||||||
|
#no-cam p { font-size: 0.9rem; }
|
||||||
|
|
||||||
|
/* Overlay – erscheint bei Tap/Hover */
|
||||||
|
#overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.5) 100%);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.show-ui #overlay { opacity: 1; }
|
||||||
|
|
||||||
|
#top-bar {
|
||||||
|
position: absolute;
|
||||||
|
top: 0; left: 0; right: 0;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
color: #fff;
|
||||||
|
font-family: -apple-system, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
#top-bar .title {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#top-bar .dot {
|
||||||
|
width: 8px; height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #f44336;
|
||||||
|
animation: pulse 1.5s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
{% if status.cam_available %}
|
||||||
|
#top-bar .dot { background: #4caf50; animation: none; }
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.3; }
|
||||||
|
}
|
||||||
|
|
||||||
|
#bottom-bar {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0; left: 0; right: 0;
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
color: #fff;
|
||||||
|
font-family: -apple-system, sans-serif;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#clock { font-size: 1.1rem; font-weight: 500; letter-spacing: 0.05em; }
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
background: rgba(255,255,255,0.15);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
border: none;
|
||||||
|
color: #fff;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: none;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover { background: rgba(255,255,255,0.25); }
|
||||||
|
|
||||||
|
/* Fullscreen-Button */
|
||||||
|
#fs-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 1rem; right: 1.25rem;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Alles außer fs-btn nur bei show-ui anzeigen */
|
||||||
|
#top-bar .title,
|
||||||
|
#bottom-bar {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.show-ui #top-bar .title,
|
||||||
|
body.show-ui #bottom-bar {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.show-ui #fs-btn { opacity: 1; }
|
||||||
|
#fs-btn { opacity: 0; transition: opacity 0.3s; pointer-events: all; }
|
||||||
|
body.show-ui #fs-btn { opacity: 1; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
{% if status.cam_available %}
|
||||||
|
<img id="stream" src="/stream" alt="Babycam Live-Stream">
|
||||||
|
{% else %}
|
||||||
|
<div id="no-cam">
|
||||||
|
<span>📷</span>
|
||||||
|
<p>Kamera nicht verbunden</p>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<div id="overlay"></div>
|
||||||
|
|
||||||
|
<div id="top-bar">
|
||||||
|
<div class="title">
|
||||||
|
<div class="dot"></div>
|
||||||
|
Babycam Live
|
||||||
|
</div>
|
||||||
|
<button class="btn" id="fs-btn" onclick="toggleFullscreen()">⛶ Vollbild</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="bottom-bar">
|
||||||
|
<div id="clock"></div>
|
||||||
|
<a class="btn" href="/">⚙ Einstellungen</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// UI bei Tap/Klick kurz einblenden
|
||||||
|
let hideTimer;
|
||||||
|
|
||||||
|
function showUI() {
|
||||||
|
document.body.classList.add("show-ui");
|
||||||
|
clearTimeout(hideTimer);
|
||||||
|
hideTimer = setTimeout(() => document.body.classList.remove("show-ui"), 3000);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.addEventListener("click", showUI);
|
||||||
|
document.body.addEventListener("touchstart", showUI, { passive: true });
|
||||||
|
|
||||||
|
// Uhr
|
||||||
|
function updateClock() {
|
||||||
|
const now = new Date();
|
||||||
|
const h = String(now.getHours()).padStart(2, "0");
|
||||||
|
const m = String(now.getMinutes()).padStart(2, "0");
|
||||||
|
const s = String(now.getSeconds()).padStart(2, "0");
|
||||||
|
document.getElementById("clock").textContent = `${h}:${m}:${s}`;
|
||||||
|
}
|
||||||
|
updateClock();
|
||||||
|
setInterval(updateClock, 1000);
|
||||||
|
|
||||||
|
// Fullscreen
|
||||||
|
function toggleFullscreen() {
|
||||||
|
if (!document.fullscreenElement) {
|
||||||
|
document.documentElement.requestFullscreen().catch(() => {});
|
||||||
|
} else {
|
||||||
|
document.exitFullscreen();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("fullscreenchange", () => {
|
||||||
|
const btn = document.getElementById("fs-btn");
|
||||||
|
btn.textContent = document.fullscreenElement ? "✕ Vollbild beenden" : "⛶ Vollbild";
|
||||||
|
});
|
||||||
|
|
||||||
|
// Auf Handy: Landscape empfehlen
|
||||||
|
if (screen.orientation && screen.orientation.lock) {
|
||||||
|
screen.orientation.lock("landscape").catch(() => {});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue