Spaces:

Subham9126
/

dfd

Running

App Files Files Community

Subham9126 commited on Apr 20, 2025

Commit

9274027

verified ·

1 Parent(s): 0bf1002

Update index.html

Browse files

Files changed (1) hide show

index.html +107 -37

index.html CHANGED Viewed

@@ -3,58 +3,128 @@
 <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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HF Video Library</title>
+    <!-- Material Icons -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/4.0.0/font/MaterialIcons-Regular.ttf" rel="stylesheet">
+    <!-- Material Components Web -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/material-components-web/14.0.0/material-components-web.min.css" rel="stylesheet">
+    <!-- Plyr.js for enhanced video player -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.css">
+    <!-- Custom styles -->
+    <link rel="stylesheet" href="style.css">
 </head>
 <body>
+    <div class="app-container">
+        <!-- App Header -->
+        <header class="app-header">
+            <div class="header-content">
+                <div class="logo-container">
+                    <i class="fas fa-film logo-icon"></i>
+                    <h1 class="app-title">HF Video Library</h1>
+                </div>
+                <div class="search-wrapper">
+                    <div class="search-container">
+                        <i class="fas fa-search search-icon"></i>
+                        <input type="text" id="searchInput" placeholder="Search videos..." class="search-input">
+                        <button id="clearSearch" class="clear-search-btn">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                </div>
             </div>
         </header>
+        <!-- Main Content -->
+        <main class="app-main">
+            <!-- Video Grid Section -->
+            <div class="video-grid-container">
+                <div class="controls-bar">
+                    <div class="result-counter" id="resultCounter">
+                        Showing <span id="visibleCount">0</span> of <span id="totalCount">0</span> videos
+                    </div>
+                    <div class="view-toggle">
+                        <button id="gridViewBtn" class="view-btn active" title="Grid View">
+                            <i class="fas fa-th"></i>
+                        </button>
+                        <button id="listViewBtn" class="view-btn" title="List View">
+                            <i class="fas fa-list"></i>
+                        </button>
                     </div>
                 </div>
+                <!-- Loading Indicator -->
+                <div id="loadingIndicator" class="loading-container">
+                    <div class="loading-spinner"></div>
+                    <p>Loading videos...</p>
+                </div>
+                <!-- Error Message -->
+                <div id="errorMessage" class="error-container" style="display: none;">
+                    <i class="fas fa-exclamation-circle"></i>
+                    <p>Failed to load videos. Please try again later.</p>
+                    <button id="retryBtn" class="retry-btn">Retry</button>
+                </div>
+                <!-- Video Grid -->
+                <div id="videoGrid" class="video-grid"></div>
+                <!-- Pagination -->
+                <div class="pagination-container">
+                    <div id="pagination" class="pagination"></div>
+                </div>
+            </div>
+        </main>
+        <!-- Video Player Modal -->
+        <div id="videoModal" class="modal">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2 id="modalVideoTitle">Video Title</h2>
+                    <button id="closeModal" class="close-button">
+                        <i class="fas fa-times"></i>
+                    </button>
                 </div>
+                <div class="modal-body">
+                    <div class="player-container">
+                        <video id="videoPlayer" playsinline controls>
+                            <p>Your browser doesn't support HTML5 video.</p>
+                        </video>
+                    </div>
+                    <div class="player-help">
+                        <div class="help-item">
+                            <i class="fas fa-keyboard"></i>
+                            <span>Space: Play/Pause</span>
+                        </div>
+                        <div class="help-item">
+                            <i class="fas fa-arrows-alt-h"></i>
+                            <span>←/→: Seek</span>
+                        </div>
+                        <div class="help-item">
                             <i class="fas fa-expand"></i>
+                            <span>F: Fullscreen</span>
+                        </div>
+                        <div class="help-item">
+                            <i class="fas fa-volume-mute"></i>
+                            <span>M: Mute</span>
+                        </div>
                     </div>
                 </div>
+            </div>
+        </div>
+        <!-- Toast Messages -->
+        <div id="toastContainer" class="toast-container"></div>
+        <!-- Footer -->
+        <footer class="app-footer">
+            <p>HF Video Library &copy; 2025</p>
         </footer>
     </div>
+    <!-- Scripts -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/material-components-web/14.0.0/material-components-web.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.7.8/plyr.min.js"></script>
+    <script src="script.js"></script>
 </body>
 </html>