vlad/salvagedb_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update details.html to Bootstrap 5 - Add card components for vehicle details and search - Update table styling - Improve responsive layout

Browse Source
This commit is contained in:
Vlad 2025-05-02 12:26:57 +03:00
parent 89a06f75c2
commit a7ca86d39d
1 changed files with 68 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
templates/details.html
View File

@ -1,11 +1,11 @@
{% extends "head.html" %} {% extends "head.html" %}
{% block content %} {% block content %}
<div class="container"> <div class="container-lg py-4">
<div class="hero-unit"> <div class="p-5 mb-4 bg-light rounded-3">
<h1>Buying a Used Car? Check it!</h1> <h1 class="display-4">Buying a Used Car? Check it!</h1>
<br> <p class="lead">
<p><a href="https://www.salvagedb.com/" title="Salvagedb.com" rel="nofollow">Salvagedb.com</a> provides <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 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 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 title, but the fact that it has been damaged for sure. Our site helps people avoid buying a damaged vehicle
@ -13,59 +13,73 @@
</p> </p>
</div> </div>
<div class="details-container"> <div class="row">
<div class="car-details"> <div class="col-md-6 mb-4">
<table id="one-column-emphasis"> <div class="card">
<tbody> <div class="card-header">
<tr> <h2 class="h4 mb-0">Vehicle Details</h2>
<td>Make</td> </div>
<td>{{det[0][1]}}</td> <div class="card-body">
</tr> <table class="table table-striped">
<tr> <tbody>
<td>Model</td> <tr>
<td>{{det[0][2]}}</td> <th scope="row">Make</th>
</tr> <td>{{det[0][1]}}</td>
<tr> </tr>
<td>Year</td> <tr>
<td>{{det[0][3]}}</td> <th scope="row">Model</th>
</tr> <td>{{det[0][2]}}</td>
<tr> </tr>
<td>Body Style</td> <tr>
<td>{{det[0][4]}}</td> <th scope="row">Year</th>
</tr> <td>{{det[0][3]}}</td>
<tr> </tr>
<td>Engine</td> <tr>
<td>{{det[0][5]}}</td> <th scope="row">Body Style</th>
</tr> <td>{{det[0][4]}}</td>
<tr> </tr>
<td>Cylinders</td> <tr>
<td>{{det[0][6]}}</td> <th scope="row">Engine</th>
</tr> <td>{{det[0][5]}}</td>
<tr> </tr>
<td>Drive</td> <tr>
<td>{{det[0][7]}}</td> <th scope="row">Cylinders</th>
</tr> <td>{{det[0][6]}}</td>
</tbody> </tr>
</table> <tr>
<th scope="row">Drive</th>
<td>{{det[0][7]}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div> </div>
<div class="search-container"> <div class="col-md-6">
<h2>Search salvage history?</h2> <div class="card">
<form name="search_bar" id="search_bar" action="/search" method="post"> <div class="card-header">
<div class="search-wrapper"> <h2 class="h4 mb-0">Search salvage history?</h2>
<input id="make_model" class="search_box ui-autocomplete-input" name="q"
value="{{vin}}" autocomplete="off" spellcheck="false" type="text">
<button class="g-recaptcha btn btn-primary" data-sitekey="{{capcha_site}}"
id="go_button" data-callback='onSubmit' data-action='submit'>Search</button>
</div> </div>
</form> <div class="card-body">
<form name="search_bar" id="search_bar" action="/search" method="post">
<div class="input-group">
<input id="make_model" class="form-control" name="q"
value="{{vin}}" autocomplete="off" spellcheck="false" type="text"
placeholder="Enter VIN number">
<button class="g-recaptcha btn btn-primary" data-sitekey="{{capcha_site}}"
id="go_button" data-callback='onSubmit' data-action='submit'>Search</button>
</div>
</form>
</div>
</div>
</div> </div>
</div> </div>
<script>
function onSubmit(token) {
document.getElementById("search_bar").submit();
}
</script>
</div> </div>
<script>
function onSubmit(token) {
document.getElementById("search_bar").submit();
}
</script>
{% endblock %} {% endblock %}