Aayush branch

live.html

@@ -35,12 +35,25 @@
             overflow-y: auto;
             scrollbar-width: thin;
             scrollbar-color: #0f0 #000;
+            margin-bottom: 80px; 
+            padding: 20px; 
         }
+
         .response {
-            opacity: 0;
+            background-color: rgba(0, 0, 0, 0.8); 
+            border: 1px solid #0f0; 
+            border-radius: 10px; 
+            margin-bottom: 15px; 
+            padding: 15px; 
+            box-shadow: 0 0 10px #0f0; 
+            color: #0f0; 
+            text-align: left; 
+            font-size: 16px; 
+            line-height: 1.5; 
             animation: fadeInUp 1s forwards;
             animation-delay: var(--animation-order);
         }
+
         @keyframes fadeInUp {
             from {
                 opacity: 0;
@@ -89,6 +102,38 @@
             font-size: 14px;
             animation: fadeIn 2s ease-in-out;
         }
+        .pagination-button {
+            position: absolute;
+            bottom: 20px;
+            font-size: 18px;
+            cursor: pointer;
+            border: 2px solid #0f0;
+            border-radius: 20px;
+            padding: 10px 20px;
+            transition: all 0.3s ease-in-out;
+        }
+        .prev-button {
+            left: calc(50% - 120px);
+            background-color: #0f0;
+            color: #000;
+            box-shadow: 0 0 10px #0f0, 0 0 20px #0f0;
+        }
+        .prev-button:hover {
+            background-color: #000;
+            color: #0f0;
+            box-shadow: 0 0 20px #0f0, 0 0 40px #0f0;
+        }
+        .next-button {
+            left: calc(50% + 20px);
+            background-color: #0f0;
+            color: #000;
+            box-shadow: 0 0 10px #0f0, 0 0 20px #0f0;
+        }
+        .next-button:hover {
+            background-color: #000;
+            color: #0f0;
+            box-shadow: 0 0 20px #0f0, 0 0 40px #0f0;
+        }
         @keyframes fadeIn {
             from { opacity: 0; }
             to { opacity: 1; }
@@ -110,11 +155,11 @@
         <!--A block of text needs to be added to explain our process of converting PDF files to JSONL files more in depth.-->
         <h2>COMING SOON: Live Autonomous Intelligence Center for the Community</h2>
         <div id="responses"></div>
+        <button class="pagination-button prev-button">Prev</button> 
+        <button class="pagination-button next-button">Next</button>
     </div>
-
     <button class="explore-button" onclick="window.location='show_case.html'">🚀 Explore the Open Source Autonomous Intelligence for Electronics 🚀</button> <!--This needs to link to the show_case.html file.-->
 
-
     <!--Fix to have this text show-->
     <script>
         $(document).ready(function() {
@@ -128,7 +173,6 @@ <h2>COMING SOON: Live Autonomous Intelligence Center for the Community</h2>
                 "Explain the concept of hardware description languages like VHDL and Verilog. Return low level code examples.",
                 "What are the key differences between Arduino and Raspberry Pi in terms of usage in electronics projects? Return low level code examples.",
                 "How do interrupts improve the efficiency of a microcontroller? Return low level code examples.",
-                /*
                 "Describe the process of programming an FPGA compared to a microcontroller. Return low level code examples.",
                 "What role do capacitors play in smoothing voltage fluctuations in power supplies? Return low level code examples.",
                 "Explain the significance of pull-up and pull-down resistors in digital circuits. Return low level code examples.",
@@ -151,21 +195,49 @@ <h2>COMING SOON: Live Autonomous Intelligence Center for the Community</h2>
                 "How does the use of an FPGA affect the design cycle of an electronic product? Return low level code examples.",
                 "Describe the role of ADCs (Analog to Digital Converters) in sensor interfacing. Return low level code examples.",
                 // Include other questions here...
-                */
             ];
 
 
-            function fetchResponse(index = 0) {
-                const question = questions[index % questions.length];
-                $.getJSON('/get-response', { 'question': question }, function(data) {
-                    const responseHtml = `<div class="response" style="--animation-order:${index * 0.1}s;"><strong>Question:</strong> ${data.question}<br><strong>Response:</strong> ${data.response}</div>`;
-                    $('#responses').prepend(responseHtml);
-                    setTimeout(() => fetchResponse(index + 1), 1);
-                });
+            const questionsPerPage = 10;
+            let currentPage = 0;
+
+            function displayQuestions() {
+                const start = currentPage * questionsPerPage;
+                const end = Math.min(start + questionsPerPage, questions.length);
+                const questionsToShow = questions.slice(start, end);
+
+                const questionsHtml = questionsToShow.map((question, index) => 
+                    `<div class="response" style="--animation-order:${index * 0.1}s;">${start + index + 1}. ${question}</div>`
+                ).join('');
+
+                $('#responses').html(questionsHtml);
+            }
+
+            function showNextQuestions() {
+                if ((currentPage + 1) * questionsPerPage < questions.length) {
+                    currentPage++;
+                    displayQuestions();
+                } else {
+                    alert("No more questions to show.");
+                }
+            }
+
+            function showPrevQuestions() {
+                if (currentPage > 0) {
+                    currentPage--;
+                    displayQuestions();
+                } else {
+                    alert("No previous questions to show.");
+                }
             }
 
-            fetchResponse();
+            // Initialize the display
+            displayQuestions();
+
+            // Event listeners for the buttons
+            $('.next-button').click(showNextQuestions);
+            $('.prev-button').click(showPrevQuestions);
         });
     </script>
 </body>
-</html>
+</html>