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>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="bundle.js" defer></script>
<title>Postnummer App</title>
@ -20,9 +22,14 @@
<button id="search-button" type="submit">Search</button>
</form>
<img src="assets/map.jpg" id="map"><br>
<p id="mouse-position"></p>
<p id="coords"></p>
<p id="zip-code"></p>
<div id="info">
<span id="mouse-position"></span>
<br>
<span id="coords"></span>
<br>
<span id="zip-code"></span>
<br>
</div>
</main>
</body>
</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;
@ -7,15 +11,16 @@ body {
margin: 0;
height: 100vh;
font-family: "Open Sans", sans-serif;
background-color: #E1F5FE;
}
#topbar {
background-color: #aaa;
color: #000;
background-color: #03A9F4;
color: white;
text-align: center;
margin: 0;
padding: 0.5rem;
/* box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); */
box-shadow: 0px 3px 3px #01579B;
}
#topbar > h1 {
@ -34,36 +39,74 @@ main > * {
margin: 2px;
}
code {
font-family: "Jetbrains Mono", monospace;
font-weight: bold;
}
#search-bar {
width: 100%;
display: flex;
flex-direction: row;
padding: 5px;
border: 1px solid #666;
border-radius: 5px;
margin-bottom: 15px;
filter: drop-shadow(0 2px 2px #9E9E9E);
}
#search-input {
width: 100%;
font-size: 1rem;
border: 0;
outline: 0;
padding-bottom: 2px;
background-color: white;
padding: 5px;
flex: 1;
border: 1px solid #666;
border-radius: 5px 0 0 5px;
}
#search-input:focus {
border-bottom: 2px solid black;
padding-bottom: 0;
background-color: #FAFAFA;
outline: none;
}
#search-button {
cursor: pointer;
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 {
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) {