2210892
/
WEB-Team-A4
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

aktueller Stand, funktioniert im Browser

pull/2/head
Robin Schumann 2023-05-04 09:13:42 +02:00
parent da7e3649f6
commit 73436200a7
25 changed files with 2107 additions and 533 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

BIN
public/.DS_Store vendored
View File

Binary file not shown.

42
public/bestellformular.html
View File

@ -5,26 +5,54 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Second Harvest</title>
<link rel="stylesheet" href="css/desktop.css">
<script src="js/formchecker.js" async="true" ></script>
<style>
@import 'css/mobile.css' (max-width: 480px);
@import 'css/desktop.css' (min-width: 480px);
</style>
<script src="javascript/formchecker.js" async="true" ></script>
</head>
<body>
<header>
<nav>
<div class="navbar-mobile">
<div class="nav-container">
<input class="checkbox" type="checkbox" name="" id="" />
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
<nav class="navbar menu-items">
<a href="ueber_uns.html">Über uns</a>
<a href="produkte.html">Produkte</a>
<a href="warenkorb.html">Warenkorb</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</nav>
</div>
</div>
</nav>
<nav>
<div class="header_logo">
<a href="index.html">
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
</div>
<div class="header_desktop">
<h1>Second Harvest</h1>
<p>Gib Lebensmitteln eine zweite Chance</p>
<nav class="navbar" style="--items: 4;">
</div>
<div class="header_desktop">
<nav class="navbar-desktop" style="--items: 4;">
<a href="ueber_uns.html">Über uns</a>
<a href="produkte.html">Produkte</a>
<a href="warenkorb.html">Warenkorb</a>
<a href="kontakt.html">Kontakt</a>
</nav>
</div>
</nav>
</header>
@ -67,7 +95,7 @@
<tr>
<th class="feld_vorn"><label for="plz">&nbsp;PLZ</label></th>
<th class="stern">*</th>
<td><input type="number" min="0" id="plz" pattern="[0-9]*"></td>
<td><input type="text" min="0" id="plz"></td>
</tr>
<tr>
<th class="feld_vorn"> <label for="wohnort">&nbsp;Wohnort</label></th>
@ -99,12 +127,12 @@
<div class="button_abschließen_position">
<p><a class="button_abschließen" href="produkte.html" onclick="checkform()" >Kostenpflichtig bestellen</a></p>
<p><a class="button_abschließen" onclick="checkform()" href="bestellung_erfolgreich.html" >Kostenpflichtig bestellen</a></p>
</div>
<footer>
<nav class="navbar" style="--items: 2;">
<nav class="navbar-desktop" style="--items: 2;">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</nav>

36
public/bestellung_erfolgreich.html
View File

@ -5,24 +5,52 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bestellung fehlgeschlagen</title>
<link rel="stylesheet" href="css/desktop.css">
<style>
@import 'css/mobile.css' (max-width: 480px);
@import 'css/desktop.css' (min-width: 480px);
</style>
</head>
<body>
<header>
<nav>
<div class="navbar-mobile">
<div class="nav-container">
<input class="checkbox" type="checkbox" name="" id="" />
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
<nav class="navbar menu-items">
<a href="ueber_uns.html">Über uns</a>
<a href="produkte.html">Produkte</a>
<a href="warenkorb.html">Warenkorb</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</nav>
</div>
</div>
</nav>
<nav>
<div class="header_logo">
<a href="index.html">
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
</div>
<div class="header_desktop">
<h1>Second Harvest</h1>
<p>Gib Lebensmitteln eine zweite Chance</p>
<nav class="navbar" style="--items: 4;">
</div>
<div class="header_desktop">
<nav class="navbar-desktop" style="--items: 4;">
<a href="ueber_uns.html">Über uns</a>
<a href="produkte.html">Produkte</a>
<a href="warenkorb.html">Warenkorb</a>
<a href="kontakt.html">Kontakt</a>
</nav>
</div>
</nav>
</header>
<div>
@ -36,7 +64,7 @@
<footer>
<nav class="navbar" style="--items: 2;">
<nav class="navbar-desktop" style="--items: 2;">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</nav>

36
public/bestellung_fehlgeschlagen.html
View File

@ -5,24 +5,52 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bestellung fehlgeschlagen</title>
<link rel="stylesheet" href="css/desktop.css">
<style>
@import 'css/mobile.css' (max-width: 480px);
@import 'css/desktop.css' (min-width: 480px);
</style>
</head>
<body>
<header>
<nav>
<div class="navbar-mobile">
<div class="nav-container">
<input class="checkbox" type="checkbox" name="" id="" />
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
<nav class="navbar menu-items">
<a href="ueber_uns.html">Über uns</a>
<a href="produkte.html">Produkte</a>
<a href="warenkorb.html">Warenkorb</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</nav>
</div>
</div>
</nav>
<nav>
<div class="header_logo">
<a href="index.html">
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
</div>
<div class="header_desktop">
<h1>Second Harvest</h1>
<p>Gib Lebensmitteln eine zweite Chance</p>
<nav class="navbar" style="--items: 4;">
</div>
<div class="header_desktop">
<nav class="navbar-desktop" style="--items: 4;">
<a href="ueber_uns.html">Über uns</a>
<a href="produkte.html">Produkte</a>
<a href="warenkorb.html">Warenkorb</a>
<a href="kontakt.html">Kontakt</a>
</nav>
</div>
</nav>
</header>
<div>
@ -35,7 +63,7 @@
<footer>
<nav class="navbar" style="--items: 2;">
<nav class="navbar-desktop" style="--items: 2;">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</nav>

272
public/css/desktop.css
View File

@ -1,8 +1,73 @@
/* 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;
@ -20,19 +85,21 @@ body::-webkit-scrollbar-thumb {
background: #476B1C;
}
/* HEADER-FORMAT */
header {
background-color: #9BB558;
}
header > h1 {
.header_desktop > h1 {
padding-top: 0.1em;
padding-left: 7em;
margin: 0;
font-size: 1.875em;
}
header > p {
.header_desktop > p {
padding-left: 17.6em;
margin-top: 0em;
margin-bottom: 0.5em;
@ -47,22 +114,7 @@ header > p {
transform: scale(0.8);
}
.navbar {
background-color: #476B1C;
display: grid;
grid-template-columns: repeat(var(--items), 1fr);
width: 100%;
}
.navbar a {
text-align: center;
text-decoration: none;
color: white;
padding: 0.5em 0 0.5em 0;
}
.aktuell a {
color: #f4eb49;
}
/* CONTENT-FORMAT */
.content {
position: relative;
@ -74,7 +126,7 @@ header > p {
margin-bottom: 0.1em;
}
.content :not(h1, strong) {
.content :not(h1, strong, a) {
margin-left: 3.5em;
color: #606060;
}
@ -90,28 +142,12 @@ header > p {
font-size: 1em;
text-align: center;
}
.content a {
margin-left: 0em;
}
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;
position: absolute;
overflow: auto;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.2;
pointer-events: none;
}
/* PRODUKTE-FORMAT */
#aktuelle_auswahl {
margin-left: 2.7em;
@ -129,9 +165,9 @@ html body.impressum .content::before{
}
#button_produkte {
.button_produkte {
background-color: #476B1C;
color: white;
color: #fff;
padding: 5px 20px;
border-radius: 15px;
text-align: center;
@ -142,6 +178,13 @@ html body.impressum .content::before{
margin-left: -1em;
}
a:hover {
color:#f4eb49;
}
/* FOOTER-FORMAT */
#balken {
background-color: #9BB558;
height: 20px;
@ -151,6 +194,8 @@ html body.impressum .content::before{
width: 100%;
}
/* BESTELLUNG-FORMAT */
input {
font-family: Arial, Helvetica, sans-serif;
color: #606060
@ -194,6 +239,7 @@ label {
border: thin solid #606060;
width: 600px;
}
.bestellung_tabelle tr {
height: 25px;
}
@ -206,25 +252,30 @@ label {
.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;
@ -232,6 +283,7 @@ label {
text-align: center;
margin-top: 0.5px;
}
.button_abschließen {
background-color: #476B1C;
color: white;
@ -245,6 +297,7 @@ label {
cursor: pointer;
font-weight: normal;
}
.button_abschließen_position {
margin-left: 100px;
}
@ -274,6 +327,10 @@ label {
margin: 10px;
}
.produktbottom a {
position: relative;
}
.produkte_warenkorb {
position: relative;
max-width: 88%;
@ -286,16 +343,20 @@ label {
}
.produkte_warenkorb img {
margin-right: -60px;
margin-right: 0px;
height: 60%;
}
.produkte_details {
.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;
@ -304,6 +365,7 @@ label {
right: 30px;
}
.button_entfernen {
background-color: #ebebeb;
border: thin solid black;
@ -321,42 +383,128 @@ label {
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;
}
a:hover{
color: #f4eb49;
.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;
}
.gesamtbetrag{
.button_hinzufuegen::before {
content: "+";
position: absolute;
font-size: 1em;
bottom: 15px;
right: 15px;
transform: translate(-50%, -40%);
font-size: 3em;
font-weight: normal;
}
.foodampel {
display: flex;
align-items: top;
#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;
}
.foodampel img {
height: 120px;
margin-left: -0.7em;
}
.foodampel p {
margin-left: 0.65em;
margin-top: 0.8em;
}
#hinweis{
color: red;
.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;
}

580
public/css/mobile.css 100644
View File

@ -0,0 +1,580 @@
/* MOBILE-Version T4Web 0.1 */
/* NONE FROM DESKTOP */
.navbar-desktop{
display:none;
}
.header_logo {
display:none;
}
.header_desktop {
display:none;
}
#balken {
display:none;
}
/* ALL-FORMAT */
* {
box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
}
a:hover {
color: #f4eb49;
}
.aktuell a {
color: #f4eb49;
}
#hinweis {
color: red;
}
/* BACKGROUND-IMAGE-FORMAT-MOBILE */
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: 250px;
position: absolute;
overflow: auto;
top: 80px;
bottom: 0px;
left: 0px;
right: 0px;
opacity: 0.2;
pointer-events: none;
}
/* 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;
}
.navbar-mobile .nav-container a {
text-decoration: none;
text-align: left;
color: #fff;
font-weight: 100;
font-size: 1.2rem;
line-height: 1.5em;
}
.navbar-mobile .nav-container a:hover{
color: #f4eb49;
}
/*.nav-container {
}*/
.nav-container .checkbox {
position: absolute;
display: flex;
height: 60px;
width: 60px;
background: #476B1C;
top: 0px;
left: 0px;
z-index: 3;
opacity: 0;
cursor:pointer;
}
.nav-container .hamburger-lines {
height: 26px;
width: 32px;
position: absolute;
top: 17px;
left: 20px;
z-index: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.nav-container .hamburger-lines .line {
display: block;
height: 6px;
width: 100%;
border-radius: 0px;
background: #fff;
}
.nav-container .hamburger-lines .line1 {
transform-origin: 0% 0%;
transition: transform 0.4s ease-in-out;
}
.nav-container .hamburger-lines .line2 {
transition: transform 0.2s ease-in-out;
}
.nav-container .hamburger-lines .line3 {
transform-origin: 0% 100%;
transition: transform 0.4s ease-in-out;
}
.navbar-mobile .menu-items {
margin-top: 60px;
padding-top: 15px;
background-color: #476B1C;
height: 35vh;
width: 80%;
transform: translate(-150%);
display: flex;
flex-direction: column;
margin-left: -40px;
padding-left: 50px;
transition: transform 0.5s ease-in-out;
text-align: left;
}
.nav-container input[type="checkbox"]:checked ~ .menu-items {
transform: translateX(0);
}
.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
transform: rotate(45deg);
}
.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
transform: scaleY(0);
}
.nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
transform: rotate(-45deg);
}
/* BODY-FORMAT */
body {
min-height: 100vh;
padding: 0;
}
body::-webkit-scrollbar {
width: 6px
}
body::-webkit-scrollbar-track {
background-color: white;
}
body::-webkit-scrollbar-thumb {
background: #476B1C;
}
/* HEADER-FORMAT */
header {
background-color: #9BB558;
}
/* CONTENT-FORMAT */
.content {
position: static;
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;
}
/* FOOTER-FORMAT */
/* KEIN FOOTER IN DER MOBILE ANSICHT */
/* 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: 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;
}
/* 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;
}

36
public/datenschutz.html
View File

@ -5,24 +5,52 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Datenschutzerklärung</title>
<link rel="stylesheet" href="css/desktop.css">
<style>
@import 'css/mobile.css' (max-width: 480px);
@import 'css/desktop.css' (min-width: 480px);
</style>
</head>
<body class="datenschutz">
<header>
<nav>
<div class="navbar-mobile">
<div class="nav-container">
<input class="checkbox" type="checkbox" name="" id="" />
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
<nav class="navbar menu-items">
<a href="ueber_uns.html">Über uns</a>
<a href="produkte.html">Produkte</a>
<a href="warenkorb.html">Warenkorb</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</nav>
</div>
</div>
</nav>
<nav>
<div class="header_logo">
<a href="index.html">
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
</div>
<div class="header_desktop">
<h1>Second Harvest</h1>
<p>Gib Lebensmitteln eine zweite Chance</p>
<nav class="navbar" style="--items: 4;">
</div>
<div class="header_desktop">
<nav class="navbar-desktop" style="--items: 4;">
<a href="ueber_uns.html">Über uns</a>
<a href="produkte.html">Produkte</a>
<a href="warenkorb.html">Warenkorb</a>
<a href="kontakt.html">Kontakt</a>
</nav>
</div>
</nav>
</header>
<div>
@ -285,7 +313,7 @@
<footer>
<nav class="navbar" style="--items: 2;">
<nav class="navbar-desktop" style="--items: 2;">
<a href="impressum.html">Impressum</a>
<a class="aktuell" href="datenschutz.html">Datenschutz</a>
</nav>

36
public/impressum.html
View File

@ -5,24 +5,52 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beschreibung der Seite</title>
<link rel="stylesheet" href="css/desktop.css">
<style>
@import 'css/mobile.css' (max-width: 480px);
@import 'css/desktop.css' (min-width: 480px);
</style>
</head>
<body class="impressum">
<header>
<nav>
<div class="navbar-mobile">
<div class="nav-container">
<input class="checkbox" type="checkbox" name="" id="" />
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
<nav class="navbar menu-items">
<a href="ueber_uns.html">Über uns</a>
<a href="produkte.html">Produkte</a>
<a href="warenkorb.html">Warenkorb</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</nav>
</div>
</div>
</nav>
<nav>
<div class="header_logo">
<a href="index.html">
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
</div>
<div class="header_desktop">
<h1>Second Harvest</h1>
<p>Gib Lebensmitteln eine zweite Chance</p>
<nav class="navbar" style="--items: 4;">
</div>
<div class="header_desktop">
<nav class="navbar-desktop" style="--items: 4;">
<a href="ueber_uns.html">Über uns</a>
<a href="produkte.html">Produkte</a>
<a href="warenkorb.html">Warenkorb</a>
<a href="kontakt.html">Kontakt</a>
</nav>
</div>
</nav>
</header>
<div class="content">
@ -48,7 +76,7 @@
<footer>
<nav class="navbar" style="--items: 2;">
<nav class="navbar-desktop" style="--items: 2;">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</nav>

64
public/index.html
View File

@ -5,24 +5,51 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Second Harvest</title>
<link rel="stylesheet" href="css/desktop.css">
<style>
@import 'css/mobile.css' (max-width: 480px);
@import 'css/desktop.css' (min-width: 480px);
</style>
</head>
<body class="index">
<header>
<nav>
<div class="navbar-mobile">
<div class="nav-container">
<input class="checkbox" type="checkbox" name="" id="" />
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
<nav class="navbar menu-items">
<a href="ueber_uns.html">Über uns</a>
<a href="produkte.html">Produkte</a>
<a href="warenkorb.html">Warenkorb</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</nav>
</div>
</div>
</nav>
<nav>
<div class="header_logo">
<a href="index.html">
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
</div>
<div class="header_desktop">
<h1>Second Harvest</h1>
<p>Gib Lebensmitteln eine zweite Chance</p>
<nav class="navbar" style="--items: 4;">
</div>
<div class="header_desktop">
<nav class="navbar-desktop" style="--items: 4;">
<a href="ueber_uns.html">Über uns</a>
<a href="produkte.html">Produkte</a>
<a href="warenkorb.html">Warenkorb</a>
<a href="kontakt.html">Kontakt</a>
</nav>
</div>
</nav>
</header>
<div class="content">
@ -32,11 +59,23 @@
verschwenden.</p>
<br />
<p>Alle Produkte auf unserer Seite sind mit drei Fähnchen gekennzeichnet.</p>
<div class="foodampel">
<img src="pictures/Foodampel_transparent.png">
<p class="foodampel">muss sofort verarbeitet werden</br></br>kann ein paar Tage liegen</br></br>lange
Haltbarkeit</p>
</div>
<table>
<tr>
<td><img src="pictures/FoodAmpel_rot.png"></td>
<td>muss sofort verarbeitet werden</td>
</tr>
<tr>
<td><img src="pictures/FoodAmpel_gelb.png"></td>
<td>kann ein paar Tage liegen</td>
</tr>
<tr>
<td><img src="pictures/FoodAmpel_gruen.png"></td>
<td>lange Haltbarkeit</td>
</tr>
</table>
<p>Damit kannst du deinen Einkauf perfekt an deinen Essensplan anpassen und weißt bereits vorher, wann Du
etwas verbrauchen musst.<br />Bestellungen, die <strong>bis 10 Uhr</strong> bei uns eingehen, werden
<strong>noch am selben Tag</strong>
@ -48,13 +87,14 @@
<a class="beispiel_produkte" href="produkte.html"><img src="pictures/karotten.png" alt="Karotten"></a>
<a class="beispiel_produkte" href="produkte.html">
<img src="pictures/sellerie.png" alt="Sellerie"></a>
<p><a id="button_produkte" href="produkte.html">zu den Produkten</a></p>
<p>
<a class= "button_produkte" href="produkte.html">zu den Produkten</a>
</p>
<h2>Viel Spaß bei Deinem Einkauf. Dein Second Harvest Team.</h2>
</div>
<footer>
<nav class="navbar" style="--items: 2;">
<nav class="navbar-desktop" style="--items: 2;">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</nav>

22
public/javascript/formchecker.js 100644
View File

@ -0,0 +1,22 @@
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() {
let vorname = document.getElementById('vorname').value;
let name = document.getElementById('name').value;
let straße = document.getElementById('straße').value;
let hausnummer = document.getElementById('hausnummer').value;
let plz = document.getElementById('plz').value;
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');
}

542
public/javascript/warenkorb.js 100644
View File

@ -0,0 +1,542 @@
var warenkorb = [];
if (window.location.pathname.includes("/produkte.html")) {
document.addEventListener("DOMContentLoaded", function () {
const produktpreise = {
"karotte": 0.95, // Preis für Karotten
"sellerie": 1.10, // Preis für Sellerie
"birnen": 0.50, // Preis für Birnen
"kiwi": 0.95, // Preis für Kiwi
"orangen": 2.0, //Preis für Orangen
"aepfel": 2.0 //Preis für Aepfel
};
// Hole button1 - button6
for (let i = 1; i <= 6; i++) {
const button = document.getElementById("button" + i);
button.addEventListener("click", function (event) {
// verhindern Sie das Standardverhalten des Links
event.preventDefault();
// ermitteln Sie die ausgewählte Anzahl, die ID und den Preis des Produkts
const select = button.previousElementSibling;
const anzahl = select.options[select.selectedIndex].value;
const produktID = this.parentElement.parentElement.querySelector('img[data-id]').getAttribute('data-id');
console.log(produktID);
const preis = produktpreise[produktID];
//Produkt in den Warenkorb hinzufügen
produktHinzufuegen(produktID, anzahl, preis);
});
}
function produktHinzufuegen(produktID, anzahl, preis) {
// Objekt mit Produktinformationen erstellen
let produkt = {
id: produktID,
anzahl: anzahl,
preis: preis // Gesamtpreis berechnen
};
// Produkt zum Warenkorb hinzufügen
warenkorb.push(produkt);
const notification = document.getElementById('notification');
// Anzeigen der Nachricht
notification.textContent = 'Produkt wurde zum Warenkorb hinzugefügt!';
notification.style.display = 'block';
// Nachricht nach 3s ausblenden
setTimeout(function () {
notification.style.display = 'none';
}, 3000);
// Ausgabe des aktuellen Warenkorbs (zum Testen)
console.log(warenkorb);
localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
}
});
}
function createWarenkorbDiv(warenkorb) {
for (const produkt of warenkorb) {
if (produkt.id === "karotte") {
const warenkorbDiv = document.createElement("div");
warenkorbDiv.setAttribute("data-id", "karotte");
warenkorbDiv.classList.add("produkte_warenkorb");
const produktBild = document.createElement("img");
produktBild.src = "pictures/karotte_ohne_preis.webp"
produktBild.alt = produkt.id;
warenkorbDiv.appendChild(produktBild);
const produktDetails = document.createElement("div");
produktDetails.classList.add("produkte_details");
const produktBeschreibung = document.createTextNode("Karotten 1kg");
const produktPreis = document.createTextNode("Kosten: 0.95€");
const aufLager = document.createTextNode("Auf Lager: 250");
produktDetails.appendChild(produktBeschreibung);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(produktPreis);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(aufLager);
const buttonMitMenue = document.createElement("div");
buttonMitMenue.classList.add("button_mit_menue");
const paraButton = document.createElement("p");
const buttonEntfernen = document.createElement("a");
buttonEntfernen.classList.add("button_entfernen");
buttonEntfernen.innerText = "Entfernen";
buttonEntfernen.setAttribute("href", "#");
const menue = document.createElement("input");
menue.setAttribute("type", "number");
menue.setAttribute("id", "menue");
menue.setAttribute("value", produkt.anzahl);
menue.setAttribute("max", produkt.anzahl);
menue.setAttribute("min", "0");
menue.setAttribute("pattern", "[0-9]*");
paraButton.appendChild(buttonEntfernen);
buttonMitMenue.appendChild(paraButton);
buttonMitMenue.appendChild(menue);
const gesamtPreis = document.createElement("p");
gesamtPreis.classList.add("gesamtbetrag");
const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
gesamtPreis.appendChild(gesamtPreisText);
warenkorbDiv.appendChild(produktDetails);
warenkorbDiv.appendChild(gesamtPreis);
warenkorbDiv.appendChild(buttonMitMenue);
const warenkorbContainer = document.querySelector(".warenkorb-container");
warenkorbContainer.appendChild(warenkorbDiv);
buttonEntfernen.addEventListener("click", function (event) {
if (produkt.anzahl > 1) {
produkt.anzahl--;
localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
} else {
entferneProdukt("karotte");
console.log("Hier ausgabe vom Warenkorb:");
console.log(warenkorb);
const karotteContainer = document.querySelector('[data-id="karotte"]');
//Löschen vom warenkorbDiv
warenkorbContainer.removeChild(karotteContainer);
}
location.reload(true);
});
} else if (produkt.id === "sellerie") {
const warenkorbDiv = document.createElement("div");
warenkorbDiv.setAttribute("data-id", "sellerie");
warenkorbDiv.classList.add("produkte_warenkorb");
const produktBild = document.createElement("img");
produktBild.src = "pictures/sellerie_ohne_preis.webp"
produktBild.alt = produkt.id;
warenkorbDiv.appendChild(produktBild);
const produktDetails = document.createElement("div");
produktDetails.classList.add("produkte_details");
const produktBeschreibung = document.createTextNode("Sellerie 1 Stück");
const produktPreis = document.createTextNode("Kosten: 1.10€");
const aufLager = document.createTextNode("Auf Lager: 1000");
produktDetails.appendChild(produktBeschreibung);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(produktPreis);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(aufLager);
const buttonMitMenue = document.createElement("div");
buttonMitMenue.classList.add("button_mit_menue");
const paraButton = document.createElement("p");
const buttonEntfernen = document.createElement("a");
buttonEntfernen.classList.add("button_entfernen");
buttonEntfernen.innerText = "Entfernen";
buttonEntfernen.setAttribute("href", "#");
const menue = document.createElement("input");
menue.setAttribute("type", "number");
menue.setAttribute("id", "menue");
menue.setAttribute("value", produkt.anzahl);
menue.setAttribute("max", produkt.anzahl);
menue.setAttribute("min", "0");
menue.setAttribute("pattern", "[0-9]*");
paraButton.appendChild(buttonEntfernen);
buttonMitMenue.appendChild(paraButton);
buttonMitMenue.appendChild(menue);
const gesamtPreis = document.createElement("p");
gesamtPreis.classList.add("gesamtbetrag");
const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
gesamtPreis.appendChild(gesamtPreisText);
warenkorbDiv.appendChild(produktDetails);
warenkorbDiv.appendChild(gesamtPreis);
warenkorbDiv.appendChild(buttonMitMenue);
const warenkorbContainer = document.querySelector(".warenkorb-container");
warenkorbContainer.appendChild(warenkorbDiv);
buttonEntfernen.addEventListener("click", function (event) {
if (produkt.anzahl > 1) {
produkt.anzahl--;
localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
} else {
entferneProdukt("sellerie");
console.log("Hier ausgabe vom Warenkorb:");
console.log(warenkorb);
const sellerieContainer = document.querySelector('[data-id="sellerie"]');
//Löschen vom warenkorbDiv
warenkorbContainer.removeChild(sellerieContainer);
}
location.reload(true);
});
} else if (produkt.id === "birnen") {
const warenkorbDiv = document.createElement("div");
warenkorbDiv.setAttribute("data-id", "birnen");
warenkorbDiv.classList.add("produkte_warenkorb");
const produktBild = document.createElement("img");
produktBild.src = "pictures/birne_ohne_preis.webp"
produktBild.alt = produkt.id;
warenkorbDiv.appendChild(produktBild);
const produktDetails = document.createElement("div");
produktDetails.classList.add("produkte_details");
const produktBeschreibung = document.createTextNode("Birne 0.5kg");
const produktPreis = document.createTextNode("Kosten: 0.50€");
const aufLager = document.createTextNode("Auf Lager: 500");
produktDetails.appendChild(produktBeschreibung);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(produktPreis);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(aufLager);
const buttonMitMenue = document.createElement("div");
buttonMitMenue.classList.add("button_mit_menue");
const paraButton = document.createElement("p");
const buttonEntfernen = document.createElement("a");
buttonEntfernen.classList.add("button_entfernen");
buttonEntfernen.innerText = "Entfernen";
buttonEntfernen.setAttribute("href", "#");
const menue = document.createElement("input");
menue.setAttribute("type", "number");
menue.setAttribute("id", "menue");
menue.setAttribute("value", produkt.anzahl);
menue.setAttribute("max", produkt.anzahl);
menue.setAttribute("min", "0");
menue.setAttribute("pattern", "[0-9]*");
paraButton.appendChild(buttonEntfernen);
buttonMitMenue.appendChild(paraButton);
buttonMitMenue.appendChild(menue);
const gesamtPreis = document.createElement("p");
gesamtPreis.classList.add("gesamtbetrag");
const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
gesamtPreis.appendChild(gesamtPreisText);
warenkorbDiv.appendChild(produktDetails);
warenkorbDiv.appendChild(gesamtPreis);
warenkorbDiv.appendChild(buttonMitMenue);
const warenkorbContainer = document.querySelector(".warenkorb-container");
warenkorbContainer.appendChild(warenkorbDiv);
buttonEntfernen.addEventListener("click", function (event) {
if (produkt.anzahl > 1) {
produkt.anzahl--;
localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
} else {
entferneProdukt("birnen");
console.log("Hier ausgabe vom Warenkorb:");
console.log(warenkorb);
const birnenContainer = document.querySelector('[data-id="birnen"]');
//Löschen vom warenkorbDiv
warenkorbContainer.removeChild(birnenContainer);
}
location.reload(true);
});
} else if (produkt.id === "kiwi") {
const warenkorbDiv = document.createElement("div");
warenkorbDiv.setAttribute("data-id", "kiwi");
warenkorbDiv.classList.add("produkte_warenkorb");
const produktBild = document.createElement("img");
produktBild.src = "pictures/kiwi_ohne_preis.png.avif"
produktBild.alt = produkt.id;
warenkorbDiv.appendChild(produktBild);
const produktDetails = document.createElement("div");
produktDetails.classList.add("produkte_details");
const produktBeschreibung = document.createTextNode("Kiwi 0.5kg");
const produktPreis = document.createTextNode("Kosten: 0.95€");
const aufLager = document.createTextNode("Auf Lager: 250");
produktDetails.appendChild(produktBeschreibung);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(produktPreis);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(aufLager);
const buttonMitMenue = document.createElement("div");
buttonMitMenue.classList.add("button_mit_menue");
const paraButton = document.createElement("p");
const buttonEntfernen = document.createElement("a");
buttonEntfernen.classList.add("button_entfernen");
buttonEntfernen.innerText = "Entfernen";
buttonEntfernen.setAttribute("href", "#");
const menue = document.createElement("input");
menue.setAttribute("type", "number");
menue.setAttribute("id", "menue");
menue.setAttribute("value", produkt.anzahl);
menue.setAttribute("max", produkt.anzahl);
menue.setAttribute("min", "0");
menue.setAttribute("pattern", "[0-9]*");
paraButton.appendChild(buttonEntfernen);
buttonMitMenue.appendChild(paraButton);
buttonMitMenue.appendChild(menue);
const gesamtPreis = document.createElement("p");
gesamtPreis.classList.add("gesamtbetrag");
const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
gesamtPreis.appendChild(gesamtPreisText);
warenkorbDiv.appendChild(produktDetails);
warenkorbDiv.appendChild(gesamtPreis);
warenkorbDiv.appendChild(buttonMitMenue);
const warenkorbContainer = document.querySelector(".warenkorb-container");
warenkorbContainer.appendChild(warenkorbDiv);
buttonEntfernen.addEventListener("click", function (event) {
if (produkt.anzahl > 1) {
produkt.anzahl--;
localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
} else {
entferneProdukt("kiwi");
console.log("Hier ausgabe vom Warenkorb:");
console.log(warenkorb);
const kiwiContainer = document.querySelector('[data-id="kiwi"]');
//Löschen vom warenkorbDiv
warenkorbContainer.removeChild(kiwiContainer);
}
location.reload(true);
});
} else if (produkt.id === "orangen") {
const warenkorbDiv = document.createElement("div");
warenkorbDiv.setAttribute("data-id", "orangen");
warenkorbDiv.classList.add("produkte_warenkorb");
const produktBild = document.createElement("img");
produktBild.src = "pictures/orangen_ohne_preis.png.avif";
produktBild.alt = produkt.id;
warenkorbDiv.appendChild(produktBild);
const produktDetails = document.createElement("div");
produktDetails.classList.add("produkte_details");
const produktBeschreibung = document.createTextNode("Orangen 1kg");
const produktPreis = document.createTextNode("Kosten: 2€");
const aufLager = document.createTextNode("Auf Lager: 350");
produktDetails.appendChild(produktBeschreibung);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(produktPreis);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(aufLager);
const buttonMitMenue = document.createElement("div");
buttonMitMenue.classList.add("button_mit_menue");
const paraButton = document.createElement("p");
const buttonEntfernen = document.createElement("a");
buttonEntfernen.classList.add("button_entfernen");
buttonEntfernen.innerText = "Entfernen";
buttonEntfernen.setAttribute("href", "#");
const menue = document.createElement("input");
menue.setAttribute("type", "number");
menue.setAttribute("id", "menue");
menue.setAttribute("value", produkt.anzahl);
menue.setAttribute("max", produkt.anzahl);
menue.setAttribute("min", "0");
menue.setAttribute("pattern", "[0-9]*");
paraButton.appendChild(buttonEntfernen);
buttonMitMenue.appendChild(paraButton);
buttonMitMenue.appendChild(menue);
const gesamtPreis = document.createElement("p");
gesamtPreis.classList.add("gesamtbetrag");
const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
gesamtPreis.appendChild(gesamtPreisText);
warenkorbDiv.appendChild(produktDetails);
warenkorbDiv.appendChild(gesamtPreis);
warenkorbDiv.appendChild(buttonMitMenue);
const warenkorbContainer = document.querySelector(".warenkorb-container");
warenkorbContainer.appendChild(warenkorbDiv);
buttonEntfernen.addEventListener("click", function (event) {
if (produkt.anzahl > 1) {
produkt.anzahl--;
localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
} else {
entferneProdukt("orangen");
console.log("Hier ausgabe vom Warenkorb:");
console.log(warenkorb);
const orangenContainer = document.querySelector('[data-id="orangen"]');
//Löschen vom warenkorbDiv
warenkorbContainer.removeChild(orangenContainer);
}
location.reload(true);
});
} else if (produkt.id === "aepfel") {
const warenkorbDiv = document.createElement("div");
warenkorbDiv.setAttribute("data-id", "aepfel");
warenkorbDiv.classList.add("produkte_warenkorb");
const produktBild = document.createElement("img");
produktBild.src = "pictures/aepfel_ohne_preis.png.avif"
produktBild.alt = produkt.id;
warenkorbDiv.appendChild(produktBild);
const produktDetails = document.createElement("div");
produktDetails.classList.add("produkte_details");
const produktBeschreibung = document.createTextNode("Äpfel 1kg");
const produktPreis = document.createTextNode("Kosten: 2€");
const aufLager = document.createTextNode("Auf Lager: 500");
produktDetails.appendChild(produktBeschreibung);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(produktPreis);
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(document.createElement("br"));
produktDetails.appendChild(aufLager);
const buttonMitMenue = document.createElement("div");
buttonMitMenue.classList.add("button_mit_menue");
const paraButton = document.createElement("p");
const buttonEntfernen = document.createElement("a");
buttonEntfernen.classList.add("button_entfernen");
buttonEntfernen.innerText = "Entfernen";
buttonEntfernen.setAttribute("href", "#");
const menue = document.createElement("input");
menue.setAttribute("type", "number");
menue.setAttribute("id", "menue");
menue.setAttribute("value", produkt.anzahl);
menue.setAttribute("max", produkt.anzahl);
menue.setAttribute("min", "0");
menue.setAttribute("pattern", "[0-9]*");
paraButton.appendChild(buttonEntfernen);
buttonMitMenue.appendChild(paraButton);
buttonMitMenue.appendChild(menue);
const gesamtPreis = document.createElement("p");
gesamtPreis.classList.add("gesamtbetrag");
const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2)));
gesamtPreis.appendChild(gesamtPreisText);
warenkorbDiv.appendChild(produktDetails);
warenkorbDiv.appendChild(gesamtPreis);
warenkorbDiv.appendChild(buttonMitMenue);
const warenkorbContainer = document.querySelector(".warenkorb-container");
warenkorbContainer.appendChild(warenkorbDiv);
buttonEntfernen.addEventListener("click", function (event) {
if (produkt.anzahl > 1) {
produkt.anzahl--;
localStorage.setItem("warenkorb", JSON.stringify(warenkorb));
} else {
entferneProdukt("aepfel");
console.log("Hier ausgabe vom Warenkorb:");
console.log(warenkorb);
const apfelContainer = document.querySelector('[data-id="aepfel"]');
//Löschen vom warenkorbDiv
warenkorbContainer.removeChild(apfelContainer);
}
location.reload(true);
});
}
}
const contentContainer = document.querySelector(".content");
const äußererContainer = document.createElement("div");
äußererContainer.classList.add("äußererContainer");
const kostenContainer = document.createElement("div");
kostenContainer.classList.add("kostenContainer");
const lieferkostenText = document.createElement("p");
lieferkostenText.classList.add("lieferkosten_text");
lieferkostenText.innerText = "Lieferkosten:";
const lieferkostenPreis = document.createElement("p");
lieferkostenPreis.classList.add("lieferkosten_preis");
lieferkostenPreis.innerText = "2.90€";
const preisZusammen = ermittleGesamtpreis() + 2.9;
const gesamtPreisText = document.createElement("p");
gesamtPreisText.classList.add("gesamtkosten_text")
gesamtPreisText.innerText = "Gesamtkosten (inkl. MwSt): ";
const gesamtPreis = document.createElement("p");
gesamtPreis.classList.add("gesamtpreis");
gesamtPreis.innerText = "" + preisZusammen.toFixed(2) + "€";
const buttonBestellungAbschließen = document.createElement("div");
const buttonBestellungAbschließenAnchor = document.createElement("a");
buttonBestellungAbschließenAnchor.classList.add("button_bestellung_abschließen");
buttonBestellungAbschließenAnchor.setAttribute("href", "bestellformular.html");
buttonBestellungAbschließenAnchor.innerText = "Kostenpflichtig bestellen";
console.log(preisZusammen);
localStorage.setItem("gesamtpreis", preisZusammen);
if (warenkorb.length === 0) {
const warenkorbLeer = document.createElement("p");
warenkorbLeer.classList.add("warenkorbLeer");
warenkorbLeer.innerText = "Der Warenkorb ist zur Zeit leer.";
contentContainer.appendChild(warenkorbLeer);
} else {
contentContainer.appendChild(äußererContainer);
äußererContainer.appendChild(kostenContainer);
kostenContainer.appendChild(lieferkostenText);
kostenContainer.appendChild(lieferkostenPreis);
kostenContainer.appendChild(gesamtPreisText);
kostenContainer.appendChild(gesamtPreis);
buttonBestellungAbschließen.appendChild(buttonBestellungAbschließenAnchor);
äußererContainer.appendChild(buttonBestellungAbschließen);
}
}
function ermittleGesamtpreis() {
var preis = 0;
const warenkorb = JSON.parse(localStorage.getItem("warenkorb")) || [];
console.log(warenkorb);
for (produkt of warenkorb) {
preis += produkt.preis * produkt.anzahl;
}
return preis;
}
function entferneProdukt(produktID) {
const warenkorb = JSON.parse(localStorage.getItem("warenkorb")) || [];
for (let i = 0; i < warenkorb.length; i++) {
if (warenkorb[i].id === produktID) {
warenkorb.splice(i, 1)// entferne das Element aus dem Array
break; // breche die Schleife ab, da das Element gefunden wurde
}
}
localStorage.setItem("warenkorb", JSON.stringify(warenkorb)); // speichere das aktualisierte Array im LocalStorage
}
// prüfe, ob der Benutzer sich auf der warenkorb.html-Seite befindet und erstelle das DIV
document.addEventListener("DOMContentLoaded", function () {
// prüfe, ob der Benutzer sich auf der warenkorb.html-Seite befindet und erstelle das DIV
if (window.location.pathname.includes("/warenkorb.html")) {
const warenkorb = JSON.parse(localStorage.getItem("warenkorb")) || [];
createWarenkorbDiv(warenkorb);
}
});

17
public/js/formchecker.js
View File

@ -1,17 +0,0 @@
function checkform() {
let vorname = document.getElementById('vorname').value;
let name = document.getElementById('name').value;
let straße = document.getElementById('straße').value;
let hausnummer = document.getElementById('hausnummer').value;
let plz = document.getElementById('plz').value;
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');
}

36
public/kontakt.html
View File

@ -5,24 +5,52 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beschreibung der Seite</title>
<link rel="stylesheet" href="css/desktop.css">
<style>
@import 'css/mobile.css' (max-width: 480px);
@import 'css/desktop.css' (min-width: 480px);
</style>
</head>
<body class="kontakt">
<header>
<nav>
<div class="navbar-mobile">
<div class="nav-container">
<input class="checkbox" type="checkbox" name="" id="" />
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
<nav class="navbar menu-items">
<a href="ueber_uns.html">Über uns</a>
<a href="produkte.html">Produkte</a>
<a href="warenkorb.html">Warenkorb</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</nav>
</div>
</div>
</nav>
<nav>
<div class="header_logo">
<a href="index.html">
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
</div>
<div class="header_desktop">
<h1>Second Harvest</h1>
<p>Gib Lebensmitteln eine zweite Chance</p>
<nav class="navbar" style="--items: 4;">
</div>
<div class="header_desktop">
<nav class="navbar-desktop" style="--items: 4;">
<a href="ueber_uns.html">Über uns</a>
<a href="produkte.html">Produkte</a>
<a href="warenkorb.html">Warenkorb</a>
<a href="kontakt.html">Kontakt</a>
</nav>
</div>
</nav>
</header>
<div class="content">
@ -40,7 +68,7 @@
</div>
<footer>
<nav class="navbar" style="--items: 2;">
<nav class="navbar-desktop" style="--items: 2;">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</nav>

BIN
public/pictures/.DS_Store vendored 100644
View File

Binary file not shown.

BIN
public/pictures/aepfel.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 140 KiB

BIN
public/pictures/aepfel_ohne_preis.png.avif 100644
View File

Binary file not shown.

BIN
public/pictures/kiwi.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 207 KiB

BIN
public/pictures/kiwi_ohne_preis.png.avif 100644
View File

Binary file not shown.

BIN
public/pictures/mobile_header.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/pictures/orangen.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 189 KiB

BIN
public/pictures/orangen_ohne_preis.png.avif 100644
View File

Binary file not shown.

65
public/produkte.html
View File

@ -5,22 +5,52 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Second Harvest</title>
<link rel="stylesheet" href="css/desktop.css">
<style>
@import 'css/mobile.css' (max-width: 480px);
@import 'css/desktop.css' (min-width: 480px);
</style>
<script src="javascript/warenkorb.js"></script>
</head>
<body>
<header>
<div class="header_logo">
<a href="index.html">
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
<nav>
<div class="navbar-mobile">
<div class="nav-container">
<input class="checkbox" type="checkbox" name="" id="" />
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
<h1>Second Harvest</h1>
<p>Gib Lebensmitteln eine zweite Chance</p>
<nav class="navbar" style="--items: 4;">
<nav class="navbar menu-items">
<a href="ueber_uns.html">Über uns</a>
<a href="produkte.html">Produkte</a>
<a href="warenkorb.html">Warenkorb</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</nav>
</div>
</div>
</nav>
<nav>
<div class="header_logo">
<a href="index.html">
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
</div>
<div class="header_desktop">
<h1>Second Harvest</h1>
<p>Gib Lebensmitteln eine zweite Chance</p>
</div>
<div class="header_desktop">
<nav class="navbar-desktop" style="--items: 4;">
<a href="ueber_uns.html">Über uns</a>
<a href="produkte.html">Produkte</a>
<a href="warenkorb.html">Warenkorb</a>
<a href="kontakt.html">Kontakt</a>
</nav>
</div>
</nav>
</header>
@ -29,7 +59,7 @@
</div>
<div class="parent">
<div class="produkte">
<img src="pictures/karotten.png" width = "300" height="300" alt="Karotten">
<img src="pictures/karotten.png" width="300" height="300" alt="Karotten" data-id="karotte">
<div class ="produktbottom">
<img src ="pictures/FoodAmpel_gelb.png" width = "50" height="50" alt="FoodAmpel gelb">
<select name="quantity">
@ -37,11 +67,13 @@
<option value="2">2 Stück</option>
<option value="3">3 Stück</option>
</select>
<a class="button_hinzufuegen" href="#" id="button1"></a>
<div id="notification"></div>
</div>
</div>
<div class="produkte">
<img src="pictures/sellerie.png" width = "300" height="300" alt="Sellerie">
<img src="pictures/sellerie.png" width = "300" height="300" alt="Sellerie" data-id="sellerie">
<div class ="produktbottom">
<img src ="pictures/FoodAmpel_gelb.png" width = "50" height="50" alt="FoodAmpel gelb">
<select name="quantity" >
@ -49,11 +81,12 @@
<option value="2">2 Stück</option>
<option value="3">3 Stück</option>
</select>
<a class="button_hinzufuegen" href="#" id="button2"></a>
</div>
</div>
<div class="produkte">
<img src="pictures/birnen.png" width = "300" height= "300" alt="Birnen">
<img src="pictures/birnen.png" width = "300" height= "300" alt="Birnen" data-id="birnen">
<div class ="produktbottom">
<img src ="pictures/FoodAmpel_rot.png" width = "50" height="50" alt="FoodAmpel gelb">
<select name="quantity">
@ -61,11 +94,12 @@
<option value="2">2 Stück</option>
<option value="3">3 Stück</option>
</select>
<a class="button_hinzufuegen" href="#" id="button3"></a>
</div>
</div>
<div class="produkte">
<img src="pictures/birnen.png" width = "300" height="300" alt="Kiwi">
<img src="pictures/kiwi.png" width = "300" height="300" alt="Kiwi" data-id="kiwi">
<div class ="produktbottom">
<img src ="pictures/FoodAmpel_gruen.png" width = "50" height="50" alt="FoodAmpel gelb">
<select name="quantity" >
@ -73,11 +107,12 @@
<option value="2">2 Stück</option>
<option value="3">3 Stück</option>
</select>
<a class="button_hinzufuegen" href="#" id="button4"></a>
</div>
</div>
<div class="produkte">
<img src="pictures/birnen.png" width = "300" height="300" alt="Orangen">
<img src="pictures/orangen.png" width = "300" height="300" alt="Orangen" data-id="orangen">
<div class ="produktbottom">
<img src ="pictures/FoodAmpel_gelb.png" width = "50" height="50" alt="FoodAmpel gelb">
<select name="quantity">
@ -85,11 +120,12 @@
<option value="2">2 Stück</option>
<option value="3">3 Stück</option>
</select>
<a class="button_hinzufuegen" href="#" id="button5"></a>
</div>
</div>
<div class="produkte">
<img src="pictures/birnen.png" width = "300" height="300" alt="Äpfel">
<img src="pictures/aepfel.png" width = "300" height="300" alt="Äpfel" data-id="aepfel">
<div class ="produktbottom">
<img src ="pictures/FoodAmpel_gelb.png" width ="50" height="50" alt="FoodAmpel gelb">
<select name="quantity">
@ -97,12 +133,13 @@
<option value="2">2 Stück</option>
<option value="3">3 Stück</option>
</select>
<a class="button_hinzufuegen" href="#" id="button6"></a>
</div>
</div>
</div>
<footer>
<nav class="navbar" style="--items: 2;">
<nav class="navbar-desktop" style="--items: 2;">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</nav>

36
public/ueber_uns.html
View File

@ -5,24 +5,52 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beschreibung der Seite</title>
<link rel="stylesheet" href="css/desktop.css">
<style>
@import 'css/mobile.css' (max-width: 480px);
@import 'css/desktop.css' (min-width: 480px);
</style>
</head>
<body class="ueberuns">
<header>
<nav>
<div class="navbar-mobile">
<div class="nav-container">
<input class="checkbox" type="checkbox" name="" id="" />
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
<nav class="navbar menu-items">
<a href="ueber_uns.html">Über uns</a>
<a href="produkte.html">Produkte</a>
<a href="warenkorb.html">Warenkorb</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</nav>
</div>
</div>
</nav>
<nav>
<div class="header_logo">
<a href="index.html">
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
</div>
<div class="header_desktop">
<h1>Second Harvest</h1>
<p>Gib Lebensmitteln eine zweite Chance</p>
<nav class="navbar" style="--items: 4;">
</div>
<div class="header_desktop">
<nav class="navbar-desktop" style="--items: 4;">
<a href="ueber_uns.html">Über uns</a>
<a href="produkte.html">Produkte</a>
<a href="warenkorb.html">Warenkorb</a>
<a href="kontakt.html">Kontakt</a>
</nav>
</div>
</nav>
</header>
<div class="content">
@ -50,7 +78,7 @@
<footer>
<nav class="navbar" style="--items: 2;">
<nav class="navbar-desktop" style="--items: 2;">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</nav>

48
public/warenkorb.html
View File

@ -5,29 +5,58 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Second Harvest</title>
<link rel="stylesheet" href="css/desktop.css">
<style>
@import 'css/mobile.css' (max-width: 480px);
@import 'css/desktop.css' (min-width: 480px);
</style>
<script src="javascript/warenkorb.js"></script>
</head>
<body>
<header>
<nav>
<div class="navbar-mobile">
<div class="nav-container">
<input class="checkbox" type="checkbox" name="" id="" />
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
<nav class="navbar menu-items">
<a href="ueber_uns.html">Über uns</a>
<a href="produkte.html">Produkte</a>
<a href="warenkorb.html">Warenkorb</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</nav>
</div>
</div>
</nav>
<nav>
<div class="header_logo">
<a href="index.html">
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
</div>
<div class="header_desktop">
<h1>Second Harvest</h1>
<p>Gib Lebensmitteln eine zweite Chance</p>
<nav class="navbar" style="--items: 4;">
</div>
<div class="header_desktop">
<nav class="navbar-desktop" style="--items: 4;">
<a href="ueber_uns.html">Über uns</a>
<a href="produkte.html">Produkte</a>
<a href="warenkorb.html">Warenkorb</a>
<a href="kontakt.html">Kontakt</a>
</nav>
</div>
</nav>
</header>
<div class="content">
<h1>Warenkorb</h1>
<div class="produkte_warenkorb">
<!-- <div class="produkte_warenkorb">
<img src="pictures/karotte_ohne_preis.webp" alt="karotten">
<div class="produkte_details">
<p><strong>Karotten 1kg</br>Kosten: 0,95€</strong></p>
@ -39,18 +68,15 @@
<input type="number" id="menue" min="0" pattern="[0-9]*">
</div>
<p class="gesamtbetrag"><strong>Betrag Gesamt (inkl. MwSt.) : xx€</strong></p>
</div>
</div> -->
<div class="warenkorb-container"></div>
<!-- <p class="lieferkosten">Lieferkosten +2.90€</br>Gesamtkosten (inkl. MwSt.):</p> -->
<div class="produkte_warenkorb">
</div>
<div class="produkte_warenkorb">
</div>
</div>
<footer>
<nav class="navbar" style="--items: 2;">
<nav class="navbar-desktop" style="--items: 2;">
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</nav>