diff --git a/assets/button-stepped-border-image.svg b/assets/button-stepped-border-image.svg new file mode 100644 index 0000000..229a1aa --- /dev/null +++ b/assets/button-stepped-border-image.svg @@ -0,0 +1,66 @@ + + + + diff --git a/assets/neon-border-image.svg b/assets/neon-border-image.svg new file mode 100644 index 0000000..b78b240 --- /dev/null +++ b/assets/neon-border-image.svg @@ -0,0 +1,69 @@ + + + + diff --git a/css/style.css b/css/style.css index f6fd981..7e65655 100644 --- a/css/style.css +++ b/css/style.css @@ -134,17 +134,60 @@ body > hr { /* SAERCH FORM */ #search-section { - position: sticky; - top: 0; - left: 0; - z-index: 100i; + border: solid 10px black; + border-image: url("../assets/button-stepped-border-image.svg") 16 15 fill; + z-index: 100; + margin-bottom: 5px; + margin-left: 5px; + width: fit-content; + max-width: 100%; + background: black; + background-clip: content-box; + color: white; + + display: grid; + grid-template-columns: min-content 1fr; + grid-template-rows: 1fr; +} + +#search-section input { + background: black; + font-size: 1em; + color: inherit; + font-family: monospace; + border: none; + padding: 1ex; + + grid-column: 2; + grid-row: 1; +} + +#search-section button { + background: transparent; + border: none; + padding: 1ex; + grid-column: 1; + grid-row: 1; + cursor: pointer; +} + +#search-section label { + grid-column: 2; + grid-row: 1; + padding: 1ex; + align-self: flex-end; +} + +#search-section button img { + height: 1.5em; } /* PANEL */ #result-panel { background: black; - border-top: 3px white solid; + border-image: url("../assets/neon-border-image.svg") 12; + border-top: 5.5px white solid; color: white; } diff --git a/icons/search.svg b/icons/search.svg new file mode 100644 index 0000000..535d2ef --- /dev/null +++ b/icons/search.svg @@ -0,0 +1,541 @@ + + + +Piscine++++++Piscine de l'AntenneAu centre de la pelouse d'entree sur le site, a cote des jeux pour enfantGrand atelier de nage libre, tous cyborg accepteEVENEMENTS A VENIRNage libre3 Juil17:00-19:00 diff --git a/index.html b/index.html index 7df51b7..7163235 100644 --- a/index.html +++ b/index.html @@ -18,13 +18,13 @@
-
-
-
- - -
-
+
+
+ + +
diff --git a/js/index.js b/js/index.js index 91fb24a..e8fcae3 100644 --- a/js/index.js +++ b/js/index.js @@ -21,7 +21,7 @@ window.interhackPlaces = places; await MAP.init_places(places) // GESTION de la recherche -const search_form = document.getElementById("search-area") +const search_form = document.getElementById("search-section") search_form.elements["query"].addEventListener("change", () => search_form.requestSubmit()) search_form.elements["query"].addEventListener("input", () => search_form.requestSubmit())