Started with area page

src/allmende_payment_system/templates/area.html.jinja

@@ -0,0 +1,36 @@
+{% extends "base.html.jinja" %}
+{% block content %}
+    <!-- Area Header -->
+    <div class="mb-4">
+        <h2 class="h4 mb-3">{{ area.name }}</h2>
+        <p class="text-muted">{{ area.description or ''}} </p>
+    </div>
+
+    <!-- Products Grid -->
+    <div class="row g-3">
+        {% for product in area.products %}
+        <div class="col-md-6 col-lg-4">
+            <div class="card h-100 border-0 shadow-sm">
+                <a href="#" class="text-decoration-none text-dark">
+                    <!-- Product Image -->
+                    <img
+                        src="/static/img/{{ product.image_path if product.image_path else 'placeholder.jpg' }}"
+                        alt="{{ product.name }}"
+                        class="card-img-top img-fluid rounded-top"
+                        style="height: 100px; object-fit: cover;"
+                    >
+                    <!-- Product Details -->
+                    <div class="card-body">
+                        <h5 class="card-title mb-2">{{ product.name }}</h5>
+                        <p class="card-text text-muted small mb-3">{{ product.description }}</p>
+                        <div class="d-flex justify-content-between align-items-center">
+                            <span class="fw-bold">{{ product.price|format_number }} € pro {{ product.unit_of_measure|units_of_measure_de }}</span>
+                            <button class="btn btn-sm btn-outline-primary">Add to Cart</button>
+                        </div>
+                    </div>
+                </a>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+{% endblock %}