Hugging Face's logo

Spaces:
s-amir
/
admin
Sleeping

App Files Community
Kgshop commited on
Commit
75f8d52
·
verified ·
1 Parent(s): 198a69b

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +108 -102
app.py CHANGED
@@ -1,4 +1,6 @@
1
 
 
 
2
  from flask import Flask, render_template_string, request, redirect, url_for, send_file, flash, jsonify
3
  import json
4
  import os
@@ -22,7 +24,7 @@ DATA_FILE = 'data.json'
22
 
23
  SYNC_FILES = [DATA_FILE]
24
 
25
- REPO_ID = "Kgshop/balluu"
26
  HF_TOKEN_WRITE = os.getenv("HF_TOKEN")
27
  HF_TOKEN_READ = os.getenv("HF_TOKEN_READ")
28
 
@@ -213,96 +215,97 @@ CATALOG_TEMPLATE = '''
213
  <head>
214
  <meta charset="UTF-8">
215
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
216
- <title>Brand_Baaluu - Каталог</title>
217
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
218
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
219
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
220
  <style>
221
  * { margin: 0; padding: 0; box-sizing: border-box; }
222
- body { font-family: 'Poppins', sans-serif; background: #FFF0F5; color: #4d333f; line-height: 1.6; transition: background 0.3s, color 0.3s; }
223
- body.dark-mode { background: #2c1a2b; color: #fce7f3; }
 
224
  .container { max-width: 1300px; margin: 0 auto; padding: 20px; }
225
- .header { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #FBCFE8; }
226
- body.dark-mode .header { border-bottom-color: #59344f; }
227
- .header h1 { font-size: 1.6rem; font-weight: 600; color: #F472B6; }
228
- .theme-toggle { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #d1a7b8; transition: color 0.3s ease; }
229
- .theme-toggle:hover { color: #DB2777; }
230
- body.dark-mode .theme-toggle { color: #fbcfe8; }
231
- body.dark-mode .theme-toggle:hover { color: #f9a8d4; }
232
  .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; }
233
- body.dark-mode .store-address { background-color: #412539; color: #fbcfe8; }
234
  .filters-container { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
235
  .search-container { margin: 20px 0; text-align: center; }
236
- #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; }
237
- body.dark-mode #search-input { background-color: #412539; border-color: #59344f; color: #fce7f3; }
238
- #search-input:focus { border-color: #F472B6; box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.2); }
239
- body.dark-mode #search-input:focus { border-color: #EC4899; box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.3); }
240
- .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; }
241
- body.dark-mode .category-filter { background-color: #412539; border-color: #59344f; color: #f9a8d4; }
242
- .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); }
243
- 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); }
244
  .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; padding: 10px; }
245
  @media (min-width: 600px) { .products-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
246
  @media (min-width: 900px) { .products-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } }
247
 
248
- .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;}
249
- body.dark-mode .product { background: #412539; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); border-color: #59344f; }
250
  .product:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
251
  body.dark-mode .product:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
252
  .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; }
253
  .product-image img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.3s ease; }
254
  .product-info { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
255
- .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; }
256
- body.dark-mode .product h2 { color: #fce7f3; }
257
- .product-price { font-size: 1.2rem; color: #DB2777; font-weight: 700; text-align: center; margin: 5px 0; }
258
- body.dark-mode .product-price { color: #f9a8d4; }
259
- .product-description { font-size: 0.85rem; color: #b88fa7; text-align: center; margin-bottom: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
260
- body.dark-mode .product-description { color: #fbcfe8; }
261
  .product-actions { padding: 0 15px 15px 15px; display: flex; flex-direction: column; gap: 8px; }
262
- .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; }
263
- .product-button:hover { background-color: #DB2777; box-shadow: 0 4px 15px rgba(219, 39, 119, 0.4); transform: translateY(-2px); }
264
  .product-button i { margin-right: 5px; }
265
- .add-to-cart { background-color: #F472B6; }
266
- .add-to-cart:hover { background-color: #DB2777; box-shadow: 0 4px 15px rgba(219, 39, 119, 0.4); }
267
- #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; }
268
  #cart-button .fa-shopping-cart { margin-right: 0; }
269
- #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; }
270
  .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; }
271
  .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; }
272
- body.dark-mode .modal-content { background: #412539; color: #fce7f3; }
273
  @keyframes slideIn { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
274
  .close { position: absolute; top: 15px; right: 15px; font-size: 1.8rem; color: #aaa; cursor: pointer; transition: color 0.3s; line-height: 1; }
275
  .close:hover { color: #333; }
276
- body.dark-mode .close { color: #fbcfe8; }
277
  body.dark-mode .close:hover { color: #ffffff; }
278
- .modal-content h2 { margin-top: 0; margin-bottom: 20px; color: #F472B6; display: flex; align-items: center; gap: 10px;}
279
- body.dark-mode .modal-content h2 { color: #f9a8d4; }
280
- .cart-item { display: grid; grid-template-columns: auto 1fr auto auto; gap: 15px; align-items: center; padding: 15px 0; border-bottom: 1px solid #FBCFE8; }
281
- body.dark-mode .cart-item { border-bottom-color: #59344f; }
282
  .cart-item:last-child { border-bottom: none; }
283
  .cart-item img { width: 60px; height: 60px; object-fit: contain; border-radius: 8px; background-color: #fff; padding: 5px; grid-column: 1; }
284
  .cart-item-details { grid-column: 2; }
285
  .cart-item-details strong { display: block; margin-bottom: 5px; font-size: 1rem; }
286
  .cart-item-price { font-size: 0.9rem; color: #6b4d5d; }
287
- body.dark-mode .cart-item-price { color: #fbcfe8; }
288
  .cart-item-total { font-weight: bold; text-align: right; grid-column: 3; font-size: 1rem;}
289
  .cart-item-remove { grid-column: 4; background:none; border:none; color:#f56565; cursor:pointer; font-size: 1.3em; padding: 5px; line-height: 1; }
290
  .cart-item-remove:hover { color: #c53030; }
291
- .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; }
292
- body.dark-mode .quantity-input, body.dark-mode .color-select { background-color: #2c1a2b; border-color: #59344f; color: #fce7f3; }
293
- .cart-summary { margin-top: 20px; text-align: right; border-top: 1px solid #FBCFE8; padding-top: 15px; }
294
- body.dark-mode .cart-summary { border-top-color: #59344f; }
295
  .cart-summary strong { font-size: 1.2rem; }
296
  .cart-actions { margin-top: 25px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
297
  .cart-actions .product-button { width: auto; flex-grow: 1; }
298
  .clear-cart { background-color: #a0aec0; }
299
  .clear-cart:hover { background-color: #718096; box-shadow: 0 4px 15px rgba(113, 128, 150, 0.4); }
300
- .formulate-order-button { background-color: #F472B6; }
301
- .formulate-order-button:hover { background-color: #DB2777; box-shadow: 0 4px 15px rgba(219, 39, 119, 0.4); }
302
- .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;}
303
  .notification.show { opacity: 1;}
304
  .no-results-message { grid-column: 1 / -1; text-align: center; padding: 40px; font-size: 1.1rem; color: #a0aec0; }
305
- body.dark-mode .no-results-message { color: #fbcfe8; }
306
  .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); }
307
  .product { position: relative; }
308
  </style>
@@ -311,8 +314,8 @@ CATALOG_TEMPLATE = '''
311
  <div class="container">
312
  <div class="header">
313
  <div class="logo-title-container" style="display: flex; align-items: center; gap: 15px;">
314
- <img src="https://huggingface.co/spaces/Kgshop/baaluu/resolve/main/Screenshot_20250615-131821.png" alt="Brand_Baaluu Logo" style="height: 50px; width: 50px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 8px rgba(244, 114, 182, 0.7), 0 0 15px rgba(219, 39, 119, 0.5);">
315
- <h1>Brand_Baaluu</h1>
316
  </div>
317
  <button class="theme-toggle" onclick="toggleTheme()" aria-label="Переключить тему">
318
  <i class="fas fa-moon"></i>
@@ -748,7 +751,7 @@ CATALOG_TEMPLATE = '''
748
  }
749
 
750
  function showNotification(message, duration = 3000) {
751
- const placeholder = document.getElementById('notification-placeholder');
752
  if (!placeholder) {
753
  const newPlaceholder = document.createElement('div');
754
  newPlaceholder.id = 'notification-placeholder';
@@ -804,7 +807,7 @@ CATALOG_TEMPLATE = '''
804
 
805
  PRODUCT_DETAIL_TEMPLATE = '''
806
  <div style="padding: 10px;">
807
- <h2 style="font-size: 1.6rem; font-weight: 600; margin-bottom: 15px; text-align: center; color: #F472B6;">{{ product['name'] }}</h2>
808
  <div class="swiper-container" style="max-width: 450px; margin: 0 auto 20px; border-radius: 10px; overflow: hidden; background-color: #fff;">
809
  <div class="swiper-wrapper">
810
  {% if product.get('photos') and product['photos']|length > 0 %}
@@ -825,14 +828,14 @@ PRODUCT_DETAIL_TEMPLATE = '''
825
  </div>
826
  {% if product.get('photos') and product['photos']|length > 1 %}
827
  <div class="swiper-pagination" style="position: relative; bottom: 5px;"></div>
828
- <div class="swiper-button-next" style="color: #F472B6;"></div>
829
- <div class="swiper-button-prev" style="color: #F472B6;"></div>
830
  {% endif %}
831
  </div>
832
 
833
  <div style="margin-top: 20px; font-size: 1rem; line-height: 1.7;">
834
  <p><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
835
- <p style="font-size: 1.2rem; font-weight: bold; color: #DB2777;"><strong>Цена:</strong> {{ "%.2f"|format(product['price']) }} {{ currency_code }}</p>
836
  <p><strong>Описание:</strong><br> {{ product.get('description', 'Описание отсутствует.')|replace('\\n', '<br>')|safe }}</p>
837
  {% set colors = product.get('colors', []) %}
838
  {% if colors and colors|select('ne', '')|list|length > 0 %}
@@ -848,33 +851,34 @@ ORDER_TEMPLATE = '''
848
  <head>
849
  <meta charset="UTF-8">
850
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
851
- <title>Заказ №{{ order.id }} - Brand_Baaluu</title>
852
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
853
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
854
  <style>
855
- body { font-family: 'Poppins', sans-serif; background: #FFF0F5; color: #4d333f; line-height: 1.6; padding: 20px; }
856
- .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; }
857
- h1 { text-align: center; color: #F472B6; margin-bottom: 25px; font-size: 1.8rem; font-weight: 600; }
858
- h2 { color: #DB2777; margin-top: 30px; margin-bottom: 15px; font-size: 1.4rem; border-bottom: 1px solid #FBCFE8; padding-bottom: 8px;}
 
859
  .order-meta { font-size: 0.9rem; color: #a0aec0; margin-bottom: 20px; text-align: center; }
860
- .order-item { display: grid; grid-template-columns: 60px 1fr auto; gap: 15px; align-items: center; padding: 15px 0; border-bottom: 1px solid #FCE7F3; }
861
  .order-item:last-child { border-bottom: none; }
862
- .order-item img { width: 60px; height: 60px; object-fit: contain; border-radius: 8px; background-color: #fff; padding: 5px; border: 1px solid #FCE7F3;}
863
- .item-details strong { display: block; margin-bottom: 5px; font-size: 1.05rem; color: #4d333f;}
864
  .item-details span { font-size: 0.9rem; color: #6b4d5d; display: block;}
865
- .item-total { font-weight: bold; text-align: right; font-size: 1rem; color: #DB2777;}
866
- .order-summary { margin-top: 30px; padding-top: 20px; border-top: 2px solid #F472B6; text-align: right; }
867
  .order-summary p { margin-bottom: 10px; font-size: 1.1rem; }
868
- .order-summary strong { font-size: 1.3rem; color: #F472B6; }
869
- .customer-info { margin-top: 30px; background-color: #fff7fa; padding: 20px; border-radius: 8px; border: 1px solid #FCE7F3;}
870
  .customer-info p { margin-bottom: 8px; font-size: 0.95rem; }
871
- .customer-info strong { color: #DB2777; }
872
  .actions { margin-top: 30px; text-align: center; }
873
- .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; }
874
- .button:hover { background-color: #DB2777; }
875
  .button:active { transform: scale(0.98); }
876
  .button i { font-size: 1.2rem; }
877
- .catalog-link { display: block; text-align: center; margin-top: 25px; color: #EC4899; text-decoration: none; font-size: 0.9rem; }
878
  .catalog-link:hover { text-decoration: underline; }
879
  .not-found { text-align: center; color: #c53030; font-size: 1.2rem; padding: 40px 0;}
880
  </style>
@@ -922,9 +926,10 @@ ORDER_TEMPLATE = '''
922
  function sendOrderViaWhatsApp() {
923
  const orderId = '{{ order.id }}';
924
  const orderUrl = `{{ request.url }}`;
925
- const whatsappNumber = "996703550150";
 
926
 
927
- let message = `Здравствуйте! Хочу подтвердить свой заказ на Brand_Baaluu:%0A%0A`;
928
  message += `*Номер заказа:* ${orderId}%0A`;
929
  message += `*Ссылка на заказ:* ${encodeURIComponent(orderUrl)}%0A%0A`;
930
  message += `Пожалуйста, свяжитесь со мной для уточнения деталей оплаты и доставки.`;
@@ -950,57 +955,58 @@ ADMIN_TEMPLATE = '''
950
  <head>
951
  <meta charset="UTF-8">
952
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
953
- <title>Админ-панель - Brand_Baaluu</title>
954
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
955
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
956
  <style>
957
- body { font-family: 'Poppins', sans-serif; background-color: #fff7fa; color: #4d333f; padding: 20px; line-height: 1.6; }
 
958
  .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); }
959
- .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;}
960
- h1, h2, h3 { font-weight: 600; color: #F472B6; margin-bottom: 15px; }
961
  h1 { font-size: 1.6rem; }
962
  h2 { font-size: 1.5rem; margin-top: 30px; display: flex; align-items: center; gap: 8px; }
963
- h3 { font-size: 1.2rem; color: #DB2777; margin-top: 20px; }
964
- .section { margin-bottom: 30px; padding: 20px; background-color: #fff7fa; border: 1px solid #FBCFE8; border-radius: 8px; }
965
  form { margin-bottom: 20px; }
966
  label { font-weight: 500; margin-top: 10px; display: block; color: #6b4d5d; font-size: 0.9rem;}
967
- 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; }
968
- input:focus, textarea:focus, select:focus { border-color: #F472B6; outline: none; box-shadow: 0 0 0 2px rgba(244, 114, 182, 0.1); }
969
  textarea { min-height: 80px; resize: vertical; }
970
- input[type="file"] { padding: 8px; background-color: #fff0f5; cursor: pointer; border: 1px solid #fbcfe8;}
971
- input[type="file"]::file-selector-button { padding: 5px 10px; border-radius: 4px; background-color: #fce7f3; border: 1px solid #fbcfe8; cursor: pointer; margin-right: 10px;}
972
  input[type="checkbox"] { margin-right: 5px; vertical-align: middle; }
973
  label.inline-label { display: inline-block; margin-top: 10px; font-weight: normal; }
974
- 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;}
975
- button:hover, .button:hover { background-color: #DB2777; }
976
  button:active, .button:active { transform: scale(0.98); }
977
  button[type="submit"] { min-width: 120px; justify-content: center; }
978
  .delete-button { background-color: #f56565; }
979
  .delete-button:hover { background-color: #e53e3e; }
980
- .add-button { background-color: #F472B6; }
981
- .add-button:hover { background-color: #DB2777; }
982
  .item-list { display: grid; gap: 20px; }
983
- .item { background: #fff; padding: 15px 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.07); border: 1px solid #FCE7F3; }
984
  .item p { margin: 5px 0; font-size: 0.9rem; color: #6b4d5d; }
985
  .item strong { color: #4d333f; }
986
  .item .description { font-size: 0.85rem; color: #a0aec0; max-height: 60px; overflow: hidden; text-overflow: ellipsis; }
987
  .item-actions { margin-top: 15px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
988
- .item-actions button:not(.delete-button) { background-color: #F472B6; }
989
- .item-actions button:not(.delete-button):hover { background-color: #DB2777; }
990
- .edit-form-container { margin-top: 15px; padding: 20px; background: #fff0f5; border: 1px dashed #fbcfe8; border-radius: 6px; display: none; }
991
- details { background-color: #fff7fa; border: 1px solid #FBCFE8; border-radius: 8px; margin-bottom: 20px; }
992
- details > summary { cursor: pointer; font-weight: 600; color: #DB2777; display: block; padding: 15px; border-bottom: 1px solid #FBCFE8; list-style: none; position: relative; }
993
- 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; }
994
  details[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
995
- details[open] > summary { border-bottom: 1px solid #FBCFE8; }
996
  details .form-content { padding: 20px; }
997
  .color-input-group { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
998
  .color-input-group input { flex-grow: 1; margin: 0; }
999
  .remove-color-btn { background-color: #f56565; padding: 6px 10px; font-size: 0.8rem; margin-top: 0; line-height: 1; }
1000
  .remove-color-btn:hover { background-color: #e53e3e; }
1001
- .add-color-btn { background-color: #f9a8d4; color: #DB2777; }
1002
- .add-color-btn:hover { background-color: #fbcfe8; }
1003
- .photo-preview img { max-width: 70px; max-height: 70px; border-radius: 5px; margin: 5px 5px 0 0; border: 1px solid #FBCFE8; object-fit: cover;}
1004
  .sync-buttons { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
1005
  .download-hf-button { background-color: #a0aec0; }
1006
  .download-hf-button:hover { background-color: #718096; }
@@ -1020,10 +1026,10 @@ ADMIN_TEMPLATE = '''
1020
  <div class="container">
1021
  <div class="header">
1022
  <div class="logo-title-container" style="display: flex; align-items: center; gap: 15px;">
1023
- <img src="https://huggingface.co/spaces/Kgshop/baaluu/resolve/main/Screenshot_20250615-131821.png" alt="Brand_Baaluu Logo" style="height: 50px; width: 50px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 8px rgba(244, 114, 182, 0.7), 0 0 15px rgba(219, 39, 119, 0.5);">
1024
- <h1><i class="fas fa-tools"></i> Админ-панель Brand_Baaluu</h1>
1025
  </div>
1026
- <a href="{{ url_for('catalog') }}" class="button" style="background-color: #EC4899;"><i class="fas fa-store"></i> Перейти в каталог</a>
1027
  </div>
1028
 
1029
 
 
1
 
2
+
3
+
4
  from flask import Flask, render_template_string, request, redirect, url_for, send_file, flash, jsonify
5
  import json
6
  import os
 
24
 
25
  SYNC_FILES = [DATA_FILE]
26
 
27
+ REPO_ID = "Kgshop/Mobilmir" # Assuming the Hugging Face repo ID remains the same for dataset storage
28
  HF_TOKEN_WRITE = os.getenv("HF_TOKEN")
29
  HF_TOKEN_READ = os.getenv("HF_TOKEN_READ")
30
 
 
215
  <head>
216
  <meta charset="UTF-8">
217
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
218
+ <title>Мобильный мир - Каталог</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
+ /* --- Indigo Blue Theme --- */
225
+ body { font-family: 'Poppins', sans-serif; background: #F8FAFF; color: #1E293B; line-height: 1.6; transition: background 0.3s, color 0.3s; }
226
+ body.dark-mode { background: #1F2937; color: #E0E7FF; }
227
  .container { max-width: 1300px; margin: 0 auto; padding: 20px; }
228
+ .header { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #E0E7FF; }
229
+ body.dark-mode .header { border-bottom-color: #334155; }
230
+ .header h1 { font-size: 1.6rem; font-weight: 600; color: #4F46E5; }
231
+ .theme-toggle { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #818CF8; transition: color 0.3s ease; }
232
+ .theme-toggle:hover { color: #4F46E5; }
233
+ body.dark-mode .theme-toggle { color: #E0E7FF; }
234
+ body.dark-mode .theme-toggle:hover { color: #6366F1; }
235
  .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; }
236
+ body.dark-mode .store-address { background-color: #334155; color: #E0E7FF; }
237
  .filters-container { margin: 20px 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
238
  .search-container { margin: 20px 0; text-align: center; }
239
+ #search-input { width: 90%; max-width: 600px; padding: 12px 18px; font-size: 1rem; border: 1px solid #E0E7FF; border-radius: 25px; outline: none; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: all 0.3s ease; }
240
+ body.dark-mode #search-input { background-color: #334155; border-color: #4F46E5; color: #E0E7FF; }
241
+ #search-input:focus { border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2); }
242
+ body.dark-mode #search-input:focus { border-color: #6366F1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); }
243
+ .category-filter { padding: 8px 16px; border: 1px solid #E0E7FF; 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: #3730A3; }
244
+ body.dark-mode .category-filter { background-color: #334155; border-color: #4F46E5; color: #818CF8; }
245
+ .category-filter.active, .category-filter:hover { background-color: #4F46E5; color: white; border-color: #4F46E5; box-shadow: 0 2px 10px rgba(79, 70, 229, 0.3); }
246
+ body.dark-mode .category-filter.active, body.dark-mode .category-filter:hover { background-color: #6366F1; border-color: #6366F1; color: #1F2937; box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4); }
247
  .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; padding: 10px; }
248
  @media (min-width: 600px) { .products-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
249
  @media (min-width: 900px) { .products-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } }
250
 
251
+ .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 #E0E7FF;}
252
+ body.dark-mode .product { background: #334155; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); border-color: #4F46E5; }
253
  .product:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
254
  body.dark-mode .product:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
255
  .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; }
256
  .product-image img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.3s ease; }
257
  .product-info { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
258
+ .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: #1E293B; }
259
+ body.dark-mode .product h2 { color: #E0E7FF; }
260
+ .product-price { font-size: 1.2rem; color: #3730A3; font-weight: 700; text-align: center; margin: 5px 0; }
261
+ body.dark-mode .product-price { color: #818CF8; }
262
+ .product-description { font-size: 0.85rem; color: #6b7280; text-align: center; margin-bottom: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
263
+ body.dark-mode .product-description { color: #E0E7FF; }
264
  .product-actions { padding: 0 15px 15px 15px; display: flex; flex-direction: column; gap: 8px; }
265
+ .product-button { display: block; width: 100%; padding: 10px; border: none; border-radius: 8px; background-color: #4F46E5; 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; }
266
+ .product-button:hover { background-color: #3730A3; box-shadow: 0 4px 15px rgba(55, 48, 163, 0.4); transform: translateY(-2px); }
267
  .product-button i { margin-right: 5px; }
268
+ .add-to-cart { background-color: #4F46E5; }
269
+ .add-to-cart:hover { background-color: #3730A3; box-shadow: 0 4px 15px rgba(55, 48, 163, 0.4); }
270
+ #cart-button { position: fixed; bottom: 25px; right: 25px; background-color: #4F46E5; 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(79, 70, 229, 0.4); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1000; }
271
  #cart-button .fa-shopping-cart { margin-right: 0; }
272
+ #cart-button span { position: absolute; top: -5px; right: -5px; background-color: #3730A3; color: white; border-radius: 50%; padding: 2px 6px; font-size: 0.7rem; font-weight: bold; }
273
  .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; }
274
  .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; }
275
+ body.dark-mode .modal-content { background: #334155; color: #E0E7FF; }
276
  @keyframes slideIn { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
277
  .close { position: absolute; top: 15px; right: 15px; font-size: 1.8rem; color: #aaa; cursor: pointer; transition: color 0.3s; line-height: 1; }
278
  .close:hover { color: #333; }
279
+ body.dark-mode .close { color: #E0E7FF; }
280
  body.dark-mode .close:hover { color: #ffffff; }
281
+ .modal-content h2 { margin-top: 0; margin-bottom: 20px; color: #4F46E5; display: flex; align-items: center; gap: 10px;}
282
+ body.dark-mode .modal-content h2 { color: #818CF8; }
283
+ .cart-item { display: grid; grid-template-columns: auto 1fr auto auto; gap: 15px; align-items: center; padding: 15px 0; border-bottom: 1px solid #E0E7FF; }
284
+ body.dark-mode .cart-item { border-bottom-color: #4F46E5; }
285
  .cart-item:last-child { border-bottom: none; }
286
  .cart-item img { width: 60px; height: 60px; object-fit: contain; border-radius: 8px; background-color: #fff; padding: 5px; grid-column: 1; }
287
  .cart-item-details { grid-column: 2; }
288
  .cart-item-details strong { display: block; margin-bottom: 5px; font-size: 1rem; }
289
  .cart-item-price { font-size: 0.9rem; color: #6b4d5d; }
290
+ body.dark-mode .cart-item-price { color: #E0E7FF; }
291
  .cart-item-total { font-weight: bold; text-align: right; grid-column: 3; font-size: 1rem;}
292
  .cart-item-remove { grid-column: 4; background:none; border:none; color:#f56565; cursor:pointer; font-size: 1.3em; padding: 5px; line-height: 1; }
293
  .cart-item-remove:hover { color: #c53030; }
294
+ .quantity-input, .color-select { width: 100%; max-width: 180px; padding: 10px; border: 1px solid #E0E7FF; border-radius: 8px; font-size: 1rem; margin: 10px 0; box-sizing: border-box; }
295
+ body.dark-mode .quantity-input, body.dark-mode .color-select { background-color: #1F2937; border-color: #4F46E5; color: #E0E7FF; }
296
+ .cart-summary { margin-top: 20px; text-align: right; border-top: 1px solid #E0E7FF; padding-top: 15px; }
297
+ body.dark-mode .cart-summary { border-top-color: #4F46E5; }
298
  .cart-summary strong { font-size: 1.2rem; }
299
  .cart-actions { margin-top: 25px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
300
  .cart-actions .product-button { width: auto; flex-grow: 1; }
301
  .clear-cart { background-color: #a0aec0; }
302
  .clear-cart:hover { background-color: #718096; box-shadow: 0 4px 15px rgba(113, 128, 150, 0.4); }
303
+ .formulate-order-button { background-color: #4F46E5; }
304
+ .formulate-order-button:hover { background-color: #3730A3; box-shadow: 0 4px 15px rgba(55, 48, 163, 0.4); }
305
+ .notification { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background-color: #4F46E5; 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;}
306
  .notification.show { opacity: 1;}
307
  .no-results-message { grid-column: 1 / -1; text-align: center; padding: 40px; font-size: 1.1rem; color: #a0aec0; }
308
+ body.dark-mode .no-results-message { color: #E0E7FF; }
309
  .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); }
310
  .product { position: relative; }
311
  </style>
 
314
  <div class="container">
315
  <div class="header">
316
  <div class="logo-title-container" style="display: flex; align-items: center; gap: 15px;">
317
+ <img src="https://huggingface.co/spaces/Kgshop/mobilnymir/resolve/main/IMG_20251019_120056_121.jpg" alt="Мобильный мир Logo" style="height: 50px; width: 50px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 8px rgba(79, 70, 229, 0.7), 0 0 15px rgba(55, 48, 163, 0.5);">
318
+ <h1>Мобильный мир</h1>
319
  </div>
320
  <button class="theme-toggle" onclick="toggleTheme()" aria-label="Переключить тему">
321
  <i class="fas fa-moon"></i>
 
751
  }
752
 
753
  function showNotification(message, duration = 3000) {
754
+ let placeholder = document.getElementById('notification-placeholder');
755
  if (!placeholder) {
756
  const newPlaceholder = document.createElement('div');
757
  newPlaceholder.id = 'notification-placeholder';
 
807
 
808
  PRODUCT_DETAIL_TEMPLATE = '''
809
  <div style="padding: 10px;">
810
+ <h2 style="font-size: 1.6rem; font-weight: 600; margin-bottom: 15px; text-align: center; color: #4F46E5;">{{ product['name'] }}</h2>
811
  <div class="swiper-container" style="max-width: 450px; margin: 0 auto 20px; border-radius: 10px; overflow: hidden; background-color: #fff;">
812
  <div class="swiper-wrapper">
813
  {% if product.get('photos') and product['photos']|length > 0 %}
 
828
  </div>
829
  {% if product.get('photos') and product['photos']|length > 1 %}
830
  <div class="swiper-pagination" style="position: relative; bottom: 5px;"></div>
831
+ <div class="swiper-button-next" style="color: #4F46E5;"></div>
832
+ <div class="swiper-button-prev" style="color: #4F46E5;"></div>
833
  {% endif %}
834
  </div>
835
 
836
  <div style="margin-top: 20px; font-size: 1rem; line-height: 1.7;">
837
  <p><strong>Категория:</strong> {{ product.get('category', 'Без категории') }}</p>
838
+ <p style="font-size: 1.2rem; font-weight: bold; color: #3730A3;"><strong>Цена:</strong> {{ "%.2f"|format(product['price']) }} {{ currency_code }}</p>
839
  <p><strong>Описание:</strong><br> {{ product.get('description', 'Описание отсутствует.')|replace('\\n', '<br>')|safe }}</p>
840
  {% set colors = product.get('colors', []) %}
841
  {% if colors and colors|select('ne', '')|list|length > 0 %}
 
851
  <head>
852
  <meta charset="UTF-8">
853
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
854
+ <title>Заказ №{{ order.id }} - Мобильный мир</title>
855
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
856
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
857
  <style>
858
+ /* --- Indigo Blue Theme --- */
859
+ body { font-family: 'Poppins', sans-serif; background: #F8FAFF; color: #1E293B; line-height: 1.6; padding: 20px; }
860
+ .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 #E0E7FF; }
861
+ h1 { text-align: center; color: #4F46E5; margin-bottom: 25px; font-size: 1.8rem; font-weight: 600; }
862
+ h2 { color: #3730A3; margin-top: 30px; margin-bottom: 15px; font-size: 1.4rem; border-bottom: 1px solid #E0E7FF; padding-bottom: 8px;}
863
  .order-meta { font-size: 0.9rem; color: #a0aec0; margin-bottom: 20px; text-align: center; }
864
+ .order-item { display: grid; grid-template-columns: 60px 1fr auto; gap: 15px; align-items: center; padding: 15px 0; border-bottom: 1px solid #E0E7FF; }
865
  .order-item:last-child { border-bottom: none; }
866
+ .order-item img { width: 60px; height: 60px; object-fit: contain; border-radius: 8px; background-color: #fff; padding: 5px; border: 1px solid #E0E7FF;}
867
+ .item-details strong { display: block; margin-bottom: 5px; font-size: 1.05rem; color: #1E293B;}
868
  .item-details span { font-size: 0.9rem; color: #6b4d5d; display: block;}
869
+ .item-total { font-weight: bold; text-align: right; font-size: 1rem; color: #3730A3;}
870
+ .order-summary { margin-top: 30px; padding-top: 20px; border-top: 2px solid #4F46E5; text-align: right; }
871
  .order-summary p { margin-bottom: 10px; font-size: 1.1rem; }
872
+ .order-summary strong { font-size: 1.3rem; color: #4F46E5; }
873
+ .customer-info { margin-top: 30px; background-color: #EEF2FF; padding: 20px; border-radius: 8px; border: 1px solid #E0E7FF;}
874
  .customer-info p { margin-bottom: 8px; font-size: 0.95rem; }
875
+ .customer-info strong { color: #3730A3; }
876
  .actions { margin-top: 30px; text-align: center; }
877
+ .button { padding: 12px 25px; border: none; border-radius: 8px; background-color: #4F46E5; 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; }
878
+ .button:hover { background-color: #3730A3; }
879
  .button:active { transform: scale(0.98); }
880
  .button i { font-size: 1.2rem; }
881
+ .catalog-link { display: block; text-align: center; margin-top: 25px; color: #6366F1; text-decoration: none; font-size: 0.9rem; }
882
  .catalog-link:hover { text-decoration: underline; }
883
  .not-found { text-align: center; color: #c53030; font-size: 1.2rem; padding: 40px 0;}
884
  </style>
 
926
  function sendOrderViaWhatsApp() {
927
  const orderId = '{{ order.id }}';
928
  const orderUrl = `{{ request.url }}`;
929
+ // Changed WhatsApp number
930
+ const whatsappNumber = "77074354171";
931
 
932
+ let message = `Здравствуйте! Хочу подтвердить свой заказ на Мобильный мир:%0A%0A`;
933
  message += `*Номер заказа:* ${orderId}%0A`;
934
  message += `*Ссылка на заказ:* ${encodeURIComponent(orderUrl)}%0A%0A`;
935
  message += `Пожалуйста, свяжитесь со мной для уточнения деталей оплаты и доставки.`;
 
955
  <head>
956
  <meta charset="UTF-8">
957
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
958
+ <title>Админ-панель - Мобильный мир</title>
959
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
960
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
961
  <style>
962
+ /* --- Indigo Blue Theme --- */
963
+ body { font-family: 'Poppins', sans-serif; background-color: #F8FAFF; color: #4d333f; padding: 20px; line-height: 1.6; }
964
  .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); }
965
+ .header { padding-bottom: 15px; margin-bottom: 25px; border-bottom: 1px solid #E0E7FF; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;}
966
+ h1, h2, h3 { font-weight: 600; color: #4F46E5; margin-bottom: 15px; }
967
  h1 { font-size: 1.6rem; }
968
  h2 { font-size: 1.5rem; margin-top: 30px; display: flex; align-items: center; gap: 8px; }
969
+ h3 { font-size: 1.2rem; color: #3730A3; margin-top: 20px; }
970
+ .section { margin-bottom: 30px; padding: 20px; background-color: #EEF2FF; border: 1px solid #E0E7FF; border-radius: 8px; }
971
  form { margin-bottom: 20px; }
972
  label { font-weight: 500; margin-top: 10px; display: block; color: #6b4d5d; font-size: 0.9rem;}
973
+ 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 #E0E7FF; border-radius: 6px; font-size: 0.95rem; box-sizing: border-box; transition: border-color 0.3s ease; background-color: #fff; }
974
+ input:focus, textarea:focus, select:focus { border-color: #4F46E5; outline: none; box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1); }
975
  textarea { min-height: 80px; resize: vertical; }
976
+ input[type="file"] { padding: 8px; background-color: #EEF2FF; cursor: pointer; border: 1px solid #E0E7FF;}
977
+ input[type="file"]::file-selector-button { padding: 5px 10px; border-radius: 4px; background-color: #E0E7FF; border: 1px solid #C3DAFE; cursor: pointer; margin-right: 10px;}
978
  input[type="checkbox"] { margin-right: 5px; vertical-align: middle; }
979
  label.inline-label { display: inline-block; margin-top: 10px; font-weight: normal; }
980
+ button, .button { padding: 10px 18px; border: none; border-radius: 6px; background-color: #4F46E5; 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;}
981
+ button:hover, .button:hover { background-color: #3730A3; }
982
  button:active, .button:active { transform: scale(0.98); }
983
  button[type="submit"] { min-width: 120px; justify-content: center; }
984
  .delete-button { background-color: #f56565; }
985
  .delete-button:hover { background-color: #e53e3e; }
986
+ .add-button { background-color: #4F46E5; }
987
+ .add-button:hover { background-color: #3730A3; }
988
  .item-list { display: grid; gap: 20px; }
989
+ .item { background: #fff; padding: 15px 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.07); border: 1px solid #E0E7FF; }
990
  .item p { margin: 5px 0; font-size: 0.9rem; color: #6b4d5d; }
991
  .item strong { color: #4d333f; }
992
  .item .description { font-size: 0.85rem; color: #a0aec0; max-height: 60px; overflow: hidden; text-overflow: ellipsis; }
993
  .item-actions { margin-top: 15px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
994
+ .item-actions button:not(.delete-button) { background-color: #4F46E5; }
995
+ .item-actions button:not(.delete-button):hover { background-color: #3730A3; }
996
+ .edit-form-container { margin-top: 15px; padding: 20px; background: #EEF2FF; border: 1px dashed #E0E7FF; border-radius: 6px; display: none; }
997
+ details { background-color: #EEF2FF; border: 1px solid #E0E7FF; border-radius: 8px; margin-bottom: 20px; }
998
+ details > summary { cursor: pointer; font-weight: 600; color: #3730A3; display: block; padding: 15px; border-bottom: 1px solid #E0E7FF; list-style: none; position: relative; }
999
+ 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: #4F46E5; }
1000
  details[open] > summary::after { transform: translateY(-50%) rotate(180deg); }
1001
+ details[open] > summary { border-bottom: 1px solid #E0E7FF; }
1002
  details .form-content { padding: 20px; }
1003
  .color-input-group { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
1004
  .color-input-group input { flex-grow: 1; margin: 0; }
1005
  .remove-color-btn { background-color: #f56565; padding: 6px 10px; font-size: 0.8rem; margin-top: 0; line-height: 1; }
1006
  .remove-color-btn:hover { background-color: #e53e3e; }
1007
+ .add-color-btn { background-color: #818CF8; color: #3730A3; }
1008
+ .add-color-btn:hover { background-color: #E0E7FF; }
1009
+ .photo-preview img { max-width: 70px; max-height: 70px; border-radius: 5px; margin: 5px 5px 0 0; border: 1px solid #E0E7FF; object-fit: cover;}
1010
  .sync-buttons { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
1011
  .download-hf-button { background-color: #a0aec0; }
1012
  .download-hf-button:hover { background-color: #718096; }
 
1026
  <div class="container">
1027
  <div class="header">
1028
  <div class="logo-title-container" style="display: flex; align-items: center; gap: 15px;">
1029
+ <img src="https://huggingface.co/spaces/Kgshop/mobilnymir/resolve/main/IMG_20251019_120056_121.jpg" alt="Мобильный мир Logo" style="height: 50px; width: 50px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 8px rgba(79, 70, 229, 0.7), 0 0 15px rgba(55, 48, 163, 0.5);">
1030
+ <h1><i class="fas fa-tools"></i> Админ-панель Мобильный мир</h1>
1031
  </div>
1032
+ <a href="{{ url_for('catalog') }}" class="button" style="background-color: #6366F1;"><i class="fas fa-store"></i> Перейти в каталог</a>
1033
  </div>
1034
 
1035