added bit of styling
parent
96ed635895
commit
b3ff7894c6
|
|
@ -12,8 +12,54 @@ main {
|
|||
padding: 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 0.5rem 1rem;
|
||||
margin-top: 1rem;
|
||||
.btn-primary {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
background-color: #007bff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
|
||||
.product-list {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.product-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
/* Styling der Produktnamen, -mengen und -preise */
|
||||
.product-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.product-quantity {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* Styling für den Gesamtpreis */
|
||||
.total-price {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>My Shop</h1>
|
||||
<h1>Shop</h1>
|
||||
</header>
|
||||
<main>
|
||||
{% block content %}{% endblock %}
|
||||
|
|
|
|||
|
|
@ -4,12 +4,18 @@
|
|||
|
||||
{% block content %}
|
||||
<h2>Cart Items</h2>
|
||||
<ul>
|
||||
|
||||
<ul class="product-list">
|
||||
{% for item in cart_items['items'] %}
|
||||
<li>Product ID: {{ item.product_id }} - Quantity: {{ item.quantity }} - Price: ${{ item.price }}</li>
|
||||
<li class="product-item">
|
||||
<div class="product-name">Product ID: {{ item.product_id }}</div>
|
||||
<div class="product-quantity">Quantity: {{ item.quantity }}</div>
|
||||
<div class="product-price">Price: {{ item.price }} €</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<p>Total Price: ${{ cart_items.total_price }}</p>
|
||||
|
||||
<p class="total-price">Total Price: {{ cart_items.total_price }} €</p>
|
||||
|
||||
<a href="{{ url_for('ui') }}" class="btn btn-primary">Back to the prodcuts</a>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,9 +4,12 @@
|
|||
|
||||
{% block content %}
|
||||
<h2>Product Items</h2>
|
||||
<ul>
|
||||
<ul class="product-list">
|
||||
{% for product in products %}
|
||||
<li>{{ product.name }} - ${{ product.price }}</li>
|
||||
<li class="product-item">
|
||||
<div class="product-name">{{ product.name }}</div>
|
||||
<div class="product-price">${{ product.price }}</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue