From 89a06f75c2aea97682bc9b55087207d1dc97c7d4 Mon Sep 17 00:00:00 2001
From: Vlad <vlad@ddl.su>
Date: Fri, 2 May 2025 12:22:03 +0300
Subject: [PATCH] feat: update decodevin.html to Bootstrap 5 - Add modern card
 component for search form - Update hero section styling - Fix VIN text in
 heading

---
 templates/decodevin.html | 61 ++++++++++++++++++++++------------------
 1 file changed, 34 insertions(+), 27 deletions(-)

diff --git a/templates/decodevin.html b/templates/decodevin.html
index 2407d77..a93f622 100644
--- a/templates/decodevin.html
+++ b/templates/decodevin.html
@@ -1,45 +1,52 @@
 {% 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-lg 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-lg">
+        <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 
-                                   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>
+                        <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>
+                            </div>
                         </div>
                     </div>
                 </form>
-            </center>
+            </div>
         </div>
     </div>
-
-    <script>
-        function onSubmit(token) {
-            document.getElementById("search_bar").submit();
-        }
-    </script>
 </div>
+
+<script>
+    function onSubmit(token) {
+        document.getElementById("search_bar").submit();
+    }
+</script>
 {% endblock %}