Update app.py

app.py

@@ -12,15 +12,12 @@ from werkzeug.utils import secure_filename
 app = Flask(__name__)
 DATA_FILE = 'dataasdem.json'
 
-# Настройки Hugging Face
 REPO_ID = "flpolprojects/Clients"
 HF_TOKEN_WRITE = os.getenv("HF_TOKEN")
 HF_TOKEN_READ = os.getenv("HF_TOKEN_READ")
 
-# Ссылка на логотип
 LOGO_URL = "https://cdn-avatars.huggingface.co/v1/production/uploads/67b22aaeae9b6a59f1cfb849/NQvBksXzJItYt6hfFjyaB.jpeg"
 
-# Настройка логирования
 logging.basicConfig(level=logging.DEBUG)
 
 def load_data():
@@ -96,7 +93,7 @@ def periodic_backup():
 @app.route('/')
 def catalog():
     data = load_data()
-    products = data['products']
+    products = sorted(data['products'], key=lambda x: x.get('added_at', ''), reverse=True)
     categories = data['categories']
     
     catalog_html = '''
@@ -117,14 +114,9 @@ def catalog():
             }
             body {
                 font-family: 'Poppins', sans-serif;
-                background: linear-gradient(135deg, #f0f2f5, #e9ecef);
-                color: #2d3748;
+                background: linear-gradient(135deg, #fce4ec, #f8bbd0);
+                color: #880e4f;
                 line-height: 1.6;
-                transition: background 0.3s, color 0.3s;
-            }
-            body.dark-mode {
-                background: linear-gradient(135deg, #1a202c, #2d3748);
-                color: #e2e8f0;
             }
             .container {
                 max-width: 1300px;
@@ -136,7 +128,7 @@ def catalog():
                 justify-content: space-between;
                 align-items: center;
                 padding: 15px 0;
-                border-bottom: 1px solid #e2e8f0;
+                border-bottom: 1px solid #f48fb1;
             }
             .header-logo {
                 width: 60px;
@@ -155,17 +147,6 @@ def catalog():
                 font-weight: 600;
                 margin-left: 15px;
             }
-            .theme-toggle {
-                background: none;
-                border: none;
-                font-size: 1.5rem;
-                cursor: pointer;
-                color: #4a5568;
-                transition: color 0.3s ease;
-            }
-            .theme-toggle:hover {
-                color: #3b82f6;
-            }
             .filters-container {
                 margin: 20px 0;
                 display: flex;
@@ -182,31 +163,32 @@ def catalog():
                 max-width: 600px;
                 padding: 12px 18px;
                 font-size: 1rem;
-                border: 1px solid #e2e8f0;
+                border: 1px solid #f48fb1;
                 border-radius: 8px;
                 outline: none;
                 box-shadow: 0 2px 5px rgba(0,0,0,0.05);
                 transition: all 0.3s ease;
             }
             #search-input:focus {
-                border-color: #3b82f6;
-                box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
+                border-color: #e91e63;
+                box-shadow: 0 4px 15px rgba(233, 30, 99, 0.2);
             }
             .category-filter {
                 padding: 8px 16px;
-                border: 1px solid #e2e8f0;
+                border: 1px solid #f48fb1;
                 border-radius: 8px;
                 background-color: #fff;
+                color: #880e4f;
                 cursor: pointer;
                 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                 font-size: 0.9rem;
                 font-weight: 400;
             }
             .category-filter.active, .category-filter:hover {
-                background-color: #3b82f6;
+                background-color: #e91e63;
                 color: white;
-                border-color: #3b82f6;
-                box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
+                border-color: #e91e63;
+                box-shadow: 0 2px 10px rgba(233, 30, 99, 0.3);
             }
             .products-grid {
                 display: grid;
@@ -222,10 +204,6 @@ def catalog():
                 transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
                 overflow: hidden;
             }
-            body.dark-mode .product {
-                background: #2d3748;
-                color: #fff;
-            }
             .product:hover {
                 transform: translateY(-5px) scale(1.02);
                 box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
@@ -260,30 +238,27 @@ def catalog():
             }
             .product-price {
                 font-size: 1.1rem;
-                color: #ef4444;
+                color: #e91e63;
                 font-weight: 700;
                 text-align: center;
                 margin: 5px 0;
             }
             .product-description {
                 font-size: 0.8rem;
-                color: #718096;
+                color: #880e4f;
                 text-align: center;
                 margin-bottom: 15px;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 white-space: nowrap;
             }
-            body.dark-mode .product-description {
-                color: #a0aec0;
-            }
             .product-button {
                 display: block;
                 width: 100%;
                 padding: 8px;
                 border: none;
                 border-radius: 8px;
-                background-color: #3b82f6;
+                background-color: #e91e63;
                 color: white;
                 font-size: 0.8rem;
                 font-weight: 500;
@@ -294,22 +269,22 @@ def catalog():
                 text-decoration: none;
             }
             .product-button:hover {
-                background-color: #2563eb;
-                box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
+                background-color: #d81b60;
+                box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);
                 transform: translateY(-2px);
             }
             .add-to-cart {
-                background-color: #10b981;
+                background-color: #4caf50;
             }
             .add-to-cart:hover {
-                background-color: #059669;
-                box-shadow: 0 4px 15px rgba(5, 150, 105, 0.4);
+                background-color: #43a047;
+                box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
             }
             #cart-button {
                 position: fixed;
                 bottom: 20px;
                 right: 20px;
-                background-color: #ef4444;
+                background-color: #e91e63;
                 color: white;
                 border: none;
                 border-radius: 50%;
@@ -318,7 +293,7 @@ def catalog():
                 font-size: 1.2rem;
                 cursor: pointer;
                 display: none;
-                box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
+                box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);
                 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                 z-index: 1000;
             }
@@ -343,10 +318,6 @@ def catalog():
                 box-shadow: 0 10px 30px rgba(0,0,0,0.2);
                 animation: slideIn 0.3s ease-out;
             }
-            body.dark-mode .modal-content {
-                background: #2d3748;
-                color: #e2e8f0;
-            }
             @keyframes slideIn {
                 from { transform: translateY(-50px); opacity: 0; }
                 to { transform: translateY(0); opacity: 1; }
@@ -354,58 +325,47 @@ def catalog():
             .close {
                 float: right;
                 font-size: 1.5rem;
-                color: #718096;
+                color: #880e4f;
                 cursor: pointer;
                 transition: color 0.3s;
             }
             .close:hover {
-                color: #2d3748;
-            }
-            body.dark-mode .close {
-                color: #a0aec0;
-            }
-            body.dark-mode .close:hover {
-                color: #fff;
+                color: #e91e63;
             }
             .cart-item {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
                 padding: 15px 0;
-                border-bottom: 1px solid #e2e8f0;
-            }
-            body.dark-mode .cart-item {
-                border-bottom: 1px solid #4a5568;
-            }
-            .cart-item img {
-                width: 50px;
-                height: 50px;
-                object-fit: contain;
-                border-radius: 8px;
-                margin-right: 15px;
+                border-bottom: 1px solid #f48fb1;
             }
             .quantity-input, .color-select {
                 width: 100%;
                 max-width: 150px;
                 padding: 8px;
-                border: 1px solid #e2e8f0;
+                border: 1px solid #f48fb1;
                 border-radius: 8px;
                 font-size: 1rem;
                 margin: 5px 0;
             }
             .clear-cart {
-                background-color: #ef4444;
+                background-color: #e91e63;
             }
             .clear-cart:hover {
-                background-color: #dc2626;
-                box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
+                background-color: #d81b60;
+                box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);
             }
             .order-button {
-                background-color: #10b981;
+                background-color: #4caf50;
             }
             .order-button:hover {
-                background-color: #059669;
-                box-shadow: 0 4px 15px rgba(5, 150, 105, 0.4);
+                background-color: #43a047;
+                box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
+            }
+            @media (max-width: 768px) {
+                .products-grid {
+                    grid-template-columns: repeat(2, minmax(150px, 1fr));
+                }
             }
         </style>
     </head>
@@ -414,9 +374,6 @@ def catalog():
             <div class="header">
                 <img src="''' + LOGO_URL + '''" alt="Logo" class="header-logo">
                 <h1>Каталог</h1>
-                <button class="theme-toggle" onclick="toggleTheme()">
-                    <i class="fas fa-moon"></i>
-                </button>
             </div>
             <div class="filters-container">
                 <button class="category-filter active" data-category="all">Все категории</button>
@@ -450,7 +407,6 @@ def catalog():
             </div>
         </div>
 
-        <!-- Product Modal -->
         <div id="productModal" class="modal">
             <div class="modal-content">
                 <span class="close" onclick="closeModal('productModal')">×</span>
@@ -458,7 +414,6 @@ def catalog():
             </div>
         </div>
 
-        <!-- Quantity and Color Modal -->
         <div id="quantityModal" class="modal">
             <div class="modal-content">
                 <span class="close" onclick="closeModal('quantityModal')">×</span>
@@ -469,7 +424,6 @@ def catalog():
             </div>
         </div>
 
-        <!-- Cart Modal -->
         <div id="cartModal" class="modal">
             <div class="modal-content">
                 <span class="close" onclick="closeModal('cartModal')">×</span>
@@ -492,19 +446,6 @@ def catalog():
             const products = {{ products|tojson }};
             let selectedProductIndex = null;
 
-            function toggleTheme() {
-                document.body.classList.toggle('dark-mode');
-                const icon = document.querySelector('.theme-toggle i');
-                icon.classList.toggle('fa-moon');
-                icon.classList.toggle('fa-sun');
-                localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
-            }
-
-            if (localStorage.getItem('theme') === 'dark') {
-                document.body.classList.add('dark-mode');
-                document.querySelector('.theme-toggle i').classList.replace('fa-moon', 'fa-sun');
-            }
-
             function openModal(index) {
                 loadProductDetails(index);
                 document.getElementById('productModal').style.display = "block";
@@ -753,7 +694,7 @@ def admin():
             photos_list = []
             
             if photos_files:
-                for photo in photos_files[:10]:  # Ограничение до 10 фото
+                for photo in photos_files[:10]:
                     if photo and photo.filename:
                         photo_filename = secure_filename(photo.filename)
                         uploads_dir = 'uploads'
@@ -783,7 +724,8 @@ def admin():
                 'description': description,
                 'category': category if category in categories else 'Без категории',
                 'photos': photos_list,
-                'colors': colors if colors else []
+                'colors': colors if colors else [],
+                'added_at': datetime.now().isoformat()
             }
             products.append(new_product)
             save_data(data)
@@ -800,7 +742,7 @@ def admin():
             
             if photos_files and any(photo.filename for photo in photos_files):
                 new_photos_list = []
-                for photo in photos_files[:10]:  # Ограничение до 10 фото
+                for photo in photos_files[:10]:
                     if photo and photo.filename:
                         photo_filename = secure_filename(photo.filename)
                         uploads_dir = 'uploads'
@@ -846,8 +788,8 @@ def admin():
         <style>
             body {
                 font-family: 'Poppins', sans-serif;
-                background: linear-gradient(135deg, #f0f2f5, #e9ecef);
-                color: #2d3748;
+                background: linear-gradient(135deg, #fce4ec, #f8bbd0);
+                color: #880e4f;
                 padding: 20px;
             }
             .container {
@@ -858,7 +800,7 @@ def admin():
                 display: flex;
                 align-items: center;
                 padding: 15px 0;
-                border-bottom: 1px solid #e2e8f0;
+                border-bottom: 1px solid #f48fb1;
             }
             .header-logo {
                 width: 60px;
@@ -893,21 +835,21 @@ def admin():
                 width: 100%;
                 padding: 12px;
                 margin-top: 5px;
-                border: 1px solid #e2e8f0;
+                border: 1px solid #f48fb1;
                 border-radius: 8px;
                 font-size: 1rem;
                 transition: all 0.3s ease;
             }
             input:focus, textarea:focus, select:focus {
-                border-color: #3b82f6;
-                box-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
+                border-color: #e91e63;
+                box-shadow: 0 0 5px rgba(233, 30, 99, 0.3);
                 outline: none;
             }
             button {
                 padding: 12px 20px;
                 border: none;
                 border-radius: 8px;
-                background-color: #3b82f6;
+                background-color: #e91e63;
                 color: white;
                 font-weight: 500;
                 cursor: pointer;
@@ -915,16 +857,16 @@ def admin():
                 margin-top: 15px;
             }
             button:hover {
-                background-color: #2563eb;
-                box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
+                background-color: #d81b60;
+                box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);
                 transform: translateY(-2px);
             }
             .delete-button {
-                background-color: #ef4444;
+                background-color: #ef5350;
             }
             .delete-button:hover {
-                background-color: #dc2626;
-                box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
+                background-color: #e53935;
+                box-shadow: 0 4px 15px rgba(229, 57, 53, 0.4);
             }
             .product-list, .category-list {
                 display: grid;
@@ -939,7 +881,7 @@ def admin():
             .edit-form {
                 margin-top: 15px;
                 padding: 15px;
-                background: #f7fafc;
+                background: #fce4ec;
                 border-radius: 10px;
             }
             .color-input-group {
@@ -948,10 +890,10 @@ def admin():
                 margin-top: 5px;
             }
             .add-color-btn {
-                background-color: #10b981;
+                background-color: #4caf50;
             }
             .add-color-btn:hover {
-                background-color: #059669;
+                background-color: #43a047;
             }
         </style>
     </head>