Update app.py

app.py

@@ -28,27 +28,31 @@ 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) ===
+# === Date Options (Next 15 Days for Speed) ===
+DATE_OPTIONS = [
+    (datetime.now() + timedelta(days=i)).strftime("%Y-%m-%d (%A)")
+    for i in range(0, 15)
+]
+
+# === Common Timezones (minimized for speed) ===
 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
+    "UTC", "Asia/Karachi", "US/Pacific", "US/Eastern",
+    "Europe/London", "Asia/Tokyo", "America/New_York", "Asia/Dubai"
+]
 
-# === Google Calendar Event Link Generator ===
+# === Google Calendar Link Generator ===
 def generate_google_calendar_link(name, email, date_str, time_str, timezone):
     try:
+        date_clean = date_str.split(" ")[0]  # Extract YYYY-MM-DD
         tz = pytz.timezone(timezone)
-        start_time = datetime.strptime(f"{date_str} {time_str}", "%Y-%m-%d %H:%M").replace(tzinfo=tz)
+        start_time = datetime.strptime(f"{date_clean} {time_str}", "%Y-%m-%d %H:%M").replace(tzinfo=tz)
         end_time = start_time + timedelta(hours=1)
         start_time_utc = start_time.astimezone(pytz.UTC).strftime("%Y%m%dT%H%M%SZ")
         end_time_utc = end_time.astimezone(pytz.UTC).strftime("%Y%m%dT%H%M%SZ")
         event = {
             "action": "TEMPLATE",
             "text": f"Appointment with {FROM_NAME}",
-            "details": f"Appointment with {FROM_NAME} for {name} ({email}).\nContact: https://mubashirdev.com",
+            "details": f"Appointment for {name} ({email}). Contact: https://mubashirdev.com",
             "dates": f"{start_time_utc}/{end_time_utc}",
             "ctz": timezone
         }
@@ -66,10 +70,10 @@ def send_email(to_email, subject, body):
         msg["Subject"] = subject
         msg.attach(MIMEText(body, "plain"))
         context = ssl.create_default_context()
-        with smtplib.SMTP_SSL(SMTP_SERVER, SMTP_PORT, context=context) as server:
+        with smtplib.SMTP_SSL(SMTP_SERVER, SMTP_PORT, context=context, timeout=5) as server:
             server.login(SMTP_USERNAME, SMTP_PASSWORD)
             server.send_message(msg)
-        logging.info(f"Email sent to {to_email}: {subject}")
+        logging.info(f"Email sent to {to_email}")
         return True
     except Exception as e:
         logging.error(f"Email error: {e}")
@@ -78,22 +82,21 @@ def send_email(to_email, subject, body):
 # === Save to Excel ===
 def save_to_excel(name, email, date_str, time_str, timezone, message):
     try:
+        date_clean = date_str.split(" ")[0]  # Extract YYYY-MM-DD
         appointment_data = {
             "Name": name,
             "Email": email,
-            "Date": date_str,
+            "Date": date_clean,
             "Time": time_str,
             "Timezone": timezone,
-            "Message": message if message else "No message",
+            "Message": message or "No message",
             "Timestamp": datetime.now().strftime("%Y-%m-%d %H:%M:%S")
         }
-        try:
-            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, engine='openpyxl', index=False)
-        logging.info(f"Appointment saved: {name}, {email}, {date_str}, {time_str}, {timezone}, {message}")
+        df = pd.DataFrame([appointment_data])
+        mode = 'a' if os.path.exists(EXCEL_FILE) else 'w'
+        with pd.ExcelWriter(EXCEL_FILE, engine='openpyxl', mode=mode, if_sheet_exists='overlay' if mode == 'a' else None) as writer:
+            df.to_excel(writer, index=False, sheet_name='Sheet1', header=not os.path.exists(EXCEL_FILE))
+        logging.info(f"Appointment saved: {name}, {email}")
         return True
     except Exception as e:
         logging.error(f"Excel save error: {e}")
@@ -105,134 +108,130 @@ def book_appointment(name, email, date, time, timezone, message):
         return "Please fill out all required fields.", []
 
     try:
-        # Validate date format
-        datetime.strptime(date, "%Y-%m-%d")
+        date_clean = date.split(" ")[0]  # Extract YYYY-MM-DD
+        datetime.strptime(date_clean, "%Y-%m-%d")
         tz = pytz.timezone(timezone)
-        appointment_time = datetime.strptime(f"{date} {time}", "%Y-%m-%d %H:%M").replace(tzinfo=tz)
+        appointment_time = datetime.strptime(f"{date_clean} {time}", "%Y-%m-%d %H:%M").replace(tzinfo=tz)
         if appointment_time < datetime.now(tz):
             return "Appointments must be in the future.", []
 
-        if not save_to_excel(name, email, date, time, timezone, message):
+        if not save_to_excel(name, email, date_clean, time, timezone, message):
             return "Failed to save appointment.", []
 
-        calendar_link = generate_google_calendar_link(name, email, date, time, timezone)
+        calendar_link = generate_google_calendar_link(name, email, date_clean, time, timezone)
         if not calendar_link:
             return "Failed to generate calendar link, but appointment saved.", []
 
-        admin_msg = (
-            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'}"
-        )
+        admin_msg = f"New Appointment:\nName: {name}\nEmail: {email}\nDate: {date_clean}\nTime: {time}\nTimezone: {timezone}\nMessage: {message or '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"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"
-        )
+        user_msg = f"Hi {name},\n\nYour appointment is confirmed for {date_clean} at {time} ({timezone}).\nAdd to Google Calendar: {calendar_link}\n\nYour message: {message or 'No message'}\n\nThank you!\nMubashir Hussain\nhttps://mubashirdev.com"
         send_email(email, "✅ Appointment Confirmed", user_msg)
 
-        # Generate styled chart
+        # Generate chart
         chart_data = {
             "type": "bar",
             "data": {
-                "labels": [f"{date} {time}"],
+                "labels": [f"{date_clean} {time}"],
                 "datasets": [{
                     "label": "Appointment",
                     "data": [1],
-                    "backgroundColor": "#1976D2",
-                    "borderColor": "#0D47A1",
+                    "backgroundColor": "#003087",
+                    "borderColor": "#001F5C",
                     "borderWidth": 2
                 }]
             },
             "options": {
                 "scales": {
-                    "y": {
-                        "beginAtZero": True,
-                        "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 & Time", "color": "#333", "font": {"family": "Roboto", "size": 16}},
-                        "ticks": {"color": "#333", "font": {"family": "Roboto", "size": 14}}
-                    }
+                    "y": {"beginAtZero": True, "ticks": {"stepSize": 1, "color": "#333"}, "title": {"display": True, "text": "Confirmed", "color": "#333"}},
+                    "x": {"title": {"display": True, "text": "Date & Time", "color": "#333"}, "ticks": {"color": "#333"}}
                 },
                 "plugins": {
-                    "title": {"display": True, "text": f"Appointment for {name}", "color": "#1976D2", "font": {"family": "Roboto", "size": 18}}
+                    "title": {"display": True, "text": f"Appointment for {name}", "color": "#003087", "font": {"size": 18}}
                 }
             }
         }
 
         return (
-            f"✅ Appointment confirmed for {date} at {time} ({timezone}). Email sent to {email}.",
+            f"✅ Appointment confirmed for {date_clean} at {time} ({timezone}). Email sent to {email}.",
             [chart_data]
         )
 
     except pytz.exceptions.UnknownTimeZoneError:
         return "Invalid timezone.", []
     except ValueError:
-        return "Invalid date format. Use YYYY-MM-DD (e.g., 2025-06-01).", []
+        return "Invalid date format.", []
+
+# === JavaScript for Date Dropdown Enhancement ===
+JS_ENHANCEMENT = """
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const dateDropdown = document.querySelector('select[id*="date"]');
+    if (dateDropdown) {
+        dateDropdown.style.background = '#E6F0FA';
+        dateDropdown.style.border = '2px solid #003087';
+        dateDropdown.style.borderRadius = '8px';
+        dateDropdown.style.padding = '12px';
+        dateDropdown.style.fontSize = '16px';
+        const today = new Date().toISOString().split('T')[0];
+        Array.from(dateDropdown.options).forEach(option => {
+            if (option.value.includes(today)) {
+                option.style.fontWeight = 'bold';
+                option.style.color = '#003087';
+            }
+        });
+    }
+});
+</script>
+"""
 
 # === 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: 20px auto;
-        font-family: 'Roboto', sans-serif;
-        background: #F5F6F5;
+        background: #E6F0FA;
         padding: 24px;
         border-radius: 16px;
         box-shadow: 0 4px 16px rgba(0,0,0,0.1);
     }
     .welcome {
         text-align: center;
-        font-size: 32px;
-        color: #1976D2;
-        margin: 0 0 24px;
+        font-size: 28px;
+        color: #003087;
+        margin: 0 0 20px;
         font-weight: 700;
     }
     .gr-textbox, .gr-dropdown {
         border-radius: 8px;
-        border: 2px solid #B0BEC5;
+        border: 2px solid #003087;
         padding: 12px;
         font-size: 16px;
+        background: white;
         transition: border-color 0.2s;
     }
     .gr-textbox:focus, .gr-dropdown:focus {
-        border-color: #1976D2;
+        border-color: #001F5C;
         outline: none;
     }
-    .gr-textbox[label="Date"]::before {
-        content: "📅 ";
-    }
     .gr-button {
-        background: #1976D2;
+        background: #003087;
         color: white;
         font-size: 16px;
         font-weight: 600;
         padding: 12px 32px;
         border-radius: 8px;
         border: none;
-        transition: background 0.2s, transform 0.1s;
         margin: 24px auto;
         display: block;
+        transition: background 0.2s;
     }
     .gr-button:hover {
-        background: #0D47A1;
-        transform: translateY(-2px);
+        background: #001F5C;
     }
     .gr-textbox[label="Result"] {
-        background: #C8E6C9;
-        border-color: #388E3C;
+        background: #E8F5E9;
+        border-color: #2E7D32;
         color: #1B5E20;
         font-weight: 500;
         padding: 16px;
@@ -240,15 +239,15 @@ with gr.Blocks(theme=gr.themes.Soft(), css="""
     }
     .gr-column {
         background: white;
-        padding: 24px;
+        padding: 20px;
         border-radius: 12px;
         box-shadow: 0 2px 8px rgba(0,0,0,0.05);
     }
     .footer {
         text-align: center;
         font-size: 14px;
-        color: #546E7A;
-        margin-top: 24px;
+        color: #003087;
+        margin-top: 20px;
     }
     .logo {
         display: block;
@@ -272,27 +271,28 @@ with gr.Blocks(theme=gr.themes.Soft(), css="""
         }
     }
 """) as demo:
-    gr.Markdown(
-        """
+    gr.HTML(
+        f"""
         <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.
+        <div class="welcome">Schedule Your Appointment</div>
+        <p style="text-align: center; color: #333;">Select a date and time below to book with Mubashir Hussain. You'll receive a confirmation email with a Google Calendar link.</p>
+        {JS_ENHANCEMENT}
         """
     )
     with gr.Column():
         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")
+        date = gr.Dropdown(label="Date", choices=DATE_OPTIONS, value=DATE_OPTIONS[0], 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)
+        message = gr.Textbox(label="Message (Optional)", placeholder="Add any details or notes", lines=3)
         submit_btn = gr.Button("Book Appointment")
         output = gr.Textbox(label="Result", interactive=False)
         chart_output = gr.Plot(label="Confirmation")
     
     gr.Markdown(
         """
-        <div class="footer">Powered by <a href="https://mubashirdev.com" style="color: #1976D2; text-decoration: none;">mubashirdev.com</a></div>
+        <div class="footer">Powered by <a href="https://mubashirdev.com" style="color: #003087; text-decoration: none;">mubashirdev.com</a></div>
         """
     )
 
@@ -302,5 +302,5 @@ with gr.Blocks(theme=gr.themes.Soft(), css="""
         outputs=[output, chart_output]
     )
 
-# Launch the app (Hugging Face Spaces handles server_name and server_port)
+# Launch the app (no port specification for Hugging Face Spaces)
 demo.launch()