Update app.py

app.py

@@ -188,143 +188,89 @@ def catalog():
             .product-button:hover {
                 background-color: #2980b9;
             }
-            @media (max-width: 768px) {
-                .products-grid {
-                    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-                    gap: 10px;
-                }
-                body {
-                    padding: 10px;
-                }
-                h1 {
-                    font-size: 1.8em;
-                    margin-bottom: 20px;
-                }
-                .product {
-                    padding: 10px;
-                }
-                .product-image {
-                    height: 120px;
-                }
-                .product h2 {
-                    font-size: 1em;
-                }
-                .product-price {
-                    font-size: 1.1em;
-                }
-                .product-description {
-                    font-size: 0.8em;
-                }
-                .product-button {
-                    padding: 8px 15px;
-                    font-size: 0.9em;
-                }
-            }
-            @keyframes fadeIn {
-                from {
-                    opacity: 0;
-                    transform: translateY(20px);
-                }
-                to {
-                    opacity: 1;
-                    transform: translateY(0);
-                }
-            }
-            .product {
-                animation: fadeIn 0.5s ease-out forwards;
-            }
-            ::-webkit-scrollbar {
-                width: 8px;
+            .add-to-cart {
+                background-color: #27ae60;
+                margin-top: 10px;
             }
-            ::-webkit-scrollbar-track {
-                background: #f1f1f1;
+            .add-to-cart:hover {
+                background-color: #219653;
             }
-            ::-webkit-scrollbar-thumb {
-                background: #888;
-                border-radius: 4px;
+            #cart-button {
+                position: fixed;
+                bottom: 20px;
+                right: 20px;
+                background-color: #e74c3c;
+                color: white;
+                border: none;
+                border-radius: 50%;
+                width: 60px;
+                height: 60px;
+                font-size: 20px;
+                cursor: pointer;
+                display: none;
+                box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+                z-index: 1000;
             }
-            ::-webkit-scrollbar-thumb:hover {
-                background: #555;
+            #cart-button:hover {
+                background-color: #c0392b;
             }
-
-            /* Modal Styles */
             .modal {
-                display: none; /* Hidden by default */
-                position: fixed; /* Stay in place */
-                z-index: 1; /* Sit on top */
+                display: none;
+                position: fixed;
+                z-index: 1001;
                 left: 0;
                 top: 0;
-                width: 100%; /* Full width */
-                height: 100%; /* Full height */
-                overflow: auto; /* Enable scroll if needed */
-                background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+                width: 100%;
+                height: 100%;
+                overflow: auto;
+                background-color: rgba(0,0,0,0.4);
             }
-
             .modal-content {
                 position: relative;
                 background-color: #fefefe;
-                margin: 10% auto; /* 15% from the top and centered */
+                margin: 10% auto;
                 padding: 20px;
                 border: 1px solid #888;
                 width: 80%;
                 max-width: 600px;
-                box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-                animation-name: animatetop;
-                animation-duration: 0.4s
+                box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+                animation: animatetop 0.4s;
             }
-
-            /* Add Animation */
             @keyframes animatetop {
                 from {top: -300px; opacity: 0}
                 to {top: 10%; opacity: 1}
             }
-
-            /* The Close Button */
             .close {
                 color: #aaa;
                 float: right;
                 font-size: 28px;
                 font-weight: bold;
-            }
-
-            .close:hover,
-            .close:focus {
-                color: black;
-                text-decoration: none;
                 cursor: pointer;
             }
-
-            /* Swiper Styles */
-            .swiper-container {
-                width: 100%;
-                height: 300px;
+            .close:hover {
+                color: black;
             }
-
-            .swiper-slide {
-                text-align: center;
-                font-size: 18px;
-                background: #fff;
-
-                /* Center slide text vertically */
-                display: -webkit-box;
-                display: -ms-flexbox;
-                display: -webkit-flex;
+            .cart-item {
                 display: flex;
-                -webkit-box-pack: center;
-                -ms-flex-pack: center;
-                -webkit-justify-content: center;
-                justify-content: center;
-                -webkit-box-align: center;
-                -ms-flex-align: center;
-                -webkit-align-items: center;
+                justify-content: space-between;
                 align-items: center;
+                padding: 10px 0;
+                border-bottom: 1px solid #eee;
             }
-
-            .swiper-slide img {
-                display: block;
-                width: 100%;
-                height: 100%;
+            .cart-item img {
+                width: 50px;
+                height: 50px;
                 object-fit: cover;
+                margin-right: 10px;
+            }
+            @media (max-width: 768px) {
+                .products-grid {
+                    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+                    gap: 10px;
+                }
+                .product-image {
+                    height: 120px;
+                }
             }
         </style>
     </head>
@@ -337,7 +283,7 @@ def catalog():
                     {% if product.get('photos') and product['photos']|length > 0 %}
                     <div class="product-image">
                         <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}" 
-                             alt="{{ product['name'] }}"
+                             alt="{{ product['name'] }}" 
                              loading="lazy">
                     </div>
                     {% endif %}
@@ -345,54 +291,65 @@ def catalog():
                     <div class="product-price">{{ product['price'] }} ₽</div>
                     <p class="product-description">{{ product['description'][:100] }}{% if product['description']|length > 100 %}...{% endif %}</p>
                     <button class="product-button" onclick="openModal({{ loop.index0 }})">Подробнее</button>
+                    <button class="product-button add-to-cart" onclick="addToCart({{ loop.index0 }})">В корзину</button>
                 </div>
                 {% endfor %}
             </div>
         </div>
 
-        <!-- The Modal -->
+        <!-- Product Modal -->
         <div id="productModal" class="modal">
             <div class="modal-content">
-                <span class="close" onclick="closeModal()">&times;</span>
-                <div id="modalContent">
-                    <!-- Product details will be loaded here -->
+                <span class="close" onclick="closeModal('productModal')">×</span>
+                <div id="modalContent"></div>
+            </div>
+        </div>
+
+        <!-- Cart Modal -->
+        <div id="cartModal" class="modal">
+            <div class="modal-content">
+                <span class="close" onclick="closeModal('cartModal')">×</span>
+                <h2>Корзина</h2>
+                <div id="cartContent"></div>
+                <div style="margin-top: 20px; text-align: right;">
+                    <strong>Итого: <span id="cartTotal">0</span> ₽</strong>
                 </div>
             </div>
         </div>
 
+        <button id="cart-button" onclick="openCartModal()">🛒</button>
+
         <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
         <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
         <script>
-            // Function to open the modal
+            const products = {{ products|tojson }};
+
             function openModal(index) {
                 loadProductDetails(index);
                 document.getElementById('productModal').style.display = "block";
             }
 
-            // Function to close the modal
-            function closeModal() {
-                document.getElementById('productModal').style.display = "none";
+            function closeModal(modalId) {
+                document.getElementById(modalId).style.display = "none";
             }
 
-            // Function to load product details into the modal
             function loadProductDetails(index) {
                 fetch('/product/' + index)
                     .then(response => response.text())
                     .then(data => {
                         document.getElementById('modalContent').innerHTML = data;
-                        // Initialize Swiper after the content is loaded
                         initializeSwiper();
                     });
             }
 
             function initializeSwiper() {
-                var swiper = new Swiper('.swiper-container', {
+                new Swiper('.swiper-container', {
                     slidesPerView: 1,
                     spaceBetween: 30,
                     loop: true,
-                    grabCursor: true, // Enables the ability to grab with a cursor
+                    grabCursor: true,
                     pagination: {
                         el: '.swiper-pagination',
                         clickable: true,
@@ -404,12 +361,73 @@ def catalog():
                 });
             }
 
-            // Close the modal if the user clicks outside of it
+            function addToCart(index) {
+                let cart = JSON.parse(localStorage.getItem('cart') || '[]');
+                const product = products[index];
+                const existingItem = cart.find(item => item.name === product.name);
+                
+                if (existingItem) {
+                    existingItem.quantity += 1;
+                } else {
+                    cart.push({
+                        name: product.name,
+                        price: product.price,
+                        photo: product.photos?.[0] || '',
+                        quantity: 1
+                    });
+                }
+                
+                localStorage.setItem('cart', JSON.stringify(cart));
+                updateCartButton();
+            }
+
+            function updateCartButton() {
+                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
+                const cartButton = document.getElementById('cart-button');
+                cartButton.style.display = cart.length > 0 ? 'block' : 'none';
+            }
+
+            function openCartModal() {
+                const cart = JSON.parse(localStorage.getItem('cart') || '[]');
+                const cartContent = document.getElementById('cartContent');
+                let total = 0;
+                
+                if (cart.length === 0) {
+                    cartContent.innerHTML = '<p>Корзина пуста</p>';
+                } else {
+                    cartContent.innerHTML = cart.map(item => {
+                        const itemTotal = item.price * item.quantity;
+                        total += itemTotal;
+                        return `
+                            <div class="cart-item">
+                                <div style="display: flex; align-items: center;">
+                                    ${item.photo ? `
+                                        <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/${item.photo}" 
+                                             alt="${item.name}">
+                                    ` : ''}
+                                    <div>
+                                        <strong>${item.name}</strong>
+                                        <p>${item.price} ₽ × ${item.quantity}</p>
+                                    </div>
+                                </div>
+                                <span>${itemTotal} ₽</span>
+                            </div>
+                        `;
+                    }).join('');
+                }
+                
+                document.getElementById('cartTotal').textContent = total;
+                document.getElementById('cartModal').style.display = 'block';
+            }
+
             window.onclick = function(event) {
-                if (event.target == document.getElementById('productModal')) {
-                    closeModal();
+                if (event.target.className === 'modal') {
+                    event.target.style.display = "none";
                 }
             }
+
+            // Инициализация при загрузке страницы
+            updateCartButton();
         </script>
     </body>
     </html>
@@ -429,20 +447,18 @@ def product_detail(index):
         <div class="swiper-container">
             <div class="swiper-wrapper">
                 {% if product.get('photos') %}
-                    {% for photo in product['photos'] %}
-                        <div class="swiper-slide">
-                            <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" alt="{{ product['name'] }}">
-                        </div>
-                    {% endfor %}
+                {% for photo in product['photos'] %}
+                <div class="swiper-slide">
+                    <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" alt="{{ product['name'] }}">
+                </div>
+                {% endfor %}
                 {% else %}
-                    <div class="swiper-slide">
-                        <img src="https://via.placeholder.com/300" alt="No Image">
-                    </div>
+                <div class="swiper-slide">
+                    <img src="https://via.placeholder.com/300" alt="No Image">
+                </div>
                 {% endif %}
             </div>
-            <!-- Add Pagination -->
             <div class="swiper-pagination"></div>
-            <!-- Add Navigation -->
             <div class="swiper-button-next"></div>
             <div class="swiper-button-prev"></div>
         </div>
@@ -464,7 +480,7 @@ def admin():
             photos_files = request.files.getlist('photos')
             photos_list = []
             if photos_files:
-                for photo in photos_files:
+                for i, photo in enumerate(photos_files[:2]):  # Ограничение до 2 фото
                     if photo and photo.filename:
                         photo_filename = secure_filename(photo.filename)
                         uploads_dir = 'uploads'
@@ -507,10 +523,9 @@ def admin():
             price = request.form.get('price')
             description = request.form.get('description')
             photos_files = request.files.getlist('photos')
-            # Если загружены новые фото, обновляем список фотографий товара
             if photos_files and any(photo.filename for photo in photos_files):
                 new_photos_list = []
-                for photo in photos_files:
+                for i, photo in enumerate(photos_files[:2]):  # Ограничение до 2 фото
                     if photo and photo.filename:
                         photo_filename = secure_filename(photo.filename)
                         uploads_dir = 'uploads'
@@ -614,23 +629,6 @@ def admin():
                 border-radius: 5px;
                 background-color: #f9f9f9;
             }
-            @media (max-width: 600px) {
-                body {
-                    margin: 10px;
-                }
-                h1 {
-                    font-size: 24px;
-                }
-                form {
-                    padding: 10px;
-                }
-                .product-item {
-                    padding: 10px;
-                }
-                input[type="file"] {
-                    margin-bottom: 10px;
-                }
-            }
         </style>
     </head>
     <body>
@@ -643,7 +641,7 @@ def admin():
             <input type="number" id="price" name="price" step="0.01" required>
             <label for="description">Описание:</label>
             <textarea id="description" name="description" rows="4" required></textarea>
-            <label for="photos">Фотографии товара (до 5):</label>
+            <label for="photos">Фотографии товара (максимум 2):</label>
             <input type="file" id="photos" name="photos" accept="image/*" multiple>
             <button type="submit">Добавить товар</button>
         </form>
@@ -652,7 +650,6 @@ def admin():
         <form method="POST" action="{{ url_for('backup') }}">
             <button type="submit">Создать резервную копию</button>
         </form>
-
         <form method="GET" action="{{ url_for('download') }}">
             <button type="submit">Скачать базу данных</button>
         </form>
@@ -665,11 +662,10 @@ def admin():
                 <p><strong>Цена:</strong> {{ product['price'] }} руб.</p>
                 <p><strong>Описание:</strong> {{ product['description'] }}</p>
                 {% if product.get('photos') and product['photos']|length > 0 %}
-                    <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}" 
-                         alt="{{ product['name'] }}" 
+                    <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photos'][0] }}"
+                         alt="{{ product['name'] }}"
                          style="max-width: 100px;">
                 {% endif %}
-
                 <details>
                     <summary>Редактировать</summary>
                     <form method="POST" enctype="multipart/form-data" class="edit-form">
@@ -681,12 +677,11 @@ def admin():
                         <input type="number" id="price" name="price" step="0.01" value="{{ product['price'] }}" required>
                         <label for="description">Описание:</label>
                         <textarea id="description" name="description" rows="4" required>{{ product['description'] }}</textarea>
-                        <label for="photos">Фотографии товара (до 5):</label>
+                        <label for="photos">Фотографии товара (максимум 2):</label>
                         <input type="file" id="photos" name="photos" accept="image/*" multiple>
                         <button type="submit">Сохранить изменения</button>
                     </form>
                 </details>
-
                 <form method="POST">
                     <input type="hidden" name="action" value="delete">
                     <input type="hidden" name="index" value="{{ loop.index0 }}">
@@ -719,4 +714,4 @@ if __name__ == '__main__':
     except Exception as e:
         logging.error(f"Не удалось загрузить базу данных при запуске: {e}")
 
-    app.run(debug=True, host='0.0.0.0', port=7860)
+    app.run(debug=True, host='0.0.0.0', port=7860)