diff options
| -rw-r--r-- | app.py | 25 | ||||
| -rw-r--r-- | package-lock.json | 261 | ||||
| -rw-r--r-- | package.json | 3 | ||||
| -rw-r--r-- | src/main.css | 40 | ||||
| -rw-r--r-- | static/logo.png | bin | 0 -> 105561 bytes | |||
| -rw-r--r-- | static/main.css | 171 | ||||
| -rw-r--r-- | templates/index.html | 99 | ||||
| -rw-r--r-- | templates/modal.html | 11 | ||||
| -rw-r--r-- | templates/vehicles_list.html | 8 |
9 files changed, 525 insertions, 93 deletions
@@ -10,13 +10,34 @@ app = Flask(__name__) current_task = [] +my_cars = { + "2005 Subaru Forester XT": 0, + "2001 BMW 540i": 0, + "1999 Mazda Miata": 0, +} + +selected_car = "2001 BMW 540i" + htmx.init_app(app) @app.route("/") def hello_world(): for _ in range(len(current_task)): current_task.pop() - return render_template("index.html") + return render_template("index.html",my_cars=my_cars.items(), selected=selected_car) + +@app.route("/vehicles") +def vehicles(): + if request.headers.get("HX-Request"): + return render_template("vehicles_list.html", my_cars=my_cars.items(), selected=selected_car) + return "Not an HX request" + +@app.route("/new_vehicle", methods=["POST"]) +def new_vehicle(): + if request.headers.get("HX-Request"): + my_cars[request.form["newVEHICLE"]] = 0 + return render_template("vehicles_list.html", my_cars=my_cars.items(), selected=selected_car) + return "Not an HX request" @app.route("/search", methods=["POST"]) def search(): @@ -60,6 +81,8 @@ def search(): tasks = ["Have you tried turning your car on and off?"] try: tasks = pred.split('\n\n')[0].replace("- ","").splitlines() + my_cars[car_details] += 1 + print(my_cars, "MY CARS") except: print("Uh oh! Claude didn't return any results!") return render_template("tasks.html", to_do=tasks) diff --git a/package-lock.json b/package-lock.json index dc2a79f..667fd84 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,11 +4,170 @@ "requires": true, "packages": { "": { + "dependencies": { + "@themesberg/flowbite": "^1.3.0" + }, "devDependencies": { "@tailwindcss/forms": "^0.5.6", "tailwindcss": "^3.3.3" } }, + "node_modules/@algolia/autocomplete-core": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.9.3.tgz", + "integrity": "sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==", + "dependencies": { + "@algolia/autocomplete-plugin-algolia-insights": "1.9.3", + "@algolia/autocomplete-shared": "1.9.3" + } + }, + "node_modules/@algolia/autocomplete-plugin-algolia-insights": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.9.3.tgz", + "integrity": "sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==", + "dependencies": { + "@algolia/autocomplete-shared": "1.9.3" + }, + "peerDependencies": { + "search-insights": ">= 1 < 3" + } + }, + "node_modules/@algolia/autocomplete-preset-algolia": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.9.3.tgz", + "integrity": "sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA==", + "dependencies": { + "@algolia/autocomplete-shared": "1.9.3" + }, + "peerDependencies": { + "@algolia/client-search": ">= 4.9.1 < 6", + "algoliasearch": ">= 4.9.1 < 6" + } + }, + "node_modules/@algolia/autocomplete-shared": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.9.3.tgz", + "integrity": "sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==", + "peerDependencies": { + "@algolia/client-search": ">= 4.9.1 < 6", + "algoliasearch": ">= 4.9.1 < 6" + } + }, + "node_modules/@algolia/cache-browser-local-storage": { + "version": "4.20.0", + "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.20.0.tgz", + "integrity": "sha512-uujahcBt4DxduBTvYdwO3sBfHuJvJokiC3BP1+O70fglmE1ShkH8lpXqZBac1rrU3FnNYSUs4pL9lBdTKeRPOQ==", + "dependencies": { + "@algolia/cache-common": "4.20.0" + } + }, + "node_modules/@algolia/cache-common": { + "version": "4.20.0", + "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.20.0.tgz", + "integrity": "sha512-vCfxauaZutL3NImzB2G9LjLt36vKAckc6DhMp05An14kVo8F1Yofb6SIl6U3SaEz8pG2QOB9ptwM5c+zGevwIQ==" + }, + "node_modules/@algolia/cache-in-memory": { + "version": "4.20.0", + "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.20.0.tgz", + "integrity": "sha512-Wm9ak/IaacAZXS4mB3+qF/KCoVSBV6aLgIGFEtQtJwjv64g4ePMapORGmCyulCFwfePaRAtcaTbMcJF+voc/bg==", + "dependencies": { + "@algolia/cache-common": "4.20.0" + } + }, + "node_modules/@algolia/client-account": { + "version": "4.20.0", + "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.20.0.tgz", + "integrity": "sha512-GGToLQvrwo7am4zVkZTnKa72pheQeez/16sURDWm7Seyz+HUxKi3BM6fthVVPUEBhtJ0reyVtuK9ArmnaKl10Q==", + "dependencies": { + "@algolia/client-common": "4.20.0", + "@algolia/client-search": "4.20.0", + "@algolia/transporter": "4.20.0" + } + }, + "node_modules/@algolia/client-analytics": { + "version": "4.20.0", + "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.20.0.tgz", + "integrity": "sha512-EIr+PdFMOallRdBTHHdKI3CstslgLORQG7844Mq84ib5oVFRVASuuPmG4bXBgiDbcsMLUeOC6zRVJhv1KWI0ug==", + "dependencies": { + "@algolia/client-common": "4.20.0", + "@algolia/client-search": "4.20.0", + "@algolia/requester-common": "4.20.0", + "@algolia/transporter": "4.20.0" + } + }, + "node_modules/@algolia/client-common": { + "version": "4.20.0", + "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.20.0.tgz", + "integrity": "sha512-P3WgMdEss915p+knMMSd/fwiHRHKvDu4DYRrCRaBrsfFw7EQHon+EbRSm4QisS9NYdxbS04kcvNoavVGthyfqQ==", + "dependencies": { + "@algolia/requester-common": "4.20.0", + "@algolia/transporter": "4.20.0" + } + }, + "node_modules/@algolia/client-personalization": { + "version": "4.20.0", + "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.20.0.tgz", + "integrity": "sha512-N9+zx0tWOQsLc3K4PVRDV8GUeOLAY0i445En79Pr3zWB+m67V+n/8w4Kw1C5LlbHDDJcyhMMIlqezh6BEk7xAQ==", + "dependencies": { + "@algolia/client-common": "4.20.0", + "@algolia/requester-common": "4.20.0", + "@algolia/transporter": "4.20.0" + } + }, + "node_modules/@algolia/client-search": { + "version": "4.20.0", + "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.20.0.tgz", + "integrity": "sha512-zgwqnMvhWLdpzKTpd3sGmMlr4c+iS7eyyLGiaO51zDZWGMkpgoNVmltkzdBwxOVXz0RsFMznIxB9zuarUv4TZg==", + "dependencies": { + "@algolia/client-common": "4.20.0", + "@algolia/requester-common": "4.20.0", + "@algolia/transporter": "4.20.0" + } + }, + "node_modules/@algolia/logger-common": { + "version": "4.20.0", + "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.20.0.tgz", + "integrity": "sha512-xouigCMB5WJYEwvoWW5XDv7Z9f0A8VoXJc3VKwlHJw/je+3p2RcDXfksLI4G4lIVncFUYMZx30tP/rsdlvvzHQ==" + }, + "node_modules/@algolia/logger-console": { + "version": "4.20.0", + "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.20.0.tgz", + "integrity": "sha512-THlIGG1g/FS63z0StQqDhT6bprUczBI8wnLT3JWvfAQDZX5P6fCg7dG+pIrUBpDIHGszgkqYEqECaKKsdNKOUA==", + "dependencies": { + "@algolia/logger-common": "4.20.0" + } + }, + "node_modules/@algolia/requester-browser-xhr": { + "version": "4.20.0", + "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.20.0.tgz", + "integrity": "sha512-HbzoSjcjuUmYOkcHECkVTwAelmvTlgs48N6Owt4FnTOQdwn0b8pdht9eMgishvk8+F8bal354nhx/xOoTfwiAw==", + "dependencies": { + "@algolia/requester-common": "4.20.0" + } + }, + "node_modules/@algolia/requester-common": { + "version": "4.20.0", + "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.20.0.tgz", + "integrity": "sha512-9h6ye6RY/BkfmeJp7Z8gyyeMrmmWsMOCRBXQDs4mZKKsyVlfIVICpcSibbeYcuUdurLhIlrOUkH3rQEgZzonng==" + }, + "node_modules/@algolia/requester-node-http": { + "version": "4.20.0", + "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.20.0.tgz", + "integrity": "sha512-ocJ66L60ABSSTRFnCHIEZpNHv6qTxsBwJEPfYaSBsLQodm0F9ptvalFkHMpvj5DfE22oZrcrLbOYM2bdPJRHng==", + "dependencies": { + "@algolia/requester-common": "4.20.0" + } + }, + "node_modules/@algolia/transporter": { + "version": "4.20.0", + "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.20.0.tgz", + "integrity": "sha512-Lsii1pGWOAISbzeyuf+r/GPhvHMPHSPrTDWNcIzOE1SG1inlJHICaVe2ikuoRjcpgxZNU54Jl+if15SUCsaTUg==", + "dependencies": { + "@algolia/cache-common": "4.20.0", + "@algolia/logger-common": "4.20.0", + "@algolia/requester-common": "4.20.0" + } + }, "node_modules/@alloc/quick-lru": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", @@ -21,6 +180,51 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@docsearch/css": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.5.2.tgz", + "integrity": "sha512-SPiDHaWKQZpwR2siD0KQUwlStvIAnEyK6tAE2h2Wuoq8ue9skzhlyVQ1ddzOxX6khULnAALDiR/isSF3bnuciA==" + }, + "node_modules/@docsearch/js": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/@docsearch/js/-/js-3.5.2.tgz", + "integrity": "sha512-p1YFTCDflk8ieHgFJYfmyHBki1D61+U9idwrLh+GQQMrBSP3DLGKpy0XUJtPjAOPltcVbqsTjiPFfH7JImjUNg==", + "dependencies": { + "@docsearch/react": "3.5.2", + "preact": "^10.0.0" + } + }, + "node_modules/@docsearch/react": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.5.2.tgz", + "integrity": "sha512-9Ahcrs5z2jq/DcAvYtvlqEBHImbm4YJI8M9y0x6Tqg598P40HTEkX7hsMcIuThI+hTFxRGZ9hll0Wygm2yEjng==", + "dependencies": { + "@algolia/autocomplete-core": "1.9.3", + "@algolia/autocomplete-preset-algolia": "1.9.3", + "@docsearch/css": "3.5.2", + "algoliasearch": "^4.19.1" + }, + "peerDependencies": { + "@types/react": ">= 16.8.0 < 19.0.0", + "react": ">= 16.8.0 < 19.0.0", + "react-dom": ">= 16.8.0 < 19.0.0", + "search-insights": ">= 1 < 3" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + }, + "search-insights": { + "optional": true + } + } + }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", @@ -104,6 +308,15 @@ "node": ">= 8" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@tailwindcss/forms": { "version": "0.5.6", "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.6.tgz", @@ -116,6 +329,38 @@ "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1" } }, + "node_modules/@themesberg/flowbite": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@themesberg/flowbite/-/flowbite-1.3.0.tgz", + "integrity": "sha512-Tyrk2bbmhuzYK/3DwO6L7oSkMVil/VMiFpy6lFLoz3oD0lwCJhX3NhtNuzgveIX4l9zZ5GxYqKlp2BOzY+LiMQ==", + "deprecated": "WARNING: This project has been renamed to flowbite. Install using flowbite instead.", + "dependencies": { + "@docsearch/js": "^3.0.0-alpha.42", + "@popperjs/core": "^2.9.3", + "mini-svg-data-uri": "^1.4.3" + } + }, + "node_modules/algoliasearch": { + "version": "4.20.0", + "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.20.0.tgz", + "integrity": "sha512-y+UHEjnOItoNy0bYO+WWmLWBlPwDjKHW6mNHrPi0NkuhpQOOEbrkwQH/wgKFDLh7qlKjzoKeiRtlpewDPDG23g==", + "dependencies": { + "@algolia/cache-browser-local-storage": "4.20.0", + "@algolia/cache-common": "4.20.0", + "@algolia/cache-in-memory": "4.20.0", + "@algolia/client-account": "4.20.0", + "@algolia/client-analytics": "4.20.0", + "@algolia/client-common": "4.20.0", + "@algolia/client-personalization": "4.20.0", + "@algolia/client-search": "4.20.0", + "@algolia/logger-common": "4.20.0", + "@algolia/logger-console": "4.20.0", + "@algolia/requester-browser-xhr": "4.20.0", + "@algolia/requester-common": "4.20.0", + "@algolia/requester-node-http": "4.20.0", + "@algolia/transporter": "4.20.0" + } + }, "node_modules/any-promise": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", @@ -495,7 +740,6 @@ "version": "1.4.4", "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz", "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==", - "dev": true, "bin": { "mini-svg-data-uri": "cli.js" } @@ -759,6 +1003,15 @@ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "dev": true }, + "node_modules/preact": { + "version": "10.18.1", + "resolved": "https://registry.npmjs.org/preact/-/preact-10.18.1.tgz", + "integrity": "sha512-mKUD7RRkQQM6s7Rkmi7IFkoEHjuFqRQUaXamO61E6Nn7vqF/bo7EZCmSyrUnp2UWHw0O7XjZ2eeXis+m7tf4lg==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -850,6 +1103,12 @@ "queue-microtask": "^1.2.2" } }, + "node_modules/search-insights": { + "version": "2.8.3", + "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.8.3.tgz", + "integrity": "sha512-W9rZfQ9XEfF0O6ntgQOTI7Txc8nkZrO4eJ/pTHK0Br6wWND2sPGPoWg+yGhdIW7wMbLqk8dc23IyEtLlNGpeNw==", + "peer": true + }, "node_modules/source-map-js": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", diff --git a/package.json b/package.json index 4ea7e98..4e58cd4 100644 --- a/package.json +++ b/package.json @@ -2,5 +2,8 @@ "devDependencies": { "@tailwindcss/forms": "^0.5.6", "tailwindcss": "^3.3.3" + }, + "dependencies": { + "@themesberg/flowbite": "^1.3.0" } } diff --git a/src/main.css b/src/main.css index b5c61c9..7bd4dda 100644 --- a/src/main.css +++ b/src/main.css @@ -1,3 +1,43 @@ @tailwind base; @tailwind components; @tailwind utilities; + +/* The Modal (background) */ +.modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + padding-top: 60px; + } + + /* Modal Content */ + .modal-content { + background-color: #fefefe; + margin: 5% auto; /* 5% from the top and centered */ + padding: 20px; + border: 1px solid #888; + width: 80%; /* Could be more or less, depending on screen size */ + } + + /* The Close Button */ + .close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; + } + + .close:hover, + .close:focus { + color: black; + text-decoration: none; + cursor: pointer; + } +
\ No newline at end of file diff --git a/static/logo.png b/static/logo.png Binary files differnew file mode 100644 index 0000000..31ebc71 --- /dev/null +++ b/static/logo.png diff --git a/static/main.css b/static/main.css index b7003e0..de23577 100644 --- a/static/main.css +++ b/static/main.css @@ -705,40 +705,6 @@ select { --tw-backdrop-sepia: ; } -.container { - width: 100%; -} - -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} - -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} - -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} - -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} - -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} - .sr-only { position: absolute; width: 1px; @@ -862,14 +828,30 @@ select { margin-bottom: -2rem; } +.-ml-0 { + margin-left: -0px; +} + +.-ml-0\.5 { + margin-left: -0.125rem; +} + .-ml-px { margin-left: -1px; } +.mb-5 { + margin-bottom: 1.25rem; +} + .ml-2 { margin-left: 0.5rem; } +.ml-3 { + margin-left: 0.75rem; +} + .ml-4 { margin-left: 1rem; } @@ -882,6 +864,14 @@ select { margin-right: 4rem; } +.mr-2 { + margin-right: 0.5rem; +} + +.mt-10 { + margin-top: 2.5rem; +} + .mt-2 { margin-top: 0.5rem; } @@ -890,28 +880,16 @@ select { margin-top: 0.625rem; } -.mt-8 { - margin-top: 2rem; -} - .mt-3 { margin-top: 0.75rem; } -.ml-3 { - margin-left: 0.75rem; -} - -.mt-10 { - margin-top: 2.5rem; +.mt-5 { + margin-top: 1.25rem; } -.mr-2 { - margin-right: 0.5rem; -} - -.mb-5 { - margin-bottom: 1.25rem; +.mt-8 { + margin-top: 2rem; } .block { @@ -938,6 +916,10 @@ select { height: 4rem; } +.h-4 { + height: 1rem; +} + .h-5 { height: 1.25rem; } @@ -954,10 +936,6 @@ select { height: 100%; } -.h-4 { - height: 1rem; -} - .w-0 { width: 0px; } @@ -974,6 +952,10 @@ select { width: 8rem; } +.w-4 { + width: 1rem; +} + .w-5 { width: 1.25rem; } @@ -1006,10 +988,6 @@ select { width: 1px; } -.w-4 { - width: 1rem; -} - .min-w-0 { min-width: 0px; } @@ -1097,6 +1075,16 @@ select { justify-content: space-between; } +.gap-x-1 { + -moz-column-gap: 0.25rem; + column-gap: 0.25rem; +} + +.gap-x-1\.5 { + -moz-column-gap: 0.375rem; + column-gap: 0.375rem; +} + .gap-x-3 { -moz-column-gap: 0.75rem; column-gap: 0.75rem; @@ -1174,6 +1162,10 @@ select { border-radius: 0.375rem; } +.rounded-sm { + border-radius: 0.125rem; +} + .border { border-width: 1px; } @@ -1200,11 +1192,6 @@ select { border-color: rgb(209 213 219 / var(--tw-border-opacity)); } -.bg-blue-500 { - --tw-bg-opacity: 1; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)); -} - .bg-gray-200 { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity)); @@ -1248,6 +1235,11 @@ select { background-color: rgb(79 70 229 / var(--tw-bg-opacity)); } +.bg-slate-200 { + --tw-bg-opacity: 1; + background-color: rgb(226 232 240 / var(--tw-bg-opacity)); +} + .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); @@ -1567,6 +1559,58 @@ select { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } +/* The Modal (background) */ + +.modal { + display: none; + /* Hidden by default */ + position: fixed; + /* Stay in place */ + z-index: 1; + /* Sit on top */ + left: 0; + top: 0; + width: 100%; + /* Full width */ + height: 100%; + /* Full height */ + overflow: auto; + /* Enable scroll if needed */ + background-color: rgb(0,0,0); + /* Fallback color */ + background-color: rgba(0,0,0,0.4); + /* Black w/ opacity */ + padding-top: 60px; +} + +/* Modal Content */ + +.modal-content { + background-color: #fefefe; + margin: 5% auto; + /* 5% from the top and centered */ + padding: 20px; + border: 1px solid #888; + width: 80%; + /* Could be more or less, depending on screen size */ +} + +/* The Close Button */ + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, + .close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} + .placeholder\:text-gray-400::-moz-placeholder { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity)); @@ -1757,3 +1801,4 @@ select { padding-left: 24rem; } } +
\ No newline at end of file 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 diff --git a/templates/modal.html b/templates/modal.html new file mode 100644 index 0000000..57f60d1 --- /dev/null +++ b/templates/modal.html @@ -0,0 +1,11 @@ +<div id="modal" _="on closeModal add .closing then wait for animationend then remove me"> + <div class="modal-underlay" _="on click trigger closeModal"></div> + <div class="modal-content"> + <h1>Modal Dialog</h1> + This is the modal content. + You can put anything here, like text, or a form, or an image. + <br> + <br> + <button _="on click trigger closeModal">Close</button> + </div> +</div>
\ No newline at end of file diff --git a/templates/vehicles_list.html b/templates/vehicles_list.html new file mode 100644 index 0000000..cf91a96 --- /dev/null +++ b/templates/vehicles_list.html @@ -0,0 +1,8 @@ +{% for car, val in my_cars%} +<li> + <a href="#" onclick="setActiveCar(c{{loop.index}})" id="c{{loop.index}}" 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"> + {{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 %}
\ No newline at end of file |
