From b3ff7894c64e0a77e117ae24945db51c7439190f Mon Sep 17 00:00:00 2001
From: Felix Mucha <3016498@stud.hs-mannheim.de>
Date: Sun, 5 Jan 2025 22:54:33 +0100
Subject: [PATCH] added bit of styling

---
 src/framework_driver/ui/static/css/style.css  | 52 +++++++++++++++++--
 src/framework_driver/ui/templates/base.html   |  2 +-
 src/framework_driver/ui/templates/cart.html   | 12 +++--
 .../ui/templates/products.html                |  7 ++-
 4 files changed, 64 insertions(+), 9 deletions(-)
diff --git a/src/framework_driver/ui/static/css/style.css b/src/framework_driver/ui/static/css/style.css
index ed01269..3498937 100644
--- a/src/framework_driver/ui/static/css/style.css
+++ b/src/framework_driver/ui/static/css/style.css
@@ -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;
 }
\ No newline at end of file
diff --git a/src/framework_driver/ui/templates/base.html b/src/framework_driver/ui/templates/base.html
index 310dab3..4d3d569 100644
--- a/src/framework_driver/ui/templates/base.html
+++ b/src/framework_driver/ui/templates/base.html
@@ -8,7 +8,7 @@
 </head>
 <body>
     <header>
-        <h1>My Shop</h1>
+        <h1>Shop</h1>
     </header>
     <main>
         {% block content %}{% endblock %}
diff --git a/src/framework_driver/ui/templates/cart.html b/src/framework_driver/ui/templates/cart.html
index 87e1d0b..92d7c97 100644
--- a/src/framework_driver/ui/templates/cart.html
+++ b/src/framework_driver/ui/templates/cart.html
@@ -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>
 
diff --git a/src/framework_driver/ui/templates/products.html b/src/framework_driver/ui/templates/products.html
index 3f07482..f23f82a 100644
--- a/src/framework_driver/ui/templates/products.html
+++ b/src/framework_driver/ui/templates/products.html
@@ -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>
 
