diff --git a/.idea/dataSources.xml b/.idea/dataSources.xml index 935ffdb..572d152 100644 --- a/.idea/dataSources.xml +++ b/.idea/dataSources.xml @@ -2,10 +2,10 @@ - mysql.8 + mariadb true - com.mysql.cj.jdbc.Driver - jdbc:mysql://localhost:3306 + org.mariadb.jdbc.Driver + jdbc:mariadb://localhost:3306 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/passwordValidation.js b/public/registrieren/passwordValidation.js index 3a6fbc2..daebbbe 100644 --- a/public/registrieren/passwordValidation.js +++ b/public/registrieren/passwordValidation.js @@ -1,45 +1,24 @@ -// Funktion, um die Stärke des Passworts zu bewerten -function checkPasswordStrength(password) { - const strengthBar = document.getElementById('passwordStrengthBar'); - const passwordStrength = evaluatePasswordStrength(password); +const passwordInput = document.getElementById("regPassword"); +const strengthBar = document.getElementById("passwordStrengthBar"); - // Aktualisiere den Sicherheitsbalken basierend auf der Stärke - if (passwordStrength === 'weak') { - strengthBar.classList.remove('medium', 'strong'); - strengthBar.classList.add('weak'); - } else if (passwordStrength === 'medium') { - strengthBar.classList.remove('weak', 'strong'); - strengthBar.classList.add('medium'); - } else { - strengthBar.classList.remove('weak', 'medium'); - strengthBar.classList.add('strong'); - } -} - -// Funktion zur Beurteilung der Passwortstärke -function evaluatePasswordStrength(password) { - if (password.length >= 8 && /[A-Z]/.test(password) && /[0-9]/.test(password)) { - return 'strong'; - } else if (password.length >= 6) { - return 'medium'; - } else { - return 'weak'; - } -} - -// Event Listener für das Passwortfeld -document.getElementById('regPassword').addEventListener('input', function() { - checkPasswordStrength(this.value); +passwordInput.addEventListener("input", () => { + const password = passwordInput.value; + const strength = getPasswordStrength(password); + updateStrengthBar(strength); }); -// Event Listener für das Bestätigungs-Passwortfeld -document.getElementById('confirmPassword').addEventListener('input', function() { - const password = document.getElementById('regPassword').value; - const confirmPassword = this.value; +function getPasswordStrength(password) { + let strength = 0; + if (password.length >= 8) strength++; // Mindestlänge + if (/[A-Z]/.test(password)) strength++; // Großbuchstaben + if (/[a-z]/.test(password)) strength++; // Kleinbuchstaben + if (/[0-9]/.test(password)) strength++; // Zahlen + if (/[^A-Za-z0-9]/.test(password)) strength++; // Sonderzeichen + return strength; +} - if (password !== confirmPassword) { - this.setCustomValidity("Die Passwörter stimmen nicht überein."); - } else { - this.setCustomValidity(""); - } -}); +function updateStrengthBar(strength) { + const colors = ["#ccc", "red", "orange", "yellow", "lightgreen", "green"]; + strengthBar.style.width = `${(strength / 5) * 100}%`; + strengthBar.style.backgroundColor = colors[strength]; +} diff --git a/public/registrieren/registrieren.html b/public/registrieren/registrieren.html index f95b594..920717a 100644 --- a/public/registrieren/registrieren.html +++ b/public/registrieren/registrieren.html @@ -8,16 +8,28 @@ Registrieren + +
+ + +

Registrieren

- +
- +
@@ -37,7 +49,6 @@
-
@@ -46,6 +57,7 @@
+
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 7640721..0a625f8 100644 --- a/public/startseite/startseite.html +++ b/public/startseite/startseite.html @@ -3,85 +3,98 @@ - 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. +

+
-
-
- - - - -
+
+

Unsere Neusten Produkte

+
+ +
+ + + + + +
+
+ +

Versandkostenfrei ab 50 €

+

Schneller & sicherer Versand mit Sendungsverfolgung.

+
+
+ +

Flexible Zahlungsmethoden

+

PayPal, Kreditkarte, Klarna, Vorkasse – du hast die Wahl.

+
+
+ +

14 Tage Rückgaberecht

+

Unzufrieden? Kein Problem – Rückgabe einfach & unkompliziert.

+
+
+ +

Top-Bewertungen

+

Unsere Kunden lieben uns – überzeug dich selbst!

+
+
+ + + -
-
- Auto -

BMW 3er Limousine

-

Preis: 35.000€

-

Baujahr: 2020 | Kilometerstand: 20.000 km

- -
-
- Auto -

Audi Q5

-

Preis: 50.000€

-

Baujahr: 2022 | Kilometerstand: 10.000 km

- -
-
-
- - 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/registrieren/registrieren.css b/static/Styles/registrieren/registrieren.css index 1027480..91a822b 100644 --- a/static/Styles/registrieren/registrieren.css +++ b/static/Styles/registrieren/registrieren.css @@ -11,14 +11,14 @@ body { color: #333; min-height: 100vh; display: flex; - flex-direction: column; + justify-content: center; + align-items: center; } /* Wrapper für das Formular */ .wrapper { width: 100%; max-width: 400px; - margin: 50px auto; padding: 20px; background: #fff; border-radius: 10px; @@ -76,11 +76,12 @@ h1 { /* Passwort Sicherheitsbalken */ .password-strength-bar { - width: 100%; - height: 5px; - background-color: #ddd; - border-radius: 5px; - margin-top: 10px; + height: 8px; + width: 0%; + background-color: #ccc; + margin-top: 5px; + transition: width 0.3s ease, background-color 0.3s ease; + border-radius: 4px; } /* Sicherheitsstufen */ @@ -127,3 +128,4 @@ h1 { .register-link a:hover { color: #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