Compare commits

..

No commits in common. "c4985aae6d44b3da9f9f24015a5f5f57a97af5f4" and "3d92eca334ff4154470d8eb66c4c70ef74089d19" have entirely different histories.

14 changed files with 377 additions and 397 deletions

View File

@ -27,5 +27,6 @@
</li>
<li class="menu-item"><a href="/ueberuns">Über uns</a></li>
<li class="menu-item"><a href="/kontakt">Kontakt</a></li>
<li class="menu-item"><a href="/bestellformular">Bestellformular</a></li>
</ul>
</nav>

View File

@ -15,7 +15,7 @@
<main class="main-content">
<div class="login-container">
<h2 class="title">Login</h2>
<h2 class="login-title">Login</h2>
<form class="login-form">
<div class="input-group">
<input type="text" placeholder="Username" required />

View File

@ -17,9 +17,9 @@
<!-- Registrierungsformular -->
<main class="content-wrapper">
<div class="register-wrapper">
<div class="wrapper">
<form action="register.php" method="POST">
<h2 class="title">Registrieren</h2>
<h1>Registrieren</h1>
<div class="input-box">
<input type="text" name="vorname" placeholder="Vorname" required>
@ -39,12 +39,11 @@
</div>
<div class="input-box">
<input type="password" id="confirmPassword" name="confirmPassword" placeholder="Passwort bestätigen"
required>
<input type="password" id="confirmPassword" name="confirmPassword" placeholder="Passwort bestätigen" required>
<i class='bx bxs-lock-alt'></i>
</div>
<button type="submit" class="register-btn">Registrieren</button>
<button type="submit" class="btn">Registrieren</button>
<div class="register-link">
<br>

View File

@ -23,9 +23,6 @@
</section>
</main>
<!-- Fußzeiele -->
<div id="footer"></div>
<script>
fetch('/api/products')
.then(res => res.json())
@ -47,7 +44,7 @@
});
})
.catch(err => {
console.error('Fehler beim Laden der Shop_Produkte:', err);
console.error('Fehler beim Laden der Produkte:', err);
const container = document.getElementById('products');
container.innerHTML =
@ -57,5 +54,9 @@
</div>`;
});
</script>
<!-- Fußzeiele -->
<div id="footer"></div>
</body>
</html>

View File

@ -9,24 +9,16 @@
<script src="/header_footer"></script>
</head>
<body>
<div class="wrapper">
<!-- Header -->
<div id="header-placeholder"></div>
<!-- Hauptinhalt -->
<main>
<section style="padding: 0px 30px; text-align: left;">
<h1>Unsere LKW Produkte</h1>
</section>
<section class="card-grid" id="products_lkw">
<!-- Dynamische Produkte (filtern nach Motorrad) -->
</section>
</main>
<!-- Fußzeiele -->
<div id="footer"></div>
</div>
<script>
fetch('/api/products/lkw')
@ -45,20 +37,23 @@
<p>${product.description}</p>
<button class="add-to-cart" data-id="${product.id}">Zum Warenkorb hinzufügen</button>
`;
container.appendChild(card);
});
})
.catch(err => {
console.error('Fehler beim Laden der LKW_Produkte:', err);
console.error('Fehler beim Laden der Produkte:', err);
const container = document.getElementById('products_lkw');
const container = document.getElementById('products_oldtimer');
container.innerHTML =
`<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
Wir arbeiten bereits daran bitte versuchen Sie es später erneut.</p>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran bitte versuchen Sie es später erneut.</p>
</div>`;
});
</script>
<!-- Fußzeiele -->
<div id="footer"></div>
</body>
</html>

View File

@ -9,24 +9,17 @@
<script src="/header_footer"></script>
</head>
<body>
<div class="wrapper">
<!-- Header -->
<div id="header-placeholder"></div>
<!-- Hauptinhalt -->
<main class="main-content">
<section style="padding: 0px 30px; text-align: left;">
<h1>Unsere Motorrad Produkte</h1>
</section>
<section class="card-grid" id="products_motorrad">
<!-- Dynamische Produkte oder Fehlermeldung -->
<!-- Dynamische Produkte (filtern nach Motorrad) -->
</section>
</main>
<!-- Fußzeile -->
<div id="footer"></div>
</div>
<script>
fetch('/api/products/motorrad')
@ -49,14 +42,19 @@
});
})
.catch(err => {
console.error('Fehler beim Laden der Motorrad_Produkte:', err);
console.error('Fehler beim Laden der Produkte:', err);
const container = document.getElementById('products_motorrad');
container.innerHTML = `
<div class="error-message">
container.innerHTML =
`<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran bitte versuchen Sie es später erneut.</p>
</div>`;
});
</script>
<!-- Fußzeiele -->
<div id="footer"></div>
</body>
</html>

View File

@ -9,31 +9,23 @@
<script src="/header_footer"></script>
</head>
<body>
<div class="wrapper">
<!-- Header -->
<div id="header-placeholder"></div>
<!-- Hauptinhalt -->
<main class="main-content">
<section style="padding: 0px 30px; text-align: left;">
<h1>Unsere Oldtimer Produkte</h1>
</section>
<section class="card-grid" id="products_oldtimer">
<!-- Dynamische Produkte oder Fehlermeldung -->
<!-- Dynamische Produkte (filtern nach Motorrad) -->
</section>
</main>
<!-- Fußzeile -->
<div id="footer"></div>
</div>
<script>
fetch('/api/products/oldtimer')
.then(res => res.json())
.then(products => {
const container = document.getElementById('products_oldtimer');
container.innerHTML = '';
container.innerHTML = ''; // sicherheitshalber leeren
products.forEach(product => {
const card = document.createElement('div');
@ -49,14 +41,19 @@
});
})
.catch(err => {
console.error('Fehler beim Laden der Oldtimer_Produkte:', err);
console.error('Fehler beim Laden der Produkte:', err);
const container = document.getElementById('products_oldtimer');
container.innerHTML = `
<div class="error-message">
container.innerHTML =
`<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>Wir arbeiten bereits daran bitte versuchen Sie es später erneut.</p>
</div>`;
});
</script>
<!-- Fußzeiele -->
<div id="footer"></div>
</body>
</html>

View File

@ -14,7 +14,6 @@
<div id="header-placeholder"></div>
<!-- Hauptinhalt -->
<main>
<section style="padding: 0px 30px; text-align: left;">
<h1>Unsere Sportwagen Produkte</h1>
</section>
@ -22,7 +21,6 @@
<section class="card-grid" id="products_sportwagen">
<!-- Dynamische Produkte oder Fehlermeldung -->
</section>
</main>
<!-- Footer -->
<div id="footer"></div>
@ -49,16 +47,18 @@
});
})
.catch(err => {
console.error('Fehler beim Laden der Sportwagen_Produkte:', err);
console.error('Fehler beim Laden der Produkte:', err);
const container = document.getElementById('products_sportwagen');
container.innerHTML =
`<div class="error-message">
container.innerHTML = `
<div class="error-message">
<h3>Fehler beim Laden der Produkte</h3>
<p>Es gab ein Problem beim Abrufen der Produktdaten.<br>
Wir arbeiten bereits daran bitte versuchen Sie es später erneut.</p>
</div> `;
</div>
`;
});
</script>
</body>
</html>

View File

@ -9,6 +9,13 @@
margin: 50px auto; /* Zentriert das Formular */
}
.login-title {
font-size: 26px;
font-weight: 600;
margin-bottom: 25px;
color: #333;
}
.login-form .input-group {
position: relative;
margin-bottom: 20px;

View File

@ -4,7 +4,7 @@
min-height: 100vh;
}
.register-wrapper {
.wrapper {
max-width: 400px;
width: 100%;
padding: 30px;
@ -21,7 +21,6 @@
align-items: center;
padding: 40px 20px;
}
.registration-container {
max-width: 400px;
margin: 60px auto;
@ -50,6 +49,22 @@
box-sizing: border-box;
}
.registration-container button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 8px;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s ease;
}
.registration-container button[type="submit"]:hover {
background-color: #0056b3;
}
.register-link {
text-align: center;
font-size: 14px;
@ -66,16 +81,3 @@
text-decoration: underline;
}
.register-btn {
width: 100%;
padding: 12px;
background: #ff6600;
color: white;
border: none;
border-radius: 25px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s ease;
}

View File

@ -41,13 +41,7 @@ header {
.logo-container {
display: flex;
align-items: center;
text-decoration: none;
color: inherit;
}
.logo-container h1 {
margin-left: 10px;
font-size: 1.8rem;
gap: 15px;
}
.logo-img {
@ -289,14 +283,6 @@ main {
margin-bottom: 20px;
}
.title {
font-size: 26px;
font-weight: 600;
margin-bottom: 25px;
color: #333;
text-align: center;
}
.input-box input {
width: 100%;
padding: 12px 40px 12px 15px;
@ -409,14 +395,8 @@ h1 {
/* Optional: weiche Animation beim Einblenden */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}