Update src/contact.py (#31)

- Update src/contact.py (3c12889952a80b13724dbe80df63b2a17818e248)


Co-authored-by: Muhammad Khaqan Nasir <[email protected]>

src/contact.py

@@ -1,83 +1,188 @@
 import streamlit as st
 
-# Set page configuration
-st.set_page_config(
-    page_title="Contact Us | AI News Generator",
-    page_icon="📞",
-    layout="wide",
-    initial_sidebar_state="collapsed"
-)
-
-# Main Function
 def main():
-    # Apply Poppins font across the app
+    # Custom CSS for Contact page
     st.markdown("""
     <style>
-    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
-    html, body, [class*="css"], * {
-        font-family: 'Poppins', sans-serif;
-    }
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
+
+        .stApp {
+            font-family: 'Poppins', sans-serif;
+            background: #f8fafc;
+            min-height: 100vh;
+            color: #1a202c;
+        }
+
+        #MainMenu {visibility: visible;}
+        footer {visibility: hidden;}
+        .stDeployButton {display: none;}
+        header {visibility: hidden;}
+        .stApp > header {visibility: hidden;}
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 1.5rem;
+        }
+
+        .header {
+            padding: 1.5rem 0;
+            text-align: center;
+        }
+
+        .header-title {
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: #1a202c;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .section {
+            margin-bottom: 2rem;
+        }
+
+        .section-title {
+            font-size: 2rem;
+            font-weight: 600;
+            color: #1a202c;
+            margin-bottom: 0.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .section-text {
+            font-size: 1.1rem;
+            color: #4a5568;
+            line-height: 1.5;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        .contact-container {
+            display: flex;
+            gap: 2rem;
+            flex-wrap: wrap;
+        }
+
+        .contact-form {
+            flex: 1;
+            min-width: 300px;
+        }
+
+        .map-container {
+            flex: 1;
+            min-width: 300px;
+        }
+
+        .map-container iframe {
+            width: 100%;
+            height: 400px;
+            border: none;
+            border-radius: 8px;
+        }
+
+        .stTextInput > div > div > input,
+        .stTextArea > div > div > textarea {
+            border-radius: 8px !important;
+            border: 1px solid #d1d5db !important;
+            padding: 1rem !important;
+            font-size: 1.1rem !important;
+            font-family: 'Poppins', sans-serif !important;
+            background: #ffffff !important;
+            transition: all 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;
+            outline: none !important;
+        }
+
+        .stTextInput > div > div > input::placeholder,
+        .stTextArea > div > div > textarea::placeholder {
+            color: #9ca3af !important;
+        }
+
+        .stButton > button {
+            background: #6366f1 !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: none !important;
+            width: 100% !important;
+        }
+
+        .stButton > button:hover {
+            background: #4f46e5 !important;
+            transform: translateY(-1px) !important;
+        }
+
+        .stSidebar {
+            background: #ffffff;
+            border-right: 1px solid #e5e7eb;
+        }
+
+        .stSidebar .sidebar-content {
+            padding: 1rem;
+        }
     </style>
     """, unsafe_allow_html=True)
 
-    # Include Font Awesome CDN for icons
+
+
+    # Header
     st.markdown("""
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <div class="header">
+        <div class="container">
+            <h1 class="header-title">🛡️ TruthCheck</h1>
+        </div>
+    </div>
     """, unsafe_allow_html=True)
 
-    # Title Section
-    st.markdown("<h1 style='font-size: 60px; text-align: center;'>Contact Us</h1>", unsafe_allow_html=True)
-    st.markdown("<p style='font-size: 20px; text-align: center; color: gray;'>We'd love to hear from you! Reach out with any questions or feedback.</p>", unsafe_allow_html=True)
+    # Contact Content
+    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>
+    """, unsafe_allow_html=True)
 
     # Contact Form
-    st.markdown("<h2 style='font-size: 30px;'>📬 Get in Touch</h2>", unsafe_allow_html=True)
-    st.write("Fill in the form below to contact us directly!")
-
-    contact_form = st.form(key='contact_form')
-    name = contact_form.text_input("Your Name")
-    email = contact_form.text_input("Your Email")
-    message = contact_form.text_area("Your Message")
-    submit_button = contact_form.form_submit_button("Send Message")
+    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)
+        submit_button = st.form_submit_button("Send Message")
 
-    if submit_button:
-        if name and email and message:
-            st.success("Thank you for reaching out! We will get back to you soon.")
-        else:
-            st.error("Please fill in all the fields.")
-
-    # Contact Information Section
-    st.markdown("<h2 style='font-size: 30px;'>📍 Our Location</h2>", unsafe_allow_html=True)
-    st.write("Find us at our office location:")
+        if submit_button:
+            if name and email and message:
+                st.success("Thank you for your message! We'll get back to you soon.")
+            else:
+                st.error("Please fill out all fields before submitting.")
 
     st.markdown("""
-     <div style='width: 100%; height: 100%;'>
-        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3426.9461831002777!2d73.43206937626101!3d30.80414347455002!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3922a73c3c264d03%3A0x1654eeba796b65a3!2sMohammad%20Ali%20Jinnah%20Rd%2C%20Okara%2C%20Punjab%2C%20Pakistan!5e0!3m2!1sen!2s!4v1733648554209!5m2!1sen!2s" 
-        width="100%" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
-     </div>""", unsafe_allow_html=True)
-
-    # Social Media Section
-    st.markdown("<h2 style='font-size: 30px;'>💬 Follow Us</h2>", unsafe_allow_html=True)
-    st.write("Stay connected with us through social media:")
-    social_media_links = {
-        "GitHub": "https://github.com/yourprofile",
-        "LinkedIn": "https://www.linkedin.com/in/yourprofile",
-        "Twitter": "https://twitter.com/yourprofile"
-    }
-
-    for platform, link in social_media_links.items():
-        st.markdown(f"""
-        <a href='{link}' target='_blank' style='font-size: 20px; color: #0077B5; margin-right: 20px;'>
-            <i class="fab fa-{platform.lower()}" style="font-size: 24px;"></i> {platform}
-        </a>
-        """, unsafe_allow_html=True)
-
-    # Footer
-    st.markdown("---")
-    st.markdown(
-        '<p style="text-align: center; font-weight: 600; font-size: 16px;">💻 Developed with ❤️ using Streamlit | © 2024</p>',
-        unsafe_allow_html=True
-    )
-
-# Run the app
+            </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>
+    </div>
+    """, unsafe_allow_html=True)
+
 if __name__ == "__main__":
     main()