added multiple video support

frontend/app.js

@@ -30,11 +30,11 @@ document.getElementById("video-form").addEventListener("submit", async (event) =
     }
 
     const loader = document.getElementById("loader");
-    const videoContainer = document.getElementById("video-container");
+    const videoResults = document.getElementById("video-results");
     const errorContainer = document.getElementById("error-container");
 
     loader.classList.remove("hidden");
-    videoContainer.innerHTML = ""; // Clear previous videos
+    videoResults.innerHTML = ""; // Clear previous videos
     errorContainer.classList.add("hidden");
 
     try {
@@ -55,7 +55,7 @@ document.getElementById("video-form").addEventListener("submit", async (event) =
                 const videoElement = document.createElement("video");
                 videoElement.src = videoUrl;
                 videoElement.controls = true;
-                videoContainer.appendChild(videoElement);
+                videoResults.appendChild(videoElement);
             });
         } else {
             throw new Error("No videos were generated.");

frontend/index.html

@@ -91,6 +91,7 @@
 
         <div id="video-container">
             <div id="loader" class="hidden"></div>
+            <div id="video-results"></div>
             <div id="error-container" class="hidden"></div>
         </div>
     </main>

frontend/style.css

@@ -107,9 +107,16 @@ button:hover {
     text-align: center;
 }
 
-#generated-video {
-    max-width: 100%;
-    display: none;
+#video-results {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    justify-content: center;
+}
+
+#video-results video {
+    width: calc(50% - 0.5rem);
+    max-width: 400px;
     border-radius: 8px;
     box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 }