diff options
Diffstat (limited to 'templates/index.html')
| -rw-r--r-- | templates/index.html | 99 |
1 files changed, 71 insertions, 28 deletions
diff --git a/templates/index.html b/templates/index.html index 279933b..34fde55 100644 --- a/templates/index.html +++ b/templates/index.html @@ -7,6 +7,7 @@ <script src="https://unpkg.com/htmx.org@1.9.6" integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni" crossorigin="anonymous"></script> </head> <body class="h-full"> + <div> <!-- Off-canvas menu for mobile, show/hide based on off-canvas menu state. --> <div class="relative z-50 lg:hidden" role="dialog" aria-modal="true" id="sidebar"> @@ -57,16 +58,11 @@ var sidebar = document.getElementById('sidebar'); sidebar.style.transform = 'translateX(-100%)'; }); - - document.getElementById('open-button').addEventListener('click', function() { - var sidebar = document.getElementById('sidebar'); - sidebar.style.transform = 'translateX(0)'; - }); </script> <div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-2 ring-1 ring-white/10"> <div class="flex h-16 shrink-0 items-center"> - <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company"> + <img class="h-8 w-auto" src="{{url_for('static',filename='logo.png')}}" alt="Your Company"> </div> <nav class="flex flex-1 flex-col"> <ul role="list" class="-mx-2 flex-1 space-y-1"> @@ -105,7 +101,7 @@ <!-- Static sidebar for desktop --> <div class="hidden lg:fixed lg:inset-y-0 lg:left-0 lg:z-50 lg:block lg:w-20 lg:overflow-y-auto lg:bg-gray-900 lg:pb-4"> <div class="flex h-16 shrink-0 items-center justify-center"> - <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="AutoAid"> + <img class="h-8 w-auto bg-slate-200 rounded-sm" src="{{url_for('static',filename='logo.png')}}" alt="AutoAid"> </div> <nav class="mt-8"> <ul role="list" class="flex flex-col items-center space-y-1"> @@ -212,6 +208,7 @@ <!-- We've used 3xl here, but feel free to try other max-widths based on your needs --> <div class="mx-auto max-w-2xl"> <div> + <form hx-post="/search" method="POST" hx-target="#search-results"> <label for="search" class="block text-sm font-medium leading-6 text-gray-900">Quick search</label> <div class="relative mt-2 flex items-center"> @@ -256,28 +253,19 @@ <ul role="list" class="divide-y divide-gray-200"> <li class="py-4"> <nav class="flex flex-1 flex-col" aria-label="Sidebar"> - <ul role="list" class="-mx-2 space-y-1"> - <li> - <a href="#" onclick="setActiveCar(c1)" id="c1" class="car text-gray-700 hover:text-indigo-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 pl-3 text-sm leading-6 font-semibold"> - 2005 Subaru Forester XT - <span class="ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600 ring-1 ring-inset ring-gray-200" aria-hidden="true">20+</span> - </a> - </li> - <li> - <!-- Current: "bg-gray-50 text-indigo-600", Default: "text-gray-700 hover:text-indigo-600 hover:bg-gray-50" --> - <a href="#" id="c2" onclick="setActiveCar(c2)" class="car bg-gray-50 text-indigo-600 group flex gap-x-3 rounded-md p-2 pl-3 text-sm leading-6 font-semibold"> - 2001 BMW 540i - <span class="ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600 ring-1 ring-inset ring-gray-200" aria-hidden="true">2</span> - </a> - </li> - <li> - <a href="#" id="c3" onclick="setActiveCar(c3)" class="car text-gray-700 hover:text-indigo-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 pl-3 text-sm leading-6 font-semibold"> - 1999 Mazda Miata - <span class="ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600 ring-1 ring-inset ring-gray-200" aria-hidden="true">1</span> - </a> - </li> + <ul role="list" class="-mx-2 space-y-1" id="my_vehicles"> + {% for car, val in my_cars%} + <li> + <a href="#" onclick="setActiveCar(c{{loop.index}})" id="c{{loop.index}}" class="car {% if car==selected %} bg-gray-50 text-indigo-600 hover:text-indigo-600 hover:bg-gray-50 {% else %} text-gray-700 {% endif %} hover:text-indigo-600 hover:bg-gray-50 group flex gap-x-3 rounded-md p-2 pl-3 text-sm leading-6 font-semibold"> + {{car}} + <span class="ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-gray-600 ring-1 ring-inset ring-gray-200" aria-hidden="true">{{val}}</span> + </a> + </li> + {% endfor %} + <script> function setActiveCar(selectedCar) { + console.log(selectedCar); var cars = document.getElementsByClassName('car'); for (var i = 0; i < cars.length; i++) { cars[i].classList.remove('bg-gray-50'); @@ -299,10 +287,65 @@ </nav> </li> <li class="py-4"> - <button type="button" class="rounded-full bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">New Vehicle</button> + <button type="button" class="btn-new-vehicle rounded-full bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">New Vehicle</button> </li> + </ul> </aside> </div> + + <!-- The Modal --> +<div id="myModal" class="modal"> + <!-- Modal content --> + <form hx-post="/new_vehicle" hx-target="#my_vehicles" method="POST"> + <div class="modal-content"> + <span class="close">×</span> + <div> + <label for="newVEHICLE" class="block text-sm font-medium leading-6 text-gray-900">New Vehicle</label> + <div class="mt-2"> + <input type="text" name="newVEHICLE" id="newVEHICLE" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="Make Model Year"> + </div> + </div> + <button type="submit" onclick="hideModal()" class="mt-5 inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"> + <svg class="-ml-0.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> + <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" /> + </svg> + Add Vehicle + </button> + </div> + </form> + </div> + <script> + + function hideModal() { + document.getElementById('myModal').style.display = "none"; + } + // Get the modal +var modal = document.getElementById("myModal"); + +// Get the button that opens the modal +var btn = document.querySelector(".btn-new-vehicle"); + +// Get the <span> element that closes the modal +var span = document.getElementsByClassName("close")[0]; + +// When the user clicks the button, open the modal +btn.onclick = function() { + modal.style.display = "block"; +} + +// When the user clicks on <span> (x), close the modal +span.onclick = function() { + modal.style.display = "none"; +} + +// When the user clicks anywhere outside of the modal, close it +window.onclick = function(event) { + if (event.target == modal) { + modal.style.display = "none"; + } +} + + </script> </body> </html>
\ No newline at end of file |