41 lines
1.6 KiB
HTML
41 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Einfacher Online-Shop</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
|
|
</head>
|
|
<body class="bg-gray-100 min-h-screen">
|
|
<header class="bg-white shadow-sm mb-8">
|
|
<div class="container mx-auto px-4 py-6">
|
|
<h1 class="text-3xl font-bold text-gray-900">Unser Shop</h1>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container mx-auto px-4">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{% for product in products %}
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden">
|
|
<img
|
|
src="{{ product.image }}"
|
|
alt="{{ product.name }}"
|
|
class="w-full h-48 object-cover"
|
|
>
|
|
<div class="p-4">
|
|
<h2 class="text-xl font-semibold mb-2">{{ product.name }}</h2>
|
|
<p class="text-gray-600 text-lg mb-4">€{{ "%.2f"|format(product.price) }}</p>
|
|
<button
|
|
onclick="alert('Produkt wurde zum Warenkorb hinzugefügt!')"
|
|
class="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition-colors"
|
|
>
|
|
In den Warenkorb
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html> |