From e8a0823631bb320678c3c27e3244d8f8cdd19670 Mon Sep 17 00:00:00 2001 From: gitfreeking Date: Fri, 10 Jan 2025 09:47:17 +0100 Subject: [PATCH 1/2] Startseite erstellt --- .idea/dataSources.xml | 2 +- package-lock.json | 30 ++-- package.json | 4 +- public/index.html | 14 -- public/startseite.html | 87 +++++++++++ scripts/routes/other/route-index.js | 2 +- static/Styles/startseite/style.css | 234 ++++++++++++++++++++++++++++ 7 files changed, 343 insertions(+), 30 deletions(-) delete mode 100644 public/index.html create mode 100644 public/startseite.html create mode 100644 static/Styles/startseite/style.css diff --git a/.idea/dataSources.xml b/.idea/dataSources.xml index f3b232c..935ffdb 100644 --- a/.idea/dataSources.xml +++ b/.idea/dataSources.xml @@ -1,7 +1,7 @@ - + mysql.8 true com.mysql.cj.jdbc.Driver diff --git a/package-lock.json b/package-lock.json index 3460d88..12c8b6c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,8 +9,8 @@ "version": "1.0.0", "license": "ISC", "dependencies": { - "dotenv": "^16.4.5", - "express": "^4.21.1", + "dotenv": "^16.4.7", + "express": "^4.21.2", "express-session": "^1.18.1", "mysql": "^2.18.1", "path": "^0.12.7" @@ -169,9 +169,9 @@ } }, "node_modules/dotenv": { - "version": "16.4.5", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz", - "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==", + "version": "16.4.7", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz", + "integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==", "license": "BSD-2-Clause", "engines": { "node": ">=12" @@ -226,9 +226,10 @@ } }, "node_modules/express": { - "version": "4.21.1", - "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz", - "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==", + "version": "4.21.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz", + "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==", + "license": "MIT", "dependencies": { "accepts": "~1.3.8", "array-flatten": "1.1.1", @@ -249,7 +250,7 @@ "methods": "~1.1.2", "on-finished": "2.4.1", "parseurl": "~1.3.3", - "path-to-regexp": "0.1.10", + "path-to-regexp": "0.1.12", "proxy-addr": "~2.0.7", "qs": "6.13.0", "range-parser": "~1.2.1", @@ -264,6 +265,10 @@ }, "engines": { "node": ">= 0.10.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" } }, "node_modules/express-session": { @@ -589,9 +594,10 @@ } }, "node_modules/path-to-regexp": { - "version": "0.1.10", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz", - "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==" + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz", + "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==", + "license": "MIT" }, "node_modules/process": { "version": "0.11.10", diff --git a/package.json b/package.json index 27b6f65..eb23671 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,8 @@ "license": "ISC", "description": "Webshop Autohändler", "dependencies": { - "dotenv": "^16.4.5", - "express": "^4.21.1", + "dotenv": "^16.4.7", + "express": "^4.21.2", "express-session": "^1.18.1", "mysql": "^2.18.1", "path": "^0.12.7" diff --git a/public/index.html b/public/index.html deleted file mode 100644 index 3f4e590..0000000 --- a/public/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - Document - - - -

Hello there...

-Test -Login - - \ No newline at end of file diff --git a/public/startseite.html b/public/startseite.html new file mode 100644 index 0000000..0aa7b59 --- /dev/null +++ b/public/startseite.html @@ -0,0 +1,87 @@ + + + + + + Autohändler Webshop + + + + + +
+ +
+

Autohändler Webshop

+
+ +
+ + 0 +
+
+
+ + + + + +
+
+ + + + +
+ +
+
+ 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 562512e..34691e1 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/index.html')); + res.sendFile(path.join(__dirname, '../../../public/startseite.html')); }) router.get('/example', (req, res) => { diff --git a/static/Styles/startseite/style.css b/static/Styles/startseite/style.css new file mode 100644 index 0000000..d9450fe --- /dev/null +++ b/static/Styles/startseite/style.css @@ -0,0 +1,234 @@ +/* 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; +} From 96378d1ad6ff83867aff46ac142d62eb81a69b12 Mon Sep 17 00:00:00 2001 From: gitfreeking Date: Thu, 27 Feb 2025 10:36:43 +0100 Subject: [PATCH 2/2] startseite.html und registrieren.html erstellt. Keine 100%. --- public/example/index.html | 41 --- public/login/index.html | 49 --- public/login/login.html | 33 ++ public/registrieren/passwordValidation.js | 45 +++ public/registrieren/registrieren.html | 51 ++++ public/{ => startseite}/startseite.html | 2 +- scripts/routes/other/route-index.js | 8 +- static/Styles/example.css | 288 +++++++++++++----- static/Styles/login/login.css | 109 +++++++ static/Styles/login/style.css | 102 ------- static/Styles/registrieren/registrieren.css | 129 ++++++++ .../startseite/{style.css => startseite.css} | 0 12 files changed, 585 insertions(+), 272 deletions(-) delete mode 100644 public/example/index.html delete mode 100644 public/login/index.html create mode 100644 public/login/login.html create mode 100644 public/registrieren/passwordValidation.js create mode 100644 public/registrieren/registrieren.html rename public/{ => startseite}/startseite.html (97%) create mode 100644 static/Styles/login/login.css delete mode 100644 static/Styles/login/style.css create mode 100644 static/Styles/registrieren/registrieren.css rename static/Styles/startseite/{style.css => startseite.css} (100%) 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