Update src/contact.py

src/contact.py

@@ -1,104 +1,130 @@
 import streamlit as st
 
 def main():
-    # Custom CSS for Contact page
+    # Updated CSS for Contact page
     st.markdown("""
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+        * {
+            font-family: 'Inter', sans-serif !important;
+            box-sizing: border-box;
+        }
 
         .stApp {
-            font-family: 'Poppins', sans-serif;
-            background: #f8fafc;
+            background: #ffffff;
             min-height: 100vh;
-            color: #1a202c;
+            color: #1f2a44;
+            margin: 0 !important;
+            padding: 0 !important;
         }
 
-        #MainMenu {visibility: visible;}
+        #MainMenu {visibility: hidden;}
         footer {visibility: hidden;}
         .stDeployButton {display: none;}
         header {visibility: hidden;}
         .stApp > header {visibility: hidden;}
 
-        .container {
-            max-width: 1200px;
+        /* Main Container */
+        .main-container {
+            max-width: 100%;
+            width: 100%;
             margin: 0 auto;
-            padding: 1.5rem;
+            padding: 1rem 2rem;
         }
 
-        .header {
-            padding: 1.5rem 0;
+        /* Header Section */
+        .header-section {
             text-align: center;
+            margin-bottom: 2.5rem;
+            padding: 1.5rem 0;
         }
 
         .header-title {
-            font-size: 2.5rem;
+            font-size: 2.25rem;
             font-weight: 700;
-            color: #1a202c;
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
+            color: #1f2a44;
+            margin: 0;
+        }
+
+        .header-subtitle {
+            font-size: 1rem;
+            color: #6b7280;
+            font-weight: 400;
+            max-width: 600px;
+            margin: 0.5rem auto 0;
         }
 
+        /* Section Styling */
         .section {
-            margin-bottom: 2rem;
+            margin-bottom: 3rem;
+            max-width: 1200px;
+            margin-left: auto;
+            margin-right: auto;
         }
 
         .section-title {
-            font-size: 2rem;
+            font-size: 1.75rem;
             font-weight: 600;
-            color: #1a202c;
-            margin-bottom: 0.5rem;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
+            color: #1f2a44;
+            margin-bottom: 1rem;
         }
 
-        .section-text {
-            font-size: 1.1rem;
-            color: #4a5568;
-            line-height: 1.5;
-            max-width: 800px;
-            margin: 0 auto;
+        .section-description {
+            font-size: 0.95rem;
+            color: #6b7280;
+            line-height: 1.6;
+            text-align: center;
+            max-width: 700px;
+            margin: 0 auto 1.5rem;
         }
 
-        .contact-container {
-            display: flex;
+        /* Contact Layout */
+        .contact-layout {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
             gap: 2rem;
-            flex-wrap: wrap;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 1rem;
         }
 
-        .contact-form {
-            flex: 1;
-            min-width: 300px;
+        @media (max-width: 768px) {
+            .contact-layout {
+                grid-template-columns: 1fr;
+                gap: 1.5rem;
+            }
         }
 
-        .map-container {
-            flex: 1;
-            min-width: 300px;
+        /* Form Container */
+        .form-container {
+            background: #f9fafb;
+            padding: 2rem;
+            border-radius: 8px;
+            border: 1px solid #e5e7eb;
         }
 
-        .map-container iframe {
-            width: 100%;
-            height: 400px;
-            border: none;
-            border-radius: 8px;
+        .form-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: #1f2a44;
+            margin-bottom: 1.5rem;
         }
 
+        /* Form Inputs */
         .stTextInput > div > div > input,
         .stTextArea > div > div > textarea {
-            border-radius: 8px !important;
+            border-radius: 6px !important;
             border: 1px solid #d1d5db !important;
-            padding: 1rem !important;
-            font-size: 1.1rem !important;
-            font-family: 'Poppins', sans-serif !important;
+            padding: 0.75rem 1rem !important;
+            font-size: 0.9rem !important;
             background: #ffffff !important;
-            transition: all 0.2s ease !important;
+            transition: border-color 0.2s ease !important;
         }
 
         .stTextInput > div > div > input:focus,
         .stTextArea > div > div > textarea:focus {
-            border-color: #6366f1 !important;
-            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1) !important;
+            border-color: #3b82f6 !important;
             outline: none !important;
         }
 
@@ -107,82 +133,257 @@ def main():
             color: #9ca3af !important;
         }
 
+        /* Submit Button */
         .stButton > button {
-            background: #6366f1 !important;
+            background: #3b82f6 !important;
             color: white !important;
-            border-radius: 8px !important;
-            padding: 0.75rem 2rem !important;
-            font-size: 1.1rem !important;
-            font-weight: 600 !important;
-            font-family: 'Poppins', sans-serif !important;
-            transition: all 0.2s ease !important;
+            border-radius: 6px !important;
+            padding: 0.75rem 1.5rem !important;
+            font-size: 0.95rem !important;
+            font-weight: 500 !important;
+            transition: background-color 0.2s ease !important;
             border: none !important;
             width: 100% !important;
         }
 
         .stButton > button:hover {
-            background: #4f46e5 !important;
-            transform: translateY(-1px) !important;
+            background: #2563eb !important;
         }
 
-        .stSidebar {
-            background: #ffffff;
-            border-right: 1px solid #e5e7eb;
+        /* Map Container */
+        .map-container {
+            background: #f9fafb;
+            padding: 2rem;
+            border-radius: 8px;
+            border: 1px solid #e5e7eb;
+        }
+
+        .map-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: #1f2a44;
+            margin-bottom: 1.5rem;
+        }
+
+        .map-wrapper {
+            border-radius: 6px;
+            overflow: hidden;
+        }
+
+        .map-wrapper iframe {
+            width: 100%;
+            height: 300px;
+            border: none;
+        }
+
+        /* Contact Info Cards */
+        .contact-info {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+            gap: 1.5rem;
+            max-width: 1200px;
+            margin: 2.5rem auto;
+            padding: 0 1rem;
+        }
+
+        .info-card {
+            background: #f9fafb;
+            color: #1f2a44;
+            padding: 1.5rem;
+            border-radius: 8px;
+            text-align: center;
+            border: 1px solid #e5e7eb;
+            transition: transform 0.2s ease;
+        }
+
+        .info-card:hover {
+            transform: translateY(-3px);
+        }
+
+        .info-card-icon {
+            font-size: 1.75rem;
+            margin-bottom: 0.75rem;
+            color: #3b82f6;
+        }
+
+        .info-card-title {
+            font-size: 1.1rem;
+            font-weight: 500;
+            margin-bottom: 0.5rem;
+        }
+
+        .info-card-text {
+            font-size: 0.9rem;
+            color: #6b7280;
+            line-height: 1.4;
+        }
+
+        /* Footer */
+        .footer {
+            border-top: 1px solid #e5e7eb;
+            padding: 1.5rem 0;
+            text-align: center;
+            max-width: 1200px;
+            margin: 2rem auto 0;
+        }
+
+        /* Success/Error Messages */
+        .stAlert {
+            border-radius: 6px !important;
+            font-weight: 400 !important;
+            margin: 1rem 0;
         }
 
-        .stSidebar .sidebar-content {
-            padding: 1rem;
+        /* Responsive Design */
+        @media (max-width: 1024px) {
+            .main-container {
+                padding: 1rem;
+            }
+            .contact-layout {
+                padding: 0 0.5rem;
+            }
+            .contact-info {
+                padding: 0 0.5rem;
+            }
+        }
+
+        @media (max-width: 768px) {
+            .header-title {
+                font-size: 1.75rem;
+            }
+            .header-subtitle {
+                font-size: 0.9rem;
+            }
+            .section-title {
+                font-size: 1.5rem;
+            }
+            .form-container,
+            .map-container {
+                padding: 1.25rem;
+            }
+            .form-title,
+            .map-title {
+                font-size: 1.25rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .header-title {
+                font-size: 1.5rem;
+            }
+            .header-subtitle {
+                font-size: 0.85rem;
+            }
+            .section-title {
+                font-size: 1.25rem;
+            }
+            .section-description {
+                font-size: 0.85rem;
+            }
+            .form-container,
+            .map-container {
+                padding: 1rem;
+            }
+            .contact-info {
+                gap: 1rem;
+            }
         }
     </style>
     """, unsafe_allow_html=True)
 
+    # Main Container
+    st.markdown('<div class="main-container">', unsafe_allow_html=True)
+    
+    # Header Section
+    st.markdown("""
+    <div class="header-section">
+        <h1 class="header-title">📋 TruthCheck</h1>
+        <p class="header-subtitle">Reach out for inquiries, feedback, or support</p>
+    </div>
+    """, unsafe_allow_html=True)
 
-
-    # Header
+    # Get in Touch Section
     st.markdown("""
-    <div class="header">
-        <div class="container">
-            <h1 class="header-title">🛡️ TruthCheck</h1>
-        </div>
+    <div class="section">
+        <h2 class="section-title">Get in Touch</h2>
+        <p class="section-description">
+            Have questions or need assistance? Use the form below or our contact details to connect with us.
+        </p>
     </div>
     """, unsafe_allow_html=True)
 
-    # Contact Content
+    # Contact Layout
+    st.markdown('<div class="contact-layout">', unsafe_allow_html=True)
+    
+    # Contact Form Column
     st.markdown("""
-    <div class="container">
-        <div class="section">
-            <h2 class="section-title">📬 Get in Touch</h2>
-            <p class="section-text">
-                Have questions or feedback? Reach out to us via the form below or visit our office. We're here to help!
-            </p>
-        </div>
-        <div class="contact-container">
-            <div class="contact-form">
-                <h3 class="section-title">📩 Contact Form</h3>
+    <div class="form-container">
+        <h3 class="form-title">Send a Message</h3>
     """, unsafe_allow_html=True)
 
     # Contact Form
-    with st.form(key="contact_form"):
-        name = st.text_input("Name", placeholder="Your full name")
-        email = st.text_input("Email", placeholder="Your email address")
-        message = st.text_area("Message", placeholder="Your message or inquiry", height=150)
+    with st.form(key="contact_form", clear_on_submit=True):
+        col1, col2 = st.columns([1, 1])
+        
+        with col1:
+            name = st.text_input("Full Name", placeholder="Your full name")
+        with col2:
+            email = st.text_input("Email", placeholder="Your email address")
+        
+        subject = st.text_input("Subject", placeholder="What's your inquiry about?")
+        message = st.text_area("Message", placeholder="Your message here...", height=100)
+        
         submit_button = st.form_submit_button("Send Message")
 
         if submit_button:
-            if name and email and message:
-                st.success("Thank you for your message! We'll get back to you soon.")
+            if name and email and subject and message:
+                st.success("Thank you! Your message has been sent. We'll respond within 24 hours.")
             else:
-                st.error("Please fill out all fields before submitting.")
+                st.error("Please complete all fields before submitting.")
 
+    st.markdown('</div>', unsafe_allow_html=True)
+
+    # Map Container Column
+    st.markdown("""
+    <div class="map-container">
+        <h3 class="map-title">Our Location</h3>
+        <div class="map-wrapper">
+           <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3432.728046226142!2d73.14653207528688!3d30.641621074628397!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3922b6e4dde0c501%3A0xc37ea3d85326203!2sCOMSATS%20University%20Islamabad%20-%20Sahiwal%20Campus!5e0!3m2!1sen!2s!4v1753523148476!5m2!1sen!2s" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+    
+    st.markdown('</div>', unsafe_allow_html=True)  # Close contact-layout
+
+    # Contact Information Cards
     st.markdown("""
-            </div>
-            <div class="map-container">
-                <h3 class="section-title">📍 Our Location</h3>
-                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.835434509374!2d144.9537363153167!3d-37.81627927975195!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf577d9d9a9a9a9a9!2sMelbourne%20VIC%2C%20Australia!5e0!3m2!1sen!2sus!4v1634567891234" allowfullscreen="" loading="lazy"></iframe>
-            </div>
+    <div class="contact-info">
+        <div class="info-card">
+            <div class="info-card-icon">📧</div>
+            <div class="info-card-title">Email</div>
+            <div class="info-card-text">[email protected]<br>[email protected]</div>
+        </div>
+        <div class="info-card">
+            <div class="info-card-icon">📞</div>
+            <div class="info-card-title">Phone</div>
+            <div class="info-card-text">+92309-1111977<br>+92336-6569117<br>Mon-Fri 9AM-5PM</div>
+        </div>
+        <div class="info-card">
+            <div class="info-card-icon">📍</div>
+            <div class="info-card-title">Address</div>
+            <div class="info-card-text">COMSATS University Islamabad<br>Sahiwal Campus</div>
         </div>
     </div>
     """, unsafe_allow_html=True)
 
+    # Footer
+    st.markdown("---")
+    st.markdown(
+        '<p style="text-align: center; font-weight: 600; font-size: 16px;">💻 Developed with ❤️ using Streamlit | © 2025</p>',
+        unsafe_allow_html=True
+    )
+
+    st.markdown('</div>', unsafe_allow_html=True)  # Close main-container
+
 if __name__ == "__main__":
     main()