added bit of styling

uebung_entities
Felix Jan Michael Mucha 2025-01-05 22:54:33 +01:00
parent 96ed635895
commit b3ff7894c6
4 changed files with 64 additions and 9 deletions

View File

@ -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;
}

View File

@ -8,7 +8,7 @@
</head>
<body>
<header>
<h1>My Shop</h1>
<h1>Shop</h1>
</header>
<main>
{% block content %}{% endblock %}

View File

@ -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>

View File

@ -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>