Hugging Face's logo

Spaces:
DebadityaMalakar
/
tva-archives
Running

App Files Community
DebadityaMalakar commited on
Commit
10ebee8
·
verified ·
1 Parent(s): 893283f

more old school style with the orange yellow vibes along side the green color - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +396 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tva Archives
3
- emoji: 🏃
4
- colorFrom: green
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: tva-archives
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,396 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TVA Archives - Miss Minutes Edition</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&family=Press+Start+2P&display=swap');
10
+
11
+ :root {
12
+ --tva-yellow: #ffcc00;
13
+ --tva-orange: #ff6600;
14
+ --tva-green: #00cc99;
15
+ --tva-dark: #001a1a;
16
+ }
17
+
18
+ body {
19
+ font-family: 'Inter', sans-serif;
20
+ background-color: var(--tva-dark);
21
+ color: white;
22
+ position: relative;
23
+ overflow-x: hidden;
24
+ }
25
+
26
+ .press-start {
27
+ font-family: 'Press Start 2P', cursive;
28
+ }
29
+
30
+ .tva-card {
31
+ background: linear-gradient(145deg, rgba(0,204,153,0.3) 0%, rgba(0,26,26,0.9) 100%);
32
+ border: 1px solid var(--tva-green);
33
+ box-shadow: 0 0 15px rgba(0, 204, 153, 0.5);
34
+ border-radius: 8px;
35
+ }
36
+
37
+ .tva-button {
38
+ background: linear-gradient(to right, var(--tva-orange), var(--tva-yellow));
39
+ color: var(--tva-dark);
40
+ font-weight: bold;
41
+ transition: all 0.3s;
42
+ }
43
+
44
+ .tva-button:hover {
45
+ transform: scale(1.05);
46
+ box-shadow: 0 0 20px rgba(255, 216, 20, 0.5);
47
+ }
48
+
49
+ .miss-minutes {
50
+ position: absolute;
51
+ width: 150px;
52
+ height: 150px;
53
+ background: radial-gradient(circle, var(--tva-yellow) 40%, var(--tva-orange) 100%);
54
+ border-radius: 50%;
55
+ display: flex;
56
+ justify-content: center;
57
+ align-items: center;
58
+ box-shadow: 0 0 30px rgba(255, 216, 20, 0.7);
59
+ animation: float 6s ease-in-out infinite;
60
+ z-index: -1;
61
+ }
62
+
63
+ .miss-minutes::before {
64
+ content: '';
65
+ position: absolute;
66
+ width: 30px;
67
+ height: 30px;
68
+ background-color: var(--tva-dark);
69
+ border-radius: 50%;
70
+ top: 45px;
71
+ }
72
+
73
+ .miss-minutes::after {
74
+ content: '';
75
+ position: absolute;
76
+ width: 60px;
77
+ height: 10px;
78
+ background-color: var(--tva-dark);
79
+ border-radius: 5px;
80
+ bottom: 40px;
81
+ }
82
+
83
+ @keyframes float {
84
+ 0% { transform: translateY(0px); }
85
+ 50% { transform: translateY(-20px); }
86
+ 100% { transform: translateY(0px); }
87
+ }
88
+
89
+ .character-image {
90
+ transition: all 0.3s ease;
91
+ }
92
+
93
+ .character-image:hover {
94
+ transform: scale(1.05) rotate(2deg);
95
+ }
96
+
97
+ .archive-terminal {
98
+ background-color: rgba(0, 26, 26, 0.9);
99
+ border: 2px solid var(--tva-green);
100
+ border-radius: 0;
101
+ box-shadow: inset 0 0 15px rgba(0, 204, 153, 0.7);
102
+ font-family: 'Courier New', monospace;
103
+ color: #00ff99;
104
+ position: relative;
105
+ border-style: double;
106
+ border-width: 4px;
107
+ }
108
+
109
+ .terminal-header {
110
+ background: linear-gradient(to right, var(--tva-dark), var(--tva-teal), var(--tva-dark));
111
+ padding: 5px 10px;
112
+ font-weight: bold;
113
+ }
114
+
115
+ .timeline-pointer {
116
+ position: absolute;
117
+ width: 16px;
118
+ height: 16px;
119
+ background-color: var(--tva-yellow);
120
+ border-radius: 50%;
121
+ left: -8px;
122
+ top: 10px;
123
+ box-shadow: 0 0 15px var(--tva-yellow);
124
+ border: 2px solid var(--tva-orange);
125
+ }
126
+ </style>
127
+ </head>
128
+ <body>
129
+ <!-- Floating Miss Minutes elements -->
130
+ <div class="miss-minutes" style="top: 10%; left: 5%;"></div>
131
+ <div class="miss-minutes" style="top: 70%; left: 90%; width: 80px; height: 80px;"></div>
132
+ <div class="miss-minutes" style="top: 30%; left: 85%; width: 120px; height: 120px;"></div>
133
+
134
+ <div class="container mx-auto px-4 py-8 relative z-10">
135
+ <header class="flex flex-col items-center mb-12">
136
+ <h1 class="text-5xl md:text-7xl font-bold text-center mb-2 press-start" style="background: linear-gradient(to right, var(--tva-yellow), var(--tva-orange), var(--tva-yellow)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 10px rgba(255,204,0,0.5);">
137
+ TVA ARCHIVES
138
+ </h1>
139
+ <p class="text-xl text-center text-teal-300 mb-6">CLASSIFIED INFORMATION • TEMPORAL CRIMES DIVISION</p>
140
+ <div class="archive-terminal w-full max-w-3xl">
141
+ <div class="terminal-header">Miss Minutes Interface v1.0.7</div>
142
+ <div class="p-4">
143
+ <p class="mb-2">> Loading Temporal Variance Authority Database...</p>
144
+ <p class="mb-2">> Access Granted. Welcome, Analyst.</p>
145
+ <p>> Today's Date: <span id="current-date" class="text-yellow-300"></span></p>
146
+ </div>
147
+ </div>
148
+ </header>
149
+
150
+ <main>
151
+ <section class="mb-16">
152
+ <h2 class="text-3xl md:text-4xl font-bold mb-8 text-yellow-300 text-center border-b border-teal-400 pb-2">CHARACTER DOSSIERS</h2>
153
+
154
+ <div id="character-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
155
+ <!-- Characters will be loaded here by JavaScript -->
156
+ </div>
157
+
158
+ <div class="flex justify-center space-x-4" id="pagination">
159
+ <!-- Pagination will be loaded here by JavaScript -->
160
+ </div>
161
+ </section>
162
+
163
+ <section class="mb-16">
164
+ <h2 class="text-3xl md:text-4xl font-bold mb-8 text-yellow-300 text-center border-b border-teal-400 pb-2">TIMELINE ALERTS</h2>
165
+
166
+ <div class="relative max-w-4xl mx-auto">
167
+ <div class="absolute left-0 top-0 h-full w-2 bg-green-400" style="background: linear-gradient(to bottom, transparent, var(--tva-green), var(--tva-yellow), var(--tva-green), transparent);"></div>
168
+
169
+ <div class="mb-12 pl-8 relative">
170
+ <div class="timeline-pointer"></div>
171
+ <div class="tva-card p-6 rounded-lg">
172
+ <h3 class="text-2xl font-bold text-yellow-300 mb-2">He Who Remains Identified</h3>
173
+ <p class="mb-2">Primary variant of Kang the Conqueror responsible for establishing the Time Variance Authority and maintaining the Sacred Timeline.</p>
174
+ <p class="text-xs text-gray-400">Location: Citadel at the End of Time (classified)</p>
175
+ </div>
176
+ </div>
177
+
178
+ <div class="mb-12 pl-8 relative">
179
+ <div class="timeline-pointer"></div>
180
+ <div class="tva-card p-6 rounded-lg">
181
+ <h3 class="text-2xl font-bold text-yellow-300 mb-2">Loki Variant L1130</h3>
182
+ <p class="mb-2">Variant designation assigned to subject after Nexus Event in 2012 New York timeline. Current status: assisting TVA in restructuring after multiversal war.</p>
183
+ <p class="text-xs text-gray-400">Location: TVA Headquarters (variable)</p>
184
+ </div>
185
+ </div>
186
+
187
+ <div class="mb-12 pl-8 relative">
188
+ <div class="timeline-pointer"></div>
189
+ <div class="tva-card p-6 rounded-lg">
190
+ <h3 class="text-2xl font-bold text-yellow-300 mb-2">Miss Minutes Update</h3>
191
+ <p class="mb-2">UI avatar system upgraded to version 1.0.7 with enhanced temporal awareness and predictive algorithms for Nexus Events.</p>
192
+ <p class="text-xs text-gray-400">Location: All TVA Interfaces (pervasive)</p>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </section>
197
+ </main>
198
+ </div>
199
+
200
+ <footer class="py-6 text-center text-green-300 border-t-4 border-yellow-300 bg-tva-dark mt-12" style="box-shadow: 0 -5px 15px rgba(0,204,153,0.3);">
201
+ <p class="press-start text-sm">THE TIME VARIANCE AUTHORITY</p>
202
+ <p class="text-xs mt-2">All rights reserved across the multiverse</p>
203
+ <p class="text-xs mt-1">© 2023 TVA Temporal Database</p>
204
+ </footer>
205
+
206
+ <script>
207
+ // Set current date in terminal
208
+ const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' };
209
+ document.getElementById('current-date').textContent = new Date().toLocaleDateString('en-US', options);
210
+
211
+ // Character data
212
+ const characters = [
213
+ {
214
+ id: 1,
215
+ name: "Loki L1130",
216
+ image: "https://static.wikia.nocookie.net/marvelcinematicuniverse/images/5/52/Loki_%28TVA%29.png",
217
+ status: "Active Asset",
218
+ fact: "This Loki variant was taken from the 2012 timeline during the Avengers' time heist. After being pruned, he landed in the Void where he encountered other Loki variants.",
219
+ quote: "I am Loki of Asgard, and I am burdened with glorious purpose.",
220
+ variants: ["Alligator Loki", "Kid Loki", "Boastful Loki", "Classic Loki"]
221
+ },
222
+ {
223
+ id: 2,
224
+ name: "Mobius M. Mobius",
225
+ image: "https://static.wikia.nocookie.net/marvelcinematicuniverse/images/e/ef/Mobius_TVA.png",
226
+ status: "Senior Analyst",
227
+ fact: "Mobius has an obsession with jet skis, which were removed from his original timeline. He's the TVA's top expert on Loki variants.",
228
+ quote: "You can't trust, and I can't be trusted. That's why my life is so fun!",
229
+ variants: ["None recorded"]
230
+ },
231
+ {
232
+ id: 3,
233
+ name: "Miss Minutes",
234
+ image: "https://static.wikia.nocookie.net/marvelcinematicuniverse/images/b/bf/Miss_Minutes.png",
235
+ status: "AI Interface",
236
+ fact: "Voiced by Tara Strong, Miss Minutes was designed as a friendly digital assistant but contains highly sophisticated programming capable of independent thought.",
237
+ quote: "Hi there! I'm Miss Minutes, and it's my job to catch you up before you get started.",
238
+ variants: ["None recorded"]
239
+ },
240
+ {
241
+ id: 4,
242
+ name: "Sylvie Laufeydottir",
243
+ image: "https://static.wikia.nocookie.net/marvelcinematicuniverse/images/f/f1/Sylvie_Loki.png",
244
+ status: "Wanted",
245
+ fact: "Born as a Loki variant, she was taken by the TVA as a child but escaped. She's been hiding in apocalypses where her actions don't create Nexus events.",
246
+ quote: "I'm not Loki. I'm Sylvie.",
247
+ variants: ["Loki (all variants)"]
248
+ },
249
+ {
250
+ id: 5,
251
+ name: "Ravonna Renslayer",
252
+ image: "https://static.wikia.nocookie.net/marvelcinematicuniverse/images/a/a9/Ravonna_Renslayer.png",
253
+ status: "Missing",
254
+ fact: "Former TVA judge who worked closely with He Who Remains. Her memories were erased multiple times to maintain the Sacred Timeline.",
255
+ quote: "The Time-Keepers have seen all, they know all.",
256
+ variants: ["None recorded"]
257
+ },
258
+ {
259
+ id: 6,
260
+ name: "He Who Remains",
261
+ image: "https://static.wikia.nocookie.net/marvelcinematicuniverse/images/f/fb/He_Who_Remains.png",
262
+ status: "Deceased",
263
+ fact: "The original variant of Kang who created the TVA to prevent a multiversal war with his other variants. Orchestrated the entire Loki/Sylvie timeline.",
264
+ quote: "See you soon.",
265
+ variants: ["Kang the Conqueror", "Immortus", "Rama-Tut", "Victor Timely"]
266
+ },
267
+ {
268
+ id: 7,
269
+ name: "Hunter B-15",
270
+ image: "https://static.wikia.nocookie.net/marvelcinematicuniverse/images/1/10/Hunter_B-15.png",
271
+ status: "Co-Leader",
272
+ fact: "A high-ranking TVA hunter who regained her memories and helped overthrow the organization's leadership. Formerly a pediatrician in her original timeline.",
273
+ quote: "I don't know who I was before the TVA, but I know who I am now.",
274
+ variants: ["None recorded"]
275
+ },
276
+ {
277
+ id: 8,
278
+ name: "Casey",
279
+ image: "https://static.wikia.nocookie.net/marvelcinematicuniverse/images/d/d6/Casey.png",
280
+ status: "Clerk",
281
+ fact: "TVA receptionist who didn't recognize a crocodile when he saw one. May have been a forgotten remnant of one of Kang's older TVA iterations.",
282
+ quote: "Do you have a return ticket for this reset charge?",
283
+ variants: ["None recorded"]
284
+ },
285
+ {
286
+ id: 9,
287
+ name: "Classic Loki",
288
+ image: "https://static.wikia.nocookie.net/marvelcinematicuniverse/images/e/e1/Classic_Loki.png",
289
+ status: "Deceased (pruned)",
290
+ fact: "An older Loki variant who survived Thanos by using an illusion of his death. Lived in solitude until creating a Nexus event by missing his brother.",
291
+ quote: "I cast a projection so real, so tangible, that even Thanos believed it.",
292
+ variants: ["All Loki variants"]
293
+ }
294
+ ];
295
+
296
+ // Pagination variables
297
+ const itemsPerPage = 3;
298
+ let currentPage = 1;
299
+
300
+ // Display characters function with pagination
301
+ function displayCharacters(page) {
302
+ const characterContainer = document.getElementById('character-container');
303
+ characterContainer.innerHTML = '';
304
+
305
+ const startIndex = (page - 1) * itemsPerPage;
306
+ const endIndex = Math.min(startIndex + itemsPerPage, characters.length);
307
+ const pageCharacters = characters.slice(startIndex, endIndex);
308
+
309
+ pageCharacters.forEach(character => {
310
+ const characterElement = document.createElement('div');
311
+ characterElement.className = 'tva-card p-6 rounded-lg transition-all hover:shadow-lg hover:shadow-cyan-500/20';
312
+ characterElement.innerHTML = `
313
+ <div class="flex flex-col h-full">
314
+ <div class="flex justify-center mb-4">
315
+ <img src="${character.image}" alt="${character.name}" class="character-image w-36 h-36 object-cover rounded-full border-2 border-yellow-300">
316
+ </div>
317
+ <h3 class="text-2xl font-bold text-center text-yellow-300 mb-2">${character.name}</h3>
318
+ <p class="text-center text-orange-300 mb-2">${character.status}</p>
319
+ <p class="text-sm mb-4 flex-grow">${character.fact}</p>
320
+ <div class="text-xs bg-tva-dark p-3 rounded mb-3">
321
+ <p class="font-bold text-yellow-200 mb-1">KNOWN QUOTE:</p>
322
+ <p class="italic">"${character.quote}"</p>
323
+ </div>
324
+ <div class="text-xs bg-tva-dark p-3 rounded">
325
+ <p class="font-bold text-teal-200 mb-1">KNOWN VARIANTS:</p>
326
+ <p>${character.variants.join(", ")}</p>
327
+ </div>
328
+ </div>
329
+ `;
330
+ characterContainer.appendChild(characterElement);
331
+ });
332
+
333
+ updatePagination();
334
+ }
335
+
336
+ // Update pagination buttons
337
+ function updatePagination() {
338
+ const totalPages = Math.ceil(characters.length / itemsPerPage);
339
+ const paginationContainer = document.getElementById('pagination');
340
+ paginationContainer.innerHTML = '';
341
+
342
+ // Previous button
343
+ if (currentPage > 1) {
344
+ const prevButton = document.createElement('button');
345
+ prevButton.className = 'tva-button px-4 py-2 rounded-lg';
346
+ prevButton.textContent = 'Previous';
347
+ prevButton.addEventListener('click', () => {
348
+ currentPage--;
349
+ displayCharacters(currentPage);
350
+ });
351
+ paginationContainer.appendChild(prevButton);
352
+ }
353
+
354
+ // Page numbers
355
+ for (let i = 1; i <= totalPages; i++) {
356
+ const pageButton = document.createElement('button');
357
+ pageButton.className = `px-4 py-2 rounded-lg mx-1 ${currentPage === i ? 'bg-yellow-300 text-tva-dark font-bold' : 'bg-tva-dark text-white border border-teal-400'}`;
358
+ pageButton.textContent = i;
359
+ pageButton.addEventListener('click', () => {
360
+ currentPage = i;
361
+ displayCharacters(currentPage);
362
+ });
363
+ paginationContainer.appendChild(pageButton);
364
+ }
365
+
366
+ // Next button
367
+ if (currentPage < totalPages) {
368
+ const nextButton = document.createElement('button');
369
+ nextButton.className = 'tva-button px-4 py-2 rounded-lg';
370
+ nextButton.textContent = 'Next';
371
+ nextButton.addEventListener('click', () => {
372
+ currentPage++;
373
+ displayCharacters(currentPage);
374
+ });
375
+ paginationContainer.appendChild(nextButton);
376
+ }
377
+ }
378
+
379
+ // Initial display
380
+ displayCharacters(currentPage);
381
+
382
+ // Terminal-like blinking cursor effect
383
+ const terminalText = document.querySelector('.archive-terminal p:last-child');
384
+ let cursorVisible = true;
385
+
386
+ setInterval(() => {
387
+ if (terminalText.textContent.endsWith('_')) {
388
+ terminalText.textContent = terminalText.textContent.slice(0, -1);
389
+ } else {
390
+ terminalText.textContent += '_';
391
+ }
392
+ cursorVisible = !cursorVisible;
393
+ }, 500);
394
+ </script>
395
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=DebadityaMalakar/tva-archives" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
396
+ </html>