StartseiteHtml #20
2
.idea/dataSources.xml
generated
2
.idea/dataSources.xml
generated
@ -1,7 +1,7 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="DataSourceManagerImpl" format="xml" multifile-model="true">
|
||||
<data-source source="LOCAL" name="@localhost" uuid="56bf5b3c-7ea3-4d6d-b409-8711f3e52989">
|
||||
<data-source source="LOCAL" name="@localhost" uuid="fd7d9aa1-1427-4fa7-afe9-9730b93129bb">
|
||||
<driver-ref>mysql.8</driver-ref>
|
||||
<synchronize>true</synchronize>
|
||||
<jdbc-driver>com.mysql.cj.jdbc.Driver</jdbc-driver>
|
||||
|
||||
30
package-lock.json
generated
30
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, X-Content-Type-Options=nosniff">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="./Styles/styles-main.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello there...</h1>
|
||||
<a href="/example">Test</a>
|
||||
<a href="/login">Login</a>
|
||||
</body>
|
||||
</html>
|
||||
87
public/startseite.html
Normal file
87
public/startseite.html
Normal file
@ -0,0 +1,87 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Autohändler Webshop</title>
|
||||
<link rel="stylesheet" href="./Styles/startseite/style.css">
|
||||
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Wrapper für die gesamte Seite -->
|
||||
<div class="wrapper">
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<h1>Autohändler Webshop</h1>
|
||||
<div class="header-right">
|
||||
<a href="/login" class="login-btn">Login</a>
|
||||
<div class="cart">
|
||||
<i class='bx bx-cart'></i>
|
||||
<span class="cart-count">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Navigationsleiste -->
|
||||
<nav class="menu">
|
||||
<ul class="menu-list">
|
||||
<li class="menu-item">
|
||||
<a href="#">Startseite</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#">Neuwagen</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#">Gebrauchtwagen</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#">Angebote</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#">Kontakt</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Hauptinhalt -->
|
||||
<main>
|
||||
<div class="search-bar">
|
||||
<input type="text" placeholder="Marke oder Modell eingeben">
|
||||
<select>
|
||||
<option>Fahrzeugtyp</option>
|
||||
<option>SUV</option>
|
||||
<option>Limousine</option>
|
||||
<option>Kombi</option>
|
||||
</select>
|
||||
<select>
|
||||
<option>Preisspanne</option>
|
||||
<option>Bis 10.000€</option>
|
||||
<option>Bis 20.000€</option>
|
||||
<option>Bis 50.000€</option>
|
||||
</select>
|
||||
<button>Suchen</button>
|
||||
</div>
|
||||
|
||||
<section class="card-grid">
|
||||
<div class="card">
|
||||
<img src="https://via.placeholder.com/150" alt="Auto">
|
||||
<h3>BMW 3er Limousine</h3>
|
||||
<p>Preis: 35.000€</p>
|
||||
<p>Baujahr: 2020 | Kilometerstand: 20.000 km</p>
|
||||
<button class="add-to-cart">Zum Warenkorb hinzufügen</button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<img src="https://via.placeholder.com/150" alt="Auto">
|
||||
<h3>Audi Q5</h3>
|
||||
<p>Preis: 50.000€</p>
|
||||
<p>Baujahr: 2022 | Kilometerstand: 10.000 km</p>
|
||||
<button class="add-to-cart">Zum Warenkorb hinzufügen</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="startseite.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -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) => {
|
||||
|
||||
234
static/Styles/startseite/style.css
Normal file
234
static/Styles/startseite/style.css
Normal file
@ -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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user