chore: improve UI

app.py

@@ -5,21 +5,36 @@ with open("index.html", "r", encoding="utf-8") as f:
     html_content = f.read()
 
 # Create Gradio interface with custom HTML
-with gr.Blocks(css="""
-    .gradio-container {
+with gr.Blocks(
+    theme=gr.themes.Base(
+        primary_hue="red",
+        secondary_hue="blue",
+    ).set(
+        body_background_fill="linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)",
+        body_background_fill_dark="linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)",
+    ),
+    css="""
+    body, .gradio-container {
+        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
         padding: 0 !important;
+        margin: 0 !important;
+    }
+    .gradio-container {
         max-width: 100% !important;
-        background: transparent !important;
     }
     #html-component {
         height: 100vh !important;
         width: 100% !important;
+        overflow-y: auto !important;
     }
-    #html-component * {
-        color: inherit !important;
+    .contain {
+        background: transparent !important;
+    }
+    .app {
+        background: transparent !important;
     }
-    #html-component iframe {
-        border: none !important;
+    main {
+        background: transparent !important;
     }
 """) as demo:
     gr.HTML(html_content, elem_id="html-component")

index.html

@@ -14,13 +14,15 @@
             box-sizing: border-box;
         }
 
-        body {
+        html, body {
             font-family: 'Cormorant Garamond', serif;
             background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
             color: #f0e6d2 !important;
             min-height: 100vh;
             overflow-x: hidden;
             position: relative;
+            margin: 0 !important;
+            padding: 0 !important;
         }
 
         /* Animated background elements */
@@ -56,10 +58,10 @@
 
         h1 {
             font-family: 'Cinzel', serif;
-            font-size: 4rem;
+            font-size: 3.5rem;
             font-weight: 700;
-            color: #cc3333;
-            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
+            color: #cc3333 !important;
+            text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.8);
             margin-bottom: 20px;
             letter-spacing: 4px;
             text-transform: uppercase;
@@ -75,9 +77,10 @@
 
         .tagline {
             font-size: 1.3rem;
-            color: #d4af37;
+            color: #d4af37 !important;
             margin-top: 20px;
             font-weight: 600;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
         }
 
         .decorative-line {
@@ -88,12 +91,12 @@
         }
 
         .main-content {
-            background: rgba(22, 33, 62, 0.8);
+            background: rgba(22, 33, 62, 0.6);
             border: 2px solid #cc3333;
             border-radius: 15px;
-            padding: 50px;
+            padding: 40px;
             margin-bottom: 40px;
-            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.7);
             backdrop-filter: blur(10px);
         }
 
@@ -103,11 +106,12 @@
 
         h2 {
             font-family: 'Cinzel', serif;
-            font-size: 2.5rem;
-            color: #cc3333;
+            font-size: 2.2rem;
+            color: #cc3333 !important;
             margin-bottom: 25px;
             text-align: center;
             letter-spacing: 2px;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
         }
 
         .info-box {
@@ -122,12 +126,12 @@
         }
 
         .info-box strong {
-            color: #d4af37;
+            color: #d4af37 !important;
             font-size: 1.3rem;
         }
 
         .highlight {
-            color: #cc3333;
+            color: #cc3333 !important;
             font-weight: 600;
         }
 
@@ -160,7 +164,7 @@
         .value-card h3 {
             font-family: 'Cinzel', serif;
             font-size: 1.5rem;
-            color: #d4af37;
+            color: #d4af37 !important;
             margin-bottom: 10px;
         }
 
@@ -182,7 +186,7 @@
         .schedule h3 {
             font-family: 'Cinzel', serif;
             font-size: 2rem;
-            color: #d4af37;
+            color: #d4af37 !important;
             margin-bottom: 20px;
         }
 
@@ -194,7 +198,7 @@
 
         .schedule-details .time {
             font-size: 2rem;
-            color: #cc3333;
+            color: #cc3333 !important;
             font-weight: 700;
             display: block;
             margin: 15px 0;
@@ -204,7 +208,7 @@
             font-style: italic;
             font-size: 1.4rem;
             text-align: center;
-            color: #d4af37;
+            color: #d4af37 !important;
             margin: 40px 0;
             padding: 30px;
             border-top: 2px solid #cc3333;
@@ -221,8 +225,8 @@
         }
 
         .members {
-            font-size: 0.9rem;
-            color: #d4af37;
+            font-size: 1rem;
+            color: #d4af37 !important;
             line-height: 1.6;
         }