Hugging Face's logo

Spaces:
Rxyzalss
/
topup
Running

App Files Community
topup / index.html
Rxyzalss's picture
Rxyzalss
Add 2 files
6055a00 verified
Raw
History Blame Contribute Delete
58.2 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>TopUpKu - Admin Dashboard</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">
 <script>
 tailwind.config = {
 theme: {
 extend: {
 colors: {
 primary: '#4f46e5',
 secondary: '#7c3aed',
 dark: '#1e293b',
 light: '#f8fafc',
 success: '#10b981',
 warning: '#f59e0b',
 danger: '#ef4444',
 info: '#3b82f6'
 },
 fontFamily: {
 sans: ['Inter', 'sans-serif'],
 },
 }
 }
 }
 </script>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
 font-family: 'Inter', sans-serif;
 background-color: #f9fafb;
 }
.gradient-bg {
 background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
 }
.floating {
 animation: floating 3s ease-in-out infinite;
 }
@keyframes floating {
 0% { transform: translateY(0px); }
 50% { transform: translateY(-10px); }
 100% { transform: translateY(0px); }
 }
.pulse {
 animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
@keyframes pulse {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.5; }
 }
.slide-up {
 animation: slideUp 0.5s ease-out forwards;
 }
@keyframes slideUp {
 from { transform: translateY(20px); opacity: 0; }
 to { transform: translateY(0); opacity: 1; }
 }
.fade-in {
 animation: fadeIn 0.3s ease-out forwards;
 }
@keyframes fadeIn {
 from { opacity: 0; }
 to { opacity: 1; }
 }
/* Security badge */
 .security-badge {
 position: relative;
 }
.security-badge::after {
 content: '';
 position: absolute;
 top: -5px;
 right: -5px;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background-color: #10b981;
 border: 2px solid white;
 }
/* Custom scrollbar */
 ::-webkit-scrollbar {
 width: 8px;
 height: 8px;
 }
::-webkit-scrollbar-track {
 background: #f1f1f1;
 border-radius: 10px;
 }
::-webkit-scrollbar-thumb {
 background: #c1c1c1;
 border-radius: 10px;
 }
::-webkit-scrollbar-thumb:hover {
 background: #a8a8a8;
 }
/* Dashboard specific */
 .sidebar {
 transition: all 0.3s ease;
 }
.sidebar-collapsed {
 width: 80px;
 }
.sidebar-collapsed .nav-text {
 display: none;
 }
.content-area {
 transition: all 0.3s ease;
 }
.sidebar-expanded .content-area {
 margin-left: 250px;
 }
.sidebar-collapsed .content-area {
 margin-left: 80px;
 }
/* Security shield animation */
 @keyframes shieldPulse {
 0% { transform: scale(1); }
 50% { transform: scale(1.05); }
 100% { transform: scale(1); }
 }
.shield-pulse {
 animation: shieldPulse 2s infinite;
 }
 </style>
</head>
<body class="min-h-screen bg-gray-100">
 <!-- Admin Layout -->
 <div class="flex">
 <!-- Sidebar -->
 <div class="sidebar bg-white shadow-lg fixed h-full z-50" id="sidebar">
 <div class="flex flex-col h-full">
 <!-- Logo -->
 <div class="p-4 border-b border-gray-200 flex items-center justify-center">
 <div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center">
 <i class="fas fa-bolt text-white text-xl"></i>
 </div>
 <span class="ml-3 text-xl font-bold text-dark nav-text">TopUpKu</span>
 </div>
<!-- User Profile -->
 <div class="p-4 border-b border-gray-200 flex items-center">
 <div class="relative">
 <img src="https://via.placeholder.com/50" alt="Admin" class="w-10 h-10 rounded-full">
 <span class="security-badge"></span>
 </div>
 <div class="ml-3 nav-text">
 <p class="font-medium text-sm">Admin User</p>
 <p class="text-xs text-gray-500">Super Admin</p>
 </div>
 </div>
<!-- Navigation -->
 <nav class="flex-1 overflow-y-auto py-4">
 <div class="px-4 space-y-1">
 <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-lg bg-primary bg-opacity-10 text-primary">
 <i class="fas fa-tachometer-alt text-lg w-6"></i>
 <span class="ml-3 nav-text">Dashboard</span>
 </a>
 <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100">
 <i class="fas fa-shopping-cart text-lg w-6"></i>
 <span class="ml-3 nav-text">Products</span>
 </a>
 <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100">
 <i class="fas fa-exchange-alt text-lg w-6"></i>
 <span class="ml-3 nav-text">Transactions</span>
 </a>
 <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100">
 <i class="fas fa-users text-lg w-6"></i>
 <span class="ml-3 nav-text">Customers</span>
 </a>
 <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100">
 <i class="fas fa-chart-line text-lg w-6"></i>
 <span class="ml-3 nav-text">Reports</span>
 </a>
 <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100">
 <i class="fas fa-cog text-lg w-6"></i>
 <span class="ml-3 nav-text">Settings</span>
 </a>
 <div class="pt-4">
 <p class="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider nav-text">Security</p>
 <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100">
 <i class="fas fa-shield-alt text-lg w-6"></i>
 <span class="ml-3 nav-text">Security Center</span>
 </a>
 <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100">
 <i class="fas fa-user-shield text-lg w-6"></i>
 <span class="ml-3 nav-text">Admin Users</span>
 </a>
 <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100">
 <i class="fas fa-history text-lg w-6"></i>
 <span class="ml-3 nav-text">Activity Log</span>
 </a>
 </div>
 </div>
 </nav>
<!-- Collapse Button -->
 <div class="p-4 border-t border-gray-200">
 <button id="toggleSidebar" class="w-full flex items-center justify-center px-3 py-2 text-sm font-medium rounded-lg text-gray-600 hover:bg-gray-100">
 <i class="fas fa-chevron-left text-lg w-6"></i>
 <span class="ml-3 nav-text">Collapse</span>
 </button>
 </div>
 </div>
 </div>
<!-- Content Area -->
 <div class="content-area flex-1 min-h-screen transition-all duration-300" id="contentArea">
 <!-- Top Navigation -->
 <header class="bg-white shadow-sm">
 <div class="flex justify-between items-center px-6 py-4">
 <div class="flex items-center">
 <button id="mobileMenuButton" class="md:hidden mr-4 text-gray-600">
 <i class="fas fa-bars text-xl"></i>
 </button>
 <h1 class="text-xl font-semibold text-gray-800">Admin Dashboard</h1>
 </div>
 <div class="flex items-center space-x-4">
 <div class="relative">
 <button id="notificationsButton" class="p-2 rounded-full hover:bg-gray-100 relative">
 <i class="fas fa-bell text-gray-600"></i>
 <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
 </button>
 <div id="notificationsDropdown" class="hidden absolute right-0 mt-2 w-72 bg-white rounded-md shadow-lg py-1 z-50">
 <div class="px-4 py-2 border-b border-gray-200">
 <p class="text-sm font-medium">Notifications</p>
 </div>
 <div class="max-h-60 overflow-y-auto">
 <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
 <div class="flex items-start">
 <div class="flex-shrink-0 mt-1">
 <i class="fas fa-exclamation-circle text-yellow-500"></i>
 </div>
 <div class="ml-3">
 <p class="font-medium">Security Alert</p>
 <p class="text-xs text-gray-500">Unusual login attempt detected</p>
 </div>
 </div>
 </a>
 <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
 <div class="flex items-start">
 <div class="flex-shrink-0 mt-1">
 <i class="fas fa-shopping-cart text-blue-500"></i>
 </div>
 <div class="ml-3">
 <p class="font-medium">New Order</p>
 <p class="text-xs text-gray-500">Order #12345 for Mobile Legends</p>
 </div>
 </div>
 </a>
 </div>
 <div class="px-4 py-2 border-t border-gray-200">
 <a href="#" class="text-xs font-medium text-primary hover:text-primary-600">View all notifications</a>
 </div>
 </div>
 </div>
 <div class="relative">
 <button id="userMenuButton" class="flex items-center space-x-2">
 <img src="https://via.placeholder.com/40" alt="Admin" class="w-8 h-8 rounded-full">
 <span class="hidden md:inline text-sm font-medium">Admin User</span>
 </button>
 <div id="userMenuDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
 <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
 <i class="fas fa-user mr-2"></i> Profile
 </a>
 <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
 <i class="fas fa-cog mr-2"></i> Settings
 </a>
 <div class="border-t border-gray-200"></div>
 <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
 <i class="fas fa-sign-out-alt mr-2"></i> Logout
 </a>
 </div>
 </div>
 </div>
 </div>
 </header>
<!-- Main Content -->
 <main class="p-6">
 <!-- Stats Cards -->
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
 <div class="bg-white rounded-lg shadow p-6">
 <div class="flex items-center justify-between">
 <div>
 <p class="text-sm font-medium text-gray-500">Total Revenue</p>
 <p class="text-2xl font-bold text-dark">Rp 12,450,000</p>
 <p class="text-sm text-success mt-1">
 <i class="fas fa-arrow-up mr-1"></i> 12.5% from last month
 </p>
 </div>
 <div class="p-3 rounded-full bg-primary bg-opacity-10">
 <i class="fas fa-wallet text-primary text-xl"></i>
 </div>
 </div>
 </div>
 <div class="bg-white rounded-lg shadow p-6">
 <div class="flex items-center justify-between">
 <div>
 <p class="text-sm font-medium text-gray-500">Total Orders</p>
 <p class="text-2xl font-bold text-dark">1,245</p>
 <p class="text-sm text-success mt-1">
 <i class="fas fa-arrow-up mr-1"></i> 8.3% from last month
 </p>
 </div>
 <div class="p-3 rounded-full bg-success bg-opacity-10">
 <i class="fas fa-shopping-cart text-success text-xl"></i>
 </div>
 </div>
 </div>
 <div class="bg-white rounded-lg shadow p-6">
 <div class="flex items-center justify-between">
 <div>
 <p class="text-sm font-medium text-gray-500">Active Products</p>
 <p class="text-2xl font-bold text-dark">78</p>
 <p class="text-sm text-warning mt-1">
 <i class="fas fa-arrow-down mr-1"></i> 2.1% from last month
 </p>
 </div>
 <div class="p-3 rounded-full bg-info bg-opacity-10">
 <i class="fas fa-boxes text-info text-xl"></i>
 </div>
 </div>
 </div>
 <div class="bg-white rounded-lg shadow p-6">
 <div class="flex items-center justify-between">
 <div>
 <p class="text-sm font-medium text-gray-500">Security Status</p>
 <p class="text-2xl font-bold text-dark">Protected</p>
 <p class="text-sm text-success mt-1">
 <i class="fas fa-shield-alt mr-1"></i> All systems secure
 </p>
 </div>
 <div class="p-3 rounded-full bg-danger bg-opacity-10 shield-pulse">
 <i class="fas fa-shield-alt text-danger text-xl"></i>
 </div>
 </div>
 </div>
 </div>
<!-- Recent Orders and Security Alerts -->
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
 <!-- Recent Orders -->
 <div class="lg:col-span-2 bg-white rounded-lg shadow">
 <div class="p-6 border-b border-gray-200">
 <h2 class="text-lg font-semibold text-gray-800">Recent Orders</h2>
 </div>
 <div class="overflow-x-auto">
 <table class="min-w-full divide-y divide-gray-200">
 <thead class="bg-gray-50">
 <tr>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
 </tr>
 </thead>
 <tbody class="bg-white divide-y divide-gray-200">
 <tr>
 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary">#12345</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Mobile Legends</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">user@example.com</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Rp 50,000</td>
 <td class="px-6 py-4 whitespace-nowrap">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success bg-opacity-10 text-success">Completed</span>
 </td>
 </tr>
 <tr>
 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary">#12344</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">PLN Token</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">customer@example.com</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Rp 100,000</td>
 <td class="px-6 py-4 whitespace-nowrap">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-warning bg-opacity-10 text-warning">Processing</span>
 </td>
 </tr>
 <tr>
 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary">#12343</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Telkomsel Pulsa</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">another@example.com</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Rp 25,000</td>
 <td class="px-6 py-4 whitespace-nowrap">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-success bg-opacity-10 text-success">Completed</span>
 </td>
 </tr>
 <tr>
 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary">#12342</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Steam Wallet</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">gamer@example.com</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Rp 150,000</td>
 <td class="px-6 py-4 whitespace-nowrap">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-danger bg-opacity-10 text-danger">Failed</span>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 <div class="p-4 border-t border-gray-200">
 <a href="#" class="text-sm font-medium text-primary hover:text-primary-600">View all orders</a>
 </div>
 </div>
<!-- Security Alerts -->
 <div class="bg-white rounded-lg shadow">
 <div class="p-6 border-b border-gray-200">
 <h2 class="text-lg font-semibold text-gray-800">Security Alerts</h2>
 </div>
 <div class="p-6 space-y-4">
 <div class="flex items-start">
 <div class="flex-shrink-0 mt-1">
 <i class="fas fa-exclamation-triangle text-yellow-500"></i>
 </div>
 <div class="ml-3">
 <p class="text-sm font-medium">Unusual login attempt</p>
 <p class="text-xs text-gray-500">Failed login attempt from IP 192.168.1.100</p>
 <p class="text-xs text-gray-400 mt-1">2 hours ago</p>
 </div>
 </div>
 <div class="flex items-start">
 <div class="flex-shrink-0 mt-1">
 <i class="fas fa-shield-alt text-blue-500"></i>
 </div>
 <div class="ml-3">
 <p class="text-sm font-medium">Security scan completed</p>
 <p class="text-xs text-gray-500">No vulnerabilities detected in latest scan</p>
 <p class="text-xs text-gray-400 mt-1">Yesterday</p>
 </div>
 </div>
 <div class="flex items-start">
 <div class="flex-shrink-0 mt-1">
 <i class="fas fa-user-shield text-green-500"></i>
 </div>
 <div class="ml-3">
 <p class="text-sm font-medium">Admin password changed</p>
 <p class="text-xs text-gray-500">Your password was successfully updated</p>
 <p class="text-xs text-gray-400 mt-1">3 days ago</p>
 </div>
 </div>
 </div>
 <div class="p-4 border-t border-gray-200">
 <a href="#" class="text-sm font-medium text-primary hover:text-primary-600">View security center</a>
 </div>
 </div>
 </div>
<!-- Security Settings -->
 <div class="bg-white rounded-lg shadow mb-6">
 <div class="p-6 border-b border-gray-200">
 <h2 class="text-lg font-semibold text-gray-800">Security Settings</h2>
 </div>
 <div class="p-6">
 <div class="space-y-6">
 <!-- Two-Factor Authentication -->
 <div class="flex items-start justify-between">
 <div class="flex-1">
 <h3 class="text-base font-medium text-gray-900">Two-Factor Authentication</h3>
 <p class="text-sm text-gray-500 mt-1">
 Add an extra layer of security to your account by enabling two-factor authentication.
 </p>
 </div>
 <div>
 <button type="button" class="ml-3 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-primary transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2" role="switch" aria-checked="true">
 <span class="sr-only">Use setting</span>
 <span aria-hidden="true" class="translate-x-5 inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
 </button>
 </div>
 </div>
<!-- Login Alerts -->
 <div class="flex items-start justify-between">
 <div class="flex-1">
 <h3 class="text-base font-medium text-gray-900">Login Alerts</h3>
 <p class="text-sm text-gray-500 mt-1">
 Receive notifications when your account is accessed from a new device or location.
 </p>
 </div>
 <div>
 <button type="button" class="ml-3 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-primary transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2" role="switch" aria-checked="true">
 <span class="sr-only">Use setting</span>
 <span aria-hidden="true" class="translate-x-5 inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
 </button>
 </div>
 </div>
<!-- IP Whitelisting -->
 <div class="flex items-start justify-between">
 <div class="flex-1">
 <h3 class="text-base font-medium text-gray-900">IP Whitelisting</h3>
 <p class="text-sm text-gray-500 mt-1">
 Restrict admin access to specific IP addresses for enhanced security.
 </p>
 <div class="mt-3">
 <div class="flex items-center space-x-2">
 <input type="text" placeholder="Enter IP address" class="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm">
 <button class="px-3 py-2 bg-primary text-white text-sm rounded-md hover:bg-primary-600">Add</button>
 </div>
 <div class="mt-2 space-y-1">
 <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
 <span>192.168.1.1</span>
 <button class="text-red-500 hover:text-red-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
 <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded">
 <span>10.0.0.2</span>
 <button class="text-red-500 hover:text-red-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- API Security -->
 <div class="flex items-start justify-between">
 <div class="flex-1">
 <h3 class="text-base font-medium text-gray-900">API Security</h3>
 <p class="text-sm text-gray-500 mt-1">
 Manage your API keys and access controls for Digiflazz integration.
 </p>
 <div class="mt-3">
 <div class="bg-gray-50 p-4 rounded-md">
 <div class="flex justify-between items-center">
 <div>
 <p class="text-sm font-medium">Digiflazz API Key</p>
 <p class="text-xs text-gray-500 mt-1">Last rotated: 3 days ago</p>
 </div>
 <button class="text-sm text-primary hover:text-primary-600">Rotate Key</button>
 </div>
 <div class="mt-3">
 <div class="flex items-center">
 <input type="password" value="dfz_1234567890abcdef" class="bg-white px-3 py-2 border border-gray-300 rounded-l-md shadow-sm focus:outline-none focus:ring-primary focus:border-primary sm:text-sm w-full" readonly>
 <button class="px-3 py-2 bg-gray-200 border border-l-0 border-gray-300 rounded-r-md hover:bg-gray-300">
 <i class="fas fa-eye"></i>
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Rate Limiting -->
 <div class="flex items-start justify-between">
 <div class="flex-1">
 <h3 class="text-base font-medium text-gray-900">Rate Limiting</h3>
 <p class="text-sm text-gray-500 mt-1">
 Protect against brute force attacks by limiting login attempts.
 </p>
 <div class="mt-3">
 <div class="flex items-center space-x-4">
 <div>
 <label class="block text-sm font-medium text-gray-700">Max Attempts</label>
 <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md">
 <option>3</option>
 <option selected>5</option>
 <option>10</option>
 </select>
 </div>
 <div>
 <label class="block text-sm font-medium text-gray-700">Lockout Time</label>
 <select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm rounded-md">
 <option>5 minutes</option>
 <option selected>15 minutes</option>
 <option>30 minutes</option>
 <option>1 hour</option>
 </select>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="mt-8 flex justify-end">
 <button type="button" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
 Cancel
 </button>
 <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
 Save Changes
 </button>
 </div>
 </div>
 </div>
 </main>
 </div>
 </div>
<!-- Security Modal -->
 <div id="securityModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-xl p-6 w-full max-w-2xl">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-xl font-bold">Advanced Security Settings</h3>
 <button id="closeSecurityModal" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
 <div class="space-y-6">
 <div>
 <h4 class="font-medium mb-2">Session Management</h4>
 <div class="bg-gray-50 p-4 rounded-lg">
 <div class="flex items-center justify-between mb-3">
 <div>
 <p class="font-medium">Active Sessions</p>
 <p class="text-sm text-gray-500">Manage your currently active login sessions</p>
 </div>
 <button class="text-sm text-primary hover:text-primary-600">View All</button>
 </div>
 <div class="space-y-3">
 <div class="flex items-center justify-between p-3 bg-white rounded border border-gray-200">
 <div>
 <p class="font-medium">Chrome on Windows</p>
 <p class="text-xs text-gray-500">192.168.1.1 - Active now</p>
 </div>
 <button class="text-red-500 hover:text-red-700 text-sm">
 <i class="fas fa-sign-out-alt mr-1"></i> Logout
 </button>
 </div>
 <div class="flex items-center justify-between p-3 bg-white rounded border border-gray-200">
 <div>
 <p class="font-medium">Safari on iPhone</p>
 <p class="text-xs text-gray-500">10.0.0.2 - 2 hours ago</p>
 </div>
 <button class="text-red-500 hover:text-red-700 text-sm">
 <i class="fas fa-sign-out-alt mr-1"></i> Logout
 </button>
 </div>
 </div>
 </div>
 </div>
<div>
 <h4 class="font-medium mb-2">Security Headers</h4>
 <div class="bg-gray-50 p-4 rounded-lg">
 <div class="space-y-3">
 <div class="flex items-center justify-between">
 <div>
 <p class="font-medium">Content Security Policy (CSP)</p>
 <p class="text-sm text-gray-500">Prevent XSS attacks by restricting resources</p>
 </div>
 <button type="button" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-primary transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2" role="switch" aria-checked="true">
 <span class="sr-only">Use setting</span>
 <span aria-hidden="true" class="translate-x-5 inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
 </button>
 </div>
 <div class="flex items-center justify-between">
 <div>
 <p class="font-medium">HTTP Strict Transport Security (HSTS)</p>
 <p class="text-sm text-gray-500">Force HTTPS connections</p>
 </div>
 <button type="button" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-primary transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2" role="switch" aria-checked="true">
 <span class="sr-only">Use setting</span>
 <span aria-hidden="true" class="translate-x-5 inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
 </button>
 </div>
 <div class="flex items-center justify-between">
 <div>
 <p class="font-medium">X-Frame-Options</p>
 <p class="text-sm text-gray-500">Prevent clickjacking attacks</p>
 </div>
 <button type="button" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-primary transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2" role="switch" aria-checked="true">
 <span class="sr-only">Use setting</span>
 <span aria-hidden="true" class="translate-x-5 inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
 </button>
 </div>
 </div>
 </div>
 </div>
<div>
 <h4 class="font-medium mb-2">Database Security</h4>
 <div class="bg-gray-50 p-4 rounded-lg">
 <div class="space-y-3">
 <div class="flex items-center justify-between">
 <div>
 <p class="font-medium">Automatic Backups</p>
 <p class="text-sm text-gray-500">Daily encrypted backups of your database</p>
 </div>
 <button type="button" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-primary transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2" role="switch" aria-checked="true">
 <span class="sr-only">Use setting</span>
 <span aria-hidden="true" class="translate-x-5 inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
 </button>
 </div>
 <div class="flex items-center justify-between">
 <div>
 <p class="font-medium">SQL Injection Protection</p>
 <p class="text-sm text-gray-500">Advanced filtering of SQL queries</p>
 </div>
 <button type="button" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-primary transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2" role="switch" aria-checked="true">
 <span class="sr-only">Use setting</span>
 <span aria-hidden="true" class="translate-x-5 inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
 </button>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class="mt-6 flex justify-end">
 <button id="saveSecuritySettings" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-600 transition">
 Save Security Settings
 </button>
 </div>
 </div>
 </div>
<!-- Login Modal (hidden by default) -->
 <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
 <div class="bg-white rounded-xl p-6 w-full max-w-md">
 <div class="flex justify-between items-center mb-6">
 <h3 class="text-xl font-bold">Admin Login</h3>
 <button id="closeLoginModal" class="text-gray-500 hover:text-gray-700">
 <i class="fas fa-times"></i>
 </button>
 </div>
 <form id="loginForm">
 <input type="hidden" name="csrf_token" value="random_csrf_token_123456">
<div class="mb-4">
 <label class="block text-gray-700 text-sm font-medium mb-2" for="username">
 Username
 </label>
 <input class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary" id="username" type="text" placeholder="Enter your username" name="username" required>
 </div>
<div class="mb-6">
 <label class="block text-gray-700 text-sm font-medium mb-2" for="password">
 Password
 </label>
 <div class="relative">
 <input class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary" id="password" type="password" placeholder="Enter your password" name="password" required>
 <button type="button" class="absolute right-3 top-2 text-gray-500 hover:text-gray-700" id="togglePassword">
 <i class="fas fa-eye"></i>
 </button>
 </div>
 </div>
<div class="flex items-center justify-between mb-4">
 <div class="flex items-center">
 <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
 <label for="remember-me" class="ml-2 block text-sm text-gray-700">
 Remember me
 </label>
 </div>
 <div class="text-sm">
 <a href="#" class="font-medium text-primary hover:text-primary-500">
 Forgot password?
 </a>
 </div>
 </div>
<div class="mb-4">
 <div class="g-recaptcha" data-sitekey="your_recaptcha_site_key"></div>
 </div>
<button type="submit" class="w-full bg-primary text-white py-2 px-4 rounded-md hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
 Sign In
 </button>
 </form>
 </div>
 </div>
<script>
 // Sidebar toggle functionality
 const sidebar = document.getElementById('sidebar');
 const contentArea = document.getElementById('contentArea');
 const toggleSidebar = document.getElementById('toggleSidebar');
 const mobileMenuButton = document.getElementById('mobileMenuButton');
toggleSidebar.addEventListener('click', () => {
 sidebar.classList.toggle('sidebar-collapsed');
 contentArea.classList.toggle('sidebar-expanded');
 contentArea.classList.toggle('sidebar-collapsed');
// Change icon based on state
 const icon = toggleSidebar.querySelector('i');
 if (sidebar.classList.contains('sidebar-collapsed')) {
 icon.classList.remove('fa-chevron-left');
 icon.classList.add('fa-chevron-right');
 } else {
 icon.classList.remove('fa-chevron-right');
 icon.classList.add('fa-chevron-left');
 }
 });
mobileMenuButton.addEventListener('click', () => {
 sidebar.classList.toggle('hidden');
 });
// Dropdown menus
 const notificationsButton = document.getElementById('notificationsButton');
 const notificationsDropdown = document.getElementById('notificationsDropdown');
 const userMenuButton = document.getElementById('userMenuButton');
 const userMenuDropdown = document.getElementById('userMenuDropdown');
notificationsButton.addEventListener('click', () => {
 notificationsDropdown.classList.toggle('hidden');
 userMenuDropdown.classList.add('hidden');
 });
userMenuButton.addEventListener('click', () => {
 userMenuDropdown.classList.toggle('hidden');
 notificationsDropdown.classList.add('hidden');
 });
// Close dropdowns when clicking outside
 document.addEventListener('click', (e) => {
 if (!notificationsButton.contains(e.target) && !notificationsDropdown.contains(e.target)) {
 notificationsDropdown.classList.add('hidden');
 }
if (!userMenuButton.contains(e.target) && !userMenuDropdown.contains(e.target)) {
 userMenuDropdown.classList.add('hidden');
 }
 });
// Modal functionality
 const loginModal = document.getElementById('loginModal');
 const closeLoginModal = document.getElementById('closeLoginModal');
 const securityModal = document.getElementById('securityModal');
 const closeSecurityModal = document.getElementById('closeSecurityModal');
 const saveSecuritySettings = document.getElementById('saveSecuritySettings');
// Show login modal (for demo purposes)
 function showLoginModal() {
 loginModal.classList.remove('hidden');
 }
// Close login modal
 closeLoginModal.addEventListener('click', () => {
 loginModal.classList.add('hidden');
 });
// Show security modal (for demo purposes)
 function showSecurityModal() {
 securityModal.classList.remove('hidden');
 }
// Close security modal
 closeSecurityModal.addEventListener('click', () => {
 securityModal.classList.add('hidden');
 });
// Save security settings
 saveSecuritySettings.addEventListener('click', () => {
 alert('Security settings saved successfully!');
 securityModal.classList.add('hidden');
 });
// Login form submission
 const loginForm = document.getElementById('loginForm');
 const togglePassword = document.getElementById('togglePassword');
 const passwordInput = document.getElementById('password');
togglePassword.addEventListener('click', () => {
 const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
 passwordInput.setAttribute('type', type);
// Toggle eye icon
 const icon = togglePassword.querySelector('i');
 if (type === 'password') {
 icon.classList.remove('fa-eye-slash');
 icon.classList.add('fa-eye');
 } else {
 icon.classList.remove('fa-eye');
 icon.classList.add('fa-eye-slash');
 }
 });
loginForm.addEventListener('submit', (e) => {
 e.preventDefault();
// Simulate login process
 const username = document.getElementById('username').value;
 const password = document.getElementById('password').value;
// Basic validation
 if (username === 'admin' && password === 'admin123') {
 alert('Login successful! Redirecting to dashboard...');
 loginModal.classList.add('hidden');
 } else {
 alert('Invalid username or password. Please try again.');
 }
 });
// Security measures implementation
// 1. CSRF Protection
 function generateCSRFToken() {
 return 'random_csrf_token_' + Math.random().toString(36).substr(2, 10);
 }
// 2. Rate Limiting for API calls
 let apiCallCount = 0;
 const maxApiCalls = 10; // Max 10 calls per minute
 const apiCallResetTime = 60000; // 1 minute
function callDigiflazzAPI() {
 if (apiCallCount >= maxApiCalls) {
 console.error('API rate limit exceeded. Please wait.');
 return;
 }
apiCallCount++;
 setTimeout(() => {
 apiCallCount--;
 }, apiCallResetTime);
// Actual API call would go here
 console.log('Calling Digiflazz API...');
 }
// 3. Input Sanitization
 function sanitizeInput(input) {
 return input.replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
// 4. Password Strength Checker
 function checkPasswordStrength(password) {
 const strongRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/;
 return strongRegex.test(password);
 }
// 5. Session Management
 function startSession() {
 const sessionId = 'session_' + Math.random().toString(36).substr(2, 16);
 localStorage.setItem('currentSession', sessionId);
 return sessionId;
 }
function endSession() {
 localStorage.removeItem('currentSession');
 }
function validateSession() {
 const sessionId = localStorage.getItem('currentSession');
 return !!sessionId; // In real app, would validate with server
 }
// 6. Content Security Policy (would be set via HTTP headers in real app)
 const csp = {
 'default-src': "'self'",
 'script-src': "'self' https://cdn.tailwindcss.com https://cdnjs.cloudflare.com",
 'style-src': "'self' https://cdn.tailwindcss.com https://cdnjs.cloudflare.com 'unsafe-inline'",
 'img-src': "'self' data: https://via.placeholder.com",
 'font-src': "'self' https://fonts.gstatic.com https://cdnjs.cloudflare.com",
 'connect-src': "'self' https://api.digiflazz.com"
 };
console.log('Content Security Policy:', csp);
// 7. HTTP Security Headers (would be set server-side in real app)
 const securityHeaders = {
 'X-Content-Type-Options': 'nosniff',
 'X-Frame-Options': 'DENY',
 'X-XSS-Protection': '1; mode=block',
 'Strict-Transport-Security': 'max-age=31536000; includeSubDomains',
 'Referrer-Policy': 'strict-origin-when-cross-origin'
 };
console.log('Security Headers:', securityHeaders);
// 8. Log important security events
 function logSecurityEvent(event) {
 const timestamp = new Date().toISOString();
 console.log(`[Security Event] ${timestamp}: ${event}`);
 // In real app, would send to logging service
 }
// Example security events
 logSecurityEvent('Admin dashboard loaded');
 logSecurityEvent('Security settings initialized');
// Initialize session
 if (!validateSession()) {
 // showLoginModal();
 }
 </script>
<!-- reCAPTCHA (would be uncommented in production) -->
 <!-- <script src="https://www.google.com/recaptcha/api.js" async defer></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=Rxyzalss/topup" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>