Spaces:

Subham9126
/

dfd

Running

App Files Files Community

Subham9126 commited on Apr 20, 2025

Commit

22fa71e

verified ·

1 Parent(s): a08ce17

Update index.html

Browse files

Files changed (1) hide show

index.html +41 -893

index.html CHANGED Viewed

@@ -3,910 +3,58 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HF Video Library</title>
-    <!-- Plyr CSS -->
-    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
-    <style>
-        :root {
-            --primary-color: #6366f1;
-            --primary-hover: #4f46e5;
-            --text-color: #1f2937;
-            --bg-color: #f9fafb;
-            --card-bg: #ffffff;
-            --border-color: #e5e7eb;
-            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-            background-color: var(--bg-color);
-            color: var(--text-color);
-            line-height: 1.5;
-            padding: 20px;
-        }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-        header {
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-            margin-bottom: 30px;
-        }
-        h1 {
-            font-size: 2.5rem;
-            font-weight: 700;
-            color: var(--primary-color);
-            text-align: center;
-        }
-        .search-box {
-            display: flex;
-            max-width: 500px;
-            margin: 0 auto;
-            width: 100%;
-        }
-        .search-input {
-            flex: 1;
-            padding: 12px 16px;
-            font-size: 1rem;
-            border: 1px solid var(--border-color);
-            border-radius: 6px;
-            outline: none;
-            transition: border-color 0.2s;
-        }
-        .search-input:focus {
-            border-color: var(--primary-color);
-            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
-        }
-        .video-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-            gap: 20px;
-            margin-bottom: 30px;
-        }
-        .video-card {
-            background-color: var(--card-bg);
-            border-radius: 8px;
-            overflow: hidden;
-            box-shadow: var(--shadow);
-            transition: transform 0.2s, box-shadow 0.2s;
-            cursor: pointer;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-        }
-        .video-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-        }
-        .video-thumbnail {
-            width: 100%;
-            aspect-ratio: 16 / 9;
-            background-color: #eee;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #888;
-        }
-        .video-thumbnail svg {
-            width: 48px;
-            height: 48px;
-            color: var(--primary-color);
-        }
-        .video-info {
-            padding: 16px;
-            flex-grow: 1;
-            display: flex;
-            flex-direction: column;
-        }
-        .video-title {
-            font-size: 1rem;
-            font-weight: 600;
-            margin-bottom: 8px;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-        }
-        .pagination {
-            display: flex;
-            justify-content: center;
-            gap: 8px;
-            margin-top: 30px;
-            flex-wrap: wrap;
-        }
-        .page-btn {
-            padding: 8px 12px;
-            background-color: var(--card-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 0.9rem;
-            transition: all 0.2s;
-        }
-        .page-btn:hover {
-            background-color: var(--primary-hover);
-            color: white;
-            border-color: var(--primary-hover);
-        }
-        .page-btn.active {
-            background-color: var(--primary-color);
-            color: white;
-            border-color: var(--primary-color);
-        }
-        .modal-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: rgba(0, 0, 0, 0.75);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 1000;
-            padding: 20px;
-            opacity: 0;
-            visibility: hidden;
-            transition: opacity 0.3s, visibility 0.3s;
-        }
-        .modal-overlay.active {
-            opacity: 1;
-            visibility: visible;
-        }
-        .modal-content {
-            width: 100%;
-            max-width: 900px;
-            background-color: var(--card-bg);
-            border-radius: 8px;
-            overflow: hidden;
-            position: relative;
-            padding-top: 56.25%; /* 16:9 aspect ratio */
-        }
-        .modal-close {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            width: 36px;
-            height: 36px;
-            background-color: rgba(0, 0, 0, 0.5);
-            border: none;
-            border-radius: 50%;
-            color: white;
-            font-size: 20px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            z-index: 1010;
-            transition: background-color 0.2s;
-        }
-        .modal-close:hover {
-            background-color: rgba(0, 0, 0, 0.7);
-        }
-        .video-container {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-        }
-        .video-player {
-            width: 100%;
-            height: 100%;
-        }
-        .loader {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            min-height: 200px;
-            text-align: center;
-        }
-        .spinner {
-            width: 50px;
-            height: 50px;
-            border: 5px solid rgba(99, 102, 241, 0.3);
-            border-radius: 50%;
-            border-top-color: var(--primary-color);
-            animation: spin 1s ease-in-out infinite;
-            margin-bottom: 20px;
-        }
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-        .error-message {
-            color: #ef4444;
-            padding: 16px;
-            text-align: center;
-            background-color: #fee2e2;
-            border-radius: 6px;
-            margin-bottom: 20px;
-            border: 1px solid #fecaca;
-        }
-        @media (max-width: 640px) {
-            .video-grid {
-                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-                gap: 16px;
-            }
-            h1 {
-                font-size: 1.75rem;
-            }
-            .search-input {
-                padding: 10px 12px;
-            }
-            .modal-content {
-                max-width: 100%;
-            }
-        }
-        /* Pagination with jump-to-page input for large collections */
-        .pagination-jump {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-left: 8px;
-        }
-        .jump-input {
-            width: 60px;
-            padding: 8px;
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            text-align: center;
-        }
-        .no-results {
-            grid-column: 1 / -1;
-            text-align: center;
-            padding: 40px;
-            background-color: var(--card-bg);
-            border-radius: 8px;
-            box-shadow: var(--shadow);
-        }
-        /* Improved loading states */
-        .video-card-skeleton {
-            background-color: var(--card-bg);
-            border-radius: 8px;
-            overflow: hidden;
-            box-shadow: var(--shadow);
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-        }
-        .skeleton-thumbnail {
-            width: 100%;
-            aspect-ratio: 16 / 9;
-            background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
-            background-size: 200% 100%;
-            animation: shimmer 1.5s infinite;
-        }
-        .skeleton-info {
-            padding: 16px;
-        }
-        .skeleton-title {
-            height: 20px;
-            margin-bottom: 8px;
-            background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
-            background-size: 200% 100%;
-            animation: shimmer 1.5s infinite;
-            border-radius: 4px;
-        }
-        @keyframes shimmer {
-            0% { background-position: -200% 0; }
-            100% { background-position: 200% 0; }
-        }
-    </style>
 </head>
 <body>
     <div class="container">
         <header>
-            <h1>HF Video Library</h1>
-            <div class="search-box">
-                <input type="text" class="search-input" placeholder="Search videos..." id="searchInput">
             </div>
         </header>
-        <div id="errorContainer"></div>
-        <div id="loadingIndicator" class="loader">
-            <div class="spinner"></div>
-            <p>Loading videos...</p>
-        </div>
-        <div id="videoGrid" class="video-grid" style="display: none;"></div>
-        <div id="pagination" class="pagination"></div>
-    </div>
-    <div class="modal-overlay" id="videoModal">
-        <button class="modal-close" id="closeModal">✕</button>
-        <div class="modal-content">
-            <div class="video-container" id="videoContainer"></div>
-        </div>
-    </div>
-    <!-- Plyr.js -->
-    <script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
-    <script>
-        // Configuration
-        const CONFIG = {
-            videosPerPage: 12,
-            dataSource: 'database.json',
-            playerOptions: {
-                controls: [
-                    'play-large', 'play', 'progress', 'current-time', 'mute', 'volume',
-                    'captions', 'settings', 'pip', 'airplay', 'fullscreen'
-                ],
-                settings: ['captions', 'quality', 'speed'],
-                keyboard: { focused: true, global: false },
-                resetOnEnd: true
-            }
-        };
-        // State management
-        const STATE = {
-            videos: [],
-            filteredVideos: [],
-            currentPage: 1,
-            player: null,
-            videoElement: null,
-            searchQuery: '',
-            loading: true,
-            error: null
-        };
-        // DOM Elements
-        const DOM = {
-            videoGrid: document.getElementById('videoGrid'),
-            loadingIndicator: document.getElementById('loadingIndicator'),
-            pagination: document.getElementById('pagination'),
-            videoModal: document.getElementById('videoModal'),
-            closeModal: document.getElementById('closeModal'),
-            videoContainer: document.getElementById('videoContainer'),
-            searchInput: document.getElementById('searchInput'),
-            errorContainer: document.getElementById('errorContainer')
-        };
-        // Helper Functions
-        function showError(message) {
-            STATE.error = message;
-            DOM.errorContainer.innerHTML = `
-                <div class="error-message">
-                    <strong>Error:</strong> ${message}
-                </div>
-            `;
-            DOM.loadingIndicator.style.display = 'none';
-        }
-        function clearError() {
-            STATE.error = null;
-            DOM.errorContainer.innerHTML = '';
-        }
-        function createVideoElement() {
-            // Completely create a new video element each time
-            const videoElement = document.createElement('video');
-            videoElement.className = 'video-player';
-            videoElement.controls = true;
-            videoElement.preload = 'auto';
-            videoElement.crossOrigin = 'anonymous'; // For potential subtitles
-            return videoElement;
-        }
-        // Event Handlers
-        function handleVideoClick(index) {
-            const video = STATE.filteredVideos[index];
-            if (!video) return;
-            openModal();
-            playVideo(video);
-        }
-        function handleSearchInput(event) {
-            STATE.searchQuery = event.target.value.trim().toLowerCase();
-            filterVideos();
-            STATE.currentPage = 1; // Reset to first page when searching
-            renderVideos();
-            renderPagination();
-        }
-        function handlePageClick(page) {
-            if (page === STATE.currentPage) return;
-            STATE.currentPage = page;
-            renderVideos();
-            renderPagination();
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        }
-        function handleCloseModal() {
-            closeModal();
-            cleanupPlayer();
-        }
-        function handleKeyDown(event) {
-            if (event.key === 'Escape' && DOM.videoModal.classList.contains('active')) {
-                handleCloseModal();
-            }
-        }
-        // Modal Functions
-        function openModal() {
-            DOM.videoModal.classList.add('active');
-            document.body.style.overflow = 'hidden'; // Prevent scrolling
-        }
-        function closeModal() {
-            DOM.videoModal.classList.remove('active');
-            document.body.style.overflow = '';
-        }
-        // Video Player Functions
-        function playVideo(video) {
-            // Always clean up previous player first (important)
-            cleanupPlayer();
-            // Clear the video container completely
-            DOM.videoContainer.innerHTML = '';
-            // Create a fresh video element for each playback
-            STATE.videoElement = createVideoElement();
-            DOM.videoContainer.appendChild(STATE.videoElement);
-            // Prepare the video URL
-            let videoUrl = video.url;
-            // Add download parameter to Hugging Face URLs
-            if (videoUrl.includes('huggingface.co')) {
-                videoUrl = addQueryParam(videoUrl, 'download', 'true');
-            }
-            // Set the source
-            STATE.videoElement.src = videoUrl;
-            try {
-                // Initialize the player with the new element
-                STATE.player = new Plyr(STATE.videoElement, CONFIG.playerOptions);
-                // Set up event listeners
-                STATE.player.on('error', (event) => {
-                    console.error('Plyr error:', event);
-                    // Check if there's a detailed error message
-                    let errorMsg = 'Unable to play this video.';
-                    if (STATE.videoElement.error) {
-                        switch (STATE.videoElement.error.code) {
-                            case 1: errorMsg += ' The video file was not found.'; break;
-                            case 2: errorMsg += ' Network error occurred.'; break;
-                            case 3: errorMsg += ' Video decoding failed. The format may not be supported by your browser.'; break;
-                            case 4: errorMsg += ' Video is not playable due to permissions or content protection.'; break;
-                        }
-                    }
-                    // Display error in the player
-                    const errorOverlay = document.createElement('div');
-                    errorOverlay.style.position = 'absolute';
-                    errorOverlay.style.top = '0';
-                    errorOverlay.style.left = '0';
-                    errorOverlay.style.width = '100%';
-                    errorOverlay.style.height = '100%';
-                    errorOverlay.style.backgroundColor = 'rgba(0,0,0,0.7)';
-                    errorOverlay.style.color = 'white';
-                    errorOverlay.style.display = 'flex';
-                    errorOverlay.style.alignItems = 'center';
-                    errorOverlay.style.justifyContent = 'center';
-                    errorOverlay.style.textAlign = 'center';
-                    errorOverlay.style.padding = '20px';
-                    errorOverlay.innerHTML = `<div>${errorMsg}</div>`;
-                    DOM.videoContainer.appendChild(errorOverlay);
-                });
-                // Auto-play
-                STATE.player.play().catch(error => {
-                    console.warn('Auto-play was prevented:', error);
-                    // This is fine, as many browsers block autoplay
-                });
-            } catch (error) {
-                console.error('Failed to initialize player:', error);
-                DOM.videoContainer.innerHTML = `<div style="padding: 20px; text-align: center;">
-                    Failed to initialize video player. Please try again.
-                </div>`;
-            }
-        }
-        function cleanupPlayer() {
-            if (STATE.player) {
-                // Force stop any playback
-                try {
-                    if (!STATE.player.paused) {
-                        STATE.player.pause();
-                    }
-                    // Destroy the player completely
-                    STATE.player.destroy();
-                } catch (e) {
-                    console.warn('Error during player cleanup:', e);
-                }
-                STATE.player = null;
-            }
-            // Ensure any lingering video element is properly cleaned up
-            if (STATE.videoElement) {
-                try {
-                    // Force stop
-                    STATE.videoElement.pause();
-                    // Clear all sources explicitly
-                    STATE.videoElement.removeAttribute('src');
-                    STATE.videoElement.load();
-                } catch (e) {
-                    console.warn('Error clearing video element:', e);
-                }
-                STATE.videoElement = null;
-            }
-            // Extra safety - remove all content
-            DOM.videoContainer.innerHTML = '';
-        }
-        // Data Functions
-        async function fetchVideoData() {
-            try {
-                clearError();
-                STATE.loading = true;
-                renderLoadingState();
-                const response = await fetch(CONFIG.dataSource);
-                if (!response.ok) {
-                    throw new Error(`Failed to load video data (Status: ${response.status})`);
-                }
-                const data = await response.json();
-                // Validate data structure
-                if (!data || !Array.isArray(data.videos)) {
-                    throw new Error('Invalid data format: Expected {"videos": [...]}');
-                }
-                // Filter out invalid entries
-                STATE.videos = data.videos.filter(video => {
-                    const isValid = video && typeof video.title === 'string' &&
-                                   typeof video.url === 'string' && video.url.trim() !== '';
-                    if (!isValid) {
-                        console.warn('Skipping invalid video entry:', video);
-                    }
-                    return isValid;
-                });
-                // Initial filtering
-                filterVideos();
-                // Render the UI
-                STATE.loading = false;
-                renderUI();
-            } catch (error) {
-                console.error('Error fetching video data:', error);
-                showError(error.message || 'Failed to load video data. Please try again later.');
-            }
-        }
-        function filterVideos() {
-            const query = STATE.searchQuery;
-            if (!query) {
-                STATE.filteredVideos = [...STATE.videos];
-                return;
-            }
-            STATE.filteredVideos = STATE.videos.filter(video =>
-                video.title.toLowerCase().includes(query)
-            );
-        }
-        // Rendering Functions
-        function renderUI() {
-            if (STATE.loading) {
-                renderLoadingState();
-                return;
-            }
-            DOM.loadingIndicator.style.display = 'none';
-            DOM.videoGrid.style.display = 'grid';
-            renderVideos();
-            renderPagination();
-        }
-        function renderLoadingState() {
-            DOM.loadingIndicator.style.display = 'flex';
-            DOM.videoGrid.style.display = 'none';
-            DOM.pagination.innerHTML = '';
-            // Show skeleton loading for better UX
-            DOM.videoGrid.innerHTML = Array(CONFIG.videosPerPage)
-                .fill()
-                .map(() => `
-                    <div class="video-card-skeleton">
-                        <div class="skeleton-thumbnail"></div>
-                        <div class="skeleton-info">
-                            <div class="skeleton-title"></div>
-                            <div class="skeleton-title" style="width: 70%"></div>
-                        </div>
-                    </div>
-                `)
-                .join('');
-        }
-        function renderVideos() {
-            if (STATE.filteredVideos.length === 0) {
-                DOM.videoGrid.innerHTML = `
-                    <div class="no-results">
-                        <h3>No videos found</h3>
-                        <p>Try adjusting your search query</p>
                     </div>
-                `;
-                DOM.pagination.innerHTML = '';
-                return;
-            }
-            const startIndex = (STATE.currentPage - 1) * CONFIG.videosPerPage;
-            const endIndex = startIndex + CONFIG.videosPerPage;
-            const pageVideos = STATE.filteredVideos.slice(startIndex, endIndex);
-            DOM.videoGrid.innerHTML = pageVideos.map((video, index) => `
-                <div class="video-card" onclick="handleVideoClick(${startIndex + index})">
-                    <div class="video-thumbnail">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                            <polygon points="5 3 19 12 5 21 5 3"></polygon>
-                        </svg>
-                    </div>
-                    <div class="video-info">
-                        <h3 class="video-title">${escapeHTML(video.title)}</h3>
                     </div>
                 </div>
-            `).join('');
-        }
-        function renderPagination() {
-            const totalPages = Math.ceil(STATE.filteredVideos.length / CONFIG.videosPerPage);
-            if (totalPages <= 1) {
-                DOM.pagination.innerHTML = '';
-                return;
-            }
-            // Determine which page numbers to show
-            let pageNumbers = [];
-            const maxVisiblePages = 5;
-            if (totalPages <= maxVisiblePages) {
-                // Show all pages
-                pageNumbers = Array.from({ length: totalPages }, (_, i) => i + 1);
-            } else {
-                // Always include first and last page
-                pageNumbers.push(1);
-                // Calculate middle pages
-                let startPage = Math.max(2, STATE.currentPage - 1);
-                let endPage = Math.min(totalPages - 1, STATE.currentPage + 1);
-                // Adjust if we're near the start or end
-                if (STATE.currentPage <= 2) {
-                    endPage = 4;
-                } else if (STATE.currentPage >= totalPages - 1) {
-                    startPage = totalPages - 3;
-                }
-                // Add ellipsis if needed
-                if (startPage > 2) {
-                    pageNumbers.push('...');
-                }
-                // Add middle pages
-                for (let i = startPage; i <= endPage; i++) {
-                    pageNumbers.push(i);
-                }
-                // Add ellipsis if needed
-                if (endPage < totalPages - 1) {
-                    pageNumbers.push('...');
-                }
-                // Add last page if not already added
-                if (totalPages > 1) {
-                    pageNumbers.push(totalPages);
-                }
-            }
-            // Generate pagination HTML
-            const paginationHTML = pageNumbers.map(page => {
-                if (page === '...') {
-                    return `<span class="page-btn">...</span>`;
-                }
-                return `
-                    <button class="page-btn ${page === STATE.currentPage ? 'active' : ''}"
-                            onclick="handlePageClick(${page})">
-                        ${page}
-                    </button>
-                `;
-            }).join('');
-            // Add jump-to-page for large collections
-            const jumpToPageInput = totalPages > maxVisiblePages ? `
-                <div class="pagination-jump">
-                    <span>Go to:</span>
-                    <input type="number" class="jump-input" id="jumpToPage"
-                           min="1" max="${totalPages}" value="${STATE.currentPage}">
-                    <button class="page-btn" onclick="jumpToPage()">Go</button>
                 </div>
-            ` : '';
-            DOM.pagination.innerHTML = paginationHTML + jumpToPageInput;
-            // Add event listener to jump input
-            const jumpInput = document.getElementById('jumpToPage');
-            if (jumpInput) {
-                jumpInput.addEventListener('keydown', (e) => {
-                    if (e.key === 'Enter') {
-                        jumpToPage();
-                    }
-                });
-            }
-        }
-        // Utility Functions
-        function escapeHTML(str) {
-            const div = document.createElement('div');
-            div.textContent = str;
-            return div.innerHTML;
-        }
-        function addQueryParam(url, param, value) {
-            const separator = url.includes('?') ? '&' : '?';
-            return `${url}${separator}${param}=${encodeURIComponent(value)}`;
-        }
-        function jumpToPage() {
-            const input = document.getElementById('jumpToPage');
-            if (!input) return;
-            let page = parseInt(input.value);
-            const totalPages = Math.ceil(STATE.filteredVideos.length / CONFIG.videosPerPage);
-            // Validate input
-            if (isNaN(page) || page < 1) {
-                page = 1;
-            } else if (page > totalPages) {
-                page = totalPages;
-            }
-            handlePageClick(page);
-        }
-        // Mobile double-tap handlers
-        function setupDoubleTapHandlers() {
-            let lastTap = 0;
-            let touchTimeout;
-            document.addEventListener('touchend', (e) => {
-                // Only handle if modal is active and player exists
-                if (!DOM.videoModal.classList.contains('active') || !STATE.player) return;
-                const currentTime = new Date().getTime();
-                const tapLength = currentTime - lastTap;
-                clearTimeout(touchTimeout);
-                if (tapLength < 500 && tapLength > 0) {
-                    // Double tap detected
-                    e.preventDefault();
-                    // Determine which side of the screen was tapped
-                    const screenWidth = window.innerWidth;
-                    const touchX = e.changedTouches[0].clientX;
-                    if (touchX < screenWidth / 4) {
-                        // Left side - seek backward 10 seconds
-                        STATE.player.currentTime -= 10;
-                    } else if (touchX > (screenWidth * 3) / 4) {
-                        // Right side - seek forward 10 seconds
-                        STATE.player.currentTime += 10;
-                    } else {
-                        // Middle - toggle play/pause
-                        if (STATE.player.paused) {
-                            STATE.player.play();
-                        } else {
-                            STATE.player.pause();
-                        }
-                    }
-                } else {
-                    // Single tap - wait to see if double tap follows
-                    touchTimeout = setTimeout(() => {
-                        // Single tap handling if needed
-                    }, 300);
-                    lastTap = currentTime;
-                }
-            });
-        }
-        // Initialization and Event Listeners
-        document.addEventListener('DOMContentLoaded', () => {
-            // Set up event listeners
-            DOM.searchInput.addEventListener('input', handleSearchInput);
-            DOM.closeModal.addEventListener('click', handleCloseModal);
-            DOM.videoModal.addEventListener('click', (event) => {
-                // Close modal if clicking outside the content
-                if (event.target === DOM.videoModal) {
-                    handleCloseModal();
-                }
-            });
-            document.addEventListener('keydown', handleKeyDown);
-            // Set up mobile-specific handlers
-            setupDoubleTapHandlers();
-            // Fetch data
-            fetchVideoData();
-        });
-        // Make handlers globally accessible for onclick attributes
-        window.handleVideoClick = handleVideoClick;
-        window.handlePageClick = handlePageClick;
-        window.jumpToPage = jumpToPage;
-    </script>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Video Streaming Dashboard</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 </head>
 <body>
     <div class="container">
         <header>
+            <h1>My Video Collection</h1>
+            <div class="search-container">
+                <input type="text" id="searchInput" placeholder="Search videos...">
+                <button id="searchButton"><i class="fas fa-search"></i></button>
             </div>
         </header>
+        <main>
+            <section class="video-list-section">
+                <h2>Videos</h2>
+                <div class="video-list" id="videoList">
+                    <!-- Videos will be loaded here dynamically -->
+                    <div class="loading">
+                        <i class="fas fa-spinner fa-spin"></i>
+                        <p>Loading videos...</p>
                     </div>
+                </div>
+            </section>
+            <section class="video-player-section">
+                <div class="video-container">
+                    <video id="videoPlayer" controls>
+                        <p>Your browser doesn't support HTML5 video.</p>
+                    </video>
+                    <div class="no-video-message" id="noVideoMessage">
+                        <i class="fas fa-film"></i>
+                        <p>Select a video to play</p>
                     </div>
                 </div>
+                <div class="video-info">
+                    <h2 id="currentVideoTitle">No video selected</h2>
+                    <div class="video-controls">
+                        <button id="fullscreenBtn" title="Fullscreen">
+                            <i class="fas fa-expand"></i>
+                        </button>
+                    </div>
                 </div>
+            </section>
+        </main>
+        <footer>
+            <p>Video Streaming Dashboard &copy; 2025</p>
+        </footer>
+    </div>
+    <script src="script.js"></script>
 </body>
+</html>