feat(video-cards): add click navigation to video and shorts cards

Implement click event handlers for video cards, shorts cards, and search results to navigate to their respective detail pages. Also adjust grid layout dimensions for better responsiveness.

css/style.css

@@ -1,4 +1,4 @@
-/* 全局样式重置 */
+/* å…¨å±€æ ·å¼é‡ç½® */
 * {
     margin: 0;
     padding: 0;
@@ -328,7 +328,7 @@ body {
 /* Video grid */
 .video-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
     gap: 24px;
     margin-bottom: 48px;
 }
@@ -360,7 +360,7 @@ body {
 .video-thumbnail {
     position: relative;
     width: 100%;
-    padding-top: 56.25%; /* 16:9 比例 */
+    padding-top: 56.25%; /* 16:9 比例 */
     background-color: #303030;
 }
 
@@ -494,7 +494,7 @@ body {
     color: #909090;
 }
 
-/* Shorts 部分 */
+/* Shorts 部分 */
 .shorts-section {
     margin-top: 48px;
 }
@@ -508,7 +508,7 @@ body {
 
 .shorts-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
     gap: 20px;
 }
 
@@ -516,7 +516,7 @@ body {
 .shorts-card {
     position: relative;
     width: 100%;
-    padding-top: 177.78%; /* 9:16 比例 */
+    padding-top: 177.78%; /* 9:16 比例 */
     background-color: #303030;
     border-radius: 12px;
     overflow: hidden;

js/script.js

@@ -619,6 +619,11 @@ function createVideoCard(video) {
         menuDropdown.classList.remove('show');
     });
     
+    // Add click event to the card
+    card.addEventListener('click', () => {
+        window.location.href = `video.html?id=${video.id}`;
+    });
+    
     return card;
 }
 
@@ -639,6 +644,11 @@ function createShortsCard(video) {
         </div>
     `;
     
+    // Add click event to the card
+    card.addEventListener('click', () => {
+        window.location.href = `short.html?id=${video.id}`;
+    });
+    
     return card;
 }
 
@@ -714,6 +724,11 @@ function renderSearchResults(results, query) {
             </div>
         `;
         
+        // Add click event to the search result item
+        item.addEventListener('click', () => {
+            window.location.href = `video.html?id=${video.id}`;
+        });
+        
         searchResultsContent.appendChild(item);
     });