107 lines
1.9 KiB
HTML
107 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Reifenliste mit Größenfilter</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
background-color: #f5f5f5;
|
||
margin: 20px;
|
||
color: #333;
|
||
}
|
||
|
||
h1 {
|
||
text-align: center;
|
||
color: #2c3e50;
|
||
}
|
||
|
||
input[type="text"],
|
||
input[type="number"],
|
||
select {
|
||
padding: 8px 10px;
|
||
margin: 5px 0;
|
||
border: 1px solid #ccc;
|
||
border-radius: 5px;
|
||
width: 200px;
|
||
box-sizing: border-box;
|
||
font-size: 14px;
|
||
}
|
||
|
||
label {
|
||
font-weight: bold;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
#product-list {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 15px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.product-card {
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
||
padding: 15px;
|
||
width: 200px;
|
||
text-align: center;
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
|
||
.product-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
.product-name {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
color: #34495e;
|
||
}
|
||
|
||
.product-price {
|
||
font-size: 14px;
|
||
color: #e67e22;
|
||
font-weight: bold;
|
||
}
|
||
|
||
</style>
|
||
|
||
<title>Interaktive Produktliste mit Filter</title>
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<h1>Autoreifen – Filterfunktion</h1>
|
||
|
||
|
||
<input type="text" id="search" placeholder="Reifen suchen..." onkeyup="filterProducts()">
|
||
|
||
<br><br>
|
||
|
||
<label>Maximalpreis: </label>
|
||
<input type="number" id="priceFilter" placeholder="Preis" oninput="filterProducts()">
|
||
|
||
<br><br>
|
||
|
||
|
||
<label>Reifengröße wählen: </label>
|
||
<select id="sizeFilter" onchange="filterProducts()">
|
||
<option value="">Alle Größen</option>
|
||
<option value="16">16 Zoll</option>
|
||
<option value="17">17 Zoll</option>
|
||
<option value="18">18 Zoll</option>
|
||
<option value="19">19 Zoll</option>
|
||
</select>
|
||
|
||
<br><br>
|
||
|
||
<div id="product-list"></div>
|
||
|
||
</body>
|
||
</html>
|