Ajout des borduresw
This commit is contained in:
parent
48aad70993
commit
255c47183d
GPG key ID:
C4B28FD2729941CE
6 changed files with 732 additions and 13 deletions
66
assets/button-stepped-border-image.svg
Normal file
66
assets/button-stepped-border-image.svg
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="100"
|
||||||
|
height="100"
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
xml:space="preserve"
|
||||||
|
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||||
|
sodipodi:docname="mockup.svg"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#999999"
|
||||||
|
borderopacity="1"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:zoom="2.7556247"
|
||||||
|
inkscape:cx="1253.2549"
|
||||||
|
inkscape:cy="1447.5847"
|
||||||
|
inkscape:window-width="1703"
|
||||||
|
inkscape:window-height="1071"
|
||||||
|
inkscape:window-x="56"
|
||||||
|
inkscape:window-y="50"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="g4"><inkscape:page
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
width="100"
|
||||||
|
height="100"
|
||||||
|
id="page2"
|
||||||
|
margin="0"
|
||||||
|
bleed="0" /></sodipodi:namedview><defs
|
||||||
|
id="defs1" /><g
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer2"
|
||||||
|
inkscape:label="Default Mobile"
|
||||||
|
transform="translate(-1295.6909,-1417)"><g
|
||||||
|
id="g7"
|
||||||
|
inkscape:label="button-stepped"><rect
|
||||||
|
style="fill:#ffffff;fill-opacity:0;stroke:none;stroke-width:1.58144;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
|
||||||
|
id="rect17-4-3-3"
|
||||||
|
width="100"
|
||||||
|
height="100"
|
||||||
|
x="1295.6909"
|
||||||
|
y="1417" /><rect
|
||||||
|
style="display:inline;fill:#000000;fill-opacity:1;stroke:none;stroke-width:15.4123;stroke-opacity:1"
|
||||||
|
id="rect3-9-4-86-1"
|
||||||
|
width="75.705887"
|
||||||
|
height="99.999954"
|
||||||
|
x="1307.8379"
|
||||||
|
y="1417" /><rect
|
||||||
|
style="display:inline;fill:#000000;fill-opacity:1;stroke:none;stroke-width:15.6491;stroke-opacity:1"
|
||||||
|
id="rect3-5-5-2-2"
|
||||||
|
width="99.999886"
|
||||||
|
height="78.049637"
|
||||||
|
x="1295.6909"
|
||||||
|
y="1427.9751" /></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
69
assets/neon-border-image.svg
Normal file
69
assets/neon-border-image.svg
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="100"
|
||||||
|
height="100"
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
xml:space="preserve"
|
||||||
|
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||||
|
sodipodi:docname="mockup.svg"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#999999"
|
||||||
|
borderopacity="1"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:zoom="5.1118834"
|
||||||
|
inkscape:cx="1209.4368"
|
||||||
|
inkscape:cy="1470.8864"
|
||||||
|
inkscape:window-width="1703"
|
||||||
|
inkscape:window-height="1071"
|
||||||
|
inkscape:window-x="56"
|
||||||
|
inkscape:window-y="50"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="g4"><inkscape:page
|
||||||
|
x="0"
|
||||||
|
y="0"
|
||||||
|
width="100"
|
||||||
|
height="100"
|
||||||
|
id="page2"
|
||||||
|
margin="0"
|
||||||
|
bleed="0" /></sodipodi:namedview><defs
|
||||||
|
id="defs1" /><g
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer2"
|
||||||
|
inkscape:label="Default Mobile"
|
||||||
|
transform="translate(-1178,-1417)"><g
|
||||||
|
id="g4"
|
||||||
|
inkscape:label="neon-border-image"
|
||||||
|
inkscape:export-filename="assets/neon-border-image.svg"
|
||||||
|
inkscape:export-xdpi="96"
|
||||||
|
inkscape:export-ydpi="96"><rect
|
||||||
|
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.58144;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
|
||||||
|
id="rect17-4-3"
|
||||||
|
width="100"
|
||||||
|
height="100"
|
||||||
|
x="1178"
|
||||||
|
y="1417" /><path
|
||||||
|
style="fill:#000000;fill-opacity:1;stroke:#ffbf3e;stroke-width:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
|
||||||
|
d="m 1178,1419 h 100"
|
||||||
|
id="path17-2-5"
|
||||||
|
sodipodi:nodetypes="cc" /><path
|
||||||
|
style="fill:#000000;fill-opacity:1;stroke:#ff4e00;stroke-width:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
|
||||||
|
d="m 1178,1423 h 100"
|
||||||
|
id="path17-9-2-6"
|
||||||
|
sodipodi:nodetypes="cc" /><path
|
||||||
|
style="fill:#000000;fill-opacity:1;stroke:#8800ff;stroke-width:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke markers fill"
|
||||||
|
d="m 1178,1427 h 100"
|
||||||
|
id="path17-9-6-6-2"
|
||||||
|
sodipodi:nodetypes="cc" /></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -134,17 +134,60 @@ body > hr {
|
||||||
/* SAERCH FORM */
|
/* SAERCH FORM */
|
||||||
|
|
||||||
#search-section {
|
#search-section {
|
||||||
position: sticky;
|
border: solid 10px black;
|
||||||
top: 0;
|
border-image: url("../assets/button-stepped-border-image.svg") 16 15 fill;
|
||||||
left: 0;
|
z-index: 100;
|
||||||
z-index: 100i;
|
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 */
|
/* PANEL */
|
||||||
|
|
||||||
#result-panel {
|
#result-panel {
|
||||||
background: black;
|
background: black;
|
||||||
border-top: 3px white solid;
|
border-image: url("../assets/neon-border-image.svg") 12;
|
||||||
|
border-top: 5.5px white solid;
|
||||||
|
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
541
icons/search.svg
Normal file
541
icons/search.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.2 MiB |
14
index.html
14
index.html
|
|
@ -18,13 +18,13 @@
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<section id="search-section">
|
<form id="search-section">
|
||||||
<form id="search-area">
|
<label for="search-area-query">Rechercher une zone</label><br/>
|
||||||
<label for="search-area-query">Rechercher une zone</label><br/>
|
<input type="search" name="query" id="search-area-query" />
|
||||||
<input type="search" name="query" id="search-area-query" />
|
<button title="Rechercher" autocomplete="no">
|
||||||
<button>Rechercher</button>
|
<img src="icons/search.svg" alt="Icone de loupe"/>
|
||||||
</form>
|
</button>
|
||||||
</section>
|
</form>
|
||||||
|
|
||||||
<camp-bidi-panel id="result-panel" ></camp-bidi-panel>
|
<camp-bidi-panel id="result-panel" ></camp-bidi-panel>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@ window.interhackPlaces = places;
|
||||||
await MAP.init_places(places)
|
await MAP.init_places(places)
|
||||||
|
|
||||||
// GESTION de la recherche
|
// 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("change", () => search_form.requestSubmit())
|
||||||
search_form.elements["query"].addEventListener("input", () => search_form.requestSubmit())
|
search_form.elements["query"].addEventListener("input", () => search_form.requestSubmit())
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue