Spaces:
Sleeping
Sleeping
| import streamlit as st | |
| def main(): | |
| # Updated CSS for Contact page | |
| st.markdown(""" | |
| <style> | |
| @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 { | |
| background: #ffffff; | |
| min-height: 100vh; | |
| color: #1f2a44; | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| } | |
| #MainMenu {visibility: hidden;} | |
| footer {visibility: hidden;} | |
| .stDeployButton {display: none;} | |
| header {visibility: hidden;} | |
| .stApp > header {visibility: hidden;} | |
| /* Main Container */ | |
| .main-container { | |
| max-width: 100%; | |
| width: 100%; | |
| margin: 0 auto; | |
| padding: 1rem 2rem; | |
| } | |
| /* Header Section */ | |
| .header-section { | |
| text-align: center; | |
| margin-bottom: 2.5rem; | |
| padding: 1.5rem 0; | |
| } | |
| .header-title { | |
| font-size: 2.25rem; | |
| font-weight: 700; | |
| 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: 3rem; | |
| max-width: 1200px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .section-title { | |
| font-size: 1.75rem; | |
| font-weight: 600; | |
| color: #1f2a44; | |
| margin-bottom: 1rem; | |
| } | |
| .section-description { | |
| font-size: 0.95rem; | |
| color: #6b7280; | |
| line-height: 1.6; | |
| text-align: center; | |
| max-width: 700px; | |
| margin: 0 auto 1.5rem; | |
| } | |
| /* Contact Layout */ | |
| .contact-layout { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 2rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 1rem; | |
| } | |
| @media (max-width: 768px) { | |
| .contact-layout { | |
| grid-template-columns: 1fr; | |
| gap: 1.5rem; | |
| } | |
| } | |
| /* Form Container */ | |
| .form-container { | |
| background: #f9fafb; | |
| padding: 2rem; | |
| border-radius: 8px; | |
| border: 1px solid #e5e7eb; | |
| } | |
| .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: 6px !important; | |
| border: 1px solid #d1d5db !important; | |
| padding: 0.75rem 1rem !important; | |
| font-size: 0.9rem !important; | |
| background: #ffffff !important; | |
| transition: border-color 0.2s ease !important; | |
| } | |
| .stTextInput > div > div > input:focus, | |
| .stTextArea > div > div > textarea:focus { | |
| border-color: #3b82f6 !important; | |
| outline: none !important; | |
| } | |
| .stTextInput > div > div > input::placeholder, | |
| .stTextArea > div > div > textarea::placeholder { | |
| color: #9ca3af !important; | |
| } | |
| /* Submit Button */ | |
| .stButton > button { | |
| background: #3b82f6 !important; | |
| color: white !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: #2563eb !important; | |
| } | |
| /* 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; | |
| } | |
| /* 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 - Advanced Fake News Detector</h1> | |
| <p class="header-subtitle">Reach out for inquiries, feedback, or support</p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Get in Touch Section | |
| st.markdown(""" | |
| <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 Layout | |
| st.markdown('<div class="contact-layout">', unsafe_allow_html=True) | |
| # Contact Form Column | |
| st.markdown(""" | |
| <div class="form-container"> | |
| <h3 class="form-title">Send a Message</h3> | |
| """, unsafe_allow_html=True) | |
| # Contact Form | |
| 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 subject and message: | |
| st.success("Thank you! Your message has been sent. We'll respond within 24 hours.") | |
| else: | |
| 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 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() |