Update index.html

index.html

@@ -22,13 +22,65 @@ async def generate_fortune(name):
     
     return f"{name.strip()}, your fortune: In the near future, you will{fortune}"
 
-with gr.Blocks(title="AI Fortune Cookie Generator") as demo:
-    gr.Markdown("# 🥠 AI Fortune Cookie Generator")
-    gr.Markdown("Enter your name and receive a personalized AI-generated fortune!")
-    
-    name_input = gr.Textbox(label="Your Name")
-    fortune_output = gr.Textbox(label="Your AI-Generated Fortune")
-    submit_button = gr.Button("🔮 Reveal Your Fortune")
+# Custom CSS for a more appealing look
+custom_css = """
+.container {
+    max-width: 800px !important;
+    margin: auto !important;
+    padding: 20px !important;
+}
+.title {
+    text-align: center !important;
+    color: #FF6B6B !important;
+    font-size: 2.5rem !important;
+    margin-bottom: 20px !important;
+}
+.subtitle {
+    text-align: center !important;
+    color: #4ECDC4 !important;
+    font-size: 1.2rem !important;
+    margin-bottom: 30px !important;
+}
+.input-box, .output-box {
+    border: 2px solid #FF6B6B !important;
+    border-radius: 10px !important;
+}
+.generate-btn {
+    background-color: #FF6B6B !important;
+    color: white !important;
+    font-size: 1.2rem !important;
+    padding: 10px 20px !important;
+    border-radius: 20px !important;
+    transition: all 0.3s ease !important;
+}
+.generate-btn:hover {
+    background-color: #4ECDC4 !important;
+    transform: scale(1.05) !important;
+}
+.footer {
+    text-align: center !important;
+    margin-top: 30px !important;
+    font-style: italic !important;
+}
+"""
+
+with gr.Blocks(
+    title="🥠 Viral Fortune Cookie Generator",
+    theme=gr.themes.Soft(
+        primary_hue="pink",
+        secondary_hue="blue",
+    ),
+    css=custom_css
+) as demo:
+    with gr.Column(elem_classes="container"):
+        gr.Markdown("# 🥠 AI Fortune Cookie Generator", elem_classes="title")
+        gr.Markdown("Discover your future with our AI-powered fortune cookies! Share your unique fortune with friends!", elem_classes="subtitle")
+        
+        name_input = gr.Textbox(label="Your Name", placeholder="Enter your name here...", elem_classes="input-box")
+        fortune_output = gr.Textbox(label="Your AI-Generated Fortune", elem_classes="output-box", lines=3)
+        submit_button = gr.Button("🔮 Reveal Your Cosmic Fortune", elem_classes="generate-btn")
+        
+        gr.Markdown("Share your fortune on social media and tag us! #AIFortuneCookie", elem_classes="footer")
     
     submit_button.click(fn=generate_fortune, inputs=name_input, outputs=fortune_output)