Berufsschule/Webshop
Berufsschule/Webshop
Template
5
2
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases 3 Wiki Activity

Hinzufügen der Finalen Seite der Bestellung

Browse Source
This commit is contained in:
rgemm 2025-04-26 13:05:22 +02:00
parent 3d05147188
commit 17522dcd65
5 changed files with 94 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/bestellformular/bestellformular.html
View File

@ -42,7 +42,7 @@
<label for="ArtikelNr">Artikel Nr.:</label> <label for="ArtikelNr">Artikel Nr.:</label>
<textarea id="ArtikelNr" name="ArtikelNr" rows="4" required placeholder="Artikel Nr."></textarea> <textarea id="ArtikelNr" name="ArtikelNr" rows="4" required placeholder="Artikel Nr."></textarea>
<input type="submit" value="Bestellung absenden"> <a href="/bestellung" class="button-submit">Bestellung absenden</a>
</form> </form>
</div> </div>
</main> </main>

31
public/bestellung/bestellung.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ihre Bestellung</title>
<link rel="stylesheet" href="/Styles/bestellung/bestellung.css">
<link rel="stylesheet" href="/Styles/styles-main.css">
<script src="/header_footer"></script>
</head>
<body>
<!-- Header wird hier dynamisch geladen -->
<div id="header-placeholder"></div>
<main>
<h2>Ihre Bestellung:</h2>
<div id="bestellung">
<!-- Platzhalter für die Bestellinformationen -->
<div class="bestell-info-card">
<p><strong>Kundennummer:</strong> <span id="kundenNr"></span></p>
<p><strong>Produkt-ID:</strong> <span id="produktId"></span></p>
<p><strong>Produktname:</strong> <span id="produktName"></span></p>
<p><strong>Preis:</strong> <span id="preis"></span></p>
</div>
</div>
</main>
<!-- Footer wird dynamisch geladen -->
<div id="footer"></div>
</body>
</html>

4
scripts/routes/other/route-index.js
View File

@ -70,4 +70,8 @@ router.get('/Warenkorb', (req, res) => {
router.get('/bestellformular', (req, res) => { router.get('/bestellformular', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/bestellformular/bestellformular.html')); res.sendFile(path.join(__dirname, '../../../public/bestellformular/bestellformular.html'));
}) })
router.get('/bestellung', (req, res) => {
res.sendFile(path.join(__dirname, '../../../public/bestellung/bestellung.html'));
})
module.exports = router; module.exports = router;

16
static/Styles/bestellformular/bestellformular.css
View File

@ -9,7 +9,7 @@ body {
} }
.wrapper { .wrapper {
flex: 1; /* Der Hauptinhalt (Formular) nimmt den verfügbaren Platz ein */ flex: 1; /* Der Hauptinhalt nimmt den verfügbaren Platz ein */
} }
.form-container { .form-container {
@ -43,20 +43,22 @@ textarea {
box-sizing: border-box; box-sizing: border-box;
} }
input[type="submit"] { /* NEU: Styling für den Absende-Link */
.button-submit {
display: inline-block;
margin-top: 20px; margin-top: 20px;
background-color: #ff6600; background-color: #ff6600;
color: white; color: white;
border: none; text-decoration: none;
padding: 12px; padding: 12px;
border-radius: 5px; border-radius: 5px;
font-size: 16px; font-size: 16px;
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
text-align: center;
box-sizing: border-box; /* Damit Breite + Padding sauber passen */
} }
input[type="submit"]:hover { .button-submit:hover {
background-color: #ff5500; /* Ein leicht dunklerer Farbton beim Hover */ background-color: #ff6600;
} }

49
static/Styles/bestellung/bestellung.css Normal file
View File

@ -0,0 +1,49 @@
/* Allgemeine Layout-Stile */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
padding: 20px;
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Container für die Bestellinformationen */
#bestellung {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-top: 20px;
}
/* Titel */
h2 {
text-align: center;
margin-bottom: 30px;
margin-top: 20px;
}
/* Karte für Bestellinformationen */
.bestell-info-card {
background-color: #fafafa;
padding: 15px;
border-radius: 8px;
margin-bottom: 15px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Bestellinformationen formatieren */
.bestell-info-card p {
font-size: 16px;
margin: 10px 0;
}
/* Stile für die Label und Platzhalter */
.bestell-info-card span {
font-weight: bold;
color: #333;
}