Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Settings | DevDaRK Shadow AI Pro</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| dark: { | |
| 100: '#1a1a1a', | |
| 200: '#0d0d0d', | |
| 300: '#000000', | |
| 400: '#0a0a0a', | |
| 500: '#050505', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| </head> | |
| <body class="bg-dark-300 text-gray-200 min-h-screen font-mono"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-12"> | |
| <section class="max-w-3xl mx-auto"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-8 text-transparent bg-clip-text bg-gradient-to-r from-red-600 to-purple-800 glitch-text"> | |
| System Settings | |
| </h1> | |
| <p class="text-xl opacity-90 terminal-style mb-12"> | |
| [SYSTEM] Accessing configuration console...<br> | |
| [WARNING] Requires admin privileges | |
| </p> | |
| <div class="bg-dark-200 rounded-xl p-8 border border-dark-400"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center gap-2"> | |
| <i data-feather="settings" class="w-6 h-6 text-red-500"></i> | |
| Core Configuration | |
| </h2> | |
| <div class="space-y-6 mb-8"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-lg font-semibold">Dark Mode</h3> | |
| <p class="text-sm opacity-70">Enable shadow interface</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" checked class="sr-only peer"> | |
| <div class="w-11 h-6 bg-dark-400 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-red-600"></div> | |
| </label> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-2">AI Aggression Level</h3> | |
| <div class="flex items-center gap-4"> | |
| <select class="bg-dark-400 border border-dark-300 text-gray-200 rounded-lg px-4 py-2 w-full"> | |
| <option>Stealth Mode</option> | |
| <option selected>Balanced</option> | |
| <option>Aggressive</option> | |
| <option>Terminal Velocity</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-2">Encryption Protocol</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <label class="flex items-center gap-2"> | |
| <input type="radio" name="encryption" checked class="w-4 h-4 text-red-600 bg-dark-400 border-dark-300"> | |
| Shadow AES-256 | |
| </label> | |
| <label class="flex items-center gap-2"> | |
| <input type="radio" name="encryption" class="w-4 h-4 text-red-600 bg-dark-400 border-dark-300"> | |
| Quantum X-512 | |
| </label> | |
| <label class="flex items-center gap-2"> | |
| <input type="radio" name="encryption" class="w-4 h-4 text-red-600 bg-dark-400 border-dark-300"> | |
| Void Crypt | |
| </label> | |
| <label class="flex items-center gap-2"> | |
| <input type="radio" name="encryption" class="w-4 h-4 text-red-600 bg-dark-400 border-dark-300"> | |
| DarkNet Standard | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center gap-2"> | |
| <i data-feather="shield" class="w-6 h-6 text-purple-500"></i> | |
| Security Settings | |
| </h2> | |
| <div class="space-y-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="text-lg font-semibold">Self-Destruct Protocol</h3> | |
| <p class="text-sm opacity-70">Enable emergency data wipe</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" class="sr-only peer"> | |
| <div class="w-11 h-6 bg-dark-400 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div> | |
| </label> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-2">Biometric Authentication</h3> | |
| <p class="text-sm opacity-70 mb-4">Require fingerprint or facial recognition for access</p> | |
| <button class="bg-gradient-to-r from-purple-800 to-red-900 px-6 py-2 rounded-lg font-bold hover:opacity-90 transition-all flex items-center gap-2"> | |
| <i data-feather="fingerprint"></i> Configure Biometrics | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |