h2/postnummer-app
h2/postnummer-app
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Redesign page

Browse Source
This commit is contained in:
ReiMerc 2023-02-06 21:11:19 +01:00
parent 887a167422
commit 56550d6573
2 changed files with 68 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/index.html
View File

@ -2,6 +2,8 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script src="bundle.js" defer></script> <script src="bundle.js" defer></script>
<title>Postnummer App</title> <title>Postnummer App</title>
@ -20,9 +22,14 @@
<button id="search-button" type="submit">Search</button> <button id="search-button" type="submit">Search</button>
</form> </form>
<img src="assets/map.jpg" id="map"><br> <img src="assets/map.jpg" id="map"><br>
<p id="mouse-position"></p> <div id="info">
<p id="coords"></p> <span id="mouse-position"></span>
<p id="zip-code"></p> <br>
<span id="coords"></span>
<br>
<span id="zip-code"></span>
<br>
</div>
</main> </main>
</body> </body>
</html> </html>

73
frontend/style.css
View File

@ -1,3 +1,7 @@
@font-face {
font-family: "Jetbrains Mono";
src: url("assets/JetbrainsMono-Regular.woff2");
}
* { * {
box-sizing: border-box; box-sizing: border-box;
@ -7,15 +11,16 @@ body {
margin: 0; margin: 0;
height: 100vh; height: 100vh;
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
background-color: #E1F5FE;
} }
#topbar { #topbar {
background-color: #aaa; background-color: #03A9F4;
color: #000; color: white;
text-align: center; text-align: center;
margin: 0; margin: 0;
padding: 0.5rem; padding: 0.5rem;
/* box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); */ box-shadow: 0px 3px 3px #01579B;
} }
#topbar > h1 { #topbar > h1 {
@ -34,36 +39,74 @@ main > * {
margin: 2px; margin: 2px;
} }
code {
font-family: "Jetbrains Mono", monospace;
font-weight: bold;
}
#search-bar { #search-bar {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 5px; margin-bottom: 15px;
border: 1px solid #666; filter: drop-shadow(0 2px 2px #9E9E9E);
border-radius: 5px;
} }
#search-input { #search-input {
width: 100%; background-color: white;
font-size: 1rem; padding: 5px;
border: 0; flex: 1;
outline: 0; border: 1px solid #666;
padding-bottom: 2px; border-radius: 5px 0 0 5px;
} }
#search-input:focus { #search-input:focus {
border-bottom: 2px solid black; background-color: #FAFAFA;
padding-bottom: 0; outline: none;
} }
#search-button { #search-button {
cursor: pointer;
width: 5rem; width: 5rem;
font-size: 1rem; background-color: #03A9F4;
color: white;
border: none;
border-radius: 0 5px 5px 0;
transition-duration: 0.2s;
}
#search-button:hover, #search-button:focus {
background-color: #039BE5;
outline: none;
}
#search-button:active {
background-color: #0288D1;
} }
#map { #map {
width: 100%; width: 100%;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.4); border-radius: 5px;
box-shadow: 0 2px 4px #9E9E9E;
border: 1px solid #7E7E7E;
}
#info {
background-color: white;
padding: 5px;
border-radius: 5px;
border: 1px solid #7E7E7E;
box-shadow: 0 2px 2px #9E9E9E;
}
#info {
font-size: 1.1em;
width: 100%;
}
#mouse-position, #coords {
color: #7E7E7E;
font-size: 0.9em;
} }
@media screen and (max-width: 1000px) { @media screen and (max-width: 1000px) {