WIP

2026-05-30 00:22:52 +02:00
parent 49828c9323
commit f83e01380c
4 changed files with 171 additions and 103 deletions
@@ -0,0 +1,20 @@
+async function refreshGallery() {
+    const res = await fetch("/photos");
+    const files = await res.json();
+    const gallery = document.getElementById("gallery");
+
+    if (files.length === 0) return;
+
+    gallery.innerHTML = files
+        .map((f) => `<img src="/photo/${f}" alt="${f}" title="${f}">`)
+        .join("");
+}
+
+document.addEventListener("keydown", async (e) => {
+    if (e.key !== "c" && e.key !== "C") return;
+    await fetch("/capture");
+    refreshGallery();
+});
+
+refreshGallery();
+setInterval(refreshGallery, 10000);
@@ -0,0 +1,103 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background: #0a0a0a;
+    color: #e0e0e0;
+    font-family: "Courier New", monospace;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+}
+
+header {
+    text-align: center;
+}
+
+h1 {
+    font-size: 1.2rem;
+    letter-spacing: 0.3em;
+    text-transform: uppercase;
+    color: #00ff88;
+}
+
+.subtitle {
+    font-size: 0.75rem;
+    color: #555;
+    letter-spacing: 0.15em;
+    margin-top: 4px;
+}
+
+.stream-container {
+    position: relative;
+    border: 1px solid #1a1a1a;
+    box-shadow: 0 0 40px rgba(0, 255, 136, 0.05);
+}
+
+.stream-container::before {
+    content: "● REC";
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    font-size: 0.65rem;
+    color: #ff4444;
+    letter-spacing: 0.1em;
+    z-index: 10;
+    animation: blink 1.5s infinite;
+}
+
+@keyframes blink {
+    0%,
+    100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.2;
+    }
+}
+
+img#stream {
+    display: block;
+    max-width: 75vh;
+    max-height: 90vw;
+}
+
+.gallery {
+    display: flex;
+    gap: 8px;
+}
+
+.gallery-empty {
+    font-size: 0.7rem;
+    color: #333;
+    letter-spacing: 0.1em;
+}
+
+.gallery img {
+    width: 120px;
+    height: 80px;
+    object-fit: cover;
+    border: 1px solid #1a1a1a;
+    opacity: 0.75;
+    transition: opacity 0.2s;
+}
+
+.gallery img:hover {
+    opacity: 1;
+}
+
+footer {
+    font-size: 0.7rem;
+    color: #333;
+    letter-spacing: 0.1em;
+}
+
+footer span {
+    color: #00ff88;
+}