Baseflask4

Paused

App Files Files Community

flpolprojects commited on Feb 19, 2025

Commit

7cc51ba

verified ·

1 Parent(s): b5185ab

Update app.py

Browse files

Files changed (1) hide show

app.py +35 -28

app.py CHANGED Viewed

@@ -98,18 +98,18 @@ def catalog():
     # Pagination setup
     page = request.args.get('page', 1, type=int)
-    per_page = 6  # Adjusted for mobile view
     # Calculate start and end indices for the current page
-    start = (page - 1) * per_page * 3 # 3 columns for bigger screens
-    end = start + per_page * 3
     # Slice the products list for the current page
     paginated_products = products[start:end]
     # Calculate total number of pages
     total_products = len(products)
-    total_pages = (total_products + (per_page * 3) - 1) // (per_page * 3)
     catalog_html = '''
     <!DOCTYPE html>
@@ -121,43 +121,57 @@ def catalog():
         <style>
             body {
                 font-family: Arial, sans-serif;
-                margin: 0; /* Reset default margin */
-                background-color: #f9f9f9;
                 padding: 20px;
             }
             h1 {
-                color: #333;
                 text-align: center;
             }
-            .container {
-                display: flex;
-                flex-wrap: wrap;
-                justify-content: space-around;
                 gap: 20px;
             }
-            .product {
-                flex: 1 1 calc(100% - 20px); /* Full width on mobile */
-                background-color: #fff;
-                border: 1px solid #ddd;
                 padding: 15px;
-                border-radius: 5px;
                 text-align: center;
-                box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
             }
-            .product img {
                 max-width: 100%;
                 height: auto;
                 border-radius: 5px;
                 margin-bottom: 10px;
             }
             .pagination {
                 text-align: center;
                 margin-top: 20px;
             }
             .pagination a {
                 display: inline-block;
-                padding: 8px 16px;
                 text-decoration: none;
                 border: 1px solid #ddd;
                 color: #333;
                 background-color: white;
@@ -171,21 +185,14 @@ def catalog():
             .pagination a:hover:not(.active) {
                 background-color: #ddd;
             }
-            /* Media query for larger screens */
-            @media (min-width: 768px) {
-                .product {
-                    flex: 1 1 calc(30% - 20px); /* Three columns on larger screens */
-                }
-            }
         </style>
     </head>
     <body>
         <h1>Каталог товаров</h1>
-        <div class="container">
             {% for product in paginated_products %}
-            <div class="product">
                 <h2>{{ product['name'] }}</h2>
                 {% if product.get('photo') %}
                     <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photo'] }}" alt="{{ product['name'] }}">

     # Pagination setup
     page = request.args.get('page', 1, type=int)
+    per_page = 12  # Количество товаров на странице
     # Calculate start and end indices for the current page
+    start = (page - 1) * per_page
+    end = start + per_page
     # Slice the products list for the current page
     paginated_products = products[start:end]
     # Calculate total number of pages
     total_products = len(products)
+    total_pages = (total_products + per_page - 1) // per_page
     catalog_html = '''
     <!DOCTYPE html>
         <style>
             body {
                 font-family: Arial, sans-serif;
+                margin: 0;
                 padding: 20px;
+                background-color: #f9f9f9;
             }
             h1 {
                 text-align: center;
+                color: #333;
+                margin-bottom: 20px;
             }
+            .grid-container {
+                display: grid;
+                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                 gap: 20px;
+                margin-bottom: 20px;
             }
+            .product-card {
+                background-color: white;
+                border-radius: 8px;
+                box-shadow: 0 2px 5px rgba(0,0,0,0.1);
                 padding: 15px;
                 text-align: center;
+                transition: transform 0.2s ease-in-out;
             }
+            .product-card:hover {
+                transform: scale(1.05);
+            }
+            .product-card img {
                 max-width: 100%;
                 height: auto;
                 border-radius: 5px;
                 margin-bottom: 10px;
             }
+            .product-card h2 {
+                font-size: 18px;
+                color: #555;
+                margin-bottom: 10px;
+            }
+            .product-card p {
+                font-size: 14px;
+                color: #777;
+                margin-bottom: 5px;
+            }
             .pagination {
                 text-align: center;
                 margin-top: 20px;
             }
             .pagination a {
                 display: inline-block;
+                padding: 10px 15px;
                 text-decoration: none;
+                border-radius: 5px;
                 border: 1px solid #ddd;
                 color: #333;
                 background-color: white;
             .pagination a:hover:not(.active) {
                 background-color: #ddd;
             }
         </style>
     </head>
     <body>
         <h1>Каталог товаров</h1>
+        <div class="grid-container">
             {% for product in paginated_products %}
+            <div class="product-card">
                 <h2>{{ product['name'] }}</h2>
                 {% if product.get('photo') %}
                     <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photo'] }}" alt="{{ product['name'] }}">