diff options
| author | JeremyJamesL <jeremyluscombe@gmail.com> | 2024-12-11 08:24:53 +0000 |
|---|---|---|
| committer | JeremyJamesL <jeremyluscombe@gmail.com> | 2024-12-11 08:24:53 +0000 |
| commit | 195270415c4ab5bb6fd985a9bc848a42099af871 (patch) | |
| tree | 8bbc79905aee22928898cb9f68577ca7f008b6f9 /index.html | |
| parent | 1cf3d092da3991a366e4c483b8fdd6301f1e419c (diff) | |
📦 NEW: new styles
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 88 |
1 files changed, 70 insertions, 18 deletions
@@ -5,6 +5,12 @@ <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite App</title> + <link rel="preconnect" href="https://fonts.googleapis.com" /> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> + <link + href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" + rel="stylesheet" + /> <link rel="stylesheet" href="/src/index.css" /> <script> ((g) => { @@ -47,15 +53,23 @@ }); </script> </head> - <body> - <header class="py-2"> - <div class="container"> - <h1>London Pubs - Algolia Map Search</h1> - <div> - Shape can be <span class="select--rectangle">Rectangular</span> or a - <span class="select--polygon">Polygon</span> - </div> + <!-- + neutral-800 - dark bg + neutral-200 - text + zinc-800 - less dark bg + amber-600 - accent + --> + <body class="relative text-neutral-200 bg-neutral-800 font-['Montserrat']"> + <header class="py-4 text-center bg-neutral-800 rounded-b-lg shadow-2xl"> + <h1 class="text-lg font-semibold">London Pub Search <span class="text-2xl">🍻</span></h1> + <!-- + <div> + Shape can be <span class="select--rectangle">Rectangular</span> or a + <span class="select--polygon">Polygon</span> + </div> + --> + <!-- <div> Try around your <span class="select--ip relative" @@ -65,18 +79,56 @@ ></span> </div> </div> - </header> + --></header> - <main class="py-2"> - <div class="container"> - <div id="app" class="flex"> - <div> - <div> - <input type="text" placeholder="search..." id="searchbar" /> - </div> - <div id="hits"></div> + <main class="relative"> + <div class="absolute top-0 z-50 h-10 w-full bg-gradient-to-br from-neutral-800 to-transparent"></div> + + <div id="map"></div> + + <!-- Bottom bar (it's double wrapped to allow for overflor-y to not effect the controls) --> + <div class="fixed bottom-0 w-full"> + <ul class="absolute right-2 bottom-full flex flex-col gap-2 pb-2" id="#controls"> + <li class="p-2 bg-amber-600 rounded-2xl select--rectangle"> + <img src="/images/rectangle.svg" alt="" /> + </li> + <li class="p-2 bg-amber-600 rounded-2xl select--polygon"> + <img src="/images/polygon.svg" alt="" /> + </li> + <li class="p-2 bg-amber-600 rounded-2xl select--ip"> + <img src="/images/pin.svg" alt="" /> + </li> + </ul> + <div class="w-full bg-neutral-800 rounded-t-2xl h-64 px-5 py-3 flex flex-col overflow-y-auto"> + <!-- Controls --> + + <div class="h-1 w-20 bg-neutral-200 rounded-full mb-5 mr-auto ml-auto"></div> + <!-- Search bar--> + <div + class="flex items-center mb-5 bg-[#373737] rounded-lg pl-4 has-[input:focus-visible]:outline has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-amber-100" + > + <label for="searchbar" + ><svg fill="#E5E5E5" height="15px" width="15px" viewBox="0 0 488.4 488.4"> + <g> + <g> + <path + d="M0,203.25c0,112.1,91.2,203.2,203.2,203.2c51.6,0,98.8-19.4,134.7-51.2l129.5,129.5c2.4,2.4,5.5,3.6,8.7,3.6 + s6.3-1.2,8.7-3.6c4.8-4.8,4.8-12.5,0-17.3l-129.6-129.5c31.8-35.9,51.2-83,51.2-134.7c0-112.1-91.2-203.2-203.2-203.2 + S0,91.15,0,203.25z M381.9,203.25c0,98.5-80.2,178.7-178.7,178.7s-178.7-80.2-178.7-178.7s80.2-178.7,178.7-178.7 + S381.9,104.65,381.9,203.25z" + /> + </g> + </g></svg + ></label> + <input + type="text" + placeholder="Search for pub" + class="h-full w-full p-4 bg-transparent focus-visible:outline-none" + id="searchbar" + /> </div> - <div id="map"></div> + <h2 class="font-semibold text-lg mb-3">Pubs</h2> + <div id="hits"></div> </div> </div> </main> |