aktueller Stand, funktioniert im Browser #2
Binary file not shown.
|
|
@ -5,25 +5,53 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Second Harvest</title>
|
<title>Second Harvest</title>
|
||||||
<link rel="stylesheet" href="css/desktop.css">
|
<style>
|
||||||
<script src="js/formchecker.js" async="true" ></script>
|
@import 'css/mobile.css' (max-width: 480px);
|
||||||
|
@import 'css/desktop.css' (min-width: 480px);
|
||||||
|
</style>
|
||||||
|
<script src="javascript/formchecker.js" async="true" ></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<div class="header_logo">
|
<nav>
|
||||||
<a href="index.html">
|
<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>
|
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
|
||||||
</div>
|
</div>
|
||||||
<h1>Second Harvest</h1>
|
<div class="header_desktop">
|
||||||
<p>Gib Lebensmitteln eine zweite Chance</p>
|
<h1>Second Harvest</h1>
|
||||||
<nav class="navbar" style="--items: 4;">
|
<p>Gib Lebensmitteln eine zweite Chance</p>
|
||||||
<a href="ueber_uns.html">Über uns</a>
|
</div>
|
||||||
<a href="produkte.html">Produkte</a>
|
<div class="header_desktop">
|
||||||
|
<nav class="navbar-desktop" style="--items: 4;">
|
||||||
<a href="warenkorb.html">Warenkorb</a>
|
<a href="ueber_uns.html">Über uns</a>
|
||||||
<a href="kontakt.html">Kontakt</a>
|
<a href="produkte.html">Produkte</a>
|
||||||
|
<a href="warenkorb.html">Warenkorb</a>
|
||||||
|
<a href="kontakt.html">Kontakt</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
@ -67,7 +95,7 @@
|
||||||
<tr>
|
<tr>
|
||||||
<th class="feld_vorn"><label for="plz"> PLZ</label></th>
|
<th class="feld_vorn"><label for="plz"> PLZ</label></th>
|
||||||
<th class="stern">*</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>
|
||||||
<tr>
|
<tr>
|
||||||
<th class="feld_vorn"> <label for="wohnort"> Wohnort</label></th>
|
<th class="feld_vorn"> <label for="wohnort"> Wohnort</label></th>
|
||||||
|
|
@ -99,12 +127,12 @@
|
||||||
|
|
||||||
|
|
||||||
<div class="button_abschließen_position">
|
<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>
|
</div>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<nav class="navbar" style="--items: 2;">
|
<nav class="navbar-desktop" style="--items: 2;">
|
||||||
<a href="impressum.html">Impressum</a>
|
<a href="impressum.html">Impressum</a>
|
||||||
<a href="datenschutz.html">Datenschutz</a>
|
<a href="datenschutz.html">Datenschutz</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -5,23 +5,51 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Bestellung fehlgeschlagen</title>
|
<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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<div class="header_logo">
|
<nav>
|
||||||
<a href="index.html">
|
<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>
|
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
|
||||||
</div>
|
</div>
|
||||||
<h1>Second Harvest</h1>
|
<div class="header_desktop">
|
||||||
<p>Gib Lebensmitteln eine zweite Chance</p>
|
<h1>Second Harvest</h1>
|
||||||
<nav class="navbar" style="--items: 4;">
|
<p>Gib Lebensmitteln eine zweite Chance</p>
|
||||||
<a href="ueber_uns.html">Über uns</a>
|
</div>
|
||||||
<a href="produkte.html">Produkte</a>
|
<div class="header_desktop">
|
||||||
|
<nav class="navbar-desktop" style="--items: 4;">
|
||||||
<a href="warenkorb.html">Warenkorb</a>
|
<a href="ueber_uns.html">Über uns</a>
|
||||||
<a href="kontakt.html">Kontakt</a>
|
<a href="produkte.html">Produkte</a>
|
||||||
|
<a href="warenkorb.html">Warenkorb</a>
|
||||||
|
<a href="kontakt.html">Kontakt</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
@ -36,7 +64,7 @@
|
||||||
|
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<nav class="navbar" style="--items: 2;">
|
<nav class="navbar-desktop" style="--items: 2;">
|
||||||
<a href="impressum.html">Impressum</a>
|
<a href="impressum.html">Impressum</a>
|
||||||
<a href="datenschutz.html">Datenschutz</a>
|
<a href="datenschutz.html">Datenschutz</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -5,23 +5,51 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Bestellung fehlgeschlagen</title>
|
<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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<div class="header_logo">
|
<nav>
|
||||||
<a href="index.html">
|
<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>
|
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
|
||||||
</div>
|
</div>
|
||||||
<h1>Second Harvest</h1>
|
<div class="header_desktop">
|
||||||
<p>Gib Lebensmitteln eine zweite Chance</p>
|
<h1>Second Harvest</h1>
|
||||||
<nav class="navbar" style="--items: 4;">
|
<p>Gib Lebensmitteln eine zweite Chance</p>
|
||||||
<a href="ueber_uns.html">Über uns</a>
|
</div>
|
||||||
<a href="produkte.html">Produkte</a>
|
<div class="header_desktop">
|
||||||
|
<nav class="navbar-desktop" style="--items: 4;">
|
||||||
<a href="warenkorb.html">Warenkorb</a>
|
<a href="ueber_uns.html">Über uns</a>
|
||||||
<a href="kontakt.html">Kontakt</a>
|
<a href="produkte.html">Produkte</a>
|
||||||
|
<a href="warenkorb.html">Warenkorb</a>
|
||||||
|
<a href="kontakt.html">Kontakt</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
@ -35,7 +63,7 @@
|
||||||
|
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<nav class="navbar" style="--items: 2;">
|
<nav class="navbar-desktop" style="--items: 2;">
|
||||||
<a href="impressum.html">Impressum</a>
|
<a href="impressum.html">Impressum</a>
|
||||||
<a href="datenschutz.html">Datenschutz</a>
|
<a href="datenschutz.html">Datenschutz</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -1,362 +1,510 @@
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
/* DESKTOP Version T4Web 0.1 */
|
||||||
font-family: Helvetica, Arial, sans-serif;
|
|
||||||
}
|
/* NONE FROM MOBILE */
|
||||||
|
|
||||||
body {
|
.header_mobile {
|
||||||
min-height: 100vh;
|
display:none;
|
||||||
padding: 0;
|
}
|
||||||
}
|
.header_mobilelogo {
|
||||||
|
display:none;
|
||||||
body::-webkit-scrollbar {
|
}
|
||||||
width: 10px
|
.navbar-mobile{
|
||||||
}
|
display:none;
|
||||||
|
}
|
||||||
body::-webkit-scrollbar-track {
|
|
||||||
background-color: white;
|
/* ALL-FORMAT */
|
||||||
}
|
|
||||||
|
* {
|
||||||
body::-webkit-scrollbar-thumb {
|
box-sizing: border-box;
|
||||||
background: #476B1C;
|
font-family: Helvetica, Arial, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
#hinweis {
|
||||||
background-color: #9BB558;
|
color: red;
|
||||||
|
}
|
||||||
}
|
|
||||||
|
/* BACKGROUND-IMAGE-FORMAT-DESKTOP */
|
||||||
header > h1 {
|
|
||||||
padding-top: 0.1em;
|
html body.index .content::before,
|
||||||
padding-left: 7em;
|
html body.datenschutz .content::before,
|
||||||
margin: 0;
|
html body.ueberuns .content::before,
|
||||||
font-size: 1.875em;
|
html body.kontakt .content::before,
|
||||||
}
|
html body.impressum .content::before {
|
||||||
|
content: "";
|
||||||
header > p {
|
background-image: url('../pictures/gemuese_transparent.png');
|
||||||
padding-left: 17.6em;
|
background-repeat: no-repeat;
|
||||||
margin-top: 0em;
|
background-position: center top;
|
||||||
margin-bottom: 0.5em;
|
background-size: 470px;
|
||||||
font-size: 0.75em;
|
position: absolute;
|
||||||
}
|
overflow: auto;
|
||||||
|
top: 20px;
|
||||||
.header_logo {
|
right: 0px;
|
||||||
float: left;
|
bottom: 0px;
|
||||||
margin-top: -18px;
|
left: 0px;
|
||||||
margin-bottom: -20px;
|
opacity: 0.2;
|
||||||
margin-left: -20px;
|
pointer-events: none;
|
||||||
transform: scale(0.8);
|
}
|
||||||
}
|
|
||||||
|
/* NAV-DESKTOP-FORMAT */
|
||||||
.navbar {
|
|
||||||
background-color: #476B1C;
|
.navbar-desktop {
|
||||||
display: grid;
|
background-color: #476B1C;
|
||||||
grid-template-columns: repeat(var(--items), 1fr);
|
display: grid;
|
||||||
width: 100%;
|
grid-template-columns: repeat(var(--items), 1fr);
|
||||||
}
|
width: 100%;
|
||||||
|
}
|
||||||
.navbar a {
|
|
||||||
text-align: center;
|
.navbar-desktop a {
|
||||||
text-decoration: none;
|
text-align: center;
|
||||||
color: white;
|
text-decoration: none;
|
||||||
padding: 0.5em 0 0.5em 0;
|
color: white;
|
||||||
}
|
padding: 0.5em 0 0.5em 0;
|
||||||
.aktuell a {
|
}
|
||||||
color: #f4eb49;
|
|
||||||
}
|
.navbar-desktop a:hover {
|
||||||
|
color: #f4eb49;
|
||||||
.content {
|
}
|
||||||
position: relative;
|
|
||||||
color: black;
|
/* BODY-FORMAT */
|
||||||
}
|
|
||||||
|
body {
|
||||||
.content p {
|
min-height: 100vh;
|
||||||
margin-top: 0.1em;
|
padding: 0;
|
||||||
margin-bottom: 0.1em;
|
}
|
||||||
}
|
|
||||||
|
body::-webkit-scrollbar {
|
||||||
.content :not(h1, strong) {
|
width: 10px
|
||||||
margin-left: 3.5em;
|
}
|
||||||
color: #606060;
|
|
||||||
}
|
body::-webkit-scrollbar-track {
|
||||||
|
background-color: white;
|
||||||
.content h1 {
|
}
|
||||||
text-align: center;
|
|
||||||
font-size: 1.875em;
|
body::-webkit-scrollbar-thumb {
|
||||||
font-weight: normal;
|
background: #476B1C;
|
||||||
margin-top: 0;
|
}
|
||||||
}
|
|
||||||
|
/* HEADER-FORMAT */
|
||||||
.content h2 {
|
|
||||||
font-size: 1em;
|
header {
|
||||||
text-align: center;
|
background-color: #9BB558;
|
||||||
}
|
|
||||||
.content a {
|
}
|
||||||
margin-left: 0em;
|
|
||||||
}
|
.header_desktop > h1 {
|
||||||
|
padding-top: 0.1em;
|
||||||
html body.index .content::before,
|
padding-left: 7em;
|
||||||
html body.datenschutz .content::before,
|
margin: 0;
|
||||||
html body.ueberuns .content::before,
|
font-size: 1.875em;
|
||||||
html body.kontakt .content::before,
|
}
|
||||||
html body.impressum .content::before{
|
|
||||||
content: "";
|
.header_desktop > p {
|
||||||
background-image: url('../pictures/gemuese_transparent.png');
|
padding-left: 17.6em;
|
||||||
background-repeat: no-repeat;
|
margin-top: 0em;
|
||||||
background-position: center top;
|
margin-bottom: 0.5em;
|
||||||
position: absolute;
|
font-size: 0.75em;
|
||||||
overflow: auto;
|
}
|
||||||
top: 0px;
|
|
||||||
right: 0px;
|
.header_logo {
|
||||||
bottom: 0px;
|
float: left;
|
||||||
left: 0px;
|
margin-top: -18px;
|
||||||
opacity: 0.2;
|
margin-bottom: -20px;
|
||||||
pointer-events: none;
|
margin-left: -20px;
|
||||||
}
|
transform: scale(0.8);
|
||||||
|
}
|
||||||
#aktuelle_auswahl {
|
|
||||||
margin-left: 2.7em;
|
/* CONTENT-FORMAT */
|
||||||
margin-bottom: -0.5em;
|
|
||||||
font-size: 1em;
|
.content {
|
||||||
}
|
position: relative;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
.beispiel_produkte img {
|
|
||||||
border: #606060 1px solid;
|
.content p {
|
||||||
height: 160px;
|
margin-top: 0.1em;
|
||||||
width: 150px;
|
margin-bottom: 0.1em;
|
||||||
margin-top: 1em;
|
}
|
||||||
margin-left: 2em;
|
|
||||||
|
.content :not(h1, strong, a) {
|
||||||
}
|
margin-left: 3.5em;
|
||||||
|
color: #606060;
|
||||||
#button_produkte {
|
}
|
||||||
background-color: #476B1C;
|
|
||||||
color: white;
|
.content h1 {
|
||||||
padding: 5px 20px;
|
text-align: center;
|
||||||
border-radius: 15px;
|
font-size: 1.875em;
|
||||||
text-align: center;
|
font-weight: normal;
|
||||||
text-decoration: none;
|
margin-top: 0;
|
||||||
display: inline-block;
|
}
|
||||||
font-size: 1em;
|
|
||||||
cursor: pointer;
|
.content h2 {
|
||||||
margin-left: -1em;
|
font-size: 1em;
|
||||||
}
|
text-align: center;
|
||||||
|
}
|
||||||
#balken {
|
|
||||||
background-color: #9BB558;
|
.content a {
|
||||||
height: 20px;
|
margin-left: 0em;
|
||||||
position: relative;
|
}
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
/* PRODUKTE-FORMAT */
|
||||||
width: 100%;
|
|
||||||
}
|
#aktuelle_auswahl {
|
||||||
|
margin-left: 2.7em;
|
||||||
input {
|
margin-bottom: -0.5em;
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-size: 1em;
|
||||||
color: #606060
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
.beispiel_produkte img {
|
||||||
label {
|
border: #606060 1px solid;
|
||||||
font-weight: normal;
|
height: 160px;
|
||||||
border: none;
|
width: 150px;
|
||||||
}
|
margin-top: 1em;
|
||||||
|
margin-left: 2em;
|
||||||
#anrede,
|
|
||||||
#titel,
|
}
|
||||||
#vorname,
|
|
||||||
#name,
|
.button_produkte {
|
||||||
#straße,
|
background-color: #476B1C;
|
||||||
#hausnummer,
|
color: #fff;
|
||||||
#plz,
|
padding: 5px 20px;
|
||||||
#wohnort,
|
border-radius: 15px;
|
||||||
#email {
|
text-align: center;
|
||||||
border: none;
|
text-decoration: none;
|
||||||
width:600px;
|
display: inline-block;
|
||||||
}
|
font-size: 1em;
|
||||||
|
cursor: pointer;
|
||||||
.bestellung_tabelle {
|
margin-left: -1em;
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
}
|
||||||
font-size: 0.8em;
|
|
||||||
color: #606060;
|
a:hover {
|
||||||
text-align: left;
|
color:#f4eb49;
|
||||||
margin-top:30px;
|
}
|
||||||
margin-left: 50px;
|
|
||||||
border: thin solid #606060;
|
|
||||||
border-collapse: collapse;
|
/* FOOTER-FORMAT */
|
||||||
}
|
|
||||||
|
#balken {
|
||||||
.bestellung_tabelle th {
|
background-color: #9BB558;
|
||||||
border: thin solid #606060;
|
height: 20px;
|
||||||
}
|
position: relative;
|
||||||
|
left: 0;
|
||||||
.bestellung_tabelle td {
|
bottom: 0;
|
||||||
border: thin solid #606060;
|
width: 100%;
|
||||||
width: 600px;
|
}
|
||||||
}
|
|
||||||
.bestellung_tabelle tr{
|
/* BESTELLUNG-FORMAT */
|
||||||
height: 25px;
|
|
||||||
}
|
input {
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
.stern {
|
color: #606060
|
||||||
width: 30px;
|
}
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
label {
|
||||||
.feld_vorn {
|
font-weight: normal;
|
||||||
width: 115px;
|
border: none;
|
||||||
}
|
}
|
||||||
#tabellenbeschreibung{
|
|
||||||
font-size: 0.8em;
|
#anrede,
|
||||||
margin-top: 6px;
|
#titel,
|
||||||
margin-left: 60px;
|
#vorname,
|
||||||
}
|
#name,
|
||||||
#gesamtkosten{
|
#straße,
|
||||||
font-size: 1em;
|
#hausnummer,
|
||||||
color: black;
|
#plz,
|
||||||
margin-top: 40px;
|
#wohnort,
|
||||||
margin-left: 50px;
|
#email {
|
||||||
}
|
border: none;
|
||||||
.checkboxen{
|
width: 600px;
|
||||||
display: inline-block;
|
}
|
||||||
font-size: 0.8em;
|
|
||||||
text-align:justify;
|
.bestellung_tabelle {
|
||||||
}
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
.checkbox_ausrichtung{
|
font-size: 0.8em;
|
||||||
margin-left: 50px;
|
color: #606060;
|
||||||
}
|
text-align: left;
|
||||||
#begrueßung_bestellung_abschließen{
|
margin-top: 30px;
|
||||||
font-size: 2em;
|
margin-left: 50px;
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
border: thin solid #606060;
|
||||||
color: black;
|
border-collapse: collapse;
|
||||||
text-align: center;
|
}
|
||||||
margin-top: 0.5px;
|
|
||||||
}
|
.bestellung_tabelle th {
|
||||||
.button_abschließen{
|
border: thin solid #606060;
|
||||||
background-color: #476B1C;
|
}
|
||||||
color: white;
|
|
||||||
padding: 3px 10px;
|
.bestellung_tabelle td {
|
||||||
border-radius: 6px;
|
border: thin solid #606060;
|
||||||
text-align: center;
|
width: 600px;
|
||||||
text-decoration: none;
|
}
|
||||||
display: inline-block;
|
|
||||||
font-size: 0.8em;
|
.bestellung_tabelle tr {
|
||||||
margin: 4px 2px;
|
height: 25px;
|
||||||
cursor: pointer;
|
}
|
||||||
font-weight: normal;
|
|
||||||
}
|
.stern {
|
||||||
.button_abschließen_position{
|
width: 30px;
|
||||||
margin-left: 100px;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.produktueberschrift{
|
.feld_vorn {
|
||||||
text-align: center;
|
width: 115px;
|
||||||
margin:50px;
|
}
|
||||||
}
|
|
||||||
|
#tabellenbeschreibung {
|
||||||
.parent{
|
font-size: 0.8em;
|
||||||
display: flex;
|
margin-top: 6px;
|
||||||
justify-content: space-around;
|
margin-left: 60px;
|
||||||
flex-wrap:wrap;
|
}
|
||||||
align-content: center;
|
|
||||||
}
|
#gesamtkosten {
|
||||||
|
font-size: 1em;
|
||||||
.produkte{
|
color: black;
|
||||||
display: flex;
|
margin-top: 40px;
|
||||||
border:#606060 3px solid;
|
margin-left: 50px;
|
||||||
display: inline-block;
|
}
|
||||||
margin: 25px;
|
|
||||||
}
|
.checkboxen {
|
||||||
|
display: inline-block;
|
||||||
.produktbottom{
|
font-size: 0.8em;
|
||||||
justify-content: space-between;
|
text-align: justify;
|
||||||
display: flex;
|
}
|
||||||
margin:10px;
|
|
||||||
}
|
.checkbox_ausrichtung {
|
||||||
|
margin-left: 50px;
|
||||||
.produkte_warenkorb{
|
}
|
||||||
position: relative;
|
|
||||||
max-width: 88%;
|
#begrueßung_bestellung_abschließen {
|
||||||
height: 165px;
|
font-size: 2em;
|
||||||
border: thin solid #606060;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
margin-top: 22.5px;
|
color: black;
|
||||||
margin-bottom: 22.5px;
|
text-align: center;
|
||||||
display: flex;
|
margin-top: 0.5px;
|
||||||
align-items: center;
|
}
|
||||||
}
|
|
||||||
|
.button_abschließen {
|
||||||
.produkte_warenkorb img {
|
background-color: #476B1C;
|
||||||
margin-right: -60px;
|
color: white;
|
||||||
height:60%;
|
padding: 3px 10px;
|
||||||
|
border-radius: 6px;
|
||||||
}
|
text-align: center;
|
||||||
.produkte_details {
|
text-decoration: none;
|
||||||
width: 150px;
|
display: inline-block;
|
||||||
display: block;
|
font-size: 0.8em;
|
||||||
font-size: 0.8em;
|
margin: 4px 2px;
|
||||||
margin-top: -40px;
|
cursor: pointer;
|
||||||
}
|
font-weight: normal;
|
||||||
.button_mit_menue{
|
}
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
.button_abschließen_position {
|
||||||
position:absolute;
|
margin-left: 100px;
|
||||||
bottom: 50px;
|
}
|
||||||
right: 30px;
|
|
||||||
|
.produktueberschrift {
|
||||||
}
|
text-align: center;
|
||||||
.button_entfernen{
|
margin: 50px;
|
||||||
background-color: #ebebeb;
|
}
|
||||||
border: thin solid black;
|
|
||||||
color: black;
|
.parent {
|
||||||
width: 115px;
|
display: flex;
|
||||||
height: 31px;
|
justify-content: space-around;
|
||||||
padding: 6px;
|
flex-wrap: wrap;
|
||||||
border-radius: 3px;
|
align-content: center;
|
||||||
text-align: center;
|
}
|
||||||
text-decoration: none;
|
|
||||||
display: inline-block;
|
.produkte {
|
||||||
font-size: 0.8em;
|
display: flex;
|
||||||
margin: 4px 2px;
|
border: #606060 3px solid;
|
||||||
cursor: pointer;
|
display: inline-block;
|
||||||
font-weight: normal;
|
margin: 25px;
|
||||||
|
}
|
||||||
}
|
|
||||||
#menue{
|
.produktbottom {
|
||||||
width: 35px;
|
justify-content: space-between;
|
||||||
height: 25px;
|
display: flex;
|
||||||
margin-left: 10px;
|
margin: 10px;
|
||||||
}
|
}
|
||||||
.gesamtbetrag{
|
|
||||||
position: absolute;
|
.produktbottom a {
|
||||||
font-size: 1em;
|
position: relative;
|
||||||
bottom: 15px;
|
}
|
||||||
right: 15px;
|
|
||||||
}
|
.produkte_warenkorb {
|
||||||
a:hover{
|
position: relative;
|
||||||
color: #f4eb49;
|
max-width: 88%;
|
||||||
}
|
height: 165px;
|
||||||
.gesamtbetrag{
|
border: thin solid #606060;
|
||||||
position: absolute;
|
margin-top: 22.5px;
|
||||||
font-size: 1em;
|
margin-bottom: 22.5px;
|
||||||
bottom: 15px;
|
display: flex;
|
||||||
right: 15px;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.foodampel {
|
|
||||||
display: flex;
|
.produkte_warenkorb img {
|
||||||
align-items: top;
|
margin-right: 0px;
|
||||||
|
height: 60%;
|
||||||
}
|
|
||||||
|
}
|
||||||
.foodampel img {
|
|
||||||
height: 120px;
|
.content .produkte_details {
|
||||||
margin-left: -0.7em;
|
color: black;
|
||||||
}
|
font-weight: bold;
|
||||||
|
width: 150px;
|
||||||
.foodampel p {
|
display: block;
|
||||||
margin-left: 0.65em;
|
font-size: 0.8em;
|
||||||
margin-top: 0.8em;
|
margin-top: -40px;
|
||||||
|
}
|
||||||
}
|
|
||||||
#hinweis{
|
.button_mit_menue {
|
||||||
color: red;
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -5,23 +5,51 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Datenschutzerklärung</title>
|
<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>
|
</head>
|
||||||
|
|
||||||
<body class="datenschutz">
|
<body class="datenschutz">
|
||||||
<header>
|
<header>
|
||||||
<div class="header_logo">
|
<nav>
|
||||||
<a href="index.html">
|
<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>
|
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
|
||||||
</div>
|
</div>
|
||||||
<h1>Second Harvest</h1>
|
<div class="header_desktop">
|
||||||
<p>Gib Lebensmitteln eine zweite Chance</p>
|
<h1>Second Harvest</h1>
|
||||||
<nav class="navbar" style="--items: 4;">
|
<p>Gib Lebensmitteln eine zweite Chance</p>
|
||||||
<a href="ueber_uns.html">Über uns</a>
|
</div>
|
||||||
<a href="produkte.html">Produkte</a>
|
<div class="header_desktop">
|
||||||
|
<nav class="navbar-desktop" style="--items: 4;">
|
||||||
<a href="warenkorb.html">Warenkorb</a>
|
<a href="ueber_uns.html">Über uns</a>
|
||||||
<a href="kontakt.html">Kontakt</a>
|
<a href="produkte.html">Produkte</a>
|
||||||
|
<a href="warenkorb.html">Warenkorb</a>
|
||||||
|
<a href="kontakt.html">Kontakt</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
@ -285,7 +313,7 @@
|
||||||
|
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<nav class="navbar" style="--items: 2;">
|
<nav class="navbar-desktop" style="--items: 2;">
|
||||||
<a href="impressum.html">Impressum</a>
|
<a href="impressum.html">Impressum</a>
|
||||||
<a class="aktuell" href="datenschutz.html">Datenschutz</a>
|
<a class="aktuell" href="datenschutz.html">Datenschutz</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -5,23 +5,51 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Beschreibung der Seite</title>
|
<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>
|
</head>
|
||||||
|
|
||||||
<body class="impressum">
|
<body class="impressum">
|
||||||
<header>
|
<header>
|
||||||
<div class="header_logo">
|
<nav>
|
||||||
<a href="index.html">
|
<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>
|
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
|
||||||
</div>
|
</div>
|
||||||
<h1>Second Harvest</h1>
|
<div class="header_desktop">
|
||||||
<p>Gib Lebensmitteln eine zweite Chance</p>
|
<h1>Second Harvest</h1>
|
||||||
<nav class="navbar" style="--items: 4;">
|
<p>Gib Lebensmitteln eine zweite Chance</p>
|
||||||
<a href="ueber_uns.html">Über uns</a>
|
</div>
|
||||||
<a href="produkte.html">Produkte</a>
|
<div class="header_desktop">
|
||||||
|
<nav class="navbar-desktop" style="--items: 4;">
|
||||||
<a href="warenkorb.html">Warenkorb</a>
|
<a href="ueber_uns.html">Über uns</a>
|
||||||
<a href="kontakt.html">Kontakt</a>
|
<a href="produkte.html">Produkte</a>
|
||||||
|
<a href="warenkorb.html">Warenkorb</a>
|
||||||
|
<a href="kontakt.html">Kontakt</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
@ -48,7 +76,7 @@
|
||||||
|
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<nav class="navbar" style="--items: 2;">
|
<nav class="navbar-desktop" style="--items: 2;">
|
||||||
<a href="impressum.html">Impressum</a>
|
<a href="impressum.html">Impressum</a>
|
||||||
<a href="datenschutz.html">Datenschutz</a>
|
<a href="datenschutz.html">Datenschutz</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -5,23 +5,50 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Second Harvest</title>
|
<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>
|
</head>
|
||||||
|
|
||||||
<body class="index">
|
<body class="index">
|
||||||
<header>
|
<header>
|
||||||
<div class="header_logo">
|
<nav>
|
||||||
<a href="index.html">
|
<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>
|
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
|
||||||
</div>
|
</div>
|
||||||
<h1>Second Harvest</h1>
|
<div class="header_desktop">
|
||||||
<p>Gib Lebensmitteln eine zweite Chance</p>
|
<h1>Second Harvest</h1>
|
||||||
<nav class="navbar" style="--items: 4;">
|
<p>Gib Lebensmitteln eine zweite Chance</p>
|
||||||
<a href="ueber_uns.html">Über uns</a>
|
</div>
|
||||||
<a href="produkte.html">Produkte</a>
|
<div class="header_desktop">
|
||||||
|
<nav class="navbar-desktop" style="--items: 4;">
|
||||||
<a href="warenkorb.html">Warenkorb</a>
|
<a href="ueber_uns.html">Über uns</a>
|
||||||
<a href="kontakt.html">Kontakt</a>
|
<a href="produkte.html">Produkte</a>
|
||||||
|
<a href="warenkorb.html">Warenkorb</a>
|
||||||
|
<a href="kontakt.html">Kontakt</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
@ -32,11 +59,23 @@
|
||||||
verschwenden.</p>
|
verschwenden.</p>
|
||||||
<br />
|
<br />
|
||||||
<p>Alle Produkte auf unserer Seite sind mit drei Fähnchen gekennzeichnet.</p>
|
<p>Alle Produkte auf unserer Seite sind mit drei Fähnchen gekennzeichnet.</p>
|
||||||
<div class="foodampel">
|
|
||||||
<img src="pictures/Foodampel_transparent.png">
|
<table>
|
||||||
<p class="foodampel">muss sofort verarbeitet werden</br></br>kann ein paar Tage liegen</br></br>lange
|
<tr>
|
||||||
Haltbarkeit</p>
|
<td><img src="pictures/FoodAmpel_rot.png"></td>
|
||||||
</div>
|
<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
|
<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
|
etwas verbrauchen musst.<br />Bestellungen, die <strong>bis 10 Uhr</strong> bei uns eingehen, werden
|
||||||
<strong>noch am selben Tag</strong>
|
<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/karotten.png" alt="Karotten"></a>
|
||||||
<a class="beispiel_produkte" href="produkte.html">
|
<a class="beispiel_produkte" href="produkte.html">
|
||||||
<img src="pictures/sellerie.png" alt="Sellerie"></a>
|
<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>
|
<h2>Viel Spaß bei Deinem Einkauf. Dein Second Harvest Team.</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<nav class="navbar" style="--items: 2;">
|
<nav class="navbar-desktop" style="--items: 2;">
|
||||||
<a href="impressum.html">Impressum</a>
|
<a href="impressum.html">Impressum</a>
|
||||||
<a href="datenschutz.html">Datenschutz</a>
|
<a href="datenschutz.html">Datenschutz</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -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');
|
||||||
|
}
|
||||||
|
|
@ -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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -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');
|
|
||||||
}
|
|
||||||
|
|
@ -5,23 +5,51 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Beschreibung der Seite</title>
|
<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>
|
</head>
|
||||||
|
|
||||||
<body class="kontakt">
|
<body class="kontakt">
|
||||||
<header>
|
<header>
|
||||||
<div class="header_logo">
|
<nav>
|
||||||
<a href="index.html">
|
<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>
|
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
|
||||||
</div>
|
</div>
|
||||||
<h1>Second Harvest</h1>
|
<div class="header_desktop">
|
||||||
<p>Gib Lebensmitteln eine zweite Chance</p>
|
<h1>Second Harvest</h1>
|
||||||
<nav class="navbar" style="--items: 4;">
|
<p>Gib Lebensmitteln eine zweite Chance</p>
|
||||||
<a href="ueber_uns.html">Über uns</a>
|
</div>
|
||||||
<a href="produkte.html">Produkte</a>
|
<div class="header_desktop">
|
||||||
|
<nav class="navbar-desktop" style="--items: 4;">
|
||||||
<a href="warenkorb.html">Warenkorb</a>
|
<a href="ueber_uns.html">Über uns</a>
|
||||||
<a href="kontakt.html">Kontakt</a>
|
<a href="produkte.html">Produkte</a>
|
||||||
|
<a href="warenkorb.html">Warenkorb</a>
|
||||||
|
<a href="kontakt.html">Kontakt</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
@ -40,7 +68,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<nav class="navbar" style="--items: 2;">
|
<nav class="navbar-desktop" style="--items: 2;">
|
||||||
<a href="impressum.html">Impressum</a>
|
<a href="impressum.html">Impressum</a>
|
||||||
<a href="datenschutz.html">Datenschutz</a>
|
<a href="datenschutz.html">Datenschutz</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
Binary file not shown.
|
|
@ -5,31 +5,61 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Second Harvest</title>
|
<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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<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">
|
<div class="header_logo">
|
||||||
<a href="index.html">
|
<a href="index.html">
|
||||||
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
|
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
|
||||||
</div>
|
</div>
|
||||||
<h1>Second Harvest</h1>
|
<div class="header_desktop">
|
||||||
<p>Gib Lebensmitteln eine zweite Chance</p>
|
<h1>Second Harvest</h1>
|
||||||
<nav class="navbar" style="--items: 4;">
|
<p>Gib Lebensmitteln eine zweite Chance</p>
|
||||||
<a href="ueber_uns.html">Über uns</a>
|
</div>
|
||||||
<a href="produkte.html">Produkte</a>
|
<div class="header_desktop">
|
||||||
<a href="warenkorb.html">Warenkorb</a>
|
<nav class="navbar-desktop" style="--items: 4;">
|
||||||
<a href="kontakt.html">Kontakt</a>
|
<a href="ueber_uns.html">Über uns</a>
|
||||||
</nav>
|
<a href="produkte.html">Produkte</a>
|
||||||
</header>
|
<a href="warenkorb.html">Warenkorb</a>
|
||||||
|
<a href="kontakt.html">Kontakt</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h1> Produkte</h1>
|
<h1> Produkte</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="parent">
|
<div class="parent">
|
||||||
<div class="produkte">
|
<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">
|
<div class ="produktbottom">
|
||||||
<img src ="pictures/FoodAmpel_gelb.png" width = "50" height="50" alt="FoodAmpel gelb">
|
<img src ="pictures/FoodAmpel_gelb.png" width = "50" height="50" alt="FoodAmpel gelb">
|
||||||
<select name="quantity">
|
<select name="quantity">
|
||||||
|
|
@ -37,11 +67,13 @@
|
||||||
<option value="2">2 Stück</option>
|
<option value="2">2 Stück</option>
|
||||||
<option value="3">3 Stück</option>
|
<option value="3">3 Stück</option>
|
||||||
</select>
|
</select>
|
||||||
|
<a class="button_hinzufuegen" href="#" id="button1"></a>
|
||||||
|
<div id="notification"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="produkte">
|
<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">
|
<div class ="produktbottom">
|
||||||
<img src ="pictures/FoodAmpel_gelb.png" width = "50" height="50" alt="FoodAmpel gelb">
|
<img src ="pictures/FoodAmpel_gelb.png" width = "50" height="50" alt="FoodAmpel gelb">
|
||||||
<select name="quantity" >
|
<select name="quantity" >
|
||||||
|
|
@ -49,11 +81,12 @@
|
||||||
<option value="2">2 Stück</option>
|
<option value="2">2 Stück</option>
|
||||||
<option value="3">3 Stück</option>
|
<option value="3">3 Stück</option>
|
||||||
</select>
|
</select>
|
||||||
|
<a class="button_hinzufuegen" href="#" id="button2"></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="produkte">
|
<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">
|
<div class ="produktbottom">
|
||||||
<img src ="pictures/FoodAmpel_rot.png" width = "50" height="50" alt="FoodAmpel gelb">
|
<img src ="pictures/FoodAmpel_rot.png" width = "50" height="50" alt="FoodAmpel gelb">
|
||||||
<select name="quantity">
|
<select name="quantity">
|
||||||
|
|
@ -61,11 +94,12 @@
|
||||||
<option value="2">2 Stück</option>
|
<option value="2">2 Stück</option>
|
||||||
<option value="3">3 Stück</option>
|
<option value="3">3 Stück</option>
|
||||||
</select>
|
</select>
|
||||||
|
<a class="button_hinzufuegen" href="#" id="button3"></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="produkte">
|
<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">
|
<div class ="produktbottom">
|
||||||
<img src ="pictures/FoodAmpel_gruen.png" width = "50" height="50" alt="FoodAmpel gelb">
|
<img src ="pictures/FoodAmpel_gruen.png" width = "50" height="50" alt="FoodAmpel gelb">
|
||||||
<select name="quantity" >
|
<select name="quantity" >
|
||||||
|
|
@ -73,11 +107,12 @@
|
||||||
<option value="2">2 Stück</option>
|
<option value="2">2 Stück</option>
|
||||||
<option value="3">3 Stück</option>
|
<option value="3">3 Stück</option>
|
||||||
</select>
|
</select>
|
||||||
|
<a class="button_hinzufuegen" href="#" id="button4"></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="produkte">
|
<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">
|
<div class ="produktbottom">
|
||||||
<img src ="pictures/FoodAmpel_gelb.png" width = "50" height="50" alt="FoodAmpel gelb">
|
<img src ="pictures/FoodAmpel_gelb.png" width = "50" height="50" alt="FoodAmpel gelb">
|
||||||
<select name="quantity">
|
<select name="quantity">
|
||||||
|
|
@ -85,11 +120,12 @@
|
||||||
<option value="2">2 Stück</option>
|
<option value="2">2 Stück</option>
|
||||||
<option value="3">3 Stück</option>
|
<option value="3">3 Stück</option>
|
||||||
</select>
|
</select>
|
||||||
|
<a class="button_hinzufuegen" href="#" id="button5"></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="produkte">
|
<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">
|
<div class ="produktbottom">
|
||||||
<img src ="pictures/FoodAmpel_gelb.png" width ="50" height="50" alt="FoodAmpel gelb">
|
<img src ="pictures/FoodAmpel_gelb.png" width ="50" height="50" alt="FoodAmpel gelb">
|
||||||
<select name="quantity">
|
<select name="quantity">
|
||||||
|
|
@ -97,12 +133,13 @@
|
||||||
<option value="2">2 Stück</option>
|
<option value="2">2 Stück</option>
|
||||||
<option value="3">3 Stück</option>
|
<option value="3">3 Stück</option>
|
||||||
</select>
|
</select>
|
||||||
|
<a class="button_hinzufuegen" href="#" id="button6"></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<nav class="navbar" style="--items: 2;">
|
<nav class="navbar-desktop" style="--items: 2;">
|
||||||
<a href="impressum.html">Impressum</a>
|
<a href="impressum.html">Impressum</a>
|
||||||
<a href="datenschutz.html">Datenschutz</a>
|
<a href="datenschutz.html">Datenschutz</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -5,23 +5,51 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Beschreibung der Seite</title>
|
<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>
|
</head>
|
||||||
|
|
||||||
<body class="ueberuns">
|
<body class="ueberuns">
|
||||||
<header>
|
<header>
|
||||||
<div class="header_logo">
|
<nav>
|
||||||
<a href="index.html">
|
<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>
|
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
|
||||||
</div>
|
</div>
|
||||||
<h1>Second Harvest</h1>
|
<div class="header_desktop">
|
||||||
<p>Gib Lebensmitteln eine zweite Chance</p>
|
<h1>Second Harvest</h1>
|
||||||
<nav class="navbar" style="--items: 4;">
|
<p>Gib Lebensmitteln eine zweite Chance</p>
|
||||||
<a href="ueber_uns.html">Über uns</a>
|
</div>
|
||||||
<a href="produkte.html">Produkte</a>
|
<div class="header_desktop">
|
||||||
|
<nav class="navbar-desktop" style="--items: 4;">
|
||||||
<a href="warenkorb.html">Warenkorb</a>
|
<a href="ueber_uns.html">Über uns</a>
|
||||||
<a href="kontakt.html">Kontakt</a>
|
<a href="produkte.html">Produkte</a>
|
||||||
|
<a href="warenkorb.html">Warenkorb</a>
|
||||||
|
<a href="kontakt.html">Kontakt</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
@ -50,7 +78,7 @@
|
||||||
|
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<nav class="navbar" style="--items: 2;">
|
<nav class="navbar-desktop" style="--items: 2;">
|
||||||
<a href="impressum.html">Impressum</a>
|
<a href="impressum.html">Impressum</a>
|
||||||
<a href="datenschutz.html">Datenschutz</a>
|
<a href="datenschutz.html">Datenschutz</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -5,29 +5,58 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Second Harvest</title>
|
<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>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<div class="header_logo">
|
<nav>
|
||||||
<a href="index.html">
|
<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>
|
<img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
|
||||||
</div>
|
</div>
|
||||||
<h1>Second Harvest</h1>
|
<div class="header_desktop">
|
||||||
<p>Gib Lebensmitteln eine zweite Chance</p>
|
<h1>Second Harvest</h1>
|
||||||
<nav class="navbar" style="--items: 4;">
|
<p>Gib Lebensmitteln eine zweite Chance</p>
|
||||||
<a href="ueber_uns.html">Über uns</a>
|
</div>
|
||||||
<a href="produkte.html">Produkte</a>
|
<div class="header_desktop">
|
||||||
|
<nav class="navbar-desktop" style="--items: 4;">
|
||||||
<a href="warenkorb.html">Warenkorb</a>
|
<a href="ueber_uns.html">Über uns</a>
|
||||||
<a href="kontakt.html">Kontakt</a>
|
<a href="produkte.html">Produkte</a>
|
||||||
|
<a href="warenkorb.html">Warenkorb</a>
|
||||||
|
<a href="kontakt.html">Kontakt</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h1>Warenkorb</h1>
|
<h1>Warenkorb</h1>
|
||||||
<div class="produkte_warenkorb">
|
<!-- <div class="produkte_warenkorb">
|
||||||
<img src="pictures/karotte_ohne_preis.webp" alt="karotten">
|
<img src="pictures/karotte_ohne_preis.webp" alt="karotten">
|
||||||
<div class="produkte_details">
|
<div class="produkte_details">
|
||||||
<p><strong>Karotten 1kg</br>Kosten: 0,95€</strong></p>
|
<p><strong>Karotten 1kg</br>Kosten: 0,95€</strong></p>
|
||||||
|
|
@ -39,18 +68,15 @@
|
||||||
<input type="number" id="menue" min="0" pattern="[0-9]*">
|
<input type="number" id="menue" min="0" pattern="[0-9]*">
|
||||||
</div>
|
</div>
|
||||||
<p class="gesamtbetrag"><strong>Betrag Gesamt (inkl. MwSt.) : xx€</strong></p>
|
<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>
|
</div>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<nav class="navbar" style="--items: 2;">
|
<nav class="navbar-desktop" style="--items: 2;">
|
||||||
<a href="impressum.html">Impressum</a>
|
<a href="impressum.html">Impressum</a>
|
||||||
<a href="datenschutz.html">Datenschutz</a>
|
<a href="datenschutz.html">Datenschutz</a>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue