Spaces:

vericudebuget
/

huggingtube

Running

App Files Files Community

vericudebuget commited on Nov 4, 2024

Commit

4c11f5a

verified ·

1 Parent(s): 715e27d

Upload 11 files

Browse files

Files changed (11) hide show

all_videos.html +383 -0
index.html +510 -424
index3.html +371 -0
output.vtt +21 -0
rules.html +298 -0
search-results.html +0 -0
test.html +175 -0
test.py +19 -0
upload.html +103 -0
video-player copy.html +464 -0
video-player.html +1096 -0

all_videos.html ADDED Viewed

	@@ -0,0 +1,383 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HuggingTube</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Montserrat', sans-serif;
+        }
+        :root {
+            --bg-primary: #0a0f18;
+            --bg-secondary: #141e2f;
+            --text-primary: #ffffff;
+            --text-secondary: #adbac7;
+            --accent: #2188ff;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+        }
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0.5rem 1rem;
+            background-color: var(--bg-secondary);
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 1000;
+        }
+        .logo {
+            color: var(--text-primary);
+            font-size: 1.2rem;
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+        }
+        .logo i {
+            color: var(--accent);
+            margin-right: 0.5rem;
+        }
+        .search-bar {
+            flex-grow: 1;
+            max-width: 600px;
+            margin: 0 1rem;
+        }
+        .search-bar input {
+            width: 100%;
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            border: 1px solid var(--text-secondary);
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+        }
+        .user-actions i {
+            margin-left: 1rem;
+            cursor: pointer;
+        }
+        main {
+            display: flex;
+            margin-top: 56px; /* Header height */
+        }
+        .sidebar {
+            width: 240px;
+            padding: 1rem;
+            position: fixed;
+            top: 56px;
+            bottom: 0;
+            overflow-y: auto;
+            background-color: var(--bg-primary);
+        }
+        .sidebar-item {
+            display: flex;
+            align-items: center;
+            padding: 0.75rem 1rem;
+            cursor: pointer;
+            border-radius: 10px;
+        }
+        .sidebar-item:hover {
+            background-color: var(--bg-secondary);
+        }
+        .sidebar-item i {
+            margin-right: 1rem;
+            width: 20px;
+        }
+        .content {
+            flex-grow: 1;
+            padding: 1rem;
+            margin-left: 240px;
+        }
+        .video-grid {
+            display: flex;
+            flex-direction: column;
+        }
+        .video-card {
+            display: flex;
+            align-items: center;
+            padding: 0.5rem;
+            border-bottom: 1px solid var(--text-secondary);
+        }
+        .thumbnail {
+            width: 80px;
+            height: 80px;
+            margin-right: 1rem;
+            border-radius: 10px;
+            overflow: hidden;
+        }
+        .thumbnail img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .video-info {
+            flex-grow: 1;
+        }
+        .video-title {
+            font-size: 1rem;
+            font-weight: bold;
+            margin-bottom: 0.25rem;
+        }
+        .video-uploader {
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+        }
+        .video-date {
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+        }
+        .subtitle {
+            display: flex;
+            align-items: center;
+            margin-left: 1rem;
+            padding: 0.25rem 0.5rem;
+            border-radius: 5px;
+            background-color: rgb(0, 72, 85);
+        }
+        .subtitle_icon {
+            width: auto;
+            height: 1em;
+            margin-right: 0.5rem;
+        }
+        .subtitle_text {
+            font-size: 0.9rem;
+            color: #000000;
+        }
+        .video-url {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+            margin-top: 0.25rem;
+        }
+        /* Mobile styles */
+        @media (max-width: 768px) {
+            .video-card {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+            .thumbnail {
+                width: 100%;
+                height: 150px;
+                margin-bottom: 1rem;
+            }
+            .video-info {
+                width: 100%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="logo">
+            <i class="fab fa-youtube"></i>
+            <span>HuggingTube</span>
+        </div>
+        <div class="search-bar">
+            <input type="text" placeholder="Search">
+        </div>
+        <div class="user-actions" onclick="toggleVideoUpload()">
+            <i class="fas fa-video"></i>
+            <i class="fas fa-info-circle" onclick="toggleInfo()"></i>
+        </div>
+        <script>
+            function toggleVideoUpload() {
+                window.location.href = "upload.html";
+            }
+            function toggleInfo() {
+                window.location.href = "about.html";
+            }
+        </script>
+    </header>
+    <main>
+        <aside class="sidebar">
+            <div class="sidebar-item">
+                <i class="fas fa-home" onclick="homeInfo()"></i> Home
+            </div>
+            <div class="sidebar-item" onclick="toggleVideoUpload()">
+                <i class="fas fa-upload"></i> Upload
+            </div>
+            <div class="sidebar-item">
+                <i class="fas fa-photo-video"></i> All videos
+            </div>
+        </aside>
+        <section class="content" style="max-width: 100vw;">
+            <div class="video-grid" id="videoGrid">
+                <!-- Dynamic video cards will be inserted here -->
+            </div>
+        </section>
+    </main>
+    <nav class="mobile-nav">
+        <div class="mobile-nav-items">
+            <div class="mobile-nav-item">
+                <i class="fas fa-home"></i> Home
+            </div>
+            <div class="mobile-nav-item" onclick="toggleVideoUpload()">
+                <i class="fas fa-upload"></i> Upload
+            </div>
+            <div class="mobile-nav-item">
+                <i class="fas fa-photo-video"></i> Library
+            </div>
+        </div>
+    </nav>
+    <script>
+        async function fetchVideoMetadata() {
+            try {
+                // Clear the 'video_to_watch' key from localStorage on page load
+                localStorage.removeItem('video_to_watch');
+                // Fetch the video-index JSON data
+                const response = await fetch('https://huggingface.co/spaces/vericudebuget/ok4231/raw/main/metadata/video-index.json');
+                const videoIndexData = await response.json();
+                // Sort the video index data from latest to oldest
+                videoIndexData.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
+                // Base URLs for metadata and thumbnails
+                const baseUrl = 'https://huggingface.co/spaces/vericudebuget/ok4231/raw/main/metadata/';
+                const thumbnailBaseUrl = 'https://huggingface.co/spaces/vericudebuget/ok4231/raw/main/thumbnails/';
+                // Function to insert a video card in the correct position based on uploadTimestamp
+                const insertVideoCard = (videoCard, videoTimestamp) => {
+                    const existingCards = document.querySelectorAll('.video-card');
+                    let inserted = false;
+                    for (const card of existingCards) {
+                        const cardTimestamp = new Date(card.getAttribute('data-timestamp'));
+                        if (videoTimestamp > cardTimestamp) {
+                            card.parentNode.insertBefore(videoCard, card);
+                            inserted = true;
+                            break;
+                        }
+                    }
+                    // If no cards are newer, append it to the end
+                    if (!inserted) {
+                        videoGrid.appendChild(videoCard);
+                    }
+                };
+                // Function to encrypt the link
+                const encryptLink = (link, key) => {
+                    // Simple XOR encryption for demonstration purposes
+                    const encrypted = link.split('').map((char, i) => {
+                        return String.fromCharCode(char.charCodeAt(0) ^ key.charCodeAt(i % key.length));
+                    }).join('');
+                    return btoa(encrypted); // base64 encode
+                };
+                // Loop through each URL in the sorted list and fetch the respective metadata
+                const videoGrid = document.getElementById('videoGrid');
+                for (let i = 0; i < videoIndexData.length; i++) {
+                    let videoIndexUrl = videoIndexData[i].url;
+                    // Extract only the file name (last part of the URL)
+                    let fileName = videoIndexUrl.substring(videoIndexUrl.lastIndexOf('/') + 1);
+                    // Create the full URL by appending the file name to the base URL
+                    let finalUrl = baseUrl + encodeURIComponent(fileName);
+                    try {
+                        // Fetch metadata from the properly encoded URL
+                        const videoResponse = await fetch(finalUrl);
+                        const videoData = await videoResponse.json();
+                        // Fix thumbnail URL by using the online location
+                        let thumbnailUrl = thumbnailBaseUrl + encodeURIComponent(videoData.thumbnailLocation.substring(videoData.thumbnailLocation.lastIndexOf('/') + 1));
+                        // Convert duration from seconds to mm:ss
+                        const formatDuration = (duration) => {
+                            if (duration === null || duration === undefined) return 'N/A';
+                            const minutes = Math.floor(duration / 60);
+                            const seconds = duration % 60;
+                            return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+                        };
+                        // Function to handle click event and store video index URL in localStorage
+                        const handleVideoClick = () => {
+                            const encryptedLink = encryptLink(finalUrl, 'JesusIsGod');
+                            window.location.href = `video-player.html#${encryptedLink}`;
+                        };
+                        // Create a video card dynamically
+                        const videoCard = document.createElement('div');
+                        videoCard.classList.add('video-card');
+                        videoCard.setAttribute('data-timestamp', new Date(videoData.uploadTimestamp).toISOString());
+                        videoCard.innerHTML = `
+                            <div class="thumbnail">
+                                <img src="${thumbnailUrl}" alt="${videoData.title}">
+                            </div>
+                            <div class="video-info">
+                                <h3 class="video-title">${videoData.title}</h3>
+                                <p class="video-uploader">${videoData.uploader}</p>
+                                <p class="video-date">${new Intl.DateTimeFormat('en-US', { month: 'long', day: 'numeric', year: 'numeric' }).format(new Date(videoData.uploadTimestamp))}</p>
+                                ${videoData.subtitleLocation && videoData.subtitleLocation.trim() !== "" ? `
+                                    <div class="subtitle">
+                                        <img class="subtitle_icon" src="https://cdn.iconscout.com/icon/free/png-512/free-subtitles-icon-download-in-svg-png-gif-file-formats--subtitle-text-translate-basic-multimedia-pack-user-interface-icons-4083807.png?f=webp&w=256">
+                                        <span class="subtitle_text">Subtitles</span>
+                                    </div>
+                                ` : ''}
+                            </div>
+                        `;
+                        // Add event listeners for the thumbnail and title
+                        videoCard.querySelector('.thumbnail img').addEventListener('click', handleVideoClick);
+                        videoCard.querySelector('.video-title').addEventListener('click', handleVideoClick);
+                        // Insert the video card in the correct position based on uploadTimestamp
+                        const videoTimestamp = new Date(videoData.uploadTimestamp);
+                        insertVideoCard(videoCard, videoTimestamp);
+                        // Wait 0.3 seconds before fetching the next URL
+                        await new Promise(resolve => setTimeout(resolve, 10));
+                    } catch (videoError) {
+                        ;
+                    }
+                }
+            } catch (error) {
+                console.error('Error fetching video metadata:', error);
+            }
+        }
+        // Call the function on page load
+        window.onload = fetchVideoMetadata;
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -1,424 +1,510 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HuggingTube</title>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
-    <style>
-:root {
-            --bg-primary: #0a0f18;
-            --bg-secondary: #141e2f;
-            --text-primary: #ffffff;
-            --text-secondary: #adbac7;
-            --accent: #2188ff;
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        .video-card {
-            width: 250px;
-            margin: 15px;
-        }
-        body {
-            font-family: Arial, sans-serif;
-            background-color: var(--bg-primary);
-            color: var(--text-primary);
-        }
-        header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 0.5rem 1rem;
-            background-color: var(--bg-secondary);
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            z-index: 1000;
-        }
-        .logo {
-            color: var(--text-primary);
-            font-size: 1.2rem;
-            font-weight: bold;
-            display: flex;
-            align-items: center;
-        }
-        .logo i {
-            color: var(--accent);
-            margin-right: 0.5rem;
-        }
-        .search-bar {
-            flex-grow: 1;
-            max-width: 600px;
-            margin: 0 1rem;
-        }
-        .search-bar input {
-            width: 100%;
-            padding: 0.5rem 1rem;
-            border-radius: 20px;
-            border: 1px solid var(--text-secondary);
-            background-color: var(--bg-primary);
-            color: var(--text-primary);
-        }
-        .user-actions i {
-            margin-left: 1rem;
-            cursor: pointer;
-        }
-        main {
-            display: flex;
-            margin-top: 56px; /* Header height */
-        }
-        .sidebar {
-            width: 240px;
-            padding: 1rem;
-            position: fixed;
-            top: 56px;
-            bottom: 0;
-            overflow-y: auto;
-            background-color: var(--bg-primary);
-        }
-        .sidebar-item {
-            display: flex;
-            align-items: center;
-            padding: 0.75rem 1rem;
-            cursor: pointer;
-            border-radius: 10px;
-        }
-        .sidebar-item:hover {
-            background-color: var(--bg-secondary);
-        }
-        .sidebar-item i {
-            margin-right: 1rem;
-            width: 20px;
-        }
-        .content {
-            flex-grow: 1;
-            padding: 1rem;
-            margin-left: 240px;
-        }
-        .video-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-            gap: 1rem;
-        }
-        .video-card {
-            cursor: pointer;
-        }
-        .thumbnail {
-            position: relative;
-            width: 100%;
-            height: 0;
-            padding-bottom: 56.25%;
-            background-color: var(--bg-secondary);
-            border-radius: 10px;
-            overflow: hidden;
-        }
-        .video-duration {
-            position: absolute;
-            bottom: 5px;
-            right: 5px;
-            background-color: rgba(0, 0, 0, 0.8);
-            padding: 2px 4px;
-            border-radius: 4px;
-            font-size: 0.8rem;
-        }
-        .video-info {
-            display: grid;
-            margin-top: 0.5rem;
-        }
-        .channel-avatar {
-            width: 36px;
-            height: 36px;
-            border-radius: 50%;
-            background-color: var(--bg-secondary);
-            margin-right: 0.5rem;
-            flex-shrink: 0;
-        }
-        .video-details h3 {
-            font-size: 1rem;
-            margin-bottom: 0.25rem;
-        }
-        .video-details p {
-            font-size: 0.9rem;
-            color: var(--text-secondary);
-        }
-        .mobile-nav {
-            display: none;
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background-color: var(--bg-secondary);
-            padding: 0.5rem;
-            z-index: 1000;
-        }
-        .mobile-nav-items {
-            display: flex;
-            justify-content: space-around;
-        }
-        .mobile-nav-item {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            font-size: 0.8rem;
-        }
-        .mobile-nav-item i {
-            font-size: 1.2rem;
-            margin-bottom: 0.25rem;
-        }
-        /* Mobile styles */
-        @media (max-width: 768px)
-        {
-            .video-card {
-            width: 100%;
-            margin: 15px;
-            }
-            .logo span {
-                display: none;
-            }
-            .search-bar {
-                margin: 0 0.5rem;
-            }
-            .user-actions i {
-                margin-left: 0.5rem;
-            }
-            .sidebar {
-                display: none;
-            }
-            .content {
-                margin-left: 0;
-                margin-bottom: 60px; /* Space for mobile nav */
-            }
-            .mobile-nav {
-                display: block;
-            }
-            .video-grid {
-                display: grid;
-                grid-template-columns: 1fr;
-            }
-        }
-        /* Small mobile styles */
-        @media (max-width: 480px) {
-            .video-card {
-            width: 100%;
-            margin: 15px;
-            }
-            .user-actions {
-                display: none;
-            }
-            .search-bar input {
-                font-size: 14px;
-            }
-            .video-details h3 {
-                font-size: 0.9rem;
-            }
-            .video-details p {
-                font-size: 0.8rem;
-            }
-        }
-        .video-grid {
-            display: flex;
-            flex-wrap: wrap;
-        }
-        .thumbnail img {
-            width: 100%;
-        }
-        .video-info h3 {
-            margin: 10px 0;
-        }
-    </style>
-</head>
-<body>
-    <header>
-        <div class="logo">
-            <i class="fab fa-youtube"></i>
-            <span>HuggingTube</span>
-        </div>
-        <div class="search-bar">
-            <input type="text" placeholder="Search">
-        </div>
-        <div class="user-actions">
-            <i class="fas fa-video"></i>
-            <i class="fas fa-bell"></i>
-            <i class="fas fa-user-circle"></i>
-        </div>
-    </header>
-    <main>
-        <aside class="sidebar">
-            <div class="sidebar-item">
-                <i class="fas fa-home"></i> Home
-            </div>
-            <div class="sidebar-item">
-                <i class="fas fa-compass"></i> Explore
-            </div>
-            <div class="sidebar-item">
-                <i class="fas fa-upload"></i> Upload
-            </div>
-            <div class="sidebar-item">
-                <i class="fas fa-photo-video"></i> All videos
-            </div>
-        </aside>
-        <section class="content">
-            <div class="video-grid" id="videoGrid">
-                <!-- Dynamic video cards will be inserted here -->
-            </div>
-        </section>
-    </main>
-    <nav class="mobile-nav">
-        <div class="mobile-nav-items">
-            <div class="mobile-nav-item">
-                <i class="fas fa-home"></i> Home
-            </div>
-            <div class="mobile-nav-item">
-                <i class="fas fa-compass"></i> Explore
-            </div>
-            <div class="mobile-nav-item">
-                <i class="fas fa-upload"></i> Upload
-            </div>
-            <div class="mobile-nav-item">
-                <i class="fas fa-photo-video"></i> Library
-            </div>
-        </div>
-    </nav>
-    <script>
-        async function fetchVideoMetadata() {
-    try {
-        // Fetch the raw video-index JSON-like data
-        const response = await fetch('https://huggingface.co/spaces/vericudebuget/ok4231/raw/main/metadata/video-index.json');
-        const textData = await response.text();
-        // Manually process the raw data, splitting by ';' and trimming
-        let rawUrls = textData.trim().replace(/[{}]/g, '').split(';').filter(url => url.trim());
-        // Base URLs for metadata and thumbnails
-        const baseUrl = 'https://huggingface.co/spaces/vericudebuget/ok4231/raw/main/metadata/';
-        const thumbnailBaseUrl = 'https://huggingface.co/spaces/vericudebuget/ok4231/raw/main/thumbnails/';
-        // Loop through each URL in the list and fetch the respective metadata
-        const videoGrid = document.getElementById('videoGrid');
-        for (let i = 0; i < rawUrls.length; i++) {
-            let videoUrl = rawUrls[i].trim();
-            // Extract only the file name (last part of the URL)
-            let fileName = videoUrl.substring(videoUrl.lastIndexOf('/') + 1);
-            let indexFileName = fileName.replace('-index.json', ''); // Remove '-index.json' for use in redirection
-            // Create the full URL by appending the file name to the base URL
-            let finalUrl = baseUrl + encodeURIComponent(fileName);
-            try {
-                // Fetch metadata from the properly encoded URL
-                const videoResponse = await fetch(finalUrl);
-                const videoData = await videoResponse.json();
-                // Fix thumbnail URL by using the online location
-                let thumbnailUrl = thumbnailBaseUrl + encodeURIComponent(videoData.thumbnailLocation.substring(videoData.thumbnailLocation.lastIndexOf('/') + 1));
-                // Create a video card dynamically
-                const videoCard = document.createElement('div');
-                videoCard.classList.add('video-card');
-                videoCard.innerHTML = `
-                    <div class="thumbnail">
-                        <img src="${thumbnailUrl}" alt="${videoData.title}" style="cursor: pointer;" onclick="window.location.href='videos/jsonindex${indexFileName}.html'">
-                        <span class="video-duration">N/A</span>
-                    </div>
-                    <div class="video-info">
-                        <h3 style="cursor: pointer;" onclick="window.location.href='videos/jsonindex${indexFileName}.html'">${videoData.title}</h3>
-                        <p>${videoData.uploader}</p>
-                        <p>${videoData.views} views • ${new Date(videoData.uploadTimestamp).toLocaleDateString()}</p>
-                    </div>
-                `;
-                // Append the video card to the grid
-                videoGrid.appendChild(videoCard);
-                // Wait 0.3 seconds before fetching the next URL
-                await new Promise(resolve => setTimeout(resolve, 300));
-            } catch (videoError) {
-                console.error(`Error fetching metadata for URL: ${finalUrl}`, videoError);
-            }
-        }
-    } catch (error) {
-        console.error('Error fetching video metadata:', error);
-    }
-}
-// Call the function on page load
-window.onload = fetchVideoMetadata;
-    </script>
-    <img scr="https://huggingface.co/spaces/vericudebuget/ok4231/raw/main/thumbnails/From%20Buddha%20to%20Jesus%20%20%23fyp%20%23christian%20%23testimony%20%23gospel%20%23jesusislord%20%23believe%20%23%C9%A2%E1%B4%8F%E1%B4%85%C9%AAs%C9%A2%E1%B4%8F%E1%B4%8F%E1%B4%85%20%23christ%20%23jesusiscalling%20%23christianpost%20%23christianity%20%23bible%20%23biblestudymoments%20(1)-kwne_thumb.jpg"></img>
-</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HuggingTube</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Montserrat', sans-serif;
+        }
+:root {
+            --bg-primary: #0a0f18;
+            --bg-secondary: #141e2f;
+            --text-primary: #ffffff;
+            --text-secondary: #adbac7;
+            --accent: #2188ff;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        .video-card {
+            width: 250px;
+            margin: 15px;
+        }
+        body {
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+        }
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0.5rem 1rem;
+            background-color: var(--bg-secondary);
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 1000;
+        }
+        .logo {
+            color: var(--text-primary);
+            font-size: 1.2rem;
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+        }
+        .logo i {
+            color: var(--accent);
+            margin-right: 0.5rem;
+        }
+        .search-bar {
+            flex-grow: 1;
+            max-width: 600px;
+            margin: 0 1rem;
+        }
+        .search-bar input {
+            width: 100%;
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            border: 1px solid var(--text-secondary);
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+        }
+        .user-actions i {
+            margin-left: 1rem;
+            cursor: pointer;
+        }
+        main {
+            display: flex;
+            margin-top: 56px; /* Header height */
+        }
+        .sidebar {
+            width: 240px;
+            padding: 1rem;
+            position: fixed;
+            top: 56px;
+            bottom: 0;
+            overflow-y: auto;
+            background-color: var(--bg-primary);
+        }
+        .sidebar-item {
+            display: flex;
+            align-items: center;
+            padding: 0.75rem 1rem;
+            cursor: pointer;
+            border-radius: 10px;
+        }
+        .sidebar-item:hover {
+            background-color: var(--bg-secondary);
+        }
+        .sidebar-item i {
+            margin-right: 1rem;
+            width: 20px;
+        }
+        .content {
+            flex-grow: 1;
+            padding: 1rem;
+            margin-left: 240px;
+        }
+        .video-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 1rem;
+        }
+        .video-card {
+            cursor: pointer;
+        }
+        .thumbnail {
+            position: relative;
+            width: 100%;
+            height: 0;
+            padding-bottom: 56.25%;
+            background-color: var(--bg-secondary);
+            border-radius: 10px;
+            overflow: hidden;
+        }
+        .video-duration {
+            position: absolute;
+            bottom: 5px;
+            right: 5px;
+            background-color: rgba(0, 0, 0, 0.8);
+            padding: 2px 4px;
+            border-radius: 4px;
+            font-size: 0.8rem;
+        }
+        .video-info {
+            display: grid;
+            margin-top: 0.5rem;
+        }
+        .channel-avatar {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            background-color: var(--bg-secondary);
+            margin-right: 0.5rem;
+            flex-shrink: 0;
+        }
+        .video-details h3 {
+            font-size: 1rem;
+            margin-bottom: 0.25rem;
+        }
+        .video-details p {
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+        }
+        .mobile-nav {
+            display: none;
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background-color: var(--bg-secondary);
+            padding: 0.5rem;
+            z-index: 1000;
+        }
+        .mobile-nav-items {
+            display: flex;
+            justify-content: space-around;
+        }
+        .mobile-nav-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            font-size: 0.8rem;
+        }
+        .mobile-nav-item i {
+            font-size: 1.2rem;
+            margin-bottom: 0.25rem;
+        }
+        /* Mobile styles */
+        @media (max-width: 768px)
+        {
+            .video-card {
+            width: 100%;
+            margin: 15px;
+            }
+            .logo span {
+                display: none;
+            }
+            .search-bar {
+                margin: 0 0.5rem;
+            }
+            .user-actions i {
+                margin-left: 0.5rem;
+            }
+            .sidebar {
+                display: none;
+            }
+            .content {
+                margin-left: 0;
+                margin-bottom: 60px; /* Space for mobile nav */
+            }
+            .mobile-nav {
+                display: block;
+            }
+            .video-grid {
+                display: grid;
+                grid-template-columns: 1fr;
+            }
+        }
+        /* Small mobile styles */
+        @media (max-width: 480px) {
+            .video-card {
+            width: 100%;
+            margin: 15px;
+            }
+            .user-actions {
+                display: none;
+            }
+            .search-bar input {
+                font-size: 14px;
+            }
+            .video-details h3 {
+                font-size: 0.9rem;
+            }
+            .video-details p {
+                font-size: 0.8rem;
+            }
+        }
+        .video-grid {
+            display: flex;
+            flex-wrap: wrap;
+        }
+        .thumbnail img {
+            width: 100%;
+        }
+        .video-info h3 {
+            margin: 10px 0;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="logo">
+            <i class="fab fa-youtube"></i>
+            <span>HuggingTube</span>
+        </div>
+        <div class="search-bar">
+            <input type="text" placeholder="Search">
+        </div>
+        <div class="user-actions" onclick="toggleVideoUpload()">
+            <i class="fas fa-video" ></i>
+            <i class="fas fa-info-circle" onclick="toggleInfo()"></i>
+        </div>
+        <script>
+            function toggleVideoUpload() {
+                window.location.href = "upload.html";
+            }
+            function toggleInfo() {
+                window.location.href = "about.html";
+            }
+        </script>
+    </header>
+    <main>
+        <aside class="sidebar">
+            <div class="sidebar-item">
+                <i class="fas fa-home" onclick="homeInfo()"></i> Home
+            </div>
+            <div class="sidebar-item" onclick="toggleVideoUpload()">
+                <i class="fas fa-upload" ></i> Upload
+            </div>
+        </aside>
+        <section class="content">
+            <div class="video-grid" id="videoGrid">
+                <!-- Dynamic video cards will be inserted here -->
+            </div>
+        </section>
+    </main>
+    <nav class="mobile-nav">
+        <div class="mobile-nav-items">
+            <div class="mobile-nav-item">
+                <i class="fas fa-home"></i> Home
+            </div>
+            <div class="mobile-nav-item" onclick="toggleVideoUpload()">
+                <i class="fas fa-upload" ></i> Upload
+            </div>
+        </div>
+    </nav>
+    <script>
+        async function fetchVideoMetadata() {
+        try {
+            // Clear the 'video_to_watch' key from localStorage on page load
+            localStorage.removeItem('video_to_watch');
+            // Fetch the video-index JSON data
+            const response = await fetch('https://huggingface.co/spaces/vericudebuget/ok4231/raw/main/metadata/video-index.json');
+            const videoIndexData = await response.json();
+            // Sort the video index data from latest to oldest
+            videoIndexData.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
+            // Base URLs for metadata and thumbnails
+            const baseUrl = 'https://huggingface.co/spaces/vericudebuget/ok4231/raw/main/metadata/';
+            const thumbnailBaseUrl = 'https://huggingface.co/spaces/vericudebuget/ok4231/raw/main/thumbnails/';
+            // Function to insert a video card in the correct position based on uploadTimestamp
+            const insertVideoCard = (videoCard, videoTimestamp) => {
+                const existingCards = document.querySelectorAll('.video-card');
+                let inserted = false;
+                for (const card of existingCards) {
+                    const cardTimestamp = new Date(card.getAttribute('data-timestamp'));
+                    if (videoTimestamp > cardTimestamp) {
+                        card.parentNode.insertBefore(videoCard, card);
+                        inserted = true;
+                        break;
+                    }
+                }
+                // If no cards are newer, append it to the end
+                if (!inserted) {
+                    videoGrid.appendChild(videoCard);
+                }
+            };
+            // Function to encrypt the link
+            const encryptLink = (link, key) => {
+                // Simple XOR encryption for demonstration purposes
+                const encrypted = link.split('').map((char, i) => {
+                    return String.fromCharCode(char.charCodeAt(0) ^ key.charCodeAt(i % key.length));
+                }).join('');
+                return btoa(encrypted); // base64 encode
+            };
+            // Loop through each URL in the sorted list and fetch the respective metadata
+            const videoGrid = document.getElementById('videoGrid');
+            for (let i = 0; i < videoIndexData.length; i++) {
+                let videoIndexUrl = videoIndexData[i].url;
+                // Extract only the file name (last part of the URL)
+                let fileName = videoIndexUrl.substring(videoIndexUrl.lastIndexOf('/') + 1);
+                // Create the full URL by appending the file name to the base URL
+                let finalUrl = baseUrl + encodeURIComponent(fileName);
+                try {
+                    // Fetch metadata from the properly encoded URL
+                    const videoResponse = await fetch(finalUrl);
+                    const videoData = await videoResponse.json();
+                    // Fix thumbnail URL by using the online location
+                    let thumbnailUrl = thumbnailBaseUrl + encodeURIComponent(videoData.thumbnailLocation.substring(videoData.thumbnailLocation.lastIndexOf('/') + 1));
+                    // Convert duration from seconds to mm:ss
+                    const formatDuration = (duration) => {
+                        if (duration === null || duration === undefined) return 'N/A';
+                        const minutes = Math.floor(duration / 60);
+                        const seconds = duration % 60;
+                        return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+                    };
+                    // Function to handle click event and store video index URL in localStorage
+                    const handleVideoClick = () => {
+                        const encryptedLink = encryptLink(finalUrl, 'JesusIsGod');
+                        window.location.href = `video-player.html#${encryptedLink}`;
+                    };
+                // Create a video card dynamically
+                const videoCard = document.createElement('div');
+                videoCard.classList.add('video-card');
+                videoCard.setAttribute('data-timestamp', new Date(videoData.uploadTimestamp).toISOString());
+                videoCard.innerHTML = `
+                    <div class="thumbnail">
+                        <img src="${thumbnailUrl}" alt="${videoData.title}" style="cursor: pointer;">
+                        <span class="video-duration">${formatDuration(videoData.duration)}</span>
+                    </div>
+                    <div class="video-info">
+                        <h3 style="cursor: pointer;">${videoData.title}</h3>
+                        <p style="color: light gray;">${videoData.uploader}  ▪  ${new Intl.DateTimeFormat('en-US', { month: 'long', day: 'numeric', year: 'numeric' }).format(new Date(videoData.uploadTimestamp))}</p>
+                    </div>
+                `;
+                // Check if subtitleLocation has text
+                if (videoData.subtitleLocation && videoData.subtitleLocation.trim() !== "") {
+                    videoCard.innerHTML += `
+                        <div class="subtitle" title="This video has subtitles in English">
+                            <div class="subtitle_content">
+                                <img class="subtitle_icon" src="https://cdn.iconscout.com/icon/free/png-512/free-subtitles-icon-download-in-svg-png-gif-file-formats--subtitle-text-translate-basic-multimedia-pack-user-interface-icons-4083807.png?f=webp&w=256">
+                                <span class="subtitle_text">Subtitles</span>
+                            </div>
+                        </div>
+                    `;
+                }
+                // Add event listeners for the thumbnail and title
+                videoCard.querySelector('.thumbnail img').addEventListener('click', handleVideoClick);
+                videoCard.querySelector('.video-info h3').addEventListener('click', handleVideoClick);
+                console.warn = () => {};
+                // Insert the video card in the correct position based on uploadTimestamp
+                const videoTimestamp = new Date(videoData.uploadTimestamp);
+                insertVideoCard(videoCard, videoTimestamp);
+                // Wait 0.3 seconds before fetching the next URL
+                await new Promise(resolve => setTimeout(resolve, 10));
+            } catch (videoError) {
+                ;
+            }
+        }
+    } catch (error) {
+        console.error('Error fetching video metadata:', error);
+    }
+}
+// Call the function on page load
+window.onload = fetchVideoMetadata;
+    </script>
+    <style>
+        .subtitle {
+          display: flex;
+          background-color: rgb(0, 72, 85);
+          border-radius: 5px;
+          width: fit-content;
+          padding: 1px 5px;
+          align-items: center;
+          transform-origin: left bottom;
+          transform: scale(80%);
+        }
+        .subtitle_icon {
+          width: auto;
+          height: 1em;
+          margin-right: 5px;
+        }
+        .subtitle_content {
+          filter: invert(100%);
+          display: flex;
+          align-items: center;
+        }
+        .subtitle_text {
+          align-self: center;
+          text-align: center;
+          color: #000000;
+        }
+        </style>
+    <img scr="https://huggingface.co/spaces/vericudebuget/ok4231/raw/main/thumbnails/From%20Buddha%20to%20Jesus%20%20%23fyp%20%23christian%20%23testimony%20%23gospel%20%23jesusislord%20%23believe%20%23%C9%A2%E1%B4%8F%E1%B4%85%C9%AAs%C9%A2%E1%B4%8F%E1%B4%8F%E1%B4%85%20%23christ%20%23jesusiscalling%20%23christianpost%20%23christianity%20%23bible%20%23biblestudymoments%20(1)-kwne_thumb.jpg"></img>
+</body>
+</html>

index3.html ADDED Viewed

	@@ -0,0 +1,371 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HuggingTube</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: #0a0f18;
+            --bg-secondary: #141e2f;
+            --text-primary: #ffffff;
+            --text-secondary: #adbac7;
+            --accent: #2188ff;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: Arial, sans-serif;
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+        }
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0.5rem 1rem;
+            background-color: var(--bg-secondary);
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 1000;
+        }
+        .logo {
+            color: var(--text-primary);
+            font-size: 1.2rem;
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+        }
+        .logo i {
+            color: var(--accent);
+            margin-right: 0.5rem;
+        }
+        .search-bar {
+            flex-grow: 1;
+            max-width: 600px;
+            margin: 0 1rem;
+        }
+        .search-bar input {
+            width: 100%;
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            border: 1px solid var(--text-secondary);
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+        }
+        .user-actions i {
+            margin-left: 1rem;
+            cursor: pointer;
+        }
+        main {
+            display: flex;
+            margin-top: 56px; /* Header height */
+        }
+        .sidebar {
+            width: 240px;
+            padding: 1rem;
+            position: fixed;
+            top: 56px;
+            bottom: 0;
+            overflow-y: auto;
+            background-color: var(--bg-primary);
+        }
+        .sidebar-item {
+            display: flex;
+            align-items: center;
+            padding: 0.75rem 1rem;
+            cursor: pointer;
+            border-radius: 10px;
+        }
+        .sidebar-item:hover {
+            background-color: var(--bg-secondary);
+        }
+        .sidebar-item i {
+            margin-right: 1rem;
+            width: 20px;
+        }
+        .content {
+            flex-grow: 1;
+            padding: 1rem;
+            margin-left: 240px;
+        }
+        .video-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 1rem;
+        }
+        .video-card {
+            cursor: pointer;
+        }
+        .thumbnail {
+            position: relative;
+            width: 100%;
+            height: 0;
+            padding-bottom: 56.25%;
+            background-color: var(--bg-secondary);
+            border-radius: 10px;
+            overflow: hidden;
+        }
+        .video-duration {
+            position: absolute;
+            bottom: 5px;
+            right: 5px;
+            background-color: rgba(0, 0, 0, 0.8);
+            padding: 2px 4px;
+            border-radius: 4px;
+            font-size: 0.8rem;
+        }
+        .video-info {
+            display: flex;
+            margin-top: 0.5rem;
+        }
+        .channel-avatar {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            background-color: var(--bg-secondary);
+            margin-right: 0.5rem;
+            flex-shrink: 0;
+        }
+        .video-details h3 {
+            font-size: 1rem;
+            margin-bottom: 0.25rem;
+        }
+        .video-details p {
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+        }
+        .mobile-nav {
+            display: none;
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background-color: var(--bg-secondary);
+            padding: 0.5rem;
+            z-index: 1000;
+        }
+        .mobile-nav-items {
+            display: flex;
+            justify-content: space-around;
+        }
+        .mobile-nav-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            font-size: 0.8rem;
+        }
+        .mobile-nav-item i {
+            font-size: 1.2rem;
+            margin-bottom: 0.25rem;
+        }
+        /* Mobile styles */
+        @media (max-width: 768px) {
+            .logo span {
+                display: none;
+            }
+            .search-bar {
+                margin: 0 0.5rem;
+            }
+            .user-actions i {
+                margin-left: 0.5rem;
+            }
+            .sidebar {
+                display: none;
+            }
+            .content {
+                margin-left: 0;
+                margin-bottom: 60px; /* Space for mobile nav */
+            }
+            .mobile-nav {
+                display: block;
+            }
+            .video-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+        /* Small mobile styles */
+        @media (max-width: 480px) {
+            .user-actions {
+                display: none;
+            }
+            .search-bar input {
+                font-size: 14px;
+            }
+            .video-details h3 {
+                font-size: 0.9rem;
+            }
+            .video-details p {
+                font-size: 0.8rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="logo">
+            <i class="fab fa-youtube"></i>
+            <span>HuggingTube</span>
+        </div>
+        <div class="search-bar">
+            <input type="text" placeholder="Search">
+        </div>
+        <div class="user-actions">
+            <i class="fas fa-video"></i>
+            <i class="fas fa-bell"></i>
+            <i class="fas fa-user-circle"></i>
+        </div>
+    </header>
+    <main>
+        <aside class="sidebar">
+            <div class="sidebar-item">
+                <i class="fas fa-home"></i>
+                Home
+            </div>
+            <div class="sidebar-item">
+                <i class="fas fa-compass"></i>
+                Explore
+            </div>
+            <div class="sidebar-item">
+                <i class="fas fa-upload"></i>
+                Upload
+            </div>
+            <div class="sidebar-item">
+                <i class="fas fa-photo-video"></i>
+                All videos
+            </div>
+        </aside>
+        <section class="content">
+            <div class="video-grid">
+                <!-- Video cards -->
+                <div class="video-card">
+                    <div class="thumbnail">
+                        <img src="/api/placeholder/250/141" alt="Video thumbnail">
+                        <span class="video-duration">10:30</span>
+                    </div>
+                    <div class="video-info">
+                        <div class="channel-avatar"></div>
+                        <div class="video-details">
+                            <h3>Amazing Video Title That Might Be Long</h3>
+                            <p>Channel Name</p>
+                            <p>1.2M views • 2 days ago</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Repeat video cards -->
+                <div class="video-card">
+                    <div class="thumbnail">
+                        <img src="/api/placeholder/250/141" alt="Video thumbnail">
+                        <span class="video-duration">15:45</span>
+                    </div>
+                    <div class="video-info">
+                        <div class="channel-avatar"></div>
+                        <div class="video-details">
+                            <h3>Another Great Video</h3>
+                            <p>Another Channel</p>
+                            <p>850K views • 1 week ago</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="video-card">
+                    <div class="thumbnail">
+                        <img src="/api/placeholder/250/141" alt="Video thumbnail">
+                        <span class="video-duration">7:20</span>
+                    </div>
+                    <div class="video-info">
+                        <div class="channel-avatar"></div>
+                        <div class="video-details">
+                            <h3>Must Watch Tutorial</h3>
+                            <p>Tech Channel</p>
+                            <p>2M views • 1 month ago</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="video-card">
+                    <div class="thumbnail">
+                        <img src="/api/placeholder/250/141" alt="Video thumbnail">
+                        <span class="video-duration">22:15</span>
+                    </div>
+                    <div class="video-info">
+                        <div class="channel-avatar"></div>
+                        <div class="video-details">
+                            <h3>Interesting Documentary</h3>
+                            <p>Educational Hub</p>
+                            <p>500K views • 3 days ago</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <nav class="mobile-nav">
+        <div class="mobile-nav-items">
+            <div class="mobile-nav-item">
+                <i class="fas fa-home"></i>
+                Home
+            </div>
+            <div class="mobile-nav-item">
+                <i class="fas fa-compass"></i>
+                Explore
+            </div>
+            <div class="mobile-nav-item">
+                <i class="fas fa-upload"></i>
+                Upload
+            </div>
+            <div class="mobile-nav-item">
+                <i class="fas fa-photo-video"></i>
+                Library
+            </div>
+        </div>
+    </nav>
+</body>
+</html>

output.vtt ADDED Viewed

	@@ -0,0 +1,21 @@

+WEBVTT
+::cue {
+                    color: white; /* Text color */
+                    font-family: 'Conturic Gothic', sans-serif; /* Font family */
+                    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* Dark outline effect */
+                }
+00:00:00.000 --> 00:00:02.000
+I have high blood pressure. I am sick.
+00:00:02.000 --> 00:00:05.000
+And I have to work to get it.
+00:00:05.000 --> 00:00:09.000
+I have never worked. If I work, I get heat, fever, fever.
+00:00:09.000 --> 00:00:12.560
+I can't work. I am sick. I get a headache.

rules.html ADDED Viewed

	@@ -0,0 +1,298 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Community Guidelines - HuggingTube</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: #0a0f18;
+            --bg-secondary: #141e2f;
+            --text-primary: #ffffff;
+            --text-secondary: #adbac7;
+            --accent: #2188ff;
+            --border: #1c2739;
+            --red: #ff4444;
+            --green: #00c851;
+            --yellow: #ffbb33;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: Arial, sans-serif;
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.6;
+        }
+        header {
+            background-color: var(--bg-secondary);
+            padding: 1rem 0;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+        .header-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 1rem;
+        }
+        .logo {
+            display: flex;
+            align-items: center;
+            font-size: 1.5rem;
+            font-weight: bold;
+        }
+        .logo i {
+            color: var(--accent);
+            margin-right: 0.5rem;
+        }
+        main {
+            max-width: 1200px;
+            margin: 2rem auto;
+            padding: 0 1rem;
+        }
+        .section {
+            background-color: var(--bg-secondary);
+            border-radius: 8px;
+            padding: 2rem;
+            margin-bottom: 2rem;
+        }
+        h1 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            color: var(--accent);
+        }
+        h2 {
+            font-size: 1.8rem;
+            margin-bottom: 1rem;
+            color: var(--text-primary);
+        }
+        h3 {
+            font-size: 1.4rem;
+            margin: 1.5rem 0 1rem;
+            color: var(--accent);
+        }
+        p {
+            margin-bottom: 1rem;
+            color: var(--text-secondary);
+        }
+        ul {
+            list-style: none;
+            margin-bottom: 1rem;
+        }
+        li {
+            margin-bottom: 0.5rem;
+            padding-left: 1.5rem;
+            position: relative;
+            color: var(--text-secondary);
+        }
+        li::before {
+            content: "•";
+            color: var(--accent);
+            position: absolute;
+            left: 0;
+        }
+        .rule-category {
+            border-left: 4px solid var(--accent);
+            padding-left: 1rem;
+            margin-bottom: 2rem;
+        }
+        .example-box {
+            background-color: var(--bg-primary);
+            border-radius: 4px;
+            padding: 1rem;
+            margin: 1rem 0;
+        }
+        .example-label {
+            display: inline-block;
+            padding: 0.25rem 0.5rem;
+            border-radius: 4px;
+            font-size: 0.9rem;
+            margin-bottom: 0.5rem;
+        }
+        .allowed {
+            background-color: var(--green);
+        }
+        .not-allowed {
+            background-color: var(--red);
+        }
+        .status-icon {
+            margin-right: 0.5rem;
+        }
+        .appeal-button {
+            display: inline-block;
+            background-color: var(--accent);
+            color: var(--text-primary);
+            padding: 0.75rem 1.5rem;
+            border-radius: 4px;
+            text-decoration: none;
+            margin-top: 1rem;
+        }
+        @media (max-width: 768px) {
+            h1 {
+                font-size: 2rem;
+            }
+            h2 {
+                font-size: 1.5rem;
+            }
+            .section {
+                padding: 1rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="header-content">
+            <div class="logo">
+                <i class="fab fa-youtube"></i>
+                HuggingTube
+            </div>
+        </div>
+    </header>
+    <main>
+        <h1>Community Guidelines</h1>
+        <section class="section">
+            <h2>Our Commitment</h2>
+            <p>HuggingTube is committed to being a platform where creators can express themselves while maintaining a safe and respectful environment for all users. These guidelines help ensure our community remains a space for creativity, learning, and entertainment.</p>
+        </section>
+        <section class="section">
+            <h2>Content Rules</h2>
+            <div class="rule-category">
+                <h3><i class="fas fa-users"></i> Discriminatory Content</h3>
+                <p>We have zero tolerance for discrimination in any form.</p>
+                <ul>
+                    <li>No hate speech or content promoting racism</li>
+                    <li>No discrimination against any group based on ethnicity, gender, sexuality, etc.</li>
+                    <li>No implicit bigotry or coded language designed to discriminate</li>
+                </ul>
+                <div class="example-box">
+                    <span class="example-label allowed"><i class="fas fa-check status-icon"></i>Allowed</span>
+                    <p>"Celebrating Diversity: Cultural Festival Highlights"</p>
+                </div>
+                <div class="example-box">
+                    <span class="example-label not-allowed"><i class="fas fa-times status-icon"></i>Not Allowed</span>
+                    <p>"Why [Ethnic Group] Are Ruining Our Country"</p>
+                </div>
+            </div>
+            <div class="rule-category">
+                <h3><i class="fas fa-exclamation-triangle"></i> Inappropriate Content</h3>
+                <p>Keep content family-friendly and suitable for all audiences.</p>
+                <ul>
+                    <li>No sexual content or suggestive material</li>
+                    <li>No excessive violence or graphic content</li>
+                    <li>No crude humor or offensive references</li>
+                </ul>
+                <div class="example-box">
+                    <span class="example-label allowed"><i class="fas fa-check status-icon"></i>Allowed</span>
+                    <p>"10 Tips for living in the hood."</p>
+                </div>
+                <div class="example-box">
+                    <span class="example-label not-allowed"><i class="fas fa-times status-icon"></i>Not Allowed</span>
+                    <p>"Beating the s*** out of my ex."</p>
+                </div>
+            </div>
+        </section>
+        <section class="section">
+            <h2>Additional Guidelines</h2>
+            <div class="rule-category">
+                <h3><i class="fas fa-user"></i> Username Policy</h3>
+                <p>Choose an appropriate username that doesn't violate our guidelines.</p>
+                <ul>
+                    <li>No offensive or discriminatory usernames</li>
+                </ul>
+            </div>
+            <div class="rule-category">
+                <h3><i class="fas fa-comment"></i> Comment Etiquette</h3>
+                <p>Comments will appear soon, so please follow the guidelines.</p>
+                <ul>
+                    <li>Be respectful to creators and other commenters</li>
+                    <li>No spamming</li>
+                    <li>Keep discussions relevant to the video content</li>
+                </ul>
+            </div>
+            <div class="rule-category">
+                <h3><i class="fas fa-exclamation-circle"></i> Content Warnings</h3>
+                <p>Provide appropriate warnings when necessary.</p>
+                <ul>
+                    <li>Include content warnings for potentially sensitive material</li>
+                    <li>Age-restrict content that may not be suitable for all audiences</li>
+                    <li>Clearly label educational content that may contain sensitive topics</li>
+                </ul>
+            </div>
+            <div class="rule-category">
+                <h3><i class="fas fa-pray"></i> Religious Sensitivity</h3>
+                <ul>
+                    <li>Avoid content that deliberately offends religious beliefs without proper arguments behind.</li>
+                    <li>Educational, and apologetic content about religion is allowed.</li>
+                </ul>
+                <div class="example-box">
+                    <span class="example-label allowed"><i class="fas fa-check status-icon"></i>Allowed</span>
+                    <p>"Did Jesus Deny His Divinity by Saying 'My Father is Greater'?"</p>
+                </div>
+                <div class="example-box">
+                    <span class="example-label not-allowed"><i class="fas fa-times status-icon"></i>Not Allowed</span>
+                    <p>"Why is theism is stupid? - Offending everybody part 1"</p>
+                </div>
+            </div>
+        </section>
+        <section class="section">
+            <h2>Enforcement</h2>
+            <p>Our moderation system evaluates all uploaded content across multiple criteria. </p>
+            <p>If your content is flagged:</p>
+            <ul>
+                <li>Your content will be deleted.</li>
+            </ul>
+            <a href="mailto:vericudebuget@gmail.com" class="appeal-button">Appeal a Decision</a>
+        </section>
+    </main>
+</body>
+</html>

search-results.html ADDED Viewed

File without changes

test.html ADDED Viewed

	@@ -0,0 +1,175 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Website</title>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
+</head>
+<body>
+    <style>
+        body {
+            font-family: 'Montserrat', sans-serif;
+            background-color: #0a0f14;
+            color: #fff;
+        }
+        input, button {
+            font-family: 'Montserrat', sans-serif;
+        }
+        .shareVideo {
+            width: 500px;
+            padding: 20px;
+            background-color: #0d2233;
+            color: #fff;
+            border-radius: 12px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        }
+        .shareVideoHeader {
+            font-size: 1.5rem;
+            font-weight: bold;
+            margin-bottom: 15px;
+        }
+        .shareVideoContent {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        .shareVideoActions {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .urlSection {
+            display: flex;
+            align-items: center;
+            background-color: #0a1e2b;
+            padding: 10px;
+            border-radius: 8px;
+        }
+        .urlSection input {
+            width: 100%;
+            padding: 8px;
+            font-size: 1rem;
+            color: #fff;
+            background-color: transparent;
+            border: none;
+            outline: none;
+        }
+        .urlSection input::placeholder {
+            color: #88a0b3;
+        }
+        .urlSection button {
+            padding: 8px 16px;
+            margin-left: 10px;
+            color: #fff;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        .urlSection button:hover {
+            background-color: #0073e6;
+        }
+        .shareOptions {
+            display: flex;
+            gap: 15px;
+        }
+        .shareOption {
+            background-color: #1b2f40;
+            padding: 10px 15px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        .shareOption:hover {
+            background-color: #233a4e;
+        }
+        .shareOption img {
+            width: 24px;
+            height: 24px;
+            margin-right: 10px;
+        }
+        .shareOption span {
+            font-size: 1rem;
+            color: #fff;
+        }
+        .copyButton {
+           background-color: rgb(0, 72, 85);
+        }
+    </style>
+    <div class="shareVideo">
+        <div class="shareVideoHeader">Share this video!</div>
+        <div class="shareVideoContent">
+            <!-- URL Copy Section -->
+            <div class="urlSection">
+                <input id="urlInput" type="text" readonly />
+                <button onclick="copyURL()" class="copyButton">Copy</button>
+            </div>
+        </div>
+        <p id="message" class="message"></p>
+    </div>
+    <script>
+        // Function to get the current page URL and set it as the input value
+        const getCurrentURL = () => {
+            const currentURL = window.location.href;
+            document.getElementById("urlInput").value = currentURL;
+        };
+        // Call the function to set the input value
+        getCurrentURL();
+        // Function to copy the input value to the clipboard
+        const copyURL = async () => {
+            try {
+                await navigator.clipboard.writeText(document.getElementById("urlInput").value);
+            } catch (error) {
+                console.log("Error copying URL:", error);
+            }
+            const message = document.getElementById('message');
+            message.textContent = "URL copied to clipboard!";
+            message.className = "message";
+            message.classList.remove("fade-out"); // Remove any existing fade-out class
+            message.classList.remove("fade-in"); // Remove any existing fade-in class
+            // Add fade-in class if needed
+            message.classList.add("fade-in");
+            message.style.display = 'block'; // show the message
+            // Add fade-out class to trigger transition
+            setTimeout(() => {
+                message.classList.add("fade-out");
+            }, 0); // wait 0 milliseconds before adding fade-out class
+            // Remove the message after 4 seconds
+            setTimeout(() => {
+                message.style.display = 'none'; // hide the message
+            }, 3000);
+        };
+    </script>
+    <style> </style>
+    </div>
+</body>
+</html>

test.py ADDED Viewed

	@@ -0,0 +1,19 @@

+import os
+from groq import Groq
+client = Groq(
+    api_key="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"
+)
+chat_completion = client.chat.completions.create(
+    messages=[
+        {
+            "role": "user",
+            "content": "Explain the importance of fast language models",
+        }
+    ],
+    model="llama3-8b-8192",
+)
+print(chat_completion.choices[0].message.content)

upload.html ADDED Viewed

	@@ -0,0 +1,103 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Upload Video - HuggingTube</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
+    <style>
+        :root {
+    --bg-primary: #0a0f18;
+    --bg-secondary: #141e2f;
+    --text-primary: #ffffff;
+    --text-secondary: #adbac7;
+    --accent: #2188ff;
+    --border: #1c2739;
+    --error: #ff4444;
+    --success: #00c851;
+}
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+html, body {
+    height: 100%;
+}
+body {
+    font-family: 'Montserrat', sans-serif;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    line-height: 1.6;
+}
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    background-color: var(--bg-secondary);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+}
+.logo {
+    color: var(--text-primary);
+    font-size: 1.2rem;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+}
+.logo i {
+    color: var(--accent);
+    margin-right: 0.5rem;
+}
+main {
+    height: 100%;
+    padding-top: 60px; /* Adjust this value based on your header height */
+}
+.upload-iframe {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    border: none;
+}
+    </style>
+</head>
+<body>
+    <div> <iframe src="https://vericudebuget-server-data.hf.space" class="upload-iframe" width="100%" height="100%"></iframe></div>
+    <header>
+        <div class="logo" onclick="window.location.href='index.html'">
+            <i class="fab fa-youtube"></i>
+            <a href="index.html" style="color: white; text-decoration: none; ::after { text-decoration: underline; }">HuggingTube</a>
+        </div>
+        <div style="position: absolute; right: 20px; top: 10px;">
+            <a href="rules.html" target="_blank" style="color: white; text-decoration: none;">Rules</a>
+        </div>
+    </header>
+    <script>
+        document.querySelector('iframe').addEventListener('load', event => {
+            event.target.contentWindow.history.pushState(null, '', '/');
+            event.target.contentWindow.addEventListener('popstate', event => {
+                event.target.history.pushState(null, '', '/');
+            });
+        });
+    </script>
+    <main>
+    </main>
+</body>
+</html>

video-player copy.html ADDED Viewed

	@@ -0,0 +1,464 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HuggingTube</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link href="https://vjs.zencdn.net/8.16.1/video-js.css" rel="stylesheet" />
+    <style> :root {
+        --bg-primary: #0a0f18;
+        --bg-secondary: #141e2f;
+        --text-primary: #ffffff;
+        --text-secondary: #adbac7;
+        --accent: #2188ff;
+    }
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+    body {
+        font-family: Arial, sans-serif;
+        background-color: var(--bg-primary);
+        color: var(--text-primary);
+    }
+    header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.5rem 1rem;
+        background-color: var(--bg-secondary);
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 1000;
+    }
+    .logo {
+        color: var(--text-primary);
+        font-size: 1.2rem;
+        font-weight: bold;
+        display: flex;
+        align-items: center;
+    }
+    .logo i {
+        color: var(--accent);
+        margin-right: 0.5rem;
+    }
+    .search-bar {
+        flex-grow: 1;
+        max-width: 600px;
+        margin: 0 1rem;
+    }
+    .search-bar input {
+        width: 100%;
+        padding: 0.5rem 1rem;
+        border-radius: 20px;
+        border: 1px solid var(--text-secondary);
+        background-color: var(--bg-primary);
+        color: var(--text-primary);
+    }
+    .user-actions i {
+        margin-left: 1rem;
+        cursor: pointer;
+    }
+    main {
+        margin-top: 56px;
+        display: flex;
+        padding: 1rem;
+    }
+    .video-container {
+        flex: 1;
+        margin-right: 1rem;
+    }
+    .video-player {
+        position: relative;
+        width: 100%;
+        background-color: black;
+        margin-bottom: 1rem;
+    }
+    .video-player img {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+    .video-info {
+        margin-bottom: 1rem;
+    }
+    .video-title {
+        font-size: 1.5rem;
+        margin-bottom: 0.5rem;
+    }
+    .video-stats {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-bottom: 1rem;
+        border-bottom: 1px solid var(--bg-secondary);
+    }
+    .view-count {
+        color: var(--text-secondary);
+    }
+    .video-actions {
+        display: flex;
+        gap: 1rem;
+    }
+    .action-button {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        background: none;
+        border: none;
+        color: var(--text-primary);
+        cursor: pointer;
+    }
+    .channel-info {
+        display: flex;
+        align-items: center;
+        padding-bottom: 1rem;
+        border-bottom: 1px solid var(--bg-secondary);
+    }
+    .channel-avatar {
+        width: 48px;
+        height: 48px;
+        border-radius: 50%;
+        background-color: var(--bg-secondary);
+        margin-right: 1rem;
+    }
+    .channel-details {
+        display: grid;
+        align-items: center;
+    }
+    .channel-name {
+        font-weight: bold;
+    }
+    .subscriber-count {
+        color: var(--text-secondary);
+        font-size: 0.9rem;
+        margin-bottom: 0.5rem;
+    }
+    .subscribe-button {
+        background-color: var(--accent);
+        color: var(--text-primary);
+        border: none;
+        padding: 0.5rem 1rem;
+        border-radius: 20px;
+        cursor: pointer;
+        font-weight: bold;
+    }
+    .video-description {
+        margin-top: 1rem;
+        color: var(--text-secondary);
+        white-space: pre-line;
+    }
+    .recommendations {
+        width: 400px;
+    }
+    .recommendation {
+        display: flex;
+        margin-bottom: 0.5rem;
+        cursor: pointer;
+    }
+    .recommendation-thumbnail {
+        width: 160px;
+        height: 90px;
+        background-color: var(--bg-secondary);
+        margin-right: 0.5rem;
+        flex-shrink: 0;
+    }
+    .recommendation-info h3 {
+        font-size: 0.9rem;
+        margin-bottom: 0.25rem;
+    }
+    .recommendation-info p {
+        font-size: 0.8rem;
+        color: var(--text-secondary);
+    }
+    .comments-section {
+        margin-top: 1rem;
+    }
+    .comments-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 1rem;
+    }
+    .comment-count {
+        margin-right: 1rem;
+    }
+    .sort-button {
+        display: flex;
+        align-items: center;
+        background: none;
+        border: none;
+        color: var(--text-primary);
+        cursor: pointer;
+    }
+    .comment {
+        display: flex;
+        margin-bottom: 1rem;
+    }
+    .comment-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background-color: var(--bg-secondary);
+        margin-right: 1rem;
+    }
+    .comment-content {
+        flex: 1;
+    }
+    .comment-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.25rem;
+    }
+    .comment-author {
+        font-weight: bold;
+        margin-right: 0.5rem;
+    }
+    .comment-timestamp {
+        color: var(--text-secondary);
+        font-size: 0.9rem;
+    }
+    @media (max-width: 1200px) {
+        .recommendations {
+            width: 300px;
+        }
+    }
+    @media (max-width: 1000px) {
+        main {
+            flex-direction: column;
+        }
+        .video-container {
+            margin-right: 0;
+            margin-bottom: 1rem;
+        }
+        .recommendations {
+            width: 100%;
+        }
+        .recommendation {
+            width: 100%;
+        }
+    }
+    @media (max-width: 768px) {
+        .logo span {
+            display: none;
+        }
+        .user-actions {
+            display: none;
+        }
+        .video-stats {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+        .video-actions {
+            margin-top: 0.5rem;
+        }
+        .recommendation-thumbnail {
+            width: 120px;
+            height: 68px;
+        }
+    }</style>
+</head>
+<body>
+    <header>
+        <div class="logo">
+            <i class="fab fa-youtube"></i>
+            <a href="index.html" style="color: white; text-decoration: none;">HuggingTube</a>
+        </div>
+        <div class="search-bar">
+            <input type="text" placeholder="Search">
+        </div>
+        <div class="user-actions">
+            <i class="fas fa-video"></i>
+            <i class="fas fa-bell"></i>
+            <i class="fas fa-user-circle"></i>
+        </div>
+    </header>
+    <main>
+        <div class="video-container">
+            <video
+                id="my-video"
+                class="video-js"
+                controls
+                preload="auto"
+                width="640"
+                height="264"
+                data-setup="{}"
+            >
+                <track src="output.vtt" kind="subtitles" srclang="en" label="English" default>
+                <source id="video-troll" src="" type="video/mp4" />
+                <p class="vjs-no-js">
+                    To view this video please enable JavaScript, and consider upgrading to a
+                    web browser that
+                    <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
+                </p>
+            </video>
+        </div>
+        <div class="video-info">
+            <h1 class="video-title" id="video-title">Loading...</h1>
+            <div class="video-stats">
+                <span class="view-count" id="view-count">Loading...</span>
+                <div class="video-actions">
+                    <button class="action-button">
+                        <i class="fas fa-share"></i> Share
+                    </button>
+                    <button class="action-button" id="download-button">
+                        <i class="fas fa-download"></i> Download
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="channel-info">
+            <div class="channel-avatar"></div>
+            <div class="channel-details">
+                <span class="channel-name" id="channel-name">Loading...</span>
+            </div>
+        </div>
+        <div class="video-description" id="video-description">
+            Loading description...
+        </div>
+    </main>
+    <script src="https://vjs.zencdn.net/8.16.1/video.min.js"></script>
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+    const jsonUrl = localStorage.getItem("video_to_watch");
+    if (jsonUrl) {
+        fetch(jsonUrl)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                return response.json();
+            })
+            .then(data => {
+                document.getElementById("video-title").innerText = data.title;
+                const date = new Date(data.uploadTimestamp);
+                document.getElementById("view-count").innerText = `Uploaded on ${date.toLocaleString('en-US', { month: 'long' })} ${date.getDate()}, ${date.getFullYear()} at ${date.toLocaleTimeString()}`;
+                document.getElementById("channel-name").innerText = data.uploader;
+                document.getElementById("video-description").innerText = data.description;
+                document.title = data.title + " - HuggingTube";
+                const baseUrl = 'https://huggingface.co/spaces/vericudebuget/ok4231/resolve/main/';
+                const videoElement = document.getElementById("video-troll");
+                if (videoElement) {
+                    const fileLocation = data.fileLocation.split('/').pop();
+                    const videoUrl = `${baseUrl}videos/${encodeURIComponent(fileLocation)}?download=true`;
+                    // Determine the file extension and set the type accordingly
+                    const fileExtension = fileLocation.split('.').pop().toLowerCase();
+                    let videoType = '';
+                    switch (fileExtension) {
+                        case 'mp4':
+                            videoType = 'video/mp4';
+                            break;
+                        case 'webm':
+                            videoType = 'video/webm';
+                            break;
+                        case 'ogg':
+                            videoType = 'video/ogg';
+                            break;
+                        default:
+                            console.error("Unsupported video format:", fileExtension);
+                            return; // Exit if the format is unsupported
+                    }
+                    console.log("Video URL:", videoUrl);
+                    console.log("Video Type:", videoType);
+                    // Set the source using an object
+                    videoElement.src = videoUrl;
+                    videoElement.setAttribute('type', videoType);
+                    videoElement.load(); // Ensure the video element reloads the new source
+                }
+            })
+            .catch(error => {
+                console.error("Error fetching or parsing the JSON data:", error);
+            });
+    } else {
+        console.error("No JSON file link found in localStorage");
+    }
+    document.getElementById("download-button").addEventListener("click", function() {
+        const videoElement = document.getElementById("video-troll");
+        const videoUrl = videoElement.src;
+        const fileName = videoUrl.split('/').pop().split('?')[0];
+        // Create a link element dynamically
+        const link = document.createElement('a');
+        link.href = videoUrl;
+        link.setAttribute('download', fileName);
+        link.style.display = 'none';
+        // Add the link to the DOM and simulate a click
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link); // Remove the link after click
+    });
+});
+    </script>
+</body>
+</html>

video-player.html ADDED Viewed

	@@ -0,0 +1,1096 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title></title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: #0a0f18;
+            --bg-secondary: #141e2f;
+            --text-primary: #ffffff;
+            --text-secondary: #adbac7;
+            --accent: #2188ff;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+        }
+        body {
+            font-family: 'Montserrat', sans-serif;
+        }
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0.5rem 1rem;
+            background-color: var(--bg-secondary);
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 1000;
+        }
+        .logo {
+            color: var(--text-primary);
+            font-size: 1.2rem;
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+        }
+        .logo i {
+            color: var(--accent);
+            margin-right: 0.5rem;
+        }
+        .search-bar {
+            flex-grow: 1;
+            max-width: 600px;
+            margin: 0 1rem;
+        }
+        .search-bar input {
+            width: 100%;
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            border: 1px solid var(--text-secondary);
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+        }
+        .user-actions i {
+            margin-left: 1rem;
+            cursor: pointer;
+        }
+        main {
+            margin-top: 56px;
+            display: flex;
+            padding: 1rem;
+        }
+        .video-container {
+            flex: 1;
+            margin-right: 1rem;
+        }
+        .video-player {
+            position: relative;
+            width: 100%;
+            background-color: black;
+            margin-bottom: 1rem;
+        }
+        .video-player img {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .video-info {
+            margin-bottom: 1rem;
+        }
+        .video-title {
+            font-size: 1.5rem;
+            margin-bottom: 0.5rem;
+        }
+        .video-stats {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding-bottom: 1rem;
+            border-bottom: 1px solid var(--bg-secondary);
+        }
+        .view-count {
+            color: var(--text-secondary);
+        }
+        .video-actions {
+            display: flex;
+            gap: 1rem;
+        }
+        .action-button {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            background: none;
+            border: none;
+            color: var(--text-primary);
+            cursor: pointer;
+        }
+        .channel-info {
+            display: flex;
+            align-items: center;
+            padding-bottom: 1rem;
+            border-bottom: 1px solid var(--bg-secondary);
+        }
+        .channel-avatar {
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            background-color: var(--bg-secondary);
+            margin-right: 1rem;
+        }
+        .channel-details {
+            display: grid;
+            align-items: center;
+        }
+        .channel-name {
+            font-weight: bold;
+        }
+        .subscriber-count {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            margin-bottom: 0.5rem;
+        }
+        .subscribe-button {
+            background-color: var(--accent);
+            color: var(--text-primary);
+            border: none;
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            cursor: pointer;
+            font-weight: bold;
+        }
+        .video-description {
+            margin-top: 1rem;
+            color: var(--text-secondary);
+            white-space: pre-line;
+        }
+        .recommendations {
+            width: 400px;
+        }
+        .recommendation {
+            display: flex;
+            margin-bottom: 0.5rem;
+            cursor: pointer;
+        }
+        .recommendation-thumbnail {
+            width: 160px;
+            height: 90px;
+            background-color: var(--bg-secondary);
+            margin-right: 0.5rem;
+            flex-shrink: 0;
+        }
+        .recommendation-info h3 {
+            font-size: 0.9rem;
+            margin-bottom: 0.25rem;
+        }
+        .recommendation-info p {
+            font-size: 0.8rem;
+            color: var(--text-secondary);
+        }
+        .comments-section {
+            margin-top: 1rem;
+        }
+        .comments-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 1rem;
+        }
+        .comment-count {
+            margin-right: 1rem;
+        }
+        .sort-button {
+            display: flex;
+            align-items: center;
+            background: none;
+            border: none;
+            color: var(--text-primary);
+            cursor: pointer;
+        }
+        .comment {
+            display: flex;
+            margin-bottom: 1rem;
+        }
+        .comment-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background-color: var(--bg-secondary);
+            margin-right: 1rem;
+        }
+        .comment-content {
+            flex: 1;
+        }
+        .comment-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 0.25rem;
+        }
+        .comment-author {
+            font-weight: bold;
+            margin-right: 0.5rem;
+        }
+        .comment-timestamp {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+        }
+        @media (max-width: 1200px) {
+            .recommendations {
+                width: 300px;
+            }
+        }
+        @media (max-width: 1000px) {
+            main {
+                flex-direction: column;
+            }
+            .video-container {
+                margin-right: 0;
+                margin-bottom: 1rem;
+            }
+            .recommendations {
+                width: 100%;
+            }
+            .recommendation {
+                width: 100%;
+            }
+        }
+        @media (max-width: 768px) {
+            .logo span {
+                display: none;
+            }
+            .user-actions {
+                display: none;
+            }
+            .video-stats {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+            .video-actions {
+                margin-top: 0.5rem;
+            }
+            .recommendation-thumbnail {
+                width: 120px;
+                height: 68px;
+            }
+        }
+        video::-webkit-media-text-track-display {
+            font-size: 2vw;
+        }
+        video {max-height: 80vh;
+        pointer-events:visible;}
+        input, button {
+            font-family: 'Montserrat', sans-serif;
+        }
+        .shareVideo {
+            width: 500px;
+            padding: 20px;
+            background-color: #0d2233;
+            color: #fff;
+            border-radius: 12px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        }
+        .shareVideoHeader {
+            font-size: 1.5rem;
+            font-weight: bold;
+            margin-bottom: 15px;
+        }
+        .shareVideoContent {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        .shareVideoActions {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .urlSection {
+            display: flex;
+            align-items: center;
+            background-color: #0a1e2b;
+            padding: 10px;
+            border-radius: 8px;
+        }
+        .urlSection input {
+            width: 100%;
+            padding: 8px;
+            font-size: 1rem;
+            color: #fff;
+            background-color: transparent;
+            border: none;
+            outline: none;
+        }
+        .urlSection input::placeholder {
+            color: #88a0b3;
+        }
+        .urlSection button {
+            padding: 8px 16px;
+            margin-left: 10px;
+            color: #fff;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        .urlSection button:hover {
+            background-color: #0073e6;
+        }
+        .shareOptions {
+            display: flex;
+            gap: 15px;
+        }
+        .shareOption {
+            background-color: #1b2f40;
+            padding: 10px 15px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        .shareOption:hover {
+            background-color: #233a4e;
+        }
+        .shareOption img {
+            width: 24px;
+            height: 24px;
+            margin-right: 10px;
+        }
+        .shareOption span {
+            font-size: 1rem;
+            color: #fff;
+        }
+        .copyButton {
+           background-color: rgb(0, 72, 85);
+        }
+        .closeButton {
+            color: rgb(255, 255, 255);
+            right: 10px;
+            top: 3px;
+            position: absolute;
+            transition: all 0.3s ease;
+            user-select: none;
+        }
+        .closeButton:hover {
+            color: rgb(255, 0, 0);
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="logo">
+            <i class="fab fa-youtube"></i>
+            <a href="index.html" style="color: white; text-decoration: none; ::after { text-decoration: underline; }">HuggingTube</a>
+        </div>
+        <div class="search-bar">
+            <input type="text" placeholder="Search">
+        </div>
+        <div class="user-actions">
+            <i class="fas fa-video"></i>
+            <i class="fas fa-bell"></i>
+            <i class="fas fa-user-circle"></i>
+        </div>
+    </header>
+    <main>
+        <div class="video-container">
+            <div class="video-player">
+                <style> #video-element { width: 100%; height: 100%;} </style>
+                <video id="video-element" controls>
+                    <track src="" kind="subtitles" srclang="en" label="English" default>
+                </video>
+            </div>
+    <script>document.addEventListener("DOMContentLoaded", function () {
+        // Function to decrypt the link
+        const decryptLink = (encryptedLink, key) => {
+            try {
+                // Decode base64
+                const decoded = atob(encryptedLink);
+                // XOR decrypt
+                const decrypted = decoded.split('').map((char, i) => {
+                    return String.fromCharCode(char.charCodeAt(0) ^ key.charCodeAt(i % key.length));
+                }).join('');
+                return decrypted;
+            } catch (error) {
+                console.error("Decryption error:", error);
+                return null;
+            }
+        };
+        // Get the URL fragment after the first '#'
+        const urlHash = window.location.hash;
+        if (!urlHash) {
+            console.error("No hash found in the URL");
+            window.location.href = "index.html";
+            return;
+        }
+        const encryptedLink = urlHash.substring(1); // Remove the '#' and get the rest
+        if (!encryptedLink) {
+            console.error("No encrypted link found in the URL");
+            return;
+        }
+        // Decrypt the encrypted part of the URL
+        const jsonUrl = decryptLink(encryptedLink, 'JesusIsGod');
+        if (!jsonUrl) {
+            console.error("Failed to decrypt URL");
+            return;
+        }
+        // Store the decrypted URL
+        localStorage.setItem("video_to_watch", jsonUrl);
+        // Fetch the JSON data from the decrypted URL
+        fetch(jsonUrl)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                return response.json();
+            })
+            .then(data => {
+                // Update the page with the scraped JSON data
+                document.getElementById("video-title").innerText = data.title;
+                const date = new Date(data.uploadTimestamp);
+                document.getElementById("view-count").innerText = `Uploaded on ${date.toLocaleString('en-US', { month: 'long' })} ${date.getDate()}, ${date.getFullYear()} at ${date.toLocaleTimeString()}`;
+                document.getElementById("channel-name").innerText = data.uploader;
+                document.getElementById("video-description").innerText = data.description;
+                // Set the document title
+                document.title = data.title + " - HuggingTube";
+                // Define base URLs for global resources
+                const videoBaseUrl = 'https://huggingface.co/spaces/vericudebuget/ok4231/resolve/main/';
+                const subtitleBaseUrl = 'https://huggingface.co/spaces/vericudebuget/ok4231/raw/main/';
+                // Update the video source
+                const videoElement = document.getElementById("video-element");
+                if (videoElement) {
+                    const videoUrl = `${videoBaseUrl}${data.fileLocation}`;
+                    const subtitleUrl = data.subtitleLocation ? `${subtitleBaseUrl}${data.subtitleLocation}` : '';
+                    videoElement.src = videoUrl;
+                    // Handle subtitles
+                    if (subtitleUrl) {
+                        fetch(subtitleUrl)
+                            .then(response => {
+                                if (!response.ok) {
+                                    throw new Error(`Failed to fetch subtitles: ${response.statusText}`);
+                                }
+                                return response.text();
+                            })
+                            .then(subtitleText => {
+                                const blob = new Blob([subtitleText], { type: 'text/vtt' });
+                                const blobUrl = URL.createObjectURL(blob);
+                                const trackElement = videoElement.querySelector('track');
+                                trackElement.src = blobUrl;
+                                trackElement.default = true;
+                                trackElement.srclang = "en";
+                                trackElement.label = "English";
+                                console.log("Subtitles successfully loaded.");
+                            })
+                            .catch(error => {
+                                console.error("Error fetching or loading subtitles:", error);
+                            });
+                    }
+                    // Add video event listeners
+                    videoElement.addEventListener('error', function(e) {
+                        console.error("Video error:", e);
+                    });
+                    videoElement.addEventListener('loadedmetadata', function() {
+                        console.log("Video metadata loaded successfully");
+                    });
+                } else {
+                    console.error("Video element not found in the DOM");
+                }
+            })
+            .catch(error => {
+                console.error("Error fetching or parsing the JSON data:", error);
+            });
+        // Download functionality
+        document.getElementById("download-button").addEventListener("click", function() {
+            const videoElement = document.getElementById("video-element");
+            const videoUrl = videoElement.src;
+            const fileName = videoUrl.split('/').pop().split('?')[0];
+            console.log("Downloading video:", fileName);
+            const link = document.createElement('a');
+            link.href = videoUrl;
+            link.setAttribute('download', fileName);
+            link.style.display = 'none';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        });
+        // Video playback control
+        let videoElement = document.getElementById("video-element");
+        let pausePlayVideoTimeout = null;
+        let spacePressed = false;
+        function pausePlayVideo(event) {
+            if (event.code === 'Space' && !spacePressed) {
+                spacePressed = true;
+                if (pausePlayVideoTimeout === null) {
+                    pausePlayVideoTimeout = setTimeout(function() {
+                        pausePlayVideoTimeout = null;
+                    }, 100);
+                    videoElement.paused ? videoElement.play() : videoElement.pause();
+                }
+            }
+        }
+        function resetSpacePressed(event) {
+            if (event.code === 'Space') {
+                spacePressed = false;
+            }
+        }
+        // Event listeners
+        document.addEventListener('keydown', pausePlayVideo);
+        document.addEventListener('keyup', resetSpacePressed);
+        // Prevent default behaviors
+        window.addEventListener("keydown", function(e) {
+            if ((e.key === " " || e.key === "ArrowUp" || e.key === "ArrowDown" || "Tab") && e.target === document.body) {
+                e.preventDefault();
+            }
+        });
+        window.addEventListener("focus", function(e) {
+            if (e.target === document.body) {
+                document.activeElement.blur();
+            }
+        }, true);
+    });
+    </script>
+<div class="video-info">
+    <h1 class="video-title" id="video-title">Loading...</h1>
+    <div class="video-stats">
+        <span class="view-count" id="view-count">Loading...</span>
+        <!-- Share Video Container -->
+<div class="shareVideo" id="shareVideoContainer" style="display: none;">
+    <div class="shareVideoHeader">
+        <div>Share this video! <div class="closeButton" onclick="closeShareVideo()">&times;</div> </div>
+    </div>
+    <div class="shareVideoContent">
+        <!-- URL Copy Section -->
+        <div class="urlSection">
+            <input id="urlInput" type="text" readonly />
+            <button onclick="copyURL()" class="copyButton">Copy</button>
+        </div>
+    </div>
+    <p id="message" class="message"></p>
+</div>
+<!-- HTML Elements -->
+<div class="video-actions">
+    <button class="action-button" id="download-button">
+        <i class="fas fa-download"></i> Download
+    </button>
+</div>
+    </div>
+</div>
+<div class="video-page-container">
+    <div class="main-content">
+        <div class="channel-info">
+            <div class="channel-avatar" style="align-items: center;"></div>
+            <div class="channel-details">
+                <span class="channel-name" id="channel-name">Loading...</span>
+            </div>
+        </div>
+            <div class="video-description" id="video-description">
+                Loading description...
+            </div>
+        </div>
+    </div>
+</div>
+    <aside class="recommendations">
+        <div class="recommendation-skeleton">
+            <div class="thumbnail-skeleton"></div>
+            <div class="info-skeleton">
+                <div class="title-skeleton"></div>
+                <div class="meta-skeleton"></div>
+            </div>
+        </div>
+    </aside>
+</div>
+<script>
+async function fetchVideoMetadata() {
+    try {
+        const currentVideoUrl = localStorage.getItem("video_to_watch");
+        if (!currentVideoUrl) {
+            console.error("No current video URL found");
+            return;
+        }
+        const currentVideoResponse = await fetch(currentVideoUrl);
+        const currentVideo = await currentVideoResponse.json();
+        const response = await fetch('https://huggingface.co/spaces/vericudebuget/ok4231/raw/main/metadata/video-index.json');
+        const videoIndexData = await response.json();
+        const baseUrl = 'https://huggingface.co/spaces/vericudebuget/ok4231/raw/main/metadata/';
+        const thumbnailBaseUrl = 'https://huggingface.co/spaces/vericudebuget/ok4231/raw/main/thumbnails/';
+        const calculateRelevanceScore = (videoData, currentVideo) => {
+            let score = 0;
+            if (videoData.uploader === currentVideo.uploader) score += 5;
+            const currentWords = currentVideo.title.toLowerCase().split(' ');
+            const videoWords = videoData.title.toLowerCase().split(' ');
+            const commonWords = currentWords.filter(word => videoWords.includes(word));
+            score += commonWords.length;
+            const currentDesc = currentVideo.description.toLowerCase().split(' ');
+            const videoDesc = videoData.description.toLowerCase().split(' ');
+            const commonDesc = currentDesc.filter(word => videoDesc.includes(word));
+            score += commonDesc.length * 0.5;
+            const timeDiff = Math.abs(new Date(videoData.uploadTimestamp) - new Date(currentVideo.uploadTimestamp));
+            const daysDiff = timeDiff / (1000 * 60 * 60 * 24);
+            score += Math.max(0, 2 - (daysDiff / 30));
+            return score;
+        };
+        const encryptLink = (link, key) => {
+            const encrypted = link.split('').map((char, i) => {
+                return String.fromCharCode(char.charCodeAt(0) ^ key.charCodeAt(i % key.length));
+            }).join('');
+            return btoa(encrypted);
+        };
+        const formatDuration = (duration) => {
+            if (duration === null || duration === undefined) return 'N/A';
+            const minutes = Math.floor(duration / 60);
+            const seconds = duration % 60;
+            return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+        };
+        const recommendationsContainer = document.querySelector('.recommendations');
+        recommendationsContainer.innerHTML = '';
+        // Store recommendations for sorting
+        let recommendations = [];
+        // Process videos and store them
+        for (let videoIndex of videoIndexData) {
+            let fileName = videoIndex.url.substring(videoIndex.url.lastIndexOf('/') + 1);
+            let finalUrl = baseUrl + encodeURIComponent(fileName);
+            try {
+                const videoResponse = await fetch(finalUrl);
+                const videoData = await videoResponse.json();
+                if (finalUrl === currentVideoUrl) continue;
+                const relevanceScore = calculateRelevanceScore(videoData, currentVideo);
+                const thumbnailUrl = thumbnailBaseUrl + encodeURIComponent(
+                    videoData.thumbnailLocation.substring(videoData.thumbnailLocation.lastIndexOf('/') + 1)
+                );
+                recommendations.push({
+                    ...videoData,
+                    relevanceScore,
+                    finalUrl,
+                    thumbnailUrl
+                });
+                // Sort recommendations by relevance score
+                recommendations.sort((a, b) => b.relevanceScore - a.relevanceScore);
+                // Refresh the entire recommendations list
+                recommendationsContainer.innerHTML = '';
+                recommendations.forEach(video => {
+                    const recommendationElement = document.createElement('div');
+recommendationElement.classList.add('recommendation');
+recommendationElement.innerHTML = `
+    <div class="thumbnail-container">
+        <img
+            src="${video.thumbnailUrl}"
+            alt="${video.title}"
+            class="thumbnail-image"
+            loading="lazy"
+        >
+        <span class="duration-overlay">${formatDuration(video.duration)}</span>
+    </div>
+    <div class="recommendation-info">
+        <h3 class="video-title-recommendation">${video.title}</h3>
+        <p class="uploader">${video.uploader}</p>
+        <p class="upload-date">${new Intl.DateTimeFormat('en-US', {
+            month: 'long',
+            day: 'numeric',
+            year: 'numeric'
+        }).format(new Date(video.uploadTimestamp))}</p>
+    </div>
+`;
+                    recommendationElement.addEventListener('click', () => {
+                        const encryptedLink = encryptLink(video.finalUrl, 'JesusIsGod');
+                        window.location.href = `video-player.html#${encryptedLink}`;
+                        setTimeout(() => window.location.reload(), 30);
+                    });
+                    recommendationsContainer.appendChild(recommendationElement);
+                });
+            } catch (error) {
+                console.error(`Error fetching video metadata for ${fileName}:`, error);
+            }
+        }
+    } catch (error) {
+        console.error('Error fetching video metadata:', error);
+    }
+}
+// Call the function on page load
+window.onload = fetchVideoMetadata;
+</script>
+<style>
+    /* Layout containers */
+    .video-page-container {
+        display: flex;
+        gap: 24px;
+        max-width: 1800px;
+        margin: 0 auto;
+        padding: 16px;
+        padding-bottom: 50px;
+        overflow: hidden;
+    }
+    .main-content {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+    }
+    .recommendations {
+        width: 400px;
+        flex-shrink: 0;
+        height: 100vh;
+        overflow-y: scroll;
+        padding: 0 8px;
+        scrollbar-width: none; /* Firefox */
+        -ms-overflow-style: none; /* IE and Edge */
+    }
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    .recommendations::-webkit-scrollbar {
+        display: none;
+    }
+    /* Recommendation styles */
+    .recommendation {
+        display: flex;
+        gap: 12px;
+        cursor: pointer;
+        transition: background-color 0.2s;
+        padding: 8px;
+        border-radius: 8px;
+        margin-bottom: 8px;
+    }
+    .recommendation:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+    .thumbnail-container {
+        position: relative;
+        width: 160px;
+        height: 90px;
+        overflow: hidden;
+        border-radius: 8px;
+        flex-shrink: 0;
+    }
+    .thumbnail-image {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+    .duration-overlay {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        background-color: rgba(0, 0, 0, 0.8);
+        color: white;
+        padding: 2px 4px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+    }
+    .recommendation-info {
+        flex: 1;
+        min-width: 0;
+    }
+    .video-title-recommendation {
+        font-size: 14px;
+        font-weight: 500;
+        margin: 0 0 4px 0;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+    .uploader {
+        font-size: 12px;
+        color: #606060;
+        margin: 0 0 2px 0;
+    }
+    .upload-date {
+        font-size: 12px;
+        color: #606060;
+        margin: 0;
+    }
+    /* Loading skeleton styles */
+    .recommendation-skeleton {
+        display: flex;
+        gap: 12px;
+        padding: 8px;
+    }
+    .thumbnail-skeleton {
+        width: 160px;
+        height: 90px;
+        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+        background-size: 200% 100%;
+        animation: loading 1.5s infinite;
+        border-radius: 8px;
+    }
+    .info-skeleton {
+        flex: 1;
+    }
+    .title-skeleton {
+        height: 16px;
+        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+        background-size: 200% 100%;
+        animation: loading 1.5s infinite;
+        margin-bottom: 8px;
+        border-radius: 4px;
+    }
+    .meta-skeleton {
+        height: 12px;
+        width: 60%;
+        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+        background-size: 200% 100%;
+        animation: loading 1.5s infinite;
+        border-radius: 4px;
+    }
+    @keyframes loading {
+        0% { background-position: 200% 0; }
+        100% { background-position: -200% 0; }
+    }
+    /* Mobile styles (YouTube-like) */
+    @media (max-width: 1020px) {
+        .video-page-container {
+            flex-direction: column;
+            height: auto;
+            overflow: visible;
+        }
+        .recommendations {
+            width: 100%;
+            height: auto;
+            padding: 0;
+            overflow-y: visible;
+        }
+        .recommendation {
+            padding: 12px 0;
+            margin: 0;
+            border-radius: 0;
+            border-bottom: 1px solid #e5e5e5;
+        }
+        .thumbnail-container {
+            width: 140px;
+            height: 80px;
+        }
+        .video-title-recommendation {
+            font-size: 16px;
+            -webkit-line-clamp: 2;
+        }
+        .uploader, .upload-date {
+            font-size: 14px;
+        }
+    }
+    /* Mobile styles (smaller screens) */
+    @media (max-width: 640px) {
+        .video-page-container {
+            padding: 0;
+        }
+        .recommendation {
+            padding: 8px;
+        }
+        .thumbnail-container {
+            width: 120px;
+            height: 68px;
+        }
+        .video-title-recommendation {
+            font-size: 14px;
+        }
+        .uploader, .upload-date {
+            font-size: 12px;
+        }
+    }
+    </style>
+<style>
+    .subtitle {
+      display: flex;
+      background-color: rgb(0, 72, 85);
+      border-radius: 5px;
+      width: fit-content;
+      padding: 1px 5px;
+      align-items: center;
+      transform-origin: left bottom;
+      transform: scale(80%);
+    }
+    .subtitle_icon {
+      width: auto;
+      height: 1em;
+      margin-right: 5px;
+    }
+    .subtitle_content {
+      filter: invert(100%);
+      display: flex;
+      align-items: center;
+    }
+    .subtitle_text {
+      align-self: center;
+      text-align: center;
+      color: #000000;
+    }
+    </style>
+    <script>window.onpopstate = function(event) {
+        location.reload();
+    };
+    </script>
+</aside>
+</main>
+</body>
+</html>