Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Aged Guru</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <!-- Google Fonts for better typography --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Roboto:wght@400;500&display=swap" rel="stylesheet"> | |
| <!-- Include necessary CSS styles --> | |
| <link rel="stylesheet" href="base.css"> | |
| <link rel="stylesheet" href="coder.css"> | |
| <link rel="stylesheet" href="digital.human.video.css"> | |
| <link rel="stylesheet" href="digital.human.audio.css"> | |
| <link rel="stylesheet" href="advanced.math.css"> | |
| <link rel="stylesheet" href="interdisciplinary.css"> <!-- New CSS for Interdisciplinary --> | |
| </head> | |
| <body> | |
| <!-- Sidebar --> | |
| <div class="sidebar"> | |
| <h2>AGED GURU</h2> | |
| <a href="#" class="active" data-content="voice">Digital Human Voice</a> | |
| <a href="#" data-content="video">Digital Human Video</a> | |
| <a href="#" data-content="interdisciplinary">Interdisciplinary Studies Assistant</a> | |
| <a href="#" data-content="coder">Young Coder</a> | |
| <a href="#" data-content="advanced-math">Advanced Mathematics & Problem Solving</a> | |
| <a href="#" data-content="podcast">Podcast</a> | |
| <a href="#" data-content="insights">Insights</a> | |
| <a href="#" data-content="knowledge-base">Knowledge Base</a> | |
| <a href="#" data-content="digital-twin">Digital Twin</a> | |
| <a href="#" data-content="3d-explorer">3D Explorer</a> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="main-content" id="main-content"> | |
| <div class="header"> | |
| <h1>5-MIN SCIENTIST PORTAL</h1> | |
| <!-- You can add user profile or settings here --> | |
| </div> | |
| <!-- Content will be loaded here --> | |
| <div id="content-area"> | |
| <!-- -----------------Digital Human Voice Content Starts---------------- --> | |
| <div id="voice" class="content-section"> | |
| <div class="card voice-card"> | |
| <!-- Digital Human Voice Layout --> | |
| <div class="voice-options"> | |
| <!-- Model Selection Section --> | |
| <div id="voice-model-selection-container" class="option-section"> | |
| <label for="voice-model-selection">Select Model:</label> | |
| <select id="voice-model-selection"></select> | |
| <button id="voice-download" disabled>Initialize Model</button> | |
| </div> | |
| <!-- Voice Selection Section --> | |
| <div id="voice-tool-selection-container" class="option-section"> | |
| <label for="voice-tools">Select Voice:</label> | |
| <select id="voice-tools"></select> | |
| </div> | |
| <!-- Speech Controls Section --> | |
| <div id="voice-speech-controls" class="option-section"> | |
| <label for="voice-speech-rate">Speech Rate:</label> | |
| <input type="range" id="voice-speech-rate" min="0.5" max="2" step="0.1" value="1" disabled> | |
| <label for="voice-speech-pitch">Speech Pitch:</label> | |
| <input type="range" id="voice-speech-pitch" min="0" max="2" step="0.1" value="1" disabled> | |
| </div> | |
| <!-- Logs Section --> | |
| <div id="voice-logs-container" class="option-section"> | |
| <h3>Logs</h3> | |
| <div id="voice-logs"> | |
| <!-- Logs will appear here --> | |
| </div> | |
| <button id="voice-clear-logs">Clear Logs</button> | |
| </div> | |
| </div> | |
| <div class="chat-window"> | |
| <!-- Chat Box Section --> | |
| <div id="voice-chat-container"> | |
| <div id="voice-chat-box"> | |
| <!-- Chat messages will appear here --> | |
| </div> | |
| <!-- Chat Stats --> | |
| <div id="voice-chat-stats" class="hidden">Runtime Stats: N/A</div> | |
| <!-- Chat Input Section --> | |
| <div id="voice-text-input-container"> | |
| <input type="text" id="voice-text-input" placeholder="Type your message here..." disabled> | |
| <button id="voice-submit-button" disabled>Send</button> | |
| </div> | |
| <!-- Microphone Controls --> | |
| <div id="voice-mic-container"> | |
| <button id="voice-start_button" aria-label="Start Voice Input" disabled> | |
| <!-- Mic Icon SVG --> | |
| <svg class="mic-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M12 14a3 3 0 003-3V5a3 3 0 00-6 0v6a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 0014 0h-2z"/> | |
| </svg> | |
| </button> | |
| <button id="voice-stop_button" aria-label="Stop Speech" disabled> | |
| <!-- Stop Icon SVG --> | |
| <svg class="stop-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <rect x="6" y="6" width="12" height="12" rx="2" ry="2"></rect> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Loading Spinner --> | |
| <div id="voice-loading-spinner" class="hidden"> | |
| <div class="spinner"></div> | |
| </div> | |
| <!-- Configuration Info --> | |
| <div id="voice-configuration" class="hidden"> | |
| <p>Model Initialized: <span id="voice-selected-model">N/A</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- -----------------Digital Human Voice Content Ends---------------- --> | |
| <!-- --------------------Digital Human Mentor Video Content Starts---------------- --> | |
| <div id="video" class="content-section hidden"> | |
| <div class="card video-card"> | |
| <!-- Video Options --> | |
| <div class="video-options"> | |
| <!-- Model Selection Section --> | |
| <div id="video-model-selection-container" class="option-section"> | |
| <label for="video-model-selection">Select Model:</label> | |
| <select id="video-model-selection"></select> | |
| <button id="video-download" disabled>Initialize Model</button> | |
| </div> | |
| <!-- Voice Selection Section --> | |
| <div id="video-tool-selection-container" class="option-section"> | |
| <label for="video-tools">Select Voice:</label> | |
| <select id="video-tools"></select> | |
| </div> | |
| <!-- Speech Controls Section --> | |
| <div id="video-speech-controls" class="option-section"> | |
| <label for="video-speech-rate">Speech Rate:</label> | |
| <input type="range" id="video-speech-rate" min="0.5" max="2" step="0.1" value="1" disabled> | |
| <label for="video-speech-pitch">Speech Pitch:</label> | |
| <input type="range" id="video-speech-pitch" min="0" max="2" step="0.1" value="1" disabled> | |
| </div> | |
| <!-- Logs Section --> | |
| <div id="video-logs-container" class="option-section"> | |
| <h3>Logs</h3> | |
| <div id="video-logs"> | |
| <!-- Logs will appear here --> | |
| </div> | |
| <button id="video-clear-logs">Clear Logs</button> | |
| </div> | |
| </div> | |
| <!-- New: Wrapper for Chat Window and Image Upload Section --> | |
| <div class="video-main"> | |
| <!-- Chat Window Section --> | |
| <div class="chat-window"> | |
| <!-- Chat Box Section --> | |
| <div id="video-chat-container"> | |
| <div id="video-chat-box"> | |
| <!-- Chat messages will appear here --> | |
| </div> | |
| <!-- Chat Stats --> | |
| <div id="video-chat-stats" class="hidden">Runtime Stats: N/A</div> | |
| <!-- Chat Input Section --> | |
| <div id="video-text-input-container"> | |
| <input type="text" id="video-text-input" placeholder="Type your message here..." disabled> | |
| <button id="video-submit-button" disabled>Send</button> | |
| </div> | |
| <!-- Microphone Controls --> | |
| <div id="video-mic-container"> | |
| <button id="video-start_button" aria-label="Start Voice Input" disabled> | |
| <!-- Mic Icon SVG --> | |
| <svg class="mic-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M12 14a3 3 0 003-3V5a3 3 0 00-6 0v6a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 0014 0h-2z"/> | |
| </svg> | |
| </button> | |
| <button id="video-stop_button" aria-label="Stop Speech" disabled> | |
| <!-- Stop Icon SVG --> | |
| <svg class="stop-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <rect x="6" y="6" width="12" height="12" rx="2" ry="2"></rect> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Loading Spinner --> | |
| <div id="video-loading-spinner" class="hidden"> | |
| <div class="spinner"></div> | |
| </div> | |
| <!-- Configuration Info --> | |
| <div id="video-configuration" class="hidden"> | |
| <p>Model Initialized: <span id="video-selected-model">N/A</span></p> | |
| </div> | |
| </div> | |
| <!-- Image Upload and Canvas Section --> | |
| <div class="video-image-section"> | |
| <!-- Tab Navigation --> | |
| <div class="image-tabs"> | |
| <button class="tab-button active" data-tab="upload">Upload Image</button> | |
| <button class="tab-button" data-tab="webcam">Webcam</button> | |
| <button class="tab-button" data-tab="draw">Draw</button> | |
| </div> | |
| <!-- Tab Contents --> | |
| <div class="tab-content upload-tab"> | |
| <h3>Upload and Analyze Image</h3> | |
| <input type="file" id="video-image-upload" accept="image/*" /> | |
| <canvas id="video-image-canvas"></canvas> | |
| <button id="analyze-button">Analyze</button> | |
| </div> | |
| <div class="tab-content webcam-tab hidden"> | |
| <h3>Webcam Capture</h3> | |
| <video id="webcam-video" autoplay playsinline></video> | |
| <button id="capture-webcam-button">Capture Image</button> | |
| </div> | |
| <div class="tab-content draw-tab hidden"> | |
| <h3>Draw on Canvas</h3> | |
| <canvas id="draw-canvas"></canvas> | |
| <div class="draw-controls"> | |
| <button id="clear-draw-button">Clear Drawing</button> | |
| <label for="draw-color">Color:</label> | |
| <input type="color" id="draw-color" value="#000000"> | |
| <label for="draw-size">Size:</label> | |
| <input type="range" id="draw-size" min="1" max="10" value="2"> | |
| <button id="discuss-button">Discuss</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- --------------------Digital Human Mentor Video Content Ends----------------- --> | |
| <!-- --------------------Coder Content Starts------------------------------------- --> | |
| <div id="coder" class="content-section hidden"> | |
| <div class="card coder-card"> | |
| <!-- Wrapper for Top Options --> | |
| <div class="coder-options"> | |
| <!-- Model Selection Section --> | |
| <div id="coder-model-selection-container" class="option-section"> | |
| <label for="coder-model-selection">Select Model:</label> | |
| <div class="option-control-group"> | |
| <select id="coder-model-selection"></select> | |
| <button id="coder-download" disabled>Initialize Model</button> | |
| </div> | |
| </div> | |
| <!-- Voice Selection Section --> | |
| <div id="coder-tool-selection-container" class="option-section"> | |
| <label for="coder-tools">Select Voice:</label> | |
| <select id="coder-tools"></select> | |
| </div> | |
| <!-- Speech Controls Section --> | |
| <div id="coder-speech-controls" class="option-section"> | |
| <label for="coder-speech-rate">Speech Rate:</label> | |
| <input type="range" id="coder-speech-rate" min="0.5" max="2" step="0.1" value="1" disabled> | |
| <label for="coder-speech-pitch">Speech Pitch:</label> | |
| <input type="range" id="coder-speech-pitch" min="0" max="2" step="0.1" value="1" disabled> | |
| </div> | |
| <!-- Logs Section --> | |
| <div id="coder-logs-container" class="option-section"> | |
| <h3>Logs</h3> | |
| <div id="coder-logs"> | |
| <!-- Logs will appear here --> | |
| </div> | |
| <button id="coder-clear-logs">Clear Logs</button> | |
| </div> | |
| </div> | |
| <!-- End of Top Options Wrapper --> | |
| <!-- Wrapper for Chat and Python Interpreter --> | |
| <div class="coder-main" style="display: flex; flex-direction: row; gap: 20px;"> | |
| <!-- Chat Window Section --> | |
| <div class="chat-window" style="flex: 2;"> | |
| <!-- Chat Box Section --> | |
| <div id="coder-chat-container"> | |
| <div id="coder-chat-box"> | |
| <!-- Chat messages will appear here --> | |
| </div> | |
| <!-- Chat Stats --> | |
| <div id="coder-chat-stats" class="hidden">Runtime Stats: N/A</div> | |
| <!-- Chat Input Section --> | |
| <div id="coder-text-input-container"> | |
| <input type="text" id="coder-text-input" placeholder="Type your message here..." disabled> | |
| <button id="coder-submit-button" disabled>Send</button> | |
| </div> | |
| <!-- Microphone Controls --> | |
| <div id="coder-mic-container"> | |
| <button id="coder-start_button" aria-label="Start Voice Input" disabled> | |
| <!-- Mic Icon SVG --> | |
| <svg class="mic-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M12 14a3 3 0 003-3V5a3 3 0 00-6 0v6a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 0014 0h-2z"/> | |
| </svg> | |
| </button> | |
| <button id="coder-stop_button" aria-label="Stop Speech" disabled> | |
| <!-- Stop Icon SVG --> | |
| <svg class="stop-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <rect x="6" y="6" width="12" height="12" rx="2" ry="2"></rect> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Loading Spinner --> | |
| <div id="coder-loading-spinner" class="hidden"> | |
| <div class="spinner"></div> | |
| </div> | |
| <!-- Configuration Info --> | |
| <div id="coder-configuration" class="hidden"> | |
| <p>Model Initialized: <span id="coder-selected-model">N/A</span></p> | |
| </div> | |
| </div> | |
| <!-- End of Chat Window Section --> | |
| <!-- Python Interpreter Section --> | |
| <div id="coder-python-container" style="flex: 1; display: flex; flex-direction: column; gap: 10px;"> | |
| <iframe src="https://pyodide.org/en/stable/console.html" style="flex: 1; border: none; border-radius: var(--border-radius);"></iframe> | |
| </div> | |
| <!-- End of Python Interpreter Section --> | |
| </div> | |
| <!-- End of Wrapper for Chat and Python Interpreter --> | |
| <!-- Loading Spinner and Configuration Info (if any additional) can remain as is --> | |
| </div> | |
| </div> | |
| <!-- --------------------Coder Content Ends---------------------------------------- --> | |
| <!-- --------------------Math Content Starts--------------------------------------- --> | |
| <div id="advanced-math" class="content-section hidden"> | |
| <div class="card advanced-math-card"> | |
| <!-- Top Controls --> | |
| <div class="math-options"> | |
| <!-- Model Selection Section --> | |
| <div id="math-model-selection-container" class="option-section"> | |
| <label for="math-model-selection">Select Math Model:</label> | |
| <select id="math-model-selection"></select> | |
| <button id="math-download" disabled>Initialize Model</button> | |
| </div> | |
| <!-- Tool Selection Section --> | |
| <div id="math-tool-selection-container" class="option-section"> | |
| <label for="math-tools">Select Voice:</label> | |
| <select id="math-tools"></select> | |
| </div> | |
| <!-- Speech Controls Section --> | |
| <div id="math-speech-controls" class="option-section"> | |
| <label for="math-speech-rate">Speech Rate:</label> | |
| <input type="range" id="math-speech-rate" min="0.5" max="2" step="0.1" value="1" disabled> | |
| <label for="math-speech-pitch">Speech Pitch:</label> | |
| <input type="range" id="math-speech-pitch" min="0" max="2" step="0.1" value="1" disabled> | |
| </div> | |
| <!-- Logs Section --> | |
| <div id="math-logs-container" class="option-section"> | |
| <h3>Logs</h3> | |
| <div id="math-logs"> | |
| <!-- Logs will appear here --> | |
| </div> | |
| <button id="math-clear-logs">Clear Logs</button> | |
| </div> | |
| </div> | |
| <!-- Chat Window Section --> | |
| <div class="chat-window"> | |
| <!-- Chat Box Section --> | |
| <div id="math-chat-container"> | |
| <div id="math-chat-box"> | |
| <!-- Chat messages will appear here --> | |
| </div> | |
| <!-- Chat Stats --> | |
| <div id="math-chat-stats" class="hidden">Runtime Stats: N/A</div> | |
| <!-- Chat Input Section --> | |
| <div id="math-text-input-container"> | |
| <input type="text" id="math-text-input" placeholder="Type your math problem here..." disabled> | |
| <button id="math-submit-button" disabled>Submit</button> | |
| </div> | |
| <!-- Microphone Controls --> | |
| <div id="math-mic-container"> | |
| <button id="math-start_button" aria-label="Start Voice Input" disabled> | |
| <!-- Mic Icon SVG --> | |
| <svg class="mic-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M12 14a3 3 0 003-3V5a3 3 0 00-6 0v6a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 0014 0h-2z"/> | |
| </svg> | |
| </button> | |
| <button id="math-stop_button" aria-label="Stop Speech" disabled> | |
| <!-- Stop Icon SVG --> | |
| <svg class="stop-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <rect x="6" y="6" width="12" height="12" rx="2" ry="2"></rect> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Loading Spinner --> | |
| <div id="math-loading-spinner" class="hidden"> | |
| <div class="spinner"></div> | |
| </div> | |
| <!-- Configuration Info --> | |
| <div id="math-configuration" class="hidden"> | |
| <p>Model Initialized: <span id="math-selected-model">N/A</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- --------------------Math Content Ends----------------------------------------------- --> | |
| <!-- --------------------Interdisciplinary Content Starts-------------------------------- --> | |
| <div id="interdisciplinary" class="content-section hidden"> | |
| <div class="card interdisciplinary-card"> | |
| <!-- Interdisciplinary Studies Assistant Layout --> | |
| <div class="inter-options"> | |
| <!-- Model Selection Section --> | |
| <div id="inter-model-selection-container" class="option-section"> | |
| <label for="inter-model-selection">Select Model:</label> | |
| <select id="inter-model-selection"></select> | |
| <button id="inter-download" disabled>Initialize Model</button> | |
| </div> | |
| <!-- Voice Selection Section --> | |
| <div id="inter-tool-selection-container" class="option-section"> | |
| <label for="inter-tools">Select Voice:</label> | |
| <select id="inter-tools"></select> | |
| </div> | |
| <!-- Speech Controls Section --> | |
| <div id="inter-speech-controls" class="option-section"> | |
| <label for="speech-rate">Speech Rate:</label> | |
| <input type="range" id="speech-rate" min="0.5" max="2" step="0.1" value="1" disabled> | |
| <label for="speech-pitch">Speech Pitch:</label> | |
| <input type="range" id="speech-pitch" min="0" max="2" step="0.1" value="1" disabled> | |
| </div> | |
| <!-- Logs Section --> | |
| <div id="inter-logs-container" class="option-section"> | |
| <h3>Logs</h3> | |
| <div id="inter-logs"> | |
| <!-- Logs will appear here --> | |
| </div> | |
| <button id="inter-clear-logs">Clear Logs</button> | |
| </div> | |
| </div> | |
| <div class="chat-window"> | |
| <!-- Chat Box Section --> | |
| <div id="inter-chat-container"> | |
| <div id="inter-chat-box"> | |
| <!-- Chat messages will appear here --> | |
| </div> | |
| <!-- Chat Stats --> | |
| <div id="inter-chat-stats" class="hidden">Runtime Stats: N/A</div> | |
| <!-- Chat Input Section --> | |
| <div id="inter-text-input-container"> | |
| <input type="text" id="inter-text-input" placeholder="Type your message here..." disabled> | |
| <button id="inter-submit-button" disabled>Send</button> | |
| </div> | |
| <!-- Microphone Controls --> | |
| <div id="inter-mic-container"> | |
| <button id="inter-start_button" aria-label="Start Voice Input" disabled> | |
| <!-- Mic Icon SVG --> | |
| <svg class="mic-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M12 14a3 3 0 003-3V5a3 3 0 00-6 0v6a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 0014 0h-2z"/> | |
| </svg> | |
| </button> | |
| <button id="inter-stop_button" aria-label="Stop Speech" disabled> | |
| <!-- Stop Icon SVG --> | |
| <svg class="stop-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <rect x="6" y="6" width="12" height="12" rx="2" ry="2"></rect> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Loading Spinner --> | |
| <div id="loading-spinner" class="hidden"> | |
| <div class="spinner"></div> | |
| </div> | |
| <!-- Configuration Info --> | |
| <div id="inter-configuration" class="hidden"> | |
| <p>Model Initialized: <span id="inter-selected-model">N/A</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- --------------------Interdisciplinary Content Ends------------------------------------- --> | |
| <!-- --------------------Insights Content Starts------------------------------------------- --> | |
| <div id="insights" class="content-section hidden"> | |
| <div class="card"> | |
| <h2>Insights</h2> | |
| <p>Content for Document Insights will go here. Document Insights (PDF, Image), Translator, Youtube Summarizer, </p> | |
| </div> | |
| </div> | |
| <!-- --------------------Insights Content Ends------------------------------------------- --> | |
| <!-- --------------------Podcast Content Starts------------------------------------------- --> | |
| <div id="podcast" class="content-section hidden"> | |
| <div class="card"> | |
| <h2>Podcast</h2> | |
| <p>Content for Podcast will go here. Document Podcast, Conversational Podcast, </p> | |
| </div> | |
| </div> | |
| <!-- --------------------Podcast Content Ends--------------------------------------------- --> | |
| <!-- --------------------3d-explorer Content Starts------------------------------------------- --> | |
| <div id="3d-explorer" class="content-section hidden"> | |
| <div class="card"> | |
| <h2>3D Explorer</h2> | |
| <p>Content for 3D Explorer will go here.</p> | |
| </div> | |
| </div> | |
| <!-- --------------------3d-explorer Content Ends--------------------------------------------- --> | |
| <div id="knowledge-base" class="content-section hidden"> | |
| <div class="card"> | |
| <h2>Knowledge Base</h2> | |
| <p>Content for Knowledge Base will go here, Treasured Teachings, Vintage Papers, Digital Dustbin.</p> | |
| </div> | |
| </div> | |
| <div id="digital-twin" class="content-section hidden"> | |
| <div class="card"> | |
| <h2>Digital Twin</h2> | |
| <p>Persona, Memory, Social Graph, Class Notes, Homework, Tracker.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Include Axios from CDN --> | |
| <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> | |
| <!-- Include the necessary scripts --> | |
| <script type="module"> | |
| // Sidebar navigation | |
| const sidebarLinks = document.querySelectorAll('.sidebar a'); | |
| const contentSections = document.querySelectorAll('.content-section'); | |
| sidebarLinks.forEach(link => { | |
| link.addEventListener('click', (e) => { | |
| e.preventDefault(); | |
| // Remove active class from all links | |
| sidebarLinks.forEach(l => l.classList.remove('active')); | |
| // Add active class to the clicked link | |
| link.classList.add('active'); | |
| // Hide all content sections | |
| contentSections.forEach(section => section.classList.add('hidden')); | |
| // Show the selected content section | |
| const target = link.getAttribute('data-content'); | |
| document.getElementById(target).classList.remove('hidden'); | |
| }); | |
| }); | |
| </script> | |
| <!-- Include the necessary scripts --> | |
| <!-- Include Pyodide Script --> | |
| <script type="module" src="digital.human.audio.js"> </script> | |
| <script type="module" src="digital.human.video.js"> </script> | |
| <script type="module" src="coder.js"> </script> | |
| <script type="module" src="advanced.math.js"></script> | |
| <script type="module" src="interdisciplinary.js"></script> <!-- New JS for Interdisciplinary --> | |
| </body> | |
| </html> | |