From 11f007066d173daf3c0af5b97b3ff63470d30fb8 Mon Sep 17 00:00:00 2001 From: gitfreeking Date: Tue, 29 Apr 2025 23:31:44 +0200 Subject: [PATCH 1/2] Link im Header --- public/Warenkorb/warenkorb.html | 206 ++++++-------- public/bestellung/bestellung.html | 4 +- public/header_footer/header.html | 2 +- static/Styles/Warenkorb/warenkorb.css | 164 ----------- .../bestellformular/bestellformular.css | 63 ----- static/Styles/bestellung/bestellung.css | 49 ---- static/Styles/styles-main.css | 256 +++++++++++++++++- 7 files changed, 340 insertions(+), 404 deletions(-) delete mode 100644 static/Styles/Warenkorb/warenkorb.css delete mode 100644 static/Styles/bestellung/bestellung.css diff --git a/public/Warenkorb/warenkorb.html b/public/Warenkorb/warenkorb.html index 011faa7..0162c29 100644 --- a/public/Warenkorb/warenkorb.html +++ b/public/Warenkorb/warenkorb.html @@ -1,91 +1,57 @@ - - Warenkorb - - - + + Warenkorb + + + + -
+ +
-
-

Dein Warenkorb

-
-
- -
+
+

Dein Warenkorb

+
+
+ +
- + + + tbody.appendChild(row); + }); + + container.appendChild(table); + + gesamtContainer.innerHTML = `

Gesamtsumme: ${gesamtpreis.toFixed(2)} €

`; + + if (window.zeigeWarenkorbAnzahl) { + window.zeigeWarenkorbAnzahl(); + } + } + + function entferneAusWarenkorb(index) { + let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || []; + + warenkorb.splice(index, 1); + localStorage.setItem('warenkorb', JSON.stringify(warenkorb)); + + ladeWarenkorb(); + } + + function aendereMenge(index, aenderung) { + let warenkorb = JSON.parse(localStorage.getItem('warenkorb')) || []; + + warenkorb[index].quantity += aenderung; + + if (warenkorb[index].quantity <= 0) { + warenkorb.splice(index, 1); // Produkt löschen, wenn Menge 0 oder kleiner + } + + localStorage.setItem('warenkorb', JSON.stringify(warenkorb)); + ladeWarenkorb(); + } + diff --git a/public/bestellung/bestellung.html b/public/bestellung/bestellung.html index 0827942..379e6ec 100644 --- a/public/bestellung/bestellung.html +++ b/public/bestellung/bestellung.html @@ -6,11 +6,12 @@ Ihre Bestellung + -
+

Ihre Bestellung:

@@ -79,6 +80,7 @@ bestellCard.innerHTML = `

Bestellnummer: ${orderId}

${produkteHTML} +

Gesamtsumme: ${bestellung.total.toFixed(2)} €

`; diff --git a/public/header_footer/header.html b/public/header_footer/header.html index dd4c9c6..b83a6a1 100644 --- a/public/header_footer/header.html +++ b/public/header_footer/header.html @@ -54,7 +54,7 @@
  • - Bestellformular + Bestellungen
    • diff --git a/static/Styles/Warenkorb/warenkorb.css b/static/Styles/Warenkorb/warenkorb.css deleted file mode 100644 index 43ae701..0000000 --- a/static/Styles/Warenkorb/warenkorb.css +++ /dev/null @@ -1,164 +0,0 @@ -body { - font-family: Arial, sans-serif; - background-color: #f3f3f3; - margin: 0; - padding: 130px; -} - -.warenkorb { - max-width: 700px; - margin: 0 auto; - background: white; - padding: 120px; - border-radius: 12px; - box-shadow: 0 4px 12px rgba(0,0,0,0.1); -} - -.warenkorb h2 { - font-size: 30px; - text-align: center; - margin-bottom: 60px; -} - -.item { - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 1px solid #ddd; - padding: 10px 0; - margin-bottom: 35px; -} - -.item .info { - display: flex; - flex-direction: column; -} - -.item .name { - font-weight: bold; -} - -.item .price { - color: #555; -} - -.remove { - background-color: #ff6600; - border: none; - color: white; - padding: 6px 12px; - border-radius: 6px; - cursor: pointer; -} - -.remove:hover { - background-color: #ff6600; -} - -.summary { - text-align: right; - font-size: 1.1em; - margin: 20px 0; -} - -.checkout { - display: block; - width: 100%; - padding: 12px; - background-color: #ff6600; - border: none; - color: white; - font-size: 16px; - border-radius: 8px; - cursor: pointer; - margin-top: 90px; -} - -.checkout:hover { - background-color: #ff6600; -} - -.checkout { - display: inline-block; - background-color: #ff6600; - color: white; - padding: 10px 20px; - margin-top: 20px; - text-align: center; - text-decoration: none; - font-size: 16px; - border-radius: 5px; - transition: background-color 0.3s; -} - -body { - font-family: Arial, sans-serif; - background-color: #f2f2f2; - padding: 20px; -} - -.form-container { - max-width: 600px; - margin: auto; - background-color: #ffffff; - padding: 25px; - border-radius: 8px; - box-shadow: 0 0 10px rgba(0,0,0,0.1); -} - -form h2 { - text-align: center; - margin-bottom: 20px; -} - -label { - display: block; - margin-top: 15px; - font-weight: bold; -} - -input[type="text"], -input[type="tel"], -textarea { - width: 100%; - padding: 10px; - margin-top: 5px; - border: 1px solid #ccc; - border-radius: 4px; - box-sizing: border-box; -} - -input[type="submit"] { - margin-top: 20px; - background-color: #ff6600; - color: white; - border: none; - padding: 12px; - border-radius: 5px; - font-size: 16px; - cursor: pointer; - width: 100%; -} - -input[type="submit"]:hover { - background-color: #ff6600; -} - -.zurKasse { - display: block; - margin: 20px auto; - background-color: #ff6600; - color: white; - border: none; - padding: 12px 24px; - font-size: 16px; - border-radius: 8px; - cursor: pointer; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); -} - -.zurKasse:hover { - background-color: #ff6600; -} - - diff --git a/static/Styles/bestellformular/bestellformular.css b/static/Styles/bestellformular/bestellformular.css index c320ca7..e69de29 100644 --- a/static/Styles/bestellformular/bestellformular.css +++ b/static/Styles/bestellformular/bestellformular.css @@ -1,63 +0,0 @@ -body { - font-family: Arial, sans-serif; - background-color: #f2f2f2; - margin: 0; - display: flex; - flex-direction: column; - min-height: 100vh; -} - -.wrapper { - flex: 1; /* Der Hauptinhalt nimmt den verfügbaren Platz ein */ -} - -.form-container { - max-width: 600px; - margin: 20px auto; - background-color: #f5f5f5; - padding: 25px; - border-radius: 8px; - box-shadow: 0 0 10px rgba(0,0,0,0.1); -} - -form h2 { - text-align: center; - margin-bottom: 20px; -} - -label { - display: block; - margin-top: 15px; - font-weight: bold; -} - -input[type="text"], -input[type="tel"], -textarea { - width: 100%; - padding: 10px; - margin-top: 5px; - border: 1px solid #ccc; - border-radius: 4px; - box-sizing: border-box; -} - -/* NEU: Styling für den Absende-Link */ -.button-submit { - display: inline-block; - margin-top: 20px; - background-color: #ff6600; - color: white; - text-decoration: none; - padding: 12px; - border-radius: 5px; - font-size: 16px; - cursor: pointer; - width: 100%; - text-align: center; - box-sizing: border-box; /* Damit Breite + Padding sauber passen */ -} - -.button-submit:hover { - background-color: #ff6600; -} diff --git a/static/Styles/bestellung/bestellung.css b/static/Styles/bestellung/bestellung.css deleted file mode 100644 index 849719f..0000000 --- a/static/Styles/bestellung/bestellung.css +++ /dev/null @@ -1,49 +0,0 @@ -/* Allgemeine Layout-Stile */ -body { - font-family: Arial, sans-serif; - background-color: #f2f2f2; - padding: 20px; - margin: 0; - display: flex; - flex-direction: column; - min-height: 100vh; -} - -/* Container für die Bestellinformationen */ -#bestellung { - background-color: #fff; - padding: 20px; - border-radius: 8px; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); - margin-top: 20px; -} - -/* Titel */ -h2 { - text-align: center; - margin-bottom: 30px; - margin-top: 20px; -} - -/* Karte für Bestellinformationen */ -.bestell-info-card { - background-color: #fafafa; - padding: 15px; - border-radius: 8px; - margin-bottom: 15px; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); -} - -/* Bestellinformationen formatieren */ -.bestell-info-card p { - font-size: 16px; - margin: 10px 0; -} - -/* Stile für die Label und Platzhalter */ -.bestell-info-card span { - font-weight: bold; - color: #333; -} - - diff --git a/static/Styles/styles-main.css b/static/Styles/styles-main.css index a739343..89d4b5e 100644 --- a/static/Styles/styles-main.css +++ b/static/Styles/styles-main.css @@ -271,7 +271,6 @@ header h1 { color: #fff; padding: 30px 20px; text-align: center; - margin-top: 40px; margin-top: auto; } @@ -288,6 +287,255 @@ main { text-decoration: underline; } +/* ========== Bestellinformationen ========== */ +#bestellung { + display: flex; + flex-direction: column; + gap: 20px; + padding: 30px 20px; + max-width: 800px; + margin: 0 auto; +} + +.bestell-info-card { + background: #ffffff; + border-radius: 15px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + padding: 25px; + transition: transform 0.3s ease; +} + +.bestell-info-card:hover { + transform: translateY(-5px); +} + +.bestell-info-card h3 { + font-size: 20px; + color: #333; + margin-bottom: 15px; +} + +.bestell-info-card p { + font-size: 16px; + color: #555; + margin-bottom: 8px; +} + +.bestell-info-card strong { + color: #333; +} + +.warenkorb { + max-width: 1000px; + margin: 40px auto; + padding: 20px; + background-color: #fff; + border-radius: 16px; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); +} + +main > h2 { + text-align: center; + font-size: 2rem; + margin-bottom: 30px; + color: #333; +} + +.warenkorb-tabelle { + width: 100%; + border-collapse: collapse; + font-size: 1rem; +} + +.warenkorb-tabelle th, .warenkorb-tabelle td { + padding: 12px 15px; + text-align: center; + border-bottom: 1px solid #ddd; +} + +.warenkorb-tabelle th { + background-color: #f4f4f4; + color: #444; +} + +.warenkorb-tabelle tr:nth-child(even) { + background-color: #fafafa; +} + +.menge-button, .loeschen-button { + background-color: #4a90e2; + border: none; + color: white; + padding: 6px 10px; + border-radius: 8px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.2s ease; +} + +.menge-button:hover, .loeschen-button:hover { + background-color: #357ab8; +} + +.loeschen-button { + background-color: #e74c3c; +} + +.loeschen-button:hover { + background-color: #c0392b; +} + +.produkt-anzahl { + margin: 0 8px; + display: inline-block; + min-width: 24px; + text-align: center; + font-weight: bold; +} + +#gesamtpreis-container { + margin-top: 20px; + text-align: right; + font-size: 1.2rem; + font-weight: bold; + color: #222; +} + +#zurKasseGehen { + margin-top: 30px; + background-color: #27ae60; + color: white; + padding: 12px 25px; + border: none; + border-radius: 12px; + font-size: 18px; + cursor: pointer; + transition: background-color 0.3s ease; + display: block; + margin-left: auto; +} + +#zurKasseGehen:hover { + background-color: #219150; +} + +/* ========== 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; + margin: 40px auto; +} + +h2 { + font-size: 24px; + margin-bottom: 20px; + text-align: center; + color: #333; +} + +label { + font-size: 16px; + margin-bottom: 8px; + color: #555; + display: block; +} + +input[type="text"], input[type="number"] { + width: 100%; + padding: 12px; + font-size: 16px; + margin-bottom: 15px; + border: 1px solid #ddd; + border-radius: 8px; + background-color: #f5f5f5; + transition: border 0.3s ease, box-shadow 0.3s ease; +} + +input[type="text"]:focus, input[type="number"]:focus { + border-color: #ff6600; + box-shadow: 0 0 8px rgba(255, 102, 0, 0.3); +} + +.Artikel { + display: flex; + flex-wrap: wrap; + gap: 10px; + align-items: center; + margin-bottom: 20px; +} + +.ArtikelNrText, .StueckzahlText { + width: calc(50% - 5px); + padding: 10px; + font-size: 16px; + border-radius: 8px; + border: 1px solid #ddd; + margin-right: 10px; + background-color: #f5f5f5; +} + +.ArtikelNrText:focus, .StueckzahlText:focus { + border-color: #ff6600; + box-shadow: 0 0 8px rgba(255, 102, 0, 0.3); +} + +.loeschen-button { + background-color: #e74c3c; + color: white; + border: none; + padding: 8px 16px; + font-size: 16px; + border-radius: 8px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.loeschen-button:hover { + background-color: #c0392b; +} + +.verfuegbarkeit { + font-size: 14px; + color: #888; + flex-grow: 1; + text-align: right; + padding-left: 10px; +} + +#sendOrder { + display: block; + width: 100%; + padding: 15px; + background-color: #ff6600; + color: white; + text-align: center; + font-size: 18px; + border-radius: 8px; + cursor: pointer; + transition: background-color 0.3s ease; + margin-top: 20px; + border: none; +} + +#sendOrder:hover { + background-color: #e95b00; +} + +#KundenNr, #Vorname, #Nachname { + background-color: #f5f5f5; + border: none; + cursor: not-allowed; +} + +@media (max-width: 768px) { + .ArtikelNrText, .StueckzahlText { + width: 100%; + } +} + /* ========== Formulare und Buttons allgemein ========== */ .input-box { position: relative; @@ -422,8 +670,4 @@ h1 { opacity: 1; transform: translateY(0); } -} - - - - +} \ No newline at end of file From 693d87954c2cc8afebba31579f845bd20b72029b Mon Sep 17 00:00:00 2001 From: gitfreeking Date: Wed, 30 Apr 2025 11:04:59 +0200 Subject: [PATCH 2/2] Css angepasst. --- public/Warenkorb/warenkorb.html | 22 ++++++++++++---------- static/Styles/styles-main.css | 4 ++-- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/public/Warenkorb/warenkorb.html b/public/Warenkorb/warenkorb.html index 0162c29..2e5f9e5 100644 --- a/public/Warenkorb/warenkorb.html +++ b/public/Warenkorb/warenkorb.html @@ -9,20 +9,22 @@ - - +
    + + -
    -

    Dein Warenkorb

    -
    -
    - +
    +

    Dein Warenkorb

    +
    +
    + +
    -
    - - + + +