<!-- FONT AWESOME LINK (Apne head tag me dal lena agar na ho toh) -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> -->
<!-- BACKGROUND OVERLAY (Untouchable Blur & Shadow) -->
<!-- Z-index high rakha hai taaki baki puri site ke upar aaye -->
<div class="fixed inset-0 bg-slate-900/40 dark:bg-black/60 backdrop-blur-sm z-40 transition-opacity duration-500"></div>
<!-- TOP-DOWN LIQUID GLASS MENU PANEL -->
<!-- Isko JS se translate-y-0 (open) aur -translate-y-full (close) karna -->
<div class="fixed top-0 left-0 w-full max-h-[90vh] overflow-y-auto bg-gradient-to-b from-white/60 to-white/20 dark:from-slate-900/80 dark:to-slate-800/40 backdrop-blur-2xl border-b border-white/40 dark:border-white/10 shadow-[0_20px_50px_rgba(0,0,0,0.15)] dark:shadow-[0_20px_50px_rgba(0,0,0,0.5)] z-50 rounded-b-[2.5rem] p-6 transition-transform duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] ring-1 ring-white/30 dark:ring-white/5">
<!-- INNER CONTAINER -->
<div class="max-w-md mx-auto flex flex-col gap-5 relative">
<!-- PROFILE SECTION -->
<div class="flex items-center gap-4 p-4 rounded-3xl bg-white/30 dark:bg-black/30 hover:bg-white/40 dark:hover:bg-black/40 transition-all duration-300 border border-white/40 dark:border-white/10 shadow-sm group cursor-pointer">
<div class="w-16 h-16 rounded-full bg-gradient-to-tr from-blue-500 to-cyan-400 p-0.5 shadow-lg shadow-blue-500/30 group-hover:scale-105 transition-transform duration-300">
<div class="w-full h-full bg-white dark:bg-slate-900 rounded-full flex items-center justify-center overflow-hidden">
<i class="fa-solid fa-user text-2xl text-blue-500 dark:text-blue-400 group-hover:scale-110 transition-transform duration-300"></i>
</div>
</div>
<div class="flex-1">
<h2 class="text-xl font-bold text-slate-800 dark:text-white tracking-wide">Mannu</h2>
<p class="text-xs font-semibold text-blue-600 dark:text-cyan-400 uppercase tracking-widest">Admin</p>
</div>
<a href="profile.php" class="h-11 w-11 rounded-full flex items-center justify-center bg-blue-500/10 dark:bg-blue-500/20 text-blue-600 dark:text-blue-400 hover:bg-blue-500 hover:text-white hover:shadow-lg hover:shadow-blue-500/40 active:scale-90 transition-all duration-300">
<i class="fa-solid fa-pen"></i>
</a>
</div>
<!-- QUICK ACTION BUTTONS (GRID) -->
<div class="grid grid-cols-2 gap-4">
<!-- Edit Profile Button -->
<a href="profile.php" class="group relative overflow-hidden flex flex-col items-center justify-center gap-3 p-5 rounded-3xl bg-white/20 dark:bg-white/5 hover:bg-white/40 dark:hover:bg-blue-900/30 border border-white/30 dark:border-white/5 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-tr from-blue-400/0 to-blue-400/0 group-hover:from-blue-400/10 group-hover:to-cyan-400/10 transition-colors duration-300"></div>
<div class="w-12 h-12 rounded-2xl bg-blue-100/50 dark:bg-slate-800/50 text-blue-600 dark:text-blue-400 flex items-center justify-center group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300 shadow-inner">
<i class="fa-solid fa-user-gear text-xl"></i>
</div>
<span class="text-sm font-bold text-slate-700 dark:text-slate-200">Edit Profile</span>
</a>
<!-- Friends Button -->
<a href="frends.php" class="group relative overflow-hidden flex flex-col items-center justify-center gap-3 p-5 rounded-3xl bg-white/20 dark:bg-white/5 hover:bg-white/40 dark:hover:bg-indigo-900/30 border border-white/30 dark:border-white/5 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-tr from-indigo-400/0 to-indigo-400/0 group-hover:from-indigo-400/10 group-hover:to-purple-400/10 transition-colors duration-300"></div>
<div class="w-12 h-12 rounded-2xl bg-indigo-100/50 dark:bg-slate-800/50 text-indigo-600 dark:text-indigo-400 flex items-center justify-center group-hover:scale-110 group-hover:-rotate-3 transition-transform duration-300 shadow-inner">
<i class="fa-solid fa-users text-xl"></i>
</div>
<span class="text-sm font-bold text-slate-700 dark:text-slate-200">Friends</span>
</a>
<!-- Traffic Button -->
<a href="traffic.php" class="group relative overflow-hidden flex flex-col items-center justify-center gap-3 p-5 rounded-3xl bg-white/20 dark:bg-white/5 hover:bg-white/40 dark:hover:bg-emerald-900/30 border border-white/30 dark:border-white/5 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-tr from-emerald-400/0 to-emerald-400/0 group-hover:from-emerald-400/10 group-hover:to-teal-400/10 transition-colors duration-300"></div>
<div class="w-12 h-12 rounded-2xl bg-emerald-100/50 dark:bg-slate-800/50 text-emerald-600 dark:text-emerald-400 flex items-center justify-center group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300 shadow-inner">
<i class="fa-solid fa-chart-line text-xl"></i>
</div>
<span class="text-sm font-bold text-slate-700 dark:text-slate-200">Traffic</span>
</a>
<!-- Logout Button -->
<a href="logout.php" class="group relative overflow-hidden flex flex-col items-center justify-center gap-3 p-5 rounded-3xl bg-white/20 dark:bg-white/5 hover:bg-red-50/50 dark:hover:bg-red-900/30 border border-white/30 dark:border-white/5 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-tr from-red-400/0 to-red-400/0 group-hover:from-red-400/10 group-hover:to-orange-400/10 transition-colors duration-300"></div>
<div class="w-12 h-12 rounded-2xl bg-red-100/50 dark:bg-slate-800/50 text-red-600 dark:text-red-400 flex items-center justify-center group-hover:scale-110 group-hover:translate-x-1 transition-transform duration-300 shadow-inner">
<i class="fa-solid fa-right-from-bracket text-xl"></i>
</div>
<span class="text-sm font-bold text-red-600 dark:text-red-400">Logout</span>
</a>
</div>
<!-- CONTROLS CONTAINER (Theme & Glass Liquid Slider) -->
<div class="bg-white/30 dark:bg-black/30 p-5 rounded-3xl border border-white/40 dark:border-white/10 shadow-inner space-y-6">
<!-- Dark / Light Mode One-Click Toggles -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<i class="fa-solid fa-palette text-blue-500 dark:text-blue-400"></i>
<span class="text-sm font-bold text-slate-700 dark:text-slate-200 uppercase tracking-wider">Appearance</span>
</div>
<div class="flex gap-2 p-1 bg-white/40 dark:bg-black/40 rounded-full shadow-inner border border-white/30 dark:border-white/5">
<!-- Light Mode Button -->
<button class="w-10 h-10 rounded-full bg-white dark:bg-transparent text-yellow-500 dark:text-gray-400 hover:text-yellow-600 hover:scale-105 active:scale-95 transition-all duration-300 shadow-sm dark:shadow-none">
<i class="fa-solid fa-sun text-lg"></i>
</button>
<!-- Dark Mode Button -->
<button class="w-10 h-10 rounded-full bg-transparent dark:bg-slate-800 text-gray-500 dark:text-blue-300 hover:text-blue-400 hover:scale-105 active:scale-95 transition-all duration-300 shadow-none dark:shadow-sm border border-transparent dark:border-white/10">
<i class="fa-solid fa-moon text-lg"></i>
</button>
</div>
</div>
<!-- Intensity / Theme Liquid Slider -->
<div class="space-y-3">
<div class="flex justify-between items-center text-xs font-bold text-slate-600 dark:text-slate-400">
<span class="flex items-center gap-1.5">
<i class="fa-solid fa-droplet text-blue-500"></i> Liquid Intensity
</span>
<span class="bg-white/50 dark:bg-black/50 px-2 py-1 rounded-md text-blue-600 dark:text-cyan-400 border border-white/40 dark:border-white/10">80%</span>
</div>
<!-- Custom Tailwind Slider -->
<div class="relative w-full h-3 bg-white/40 dark:bg-black/50 rounded-full border border-white/50 dark:border-white/10 overflow-hidden flex items-center shadow-inner group">
<div class="absolute left-0 h-full w-[80%] bg-gradient-to-r from-blue-400 to-cyan-400 rounded-full group-hover:opacity-90 transition-opacity"></div>
<input type="range" min="0" max="100" value="80" class="absolute w-full h-full opacity-0 cursor-pointer z-10">
<!-- Custom Thumb Indicator -->
<div class="absolute left-[80%] -ml-2 w-4 h-4 bg-white rounded-full shadow-[0_0_10px_rgba(0,0,0,0.3)] pointer-events-none group-hover:scale-125 transition-transform duration-300 z-0"></div>
</div>
</div>
</div>
<!-- BOTTOM SWIPE HANDLE (iOS Style) -->
<div class="w-full flex justify-center mt-2 group cursor-pointer pb-2">
<div class="w-16 h-1.5 bg-slate-400/40 dark:bg-slate-500/50 rounded-full group-hover:w-24 group-hover:bg-blue-500/60 transition-all duration-300"></div>
</div>
</div>
</div>