diff options
-rw-r--r-- | app.py | 2 | ||||
-rw-r--r-- | templates/index.html | 20 | ||||
-rw-r--r-- | templates/tasks.html | 29 |
3 files changed, 29 insertions, 22 deletions
@@ -85,7 +85,7 @@ def search(): print(my_cars, "MY CARS") except: print("Uh oh! Claude didn't return any results!") - return render_template("tasks.html", to_do=tasks) + return render_template("tasks.html", search_query=request.form["search"], to_do=tasks) @app.route("/progress") def progress(): diff --git a/templates/index.html b/templates/index.html index 34fde55..46fda41 100644 --- a/templates/index.html +++ b/templates/index.html @@ -208,18 +208,16 @@ <!-- 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"> - <input type="hidden" id="car_details" name="car_details" value="2001 BMW 540i"> - <input type="text" name="search" id="search" class="block w-full rounded-md border-0 py-1.5 pr-14 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"> - <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5"> - <kbd class="inline-flex items-center rounded border border-gray-200 px-1 font-sans text-xs text-gray-400">⌘K</kbd> + <label for="search" class="block text-center text-lg font-medium leading-6 text-gray-900">New Task List</label> + <div class="relative mt-2 flex items-center"> + <input type="hidden" id="car_details" name="car_details" value="2001 BMW 540i"> + <input type="text" name="search" id="search" class="block w-full rounded-md border-0 py-1.5 pr-14 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="Customer Complaint"> + <div class="absolute inset-y-0 right-0 mr-2 flex items-center pr-3"> + <button type="submit" class="rounded bg-indigo-600 px-3 py-1 text-xs 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">Search</button> + </div> </div> - </div> - <button type="submit" class="rounded bg-indigo-600 px-2 py-1 text-xs 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 mt-3">Search</button> - </form> + </form> </div> </div> </div> @@ -236,7 +234,7 @@ </li> </ul> </div> - <div class="mx-auto max-w-2xl mt-10 ml-2 mr-2 mb-5"> + <div class="mx-auto max-w-4xl mt-10 ml-4 mr-4 mb-5"> <fieldset> <legend class="sr-only">Notifications</legend> <div class="space-y-5" id="search-results"> diff --git a/templates/tasks.html b/templates/tasks.html index 2432aad..1a2e633 100644 --- a/templates/tasks.html +++ b/templates/tasks.html @@ -1,11 +1,20 @@ -{% for task in to_do %} -<div class="relative flex items-start"> - <div class="flex h-6 items-center"> - <input id="comments" aria-describedby="comments-description" name="comments" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"> - </div> - <div class="ml-3 text-sm leading-6"> - <label for="comments" class="font-medium text-gray-900">Task {{loop.index}}</label> - <p id="comments-description" class="text-gray-500">{{task}}</p> - </div> +<div class="bg-white shadow mx-auto sm:rounded-lg"> + <div class="bg-gray-500 mx-auto px-4 sm:px-6 lg:px-8"> + <fieldset> + <legend class="text-base font-semibold leading-8 text-gray-900">"{{search_query}}" Tasks</legend> + <div class="mt-4 divide-y divide-gray-200 border-b border-t border-gray-200"> + {% for task in to_do %} + <div class="relative flex items-start py-4"> + <div class="flex h-6 items-center"> + <input id="comments" aria-describedby="comments-description" name="comments" type="checkbox" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"> + </div> + <div class="ml-3 text-sm leading-6"> + <label for="comments" class="font-medium text-gray-900">Task {{loop.index}}</label> + <p id="comments-description" class="text-gray-500">{{task}}</p> + </div> + </div> + {% endfor %} + </div> + </fieldset> </div> -{% endfor %}
\ No newline at end of file +</div>
\ No newline at end of file |