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

feat: update index.html to Bootstrap 5 - Modernize search form with card component - Add responsive input group - Update hero section styling

Browse Source
This commit is contained in:
Vlad 2025-05-02 12:18:38 +03:00
parent 03b3bf9f53
commit 06e93f2d05
1 changed files with 34 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
templates/index.html
View File

@ -1,47 +1,54 @@
{% 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="container-fluid">
<div class="row-fluid">
<center>
<form id="search_bar" action="/decode" method="post">
<div class="search-container">
<div class="search-title">
<h2 id="find_your_car">ENTER <a href="https://en.wikipedia.org/wiki/Vehicle_Identification_Number" target="_blank">VIN</a> YOU CAR</h2>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<form id="search_bar" action="/decode" method="post" class="mb-4">
<div class="card">
<div class="card-header text-center">
<h2 class="h4 mb-0">ENTER <a href="https://en.wikipedia.org/wiki/Vehicle_Identification_Number" target="_blank" class="text-decoration-none">VIN</a> OF YOUR CAR</h2>
</div>
<div class="search-wrapper">
<input type="text" id="vininput" name="q" class="search_box ui-autocomplete-input"
autocomplete="off" value="" role="textbox" autofocus required
<div class="card-body">
<div class="input-group">
<input type="text" id="vininput" name="q"
class="form-control"
autocomplete="off"
placeholder="Enter VIN number"
autofocus required
validate="length_between,17,17">
<button class="g-recaptcha btn btn-primary" type="submit"
data-sitekey="{{capcha_site}}" id="go_button"
data-callback='onSubmit' data-action='submit'>Check It</button>
<button class="g-recaptcha btn btn-primary"
type="submit"
data-sitekey="{{capcha_site}}"
id="go_button"
data-callback='onSubmit'
data-action='submit'>Check It</button>
</div>
</div>
</div>
</form>
</center>
</div>
</div>
</div>
<h2 style="text-align: center;">Over {{ cnt }} salvage vehicles added.</h2>
<br>
<center>
<img src="static/vin-position1.gif" class="vin-image">
</center>
<br>
<h2 class="text-center mb-4">Over {{ cnt }} salvage vehicles added.</h2>
<div class="text-center">
<img src="static/vin-position1.gif" class="img-fluid" alt="VIN position diagram">
</div>
</div>
<script>
function onSubmit(token) {
document.getElementById("search_bar").submit();