From 1802c0fdd349cffafa59e93fc7be7dc5bf07998f Mon Sep 17 00:00:00 2001 From: Kai Sellmann <2210892@stud.hs-mannheim.de> Date: Fri, 5 May 2023 13:13:50 +0200 Subject: [PATCH] aktuelle komplettVersion --- public/bestellformular.html | 21 +- public/bestellung_erfolgreich.html | 17 +- public/bestellung_fehlgeschlagen.html | 16 +- public/css/desktop.css | 1031 ++++++++--------- public/css/mobile.css | 76 +- public/datenschutz.html | 16 +- public/impressum.html | 16 +- public/index.html | 25 +- public/javascript/formchecker.js | 30 +- public/javascript/warenkorb.js | 12 +- public/kontakt.html | 16 +- public/pictures/.DS_Store | Bin 6148 -> 0 bytes public/pictures/{aepfel.png => äpfel.png} | Bin ...eis.png.avif => äpfel_ohne_preis.png.avif} | Bin public/produkte.html | 30 +- public/ueber_uns.html | 16 +- public/warenkorb.html | 16 +- 17 files changed, 719 insertions(+), 619 deletions(-) delete mode 100644 public/pictures/.DS_Store rename public/pictures/{aepfel.png => äpfel.png} (100%) rename public/pictures/{aepfel_ohne_preis.png.avif => äpfel_ohne_preis.png.avif} (100%) diff --git a/public/bestellformular.html b/public/bestellformular.html index 24b68f4..4bb5a61 100644 --- a/public/bestellformular.html +++ b/public/bestellformular.html @@ -17,21 +17,31 @@
@@ -57,7 +67,7 @@

Bestellung abschließen

-
test
+
@@ -108,6 +118,7 @@
+

Die Felder mit einem * (Sternchen) sind Pflichtfelder.

Die Gesamtkosten (inkl. MwSt.)
belaufen sich auf: 5,30€ @@ -126,7 +137,7 @@

-

Kostenpflichtig bestellen

+

Kostenpflichtig bestellen

diff --git a/public/bestellung_erfolgreich.html b/public/bestellung_erfolgreich.html index 7026680..01d3146 100644 --- a/public/bestellung_erfolgreich.html +++ b/public/bestellung_erfolgreich.html @@ -15,21 +15,31 @@
@@ -52,7 +62,6 @@
-







Bestellung erfolgreich abgeschlossen

diff --git a/public/bestellung_fehlgeschlagen.html b/public/bestellung_fehlgeschlagen.html index 9608f42..b0427b7 100644 --- a/public/bestellung_fehlgeschlagen.html +++ b/public/bestellung_fehlgeschlagen.html @@ -15,21 +15,31 @@
diff --git a/public/css/desktop.css b/public/css/desktop.css index 42cc7c6..eeccd96 100644 --- a/public/css/desktop.css +++ b/public/css/desktop.css @@ -1,517 +1,514 @@ -/* DESKTOP Version T4Web 0.1 */ - -/* NONE FROM MOBILE */ - -.header_mobile { - display: none; -} - -.header_mobilelogo { - display: none; -} - -.navbar-mobile { - display: none; -} - -/* ALL-FORMAT */ - -* { - box-sizing: border-box; - font-family: Helvetica, Arial, sans-serif; -} - -#hinweis { - color: red; -} - -/* BACKGROUND-IMAGE-FORMAT-DESKTOP */ - -html body.index .content::before, -html body.datenschutz .content::before, -html body.ueberuns .content::before, -html body.kontakt .content::before, -html body.impressum .content::before { - content: ""; - background-image: url('../pictures/gemuese_transparent.png'); - background-repeat: no-repeat; - background-position: center top; - background-size: 470px; - position: absolute; - overflow: auto; - top: 20px; - right: 0px; - bottom: 0px; - left: 0px; - opacity: 0.2; - pointer-events: none; -} - -/* NAV-DESKTOP-FORMAT */ - -.navbar-desktop { - background-color: #476B1C; - display: grid; - grid-template-columns: repeat(var(--items), 1fr); - width: 100%; -} - -.navbar-desktop a { - text-align: center; - text-decoration: none; - color: white; - padding: 0.5em 0 0.5em 0; -} - -.navbar-desktop a:hover { - color: #f4eb49; -} - -/* BODY-FORMAT */ - -body { - min-height: 100vh; - padding: 0; -} - -body::-webkit-scrollbar { - width: 10px -} - -body::-webkit-scrollbar-track { - background-color: white; -} - -body::-webkit-scrollbar-thumb { - background: #476B1C; -} - -/* HEADER-FORMAT */ - -header { - background-color: #9BB558; - -} - -.header_desktop>h1 { - padding-top: 0.1em; - padding-left: 7em; - margin: 0; - font-size: 1.875em; -} - -.header_desktop>p { - padding-left: 17.6em; - margin-top: 0em; - margin-bottom: 0.5em; - font-size: 0.75em; -} - -.header_logo { - float: left; - margin-top: -18px; - margin-bottom: -20px; - margin-left: -20px; - transform: scale(0.8); -} - -/* CONTENT-FORMAT */ - -.content { - position: relative; - color: black; -} - -.content p { - margin-top: 0.1em; - margin-bottom: 0.1em; -} - -.content :not(h1, strong, a) { - margin-left: 3.5em; - color: #606060; -} - -.content h1 { - text-align: center; - font-size: 1.875em; - font-weight: normal; - margin-top: 0; -} - -.content h2 { - font-size: 1em; - text-align: center; -} - -.content a { - margin-left: 0em; -} - -/* PRODUKTE-FORMAT */ - -#aktuelle_auswahl { - margin-left: 2.7em; - margin-bottom: -0.5em; - font-size: 1em; -} - - -.beispiel_produkte img { - border: #606060 1px solid; - height: 160px; - width: 150px; - margin-top: 1em; - margin-left: 2em; - -} - -.button_produkte { - background-color: #476B1C; - color: #fff; - padding: 5px 20px; - border-radius: 15px; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 1em; - cursor: pointer; - margin-left: -1em; -} - -a:hover { - color: #f4eb49; -} - - -/* FOOTER-FORMAT */ - -#balken { - background-color: #9BB558; - height: 20px; - position: relative; - left: 0; - bottom: 0; - width: 100%; -} - -/* BESTELLUNG-FORMAT */ - -input { - font-family: Arial, Helvetica, sans-serif; - color: #606060 -} - - -label { - font-weight: normal; - border: none; -} - -#anrede, -#titel, -#vorname, -#name, -#straße, -#hausnummer, -#plz, -#wohnort, -#email { - border: none; - width: 600px; -} - -.bestellung_tabelle { - font-family: Arial, Helvetica, sans-serif; - font-size: 0.8em; - color: #606060; - text-align: left; - margin-top: 30px; - margin-left: 50px; - border: thin solid #606060; - border-collapse: collapse; -} - -.bestellung_tabelle th { - border: thin solid #606060; -} - -.bestellung_tabelle td { - border: thin solid #606060; - width: 600px; -} - -.bestellung_tabelle tr { - height: 25px; -} - -.stern { - width: 30px; - text-align: center; -} - -.feld_vorn { - width: 115px; -} - -#tabellenbeschreibung { - font-size: 0.8em; - margin-top: 6px; - margin-left: 60px; -} - -#gesamtkosten { - font-size: 1em; - color: black; - margin-top: 40px; - margin-left: 50px; -} - -.checkboxen { - display: inline-block; - font-size: 0.8em; - text-align: justify; -} - -.checkbox_ausrichtung { - margin-left: 50px; -} - -#begrueßung_bestellung_abschließen { - font-size: 2em; - font-family: Arial, Helvetica, sans-serif; - color: black; - text-align: center; - margin-top: 0.5px; -} - -.button_abschließen { - background-color: #476B1C; - color: white; - padding: 3px 10px; - border-radius: 6px; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 0.8em; - margin: 4px 2px; - cursor: pointer; - font-weight: normal; -} - -.button_abschließen_position { - margin-left: 100px; -} - -.produktueberschrift { - text-align: center; - margin: 50px; -} - -.parent { - display: flex; - justify-content: space-around; - flex-wrap: wrap; - align-content: center; -} - -.produkte { - display: flex; - border: #606060 3px solid; - display: inline-block; - margin: 25px; -} - -.produktbottom { - justify-content: space-between; - display: flex; - margin: 10px; -} - -.produktbottom a { - position: relative; -} - -.produkte_warenkorb { - position: relative; - max-width: 88%; - height: 165px; - border: thin solid #606060; - margin-top: 22.5px; - margin-bottom: 22.5px; - display: flex; - align-items: center; -} - -.produkte_warenkorb img { - margin-right: 0px; - height: 60%; - -} - -.content .produkte_details { - color: black; - font-weight: bold; - width: 150px; - display: block; - font-size: 0.8em; - margin-top: -40px; -} - -.button_mit_menue { - display: flex; - align-items: center; - position: absolute; - bottom: 50px; - right: 30px; - -} - -.button_entfernen { - background-color: #ebebeb; - border: thin solid black; - color: black; - width: 115px; - height: 31px; - padding: 6px; - border-radius: 3px; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 0.8em; - margin: 4px 2px; - cursor: pointer; - font-weight: normal; - -} - -#menue { - width: 35px; - height: 25px; - margin-left: 10px; -} - -.content .gesamtbetrag { - font-weight: bold; - color: black; - position: absolute; - font-size: 1em; - bottom: 15px; - right: 15px; -} - -.gesamtbetrag { - position: absolute; - font-size: 1em; - bottom: 15px; - right: 15px; -} - -.button_hinzufuegen { - background-color: #9BB558; - color: white; - padding: 10px; - border-radius: 50%; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 0.8em; - cursor: pointer; - width: 35px; - height: 35px; - position: relative; - box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.3); - margin-top: 0.5em; -} - -.button_hinzufuegen::before { - content: "+"; - position: absolute; - transform: translate(-50%, -40%); - font-size: 3em; - font-weight: normal; -} - -#notification { - display: none; - position: fixed; - top: 0; - left: 0; - right: 0; - background-color: #4CAF50; - color: white; - text-align: center; - padding: 10px; - z-index: 999; -} - -.content .äußererContainer { - position: relative; - bottom: 0; - width: 400px; - padding-left: 50px; - margin-top: 22.5px; - margin-left: auto; - margin-bottom: 22.5px; - display: grid; - grid-template-rows: auto auto; -} - -.content .kostenContainer { - - position: relative; - width: 300px; - height: 60px; - font-weight: bold; - font-size: 0.9em; - display: inline-block; - margin-left: 0px; -} - -.content .lieferkosten_text { - color: black; - display: inline-block; - margin-left: 0px; - margin-right: 110px; - text-align: right; -} - -.content .lieferkosten_preis { - color: black; - display: inline-block; -} - -.content .gesamtkosten_text { - color: black; - display: inline-block; - text-align: left; - margin-left: 0; - margin-right: 63px; -} - -.content .gesamtpreis { - color: black; - display: inline-block; - margin-left: 0; - -} - -.content .button_bestellung_abschließen { - background-color: #476B1C; - color: white; - padding: 3px 10px; - border-radius: 6px; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 0.8em; - margin: 4px 2px; - cursor: pointer; - font-weight: normal; -} - -#fehlerbox { - text-align: center; - display: none; - color: red; -} \ No newline at end of file + + /* DESKTOP Version T4Web 0.1 */ + + /* NONE FROM MOBILE */ + + .header_mobile { + display:none; + } + .header_mobilelogo { + display:none; + } + .navbar-mobile{ + display:none; + } + + #greeting-mobile { + display:none; + } + + /* ALL-FORMAT */ + + * { + box-sizing: border-box; + font-family: Helvetica, Arial, sans-serif; + } + + #hinweis { + color: red; + } + + /* BACKGROUND-IMAGE-FORMAT-DESKTOP */ + + html body.index .content::before, + html body.datenschutz .content::before, + html body.ueberuns .content::before, + html body.kontakt .content::before, + html body.impressum .content::before { + content: ""; + background-image: url('../pictures/gemuese_transparent.png'); + background-repeat: no-repeat; + background-position: center top; + background-size: 470px; + position: absolute; + overflow: auto; + top: 20px; + right: 0px; + bottom: 0px; + left: 0px; + opacity: 0.2; + pointer-events: none; + } + + /* NAV-DESKTOP-FORMAT */ + + .navbar-desktop { + background-color: #476B1C; + display: grid; + grid-template-columns: repeat(var(--items), 1fr); + width: 100%; + } + + .navbar-desktop a { + text-align: center; + text-decoration: none; + color: white; + padding: 0.5em 0 0.5em 0; + } + + .navbar-desktop a:hover { + color: #f4eb49; + } + + /* BODY-FORMAT */ + + body { + min-height: 100vh; + padding: 0; + } + + body::-webkit-scrollbar { + width: 10px + } + + body::-webkit-scrollbar-track { + background-color: white; + } + + body::-webkit-scrollbar-thumb { + background: #476B1C; + } + + /* HEADER-FORMAT */ + + header { + background-color: #9BB558; + + } + + .header_desktop > h1 { + padding-top: 0.1em; + padding-left: 7em; + margin: 0; + font-size: 1.875em; + } + + .header_desktop > p { + padding-left: 17.6em; + margin-top: 0em; + margin-bottom: 0.5em; + font-size: 0.75em; + } + + .header_logo { + float: left; + margin-top: -18px; + margin-bottom: -20px; + margin-left: -20px; + transform: scale(0.8); + } + + /* CONTENT-FORMAT */ + + .content { + position: relative; + color: black; + } + + .content p { + margin-top: 0.1em; + margin-bottom: 0.1em; + } + + .content :not(h1, strong, a) { + margin-left: 3.5em; + color: #606060; + } + + .content h1 { + text-align: center; + font-size: 1.875em; + font-weight: normal; + margin-top: 0; + } + + .content h2 { + font-size: 1em; + text-align: center; + } + + .content a { + margin-left: 0em; + } + + /* PRODUKTE-FORMAT */ + + #aktuelle_auswahl { + margin-left: 2.7em; + margin-bottom: -0.5em; + font-size: 1em; + } + + + .beispiel_produkte img { + border: #606060 1px solid; + height: 160px; + width: 150px; + margin-top: 1em; + margin-left: 2em; + + } + + .button_produkte { + background-color: #476B1C; + color: #fff; + padding: 5px 20px; + border-radius: 15px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 1em; + cursor: pointer; + margin-left: -1em; + } + + a:hover { + color:#f4eb49; + } + + + /* FOOTER-FORMAT */ + + #balken { + background-color: #9BB558; + height: 20px; + position: relative; + left: 0; + bottom: 0; + width: 100%; + } + + /* BESTELLUNG-FORMAT */ + + input { + font-family: Arial, Helvetica, sans-serif; + color: #606060 + } + + + label { + font-weight: normal; + border: none; + } + + #anrede, + #titel, + #vorname, + #name, + #straße, + #hausnummer, + #plz, + #wohnort, + #email { + border: none; + width: 600px; + } + + .bestellung_tabelle { + font-family: Arial, Helvetica, sans-serif; + font-size: 0.8em; + color: #606060; + text-align: left; + margin-top: 30px; + margin-left: 50px; + border: thin solid #606060; + border-collapse: collapse; + } + + .bestellung_tabelle th { + border: thin solid #606060; + } + + .bestellung_tabelle td { + border: thin solid #606060; + width: 600px; + } + + .bestellung_tabelle tr { + height: 25px; + } + + .stern { + width: 30px; + text-align: center; + } + + .feld_vorn { + width: 115px; + } + + #tabellenbeschreibung { + font-size: 0.8em; + margin-top: 6px; + margin-left: 60px; + } + + #gesamtkosten { + font-size: 1em; + color: black; + margin-top: 40px; + margin-left: 50px; + } + + .checkboxen { + display: inline-block; + font-size: 0.8em; + text-align: justify; + } + + .checkbox_ausrichtung { + margin-left: 50px; + } + + #begrueßung_bestellung_abschließen { + font-size: 2em; + font-family: Arial, Helvetica, sans-serif; + color: black; + text-align: center; + margin-top: 0.5px; + } + + .button_abschließen { + background-color: #476B1C; + color: white; + padding: 3px 10px; + border-radius: 6px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 0.8em; + margin: 4px 2px; + cursor: pointer; + font-weight: normal; + } + + .button_abschließen_position { + margin-left: 100px; + } + + .produktueberschrift { + text-align: center; + margin: 50px; + } + + .parent { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + align-content: center; + } + + .produkte { + display: flex; + border: #606060 3px solid; + display: inline-block; + margin: 25px; + } + + .produktbottom { + justify-content: space-between; + display: flex; + margin: 10px; + } + + .produktbottom a { + position: relative; + } + + .produkte_warenkorb { + position: relative; + max-width: 88%; + height: 165px; + border: thin solid #606060; + margin-top: 22.5px; + margin-bottom: 22.5px; + display: flex; + align-items: center; + } + + .produkte_warenkorb img { + margin-right: 0px; + height: 60%; + + } + + .content .produkte_details { + color: black; + font-weight: bold; + width: 150px; + display: block; + font-size: 0.8em; + margin-top: -40px; + } + + .button_mit_menue { + display: flex; + align-items: center; + position: absolute; + bottom: 50px; + right: 30px; + + } + + .button_entfernen { + background-color: #ebebeb; + border: thin solid black; + color: black; + width: 115px; + height: 31px; + padding: 6px; + border-radius: 3px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 0.8em; + margin: 4px 2px; + cursor: pointer; + font-weight: normal; + + } + + #menue { + width: 35px; + height: 25px; + margin-left: 10px; + } + + .content .gesamtbetrag { + font-weight: bold; + color: black; + position: absolute; + font-size: 1em; + bottom: 15px; + right: 15px; + } + + .gesamtbetrag { + position: absolute; + font-size: 1em; + bottom: 15px; + right: 15px; + } + + .button_hinzufuegen { + background-color: #9BB558; + color: white; + padding: 10px; + border-radius: 50%; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 0.8em; + cursor: pointer; + width: 35px; + height: 35px; + position: relative; + box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.3); + margin-top: 0.5em; + } + + .button_hinzufuegen::before { + content: "+"; + position: absolute; + transform: translate(-50%, -40%); + font-size: 3em; + font-weight: normal; + } + + #notification { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: #4CAF50; + color: white; + text-align: center; + padding: 10px; + z-index: 999; + } + + .content .äußererContainer { + position: relative; + bottom: 0; + width: 400px; + padding-left: 50px; + margin-top: 22.5px; + margin-left: auto; + margin-bottom: 22.5px; + display: grid; + grid-template-rows: auto auto; + } + + .content .kostenContainer { + + position: relative; + width: 300px; + height: 60px; + font-weight: bold; + font-size: 0.9em; + display: inline-block; + margin-left: 0px; + } + + .content .lieferkosten_text { + color: black; + display: inline-block; + margin-left: 0px; + margin-right: 110px; + text-align: right; + } + + .content .lieferkosten_preis { + color: black; + display: inline-block; + } + + .content .gesamtkosten_text{ + color: black; + display: inline-block; + text-align: left; + margin-left: 0; + margin-right: 63px; + } + + .content .gesamtpreis{ + color: black; + display: inline-block; + margin-left: 0; + + } + + .content .button_bestellung_abschließen { + background-color: #476B1C; + color: white; + padding: 3px 10px; + border-radius: 6px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 0.8em; + margin: 4px 2px; + cursor: pointer; + font-weight: normal; + } diff --git a/public/css/mobile.css b/public/css/mobile.css index d1ba3e1..4f08706 100644 --- a/public/css/mobile.css +++ b/public/css/mobile.css @@ -19,6 +19,22 @@ display:none; } + #aktuelle_auswahl { + display:none; + } + + .beispiel_produkte { + display:none; + } + + .button_produkte { + display:none; + } + + #greeting-desktop { + display:none; + } + /* ALL-FORMAT */ * { @@ -63,14 +79,9 @@ /* NAV-MOBILE-FORMAT */ .navbar-mobile { - display: grid; - grid-template-columns: 380px auto; - background-image: url('../pictures/mobile_header.png'); - background-repeat: no-repeat; - background-position: center; - background-size: cover; - position: sticky; - height: 60px; + display:grid; + grid-template-columns: 60px auto auto; + grid-template-rows: 60px; } .navbar-mobile .nav-container a { @@ -86,16 +97,15 @@ color: #f4eb49; } - /*.nav-container { - - }*/ + .nav-container { + background-color: #476B1C; + } .nav-container .checkbox { position: absolute; display: flex; height: 60px; width: 60px; - background: #476B1C; top: 0px; left: 0px; z-index: 3; @@ -104,10 +114,10 @@ } .nav-container .hamburger-lines { - height: 26px; - width: 32px; + height: 30px; + width: 36px; position: absolute; - top: 17px; + top: 20px; left: 20px; z-index: 0; display: flex; @@ -117,7 +127,7 @@ .nav-container .hamburger-lines .line { display: block; - height: 6px; + height: 7px; width: 100%; border-radius: 0px; background: #fff; @@ -142,7 +152,7 @@ padding-top: 15px; background-color: #476B1C; height: 35vh; - width: 80%; + width: 380%; transform: translate(-150%); display: flex; flex-direction: column; @@ -189,10 +199,27 @@ /* HEADER-FORMAT */ - header { + #header-mobile-farbe { background-color: #9BB558; } + .header-mobile-text h1 { + margin-left: 2%; + font-size:1.0em; + margin-top:0.5em; + + } + + .header-mobile-text p { + margin-left: 2%; + font-size:0.8em; + margin-top:-0.5em; + } + + .header-mobile-logo { + background-position: center; + } + /* CONTENT-FORMAT */ .content { @@ -246,19 +273,6 @@ margin-left: 2em; } - - .button_produkte { - background-color: #476B1C; - color: white; - padding: 5px 20px; - border-radius: 15px; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 1em; - cursor: pointer; - margin-left: -1em; - } a:hover { color:#f4eb49; diff --git a/public/datenschutz.html b/public/datenschutz.html index ab9d8ec..a3b9053 100644 --- a/public/datenschutz.html +++ b/public/datenschutz.html @@ -15,21 +15,31 @@
diff --git a/public/impressum.html b/public/impressum.html index 5404f7e..f514f78 100644 --- a/public/impressum.html +++ b/public/impressum.html @@ -15,21 +15,31 @@
diff --git a/public/index.html b/public/index.html index 0d836b9..3ed9983 100644 --- a/public/index.html +++ b/public/index.html @@ -14,21 +14,31 @@
@@ -62,15 +72,15 @@ - + - + - +
muss sofort verarbeitet werden
kann ein paar Tage liegen
lange Haltbarkeit
@@ -90,7 +100,8 @@

zu den Produkten

-

Viel Spaß bei Deinem Einkauf. Dein Second Harvest Team.

+

Viel Spaß bei Deinem Einkauf. Dein Second Harvest Team.

+

Viel Spaß bei Deinem Einkauf.