Auto commit: 2026-02-15T16:57:46.559Z

index.php

@@ -127,21 +127,50 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
 
         .glass-card {
             background: var(--glass-bg);
-            backdrop-filter: blur(8px);
+            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(8px);
+            -webkit-backdrop-filter: blur(12px);
-            border: 1px solid var(--glass-border);
+            border: 2px solid transparent;
-            border-radius: 24px;
+            border-radius: 32px;
             padding: 2.5rem;
-            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+            box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4);
+            position: relative;
+            background-clip: padding-box;
+            overflow: hidden;
+            transition: all 0.5s ease;
+        }
+
+        /* Animated colorful border */
+        .glass-card::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: 32px;
+            padding: 2px; /* thickness */
+            background: linear-gradient(45deg, #00e676, #38bdf8, #facc15, #f472b6, #00e676);
+            background-size: 400% 400%;
+            -webkit-mask: 
+                linear-gradient(#fff 0 0) content-box, 
+                linear-gradient(#fff 0 0);
+            -webkit-mask-composite: xor; 
+            mask-composite: exclude;
+            pointer-events: none;
+            animation: gradient-border 8s linear infinite;
+        }
+
+        @keyframes gradient-border {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
         }
 
         .brand h1 {
-            font-size: 2.5rem;
+            font-size: 2.8rem;
-            font-weight: 700;
+            font-weight: 800;
             margin: 0 0 0.5rem;
-            background: linear-gradient(to right, #fff, var(--primary-color));
+            background: linear-gradient(to right, #fff, var(--primary-color), var(--accent-color));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
+            letter-spacing: -1px;
         }
 
         .brand-logo {
@@ -211,34 +240,62 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
         }
 
         .play-btn {
-            width: 64px;
+            width: 72px;
-            height: 64px;
+            height: 72px;
             border-radius: 50%;
-            background: var(--primary-color);
+            background: linear-gradient(135deg, var(--primary-color), #0ea5e9);
             border: none;
             color: #fff;
-            font-size: 1.5rem;
+            font-size: 2rem;
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
-            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-            box-shadow: 0 4px 15px rgba(56, 189, 248, 0.4);
+            box-shadow: 0 0 20px rgba(56, 189, 248, 0.4), inset 0 0 10px rgba(255,255,255,0.2);
+            position: relative;
+        }
+
+        .play-btn::after {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            border: 2px solid var(--primary-color);
+            opacity: 0;
+            transition: all 0.4s;
+        }
+
+        .play-btn:hover::after {
+            opacity: 1;
+            transform: scale(1.2);
         }
 
         .play-btn.playing {
-            background: #ff4444 !important;
+            background: linear-gradient(135deg, #ff4444, #cc0000) !important;
-            box-shadow: 0 4px 20px rgba(255, 68, 68, 0.5);
+            box-shadow: 0 0 25px rgba(255, 68, 68, 0.6);
             transform: scale(1.1);
             animation: pulse-button 1.5s infinite;
         }
 
         @keyframes pulse-button {
             0% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7); }
-            70% { box-shadow: 0 0 0 15px rgba(255, 68, 68, 0); }
+            70% { box-shadow: 0 0 0 20px rgba(255, 68, 68, 0); }
             100% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0); }
         }
 
+        .now-playing {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            background: rgba(255, 255, 255, 0.05);
+            padding: 1.2rem;
+            border-radius: 16px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
+        }
+
         .play-btn:hover {
             transform: scale(1.05);
             background: #0ea5e9;
@@ -455,6 +512,22 @@ $facebook_link = "https://www.facebook.com/profile.php?id=61587890927489";
             justify-content: center;
             text-decoration: none;
             transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            position: relative;
+        }
+
+        .social-float::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: 50%;
+            padding: 3px;
+            background: linear-gradient(45deg, #00e676, #38bdf8, #facc15, #f472b6, #00e676);
+            background-size: 400% 400%;
+            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            -webkit-mask-composite: xor;
+            mask-composite: exclude;
+            pointer-events: none;
+            animation: gradient-border 6s linear infinite;
         }
 
         .social-float:hover {