diff --git a/package-lock.json b/package-lock.json index 12c8b6c..3aac060 100644 --- a/package-lock.json +++ b/package-lock.json @@ -523,6 +523,7 @@ "version": "2.18.1", "resolved": "https://registry.npmjs.org/mysql/-/mysql-2.18.1.tgz", "integrity": "sha512-Bca+gk2YWmqp2Uf6k5NFEurwY/0td0cpebAucFpY/3jhrwrVGuxU2uQFCHjU19SJfje0yQvi+rVWdq78hR5lig==", + "license": "MIT", "dependencies": { "bignumber.js": "9.0.0", "readable-stream": "2.3.7", diff --git a/public/header_footer/header_footer.html b/public/header_footer/header_footer.html new file mode 100644 index 0000000..6755cce --- /dev/null +++ b/public/header_footer/header_footer.html @@ -0,0 +1,38 @@ + + + + + Header + + + +
+
+ Modellauto-Shop Logo +

Modellauto-Shop

+
+
+ +
+ + 0 +
+
+
+ + diff --git a/public/login/login.html b/public/login/login.html index 3a14541..b1cd985 100644 --- a/public/login/login.html +++ b/public/login/login.html @@ -5,9 +5,21 @@ + Login + +
+ +

Login

diff --git a/public/registrieren/registrieren.html b/public/registrieren/registrieren.html index ab1d6e2..920717a 100644 --- a/public/registrieren/registrieren.html +++ b/public/registrieren/registrieren.html @@ -8,6 +8,18 @@ Registrieren + +
+ + +

Registrieren

diff --git a/public/shop/shop.html b/public/shop/shop.html new file mode 100644 index 0000000..4a1b3a3 --- /dev/null +++ b/public/shop/shop.html @@ -0,0 +1,86 @@ + + + + + + Shop + + + + + + +
+ + +
+

Willkommen im Webshop

+
+ +
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/public/shop/shop_lkw.html b/public/shop/shop_lkw.html new file mode 100644 index 0000000..ce5abac --- /dev/null +++ b/public/shop/shop_lkw.html @@ -0,0 +1,19 @@ + + + + + + Shop + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/shop/shop_motorrad.html b/public/shop/shop_motorrad.html new file mode 100644 index 0000000..4b6f6aa --- /dev/null +++ b/public/shop/shop_motorrad.html @@ -0,0 +1,17 @@ + + + + + + Shop + + + + + + + + + + + \ No newline at end of file diff --git a/public/shop/shop_oldtimer.html b/public/shop/shop_oldtimer.html new file mode 100644 index 0000000..4b6f6aa --- /dev/null +++ b/public/shop/shop_oldtimer.html @@ -0,0 +1,17 @@ + + + + + + Shop + + + + + + + + + + + \ No newline at end of file diff --git a/public/shop/shop_sportwagen.html b/public/shop/shop_sportwagen.html new file mode 100644 index 0000000..741a874 --- /dev/null +++ b/public/shop/shop_sportwagen.html @@ -0,0 +1,16 @@ + + + + + + Shop + + + + + + + + + + \ No newline at end of file diff --git a/public/startseite/startseite.html b/public/startseite/startseite.html index 1c799c2..0a625f8 100644 --- a/public/startseite/startseite.html +++ b/public/startseite/startseite.html @@ -3,79 +3,67 @@ - Autohändler Webshop + Modellauto +
-
-

Autohändler Webshop

-
- -
- - 0 -
-
-
- - - +
+

Willkommen bei deinem Modellauto-Shop

Bei uns findest du hochwertige Modellautos – ob Oldtimer, Sportwagen oder Nutzfahrzeuge. - Perfekt für Sammler, Bastler und Fans.

+ Perfekt für Sammler, Bastler und Fans. +

+
+

Unsere Neusten Produkte

+
+ +
-

Unsere Angebote

-
-
-
- Porsche -

Name des Produktes

-

Preis: 23€

-

weitere Infos

- -
-
- LKW -

Avia A31N Pritsche mit Plane blau Modellauto 1:43 Premium ClassiXXs

-

Preis: 74,99€

-

Modellauto / Premium ClassiXXs 1:43 - Avia A31N Pritsche mit Plane, fertiges Modellauto aus Die-Cast (Metall)

- -
-
-
+ + + +
@@ -99,6 +87,7 @@
+

© 2025 Autohändler Webshop – Alle Rechte vorbehalten

Impressum | @@ -107,7 +96,5 @@

- - diff --git a/scripts/routes/other/route-index.js b/scripts/routes/other/route-index.js index 227b036..c4e9c23 100644 --- a/scripts/routes/other/route-index.js +++ b/scripts/routes/other/route-index.js @@ -17,4 +17,12 @@ router.get('/registrieren', (req, res) => { res.sendFile(path.join(__dirname, '../../../public/registrieren/registrieren.html')); }) +router.get('/header', (req, res) => { + res.sendFile(path.join(__dirname, '../../../public/header_footer/header_footer.html')); +}) + +router.get('/shop', (req, res) => { + res.sendFile(path.join(__dirname, '../../../public/shop/shop.html')); +}) + module.exports = router; \ No newline at end of file diff --git a/server.js b/server.js index 05079f0..fda8b57 100644 --- a/server.js +++ b/server.js @@ -6,6 +6,24 @@ const path = require('path'); require('dotenv').config({path:'process.env'}); const app = express(); +const mysql = require('mysql'); + +// Datenbankverbindung +const db = mysql.createConnection({ + host: 'localhost', + user: 'root', + password: '', + database: 'webshop' +}); + +// Verbindung zur MySQL-Datenbank herstellen +db.connect(err => { + if (err) { + console.error('Fehler beim Verbinden zur Datenbank:', err); + return; + } + console.log('Mit der Datenbank verbunden'); +}); app.use(session({ secret: 'secret', @@ -18,10 +36,41 @@ app.use(express.urlencoded({ extended: true })); app.use(express.static(path.join(__dirname, '/scripts'))); app.use(express.static(path.join(__dirname, '/static'))); -const getIndexRoute = require('./scripts/routes/other/route-index'); +// API-Route für Produkte +app.get('/api/products', (req, res) => { + // SQL-Abfrage für Produktdaten + const sql = 'SELECT * FROM webshop.product'; + // Abfrage ausführen + db.query(sql, (err, results) => { + if (err) { + console.error('Fehler beim Abrufen der Produkte:', err); + res.status(500).send('Fehler beim Abrufen der Produkte'); + return; + } + res.json(results); // Rückgabe der Produktdaten als JSON + }); +}); + +app.get('/api/products/latest', async (req, res) => { + // SQL-Abfrage für Produktdaten + const sql = 'SELECT * FROM webshop.product ORDER BY created_at DESC LIMIT 5'; + + // Abfrage ausführen + db.query(sql, (err, results) => { + if (err) { + console.error('Fehler beim Abrufen der Produkte:', err); + res.status(500).send('Fehler beim Abrufen der Produkte'); + return; + } + res.json(results); // Rückgabe der Produktdaten als JSON + }); +}); + +const getIndexRoute = require('./scripts/routes/other/route-index'); app.use('/', getIndexRoute); +// Sever starten app.listen(process.env.APP_PORT, () => { console.log("\x1b[32m"); console.log(`Server is running on http://localhost:${process.env.APP_PORT}`); diff --git a/static/Styles/header_footer/header_footer.css b/static/Styles/header_footer/header_footer.css new file mode 100644 index 0000000..4378da0 --- /dev/null +++ b/static/Styles/header_footer/header_footer.css @@ -0,0 +1,245 @@ +/* Allgemeine Einstellungen */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +body { + background: #f8f9fa; + color: #333; + min-height: 100vh; + display: flex; + flex-direction: column; +} + +/* Header */ +header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px 20px; + width: 100%; + background: #ffffff; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + position: sticky; + top: 0; + z-index: 1000; +} + +.logo-container { + display: flex; + align-items: center; + gap: 15px; +} + +.logo-img { + height: 60px; + object-fit: contain; +} + +header h1 { + font-size: 28px; + color: #333; +} + +.header-right { + display: flex; + align-items: center; + gap: 15px; +} + +header .login-btn { + font-size: 14px; + text-decoration: none; + color: white; + background: #ff6600; + padding: 10px 20px; + border-radius: 25px; + transition: background 0.3s ease; +} + +header .login-btn:hover { + background: #e95b00; +} + +.cart { + display: flex; + align-items: center; + position: relative; + font-size: 24px; + color: #ff6600; + cursor: pointer; +} + +.cart-count { + position: absolute; + top: -5px; + right: -10px; + background: #ff6600; + color: white; + font-size: 12px; + width: 20px; + height: 20px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; +} + +/* Navigation */ +.menu { + background: #ffffff; + width: 100%; + margin-bottom: 20px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.menu-list { + list-style: none; + display: flex; + justify-content: space-around; + padding: 15px 0; +} + +.menu-item { + position: relative; +} + +.menu-item a { + text-decoration: none; + color: #333; + font-size: 18px; + padding: 10px 20px; + transition: background 0.3s ease, color 0.3s ease; +} + +.menu-item a:hover { + background: #ff6600; + color: white; + border-radius: 10px; +} + +/* Submenu */ +.submenu { + position: absolute; + top: 100%; + left: 0; + background: #ffffff; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + display: none; + list-style: none; + min-width: 200px; + z-index: 10; +} + +.submenu li { + padding: 10px 20px; +} + +.submenu li a { + color: #333; +} + +.submenu li a:hover { + color: white; + background: #ff6600; + border-radius: 5px; +} + +.menu-item:hover .submenu { + display: block; +} + +/* Suchleiste */ +.search-bar { + display: flex; + gap: 15px; + width: 100%; + padding: 20px; + background: #ffffff; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + position: sticky; + top: 65px; + z-index: 1000; +} + +.search-bar input, +.search-bar select { + padding: 12px; + font-size: 16px; + border: 1px solid #ddd; + border-radius: 5px; + flex: 1; +} + +.search-bar button { + padding: 12px 20px; + background: #ff6600; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background 0.3s ease; +} + +.search-bar button:hover { + background: #e95b00; +} + +/* Karten */ +.card-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 20px; + width: 100%; + padding: 20px; +} + +.card { + background: #ffffff; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + text-align: center; + padding: 20px; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.card img { + max-width: 100%; + height: auto; + border-radius: 10px; + margin-bottom: 10px; +} + +.card h3 { + font-size: 20px; + color: #333; + margin: 10px 0; +} + +.card p { + font-size: 14px; + color: #666; + margin: 5px 0; +} + +.add-to-cart { + background: #ff6600; + color: white; + border: none; + padding: 12px 20px; + border-radius: 25px; + margin-top: 10px; + cursor: pointer; + transition: background 0.3s ease; +} + +.add-to-cart:hover { + background: #e95b00; +} diff --git a/static/Styles/login/login.css b/static/Styles/login/login.css index 7ff8038..a474731 100644 --- a/static/Styles/login/login.css +++ b/static/Styles/login/login.css @@ -106,4 +106,239 @@ h1 { .register-link a:hover { text-decoration: underline; -} \ No newline at end of file +} + +/* Allgemeine Einstellungen */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +body { + background: #f8f9fa; + color: #333; + min-height: 100vh; + display: flex; + flex-direction: column; +} + +/* Header */ +header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px 20px; + width: 100%; + background: #ffffff; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + position: sticky; + top: 0; + z-index: 1000; +} + +header h1 { + font-size: 28px; + color: #333; +} + +.header-right { + display: flex; + align-items: center; + gap: 15px; +} + +header .login-btn { + font-size: 14px; + text-decoration: none; + color: white; + background: #ff6600; + padding: 10px 20px; + border-radius: 25px; + transition: background 0.3s ease; +} + +header .login-btn:hover { + background: #e95b00; +} + +.cart { + display: flex; + align-items: center; + position: relative; + font-size: 24px; + color: #ff6600; + cursor: pointer; +} + +.cart-count { + position: absolute; + top: -5px; + right: -10px; + background: #ff6600; + color: white; + font-size: 12px; + width: 20px; + height: 20px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; +} + +/* Navigation */ +.menu { + background: #ffffff; + width: 100%; + margin-bottom: 20px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.menu-list { + list-style: none; + display: flex; + justify-content: space-around; + padding: 15px 0; +} + +.menu-item { + position: relative; +} + +.menu-item a { + text-decoration: none; + color: #333; + font-size: 18px; + padding: 10px 20px; + transition: background 0.3s ease, color 0.3s ease; +} + +.menu-item a:hover { + background: #ff6600; + color: white; + border-radius: 10px; +} + +/* Submenu */ +.submenu { + position: absolute; + top: 100%; + left: 0; + background: #ffffff; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + display: none; + list-style: none; + min-width: 200px; + z-index: 10; +} + +.submenu li { + padding: 10px 20px; +} + +.submenu li a { + color: #333; +} + +.submenu li a:hover { + color: white; + background: #ff6600; + border-radius: 5px; +} + +.menu-item:hover .submenu { + display: block; +} + +/* Suchleiste */ +.search-bar { + display: flex; + gap: 15px; + width: 100%; + padding: 20px; + background: #ffffff; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + position: sticky; + top: 65px; + z-index: 1000; +} + +.search-bar input, +.search-bar select { + padding: 12px; + font-size: 16px; + border: 1px solid #ddd; + border-radius: 5px; + flex: 1; +} + +.search-bar button { + padding: 12px 20px; + background: #ff6600; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background 0.3s ease; +} + +.search-bar button:hover { + background: #e95b00; +} + +/* Karten */ +.card-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 20px; + width: 100%; + padding: 20px; +} + +.card { + background: #ffffff; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + text-align: center; + padding: 20px; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.card img { + max-width: 100%; + height: auto; + border-radius: 10px; + margin-bottom: 10px; +} + +.card h3 { + font-size: 20px; + color: #333; + margin: 10px 0; +} + +.card p { + font-size: 14px; + color: #666; + margin: 5px 0; +} + +.add-to-cart { + background: #ff6600; + color: white; + border: none; + padding: 12px 20px; + border-radius: 25px; + margin-top: 10px; + cursor: pointer; + transition: background 0.3s ease; +} + +.add-to-cart:hover { + background: #e95b00; +} diff --git a/static/Styles/shop/shop.css b/static/Styles/shop/shop.css new file mode 100644 index 0000000..4378da0 --- /dev/null +++ b/static/Styles/shop/shop.css @@ -0,0 +1,245 @@ +/* Allgemeine Einstellungen */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +body { + background: #f8f9fa; + color: #333; + min-height: 100vh; + display: flex; + flex-direction: column; +} + +/* Header */ +header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px 20px; + width: 100%; + background: #ffffff; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + position: sticky; + top: 0; + z-index: 1000; +} + +.logo-container { + display: flex; + align-items: center; + gap: 15px; +} + +.logo-img { + height: 60px; + object-fit: contain; +} + +header h1 { + font-size: 28px; + color: #333; +} + +.header-right { + display: flex; + align-items: center; + gap: 15px; +} + +header .login-btn { + font-size: 14px; + text-decoration: none; + color: white; + background: #ff6600; + padding: 10px 20px; + border-radius: 25px; + transition: background 0.3s ease; +} + +header .login-btn:hover { + background: #e95b00; +} + +.cart { + display: flex; + align-items: center; + position: relative; + font-size: 24px; + color: #ff6600; + cursor: pointer; +} + +.cart-count { + position: absolute; + top: -5px; + right: -10px; + background: #ff6600; + color: white; + font-size: 12px; + width: 20px; + height: 20px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; +} + +/* Navigation */ +.menu { + background: #ffffff; + width: 100%; + margin-bottom: 20px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.menu-list { + list-style: none; + display: flex; + justify-content: space-around; + padding: 15px 0; +} + +.menu-item { + position: relative; +} + +.menu-item a { + text-decoration: none; + color: #333; + font-size: 18px; + padding: 10px 20px; + transition: background 0.3s ease, color 0.3s ease; +} + +.menu-item a:hover { + background: #ff6600; + color: white; + border-radius: 10px; +} + +/* Submenu */ +.submenu { + position: absolute; + top: 100%; + left: 0; + background: #ffffff; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + display: none; + list-style: none; + min-width: 200px; + z-index: 10; +} + +.submenu li { + padding: 10px 20px; +} + +.submenu li a { + color: #333; +} + +.submenu li a:hover { + color: white; + background: #ff6600; + border-radius: 5px; +} + +.menu-item:hover .submenu { + display: block; +} + +/* Suchleiste */ +.search-bar { + display: flex; + gap: 15px; + width: 100%; + padding: 20px; + background: #ffffff; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + position: sticky; + top: 65px; + z-index: 1000; +} + +.search-bar input, +.search-bar select { + padding: 12px; + font-size: 16px; + border: 1px solid #ddd; + border-radius: 5px; + flex: 1; +} + +.search-bar button { + padding: 12px 20px; + background: #ff6600; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background 0.3s ease; +} + +.search-bar button:hover { + background: #e95b00; +} + +/* Karten */ +.card-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 20px; + width: 100%; + padding: 20px; +} + +.card { + background: #ffffff; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + text-align: center; + padding: 20px; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.card img { + max-width: 100%; + height: auto; + border-radius: 10px; + margin-bottom: 10px; +} + +.card h3 { + font-size: 20px; + color: #333; + margin: 10px 0; +} + +.card p { + font-size: 14px; + color: #666; + margin: 5px 0; +} + +.add-to-cart { + background: #ff6600; + color: white; + border: none; + padding: 12px 20px; + border-radius: 25px; + margin-top: 10px; + cursor: pointer; + transition: background 0.3s ease; +} + +.add-to-cart:hover { + background: #e95b00; +} diff --git a/static/Styles/startseite/startseite.css b/static/Styles/startseite/startseite.css index d9450fe..4378da0 100644 --- a/static/Styles/startseite/startseite.css +++ b/static/Styles/startseite/startseite.css @@ -28,6 +28,17 @@ header { z-index: 1000; } +.logo-container { + display: flex; + align-items: center; + gap: 15px; +} + +.logo-img { + height: 60px; + object-fit: contain; +} + header h1 { font-size: 28px; color: #333; diff --git a/static/images/Logo.png b/static/images/Logo.png new file mode 100644 index 0000000..bf89a96 Binary files /dev/null and b/static/images/Logo.png differ