Baseflask7

Paused

App Files Files Community

flpolprojects commited on Feb 19, 2025

Commit

daa7bba

verified ·

1 Parent(s): 4051dff

Update app.py

Browse files

Files changed (1) hide show

app.py +137 -77

app.py CHANGED Viewed

@@ -52,7 +52,6 @@ def upload_db_to_hf():
         api.upload_file(
             path_or_fileobj=DATA_FILE,
             path_in_repo=DATA_FILE,
-            repo_id=REPO_ID,
             repo_type="dataset",
             token=HF_TOKEN_WRITE,
             commit_message=f"Автоматическое резервное копирование базы данных {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
@@ -94,6 +93,7 @@ def catalog():
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Каталог</title>
         <style>
             * {
                 margin: 0;
@@ -245,6 +245,58 @@ def catalog():
             ::-webkit-scrollbar-thumb:hover {
                 background: #555;
             }
         </style>
     </head>
     <body>
@@ -252,24 +304,64 @@ def catalog():
             <h1>Каталог товаров</h1>
             <div class="products-grid">
                 {% for product in products %}
-                <a href="{{ url_for('product_detail', index=loop.index0) }}" style="text-decoration: none; color: inherit;">
-                    <div class="product">
-                        {% 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'] }}"
-                                 loading="lazy">
-                        </div>
-                        {% endif %}
-                        <h2>{{ product['name'] }}</h2>
-                        <div class="product-price">{{ product['price'] }} ₽</div>
-                        <p class="product-description">{{ product['description'][:100] }}{% if product['description']|length > 100 %}...{% endif %}</p>
-                        <div class="product-button">Подробнее</div>
                     </div>
-                </a>
                 {% endfor %}
             </div>
         </div>
     </body>
     </html>
     '''
@@ -283,73 +375,41 @@ def product_detail(index):
     except IndexError:
         return "Продукт не найден", 404
     detail_html = '''
-    <!DOCTYPE html>
-    <html lang="ru">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>{{ product['name'] }}</title>
-        <style>
-            body {
-                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-                background-color: #f5f5f5;
-                color: #333;
-                padding: 20px;
-            }
-            .container {
-                max-width: 800px;
-                margin: 0 auto;
-                background: #fff;
-                padding: 20px;
-                border-radius: 8px;
-                box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
-            }
-            h1 {
-                margin-bottom: 20px;
-            }
-            .photos {
-                display: flex;
-                flex-wrap: wrap;
-                gap: 10px;
-                margin-bottom: 20px;
-            }
-            .photos img {
-                width: calc(50% - 10px);
-                height: auto;
-                border-radius: 5px;
-            }
-            @media (max-width: 600px) {
-                .photos img {
-                    width: 100%;
-                }
-            }
-            .back-button {
-                display: inline-block;
-                margin-top: 20px;
-                padding: 10px 15px;
-                background-color: #3498db;
-                color: white;
-                text-decoration: none;
-                border-radius: 5px;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="container">
-            <h1>{{ product['name'] }}</h1>
-            <div class="photos">
                 {% if product.get('photos') %}
                     {% for photo in product['photos'] %}
-                    <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" alt="{{ product['name'] }}">
                     {% endfor %}
                 {% endif %}
             </div>
-            <p><strong>Цена:</strong> {{ product['price'] }} ₽</p>
-            <p><strong>Описание:</strong> {{ product['description'] }}</p>
-            <a href="{{ url_for('catalog') }}" class="back-button">Назад к каталогу</a>
         </div>
-    </body>
-    </html>
     '''
     return render_template_string(detail_html, product=product, repo_id=REPO_ID)
@@ -624,4 +684,4 @@ if __name__ == '__main__':
     except Exception as e:
         logging.error(f"Не удалось загрузить базу данных при запуске: {e}")
-    app.run(debug=True, host='0.0.0.0', port=7860)

         api.upload_file(
             path_or_fileobj=DATA_FILE,
             path_in_repo=DATA_FILE,
             repo_type="dataset",
             token=HF_TOKEN_WRITE,
             commit_message=f"Автоматическое резервное копирование базы данных {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}"
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Каталог</title>
+        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
         <style>
             * {
                 margin: 0;
             ::-webkit-scrollbar-thumb:hover {
                 background: #555;
             }
+            /* Modal Styles */
+            .modal {
+                display: none; /* Hidden by default */
+                position: fixed; /* Stay in place */
+                z-index: 1; /* Sit on top */
+                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 */
+            }
+            .modal-content {
+                position: relative;
+                background-color: #fefefe;
+                margin: 10% auto; /* 15% from the top and centered */
+                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
+            }
+            /* 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;
+            }
+            /* Image Carousel Styles */
+            .carousel-inner > .carousel-item > img {
+                margin: 0 auto;
+            }
         </style>
     </head>
     <body>
             <h1>Каталог товаров</h1>
             <div class="products-grid">
                 {% for product in products %}
+                <div class="product">
+                    {% 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'] }}"
+                             loading="lazy">
                     </div>
+                    {% endif %}
+                    <h2>{{ product['name'] }}</h2>
+                    <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>
+                </div>
                 {% endfor %}
             </div>
         </div>
+        <!-- The 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 -->
+                </div>
+            </div>
+        </div>
+        <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>
+            // Function to open the modal
+            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 to load product details into the modal
+            function loadProductDetails(index) {
+                fetch('/product/' + index)
+                    .then(response => response.text())
+                    .then(data => {
+                        document.getElementById('modalContent').innerHTML = data;
+                    });
+            }
+            // Close the modal if the user clicks outside of it
+            window.onclick = function(event) {
+                if (event.target == document.getElementById('productModal')) {
+                    closeModal();
+                }
+            }
+        </script>
     </body>
     </html>
     '''
     except IndexError:
         return "Продукт не найден", 404
     detail_html = '''
+    <div class="container">
+        <h2>{{ product['name'] }}</h2>
+        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+            <ol class="carousel-indicators">
                 {% if product.get('photos') %}
                     {% for photo in product['photos'] %}
+                        <li data-target="#carouselExampleIndicators" data-slide-to="{{ loop.index0 }}" {% if loop.first %}class="active"{% endif %}></li>
                     {% endfor %}
                 {% endif %}
+            </ol>
+            <div class="carousel-inner">
+                {% if product.get('photos') %}
+                    {% for photo in product['photos'] %}
+                        <div class="carousel-item {% if loop.first %}active{% endif %}">
+                            <img class="d-block w-100" src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ photo }}" alt="{{ product['name'] }}">
+                        </div>
+                    {% endfor %}
+                {% else %}
+                    <div class="carousel-item active">
+                        <img class="d-block w-100" src="https://via.placeholder.com/300" alt="No Image">
+                    </div>
+                {% endif %}
             </div>
+            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                <span class="sr-only">Previous</span>
+            </a>
+            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+                <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                <span class="sr-only">Next</span>
+            </a>
         </div>
+        <p><strong>Цена:</strong> {{ product['price'] }} ₽</p>
+        <p><strong>Описание:</strong> {{ product['description'] }}</p>
+    </div>
     '''
     return render_template_string(detail_html, product=product, repo_id=REPO_ID)
     except Exception as e:
         logging.error(f"Не удалось загрузить базу данных при запуске: {e}")
+    app.run(debug=True, host='0.0.0.0', port=7860)