Working on new UI

2025-06-17 09:21:25 +02:00
parent 91be8274c4
commit 9100d11bbf
4 changed files with 494 additions and 260 deletions
--- a/static/index.html
+++ b/static/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Viva++</title>
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+	<style>
+		body {
+			background-color: #000;
+			margin: 0;
+			padding: 0;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 100vh;
+		}
+
+		.loader {
+			border: 1.5vw solid #333;
+			border-top: 1.5vw solid #3498db;
+			border-bottom: 1.5vw solid #3498db;
+			border-radius: 50%;
+			width: 10vw;
+			height: 10vw;
+			animation: spin 2s linear infinite;
+		}
+
+		@keyframes spin {
+			0% { transform: rotate(0deg); }
+			100% { transform: rotate(360deg); }
+		}
+
+		.video-container {
+			display: none;
+			width: 100%;
+			justify-content: center;
+			align-items: center;
+			gap: 2vw;
+		}
+
+		.video-thumbnail {
+			border-radius: 8px;
+			transition: transform 0.3s ease;
+			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+			background-color: #444;
+			aspect-ratio: 16/9;
+			object-fit: cover;
+		}
+
+		.current-video {
+			width: 50vw;
+			z-index: 2;
+			box-shadow: 0 0 200px -10px #444;
+		}
+
+		.side-video {
+			width: 20vw;
+			opacity: 0.7;
+			z-index: 1;
+		}
+	</style>
+	<script>
+		function hideLoader() {
+            $(".loader").hide();
+            $(".video-container").css("display", "flex");
+		}
+
+		$(document).ready(function() {
+			// Pre-set all thumbnails to a placeholder state
+			$(".video-thumbnail").attr("src", "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 16 9'%3E%3C/svg%3E");
+
+			$.getJSON("/api/homepage", function(data) {
+                let currentVideo = data.currentVideo;
+                // previousVideo = data.previousVideo;
+                // nextVideo = data.nextVideo;
+				//
+                // // Set thumbnails
+                $("#current-thumb").attr("src", currentVideo.thumbnail);
+                // $("#prev-thumb").attr("src", previousVideo.thumbnail);
+                // $("#next-thumb").attr("src", nextVideo.thumbnail);
+
+                // Hide loader and show videos
+                hideLoader();
+			})
+		})
+	</script>
+</head>
+<body>
+	<div class="loader" id="loader"></div>
+	<div class="video-container">
+		<img id="prev-thumb" class="video-thumbnail side-video" alt="Previous Video">
+		<img id="current-thumb" class="video-thumbnail current-video" alt="Current Video">
+		<img id="next-thumb" class="video-thumbnail side-video" alt="Next Video">
+	</div>
+</body>
+</html>