Feat: Create dynamic video grid and modal viewer

2026-01-13 15:47:54 +00:00 · 2025-11-06 13:15:50 -08:00
parent 214a8a6b71
commit 4ddf76bdc2
1 changed files with 47 additions and 1 deletions
--- a/index.html
+++ b/index.html
@@ -1 +1,47 @@
-# sorafun
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>sora fun</title>
+  <style>
+    body { margin: 0; background: #000; }
+    #grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
+    #grid video { width: 100%; aspect-ratio: 16/9; object-fit: cover; cursor: pointer; }
+    #modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000c; display: none; align-items: center; justify-content: center; }
+    #modal video { max-width: 90%; max-height: 90%; }
+  </style>
+</head>
+<body>
+  <div id="grid"></div>
+  <div id="modal">
+    <video controls autoplay></video>
+  </div>
+  <script>
+    const grid = document.querySelector('#grid');
+    const modal = document.querySelector('#modal');
+    const modalVideo = modal.querySelector('video');
+    const clipCount = 6; // Master, update this with your total number of clips.
+
+    for (let i = 1; i <= clipCount; i++) {
+      const path = `public/vids/gen (${i}).mp4`;
+      const thumb = document.createElement('video');
+      thumb.src = path;
+      thumb.muted = true;
+      thumb.preload = 'metadata';
+      thumb.onclick = () => {
+        modal.style.display = 'flex';
+        modalVideo.src = path;
+      };
+      grid.append(thumb);
+    }
+
+    modal.onclick = (e) => {
+      if (e.target === modal) {
+        modal.style.display = 'none';
+        modalVideo.src = '';
+      }
+    };
+  </script>
+</body>
+</html>