From 91a5dcdcdf3a394a68004dfa2a52b6c17e93c855 Mon Sep 17 00:00:00 2001
From: tapframe <nayifveliya99@gmail.com>
Date: Tue, 2 Sep 2025 20:42:11 +0530
Subject: [PATCH] UI update

---
 index.html                     | 343 ++++++++++++++++++++++++++++++++-
 src/screens/SettingsScreen.tsx |   2 +-
 2 files changed, 337 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 4c635fc..e739663 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,212 @@
             box-sizing: border-box;
         }
 
+        /* Privacy Policy Styles */
+        .privacy-policy {
+            min-height: 100vh;
+            padding: 4rem 0;
+            background: linear-gradient(135deg, #000000 0%, #0a0a0a 15%, #1a1a1a 35%, #0f0f0f 65%, #000000 100%);
+            background-attachment: fixed;
+        }
+
+        .privacy-content {
+            max-width: 800px;
+            margin: 0 auto;
+            position: relative;
+        }
+
+        .privacy-back-btn {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 12px;
+            padding: 0.75rem 1.25rem;
+            color: white;
+            font-size: 0.9rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin-bottom: 2rem;
+            backdrop-filter: blur(10px);
+        }
+
+        .privacy-back-btn:hover {
+            background: rgba(255, 255, 255, 0.15);
+            border-color: rgba(255, 255, 255, 0.3);
+            transform: translateY(-2px);
+        }
+
+        .privacy-content h1 {
+            font-size: 3rem;
+            font-weight: 800;
+            color: white;
+            margin-bottom: 0.5rem;
+            text-align: center;
+            background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .last-updated {
+            text-align: center;
+            color: rgba(255, 255, 255, 0.6);
+            font-size: 0.9rem;
+            margin-bottom: 3rem;
+        }
+
+        .privacy-section {
+            margin-bottom: 2.5rem;
+            background: rgba(255, 255, 255, 0.02);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            border-radius: 16px;
+            padding: 2rem;
+            backdrop-filter: blur(10px);
+        }
+
+        .privacy-section h2 {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: white;
+            margin-bottom: 1rem;
+            border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+            padding-bottom: 0.5rem;
+        }
+
+        .privacy-section h3 {
+            font-size: 1.2rem;
+            font-weight: 600;
+            color: white;
+            margin: 1.5rem 0 0.75rem 0;
+        }
+
+        .privacy-section p {
+            color: rgba(255, 255, 255, 0.8);
+            line-height: 1.7;
+            margin-bottom: 1rem;
+        }
+
+        .privacy-section ul {
+            list-style: none;
+            padding: 0;
+            margin: 1rem 0;
+        }
+
+        .privacy-section li {
+            color: rgba(255, 255, 255, 0.8);
+            line-height: 1.7;
+            margin-bottom: 0.75rem;
+            padding-left: 1.5rem;
+            position: relative;
+        }
+
+        .privacy-section li::before {
+            content: '•';
+            color: rgba(255, 255, 255, 0.4);
+            position: absolute;
+            left: 0;
+            font-weight: bold;
+        }
+
+        .privacy-section a {
+            color: #4a9eff;
+            text-decoration: none;
+            transition: color 0.3s ease;
+        }
+
+        .privacy-section a:hover {
+            color: #66b3ff;
+            text-decoration: underline;
+        }
+
+        .privacy-link {
+            color: rgba(255, 255, 255, 0.8);
+            text-decoration: none;
+            font-size: 0.9rem;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            position: relative;
+            padding: 0.5rem 0;
+        }
+
+        .privacy-link::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 0;
+            height: 2px;
+            background: linear-gradient(90deg, #4a9eff, #66b3ff);
+            transition: width 0.3s ease;
+        }
+
+        .privacy-link:hover {
+            color: white;
+        }
+
+        .privacy-link:hover::after {
+            width: 100%;
+        }
+
+        /* Mobile responsive for privacy policy */
+        @media (max-width: 768px) {
+            .privacy-policy {
+                padding: 2rem 0;
+            }
+
+            .privacy-content {
+                padding: 0 1rem;
+            }
+
+            .privacy-content h1 {
+                font-size: 2.2rem;
+            }
+
+            .privacy-section {
+                padding: 1.5rem;
+                margin-bottom: 2rem;
+            }
+
+            .privacy-section h2 {
+                font-size: 1.3rem;
+            }
+
+            .privacy-section h3 {
+                font-size: 1.1rem;
+            }
+
+            .privacy-back-btn {
+                padding: 0.625rem 1rem;
+                font-size: 0.85rem;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .privacy-content h1 {
+                font-size: 1.8rem;
+            }
+
+            .privacy-section {
+                padding: 1.25rem;
+                border-radius: 12px;
+            }
+
+            .privacy-section h2 {
+                font-size: 1.2rem;
+            }
+
+            .privacy-section h3 {
+                font-size: 1rem;
+            }
+
+            .privacy-section p,
+            .privacy-section li {
+                font-size: 0.9rem;
+            }
+        }
+
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
 
         * {
@@ -145,18 +351,18 @@
             font-size: clamp(6rem, 15vw, 10rem);
             font-weight: 800;
             margin-bottom: 0;
-            background: linear-gradient(135deg, #ffffff 0%, #cccccc 25%, #999999 50%, #666666 75%, #ffffff 100%);
+            background: linear-gradient(120deg, #ffffff 0%, #e8f0ff 25%, #f0e8ff 50%, #e8fffb 75%, #ffffff 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
-            background-size: 200% 200%;
+            background-size: 300% 300%;
             letter-spacing: -0.05em;
             line-height: 1.1;
             text-transform: uppercase;
-            animation: shimmer 3s ease-in-out infinite;
+            animation: nuvioGradient 20s ease-in-out infinite;
             position: relative;
             z-index: 1;
-            text-shadow: 0 0 40px rgba(255, 255, 255, 0.2);
+            text-shadow: 0 0 40px rgba(255, 255, 255, 0.15);
             transform-style: preserve-3d;
         }
 
@@ -178,12 +384,15 @@
 
 
 
-        @keyframes shimmer {
+        @keyframes nuvioGradient {
             0% {
-                background-position: -200% center;
+                background-position: 0% 50%;
+            }
+            50% {
+                background-position: 100% 50%;
             }
             100% {
-                background-position: 200% center;
+                background-position: 0% 50%;
             }
         }
 
@@ -1512,6 +1721,61 @@
         </div>
     </section>
 
+    <!-- Privacy Policy Section -->
+    <section id="privacy-policy" class="privacy-policy" style="display: none;">
+        <div class="container">
+            <div class="privacy-content">
+                <button class="privacy-back-btn" onclick="hidePrivacyPolicy()">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M19 12H5M12 19l-7-7 7-7"/>
+                    </svg>
+                    Back
+                </button>
+                <h1>Privacy Policy</h1>
+                <p class="last-updated">Last updated: January 2025</p>
+                
+                <div class="privacy-section">
+                    <h2>Data Collection</h2>
+                    <p>Nuvio does not collect personal information. We only store:</p>
+                    <ul>
+                        <li><strong>User preferences:</strong> App settings and viewing preferences for account sync</li>
+                        <li><strong>Viewing history:</strong> Stored locally on your device for your own use</li>
+                    </ul>
+                </div>
+
+                <div class="privacy-section">
+                    <h2>How We Use Your Data</h2>
+                    <p>Your data is stored for your own purposes:</p>
+                    <ul>
+                        <li>Sync your preferences and viewing history across your devices</li>
+                        <li>Maintain your app settings and customizations</li>
+                    </ul>
+                    <p>We do not personalize recommendations or use your data for any other purposes.</p>
+                </div>
+
+                <div class="privacy-section">
+                    <h2>Third-Party Services</h2>
+                    <p>Nuvio integrates with third-party services that have their own privacy policies:</p>
+                    <ul>
+                        <li><strong>Trakt.tv:</strong> For tracking viewing progress (optional)</li>
+                        <li><strong>TMDB:</strong> For movie and TV show information</li>
+                        <li><strong>Content Sources:</strong> Various streaming providers</li>
+                    </ul>
+                </div>
+
+                <div class="privacy-section">
+                    <h2>Open Source</h2>
+                    <p>Nuvio is open-source. You can review our code and data handling on our <a href="https://github.com/tapframe/NuvioStreaming" target="_blank">GitHub repository</a> to verify our privacy practices.</p>
+                </div>
+
+                <div class="privacy-section">
+                    <h2>Contact</h2>
+                    <p>Questions about this policy? Contact us through our <a href="https://github.com/tapframe/NuvioStreaming/issues" target="_blank">GitHub repository</a>.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <footer class="footer">
         <div class="container">
             <div class="credits">
@@ -1540,6 +1804,9 @@
                     <img src="https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png" alt="GitHub" class="github-logo">
                     GitHub
                 </a>
+                <a href="#privacy-policy" class="privacy-link" onclick="showPrivacyPolicy()">
+                    Privacy Policy
+                </a>
             </div>
             <p style="margin-top: 2rem; opacity: 0.3; font-size: 0.8rem;">
                 © 2025 Nuvio. Licensed under GNU GPLv3. Free and Open Source.
@@ -1708,5 +1975,67 @@
             }
         });
     </script>
+    
+    <script>
+        // Privacy Policy functionality
+        function showPrivacyPolicy() {
+            const privacySection = document.getElementById('privacy-policy');
+            const mainContent = document.querySelector('body > *:not(#privacy-policy)');
+            
+            // Hide all main content
+            const allSections = document.querySelectorAll('body > *:not(#privacy-policy)');
+            allSections.forEach(section => {
+                if (section.id !== 'privacy-policy') {
+                    section.style.display = 'none';
+                }
+            });
+            
+            // Show privacy policy
+            privacySection.style.display = 'block';
+            
+            // Scroll to top
+            window.scrollTo(0, 0);
+            
+            // Prevent body scroll
+            document.body.style.overflow = 'auto';
+        }
+        
+        function hidePrivacyPolicy() {
+            const privacySection = document.getElementById('privacy-policy');
+            
+            // Hide privacy policy
+            privacySection.style.display = 'none';
+            
+            // Show all main content
+            const allSections = document.querySelectorAll('body > *:not(#privacy-policy)');
+            allSections.forEach(section => {
+                if (section.id !== 'privacy-policy') {
+                    section.style.display = '';
+                }
+            });
+            
+            // Scroll to top
+            window.scrollTo(0, 0);
+            
+            // Restore body scroll
+            document.body.style.overflow = '';
+        }
+        
+        // Handle browser back button
+        window.addEventListener('popstate', function(event) {
+            if (window.location.hash === '#privacy-policy') {
+                showPrivacyPolicy();
+            } else {
+                hidePrivacyPolicy();
+            }
+        });
+        
+        // Check if privacy policy should be shown on page load
+        document.addEventListener('DOMContentLoaded', function() {
+            if (window.location.hash === '#privacy-policy') {
+                showPrivacyPolicy();
+            }
+        });
+    </script>
     </body>
 </html>
\ No newline at end of file
diff --git a/src/screens/SettingsScreen.tsx b/src/screens/SettingsScreen.tsx
index 77aba30..ee4bfeb 100644
--- a/src/screens/SettingsScreen.tsx
+++ b/src/screens/SettingsScreen.tsx
@@ -569,7 +569,7 @@ const SettingsScreen: React.FC = () => {
             <SettingItem
               title="Privacy Policy"
               icon="lock"
-              onPress={() => Linking.openURL('https://github.com/Stremio/stremio-expo/blob/main/PRIVACY_POLICY.md')}
+              onPress={() => Linking.openURL('https://tapframe.github.io/NuvioStreaming/#privacy-policy')}
               renderControl={ChevronRight}
               isTablet={isTablet}
             />