Spaces:
Running
Running
more old school style with the orange yellow vibes along side the green color - Initial Deployment
10ebee8
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TVA Archives - Miss Minutes Edition</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&family=Press+Start+2P&display=swap'); | |
| :root { | |
| --tva-yellow: #ffcc00; | |
| --tva-orange: #ff6600; | |
| --tva-green: #00cc99; | |
| --tva-dark: #001a1a; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--tva-dark); | |
| color: white; | |
| position: relative; | |
| overflow-x: hidden; | |
| } | |
| .press-start { | |
| font-family: 'Press Start 2P', cursive; | |
| } | |
| .tva-card { | |
| background: linear-gradient(145deg, rgba(0,204,153,0.3) 0%, rgba(0,26,26,0.9) 100%); | |
| border: 1px solid var(--tva-green); | |
| box-shadow: 0 0 15px rgba(0, 204, 153, 0.5); | |
| border-radius: 8px; | |
| } | |
| .tva-button { | |
| background: linear-gradient(to right, var(--tva-orange), var(--tva-yellow)); | |
| color: var(--tva-dark); | |
| font-weight: bold; | |
| transition: all 0.3s; | |
| } | |
| .tva-button:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 20px rgba(255, 216, 20, 0.5); | |
| } | |
| .miss-minutes { | |
| position: absolute; | |
| width: 150px; | |
| height: 150px; | |
| background: radial-gradient(circle, var(--tva-yellow) 40%, var(--tva-orange) 100%); | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| box-shadow: 0 0 30px rgba(255, 216, 20, 0.7); | |
| animation: float 6s ease-in-out infinite; | |
| z-index: -1; | |
| } | |
| .miss-minutes::before { | |
| content: ''; | |
| position: absolute; | |
| width: 30px; | |
| height: 30px; | |
| background-color: var(--tva-dark); | |
| border-radius: 50%; | |
| top: 45px; | |
| } | |
| .miss-minutes::after { | |
| content: ''; | |
| position: absolute; | |
| width: 60px; | |
| height: 10px; | |
| background-color: var(--tva-dark); | |
| border-radius: 5px; | |
| bottom: 40px; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .character-image { | |
| transition: all 0.3s ease; | |
| } | |
| .character-image:hover { | |
| transform: scale(1.05) rotate(2deg); | |
| } | |
| .archive-terminal { | |
| background-color: rgba(0, 26, 26, 0.9); | |
| border: 2px solid var(--tva-green); | |
| border-radius: 0; | |
| box-shadow: inset 0 0 15px rgba(0, 204, 153, 0.7); | |
| font-family: 'Courier New', monospace; | |
| color: #00ff99; | |
| position: relative; | |
| border-style: double; | |
| border-width: 4px; | |
| } | |
| .terminal-header { | |
| background: linear-gradient(to right, var(--tva-dark), var(--tva-teal), var(--tva-dark)); | |
| padding: 5px 10px; | |
| font-weight: bold; | |
| } | |
| .timeline-pointer { | |
| position: absolute; | |
| width: 16px; | |
| height: 16px; | |
| background-color: var(--tva-yellow); | |
| border-radius: 50%; | |
| left: -8px; | |
| top: 10px; | |
| box-shadow: 0 0 15px var(--tva-yellow); | |
| border: 2px solid var(--tva-orange); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Floating Miss Minutes elements --> | |
| <div class="miss-minutes" style="top: 10%; left: 5%;"></div> | |
| <div class="miss-minutes" style="top: 70%; left: 90%; width: 80px; height: 80px;"></div> | |
| <div class="miss-minutes" style="top: 30%; left: 85%; width: 120px; height: 120px;"></div> | |
| <div class="container mx-auto px-4 py-8 relative z-10"> | |
| <header class="flex flex-col items-center mb-12"> | |
| <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);"> | |
| TVA ARCHIVES | |
| </h1> | |
| <p class="text-xl text-center text-teal-300 mb-6">CLASSIFIED INFORMATION • TEMPORAL CRIMES DIVISION</p> | |
| <div class="archive-terminal w-full max-w-3xl"> | |
| <div class="terminal-header">Miss Minutes Interface v1.0.7</div> | |
| <div class="p-4"> | |
| <p class="mb-2">> Loading Temporal Variance Authority Database...</p> | |
| <p class="mb-2">> Access Granted. Welcome, Analyst.</p> | |
| <p>> Today's Date: <span id="current-date" class="text-yellow-300"></span></p> | |
| </div> | |
| </div> | |
| </header> | |
| <main> | |
| <section class="mb-16"> | |
| <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> | |
| <div id="character-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12"> | |
| <!-- Characters will be loaded here by JavaScript --> | |
| </div> | |
| <div class="flex justify-center space-x-4" id="pagination"> | |
| <!-- Pagination will be loaded here by JavaScript --> | |
| </div> | |
| </section> | |
| <section class="mb-16"> | |
| <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> | |
| <div class="relative max-w-4xl mx-auto"> | |
| <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> | |
| <div class="mb-12 pl-8 relative"> | |
| <div class="timeline-pointer"></div> | |
| <div class="tva-card p-6 rounded-lg"> | |
| <h3 class="text-2xl font-bold text-yellow-300 mb-2">He Who Remains Identified</h3> | |
| <p class="mb-2">Primary variant of Kang the Conqueror responsible for establishing the Time Variance Authority and maintaining the Sacred Timeline.</p> | |
| <p class="text-xs text-gray-400">Location: Citadel at the End of Time (classified)</p> | |
| </div> | |
| </div> | |
| <div class="mb-12 pl-8 relative"> | |
| <div class="timeline-pointer"></div> | |
| <div class="tva-card p-6 rounded-lg"> | |
| <h3 class="text-2xl font-bold text-yellow-300 mb-2">Loki Variant L1130</h3> | |
| <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> | |
| <p class="text-xs text-gray-400">Location: TVA Headquarters (variable)</p> | |
| </div> | |
| </div> | |
| <div class="mb-12 pl-8 relative"> | |
| <div class="timeline-pointer"></div> | |
| <div class="tva-card p-6 rounded-lg"> | |
| <h3 class="text-2xl font-bold text-yellow-300 mb-2">Miss Minutes Update</h3> | |
| <p class="mb-2">UI avatar system upgraded to version 1.0.7 with enhanced temporal awareness and predictive algorithms for Nexus Events.</p> | |
| <p class="text-xs text-gray-400">Location: All TVA Interfaces (pervasive)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <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);"> | |
| <p class="press-start text-sm">THE TIME VARIANCE AUTHORITY</p> | |
| <p class="text-xs mt-2">All rights reserved across the multiverse</p> | |
| <p class="text-xs mt-1">© 2023 TVA Temporal Database</p> | |
| </footer> | |
| <script> | |
| // Set current date in terminal | |
| const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' }; | |
| document.getElementById('current-date').textContent = new Date().toLocaleDateString('en-US', options); | |
| // Character data | |
| const characters = [ | |
| { | |
| id: 1, | |
| name: "Loki L1130", | |
| image: "https://static.wikia.nocookie.net/marvelcinematicuniverse/images/5/52/Loki_%28TVA%29.png", | |
| status: "Active Asset", | |
| 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.", | |
| quote: "I am Loki of Asgard, and I am burdened with glorious purpose.", | |
| variants: ["Alligator Loki", "Kid Loki", "Boastful Loki", "Classic Loki"] | |
| }, | |
| { | |
| id: 2, | |
| name: "Mobius M. Mobius", | |
| image: "https://static.wikia.nocookie.net/marvelcinematicuniverse/images/e/ef/Mobius_TVA.png", | |
| status: "Senior Analyst", | |
| 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.", | |
| quote: "You can't trust, and I can't be trusted. That's why my life is so fun!", | |
| variants: ["None recorded"] | |
| }, | |
| { | |
| id: 3, | |
| name: "Miss Minutes", | |
| image: "https://static.wikia.nocookie.net/marvelcinematicuniverse/images/b/bf/Miss_Minutes.png", | |
| status: "AI Interface", | |
| fact: "Voiced by Tara Strong, Miss Minutes was designed as a friendly digital assistant but contains highly sophisticated programming capable of independent thought.", | |
| quote: "Hi there! I'm Miss Minutes, and it's my job to catch you up before you get started.", | |
| variants: ["None recorded"] | |
| }, | |
| { | |
| id: 4, | |
| name: "Sylvie Laufeydottir", | |
| image: "https://static.wikia.nocookie.net/marvelcinematicuniverse/images/f/f1/Sylvie_Loki.png", | |
| status: "Wanted", | |
| 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.", | |
| quote: "I'm not Loki. I'm Sylvie.", | |
| variants: ["Loki (all variants)"] | |
| }, | |
| { | |
| id: 5, | |
| name: "Ravonna Renslayer", | |
| image: "https://static.wikia.nocookie.net/marvelcinematicuniverse/images/a/a9/Ravonna_Renslayer.png", | |
| status: "Missing", | |
| fact: "Former TVA judge who worked closely with He Who Remains. Her memories were erased multiple times to maintain the Sacred Timeline.", | |
| quote: "The Time-Keepers have seen all, they know all.", | |
| variants: ["None recorded"] | |
| }, | |
| { | |
| id: 6, | |
| name: "He Who Remains", | |
| image: "https://static.wikia.nocookie.net/marvelcinematicuniverse/images/f/fb/He_Who_Remains.png", | |
| status: "Deceased", | |
| 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.", | |
| quote: "See you soon.", | |
| variants: ["Kang the Conqueror", "Immortus", "Rama-Tut", "Victor Timely"] | |
| }, | |
| { | |
| id: 7, | |
| name: "Hunter B-15", | |
| image: "https://static.wikia.nocookie.net/marvelcinematicuniverse/images/1/10/Hunter_B-15.png", | |
| status: "Co-Leader", | |
| fact: "A high-ranking TVA hunter who regained her memories and helped overthrow the organization's leadership. Formerly a pediatrician in her original timeline.", | |
| quote: "I don't know who I was before the TVA, but I know who I am now.", | |
| variants: ["None recorded"] | |
| }, | |
| { | |
| id: 8, | |
| name: "Casey", | |
| image: "https://static.wikia.nocookie.net/marvelcinematicuniverse/images/d/d6/Casey.png", | |
| status: "Clerk", | |
| 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.", | |
| quote: "Do you have a return ticket for this reset charge?", | |
| variants: ["None recorded"] | |
| }, | |
| { | |
| id: 9, | |
| name: "Classic Loki", | |
| image: "https://static.wikia.nocookie.net/marvelcinematicuniverse/images/e/e1/Classic_Loki.png", | |
| status: "Deceased (pruned)", | |
| 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.", | |
| quote: "I cast a projection so real, so tangible, that even Thanos believed it.", | |
| variants: ["All Loki variants"] | |
| } | |
| ]; | |
| // Pagination variables | |
| const itemsPerPage = 3; | |
| let currentPage = 1; | |
| // Display characters function with pagination | |
| function displayCharacters(page) { | |
| const characterContainer = document.getElementById('character-container'); | |
| characterContainer.innerHTML = ''; | |
| const startIndex = (page - 1) * itemsPerPage; | |
| const endIndex = Math.min(startIndex + itemsPerPage, characters.length); | |
| const pageCharacters = characters.slice(startIndex, endIndex); | |
| pageCharacters.forEach(character => { | |
| const characterElement = document.createElement('div'); | |
| characterElement.className = 'tva-card p-6 rounded-lg transition-all hover:shadow-lg hover:shadow-cyan-500/20'; | |
| characterElement.innerHTML = ` | |
| <div class="flex flex-col h-full"> | |
| <div class="flex justify-center mb-4"> | |
| <img src="${character.image}" alt="${character.name}" class="character-image w-36 h-36 object-cover rounded-full border-2 border-yellow-300"> | |
| </div> | |
| <h3 class="text-2xl font-bold text-center text-yellow-300 mb-2">${character.name}</h3> | |
| <p class="text-center text-orange-300 mb-2">${character.status}</p> | |
| <p class="text-sm mb-4 flex-grow">${character.fact}</p> | |
| <div class="text-xs bg-tva-dark p-3 rounded mb-3"> | |
| <p class="font-bold text-yellow-200 mb-1">KNOWN QUOTE:</p> | |
| <p class="italic">"${character.quote}"</p> | |
| </div> | |
| <div class="text-xs bg-tva-dark p-3 rounded"> | |
| <p class="font-bold text-teal-200 mb-1">KNOWN VARIANTS:</p> | |
| <p>${character.variants.join(", ")}</p> | |
| </div> | |
| </div> | |
| `; | |
| characterContainer.appendChild(characterElement); | |
| }); | |
| updatePagination(); | |
| } | |
| // Update pagination buttons | |
| function updatePagination() { | |
| const totalPages = Math.ceil(characters.length / itemsPerPage); | |
| const paginationContainer = document.getElementById('pagination'); | |
| paginationContainer.innerHTML = ''; | |
| // Previous button | |
| if (currentPage > 1) { | |
| const prevButton = document.createElement('button'); | |
| prevButton.className = 'tva-button px-4 py-2 rounded-lg'; | |
| prevButton.textContent = 'Previous'; | |
| prevButton.addEventListener('click', () => { | |
| currentPage--; | |
| displayCharacters(currentPage); | |
| }); | |
| paginationContainer.appendChild(prevButton); | |
| } | |
| // Page numbers | |
| for (let i = 1; i <= totalPages; i++) { | |
| const pageButton = document.createElement('button'); | |
| 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'}`; | |
| pageButton.textContent = i; | |
| pageButton.addEventListener('click', () => { | |
| currentPage = i; | |
| displayCharacters(currentPage); | |
| }); | |
| paginationContainer.appendChild(pageButton); | |
| } | |
| // Next button | |
| if (currentPage < totalPages) { | |
| const nextButton = document.createElement('button'); | |
| nextButton.className = 'tva-button px-4 py-2 rounded-lg'; | |
| nextButton.textContent = 'Next'; | |
| nextButton.addEventListener('click', () => { | |
| currentPage++; | |
| displayCharacters(currentPage); | |
| }); | |
| paginationContainer.appendChild(nextButton); | |
| } | |
| } | |
| // Initial display | |
| displayCharacters(currentPage); | |
| // Terminal-like blinking cursor effect | |
| const terminalText = document.querySelector('.archive-terminal p:last-child'); | |
| let cursorVisible = true; | |
| setInterval(() => { | |
| if (terminalText.textContent.endsWith('_')) { | |
| terminalText.textContent = terminalText.textContent.slice(0, -1); | |
| } else { | |
| terminalText.textContent += '_'; | |
| } | |
| cursorVisible = !cursorVisible; | |
| }, 500); | |
| </script> | |
| <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> | |
| </html> |