From ee910aecf0c49e605882b276316fb703094cd56f Mon Sep 17 00:00:00 2001 From: Carsten Graf Date: Mon, 8 Sep 2025 21:48:48 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Fix=20footer=20positioning=20in?= =?UTF-8?q?=20adminlogin=20and=20generator=20pages?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Added proper HTML/body height: 100% for full viewport height - Changed body to flex-direction: column for proper footer positioning - Updated footer CSS with margin-top: auto for sticky footer behavior - Added flex-grow: 1 to containers for proper space distribution - Footer now properly sticks to bottom of viewport - Improved responsive layout for both adminlogin and generator pages --- public/css/adminlogin.css | 16 +++++++++++++++- public/css/generator.css | 16 +++++++++++++++- public/js/generator.js | 28 ++++++++++++++-------------- 3 files changed, 44 insertions(+), 16 deletions(-) diff --git a/public/css/adminlogin.css b/public/css/adminlogin.css index d180871..f07750a 100644 --- a/public/css/adminlogin.css +++ b/public/css/adminlogin.css @@ -4,11 +4,18 @@ box-sizing: border-box; } +html, body { + height: 100%; + margin: 0; + padding: 0; +} + body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; + flex-direction: column; align-items: center; justify-content: center; padding: 20px; @@ -24,6 +31,10 @@ body { width: 100%; position: relative; overflow: hidden; + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: center; } .login-container::before { @@ -194,8 +205,11 @@ input:hover { .footer { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border-top: 1px solid #2a2a3e; - margin-top: 3rem; + margin-top: auto; padding: 2rem 0; + position: relative; + bottom: 0; + width: 100%; } .footer-content { diff --git a/public/css/generator.css b/public/css/generator.css index 8c2a2d6..892cf96 100644 --- a/public/css/generator.css +++ b/public/css/generator.css @@ -4,11 +4,18 @@ box-sizing: border-box; } +html, body { + height: 100%; + margin: 0; + padding: 0; +} + body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; + flex-direction: column; align-items: center; justify-content: center; padding: 20px; @@ -24,6 +31,10 @@ body { width: 100%; position: relative; overflow: hidden; + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: center; } .container::before { @@ -389,8 +400,11 @@ input:hover, textarea:hover { .footer { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border-top: 1px solid #2a2a3e; - margin-top: 3rem; + margin-top: auto; padding: 2rem 0; + position: relative; + bottom: 0; + width: 100%; } .footer-content { diff --git a/public/js/generator.js b/public/js/generator.js index 575d3f8..85c4032 100644 --- a/public/js/generator.js +++ b/public/js/generator.js @@ -170,11 +170,11 @@ async function generateLicense() { throw new Error("Lizenzstufe muss eine Zahl zwischen 1 und 4 sein."); } - // Standort automatisch speichern, falls vorhanden - let locationSaved = false; - const locationName = document.getElementById('locationSearch')?.value?.trim(); - const latitude = document.getElementById('latitude')?.textContent; - const longitude = document.getElementById('longitude')?.textContent; + // Standort automatisch speichern, falls vorhanden + let locationSaved = false; + const locationName = document.getElementById('locationSearch')?.value?.trim(); + const latitude = document.getElementById('latitude')?.textContent; + const longitude = document.getElementById('longitude')?.textContent; if (locationName && latitude && longitude && tier >= 3) { try { @@ -331,8 +331,8 @@ async function searchLocation(buttonElement) { const lat = parseFloat(location.lat); const lon = parseFloat(location.lon); - // Der Name wird vom User bestimmt - nur Koordinaten aus der API verwenden - // Kein verstecktes Feld nötig, da der User den Namen selbst eingibt + // Der Name wird vom User bestimmt - nur Koordinaten aus der API verwenden + // Kein verstecktes Feld nötig, da der User den Namen selbst eingibt // Koordinaten anzeigen updateCoordinates(lat, lon); @@ -342,8 +342,8 @@ async function searchLocation(buttonElement) { createInteractiveMap(lat, lon); mapContainer.style.display = 'block'; - // Erfolgsmeldung - showSuccess(`✅ Koordinaten für "${locationInput}" erfolgreich gefunden! Klicken Sie auf die Karte, um den Pin zu verschieben.`); + // Erfolgsmeldung + showSuccess(`✅ Koordinaten für "${locationInput}" erfolgreich gefunden! Klicken Sie auf die Karte, um den Pin zu verschieben.`); } catch (error) { showError(`Fehler bei der Standortsuche: ${error.message}`); @@ -461,11 +461,11 @@ function createMap(initialLat, initialLon) { } } - // Standort in Datenbank speichern - async function saveLocationToDatabase() { - const locationName = document.getElementById('locationSearch').value.trim(); - const latitude = document.getElementById('latitude').textContent; - const longitude = document.getElementById('longitude').textContent; +// Standort in Datenbank speichern +async function saveLocationToDatabase() { + const locationName = document.getElementById('standorte').value.trim(); + const latitude = document.getElementById('latitude').textContent; + const longitude = document.getElementById('longitude').textContent; const saveBtn = document.getElementById('saveLocationBtn'); if (!locationName || !latitude || !longitude) {