Update index.html

index.html

@@ -61,15 +61,16 @@
 </div>
 
 <!-- Interactive Highlight Slider -->
-<div class="container">
+<div class="container" style="max-width: 900px;">
   <h2>Paper Highlights</h2>
-  <div id="highlight-box" style="text-align: center; padding: 30px; border: 1px solid #ddd; border-radius: 10px; background: #fafafa;">
-    <p id="highlight-text" style="font-size: 1.2rem; font-style: italic;"></p>
-    <img id="highlight-image" src="" alt="Highlight figure" style="max-width: 100%; max-height: 400px; margin-top: 20px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.1);">
+  <div id="highlight-box" style="padding: 30px; border: 1px solid #ddd; border-radius: 10px; background: #fafafa;">
+    <img id="highlight-image" src="" alt="Highlight figure"
+      style="max-width: 100%; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); margin-bottom: 20px;">
+    <p id="highlight-text" style="font-size: 1.1rem; text-align: left; font-style: italic;"></p>
   </div>
   <div class="text-center mt-3">
-    <button onclick="prevHighlight()" class="btn btn-outline-primary">← Prev</button>
-    <button onclick="nextHighlight()" class="btn btn-outline-primary">Next →</button>
+    <button onclick="prevHighlight()" class="btn btn-outline-primary">←</button>
+    <button onclick="nextHighlight()" class="btn btn-outline-primary">→</button>
   </div>
 </div>
 
@@ -104,8 +105,9 @@
   let highlightIndex = 0;
 
   function showHighlight(index) {
-    document.getElementById('highlight-text').textContent = highlights[index].text;
-    document.getElementById('highlight-image').src = highlights[index].image;
+    const highlight = highlights[index];
+    document.getElementById('highlight-text').textContent = highlight.text;
+    document.getElementById('highlight-image').src = highlight.image;
   }
 
   function prevHighlight() {