Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Secure Access Portal</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .card-shadow { | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .shake { | |
| animation: shake 0.5s; | |
| } | |
| @keyframes shake { | |
| 0%, 100% { transform: translateX(0); } | |
| 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } | |
| 20%, 40%, 60%, 80% { transform: translateX(5px); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .menu-item:hover .menu-icon { | |
| transform: scale(1.1); | |
| color: #667eea; | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen flex items-center justify-center p-4"> | |
| <div id="login-container" class="bg-white rounded-xl p-8 w-full max-w-md card-shadow fade-in"> | |
| <div class="text-center mb-8"> | |
| <div class="w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-lock text-indigo-500 text-3xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold text-gray-800">Secure Access Portal</h1> | |
| <p class="text-gray-600 mt-2">Enter your access code to continue</p> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="relative"> | |
| <input type="password" id="access-code" placeholder="Enter access code" | |
| class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition duration-300"> | |
| <button id="toggle-password" class="absolute right-3 top-3 text-gray-500 hover:text-indigo-500"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| <p id="error-message" class="text-red-500 text-sm mt-2 hidden">Invalid access code. Please try again.</p> | |
| </div> | |
| <button id="login-btn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center"> | |
| <span>Continue</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| <div class="mt-6 text-center text-sm text-gray-500"> | |
| <p>Forgot your code? Contact system administrator</p> | |
| </div> | |
| </div> | |
| <div id="dashboard-container" class="hidden w-full max-w-6xl mx-auto bg-white rounded-xl overflow-hidden card-shadow fade-in"> | |
| <div class="flex flex-col md:flex-row h-full"> | |
| <!-- Sidebar --> | |
| <div class="w-full md:w-64 bg-gray-800 text-white p-4"> | |
| <div class="flex items-center mb-8"> | |
| <div class="w-10 h-10 bg-indigo-500 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-user text-white"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Admin User</p> | |
| <p class="text-xs text-gray-400">System Administrator</p> | |
| </div> | |
| </div> | |
| <nav> | |
| <div class="mb-6"> | |
| <p class="text-xs uppercase text-gray-400 mb-2">Main Menu</p> | |
| <a href="#" class="menu-item flex items-center py-2 px-3 rounded-lg bg-indigo-700 text-white mb-2"> | |
| <i class="fas fa-tachometer-alt menu-icon mr-3 transition duration-300"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| <a href="#" class="menu-item flex items-center py-2 px-3 rounded-lg hover:bg-gray-700 text-gray-300 mb-2"> | |
| <i class="fas fa-users menu-icon mr-3 transition duration-300"></i> | |
| <span>Users</span> | |
| </a> | |
| <a href="#" class="menu-item flex items-center py-2 px-3 rounded-lg hover:bg-gray-700 text-gray-300 mb-2"> | |
| <i class="fas fa-cog menu-icon mr-3 transition duration-300"></i> | |
| <span>Settings</span> | |
| </a> | |
| </div> | |
| <div class="mb-6"> | |
| <p class="text-xs uppercase text-gray-400 mb-2">Reports</p> | |
| <a href="#" class="menu-item flex items-center py-2 px-3 rounded-lg hover:bg-gray-700 text-gray-300 mb-2"> | |
| <i class="fas fa-chart-line menu-icon mr-3 transition duration-300"></i> | |
| <span>Analytics</span> | |
| </a> | |
| <a href="#" class="menu-item flex items-center py-2 px-3 rounded-lg hover:bg-gray-700 text-gray-300 mb-2"> | |
| <i class="fas fa-file-alt menu-icon mr-3 transition duration-300"></i> | |
| <span>Reports</span> | |
| </a> | |
| </div> | |
| <div class="pt-4 border-t border-gray-700"> | |
| <a href="#" id="logout-btn" class="menu-item flex items-center py-2 px-3 rounded-lg hover:bg-gray-700 text-gray-300"> | |
| <i class="fas fa-sign-out-alt menu-icon mr-3 transition duration-300"></i> | |
| <span>Logout</span> | |
| </a> | |
| </div> | |
| </nav> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 p-6"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-800">Dashboard</h2> | |
| <div class="flex items-center"> | |
| <div class="relative mr-4"> | |
| <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <button class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 hover:bg-gray-300"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-indigo-50 rounded-xl p-6"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="text-gray-500">Total Users</p> | |
| <p class="text-2xl font-bold mt-2">1,248</p> | |
| </div> | |
| <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-users text-indigo-500"></i> | |
| </div> | |
| </div> | |
| <p class="text-sm text-green-500 mt-4"><i class="fas fa-arrow-up mr-1"></i> 12% from last month</p> | |
| </div> | |
| <div class="bg-blue-50 rounded-xl p-6"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="text-gray-500">Revenue</p> | |
| <p class="text-2xl font-bold mt-2">$24,780</p> | |
| </div> | |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-dollar-sign text-blue-500"></i> | |
| </div> | |
| </div> | |
| <p class="text-sm text-green-500 mt-4"><i class="fas fa-arrow-up mr-1"></i> 8% from last month</p> | |
| </div> | |
| <div class="bg-green-50 rounded-xl p-6"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="text-gray-500">Active Sessions</p> | |
| <p class="text-2xl font-bold mt-2">326</p> | |
| </div> | |
| <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-desktop text-green-500"></i> | |
| </div> | |
| </div> | |
| <p class="text-sm text-red-500 mt-4"><i class="fas fa-arrow-down mr-1"></i> 3% from last month</p> | |
| </div> | |
| <div class="bg-purple-50 rounded-xl p-6"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <p class="text-gray-500">Tasks Completed</p> | |
| <p class="text-2xl font-bold mt-2">89%</p> | |
| </div> | |
| <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-check-circle text-purple-500"></i> | |
| </div> | |
| </div> | |
| <p class="text-sm text-green-500 mt-4"><i class="fas fa-arrow-up mr-1"></i> 5% from last month</p> | |
| </div> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-xl p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-lg font-semibold text-gray-800">Recent Activity</h3> | |
| <button class="text-indigo-500 hover:text-indigo-700 text-sm font-medium">View All</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mr-4 mt-1"> | |
| <i class="fas fa-user-plus text-indigo-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">New user registered</p> | |
| <p class="text-sm text-gray-500">John Doe created an account - 2 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-4 mt-1"> | |
| <i class="fas fa-file-invoice-dollar text-green-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">New invoice generated</p> | |
| <p class="text-sm text-gray-500">Invoice #INV-2023-056 - 5 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4 mt-1"> | |
| <i class="fas fa-tasks text-blue-500"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Task completed</p> | |
| <p class="text-sm text-gray-500">"Update security policies" marked as done - 1 day ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div class="bg-white border border-gray-200 rounded-xl p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">System Status</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">CPU Usage</span> | |
| <span class="text-sm font-medium text-gray-700">42%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-indigo-500 h-2 rounded-full" style="width: 42%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Memory</span> | |
| <span class="text-sm font-medium text-gray-700">65%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Disk Space</span> | |
| <span class="text-sm font-medium text-gray-700">78%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-xl p-6"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Quick Actions</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <button class="flex flex-col items-center justify-center p-4 bg-indigo-50 rounded-lg hover:bg-indigo-100 transition duration-300"> | |
| <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-plus text-indigo-500"></i> | |
| </div> | |
| <span class="text-sm font-medium">Add User</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition duration-300"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-file-export text-blue-500"></i> | |
| </div> | |
| <span class="text-sm font-medium">Export Data</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center p-4 bg-green-50 rounded-lg hover:bg-green-100 transition duration-300"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-cog text-green-500"></i> | |
| </div> | |
| <span class="text-sm font-medium">Settings</span> | |
| </button> | |
| <button class="flex flex-col items-center justify-center p-4 bg-purple-50 rounded-lg hover:bg-purple-100 transition duration-300"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mb-2"> | |
| <i class="fas fa-question-circle text-purple-500"></i> | |
| </div> | |
| <span class="text-sm font-medium">Help</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const loginContainer = document.getElementById('login-container'); | |
| const dashboardContainer = document.getElementById('dashboard-container'); | |
| const accessCodeInput = document.getElementById('access-code'); | |
| const loginBtn = document.getElementById('login-btn'); | |
| const togglePassword = document.getElementById('toggle-password'); | |
| const errorMessage = document.getElementById('error-message'); | |
| const logoutBtn = document.getElementById('logout-btn'); | |
| let passwordVisible = false; | |
| // Toggle password visibility | |
| togglePassword.addEventListener('click', function() { | |
| passwordVisible = !passwordVisible; | |
| if (passwordVisible) { | |
| accessCodeInput.type = 'text'; | |
| togglePassword.innerHTML = '<i class="fas fa-eye-slash"></i>'; | |
| } else { | |
| accessCodeInput.type = 'password'; | |
| togglePassword.innerHTML = '<i class="fas fa-eye"></i>'; | |
| } | |
| }); | |
| // Login functionality | |
| loginBtn.addEventListener('click', function() { | |
| const code = accessCodeInput.value.trim(); | |
| if (code === '1234') { | |
| // Successful login | |
| loginContainer.classList.add('hidden'); | |
| dashboardContainer.classList.remove('hidden'); | |
| } else { | |
| // Failed login | |
| errorMessage.classList.remove('hidden'); | |
| loginContainer.classList.add('shake'); | |
| setTimeout(() => { | |
| loginContainer.classList.remove('shake'); | |
| }, 500); | |
| } | |
| }); | |
| // Allow pressing Enter to login | |
| accessCodeInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| loginBtn.click(); | |
| } | |
| }); | |
| // Logout functionality | |
| logoutBtn.addEventListener('click', function() { | |
| dashboardContainer.classList.add('hidden'); | |
| loginContainer.classList.remove('hidden'); | |
| accessCodeInput.value = ''; | |
| errorMessage.classList.add('hidden'); | |
| }); | |
| }); | |
| </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=Mackin7/secured-interface" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |