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 @@ ...@@ -5,6 +5,8 @@
let sceneData = null; let sceneData = null;
let sceneFileName = null; let sceneFileName = null;
let startScreen = null;
let startButton = null; let startButton = null;
let loadButton = null; let loadButton = null;
...@@ -39,18 +41,68 @@ async function loadPredefinedScene(filePath, fileName) { ...@@ -39,18 +41,68 @@ async function loadPredefinedScene(filePath, fileName) {
} }
/* ============================================================ */ /* ============================================================ */
/* Create the Start AR / Load Scene buttons */ /* Create the Start Screen */
/* ============================================================ */ /* ============================================================ */
function showStartScreen() { function showStartScreen() {
// Prevent duplicate buttons // Prevent duplicate start screens
if (startButton || loadButton || predefinedButton1 || predefinedButton2) { if (
startScreen ||
startButton ||
loadButton ||
predefinedButton1 ||
predefinedButton2
) {
return; 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"); startButton = document.createElement("button");
...@@ -58,11 +110,11 @@ function showStartScreen() { ...@@ -58,11 +110,11 @@ function showStartScreen() {
startButton.classList.add("start-screen-button", "start-ar-button"); startButton.classList.add("start-screen-button", "start-ar-button");
document.body.appendChild(startButton); startScreen.appendChild(startButton);
/* ========================= */ /* ==========================================================
/* LOAD SCENE */ LOAD SCENE
/* ========================= */ ========================================================== */
loadButton = document.createElement("button"); loadButton = document.createElement("button");
...@@ -74,20 +126,50 @@ function showStartScreen() { ...@@ -74,20 +126,50 @@ function showStartScreen() {
"scene-button", "scene-button",
); );
document.body.appendChild(loadButton); startScreen.appendChild(loadButton);
/* ==========================================================
PREDEFINED SCENE 1
========================================================== */
/* ========================= */ predefinedButton1 = document.createElement("button");
/* START AR CLICK */
/* ========================= */ 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 = () => { startButton.onclick = () => {
// Remove start-page buttons // Remove complete start screen
startButton.remove(); startScreen.remove();
loadButton.remove();
predefinedButton1.remove();
predefinedButton2.remove();
// Reset references // Reset references
startScreen = null;
startButton = null; startButton = null;
loadButton = null; loadButton = null;
predefinedButton1 = null; predefinedButton1 = null;
...@@ -97,9 +179,9 @@ function showStartScreen() { ...@@ -97,9 +179,9 @@ function showStartScreen() {
activateXR(sceneData); activateXR(sceneData);
}; };
/* ========================= */ /* ==========================================================
/* LOAD SCENE CLICK */ LOAD SCENE CLICK
/* ========================= */ ========================================================== */
loadButton.onclick = () => { loadButton.onclick = () => {
loadSceneFromFile((data, fileName) => { loadSceneFromFile((data, fileName) => {
...@@ -109,7 +191,7 @@ function showStartScreen() { ...@@ -109,7 +191,7 @@ function showStartScreen() {
loadButton.textContent = fileName; loadButton.textContent = fileName;
// Mark uploaded scene as selected // Select uploaded scene
loadButton.classList.add("selected"); loadButton.classList.add("selected");
// Deselect predefined scenes // Deselect predefined scenes
...@@ -121,21 +203,9 @@ function showStartScreen() { ...@@ -121,21 +203,9 @@ function showStartScreen() {
}); });
}; };
/* ========================= */ /* ==========================================================
/* PREDEFINED SCENE 1 */ 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);
predefinedButton1.onclick = async () => { predefinedButton1.onclick = async () => {
const success = await loadPredefinedScene( const success = await loadPredefinedScene(
...@@ -155,21 +225,9 @@ function showStartScreen() { ...@@ -155,21 +225,9 @@ function showStartScreen() {
} }
}; };
/* ========================= */ /* ==========================================================
/* PREDEFINED SCENE 2 */ 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);
predefinedButton2.onclick = async () => { predefinedButton2.onclick = async () => {
const success = await loadPredefinedScene( const success = await loadPredefinedScene(
...@@ -190,9 +248,9 @@ function showStartScreen() { ...@@ -190,9 +248,9 @@ function showStartScreen() {
}; };
} }
/* ========================= */ /* ============================================================ */
/* INITIAL START */ /* INITIAL START */
/* ========================= */ /* ============================================================ */
if (navigator.xr) { if (navigator.xr) {
showStartScreen(); showStartScreen();
......
public/index.html
View file @ 27478d4b
...@@ -4,119 +4,336 @@ ...@@ -4,119 +4,336 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gengenbach AR Projekt</title> <title>Gengenbach AR Projekt</title>
<link rel="stylesheet" href="style.css"> <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/build/three.js"></script>
<script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script> <script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>
</head> </head>
<body> <body>
<!-- Debug -->
<!-- ============================================================
DEBUG
============================================================ -->
<div id="debug-container"> <div id="debug-container">
<div id="debug-console"></div> <div id="debug-console"></div>
<button id="debug-toggle-btn"></button> <button id="debug-toggle-btn"></button>
</div> </div>
<!-- Standardmenü -->
<div id="menu-bar" style="display: none;"> <!-- ============================================================
<div class="menu-item" id="add-section" onclick="showMenu('add-menu')"> STANDARDMENÜ
<img src="assets/icons/add-icon.png" alt="Hinzufügen" /> ============================================================ -->
<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>
<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>
<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>
</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;"> HINZUFÜGEN-MENÜ
<div class="menu-item" onclick="openRotationMenu()"> ============================================================ -->
<img src="assets/icons/rotate-icon.png" alt="Rotation" />
<div
id="add-menu"
class="menu-placeholder">
</div> </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>
<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>
<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>
<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>
<div
class="menu-item"
onclick="completeEditing()">
<img
src="assets/icons/check-icon.png"
alt="Fertigstellen" />
</div> </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>
<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>
<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>
<div
class="menu-item"
onclick="showMenu('menu-bar')">
<img
src="assets/icons/back-icon.png"
alt="Zurück" />
</div>
</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-overlay"></div>
<div class="dialog-box"> <div class="dialog-box">
<p id="delete-confirmation-text">Möchten Sie das Modell wirklich löschen?</p>
<button onclick="confirmDelete(true)">Ja</button> <p id="delete-confirmation-text">
<button onclick="confirmDelete(false)">Nein</button> Möchten Sie das Modell wirklich löschen?
</p>
<button onclick="confirmDelete(true)">
Ja
</button>
<button onclick="confirmDelete(false)">
Nein
</button>
</div> </div>
</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-overlay"></div>
<div class="dialog-box"> <div class="dialog-box">
<p>Möchten Sie die AR-Session wirklich verlassen?</p>
<button onclick="confirmExit(true)">Ja</button> <p>
<button onclick="confirmExit(false)">Nein</button> Möchten Sie die AR-Session wirklich verlassen?
</p>
<button onclick="confirmExit(true)">
Ja
</button>
<button onclick="confirmExit(false)">
Nein
</button>
</div> </div>
</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-overlay"></div>
<div class="dialog-box"> <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>
</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>
<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> </div>
<!-- ============================================================
APP VERSION
Change this manually when needed.
============================================================ -->
<div id="app-version">
v0.1.0
</div> </div>
<!-- ============================================================
JAVASCRIPT
============================================================ -->
<script src="ar_start.js"></script> <script src="ar_start.js"></script>
<script src="ar_main.js"></script> <script src="ar_main.js"></script>
<script src="ar_debug_console.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_overviewmap.js"></script>
<script src="ar_download.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> </body>
</html> </html>
\ No newline at end of file
public/style.css
View file @ 27478d4b
/* ============================================================
GLOBAL / START SCREEN
============================================================ */
body { body {
margin: 0; margin: 0;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333; color: white;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; 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-position: center;
background-repeat: no-repeat;
} }
/* ============================================================
GENERAL CONTAINER
============================================================ */
.container { .container {
text-align: center; text-align: center;
background-color: rgba(255, 255, 255, 0.9);
padding: 50px; background: rgba(20, 20, 20, 0.55);
border-radius: 10px;
color: #333; padding: 40px 30px;
border-radius: 20px;
color: white;
max-width: 80%; 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 { h1 {
font-size: 3em; font-size: 2.5em;
margin-bottom: 20px;
color: #444; margin-bottom: 10px;
color: white;
} }
p { p {
font-size: 1.2em; font-size: 1.1em;
margin-bottom: 30px; 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-bar,
.menu-placeholder { .menu-placeholder {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 80px; height: 80px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
background: #121212; background: #121212;
padding: 10px; 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; color: white;
z-index: 10; z-index: 10;
border-top: 1px solid #2a2a2a; border-top: 1px solid #2a2a2a;
} }
/* ============================================================
MENU INITIAL STATE
============================================================ */
#menu-bar,
#add-menu,
#edit-menu,
#options-menu {
display: none;
}
/* ============================================================
MENU ITEMS
============================================================ */
.menu-item { .menu-item {
background: #2c2c2c; background: #2c2c2c;
border-radius: 20px; border-radius: 20px;
padding: 8px; padding: 8px;
transition: background-color 0.3s, transform 0.2s;
transition:
background-color 0.3s,
transform 0.2s;
} }
.menu-item:hover { .menu-item:hover {
background-color: #3a3a3a; background-color: #3a3a3a;
transform: scale(1.1); transform: scale(1.1);
} }
...@@ -75,197 +483,273 @@ p { ...@@ -75,197 +483,273 @@ p {
height: 50px; 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 { #dynamic-menu input[type="range"] {
position: fixed; width: 100%;
left: 50%;
transform: translate(-50%, -50%);
padding: 15px;
font-size: 18px;
}
.start-ar-button { margin: 10px auto;
top: 45%;
background-color: #4CAF50;
color: white;
}
.load-scene-button { background: #3a3a3a;
top: 55%;
}
.predefined-scene-button-1 { border-radius: 5px;
top: 65%;
} }
.predefined-scene-button-2 { #dynamic-menu input[type="range"]::-webkit-slider-thumb {
top: 75%; -webkit-appearance: none;
}
appearance: none;
/* ============================================================ width: 20px;
SCENE SELECTION COLORS
============================================================ */
/* Scene buttons are gray when no scene is selected */ height: 20px;
.scene-button {
background-color: #808080;
color: white;
}
/* Gray hover */ background: #fff;
.scene-button:hover {
background-color: #707070;
}
/* Selected scene becomes green */ border: 2px solid #555;
.scene-button.selected {
background-color: #4CAF50;
color: white;
}
/* Selected scene hover */ border-radius: 50%;
.scene-button.selected:hover {
background-color: #45a049; cursor: pointer;
} }
/* ============================================================ /* ============================================================
CONFIRMATION DIALOG CONFIRMATION / INFORMATION DIALOGS
============================================================ */ ============================================================ */
#confirmation-dialog, #confirmation-dialog,
#delete-confirmation-dialog { #delete-confirmation-dialog,
#info-dialog {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex;
display: none;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 20; z-index: 20;
} }
.dialog-overlay { .dialog-overlay {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
} }
.dialog-box { .dialog-box {
position: relative; position: relative;
background: #2c2c2c; background: #2c2c2c;
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
text-align: center; text-align: center;
color: white; 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 { .dialog-box p {
margin-bottom: 20px; margin-bottom: 20px;
font-size: 1.2em; font-size: 1.2em;
color: #f0f0f0; color: #f0f0f0;
} }
.dialog-box button { .dialog-box button {
margin: 5px; margin: 5px;
padding: 10px 20px; padding: 10px 20px;
font-size: 16px; font-size: 16px;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
cursor: pointer; 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 { .dialog-box button:first-child {
background-color: #e74c3c; background-color: #e74c3c;
color: white; color: white;
} }
.dialog-box button:first-child:hover { .dialog-box button:first-child:hover {
background-color: #c0392b; background-color: #c0392b;
transform: scale(1.05); transform: scale(1.05);
} }
.dialog-box button:last-child { .dialog-box button:last-child {
background-color: #3498db; background-color: #3498db;
color: white; color: white;
} }
.dialog-box button:last-child:hover { .dialog-box button:last-child:hover {
background-color: #2980b9; background-color: #2980b9;
transform: scale(1.05); transform: scale(1.05);
} }
/* ============================================================ /* ============================================================
DYNAMIC MENU MAP WINDOW
============================================================ */ ============================================================ */
#dynamic-menu { #map-window {
position: absolute; position: fixed;
bottom: 90px;
display: flex; top: 0;
flex-direction: column; left: 0;
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; width: 100vw;
height: 250px; height: 100vh;
z-index: 20;
overflow-y: auto; display: none;
border-radius: 8px;
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%; width: 100%;
margin: 10px auto;
background: #3a3a3a; height: 100%;
border-radius: 5px;
} }
#dynamic-menu input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; /* ============================================================
appearance: none; MAP BACK BUTTON
width: 20px; ============================================================ */
height: 20px;
background: #fff; .map-back-button {
border: 2px solid #555;
border-radius: 50%;
cursor: pointer; 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 { ...@@ -275,34 +759,56 @@ button:active {
#debug-container { #debug-container {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
z-index: 9999; z-index: 9999;
font-family: monospace; font-family: monospace;
font-size: 12px; font-size: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
} }
#debug-console { #debug-console {
width: 100%; width: 100%;
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
color: #00ff00; color: #00ff00;
padding: 5px; padding: 5px;
display: none; display: none;
} }
#debug-toggle-btn { #debug-toggle-btn {
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
color: #00ff00; color: #00ff00;
font-size: 14px; font-size: 14px;
border: none; border: none;
padding: 5px 10px; padding: 5px 10px;
cursor: pointer; cursor: pointer;
display: none; display: none;
} }
...@@ -313,67 +819,165 @@ button:active { ...@@ -313,67 +819,165 @@ button:active {
.button-row { .button-row {
display: flex; display: flex;
gap: 15px; gap: 15px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.control-button { .control-button {
flex: 0 0 auto; flex: 0 0 auto;
border: none; border: none;
border-radius: 20px; border-radius: 20px;
padding: 8px; padding: 8px;
background-color: #007BFF; background-color: #007BFF;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
transition:
background-color 0.3s,
transform 0.2s;
} }
.control-button img { .control-button img {
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
.control-button:active { .control-button:active {
background-color: #0056b3; background-color: #0056b3;
transform: scale(0.95); transform: scale(0.95);
} }
/* ============================================================ /* ============================================================
MAP WINDOW APP VERSION
Manual version number for development
============================================================ */ ============================================================ */
#map-window { #app-version {
position: fixed; position: fixed;
top: 0;
left: 0;
width: 100vw; right: 8px;
height: 100vh;
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 { @media (max-width: 600px) {
width: 100%;
height: 100%;
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 { .start-screen {
width: 100%; gap: 7px;
height: 100%;
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