Compare commits

...

2 Commits

3 changed files with 85 additions and 59 deletions

View File

@@ -8,23 +8,34 @@
<script type="module" src="/main.js"></script> <script type="module" src="/main.js"></script>
</head> </head>
<body> <body>
<header id="title"> <header id="header">
3D-LiDAR Visualisierung <span>3D-LiDAR Visualisierung</span>
<img id="logoJadeHs" src="logoJadeHs.png" />
<img id="logoLbeg" src="logoLbeg.svg" />
</header> </header>
<button id="resetBtn">Zurück auf Nord</button>
<select name="basemap" id="basemap"> <aside id="sidebar">
<option value="" disabled selected>Hintergrundkarte</option> <button id="resetBtn">Zurück auf Nord</button>
<option value="openfree_bright">OpenFreeMap hell</option> <select name="basemap" id="basemap">
<option value="openfree_dark">OpenFreeMap dunkel</option> <option value="" disabled selected>Hintergrundkarte</option>
<option value="openfree_liberty">OpenFreeMap Liberty</option> <option value="openfree_bright">OpenFreeMap hell</option>
<option value="google_satellite">Satellit</option> <option value="openfree_dark">OpenFreeMap dunkel</option>
<option value="terrain">Terrain</option> <option value="openfree_liberty">OpenFreeMap Liberty</option>
<option value="satellite_terrain">Terrain mit Satellitenbild</option> <option value="google_satellite">Satellit</option>
</select> <option value="terrain">Terrain</option>
<option value="satellite_terrain">Terrain mit Satellitenbild</option>
<div id="map"></div> </select>
<div class="logos">
<a href="http://www.jade-hs.de">
<img id="logoJadeHs" src="logoJadeHs.png" />
</a>
<a href="https://www.lbeg.niedersachsen.de/startseite/">
<img id="logoLbeg" src="logoLbeg.svg" />
</a>
</div>
</aside>
<main id="main">
<div id="map"></div>
</main>
</body> </body>
</html> </html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 652 KiB

After

Width:  |  Height:  |  Size: 22 KiB

View File

@@ -1,50 +1,65 @@
body { html, body {
padding: 0; height: 100%;
}
#title {
text-align: center;
font-size:xx-large;
font-family:'Trebuchet MS';
font-weight: bold;
width: 50%;
padding: 15px;
margin: auto;
}
h1 {
font-family:'Trebuchet MS';
margin: 0; margin: 0;
text-align: center;
}
#logoJadeHs{
position: fixed;
top: 1%;
right: 10%;
width: 128px;
height: 69px;
transform-origin: center center;
z-index: 0;
} }
#logoLbeg{ body {
position: fixed; margin: 0;
top: 1%; height: 100vh;
right: 1%; display: grid;
width: 128px; grid-template-rows: 80px 1fr;
height: 69px; grid-template-columns: 250px 1fr;
transform-origin: center center; grid-template-areas:
z-index: 0; "header header"
"sidebar main";
font-family: 'Trebuchet MS';
} }
#header {
color: white;
grid-area: header;
display: flex;
align-items: center;
justify-content: center;
position: relative;
font-size: 28px;
font-weight: bold;
background: rgb(0, 0, 0);
}
.logos {
position: absolute;
bottom: 20px;
display: flex;
gap: 10px;
}
.logos img {
width: 100px;
height: auto;
}
#sidebar {
grid-area: sidebar;
padding: 20px;
background: #eeeeee;
display: flex;
flex-direction: column;
gap: 15px;
}
#main {
grid-area: main;
position: relative;
}
#map { #map {
width: 85%; width: 100%;
height: 90%; height: 100%;
position: fixed;
right: 0%;
bottom: 0%;
} }