Update app.py

app.py

@@ -145,9 +145,10 @@ def catalog():
                 font-size: 1.5rem;
                 cursor: pointer;
                 color: #4a5568;
+                transition: color 0.3s ease;
             }
             .theme-toggle:hover {
-                color: #2b6cb0;
+                color: #3b82f6;
             }
             .filters-container {
                 margin: 20px 0;
@@ -166,30 +167,30 @@ def catalog():
                 padding: 12px 18px;
                 font-size: 1rem;
                 border: 1px solid #e2e8f0;
-                border-radius: 25px;
+                border-radius: 8px;
                 outline: none;
                 box-shadow: 0 2px 5px rgba(0,0,0,0.05);
                 transition: all 0.3s ease;
             }
             #search-input:focus {
-                border-color: #2b6cb0;
-                box-shadow: 0 4px 15px rgba(43, 108, 176, 0.2);
+                border-color: #3b82f6;
+                box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
             }
             .category-filter {
                 padding: 8px 16px;
                 border: 1px solid #e2e8f0;
-                border-radius: 20px;
+                border-radius: 8px;
                 background-color: #fff;
                 cursor: pointer;
-                transition: all 0.3s ease;
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                 font-size: 0.9rem;
                 font-weight: 400;
             }
             .category-filter.active, .category-filter:hover {
-                background-color: #2b6cb0;
+                background-color: #3b82f6;
                 color: white;
-                border-color: #2b6cb0;
-                box-shadow: 0 2px 10px rgba(43, 108, 176, 0.3);
+                border-color: #3b82f6;
+                box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
             }
             .products-grid {
                 display: grid;
@@ -202,11 +203,15 @@ def catalog():
                 border-radius: 15px;
                 padding: 15px;
                 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-                transition: transform 0.3s ease, box-shadow 0.3s ease;
+                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
                 overflow: hidden;
             }
+            body.dark-mode .product {
+                background: #2d3748;
+                color: #fff;
+            }
             .product:hover {
-                transform: translateY(-5px);
+                transform: translateY(-5px) scale(1.02);
                 box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
             }
             .product-image {
@@ -239,7 +244,7 @@ def catalog():
             }
             .product-price {
                 font-size: 1.3rem;
-                color: #e53e3e;
+                color: #ef4444;
                 font-weight: 700;
                 text-align: center;
                 margin: 5px 0;
@@ -253,37 +258,42 @@ def catalog():
                 text-overflow: ellipsis;
                 white-space: nowrap;
             }
+            body.dark-mode .product-description {
+                color: #a0aec0;
+            }
             .product-button {
                 display: block;
                 width: 100%;
                 padding: 10px;
                 border: none;
-                border-radius: 25px;
-                background-color: #2b6cb0;
+                border-radius: 8px;
+                background-color: #3b82f6;
                 color: white;
                 font-size: 0.9rem;
                 font-weight: 500;
                 cursor: pointer;
-                transition: all 0.3s ease;
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                 margin: 5px 0;
                 text-align: center;
                 text-decoration: none;
             }
             .product-button:hover {
-                background-color: #2c5282;
-                box-shadow: 0 2px 10px rgba(44, 82, 130, 0.4);
+                background-color: #2563eb;
+                box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
+                transform: translateY(-2px);
             }
             .add-to-cart {
-                background-color: #38a169;
+                background-color: #10b981;
             }
             .add-to-cart:hover {
-                background-color: #2f855a;
+                background-color: #059669;
+                box-shadow: 0 4px 15px rgba(5, 150, 105, 0.4);
             }
             #cart-button {
                 position: fixed;
                 bottom: 20px;
                 right: 20px;
-                background-color: #e53e3e;
+                background-color: #ef4444;
                 color: white;
                 border: none;
                 border-radius: 50%;
@@ -292,12 +302,12 @@ def catalog():
                 font-size: 1.5rem;
                 cursor: pointer;
                 display: none;
-                box-shadow: 0 4px 15px rgba(229, 62, 62, 0.4);
-                transition: all 0.3s ease;
+                box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                 z-index: 1000;
             }
             #cart-button:hover {
-                background-color: #c53030;
+                background-color: #dc2626;
                 transform: scale(1.1);
             }
             .modal {
@@ -321,6 +331,10 @@ def catalog():
                 box-shadow: 0 10px 30px rgba(0,0,0,0.2);
                 animation: slideIn 0.3s ease-out;
             }
+            body.dark-mode .modal-content {
+                background: #2d3748;
+                color: #e2e8f0;
+            }
             @keyframes slideIn {
                 from { transform: translateY(-50px); opacity: 0; }
                 to { transform: translateY(0); opacity: 1; }
@@ -335,6 +349,12 @@ def catalog():
             .close:hover {
                 color: #2d3748;
             }
+            body.dark-mode .close {
+                color: #a0aec0;
+            }
+            body.dark-mode .close:hover {
+                color: #fff;
+            }
             .cart-item {
                 display: flex;
                 justify-content: space-between;
@@ -342,6 +362,9 @@ def catalog():
                 padding: 15px 0;
                 border-bottom: 1px solid #e2e8f0;
             }
+            body.dark-mode .cart-item {
+                border-bottom: 1px solid #4a5568;
+            }
             .cart-item img {
                 width: 50px;
                 height: 50px;
@@ -353,20 +376,22 @@ def catalog():
                 width: 70px;
                 padding: 8px;
                 border: 1px solid #e2e8f0;
-                border-radius: 10px;
+                border-radius: 8px;
                 font-size: 1rem;
             }
             .clear-cart {
-                background-color: #e53e3e;
+                background-color: #ef4444;
             }
             .clear-cart:hover {
-                background-color: #c53030;
+                background-color: #dc2626;
+                box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
             }
             .order-button {
-                background-color: #25D366;
+                background-color: #10b981;
             }
             .order-button:hover {
-                background-color: #20B956;
+                background-color: #059669;
+                box-shadow: 0 4px 15px rgba(5, 150, 105, 0.4);
             }
             @media (max-width: 768px) {
                 .products-grid {
@@ -833,35 +858,37 @@ def admin():
                 padding: 12px;
                 margin-top: 5px;
                 border: 1px solid #e2e8f0;
-                border-radius: 10px;
+                border-radius: 8px;
                 font-size: 1rem;
                 transition: all 0.3s ease;
             }
             input:focus, textarea:focus, select:focus {
-                border-color: #2b6cb0;
-                box-shadow: 0 0 5px rgba(43, 108, 176, 0.3);
+                border-color: #3b82f6;
+                box-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
                 outline: none;
             }
             button {
                 padding: 12px 20px;
                 border: none;
-                border-radius: 25px;
-                background-color: #2b6cb0;
+                border-radius: 8px;
+                background-color: #3b82f6;
                 color: white;
                 font-weight: 500;
                 cursor: pointer;
-                transition: all 0.3s ease;
+                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                 margin-top: 15px;
             }
             button:hover {
-                background-color: #2c5282;
-                box-shadow: 0 2px 10px rgba(44, 82, 130, 0.4);
+                background-color: #2563eb;
+                box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
+                transform: translateY(-2px);
             }
             .delete-button {
-                background-color: #e53e3e;
+                background-color: #ef4444;
             }
             .delete-button:hover {
-                background-color: #c53030;
+                background-color: #dc2626;
+                box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
             }
             .product-list, .category-list {
                 display: grid;