src/open_source.py

import streamlit as st

def main():
    # Main Container
    st.markdown('<div class="main-container">', unsafe_allow_html=True)

    # Custom CSS with Poppins font
    st.markdown("""
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

        * {
            font-family: 'Poppins', sans-serif !important;
            box-sizing: border-box;
        }

        .stApp {
            background: #ffffff;
            min-height: 100vh;
            color: #1f2a44;
        }

        #MainMenu {visibility: hidden;}
        footer {visibility: hidden;}
        .stDeployButton {display: none;}
        header {visibility: hidden;}
        .stApp > header {visibility: hidden;}

        /* Main Container */
        .main-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1rem 2rem;
        }

        /* Header Section */
        .header-section {
            text-align: center;
            margin-bottom: 2.5rem;
            padding: 1.5rem 0;
            background: linear-gradient(135deg, #f4f7fa 0%, #e8f0fe 100%);
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .header-title {
            font-size: 2.25rem;
            font-weight: 700;
            color: #1f2a44;
            margin: 0;
        }

        /* Section Styling */
        .section {
            margin-bottom: 2.5rem;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            padding: 0 1rem;
        }

        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: #1f2a44;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .section-text {
            font-size: 0.95rem;
            color: #6b7280;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
        }

        .code-block {
            background: #f4f7fa;
            padding: 1.2rem;
            border-radius: 8px;
            font-size: 0.9rem;
            color: #1f2a44;
            margin: 1rem 0;
            overflow-x: auto;
            border-left: 4px solid #6366f1;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        }

        .code-block pre {
            margin: 0;
            font-family: 'Poppins', sans-serif;
            white-space: pre-wrap;
            line-height: 1.5;
        }

        .step-list {
            list-style-type: decimal;
            padding-left: 2rem;
            margin: 1rem 0;
        }

        .step-list li {
            margin-bottom: 0.8rem;
            color: #4a5568;
        }

        .highlight {
            color: #2d3748;
            font-weight: 500;
        }

        /* Footer */
        .footer {
            border-top: 1px solid #e5e7eb;
            padding: 2.5rem 0;
            text-align: center;
            max-width: 1200px;
            margin: 2rem auto 0;
            background: linear-gradient(135deg, #e8f0fe 0%, #f8f9fa 100%);
            border-radius: 12px;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        }

        .footer-content {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .footer p {
            font-size: 0.9rem;
            color: #4b5eaa;
            font-weight: 600;
            margin: 0;
        }

        .footer a {
            color: #3b82f6;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer a:hover {
            color: #1e40af;
            text-decoration: underline;
        }

        .footer .social-links {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-top: 1rem;
        }

        .footer .social-links a {
            font-size: 1.2rem;
            color: #4b5eaa;
            transition: color 0.3s ease;
        }

        .footer .social-links a:hover {
            color: #3b82f6;
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .main-container {
                padding: 1rem;
            }
            .section {
                padding: 0 0.5rem;
            }
        }

        @media (max-width: 768px) {
            .header-title {
                font-size: 1.75rem;
            }
            .section-title {
                font-size: 1.25rem;
            }
            .section-text {
                font-size: 0.9rem;
            }
            .code-block {
                font-size: 0.85rem;
            }
        }

        @media (max-width: 480px) {
            .header-title {
                font-size: 1.5rem;
            }
            .section-title {
                font-size: 1.1rem;
            }
            .section-text {
                font-size: 0.85rem;
            }
            .code-block {
                font-size: 0.8rem;
            }
            .footer-content {
                gap: 0.5rem;
            }
        }
    </style>
    """, unsafe_allow_html=True)

    # Header Section
  
    st.markdown('<h1 class="header-title">🌐 TruthCheck - Open Source</h1>', unsafe_allow_html=True)
    st.markdown('</div>', unsafe_allow_html=True)

    # Open Source Initiative
    st.markdown('<div class="section">', unsafe_allow_html=True)
    st.markdown('<h2 class="section-title">ℹ️ Open Source Vision</h2>', unsafe_allow_html=True)
    st.markdown('<p class="section-text">TruthCheck is an open-source powerhouse dedicated to combating misinformation with cutting-edge AI. We warmly invite innovators, developers, and data enthusiasts worldwide to join us. Your expertise can elevate our hybrid BERT-BiLSTM model, expand its reach, and redefine digital trust—together, we can make a lasting impact!</p>', unsafe_allow_html=True)
    st.markdown('</div>', unsafe_allow_html=True)

    # Getting Started
    st.markdown('<div class="section">', unsafe_allow_html=True)
    st.markdown('<h2 class="section-title">🚀 Get Started Now</h2>', unsafe_allow_html=True)
    st.markdown('<p class="section-text">Dive into TruthCheck by cloning and running it locally from our Hugging Face repository. Follow these steps to begin your journey:</p>', unsafe_allow_html=True)
    st.markdown('<ol class="step-list">', unsafe_allow_html=True)
    st.markdown('<li><span class="highlight">Clone the Repository:</span> Secure the codebase with this command:</li>', unsafe_allow_html=True)
    st.markdown('<div class="code-block"><pre>git clone https://huggingface.co/spaces/adnaan05/TruthCheck</pre></div>', unsafe_allow_html=True)
    st.markdown('<li><span class="highlight">Navigate to Directory:</span> Enter the project folder:</li>', unsafe_allow_html=True)
    st.markdown('<div class="code-block"><pre>cd TruthCheck</pre></div>', unsafe_allow_html=True)
    st.markdown('<li><span class="highlight">Install Dependencies:</span> Set up the environment with:</li>', unsafe_allow_html=True)
    st.markdown('<div class="code-block"><pre>pip install -r requirements.txt</pre></div>', unsafe_allow_html=True)
    st.markdown('<li><span class="highlight">Launch the App:</span> Start the application with:</li>', unsafe_allow_html=True)
    st.markdown('<div class="code-block"><pre>streamlit run app.py</pre></div>', unsafe_allow_html=True)
    st.markdown('</ol>', unsafe_allow_html=True)
    st.markdown('<p class="section-text">Explore the full codebase and details on our <a href="https://huggingface.co/spaces/adnaan05/TruthCheck" target="_blank">Hugging Face page</a>.</p>', unsafe_allow_html=True)
    st.markdown('</div>', unsafe_allow_html=True)

    # Contributing via Pull Requests
    st.markdown('<div class="section">', unsafe_allow_html=True)
    st.markdown('<h2 class="section-title">🤝 Contribute with Pull Requests</h2>', unsafe_allow_html=True)
    st.markdown('<p class="section-text">Your contributions shape TruthCheck’s future. Here’s how to submit a pull request on Hugging Face:</p>', unsafe_allow_html=True)
    st.markdown('<ol class="step-list">', unsafe_allow_html=True)
    st.markdown('<li><span class="highlight">Fork the Repository:</span> Create your own copy at <a href="https://huggingface.co/spaces/adnaan05/TruthCheck" target="_blank">https://huggingface.co/spaces/adnaan05/TruthCheck</a>.</li>', unsafe_allow_html=True)
    st.markdown('<li><span class="highlight">Clone Your Fork:</span> Download it locally:</li>', unsafe_allow_html=True)
    st.markdown('<div class="code-block"><pre>git clone https://huggingface.co/spaces/your-username/TruthCheck</pre></div>', unsafe_allow_html=True)
    st.markdown('<li><span class="highlight">Create a Branch:</span> Start your work with:</li>', unsafe_allow_html=True)
    st.markdown('<div class="code-block"><pre>git checkout -b feature/your-feature-name</pre></div>', unsafe_allow_html=True)
    st.markdown('<li><span class="highlight">Make Changes:</span> Implement your improvements and commit:</li>', unsafe_allow_html=True)
    st.markdown('<div class="code-block"><pre>git add .\ngit commit -m "Add your detailed message here"</pre></div>', unsafe_allow_html=True)
    st.markdown('<li><span class="highlight">Push to Your Fork:</span> Upload your branch:</li>', unsafe_allow_html=True)
    st.markdown('<div class="code-block"><pre>git push origin feature/your-feature-name</pre></div>', unsafe_allow_html=True)
    st.markdown('<li><span class="highlight">Open a Pull Request:</span> Submit via the Hugging Face interface, detailing your changes and linking to issues.</li>', unsafe_allow_html=True)
    st.markdown('</ol>', unsafe_allow_html=True)
    st.markdown('<p class="section-text">Join discussions and find tasks on the <a href="https://huggingface.co/spaces/adnaan05/TruthCheck/discussions" target="_blank">community tab</a>.</p>', unsafe_allow_html=True)
    st.markdown('</div>', unsafe_allow_html=True)

    # Why Contribute
    st.markdown('<div class="section">', unsafe_allow_html=True)
    st.markdown('<h2 class="section-title">🌍 Why Contribute?</h2>', unsafe_allow_html=True)
    st.markdown('<p class="section-text">Contributing to TruthCheck means joining a global mission to empower truth. Enhance our AI with new datasets, add multilingual capabilities, or refine the UI—your input drives progress. Let’s build a trustworthy digital future together!</p>', unsafe_allow_html=True)
    st.markdown('</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()