| <!DOCTYPE html> |
| <html lang="en" class="h-full"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>API Key Vault</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: 'rgba(71, 85, 105, 0.8)', |
| secondary: 'rgba(100, 116, 139, 0.6)', |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .glass-card { |
| backdrop-filter: blur(16px) saturate(180%); |
| -webkit-backdrop-filter: blur(16px) saturate(180%); |
| background-color: rgba(15, 23, 42, 0.75); |
| border: 1px solid rgba(255, 255, 255, 0.125); |
| } |
| .key-card:hover { |
| transform: translateY(-4px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| </style> |
| </head> |
| <body class="min-h-full bg-gradient-to-br from-gray-900 to-slate-900 text-gray-100" id="vanta-bg"> |
| <div class="container mx-auto px-4 py-12"> |
| <header class="mb-12 text-center"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-blue-300 to-purple-400"> |
| API Key Vault Guardian |
| </h1> |
| <p class="text-lg text-gray-300 max-w-2xl mx-auto"> |
| Secure storage for your precious API keys with military-grade encryption and easy access |
| </p> |
| </header> |
|
|
| <main class="max-w-4xl mx-auto"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| |
| <div class="glass-card rounded-xl p-6 key-card transition-all duration-300 hover:border-purple-400 border border-gray-700"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center mr-4"> |
| <i data-feather="key" class="text-white"></i> |
| </div> |
| <h2 class="text-xl font-semibold">DEEPSEEK_API_KEY</h2> |
| </div> |
| <div class="relative"> |
| <input type="password" value="KIMI_API_KEY" class="w-full bg-gray-800 rounded-lg px-4 py-3 pr-12 font-mono text-gray-200" readonly id="deepseek-key"> |
| <button onclick="toggleVisibility('deepseek-key')" class="absolute right-3 top-3 text-gray-400 hover:text-white"> |
| <i data-feather="eye" class="w-5 h-5"></i> |
| </button> |
| </div> |
| <div class="flex justify-between mt-4 text-sm text-gray-400"> |
| <span>Last used: 2 hours ago</span> |
| <button class="text-blue-400 hover:text-blue-300 flex items-center"> |
| <i data-feather="copy" class="w-4 h-4 mr-1"></i> Copy |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="glass-card rounded-xl p-6 key-card transition-all duration-300 hover:border-blue-400 border border-gray-700"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-blue-600 flex items-center justify-center mr-4"> |
| <i data-feather="shield" class="text-white"></i> |
| </div> |
| <h2 class="text-xl font-semibold">KIMI_API_KEY</h2> |
| </div> |
| <div class="relative"> |
| <input type="password" value="DEEPSEEK_API_KEY" class="w-full bg-gray-800 rounded-lg px-4 py-3 pr-12 font-mono text-gray-200" readonly id="kimi-key"> |
| <button onclick="toggleVisibility('kimi-key')" class="absolute right-3 top-3 text-gray-400 hover:text-white"> |
| <i data-feather="eye" class="w-5 h-5"></i> |
| </button> |
| </div> |
| <div class="flex justify-between mt-4 text-sm text-gray-400"> |
| <span>Last used: 5 minutes ago</span> |
| <button class="text-blue-400 hover:text-blue-300 flex items-center"> |
| <i data-feather="copy" class="w-4 h-4 mr-1"></i> Copy |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="glass-card rounded-xl p-6 mt-8"> |
| <h3 class="text-lg font-semibold mb-4 flex items-center"> |
| <i data-feather="lock" class="w-5 h-5 mr-2"></i> Security Status |
| </h3> |
| <div class="space-y-4"> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium">Encryption Strength</span> |
| <span class="text-sm text-green-400">AES-256</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2"> |
| <div class="bg-green-500 h-2 rounded-full" style="width: 100%"></div> |
| </div> |
| </div> |
| <div> |
| <div class="flex justify-between mb-1"> |
| <span class="text-sm font-medium">Access Control</span> |
| <span class="text-sm text-blue-400">Biometric + 2FA</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2"> |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 95%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <footer class="mt-16 text-center text-gray-400 text-sm"> |
| <p>© 2023 API Key Vault Guardian. All keys are encrypted at rest and in transit.</p> |
| <p class="mt-2 flex items-center justify-center"> |
| <i data-feather="shield" class="w-4 h-4 mr-1"></i> SOC 2 Type II Certified |
| </p> |
| </footer> |
| </div> |
|
|
| <script> |
| |
| VANTA.NET({ |
| el: "#vanta-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: 0x4f46e5, |
| backgroundColor: 0x111827, |
| points: 12.00, |
| maxDistance: 22.00, |
| spacing: 17.00 |
| }); |
| |
| |
| function toggleVisibility(id) { |
| const input = document.getElementById(id); |
| if (input.type === 'password') { |
| input.type = 'text'; |
| } else { |
| input.type = 'password'; |
| } |
| feather.replace(); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| feather.replace(); |
| |
| |
| document.querySelectorAll('[data-feather="copy"]').forEach(icon => { |
| icon.parentElement.addEventListener('click', function(e) { |
| e.stopPropagation(); |
| const key = this.closest('.key-card').querySelector('input'); |
| key.select(); |
| document.execCommand('copy'); |
| |
| |
| const originalText = this.innerHTML; |
| this.innerHTML = '<i data-feather="check" class="w-4 h-4 mr-1"></i> Copied!'; |
| feather.replace(); |
| |
| setTimeout(() => { |
| this.innerHTML = originalText; |
| feather.replace(); |
| }, 2000); |
| }); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
