Spaces:
Running
Running
| <html lang="ko"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Video Gallery</title> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| background-color: #000000; | |
| color: white; | |
| } | |
| .gradient-header { | |
| background: linear-gradient(90deg, | |
| #FF0000, #FF7F00, #FFFF00, #00FF00, | |
| #0000FF, #4B0082, #8B00FF); | |
| padding: 20px; | |
| margin-bottom: 30px; | |
| text-align: center; | |
| color: white; | |
| font-size: 24px; | |
| font-weight: bold; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.5); | |
| animation: gradient 15s ease infinite; | |
| background-size: 200% 200%; | |
| 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%; | |
| } | |
| 50% { | |
| background-position: 100% 50%; | |
| } | |
| 100% { | |
| 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; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| padding: 15px; | |
| background: linear-gradient(45deg, #1a1a1a, #2c2c2c); | |
| border-radius: 10px; | |
| } | |
| .tab-button { | |
| padding: 8px 16px; | |
| font-size: 14px; | |
| min-width: 120px; | |
| 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; | |
| gap: 20px; | |
| height: 400px; | |
| padding: 20px; | |
| background: linear-gradient(45deg, #1a1a1a, #2c2c2c); | |
| border-radius: 15px; | |
| box-shadow: 0 0 20px rgba(255, 255, 255, 0.1); | |
| position: relative; | |
| } | |
| .selected-content::before { | |
| content: '🎬'; | |
| position: absolute; | |
| top: -15px; | |
| left: 20px; | |
| font-size: 30px; | |
| } | |
| .selected-content::after { | |
| content: '🎥'; | |
| position: absolute; | |
| top: -15px; | |
| right: 20px; | |
| font-size: 30px; | |
| } | |
| .selected-thumbnail, .selected-video { | |
| flex: 1; | |
| background-color: #000; | |
| border: 4px solid #333; | |
| border-radius: 10px; | |
| box-shadow: | |
| 0 0 0 2px #1a1a1a, | |
| 0 0 10px rgba(255, 255, 255, 0.2), | |
| 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); | |
| gap: 15px; | |
| padding: 20px; | |
| background: linear-gradient(45deg, #1a1a1a, #2c2c2c); | |
| border-radius: 15px; | |
| } | |
| .thumbnail { | |
| position: relative; | |
| padding-top: 56.25%; | |
| cursor: pointer; | |
| overflow: hidden; | |
| background-color: #000; | |
| border: 3px solid #333; | |
| border-radius: 8px; | |
| box-shadow: | |
| 0 5px 15px rgba(0, 0, 0, 0.5), | |
| 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; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.3s ease; | |
| } | |
| .thumbnail:hover video { | |
| transform: scale(1.1); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="gradient-header"> | |
| [Dokdo Theater] Gen: <a href="https://ginigen-Dokdo.hf.space" target="_blank">https://ginigen-Dokdo.hf.space</a> | |
| </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">🔥 HOT</button> | |
| <button class="tab-button" data-tab="3">⭐ Popular</button> | |
| <button class="tab-button" data-tab="4">🆕 NEW</button> | |
| <button class="tab-button" data-tab="5">💫 Trending</button> | |
| <button class="tab-button" data-tab="6">👑 Premium</button> | |
| <button class="tab-button" data-tab="7">❤️ Most Liked</button> | |
| <button class="tab-button" data-tab="8">🎯 Featured</button> | |
| </div> | |
| <div class="selected-content"> | |
| <div class="selected-thumbnail"> | |
| <video id="selected-thumb" playsinline muted> | |
| <source src="" type="video/mp4"> | |
| </video> | |
| </div> | |
| <div class="selected-video"> | |
| <video id="selected-video" controls> | |
| <source src="" type="video/mp4"> | |
| </video> | |
| </div> | |
| </div> | |
| <div class="gallery" id="video-gallery"></div> | |
| </div> | |
| <script> | |
| const videoFiles = [ | |
| { file: 'chicken.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'ddd.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'm6.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'i0.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'i1.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'OP5.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'OP6.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qq13.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'zawq1.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qq14.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qq12.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'i2.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qqq14.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'BB1.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'BB2.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qqq1.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qqq2.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qqqq.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'plane.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'ewq1.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmpaqldmcah.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'x1.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'x2.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'x3.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'x4.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'V1.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'V2.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'V3.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'V4.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qq43.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qq44.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qw1.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'i5.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'i6.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'i7.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'i8.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qqq10.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'i9.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: '13.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qq21.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qq22.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qq23.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmp72ufgzpa.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmpeodtm_jl.output.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmpi2bkoc60.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'xz1.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'xz2.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'xz3.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'xz4.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'xz5.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'xz6.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'xz7.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'xz8.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'xz9.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'xz10.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'xz11.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'xz12.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'xz13.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'xz14.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'xz15.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 't1.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 't2.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 't3.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 't4.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'd1.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'd2.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'd4.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'd5.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'd6.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'OP1.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'OP2.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'OP3.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'OP4.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tr1.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tr2.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tr3.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tr4.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tr5.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tr6.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tr7.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tr8.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tr9.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'z1.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'z2.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'z3.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'aq1.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'aq2.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'i3.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmpss5nprt_.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'watermarked_output (10).mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qq1.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qq2.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qq3.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qq4.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qq41.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qq42.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qaw1.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qaw2.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qaw3.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: '11.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: '12.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qq11.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmp1y2bgrly.output.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmp22o82oge.output.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmp43xj9wgj.output.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmp59a06_s4.output.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmp6tomynny.output.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmp77sxlo_s.output.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmp8tehlk6n.output.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmp95_p0et8.output.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmp9l96xmk5.output.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmpa1kmfjzl.output.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmpf03w8duw.output.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmpga24owoo.output.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmph843b62h.output.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmpi97a5zy8.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmpinq30vk2.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmpnuljiasj.output.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmpqh0z4uts.output.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmps_zu8c60.output.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmpvdq4uchy.output.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmpx2ketgav.output.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmpx75_3o81.output.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'tmpy2_6d7qo.output.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qw2.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qw3.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qw4.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qw5.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'watermarked_output (4).mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'aq3.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'aq4.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'aq5.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qqq11.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qqq12.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'qqq13.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'i4.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'z4.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'm2.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'm3.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'z6.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'm1.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'z8.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'm4.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'm5.mp4', tab: Math.floor(Math.random() * 8) + 1 }, | |
| { file: 'watermarked_output (9).mp4', tab: Math.floor(Math.random() * 8) + 1 } | |
| ]; | |
| function initializeGallery() { | |
| const gallery = document.getElementById('video-gallery'); | |
| const selectedThumb = document.getElementById('selected-thumb'); | |
| const selectedVideo = document.getElementById('selected-video'); | |
| const initialLoadCount = 16; | |
| let loadedVideos = 0; | |
| videoFiles.forEach((videoData, index) => { | |
| const thumbnail = document.createElement('div'); | |
| thumbnail.className = 'thumbnail'; | |
| thumbnail.dataset.tab = videoData.tab; | |
| if (index < initialLoadCount) { | |
| createVideoElement(thumbnail, videoData, true); | |
| loadedVideos++; | |
| } else { | |
| thumbnail.dataset.videoSrc = videoData.file; | |
| thumbnail.style.backgroundColor = '#1a1a1a'; | |
| } | |
| gallery.appendChild(thumbnail); | |
| }); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| const thumbnail = entry.target; | |
| if (thumbnail.dataset.videoSrc) { | |
| createVideoElement(thumbnail, { file: thumbnail.dataset.videoSrc }, false); | |
| delete thumbnail.dataset.videoSrc; | |
| } | |
| } | |
| }); | |
| }, { | |
| root: null, | |
| rootMargin: '50px', | |
| threshold: 0.1 | |
| }); | |
| document.querySelectorAll('.thumbnail').forEach(thumb => { | |
| observer.observe(thumb); | |
| }); | |
| if (videoFiles.length > 0) { | |
| selectedThumb.src = videoFiles[0].file; | |
| selectedVideo.src = videoFiles[0].file; | |
| selectedThumb.currentTime = 0; | |
| } | |
| } | |
| function createVideoElement(thumbnail, videoData, autoload) { | |
| const thumbVideo = document.createElement('video'); | |
| thumbVideo.playsinline = true; | |
| thumbVideo.muted = true; | |
| thumbVideo.preload = autoload ? 'metadata' : 'none'; | |
| thumbVideo.addEventListener('loadedmetadata', () => { | |
| thumbVideo.currentTime = 0; | |
| }); | |
| thumbnail.addEventListener('click', () => { | |
| const selectedThumb = document.getElementById('selected-thumb'); | |
| const selectedVideo = document.getElementById('selected-video'); | |
| selectedThumb.src = videoData.file; | |
| selectedVideo.src = videoData.file; | |
| selectedThumb.currentTime = 0; | |
| selectedVideo.play(); | |
| }); | |
| thumbnail.addEventListener('mouseenter', () => { | |
| if (!thumbVideo.src) { | |
| thumbVideo.src = videoData.file; | |
| } | |
| thumbVideo.play(); | |
| }); | |
| thumbnail.addEventListener('mouseleave', () => { | |
| thumbVideo.pause(); | |
| thumbVideo.currentTime = 0; | |
| }); | |
| thumbnail.appendChild(thumbVideo); | |
| } | |
| 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); | |
| }); | |
| }); | |
| 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'; | |
| } | |
| }); | |
| } | |
| initializeGallery(); | |
| </script> | |
| </body> | |
| </html> |