From 03b3bf9f536869104b7676a5f5cfc72f1a147508 Mon Sep 17 00:00:00 2001
From: Vlad <vlad@ddl.su>
Date: Fri, 2 May 2025 12:17:45 +0300
Subject: [PATCH] feat: update database.html to Bootstrap 5 - Update table
 classes for responsive design - Update pagination component - Add modern
 spacing utilities

---
 templates/database.html | 73 ++++++++++++++++++++++++-----------------
 1 file changed, 42 insertions(+), 31 deletions(-)

diff --git a/templates/database.html b/templates/database.html
index a6a2cd2..02208dc 100644
--- a/templates/database.html
+++ b/templates/database.html
@@ -1,33 +1,32 @@
 {% extends "head.html" %}
 
 {% block content %}
-<div class="container">
-    <div class="hero-unit">
-        <h1>Buying a Used Car? Check it!</h1>
-        <br>
-        <p><a href="https://www.salvagedb.com/" title="Salvagedb.com" rel="nofollow">Salvagedb.com</a> provides
+<div class="container py-4">
+    <div class="p-5 mb-4 bg-light rounded-3">
+        <h1 class="display-4">Buying a Used Car? Check it!</h1>
+        <p class="lead">
+            <a href="https://www.salvagedb.com/" title="Salvagedb.com" rel="nofollow">Salvagedb.com</a> provides
             information about salvage or junk vehicles; damage from hail, flood or fire; mileage discrepancies or
             odometer rollback; and gray market vehicles. We do not claim that the car got in our databank has salvage
             title, but the fact that it has been damaged for sure. Our site helps people avoid buying a damaged vehicle
             in the past.
         </p>
     </div>
-    <br><br>
 
-    <div class="table-container" style="display: flex; justify-content: center;">
-        <table id="hor-minimalist-a" summary="Salvage cars;Database page 1">
+    <div class="table-responsive">
+        <table class="table table-hover">
             <thead>
             <tr>
-                <th>VIN</th>
-                <th>Make</th>
-                <th>Model</th>
-                <th>Year</th>
+                <th scope="col">VIN</th>
+                <th scope="col">Make</th>
+                <th scope="col">Model</th>
+                <th scope="col">Year</th>
             </tr>
             </thead>
             <tbody>
             {% for row in pg %}
             <tr>
-                <td><a href="/detail/{{ row[1] }}.html">{{ row[1] }}</a></td>
+                <td><a href="/detail/{{ row[1] }}.html" class="text-decoration-none">{{ row[1] }}</a></td>
                 <td>{{ row[2] }}</td>
                 <td>{{ row[3] }}</td>
                 <td>{{ row[4] }}</td>
@@ -37,16 +36,21 @@
         </table>
     </div>
 
-    <br><br>
-    <div class="pagination-container">
-        <div class="pagination">
+    <nav aria-label="Page navigation" class="my-4">
+        <ul class="pagination justify-content-center">
             {% if cur_page > 1 %}
-                <a class="btn" href="/database/page1.html">First</a>
-                <a class="btn" href="/database/page{{cur_page-1}}.html">Prev</a>
+                <li class="page-item">
+                    <a class="page-link" href="/database/page1.html">First</a>
+                </li>
+                <li class="page-item">
+                    <a class="page-link" href="/database/page{{cur_page-1}}.html">Prev</a>
+                </li>
             {% endif %}
             
             {% if cur_page > 3 %}
-                <span class="btn disabled">...</span>
+                <li class="page-item disabled">
+                    <span class="page-link">...</span>
+                </li>
             {% endif %}
             
             {% set start_page = cur_page - 2 %}
@@ -60,25 +64,32 @@
             {% endif %}
             
             {% for page in range(start_page, end_page + 1) %}
-                {% if page == cur_page %}
-                    <button class="btn active">{{page}}</button>
-                {% else %}
-                    <a class="btn" href="/database/page{{page}}.html">{{page}}</a>
-                {% endif %}
+                <li class="page-item {% if page == cur_page %}active{% endif %}">
+                    {% if page == cur_page %}
+                        <span class="page-link">{{page}}</span>
+                    {% else %}
+                        <a class="page-link" href="/database/page{{page}}.html">{{page}}</a>
+                    {% endif %}
+                </li>
             {% endfor %}
             
             {% if cur_page < max_page-2 %}
-                <span class="btn disabled">...</span>
+                <li class="page-item disabled">
+                    <span class="page-link">...</span>
+                </li>
             {% endif %}
             
             {% if cur_page < max_page %}
-                <a class="btn" href="/database/page{{cur_page+1}}.html">Next</a>
-                <a class="btn" href="/database/page{{max_page}}.html">Last</a>
+                <li class="page-item">
+                    <a class="page-link" href="/database/page{{cur_page+1}}.html">Next</a>
+                </li>
+                <li class="page-item">
+                    <a class="page-link" href="/database/page{{max_page}}.html">Last</a>
+                </li>
             {% endif %}
-        </div>
-    </div>
+        </ul>
+    </nav>
 </div>
-<br>
-<hr>
+<hr class="my-4">
 
 {% endblock %}