Update index.html

index.html

@@ -141,5 +141,51 @@
             <a href="https://discord.gg/3YRPVqXabQ" target="_blank"><img src="https://qtyhiurxoicqmxzpktkd.supabase.co/storage/v1/object/sign/email-content/discord.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJlbWFpbC1jb250ZW50L2Rpc2NvcmQucG5nIiwiaWF0IjoxNzI0ODM5ODc4LCJleHAiOjE3ODc5MTE4Nzh9.w1Ggb_Nh1UnjKeVujp_7ljAW0ZSP3ETNkYJLKuBZ_Zo&t=2024-08-28T10%3A11%3A18.993Z" alt="Discord"></a>
         </div>
     </footer>
+
+  <script>
+        const graphFrame = document.getElementById('graph-frame');
+        const prev = document.getElementById('prev');
+        const next = document.getElementById('next');
+        const page1 = document.getElementById('page1');
+        const page2 = document.getElementById('page2');
+
+        let currentPage = 1;
+
+        function updateGraph() {
+            if (currentPage === 1) {
+                graphFrame.src = 'co_user.html';
+                page1.classList.add('active');
+                page2.classList.remove('active');
+            } else {
+                graphFrame.src = 'co_organization.html';
+                page2.classList.add('active');
+                page1.classList.remove('active');
+            }
+        }
+
+        prev.addEventListener('click', () => {
+            if (currentPage > 1) {
+                currentPage--;
+                updateGraph();
+            }
+        });
+
+        next.addEventListener('click', () => {
+            if (currentPage < 2) {
+                currentPage++;
+                updateGraph();
+            }
+        });
+
+        page1.addEventListener('click', () => {
+            currentPage = 1;
+            updateGraph();
+        });
+
+        page2.addEventListener('click', () => {
+            currentPage = 2;
+            updateGraph();
+        });
+    </script>
 </body>
 </html>