From 5398c14845ebfdbfc71291d4057b1ce38c6a8c87 Mon Sep 17 00:00:00 2001
From: Aayush015 <aayushkafle308@gmail.com>
Date: Sun, 1 Sep 2024 10:09:17 -0600
Subject: [PATCH 1/3] Added prev and next buttons with functionality.

---
 live.html | 83 +++++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 72 insertions(+), 11 deletions(-)

diff --git a/live.html b/live.html
index f2464d9..2746489 100644
--- a/live.html
+++ b/live.html
@@ -88,6 +88,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; }
@@ -99,6 +131,8 @@
         <!--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='{{ url_for('attenuation') }}'">🚀 Explore the Open Source Autonomous Intelligence for Electronics 🚀</button> <!--This needs to link to the show_case.html file.-->
 
@@ -115,7 +149,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.",
@@ -138,21 +171,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.");
+                }
             }
 
-            fetchResponse();
+            function showPrevQuestions() {
+                if (currentPage > 0) {
+                    currentPage--;
+                    displayQuestions();
+                } else {
+                    alert("No previous questions to show.");
+                }
+            }
+
+            // Initialize the display
+            displayQuestions();
+
+            // Event listeners for the buttons
+            $('.next-button').click(showNextQuestions);
+            $('.prev-button').click(showPrevQuestions);
         });
     </script>
 </body>
-</html>
+</html>
\ No newline at end of file

From afb17faf238878a6205d3a1c126615d4654ef33b Mon Sep 17 00:00:00 2001
From: Aayush015 <aayushkafle308@gmail.com>
Date: Sun, 1 Sep 2024 13:12:47 -0600
Subject: [PATCH 2/3] Added CSS for questions

---
 live.html | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/live.html b/live.html
index 2746489..c4eb796 100644
--- a/live.html
+++ b/live.html
@@ -34,12 +34,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;

From 58857c19c824c27c4ce2d18862218a5ca24e3be4 Mon Sep 17 00:00:00 2001
From: Aayush015 <aayushkafle308@gmail.com>
Date: Sun, 1 Sep 2024 13:23:52 -0600
Subject: [PATCH 3/3] Corrected minor error

---
 live.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/live.html b/live.html
index c4eb796..b1eec23 100644
--- a/live.html
+++ b/live.html
@@ -147,7 +147,7 @@ <h2>COMING SOON: Live Autonomous Intelligence Center for the Community</h2>
         <button class="pagination-button prev-button">Prev</button> 
         <button class="pagination-button next-button">Next</button>
     </div>
-    <button class="explore-button" onclick="window.location='{{ url_for('attenuation') }}'">🚀 Explore the Open Source Autonomous Intelligence for Electronics 🚀</button> <!--This needs to link to the show_case.html file.-->
+    <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>