Skip to content
GitLab
Commit 27478d4b authored by Alfakhori's avatar Alfakhori
Browse files

cleanup css

parent ea7f3be7
Pipeline #12474 passed with stage
in 22 seconds
Show whitespace changes
Inline Side-by-side
public/ar_start.js
View file @ 27478d4b
......@@ -5,6 +5,8 @@
let sceneData = null;
let sceneFileName = null;
let startScreen = null;
let startButton = null;
let loadButton = null;
......@@ -39,18 +41,68 @@ async function loadPredefinedScene(filePath, fileName) {
}
/* ============================================================ */
/* Create the Start AR / Load Scene buttons */
/* Create the Start Screen */
/* ============================================================ */
function showStartScreen() {
// Prevent duplicate buttons
if (startButton || loadButton || predefinedButton1 || predefinedButton2) {
// Prevent duplicate start screens
if (
startScreen ||
startButton ||
loadButton ||
predefinedButton1 ||
predefinedButton2
) {
return;
}
/* ========================= */
/* START AR */
/* ========================= */
/* ==========================================================
START SCREEN CONTAINER
========================================================== */
startScreen = document.createElement("div");
startScreen.classList.add("start-screen");
document.body.appendChild(startScreen);
/* ==========================================================
TITLE
========================================================== */
const title = document.createElement("h1");
title.textContent = "GENGENBACH";
title.classList.add("start-screen-title");
startScreen.appendChild(title);
/* ==========================================================
SUBTITLE
========================================================== */
const subtitle = document.createElement("div");
subtitle.textContent = "AR Urban Planning";
subtitle.classList.add("start-screen-subtitle");
startScreen.appendChild(subtitle);
/* ==========================================================
DIVIDER
========================================================== */
const divider = document.createElement("div");
divider.classList.add("start-screen-divider");
startScreen.appendChild(divider);
/* ==========================================================
START AR
========================================================== */
startButton = document.createElement("button");
......@@ -58,11 +110,11 @@ function showStartScreen() {
startButton.classList.add("start-screen-button", "start-ar-button");
document.body.appendChild(startButton);
startScreen.appendChild(startButton);
/* ========================= */
/* LOAD SCENE */
/* ========================= */
/* ==========================================================
LOAD SCENE
========================================================== */
loadButton = document.createElement("button");
......@@ -74,20 +126,50 @@ function showStartScreen() {
"scene-button",
);
document.body.appendChild(loadButton);
startScreen.appendChild(loadButton);
/* ==========================================================
PREDEFINED SCENE 1
========================================================== */
/* ========================= */
/* START AR CLICK */
/* ========================= */
predefinedButton1 = document.createElement("button");
predefinedButton1.textContent = "Gengenbach Plaza";
predefinedButton1.classList.add(
"start-screen-button",
"predefined-scene-button-1",
"scene-button",
);
startScreen.appendChild(predefinedButton1);
/* ==========================================================
PREDEFINED SCENE 2
========================================================== */
predefinedButton2 = document.createElement("button");
predefinedButton2.textContent = "Gengenbach Street";
predefinedButton2.classList.add(
"start-screen-button",
"predefined-scene-button-2",
"scene-button",
);
startScreen.appendChild(predefinedButton2);
/* ==========================================================
START AR CLICK
========================================================== */
startButton.onclick = () => {
// Remove start-page buttons
startButton.remove();
loadButton.remove();
predefinedButton1.remove();
predefinedButton2.remove();
// Remove complete start screen
startScreen.remove();
// Reset references
startScreen = null;
startButton = null;
loadButton = null;
predefinedButton1 = null;
......@@ -97,9 +179,9 @@ function showStartScreen() {
activateXR(sceneData);
};
/* ========================= */
/* LOAD SCENE CLICK */
/* ========================= */
/* ==========================================================
LOAD SCENE CLICK
========================================================== */
loadButton.onclick = () => {
loadSceneFromFile((data, fileName) => {
......@@ -109,7 +191,7 @@ function showStartScreen() {
loadButton.textContent = fileName;
// Mark uploaded scene as selected
// Select uploaded scene
loadButton.classList.add("selected");
// Deselect predefined scenes
......@@ -121,21 +203,9 @@ function showStartScreen() {
});
};
/* ========================= */
/* PREDEFINED SCENE 1 */
/* ========================= */
predefinedButton1 = document.createElement("button");
predefinedButton1.textContent = "Gengenbach Plaza";
predefinedButton1.classList.add(
"start-screen-button",
"predefined-scene-button-1",
"scene-button",
);
document.body.appendChild(predefinedButton1);
/* ==========================================================
PREDEFINED SCENE 1
========================================================== */
predefinedButton1.onclick = async () => {
const success = await loadPredefinedScene(
......@@ -155,21 +225,9 @@ function showStartScreen() {
}
};
/* ========================= */
/* PREDEFINED SCENE 2 */
/* ========================= */
predefinedButton2 = document.createElement("button");
predefinedButton2.textContent = "Gengenbach Street";
predefinedButton2.classList.add(
"start-screen-button",
"predefined-scene-button-2",
"scene-button",
);
document.body.appendChild(predefinedButton2);
/* ==========================================================
PREDEFINED SCENE 2
========================================================== */
predefinedButton2.onclick = async () => {
const success = await loadPredefinedScene(
......@@ -190,9 +248,9 @@ function showStartScreen() {
};
}
/* ========================= */
/* ============================================================ */
/* INITIAL START */
/* ========================= */
/* ============================================================ */
if (navigator.xr) {
showStartScreen();
......
public/index.html
View file @ 27478d4b
......@@ -4,119 +4,336 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gengenbach AR Projekt</title>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
<script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>
</head>
<body>
<!-- Debug -->
<!-- ============================================================
DEBUG
============================================================ -->
<div id="debug-container">
<div id="debug-console"></div>
<button id="debug-toggle-btn"></button>
</div>
<!-- Standardmenü -->
<div id="menu-bar" style="display: none;">
<div class="menu-item" id="add-section" onclick="showMenu('add-menu')">
<img src="assets/icons/add-icon.png" alt="Hinzufügen" />
<!-- ============================================================
STANDARDMENÜ
============================================================ -->
<div id="menu-bar">
<div
class="menu-item"
id="add-section"
onclick="showMenu('add-menu')">
<img
src="assets/icons/add-icon.png"
alt="Hinzufügen" />
</div>
<div class="menu-item" onclick="showMenu('map-window')">
<img src="assets/icons/map-icon.png" alt="Karte" />
<div
class="menu-item"
onclick="showMenu('map-window')">
<img
src="assets/icons/map-icon.png"
alt="Karte" />
</div>
<div class="menu-item" id="options-section" onclick="showMenu('options-menu')">
<img src="assets/icons/options-icon.png" alt="Optionen" />
<div
class="menu-item"
id="options-section"
onclick="showMenu('options-menu')">
<img
src="assets/icons/options-icon.png"
alt="Optionen" />
</div>
</div>
<!-- Hinzufügen-Menü für das Auswählen der Modelle-->
<div id="add-menu" class="menu-placeholder" style="display: none;"></div>
<!-- Bearbeiten-Menü -->
<div id="edit-menu" class="menu-placeholder" style="display: none;">
<div class="menu-item" onclick="openRotationMenu()">
<img src="assets/icons/rotate-icon.png" alt="Rotation" />
<!-- ============================================================
HINZUFÜGEN-MENÜ
============================================================ -->
<div
id="add-menu"
class="menu-placeholder">
</div>
<div class="menu-item" onclick="openScaleMenu()">
<img src="assets/icons/scale-icon.png" alt="Skalierung" />
<!-- ============================================================
BEARBEITEN-MENÜ
============================================================ -->
<div
id="edit-menu"
class="menu-placeholder">
<div
class="menu-item"
onclick="openRotationMenu()">
<img
src="assets/icons/rotate-icon.png"
alt="Rotation" />
</div>
<div class="menu-item" onclick="openMoveMenu()">
<img src="assets/icons/move-icon.png" alt="Bewegen" />
<div
class="menu-item"
onclick="openScaleMenu()">
<img
src="assets/icons/scale-icon.png"
alt="Skalierung" />
</div>
<div class="menu-item" onclick="deleteModel()">
<img src="assets/icons/delete-icon.png" alt="Löschen" />
<div
class="menu-item"
onclick="openMoveMenu()">
<img
src="assets/icons/move-icon.png"
alt="Bewegen" />
</div>
<div class="menu-item" onclick="completeEditing()">
<img src="assets/icons/check-icon.png" alt="Fertigstellen" />
<div
class="menu-item"
onclick="deleteModel()">
<img
src="assets/icons/delete-icon.png"
alt="Löschen" />
</div>
<div
class="menu-item"
onclick="completeEditing()">
<img
src="assets/icons/check-icon.png"
alt="Fertigstellen" />
</div>
<!-- Optionen-Menü -->
<div id="options-menu" class="menu-placeholder" style="display: none;">
<div class="menu-item" onclick="exitAR()">
<img src="assets/icons/exit-icon.png" alt="Beenden" />
</div>
<div class="menu-item" onclick="downloadScene()">
<img src="assets/icons/download-icon.png" alt="Download" />
<!-- ============================================================
OPTIONEN-MENÜ
============================================================ -->
<div
id="options-menu"
class="menu-placeholder">
<div
class="menu-item"
onclick="exitAR()">
<img
src="assets/icons/exit-icon.png"
alt="Beenden" />
</div>
<div class="menu-item" onclick="showMenu('menu-bar')">
<img src="assets/icons/back-icon.png" alt="Zurück" />
<div
class="menu-item"
onclick="downloadScene()">
<img
src="assets/icons/download-icon.png"
alt="Download" />
</div>
<div
class="menu-item"
onclick="showMenu('menu-bar')">
<img
src="assets/icons/back-icon.png"
alt="Zurück" />
</div>
</div>
<!-- Dynamisches Menü für Rotation und Scaling-->
<div id="dynamic-menu" style="display: none;"></div>
<!-- Bestätigungsdialog für Löschen -->
<div id="delete-confirmation-dialog" style="display: none;">
<!-- ============================================================
DYNAMISCHES MENÜ
============================================================ -->
<div id="dynamic-menu"></div>
<!-- ============================================================
BESTÄTIGUNGSDIALOG LÖSCHEN
============================================================ -->
<div id="delete-confirmation-dialog">
<div class="dialog-overlay"></div>
<div class="dialog-box">
<p id="delete-confirmation-text">Möchten Sie das Modell wirklich löschen?</p>
<button onclick="confirmDelete(true)">Ja</button>
<button onclick="confirmDelete(false)">Nein</button>
<p id="delete-confirmation-text">
Möchten Sie das Modell wirklich löschen?
</p>
<button onclick="confirmDelete(true)">
Ja
</button>
<button onclick="confirmDelete(false)">
Nein
</button>
</div>
</div>
<!-- Bestätigungsdialog für Beenden -->
<div id="confirmation-dialog" style="display: none;">
<!-- ============================================================
BESTÄTIGUNGSDIALOG BEENDEN
============================================================ -->
<div id="confirmation-dialog">
<div class="dialog-overlay"></div>
<div class="dialog-box">
<p>Möchten Sie die AR-Session wirklich verlassen?</p>
<button onclick="confirmExit(true)">Ja</button>
<button onclick="confirmExit(false)">Nein</button>
<p>
Möchten Sie die AR-Session wirklich verlassen?
</p>
<button onclick="confirmExit(true)">
Ja
</button>
<button onclick="confirmExit(false)">
Nein
</button>
</div>
</div>
<!-- Informations-Dialog -->
<div id="info-dialog" style="display: none;">
<!-- ============================================================
INFORMATIONS-DIALOG
============================================================ -->
<div id="info-dialog">
<div class="dialog-overlay"></div>
<div class="dialog-box">
<p id="info-text">Hier kommt die Nachricht hin</p>
<button onclick="closeInfoDialog()">OK</button>
<p id="info-text">
Hier kommt die Nachricht hin
</p>
<button onclick="closeInfoDialog()">
OK
</button>
</div>
</div>
<!-- ============================================================
MAP WINDOW
============================================================ -->
<div
id="map-window"
class="menu-placeholder">
<div id="map-container"></div>
<div
class="menu-item map-back-button"
onclick="showMenu('menu-bar')">
<img
src="assets/icons/back-icon.png"
alt="Zurück" />
</div>
<div id="map-window" class="menu-placeholder"
style="display: none; flex-direction: column; width: 100vw; height: 100vh;">
<div id="map-container" style="z-index: 1500; flex: 15; width: 100%; height: 100%;"></div>
<div class="menu-item" onclick="showMenu('menu-bar')"
style="cursor: pointer; flex: 1; align-items: center; justify-content: center;">
<img src="assets/icons/back-icon.png" alt="Zurück" style="width: 30px; height: 30px;" />
</div>
<!-- ============================================================
APP VERSION
Change this manually when needed.
============================================================ -->
<div id="app-version">
v0.1.0
</div>
<!-- ============================================================
JAVASCRIPT
============================================================ -->
<script src="ar_start.js"></script>
<script src="ar_main.js"></script>
<script src="ar_debug_console.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <!-- Leaflet einbinden -->
<link
rel="stylesheet"
href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="ar_overviewmap.js"></script>
<script src="ar_download.js"></script>
<!-- Audio-Element für Button-Klick -->
<audio id="button-sound" src="assets/sounds/button-sound.mp3" preload="auto"></audio>
<!-- ============================================================
BUTTON SOUND
============================================================ -->
<audio
id="button-sound"
src="assets/sounds/button-sound.mp3"
preload="auto">
</audio>
</body>
</html>
\ No newline at end of file
public/style.css
View file @ 27478d4b
/* ============================================================
GLOBAL / START SCREEN
============================================================ */
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-image: url('assets/images/gengenbach.png'); background-size: cover;
overflow: hidden;
background-image:
linear-gradient(
rgba(0, 0, 0, 0.35),
rgba(0, 0, 0, 0.50)
),
url('assets/images/gengenbach.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* ============================================================
GENERAL CONTAINER
============================================================ */
.container {
text-align: center;
background-color: rgba(255, 255, 255, 0.9);
padding: 50px;
border-radius: 10px;
color: #333;
background: rgba(20, 20, 20, 0.55);
padding: 40px 30px;
border-radius: 20px;
color: white;
max-width: 80%;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
box-shadow:
0 10px 40px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.15);
}
/* ============================================================
GENERAL HEADINGS / TEXT
============================================================ */
h1 {
font-size: 3em;
margin-bottom: 20px;
color: #444;
font-size: 2.5em;
margin-bottom: 10px;
color: white;
}
p {
font-size: 1.2em;
font-size: 1.1em;
margin-bottom: 30px;
color: rgba(255, 255, 255, 0.85);
}
#add-menu {
overflow-y: auto;
/* ============================================================
GENERAL BUTTONS
============================================================ */
button {
background-color: #4CAF50;
color: white;
font-size: 1em;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition:
background-color 0.3s ease-in-out,
transform 0.2s;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.1);
margin: 10px;
touch-action: manipulation;
}
button:hover {
background-color: #45a049;
}
button:active {
background-color: #387a39;
}
/* ============================================================
START SCREEN
============================================================ */
.start-screen {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(340px, 82vw);
display: flex;
flex-direction: column;
align-items: center;
gap: 11px;
z-index: 10;
text-align: center;
}
/* ============================================================
START SCREEN TITLE
============================================================ */
.start-screen-title {
margin: 0;
color: white;
font-size: clamp(28px, 7vw, 42px);
font-weight: 700;
letter-spacing: 3px;
line-height: 1.1;
text-shadow:
0 3px 12px rgba(0, 0, 0, 0.45);
}
.start-screen-subtitle {
margin: 4px 0 4px;
color: rgba(255, 255, 255, 0.88);
font-size: 15px;
font-weight: 400;
letter-spacing: 1px;
text-shadow:
0 2px 8px rgba(0, 0, 0, 0.45);
}
/* ============================================================
START SCREEN DIVIDER
============================================================ */
.start-screen-divider {
width: 55px;
height: 2px;
margin: 8px 0 12px;
background: rgba(255, 255, 255, 0.75);
border-radius: 2px;
}
/* ============================================================
START SCREEN BUTTONS
============================================================ */
.start-screen-button {
position: relative;
width: 100%;
box-sizing: border-box;
min-height: 54px;
padding: 15px 48px 15px 48px;
font-size: 16px;
font-weight: 500;
letter-spacing: 0.2px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.18);
color: white;
cursor: pointer;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.25);
margin: 0;
touch-action: manipulation;
transition:
background-color 0.2s ease,
transform 0.15s ease,
box-shadow 0.2s ease;
}
/* ============================================================
BUTTON ICONS
============================================================ */
.start-screen-button::before {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
font-size: 19px;
opacity: 0.9;
}
/* Start AR */
.start-ar-button::before {
content: "◎";
}
/* Load scene */
.load-scene-button::before {
content: "↥";
}
/* Plaza */
.predefined-scene-button-1::before {
content: "⌂";
}
/* Street */
.predefined-scene-button-2::before {
content: "▥";
}
/* ============================================================
SELECTED SCENE CHECKMARK
============================================================ */
.scene-button.selected::after {
content: "✓";
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
font-weight: 700;
color: white;
}
/* ============================================================
START AR BUTTON
============================================================ */
.start-ar-button {
background: #4CAF50;
min-height: 60px;
font-size: 19px;
font-weight: 600;
letter-spacing: 0.3px;
border-color:
rgba(255, 255, 255, 0.28);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.30),
0 3px 12px rgba(76, 175, 80, 0.20);
margin-bottom: 7px;
}
.start-ar-button:hover {
background: #45a049;
transform: scale(1.03);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.35),
0 4px 16px rgba(76, 175, 80, 0.25);
}
.start-ar-button:active {
background: #387a39;
transform: scale(0.98);
}
/* ============================================================
SCENE BUTTONS
============================================================ */
.scene-button {
background: rgba(45, 45, 45, 0.78);
}
.scene-button:hover {
background: rgba(70, 70, 70, 0.88);
transform: scale(1.02);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.30);
}
.scene-button.selected {
background: #4CAF50;
border-color:
rgba(255, 255, 255, 0.30);
box-shadow:
0 7px 24px rgba(0, 0, 0, 0.30),
0 3px 14px rgba(76, 175, 80, 0.25);
}
.scene-button.selected:hover {
background: #45a049;
transform: scale(1.02);
}
.scene-button:active {
transform: scale(0.98);
}
/* ============================================================
STANDARD MENÜ
============================================================ */
#menu-bar,
.menu-placeholder {
position: absolute;
bottom: 0;
width: 100%;
height: 80px;
display: flex;
justify-content: space-around;
align-items: center;
background: #121212;
padding: 10px;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.8);
box-shadow:
0 -2px 10px rgba(0, 0, 0, 0.8);
color: white;
z-index: 10;
border-top: 1px solid #2a2a2a;
}
/* ============================================================
MENU INITIAL STATE
============================================================ */
#menu-bar,
#add-menu,
#edit-menu,
#options-menu {
display: none;
}
/* ============================================================
MENU ITEMS
============================================================ */
.menu-item {
background: #2c2c2c;
border-radius: 20px;
padding: 8px;
transition: background-color 0.3s, transform 0.2s;
transition:
background-color 0.3s,
transform 0.2s;
}
.menu-item:hover {
background-color: #3a3a3a;
transform: scale(1.1);
}
......@@ -75,197 +483,273 @@ p {
height: 50px;
}
button {
background-color: #4CAF50;
color: white;
font-size: 1em;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease-in-out, transform 0.2s;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 10px;
}
button:hover {
background-color: #45a049;
/* ============================================================
ADD MENU
============================================================ */
#add-menu {
overflow-y: auto;
}
button:active {
background-color: #387a39;
/* ============================================================
DYNAMIC MENU
============================================================ */
#dynamic-menu {
position: absolute;
bottom: 90px;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
background: #1e1e1e;
box-shadow:
0 -2px 6px rgba(0, 0, 0, 0.8);
color: white;
width: 100vw;
height: 250px;
z-index: 20;
overflow-y: auto;
border-radius: 8px;
}
/* ============================================================
START SCREEN BUTTONS
RANGE SLIDER
============================================================ */
.start-screen-button {
position: fixed;
left: 50%;
transform: translate(-50%, -50%);
padding: 15px;
font-size: 18px;
}
#dynamic-menu input[type="range"] {
width: 100%;
.start-ar-button {
top: 45%;
background-color: #4CAF50;
color: white;
}
margin: 10px auto;
.load-scene-button {
top: 55%;
}
background: #3a3a3a;
.predefined-scene-button-1 {
top: 65%;
border-radius: 5px;
}
.predefined-scene-button-2 {
top: 75%;
}
#dynamic-menu input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
/* ============================================================
SCENE SELECTION COLORS
============================================================ */
width: 20px;
/* Scene buttons are gray when no scene is selected */
.scene-button {
background-color: #808080;
color: white;
}
height: 20px;
/* Gray hover */
.scene-button:hover {
background-color: #707070;
}
background: #fff;
/* Selected scene becomes green */
.scene-button.selected {
background-color: #4CAF50;
color: white;
}
border: 2px solid #555;
/* Selected scene hover */
.scene-button.selected:hover {
background-color: #45a049;
border-radius: 50%;
cursor: pointer;
}
/* ============================================================
CONFIRMATION DIALOG
CONFIRMATION / INFORMATION DIALOGS
============================================================ */
#confirmation-dialog,
#delete-confirmation-dialog {
#delete-confirmation-dialog,
#info-dialog {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
display: none;
justify-content: center;
align-items: center;
z-index: 20;
}
.dialog-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
}
.dialog-box {
position: relative;
background: #2c2c2c;
padding: 20px;
border-radius: 10px;
text-align: center;
color: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
box-shadow:
0 4px 6px rgba(0, 0, 0, 0.8);
}
.dialog-box p {
margin-bottom: 20px;
font-size: 1.2em;
color: #f0f0f0;
}
.dialog-box button {
margin: 5px;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s;
transition:
background-color 0.3s ease,
transform 0.2s;
}
.dialog-box button:first-child {
background-color: #e74c3c;
color: white;
}
.dialog-box button:first-child:hover {
background-color: #c0392b;
transform: scale(1.05);
}
.dialog-box button:last-child {
background-color: #3498db;
color: white;
}
.dialog-box button:last-child:hover {
background-color: #2980b9;
transform: scale(1.05);
}
/* ============================================================
DYNAMIC MENU
MAP WINDOW
============================================================ */
#dynamic-menu {
position: absolute;
bottom: 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
background: #1e1e1e;
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.8);
color: white;
#map-window {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 250px;
z-index: 20;
overflow-y: auto;
border-radius: 8px;
height: 100vh;
display: none;
flex-direction: column;
background: #ffffff;
z-index: 100;
box-sizing: border-box;
padding: 10px;
}
#dynamic-menu input[type="range"] {
/* ============================================================
MAP CONTAINER
============================================================ */
#map-container {
position: relative;
z-index: 1500;
flex: 15;
width: 100%;
margin: 10px auto;
background: #3a3a3a;
border-radius: 5px;
height: 100%;
}
#dynamic-menu input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #fff;
border: 2px solid #555;
border-radius: 50%;
/* ============================================================
MAP BACK BUTTON
============================================================ */
.map-back-button {
cursor: pointer;
flex: 1;
align-items: center;
justify-content: center;
}
.map-back-button img {
width: 30px;
height: 30px;
}
/* ============================================================
LEAFLET MAP
============================================================ */
#map-container .leaflet-container {
width: 100%;
height: 100%;
}
......@@ -275,34 +759,56 @@ button:active {
#debug-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
font-family: monospace;
font-size: 12px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#debug-console {
width: 100%;
max-height: 200px;
overflow-y: auto;
background: rgba(0, 0, 0, 0.7);
color: #00ff00;
padding: 5px;
display: none;
}
#debug-toggle-btn {
background: rgba(0, 0, 0, 0.7);
color: #00ff00;
font-size: 14px;
border: none;
padding: 5px 10px;
cursor: pointer;
display: none;
}
......@@ -313,67 +819,165 @@ button:active {
.button-row {
display: flex;
gap: 15px;
justify-content: center;
align-items: center;
}
.control-button {
flex: 0 0 auto;
border: none;
border-radius: 20px;
padding: 8px;
background-color: #007BFF;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
transition:
background-color 0.3s,
transform 0.2s;
}
.control-button img {
width: 30px;
height: 30px;
}
.control-button:active {
background-color: #0056b3;
transform: scale(0.95);
}
/* ============================================================
MAP WINDOW
APP VERSION
Manual version number for development
============================================================ */
#map-window {
#app-version {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
right: 8px;
display: none;
bottom: 6px;
background: #ffffff;
z-index: 9998;
z-index: 100;
font-family: monospace;
box-sizing: border-box;
font-size: 10px;
color: rgba(255, 255, 255, 0.55);
background: rgba(0, 0, 0, 0.25);
padding: 3px 6px;
border-radius: 5px;
pointer-events: none;
user-select: none;
}
/* Map itself */
/* ============================================================
MOBILE
============================================================ */
#map-container {
width: 100%;
height: 100%;
@media (max-width: 600px) {
position: relative;
.start-screen {
width: 78vw;
}
.start-screen-title {
font-size: 30px;
letter-spacing: 2.5px;
}
.start-screen-subtitle {
font-size: 14px;
}
.start-screen-button {
min-height: 52px;
padding: 14px 45px;
font-size: 16px;
}
.start-ar-button {
min-height: 58px;
font-size: 18px;
}
}
/* Make sure Leaflet fills the map window */
/* ============================================================
SMALL HEIGHT DEVICES
============================================================ */
@media (max-height: 650px) {
#map-container .leaflet-container {
width: 100%;
height: 100%;
.start-screen {
gap: 7px;
width: min(310px, 76vw);
}
.start-screen-title {
font-size: 27px;
}
.start-screen-subtitle {
font-size: 13px;
}
.start-screen-divider {
margin: 4px 0 6px;
}
.start-screen-button {
min-height: 46px;
padding-top: 11px;
padding-bottom: 11px;
}
.start-ar-button {
min-height: 50px;
}
}
/* ============================================================
VERY SMALL SCREENS / LANDSCAPE
============================================================ */
@media (max-height: 500px) {
.start-screen {
transform:
translate(-50%, -50%)
scale(0.85);
transform-origin: center;
}
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal