Preparation for Classic mode implementation

vtp6 · Jun 29, 2024 · d2a1bf8 · d2a1bf8
1 parent 3b93e76
commit d2a1bf8
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 1 deletion.
diff --git a/scripts/folders-classic.js b/scripts/folders-classic.js
@@ -1,13 +1,26 @@
 let full_terms_list = [];
 let randomised_terms = [];
 
+function set_progress_bar_background(val, col) {
+    document.getElementById("progress-bar-container").style.background =
+        `linear-gradient(to right, ${col} ${val * 100}%, var(--other-colour) ${(1 - val) * 100}%)`;
+}
+
 function folders_start_classic(terms) {
     full_terms_list = [...terms];
     randomised_terms = random_shuffle(terms);
 
     let classic_div = document.createElement("div");
     classic_div.innerHTML = `
-        
+        <div id="progress-bar-div">
+            <div id="progress-bar-container"></div>
+            <span id="progress-bar-text">0/0 (0.00%)</span>
+        </div>
+        <h1 id="classic-question">
+            <span id="classic-question-text"></span>
+            <button class="start-button" id="finish-button">Finish!</button>
+        </h1>
+        <input type="text" id="classic-input" placeholder="Type the definition here..." />
     `;
     classic_div.id = "classic-div";
     document.getElementById("content")

diff --git a/styles/folders.css b/styles/folders.css
@@ -281,6 +281,28 @@ div#classic-div {
     box-sizing: border-box;
     width: 100%;
     height: 50%;
+
+    div#progress-bar-div {
+        height: 25px;
+
+        * {
+            height: 25px;
+            display: inline-block;
+        }
+
+        div#progress-bar-container {
+            box-sizing: border-box;
+            width: calc(100% - 150px);
+            border: 2px solid;
+            border-radius: 12.5px;
+            background: white;
+        }
+
+        span#progress-bar-text {
+            float: right;
+            font-size: 20px;
+        }
+    }
 }
 
 @media (max-width: 999px) {
@@ -376,6 +398,10 @@ body.light-theme {
         color: beige;
         border: 3px solid black;
     }
+
+    div#progress-bar-container {
+        --other-colour: #ffffff;
+    }
 }
 
 body.dark-theme {
@@ -471,6 +497,10 @@ body.dark-theme {
         background-color: #333333;
         color: #e0f0f0;
     }
+
+    div#progress-bar-container {
+        --other-colour: #111111;
+    }
 }
 
 @keyframes correct {