<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Admin System Settings & Alerts</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#195de6",
"background-light": "#f6f6f8",
"background-dark": "#111621",
"card-dark": "#1a202e", // Slightly lighter than background-dark for cards
},
fontFamily: {
"display": ["Inter", "sans-serif"]
},
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
},
},
}
</script>
<style>
body {
font-family: 'Inter', sans-serif;
}
/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #111621;
}
::-webkit-scrollbar-thumb {
background: #2d3748;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #4a5568;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 overflow-hidden">
<div class="flex h-screen w-full flex-row overflow-hidden">
<!-- Side Navigation -->
<div class="hidden lg:flex w-72 flex-col border-r border-slate-200 dark:border-slate-800 bg-background-light dark:bg-background-dark h-full shrink-0">
<div class="flex h-full flex-col justify-between p-4">
<div class="flex flex-col gap-4">
<div class="flex gap-3 items-center px-2 py-2">
<div class="bg-center bg-no-repeat bg-cover rounded-full h-10 w-10 ring-2 ring-primary/50" data-alt="Admin user profile picture" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAkePeIsyheEevpx9x5_cMtMAycuTQYzAweyxB3suIA2M6_0lCMH_mm-n_QJPmFPwluI3WLILMKhYDYwX8MYXNswFLRB_8-X-aPZaIhrqhiPrAs8dGsk-6k5p5tVDRe2dn6DzzLGAz6wbEI2JV3s4y8c6kzMdaMzP2RD2X8EdqJABbd6zUZw4mdmOfs8aoY-dzG0QjMshkhnoGuyGfYqDY39uyEjgDM1AtVZGIRAfT2hyY6JhSVCOZNwzQcnC7prF0UXj-IcN6PdnIG");'></div>
<div class="flex flex-col">
<h1 class="text-slate-900 dark:text-white text-base font-semibold leading-normal">Admin Portal</h1>
<p class="text-slate-500 dark:text-slate-400 text-xs font-medium leading-normal">Super Admin Access</p>
</div>
</div>
<div class="h-px bg-slate-200 dark:bg-slate-800 my-1"></div>
<div class="flex flex-col gap-1">
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors group" href="#">
<span class="material-symbols-outlined text-slate-500 dark:text-slate-400 group-hover:text-primary transition-colors">dashboard</span>
<p class="text-slate-600 dark:text-slate-300 text-sm font-medium">Dashboard</p>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors group" href="#">
<span class="material-symbols-outlined text-slate-500 dark:text-slate-400 group-hover:text-primary transition-colors">group</span>
<p class="text-slate-600 dark:text-slate-300 text-sm font-medium">User Management</p>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors group" href="#">
<span class="material-symbols-outlined text-slate-500 dark:text-slate-400 group-hover:text-primary transition-colors">sports_esports</span>
<p class="text-slate-600 dark:text-slate-300 text-sm font-medium">Quiz Content</p>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors group" href="#">
<span class="material-symbols-outlined text-slate-500 dark:text-slate-400 group-hover:text-primary transition-colors">payments</span>
<p class="text-slate-600 dark:text-slate-300 text-sm font-medium">Financials</p>
</a>
<div class="my-2 h-px bg-slate-200 dark:bg-slate-800 mx-3"></div>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-primary/10 border border-primary/20" href="#">
<span class="material-symbols-outlined text-primary">settings</span>
<p class="text-primary text-sm font-semibold">System Settings</p>
</a>
</div>
</div>
<div class="flex flex-col gap-3">
<div class="bg-gradient-to-br from-indigo-900 to-slate-900 rounded-xl p-4 border border-indigo-500/20 relative overflow-hidden">
<div class="absolute top-0 right-0 p-2 opacity-10">
<span class="material-symbols-outlined text-white text-6xl">bolt</span>
</div>
<p class="text-indigo-200 text-xs font-semibold mb-1 uppercase tracking-wider">Server Status</p>
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
<p class="text-white text-sm font-medium">Healthy</p>
</div>
<p class="text-indigo-300/60 text-xs mt-2">Latency: 24ms</p>
</div>
<button class="flex items-center justify-center gap-2 w-full py-2 text-slate-500 dark:text-slate-400 hover:text-red-500 dark:hover:text-red-400 text-sm font-medium transition-colors">
<span class="material-symbols-outlined text-[18px]">logout</span>
Sign Out
</button>
</div>
</div>
</div>
<!-- Main Content Area -->
<main class="flex-1 flex flex-col h-full overflow-hidden bg-background-light dark:bg-background-dark relative">
<!-- Top Header Overlay -->
<header class="h-16 shrink-0 border-b border-slate-200 dark:border-slate-800 bg-background-light/80 dark:bg-background-dark/80 backdrop-blur-md flex items-center justify-between px-6 z-10">
<h2 class="text-xl font-bold tracking-tight text-slate-900 dark:text-white flex items-center gap-3">
<span class="material-symbols-outlined text-primary">tune</span>
System Control Center
</h2>
<div class="flex items-center gap-4">
<div class="flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
<span class="material-symbols-outlined text-slate-500 text-sm">schedule</span>
<span class="text-xs font-mono font-medium text-slate-600 dark:text-slate-300">UTC 14:35:22</span>
</div>
<button class="relative p-2 text-slate-500 hover:text-primary transition-colors rounded-full hover:bg-slate-100 dark:hover:bg-slate-800">
<span class="material-symbols-outlined">notifications</span>
<span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-background-light dark:border-background-dark"></span>
</button>
</div>
</header>
<!-- Scrollable Content -->
<div class="flex-1 overflow-y-auto p-6 md:p-8 scroll-smooth">
<div class="max-w-7xl mx-auto space-y-8">
<!-- Hero / Stats Section -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white dark:bg-card-dark rounded-xl p-5 border border-slate-200 dark:border-slate-700/50 shadow-sm flex flex-col justify-between h-32">
<div class="flex justify-between items-start">
<div>
<p class="text-slate-500 dark:text-slate-400 text-xs font-semibold uppercase tracking-wider">Active Sessions</p>
<h3 class="text-2xl font-bold text-slate-900 dark:text-white mt-1">1,248</h3>
</div>
<div class="p-2 bg-emerald-500/10 rounded-lg">
<span class="material-symbols-outlined text-emerald-500">videogame_asset</span>
</div>
</div>
<div class="w-full bg-slate-100 dark:bg-slate-800 rounded-full h-1 mt-2">
<div class="bg-emerald-500 h-1 rounded-full" style="width: 75%"></div>
</div>
</div>
<div class="bg-white dark:bg-card-dark rounded-xl p-5 border border-slate-200 dark:border-slate-700/50 shadow-sm flex flex-col justify-between h-32">
<div class="flex justify-between items-start">
<div>
<p class="text-slate-500 dark:text-slate-400 text-xs font-semibold uppercase tracking-wider">Pending Reports</p>
<h3 class="text-2xl font-bold text-slate-900 dark:text-white mt-1">14</h3>
</div>
<div class="p-2 bg-amber-500/10 rounded-lg">
<span class="material-symbols-outlined text-amber-500">flag</span>
</div>
</div>
<p class="text-xs text-slate-500 dark:text-slate-400 mt-2">Requires moderator attention</p>
</div>
<div class="bg-white dark:bg-card-dark rounded-xl p-5 border border-slate-200 dark:border-slate-700/50 shadow-sm flex flex-col justify-between h-32 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-r from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
<div class="flex justify-between items-start relative z-10">
<div>
<p class="text-slate-500 dark:text-slate-400 text-xs font-semibold uppercase tracking-wider">Next Quiz Event</p>
<h3 class="text-xl font-bold text-slate-900 dark:text-white mt-1">02h 15m</h3>
</div>
<div class="p-2 bg-primary/10 rounded-lg">
<span class="material-symbols-outlined text-primary">event_upcoming</span>
</div>
</div>
<p class="text-xs text-primary font-medium mt-2 relative z-10">"Mega Trivia Night" starts soon</p>
</div>
</div>
<div class="grid grid-cols-1 xl:grid-cols-3 gap-8">
<!-- Left Column: Broadcast Center -->
<div class="xl:col-span-2 flex flex-col gap-6">
<div class="flex items-center justify-between">
<h3 class="text-lg font-bold text-slate-900 dark:text-white">Broadcast Center</h3>
<button class="text-xs text-primary hover:text-primary/80 font-medium flex items-center gap-1">
View History <span class="material-symbols-outlined text-sm">arrow_forward</span>
</button>
</div>
<!-- Compose Card -->
<div class="bg-white dark:bg-card-dark rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
<div class="h-32 bg-cover bg-center relative" data-alt="Abstract digital network connections background" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAwBSg631njzZVGddVNDQeJsIoPzV0Yl1PIMQNqftAjiXuON9UeCd1GzfkX9SG77cGSmzfy8WYsW21cBVCcWfpcGl2KtNnfks6dYlJiYkmxYp4rdumAFoG83JxBW5g-_CU6gpAIgydg_Vd6PoqkYxKM6ar3RWXVRhl6xwG6246OG4w6Pc8eaBmYCevfMlvfBI3LGp5UdyGZwCA1NP1s9uoZjEsH5nS1vHFEiQqZCjuUpiz7lRg-bnk9BvleReM0E4ba0UCeoXaOwzDC');">
<div class="absolute inset-0 bg-gradient-to-t from-white dark:from-card-dark via-transparent to-transparent"></div>
<div class="absolute inset-0 bg-slate-900/40 dark:bg-black/40"></div>
<div class="absolute bottom-4 left-6">
<h4 class="text-white text-xl font-bold shadow-black drop-shadow-md">Compose Notification</h4>
<p class="text-slate-200 text-sm">Send alerts to the entire userbase or specific segments.</p>
</div>
</div>
<div class="p-6 space-y-6">
<!-- Type Selector -->
<div class="flex flex-col sm:flex-row gap-4 p-1 bg-slate-100 dark:bg-slate-800/50 rounded-lg w-fit">
<button class="px-4 py-2 rounded-md bg-white dark:bg-slate-700 shadow-sm text-slate-900 dark:text-white text-sm font-semibold flex items-center gap-2 border border-slate-200 dark:border-slate-600 transition-all">
<span class="material-symbols-outlined text-amber-500 text-lg">warning</span>
System Alert
</button>
<button class="px-4 py-2 rounded-md text-slate-500 dark:text-slate-400 hover:bg-white/50 dark:hover:bg-slate-700/50 hover:text-slate-700 dark:hover:text-slate-200 text-sm font-medium flex items-center gap-2 transition-all">
<span class="material-symbols-outlined text-lg">notifications_active</span>
Push Notification
</button>
</div>
<!-- Form Inputs -->
<div class="space-y-4">
<div>
<label class="block text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1.5">Target Audience</label>
<select class="w-full bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg px-4 py-2.5 text-slate-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-shadow">
<option>All Active Users</option>
<option>VIP Members Only</option>
<option>Sub-Vendors & Partners</option>
<option>Beta Testers</option>
</select>
</div>
<div>
<label class="block text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1.5">Alert Title</label>
<input class="w-full bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg px-4 py-2.5 text-slate-900 dark:text-white placeholder-slate-400 focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-shadow" placeholder="e.g., Scheduled Maintenance Warning" type="text"/>
</div>
<div>
<label class="block text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1.5">Message Content</label>
<textarea class="w-full bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg px-4 py-2.5 text-slate-900 dark:text-white placeholder-slate-400 focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-shadow resize-none" placeholder="Type your message here..." rows="4"></textarea>
<div class="flex justify-between mt-1 text-xs text-slate-400">
<span>Supports basic markdown</span>
<span>0/240 chars</span>
</div>
</div>
</div>
<!-- Action Footer -->
<div class="flex flex-col sm:flex-row items-center justify-between gap-4 pt-4 border-t border-slate-100 dark:border-slate-700/50">
<div class="flex items-center gap-2 w-full sm:w-auto">
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-2.5 text-slate-400 text-lg">calendar_today</span>
<input class="pl-10 pr-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg text-sm text-slate-600 dark:text-slate-300 focus:ring-1 focus:ring-primary outline-none w-full" type="datetime-local"/>
</div>
</div>
<div class="flex gap-3 w-full sm:w-auto">
<button class="flex-1 sm:flex-none px-4 py-2.5 rounded-lg border border-slate-200 dark:border-slate-600 text-slate-600 dark:text-slate-300 font-medium hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors text-sm">Preview</button>
<button class="flex-1 sm:flex-none px-6 py-2.5 rounded-lg bg-primary hover:bg-blue-600 text-white font-semibold shadow-lg shadow-blue-500/20 transition-all flex items-center justify-center gap-2 text-sm">
<span class="material-symbols-outlined text-lg">send</span>
Send Broadcast
</button>
</div>
</div>
</div>
</div>
<!-- Recent Broadcasts Table -->
<div class="bg-white dark:bg-card-dark rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
<div class="px-6 py-4 border-b border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/30">
<h4 class="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-wider">Recent Activity Log</h4>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left text-sm text-slate-500 dark:text-slate-400">
<thead class="bg-slate-50 dark:bg-slate-800/50 text-xs uppercase font-semibold text-slate-500 dark:text-slate-400">
<tr>
<th class="px-6 py-3">Type</th>
<th class="px-6 py-3">Message Title</th>
<th class="px-6 py-3">Audience</th>
<th class="px-6 py-3">Sent At</th>
<th class="px-6 py-3 text-right">Reach</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-200 dark:divide-slate-700">
<tr class="hover:bg-slate-50 dark:hover:bg-slate-800/30 transition-colors">
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400">
Alert
</span>
</td>
<td class="px-6 py-4 font-medium text-slate-900 dark:text-white">Server Maintenance</td>
<td class="px-6 py-4">All Users</td>
<td class="px-6 py-4">Today, 10:00 AM</td>
<td class="px-6 py-4 text-right">14.2k</td>
</tr>
<tr class="hover:bg-slate-50 dark:hover:bg-slate-800/30 transition-colors">
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400">
Push
</span>
</td>
<td class="px-6 py-4 font-medium text-slate-900 dark:text-white">New Quiz: Cyberpunk 2077</td>
<td class="px-6 py-4">Gamers</td>
<td class="px-6 py-4">Yesterday, 4:30 PM</td>
<td class="px-6 py-4 text-right">8.5k</td>
</tr>
<tr class="hover:bg-slate-50 dark:hover:bg-slate-800/30 transition-colors">
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400">
Update
</span>
</td>
<td class="px-6 py-4 font-medium text-slate-900 dark:text-white">Commission Rate Adjustment</td>
<td class="px-6 py-4">Sub-Vendors</td>
<td class="px-6 py-4">Oct 24, 09:15 AM</td>
<td class="px-6 py-4 text-right">120</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Right Column: System Configuration -->
<div class="flex flex-col gap-6">
<h3 class="text-lg font-bold text-slate-900 dark:text-white">Global Configuration</h3>
<!-- Sub-Vendor Settings -->
<div class="bg-white dark:bg-card-dark rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm p-6 relative overflow-hidden">
<!-- Decorative background glow -->
<div class="absolute top-0 right-0 -mt-4 -mr-4 w-24 h-24 bg-primary/10 rounded-full blur-2xl"></div>
<div class="flex items-center gap-3 mb-6">
<div class="p-2 bg-indigo-500/10 rounded-lg text-indigo-500">
<span class="material-symbols-outlined">percent</span>
</div>
<div>
<h4 class="text-base font-bold text-slate-900 dark:text-white">Sub-Vendor Settings</h4>
<p class="text-xs text-slate-500 dark:text-slate-400">Manage global revenue splits.</p>
</div>
</div>
<div class="space-y-4">
<div>
<label class="block text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-2">Global Commission Rate</label>
<div class="flex items-center gap-2">
<input class="w-24 bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-lg px-3 py-2 text-lg font-bold text-slate-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent outline-none text-center" type="number" value="15"/>
<span class="text-slate-400 font-medium">%</span>
</div>
<p class="text-xs text-slate-500 mt-2 leading-relaxed">
Warning: Changing this value updates the payout calculation for <span class="text-slate-800 dark:text-slate-200 font-semibold">all active sub-vendors</span> immediately.
</p>
</div>
<button class="w-full py-2.5 rounded-lg border border-primary text-primary hover:bg-primary/5 font-semibold text-sm transition-colors mt-2">
Update Rates
</button>
</div>
</div>
<!-- Maintenance Mode -->
<div class="bg-white dark:bg-card-dark rounded-xl border border-red-200 dark:border-red-900/30 shadow-sm p-6 relative overflow-hidden group">
<div class="absolute inset-0 bg-red-500/5 dark:bg-red-500/5 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"></div>
<div class="flex items-center gap-3 mb-6">
<div class="p-2 bg-red-500/10 rounded-lg text-red-500">
<span class="material-symbols-outlined">lock</span>
</div>
<div>
<h4 class="text-base font-bold text-slate-900 dark:text-white">Maintenance Mode</h4>
<p class="text-xs text-slate-500 dark:text-slate-400">Emergency platform lockout.</p>
</div>
</div>
<div class="flex items-center justify-between bg-slate-50 dark:bg-slate-900/50 p-4 rounded-lg border border-slate-200 dark:border-slate-700/50">
<div class="flex flex-col gap-1">
<span class="text-sm font-semibold text-slate-900 dark:text-slate-200">System Status</span>
<span class="text-xs text-emerald-500 font-bold uppercase tracking-wide">Live</span>
</div>
<!-- Toggle Switch -->
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only peer" type="checkbox" value=""/>
<div class="w-14 h-7 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-red-300 dark:peer-focus:ring-red-800 rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-red-600"></div>
</label>
</div>
<div class="mt-4 flex gap-2 items-start">
<span class="material-symbols-outlined text-red-500 text-lg mt-0.5">info</span>
<p class="text-xs text-slate-500 dark:text-slate-400 leading-snug">
Activating this will instantly disconnect all active quiz sessions and display a maintenance screen to users.
</p>
</div>
</div>
<!-- System Health Detail -->
<div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl p-6 text-white shadow-lg relative overflow-hidden">
<!-- Background Pattern -->
<div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(#4f46e5 1px, transparent 1px); background-size: 20px 20px;"></div>
<h4 class="text-sm font-bold uppercase tracking-wider mb-4 relative z-10 text-slate-300">Server Load</h4>
<div class="flex items-end gap-2 mb-2 relative z-10">
<span class="text-3xl font-black">24%</span>
<span class="text-sm text-slate-400 mb-1">Capacity used</span>
</div>
<div class="w-full bg-slate-700/50 rounded-full h-2 mb-4 relative z-10">
<div class="bg-primary h-2 rounded-full shadow-[0_0_10px_rgba(25,93,230,0.5)]" style="width: 24%"></div>
</div>
<div class="grid grid-cols-2 gap-4 relative z-10">
<div>
<p class="text-xs text-slate-400">Memory</p>
<p class="text-sm font-semibold">8.2 GB</p>
</div>
<div>
<p class="text-xs text-slate-400">Uptime</p>
<p class="text-sm font-semibold">14d 2h</p>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="mt-12 mb-6 text-center text-xs text-slate-400 dark:text-slate-600">
<p>© 2023 Admin Portal v2.4.0. All rights reserved. <span class="mx-2">|</span> <a class="hover:text-primary" href="#">Docs</a> <span class="mx-2">|</span> <a class="hover:text-primary" href="#">Support</a></p>
</footer>
</div>
</main>
</div>
</body></html>