BMW 3er Limousine
+Preis: 35.000€
+Baujahr: 2020 | Kilometerstand: 20.000 km
+ +Audi Q5
+Preis: 50.000€
+Baujahr: 2022 | Kilometerstand: 10.000 km
+ +Preis: 35.000€
+Baujahr: 2020 | Kilometerstand: 20.000 km
+ +Preis: 50.000€
+Baujahr: 2022 | Kilometerstand: 10.000 km
+ +Click the button to toggle between dark and light mode for this page.
- - - - - - \ No newline at end of file diff --git a/src/frontend/example/toggle_dark_light/styles.css b/src/frontend/example/toggle_dark_light/styles.css deleted file mode 100644 index aebb339..0000000 --- a/src/frontend/example/toggle_dark_light/styles.css +++ /dev/null @@ -1,11 +0,0 @@ -body { - padding: 25px; - background-color: white; - color: black; - font-size: 25px; -} - -.dark-mode { - background-color: black; - color: white; -} \ No newline at end of file diff --git a/static/Styles/Warenkorb/warenkorb.css b/static/Styles/Warenkorb/warenkorb.css new file mode 100644 index 0000000..b1209d4 --- /dev/null +++ b/static/Styles/Warenkorb/warenkorb.css @@ -0,0 +1,79 @@ +body { + font-family: Arial, sans-serif; + background-color: #f3f3f3; + margin: 0; + padding: 130px; +} + +.warenkorb { + max-width: 500px; + margin: 0 auto; + background: white; + padding: 120px; + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0,0,0,0.1); +} + +.warenkorb h2 { + font-size: 30px; + text-align: center; + margin-bottom: 60px; +} + +.item { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid #ddd; + padding: 10px 0; + margin-bottom: 35px; +} + +.item .info { + display: flex; + flex-direction: column; +} + +.item .name { + font-weight: bold; +} + +.item .price { + color: #555; +} + +.remove { + background-color: #ff4d4f; + border: none; + color: white; + padding: 6px 12px; + border-radius: 6px; + cursor: pointer; +} + +.remove:hover { + background-color: #e60000; +} + +.summary { + text-align: right; + font-size: 1.1em; + margin: 20px 0; +} + +.checkout { + display: block; + width: 100%; + padding: 12px; + background-color: #4CAF50; + border: none; + color: white; + font-size: 16px; + border-radius: 8px; + cursor: pointer; + margin-top: 90px; +} + +.checkout:hover { + background-color: #45a049; +} diff --git a/static/Styles/example.css b/static/Styles/example.css new file mode 100644 index 0000000..d9450fe --- /dev/null +++ b/static/Styles/example.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; +} 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/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/startseite.css b/static/Styles/startseite/startseite.css new file mode 100644 index 0000000..d9450fe --- /dev/null +++ b/static/Styles/startseite/startseite.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; +} diff --git a/static/Styles/styles-main.css b/static/Styles/styles-main.css new file mode 100644 index 0000000..b82692c --- /dev/null +++ b/static/Styles/styles-main.css @@ -0,0 +1,26 @@ + +/* +=============== +Fonts +=============== +*/ +@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap"); + +/* +=============== +Variables +=============== +*/ +:root { + --demo-clr: #ff0000; +} + +/* +=============== +Global Styles +=============== +*/ + +h1 { + color: var(--demo-clr); +} \ No newline at end of file diff --git a/static/images/LoginBackround.jpg b/static/images/LoginBackround.jpg new file mode 100644 index 0000000..087be46 Binary files /dev/null and b/static/images/LoginBackround.jpg differ