fix: исправление проверки капчи в app.py - изменен порог для успешной проверки на 0, добавление нового стиля в head.html для улучшения дизайна, упрощение структуры таблицы в search.html для лучшей читаемости и адаптивности

This commit is contained in:
Vlad 2025-04-20 02:19:39 +03:00
parent 640a411bdd
commit 75dce58f98
3 changed files with 494 additions and 461 deletions

427
static/styles.css Normal file
View File

@ -0,0 +1,427 @@
@media (max-width: 768px) {
.search_box {
width: 100%;
max-width: 300px;
}
.container {
padding: 0 15px;
}
.hero-unit {
padding: 20px;
}
.hero-unit h1 {
font-size: 24px;
}
img {
max-width: 100%;
height: auto;
}
.search-container {
width: 100%;
padding: 0 15px;
}
.search-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.search-wrapper input {
width: 100%;
max-width: 300px;
}
.search-wrapper button {
width: 100%;
max-width: 300px;
}
.vin-image {
max-width: 100%;
height: auto;
}
}
.search-title {
text-align: center;
width: 100%;
margin-bottom: 20px;
}
.search-title h2 {
display: inline-block;
margin: 0;
}
.table-responsive {
width: 100%;
margin-bottom: 20px;
}
#hor-minimalist-a {
width: 100%;
border-collapse: collapse;
margin: 0;
font-size: 14px;
background: #fff;
}
#hor-minimalist-a th {
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;
background: #fff;
}
#hor-minimalist-a tr:hover {
background: #f9f9f9;
}
#hor-minimalist-a td a {
word-break: break-all;
}
@media (max-width: 768px) {
#hor-minimalist-a th,
#hor-minimalist-a td {
padding: 8px;
font-size: 13px;
white-space: nowrap;
background: #fff;
}
#hor-minimalist-a th {
position: sticky;
left: 0;
z-index: 1;
background: #f5f5f5;
}
#hor-minimalist-a td:nth-child(2) {
max-width: 200px;
word-break: break-word;
}
#hor-minimalist-a td:nth-child(4) {
max-width: 150px;
word-break: break-all;
}
}
.pagination-container {
display: flex;
justify-content: center;
margin: 20px 0;
}
.pagination {
display: flex;
flex-wrap: wrap;
gap: 5px;
justify-content: center;
}
.pagination .btn {
padding: 6px 12px;
margin: 0;
border: 1px solid #ddd;
background: #fff;
color: #333;
text-decoration: none;
border-radius: 3px;
}
.pagination .btn:hover {
background: #f5f5f5;
}
.pagination .btn.active {
background: #007bff;
color: #fff;
border-color: #007bff;
}
.pagination .btn.disabled {
color: #999;
cursor: not-allowed;
background: #f5f5f5;
}
@media (max-width: 768px) {
.pagination {
gap: 3px;
}
.pagination .btn {
padding: 4px 8px;
font-size: 12px;
}
}
.details-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.car-details {
margin-bottom: 30px;
}
#one-column-emphasis {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
font-size: 16px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden;
}
#one-column-emphasis td {
padding: 12px;
border-bottom: 1px solid #ddd;
word-break: break-word;
}
#one-column-emphasis td:first-child {
font-weight: bold;
width: 30%;
background-color: #f5f5f5;
color: #333;
}
.search-container {
text-align: center;
margin-top: 20px;
}
.search-container h2 {
margin-bottom: 20px;
}
.search-wrapper {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
.search-wrapper input {
width: 100%;
max-width: 400px;
}
@media (max-width: 768px) {
.details-container {
padding: 10px;
}
#one-column-emphasis {
font-size: 15px;
border: none;
box-shadow: none;
}
#one-column-emphasis td {
padding: 12px 15px;
display: block;
width: 100%;
border-bottom: none;
position: relative;
}
#one-column-emphasis td:first-child {
background-color: #007bff;
color: white;
font-weight: 600;
padding: 12px 15px;
border-radius: 6px 6px 0 0;
margin-top: 10px;
}
#one-column-emphasis td:last-child {
background-color: #f8f9fa;
border-radius: 0 0 6px 6px;
margin-bottom: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
#one-column-emphasis tr {
border: none;
margin-bottom: 0;
display: block;
}
.car-details {
padding: 0 10px;
}
.search-wrapper input {
width: 100%;
}
}
.navbar {
background: #333;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
position: relative;
min-height: 50px;
margin-bottom: 20px;
}
.navbar-inner {
padding: 0 20px;
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 50px;
}
.navbar .brand {
padding: 10px 0;
display: flex;
align-items: center;
text-decoration: none;
color: #fff;
font-weight: 600;
}
.navbar .brand img {
height: 28px;
margin-right: 10px;
}
.navbar .nav {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.navbar .nav > li {
position: relative;
}
.navbar .nav > li > a {
display: block;
padding: 15px 20px;
color: #fff;
text-decoration: none;
font-weight: 500;
transition: all 0.3s;
}
.navbar .nav > li > a:hover {
background: rgba(255,255,255,0.1);
}
.navbar .nav > li.active > a {
background: rgba(255,255,255,0.15);
}
.navbar .btn-navbar {
display: none;
background: transparent;
border: none;
padding: 10px;
cursor: pointer;
margin-left: 15px;
}
.navbar .btn-navbar .icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: #fff;
margin: 4px 0;
transition: all 0.3s;
}
@media (max-width: 768px) {
.navbar-inner {
padding: 0 15px;
}
.navbar .btn-navbar {
display: block;
}
.navbar .nav-collapse {
position: fixed;
top: 50px;
left: 0;
right: 0;
background: #333;
padding: 10px 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: all 0.3s;
z-index: 1000;
}
.navbar .nav-collapse.in {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.navbar .nav {
flex-direction: column;
}
.navbar .nav > li {
width: 100%;
}
.navbar .nav > li > a {
padding: 12px 20px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
}
.history-container {
margin-top: 30px;
overflow-x: auto;
background: transparent;
}
.not-found {
text-align: center;
padding: 20px;
margin: 20px 0;
background: #f8f9fa;
border-radius: 8px;
}
.not-found h2 {
color: #dc3545;
margin: 0;
}
@media (max-width: 768px) {
.history-container {
margin: 20px -15px;
padding: 0 15px;
background: transparent;
}
.not-found {
margin: 15px 0;
padding: 15px;
}
.not-found h2 {
font-size: 18px;
}
}

View File

@ -22,380 +22,8 @@
<link href="/static/bootstrap-responsive.min.css" rel="stylesheet">
<link href="/static/plus.css" rel="stylesheet">
<link href="/static/plus2.css" rel="stylesheet">
<link href="/static/styles.css" rel="stylesheet">
<script src="/static/bootstrap.bundle.min.js"></script>
<style type="text/css">
@media (max-width: 768px) {
.search_box {
width: 100%;
max-width: 300px;
}
.container {
padding: 0 15px;
}
.hero-unit {
padding: 20px;
}
.hero-unit h1 {
font-size: 24px;
}
img {
max-width: 100%;
height: auto;
}
.search-container {
width: 100%;
padding: 0 15px;
}
.search-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.search-wrapper input {
width: 100%;
max-width: 300px;
}
.search-wrapper button {
width: 100%;
max-width: 300px;
}
.vin-image {
max-width: 100%;
height: auto;
}
}
.search-title {
text-align: center;
width: 100%;
margin-bottom: 20px;
}
.search-title h2 {
display: inline-block;
margin: 0;
}
.table-responsive {
width: 100%;
margin-bottom: 20px;
}
#hor-minimalist-a {
width: 100%;
border-collapse: collapse;
}
#hor-minimalist-a th {
padding: 8px;
text-align: left;
background: #f5f5f5;
font-size: 14px;
}
#hor-minimalist-a td {
padding: 8px;
border-bottom: 1px solid #ddd;
font-size: 14px;
}
#hor-minimalist-a td a {
word-break: break-all;
}
@media (max-width: 768px) {
#hor-minimalist-a th,
#hor-minimalist-a td {
padding: 6px;
font-size: 12px;
}
#hor-minimalist-a td:nth-child(2) {
max-width: 200px;
word-break: break-word;
}
#hor-minimalist-a td:nth-child(4) {
max-width: 150px;
word-break: break-all;
}
}
.pagination-container {
display: flex;
justify-content: center;
margin: 20px 0;
}
.pagination {
display: flex;
flex-wrap: wrap;
gap: 5px;
justify-content: center;
}
.pagination .btn {
padding: 6px 12px;
margin: 0;
border: 1px solid #ddd;
background: #fff;
color: #333;
text-decoration: none;
border-radius: 3px;
}
.pagination .btn:hover {
background: #f5f5f5;
}
.pagination .btn.active {
background: #007bff;
color: #fff;
border-color: #007bff;
}
.pagination .btn.disabled {
color: #999;
cursor: not-allowed;
background: #f5f5f5;
}
@media (max-width: 768px) {
.pagination {
gap: 3px;
}
.pagination .btn {
padding: 4px 8px;
font-size: 12px;
}
}
.details-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.car-details {
margin-bottom: 30px;
}
#one-column-emphasis {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
font-size: 16px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden;
}
#one-column-emphasis td {
padding: 12px;
border-bottom: 1px solid #ddd;
word-break: break-word;
}
#one-column-emphasis td:first-child {
font-weight: bold;
width: 30%;
background-color: #f5f5f5;
color: #333;
}
.search-container {
text-align: center;
margin-top: 20px;
}
.search-container h2 {
margin-bottom: 20px;
}
.search-wrapper {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
.search-wrapper input {
width: 100%;
max-width: 400px;
}
@media (max-width: 768px) {
.details-container {
padding: 10px;
}
#one-column-emphasis {
font-size: 15px;
border: none;
box-shadow: none;
}
#one-column-emphasis td {
padding: 12px 15px;
display: block;
width: 100%;
border-bottom: none;
position: relative;
}
#one-column-emphasis td:first-child {
background-color: #007bff;
color: white;
font-weight: 600;
padding: 12px 15px;
border-radius: 6px 6px 0 0;
margin-top: 10px;
}
#one-column-emphasis td:last-child {
background-color: #f8f9fa;
border-radius: 0 0 6px 6px;
margin-bottom: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
#one-column-emphasis tr {
border: none;
margin-bottom: 0;
display: block;
}
.car-details {
padding: 0 10px;
}
.search-wrapper input {
width: 100%;
}
}
.navbar {
background: #333;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
position: relative;
min-height: 50px;
margin-bottom: 20px;
}
.navbar-inner {
padding: 0 20px;
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 50px;
}
.navbar .brand {
padding: 10px 0;
display: flex;
align-items: center;
text-decoration: none;
color: #fff;
font-weight: 600;
}
.navbar .brand img {
height: 28px;
margin-right: 10px;
}
.navbar .nav {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.navbar .nav > li {
position: relative;
}
.navbar .nav > li > a {
display: block;
padding: 15px 20px;
color: #fff;
text-decoration: none;
font-weight: 500;
transition: all 0.3s;
}
.navbar .nav > li > a:hover {
background: rgba(255,255,255,0.1);
}
.navbar .nav > li.active > a {
background: rgba(255,255,255,0.15);
}
.navbar .btn-navbar {
display: none;
background: transparent;
border: none;
padding: 10px;
cursor: pointer;
margin-left: 15px;
}
.navbar .btn-navbar .icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: #fff;
margin: 4px 0;
transition: all 0.3s;
}
@media (max-width: 768px) {
.navbar-inner {
padding: 0 15px;
}
.navbar .btn-navbar {
display: block;
}
.navbar .nav-collapse {
position: fixed;
top: 50px;
left: 0;
right: 0;
background: #333;
padding: 10px 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: all 0.3s;
z-index: 1000;
}
.navbar .nav-collapse.in {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.navbar .nav {
flex-direction: column;
}
.navbar .nav > li {
width: 100%;
}
.navbar .nav > li > a {
padding: 12px 20px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
}
</style>
<!-- Yatomo -->
<script type="text/javascript" >
@ -466,8 +94,6 @@
</div>
</div>
{% block content %}{% endblock %}
<br>

View File

@ -10,97 +10,77 @@
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>
<div class="wrapper">
</p>
</div>
<center>
<br>
<table border="0">
<div class="details-container">
<div class="car-details">
<table id="one-column-emphasis">
<tbody>
<tr>
<td>
<div class="span4">
</div>
</td>
<td>
<table id="one-column-emphasis" style="font-size: 16px;">
<tbody>
<tr>
<td>Make</td>
<td>{{det[0][1]}}</td>
</tr>
<tr>
<td>Model</td>
<td>{{det[0][2]}}</td>
</tr>
<tr>
<td>Year</td>
<td>{{det[0][3]}}</td>
</tr>
<tr>
<td>Body Style</td>
<td>{{det[0][4]}}</td>
</tr>
<tr>
<td>Engine</td>
<td>{{det[0][5]}}</td>
</tr>
<tr>
<td>Cylinders</td>
<td>{{det[0][6]}}</td>
</tr>
<tr>
<td>Drive</td>
<td>{{det[0][7]}}</td>
</tr>
</tbody>
</table>
</td>
<td>Make</td>
<td>{{det[0][1]}}</td>
</tr>
<tr>
<td>Model</td>
<td>{{det[0][2]}}</td>
</tr>
<tr>
<td>Year</td>
<td>{{det[0][3]}}</td>
</tr>
<tr>
<td>Body Style</td>
<td>{{det[0][4]}}</td>
</tr>
<tr>
<td>Engine</td>
<td>{{det[0][5]}}</td>
</tr>
<tr>
<td>Cylinders</td>
<td>{{det[0][6]}}</td>
</tr>
<tr>
<td>Drive</td>
<td>{{det[0][7]}}</td>
</tr>
</tbody>
</table>
</div>
<center>
{% if his %}
<table id="hor-minimalist-a" style="width:900px;font-size: 16px;">
<thead>
<tr>
<th scope="col">VIN</th>
<th scope="col">Title</th>
<th scope="col">Odometer</th>
<th scope="col">Odometer Status</th>
<th scope="col">Primary Damage</th>
<th scope="col">Secondary Damage</th>
</tr>
</thead>
</thead>
<tbody>
{% for it in his%}
<tr>
<td style="color:red">{{it[1]}}</td>
<td style="color:red">{{it[2]}}</td>
<td style="color:red">{{it[3]}}</td>
<td style="color:red">{{it[4]}}</td>
<td style="color:red">{{it[5]}}</td>
<td style="color:red">{{it[6]}}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<table border="0">
<tr><td><h1>Salvage history not found.<h1></td></tr>
</table>
{% endif %}
<div style="height: 50px"></div>
</center>
{% if his %}
<div class="history-container">
<table id="hor-minimalist-a">
<thead>
<tr>
<th scope="col">VIN</th>
<th scope="col">Title</th>
<th scope="col">Odometer</th>
<th scope="col">Odometer Status</th>
<th scope="col">Primary Damage</th>
<th scope="col">Secondary Damage</th>
</tr>
</thead>
<tbody>
{% for it in his%}
<tr>
<td>{{it[1]}}</td>
<td>{{it[2]}}</td>
<td>{{it[3]}}</td>
<td>{{it[4]}}</td>
<td>{{it[5]}}</td>
<td>{{it[6]}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="not-found">
<h2>Salvage history not found.</h2>
</div>
{% endif %}
</div>
</div>
<br><br>
<br><br>
{% endblock %}