add services

camera/static/script.js

@@ -11,8 +11,18 @@ async function refreshGallery() {
 }
 
 document.addEventListener("keydown", async (e) => {
-    if (e.key !== "c" && e.key !== "C") return;
+    if (e.key !== ">") return;
+
+    const flash = document.getElementById("flash");
+    flash.classList.remove("fade");
+    flash.classList.add("active");
+
+    await new Promise((r) => setTimeout(r, 300));
     await fetch("/capture");
+
+    flash.classList.remove("active");
+    flash.classList.add("fade");
+
     refreshGallery();
 });
 

camera/static/style.css

@@ -12,7 +12,7 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
     gap: 20px;
 }
 
@@ -38,6 +38,7 @@ h1 {
     position: relative;
     border: 1px solid #1a1a1a;
     box-shadow: 0 0 40px rgba(0, 255, 136, 0.05);
+    transform: rotate(90deg) scale(1.5);
 }
 
 .stream-container::before {
@@ -49,7 +50,25 @@ h1 {
     color: #ff4444;
     letter-spacing: 0.1em;
     z-index: 10;
-    animation: blink 1.5s infinite;
+    animation: blink 0.2s infinite;
+}
+
+.flash-overlay {
+    position: absolute;
+    inset: 0;
+    background: white;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.08s ease-in;
+}
+
+.flash-overlay.active {
+    opacity: 0.6;
+}
+
+.flash-overlay.fade {
+    opacity: 0;
+    transition: opacity 0.2s ease-out;
 }
 
 @keyframes blink {
@@ -58,18 +77,21 @@ h1 {
         opacity: 1;
     }
     50% {
-        opacity: 0.2;
+        opacity: 0;
     }
 }
 
 img#stream {
     display: block;
-    max-width: 75vh;
-    max-height: 90vw;
+    max-height: 95vh;
+    max-width: 100vw;
 }
 
 .gallery {
     display: flex;
+    justify-content: center;
+    flex: 1;
+    margin-bottom: 5px;
     gap: 8px;
 }
 
@@ -80,8 +102,8 @@ img#stream {
 }
 
 .gallery img {
-    width: 120px;
-    height: 80px;
+    width: 200px;
+    height: 300px;
     object-fit: cover;
     border: 1px solid #1a1a1a;
     opacity: 0.75;
@@ -93,11 +115,22 @@ img#stream {
 }
 
 footer {
+    display: flex;
+    align-items: end;
     font-size: 0.7rem;
     color: #333;
     letter-spacing: 0.1em;
+    width: 100%;
 }
 
 footer span {
     color: #00ff88;
 }
+
+.qrcode {
+    display: inline-block;
+    right: 16px;
+    width: 200px;
+    height: 200px;
+    margin-bottom: 30px;
+}