Update app.py

app.py

@@ -227,12 +227,12 @@ CATALOG_TEMPLATE = '''
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Georgia&display=swap" rel="stylesheet">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
         <style>
             :root {
-                --primary-color: #D4AF37; 
-                --primary-dark: #B8860B;
+                --primary-color: #FF3B30; 
+                --primary-dark: #D9322A;
                 --surface-color: #1A1A1A;
                 --background-color: #121212;
                 --text-color: #F5F5F5;
@@ -242,7 +242,7 @@ CATALOG_TEMPLATE = '''
             }
             * { margin: 0; padding: 0; box-sizing: border-box; }
             body { 
-                font-family: 'Roboto', sans-serif; 
+                font-family: 'Georgia', serif; 
                 background: var(--background-color); 
                 color: var(--text-color); 
                 line-height: 1.6; 
@@ -253,7 +253,7 @@ CATALOG_TEMPLATE = '''
 
             .header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: rgba(18, 18, 18, 0.8); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 1000; }
             .logo-title-container { display: flex; align-items: center; gap: 15px; }
-            .logo-title-container img { height: 45px; width: 45px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 10px rgba(212, 175, 55, 0.5); }
+            .logo-title-container img { height: 45px; width: 45px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 10px rgba(255, 59, 48, 0.5); }
             .header h1 { font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; font-weight: 700; color: var(--text-color); }
             
             .store-addresses { padding: 20px; text-align: center; background-color: var(--surface-color); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.5); font-size: 0.95rem; color: var(--text-color-muted); margin: 20px; }
@@ -262,18 +262,18 @@ CATALOG_TEMPLATE = '''
 
             .search-container { padding: 0 20px 20px; }
             #search-input { width: 100%; padding: 12px 20px; font-size: 1rem; border: 1px solid var(--border-color); border-radius: 50px; outline: none; transition: all 0.3s; background-color: var(--surface-color); color: var(--text-color); }
-            #search-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2); }
+            #search-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.2); }
             
             .filters-container { margin: 0 20px 20px; display: flex; overflow-x: auto; gap: 10px; padding-bottom: 10px; scrollbar-width: none; -ms-overflow-style: none; }
             .filters-container::-webkit-scrollbar { display: none; }
             .category-filter { padding: 8px 18px; border: 1px solid var(--border-color); border-radius: 50px; background-color: transparent; cursor: pointer; transition: all 0.3s ease; font-size: 0.9rem; font-weight: 400; color: var(--text-color-muted); white-space: nowrap; }
-            .category-filter.active, .category-filter:hover { background-color: var(--primary-color); color: #000; border-color: var(--primary-color); font-weight: 500; box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3); transform: translateY(-2px); }
+            .category-filter.active, .category-filter:hover { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color); font-weight: 500; box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3); transform: translateY(-2px); }
 
             .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; padding: 0 20px 120px; }
             @media (min-width: 600px) { .products-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px; } }
 
             .product { background: var(--surface-color); border-radius: 16px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); transition: all 0.3s ease; overflow: hidden; display: flex; flex-direction: column; height: 100%; position: relative; border: 1px solid var(--border-color); }
-            .product:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(212, 175, 55, 0.15); border-color: var(--primary-color); }
+            .product:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(255, 59, 48, 0.15); border-color: var(--primary-color); }
             
             .product-image { width: 100%; aspect-ratio: 1 / 1; background-color: #000; display: flex; justify-content: center; align-items: center; padding: 10px; }
             .product-image img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.3s ease; }
@@ -285,11 +285,11 @@ CATALOG_TEMPLATE = '''
             .product-description { display: none; }
             .product-actions { padding: 0 15px 15px; }
             
-            .product-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 10px; border: none; border-radius: 50px; background-color: var(--primary-color); color: #000; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; }
-            .product-button:hover { background-color: var(--primary-dark); box-shadow: 0 4px 10px rgba(212, 175, 55, 0.4); }
+            .product-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 10px; border: none; border-radius: 50px; background-color: var(--primary-color); color: #fff; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; }
+            .product-button:hover { background-color: var(--primary-dark); box-shadow: 0 4px 10px rgba(255, 59, 48, 0.4); }
             .product-button i { margin-right: 8px; }
 
-            .fab { position: fixed; background-color: var(--primary-color); color: #000; border: none; border-radius: 50%; width: 55px; height: 55px; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4); z-index: 1000; transition: transform 0.2s ease; }
+            .fab { position: fixed; background-color: var(--primary-color); color: #fff; border: none; border-radius: 50%; width: 55px; height: 55px; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(255, 59, 48, 0.4); z-index: 1000; transition: transform 0.2s ease; }
             .fab:hover { transform: scale(1.1); }
             #cart-button { bottom: 20px; right: 20px; display: none; }
             #cart-button span { position: absolute; top: -2px; right: -2px; background-color: #dc3545; color: white; border-radius: 50%; padding: 3px 7px; font-size: 0.75rem; font-weight: bold; min-width: 22px; text-align: center; }
@@ -321,10 +321,10 @@ CATALOG_TEMPLATE = '''
             .clear-cart { background: #444; color: var(--text-color); }
             .clear-cart:hover { background: #555; }
             
-            .notification { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background-color: var(--primary-color); color: #000; padding: 12px 25px; border-radius: 50px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); z-index: 1002; opacity: 0; transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); font-size: 0.95rem; font-weight: 500; }
+            .notification { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background-color: var(--primary-color); color: #fff; padding: 12px 25px; border-radius: 50px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); z-index: 1002; opacity: 0; transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); font-size: 0.95rem; font-weight: 500; }
             .notification.show { opacity: 1; bottom: 90px; }
             .no-results-message { grid-column: 1 / -1; text-align: center; padding: 50px; font-size: 1.2rem; color: var(--text-color-muted); }
-            .top-product-indicator { position: absolute; top: 10px; right: 10px; background: linear-gradient(135deg, #D4AF37, #B8860B); color: #000; padding: 3px 8px; font-size: 0.7rem; border-radius: 50px; font-weight: bold; z-index: 10; display: flex; align-items: center; gap: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
+            .top-product-indicator { position: absolute; top: 10px; right: 10px; background: linear-gradient(135deg, #FF3B30, #D9322A); color: #fff; padding: 3px 8px; font-size: 0.7rem; border-radius: 50px; font-weight: bold; z-index: 10; display: flex; align-items: center; gap: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
             
             #whatsapp-fab { bottom: 20px; left: 20px; background-color: #25D366; color: white; }
             #whatsapp-modal { display: none; position: fixed; bottom: 85px; left: 20px; background-color: var(--surface-color); border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.6); z-index: 1001; overflow: hidden; border: 1px solid var(--border-color); animation: fadeIn 0.3s; }
@@ -826,19 +826,19 @@ ORDER_TEMPLATE = '''
     <title>Заказ №{{ order.id }} - SHAIK парфюм</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Georgia&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     <style>
         :root {
-            --primary-color: #D4AF37; 
-            --primary-dark: #B8860B;
+            --primary-color: #FF3B30; 
+            --primary-dark: #D9322A;
             --surface-color: #1A1A1A;
             --background-color: #121212;
             --text-color: #F5F5F5;
             --text-color-muted: #999;
             --border-color: #333333;
         }
-        body { font-family: 'Roboto', sans-serif; background: var(--background-color); color: var(--text-color); line-height: 1.6; padding: 15px; }
+        body { font-family: 'Georgia', serif; background: var(--background-color); color: var(--text-color); line-height: 1.6; padding: 15px; }
         .container { max-width: 800px; margin: 20px auto; padding: 30px; background: var(--surface-color); border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); border: 1px solid var(--border-color); }
         h1, h2 { font-family: 'Cormorant Garamond', serif; color: var(--primary-color); }
         h1 { text-align: center; margin-bottom: 25px; font-size: 2.2rem; font-weight: 700; }
@@ -853,7 +853,7 @@ ORDER_TEMPLATE = '''
         .order-summary { margin-top: 30px; padding-top: 20px; border-top: 2px solid var(--primary-color); text-align: right; }
         .order-summary p { margin-bottom: 10px; font-size: 1.1rem; }
         .order-summary strong { font-size: 1.5rem; color: var(--primary-color); }
-        .customer-info { margin-top: 30px; background-color: rgba(212, 175, 55, 0.05); padding: 20px; border-radius: 12px; border: 1px solid var(--primary-color);}
+        .customer-info { margin-top: 30px; background-color: rgba(255, 59, 48, 0.05); padding: 20px; border-radius: 12px; border: 1px solid var(--primary-color);}
         .customer-info p { margin-bottom: 8px; font-size: 1rem; }
         .customer-info strong { color: var(--text-color); }
         .actions { margin-top: 30px; text-align: center; }
@@ -938,12 +938,12 @@ ADMIN_TEMPLATE = '''
         <title>Админ-панель - SHAIK парфюм</title>
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&family=Georgia&display=swap" rel="stylesheet">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
         <style>
             :root {
-                --primary-color: #D4AF37; 
-                --primary-dark: #B8860B;
+                --primary-color: #FF3B30; 
+                --primary-dark: #D9322A;
                 --surface-color: #1A1A1A;
                 --background-color: #121212;
                 --text-color: #F5F5F5;
@@ -956,7 +956,7 @@ ADMIN_TEMPLATE = '''
                 --warning-bg: #4a3a09;
                 --warning-text: #ffd56b;
             }
-            body { font-family: 'Roboto', sans-serif; background-color: var(--background-color); color: var(--text-color); padding: 15px; line-height: 1.5; }
+            body { font-family: 'Georgia', serif; background-color: var(--background-color); color: var(--text-color); padding: 15px; line-height: 1.5; }
             .container { max-width: 1200px; margin: 0 auto; background-color: var(--surface-color); padding: 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); border: 1px solid var(--border-color); }
             .header { padding-bottom: 20px; margin-bottom: 25px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;}
             h1, h2, h3, h4 { font-family: 'Cormorant Garamond', serif; font-weight: 600; color: var(--primary-color); margin:0 0 15px 0;}
@@ -967,12 +967,12 @@ ADMIN_TEMPLATE = '''
             
             label { font-weight: 500; margin-top: 12px; display: block; color: var(--text-color); font-size: 0.9rem;}
             input[type="text"], input[type="number"], input[type="password"], input[type="tel"], textarea, select { width: 100%; padding: 10px 12px; margin-top: 6px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.95rem; box-sizing: border-box; transition: border-color 0.3s ease; background-color: var(--background-color); color: var(--text-color); }
-            input:focus, textarea:focus, select:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2); }
+            input:focus, textarea:focus, select:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.2); }
             textarea { min-height: 90px; resize: vertical; }
             input[type="file"] { padding: 8px; background-color: #222; cursor: pointer; border: 1px solid var(--border-color); border-radius: 6px; }
             input[type="checkbox"] { transform: scale(1.2); margin-right: 8px; vertical-align: middle; accent-color: var(--primary-color); }
             
-            button, .button { padding: 9px 18px; border: none; border-radius: 50px; background-color: var(--primary-color); color: #000; font-weight: 500; cursor: pointer; transition: all 0.2s ease; margin-top: 15px; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.5px; }
+            button, .button { padding: 9px 18px; border: none; border-radius: 50px; background-color: var(--primary-color); color: #fff; font-weight: 500; cursor: pointer; transition: all 0.2s ease; margin-top: 15px; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.5px; }
             button:hover, .button:hover { background-color: var(--primary-dark); transform: translateY(-1px); }
             .delete-button { background-color: #8B0000; color: white; }
             .delete-button:hover { background-color: #6e0000; }