Hugging Face's logo

Spaces:
ginigen
/
theater
Running

App Files Community
1
theater / index.html
ginipick's picture
ginipick
Update index.html
f989b48 verified
raw
history blame
16 kB
<!DOCTYPE html>
<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;
 }
.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);
 transition: transform 0.3s ease;
}
.thumbnail video {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.gallery {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 gap: 15px;
 padding: 20px;
 background: linear-gradient(45deg, #1a1a1a, #2c2c2c);
 border-radius: 15px;
}
 .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: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">๐ŸŽฏ Featured</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">๐Ÿ†• NEW</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 = [
 // ์ฒซ ๋ฒˆ์งธ ๊ทธ๋ฃน (ํƒญ 1)
 { file: 'chicken.mp4', tab: 1 },
 { file: 'ddd.mp4', tab: 1 },
 { file: 'm6.mp4', tab: 1 },
 { file: 'i0.mp4', tab: 1 },
 { file: 'i1.mp4', tab: 1 },
 { file: 'OP5.mp4', tab: 1 },
 { file: 'OP6.mp4', tab: 1 },
 { file: 'qq13.mp4', tab: 1 },
 { file: 'zawq1.mp4', tab: 1 },
 { file: 'qq14.mp4', tab: 1 },
 { file: 'qq12.mp4', tab: 1 },
 { file: 'i2.mp4', tab: 1 },
 { file: 'qqq14.mp4', tab: 1 },
 { file: 'BB1.mp4', tab: 1 },
 { file: 'BB2.mp4', tab: 1 },
 // ๋‘ ๋ฒˆ์งธ ๊ทธ๋ฃน (ํƒญ 2)
 { file: 'qqq1.mp4', tab: 2 },
 { file: 'qqq2.mp4', tab: 2 },
 { file: 'qqqq.mp4', tab: 2 },
 { file: 'plane.mp4', tab: 2 },
 { file: 'ewq1.mp4', tab: 2 },
 { file: 'tmpaqldmcah.mp4', tab: 2 },
 { file: 'x1.mp4', tab: 2 },
 { file: 'x2.mp4', tab: 2 },
 { file: 'x3.mp4', tab: 2 },
 { file: 'x4.mp4', tab: 2 },
 { file: 'V1.mp4', tab: 2 },
 { file: 'V2.mp4', tab: 2 },
 { file: 'V3.mp4', tab: 2 },
 { file: 'V4.mp4', tab: 2 },
 { file: 'qq43.mp4', tab: 2 },
 // ์„ธ ๋ฒˆ์งธ ๊ทธ๋ฃน (ํƒญ 3)
 { file: 'qq44.mp4', tab: 3 },
 { file: 'qw1.mp4', tab: 3 },
 { file: 'i5.mp4', tab: 3 },
 { file: 'i6.mp4', tab: 3 },
 { file: 'i7.mp4', tab: 3 },
 { file: 'i8.mp4', tab: 3 },
 { file: 'qqq10.mp4', tab: 3 },
 { file: 'i9.mp4', tab: 3 },
 { file: '13.mp4', tab: 3 },
 { file: 'qq21.mp4', tab: 3 },
 { file: 'qq22.mp4', tab: 3 },
 { file: 'qq23.mp4', tab: 3 },
 { file: 'tmp72ufgzpa.mp4', tab: 3 },
 { file: 'tmpeodtm_jl.output.mp4', tab: 3 },
 { file: 'tmpi2bkoc60.mp4', tab: 3 },
 // ๋„ค ๋ฒˆ์งธ ๊ทธ๋ฃน (ํƒญ 4)
 { file: 'xz1.mp4', tab: 4 },
 { file: 'xz2.mp4', tab: 4 },
 { file: 'xz3.mp4', tab: 4 },
 { file: 'xz4.mp4', tab: 4 },
 { file: 'xz5.mp4', tab: 4 },
 { file: 'xz6.mp4', tab: 4 },
 { file: 'xz7.mp4', tab: 4 },
 { file: 'xz8.mp4', tab: 4 },
 { file: 'xz9.mp4', tab: 4 },
 { file: 'xz10.mp4', tab: 4 },
 { file: 'xz11.mp4', tab: 4 },
 { file: 'xz12.mp4', tab: 4 },
 { file: 'xz13.mp4', tab: 4 },
 { file: 'xz14.mp4', tab: 4 },
 { file: 'xz15.mp4', tab: 4 },
 // ๋‹ค์„ฏ ๋ฒˆ์งธ ๊ทธ๋ฃน (ํƒญ 5)
 { file: 't1.mp4', tab: 5 },
 { file: 't2.mp4', tab: 5 },
 { file: 't3.mp4', tab: 5 },
 { file: 't4.mp4', tab: 5 },
 { file: 'd1.mp4', tab: 5 },
 { file: 'd2.mp4', tab: 5 },
 { file: 'd4.mp4', tab: 5 },
 { file: 'd5.mp4', tab: 5 },
 { file: 'd6.mp4', tab: 5 },
 { file: 'OP1.mp4', tab: 5 },
 { file: 'OP2.mp4', tab: 5 },
 { file: 'OP3.mp4', tab: 5 },
 { file: 'OP4.mp4', tab: 5 },
 { file: 'tr1.mp4', tab: 5 },
 { file: 'tr2.mp4', tab: 5 },
 // ์—ฌ์„ฏ ๋ฒˆ์งธ ๊ทธ๋ฃน (ํƒญ 6)
 { file: 'tr3.mp4', tab: 6 },
 { file: 'tr4.mp4', tab: 6 },
 { file: 'tr5.mp4', tab: 6 },
 { file: 'tr6.mp4', tab: 6 },
 { file: 'tr7.mp4', tab: 6 },
 { file: 'tr8.mp4', tab: 6 },
 { file: 'tr9.mp4', tab: 6 },
 { file: 'z1.mp4', tab: 6 },
 { file: 'z2.mp4', tab: 6 },
 { file: 'z3.mp4', tab: 6 },
 { file: 'aq1.mp4', tab: 6 },
 { file: 'aq2.mp4', tab: 6 },
 { file: 'i3.mp4', tab: 6 },
 { file: 'tmpss5nprt_.mp4', tab: 6 },
 { file: 'watermarked_output (10).mp4', tab: 6 },
 // ์ผ๊ณฑ ๋ฒˆ์งธ ๊ทธ๋ฃน (ํƒญ 7)
 { file: 'qq1.mp4', tab: 7 },
 { file: 'qq2.mp4', tab: 7 },
 { file: 'qq3.mp4', tab: 7 },
 { file: 'qq4.mp4', tab: 7 },
 { file: 'qq41.mp4', tab: 7 },
 { file: 'qq42.mp4', tab: 7 },
 { file: 'qaw1.mp4', tab: 7 },
 { file: 'qaw2.mp4', tab: 7 },
 { file: 'qaw3.mp4', tab: 7 },
 { file: '11.mp4', tab: 7 },
 { file: '12.mp4', tab: 7 },
 { file: 'qq11.mp4', tab: 7 },
 { file: 'tmp1y2bgrly.output.mp4', tab: 7 },
 { file: 'tmp22o82oge.output.mp4', tab: 7 },
 { file: 'tmp43xj9wgj.output.mp4', tab: 7 },
 // ์—ฌ๋Ÿ ๋ฒˆ์งธ ๊ทธ๋ฃน (ํƒญ 8)
 { file: 'tmp59a06_s4.output.mp4', tab: 8 },
 { file: 'tmp6tomynny.output.mp4', tab: 8 },
 { file: 'tmp77sxlo_s.output.mp4', tab: 8 },
 { file: 'tmp8tehlk6n.output.mp4', tab: 8 },
 { file: 'tmp95_p0et8.output.mp4', tab: 8 },
 { file: 'tmp9l96xmk5.output.mp4', tab: 8 },
 { file: 'tmpa1kmfjzl.output.mp4', tab: 8 },
 { file: 'tmpf03w8duw.output.mp4', tab: 8 },
 { file: 'tmpga24owoo.output.mp4', tab: 8 },
 { file: 'tmph843b62h.output.mp4', tab: 8 },
 { file: 'tmpi97a5zy8.mp4', tab: 8 },
 { file: 'tmpinq30vk2.mp4', tab: 8 },
 { file: 'tmpnuljiasj.output.mp4', tab: 8 },
 { file: 'tmpqh0z4uts.output.mp4', tab: 8 },
 { file: 'tmps_zu8c60.output.mp4', tab: 8 }
];
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.src = videoData.file; // ์ง์ ‘ src ์„ค์ •
 thumbVideo.playsinline = true;
 thumbVideo.muted = true;
 thumbVideo.loop = true; // ๋ฐ˜๋ณต ์žฌ์ƒ ์ถ”๊ฐ€
 thumbVideo.preload = 'metadata';
// ๋น„๋””์˜ค ๋กœ๋“œ ์™„๋ฃŒ ํ›„ ์ฒ˜๋ฆฌ
 thumbVideo.addEventListener('loadeddata', () => {
 thumbVideo.currentTime = 0;
 });
 // ์—๋Ÿฌ ์ฒ˜๋ฆฌ ์ถ”๊ฐ€
 thumbVideo.addEventListener('error', (e) => {
 console.error('Video loading error:', e);
 thumbnail.style.backgroundColor = '#333';
 });
 thumbnail.addEventListener('mouseenter', () => {
 thumbVideo.play().catch(e => console.log('Playback failed:', e));
 });
 thumbnail.addEventListener('mouseleave', () => {
 thumbVideo.pause();
 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;
 selectedVideo.play().catch(e => console.log('Playback failed:', e));
 });
 thumbnail.appendChild(thumbVideo);
}
function initializeGallery() {
 const gallery = document.getElementById('video-gallery');
 const selectedThumb = document.getElementById('selected-thumb');
 const selectedVideo = document.getElementById('selected-video');
 // ์ดˆ๊ธฐ ๋น„๋””์˜ค ์„ค์ •
 if (videoFiles.length > 0) {
 selectedThumb.src = videoFiles[0].file;
 selectedVideo.src = videoFiles[0].file;
 }
 // ๋ชจ๋“  ๋น„๋””์˜ค ์ธ๋„ค์ผ ์ƒ์„ฑ
 videoFiles.forEach((videoData) => {
 const thumbnail = document.createElement('div');
 thumbnail.className = 'thumbnail';
 thumbnail.dataset.tab = videoData.tab;
createVideoElement(thumbnail, videoData, true);
 gallery.appendChild(thumbnail);
 });
 // ์ฒซ ๋ฒˆ์งธ ํƒญ ์ปจํ…์ธ  ํ‘œ์‹œ
 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>