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