feat: add tos and privacy policy

Author: TechDudie

static/index.html

@@ -565,6 +565,100 @@
         .footer a {
             color: #868686;
             text-decoration: underline;
+            cursor: pointer;
+        }
+
+        /* Modals */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(8px);
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+            z-index: 999;
+        }
+
+        .modal-overlay.active {
+            opacity: 1;
+            pointer-events: auto;
+        }
+
+        .modal {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) scale(0.95);
+            width: 90%;
+            max-width: 500px;
+            background: #1f1f1f;
+            border: 1px solid #333333;
+            border-radius: 12px;
+            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
+            z-index: 1000;
+            opacity: 0;
+            pointer-events: none;
+            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+            display: flex;
+            flex-direction: column;
+            max-height: 85vh;
+        }
+
+        .modal.active {
+            opacity: 1;
+            pointer-events: auto;
+            transform: translate(-50%, -50%) scale(1);
+        }
+
+        .modal-header {
+            padding: 20px 24px;
+            border-bottom: 1px solid #333;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .modal-title {
+            margin: 0;
+            font-size: 18px;
+            font-weight: 600;
+            color: #fff;
+        }
+
+        .modal-close {
+            background: transparent;
+            border: none;
+            color: #868686;
+            font-size: 24px;
+            cursor: pointer;
+            padding: 0;
+            line-height: 1;
+            transition: color 0.2s;
+        }
+
+        .modal-close:hover {
+            color: #fff;
+        }
+
+        .modal-body {
+            padding: 24px;
+            color: #cccccc;
+            font-size: 14px;
+            overflow-y: auto;
+            line-height: 1.6;
+        }
+
+        .modal-body p {
+            margin-top: 0;
+            margin-bottom: 16px;
+        }
+        
+        .modal-body p:last-child {
+            margin-bottom: 0;
         }
 
         @media (max-width: 900px) {
@@ -840,12 +934,47 @@ <h3 class="call2action-title">Jump right in!</h3>
         <!-- FOOTER -->
         <footer class="footer">
             <p>Made by <b>26855</b> in collaboration with <b>6547</b></p>
-            <p>Vanguard v1.0 &bull; <a href="https://ftcvanguard.org">ftcvanguard.org</a> &bull; <a href="https://github.com/SMERobotics/ftcvanguard" target="_blank">GitHub</a></p>
+            <p>
+                Vanguard v1.0 &bull; 
+                <a href="https://github.com/SMERobotics/ftcvanguard" target="_blank">GitHub</a> &bull;
+                <a href="#" id="open-tos">Terms</a> &bull;
+                <a href="#" id="open-privacy">Privacy</a>
+            </p>
         </footer>
     </div>
 
+    <!-- Modals -->
+    <div id="modal-overlay" class="modal-overlay"></div>
+    
+    <div id="modal-tos" class="modal">
+        <div class="modal-header">
+            <h3 class="modal-title">Terms of Service</h3>
+            <button class="modal-close">&times;</button>
+        </div>
+        <div class="modal-body">
+            <p>(We're just two high schoolers tryna do some cool stuff, we're not lawyers so everything is subject to our judgment)</p>
+            <p>Just follow GP and FIRST values and we're chill</p>
+            <p>By using this service you agree to absolve FTCVanguard and its contributors of any liability and damages</p>
+            <p>Completely unrelated if anything does happen you agree to arbitration and we control everything</p>
+            <p>All we do is provide this data for you we didn't do anything wrong</p>
+            <p>If you're not being GP we reserve the right to completely nuke your account and delete all of your data without any notice or warning and you have zero legal recourse heheheha</p>
+        </div>
+    </div>
+
+    <div id="modal-privacy" class="modal">
+        <div class="modal-header">
+            <h3 class="modal-title">Privacy Policy</h3>
+            <button class="modal-close">&times;</button>
+        </div>
+        <div class="modal-body">
+            <p>Unlike Palantir, we don't sell your data and we (try not) to kill people using your data</p>
+            <p>We don't use or share your data beyond the features in our app. You can read all the code to figure everything out</p>
+        </div>
+    </div>
+
     <script>
         document.addEventListener("DOMContentLoaded", function() {
+            // Chart initialization
             const ctx = document.getElementById('hero-donut-chart');
             if (ctx) {
                 new Chart(ctx, {
@@ -881,6 +1010,53 @@ <h3 class="call2action-title">Jump right in!</h3>
                     }
                 });
             }
+
+            // Modal Logic
+            const overlay = document.getElementById('modal-overlay');
+            const tosModal = document.getElementById('modal-tos');
+            const privacyModal = document.getElementById('modal-privacy');
+            const openTosBtn = document.getElementById('open-tos');
+            const openPrivacyBtn = document.getElementById('open-privacy');
+            const closeBtns = document.querySelectorAll('.modal-close');
+
+            function openModal(modal) {
+                overlay.classList.add('active');
+                modal.classList.add('active');
+                document.body.style.overflow = 'hidden'; // Prevent background scrolling
+            }
+
+            function closeModal() {
+                overlay.classList.remove('active');
+                document.querySelectorAll('.modal.active').forEach(m => m.classList.remove('active'));
+                document.body.style.overflow = '';
+            }
+
+            if(openTosBtn) {
+                openTosBtn.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    openModal(tosModal);
+                });
+            }
+
+            if(openPrivacyBtn) {
+                openPrivacyBtn.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    openModal(privacyModal);
+                });
+            }
+
+            closeBtns.forEach(btn => {
+                btn.addEventListener('click', closeModal);
+            });
+
+            if(overlay) {
+                overlay.addEventListener('click', closeModal);
+            }
+
+            // Close on Escape key
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Escape') closeModal();
+            });
         });
     </script>
 </body>