Die Felder mit einem * (Sternchen) sind Pflichtfelder.
Die Gesamtkosten (inkl. MwSt.)belaufen sich auf: 5,30€ @@ -127,7 +126,7 @@
diff --git a/public/css/desktop.css b/public/css/desktop.css index 3a60e08..42cc7c6 100644 --- a/public/css/desktop.css +++ b/public/css/desktop.css @@ -1,510 +1,517 @@ - - /* DESKTOP Version T4Web 0.1 */ +/* DESKTOP Version T4Web 0.1 */ - /* NONE FROM MOBILE */ +/* NONE FROM MOBILE */ - .header_mobile { - display:none; - } - .header_mobilelogo { - display:none; - } - .navbar-mobile{ - display:none; - } +.header_mobile { + display: none; +} - /* ALL-FORMAT */ +.header_mobilelogo { + display: none; +} - * { - box-sizing: border-box; - font-family: Helvetica, Arial, sans-serif; - } - - #hinweis { - color: red; - } +.navbar-mobile { + display: none; +} - /* BACKGROUND-IMAGE-FORMAT-DESKTOP */ +/* ALL-FORMAT */ - 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; - } +* { + box-sizing: border-box; + font-family: Helvetica, Arial, sans-serif; +} - /* NAV-DESKTOP-FORMAT */ +#hinweis { + color: red; +} - .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; - } +/* BACKGROUND-IMAGE-FORMAT-DESKTOP */ - .navbar-desktop a:hover { - color: #f4eb49; - } +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; +} - /* BODY-FORMAT */ +/* NAV-DESKTOP-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 */ +.navbar-desktop { + background-color: #476B1C; + display: grid; + grid-template-columns: repeat(var(--items), 1fr); + width: 100%; +} - 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 */ +.navbar-desktop a { + text-align: center; + text-decoration: none; + color: white; + padding: 0.5em 0 0.5em 0; +} - #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; - } +.navbar-desktop a:hover { + color: #f4eb49; +} - a:hover { - color:#f4eb49; - } +/* BODY-FORMAT */ - - /* FOOTER-FORMAT */ +body { + min-height: 100vh; + padding: 0; +} - #balken { - background-color: #9BB558; - height: 20px; - position: relative; - left: 0; - bottom: 0; - width: 100%; - } - - /* BESTELLUNG-FORMAT */ +body::-webkit-scrollbar { + width: 10px +} - 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; - } +body::-webkit-scrollbar-track { + background-color: white; +} - .content .gesamtkosten_text{ - color: black; - display: inline-block; - text-align: left; - margin-left: 0; - margin-right: 63px; - } +body::-webkit-scrollbar-thumb { + background: #476B1C; +} - .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; - } +/* 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 diff --git a/public/javascript/formchecker.js b/public/javascript/formchecker.js index 6cfaecf..93abcff 100644 --- a/public/javascript/formchecker.js +++ b/public/javascript/formchecker.js @@ -3,7 +3,7 @@ let x = Number(localStorage.getItem("gesamtpreis")).toFixed(2); let y = document.getElementById("gesamtkosten"); y.innerHTML = "Die Gesamtkosten (inkl. MwSt.) belaufen sich auf: " + x + "€"; -function checkform() { +function checkform(event) { let vorname = document.getElementById('vorname').value; let name = document.getElementById('name').value; let straße = document.getElementById('straße').value; @@ -12,11 +12,23 @@ function checkform() { let wohnort = document.getElementById('wohnort').value; let email = document.getElementById('email').value; - if (/[a-zA-Z]{2,}/.test(vorname) === false) alert('vorname falsch'); - if (/[a-zA-Z]{2,}/.test(name) === false) alert('name falsch'); - if (/[a-zA-Z]{2,}/.test(straße) === false) alert('straße falsch'); - if (/[0-9]{1,}/.test(hausnummer) === false) alert('hausnummer falsch'); - if (/[0-9]{4,5}/.test(plz) === false) alert('plz falsch'); - if (/[a-zA-Z]{2,}/.test(wohnort) === false) alert('wohnort falsch'); - if (/^([a-zA-Z0-9]+([-_\.]?[a-zA-Z0-9])+@[a-zA-Z0-9]+([-_\.]?[a-zA-Z0-9])+\.[a-z]{2,4}){0,}$/.test(email) === false) alert('email falsch'); -} \ No newline at end of file + fehlerbox.innerHTML = 'Fehler: