From eb569b2a6c4b0704162c804574d16b9207986c4e Mon Sep 17 00:00:00 2001
From: daMustermann <julian.neumann@gmail.com>
Date: Sat, 11 Jan 2025 23:15:19 +0100
Subject: [PATCH] Enhance UI: Improve card and item templates with additional
 styling and layout adjustments

---
 templates/index.html |  9 +++++++++
 templates/item.html  | 29 ++++++++++++++++++++++++++---
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index c19ebe0..e05aac1 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -94,15 +94,24 @@
             background-color: var(--card-background);
             border-color: var(--border-color);
             margin-bottom: 10px;
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            transition: background-color 0.3s, box-shadow 0.3s;
         }
 
         .card-body {
             color: var(--text-primary);
+            padding: 20px;
         }
 
         .card-title a {
             color: var(--text-primary);
             text-decoration: none;
+            transition: color 0.3s;
+        }
+
+        .card-title a:hover {
+            color: var(--text-color-hover);
         }
 
         .form-control {
diff --git a/templates/item.html b/templates/item.html
index 6f657e4..02bd184 100644
--- a/templates/item.html
+++ b/templates/item.html
@@ -51,6 +51,23 @@
             border-radius: 8px;
             border: 1px solid var(--border-color);
             margin-top: 20px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .item-title {
+            font-size: 2rem;
+            font-weight: bold;
+            margin-bottom: 20px;
+        }
+
+        .item-description {
+            font-size: 1.2rem;
+            margin-bottom: 20px;
+        }
+
+        .item-details {
+            font-size: 1rem;
+            color: var(--text-secondary);
         }
 
         .btn-primary {
@@ -96,9 +113,15 @@ <h1>{{ item.title }}</h1>
         <p><b>Location:</b> {{ item.location }}</p>
         <p>
             <b>Quantity:</b>
-            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="decrementQuantity()">-</button>
-            <input type="number" name="quantity" id="quantity" class="form-control" value="{{ item.quantity }}" min="1">
-            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="incrementQuantity()">+</button>
+            <div class="input-group" style="max-width: 150px;">
+            <div class="input-group-prepend">
+                <button type="button" class="btn btn-outline-secondary" onclick="decrementQuantity()">-</button>
+            </div>
+            <input type="number" name="quantity" id="quantity" class="form-control text-center" value="{{ item.quantity }}" min="1">
+            <div class="input-group-append">
+                <button type="button" class="btn btn-outline-secondary" onclick="incrementQuantity()">+</button>
+            </div>
+            </div>
         </p>
         <p><b>Created at:</b> {{ item.created_at.strftime('%Y-%m-%d %H:%M') }}</p>
         <a href="{{ url_for('index') }}" class="btn btn-primary">Back to Inventory</a>