flpolprojects commited on
Commit
076b99d
·
verified ·
1 Parent(s): 3e09c05

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +84 -11
app.py CHANGED
@@ -96,6 +96,20 @@ def periodic_backup():
96
  @app.route('/')
97
  def catalog():
98
  products = load_data()
 
 
 
 
 
 
 
 
 
 
 
 
 
 
99
  catalog_html = '''
100
  <!DOCTYPE html>
101
  <html lang="ru">
@@ -111,6 +125,16 @@ def catalog():
111
  }
112
  h1 {
113
  color: #333;
 
 
 
 
 
 
 
 
 
 
114
  }
115
  .product {
116
  background-color: #fff;
@@ -118,6 +142,7 @@ def catalog():
118
  padding: 15px;
119
  margin-bottom: 10px;
120
  border-radius: 5px;
 
121
  }
122
  .product h2 {
123
  margin-top: 0;
@@ -127,29 +152,77 @@ def catalog():
127
  color: #777;
128
  }
129
  .product img {
130
- max-width: 200px;
131
- margin-top: 10px;
132
  border: 1px solid #ccc;
133
  border-radius: 4px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
134
  }
135
  </style>
136
  </head>
137
  <body>
138
  <h1>Каталог товаров</h1>
139
- {% for product in products %}
140
- <div class="product">
141
- <h2>{{ product['name'] }}</h2>
142
- <p><strong>Цена:</strong> {{ product['price'] }} руб.</p>
143
- <p><strong>Описание:</strong> {{ product['description'] }}</p>
144
- {% if product.get('photo') %}
145
- <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photo'] }}" alt="{{ product['name'] }}">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
146
  {% endif %}
147
  </div>
148
- {% endfor %}
149
  </body>
150
  </html>
151
  '''
152
- return render_template_string(catalog_html, products=products, repo_id=REPO_ID)
153
 
154
  @app.route('/admin', methods=['GET', 'POST'])
155
  def admin():
 
96
  @app.route('/')
97
  def catalog():
98
  products = load_data()
99
+ # Pagination setup
100
+ page = request.args.get('page', 1, type=int)
101
+ per_page = 10 # 10 products per column
102
+
103
+ # Calculate start and end indices for the current page
104
+ start = (page - 1) * per_page * 3 # 3 columns
105
+ end = start + per_page * 3
106
+
107
+ # Slice the products list for the current page
108
+ paginated_products = products[start:end]
109
+
110
+ # Calculate total number of pages
111
+ total_products = len(products)
112
+ total_pages = (total_products + (per_page * 3) - 1) // (per_page * 3)
113
  catalog_html = '''
114
  <!DOCTYPE html>
115
  <html lang="ru">
 
125
  }
126
  h1 {
127
  color: #333;
128
+ text-align: center; /* Center the header */
129
+ }
130
+ .container {
131
+ display: flex;
132
+ flex-wrap: wrap;
133
+ justify-content: space-around; /* Distribute items evenly */
134
+ }
135
+ .column {
136
+ width: 30%; /* Adjust for three columns with some spacing */
137
+ margin-bottom: 20px;
138
  }
139
  .product {
140
  background-color: #fff;
 
142
  padding: 15px;
143
  margin-bottom: 10px;
144
  border-radius: 5px;
145
+ text-align: center; /* Center product content */
146
  }
147
  .product h2 {
148
  margin-top: 0;
 
152
  color: #777;
153
  }
154
  .product img {
155
+ max-width: 100%; /* Make images responsive */
156
+ height: auto;
157
  border: 1px solid #ccc;
158
  border-radius: 4px;
159
+ margin-bottom: 10px;
160
+ }
161
+ /* Pagination styles */
162
+ .pagination {
163
+ text-align: center;
164
+ margin-top: 20px;
165
+ }
166
+ .pagination a {
167
+ display: inline-block;
168
+ padding: 8px 16px;
169
+ text-decoration: none;
170
+ border: 1px solid #ddd;
171
+ color: #333;
172
+ background-color: white;
173
+ }
174
+ .pagination a.active {
175
+ background-color: #4CAF50;
176
+ color: white;
177
+ border: 1px solid #4CAF50;
178
+ }
179
+ .pagination a:hover:not(.active) {
180
+ background-color: #ddd;
181
  }
182
  </style>
183
  </head>
184
  <body>
185
  <h1>Каталог товаров</h1>
186
+ <div class="container">
187
+ {% for product in paginated_products %}
188
+ {% if loop.index0 % 10 == 0 and loop.index0 != 0 %}
189
+ </div><div class="column"> <!-- Start a new column every 10 products -->
190
+ {% elif loop.index0 % 30 == 0 %}
191
+ <div class="column"> <!-- Start the first column -->
192
+ {% endif %}
193
+ <div class="product">
194
+ <h2>{{ product['name'] }}</h2>
195
+ <img src="https://huggingface.co/datasets/{{ repo_id }}/resolve/main/photos/{{ product['photo'] }}" alt="{{ product['name'] }}">
196
+ <p><strong>Цена:</strong> {{ product['price'] }} руб.</p>
197
+ <p><strong>Описание:</strong> {{ product['description'] }}</p>
198
+ </div>
199
+ {% if loop.index0 % 10 == 9 or loop.last %}
200
+ </div> <!-- Close the column -->
201
+ {% endif %}
202
+ {% endfor %}
203
+ </div>
204
+ <!-- Pagination links -->
205
+ <div class="pagination">
206
+ {% if page > 1 %}
207
+ <a href="{{ url_for('catalog', page=page-1) }}">Назад</a>
208
+ {% endif %}
209
+
210
+ {% for page_num in range(1, total_pages + 1) %}
211
+ {% if page_num == page %}
212
+ <a class="active" href="{{ url_for('catalog', page=page_num) }}">{{ page_num }}</a>
213
+ {% else %}
214
+ <a href="{{ url_for('catalog', page=page_num) }}">{{ page_num }}</a>
215
+ {% endif %}
216
+ {% endfor %}
217
+
218
+ {% if page < total_pages %}
219
+ <a href="{{ url_for('catalog', page=page+1) }}">Вперед</a>
220
  {% endif %}
221
  </div>
 
222
  </body>
223
  </html>
224
  '''
225
+ return render_template_string(catalog_html, products=paginated_products, repo_id=REPO_ID, page=page, total_pages=total_pages)
226
 
227
  @app.route('/admin', methods=['GET', 'POST'])
228
  def admin():