Update app.py

app.py

@@ -25,6 +25,9 @@ FROM_NAME = "Mubashir Hussain"
 # === Excel File ===
 EXCEL_FILE = "appointments.xlsx"
 
+# === Time Slots ===
+TIME_SLOTS = [f"{hour:02d}:00" for hour in range(9, 18)]  # 9 AM to 5 PM
+
 # === Google Calendar Event Link Generator ===
 def generate_google_calendar_link(name, email, date_str, time_str, timezone):
     try:
@@ -125,42 +128,188 @@ def book_appointment(name, email, date, time, timezone):
         )
         send_email(email, "✅ Appointment Confirmed", user_msg)
 
+        # Generate a styled chart for confirmation
+        chart_data = {
+            "type": "bar",
+            "data": {
+                "labels": [f"{date} {time}"],
+                "datasets": [{
+                    "label": "Appointment",
+                    "data": [1],
+                    "backgroundColor": "#1E88E5",  # Blue to match UI theme
+                    "borderColor": "#1565C0",
+                    "borderWidth": 2
+                }]
+            },
+            "options": {
+                "scales": {
+                    "y": {
+                        "beginAtZero": True,
+                        "ticks": {
+                            "stepSize": 1,
+                            "color": "#333",
+                            "font": {
+                                "family": "Roboto, sans-serif",
+                                "size": 14
+                            }
+                        },
+                        "title": {
+                            "display": True,
+                            "text": "Appointment Confirmed",
+                            "color": "#333",
+                            "font": {
+                                "family": "Roboto, sans-serif",
+                                "size": 16
+                            }
+                        }
+                    },
+                    "x": {
+                        "title": {
+                            "display": True,
+                            "text": "Date and Time",
+                            "color": "#333",
+                            "font": {
+                                "family": "Roboto, sans-serif",
+                                "size": 16
+                            }
+                        },
+                        "ticks": {
+                            "color": "#333",
+                            "font": {
+                                "family": "Roboto, sans-serif",
+                                "size": 14
+                            }
+                        }
+                    }
+                },
+                "plugins": {
+                    "title": {
+                        "display": True,
+                        "text": f"Appointment for {name}",
+                        "color": "#1E88E5",
+                        "font": {
+                            "family": "Roboto, sans-serif",
+                            "size": 18
+                        }
+                    }
+                }
+            }
+        }
+
         return (
             f"✅ Appointment confirmed for {date} at {time} ({timezone}). "
             f"A confirmation email with a Google Calendar link has been sent to {email}.",
-            []
+            [chart_data]
         )
 
     except pytz.exceptions.UnknownTimeZoneError:
-        return "Invalid timezone. Please use a valid timezone (e.g., Asia/Karachi).", []
+        return "Invalid timezone. Please select a valid timezone.", []
     except ValueError:
-        return "Invalid date/time format. Use YYYY-MM-DD for date and HH:MM for time.", []
+        return "Invalid date/time format. Please use the provided date picker and time dropdown.", []
 
 # === Gradio UI ===
 with gr.Blocks(theme=gr.themes.Soft(), css="""
-    .gradio-container { max-width: 600px; margin: auto; font-family: Arial, sans-serif; }
-    .welcome { text-align: center; font-size: 24px; color: #333; margin-bottom: 20px; }
-    .gr-button { font-size: 16px; margin: 10px; border-radius: 5px; }
+    .gradio-container {
+        max-width: 700px;
+        margin: auto;
+        font-family: 'Roboto', sans-serif;
+        background-color: #f5f7fa;
+        padding: 20px;
+        border-radius: 12px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+    .welcome {
+        text-align: center;
+        font-size: 28px;
+        color: #1E88E5;
+        margin-bottom: 20px;
+        font-weight: 700;
+    }
+    .gr-textbox, .gr-dropdown {
+        border-radius: 8px;
+        border: 2px solid #E0E0E0;
+        padding: 10px;
+        font-size: 16px;
+        transition: border-color 0.3s ease;
+    }
+    .gr-textbox:focus, .gr-dropdown:focus {
+        border-color: #1E88E5;
+        outline: none;
+    }
+    .gr-button {
+        background-color: #1E88E5;
+        color: white;
+        font-size: 16px;
+        font-weight: 600;
+        padding: 12px 24px;
+        border-radius: 8px;
+        border: none;
+        transition: background-color 0.3s ease, transform 0.2s ease;
+        margin: 20px auto;
+        display: block;
+    }
+    .gr-button:hover {
+        background-color: #1565C0;
+        transform: translateY(-2px);
+    }
+    .gr-textbox[label="Result"] {
+        background-color: #E8F5E9;
+        border-color: #4CAF50;
+        color: #2E7D32;
+        font-weight: 500;
+        padding: 15px;
+        border-radius: 8px;
+    }
+    .gr-column {
+        background-color: white;
+        padding: 20px;
+        border-radius: 10px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+    }
+    .footer {
+        text-align: center;
+        font-size: 14px;
+        color: #666;
+        margin-top: 20px;
+    }
+    @media (max-width: 600px) {
+        .gradio-container {
+            padding: 10px;
+        }
+        .welcome {
+            font-size: 24px;
+        }
+        .gr-button {
+            padding: 10px 20px;
+        }
+    }
 """) as demo:
     gr.Markdown(
         """
         <div class="welcome">Appointment Booking Bot</div>
-        Fill out the form below to book an appointment. You'll receive a confirmation email with a link to add the appointment to your Google Calendar, and the details will be logged.
+        Fill out the form below to book an appointment with Mubashir Hussain. You'll receive a confirmation email with a Google Calendar link, and a chart will confirm your booking.
         """
     )
     with gr.Column():
         name = gr.Textbox(label="Your Name", placeholder="Enter your name")
         email = gr.Textbox(label="Your Email", placeholder="Enter your email")
-        date = gr.Textbox(label="Date", placeholder="YYYY-MM-DD (e.g., 2025-06-01)")
-        time = gr.Textbox(label="Time", placeholder="HH:MM (e.g., 14:00)")
-        timezone = gr.Textbox(label="Timezone", placeholder="e.g., Asia/Karachi")
+        date = gr.Textbox(label="Date", placeholder="YYYY-MM-DD (e.g., 2025-06-01)", type="text")
+        time = gr.Dropdown(label="Time", choices=TIME_SLOTS, value="09:00")
+        timezone = gr.Dropdown(label="Timezone", choices=pytz.all_timezones, value="Asia/Karachi")
         submit_btn = gr.Button("Book Appointment", variant="primary")
         output = gr.Textbox(label="Result", interactive=False)
+        chart_output = gr.Plot(label="Appointment Confirmation")
+    
+    gr.Markdown(
+        """
+        <div class="footer">Powered by <a href="https://mubashirdev.com" style="color: #1E88E5; text-decoration: none;">mubashirdev.com</a></div>
+        """
+    )
 
     submit_btn.click(
         fn=book_appointment,
         inputs=[name, email, date, time, timezone],
-        outputs=[output]
+        outputs=[output, chart_output]
     )
 
 # Launch the app (Hugging Face Spaces handles server_name and server_port)