diff --git a/public/Warenkorb/warenkorb.html b/public/Warenkorb/warenkorb.html index 500a887..9b36e08 100644 --- a/public/Warenkorb/warenkorb.html +++ b/public/Warenkorb/warenkorb.html @@ -3,7 +3,6 @@ Warenkorb - diff --git a/public/bestellformular/bestellformular.html b/public/bestellformular/bestellformular.html index 640911a..f45469d 100644 --- a/public/bestellformular/bestellformular.html +++ b/public/bestellformular/bestellformular.html @@ -4,7 +4,6 @@ Bestellformular - @@ -37,53 +36,14 @@ - -
- - - -
-
+ - Bestellung absenden + +
+
+

Zurück zum Warenkorb

+
@@ -182,101 +142,8 @@ } }); - // Artikelnummer prüfen bei Eingabe - formular.addEventListener('input', async function (event) { - if (event.target.classList.contains('ArtikelNrText')) { - if (event.target.value.trim() !== '') { - await pruefeVerfuegbarkeit(event.target); - fuegeNeuesArtikelFeldHinzu(); - } - } - }); }); - // Funktion: Verfügbarkeit prüfen - async function pruefeVerfuegbarkeit(inputFeld) { - const artikelnummer = inputFeld.value.trim(); - const verfuegbarkeitDiv = inputFeld.parentElement.querySelector('.verfuegbarkeit'); - const sendButton = document.getElementById('sendOrder'); - - if (artikelnummer.length === 0) { - verfuegbarkeitDiv.textContent = ""; - return; - } - - try { - const response = await fetch(`/api/pruefe-artikel?nummer=${encodeURIComponent(artikelnummer)}`); - const data = await response.json(); - - const artikelDivs = document.querySelectorAll('.Artikel'); - let artikelVerfuegbarkeiten = []; - - artikelDivs.forEach(div => { - const artikelNrInput = div.querySelector('.ArtikelNrText'); - const verfDiv = div.querySelector('.verfuegbarkeit'); - - if (artikelNrInput.value.trim() !== '') { - if (artikelNrInput === inputFeld) { - if (data.verfuegbar) { - verfDiv.textContent = "Artikel verfügbar."; - verfDiv.style.color = "green"; - artikelVerfuegbarkeiten.push(true); - } else { - verfDiv.textContent = "Artikel nicht verfügbar!"; - verfDiv.style.color = "red"; - artikelVerfuegbarkeiten.push(false); - } - } else { - // Für andere Felder bisherige Anzeige berücksichtigen - if (verfDiv.textContent.includes("nicht verfügbar")) { - artikelVerfuegbarkeiten.push(false); - } else { - artikelVerfuegbarkeiten.push(true); - } - } - } - }); - - // Button sperren/freigeben - if (artikelVerfuegbarkeiten.every(status => status === true)) { - sendButton.disabled = false; - } else { - sendButton.disabled = true; - } - - } catch (error) { - console.error('Fehler bei der Artikelsuche:', error); - verfuegbarkeitDiv.textContent = "Fehler bei der Prüfung."; - verfuegbarkeitDiv.style.color = "orange"; - sendButton.disabled = true; - } - } - - // Funktion: Neues Artikelfeld hinzufügen - function fuegeNeuesArtikelFeldHinzu() { - const formular = document.getElementById('bestellform'); - const artikelnummerFelder = formular.querySelectorAll('.ArtikelNrText'); - const letztesFeld = artikelnummerFelder[artikelnummerFelder.length - 1]; - - if (letztesFeld && letztesFeld.value.trim() !== '') { - const neueArtikelDiv = document.createElement('div'); - neueArtikelDiv.className = 'Artikel'; - neueArtikelDiv.innerHTML = ` - - -
- `; - - const sendButton = document.getElementById('sendOrder'); - formular.insertBefore(neueArtikelDiv, sendButton); - } - } - - // Funktion: Artikel löschen - function loescheArtikel(button) { - const artikelDiv = button.parentElement; - artikelDiv.remove(); - } function ladeWarenkorb() { // RICHTIG lesen: aus localStorage (nicht sessionStorage!) @@ -294,18 +161,19 @@ const artikelDiv = document.createElement('div'); artikelDiv.className = 'Artikel'; artikelDiv.innerHTML = ` - - -
+ + +
`; + formular.insertBefore(artikelDiv, sendButton); }); } - window.warenkorbLeeren = function (){ + window.warenkorbLeeren = function () { localStorage.removeItem('warenkorb'); // Oder: localStorage.setItem('warenkorb', '[]'); ladeWarenkorb(); // Aktualisiert die Ansicht - if (window.zeigeWarenkorbAnzahl) zeigeWarenkorbAnzahl(); // Optional: Warenkorb-Zähler im Header aktualisieren + if (window.zeigeWarenkorbAnzahl) zeigeWarenkorbAnzahl(); // Warenkorb-Zähler im Header aktualisieren } diff --git a/public/bestellung/bestellung.html b/public/bestellung/bestellung.html index 379e6ec..12a5b23 100644 --- a/public/bestellung/bestellung.html +++ b/public/bestellung/bestellung.html @@ -4,7 +4,6 @@ Ihre Bestellung - diff --git a/static/Styles/bestellformular/bestellformular.css b/static/Styles/bestellformular/bestellformular.css deleted file mode 100644 index e69de29..0000000 diff --git a/static/Styles/registrieren/registrieren.css b/static/Styles/registrieren/registrieren.css index de4ccbb..e38bcfb 100644 --- a/static/Styles/registrieren/registrieren.css +++ b/static/Styles/registrieren/registrieren.css @@ -53,7 +53,7 @@ .register-link { text-align: center; font-size: 14px; - margin-top: 15px; + margin-top: 5px; } .register-link a { diff --git a/static/Styles/styles-main.css b/static/Styles/styles-main.css index 05abb1f..5ac7c35 100644 --- a/static/Styles/styles-main.css +++ b/static/Styles/styles-main.css @@ -421,12 +421,43 @@ main > h2 { /* ========== Bestellformular Styling ========== */ .form-container { - background: #ffffff; - border-radius: 12px; - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); - padding: 30px; - max-width: 600px; + background: #fff; + max-width: 700px; margin: 40px auto; + padding: 30px; + border-radius: 20px; + box-shadow: 0 8px 16px rgba(0,0,0,0.1); +} + +#bestellform { + display: flex; + flex-direction: column; + gap: 15px; +} + +#bestellform h2 { + text-align: center; + margin-bottom: 10px; + font-size: 26px; + color: #ff6600; +} + +#bestellform label { + font-weight: 500; + font-weight: bold; +} + +#bestellform input[type="text"] { + padding: 12px; + border-radius: 10px; + border: 1px solid #ccc; + font-size: 16px; + transition: border-color 0.3s; +} + +#bestellform input[type="text"]:focus { + border-color: #ff6600; + outline: none; } h2 { @@ -461,19 +492,27 @@ input[type="text"]:focus, input[type="number"]:focus { .Artikel { display: flex; - flex-wrap: wrap; - gap: 10px; + gap: 5px; align-items: center; - margin-bottom: 20px; + flex-wrap: wrap; +} + +.Artikel input { + flex: 1 1 120px; + margin-bottom: 5px; +} + +.Artikel .verfuegbarkeit { + font-size: 14px; + flex-basis: 100%; + margin-top: 5px; } .ArtikelNrText, .StueckzahlText { width: calc(50% - 5px); - padding: 10px; font-size: 16px; border-radius: 8px; border: 1px solid #ddd; - margin-right: 10px; background-color: #f5f5f5; } @@ -497,6 +536,24 @@ input[type="text"]:focus, input[type="number"]:focus { background-color: #c0392b; } +.button-submit { + margin-top: 20px; + padding: 14px; + background: #ff6600; + color: white; + font-weight: bold; + border-radius: 25px; + text-align: center; + display: inline-block; + cursor: pointer; + transition: background 0.3s ease; + text-decoration: none; +} + +.button-submit:hover { + background: #e95b00; +} + .verfuegbarkeit { font-size: 14px; color: #888; @@ -536,6 +593,35 @@ input[type="text"]:focus, input[type="number"]:focus { } } +.link-text-formular { + text-align: center; + font-size: 17px; + color: #555; +} + +.link-text-formular a { + color: #ff6600; + text-decoration: none; + font-weight: 500; +} + +.link-text-formular a:hover { + text-decoration: underline; +} + +input[readonly] { + background-color: #f0f0f0; + color: #666; + border: 1px dashed #999; + cursor: not-allowed; +} + +input:not([readonly]) { + background-color: #ffffff; + color: #000; + border: 1px solid #333; +} + /* ========== Formulare und Buttons allgemein ========== */ .input-box { position: relative;