diff --git a/public/example/index.html b/public/example/index.html deleted file mode 100644 index 738501c..0000000 --- a/public/example/index.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - Homepage - - - - -
-
-
-
-

header

-
-
- -
-
-

main

-
-
-

right

-
-
-

footer

-
-
-
-
- - - - - \ No newline at end of file diff --git a/public/login/index.html b/public/login/index.html deleted file mode 100644 index 6494ab5..0000000 --- a/public/login/index.html +++ /dev/null @@ -1,49 +0,0 @@ - - - - - - - - - Login - - - - -
-
-

Login

-
- - -
-
- - -
- -
- - Passwort vergessen? -
- - - -
-

Noch keinen Account? Registrieren

-
- -
-
- - - - - \ No newline at end of file diff --git a/public/login/login.html b/public/login/login.html new file mode 100644 index 0000000..3a14541 --- /dev/null +++ b/public/login/login.html @@ -0,0 +1,33 @@ + + + + + + + + Login + + +
+
+

Login

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

Noch keinen Account? Registrieren

+
+
+
+ + + diff --git a/public/registrieren/passwordValidation.js b/public/registrieren/passwordValidation.js new file mode 100644 index 0000000..3a6fbc2 --- /dev/null +++ b/public/registrieren/passwordValidation.js @@ -0,0 +1,45 @@ +// Funktion, um die Stärke des Passworts zu bewerten +function checkPasswordStrength(password) { + const strengthBar = document.getElementById('passwordStrengthBar'); + const passwordStrength = evaluatePasswordStrength(password); + + // 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); +}); + +// Event Listener für das Bestätigungs-Passwortfeld +document.getElementById('confirmPassword').addEventListener('input', function() { + const password = document.getElementById('regPassword').value; + const confirmPassword = this.value; + + if (password !== confirmPassword) { + this.setCustomValidity("Die Passwörter stimmen nicht überein."); + } else { + this.setCustomValidity(""); + } +}); diff --git a/public/registrieren/registrieren.html b/public/registrieren/registrieren.html new file mode 100644 index 0000000..f95b594 --- /dev/null +++ b/public/registrieren/registrieren.html @@ -0,0 +1,51 @@ + + + + + + + + Registrieren + + +
+
+

Registrieren

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

Bereits ein Konto? Login

+
+
+
+ + + diff --git a/public/startseite.html b/public/startseite/startseite.html similarity index 97% rename from public/startseite.html rename to public/startseite/startseite.html index 0aa7b59..7640721 100644 --- a/public/startseite.html +++ b/public/startseite/startseite.html @@ -4,7 +4,7 @@ Autohändler Webshop - + diff --git a/scripts/routes/other/route-index.js b/scripts/routes/other/route-index.js index 34691e1..227b036 100644 --- a/scripts/routes/other/route-index.js +++ b/scripts/routes/other/route-index.js @@ -2,7 +2,7 @@ const path = require('path'); const router = require('express').Router(); router.get('/', (req, res) => { - res.sendFile(path.join(__dirname, '../../../public/startseite.html')); + res.sendFile(path.join(__dirname, '../../../public/startseite/startseite.html')); }) router.get('/example', (req, res) => { @@ -10,7 +10,11 @@ router.get('/example', (req, res) => { }) router.get('/login', (req, res) => { - res.sendFile(path.join(__dirname, '../../../public/login/index.html')); + res.sendFile(path.join(__dirname, '../../../public/login/login.html')); +}) + +router.get('/registrieren', (req, res) => { + res.sendFile(path.join(__dirname, '../../../public/registrieren/registrieren.html')); }) module.exports = router; \ No newline at end of file diff --git a/static/Styles/example.css b/static/Styles/example.css index 024d1c7..d9450fe 100644 --- a/static/Styles/example.css +++ b/static/Styles/example.css @@ -1,100 +1,234 @@ -/* The sidebar menu */ -.sidebar { - height: 100%; /* 100% Full-height */ - width: 0; /* 0 width - change this with JavaScript */ - position: fixed; /* Stay in place */ - z-index: 1; /* Stay on top */ - top: 0; - left: 0; - background-color: #111; /* Black*/ - overflow-x: hidden; /* Disable horizontal scroll */ - padding-top: 60px; /* Place content 60px from the top */ - transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */ - font-family: "Agency FB"; +/* Allgemeine Einstellungen */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; } -/* The sidebar links */ -.sidebar a { - padding: 8px 8px 8px 32px; +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; - font-size: 25px; - color: #818181; - display: block; - transition: 0.3s; -} - -/* When you mouse over the navigation links, change their color */ -.sidebar a:hover { - color: #f1f1f1; -} - -/* Position and style the close button (top right corner) */ -.sidebar .closebtn { - position: absolute; - top: 0; - right: 25px; - font-size: 36px; - margin-left: 50px; -} - -/* The button used to open the sidebar */ -.openbtn { - font-size: 20px; - cursor: pointer; - background-color: #111; color: white; - padding: 10px 15px; + 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; } -.openbtn:hover { - background-color: #444; +.search-bar button:hover { + background: #e95b00; } -/* Style page content - use this if you want to push the page content to the right when you open the side navigation */ -#main { - transition: margin-left .5s; /* If you want a transition effect */ +/* Karten */ +.card-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 20px; + width: 100%; padding: 20px; } -/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ -@media screen and (max-height: 450px) { - .sidebar { - padding-top: 15px; - } - - .sidebar a { - font-size: 18px; - } +.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; } - -/* grid layout for the content */ -.grid-container { - display: grid; - grid-template-areas: 'left header header' - 'left main right' - 'footer footer footer'; - grid-template-columns: [left] 80px [line2] calc(100% - 160px) [line3] 80px [right]; - grid-template-rows: [top] 80px [line2] calc(100% - 160px) [line3] 80px [bottom]; +.card img { + max-width: 100%; + height: auto; + border-radius: 10px; + margin-bottom: 10px; } -.left { - grid-area: left; +.card h3 { + font-size: 20px; + color: #333; + margin: 10px 0; } -.right { - grid-area: right; +.card p { + font-size: 14px; + color: #666; + margin: 5px 0; } -.header { - grid-area: header; +.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; } -.main { - grid-area: main; +.add-to-cart:hover { + background: #e95b00; } - -.footer { - grid-area: footer; -} \ No newline at end of file diff --git a/static/Styles/login/login.css b/static/Styles/login/login.css new file mode 100644 index 0000000..7ff8038 --- /dev/null +++ b/static/Styles/login/login.css @@ -0,0 +1,109 @@ +/* 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; + justify-content: center; + align-items: center; +} + +/* Wrapper */ +.wrapper { + background: #ffffff; + padding: 40px; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + max-width: 400px; + width: 100%; +} + +h1 { + font-size: 24px; + text-align: center; + color: #333; + margin-bottom: 20px; +} + +/* Input-Box */ +.input-box { + position: relative; + margin-bottom: 20px; +} + +.input-box input { + width: 100%; + padding: 12px 40px 12px 15px; + border: 1px solid #ddd; + border-radius: 5px; + font-size: 16px; + color: #333; +} + +/* Styling für das Schloss-Icon */ +.input-box i { + position: absolute; + top: 50%; + right: 15px; + transform: translateY(-50%); + color: #888; + font-size: 20px; + cursor: pointer; +} + +/* Remember and Forgot */ +.remember-forgot { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 20px; + font-size: 14px; +} + +.remember-forgot a { + color: #ff6600; + text-decoration: none; +} + +.remember-forgot a:hover { + text-decoration: underline; +} + +/* Button */ +.btn { + width: 100%; + padding: 12px 20px; + background: #ff6600; + color: white; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; + transition: background 0.3s ease; +} + +.btn:hover { + background: #e95b00; +} + +/* Register-Link */ +.register-link { + text-align: center; + font-size: 14px; +} + +.register-link a { + color: #ff6600; + text-decoration: none; +} + +.register-link a:hover { + text-decoration: underline; +} \ No newline at end of file diff --git a/static/Styles/login/style.css b/static/Styles/login/style.css deleted file mode 100644 index de143f8..0000000 --- a/static/Styles/login/style.css +++ /dev/null @@ -1,102 +0,0 @@ -{ - margin: 0 -; - padding: 0 -; - box-sizing: border-box -; - font-family: "Poppins", sans-serif -; -} - -body { - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - background: url("../../images/LoginBackround.jpg"); -} - -.wrapper { - width: 420px; - background: lightgrey; - color: #111111; - border-radius: 15px; - padding: 45px 25px; -} - -.wrapper h1 { - font-size: 36px; - text-align: center; - margin-bottom: 40px; -} - -.wrapper .input-box { - position: relative; - width: 89%; - height: 50px; - margin: 20px 1px; -} - -.input-box input { - width: 100%; - height: 100%; - outline: none; - border: 2px solid rgba(255, 255, 255, .2); - border-radius: 40px; - font-size: 16px; - padding: 0 20px; -} - -.wrapper .input-box input::placeholder { - color: #111111; -} - -.input-box i { - position: absolute; - left: 390px; - top: 50%; - transform: translateY(-50%); - font-size: 20px; -} - -.wrapper .remember-forgot { - display: flex; - justify-content: space-between; - font-size: 16.5px; - margin: 10px 20px; -} - -.remember-forgot a { - color: #111111; - text-decoration: none; -} - -.remember-forgot a:hover { - text-decoration: underline; -} - -.wrapper .register-link { - font-size: 14px; - text-align: center; -} - -.register-link a { - color: #111111; - text-decoration: none; - margin: -1px 6px; -} - -.register-link a:hover { - text-decoration: underline; -} - -.wrapper .btn { - width: 100%; - height: 50px; - border: none; - outline: none; - margin-top: 40px; - border-radius: 40px; - cursor: pointer; -} diff --git a/static/Styles/registrieren/registrieren.css b/static/Styles/registrieren/registrieren.css new file mode 100644 index 0000000..1027480 --- /dev/null +++ b/static/Styles/registrieren/registrieren.css @@ -0,0 +1,129 @@ +/* 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; +} + +/* Wrapper für das Formular */ +.wrapper { + width: 100%; + max-width: 400px; + margin: 50px auto; + padding: 20px; + background: #fff; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +h1 { + text-align: center; + margin-bottom: 20px; + color: #333; +} + +/* Eingabefelder */ +.input-box { + position: relative; + margin-bottom: 20px; +} + +/* Textfelder */ +.input-box input { + width: 100%; + padding: 12px 15px; + font-size: 16px; + border: 1px solid #ddd; + border-radius: 5px; + outline: none; + padding-left: 40px; /* Platz für das Icon */ +} + +/* Positionierung der Icons */ +.input-box i { + position: absolute; + top: 50%; + left: 10px; + transform: translateY(-50%); + font-size: 18px; + color: #888; +} + +/* Passwortfeld */ +.input-box input[type="password"] { + padding-right: 40px; /* Platz für das Passwort-Symbol rechts */ +} + +/* Positionierung des Passwort-Symbols */ +#toggleRegPassword { + position: absolute; + top: 50%; + right: 10px; + transform: translateY(-50%); + font-size: 18px; + color: #888; + cursor: pointer; +} + +/* Passwort Sicherheitsbalken */ +.password-strength-bar { + width: 100%; + height: 5px; + background-color: #ddd; + border-radius: 5px; + margin-top: 10px; +} + +/* Sicherheitsstufen */ +.password-strength-bar.weak { + background-color: #f44336; /* Rot für schwach */ +} + +.password-strength-bar.medium { + background-color: #ff9800; /* Orange für mittel */ +} + +.password-strength-bar.strong { + background-color: #4caf50; /* Grün für stark */ +} + +/* Button */ +.btn { + width: 100%; + padding: 12px; + background: #ff6600; + color: white; + border: none; + border-radius: 25px; + font-size: 16px; + cursor: pointer; + transition: background 0.3s ease; +} + +.btn:hover { + background: #e95b00; +} + +/* Registrierung-Link */ +.register-link { + text-align: center; + margin-top: 20px; +} + +.register-link a { + text-decoration: none; + color: #ff6600; +} + +.register-link a:hover { + color: #e95b00; +} diff --git a/static/Styles/startseite/style.css b/static/Styles/startseite/startseite.css similarity index 100% rename from static/Styles/startseite/style.css rename to static/Styles/startseite/startseite.css