Update app.py

app.py

@@ -19,34 +19,50 @@ def main(page):
 
 def interface():
     css_version = int(time.time())  # Use current timestamp as version
-    with gr.Blocks(css=f"static/styles.css?v={css_version}") as demo:
+
+    theme = gr.themes.Soft(
+        primary_hue="indigo",
+        secondary_hue="blue",
+        font=[gr.themes.GoogleFont("Roboto"), "sans-serif"],
+    ).set(
+        body_text_color="#303030",
+        block_title_text_size="24px",
+        block_label_text_size="20px",
+        input_text_size="18px",
+        button_large_text_size="20px",
+        button_small_text_size="18px",
+        checkbox_label_text_size="18px",
+    )
+
+    with gr.Blocks(theme=theme, css=f"static/styles.css?v={css_version}") as demo:
         # ASCII Logo at the top with inline gradient style
         ascii_logo = """
                  ___           ___           ___                 
-                 /\  \         /\__\         /\  \                
-      ___       /::\  \       /:/ _/_       /::\  \       ___     
-     /|  |     /:/\:\  \     /:/ /\  \     /:/\:\  \     /\__\    
-    |:|  |    /:/  \:\  \   /:/ /::\  \   /:/ /::\  \   /:/__/    
-    |:|  |   /:/__/ \:\__\ /:/__\/\:\__\ /:/_/:/\:\__\ /::\  \    
-  __|:|__|   \:\  \ /:/  / \:\  \ /:/  / \:\/:/  \/__/ \/\:\  \__ 
- /::::\  \    \:\  /:/  /   \:\  /:/  /   \::/__/       ~~\:\/\__\\
- ~~~~\:\  \    \:\/:/  /     \:\/:/  /     \:\  \          \::/  /
-      \:\__\    \::/  /       \::/  /       \:\__\         /:/  / 
-       \/__/     \/__/         \/__/         \/__/         \/__/  
+                /\  \         /\__\         /\  \                
+     ___       /::\  \       /:/ _/_       /::\  \       ___     
+    /|  |     /:/\:\  \     /:/ /\  \     /:/\:\  \     /\__\    
+   |:|  |    /:/  \:\  \   /:/ /::\  \   /:/ /::\  \   /:/__/    
+   |:|  |   /:/__/ \:\__\ /:/__\/\:\__\ /:/_/:/\:\__\ /::\  \    
+ __|:|__|   \:\  \ /:/  / \:\  \ /:/  / \:\/:/  \/__/ \/\:\  \__ 
+/::::\  \    \:\  /:/  /   \:\  /:/  /   \::/__/       ~~\:\/\__\\
+~~~~\:\  \    \:\/:/  /     \:\/:/  /     \:\  \          \::/  /
+     \:\__\    \::/  /       \::/  /       \:\__\         /:/  / 
+      \/__/     \/__/         \/__/         \/__/         \/__/  
         """
         gr.HTML(
             f"""
             <div class="ascii-logo-container" style="display: flex; justify-content: center; width: 100%;">
                 <pre class="ascii-logo" style="
                     font-family: monospace;
-                    font-size: 2.1em;
+                    font-size: 1.8em;
                     line-height: 1.2;
                     white-space: pre;
                     text-align: center;
-                    background: linear-gradient(to right, #7dc4e4, #c6a0f6);
+                    background: linear-gradient(to right, #4f46e5, #3b82f6);
                     -webkit-background-clip: text;
                     -webkit-text-fill-color: transparent;
                     display: inline-block;
+                    margin-bottom: 20px;
                 ">{ascii_logo}</pre>
             </div>
             """
@@ -56,13 +72,17 @@ def interface():
         with gr.Row():
             with gr.Column(scale=1, elem_classes=["menu-column"]):
                 # Vertical Navigation Buttons
-                home_button = gr.Button("Home", elem_classes=["menu-button"])
-                about_button = gr.Button("About us", elem_classes=["menu-button"])
+                home_button = gr.Button(
+                    "Home", elem_classes=["menu-button", "large-font"]
+                )
+                about_button = gr.Button(
+                    "About us", elem_classes=["menu-button", "large-font"]
+                )
                 yoga_stream_button = gr.Button(
-                    "Yoga from stream", elem_classes=["menu-button"]
+                    "Yoga from stream", elem_classes=["menu-button", "large-font"]
                 )
                 yoga_video_button = gr.Button(
-                    "Yoga from video", elem_classes=["menu-button"]
+                    "Yoga from video", elem_classes=["menu-button", "large-font"]
                 )
 
         # Create page contents
@@ -131,4 +151,4 @@ def interface():
 
 
 if __name__ == "__main__":
-    interface().launch()
+    interface().launch(share=True)