Add zebra stripes to cards displaying generated names and predicted c…

…ountries of nationality
lk101101 · Aug 24, 2024 · 0e71385 · 0e71385
1 parent a74bd34
commit 0e71385
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 14 deletions.
diff --git a/templates/generate_form.html b/templates/generate_form.html
@@ -44,11 +44,15 @@ <h2 class="mt-4">
   </h2>
 
   <!-- List generated names -->
-  <ul class="list-group">
-    {% for name in names %}
-    <li class="list-group-item">{{ name }}</li>
-    {% endfor %}
-  </ul>
+  <table class="table table-striped">
+    <tbody>
+      {% for name in names %}
+      <tr>
+        <td>{{ name }}</td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
   {% endif %}
 </main>
 {% endblock %}
diff --git a/templates/name_info.html b/templates/name_info.html
@@ -36,18 +36,24 @@ <h2 class="mt-4">
     <div class="card-header">
       Predicted Nationalities
     </div>
-    <ul class="list-group list-group-flush">
+    <div class="card-body">
       {% if nationalize[1] is none %}
-      <p class="list-group-item d-flex justify-content-between align-items-center">{{ nationalize[0][0] }}</p>
+      <p class="list-group-item d-flex justify-content-between align-items-center">
+        {{ nationalize[0][0] }}
+      </p>
       {% else %}
-      {% for result in nationalize %}
-      <li class="list-group-item d-flex justify-content-between align-items-center">
-        <p>Country: <strong>{{ result[0] }}</strong>
-          | Probability: <strong>{{ result[1] }}%</strong></p>
-      </li>
-      {% endfor %}
+      <table class="table table-striped">
+        <tbody>
+          {% for result in nationalize %}
+          <tr>
+            <td>Country: <strong>{{ result[0] }}</strong></td>
+            <td>Probability: <strong>{{ result[1] }}%</strong></td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
       {% endif %}
-    </ul>
+    </div>
   </div>
 
   <!-- Predicted Gender -->