62 lines
2.2 KiB
Django/Jinja
62 lines
2.2 KiB
Django/Jinja
{% extends "base.html.jinja" %}
|
|
{% block content %}
|
|
<!-- Shop Landing Page Header -->
|
|
<div class="mb-4">
|
|
<h2 class="h4 mb-3">Shop</h2>
|
|
<p class="text-muted">In welchem Bereich möchtest du einkaufen?</p>
|
|
</div>
|
|
|
|
<div class="row g-3">
|
|
{% for area in areas %}
|
|
<div class="col-md-6 col-lg-4">
|
|
<a href="/shop/area/{{ area.id }}" class="text-decoration-none">
|
|
<div class="card h-100 border-0 shadow-sm">
|
|
<div class="card-body d-flex align-items-center p-3">
|
|
<!-- Image on the left -->
|
|
<div class="me-3" style="width: 120px; flex-shrink: 0;">
|
|
<img
|
|
src="/static/img/{{ area.image_path if area.image_path !='' else 'placeholder.png'}}" }}"
|
|
alt="{{ area.name }}"
|
|
class="img-fluid rounded"
|
|
style="max-height: 100px; width: 100%; object-fit: contain;"
|
|
>
|
|
</div>
|
|
<!-- Title and description on the right -->
|
|
<div class="flex-grow-1">
|
|
<h5 class="card-title mb-1">{{ area.name }}</h5>
|
|
<p class="card-text text-muted small mb-0">{{ area.description or '' }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Optional: Featured Products Section -->
|
|
{# <div class="mt-5">#}
|
|
{# <div class="d-flex justify-content-between align-items-center mb-3">#}
|
|
{# <h2 class="h4 mb-0">Featured Products</h2>#}
|
|
{# <a href="#" class="btn btn-outline-primary btn-sm">View All</a>#}
|
|
{# </div>#}
|
|
{# <div class="alert alert-info">#}
|
|
{# Featured products will appear here#}
|
|
{# </div>#}
|
|
{# </div>#}
|
|
{% endblock %}
|
|
|
|
{% block styles %}
|
|
<style>
|
|
/* Hover effect for shop tiles */
|
|
.hover-shadow:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.card {
|
|
border: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
</style>
|
|
{% endblock %}
|