Update src/terms_of_use.py

src/terms_of_use.py

@@ -1,128 +1,203 @@
 import streamlit as st
 
 def main():
-    # Custom CSS for Privacy Policy page
+    # Updated CSS for Terms of Use 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=Poppins:wght@300;400;500;600;700&display=swap');
+
+        * {
+            font-family: 'Poppins', 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: 2.5rem;
+            max-width: 1200px;
+            margin-left: auto;
+            margin-right: auto;
+            padding: 0 1rem;
         }
 
         .section-title {
-            font-size: 2rem;
+            font-size: 1.5rem;
             font-weight: 600;
-            color: #1a202c;
-            margin-bottom: 0.5rem;
+            color: #1f2a44;
+            margin-bottom: 1rem;
             display: flex;
             align-items: center;
             gap: 0.5rem;
         }
 
         .section-text {
-            font-size: 1.1rem;
-            color: #4a5568;
-            line-height: 1.5;
+            font-size: 0.95rem;
+            color: #6b7280;
+            line-height: 1.6;
             max-width: 800px;
             margin: 0 auto;
         }
 
-        .stSidebar {
-            background: #ffffff;
-            border-right: 1px solid #e5e7eb;
+        /* Footer */
+        .footer {
+            border-top: 1px solid #e5e7eb;
+            padding: 1.5rem 0;
+            text-align: center;
+            max-width: 1200px;
+            margin: 2rem auto 0;
+        }
+
+        /* Responsive Design */
+        @media (max-width: 1024px) {
+            .main-container {
+                padding: 1rem;
+            }
+            .section {
+                padding: 0 0.5rem;
+            }
         }
 
-        .stSidebar .sidebar-content {
-            padding: 1rem;
+        @media (max-width: 768px) {
+            .header-title {
+                font-size: 1.75rem;
+            }
+            .header-subtitle {
+                font-size: 0.9rem;
+            }
+            .section-title {
+                font-size: 1.25rem;
+            }
+            .section-text {
+                font-size: 0.9rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .header-title {
+                font-size: 1.5rem;
+            }
+            .header-subtitle {
+                font-size: 0.85rem;
+            }
+            .section-title {
+                font-size: 1.1rem;
+            }
+            .section-text {
+                font-size: 0.85rem;
+            }
         }
     </style>
     """, unsafe_allow_html=True)
 
+    # Main Container
+    st.markdown('<div class="main-container">', unsafe_allow_html=True)
 
-    # Header
+    # Header Section
     st.markdown("""
-    <div class="header">
-        <div class="container">
-            <h1 class="header-title">🛡️ TruthCheck</h1>
-        </div>
+    <div class="header-section">
+        <h1 class="header-title">📋 TruthCheck</h1>
+        <p class="header-subtitle">Terms governing the use of our services</p>
     </div>
     """, unsafe_allow_html=True)
 
-    # Privacy Policy Content
+    # Terms of Use Content
     st.markdown("""
-    <div class="container">
-        <div class="section">
-            <h2 class="section-title">🔒 Privacy Policy</h2>
-            <p class="section-text">
-                At TruthCheck, we are committed to protecting your privacy. This Privacy Policy outlines how we collect, use, and safeguard your data.
-            </p>
-        </div>
-        <div class="section">
-            <h3 class="section-title">📊 Data Collection</h3>
-            <p class="section-text">
-                We collect data you provide, such as news articles submitted for analysis and optional contact form submissions. We may also collect usage data to improve our services.
-            </p>
-        </div>
-        <div class="section">
-            <h3 class="section-title">🔐 Data Usage</h3>
-            <p class="section-text">
-                Your data is used solely to provide fake news detection services and respond to inquiries. We do not sell or share your personal information with third parties.
-            </p>
-        </div>
-        <div class="section">
-            <h3 class="section-title">🛡️ Data Security</h3>
-            <p class="section-text">
-                We implement industry-standard security measures to protect your data from unauthorized access or disclosure.
-            </p>
-        </div>
-        <div class="section">
-            <h3 class="section-title">🍪 Cookies</h3>
-            <p class="section-text">
-                TruthCheck may use cookies to enhance user experience. You can disable cookies in your browser settings, but this may affect functionality.
-            </p>
-        </div>
-        <div class="section">
-            <h3 class="section-title">📩 Contact Us</h3>
-            <p class="section-text">
-                If you have questions about our Privacy Policy, please contact us at [email protected].
-            </p>
-        </div>
+    <div class="section">
+        <h2 class="section-title">📜 Terms of Use</h2>
+        <p class="section-text">
+            Welcome to TruthCheck. These Terms of Use govern your access to and use of our platform and services. By using TruthCheck, you agree to comply with these terms. If you do not agree, please refrain from using our services.
+        </p>
+    </div>
+    <div class="section">
+        <h3 class="section-title">🚀 Use of Services</h3>
+        <p class="section-text">
+            TruthCheck provides tools for analyzing news articles for authenticity. You may use our services for lawful purposes only. You agree not to misuse the platform, including submitting malicious content or attempting to disrupt our services.
+        </p>
+    </div>
+    <div class="section">
+        <h3 class="section-title">🛡️ User Responsibilities</h3>
+        <p class="section-text">
+            You are responsible for the accuracy of the information you submit, such as news articles or contact details. You must not upload content that violates intellectual property rights, is defamatory, or is otherwise unlawful.
+        </p>
+    </div>
+    <div class="section">
+        <h3 class="section-title">🔐 Intellectual Property</h3>
+        <p class="section-text">
+            All content, features, and functionality on TruthCheck, including our algorithms and design, are owned by TruthCheck or its licensors. You may not copy, modify, or distribute our content without prior written consent.
+        </p>
+    </div>
+    <div class="section">
+        <h3 class="section-title">⚖️ Limitation of Liability</h3>
+        <p class="section-text">
+            TruthCheck provides services on an "as-is" basis. We do not guarantee the accuracy of our analysis and are not liable for any damages resulting from your use of our platform. Use our services at your own risk.
+        </p>
+    </div>
+    <div class="section">
+        <h3 class="section-title">🔄 Changes to Terms</h3>
+        <p class="section-text">
+            We may update these Terms of Use from time to time. Changes will be posted on this page, and continued use of our services after updates constitutes acceptance of the new terms.
+        </p>
+    </div>
+    <div class="section">
+        <h3 class="section-title">📩 Contact Us</h3>
+        <p class="section-text">
+            If you have questions about these Terms of Use, please contact us at <a href="mailto:[email protected]">[email protected]</a> or <a href="mailto:[email protected]">[email protected]</a>.
+        </p>
     </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()