Nice looking cards

templates/index.html

@@ -34,7 +34,7 @@
 
     <div class="container">
       <h2>Current</h2>
-      <p id="status-message">Waiting</p>
+      <div id="status-message"></div>
     </div>
 
     </br>
@@ -56,19 +56,29 @@
 
     <div class="container">
       <h2>Finished</h2>
-      <table class="table" id="finish-table">
-        <thead>
-          <tr>
-            <th scope="col">Artist</th>
-            <th scope="col">Title</th>
-            <th scope="col">Status</th>
-          </tr>
-        </thead>
-        <tbody id="finish-table-body"></tbody>
-      </table>
+      <div id=finish-table-body></div>
     </div>
 
     <script>
+      function createCard(artist, title, status, art) {
+        return `
+          <div class="card mb-3" style="max-width: 540px;">
+            <div class="row g-0">
+              <div class="col-md-4">
+                <img src="${art}" class="img-fluid rounded-start">
+              </div>
+              <div class="col-md-8">
+                <div class="card-body">
+                  <h5 class="card-title">${title}</h5>
+                  <p class="card-text">${artist}</p>
+                  <p class="card-text"><small class="text-body-secondary">${status}</small></p>
+                </div>
+              </div>
+            </div>
+          </div>
+        `;
+      }
+
       const ripFormInput = document.getElementById("urlInput");
 
       document
@@ -90,14 +100,14 @@
       const queueTableBody = document.getElementById("queue-table-body");
       const finishTableBody = document.getElementById("finish-table-body");
       const statusMessage = document.getElementById("status-message");
+      const statusMessageImage = document.getElementById("status-message-img");
 
       async function status() {
-
         const response = await fetch("/status", { method: "GET" });
         const statusJson = await response.json();
 
         const currentInfo = statusJson.currentReleaseInfo;
-        statusMessage.innerText = `${currentInfo.title} by ${currentInfo.artist} | ${currentInfo.status}`;
+        statusMessage.innerHTML = createCard(currentInfo.artist, currentInfo.title, currentInfo.status, currentInfo.art_url);
 
         queueTableBody.innerHTML = "";
 
@@ -109,7 +119,7 @@
 
         finishTableBody.innerHTML = "";
         for (const q of statusJson.finishedQueue) {
-          finishTableBody.innerHTML += `<tr><td>${q.artist}</td><td>${q.title}</td><td>${q.status}</td></tr>`;
+          finishTableBody.innerHTML += createCard(q.artist, q.title, q.status, q.art_url);
         }
       }