Update index.html

index.html

@@ -10,12 +10,10 @@
             margin: 0;
             padding: 0;
         }
-
         body {
             background-color: #000000;
             color: white;
         }
-
         .gradient-header {
             background: linear-gradient(90deg, 
                 #FF0000, #FF7F00, #FFFF00, #00FF00, 
@@ -32,17 +30,14 @@
             border-radius: 0 0 15px 15px;
             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
         }
-
         .gradient-header::before {
             content: '🎞️';
             margin-right: 10px;
         }
-
         .gradient-header::after {
             content: '🎬';
             margin-left: 10px;
         }
-
         @keyframes gradient {
             0% {
                 background-position: 0% 50%;
@@ -54,24 +49,48 @@
                 background-position: 0% 50%;
             }
         }
-
         .gradient-header a {
             color: white;
             text-decoration: none;
             transition: all 0.3s ease;
         }
-
         .gradient-header a:hover {
             color: #f0f0f0;
             text-shadow: 3px 3px 6px rgba(0,0,0,0.7);
         }
-
+        .tab-menu {
+            display: flex;
+            justify-content: center;
+            gap: 20px;
+            margin-bottom: 20px;
+            padding: 10px;
+            background: linear-gradient(45deg, #1a1a1a, #2c2c2c);
+            border-radius: 10px;
+        }
+        .tab-button {
+            padding: 10px 30px;
+            border: none;
+            border-radius: 5px;
+            background: #333;
+            color: white;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-weight: bold;
+            text-transform: uppercase;
+        }
+        .tab-button:hover {
+            background: #444;
+            transform: translateY(-2px);
+        }
+        .tab-button.active {
+            background: #666;
+            box-shadow: 0 0 10px rgba(255,255,255,0.2);
+        }
         .container {
             max-width: 1800px;
             margin: 0 auto;
             padding: 20px;
         }
-
         .selected-content {
             display: flex;
             margin-bottom: 30px;
@@ -83,7 +102,6 @@
             box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
             position: relative;
         }
-
         .selected-content::before {
             content: '🎬';
             position: absolute;
@@ -91,7 +109,6 @@
             left: 20px;
             font-size: 30px;
         }
-
         .selected-content::after {
             content: '🎥';
             position: absolute;
@@ -99,7 +116,6 @@
             right: 20px;
             font-size: 30px;
         }
-
         .selected-thumbnail, .selected-video {
             flex: 1;
             background-color: #000;
@@ -111,19 +127,16 @@
                 inset 0 0 20px rgba(0, 0, 0, 0.8);
             overflow: hidden;
         }
-
         .selected-thumbnail video {
             max-width: 100%;
             max-height: 100%;
             object-fit: contain;
         }
-
         .selected-video video {
             width: 100%;
             height: 100%;
             object-fit: contain;
         }
-
         .gallery {
             display: grid;
             grid-template-columns: repeat(8, 1fr);
@@ -132,7 +145,6 @@
             background: linear-gradient(45deg, #1a1a1a, #2c2c2c);
             border-radius: 15px;
         }
-
         .thumbnail {
             position: relative;
             padding-top: 56.25%;
@@ -146,14 +158,12 @@
                 0 0 0 1px rgba(255, 255, 255, 0.1);
             transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
-
         .thumbnail:hover {
             transform: translateY(-5px) scale(1.02);
             box-shadow: 
                 0 8px 20px rgba(0, 0, 0, 0.8),
                 0 0 0 1px rgba(255, 255, 255, 0.2);
         }
-
         .thumbnail video {
             position: absolute;
             top: 0;
@@ -163,7 +173,6 @@
             object-fit: cover;
             transition: transform 0.3s ease;
         }
-
         .thumbnail:hover video {
             transform: scale(1.1);
         }
@@ -175,6 +184,13 @@
     </div>
 
     <div class="container">
+        <div class="tab-menu">
+            <button class="tab-button active" data-tab="1">BEST</button>
+            <button class="tab-button" data-tab="2">Popularity</button>
+            <button class="tab-button" data-tab="3">Hot</button>
+            <button class="tab-button" data-tab="4">NEW</button>
+        </div>
+
         <div class="selected-content">
             <div class="selected-thumbnail">
                 <video id="selected-thumb" playsinline muted>
@@ -192,207 +208,210 @@
     </div>
 
     <script>
-        const videoFiles = [
-            'chicken.mp4',             
-            'ddd.mp4',   
-            'm6.mp4',              
-            'i0.mp4',          
-            'i1.mp4',
-            'OP5.mp4', 
-            'OP6.mp4',          
-            'qq13.mp4',
-            'zawq1.mp4',                    
-            'qq14.mp4',
-            'qq12.mp4',          
-            'i2.mp4',
-            'qqq14.mp4',          
-            'BB1.mp4',          
-            'BB2.mp4',
-            'qqq1.mp4',          
-            'qqq2.mp4',          
-            'qqqq.mp4',
-            'plane.mp4',          
-            'ewq1.mp4',
-            'tmpaqldmcah.mp4',
-            'x1.mp4',          
-            'x2.mp4',          
-            'x3.mp4',
-            'x4.mp4',
-            'V1.mp4',          
-            'V2.mp4',          
-            'V3.mp4',
-            'V4.mp4',          
-            'qq43.mp4',
-            'qq44.mp4',   
-            'qw1.mp4',          
-            'i5.mp4',
-            'i6.mp4',
-            'i7.mp4',
-            'i8.mp4',
-            'qqq10.mp4',          
-            'i9.mp4',
-            '13.mp4',
-            'qq21.mp4', 
-            'qq22.mp4', 
-            'qq23.mp4',                     
-            'tmp72ufgzpa.mp4',
-            'tmpeodtm_jl.output.mp4',
-            'tmpi2bkoc60.mp4',
-          
-            'xz1.mp4', 
-            'xz2.mp4', 
-            'xz3.mp4',           
-            'xz4.mp4',  
-            'xz5.mp4', 
-            'xz6.mp4', 
-            'xz7.mp4',           
-            'xz8.mp4',          
-            'xz9.mp4',  
-            'xz10.mp4',           
-            'xz11.mp4', 
-            'xz12.mp4', 
-            'xz13.mp4',           
-            'xz14.mp4',  
-            'xz15.mp4', 
-
-          
-            't1.mp4', 
-            't2.mp4', 
-            't3.mp4',           
-            't4.mp4',  
-            'd1.mp4', 
-            'd2.mp4', 
-            'd4.mp4',           
-            'd5.mp4',          
-            'd6.mp4',             
-            'OP1.mp4', 
-            'OP2.mp4', 
-            'OP3.mp4',           
-            'OP4.mp4',  
-            'tr1.mp4', 
-            'tr2.mp4', 
-            'tr3.mp4',           
-            'tr4.mp4',  
-            'tr5.mp4', 
-            'tr6.mp4', 
-            'tr7.mp4',           
-            'tr8.mp4',          
-            'tr9.mp4',    
-          
-            'xz1.mp4', 
-            'xz2.mp4', 
-            'xz3.mp4',           
-            'xz4.mp4',  
-            'xz5.mp4', 
-            'xz6.mp4', 
-            'xz7.mp4',           
-            'xz8.mp4',          
-            'xz9.mp4',   
-          
-            'z1.mp4', 
-            'z2.mp4', 
-            'z3.mp4',           
-            'aq1.mp4',          
-            'aq2.mp4',
-            'i3.mp4',          
-            'tmpss5nprt_.mp4',
-            'watermarked_output (10).mp4',          
-            'qq1.mp4',
-            'qq2.mp4',
-            'qq3.mp4',
-            'qq4.mp4',          
-            'qq41.mp4',
-            'qq42.mp4',
-            'qaw1.mp4',          
-            'qaw2.mp4',
-            'qaw3.mp4',           
-            '11.mp4',
-            '12.mp4',
-            'qq11.mp4',   
-            'tmp1y2bgrly.output.mp4',
-            'tmp22o82oge.output.mp4',
-            'tmp43xj9wgj.output.mp4',
-            'tmp59a06_s4.output.mp4',         
-            'tmp6tomynny.output.mp4',
-            'tmp77sxlo_s.output.mp4',
-            'tmp8tehlk6n.output.mp4',
-            'tmp95_p0et8.output.mp4',
-            'tmp9l96xmk5.output.mp4',
-            'tmpa1kmfjzl.output.mp4',
-            'tmpf03w8duw.output.mp4',
-            'tmpga24owoo.output.mp4',          
-            'tmph843b62h.output.mp4',
-            'tmpi97a5zy8.mp4',
-            'tmpinq30vk2.mp4',
-            'tmpnuljiasj.output.mp4',
-            'tmpqh0z4uts.output.mp4',
-            'tmps_zu8c60.output.mp4',
-            'tmpvdq4uchy.output.mp4',
-            'tmpx2ketgav.output.mp4',          
-            'tmpx75_3o81.output.mp4',
-            'tmpy2_6d7qo.output.mp4',
-            'qw2.mp4',
-            'qw3.mp4',
-            'qw4.mp4',
-            'qw5.mp4',          
-            'watermarked_output (4).mp4',
-            'aq3.mp4',
-            'aq4.mp4',
-            'aq5.mp4',     
-            'qqq11.mp4',  
-            'qqq12.mp4',    
-            'qqq13.mp4',        
-            'i4.mp4',      
-            'z4.mp4', 
-            'm2.mp4', 
-            'm3.mp4',           
-            'z6.mp4', 
-            'm1.mp4', 
-            'z8.mp4', 
-            'm4.mp4',              
-            'm5.mp4',           
-            'watermarked_output (9).mp4'
-        ];
-
+const videoFiles = [
+    { file: 'chicken.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'ddd.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'm6.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'i0.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'i1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'OP5.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'OP6.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qq13.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'zawq1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qq14.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qq12.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'i2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qqq14.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'BB1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'BB2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qqq1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qqq2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qqqq.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'plane.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'ewq1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmpaqldmcah.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'x1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'x2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'x3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'x4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'V1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'V2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'V3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'V4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qq43.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qq44.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qw1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'i5.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'i6.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'i7.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'i8.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qqq10.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'i9.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: '13.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qq21.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qq22.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qq23.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmp72ufgzpa.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmpeodtm_jl.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmpi2bkoc60.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'xz1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'xz2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'xz3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'xz4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'xz5.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'xz6.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'xz7.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'xz8.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'xz9.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'xz10.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'xz11.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'xz12.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'xz13.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'xz14.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'xz15.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 't1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 't2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 't3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 't4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'd1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'd2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'd4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'd5.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'd6.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'OP1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'OP2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'OP3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'OP4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tr1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tr2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tr3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tr4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tr5.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tr6.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tr7.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tr8.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tr9.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'z1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'z2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'z3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'aq1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'aq2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'i3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmpss5nprt_.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'watermarked_output (10).mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qq1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qq2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qq3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qq4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qq41.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qq42.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qaw1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qaw2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qaw3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: '11.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: '12.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qq11.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmp1y2bgrly.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmp22o82oge.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmp43xj9wgj.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmp59a06_s4.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmp6tomynny.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmp77sxlo_s.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmp8tehlk6n.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmp95_p0et8.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmp9l96xmk5.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmpa1kmfjzl.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmpf03w8duw.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmpga24owoo.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmph843b62h.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmpi97a5zy8.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmpinq30vk2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmpnuljiasj.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmpqh0z4uts.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmps_zu8c60.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmpvdq4uchy.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmpx2ketgav.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmpx75_3o81.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'tmpy2_6d7qo.output.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qw2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qw3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qw4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qw5.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'watermarked_output (4).mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'aq3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'aq4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'aq5.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qqq11.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qqq12.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'qqq13.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'i4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'z4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'm2.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'm3.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'z6.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'm1.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'z8.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'm4.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'm5.mp4', tab: Math.floor(Math.random() * 4) + 1 },
+    { file: 'watermarked_output (9).mp4', tab: Math.floor(Math.random() * 4) + 1 }
+];
         function initializeGallery() {
             const gallery = document.getElementById('video-gallery');
             const selectedThumb = document.getElementById('selected-thumb');
             const selectedVideo = document.getElementById('selected-video');
-
-            videoFiles.forEach((videoPath) => {
+            videoFiles.forEach((videoData) => {
                 const thumbnail = document.createElement('div');
                 thumbnail.className = 'thumbnail';
+                thumbnail.dataset.tab = videoData.tab;
                 
                 const thumbVideo = document.createElement('video');
-                thumbVideo.src = videoPath;
+                thumbVideo.src = videoData.file;
                 thumbVideo.playsinline = true;
                 thumbVideo.muted = true;
                 thumbVideo.preload = 'metadata';
-
+                
                 thumbVideo.addEventListener('loadeddata', () => {
                     thumbVideo.currentTime = 0;
                 });
-
                 thumbnail.appendChild(thumbVideo);
                 
                 thumbnail.addEventListener('click', () => {
-                    selectedThumb.src = videoPath;
-                    selectedVideo.src = videoPath;
+                    selectedThumb.src = videoData.file;
+                    selectedVideo.src = videoData.file;
                     selectedThumb.currentTime = 0;
                     selectedVideo.play();
                 });
-
                 gallery.appendChild(thumbnail);
             });
-
             if (videoFiles.length > 0) {
-                selectedThumb.src = videoFiles[0];
-                selectedVideo.src = videoFiles[0];
+                selectedThumb.src = videoFiles[0].file;
+                selectedVideo.src = videoFiles[0].file;
                 selectedThumb.currentTime = 0;
             }
+            // 초기 탭 표시
+            showTabContent('1');
         }
-
+        function showTabContent(tabNumber) {
+            const thumbnails = document.querySelectorAll('.thumbnail');
+            thumbnails.forEach(thumb => {
+                if (thumb.dataset.tab === tabNumber) {
+                    thumb.style.display = 'block';
+                } else {
+                    thumb.style.display = 'none';
+                }
+            });
+        }
+        // 탭 버튼 이벤트 리스너
+        document.querySelectorAll('.tab-button').forEach(button => {
+            button.addEventListener('click', () => {
+                document.querySelectorAll('.tab-button').forEach(btn => 
+                    btn.classList.remove('active'));
+                button.classList.add('active');
+                showTabContent(button.dataset.tab);
+            });
+        });
         initializeGallery();
     </script>
 </body>
-</html>
+</html>
+