Hugging Face's logo

Spaces:
flpolprojects
/
Shop
Paused

App Files Community
flpolprojects commited on
Commit
4bb13f3
·
verified ·
1 Parent(s): 39a5053

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +86 -60
app.py CHANGED
@@ -102,11 +102,19 @@ def catalog():
102
  <head>
103
  <meta charset="UTF-8">
104
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
105
- <title>Routine wholesale - Женская одежда</title>
106
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
107
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
108
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
109
  <style>
 
 
 
 
 
 
 
 
110
  * {
111
  margin: 0;
112
  padding: 0;
@@ -114,9 +122,10 @@ def catalog():
114
  }
115
  body {
116
  font-family: 'Poppins', sans-serif;
117
- background: linear-gradient(135deg, #fce4ec, #f8bbd0);
118
- color: #880e4f;
119
  line-height: 1.6;
 
120
  }
121
  .container {
122
  max-width: 1300px;
@@ -128,14 +137,14 @@ def catalog():
128
  justify-content: space-between;
129
  align-items: center;
130
  padding: 15px 0;
131
- border-bottom: 1px solid #f48fb1;
132
  }
133
  .header-logo {
134
  width: 60px;
135
  height: 60px;
136
  border-radius: 50%;
137
  object-fit: cover;
138
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
139
  transition: transform 0.3s ease, box-shadow 0.3s ease;
140
  }
141
  .header-logo:hover {
@@ -146,6 +155,7 @@ def catalog():
146
  font-size: 1.5rem;
147
  font-weight: 600;
148
  margin-left: 15px;
 
149
  }
150
  .filters-container {
151
  margin: 20px 0;
@@ -163,32 +173,32 @@ def catalog():
163
  max-width: 600px;
164
  padding: 12px 18px;
165
  font-size: 1rem;
166
- border: 1px solid #f48fb1;
167
  border-radius: 8px;
168
  outline: none;
169
- box-shadow: 0 2px 5px rgba(0,0,0,0.05);
170
  transition: all 0.3s ease;
171
  }
172
  #search-input:focus {
173
- border-color: #e91e63;
174
- box-shadow: 0 4px 15px rgba(233, 30, 99, 0.2);
175
  }
176
  .category-filter {
177
  padding: 8px 16px;
178
- border: 1px solid #f48fb1;
179
  border-radius: 8px;
180
- background-color: #fff;
181
- color: #880e4f;
182
  cursor: pointer;
183
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
184
  font-size: 0.9rem;
185
  font-weight: 400;
186
  }
187
  .category-filter.active, .category-filter:hover {
188
- background-color: #e91e63;
189
- color: white;
190
- border-color: #e91e63;
191
- box-shadow: 0 2px 10px rgba(233, 30, 99, 0.3);
192
  }
193
  .products-grid {
194
  display: grid;
@@ -197,10 +207,10 @@ def catalog():
197
  padding: 10px;
198
  }
199
  .product {
200
- background: #fff;
201
  border-radius: 15px;
202
  padding: 15px;
203
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
204
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
205
  overflow: hidden;
206
  }
@@ -238,14 +248,14 @@ def catalog():
238
  }
239
  .product-price {
240
  font-size: 1.1rem;
241
- color: #e91e63;
242
  font-weight: 700;
243
  text-align: center;
244
  margin: 5px 0;
245
  }
246
  .product-description {
247
  font-size: 0.8rem;
248
- color: #880e4f;
249
  text-align: center;
250
  margin-bottom: 15px;
251
  overflow: hidden;
@@ -258,8 +268,8 @@ def catalog():
258
  padding: 8px;
259
  border: none;
260
  border-radius: 8px;
261
- background-color: #e91e63;
262
- color: white;
263
  font-size: 0.8rem;
264
  font-weight: 500;
265
  cursor: pointer;
@@ -269,23 +279,23 @@ def catalog():
269
  text-decoration: none;
270
  }
271
  .product-button:hover {
272
- background-color: #d81b60;
273
  box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);
274
  transform: translateY(-2px);
275
  }
276
  .add-to-cart {
277
- background-color: #4caf50;
278
  }
279
  .add-to-cart:hover {
280
- background-color: #43a047;
281
- box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
282
  }
283
  #cart-button {
284
  position: fixed;
285
  bottom: 20px;
286
  right: 20px;
287
- background-color: #e91e63;
288
- color: white;
289
  border: none;
290
  border-radius: 50%;
291
  width: 50px;
@@ -293,7 +303,7 @@ def catalog():
293
  font-size: 1.2rem;
294
  cursor: pointer;
295
  display: none;
296
- box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);
297
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
298
  z-index: 1000;
299
  }
@@ -309,7 +319,7 @@ def catalog():
309
  backdrop-filter: blur(5px);
310
  }
311
  .modal-content {
312
- background: #fff;
313
  margin: 5% auto;
314
  padding: 20px;
315
  border-radius: 15px;
@@ -325,42 +335,49 @@ def catalog():
325
  .close {
326
  float: right;
327
  font-size: 1.5rem;
328
- color: #880e4f;
329
  cursor: pointer;
330
  transition: color 0.3s;
331
  }
332
  .close:hover {
333
- color: #e91e63;
334
  }
335
  .cart-item {
336
  display: flex;
337
  justify-content: space-between;
338
  align-items: center;
339
  padding: 15px 0;
340
- border-bottom: 1px solid #f48fb1;
 
 
 
 
 
 
 
341
  }
342
  .quantity-input, .color-select {
343
  width: 100%;
344
  max-width: 150px;
345
  padding: 8px;
346
- border: 1px solid #f48fb1;
347
  border-radius: 8px;
348
  font-size: 1rem;
349
  margin: 5px 0;
350
  }
351
  .clear-cart {
352
- background-color: #e91e63;
353
  }
354
  .clear-cart:hover {
355
- background-color: #d81b60;
356
- box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);
357
  }
358
  .order-button {
359
- background-color: #4caf50;
360
  }
361
  .order-button:hover {
362
- background-color: #43a047;
363
- box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
364
  }
365
  @media (max-width: 768px) {
366
  .products-grid {
@@ -786,10 +803,18 @@ def admin():
786
  <title>Админ-панель</title>
787
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
788
  <style>
 
 
 
 
 
 
 
 
789
  body {
790
  font-family: 'Poppins', sans-serif;
791
- background: linear-gradient(135deg, #fce4ec, #f8bbd0);
792
- color: #880e4f;
793
  padding: 20px;
794
  }
795
  .container {
@@ -800,14 +825,14 @@ def admin():
800
  display: flex;
801
  align-items: center;
802
  padding: 15px 0;
803
- border-bottom: 1px solid #f48fb1;
804
  }
805
  .header-logo {
806
  width: 60px;
807
  height: 60px;
808
  border-radius: 50%;
809
  object-fit: cover;
810
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
811
  transition: transform 0.3s ease, box-shadow 0.3s ease;
812
  margin-right: 15px;
813
  }
@@ -818,12 +843,13 @@ def admin():
818
  h1, h2 {
819
  font-weight: 600;
820
  margin-bottom: 20px;
 
821
  }
822
  form {
823
- background: #fff;
824
  padding: 20px;
825
  border-radius: 15px;
826
- box-shadow: 0 4px 15px rgba(0,0,0,0.1);
827
  margin-bottom: 30px;
828
  }
829
  label {
@@ -835,53 +861,53 @@ def admin():
835
  width: 100%;
836
  padding: 12px;
837
  margin-top: 5px;
838
- border: 1px solid #f48fb1;
839
  border-radius: 8px;
840
  font-size: 1rem;
841
  transition: all 0.3s ease;
842
  }
843
  input:focus, textarea:focus, select:focus {
844
- border-color: #e91e63;
845
- box-shadow: 0 0 5px rgba(233, 30, 99, 0.3);
846
  outline: none;
847
  }
848
  button {
849
  padding: 12px 20px;
850
  border: none;
851
  border-radius: 8px;
852
- background-color: #e91e63;
853
- color: white;
854
  font-weight: 500;
855
  cursor: pointer;
856
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
857
  margin-top: 15px;
858
  }
859
  button:hover {
860
- background-color: #d81b60;
861
  box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);
862
  transform: translateY(-2px);
863
  }
864
  .delete-button {
865
- background-color: #ef5350;
866
  }
867
  .delete-button:hover {
868
- background-color: #e53935;
869
- box-shadow: 0 4px 15px rgba(229, 57, 53, 0.4);
870
  }
871
  .product-list, .category-list {
872
  display: grid;
873
  gap: 20px;
874
  }
875
  .product-item, .category-item {
876
- background: #fff;
877
  padding: 20px;
878
  border-radius: 15px;
879
- box-shadow: 0 4px 15px rgba(0,0,0,0.1);
880
  }
881
  .edit-form {
882
  margin-top: 15px;
883
  padding: 15px;
884
- background: #fce4ec;
885
  border-radius: 10px;
886
  }
887
  .color-input-group {
@@ -890,10 +916,10 @@ def admin():
890
  margin-top: 5px;
891
  }
892
  .add-color-btn {
893
- background-color: #4caf50;
894
  }
895
  .add-color-btn:hover {
896
- background-color: #43a047;
897
  }
898
  </style>
899
  </head>
 
102
  <head>
103
  <meta charset="UTF-8">
104
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
105
+ <title>Asdem - нижнее белье оптом </title>
106
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
107
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
108
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css">
109
  <style>
110
+ :root {
111
+ --primary-color: #F48FB1;
112
+ --secondary-color: #CE93D8;
113
+ --text-color: #333;
114
+ --bg-color: #FCE4EC;
115
+ --light-text: #fff;
116
+ --shadow-color: rgba(0, 0, 0, 0.1);
117
+ }
118
  * {
119
  margin: 0;
120
  padding: 0;
 
122
  }
123
  body {
124
  font-family: 'Poppins', sans-serif;
125
+ background-color: var(--bg-color);
126
+ color: var(--text-color);
127
  line-height: 1.6;
128
+ transition: background-color 0.3s, color 0.3s;
129
  }
130
  .container {
131
  max-width: 1300px;
 
137
  justify-content: space-between;
138
  align-items: center;
139
  padding: 15px 0;
140
+ border-bottom: 1px solid var(--primary-color);
141
  }
142
  .header-logo {
143
  width: 60px;
144
  height: 60px;
145
  border-radius: 50%;
146
  object-fit: cover;
147
+ box-shadow: 0 4px 15px var(--shadow-color);
148
  transition: transform 0.3s ease, box-shadow 0.3s ease;
149
  }
150
  .header-logo:hover {
 
155
  font-size: 1.5rem;
156
  font-weight: 600;
157
  margin-left: 15px;
158
+ color: var(--primary-color);
159
  }
160
  .filters-container {
161
  margin: 20px 0;
 
173
  max-width: 600px;
174
  padding: 12px 18px;
175
  font-size: 1rem;
176
+ border: 1px solid var(--secondary-color);
177
  border-radius: 8px;
178
  outline: none;
179
+ box-shadow: 0 2px 5px var(--shadow-color);
180
  transition: all 0.3s ease;
181
  }
182
  #search-input:focus {
183
+ border-color: var(--primary-color);
184
+ box-shadow: 0 4px 15px rgba(244, 143, 177, 0.3);
185
  }
186
  .category-filter {
187
  padding: 8px 16px;
188
+ border: 1px solid var(--secondary-color);
189
  border-radius: 8px;
190
+ background-color: var(--light-text);
191
+ color: var(--text-color);
192
  cursor: pointer;
193
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
194
  font-size: 0.9rem;
195
  font-weight: 400;
196
  }
197
  .category-filter.active, .category-filter:hover {
198
+ background-color: var(--primary-color);
199
+ color: var(--light-text);
200
+ border-color: var(--primary-color);
201
+ box-shadow: 0 2px 10px rgba(244, 143, 177, 0.4);
202
  }
203
  .products-grid {
204
  display: grid;
 
207
  padding: 10px;
208
  }
209
  .product {
210
+ background: var(--light-text);
211
  border-radius: 15px;
212
  padding: 15px;
213
+ box-shadow: 0 4px 15px var(--shadow-color);
214
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
215
  overflow: hidden;
216
  }
 
248
  }
249
  .product-price {
250
  font-size: 1.1rem;
251
+ color: #ef4444;
252
  font-weight: 700;
253
  text-align: center;
254
  margin: 5px 0;
255
  }
256
  .product-description {
257
  font-size: 0.8rem;
258
+ color: #718096;
259
  text-align: center;
260
  margin-bottom: 15px;
261
  overflow: hidden;
 
268
  padding: 8px;
269
  border: none;
270
  border-radius: 8px;
271
+ background-color: var(--primary-color);
272
+ color: var(--light-text);
273
  font-size: 0.8rem;
274
  font-weight: 500;
275
  cursor: pointer;
 
279
  text-decoration: none;
280
  }
281
  .product-button:hover {
282
+ background-color: #E91E63;
283
  box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);
284
  transform: translateY(-2px);
285
  }
286
  .add-to-cart {
287
+ background-color: var(--secondary-color);
288
  }
289
  .add-to-cart:hover {
290
+ background-color: #BA68C8;
291
+ box-shadow: 0 4px 15px rgba(186, 104, 200, 0.4);
292
  }
293
  #cart-button {
294
  position: fixed;
295
  bottom: 20px;
296
  right: 20px;
297
+ background-color: #ef4444;
298
+ color: var(--light-text);
299
  border: none;
300
  border-radius: 50%;
301
  width: 50px;
 
303
  font-size: 1.2rem;
304
  cursor: pointer;
305
  display: none;
306
+ box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
307
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
308
  z-index: 1000;
309
  }
 
319
  backdrop-filter: blur(5px);
320
  }
321
  .modal-content {
322
+ background: var(--light-text);
323
  margin: 5% auto;
324
  padding: 20px;
325
  border-radius: 15px;
 
335
  .close {
336
  float: right;
337
  font-size: 1.5rem;
338
+ color: #718096;
339
  cursor: pointer;
340
  transition: color 0.3s;
341
  }
342
  .close:hover {
343
+ color: var(--primary-color);
344
  }
345
  .cart-item {
346
  display: flex;
347
  justify-content: space-between;
348
  align-items: center;
349
  padding: 15px 0;
350
+ border-bottom: 1px solid var(--secondary-color);
351
+ }
352
+ .cart-item img {
353
+ width: 50px;
354
+ height: 50px;
355
+ object-fit: contain;
356
+ border-radius: 8px;
357
+ margin-right: 15px;
358
  }
359
  .quantity-input, .color-select {
360
  width: 100%;
361
  max-width: 150px;
362
  padding: 8px;
363
+ border: 1px solid var(--secondary-color);
364
  border-radius: 8px;
365
  font-size: 1rem;
366
  margin: 5px 0;
367
  }
368
  .clear-cart {
369
+ background-color: #ef4444;
370
  }
371
  .clear-cart:hover {
372
+ background-color: #dc2626;
373
+ box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
374
  }
375
  .order-button {
376
+ background-color: var(--secondary-color);
377
  }
378
  .order-button:hover {
379
+ background-color: #BA68C8;
380
+ box-shadow: 0 4px 15px rgba(186, 104, 200, 0.4);
381
  }
382
  @media (max-width: 768px) {
383
  .products-grid {
 
803
  <title>Админ-панель</title>
804
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
805
  <style>
806
+ :root {
807
+ --primary-color: #F48FB1;
808
+ --secondary-color: #CE93D8;
809
+ --text-color: #333;
810
+ --bg-color: #FCE4EC;
811
+ --light-text: #fff;
812
+ --shadow-color: rgba(0, 0, 0, 0.1);
813
+ }
814
  body {
815
  font-family: 'Poppins', sans-serif;
816
+ background: var(--bg-color);
817
+ color: var(--text-color);
818
  padding: 20px;
819
  }
820
  .container {
 
825
  display: flex;
826
  align-items: center;
827
  padding: 15px 0;
828
+ border-bottom: 1px solid var(--primary-color);
829
  }
830
  .header-logo {
831
  width: 60px;
832
  height: 60px;
833
  border-radius: 50%;
834
  object-fit: cover;
835
+ box-shadow: 0 4px 15px var(--shadow-color);
836
  transition: transform 0.3s ease, box-shadow 0.3s ease;
837
  margin-right: 15px;
838
  }
 
843
  h1, h2 {
844
  font-weight: 600;
845
  margin-bottom: 20px;
846
+ color: var(--primary-color);
847
  }
848
  form {
849
+ background: var(--light-text);
850
  padding: 20px;
851
  border-radius: 15px;
852
+ box-shadow: 0 4px 15px var(--shadow-color);
853
  margin-bottom: 30px;
854
  }
855
  label {
 
861
  width: 100%;
862
  padding: 12px;
863
  margin-top: 5px;
864
+ border: 1px solid var(--secondary-color);
865
  border-radius: 8px;
866
  font-size: 1rem;
867
  transition: all 0.3s ease;
868
  }
869
  input:focus, textarea:focus, select:focus {
870
+ border-color: var(--primary-color);
871
+ box-shadow: 0 0 5px rgba(244, 143, 177, 0.3);
872
  outline: none;
873
  }
874
  button {
875
  padding: 12px 20px;
876
  border: none;
877
  border-radius: 8px;
878
+ background-color: var(--primary-color);
879
+ color: var(--light-text);
880
  font-weight: 500;
881
  cursor: pointer;
882
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
883
  margin-top: 15px;
884
  }
885
  button:hover {
886
+ background-color: #E91E63;
887
  box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);
888
  transform: translateY(-2px);
889
  }
890
  .delete-button {
891
+ background-color: #ef4444;
892
  }
893
  .delete-button:hover {
894
+ background-color: #dc2626;
895
+ box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
896
  }
897
  .product-list, .category-list {
898
  display: grid;
899
  gap: 20px;
900
  }
901
  .product-item, .category-item {
902
+ background: var(--light-text);
903
  padding: 20px;
904
  border-radius: 15px;
905
+ box-shadow: 0 4px 15px var(--shadow-color);
906
  }
907
  .edit-form {
908
  margin-top: 15px;
909
  padding: 15px;
910
+ background: #f7fafc;
911
  border-radius: 10px;
912
  }
913
  .color-input-group {
 
916
  margin-top: 5px;
917
  }
918
  .add-color-btn {
919
+ background-color: var(--secondary-color);
920
  }
921
  .add-color-btn:hover {
922
+ background-color: #BA68C8;
923
  }
924
  </style>
925
  </head>