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
+
+
+
+
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 @@
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