From 014c3771fd6fd70c643040f81ef449e666071de4 Mon Sep 17 00:00:00 2001
From: Karma Riuk <riukkarma@gmail.com>
Date: Thu, 15 May 2025 14:10:57 +0200
Subject: [PATCH] added info button for each fieldset

---
 public/css/style.css |  5 +----
 public/index.html    | 24 +++++++++++++++++++++---
 public/js/index.js   |  6 ++++--
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 749be02..39c8a51 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -43,10 +43,7 @@ header .info-btn {
 }
 
 fieldset .info-btn {
-    aspect-ratio: 1;
-    padding: .35em .7em;
-    border-radius: 100%;
-    border-width: 1px;
+    padding: revert;
 }
 
 header #page-title {
diff --git a/public/index.html b/public/index.html
index 3f3a547..f443759 100644
--- a/public/index.html
+++ b/public/index.html
@@ -26,7 +26,7 @@
         <fieldset>
             <legend>
                 <strong>Download a Dataset</strong>
-                <button id="info-download-btn" class='info-btn'><i class="fa fa-question" ></i></button>
+                <button id="info-download-btn" class='info-btn'><i class="fa fa-info" ></i></button>
             </legend>
 
             <label for="dataset-select">Dataset:</label>
@@ -43,7 +43,10 @@
         </fieldset>
 
         <fieldset>
-            <legend><strong>Upload Your Answers</strong></legend>
+            <legend>
+                <strong>Upload Your Answers</strong>
+                <button id="info-upload-btn" class='info-btn'><i class="fa fa-info" ></i></button>
+            </legend>
             <label for="answer-cype">Type:</label>
             <select id="answer-cype">
                 <option value="comment">Comment Generation</option>
@@ -57,7 +60,10 @@
         </fieldset>
 
         <fieldset>
-            <legend><strong>Get status of ongoing process</strong></legend>
+            <legend>
+                <strong>Get status of ongoing process</strong>
+                <button id="info-results-btn" class='info-btn'><i class="fa fa-info" ></i></button>
+            </legend>
             <label for="url">URL:</label>
             <input type="url" id="url" placeholder="https://gym.si.usi.ch:45003/results/XXXX" size=50 required />
             <br /><br />
@@ -137,6 +143,18 @@
                 yes
             </div>
         </template>
+        <template id="info-upload">
+            <h2>Uploading results</h2>
+            <div>
+                yes
+            </div>
+        </template>
+        <template id="info-results">
+            <h2>Getting information of ongoing process</h2>
+            <div>
+                yes
+            </div>
+        </template>
     </main>
 </body>
 
diff --git a/public/js/index.js b/public/js/index.js
index d2ee6e8..17803ae 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -171,8 +171,10 @@ modalOverlay.addEventListener("keydown", (e) => {
     }
 });
 
-window["info-download-btn"].addEventListener("click", (e) => {
-    show_modal_with(window["info-download"].content.cloneNode(true));
+["download", "upload", "results"].forEach((section) => {
+    window[`info-${section}-btn`].addEventListener("click", () => {
+        show_modal_with(window[`info-${section}`].content.cloneNode(true));
+    });
 });
 
 document.getElementById("request-status").onclick = () => {