Update style.css

style.css

@@ -1,159 +1,689 @@
-document.addEventListener('DOMContentLoaded', () => {
-    // DOM Elements
-    const videoList = document.getElementById('videoList');
-    const videoPlayer = document.getElementById('videoPlayer');
-    const currentVideoTitle = document.getElementById('currentVideoTitle');
-    const noVideoMessage = document.getElementById('noVideoMessage');
-    const searchInput = document.getElementById('searchInput');
-    const searchButton = document.getElementById('searchButton');
-    const fullscreenBtn = document.getElementById('fullscreenBtn');
+/* Base Styles & Variables */
+:root {
+    /* Colors - Material Design inspired */
+    --primary-color: #1976d2;
+    --primary-light: #42a5f5;
+    --primary-dark: #0d47a1;
+    --secondary-color: #f50057;
+    --surface-color: #ffffff;
+    --background-color: #f5f7fa;
+    --text-primary: #212121;
+    --text-secondary: #757575;
+    --divider-color: #e0e0e0;
+    --error-color: #f44336;
+    --success-color: #4caf50;
+    --warning-color: #ff9800;
     
-    // State
-    let videos = [];
-    let currentVideoIndex = -1;
+    /* Elevation/Shadow */
+    --shadow-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+    --shadow-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+    --shadow-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+    --shadow-4: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
     
-    // Fetch video data from JSON file
-    async function fetchVideos() {
-        try {
-            const response = await fetch('database.json');
-            if (!response.ok) {
-                throw new Error('Failed to load video database');
-            }
-            
-            videos = await response.json();
-            renderVideoList(videos);
-        } catch (error) {
-            console.error('Error loading videos:', error);
-            videoList.innerHTML = `
-                <div class="error-message">
-                    <p>Failed to load videos. Please try again later.</p>
-                </div>
-            `;
-        }
-    }
+    /* Border Radius */
+    --border-radius-sm: 4px;
+    --border-radius-md: 8px;
+    --border-radius-lg: 16px;
     
-    // Render video list
-    function renderVideoList(videosToRender) {
-        // Clear loading state
-        videoList.innerHTML = '';
-        
-        if (videosToRender.length === 0) {
-            videoList.innerHTML = `
-                <div class="error-message">
-                    <p>No videos found</p>
-                </div>
-            `;
-            return;
-        }
-        
-        // Create video list items
-        videosToRender.forEach((video, index) => {
-            const videoItem = document.createElement('div');
-            videoItem.className = 'video-item';
-            videoItem.innerHTML = `
-                <h3>${video.title}</h3>
-            `;
-            
-            videoItem.addEventListener('click', () => {
-                playVideo(index);
-            });
-            
-            videoList.appendChild(videoItem);
-        });
-    }
+    /* Spacing */
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 16px;
+    --spacing-lg: 24px;
+    --spacing-xl: 32px;
     
-    // Play selected video
-    function playVideo(index) {
-        if (index < 0 || index >= videos.length) return;
-        
-        // Update UI
-        const videoItems = document.querySelectorAll('.video-item');
-        videoItems.forEach(item => item.classList.remove('active'));
-        videoItems[index].classList.add('active');
-        
-        // Update video source and title
-        const video = videos[index];
-        videoPlayer.src = video.url;
-        currentVideoTitle.textContent = video.title;
-        
-        // Show video player and hide placeholder
-        noVideoMessage.style.display = 'none';
-        videoPlayer.style.display = 'block';
-        
-        // Play video
-        videoPlayer.load();
-        videoPlayer.play()
-            .catch(error => {
-                console.error('Failed to play video:', error);
-                // Handle formats that might not be supported
-                if (video.url.toLowerCase().endsWith('.mkv')) {
-                    alert('MKV format may not be supported in your browser. Consider using MP4 files for better compatibility.');
-                }
-            });
-        
-        currentVideoIndex = index;
-    }
+    /* Animation */
+    --transition-fast: 0.2s;
+    --transition-regular: 0.3s;
+    --transition-slow: 0.5s;
     
-    // Search functionality
-    function searchVideos() {
-        const searchTerm = searchInput.value.toLowerCase().trim();
-        
-        if (!searchTerm) {
-            renderVideoList(videos);
-            return;
-        }
-        
-        const filteredVideos = videos.filter(video => 
-            video.title.toLowerCase().includes(searchTerm)
-        );
-        
-        renderVideoList(filteredVideos);
-    }
+    /* Layout */
+    --header-height: 64px;
+    --footer-height: 50px;
+    --sidebar-width: 240px;
     
-    // Toggle fullscreen
-    function toggleFullscreen() {
-        if (!document.fullscreenElement) {
-            if (videoPlayer.requestFullscreen) {
-                videoPlayer.requestFullscreen();
-            } else if (videoPlayer.webkitRequestFullscreen) { /* Safari */
-                videoPlayer.webkitRequestFullscreen();
-            } else if (videoPlayer.msRequestFullscreen) { /* IE11 */
-                videoPlayer.msRequestFullscreen();
-            }
-        } else {
-            if (document.exitFullscreen) {
-                document.exitFullscreen();
-            } else if (document.webkitExitFullscreen) { /* Safari */
-                document.webkitExitFullscreen();
-            } else if (document.msExitFullscreen) { /* IE11 */
-                document.msExitFullscreen();
-            }
-        }
+    /* Font Sizes */
+    --font-xs: 12px;
+    --font-sm: 14px;
+    --font-md: 16px;
+    --font-lg: 18px;
+    --font-xl: 20px;
+    --font-xxl: 24px;
+}
+
+/* Base Reset */
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    line-height: 1.6;
+    background-color: var(--background-color);
+    color: var(--text-primary);
+    min-height: 100vh;
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+}
+
+/* App Container */
+.app-container {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+/* Header Styles */
+.app-header {
+    background-color: var(--surface-color);
+    box-shadow: var(--shadow-1);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    height: var(--header-height);
+    display: flex;
+    align-items: center;
+}
+
+.header-content {
+    width: 100%;
+    max-width: 1440px;
+    margin: 0 auto;
+    padding: 0 var(--spacing-lg);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.logo-container {
+    display: flex;
+    align-items: center;
+}
+
+.logo-icon {
+    color: var(--primary-color);
+    font-size: var(--font-xl);
+    margin-right: var(--spacing-sm);
+}
+
+.app-title {
+    font-size: var(--font-xl);
+    font-weight: 500;
+    color: var(--primary-dark);
+    white-space: nowrap;
+}
+
+.search-wrapper {
+    flex-grow: 1;
+    max-width: 500px;
+    margin-left: var(--spacing-lg);
+}
+
+.search-container {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.04);
+    border-radius: var(--border-radius-md);
+    padding: var(--spacing-xs) var(--spacing-md);
+    transition: background-color var(--transition-fast);
+}
+
+.search-container:focus-within {
+    background-color: rgba(0, 0, 0, 0.08);
+    box-shadow: 0 0 0 2px var(--primary-light);
+}
+
+.search-icon {
+    color: var(--text-secondary);
+    margin-right: var(--spacing-sm);
+}
+
+.search-input {
+    flex-grow: 1;
+    border: none;
+    background: transparent;
+    padding: var(--spacing-sm);
+    font-size: var(--font-md);
+    color: var(--text-primary);
+    outline: none;
+}
+
+.search-input::placeholder {
+    color: var(--text-secondary);
+}
+
+.clear-search-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--text-secondary);
+    opacity: 0.7;
+    transition: opacity var(--transition-fast);
+    display: none;
+    padding: var(--spacing-xs);
+}
+
+.clear-search-btn:hover {
+    opacity: 1;
+}
+
+/* Main Content */
+.app-main {
+    flex: 1;
+    padding: var(--spacing-lg);
+    max-width: 1440px;
+    width: 100%;
+    margin: 0 auto;
+}
+
+/* Controls Bar */
+.controls-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--spacing-lg);
+}
+
+.result-counter {
+    color: var(--text-secondary);
+    font-size: var(--font-sm);
+}
+
+.view-toggle {
+    display: flex;
+    gap: var(--spacing-xs);
+}
+
+.view-btn {
+    background: none;
+    border: none;
+    padding: var(--spacing-sm);
+    border-radius: var(--border-radius-sm);
+    cursor: pointer;
+    color: var(--text-secondary);
+    transition: all var(--transition-fast);
+}
+
+.view-btn:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+}
+
+.view-btn.active {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+/* Loading State */
+.loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-xl) 0;
+    color: var(--text-secondary);
+}
+
+.loading-spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-left: 4px solid var(--primary-color);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin-bottom: var(--spacing-md);
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Error State */
+.error-container {
+    text-align: center;
+    padding: var(--spacing-xl) 0;
+    color: var(--error-color);
+}
+
+.error-container i {
+    font-size: 48px;
+    margin-bottom: var(--spacing-md);
+}
+
+.retry-btn {
+    margin-top: var(--spacing-md);
+    padding: var(--spacing-sm) var(--spacing-lg);
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: var(--border-radius-sm);
+    cursor: pointer;
+    font-size: var(--font-md);
+    transition: background-color var(--transition-fast);
+}
+
+.retry-btn:hover {
+    background-color: var(--primary-dark);
+}
+
+/* Video Grid */
+.video-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: var(--spacing-lg);
+}
+
+.video-grid.list-view {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-md);
+}
+
+.video-card {
+    background-color: var(--surface-color);
+    border-radius: var(--border-radius-md);
+    overflow: hidden;
+    box-shadow: var(--shadow-1);
+    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+    cursor: pointer;
+    position: relative;
+}
+
+.video-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-2);
+}
+
+.video-card.list-view {
+    display: flex;
+    align-items: center;
+}
+
+.video-thumbnail {
+    position: relative;
+    width: 100%;
+    padding-top: 56.25%; /* 16:9 aspect ratio */
+    background-color: #000;
+    overflow: hidden;
+}
+
+.list-view .video-thumbnail {
+    width: 180px;
+    min-width: 180px;
+    height: 100px;
+    padding-top: 0;
+}
+
+.thumbnail-placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #2c3e50;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.play-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    background-color: rgba(0, 0, 0, 0.6);
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    transition: opacity var(--transition-fast);
+}
+
+.video-card:hover .play-icon {
+    opacity: 1;
+}
+
+.video-info {
+    padding: var(--spacing-md);
+}
+
+.list-view .video-info {
+    flex: 1;
+}
+
+.video-title {
+    font-size: var(--font-md);
+    font-weight: 500;
+    margin-bottom: var(--spacing-xs);
+    color: var(--text-primary);
+    /* Truncate long titles */
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-height: 1.4;
+    max-height: 2.8em;
+}
+
+.list-view .video-title {
+    -webkit-line-clamp: 1;
+    font-size: var(--font-lg);
+}
+
+/* Pagination */
+.pagination-container {
+    margin-top: var(--spacing-xl);
+    display: flex;
+    justify-content: center;
+}
+
+.pagination {
+    display: flex;
+    gap: var(--spacing-xs);
+}
+
+.page-btn {
+    min-width: 36px;
+    height: 36px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--surface-color);
+    border: 1px solid var(--divider-color);
+    border-radius: var(--border-radius-sm);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    font-size: var(--font-sm);
+    color: var(--text-primary);
+}
+
+.page-btn:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+}
+
+.page-btn.active {
+    background-color: var(--primary-color);
+    border-color: var(--primary-color);
+    color: white;
+}
+
+.page-btn.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Modal */
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    z-index: 1000;
+    overflow: hidden;
+}
+
+.modal-content {
+    position: relative;
+    background-color: var(--surface-color);
+    width: 90%;
+    max-width: 900px;
+    max-height: 90vh;
+    margin: 5vh auto;
+    border-radius: var(--border-radius-lg);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    box-shadow: var(--shadow-4);
+    animation: modalFadeIn 0.3s ease;
+}
+
+@keyframes modalFadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--spacing-md) var(--spacing-lg);
+    border-bottom: 1px solid var(--divider-color);
+}
+
+.modal-header h2 {
+    font-size: var(--font-lg);
+    font-weight: 500;
+    color: var(--text-primary);
+}
+
+.close-button {
+    background: none;
+    border: none;
+    font-size: var(--font-xl);
+    color: var(--text-secondary);
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity var(--transition-fast);
+    display: flex;
+    padding: var(--spacing-xs);
+    border-radius: 50%;
+}
+
+.close-button:hover {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.04);
+}
+
+.modal-body {
+    padding: var(--spacing-md);
+    flex: 1;
+    overflow-y: auto;
+}
+
+.player-container {
+    width: 100%;
+    border-radius: var(--border-radius-md);
+    overflow: hidden;
+    background-color: #000;
+    aspect-ratio: 16 / 9;
+}
+
+/* Plyr Customization */
+.plyr--full-ui input[type=range] {
+    color: var(--primary-color);
+}
+
+.plyr__control--overlaid {
+    background: var(--primary-color);
+}
+
+.plyr--video .plyr__control.plyr__tab-focus,
+.plyr--video .plyr__control:hover,
+.plyr--video .plyr__control[aria-expanded=true] {
+    background: var(--primary-dark);
+}
+
+.plyr__control.plyr__tab-focus {
+    box-shadow: 0 0 0 5px rgba(25, 118, 210, 0.5);
+}
+
+.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before {
+    background: var(--primary-color);
+}
+
+/* Player Help */
+.player-help {
+    display: flex;
+    justify-content: center;
+    gap: var(--spacing-lg);
+    margin-top: var(--spacing-md);
+    padding: var(--spacing-sm);
+    background-color: rgba(0, 0, 0, 0.03);
+    border-radius: var(--border-radius-md);
+    flex-wrap: wrap;
+}
+
+.help-item {
+    display: flex;
+    align-items: center;
+    color: var(--text-secondary);
+    font-size: var(--font-sm);
+}
+
+.help-item i {
+    margin-right: var(--spacing-xs);
+}
+
+/* Toast Messages */
+.toast-container {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+.toast {
+    padding: var(--spacing-md) var(--spacing-lg);
+    border-radius: var(--border-radius-md);
+    background-color: var(--surface-color);
+    color: var(--text-primary);
+    box-shadow: var(--shadow-2);
+    min-width: 250px;
+    max-width: 350px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transform: translateX(100%);
+    animation: slideIn 0.3s forwards, fadeOut 0.3s 2.7s forwards;
+}
+
+.toast.success {
+    border-left: 4px solid var(--success-color);
+}
+
+.toast.error {
+    border-left: 4px solid var(--error-color);
+}
+
+.toast.info {
+    border-left: 4px solid var(--primary-color);
+}
+
+.toast.warning {
+    border-left: 4px solid var(--warning-color);
+}
+
+@keyframes slideIn {
+    100% { transform: translateX(0); }
+}
+
+@keyframes fadeOut {
+    100% { opacity: 0; }
+}
+
+/* Footer */
+.app-footer {
+    background-color: var(--surface-color);
+    color: var(--text-secondary);
+    text-align: center;
+    padding: var(--spacing-md);
+    margin-top: var(--spacing-xl);
+    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    .header-content {
+        flex-direction: column;
+        align-items: stretch;
+        padding: var(--spacing-sm);
+        height: auto;
     }
-    
-    // Handle video ended event
-    videoPlayer.addEventListener('ended', () => {
-        // Optionally auto-play next video
-        if (currentVideoIndex < videos.length - 1) {
-            playVideo(currentVideoIndex + 1);
-        }
-    });
-    
-    // Handle video error
-    videoPlayer.addEventListener('error', () => {
-        console.error('Video error:', videoPlayer.error);
-        alert('Error playing video. This could be due to format incompatibility or access issues.');
-    });
-    
-    // Event listeners
-    searchButton.addEventListener('click', searchVideos);
-    searchInput.addEventListener('keyup', (e) => {
-        if (e.key === 'Enter') {
-            searchVideos();
-        }
-    });
-    fullscreenBtn.addEventListener('click', toggleFullscreen);
-    
-    // Initial load
-    fetchVideos();
-});
+
+    .app-header {
+        height: auto;
+        padding: var(--spacing-sm) 0;
+    }
+
+    .logo-container {
+        margin-bottom: var(--spacing-sm);
+        justify-content: center;
+    }
+
+    .search-wrapper {
+        margin-left: 0;
+        max-width: none;
+    }
+
+    .app-main {
+        padding: var(--spacing-md);
+    }
+
+    .video-grid {
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        gap: var(--spacing-md);
+    }
+
+    .list-view .video-thumbnail {
+        width: 120px;
+        min-width: 120px;
+        height: 68px;
+    }
+
+    .modal-content {
+        width: 95%;
+        margin: 2.5vh auto;
+    }
+
+    .player-help {
+        gap: var(--spacing-md);
+    }
+
+    .help-item {
+        font-size: 10px;
+    }
+}
+
+@media (max-width: 480px) {
+    .video-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .list-view .video-thumbnail {
+        width: 100px;
+        min-width: 100px;
+        height: 56px;
+    }
+
+    .player-help {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--spacing-xs);
+    }
+
+    .pagination {
+        gap: 2px;
+    }
+
+    .page-btn {
+        min-width: 32px;
+        height: 32px;
+        font-size: 12px;
+    }
+}