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

Compare commits

base: 2210892:master
Branches Tags
2210892:master
2210892:KTS_PHP_Probe
2210892:robinNeu
2210892:KTS
..
compare: 2210892:KTS
Branches Tags
2210892:master
2210892:KTS_PHP_Probe
2210892:robinNeu
2210892:KTS

No commits in common. "master" and "KTS" have entirely different histories.
master ... KTS

15 changed files with 176 additions and 450 deletions
Show Stats Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

12
public/bestellformular.html
View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bestellungen</title>
<style>
@import 'css/mobile.css' (max-width: 800px);
@import 'css/desktop.css' (min-width: 801px);
@import 'css/mobile.css' (max-width: 480px);
@import 'css/desktop.css' (min-width: 481px);
</style>
<script src="javascript/formchecker.js" async="true" ></script>
</head>
@ -67,7 +67,7 @@
<h1 id="begrueßung_bestellung_abschließen">Bestellung abschließen</h1>
<div id="fehlerbox"></div>
<form name="Bestellformular" >
<table class="bestellung_tabelle">
<tr>
@ -124,20 +124,20 @@
<p id="gesamtkosten"><strong>Die Gesamtkosten (inkl. MwSt.)</br>belaufen sich auf: 5,30€</strong>
<p>
<input id="barzahlung_box" type="checkbox" class="checkbox_ausrichtung">
<input type="checkbox" class="checkbox_ausrichtung">
<label for="checkbox_barzahlung" class="checkboxen">Ich akzeptiere die Barzahlung und habe
den</br>Rechnungsbetrag bei
Lieferung verfügbar.</label>
</p>
<p>
<input id="datenschutz_box" type="checkbox" class="checkbox_ausrichtung">
<input type="checkbox" class="checkbox_ausrichtung">
<label for="checkbox_datenschutzerklärung" class="checkboxen">Ich akzeptiere die Bestimmungen der</label>
<a href="datenschutz.html" class="checkboxen">Datenschutzerklärung.</a>
</p>
<div class="button_abschließen_position">
<p><a id="bestellbutton" class="button_abschließen" href="bestellung_erfolgreich.html" >Kostenpflichtig bestellen</a></p>
<p><a class="button_abschließen" onclick="checkform()" href="bestellung_erfolgreich.html" >Kostenpflichtig bestellen</a></p>
</div>

4
public/bestellung_erfolgreich.html
View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bestellung erfolgreich</title>
<style>
@import 'css/mobile.css' (max-width: 800px);
@import 'css/desktop.css' (min-width: 801px);
@import 'css/mobile.css' (max-width: 480px);
@import 'css/desktop.css' (min-width: 481px);
</style>
</head>

4
public/bestellung_fehlgeschlagen.html
View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bestellung fehlgeschlagen</title>
<style>
@import 'css/mobile.css' (max-width: 800px);
@import 'css/desktop.css' (min-width: 801px);
@import 'css/mobile.css' (max-width: 480px);
@import 'css/desktop.css' (min-width: 481px);
</style>
</head>

15
public/css/desktop.css
View File

@ -146,11 +146,6 @@
font-size: 1em;
text-align: center;
}
.content h3{
color: black;
margin-bottom: 0.2em;
}
.content a {
margin-left: 0em;
@ -516,13 +511,3 @@
cursor: pointer;
font-weight: normal;
}
#fehlerbox{
text-align: center;
color: red;
display: none;
}
.mobile_ansicht{
display:none;
}

142
public/css/mobile.css
View File

@ -81,7 +81,7 @@
.navbar-mobile {
display:grid;
grid-template-columns: 60px auto auto;
grid-template-rows: 65px;
grid-template-rows: 60px;
}
.navbar-mobile .nav-container a {
@ -151,7 +151,7 @@
margin-top: 60px;
padding-top: 15px;
background-color: #476B1C;
height: 400%;
height: 40vh;
width: 400%;
transform: translate(-150%);
display: flex;
@ -160,8 +160,6 @@
padding-left: 50px;
transition: transform 0.5s ease-in-out;
text-align: left;
position: relative;
z-index: 9999;
}
.nav-container input[type="checkbox"]:checked ~ .menu-items {
@ -209,7 +207,7 @@
margin-left: 2%;
font-size:1.0em;
margin-top:0.5em;
}
.header-mobile-text p {
@ -235,7 +233,7 @@
}
.content :not(h1, strong, a) {
margin-left: 0em;
margin-left: 3.5em;
color: #606060;
}
@ -250,11 +248,6 @@
font-size: 1em;
text-align: center;
}
.content h3{
color: black;
margin-bottom: 0.2em;
}
.content a {
margin-left: 0em;
@ -307,7 +300,7 @@
#wohnort,
#email {
border: none;
width: auto;
width: 600px;
}
.bestellung_tabelle {
@ -319,7 +312,6 @@
margin-left: 50px;
border: thin solid #606060;
border-collapse: collapse;
width: 80%;
}
.bestellung_tabelle th {
@ -328,7 +320,7 @@
.bestellung_tabelle td {
border: thin solid #606060;
width: auto;
width: 600px;
}
.bestellung_tabelle tr {
@ -422,65 +414,41 @@
position: relative;
}
.content .produkte_warenkorb {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
border: thin solid black;
margin-left: 4em;
margin-top: 20px;
align-items: center;
justify-items: left;
.produkte_warenkorb {
position: relative;
}
.content .produkte_warenkorb .bild_mobil img {
max-width: 88%;
height: 165px;
border: thin solid #606060;
margin-top: 22.5px;
margin-bottom: 22.5px;
display: flex;
align-items: center;
}
.content .produkte_details {
display: flex;
flex-direction: column;
font-size: 0.8em;
margin-top: -25px;
justify-content: space-between;
width: 95%;
}
.content .produkte_details p {
display: inline-block;
}
.content .produkte_warenkorb .produkte_details .eingabefeld_entfernen {
align-self: flex-end;
margin-top: -30px;
.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_mit_menue p{
margin-left: 10px;
}
#menue1,
#menue2,
#menue3,
#menue4,
#menue5,
#menue6 {
width: 35px;
height: 25px;
margin-left: 10px;
}
.button_entfernen {
background-color: #ebebeb;
border: thin solid black;
@ -496,21 +464,33 @@
margin: 4px 2px;
cursor: pointer;
font-weight: normal;
}
#menue {
width: 35px;
height: 25px;
margin-left: 10px;
}
.content .gesamtbetrag1,
.content .gesamtbetrag2,
.content .gesamtbetrag3,
.content .gesamtbetrag4,
.content .gesamtbetrag5,
.content .gesamtbetrag6 {
.content .gesamtbetrag {
font-weight: bold;
color: black;
position: absolute;
font-size: 1em;
margin-left: 0;
bottom: 15px;
right: 15px;
}
.gesamtbetrag {
position: absolute;
font-size: 1em;
bottom: 15px;
right: 15px;
}
.button_hinzufuegen {
background-color: #9BB558;
color: white;
@ -553,8 +533,8 @@
position: relative;
bottom: 0;
width: 400px;
padding-left: 30px;
margin-top: 120px;
padding-left: 50px;
margin-top: 22.5px;
margin-left: auto;
margin-bottom: 22.5px;
display: grid;
@ -584,22 +564,19 @@
color: black;
display: inline-block;
}
.content .gesamtkosten_text {
.content .gesamtkosten_text{
color: black;
display: inline-block;
text-align: left;
margin-left: 0;
margin-right: 63px;
}
.content .gesamtpreis {
.content .gesamtpreis{
color: black;
display: inline-block;
margin-left: 0;
}
.content .button_bestellung_abschließen {
background-color: #476B1C;
color: white;
@ -614,19 +591,4 @@
font-weight: normal;
}
.content .mobile_ansicht{
position: relative;
z-index: 0;
margin-left: -55px;
}
#fehlerbox{
text-align: center;
color: red;
display: none;
}
.desktop_ansicht{
display: none;
}

10
public/datenschutz.html
View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Datenschutzerklärung</title>
<style>
@import 'css/mobile.css' (max-width: 800px);
@import 'css/desktop.css' (min-width: 801px);
@import 'css/mobile.css' (max-width: 480px);
@import 'css/desktop.css' (min-width: 481px);
</style>
</head>
@ -80,13 +80,13 @@
</p>
<p>Stand: 6. April 2023</p>
<h3>Verantwortlicher</h3>
<p>
WEB A4 -Team</br>
<ul>
WEB A4 -Team</br>
Paul-Wittsack-Straße 10</br>
68163 Mannheim</br>
E-Mail-Adresse:</br>
info@secondharvest.com</br>
</p>
</ul>
<h3>Übersicht der Verarbeitungen</h3>
<p>Die nachfolgende Übersicht fasst die Arten der verarbeiteten Daten und die
Zwecke ihrer Verarbeitung zusammen und verweist auf die betroffenen Personen.

4
public/impressum.html
View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Impressum</title>
<style>
@import 'css/mobile.css' (max-width: 800px);
@import 'css/desktop.css' (min-width: 801px);
@import 'css/mobile.css' (max-width: 480px);
@import 'css/desktop.css' (min-width: 481px);
</style>
</head>

4
public/index.html
View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Second Harvest</title>
<style>
@import 'css/mobile.css' (max-width: 800px);
@import 'css/desktop.css' (min-width: 801px);
@import 'css/mobile.css' (max-width: 480px);
@import 'css/desktop.css' (min-width: 481px);
</style>
</head>
<body class="index">

38
public/javascript/formchecker.js
View File

@ -3,8 +3,7 @@ let x = Number(localStorage.getItem("gesamtpreis")).toFixed(2);
let y = document.getElementById("gesamtkosten");
y.innerHTML = "Die Gesamtkosten (inkl. MwSt.) belaufen sich auf: " + x + "€";
function checkform(event) {
let anrede = document.getElementById('anrede').value;
function checkform() {
let vorname = document.getElementById('vorname').value;
let name = document.getElementById('name').value;
let straße = document.getElementById('straße').value;
@ -13,30 +12,11 @@ function checkform(event) {
let wohnort = document.getElementById('wohnort').value;
let email = document.getElementById('email').value;
fehlerbox.innerHTML = 'Fehler: <br>';
if(!anrede || /^[A-Z][a-z]{1,}$/.test(anrede) === false) fehlerbox.innerHTML += 'Bitte teilen Sie uns Ihre Anrede mit <br>';
if(!vorname || /^[A-ZÄÜÖ][a-zäüöß]{1,}(?:-[A-ZÄÜÖ][a-zäüöß]+)?$/.test(vorname) === false) fehlerbox.innerHTML += 'Vorname: mindestens zwei Buchstaben <br>';
if(!name || /^[A-ZÄÜÖ][a-zäüöß]{1,}(?:-[A-ZÄÜÖ][a-zäüöß]+)?(?:\s[a-zA-ZÄÜÖäüöß]+)?$/.test(name) === false) fehlerbox.innerHTML += 'Name: mindestens zwei Buchstaben <br>';
if(!straße || /^[A-ZÄÖÜ][a-zäöüß]+(?:-[A-ZÄÖÜ][a-zäöüß]+)*$/.test(straße) === false) fehlerbox.innerHTML += 'Straße: mindestens zwei Zeichen <br>';
if(!hausnummer || /[0-9]{1,}/.test(hausnummer) === false) fehlerbox.innerHTML += 'Hausnummer: mindestens eine Zahl <br>';
if(!plz || Number(plz) < 01001 || /^[0-9]{5}$/.test(plz) === false) fehlerbox.innerHTML += 'Postleitzahl: gültige Postleitzahl fünf Zahlen bspw. 66265 <br>';
if(!wohnort || /^[A-Z][a-z]*(?:[- ][A-Z][a-z]*)*$/.test(wohnort) === false) fehlerbox.innerHTML += 'Wohnort: mindestens zwei Buchstaben <br>';
if(!email || /^([a-zA-Z0-9]+([-_\.]?[a-zA-Z0-9])+@[a-zA-Z0-9]+([-_\.]?[a-zA-Z0-9])+\.[a-z]{2,4}){0,}$/.test(email) === false) fehlerbox.innerHTML += 'EMail: bitte nach dem Muster "email@beispiel.de" <br>';
if(barzahlbox.checked === false) fehlerbox.innerHTML += 'Bitte akzeptieren Sie die Barzahlung <br>';
if(datenschutzbox.checked === false) fehlerbox.innerHTML += 'Bitte akzeptieren Sie die Datenschutzerklärung <br>';
if(fehlerbox.innerHTML.length > 12) {
event.preventDefault();
fehlerbox.style = 'display: block;'
}
}
const fehlerbox = document.getElementById('fehlerbox');
const bestellbutton = document.getElementById('bestellbutton');
const barzahlbox = document.getElementById('barzahlung_box');
const datenschutzbox = document.getElementById('datenschutz_box');
bestellbutton.addEventListener('click', checkform, false);
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');
}

209
public/javascript/warenkorb.js
View File

@ -1,175 +1,52 @@
window.addEventListener('DOMContentLoaded', function () {
let standardWerte = [10, 10, 10];
const preise = [0.95, 2.0, 1.10];
let standardWerte = [10, 10, 10];
const preise = [0.95, 2.0, 1.10];
window.addEventListener('DOMContentLoaded', berechnePreise);
function entferneAusWarenkorb(index) {
let inputId = 'menue' + index;
let inputElement = document.getElementById(inputId);
let testVar = inputElement.value;
if (/^[0-9]+$/.test(testVar) === false) {
zeigeHinweisfenster("Keine gültige Zahl eingegeben.");
} else {
let verringereUm = parseInt(inputElement.value);
if ((standardWerte[index - 1] - verringereUm) < 0) {
zeigeHinweisfenster("Der Wert darf nicht negativ sein.");
} else {
zeigeHinweisfenster("");
let aktuellerWert = standardWerte[index - 1] - verringereUm;
standardWerte[index - 1] = aktuellerWert;
inputElement.value = aktuellerWert;
}
}
berechnePreise();
document.getElementById("button1").addEventListener('click', function () {
entferneAusWarenkorb(1);
});
document.getElementById("button2").addEventListener('click', function () {
entferneAusWarenkorb(2);
});
document.getElementById("button3").addEventListener('click', function () {
entferneAusWarenkorb(3);
});
document.getElementById("button4").addEventListener('click', function () {
entferneAusWarenkorb(4);
});
document.getElementById("button5").addEventListener('click', function () {
entferneAusWarenkorb(5);
});
document.getElementById("button6").addEventListener('click', function () {
entferneAusWarenkorb(6);
});
var bestellbutton1 = document.getElementById("bestellbutton_desktop").addEventListener('click', checkObFeldLeer);
var bestellbutton2 = document.getElementById("bestellbutton_mobil").addEventListener('click', checkObFeldLeer);
function entferneAusWarenkorb(index) {
let inputId = 'menue' + index;
let inputElement = document.getElementById(inputId);
let testVar = inputElement.value;
if (/^[0-9]+$/.test(testVar) === false) {
zeigeHinweisfenster("Keine gültige Zahl eingegeben.");
} else {
let verringereUm = parseInt(inputElement.value);
if (index === 4) {
index = 1;
}
if (index === 5) {
index = 2;
}
if (index === 6) {
index = 3;
}
if ((standardWerte[index - 1] - verringereUm) < 0) {
zeigeHinweisfenster("Der Wert darf nicht negativ sein/die Anzahl darf nicht unter 0 fallen.");
} else {
zeigeHinweisfenster("");
let aktuellerWert = standardWerte[index - 1] - verringereUm;
standardWerte[index - 1] = aktuellerWert;
inputElement.value = aktuellerWert;
}
}
berechnePreise();
}
function berechnePreise() {
for (let i = 0; i < standardWerte.length; i++) {
let preisID = 'gesamtbetrag' + (i + 1);
let preisElement = document.getElementById(preisID);
let preisEinzeln = (standardWerte[i] * preise[i]).toFixed(2);
preisElement.innerText = "Betrag Gesamt (inkl. MwSt.): " + preisEinzeln + '€';
}
gesamtpreis = ((standardWerte[0] * preise[0]) + (standardWerte[1] * preise[1]) + (standardWerte[2] * preise[2])) + 2.90;
let gesamtkostenText = document.getElementById("gesamtpreis");
gesamtkostenText.innerText = gesamtpreis.toFixed(2) + "€";
localStorage.setItem("gesamtpreis", gesamtpreis);
}
function berechnePreise() {
for (let i = 0; i < standardWerte.length; i++) {
let preisID = 'gesamtbetrag' + (i + 1);
let preisElement = document.getElementById(preisID);
let preisEinzeln = (standardWerte[i] * preise[i]).toFixed(2);
preisElement.innerText = "Betrag Gesamt (inkl. MwSt.): " + preisEinzeln + '€';
}
for (let i = 0; i < standardWerte.length; i++) {
let preisID = 'gesamtbetrag' + (i + 4);
let preisElement = document.getElementById(preisID);
let preisEinzeln = (standardWerte[i] * preise[i]).toFixed(2);
preisElement.innerText = "Betrag Gesamt (inkl. MwSt.): " + preisEinzeln + '€';
}
gesamtpreis = ((standardWerte[0] * preise[0]) + (standardWerte[1] * preise[1]) + (standardWerte[2] * preise[2])) + 2.90;
let gesamtkostenText = document.getElementById("gesamtpreis");
gesamtkostenText.innerText = gesamtpreis.toFixed(2) + "€";
localStorage.setItem("gesamtpreis", gesamtpreis);
function zeigeHinweisfenster(text) {
var hinweisfenster = document.getElementById("notification");
hinweisfenster.innerText = text;
if (text !== "") {
hinweisfenster.style.display = "block";
} else {
hinweisfenster.style.display = "none";
}
}
function zeigeHinweisfenster(text) {
var hinweisfenster = document.getElementById("notification");
hinweisfenster.innerText = text;
if (text !== "") {
hinweisfenster.style.display = "block";
} else {
hinweisfenster.style.display = "none";
}
}
function checkObFeldLeer(event) {
let feld1 = document.getElementById("menue1").value;
let feld2 = document.getElementById("menue2").value;
let feld3 = document.getElementById("menue3").value;
let feld4 = document.getElementById("menue4").value;
let feld5 = document.getElementById("menue5").value;
let feld6 = document.getElementById("menue6").value;
if ((feld1 === "") || (feld2 === "") || (feld3 === "") || (feld4 === "") || (feld5 === "") || (feld6 === "")) {
event.preventDefault();
zeigeHinweisfenster("Kein Feld darf leer sein!");
}
else if ((/^[0-9]{1,}$/.test(feld1) === false) || (/^[0-9]{1,}$/.test(feld2) === false) || (/^[0-9]{1,}$/.test(feld3) === false)
|| (/^[0-9]{1,}$/.test(feld4) === false) || (/^[0-9]{1,}$/.test(feld5) === false) || (/^[0-9]{1,}$/.test(feld6) === false)) {
event.preventDefault();
zeigeHinweisfenster("Es stehen keine (gültigen) Zahlen in den Feldern. [gültig = positive Zahlen 0-9]");
}
else {
window.location.href = event.target.href;
// zeigeHinweisfenster("Feld ist nicht leer");
}
}
var menue1 = document.getElementById('menue1');
var menue2 = document.getElementById('menue2');
var menue3 = document.getElementById('menue3');
var gesamtbetrag1 = document.getElementById('gesamtbetrag1');
var gesamtbetrag2 = document.getElementById('gesamtbetrag2');
var gesamtbetrag3 = document.getElementById('gesamtbetrag3');
var gesamtpreis = document.getElementById('gesamtpreis');
// Funktion zum Aktualisieren des Gesamtbetrags für Produkt 1
function updateGesamtbetrag1() {
var menueValue = menue1.value;
var kosten = 0.95;
var gesamtbetrag = kosten * menueValue;
gesamtbetrag1.innerHTML = "Betrag Gesamt (inkl. MwSt.): " + gesamtbetrag.toFixed(2) + "€";
updateGesamtpreis();
}
// Funktion zum Aktualisieren des Gesamtbetrags für Produkt 2
function updateGesamtbetrag2() {
var menueValue = menue2.value;
var kosten = 2;
var gesamtbetrag = kosten * menueValue;
gesamtbetrag2.innerHTML = "Betrag Gesamt (inkl. MwSt.): " + gesamtbetrag.toFixed(2) + "€";
updateGesamtpreis();
}
// Funktion zum Aktualisieren des Gesamtbetrags für Produkt 3
function updateGesamtbetrag3() {
var menueValue = menue3.value;
var kosten = 1.1;
var gesamtbetrag = kosten * menueValue;
gesamtbetrag3.innerHTML = "Betrag Gesamt (inkl. MwSt.): " + gesamtbetrag.toFixed(2) + "€";
updateGesamtpreis();
}
// Funktion zum Aktualisieren des Gesamtpreises
function updateGesamtpreis() {
var menueValue1 = menue1.value;
var menueValue2 = menue2.value;
var menueValue3 = menue3.value;
var kosten1 = 0.95;
var kosten2 = 2;
var kosten3 = 1.1;
var gesamtpreisValue = (kosten1 * menueValue1) + (kosten2 * menueValue2) + (kosten3 * menueValue3) + 2.9;
gesamtpreis.innerHTML = gesamtpreisValue.toFixed(2) + "€";
}
// Event-Listener für Änderungen der Anzahl
menue1.addEventListener('input', updateGesamtbetrag1);
menue2.addEventListener('input', updateGesamtbetrag2);
menue3.addEventListener('input', updateGesamtbetrag3);
// Initialisierung des Gesamtbetrags und Gesamtpreises
updateGesamtbetrag1();
updateGesamtbetrag2();
updateGesamtbetrag3();
});

4
public/kontakt.html
View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kontakt</title>
<style>
@import 'css/mobile.css' (max-width: 800px);
@import 'css/desktop.css' (min-width: 801px);
@import 'css/mobile.css' (max-width: 480px);
@import 'css/desktop.css' (min-width: 481px);
</style>
</head>

4
public/produkte.html
View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Produkte</title>
<style>
@import 'css/mobile.css' (max-width: 800px);
@import 'css/desktop.css' (min-width: 801px);
@import 'css/mobile.css' (max-width: 480px);
@import 'css/desktop.css' (min-width: 481px);
</style>
<script src="javascript/warenkorb.js"></script>
</head>

4
public/ueber_uns.html
View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ueber uns</title>
<style>
@import 'css/mobile.css' (max-width: 800px);
@import 'css/desktop.css' (min-width: 801px);
@import 'css/mobile.css' (max-width: 480px);
@import 'css/desktop.css' (min-width: 481px);
</style>
</head>

172
public/warenkorb.html
View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Warenkorb</title>
<style>
@import 'css/mobile.css'(max-width: 800px);
@import 'css/desktop.css'(min-width: 801px);
@import 'css/mobile.css'(max-width: 480px);
@import 'css/desktop.css'(min-width: 481px);
</style>
<script src="javascript/warenkorb.js"></script>
</head>
@ -67,141 +67,63 @@
<div class="content">
<h1>Warenkorb</h1>
<div id="notification"></div>
<div class="desktop_ansicht">
<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>
</br>
<p>Auf Lager: 250</p>
</div>
<div class="button_mit_menue">
<p><a class="button_entfernen" href="#" id="button1">Entfernen</a></p>
<input type="text" id="menue1" value="10">
</div>
<p class="gesamtbetrag1" id="gesamtbetrag1"></p>
<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>
</br>
<p>Auf Lager: 250</p>
</div>
<div class="produkte_warenkorb">
<img src="pictures/aepfel_ohne_preis.png.avif" alt="aepfel">
<div class="produkte_details">
<p><strong>Äpfel 1kg</br>Kosten: 2€</strong></p>
</br>
<p>Auf Lager: 500</p>
</div>
<div class="button_mit_menue">
<p><a class="button_entfernen" href="#" id="button2">Entfernen</a></p>
<input type="text" id="menue2" value="10">
</div>
<p class="gesamtbetrag2" id="gesamtbetrag2"></p>
</div>
<div class="produkte_warenkorb">
<img src="pictures/sellerie_ohne_preis.webp" alt="sellerie">
<div class="produkte_details">
<p><strong>Sellerie 1 Stück</br>Kosten: 1,10€</strong></p>
</br>
<p>Auf Lager: 1000</p>
</div>
<div class="button_mit_menue">
<p><a class="button_entfernen" href="#" id="button3">Entfernen</a></p>
<input type="text" id="menue3" value="10">
</div>
<p class="gesamtbetrag3" id="gesamtbetrag3"></p>
</div>
<div class="äußererContainer">
<div class="kostenContainer">
<p class="lieferkosten_text">Lieferkosten:</p>
<p class="lieferkosten_preis">2,90€</p>
<p class="gesamtkosten_text">Gesamtkosten (inkl. MwSt): </p>
<p class="gesamtpreis" id="gesamtpreis"></p>
</div>
<div>
<a class="button_bestellung_abschließen" id="bestellbutton_desktop"
href="bestellformular.html">Kostenpflichtig
bestellen</a>
</div>
<div class="button_mit_menue">
<p><a class="button_entfernen" href="#" id="button1" onclick="entferneAusWarenkorb(1)">Entfernen</a></p>
<input type="text" id="menue1" value="10">
<div id="notification"></div>
</div>
<p class="gesamtbetrag1" id="gesamtbetrag1"></p>
</div>
<div class="mobile_ansicht">
<div class="produkte_warenkorb">
<div class="bild_mobil">
<img src="pictures/karotte_ohne_preis.webp" width="100" height="100" alt="karotten">
</div>
<div class="produkte_details">
<p><strong>Karotten 1kg</br>Kosten: 0,95€</strong></p>
<span class="eingabefeld_entfernen">
<input type="text" id="menue4" value="10">
</span>
</br>
<p>Auf Lager: 250</p>
</div>
<div class="button_mit_menue">
<p><a class="button_entfernen" href="#" id="button4">Entfernen</a></p>
</div>
<p class="gesamtbetrag4" id="gesamtbetrag4"></p>
<div class="produkte_warenkorb">
<img src="pictures/aepfel_ohne_preis.png.avif" alt="aepfel">
<div class="produkte_details">
<p><strong>Äpfel 1kg</br>Kosten: 2€</strong></p>
</br>
<p>Auf Lager: 500</p>
</div>
<div class="produkte_warenkorb">
<div class="bild_mobil">
<img src="pictures/aepfel_ohne_preis.png.avif" width="100" height="100" alt="aepfel">
</div>
<div class="produkte_details">
<p><strong>Äpfel 1kg</br>Kosten: 2€</strong></p>
<span class="eingabefeld_entfernen"><input type="text"
id="menue5" value="10"></span>
</br>
<p>Auf Lager: 500</p>
</div>
<div class="button_mit_menue">
<p><a class="button_entfernen" href="#" id="button5">Entfernen</a></p>
</div>
<p class="gesamtbetrag5" id="gesamtbetrag5"></p>
<div class="button_mit_menue">
<p><a class="button_entfernen" href="#" id="button2" onclick="entferneAusWarenkorb(2)">Entfernen</a></p>
<input type="text" id="menue2" value="10">
<div id="notification"></div>
</div>
<p class="gesamtbetrag2" id="gesamtbetrag2"></p>
</div>
<div class="produkte_warenkorb">
<div class="bild_mobil">
<img src="pictures/sellerie_ohne_preis.webp" width="100" height="100" alt="sellerie">
</div>
<div class="produkte_details">
<p><strong>Sellerie 1 Stück</br>Kosten: 1,10€</strong></p>
<span class="eingabefeld_entfernen"> <input type="text" id="menue6" value="10"></span>
</br>
<p>Auf Lager: 1000</p>
</div>
<div class="button_mit_menue">
<p><a class="button_entfernen" href="#" id="button6">Entfernen</a></p>
</div>
<p class="gesamtbetrag6" id="gesamtbetrag6"></p>
<div class="produkte_warenkorb">
<img src="pictures/sellerie_ohne_preis.webp" alt="sellerie">
<div class="produkte_details">
<p><strong>Sellerie 1 Stück</br>Kosten: 1,10€</strong></p>
</br>
<p>Auf Lager: 1000</p>
</div>
<div class="äußererContainer">
<div class="kostenContainer">
<p class="lieferkosten_text">Lieferkosten:</p>
<p class="lieferkosten_preis">2,90€</p>
<p class="gesamtkosten_text">Gesamtkosten (inkl. MwSt): </p>
<p class="gesamtpreis" id="gesamtpreis"></p>
</div>
<div>
<a class="button_bestellung_abschließen" id="bestellbutton_mobil"
href="bestellformular.html">Kostenpflichtig
bestellen</a>
</div>
<div class="button_mit_menue">
<p><a class="button_entfernen" href="#" id="button3" onclick="entferneAusWarenkorb(3)">Entfernen</a></p>
<input type="text" id="menue3" value="10">
<div id="notification"></div>
</div>
<p class="gesamtbetrag3" id="gesamtbetrag3"></p>
</div>
<div class="äußererContainer">
<div class="kostenContainer">
<p class="lieferkosten_text">Lieferkosten:</p>
<p class="lieferkosten_preis">2,90€</p>
<p class="gesamtkosten_text">Gesamtkosten (inkl. MwSt): </p>
<p class="gesamtpreis" id="gesamtpreis"></p>
</div>
<div>
<a class="button_bestellung_abschließen" href="bestellformular.html">Kostenpflichtig bestellen</a>
</div>
</div>
</div>
<footer>
<nav class="navbar-desktop" style="--items: 2;">
<a href="impressum.html">Impressum</a>