feat: обновление стилей для улучшения дизайна и адаптивности - изменены отступы и добавлены новые стили для hero-unit и таблицы, улучшена центровка и читаемость на мобильных устройствах

app.py

@@ -56,7 +56,6 @@ def save_request(request):
     req_data['remote_addr'] = request.remote_addr
     return req_data
 
-
 dictConfig(
     {
         "version": 1,
@@ -86,10 +85,6 @@ dictConfig(
 )
 
 
-
-
-
-
 @app.after_request
 def after_request(response):
     if request.cookies.get('user_id', None) == None:

static/styles.css

@@ -7,7 +7,8 @@
         padding: 0 15px;
     }
     .hero-unit {
-        padding: 20px;
+        padding: 15px;
+        margin: 0 10px;
     }
     .hero-unit h1 {
         font-size: 24px;
@@ -51,31 +52,37 @@
     margin: 0;
 }
 
-.table-responsive {
+.table-container {
     width: 100%;
-    margin-bottom: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
 }
 
 #hor-minimalist-a {
     width: 100%;
+    max-width: 1000px;
+    margin: 0 auto;
     border-collapse: collapse;
-    margin: 0;
-    font-size: 14px;
+    text-align: left;
     background: #fff;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    border-radius: 8px;
+    overflow: hidden;
 }
 
 #hor-minimalist-a th {
+    font-size: 14px;
+    font-weight: normal;
+    color: #039;
+    padding: 10px 8px;
+    border-bottom: 2px solid #6678b1;
     background: #f5f5f5;
-    padding: 12px;
-    text-align: left;
-    font-weight: 600;
-    border-bottom: 2px solid #ddd;
 }
 
 #hor-minimalist-a td {
-    padding: 12px;
-    border-bottom: 1px solid #ddd;
-    color: #333;
+    color: #669;
+    padding: 9px 8px 0px 8px;
     background: #fff;
 }
 
@@ -88,12 +95,14 @@
 }
 
 @media (max-width: 768px) {
+    #hor-minimalist-a {
+        margin: 0 10px;
+    }
+    
     #hor-minimalist-a th,
     #hor-minimalist-a td {
         padding: 8px;
         font-size: 13px;
-        white-space: nowrap;
-        background: #fff;
     }
     
     #hor-minimalist-a th {
@@ -1221,7 +1230,8 @@ a.menu:after, .dropdown-toggle:after {
     }
     
     .hero-unit {
-        padding: 20px;
+        padding: 15px;
+        margin: 0 10px;
     }
     
     .hero-unit h1 {
@@ -1365,3 +1375,24 @@ a.menu:after, .dropdown-toggle:after {
         font-size: 18px;
     }
 }
+
+.hero-unit {
+    padding: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+    background-color: #f5f5f5;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.hero-unit h1 {
+    font-size: 28px;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.hero-unit p {
+    font-size: 16px;
+    line-height: 1.6;
+    color: #666;
+} 

templates/database.html

@@ -14,23 +14,25 @@
     </div>
     <br><br>
 
-    <div class="table-responsive">
+    <div class="table-container">
         <table id="hor-minimalist-a" summary="Salvage cars;Database page 1">
             <thead>
             <tr>
-                <th scope="col">Make</th>
-                <th scope="col">Model</th>
-                <th scope="col">Year</th>
-                <th scope="col">VIN</th>
+                <th>#</th>
+                <th>VIN</th>
+                <th>Make</th>
+                <th>Model</th>
+                <th>Year</th>
             </tr>
             </thead>
             <tbody>
-            {% for it in pg%}
+            {% for row in pg %}
             <tr>
-                <td>{{it[2]}}</td>
-                <td>{{it[3][0:14]}}</td>
-                <td>{{it[4]}}</td>
-                <td><a href="/detail/{{it[1]}}.html" title="vin check - {{it[1]}}">{{it[1]}}<i class="icon-search"></i></a></td>
+                <td>{{ row[0] }}</td>
+                <td><a href="/detail/{{ row[1] }}.html">{{ row[1] }}</a></td>
+                <td>{{ row[2] }}</td>
+                <td>{{ row[3] }}</td>
+                <td>{{ row[4] }}</td>
             </tr>
             {% endfor %}
             </tbody>