User-Facing Civilian Mobile Application Front-End Specification: AEGIS Civilian App (Visual Design Emphasis)
e3dbc25
verified
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AEGIS Civilian App</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --bg-primary: #050505; | |
| --bg-secondary: #121212; | |
| --text-primary: #ffffff; | |
| --text-secondary: #b3b3b3; | |
| --accent: #00c6ff; | |
| --emergency: #ff0033; | |
| --border: 1px solid #1a1a1a; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--bg-primary); | |
| color: var(--text-primary); | |
| letter-spacing: -0.02em; | |
| line-height: 1.5; | |
| } | |
| .frosted-glass { | |
| background: rgba(18, 18, 18, 0.7); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: var(--border); | |
| border-radius: 0; | |
| } | |
| .frosted-glass-light { | |
| background: rgba(30, 30, 30, 0.7); | |
| } | |
| .btn-emergency { | |
| background: var(--emergency); | |
| box-shadow: 0 0 15px var(--emergency); | |
| animation: pulse 1.5s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 10px var(--emergency); } | |
| 50% { box-shadow: 0 0 20px var(--emergency); } | |
| 100% { box-shadow: 0 0 10px var(--emergency); } | |
| } | |
| .chat-bubble-sent { | |
| background: rgba(0, 198, 255, 0.15); | |
| border: 1px solid rgba(0, 198, 255, 0.3); | |
| } | |
| .chat-bubble-received { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .asset-marker { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 0; | |
| background: var(--accent); | |
| transform: rotate(45deg); | |
| } | |
| .asset-marker-active { | |
| box-shadow: 0 0 0 2px rgba(0, 198, 255, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- App Container --> | |
| <div class="max-w-md mx-auto bg-[var(--bg-primary)] h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="frosted-glass p-4 border-b border-[#1a1a1a]"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i data-feather="shield" class="text-[var(--accent)] h-6 w-6"></i> | |
| <span class="ml-2 font-bold">AEGIS</span> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <i data-feather="bell" class="text-[var(--text-secondary)] h-5 w-5"></i> | |
| <div class="w-6 h-6 rounded-sm overflow-hidden"> | |
| <img src="http://static.photos/people/200x200/42" class="w-full h-full object-cover" alt="Profile"> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-1 overflow-y-auto p-4 space-y-4"> | |
| <!-- Status Card --> | |
| <div class="frosted-glass p-4"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <p class="text-xs text-[var(--text-secondary)]">CURRENT STATUS</p> | |
| <p class="text-xl font-medium">Normal</p> | |
| </div> | |
| <div class="w-10 h-10 flex items-center justify-center bg-[rgba(0,198,255,0.1)]"> | |
| <i data-feather="check-circle" class="text-[var(--accent)]"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Emergency Button --> | |
| <button class="frosted-glass w-full py-6 flex flex-col items-center justify-center border border-[#1a1a1a] hover:border-[var(--accent)] transition-colors"> | |
| <div class="w-14 h-14 rounded-sm flex items-center justify-center bg-[var(--bg-secondary)] border border-[var(--accent)] mb-2"> | |
| <i data-feather="alert-octagon" class="text-[var(--accent)] h-6 w-6"></i> | |
| </div> | |
| <span class="text-sm font-medium">Emergency SOS</span> | |
| </button> | |
| <!-- Quick Actions --> | |
| <div class="frosted-glass p-4"> | |
| <h3 class="text-sm font-medium mb-3">QUICK ACTIONS</h3> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <button class="frosted-glass-light p-3 flex flex-col items-center"> | |
| <i data-feather="map" class="text-[var(--accent)] h-5 w-5 mb-1"></i> | |
| <span class="text-xs">Assets</span> | |
| </button> | |
| <button class="frosted-glass-light p-3 flex flex-col items-center"> | |
| <i data-feather="message-square" class="text-[var(--accent)] h-5 w-5 mb-1"></i> | |
| <span class="text-xs">Chat</span> | |
| </button> | |
| <button class="frosted-glass-light p-3 flex flex-col items-center"> | |
| <i data-feather="users" class="text-[var(--accent)] h-5 w-5 mb-1"></i> | |
| <span class="text-xs">Contacts</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Recent Alerts --> | |
| <div class="frosted-glass p-4"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="text-sm font-medium">RECENT ALERTS</h3> | |
| <span class="text-xs text-[var(--accent)]">View All</span> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="frosted-glass-light p-3 border-l-2 border-[var(--accent)]"> | |
| <p class="text-sm">System update available</p> | |
| <p class="text-xs text-[var(--text-secondary)]">2 hours ago</p> | |
| </div> | |
| <div class="frosted-glass-light p-3 border-l-2 border-[#ffcc00]"> | |
| <p class="text-sm">New security advisory</p> | |
| <p class="text-xs text-[var(--text-secondary)]">1 day ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Bottom Navigation --> | |
| <nav class="frosted-glass border-t border-[#1a1a1a]"> | |
| <div class="grid grid-cols-4"> | |
| <button class="p-3 flex flex-col items-center text-[var(--accent)]"> | |
| <i data-feather="home" class="h-5 w-5"></i> | |
| </button> | |
| <button class="p-3 flex flex-col items-center text-[var(--text-secondary)]"> | |
| <i data-feather="map" class="h-5 w-5"></i> | |
| </button> | |
| <button class="p-3 flex flex-col items-center text-[var(--text-secondary)]"> | |
| <i data-feather="message-square" class="h-5 w-5"></i> | |
| </button> | |
| <button class="p-3 flex flex-col items-center text-[var(--text-secondary)]"> | |
| <i data-feather="settings" class="h-5 w-5"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Emergency mode simulation | |
| document.querySelector('.emergency-btn').addEventListener('click', function() { | |
| this.classList.add('btn-emergency'); | |
| document.querySelector('.status-text').textContent = 'EMERGENCY'; | |
| document.querySelector('.status-text').classList.add('text-[var(--emergency)]'); | |
| document.querySelector('.status-icon').classList.remove('text-[var(--accent)]'); | |
| document.querySelector('.status-icon').classList.add('text-[var(--emergency)]'); | |
| document.querySelector('.status-icon').setAttribute('data-feather', 'alert-triangle'); | |
| feather.replace(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |