ar2350/Projekt-Visualisierung
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: ar2350:d995683b557847b127675f689e1ef18a5bc8b01b
Branches Tags
ar2350:main
...
compare: ar2350:b67ee1e9790ee4d5561d2770c6b2bda66dbb5dc5
Branches Tags
ar2350:main

2 Commits
d995683b55 ... b67ee1e979

Author SHA1 Message Date
Arne Zitting
b67ee1e979 Merge branch 'main' of https://git.fbbgg.hs-woe.de/ar2350/Projekt-Visualisierung 2026-04-28 17:41:23 +02:00
Arne Zitting
e3ad003bcb Layout optimiert 2026-04-28 17:40:33 +02:00
3 changed files with 85 additions and 59 deletions
Expand all files Collapse all files

45
index.html
View File

@@ -8,23 +8,34 @@
<script type="module" src="/main.js"></script>
</head>
<body>
<header id="title">
3D-LiDAR Visualisierung
<img id="logoJadeHs" src="logoJadeHs.png" />
<img id="logoLbeg" src="logoLbeg.svg" />
<header id="header">
<span>3D-LiDAR Visualisierung</span>
</header>
<button id="resetBtn">Zurück auf Nord</button>
<select name="basemap" id="basemap">
<option value="" disabled selected>Hintergrundkarte</option>
<option value="openfree_bright">OpenFreeMap hell</option>
<option value="openfree_dark">OpenFreeMap dunkel</option>
<option value="openfree_liberty">OpenFreeMap Liberty</option>
<option value="google_satellite">Satellit</option>
<option value="terrain">Terrain</option>
<option value="satellite_terrain">Terrain mit Satellitenbild</option>
</select>
<div id="map"></div>
<aside id="sidebar">
<button id="resetBtn">Zurück auf Nord</button>
<select name="basemap" id="basemap">
<option value="" disabled selected>Hintergrundkarte</option>
<option value="openfree_bright">OpenFreeMap hell</option>
<option value="openfree_dark">OpenFreeMap dunkel</option>
<option value="openfree_liberty">OpenFreeMap Liberty</option>
<option value="google_satellite">Satellit</option>
<option value="terrain">Terrain</option>
<option value="satellite_terrain">Terrain mit Satellitenbild</option>
</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>
</html>

BIN
logoJadeHs.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 652 KiB

After

Width:  |  Height:  |  Size: 22 KiB

99
style.css
View File

@@ -1,50 +1,65 @@
body {
padding: 0;
}
#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';
html, body {
height: 100%;
margin: 0;
text-align: center;
}
#logoJadeHs{
position: fixed;
top: 1%;
right: 10%;
width: 128px;
height: 69px;
transform-origin: center center;
z-index: 0;
}
#logoLbeg{
position: fixed;
top: 1%;
right: 1%;
width: 128px;
height: 69px;
transform-origin: center center;
z-index: 0;
body {
margin: 0;
height: 100vh;
display: grid;
grid-template-rows: 80px 1fr;
grid-template-columns: 250px 1fr;
grid-template-areas:
"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 {
width: 85%;
height: 90%;
position: fixed;
right: 0%;
bottom: 0%;
width: 100%;
height: 100%;
}