added New Year Message Banner

app.py

@@ -1331,59 +1331,102 @@ with gr.Blocks(
     gr.HTML(
 """
 <style>
-.urgent-banner {
-    background: linear-gradient(90deg, #ff0000, #ffae00, #ff0000);
-    background-size: 300% 300%;
-    animation: gradientMove 4s ease infinite, glowPulse 1.5s infinite;
-    padding: 20px 24px;
-    border-radius: 14px;
-    color: #ffffff;
-    font-weight: 800;
-    font-size: 18px;
+/* ===== Banner ===== */
+.newyear-container {
+    position: relative;
+    overflow: hidden;
+    border-radius: 18px;
+    padding: 26px 28px;
     text-align: center;
-    box-shadow: 
-        0 0 20px rgba(255,0,0,0.9),
-        0 0 40px rgba(255,174,0,0.8);
-    margin-bottom: 16px;
+    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
+    color: #fff;
+    box-shadow: 0 0 30px rgba(255,215,0,0.5);
+    margin-bottom: 20px;
 }
 
-@keyframes gradientMove {
-    0% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-    100% { background-position: 0% 50%; }
+.title {
+    font-size: 22px;
+    font-weight: 800;
+    letter-spacing: 1px;
 }
 
-@keyframes glowPulse {
-    0% { box-shadow: 0 0 15px rgba(255,0,0,0.8); }
-    50% { box-shadow: 0 0 35px rgba(255,174,0,1); }
-    100% { box-shadow: 0 0 15px rgba(255,0,0,0.8); }
+.year {
+    font-size: 42px;
+    font-weight: 900;
+    color: #ffd700;
+    text-shadow: 0 0 14px rgba(255,215,0,0.9);
+    margin: 6px 0;
 }
 
-.urgent-btn {
-    display: inline-block;
-    margin-top: 12px;
-    padding: 10px 18px;
-    background: #000000;
-    color: #ffd700;
-    font-weight: 800;
+.message {
     font-size: 16px;
-    border-radius: 8px;
-    text-decoration: none;
-    box-shadow: 0 0 10px rgba(0,0,0,0.6);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    font-weight: 500;
+    line-height: 1.6;
 }
 
-.urgent-btn:hover {
-    transform: scale(1.05);
-    box-shadow: 0 0 20px rgba(255,215,0,0.9);
+/* ===== Fireworks ===== */
+.firework {
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    animation: explode 1.8s infinite ease-out;
+}
+
+.firework:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
+.firework:nth-child(2) { top: 30%; left: 75%; animation-delay: 0.4s; }
+.firework:nth-child(3) { top: 60%; left: 25%; animation-delay: 0.8s; }
+.firework:nth-child(4) { top: 55%; left: 70%; animation-delay: 1.2s; }
+
+@keyframes explode {
+    0% {
+        transform: scale(0);
+        opacity: 1;
+        box-shadow:
+            0 0 0 #ff004c,
+            0 0 0 #ffd700,
+            0 0 0 #00eaff,
+            0 0 0 #ffffff;
+    }
+    50% {
+        transform: scale(1);
+        box-shadow:
+            0 -40px #ff004c,
+            40px 0 #ffd700,
+            -40px 0 #00eaff,
+            0 40px #ffffff;
+    }
+    100% {
+        transform: scale(1.3);
+        opacity: 0;
+        box-shadow:
+            0 -60px transparent,
+            60px 0 transparent,
+            -60px 0 transparent,
+            0 60px transparent;
+    }
 }
 </style>
 
-<div class="urgent-banner">
-👀 <strong>IP Details Updated Kindly Check it – Use the 3 dots and select "Innovative Practice (IP) Details"</strong> 👀<br><br>
+<div class="newyear-container">
+    <!-- Fireworks -->
+    <div class="firework"></div>
+    <div class="firework"></div>
+    <div class="firework"></div>
+    <div class="firework"></div>
+
+    <!-- Content -->
+    🎆✨ <div class="title">HAPPY NEW YEAR</div>
+    <div class="year">2026</div>
+
+    <div class="message">
+        🌟 Wishing you a year filled with success, happiness, and new beginnings.<br>
+        🚀 May this year bring growth, achievements, and unforgettable moments.<br><br>
+        🤍 <strong>Have a fantastic year ahead!</strong>
+    </div>
 </div>
 """
-)
+    )
     gr.HTML(
 """
 <style>