Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NeonMail 2035</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto+Mono:wght@300;400;500&display=swap'); | |
| :root { | |
| --neon-pink: #ff2a6d; | |
| --neon-blue: #05d9e8; | |
| --neon-purple: #d300c5; | |
| --neon-green: #00ff9d; | |
| --neon-yellow: #f9f002; | |
| --dark-bg: #0d0221; | |
| } | |
| body { | |
| font-family: 'Roboto Mono', monospace; | |
| background-color: var(--dark-bg); | |
| color: white; | |
| overflow-x: hidden; | |
| } | |
| .title-font { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .neon-text-pink { | |
| color: var(--neon-pink); | |
| text-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink); | |
| } | |
| .neon-text-blue { | |
| color: var(--neon-blue); | |
| text-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue); | |
| } | |
| .neon-text-purple { | |
| color: var(--neon-purple); | |
| text-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple); | |
| } | |
| .neon-border-pink { | |
| border-color: var(--neon-pink); | |
| box-shadow: 0 0 10px var(--neon-pink), inset 0 0 10px var(--neon-pink); | |
| } | |
| .neon-border-blue { | |
| border-color: var(--neon-blue); | |
| box-shadow: 0 0 10px var(--neon-blue), inset 0 0 10px var(--neon-blue); | |
| } | |
| .neon-border-purple { | |
| border-color: var(--neon-purple); | |
| box-shadow: 0 0 10px var(--neon-purple), inset 0 0 10px var(--neon-purple); | |
| } | |
| .neon-border-green { | |
| border-color: var(--neon-green); | |
| box-shadow: 0 0 10px var(--neon-green), inset 0 0 10px var(--neon-green); | |
| } | |
| .neon-border-yellow { | |
| border-color: var(--neon-yellow); | |
| box-shadow: 0 0 10px var(--neon-yellow), inset 0 0 10px var(--neon-yellow); | |
| } | |
| .neon-bg-pink { | |
| background-color: rgba(255, 42, 109, 0.1); | |
| box-shadow: 0 0 15px rgba(255, 42, 109, 0.5); | |
| } | |
| .neon-bg-blue { | |
| background-color: rgba(5, 217, 232, 0.1); | |
| box-shadow: 0 0 15px rgba(5, 217, 232, 0.5); | |
| } | |
| .neon-bg-purple { | |
| background-color: rgba(211, 0, 197, 0.1); | |
| box-shadow: 0 0 15px rgba(211, 0, 197, 0.5); | |
| } | |
| .neon-bg-green { | |
| background-color: rgba(0, 255, 157, 0.1); | |
| box-shadow: 0 0 15px rgba(0, 255, 157, 0.5); | |
| } | |
| .neon-bg-yellow { | |
| background-color: rgba(249, 240, 2, 0.1); | |
| box-shadow: 0 0 15px rgba(249, 240, 2, 0.5); | |
| } | |
| .glow-on-hover:hover { | |
| filter: brightness(1.2); | |
| transform: scale(1.02); | |
| transition: all 0.3s ease; | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.7; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.7; } | |
| } | |
| .scanline { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .scanline::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(to bottom, transparent, var(--neon-blue), transparent); | |
| animation: scan 8s linear infinite; | |
| } | |
| @keyframes scan { | |
| 0% { top: -100%; } | |
| 100% { top: 100%; } | |
| } | |
| .message-preview { | |
| border-left: 3px solid transparent; | |
| transition: all 0.3s ease; | |
| } | |
| .message-preview:hover { | |
| border-left-color: var(--neon-green); | |
| background-color: rgba(0, 255, 157, 0.05); | |
| } | |
| .message-preview.unread { | |
| border-left-color: var(--neon-pink); | |
| } | |
| .message-preview.important { | |
| border-left-color: var(--neon-yellow); | |
| } | |
| .message-preview.flagged { | |
| border-left-color: var(--neon-purple); | |
| } | |
| .neon-input { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border: 1px solid var(--neon-blue); | |
| color: white; | |
| transition: all 0.3s ease; | |
| } | |
| .neon-input:focus { | |
| outline: none; | |
| border-color: var(--neon-green); | |
| box-shadow: 0 0 10px var(--neon-green); | |
| } | |
| .neon-button { | |
| transition: all 0.3s ease; | |
| border: 1px solid; | |
| } | |
| .neon-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(0, 255, 157, 0.4); | |
| } | |
| .neon-button-pink { | |
| border-color: var(--neon-pink); | |
| color: var(--neon-pink); | |
| } | |
| .neon-button-pink:hover { | |
| background-color: rgba(255, 42, 109, 0.2); | |
| } | |
| .neon-button-blue { | |
| border-color: var(--neon-blue); | |
| color: var(--neon-blue); | |
| } | |
| .neon-button-blue:hover { | |
| background-color: rgba(5, 217, 232, 0.2); | |
| } | |
| .neon-button-green { | |
| border-color: var(--neon-green); | |
| color: var(--neon-green); | |
| } | |
| .neon-button-green:hover { | |
| background-color: rgba(0, 255, 157, 0.2); | |
| } | |
| .neon-tab { | |
| border-bottom: 3px solid transparent; | |
| transition: all 0.3s ease; | |
| } | |
| .neon-tab:hover, .neon-tab.active { | |
| border-bottom-color: var(--neon-blue); | |
| color: var(--neon-blue); | |
| } | |
| .notification-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background-color: var(--neon-pink); | |
| box-shadow: 0 0 5px var(--neon-pink); | |
| animation: pulse 1.5s infinite; | |
| } | |
| .avatar-ring { | |
| border: 2px solid var(--neon-blue); | |
| box-shadow: 0 0 10px var(--neon-blue); | |
| } | |
| .sidebar-item { | |
| transition: all 0.3s ease; | |
| border-left: 3px solid transparent; | |
| } | |
| .sidebar-item:hover, .sidebar-item.active { | |
| border-left-color: var(--neon-purple); | |
| background-color: rgba(211, 0, 197, 0.1); | |
| } | |
| .sidebar-item .icon { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar-item:hover .icon, .sidebar-item.active .icon { | |
| transform: scale(1.2); | |
| color: var(--neon-purple); | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .scrollbar-hide { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col"> | |
| <!-- Top Navigation Bar --> | |
| <header class="bg-black bg-opacity-50 backdrop-blur-md border-b border-gray-800 neon-border-blue p-4"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="neon-text-pink title-font text-2xl flex items-center"> | |
| <i class="fas fa-envelope mr-2"></i> | |
| <span>NeonMail</span> | |
| <span class="text-xs neon-text-blue ml-1">2035</span> | |
| </div> | |
| <div class="relative hidden md:block"> | |
| <input type="text" placeholder="Search across the multiverse..." | |
| class="neon-input px-4 py-2 rounded-full w-64 focus:w-80 transition-all duration-300"> | |
| <i class="fas fa-search neon-text-blue absolute right-3 top-2.5"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-6"> | |
| <button class="neon-button neon-button-blue px-4 py-2 rounded-full flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> | |
| <span>New Message</span> | |
| </button> | |
| <div class="relative"> | |
| <div class="avatar-ring w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center cursor-pointer"> | |
| <i class="fas fa-user neon-text-blue"></i> | |
| </div> | |
| <div class="notification-dot absolute top-0 right-0"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Sidebar --> | |
| <aside class="w-16 md:w-64 bg-black bg-opacity-30 border-r border-gray-800 neon-border-purple flex flex-col"> | |
| <div class="p-4 flex flex-col space-y-6"> | |
| <div class="sidebar-item active p-3 rounded-lg flex items-center cursor-pointer"> | |
| <i class="fas fa-inbox icon neon-text-pink text-xl md:mr-3"></i> | |
| <span class="hidden md:block neon-text-pink">Inbox</span> | |
| <span class="hidden md:block ml-auto neon-text-blue">1.2k</span> | |
| </div> | |
| <div class="sidebar-item p-3 rounded-lg flex items-center cursor-pointer"> | |
| <i class="fas fa-star icon neon-text-yellow text-xl md:mr-3"></i> | |
| <span class="hidden md:block">Starred</span> | |
| <span class="hidden md:block ml-auto text-gray-400">42</span> | |
| </div> | |
| <div class="sidebar-item p-3 rounded-lg flex items-center cursor-pointer"> | |
| <i class="fas fa-paper-plane icon neon-text-blue text-xl md:mr-3"></i> | |
| <span class="hidden md:block">Sent</span> | |
| </div> | |
| <div class="sidebar-item p-3 rounded-lg flex items-center cursor-pointer"> | |
| <i class="fas fa-file-alt icon neon-text-green text-xl md:mr-3"></i> | |
| <span class="hidden md:block">Drafts</span> | |
| <span class="hidden md:block ml-auto text-gray-400">12</span> | |
| </div> | |
| <div class="sidebar-item p-3 rounded-lg flex items-center cursor-pointer"> | |
| <i class="fas fa-trash icon text-xl md:mr-3"></i> | |
| <span class="hidden md:block">Trash</span> | |
| </div> | |
| <div class="pt-6 border-t border-gray-800 neon-border-green hidden md:block"> | |
| <h3 class="neon-text-purple uppercase text-xs font-bold mb-3">Smart Folders</h3> | |
| <div class="sidebar-item p-3 rounded-lg flex items-center cursor-pointer"> | |
| <i class="fas fa-bolt icon neon-text-yellow text-sm mr-3"></i> | |
| <span>High Priority</span> | |
| <span class="ml-auto text-gray-400">87</span> | |
| </div> | |
| <div class="sidebar-item p-3 rounded-lg flex items-center cursor-pointer"> | |
| <i class="fas fa-users icon neon-text-blue text-sm mr-3"></i> | |
| <span>Team</span> | |
| </div> | |
| <div class="sidebar-item p-3 rounded-lg flex items-center cursor-pointer"> | |
| <i class="fas fa-shopping-cart icon neon-text-green text-sm mr-3"></i> | |
| <span>Purchases</span> | |
| <span class="ml-auto text-gray-400">24</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-auto p-4 neon-bg-blue rounded-t-lg"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <span class="text-xs neon-text-blue">Quantum Sync</span> | |
| </div> | |
| <span class="text-xs">v9.4.2</span> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-400">Last sync: 12:47:23</div> | |
| </div> | |
| </aside> | |
| <!-- Email List --> | |
| <div class="flex-1 flex flex-col border-r border-gray-800 neon-border-green overflow-hidden"> | |
| <div class="p-4 border-b border-gray-800 neon-border-pink flex justify-between items-center"> | |
| <div class="flex space-x-4"> | |
| <div class="neon-tab active">Primary</div> | |
| <div class="neon-tab">Social</div> | |
| <div class="neon-tab">Promotions</div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="neon-button neon-button-green px-3 py-1 rounded-full text-sm"> | |
| <i class="fas fa-sync-alt mr-1"></i> | |
| <span class="hidden md:inline">Refresh</span> | |
| </button> | |
| <div class="relative"> | |
| <button class="neon-button neon-button-blue px-3 py-1 rounded-full text-sm"> | |
| <i class="fas fa-filter mr-1"></i> | |
| <span class="hidden md:inline">Filter</span> | |
| </button> | |
| <div class="notification-dot absolute top-0 right-0"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="overflow-y-auto scrollbar-hide flex-1"> | |
| <!-- Email Item --> | |
| <div class="message-preview unread p-4 border-b border-gray-800 cursor-pointer neon-bg-pink"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-purple-900 flex items-center justify-center mr-4 neon-border-purple"> | |
| <i class="fas fa-user-astronaut neon-text-purple"></i> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <div class="flex justify-between items-baseline"> | |
| <h3 class="font-bold truncate neon-text-blue">Quantum Computing Division</h3> | |
| <span class="text-xs neon-text-yellow">12:47 PM</span> | |
| </div> | |
| <p class="font-bold truncate">Your Qubit Allocation Request Has Been Approved</p> | |
| <p class="text-sm text-gray-400 truncate">Congratulations! Your request for 128 qubits on the Orion-9 quantum cluster has been approved. Access will be granted starting tomorrow at 08:00 UTC.</p> | |
| <div class="flex mt-2 space-x-2"> | |
| <span class="text-xs px-2 py-1 rounded-full neon-bg-blue">Priority</span> | |
| <span class="text-xs px-2 py-1 rounded-full neon-bg-purple">Quantum</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Email Item --> | |
| <div class="message-preview important p-4 border-b border-gray-800 cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-yellow-900 flex items-center justify-center mr-4 neon-border-yellow"> | |
| <i class="fas fa-exclamation neon-text-yellow"></i> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <div class="flex justify-between items-baseline"> | |
| <h3 class="font-bold truncate">Security Alert System</h3> | |
| <span class="text-xs text-gray-400">Today, 10:23 AM</span> | |
| </div> | |
| <p class="font-bold truncate">Unauthorized Access Attempt Detected</p> | |
| <p class="text-sm text-gray-400 truncate">Our systems detected an unauthorized attempt to access your neural interface from an unknown location. Please verify your security settings immediately.</p> | |
| <div class="flex mt-2 space-x-2"> | |
| <span class="text-xs px-2 py-1 rounded-full neon-bg-pink">Security</span> | |
| <span class="text-xs px-2 py-1 rounded-full neon-bg-yellow">Urgent</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Email Item --> | |
| <div class="message-preview p-4 border-b border-gray-800 cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center mr-4 neon-border-blue"> | |
| <i class="fas fa-calendar-alt neon-text-blue"></i> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <div class="flex justify-between items-baseline"> | |
| <h3 class="font-bold truncate">Mars Colony Events</h3> | |
| <span class="text-xs text-gray-400">Yesterday, 4:12 PM</span> | |
| </div> | |
| <p class="font-bold truncate">Weekly Anti-Gravity Yoga Session</p> | |
| <p class="text-sm text-gray-400 truncate">Join us this Friday at the Olympus Mons Recreation Dome for our weekly anti-gravity yoga session. Mats and inertial dampeners provided.</p> | |
| <div class="flex mt-2 space-x-2"> | |
| <span class="text-xs px-2 py-1 rounded-full neon-bg-green">Event</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Email Item --> | |
| <div class="message-preview flagged p-4 border-b border-gray-800 cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-pink-900 flex items-center justify-center mr-4 neon-border-pink"> | |
| <i class="fas fa-heart neon-text-pink"></i> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <div class="flex justify-between items-baseline"> | |
| <h3 class="font-bold truncate">Neural Dating Network</h3> | |
| <span class="text-xs text-gray-400">Yesterday, 11:47 AM</span> | |
| </div> | |
| <p class="font-bold truncate">3 New Compatibility Matches</p> | |
| <p class="text-sm text-gray-400 truncate">Based on your neural activity patterns, we've found 3 new potential matches with 89%+ compatibility. Tap to view their holographic profiles.</p> | |
| <div class="flex mt-2 space-x-2"> | |
| <span class="text-xs px-2 py-1 rounded-full neon-bg-purple">Dating</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Email Item --> | |
| <div class="message-preview p-4 border-b border-gray-800 cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-green-900 flex items-center justify-center mr-4 neon-border-green"> | |
| <i class="fas fa-shopping-cart neon-text-green"></i> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <div class="flex justify-between items-baseline"> | |
| <h3 class="font-bold truncate">Orbital Delivery Express</h3> | |
| <span class="text-xs text-gray-400">Tue, 9:32 AM</span> | |
| </div> | |
| <p class="font-bold truncate">Your Package Has Entered Earth's Atmosphere</p> | |
| <p class="text-sm text-gray-400 truncate">Your order #QE-2049-772 (1x Personal Hoverboard) has cleared customs and will be delivered via drone within the next 47 minutes.</p> | |
| <div class="flex mt-2 space-x-2"> | |
| <span class="text-xs px-2 py-1 rounded-full neon-bg-blue">Shipping</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Email Item --> | |
| <div class="message-preview p-4 border-b border-gray-800 cursor-pointer"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center mr-4"> | |
| <i class="fas fa-newspaper"></i> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <div class="flex justify-between items-baseline"> | |
| <h3 class="font-bold truncate">Galactic News Network</h3> | |
| <span class="text-xs text-gray-400">Mon, 6:14 PM</span> | |
| </div> | |
| <p class="font-bold truncate">Breaking: First Successful Teleportation of Living Organism</p> | |
| <p class="text-sm text-gray-400 truncate">Scientists at the Alpha Centauri Research Station have successfully teleported a live specimen of the newly discovered Xenomorph butterfly across 3 light years.</p> | |
| <div class="flex mt-2 space-x-2"> | |
| <span class="text-xs px-2 py-1 rounded-full bg-gray-800">News</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Email Content --> | |
| <div class="hidden lg:flex flex-col w-1/2 xl:w-2/5 border-l border-gray-800 neon-border-yellow"> | |
| <div class="p-4 border-b border-gray-800 flex justify-between items-center neon-bg-purple"> | |
| <h2 class="neon-text-purple title-font text-xl">Message</h2> | |
| <div class="flex space-x-3"> | |
| <button class="neon-button neon-button-blue p-2 rounded-full"> | |
| <i class="fas fa-reply"></i> | |
| </button> | |
| <button class="neon-button neon-button-green p-2 rounded-full"> | |
| <i class="fas fa-share"></i> | |
| </button> | |
| <button class="neon-button neon-button-pink p-2 rounded-full"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-6 overflow-y-auto flex-1 scanline"> | |
| <div class="mb-8"> | |
| <h1 class="neon-text-blue title-font text-2xl mb-4">Your Qubit Allocation Request Has Been Approved</h1> | |
| <div class="flex items-center justify-between mb-6"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-purple-900 flex items-center justify-center mr-4 neon-border-purple"> | |
| <i class="fas fa-user-astronaut neon-text-purple text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold neon-text-blue">Quantum Computing Division</p> | |
| <p class="text-sm text-gray-400">[email protected]</p> | |
| </div> | |
| </div> | |
| <div class="text-sm neon-text-yellow">12:47 PM • Today</div> | |
| </div> | |
| </div> | |
| <div class="prose prose-invert max-w-none"> | |
| <p class="mb-4">Dear Quantum Researcher,</p> | |
| <p class="mb-4">We are pleased to inform you that your request for quantum computing resources has been approved by the Orion Allocation Committee.</p> | |
| <div class="neon-bg-blue p-4 rounded-lg mb-6"> | |
| <h3 class="neon-text-blue font-bold mb-2">Allocation Details:</h3> | |
| <ul class="list-disc pl-5 space-y-1"> | |
| <li><span class="font-bold">Qubits:</span> 128 logical qubits</li> | |
| <li><span class="font-bold">Cluster:</span> Orion-9 (7th generation photonic)</li> | |
| <li><span class="font-bold">Time Slot:</span> 08:00 - 20:00 UTC daily</li> | |
| <li><span class="font-bold">Duration:</span> 14 Earth days (extendable)</li> | |
| <li><span class="font-bold">Coherence Time:</span> 450µs (guaranteed)</li> | |
| </ul> | |
| </div> | |
| <p class="mb-4">Your project "<span class="neon-text-green">Topological Quantum Memory Optimization</span>" has been prioritized due to its potential impact on our quantum networking infrastructure.</p> | |
| <p class="mb-4">Access credentials and connection protocols have been attached to this message. Please ensure you've completed the mandatory Quantum Safety Certification (QSC-9) before your first session.</p> | |
| <div class="neon-bg-pink p-4 rounded-lg mb-6"> | |
| <h3 class="neon-text-pink font-bold mb-2">Important Notes:</h3> | |
| <ul class="list-disc pl-5 space-y-1"> | |
| <li>The Orion-9 cluster operates at 0.008°K - ensure your cryogenic protocols are active before connecting</li> | |
| <li>All quantum algorithms must be submitted for decoherence validation at least 6 hours before execution</li> | |
| <li>Any detected quantum entanglement with unauthorized systems will result in immediate termination of your allocation</li> | |
| </ul> | |
| </div> | |
| <p class="mb-4">We look forward to seeing the results of your research. Should you require any assistance, our Quantum Support Team is available 24/7 via neural link or through the Quantum Console in your dashboard.</p> | |
| <p class="mb-4 neon-text-blue">For the future of quantum computing,</p> | |
| <p class="font-bold neon-text-purple">Dr. Elara Voss</p> | |
| <p class="text-sm">Director, Quantum Resource Allocation</p> | |
| <p class="text-sm neon-text-blue">NeonCorp Quantum Division</p> | |
| </div> | |
| <div class="mt-8 pt-6 border-t border-gray-800 neon-border-green"> | |
| <h3 class="neon-text-green font-bold mb-4">Attachments (2)</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="neon-bg-purple p-3 rounded-lg flex items-center cursor-pointer glow-on-hover"> | |
| <div class="w-12 h-12 rounded-lg bg-purple-900 flex items-center justify-center mr-3 neon-border-purple"> | |
| <i class="fas fa-key neon-text-purple"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold truncate">Orion-9_Access_Credentials.qkey</p> | |
| <p class="text-xs text-gray-400">12.4 KB • Quantum Encrypted</p> | |
| </div> | |
| </div> | |
| <div class="neon-bg-blue p-3 rounded-lg flex items-center cursor-pointer glow-on-hover"> | |
| <div class="w-12 h-12 rounded-lg bg-blue-900 flex items-center justify-center mr-3 neon-border-blue"> | |
| <i class="fas fa-book neon-text-blue"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold truncate">Orion-9_Protocol_Handbook.pdf</p> | |
| <p class="text-xs text-gray-400">4.7 MB • 128 pages</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-800 neon-border-pink"> | |
| <div class="flex space-x-3"> | |
| <button class="neon-button neon-button-green flex-1 py-3 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-reply mr-2"></i> | |
| <span>Reply</span> | |
| </button> | |
| <button class="neon-button neon-button-blue flex-1 py-3 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-share mr-2"></i> | |
| <span>Forward</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Compose Button --> | |
| <div class="lg:hidden fixed bottom-6 right-6"> | |
| <button class="neon-button neon-button-pink w-14 h-14 rounded-full text-2xl flex items-center justify-center shadow-lg"> | |
| <i class="fas fa-plus"></i> | |
| </button> | |
| </div> | |
| <!-- Status Bar --> | |
| <footer class="bg-black bg-opacity-50 border-t border-gray-800 neon-border-blue p-2 text-xs flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center neon-text-green"> | |
| <i class="fas fa-shield-alt mr-1"></i> | |
| <span>Quantum Encryption Active</span> | |
| </div> | |
| <div class="hidden md:flex items-center"> | |
| <i class="fas fa-satellite-dish mr-1 neon-text-blue"></i> | |
| <span>Neural Uplink: 12.7Gbps</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-battery-three-quarters mr-1 neon-text-yellow"></i> | |
| <span>78%</span> | |
| </div> | |
| <div class="hidden sm:flex items-center"> | |
| <i class="fas fa-cloud mr-1 neon-text-purple"></i> | |
| <span>Orion-9 Cluster • 128Q Online</span> | |
| </div> | |
| <div class="neon-text-blue"> | |
| <span>Earth Standard Time: </span> | |
| <span id="datetime" class="font-mono">Loading...</span> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Update datetime | |
| function updateDateTime() { | |
| const now = new Date(); | |
| const dateStr = now.toLocaleDateString('en-US', { | |
| year: 'numeric', | |
| month: 'short', | |
| day: 'numeric', | |
| timeZone: 'UTC' | |
| }); | |
| const timeStr = now.toLocaleTimeString('en-US', { | |
| hour12: false, | |
| hour: '2-digit', | |
| minute: '2-digit', | |
| second: '2-digit', | |
| timeZone: 'UTC' | |
| }); | |
| document.getElementById('datetime').textContent = `${dateStr} • ${timeStr} UTC`; | |
| } | |
| updateDateTime(); | |
| setInterval(updateDateTime, 1000); | |
| // Add hover effects to message previews | |
| document.querySelectorAll('.message-preview').forEach(preview => { | |
| preview.addEventListener('mouseenter', function() { | |
| this.classList.add('glow-on-hover'); | |
| }); | |
| preview.addEventListener('mouseleave', function() { | |
| this.classList.remove('glow-on-hover'); | |
| }); | |
| }); | |
| // Tab switching functionality | |
| document.querySelectorAll('.neon-tab').forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| document.querySelectorAll('.neon-tab').forEach(t => t.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Sidebar item switching | |
| document.querySelectorAll('.sidebar-item').forEach(item => { | |
| item.addEventListener('click', function() { | |
| document.querySelectorAll('.sidebar-item').forEach(i => i.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| </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=molonelaveh/email-client" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |