Update app.py

app.py

@@ -28,6 +28,15 @@ EXCEL_FILE = "appointments.xlsx"
 # === Time Slots ===
 TIME_SLOTS = [f"{hour:02d}:00" for hour in range(9, 18)]  # 9 AM to 5 PM
 
+# === Common Timezones (for performance) ===
+COMMON_TIMEZONES = [
+    "UTC", "US/Pacific", "US/Eastern", "US/Central", "US/Mountain",
+    "Europe/London", "Europe/Paris", "Europe/Berlin", "Asia/Karachi",
+    "Asia/Tokyo", "Asia/Shanghai", "Asia/Dubai", "Australia/Sydney",
+    "America/New_York", "America/Los_Angeles", "America/Chicago",
+    "America/Toronto", "America/Sao_Paulo", "Asia/Kolkata", "Asia/Singapore"
+]  # Curated list for faster dropdown rendering
+
 # === Google Calendar Event Link Generator ===
 def generate_google_calendar_link(name, email, date_str, time_str, timezone):
     try:
@@ -43,9 +52,7 @@ def generate_google_calendar_link(name, email, date_str, time_str, timezone):
             "dates": f"{start_time_utc}/{end_time_utc}",
             "ctz": timezone
         }
-        base_url = "https://www.google.com/calendar/render"
-        calendar_url = f"{base_url}?{urlencode(event)}"
-        return calendar_url
+        return f"https://www.google.com/calendar/render?{urlencode(event)}"
     except Exception as e:
         logging.error(f"Google Calendar link error: {e}")
         return None
@@ -77,16 +84,16 @@ def save_to_excel(name, email, date_str, time_str, timezone, message):
             "Date": date_str,
             "Time": time_str,
             "Timezone": timezone,
-            "Message": message if message else "No message provided",
+            "Message": message if message else "No message",
             "Timestamp": datetime.now().strftime("%Y-%m-%d %H:%M:%S")
         }
         try:
-            df = pd.read_excel(EXCEL_FILE)
+            df = pd.read_excel(EXCEL_FILE, engine='openpyxl')
         except FileNotFoundError:
             df = pd.DataFrame()
         df = pd.concat([df, pd.DataFrame([appointment_data])], ignore_index=True)
-        df.to_excel(EXCEL_FILE, index=False)
-        logging.info(f"Appointment saved to {EXCEL_FILE}: {name}, {email}, {date_str}, {time_str}, {timezone}, {message}")
+        df.to_excel(EXCEL_FILE, engine='openpyxl', index=False)
+        logging.info(f"Appointment saved: {name}, {email}, {date_str}, {time_str}, {timezone}, {message}")
         return True
     except Exception as e:
         logging.error(f"Excel save error: {e}")
@@ -95,45 +102,45 @@ def save_to_excel(name, email, date_str, time_str, timezone, message):
 # === Appointment Handler ===
 def book_appointment(name, email, date, time, timezone, message):
     if not all([name, email, date, time, timezone]):
-        return "Please fill out all required fields (Name, Email, Date, Time, Timezone).", []
+        return "Please fill out all required fields.", []
 
     try:
-        # Validate date format (YYYY-MM-DD)
+        # Validate date format
         datetime.strptime(date, "%Y-%m-%d")
         tz = pytz.timezone(timezone)
         appointment_time = datetime.strptime(f"{date} {time}", "%Y-%m-%d %H:%M").replace(tzinfo=tz)
         if appointment_time < datetime.now(tz):
-            return "Appointments must be scheduled in the future.", []
+            return "Appointments must be in the future.", []
 
         if not save_to_excel(name, email, date, time, timezone, message):
-            return "Failed to save appointment. Please try again.", []
+            return "Failed to save appointment.", []
 
         calendar_link = generate_google_calendar_link(name, email, date, time, timezone)
         if not calendar_link:
-            return "Failed to generate Google Calendar link, but appointment is saved.", []
+            return "Failed to generate calendar link, but appointment saved.", []
 
         admin_msg = (
-            f"New Appointment Request:\n"
+            f"New Appointment:\n"
             f"Name: {name}\n"
             f"Email: {email}\n"
             f"Date: {date}\n"
             f"Time: {time}\n"
             f"Timezone: {timezone}\n"
-            f"Message: {message if message else 'No message provided'}"
+            f"Message: {message if message else 'No message'}"
         )
         send_email("admin@mubashirdev.com", "📅 New Appointment", admin_msg)
 
         user_msg = (
             f"Hi {name},\n\n"
             f"Your appointment is confirmed for {date} at {time} ({timezone}).\n"
-            f"Click here to add it to your Google Calendar: {calendar_link}\n\n"
-            f"Your message: {message if message else 'No message provided'}\n\n"
-            f"Thank you for choosing my services!\n\n"
-            f"Regards,\nMubashir Hussain\nhttps://mubashirdev.com"
+            f"Add to Google Calendar: {calendar_link}\n\n"
+            f"Your message: {message if message else 'No message'}\n\n"
+            f"Thank you for choosing my services!\n"
+            f"Mubashir Hussain\nhttps://mubashirdev.com"
         )
         send_email(email, "✅ Appointment Confirmed", user_msg)
 
-        # Generate a styled chart for confirmation
+        # Generate styled chart
         chart_data = {
             "type": "bar",
             "data": {
@@ -141,8 +148,8 @@ def book_appointment(name, email, date, time, timezone, message):
                 "datasets": [{
                     "label": "Appointment",
                     "data": [1],
-                    "backgroundColor": "#1E88E5",  # Blue to match UI theme
-                    "borderColor": "#1565C0",
+                    "backgroundColor": "#1976D2",
+                    "borderColor": "#0D47A1",
                     "borderWidth": 2
                 }]
             },
@@ -150,170 +157,142 @@ def book_appointment(name, email, date, time, timezone, message):
                 "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
-                            }
-                        }
+                        "ticks": {"stepSize": 1, "color": "#333", "font": {"family": "Roboto", "size": 14}},
+                        "title": {"display": True, "text": "Confirmed", "color": "#333", "font": {"family": "Roboto", "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
-                            }
-                        }
+                        "title": {"display": True, "text": "Date & Time", "color": "#333", "font": {"family": "Roboto", "size": 16}},
+                        "ticks": {"color": "#333", "font": {"family": "Roboto", "size": 14}}
                     }
                 },
                 "plugins": {
-                    "title": {
-                        "display": True,
-                        "text": f"Appointment for {name}",
-                        "color": "#1E88E5",
-                        "font": {
-                            "family": "Roboto, sans-serif",
-                            "size": 18
-                        }
-                    }
+                    "title": {"display": True, "text": f"Appointment for {name}", "color": "#1976D2", "font": {"family": "Roboto", "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}.",
+            f"✅ Appointment confirmed for {date} at {time} ({timezone}). Email sent to {email}.",
             [chart_data]
         )
 
     except pytz.exceptions.UnknownTimeZoneError:
-        return "Invalid timezone. Please select a valid timezone.", []
+        return "Invalid timezone.", []
     except ValueError:
-        return "Invalid date format. Please use YYYY-MM-DD (e.g., 2025-06-01).", []
+        return "Invalid date format. Use YYYY-MM-DD (e.g., 2025-06-01).", []
 
 # === Gradio UI ===
 with gr.Blocks(theme=gr.themes.Soft(), css="""
     @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
     .gradio-container {
         max-width: 700px;
-        margin: auto;
+        margin: 20px 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);
+        background: #F5F6F5;
+        padding: 24px;
+        border-radius: 16px;
+        box-shadow: 0 4px 16px rgba(0,0,0,0.1);
     }
     .welcome {
         text-align: center;
-        font-size: 28px;
-        color: #1E88E5;
-        margin-bottom: 20px;
+        font-size: 32px;
+        color: #1976D2;
+        margin: 0 0 24px;
         font-weight: 700;
     }
     .gr-textbox, .gr-dropdown {
         border-radius: 8px;
-        border: 2px solid #E0E0E0;
-        padding: 10px;
+        border: 2px solid #B0BEC5;
+        padding: 12px;
         font-size: 16px;
-        transition: border-color 0.3s ease;
+        transition: border-color 0.2s;
     }
     .gr-textbox:focus, .gr-dropdown:focus {
-        border-color: #1E88E5;
+        border-color: #1976D2;
         outline: none;
     }
-    .gr-textbox[label="Date"] {
-        padding: 10px;
-        font-family: 'Roboto', sans-serif;
+    .gr-textbox[label="Date"]::before {
+        content: "📅 ";
     }
     .gr-button {
-        background-color: #1E88E5;
+        background: #1976D2;
         color: white;
         font-size: 16px;
         font-weight: 600;
-        padding: 12px 24px;
+        padding: 12px 32px;
         border-radius: 8px;
         border: none;
-        transition: background-color 0.3s ease, transform 0.2s ease;
-        margin: 20px auto;
+        transition: background 0.2s, transform 0.1s;
+        margin: 24px auto;
         display: block;
     }
     .gr-button:hover {
-        background-color: #1565C0;
+        background: #0D47A1;
         transform: translateY(-2px);
     }
     .gr-textbox[label="Result"] {
-        background-color: #E8F5E9;
-        border-color: #4CAF50;
-        color: #2E7D32;
+        background: #C8E6C9;
+        border-color: #388E3C;
+        color: #1B5E20;
         font-weight: 500;
-        padding: 15px;
+        padding: 16px;
         border-radius: 8px;
     }
     .gr-column {
-        background-color: white;
-        padding: 20px;
-        border-radius: 10px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        background: white;
+        padding: 24px;
+        border-radius: 12px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
     }
     .footer {
         text-align: center;
         font-size: 14px;
-        color: #666;
-        margin-top: 20px;
+        color: #546E7A;
+        margin-top: 24px;
+    }
+    .logo {
+        display: block;
+        margin: 0 auto 16px;
+        max-width: 150px;
+    }
+    .required::after {
+        content: " *";
+        color: #D32F2F;
     }
     @media (max-width: 600px) {
         .gradio-container {
-            padding: 10px;
+            padding: 16px;
+            margin: 10px;
         }
         .welcome {
             font-size: 24px;
         }
         .gr-button {
-            padding: 10px 20px;
+            padding: 10px 24px;
         }
     }
 """) as demo:
     gr.Markdown(
         """
-        <div class="welcome">Appointment Booking Bot</div>
-        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.
+        <img src="/static/logo.png" class="logo" alt="Mubashir Hussain Logo">
+        <div class="welcome">Book Your Appointment</div>
+        Complete the form below to schedule an appointment with Mubashir Hussain. You'll receive a confirmation email with a Google Calendar link.
         """
     )
     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)", 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")
-        message = gr.Textbox(label="Message (Optional)", placeholder="Enter any additional details or notes", lines=4)
-        submit_btn = gr.Button("Book Appointment", variant="primary")
+        name = gr.Textbox(label="Your Name", placeholder="Enter your name", elem_classes="required")
+        email = gr.Textbox(label="Your Email", placeholder="Enter your email", elem_classes="required")
+        date = gr.Textbox(label="Date", placeholder="YYYY-MM-DD (e.g., 2025-06-01)", type="text", elem_classes="required")
+        time = gr.Dropdown(label="Time", choices=TIME_SLOTS, value="09:00", elem_classes="required")
+        timezone = gr.Dropdown(label="Timezone", choices=COMMON_TIMEZONES, value="Asia/Karachi", elem_classes="required")
+        message = gr.Textbox(label="Message (Optional)", placeholder="Add any details or notes", lines=4)
+        submit_btn = gr.Button("Book Appointment")
         output = gr.Textbox(label="Result", interactive=False)
-        chart_output = gr.Plot(label="Appointment Confirmation")
+        chart_output = gr.Plot(label="Confirmation")
     
     gr.Markdown(
         """
-        <div class="footer">Powered by <a href="https://mubashirdev.com" style="color: #1E88E5; text-decoration: none;">mubashirdev.com</a></div>
+        <div class="footer">Powered by <a href="https://mubashirdev.com" style="color: #1976D2; text-decoration: none;">mubashirdev.com</a></div>
         """
     )