Hugging Face's logo

Spaces:
ginigen
/
theater
Running

App Files Community
1
ginipick commited on
Commit
98396d3
ยท
verified ยท
1 Parent(s): 8456fef

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +66 -18
index.html CHANGED
@@ -11,13 +11,17 @@
11
  padding: 0;
12
  }
13
 
14
- /* ์ƒˆ๋กœ์šด ๊ทธ๋ผ๋””์–ธํŠธ ํ—ค๋” ์Šคํƒ€์ผ */
 
 
 
 
15
  .gradient-header {
16
  background: linear-gradient(90deg,
17
  #FF0000, #FF7F00, #FFFF00, #00FF00,
18
  #0000FF, #4B0082, #8B00FF);
19
- padding: 15px;
20
- margin-bottom: 20px;
21
  text-align: center;
22
  color: white;
23
  font-size: 24px;
@@ -25,6 +29,18 @@
25
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
26
  animation: gradient 15s ease infinite;
27
  background-size: 200% 200%;
 
 
 
 
 
 
 
 
 
 
 
 
28
  }
29
 
30
  @keyframes gradient {
@@ -61,14 +77,39 @@
61
  margin-bottom: 30px;
62
  gap: 20px;
63
  height: 400px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
64
  }
65
 
66
- .selected-thumbnail {
67
  flex: 1;
68
  background-color: #000;
69
- display: flex;
70
- align-items: center;
71
- justify-content: center;
 
 
 
 
72
  }
73
 
74
  .selected-thumbnail video {
@@ -77,11 +118,6 @@
77
  object-fit: contain;
78
  }
79
 
80
- .selected-video {
81
- flex: 1;
82
- background-color: #000;
83
- }
84
-
85
  .selected-video video {
86
  width: 100%;
87
  height: 100%;
@@ -90,8 +126,11 @@
90
 
91
  .gallery {
92
  display: grid;
93
- grid-template-columns: repeat(12, 1fr);
94
- gap: 10px;
 
 
 
95
  }
96
 
97
  .thumbnail {
@@ -100,6 +139,19 @@
100
  cursor: pointer;
101
  overflow: hidden;
102
  background-color: #000;
 
 
 
 
 
 
 
 
 
 
 
 
 
103
  }
104
 
105
  .thumbnail video {
@@ -118,7 +170,6 @@
118
  </style>
119
  </head>
120
  <body>
121
- <!-- ์ƒˆ๋กœ์šด ๊ทธ๋ผ๋””์–ธํŠธ ํ—ค๋” -->
122
  <div class="gradient-header">
123
  [Dokdo Theater] Gen: <a href="https://ginigen-Dokdo.hf.space" target="_blank">https://ginigen-Dokdo.hf.space</a>
124
  </div>
@@ -141,7 +192,6 @@
141
  </div>
142
 
143
  <script>
144
- // ๋น„๋””์˜ค ํŒŒ์ผ ๋ชฉ๋ก์„ ์ง์ ‘ ๋ฐฐ์—ด๋กœ ์ง€์ •
145
  const videoFiles = [
146
  'i0.mp4',
147
  'i1.mp4',
@@ -236,7 +286,6 @@
236
  gallery.appendChild(thumbnail);
237
  });
238
 
239
- // ์ฒซ ๋ฒˆ์งธ ๋น„๋””์˜ค ์ž๋™ ์„ ํƒ
240
  if (videoFiles.length > 0) {
241
  selectedThumb.src = videoFiles[0];
242
  selectedVideo.src = videoFiles[0];
@@ -244,7 +293,6 @@
244
  }
245
  }
246
 
247
- // ๊ฐค๋Ÿฌ๋ฆฌ ์ดˆ๊ธฐํ™”
248
  initializeGallery();
249
  </script>
250
  </body>
 
11
  padding: 0;
12
  }
13
 
14
+ body {
15
+ background-color: #000000;
16
+ color: white;
17
+ }
18
+
19
  .gradient-header {
20
  background: linear-gradient(90deg,
21
  #FF0000, #FF7F00, #FFFF00, #00FF00,
22
  #0000FF, #4B0082, #8B00FF);
23
+ padding: 20px;
24
+ margin-bottom: 30px;
25
  text-align: center;
26
  color: white;
27
  font-size: 24px;
 
29
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
30
  animation: gradient 15s ease infinite;
31
  background-size: 200% 200%;
32
+ border-radius: 0 0 15px 15px;
33
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
34
+ }
35
+
36
+ .gradient-header::before {
37
+ content: '๐ŸŽž๏ธ';
38
+ margin-right: 10px;
39
+ }
40
+
41
+ .gradient-header::after {
42
+ content: '๐ŸŽฌ';
43
+ margin-left: 10px;
44
  }
45
 
46
  @keyframes gradient {
 
77
  margin-bottom: 30px;
78
  gap: 20px;
79
  height: 400px;
80
+ padding: 20px;
81
+ background: linear-gradient(45deg, #1a1a1a, #2c2c2c);
82
+ border-radius: 15px;
83
+ box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
84
+ position: relative;
85
+ }
86
+
87
+ .selected-content::before {
88
+ content: '๐ŸŽฌ';
89
+ position: absolute;
90
+ top: -15px;
91
+ left: 20px;
92
+ font-size: 30px;
93
+ }
94
+
95
+ .selected-content::after {
96
+ content: '๐ŸŽฅ';
97
+ position: absolute;
98
+ top: -15px;
99
+ right: 20px;
100
+ font-size: 30px;
101
  }
102
 
103
+ .selected-thumbnail, .selected-video {
104
  flex: 1;
105
  background-color: #000;
106
+ border: 4px solid #333;
107
+ border-radius: 10px;
108
+ box-shadow:
109
+ 0 0 0 2px #1a1a1a,
110
+ 0 0 10px rgba(255, 255, 255, 0.2),
111
+ inset 0 0 20px rgba(0, 0, 0, 0.8);
112
+ overflow: hidden;
113
  }
114
 
115
  .selected-thumbnail video {
 
118
  object-fit: contain;
119
  }
120
 
 
 
 
 
 
121
  .selected-video video {
122
  width: 100%;
123
  height: 100%;
 
126
 
127
  .gallery {
128
  display: grid;
129
+ grid-template-columns: repeat(8, 1fr);
130
+ gap: 15px;
131
+ padding: 20px;
132
+ background: linear-gradient(45deg, #1a1a1a, #2c2c2c);
133
+ border-radius: 15px;
134
  }
135
 
136
  .thumbnail {
 
139
  cursor: pointer;
140
  overflow: hidden;
141
  background-color: #000;
142
+ border: 3px solid #333;
143
+ border-radius: 8px;
144
+ box-shadow:
145
+ 0 5px 15px rgba(0, 0, 0, 0.5),
146
+ 0 0 0 1px rgba(255, 255, 255, 0.1);
147
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
148
+ }
149
+
150
+ .thumbnail:hover {
151
+ transform: translateY(-5px) scale(1.02);
152
+ box-shadow:
153
+ 0 8px 20px rgba(0, 0, 0, 0.8),
154
+ 0 0 0 1px rgba(255, 255, 255, 0.2);
155
  }
156
 
157
  .thumbnail video {
 
170
  </style>
171
  </head>
172
  <body>
 
173
  <div class="gradient-header">
174
  [Dokdo Theater] Gen: <a href="https://ginigen-Dokdo.hf.space" target="_blank">https://ginigen-Dokdo.hf.space</a>
175
  </div>
 
192
  </div>
193
 
194
  <script>
 
195
  const videoFiles = [
196
  'i0.mp4',
197
  'i1.mp4',
 
286
  gallery.appendChild(thumbnail);
287
  });
288
 
 
289
  if (videoFiles.length > 0) {
290
  selectedThumb.src = videoFiles[0];
291
  selectedVideo.src = videoFiles[0];
 
293
  }
294
  }
295
 
 
296
  initializeGallery();
297
  </script>
298
  </body>