Hugging Face's logo

Spaces:
Shaik-parfume
/
admin
Running

App Files Community
Kgshop commited on
Commit
fbd81f1
·
verified ·
1 Parent(s): 4eade77

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +132 -124
app.py CHANGED
@@ -18,7 +18,7 @@ import uuid
18
  load_dotenv()
19
 
20
  app = Flask(__name__)
21
- app.secret_key = 'your_unique_secret_key_soola_cosmetics_67890_no_login' # Secret key still needed for flash messages
22
  DATA_FILE = 'data.json'
23
 
24
 
@@ -215,104 +215,107 @@ CATALOG_TEMPLATE = '''
215
  <head>
216
  <meta charset="UTF-8">
217
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
218
- <title>MedinaTurkey.kz - Каталог</title>
219
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
220
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
221
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
222
  <style>
223
  * { margin: 0; padding: 0; box-sizing: border-box; }
224
- body { font-family: 'Poppins', sans-serif; background: #f0f9f4; color: #2d332f; line-height: 1.6; transition: background 0.3s, color 0.3s; }
225
- body.dark-mode { background: #1a2b26; color: #c8d8d3; }
226
  .container { max-width: 1300px; margin: 0 auto; padding: 20px; }
227
- .header { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #d1e7dd; }
228
- body.dark-mode .header { border-bottom-color: #2c4a41; }
229
- .header h1 { font-size: 1.8rem; font-weight: 600; color: #1C6758; }
230
- .theme-toggle { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #7a8d85; transition: color 0.3s ease; }
231
- .theme-toggle:hover { color: #3D8361; }
232
- body.dark-mode .theme-toggle { color: #8aa39a; }
233
- body.dark-mode .theme-toggle:hover { color: #55a683; }
234
- .store-address { padding: 15px; text-align: center; background-color: #ffffff; margin: 20px 0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); font-size: 1rem; color: #44524c; }
235
- body.dark-mode .store-address { background-color: #253f37; color: #b0c8c1; }
236
  .filters-container { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
237
  .search-container { margin: 20px 0; text-align: center; }
238
- #search-input { width: 90%; max-width: 600px; padding: 12px 18px; font-size: 1rem; border: 1px solid #d1e7dd; border-radius: 25px; outline: none; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: all 0.3s ease; }
239
- body.dark-mode #search-input { background-color: #253f37; border-color: #2c4a41; color: #c8d8d3; }
240
- #search-input:focus { border-color: #1C6758; box-shadow: 0 0 0 3px rgba(28, 103, 88, 0.2); }
241
- body.dark-mode #search-input:focus { border-color: #3D8361; box-shadow: 0 0 0 3px rgba(61, 131, 97, 0.3); }
242
- .category-filter { padding: 8px 16px; border: 1px solid #d1e7dd; border-radius: 20px; background-color: #fff; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.9rem; font-weight: 400; color: #1C6758; }
243
- body.dark-mode .category-filter { background-color: #253f37; border-color: #2c4a41; color: #97b7ae; }
244
- .category-filter.active, .category-filter:hover { background-color: #1C6758; color: white; border-color: #1C6758; box-shadow: 0 2px 10px rgba(28, 103, 88, 0.3); }
245
- body.dark-mode .category-filter.active, body.dark-mode .category-filter:hover { background-color: #3D8361; border-color: #3D8361; color: #1a2b26; box-shadow: 0 2px 10px rgba(61, 131, 97, 0.4); }
246
  .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; padding: 10px; }
247
  @media (min-width: 600px) { .products-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
248
  @media (min-width: 900px) { .products-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } }
249
 
250
- .product { background: #fff; border-radius: 15px; padding: 0; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; height: 100%; border: 1px solid #e1f0e9;}
251
- body.dark-mode .product { background: #253f37; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); border-color: #2c4a41; }
252
  .product:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
253
  body.dark-mode .product:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
254
  .product-image { width: 100%; aspect-ratio: 1 / 1; background-color: #fff; border-radius: 10px 10px 0 0; overflow: hidden; display: flex; justify-content: center; align-items: center; margin-bottom: 0; }
255
  .product-image img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.3s ease; }
256
  .product-info { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
257
- .product h2 { font-size: 1.1rem; font-weight: 600; margin: 0 0 8px 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #2d332f; }
258
- body.dark-mode .product h2 { color: #c8d8d3; }
259
- .product-price { font-size: 1.2rem; color: #1C6758; font-weight: 700; text-align: center; margin: 5px 0; }
260
- body.dark-mode .product-price { color: #55a683; }
261
- .product-description { font-size: 0.85rem; color: #7a8d85; text-align: center; margin-bottom: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
262
- body.dark-mode .product-description { color: #8aa39a; }
263
  .product-actions { padding: 0 15px 15px 15px; display: flex; flex-direction: column; gap: 8px; }
264
- .product-button { display: block; width: 100%; padding: 10px; border: none; border-radius: 8px; background-color: #1C6758; color: white; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-align: center; text-decoration: none; }
265
- .product-button:hover { background-color: #164B41; box-shadow: 0 4px 15px rgba(22, 75, 65, 0.4); transform: translateY(-2px); }
266
  .product-button i { margin-right: 5px; }
267
- .add-to-cart { background-color: #38a169; }
268
- .add-to-cart:hover { background-color: #2f855a; box-shadow: 0 4px 15px rgba(47, 133, 90, 0.4); }
269
- #cart-button { position: fixed; bottom: 25px; right: 25px; background-color: #1C6758; color: white; border: none; border-radius: 50%; width: 55px; height: 55px; font-size: 1.5rem; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(28, 103, 88, 0.4); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1000; }
270
  #cart-button .fa-shopping-cart { margin-right: 0; }
271
- #cart-button span { position: absolute; top: -5px; right: -5px; background-color: #38a169; color: white; border-radius: 50%; padding: 2px 6px; font-size: 0.7rem; font-weight: bold; }
272
  .modal { display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(5px); overflow-y: auto; }
273
- .modal-content { background: #f8fcfb; margin: 5% auto; padding: 25px; border-radius: 15px; width: 90%; max-width: 700px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); animation: slideIn 0.3s ease-out; position: relative; }
274
- body.dark-mode .modal-content { background: #253f37; color: #c8d8d3; }
275
  @keyframes slideIn { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
276
  .close { position: absolute; top: 15px; right: 15px; font-size: 1.8rem; color: #aaa; cursor: pointer; transition: color 0.3s; line-height: 1; }
277
  .close:hover { color: #333; }
278
- body.dark-mode .close { color: #7a8d85; }
279
- body.dark-mode .close:hover { color: #b0c8c1; }
280
- .modal-content h2 { margin-top: 0; margin-bottom: 20px; color: #1C6758; display: flex; align-items: center; gap: 10px;}
281
- body.dark-mode .modal-content h2 { color: #55a683; }
282
- .cart-item { display: grid; grid-template-columns: auto 1fr auto auto; gap: 15px; align-items: center; padding: 15px 0; border-bottom: 1px solid #d1e7dd; }
283
- body.dark-mode .cart-item { border-bottom-color: #2c4a41; }
284
  .cart-item:last-child { border-bottom: none; }
285
  .cart-item img { width: 60px; height: 60px; object-fit: contain; border-radius: 8px; background-color: #fff; padding: 5px; grid-column: 1; }
286
  .cart-item-details { grid-column: 2; }
287
  .cart-item-details strong { display: block; margin-bottom: 5px; font-size: 1rem; }
288
- .cart-item-price { font-size: 0.9rem; color: #44524c; }
289
- body.dark-mode .cart-item-price { color: #8aa39a; }
290
  .cart-item-total { font-weight: bold; text-align: right; grid-column: 3; font-size: 1rem;}
291
  .cart-item-remove { grid-column: 4; background:none; border:none; color:#f56565; cursor:pointer; font-size: 1.3em; padding: 5px; line-height: 1; }
292
  .cart-item-remove:hover { color: #c53030; }
293
- .quantity-input, .color-select { width: 100%; max-width: 180px; padding: 10px; border: 1px solid #d1e7dd; border-radius: 8px; font-size: 1rem; margin: 10px 0; box-sizing: border-box; }
294
- body.dark-mode .quantity-input, body.dark-mode .color-select { background-color: #1a2b26; border-color: #2c4a41; color: #c8d8d3; }
295
- .cart-summary { margin-top: 20px; text-align: right; border-top: 1px solid #d1e7dd; padding-top: 15px; }
296
- body.dark-mode .cart-summary { border-top-color: #2c4a41; }
297
  .cart-summary strong { font-size: 1.2rem; }
298
  .cart-actions { margin-top: 25px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
299
  .cart-actions .product-button { width: auto; flex-grow: 1; }
300
- .clear-cart { background-color: #7a8d85; }
301
- .clear-cart:hover { background-color: #5e6e68; box-shadow: 0 4px 15px rgba(94, 110, 104, 0.4); }
302
- .formulate-order-button { background-color: #38a169; }
303
- .formulate-order-button:hover { background-color: #2f855a; box-shadow: 0 4px 15px rgba(47, 133, 90, 0.4); }
304
- .notification { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background-color: #38a169; color: white; padding: 10px 20px; border-radius: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 1002; opacity: 0; transition: opacity 0.5s ease; font-size: 0.9rem;}
305
  .notification.show { opacity: 1;}
306
- .no-results-message { grid-column: 1 / -1; text-align: center; padding: 40px; font-size: 1.1rem; color: #5e6e68; }
307
- body.dark-mode .no-results-message { color: #8aa39a; }
308
  .top-product-indicator { position: absolute; top: 8px; right: 8px; background-color: rgba(255, 215, 0, 0.8); color: #333; padding: 2px 6px; font-size: 0.7rem; border-radius: 4px; font-weight: bold; z-index: 10; backdrop-filter: blur(2px); }
309
  .product { position: relative; }
310
  </style>
311
  </head>
312
  <body>
313
  <div class="container">
314
- <div class="header">
315
- <h1>MedinaTurkey.kz</h1>
 
 
 
316
  <button class="theme-toggle" onclick="toggleTheme()" aria-label="Переключить тему">
317
  <i class="fas fa-moon"></i>
318
  </button>
@@ -803,7 +806,7 @@ CATALOG_TEMPLATE = '''
803
 
804
  PRODUCT_DETAIL_TEMPLATE = '''
805
  <div style="padding: 10px;">
806
- <h2 style="font-size: 1.6rem; font-weight: 600; margin-bottom: 15px; text-align: center; color: #1C6758;">{{ product['name'] }}</h2>
807
  <div class="swiper-container" style="max-width: 450px; margin: 0 auto 20px; border-radius: 10px; overflow: hidden; background-color: #fff;">
808
  <div class="swiper-wrapper">
809
  {% if product.get('photos') and product['photos']|length > 0 %}
@@ -824,14 +827,14 @@ PRODUCT_DETAIL_TEMPLATE = '''
824
  </div>
825
  {% if product.get('photos') and product['photos']|length > 1 %}
826
  <div class="swiper-pagination" style="position: relative; bottom: 5px;"></div>
827
- <div class="swiper-button-next" style="color: #1C6758;"></div>
828
- <div class="swiper-button-prev" style="color: #1C6758;"></div>
829
  {% endif %}
830
  </div>
831
 
832
  <div style="margin-top: 20px; font-size: 1rem; line-height: 1.7;">
833
  <p><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
834
- <p style="font-size: 1.2rem; font-weight: bold; color: #1C6758;"><strong>Цена:</strong> {{ "%.2f"|format(product['price']) }} {{ currency_code }}</p>
835
  <p><strong>Описание:</strong><br> {{ product.get('description', 'Описание отсутствует.')|replace('\\n', '<br>')|safe }}</p>
836
  {% set colors = product.get('colors', []) %}
837
  {% if colors and colors|select('ne', '')|list|length > 0 %}
@@ -847,33 +850,33 @@ ORDER_TEMPLATE = '''
847
  <head>
848
  <meta charset="UTF-8">
849
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
850
- <title>Заказ №{{ order.id }} - MedinaTurkey.kz</title>
851
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
852
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
853
  <style>
854
- body { font-family: 'Poppins', sans-serif; background: #f0f9f4; color: #2d332f; line-height: 1.6; padding: 20px; }
855
- .container { max-width: 800px; margin: 20px auto; padding: 30px; background: #fff; border-radius: 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); border: 1px solid #d1e7dd; }
856
- h1 { text-align: center; color: #1C6758; margin-bottom: 25px; font-size: 1.8rem; font-weight: 600; }
857
- h2 { color: #164B41; margin-top: 30px; margin-bottom: 15px; font-size: 1.4rem; border-bottom: 1px solid #d1e7dd; padding-bottom: 8px;}
858
- .order-meta { font-size: 0.9rem; color: #5e6e68; margin-bottom: 20px; text-align: center; }
859
- .order-item { display: grid; grid-template-columns: 60px 1fr auto; gap: 15px; align-items: center; padding: 15px 0; border-bottom: 1px solid #e1f0e9; }
860
  .order-item:last-child { border-bottom: none; }
861
- .order-item img { width: 60px; height: 60px; object-fit: contain; border-radius: 8px; background-color: #fff; padding: 5px; border: 1px solid #e1f0e9;}
862
- .item-details strong { display: block; margin-bottom: 5px; font-size: 1.05rem; color: #2d332f;}
863
- .item-details span { font-size: 0.9rem; color: #44524c; display: block;}
864
- .item-total { font-weight: bold; text-align: right; font-size: 1rem; color: #1C6758;}
865
- .order-summary { margin-top: 30px; padding-top: 20px; border-top: 2px solid #1C6758; text-align: right; }
866
  .order-summary p { margin-bottom: 10px; font-size: 1.1rem; }
867
- .order-summary strong { font-size: 1.3rem; color: #1C6758; }
868
- .customer-info { margin-top: 30px; background-color: #f8fcfb; padding: 20px; border-radius: 8px; border: 1px solid #e1f0e9;}
869
  .customer-info p { margin-bottom: 8px; font-size: 0.95rem; }
870
- .customer-info strong { color: #164B41; }
871
  .actions { margin-top: 30px; text-align: center; }
872
- .button { padding: 12px 25px; border: none; border-radius: 8px; background-color: #25D366; color: white; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease, transform 0.1s ease; font-size: 1rem; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
873
- .button:hover { background-color: #128C7E; }
874
  .button:active { transform: scale(0.98); }
875
  .button i { font-size: 1.2rem; }
876
- .catalog-link { display: block; text-align: center; margin-top: 25px; color: #3D8361; text-decoration: none; font-size: 0.9rem; }
877
  .catalog-link:hover { text-decoration: underline; }
878
  .not-found { text-align: center; color: #c53030; font-size: 1.2rem; padding: 40px 0;}
879
  </style>
@@ -921,9 +924,9 @@ ORDER_TEMPLATE = '''
921
  function sendOrderViaWhatsApp() {
922
  const orderId = '{{ order.id }}';
923
  const orderUrl = `{{ request.url }}`;
924
- const whatsappNumber = "77479003212";
925
 
926
- let message = `Здравствуйте! Хочу подтвердить свой заказ на MedinaTurkey.kz:%0A%0A`;
927
  message += `*Номер заказа:* ${orderId}%0A`;
928
  message += `*Ссылка на заказ:* ${encodeURIComponent(orderUrl)}%0A%0A`;
929
  message += `Пожалуйста, свяжитесь со мной для уточнения деталей оплаты и доставки.`;
@@ -949,79 +952,83 @@ ADMIN_TEMPLATE = '''
949
  <head>
950
  <meta charset="UTF-8">
951
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
952
- <title>Админ-панель - MedinaTurkey.kz</title>
953
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
954
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
955
  <style>
956
- body { font-family: 'Poppins', sans-serif; background-color: #e9f5f0; color: #2d332f; padding: 20px; line-height: 1.6; }
957
  .container { max-width: 1200px; margin: 0 auto; background-color: #fff; padding: 25px; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.05); }
958
- .header { padding-bottom: 15px; margin-bottom: 25px; border-bottom: 1px solid #d1e7dd; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;}
959
- h1, h2, h3 { font-weight: 600; color: #1C6758; margin-bottom: 15px; }
960
  h1 { font-size: 1.8rem; }
961
  h2 { font-size: 1.5rem; margin-top: 30px; display: flex; align-items: center; gap: 8px; }
962
- h3 { font-size: 1.2rem; color: #164B41; margin-top: 20px; }
963
- .section { margin-bottom: 30px; padding: 20px; background-color: #f8fcfb; border: 1px solid #d1e7dd; border-radius: 8px; }
964
  form { margin-bottom: 20px; }
965
- label { font-weight: 500; margin-top: 10px; display: block; color: #44524c; font-size: 0.9rem;}
966
- input[type="text"], input[type="number"], input[type="password"], input[type="tel"], textarea, select { width: 100%; padding: 10px 12px; margin-top: 5px; border: 1px solid #c4d9d1; border-radius: 6px; font-size: 0.95rem; box-sizing: border-box; transition: border-color 0.3s ease; }
967
- input:focus, textarea:focus, select:focus { border-color: #1C6758; outline: none; box-shadow: 0 0 0 2px rgba(28, 103, 88, 0.1); }
968
  textarea { min-height: 80px; resize: vertical; }
969
- input[type="file"] { padding: 8px; background-color: #f0f9f4; cursor: pointer; border: 1px solid #c4d9d1;}
970
- input[type="file"]::file-selector-button { padding: 5px 10px; border-radius: 4px; background-color: #e0f0e9; border: 1px solid #c4d9d1; cursor: pointer; margin-right: 10px;}
971
  input[type="checkbox"] { margin-right: 5px; vertical-align: middle; }
972
  label.inline-label { display: inline-block; margin-top: 10px; font-weight: normal; }
973
- button, .button { padding: 10px 18px; border: none; border-radius: 6px; background-color: #1C6758; color: white; font-weight: 500; cursor: pointer; transition: background-color 0.3s ease, transform 0.1s ease; margin-top: 15px; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; line-height: 1.2;}
974
- button:hover, .button:hover { background-color: #164B41; }
975
  button:active, .button:active { transform: scale(0.98); }
976
  button[type="submit"] { min-width: 120px; justify-content: center; }
977
  .delete-button { background-color: #f56565; }
978
  .delete-button:hover { background-color: #e53e3e; }
979
- .add-button { background-color: #38a169; }
980
- .add-button:hover { background-color: #2f855a; }
981
  .item-list { display: grid; gap: 20px; }
982
- .item { background: #fff; padding: 15px 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.07); border: 1px solid #e1f0e9; }
983
- .item p { margin: 5px 0; font-size: 0.9rem; color: #44524c; }
984
- .item strong { color: #2d332f; }
985
- .item .description { font-size: 0.85rem; color: #5e6e68; max-height: 60px; overflow: hidden; text-overflow: ellipsis; }
986
  .item-actions { margin-top: 15px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
987
- .item-actions button:not(.delete-button) { background-color: #1C6758; }
988
- .item-actions button:not(.delete-button):hover { background-color: #164B41; }
989
- .edit-form-container { margin-top: 15px; padding: 20px; background: #f0f9f4; border: 1px dashed #c4d9d1; border-radius: 6px; display: none; }
990
- details { background-color: #f8fcfb; border: 1px solid #d1e7dd; border-radius: 8px; margin-bottom: 20px; }
991
- details > summary { cursor: pointer; font-weight: 600; color: #164B41; display: block; padding: 15px; border-bottom: 1px solid #d1e7dd; list-style: none; position: relative; }
992
- details > summary::after { content: '\\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); transition: transform 0.2s ease; color: #1C6758; }
993
  details[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
994
- details[open] > summary { border-bottom: 1px solid #d1e7dd; }
995
  details .form-content { padding: 20px; }
996
  .color-input-group { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
997
  .color-input-group input { flex-grow: 1; margin: 0; }
998
  .remove-color-btn { background-color: #f56565; padding: 6px 10px; font-size: 0.8rem; margin-top: 0; line-height: 1; }
999
  .remove-color-btn:hover { background-color: #e53e3e; }
1000
- .add-color-btn { background-color: #63b3ed; }
1001
- .add-color-btn:hover { background-color: #4299e1; }
1002
- .photo-preview img { max-width: 70px; max-height: 70px; border-radius: 5px; margin: 5px 5px 0 0; border: 1px solid #d1e7dd; object-fit: cover;}
1003
  .sync-buttons { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
1004
- .download-hf-button { background-color: #7a8d85; }
1005
- .download-hf-button:hover { background-color: #5e6e68; }
1006
  .flex-container { display: flex; flex-wrap: wrap; gap: 20px; }
1007
  .flex-item { flex: 1; min-width: 350px; }
1008
  .message { padding: 10px 15px; border-radius: 6px; margin-bottom: 15px; font-size: 0.9rem;}
1009
- .message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb;}
1010
- .message.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;}
1011
- .message.warning { background-color: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
1012
  .status-indicator { display: inline-block; padding: 3px 8px; border-radius: 12px; font-size: 0.8rem; font-weight: 500; margin-left: 10px; vertical-align: middle; }
1013
- .status-indicator.in-stock { background-color: #c6f6d5; color: #2f855a; }
1014
- .status-indicator.out-of-stock { background-color: #fed7d7; color: #c53030; }
1015
- .status-indicator.top-product { background-color: #feebc8; color: #9c4221; margin-left: 5px;}
1016
  </style>
1017
  </head>
1018
  <body>
1019
  <div class="container">
1020
  <div class="header">
1021
- <h1><i class="fas fa-tools"></i> Админ-панель MedinaTurkey.kz</h1>
1022
- <a href="{{ url_for('catalog') }}" class="button" style="background-color: #3D8361;"><i class="fas fa-store"></i> Перейти в каталог</a>
 
 
 
1023
  </div>
1024
 
 
1025
  {% with messages = get_flashed_messages(with_categories=true) %}
1026
  {% if messages %}
1027
  {% for category, message in messages %}
@@ -1040,7 +1047,7 @@ ADMIN_TEMPLATE = '''
1040
  <button type="submit" class="button download-hf-button" title="Скачать файлы (перезапишет локальные)"><i class="fas fa-download"></i> Скачать БД</button>
1041
  </form>
1042
  </div>
1043
- <p style="font-size: 0.85rem; color: #5e6e68;">Резервное копирование происходит автоматически каждые 30 минут, а также после каждого сохранения данных. Используйте эти кнопки для немедленной синхронизации.</p>
1044
  </div>
1045
 
1046
  <div class="flex-container">
@@ -1149,7 +1156,7 @@ ADMIN_TEMPLATE = '''
1149
  {% endif %}
1150
  </div>
1151
  <div style="flex-grow: 1;">
1152
- <h3 style="margin-top: 0; margin-bottom: 5px; color: #2d332f;">
1153
  {{ product['name'] }}
1154
  {% if product.get('in_stock', True) %}
1155
  <span class="status-indicator in-stock">В наличии</span>
@@ -1166,7 +1173,7 @@ ADMIN_TEMPLATE = '''
1166
  {% set colors = product.get('colors', []) %}
1167
  <p><strong>Цвета/Вар-ты:</strong> {{ colors|select('ne', '')|join(', ') if colors|select('ne', '')|list|length > 0 else 'Нет' }}</p>
1168
  {% if product.get('photos') and product['photos']|length > 1 %}
1169
- <p style="font-size: 0.8rem; color: #5e6e68;">(Всего фото: {{ product['photos']|length }})</p>
1170
  {% endif %}
1171
  </div>
1172
  </div>
@@ -1281,6 +1288,7 @@ ADMIN_TEMPLATE = '''
1281
  if (group) {
1282
  const container = group.parentNode;
1283
  group.remove();
 
1284
  if (container && container.children.length === 0) {
1285
  const placeholderGroup = document.createElement('div');
1286
  placeholderGroup.className = 'color-input-group';
 
18
  load_dotenv()
19
 
20
  app = Flask(__name__)
21
+ app.secret_key = 'your_unique_secret_key_soola_cosmetics_67890_no_login'
22
  DATA_FILE = 'data.json'
23
 
24
 
 
215
  <head>
216
  <meta charset="UTF-8">
217
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
218
+ <title>Aikas_optom - Каталог</title>
219
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
220
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
221
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
222
  <style>
223
  * { margin: 0; padding: 0; box-sizing: border-box; }
224
+ body { font-family: 'Poppins', sans-serif; background: #FFF0F5; color: #4d333f; line-height: 1.6; transition: background 0.3s, color 0.3s; }
225
+ body.dark-mode { background: #2c1a2b; color: #fce7f3; }
226
  .container { max-width: 1300px; margin: 0 auto; padding: 20px; }
227
+ .header { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #FBCFE8; }
228
+ body.dark-mode .header { border-bottom-color: #59344f; }
229
+ .header h1 { font-size: 1.8rem; font-weight: 600; color: #F472B6; }
230
+ .theme-toggle { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #d1a7b8; transition: color 0.3s ease; }
231
+ .theme-toggle:hover { color: #DB2777; }
232
+ body.dark-mode .theme-toggle { color: #fbcfe8; }
233
+ body.dark-mode .theme-toggle:hover { color: #f9a8d4; }
234
+ .store-address { padding: 15px; text-align: center; background-color: #ffffff; margin: 20px 0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); font-size: 1rem; color: #6b4d5d; }
235
+ body.dark-mode .store-address { background-color: #412539; color: #fbcfe8; }
236
  .filters-container { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
237
  .search-container { margin: 20px 0; text-align: center; }
238
+ #search-input { width: 90%; max-width: 600px; padding: 12px 18px; font-size: 1rem; border: 1px solid #FBCFE8; border-radius: 25px; outline: none; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: all 0.3s ease; }
239
+ body.dark-mode #search-input { background-color: #412539; border-color: #59344f; color: #fce7f3; }
240
+ #search-input:focus { border-color: #F472B6; box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.2); }
241
+ body.dark-mode #search-input:focus { border-color: #EC4899; box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.3); }
242
+ .category-filter { padding: 8px 16px; border: 1px solid #FBCFE8; border-radius: 20px; background-color: #fff; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.9rem; font-weight: 400; color: #DB2777; }
243
+ body.dark-mode .category-filter { background-color: #412539; border-color: #59344f; color: #f9a8d4; }
244
+ .category-filter.active, .category-filter:hover { background-color: #F472B6; color: white; border-color: #F472B6; box-shadow: 0 2px 10px rgba(244, 114, 182, 0.3); }
245
+ body.dark-mode .category-filter.active, body.dark-mode .category-filter:hover { background-color: #EC4899; border-color: #EC4899; color: #2c1a2b; box-shadow: 0 2px 10px rgba(236, 72, 153, 0.4); }
246
  .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; padding: 10px; }
247
  @media (min-width: 600px) { .products-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
248
  @media (min-width: 900px) { .products-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } }
249
 
250
+ .product { background: #fff; border-radius: 15px; padding: 0; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; height: 100%; border: 1px solid #FCE7F3;}
251
+ body.dark-mode .product { background: #412539; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); border-color: #59344f; }
252
  .product:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
253
  body.dark-mode .product:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
254
  .product-image { width: 100%; aspect-ratio: 1 / 1; background-color: #fff; border-radius: 10px 10px 0 0; overflow: hidden; display: flex; justify-content: center; align-items: center; margin-bottom: 0; }
255
  .product-image img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.3s ease; }
256
  .product-info { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
257
+ .product h2 { font-size: 1.1rem; font-weight: 600; margin: 0 0 8px 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #4d333f; }
258
+ body.dark-mode .product h2 { color: #fce7f3; }
259
+ .product-price { font-size: 1.2rem; color: #DB2777; font-weight: 700; text-align: center; margin: 5px 0; }
260
+ body.dark-mode .product-price { color: #f9a8d4; }
261
+ .product-description { font-size: 0.85rem; color: #b88fa7; text-align: center; margin-bottom: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
262
+ body.dark-mode .product-description { color: #fbcfe8; }
263
  .product-actions { padding: 0 15px 15px 15px; display: flex; flex-direction: column; gap: 8px; }
264
+ .product-button { display: block; width: 100%; padding: 10px; border: none; border-radius: 8px; background-color: #F472B6; color: white; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-align: center; text-decoration: none; }
265
+ .product-button:hover { background-color: #DB2777; box-shadow: 0 4px 15px rgba(219, 39, 119, 0.4); transform: translateY(-2px); }
266
  .product-button i { margin-right: 5px; }
267
+ .add-to-cart { background-color: #F472B6; } /* Changed from green */
268
+ .add-to-cart:hover { background-color: #DB2777; box-shadow: 0 4px 15px rgba(219, 39, 119, 0.4); } /* Changed from green */
269
+ #cart-button { position: fixed; bottom: 25px; right: 25px; background-color: #F472B6; color: white; border: none; border-radius: 50%; width: 55px; height: 55px; font-size: 1.5rem; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(244, 114, 182, 0.4); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1000; }
270
  #cart-button .fa-shopping-cart { margin-right: 0; }
271
+ #cart-button span { position: absolute; top: -5px; right: -5px; background-color: #DB2777; color: white; border-radius: 50%; padding: 2px 6px; font-size: 0.7rem; font-weight: bold; }
272
  .modal { display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(5px); overflow-y: auto; }
273
+ .modal-content { background: #ffffff; margin: 5% auto; padding: 25px; border-radius: 15px; width: 90%; max-width: 700px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); animation: slideIn 0.3s ease-out; position: relative; }
274
+ body.dark-mode .modal-content { background: #412539; color: #fce7f3; }
275
  @keyframes slideIn { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
276
  .close { position: absolute; top: 15px; right: 15px; font-size: 1.8rem; color: #aaa; cursor: pointer; transition: color 0.3s; line-height: 1; }
277
  .close:hover { color: #333; }
278
+ body.dark-mode .close { color: #fbcfe8; }
279
+ body.dark-mode .close:hover { color: #ffffff; }
280
+ .modal-content h2 { margin-top: 0; margin-bottom: 20px; color: #F472B6; display: flex; align-items: center; gap: 10px;}
281
+ body.dark-mode .modal-content h2 { color: #f9a8d4; }
282
+ .cart-item { display: grid; grid-template-columns: auto 1fr auto auto; gap: 15px; align-items: center; padding: 15px 0; border-bottom: 1px solid #FBCFE8; }
283
+ body.dark-mode .cart-item { border-bottom-color: #59344f; }
284
  .cart-item:last-child { border-bottom: none; }
285
  .cart-item img { width: 60px; height: 60px; object-fit: contain; border-radius: 8px; background-color: #fff; padding: 5px; grid-column: 1; }
286
  .cart-item-details { grid-column: 2; }
287
  .cart-item-details strong { display: block; margin-bottom: 5px; font-size: 1rem; }
288
+ .cart-item-price { font-size: 0.9rem; color: #6b4d5d; }
289
+ body.dark-mode .cart-item-price { color: #fbcfe8; }
290
  .cart-item-total { font-weight: bold; text-align: right; grid-column: 3; font-size: 1rem;}
291
  .cart-item-remove { grid-column: 4; background:none; border:none; color:#f56565; cursor:pointer; font-size: 1.3em; padding: 5px; line-height: 1; }
292
  .cart-item-remove:hover { color: #c53030; }
293
+ .quantity-input, .color-select { width: 100%; max-width: 180px; padding: 10px; border: 1px solid #FBCFE8; border-radius: 8px; font-size: 1rem; margin: 10px 0; box-sizing: border-box; }
294
+ body.dark-mode .quantity-input, body.dark-mode .color-select { background-color: #2c1a2b; border-color: #59344f; color: #fce7f3; }
295
+ .cart-summary { margin-top: 20px; text-align: right; border-top: 1px solid #FBCFE8; padding-top: 15px; }
296
+ body.dark-mode .cart-summary { border-top-color: #59344f; }
297
  .cart-summary strong { font-size: 1.2rem; }
298
  .cart-actions { margin-top: 25px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
299
  .cart-actions .product-button { width: auto; flex-grow: 1; }
300
+ .clear-cart { background-color: #a0aec0; } /* Grey color */
301
+ .clear-cart:hover { background-color: #718096; box-shadow: 0 4px 15px rgba(113, 128, 150, 0.4); }
302
+ .formulate-order-button { background-color: #F472B6; } /* Pink color */
303
+ .formulate-order-button:hover { background-color: #DB2777; box-shadow: 0 4px 15px rgba(219, 39, 119, 0.4); } /* Darker Pink */
304
+ .notification { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background-color: #F472B6; color: white; padding: 10px 20px; border-radius: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); z-index: 1002; opacity: 0; transition: opacity 0.5s ease; font-size: 0.9rem;}
305
  .notification.show { opacity: 1;}
306
+ .no-results-message { grid-column: 1 / -1; text-align: center; padding: 40px; font-size: 1.1rem; color: #a0aec0; }
307
+ body.dark-mode .no-results-message { color: #fbcfe8; }
308
  .top-product-indicator { position: absolute; top: 8px; right: 8px; background-color: rgba(255, 215, 0, 0.8); color: #333; padding: 2px 6px; font-size: 0.7rem; border-radius: 4px; font-weight: bold; z-index: 10; backdrop-filter: blur(2px); }
309
  .product { position: relative; }
310
  </style>
311
  </head>
312
  <body>
313
  <div class="container">
314
+ <div class="header">
315
+ <div class="logo-title-container" style="display: flex; align-items: center; gap: 15px;">
316
+ <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/67c280ccb9d3dfdee58ecfdd/p2TVtSc6UQr0De1jDYBLk.jpeg" alt="Aikas_optom Logo" style="height: 40px; width: auto; border-radius: 4px;">
317
+ <h1>Aikas_optom</h1>
318
+ </div>
319
  <button class="theme-toggle" onclick="toggleTheme()" aria-label="Переключить тему">
320
  <i class="fas fa-moon"></i>
321
  </button>
 
806
 
807
  PRODUCT_DETAIL_TEMPLATE = '''
808
  <div style="padding: 10px;">
809
+ <h2 style="font-size: 1.6rem; font-weight: 600; margin-bottom: 15px; text-align: center; color: #F472B6;">{{ product['name'] }}</h2>
810
  <div class="swiper-container" style="max-width: 450px; margin: 0 auto 20px; border-radius: 10px; overflow: hidden; background-color: #fff;">
811
  <div class="swiper-wrapper">
812
  {% if product.get('photos') and product['photos']|length > 0 %}
 
827
  </div>
828
  {% if product.get('photos') and product['photos']|length > 1 %}
829
  <div class="swiper-pagination" style="position: relative; bottom: 5px;"></div>
830
+ <div class="swiper-button-next" style="color: #F472B6;"></div>
831
+ <div class="swiper-button-prev" style="color: #F472B6;"></div>
832
  {% endif %}
833
  </div>
834
 
835
  <div style="margin-top: 20px; font-size: 1rem; line-height: 1.7;">
836
  <p><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
837
+ <p style="font-size: 1.2rem; font-weight: bold; color: #DB2777;"><strong>Цена:</strong> {{ "%.2f"|format(product['price']) }} {{ currency_code }}</p>
838
  <p><strong>Описание:</strong><br> {{ product.get('description', 'Описание отсутствует.')|replace('\\n', '<br>')|safe }}</p>
839
  {% set colors = product.get('colors', []) %}
840
  {% if colors and colors|select('ne', '')|list|length > 0 %}
 
850
  <head>
851
  <meta charset="UTF-8">
852
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
853
+ <title>Заказ №{{ order.id }} - Aikas_optom</title>
854
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
855
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
856
  <style>
857
+ body { font-family: 'Poppins', sans-serif; background: #FFF0F5; color: #4d333f; line-height: 1.6; padding: 20px; }
858
+ .container { max-width: 800px; margin: 20px auto; padding: 30px; background: #fff; border-radius: 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); border: 1px solid #FBCFE8; }
859
+ h1 { text-align: center; color: #F472B6; margin-bottom: 25px; font-size: 1.8rem; font-weight: 600; }
860
+ h2 { color: #DB2777; margin-top: 30px; margin-bottom: 15px; font-size: 1.4rem; border-bottom: 1px solid #FBCFE8; padding-bottom: 8px;}
861
+ .order-meta { font-size: 0.9rem; color: #a0aec0; margin-bottom: 20px; text-align: center; }
862
+ .order-item { display: grid; grid-template-columns: 60px 1fr auto; gap: 15px; align-items: center; padding: 15px 0; border-bottom: 1px solid #FCE7F3; }
863
  .order-item:last-child { border-bottom: none; }
864
+ .order-item img { width: 60px; height: 60px; object-fit: contain; border-radius: 8px; background-color: #fff; padding: 5px; border: 1px solid #FCE7F3;}
865
+ .item-details strong { display: block; margin-bottom: 5px; font-size: 1.05rem; color: #4d333f;}
866
+ .item-details span { font-size: 0.9rem; color: #6b4d5d; display: block;}
867
+ .item-total { font-weight: bold; text-align: right; font-size: 1rem; color: #DB2777;}
868
+ .order-summary { margin-top: 30px; padding-top: 20px; border-top: 2px solid #F472B6; text-align: right; }
869
  .order-summary p { margin-bottom: 10px; font-size: 1.1rem; }
870
+ .order-summary strong { font-size: 1.3rem; color: #F472B6; }
871
+ .customer-info { margin-top: 30px; background-color: #fff7fa; padding: 20px; border-radius: 8px; border: 1px solid #FCE7F3;}
872
  .customer-info p { margin-bottom: 8px; font-size: 0.95rem; }
873
+ .customer-info strong { color: #DB2777; }
874
  .actions { margin-top: 30px; text-align: center; }
875
+ .button { padding: 12px 25px; border: none; border-radius: 8px; background-color: #F472B6; color: white; font-weight: 600; cursor: pointer; transition: background-color 0.3s ease, transform 0.1s ease; font-size: 1rem; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
876
+ .button:hover { background-color: #DB2777; }
877
  .button:active { transform: scale(0.98); }
878
  .button i { font-size: 1.2rem; }
879
+ .catalog-link { display: block; text-align: center; margin-top: 25px; color: #EC4899; text-decoration: none; font-size: 0.9rem; }
880
  .catalog-link:hover { text-decoration: underline; }
881
  .not-found { text-align: center; color: #c53030; font-size: 1.2rem; padding: 40px 0;}
882
  </style>
 
924
  function sendOrderViaWhatsApp() {
925
  const orderId = '{{ order.id }}';
926
  const orderUrl = `{{ request.url }}`;
927
+ const whatsappNumber = "996507003777"; /* UPDATED NUMBER */
928
 
929
+ let message = `Здравствуйте! Хочу подтвердить свой заказ на Aikas_optom:%0A%0A`; /* UPDATED NAME */
930
  message += `*Номер заказа:* ${orderId}%0A`;
931
  message += `*Ссылка на заказ:* ${encodeURIComponent(orderUrl)}%0A%0A`;
932
  message += `Пожалуйста, свяжитесь со мной для уточнения деталей оплаты и доставки.`;
 
952
  <head>
953
  <meta charset="UTF-8">
954
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
955
+ <title>Админ-панель - Aikas_optom</title>
956
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
957
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
958
  <style>
959
+ body { font-family: 'Poppins', sans-serif; background-color: #fff7fa; color: #4d333f; padding: 20px; line-height: 1.6; }
960
  .container { max-width: 1200px; margin: 0 auto; background-color: #fff; padding: 25px; border-radius: 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.05); }
961
+ .header { padding-bottom: 15px; margin-bottom: 25px; border-bottom: 1px solid #FBCFE8; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;}
962
+ h1, h2, h3 { font-weight: 600; color: #F472B6; margin-bottom: 15px; }
963
  h1 { font-size: 1.8rem; }
964
  h2 { font-size: 1.5rem; margin-top: 30px; display: flex; align-items: center; gap: 8px; }
965
+ h3 { font-size: 1.2rem; color: #DB2777; margin-top: 20px; }
966
+ .section { margin-bottom: 30px; padding: 20px; background-color: #fff7fa; border: 1px solid #FBCFE8; border-radius: 8px; }
967
  form { margin-bottom: 20px; }
968
+ label { font-weight: 500; margin-top: 10px; display: block; color: #6b4d5d; font-size: 0.9rem;}
969
+ input[type="text"], input[type="number"], input[type="password"], input[type="tel"], textarea, select { width: 100%; padding: 10px 12px; margin-top: 5px; border: 1px solid #fbcfe8; border-radius: 6px; font-size: 0.95rem; box-sizing: border-box; transition: border-color 0.3s ease; background-color: #fff; }
970
+ input:focus, textarea:focus, select:focus { border-color: #F472B6; outline: none; box-shadow: 0 0 0 2px rgba(244, 114, 182, 0.1); }
971
  textarea { min-height: 80px; resize: vertical; }
972
+ input[type="file"] { padding: 8px; background-color: #fff0f5; cursor: pointer; border: 1px solid #fbcfe8;}
973
+ input[type="file"]::file-selector-button { padding: 5px 10px; border-radius: 4px; background-color: #fce7f3; border: 1px solid #fbcfe8; cursor: pointer; margin-right: 10px;}
974
  input[type="checkbox"] { margin-right: 5px; vertical-align: middle; }
975
  label.inline-label { display: inline-block; margin-top: 10px; font-weight: normal; }
976
+ button, .button { padding: 10px 18px; border: none; border-radius: 6px; background-color: #F472B6; color: white; font-weight: 500; cursor: pointer; transition: background-color 0.3s ease, transform 0.1s ease; margin-top: 15px; font-size: 0.95rem; display: inline-flex; align-items: center; gap: 5px; text-decoration: none; line-height: 1.2;}
977
+ button:hover, .button:hover { background-color: #DB2777; }
978
  button:active, .button:active { transform: scale(0.98); }
979
  button[type="submit"] { min-width: 120px; justify-content: center; }
980
  .delete-button { background-color: #f56565; }
981
  .delete-button:hover { background-color: #e53e3e; }
982
+ .add-button { background-color: #F472B6; } /* Main Pink */
983
+ .add-button:hover { background-color: #DB2777; } /* Darker Pink */
984
  .item-list { display: grid; gap: 20px; }
985
+ .item { background: #fff; padding: 15px 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.07); border: 1px solid #FCE7F3; }
986
+ .item p { margin: 5px 0; font-size: 0.9rem; color: #6b4d5d; }
987
+ .item strong { color: #4d333f; }
988
+ .item .description { font-size: 0.85rem; color: #a0aec0; max-height: 60px; overflow: hidden; text-overflow: ellipsis; }
989
  .item-actions { margin-top: 15px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
990
+ .item-actions button:not(.delete-button) { background-color: #F472B6; }
991
+ .item-actions button:not(.delete-button):hover { background-color: #DB2777; }
992
+ .edit-form-container { margin-top: 15px; padding: 20px; background: #fff0f5; border: 1px dashed #fbcfe8; border-radius: 6px; display: none; }
993
+ details { background-color: #fff7fa; border: 1px solid #FBCFE8; border-radius: 8px; margin-bottom: 20px; }
994
+ details > summary { cursor: pointer; font-weight: 600; color: #DB2777; display: block; padding: 15px; border-bottom: 1px solid #FBCFE8; list-style: none; position: relative; }
995
+ details > summary::after { content: '\\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); transition: transform 0.2s ease; color: #F472B6; }
996
  details[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
997
+ details[open] > summary { border-bottom: 1px solid #FBCFE8; }
998
  details .form-content { padding: 20px; }
999
  .color-input-group { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
1000
  .color-input-group input { flex-grow: 1; margin: 0; }
1001
  .remove-color-btn { background-color: #f56565; padding: 6px 10px; font-size: 0.8rem; margin-top: 0; line-height: 1; }
1002
  .remove-color-btn:hover { background-color: #e53e3e; }
1003
+ .add-color-btn { background-color: #f9a8d4; color: #DB2777; } /* Lighter pink, darker text */
1004
+ .add-color-btn:hover { background-color: #fbcfe8; }
1005
+ .photo-preview img { max-width: 70px; max-height: 70px; border-radius: 5px; margin: 5px 5px 0 0; border: 1px solid #FBCFE8; object-fit: cover;}
1006
  .sync-buttons { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
1007
+ .download-hf-button { background-color: #a0aec0; } /* Grey */
1008
+ .download-hf-button:hover { background-color: #718096; }
1009
  .flex-container { display: flex; flex-wrap: wrap; gap: 20px; }
1010
  .flex-item { flex: 1; min-width: 350px; }
1011
  .message { padding: 10px 15px; border-radius: 6px; margin-bottom: 15px; font-size: 0.9rem;}
1012
+ .message.success { background-color: #f0fff4; color: #155724; border: 1px solid #c3e6cb;} /* Keep success green */
1013
+ .message.error { background-color: #fff5f5; color: #721c24; border: 1px solid #f5c6cb;} /* Keep error red */
1014
+ .message.warning { background-color: #fffaf0; color: #856404; border: 1px solid #ffeeba; } /* Keep warning yellow */
1015
  .status-indicator { display: inline-block; padding: 3px 8px; border-radius: 12px; font-size: 0.8rem; font-weight: 500; margin-left: 10px; vertical-align: middle; }
1016
+ .status-indicator.in-stock { background-color: #c6f6d5; color: #2f855a; } /* Keep green */
1017
+ .status-indicator.out-of-stock { background-color: #fed7d7; color: #c53030; } /* Keep red */
1018
+ .status-indicator.top-product { background-color: #feebc8; color: #9c4221; margin-left: 5px;} /* Keep gold */
1019
  </style>
1020
  </head>
1021
  <body>
1022
  <div class="container">
1023
  <div class="header">
1024
+ <div class="logo-title-container" style="display: flex; align-items: center; gap: 15px;">
1025
+ <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/67c280ccb9d3dfdee58ecfdd/p2TVtSc6UQr0De1jDYBLk.jpeg" alt="Aikas_optom Logo" style="height: 40px; width: auto; border-radius: 4px;">
1026
+ <h1><i class="fas fa-tools"></i> Админ-панель Aikas_optom</h1>
1027
+ </div>
1028
+ <a href="{{ url_for('catalog') }}" class="button" style="background-color: #EC4899;"><i class="fas fa-store"></i> Перейти в каталог</a>
1029
  </div>
1030
 
1031
+
1032
  {% with messages = get_flashed_messages(with_categories=true) %}
1033
  {% if messages %}
1034
  {% for category, message in messages %}
 
1047
  <button type="submit" class="button download-hf-button" title="Скачать файлы (перезапишет локальные)"><i class="fas fa-download"></i> Скачать БД</button>
1048
  </form>
1049
  </div>
1050
+ <p style="font-size: 0.85rem; color: #a0aec0;">Резервное копирование происходит автоматически каждые 30 минут, а также после каждого сохранения данных. Используйте эти кнопки для немедленной синхронизации.</p>
1051
  </div>
1052
 
1053
  <div class="flex-container">
 
1156
  {% endif %}
1157
  </div>
1158
  <div style="flex-grow: 1;">
1159
+ <h3 style="margin-top: 0; margin-bottom: 5px; color: #4d333f;">
1160
  {{ product['name'] }}
1161
  {% if product.get('in_stock', True) %}
1162
  <span class="status-indicator in-stock">В наличии</span>
 
1173
  {% set colors = product.get('colors', []) %}
1174
  <p><strong>Цвета/Вар-ты:</strong> {{ colors|select('ne', '')|join(', ') if colors|select('ne', '')|list|length > 0 else 'Нет' }}</p>
1175
  {% if product.get('photos') and product['photos']|length > 1 %}
1176
+ <p style="font-size: 0.8rem; color: #a0aec0;">(Всего фото: {{ product['photos']|length }})</p>
1177
  {% endif %}
1178
  </div>
1179
  </div>
 
1288
  if (group) {
1289
  const container = group.parentNode;
1290
  group.remove();
1291
+ // Add back a placeholder if the last one was removed
1292
  if (container && container.children.length === 0) {
1293
  const placeholderGroup = document.createElement('div');
1294
  placeholderGroup.className = 'color-input-group';