Hugging Face's logo

Spaces:
HuggyGuyJo01
/
friptedo
Running

App Files Community
HuggyGuyJo01 commited on
Commit
f758ea3
·
verified ·
1 Parent(s): 5d3f4da

Upload Ak63AdewEeJFlWq1A (1).html

Browse files
Files changed (1) hide show
  1. Ak63AdewEeJFlWq1A (1).html +2589 -0
Ak63AdewEeJFlWq1A (1).html ADDED
@@ -0,0 +1,2589 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <html><head><base href=".">
2
+ <meta charset="UTF-8">
3
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4
+ <style>
5
+ :root {
6
+ --primary: #03055B;
7
+ --secondary: #e74c3c;
8
+ --light: #ecf0f1;
9
+ --dark: #2c3e50;
10
+ }
11
+
12
+ * {
13
+ margin: 0;
14
+ padding: 0;
15
+ box-sizing: border-box;
16
+ font-family: 'Poppins', sans-serif;
17
+ }
18
+
19
+ body {
20
+ background: var(--light);
21
+ }
22
+
23
+ .header {
24
+ background: var(--primary);
25
+ padding: 1rem;
26
+ color: white;
27
+ display: flex;
28
+ justify-content: space-between;
29
+ align-items: center;
30
+ }
31
+
32
+ .auth-buttons {
33
+ position: relative;
34
+ }
35
+
36
+ .auth-menu-button {
37
+ display: flex;
38
+ align-items: center;
39
+ gap: 0.5rem;
40
+ background: var(--secondary);
41
+ color: white;
42
+ border: none;
43
+ padding: 0.5rem 1rem;
44
+ border-radius: 4px;
45
+ cursor: pointer;
46
+ }
47
+
48
+ .auth-dropdown {
49
+ position: absolute;
50
+ top: 100%;
51
+ right: 0;
52
+ background: white;
53
+ border-radius: 4px;
54
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
55
+ display: none;
56
+ z-index: 1000;
57
+ }
58
+
59
+ .auth-dropdown.show {
60
+ display: block;
61
+ }
62
+
63
+ .auth-dropdown button {
64
+ display: block;
65
+ width: 100%;
66
+ padding: 0.75rem 1.5rem;
67
+ border: none;
68
+ background: none;
69
+ cursor: pointer;
70
+ text-align: left;
71
+ color: var(--dark);
72
+ }
73
+
74
+ .auth-dropdown button:hover {
75
+ background: var(--light);
76
+ }
77
+
78
+ .main-content {
79
+ padding: 2rem;
80
+ max-width: 1200px;
81
+ margin: 0 auto;
82
+ }
83
+
84
+ .dashboard {
85
+ display: none;
86
+ }
87
+
88
+ .dashboard-grid {
89
+ display: grid;
90
+ grid-template-columns: 250px 1fr;
91
+ gap: 2rem;
92
+ }
93
+
94
+ .dashboard-menu {
95
+ background: white;
96
+ padding: 1rem;
97
+ border-radius: 8px;
98
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
99
+ }
100
+
101
+ .dashboard-menu ul {
102
+ list-style: none;
103
+ }
104
+
105
+ .dashboard-menu li {
106
+ padding: 0.5rem;
107
+ cursor: pointer;
108
+ transition: 0.3s;
109
+ margin-bottom: 0.5rem;
110
+ }
111
+
112
+ .dashboard-menu li:hover {
113
+ background: var(--light);
114
+ }
115
+
116
+ .dashboard-content {
117
+ background: white;
118
+ padding: 2rem;
119
+ border-radius: 8px;
120
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
121
+ }
122
+
123
+ .form-group {
124
+ margin-bottom: 1rem;
125
+ }
126
+
127
+ .form-group label {
128
+ display: block;
129
+ margin-bottom: 0.5rem;
130
+ }
131
+
132
+ .form-group input,
133
+ .form-group textarea,
134
+ .form-group select {
135
+ width: 100%;
136
+ padding: 0.5rem;
137
+ border: 1px solid #ddd;
138
+ border-radius: 4px;
139
+ }
140
+
141
+ .form-group label::after {
142
+ content: " *";
143
+ color: red;
144
+ display: none;
145
+ }
146
+
147
+ .form-group label[for="productCategory"]::after,
148
+ .form-group label[for="productGender"]::after {
149
+ display: inline;
150
+ }
151
+
152
+ .form-group button.action-button {
153
+ margin-top: 1rem;
154
+ background: var(--primary);
155
+ color: white;
156
+ border: none;
157
+ padding: 0.8rem 1.5rem;
158
+ border-radius: 4px;
159
+ cursor: pointer;
160
+ display: inline-flex;
161
+ align-items: center;
162
+ gap: 0.8rem;
163
+ margin: 0;
164
+ font-size: 1.1rem;
165
+ min-width: 120px;
166
+ height: 48px;
167
+ margin-top: 16px;
168
+ }
169
+
170
+ .form-group button.action-button:hover {
171
+ opacity: 0.9;
172
+ transform: scale(1.02);
173
+ transition: all 0.2s ease;
174
+ }
175
+
176
+ .form-group button.action-button i {
177
+ font-size: 1.2rem;
178
+ }
179
+
180
+ .photo-upload-grid {
181
+ display: grid;
182
+ grid-template-columns: repeat(4, 1fr);
183
+ gap: 1rem;
184
+ margin: 1rem 0;
185
+ }
186
+
187
+ .photo-upload-box {
188
+ display: none; /* Add CSS to hide photo boxes by default */
189
+ aspect-ratio: 1;
190
+ border: 2px dashed #ddd;
191
+ align-items: center;
192
+ justify-content: center;
193
+ cursor: pointer;
194
+ }
195
+
196
+ .client-interface {
197
+ display: block;
198
+ }
199
+
200
+ .search-section {
201
+ margin-bottom: 2rem;
202
+ }
203
+
204
+ div.search-section > div {
205
+ display: flex;
206
+ flex-direction: column;
207
+ gap: 1rem;
208
+ margin-bottom: 1rem;
209
+ }
210
+
211
+ div.search-section > div > div {
212
+ display: flex;
213
+ flex: 1;
214
+ position: relative;
215
+ align-items: center;
216
+ }
217
+
218
+ .search-bar {
219
+ width: 100%;
220
+ padding: 1rem;
221
+ border: 2px solid var(--primary);
222
+ border-radius: 8px;
223
+ margin-bottom: 0.5rem;
224
+ height: 56px;
225
+ }
226
+
227
+ .search-buttons {
228
+ display: flex;
229
+ gap: 1rem;
230
+ justify-content: flex-end;
231
+ margin-top: 0.2rem;
232
+ position: relative;
233
+ }
234
+
235
+ .search-button {
236
+ position: static;
237
+ transform: none;
238
+ background: var(--primary);
239
+ border: none;
240
+ color: white;
241
+ cursor: pointer;
242
+ padding: 8px;
243
+ border-radius: 4px;
244
+ width: auto;
245
+ min-width: 42px;
246
+ height: 42px;
247
+ display: flex;
248
+ align-items: center;
249
+ justify-content: center;
250
+ gap: 8px;
251
+ font-size: 16px;
252
+ transition: all 0.3s ease;
253
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
254
+ }
255
+
256
+ .search-button:hover {
257
+ opacity: 0.8;
258
+ background: var(--secondary);
259
+ transform: none;
260
+ box-shadow: 0 3px 6px rgba(0,0,0,0.15);
261
+ }
262
+
263
+ .search-button:active {
264
+ transform: none;
265
+ }
266
+
267
+ .search-button i {
268
+ font-size: 18px;
269
+ }
270
+
271
+ .search-button i.loading {
272
+ animation: spin 1s linear infinite;
273
+ opacity: 0.8;
274
+ }
275
+
276
+ .filters {
277
+ display: flex;
278
+ gap: 1rem;
279
+ flex-wrap: wrap;
280
+ }
281
+
282
+ .filter-item {
283
+ padding: 0.5rem 1rem;
284
+ background: white;
285
+ border-radius: 20px;
286
+ cursor: pointer;
287
+ }
288
+
289
+ .filter-item.active {
290
+ background: var(--primary);
291
+ color: white;
292
+ }
293
+
294
+ .products-grid {
295
+ display: grid;
296
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
297
+ gap: 2rem;
298
+ }
299
+
300
+ .product-card {
301
+ background: white;
302
+ border-radius: 8px;
303
+ overflow: hidden;
304
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
305
+ }
306
+
307
+ .product-image {
308
+ height: 200px;
309
+ background: #ddd;
310
+ display: flex;
311
+ align-items: center;
312
+ justify-content: center;
313
+ }
314
+
315
+ .product-image img {
316
+ width: 100%;
317
+ height: 100%;
318
+ object-fit: cover;
319
+ }
320
+
321
+ .product-info {
322
+ padding: 1rem;
323
+ }
324
+
325
+ .share-buttons {
326
+ display: flex;
327
+ gap: 0.5rem;
328
+ margin-top: 1rem;
329
+ }
330
+
331
+ .share-button {
332
+ padding: 0.5rem;
333
+ border: none;
334
+ border-radius: 4px;
335
+ cursor: pointer;
336
+ background: var(--primary);
337
+ color: white;
338
+ }
339
+
340
+ .cart {
341
+ position: fixed;
342
+ right: 2rem;
343
+ bottom: 50px;
344
+ background: #FF8C00;
345
+ color: white;
346
+ padding: 1rem;
347
+ border-radius: 50%;
348
+ cursor: pointer;
349
+ box-shadow: 0 2px 8px rgba(0,0,0,0.2);
350
+ transition: transform 0.2s;
351
+ }
352
+
353
+ .cart:hover {
354
+ transform: scale(1.1);
355
+ cursor: pointer;
356
+ }
357
+
358
+ .cart-modal {
359
+ display: none;
360
+ position: fixed;
361
+ top: 0;
362
+ left: 0;
363
+ width: 100%;
364
+ height: 100%;
365
+ background: rgba(0, 0, 0, 0.5);
366
+ z-index: 1000;
367
+ }
368
+
369
+ .cart-content {
370
+ position: fixed;
371
+ right: 0;
372
+ top: 0;
373
+ height: 100%;
374
+ width: 400px;
375
+ background: white;
376
+ padding: 2rem;
377
+ box-shadow: -2px 0 8px rgba(0,0,0,0.1);
378
+ }
379
+
380
+ .cart-header {
381
+ display: flex;
382
+ justify-content: space-between;
383
+ align-items: center;
384
+ margin-bottom: 2rem;
385
+ }
386
+
387
+ .close-cart {
388
+ background: none;
389
+ border: none;
390
+ font-size: 2rem;
391
+ cursor: pointer;
392
+ color: var(--dark);
393
+ }
394
+
395
+ .cart-items {
396
+ max-height: calc(100vh - 200px);
397
+ overflow-y: auto;
398
+ }
399
+
400
+ .cart-footer {
401
+ position: absolute;
402
+ bottom: 2rem;
403
+ left: 2rem;
404
+ right: 2rem;
405
+ }
406
+
407
+ .cart-total {
408
+ font-size: 1.2rem;
409
+ font-weight: bold;
410
+ margin-bottom: 1rem;
411
+ }
412
+
413
+ .checkout-button {
414
+ width: 100%;
415
+ padding: 1rem;
416
+ background: var(--primary);
417
+ color: white;
418
+ border: none;
419
+ border-radius: 4px;
420
+ cursor: pointer;
421
+ }
422
+
423
+ .cart-item {
424
+ display: grid;
425
+ grid-template-columns: 100px 1fr auto;
426
+ gap: 1rem;
427
+ padding: 1rem;
428
+ border-bottom: 1px solid #eee;
429
+ align-items: start;
430
+ }
431
+
432
+ .cart-item-image {
433
+ width: 100px;
434
+ height: 100px;
435
+ object-fit: cover;
436
+ border-radius: 4px;
437
+ }
438
+
439
+ .cart-item-info {
440
+ flex-grow: 1;
441
+ }
442
+
443
+ .cart-item-info h3 {
444
+ margin-bottom: 0.5rem;
445
+ }
446
+
447
+ .cart-item-info .description {
448
+ font-size: 0.9rem;
449
+ color: #666;
450
+ margin-bottom: 0.5rem;
451
+ }
452
+
453
+ .cart-item-info .details {
454
+ font-size: 0.8rem;
455
+ color: #888;
456
+ }
457
+
458
+ .advanced-filters {
459
+ background: white;
460
+ padding: 1rem;
461
+ border-radius: 8px;
462
+ margin: 1rem 0;
463
+ display: grid;
464
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
465
+ gap: 1rem;
466
+ position: relative;
467
+ }
468
+
469
+ .filter-group {
470
+ display: flex;
471
+ flex-direction: column;
472
+ gap: 0.5rem;
473
+ min-width: 0;
474
+ }
475
+
476
+ .apply-filters {
477
+ display: none;
478
+ }
479
+
480
+ .price-range {
481
+ display: flex;
482
+ align-items: center;
483
+ gap: 0.5rem;
484
+ }
485
+
486
+ .price-range input {
487
+ width: 100px;
488
+ }
489
+
490
+ .date-range {
491
+ display: flex;
492
+ align-items: center;
493
+ gap: 0.5rem;
494
+ }
495
+
496
+ .date-range input {
497
+ flex: 1;
498
+ padding: 0.5rem;
499
+ border: 1px solid #ddd;
500
+ border-radius: 4px;
501
+ }
502
+
503
+ @keyframes fadeOut {
504
+ 0% { opacity: 1; }
505
+ 70% { opacity: 1; }
506
+ 100% { opacity: 0; }
507
+ }
508
+
509
+ @keyframes spin {
510
+ 0% { transform: rotate(0deg); }
511
+ 100% { transform: rotate(360deg); }
512
+ }
513
+
514
+ .quantity-controls {
515
+ display: flex;
516
+ align-items: center;
517
+ gap: 0.5rem;
518
+ margin-top: 0.5rem;
519
+ }
520
+
521
+ .quantity-controls button {
522
+ background: var(--primary);
523
+ color: white;
524
+ border: none;
525
+ width: 24px;
526
+ height: 24px;
527
+ border-radius: 4px;
528
+ cursor: pointer;
529
+ }
530
+
531
+ .quantity-controls span {
532
+ min-width: 24px;
533
+ text-align: center;
534
+ }
535
+
536
+ .toggle-filters-btn {
537
+ width: 100%;
538
+ padding: 0.75rem;
539
+ background: var(--primary);
540
+ color: white;
541
+ border: none;
542
+ border-radius: 4px;
543
+ cursor: pointer;
544
+ display: flex;
545
+ align-items: center;
546
+ justify-content: center;
547
+ gap: 0.5rem;
548
+ margin: 1rem 0;
549
+ }
550
+
551
+ .toggle-filters-btn i {
552
+ transition: transform 0.3s ease;
553
+ }
554
+
555
+ .advanced-filters {
556
+ max-height: 1000px;
557
+ opacity: 1;
558
+ transition: all 0.3s ease-in-out;
559
+ overflow: hidden;
560
+ }
561
+
562
+ .advanced-filters.collapsed {
563
+ max-height: 0;
564
+ opacity: 0;
565
+ padding: 0;
566
+ margin: 0;
567
+ }
568
+
569
+ .toggle-filters-btn.active i {
570
+ transform: rotate(180deg);
571
+ }
572
+
573
+ .filter-toggle-btn {
574
+ display: flex;
575
+ align-items: center;
576
+ gap: 0.5rem;
577
+ padding: 0.5rem 1rem;
578
+ background: var(--primary);
579
+ color: white;
580
+ border: none;
581
+ border-radius: 4px;
582
+ cursor: pointer;
583
+ margin-bottom: 1rem;
584
+ }
585
+
586
+ .filter-toggle-btn.active {
587
+ background: var(--secondary);
588
+ }
589
+
590
+ .filter-toggle-btn i {
591
+ transition: color 0.3s ease;
592
+ }
593
+
594
+ .file-input {
595
+ display: none;
596
+ }
597
+
598
+ .photo-upload-window {
599
+ position: fixed;
600
+ top: 50%;
601
+ left: 50%;
602
+ transform: translate(-50%, -50%);
603
+ background: white;
604
+ padding: 2rem;
605
+ border-radius: 8px;
606
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
607
+ z-index: 2000;
608
+ display: none;
609
+ width: 90%;
610
+ max-width: 400px; /* Reduced from 500px */
611
+ }
612
+
613
+ .photo-upload-window h3 {
614
+ margin-bottom: 1rem;
615
+ }
616
+
617
+ .photo-upload-preview {
618
+ width: 100%;
619
+ height: 200px;
620
+ border: 2px dashed #ddd;
621
+ align-items: center;
622
+ justify-content: center;
623
+ position: relative;
624
+ overflow: hidden;
625
+ }
626
+
627
+ .photo-upload-preview img {
628
+ max-width: 100%;
629
+ max-height: 100%;
630
+ object-fit: contain;
631
+ }
632
+
633
+ .photo-upload-window .buttons {
634
+ display: flex;
635
+ gap: 1rem;
636
+ justify-content: flex-end;
637
+ }
638
+
639
+ .photo-upload-window button {
640
+ padding: 0.5rem 1rem;
641
+ border: none;
642
+ border-radius: 4px;
643
+ cursor: pointer;
644
+ }
645
+
646
+ .photo-upload-window .upload-btn {
647
+ background: var(--primary);
648
+ color: white;
649
+ }
650
+
651
+ .photo-upload-window .cancel-btn {
652
+ background: #ddd;
653
+ }
654
+
655
+ .product-actions {
656
+ display: flex;
657
+ gap: 0.5rem;
658
+ margin-top: 0.5rem;
659
+ }
660
+
661
+ .product-actions button {
662
+ padding: 0.5rem;
663
+ border: none;
664
+ border-radius: 4px;
665
+ cursor: pointer;
666
+ color: white;
667
+ }
668
+
669
+ .edit-product {
670
+ background: var(--primary);
671
+ }
672
+
673
+ .delete-product {
674
+ background: var(--secondary);
675
+ }
676
+
677
+ .action-button {
678
+ background: var(--primary);
679
+ color: white;
680
+ border: none;
681
+ padding: 0.5rem 1rem;
682
+ border-radius: 4px;
683
+ cursor: pointer;
684
+ display: inline-flex;
685
+ align-items: center;
686
+ gap: 0.5rem;
687
+ margin: 0;
688
+ }
689
+
690
+ .action-button:hover {
691
+ opacity: 0.9;
692
+ }
693
+
694
+ .newProductSection {
695
+ background: white;
696
+ padding: 1rem;
697
+ border-radius: 8px;
698
+ margin-top: 1rem;
699
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
700
+ }
701
+
702
+ .buttons-container {
703
+ display: flex;
704
+ flex-wrap: wrap;
705
+ gap: 1rem;
706
+ margin-bottom: 1.5rem;
707
+ }
708
+
709
+ .category-item {
710
+ display: flex;
711
+ justify-content: space-between;
712
+ align-items: center;
713
+ padding: 0.5rem;
714
+ margin-bottom: 1rem;
715
+ }
716
+
717
+ .order-status-buttons {
718
+ display: flex;
719
+ gap: 1rem;
720
+ margin-top: 1rem;
721
+ }
722
+
723
+ .status-button {
724
+ padding: 0.5rem 1rem;
725
+ border: none;
726
+ border-radius: 4px;
727
+ cursor: pointer;
728
+ color: white;
729
+ }
730
+
731
+ .found-button {
732
+ background: #27ae60;
733
+ }
734
+
735
+ .not-found-button {
736
+ background: #c0392b;
737
+ }
738
+
739
+ .order-item[data-status="found"] {
740
+ border-left: 4px solid #27ae60;
741
+ }
742
+
743
+ .order-item[data-status="not-found"] {
744
+ border-left: 4px solid #c0392b;
745
+ }
746
+
747
+ .item-status-buttons {
748
+ display: flex;
749
+ gap: 0.5rem;
750
+ }
751
+
752
+ .status-button {
753
+ padding: 0.5rem 1rem;
754
+ border: none;
755
+ border-radius: 4px;
756
+ cursor: pointer;
757
+ transition: all 0.3s ease;
758
+ }
759
+
760
+ .status-button.active {
761
+ transform: scale(1.05);
762
+ }
763
+
764
+ .order-item-detail {
765
+ transition: border-left-color 0.3s ease;
766
+ }
767
+
768
+ .scrolling-banner {
769
+ position: fixed;
770
+ bottom: 0;
771
+ left: 0;
772
+ width: 100%;
773
+ background: var(--primary);
774
+ color: white;
775
+ overflow: hidden;
776
+ height: 40px;
777
+ z-index: 999;
778
+ }
779
+
780
+ .scrolling-text {
781
+ white-space: nowrap;
782
+ animation: scroll-left 20s linear infinite;
783
+ display: inline-block;
784
+ padding: 10px;
785
+ }
786
+
787
+ @keyframes scroll-left {
788
+ 0% {
789
+ transform: translateX(100%);
790
+ }
791
+ 100% {
792
+ transform: translateX(-100%);
793
+ }
794
+ }
795
+
796
+ .category-section {
797
+ margin-bottom: 2rem;
798
+ }
799
+
800
+ .category-title {
801
+ font-size: 1.5rem;
802
+ color: var(--primary);
803
+ margin-bottom: 1rem;
804
+ padding-bottom: 0.5rem;
805
+ border-bottom: 2px solid var(--primary);
806
+ }
807
+
808
+ .category-section .products-grid {
809
+ margin-top: 1rem;
810
+ }
811
+
812
+ .home-button {
813
+ position: fixed;
814
+ left: 20px;
815
+ bottom: 50px;
816
+ background: #FF8C00;
817
+ color: white;
818
+ width: 50px;
819
+ height: 50px;
820
+ border-radius: 50%;
821
+ border: none;
822
+ cursor: pointer;
823
+ display: flex;
824
+ align-items: center;
825
+ justify-content: center;
826
+ box-shadow: 0 2px 8px rgba(0,0,0,0.2);
827
+ z-index: 998;
828
+ font-size: 1.5em;
829
+ }
830
+
831
+ .home-button:hover {
832
+ transform: scale(1.1);
833
+ transition: all 0.2s;
834
+ }
835
+
836
+ @media (max-width: 768px) {
837
+ /* Header adjustments */
838
+ .header {
839
+ flex-direction: column;
840
+ gap: 1rem;
841
+ text-align: center;
842
+ padding: 1rem 0.5rem;
843
+ }
844
+
845
+ .header h1 {
846
+ font-size: 1.5rem;
847
+ }
848
+
849
+ /* Search section adjustments */
850
+ .search-section {
851
+ padding: 0 0.5rem;
852
+ }
853
+
854
+ .search-buttons {
855
+ justify-content: center;
856
+ }
857
+
858
+ /* Advanced filters adjustments */
859
+ .advanced-filters {
860
+ grid-template-columns: 1fr;
861
+ }
862
+
863
+ .price-range {
864
+ flex-direction: column;
865
+ align-items: stretch;
866
+ }
867
+
868
+ .price-range input {
869
+ width: 100%;
870
+ }
871
+
872
+ .date-range {
873
+ flex-direction: column;
874
+ align-items: stretch;
875
+ }
876
+
877
+ .date-range input {
878
+ width: 100%;
879
+ }
880
+
881
+ /* Products grid adjustments */
882
+ .products-grid {
883
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
884
+ gap: 1rem;
885
+ padding: 0.5rem;
886
+ }
887
+
888
+ /* Cart adjustments */
889
+ .cart-content {
890
+ width: 100%;
891
+ padding: 1rem;
892
+ }
893
+
894
+ .cart-item {
895
+ grid-template-columns: 80px 1fr auto;
896
+ gap: 0.5rem;
897
+ padding: 0.5rem;
898
+ }
899
+
900
+ .cart-item-image {
901
+ width: 80px;
902
+ height: 80px;
903
+ }
904
+
905
+ /* Dashboard adjustments */
906
+ .dashboard-grid {
907
+ grid-template-columns: 1fr;
908
+ }
909
+
910
+ .dashboard-menu {
911
+ margin-bottom: 1rem;
912
+ }
913
+
914
+ .dashboard-menu ul {
915
+ display: flex;
916
+ flex-wrap: wrap;
917
+ gap: 0.5rem;
918
+ }
919
+
920
+ .dashboard-menu li {
921
+ flex: 1;
922
+ text-align: center;
923
+ background: var(--primary);
924
+ color: white;
925
+ border-radius: 4px;
926
+ padding: 0.75rem;
927
+ }
928
+
929
+ /* Photo upload grid adjustments */
930
+ .photo-upload-grid {
931
+ grid-template-columns: repeat(2, 1fr);
932
+ }
933
+
934
+ /* Form adjustments */
935
+ .form-group input,
936
+ .form-group textarea,
937
+ .form-group select {
938
+ font-size: 16px; /* Prevents zoom on mobile */
939
+ }
940
+
941
+ /* Main content padding adjustment */
942
+ .main-content {
943
+ padding: 1rem;
944
+ }
945
+
946
+ /* Cart icon adjustment */
947
+ .cart {
948
+ right: 1rem;
949
+ bottom: 40px;
950
+ }
951
+
952
+ /* Auth dropdown adjustment */
953
+ .auth-dropdown {
954
+ right: 50%;
955
+ transform: translateX(50%);
956
+ width: 90%;
957
+ max-width: 300px;
958
+ }
959
+
960
+ /* Filter buttons adjustment */
961
+ .filters {
962
+ flex-direction: column;
963
+ }
964
+
965
+ .filter-toggle-btn,
966
+ .toggle-filters-btn {
967
+ width: 100%;
968
+ }
969
+
970
+ /* Scrolling banner adjustments */
971
+ .scrolling-banner {
972
+ height: 30px;
973
+ }
974
+
975
+ .scrolling-text {
976
+ font-size: 14px;
977
+ padding: 6px;
978
+ }
979
+
980
+ .cart {
981
+ bottom: 40px;
982
+ }
983
+
984
+ .home-button {
985
+ left: 16px;
986
+ bottom: 40px;
987
+ width: 40px;
988
+ height: 40px;
989
+ font-size: 1.2em;
990
+ }
991
+ }
992
+
993
+ @media (max-width: 380px) {
994
+ .products-grid {
995
+ grid-template-columns: 1fr;
996
+ }
997
+
998
+ .photo-upload-grid {
999
+ grid-template-columns: 1fr;
1000
+ }
1001
+
1002
+ .header h1 {
1003
+ font-size: 1.2rem;
1004
+ }
1005
+
1006
+ .cart-item {
1007
+ grid-template-columns: 1fr;
1008
+ text-align: center;
1009
+ }
1010
+
1011
+ .cart-item-image {
1012
+ margin: 0 auto;
1013
+ }
1014
+ }
1015
+
1016
+ @media (min-width: 769px) {
1017
+ .main-content,
1018
+ .header,
1019
+ .products-grid,
1020
+ .dashboard-grid,
1021
+ .cart-content,
1022
+ .form-group,
1023
+ .search-section,
1024
+ .filters,
1025
+ .advanced-filters {
1026
+ max-width: 1200px;
1027
+ margin: 0 auto;
1028
+ }
1029
+ }
1030
+
1031
+ .delete-order-btn {
1032
+ background: var(--secondary);
1033
+ color: white;
1034
+ border: none;
1035
+ padding: 0.5rem 1rem;
1036
+ border-radius: 4px;
1037
+ cursor: pointer;
1038
+ display: flex;
1039
+ align-items: center;
1040
+ gap: 0.5rem;
1041
+ margin-top: 1rem;
1042
+ }
1043
+
1044
+ .delete-order-btn:hover {
1045
+ opacity: 0.9;
1046
+ }
1047
+
1048
+ /* Updated styles for the order confirmation modal */
1049
+ #order-confirmation {
1050
+ display: none;
1051
+ position: fixed;
1052
+ top: 50%;
1053
+ left: 50%;
1054
+ transform: translate(-50%, -50%);
1055
+ background: white;
1056
+ padding: 2rem;
1057
+ border-radius: 8px;
1058
+ box-shadow: 0 2px 8px rgba(0,0,0,0.2);
1059
+ }
1060
+
1061
+ #order-confirmation button {
1062
+ margin-top: 1rem;
1063
+ padding: 0.8rem 2rem;
1064
+ font-size: 1.2rem;
1065
+ font-weight: 500;
1066
+ background: var(--primary);
1067
+ color: white;
1068
+ border: none;
1069
+ border-radius: 4px;
1070
+ cursor: pointer;
1071
+ min-width: 120px;
1072
+ transition: all 0.2s ease;
1073
+ }
1074
+
1075
+ #order-confirmation button:hover {
1076
+ opacity: 0.9;
1077
+ transform: scale(1.02);
1078
+ }
1079
+
1080
+ /* Add new styles for category dropdown */
1081
+ .category-dropdown {
1082
+ position: relative;
1083
+ width: 200px;
1084
+ margin-bottom: 1rem;
1085
+ }
1086
+
1087
+ .category-dropdown select {
1088
+ width: 100%;
1089
+ padding: 0.8rem;
1090
+ border: 1px solid var(--primary);
1091
+ border-radius: 4px;
1092
+ appearance: none;
1093
+ background: white;
1094
+ cursor: pointer;
1095
+ font-size: 1rem;
1096
+ }
1097
+
1098
+ .category-dropdown::after {
1099
+ content: '\f078';
1100
+ font-family: 'Font Awesome 5 Free';
1101
+ font-weight: 900;
1102
+ position: absolute;
1103
+ right: 10px;
1104
+ top: 50%;
1105
+ transform: translateY(-50%);
1106
+ pointer-events: none;
1107
+ }
1108
+
1109
+ /* Add persistence checkbox styles */
1110
+ .form-group .persistence-option {
1111
+ display: flex;
1112
+ align-items: center;
1113
+ gap: 0.5rem;
1114
+ margin-top: 0.25rem;
1115
+ font-size: 0.9em;
1116
+ color: #666;
1117
+ }
1118
+
1119
+ .form-group .persistence-option input[type="checkbox"] {
1120
+ width: auto;
1121
+ }
1122
+
1123
+ /* Add new styles */
1124
+ .photo-grid {
1125
+ display: grid;
1126
+ grid-template-columns: repeat(4, 1fr);
1127
+ gap: 0.5rem;
1128
+ margin-top: 1rem;
1129
+ }
1130
+
1131
+ .photo-grid img {
1132
+ width: 100%;
1133
+ height: 100%;
1134
+ object-fit: cover;
1135
+ cursor: pointer;
1136
+ }
1137
+
1138
+ .photo-modal {
1139
+ position: fixed;
1140
+ top: 0;
1141
+ left: 0;
1142
+ width: 100%;
1143
+ height: 100%;
1144
+ background: rgba(0, 0, 0, 0.8);
1145
+ display: none;
1146
+ justify-content: center;
1147
+ align-items: center;
1148
+ z-index: 2000;
1149
+ }
1150
+
1151
+ .photo-modal img {
1152
+ max-width: 90%;
1153
+ max-height: 90vh;
1154
+ object-fit: contain;
1155
+ }
1156
+
1157
+ .product-photos button {
1158
+ width: 100%;
1159
+ padding: 0.5rem;
1160
+ margin-top: 0.5rem;
1161
+ background: var(--primary);
1162
+ color: white;
1163
+ border: none;
1164
+ border-radius: 4px;
1165
+ cursor: pointer;
1166
+ }
1167
+
1168
+ .details-button {
1169
+ width: 100%;
1170
+ padding: 0.5rem;
1171
+ margin-top: 0.5rem;
1172
+ background: var(--primary);
1173
+ color: white;
1174
+ border: none;
1175
+ border-radius: 4px;
1176
+ cursor: pointer;
1177
+ }
1178
+
1179
+ .product-details {
1180
+ display: none;
1181
+ margin-top: 1rem;
1182
+ padding: 1rem;
1183
+ background: #f8f8f8;
1184
+ border-radius: 4px;
1185
+ }
1186
+
1187
+ .photo-upload-flex {
1188
+ display: flex;
1189
+ flex-wrap: wrap;
1190
+ gap: 0.5rem;
1191
+ margin-bottom: 1.5rem; /* Add margin bottom for spacing */
1192
+ }
1193
+
1194
+ .photo-upload-flex > button {
1195
+ flex: 1;
1196
+ min-width: 120px;
1197
+ padding: 0.5rem;
1198
+ background: var(--primary);
1199
+ color: white;
1200
+ border: none;
1201
+ border-radius: 4px;
1202
+ cursor: pointer;
1203
+ }
1204
+
1205
+ .toast-notification {
1206
+ position: fixed;
1207
+ bottom: 20px;
1208
+ left: 50%;
1209
+ transform: translateX(-50%);
1210
+ background: #FF8C00;
1211
+ color: white;
1212
+ padding: 1rem 2rem;
1213
+ border-radius: 4px;
1214
+ z-index: 1000;
1215
+ animation: fadeOut 2s forwards;
1216
+ }
1217
+ </style>
1218
+
1219
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&amp;display=swap" rel="stylesheet">
1220
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>
1221
+ <header class="header">
1222
+ <h1>FRIPTEDO.BF chez ROAMBA &amp; Fr&#xe8;res &#xe0; NAGRIN</h1>
1223
+ <div class="auth-buttons">
1224
+ <button onclick="toggleAuthMenu()" class="auth-menu-button">
1225
+ <i class="fas fa-user"></i>
1226
+ Interface
1227
+ <i class="fas fa-chevron-down"></i>
1228
+ </button>
1229
+ <div id="vendorLoginModal" class="modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:2000;">
1230
+ <div class="modal-content" style="position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:white; padding:2rem; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.15); max-width:400px; width:90%;">
1231
+ <h3>Acc&#xe8;s Interface Vendeur</h3>
1232
+ <div class="form-group" style="margin:1rem 0;">
1233
+ <input type="password" id="vendorCode" placeholder="Entrer le code d&apos;acc&#xe8;s" style="width:100%; padding:0.5rem; border:1px solid #ddd; border-radius:4px;">
1234
+ </div>
1235
+ <div style="display:flex; gap:1rem; justify-content:flex-end;">
1236
+ <button onclick="closeVendorLogin()" style="padding:0.5rem 1rem; border:none; border-radius:4px; cursor:pointer; background:#ddd;">Annuler</button>
1237
+ <button onclick="checkVendorCode()" style="padding:0.5rem 1rem; border:none; border-radius:4px; cursor:pointer; background:var(--primary); color:white;">Valider</button>
1238
+ </div>
1239
+ </div>
1240
+ </div>
1241
+ <div id="auth-dropdown" class="auth-dropdown">
1242
+ <button onclick="toggleInterface(&apos;client&apos;)">Client</button>
1243
+ <button onclick="showVendorLogin()">Vendeur</button>
1244
+ </div>
1245
+ </div>
1246
+ </header>
1247
+
1248
+ <div id="photoUploadWindow" class="photo-upload-window">
1249
+ <h3>Importer une photo</h3>
1250
+ <div id="photoPreview" class="photo-upload-preview">
1251
+ <i class="fas fa-cloud-upload-alt fa-2x"></i>
1252
+ </div>
1253
+ <input type="file" id="fileInput" class="file-input" accept="image/*">
1254
+ <div class="buttons">
1255
+ <button class="cancel-btn" onclick="closeUploadWindow()">Annuler</button>
1256
+ <button class="upload-btn" onclick="document.getElementById(&apos;fileInput&apos;).click()">Choisir une photo</button>
1257
+ </div>
1258
+ </div>
1259
+
1260
+ <!-- Add hidden file input with camera support -->
1261
+ <input type="file" id="productPhotoInput" accept="image/*" capture="environment" multiple style="display: none">
1262
+
1263
+ <main class="main-content">
1264
+ <button onclick="scrollToTop()" class="home-button">
1265
+ <i class="fas fa-home"></i>
1266
+ </button>
1267
+ <!-- Interface Client -->
1268
+ <div class="client-interface">
1269
+ <section class="search-section">
1270
+ <div>
1271
+ <div>
1272
+ <input type="text" class="search-bar" placeholder="Rechercher des articles...">
1273
+ <input type="file" id="imageSearchInput" accept="image/*" style="display: none">
1274
+ </div>
1275
+ <div class="search-buttons">
1276
+ <button onclick="performSearch()" class="search-button">
1277
+ <i class="fas fa-search"></i>
1278
+ </button>
1279
+ <button onclick="document.getElementById(&apos;imageSearchInput&apos;).click()" class="search-button">
1280
+ <i class="fas fa-camera"></i>
1281
+ <span style="font-size: 0.8em; white-space: nowrap;">Recherche &#xe0; partir d&apos;image</span>
1282
+ </button>
1283
+ </div>
1284
+ </div>
1285
+ <button class="toggle-filters-btn" onclick="toggleAdvancedFilters()">
1286
+ Filtres avanc&#xe9;s <i class="fas fa-chevron-down"></i>
1287
+ </button>
1288
+ <div class="advanced-filters collapsed" id="advancedFilters">
1289
+ <div class="filter-group">
1290
+ <label>Genre</label>
1291
+ <select id="gender-filter">
1292
+ <option value>Tous</option>
1293
+ <option value="homme">Homme</option>
1294
+ <option value="femme">Femme</option>
1295
+ <option value="unigenre">Unigenre</option>
1296
+ </select>
1297
+ </div>
1298
+
1299
+ <div class="filter-group">
1300
+ <label>Cat&#xe9;gorie</label>
1301
+ <select id="category-filter">
1302
+ <option value>Toutes</option>
1303
+ </select>
1304
+ </div>
1305
+
1306
+ <div class="filter-group">
1307
+ <label>Taille</label>
1308
+ <select id="size-filter">
1309
+ <option value>Toutes</option>
1310
+ <option value="xs">XS</option>
1311
+ <option value="s">S</option>
1312
+ <option value="m">M</option>
1313
+ <option value="l">L</option>
1314
+ <option value="xl">XL</option>
1315
+ <option value="xxl">XXL</option>
1316
+ </select>
1317
+ </div>
1318
+
1319
+ <div class="filter-group">
1320
+ <label>Prix</label>
1321
+ <div class="price-range">
1322
+ <input type="number" id="min-price" placeholder="Min FCFA">
1323
+ <span>-</span>
1324
+ <input type="number" id="max-price" placeholder="Max FCFA">
1325
+ </div>
1326
+ </div>
1327
+
1328
+ <div class="filter-group">
1329
+ <label>Date d&apos;arrivage</label>
1330
+ <div class="date-range">
1331
+ <input type="date" id="arrival-start" placeholder="Date d&apos;arrivage debut">
1332
+ <span>-</span>
1333
+ <input type="date" id="arrival-end" placeholder="Date d&apos;arrivage fin">
1334
+ </div>
1335
+ </div>
1336
+ </div>
1337
+ <div class="filters">
1338
+ <button class="filter-toggle-btn" onclick="toggleFilterMode()">
1339
+ <i class="fas fa-filter"></i>
1340
+ <span>Activer les filtres</span>
1341
+ </button>
1342
+ </div>
1343
+ </section>
1344
+
1345
+ <div id="search-results-count" style="margin: 1rem 0; font-size: 0.9rem; color: #666;"></div>
1346
+
1347
+ <section class="products-grid">
1348
+ <div class="product-card">
1349
+ <div class="product-image">
1350
+ <i class="fas fa-tshirt fa-3x"></i>
1351
+ </div>
1352
+ <div class="product-info">
1353
+ <h3>T-Shirt Vintage</h3>
1354
+ <p>25 FCFA</p>
1355
+ <div class="share-buttons">
1356
+ <button class="share-button" onclick="shareProduct(&apos;whatsapp&apos;, &apos;&apos;)">
1357
+ <i class="fab fa-whatsapp"></i>
1358
+ </button>
1359
+ <button class="share-button" onclick="shareProduct(&apos;facebook&apos;, &apos;&apos;)">
1360
+ <i class="fab fa-facebook"></i>
1361
+ </button>
1362
+ <button class="share-button" onclick="addToCart(&apos;&apos;)">
1363
+ <i class="fas fa-cart-plus"></i>
1364
+ </button>
1365
+ </div>
1366
+ </div>
1367
+ </div>
1368
+ </section>
1369
+ </div>
1370
+
1371
+ <!-- Interface Vendeur -->
1372
+ <div class="dashboard">
1373
+ <div class="dashboard-grid">
1374
+ <div class="dashboard-menu">
1375
+ <ul>
1376
+ <li onclick="showDashboardSection(&apos;categories&apos;)">G&#xe9;rer les cat&#xe9;gories</li>
1377
+ <li onclick="showDashboardSection(&apos;products&apos;)">G&#xe9;rer les articles</li>
1378
+ <li onclick="showDashboardSection(&apos;orders&apos;)">Commandes</li>
1379
+ <li onclick="checkStorageUsage()">Consulter l&apos;espace de stockage</li>
1380
+ </ul>
1381
+ </div>
1382
+ <div class="dashboard-content">
1383
+ <!-- Categories Section -->
1384
+ <div id="categories-section">
1385
+ <h2>G&#xe9;rer les cat&#xe9;gories</h2>
1386
+ <div class="form-group">
1387
+ <input type="text" id="newCategory" placeholder="Nouvelle cat&#xe9;gorie">
1388
+ <button onclick="addCategory()" class="action-button">Ajouter</button>
1389
+ </div>
1390
+ <div id="categoriesList">
1391
+ <!-- Categories will be added here -->
1392
+ </div>
1393
+ </div>
1394
+
1395
+ <!-- Products Section -->
1396
+ <div id="products-section" style="display: none;">
1397
+ <h2>G&#xe9;rer les articles</h2>
1398
+
1399
+ <div class="catalog-section">
1400
+ <div class="buttons-container">
1401
+ <button onclick="toggleNewProductForm()" class="action-button">
1402
+ <i class="fas fa-plus"></i> Nouvel article
1403
+ </button>
1404
+ </div>
1405
+ <h3>Catalogue par cat&#xe9;gories</h3>
1406
+ <div id="newProductSection" style="display: none;">
1407
+ <h3>Ajouter un nouvel article</h3>
1408
+ <form id="productForm">
1409
+ <div class="form-group">
1410
+ <label>Nom de l&apos;article</label>
1411
+ <input type="text" id="productName">
1412
+ <div class="persistence-option">
1413
+ <input type="checkbox" id="persistProductName">
1414
+ <label for="persistProductName">M&#xe9;moriser cette valeur</label>
1415
+ </div>
1416
+ </div>
1417
+ <div class="form-group">
1418
+ <label>Description</label>
1419
+ <textarea id="productDescription"></textarea>
1420
+ <div class="persistence-option">
1421
+ <input type="checkbox" id="persistDescription">
1422
+ <label for="persistDescription">M&#xe9;moriser cette valeur</label>
1423
+ </div>
1424
+ </div>
1425
+ <div class="form-group">
1426
+ <label>Prix</label>
1427
+ <input type="number" id="productPrice">
1428
+ <div class="persistence-option">
1429
+ <input type="checkbox" id="persistPrice">
1430
+ <label for="persistPrice">M&#xe9;moriser cette valeur</label>
1431
+ </div>
1432
+ </div>
1433
+ <div class="form-group">
1434
+ <label>Cat&#xe9;gorie *</label>
1435
+ <div class="category-dropdown">
1436
+ <select id="productCategory" required>
1437
+ <option value>S&#xe9;lectionner une cat&#xe9;gorie</option>
1438
+ </select>
1439
+ </div>
1440
+ <div class="persistence-option">
1441
+ <input type="checkbox" id="persistCategory">
1442
+ <label for="persistCategory">M&#xe9;moriser cette valeur</label>
1443
+ </div>
1444
+ </div>
1445
+ <div class="form-group">
1446
+ <label>Genre *</label>
1447
+ <select id="productGender" required>
1448
+ <option value>S&#xe9;lectionner un genre</option>
1449
+ <option value="homme">Homme</option>
1450
+ <option value="femme">Femme</option>
1451
+ <option value="unigenre">Unigenre</option>
1452
+ </select>
1453
+ <div class="persistence-option">
1454
+ <input type="checkbox" id="persistGender">
1455
+ <label for="persistGender">M&#xe9;moriser cette valeur</label>
1456
+ </div>
1457
+ </div>
1458
+ <div class="form-group">
1459
+ <label>Taille</label>
1460
+ <select id="productSize">
1461
+ <option value>S&#xe9;lectionner une taille</option>
1462
+ <option value="xs">XS</option>
1463
+ <option value="s">S</option>
1464
+ <option value="m">M</option>
1465
+ <option value="l">L</option>
1466
+ <option value="xl">XL</option>
1467
+ <option value="xxl">XXL</option>
1468
+ </select>
1469
+ <div class="persistence-option">
1470
+ <input type="checkbox" id="persistSize">
1471
+ <label for="persistSize">M&#xe9;moriser cette valeur</label>
1472
+ </div>
1473
+ </div>
1474
+
1475
+ <!-- New fields added as per the plan -->
1476
+ <div class="form-group">
1477
+ <label>Marque</label>
1478
+ <input type="text" id="productBrand">
1479
+ <div class="persistence-option">
1480
+ <input type="checkbox" id="persistBrand">
1481
+ <label for="persistBrand">M&#xe9;moriser cette valeur</label>
1482
+ </div>
1483
+ </div>
1484
+
1485
+ <div class="form-group">
1486
+ <label>Style</label>
1487
+ <input type="text" id="productStyle">
1488
+ <div class="persistence-option">
1489
+ <input type="checkbox" id="persistStyle">
1490
+ <label for="persistStyle">M&#xe9;moriser cette valeur</label>
1491
+ </div>
1492
+ </div>
1493
+
1494
+ <div class="form-group">
1495
+ <label>Mati&#xe8;re</label>
1496
+ <input type="text" id="productMaterial">
1497
+ <div class="persistence-option">
1498
+ <input type="checkbox" id="persistMaterial">
1499
+ <label for="persistMaterial">M&#xe9;moriser cette valeur</label>
1500
+ </div>
1501
+ </div>
1502
+
1503
+ <div class="form-group">
1504
+ <label>Emplacement de stockage</label>
1505
+ <input type="text" id="productLocation">
1506
+ <div class="persistence-option">
1507
+ <input type="checkbox" id="persistLocation">
1508
+ <label for="persistLocation">M&#xe9;moriser cette valeur</label>
1509
+ </div>
1510
+ </div>
1511
+
1512
+ <div class="form-group">
1513
+ <label>Couleur dominante</label>
1514
+ <input type="text" id="productColor">
1515
+ <div class="persistence-option">
1516
+ <input type="checkbox" id="persistColor">
1517
+ <label for="persistColor">M&#xe9;moriser cette valeur</label>
1518
+ </div>
1519
+ </div>
1520
+
1521
+ <div class="form-group">
1522
+ <label>Date d&apos;arrivage</label>
1523
+ <input type="date" id="productArrivalDate">
1524
+ <div class="persistence-option">
1525
+ <input type="checkbox" id="persistArrivalDate">
1526
+ <label for="persistArrivalDate">M&#xe9;moriser cette valeur</label>
1527
+ </div>
1528
+ </div>
1529
+ <!-- End of new fields -->
1530
+
1531
+ <div class="photo-upload-flex">
1532
+ <button onclick="uploadPhoto(0)">Photo principale</button>
1533
+ <button onclick="toggleAdditionalPhotos()">Ajouter photos</button>
1534
+ </div>
1535
+ <div id="additionalPhotos" class="photo-upload-grid" style="display: none;">
1536
+ <div class="photo-upload-box" onclick="uploadPhoto(1)">
1537
+ <i class="fas fa-camera-retro"></i>
1538
+ </div>
1539
+ <div class="photo-upload-box" onclick="uploadPhoto(2)">
1540
+ <i class="fas fa-camera-retro"></i>
1541
+ </div>
1542
+ <div class="photo-upload-box" onclick="uploadPhoto(3)">
1543
+ <i class="fas fa-camera-retro"></i>
1544
+ </div>
1545
+ <div class="photo-upload-box" onclick="uploadPhoto(4)">
1546
+ <i class="fas fa-camera-retro"></i>
1547
+ </div>
1548
+ <div class="photo-upload-box" onclick="uploadPhoto(5)">
1549
+ <i class="fas fa-camera-retro"></i>
1550
+ </div>
1551
+ <div class="photo-upload-box" onclick="uploadPhoto(6)">
1552
+ <i class="fas fa-camera-retro"></i>
1553
+ </div>
1554
+ <div class="photo-upload-box" onclick="uploadPhoto(7)">
1555
+ <i class="fas fa-camera-retro"></i>
1556
+ </div>
1557
+ </div>
1558
+ <button type="submit" class="action-button">Cr&#xe9;er l&apos;article</button>
1559
+ </form>
1560
+ </div>
1561
+ <div id="productsCatalog" class="products-grid" style="margin-top: 1rem;">
1562
+ <!-- Products will be loaded here -->
1563
+ </div>
1564
+ </div>
1565
+ </div>
1566
+
1567
+ <!-- Orders Section -->
1568
+ <div id="orders-section" style="display: none;">
1569
+ <h2>Commandes</h2>
1570
+ <div id="orders-list">
1571
+ <!-- Orders will be listed here -->
1572
+ </div>
1573
+ </div>
1574
+ </div>
1575
+ </div>
1576
+ </div>
1577
+
1578
+ <div class="cart">
1579
+ <i class="fas fa-shopping-cart"></i>
1580
+ <span class="cart-count">0</span>
1581
+ </div>
1582
+
1583
+ <div id="cart-modal" class="cart-modal">
1584
+ <div class="cart-content">
1585
+ <div class="cart-header">
1586
+ <h2>Panier</h2>
1587
+ <div style="display: flex; gap: 1rem; align-items: center;">
1588
+ <button onclick="clearCart()" class="clear-cart-button" style="background: var(--secondary); color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer;">
1589
+ <i class="fas fa-trash-alt"></i> Vider le panier
1590
+ </button>
1591
+ <button class="close-cart">&#xd7;</button>
1592
+ </div>
1593
+ </div>
1594
+ <div class="cart-items">
1595
+ <!-- Cart items will be populated here -->
1596
+ </div>
1597
+ <div class="cart-footer">
1598
+ <div class="cart-total">Total: 0 FCFA</div>
1599
+ <div class="form-group" style="margin: 1rem 0;">
1600
+ <label for="cartName">Nom du panier</label>
1601
+ <input type="text" id="cartName" placeholder="Donnez un nom &#xe0; votre panier" style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; margin-top: 0.5rem;">
1602
+ </div>
1603
+ <button class="checkout-button">Commander</button>
1604
+ </div>
1605
+ </div>
1606
+ </div>
1607
+
1608
+ <div id="order-confirmation" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:white; padding:2rem; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.2); z-index:2000;">
1609
+ <h3>Commande envoy&#xe9;e!</h3>
1610
+ <p>Votre commande a &#xe9;t&#xe9; transmise au vendeur.</p>
1611
+ <button onclick="this.parentElement.style.display=&apos;none&apos;" style="margin-top:1rem; padding:0.8rem 2rem; font-size:1.2rem; font-weight:500; background:var(--primary); color:white; border:none; border-radius:4px; cursor:pointer; min-width:120px;">OK</button>
1612
+ </div>
1613
+ </main>
1614
+ <div class="scrolling-banner">
1615
+ <div class="scrolling-text">
1616
+ Adresse boutique : www.76641411.friptedo.bf &#xa0;&#xa0;&#xa0; r&#xe9;alis&#xe9;e par www.friptedo.bf
1617
+ </div>
1618
+ </div>
1619
+
1620
+ <script>let products = [{
1621
+ id: '1',
1622
+ name: 'T-Shirt Vintage',
1623
+ description: 'T-shirt vintage en excellent état',
1624
+ price: 25000,
1625
+ category: 'T-Shirts',
1626
+ gender: 'homme',
1627
+ size: 'm',
1628
+ images: []
1629
+ }, {
1630
+ id: '2',
1631
+ name: 'Robe d\'été',
1632
+ description: 'Robe d\'été légère et élégante',
1633
+ price: 35000,
1634
+ category: 'Robes',
1635
+ gender: 'femme',
1636
+ size: 's',
1637
+ images: []
1638
+ }];
1639
+ let categories = ['T-Shirts', 'Robes', 'Pantalons', 'Chemises', 'Jupes'];
1640
+ document.addEventListener('DOMContentLoaded', function () {
1641
+ updateCategoriesList();
1642
+ updateProductDisplay(products);
1643
+ const productCategory = document.getElementById('productCategory');
1644
+ if (productCategory) {
1645
+ productCategory.innerHTML = `
1646
+ <option value="">Sélectionner une catégorie</option>
1647
+ ${categories.map(cat => `<option value="${cat}">${cat}</option>`).join('')}
1648
+ `;
1649
+ }
1650
+ const filterInputs = ['gender-filter', 'category-filter', 'size-filter', 'min-price', 'max-price'];
1651
+ filterInputs.forEach(id => {
1652
+ document.getElementById(id)?.addEventListener('change', () => {
1653
+ if (filtersEnabled) {
1654
+ applyFilters();
1655
+ }
1656
+ });
1657
+ });
1658
+ document.getElementById('gender-filter').innerHTML = `
1659
+ <option value="">Tous</option>
1660
+ <option value="homme">Homme</option>
1661
+ <option value="femme">Femme</option>
1662
+ <option value="unigenre">Unigenre</option>
1663
+ `;
1664
+ document.getElementById('imageSearchInput').addEventListener('change', function (e) {
1665
+ if (e.target.files && e.target.files[0]) {
1666
+ searchByImage(e.target.files[0]);
1667
+ }
1668
+ });
1669
+ ['Name', 'Description', 'Price', 'Category', 'Gender', 'Size', 'Brand', 'Style', 'Material', 'Location', 'Color'].forEach(field => {
1670
+ const checkbox = document.getElementById(`persist${field}`);
1671
+ const input = document.getElementById(`product${field}`);
1672
+ if (checkbox && input) {
1673
+ checkbox.addEventListener('change', () => {
1674
+ persistentFields[`product${field}`] = checkbox.checked;
1675
+ if (checkbox.checked) {
1676
+ persistentValues[`product${field}`] = input.value;
1677
+ }
1678
+ });
1679
+ input.addEventListener('change', () => {
1680
+ if (persistentFields[`product${field}`]) {
1681
+ persistentValues[`product${field}`] = input.value;
1682
+ }
1683
+ });
1684
+ }
1685
+ });
1686
+ });
1687
+ let cartCount = 0;
1688
+ let cart = [];
1689
+ let orders = [];
1690
+ function toggleInterface(type) {
1691
+ const clientInterface = document.querySelector('.client-interface');
1692
+ const dashboard = document.querySelector('.dashboard');
1693
+ const cartElement = document.querySelector('.cart');
1694
+ if (type === 'client') {
1695
+ clientInterface.style.display = 'block';
1696
+ dashboard.style.display = 'none';
1697
+ cartElement.style.display = 'block';
1698
+ } else {
1699
+ clientInterface.style.display = 'none';
1700
+ dashboard.style.display = 'block';
1701
+ cartElement.style.display = 'none';
1702
+ }
1703
+ }
1704
+ function showDashboardSection(section) {
1705
+ const sections = ['categories-section', 'products-section', 'orders-section'];
1706
+ sections.forEach(s => {
1707
+ const element = document.getElementById(s);
1708
+ if (element) {
1709
+ element.style.display = s === section + '-section' ? 'block' : 'none';
1710
+ }
1711
+ });
1712
+ if (section === 'products') {
1713
+ updateProductsCatalog();
1714
+ const catalogSection = document.querySelector('.catalog-section');
1715
+ if (catalogSection) {
1716
+ const buttons = catalogSection.querySelector('.buttons-container') || document.createElement('div');
1717
+ buttons.className = 'buttons-container';
1718
+ buttons.innerHTML = `
1719
+ <button onclick="toggleNewProductForm()" class="action-button">
1720
+ <i class="fas fa-plus"></i> Nouvel article
1721
+ </button>
1722
+ `;
1723
+ if (!catalogSection.contains(buttons)) {
1724
+ catalogSection.insertBefore(buttons, catalogSection.firstChild);
1725
+ }
1726
+ }
1727
+ }
1728
+ }
1729
+ function addCategory() {
1730
+ const input = document.getElementById('newCategory');
1731
+ const categoryName = input.value.trim();
1732
+ if (categoryName) {
1733
+ categories.push(categoryName);
1734
+ updateCategoriesList();
1735
+ const productCategory = document.getElementById('productCategory');
1736
+ if (productCategory) {
1737
+ productCategory.innerHTML = `
1738
+ <option value="">Sélectionner une catégorie</option>
1739
+ ${categories.map(cat => `<option value="${cat}">${cat}</option>`).join('')}
1740
+ `;
1741
+ }
1742
+ input.value = '';
1743
+ }
1744
+ }
1745
+ function deleteCategory(index) {
1746
+ categories.splice(index, 1);
1747
+ updateCategoriesList();
1748
+ const productCategory = document.getElementById('productCategory');
1749
+ if (productCategory) {
1750
+ productCategory.innerHTML = `
1751
+ <option value="">Sélectionner une catégorie</option>
1752
+ ${categories.map(cat => `<option value="${cat}">${cat}</option>`).join('')}
1753
+ `;
1754
+ }
1755
+ }
1756
+ function updateCategoriesList() {
1757
+ const list = document.getElementById('categoriesList');
1758
+ list.innerHTML = categories.map((category, index) => `
1759
+ <div class="category-item">
1760
+ <span>${category}</span>
1761
+ <button onclick="deleteCategory(${index})" class="action-button delete">Supprimer</button>
1762
+ </div>
1763
+ `).join('');
1764
+ const categoryFilter = document.getElementById('category-filter');
1765
+ categoryFilter.innerHTML = `
1766
+ <option value="">Toutes</option>
1767
+ ${categories.map(cat => `<option value="${cat}">${cat}</option>`).join('')}
1768
+ `;
1769
+ }
1770
+ function addToCart(productId) {
1771
+ const product = products.find(p => p.id === productId);
1772
+ if (product) {
1773
+ const existingItem = cart.find(item => item.id === productId);
1774
+ if (existingItem) {
1775
+ existingItem.quantity = (existingItem.quantity || 1) + 1;
1776
+ } else {
1777
+ cart.push({
1778
+ ...product,
1779
+ quantity: 1
1780
+ });
1781
+ }
1782
+ cartCount++;
1783
+ document.querySelector('.cart-count').textContent = cartCount;
1784
+ updateCartDisplay();
1785
+ const toast = document.createElement('div');
1786
+ toast.className = 'toast-notification';
1787
+ toast.textContent = 'Article ajouté au panier';
1788
+ document.body.appendChild(toast);
1789
+ setTimeout(() => toast.remove(), 2000);
1790
+ }
1791
+ }
1792
+ function updateCartDisplay() {
1793
+ const cartItems = document.querySelector('.cart-items');
1794
+ cartItems.innerHTML = cart.map(item => `
1795
+ <div class="cart-item">
1796
+ <div class="cart-item-image">
1797
+ ${item.images ? `<img src="${item.images[0]}" alt="${item.name}" class="cart-item-image">` : `<i class="fas fa-tshirt fa-3x"></i>`}
1798
+ </div>
1799
+ <div class="cart-item-info">
1800
+ <h3>${item.name}</h3>
1801
+ <p class="description">${item.description}</p>
1802
+ <p class="price">${item.price} FCFA</p>
1803
+ <div class="details">
1804
+ <p>Catégorie: ${item.category}</p>
1805
+ <p>Taille: ${(item.size || '').toUpperCase()}</p>
1806
+ <p>Genre: ${item.gender === 'homme' ? 'Homme' : item.gender === 'femme' ? 'Femme' : 'Unigenre'}</p>
1807
+ </div>
1808
+ <div class="quantity-controls">
1809
+ <button onclick="updateQuantity('${item.id}', -1)">-</button>
1810
+ <span>${item.quantity}</span>
1811
+ <button onclick="updateQuantity('${item.id}', 1)">+</button>
1812
+ </div>
1813
+ </div>
1814
+ <button class="remove-from-cart" onclick="removeFromCart('${item.id}')">
1815
+ <i class="fas fa-trash"></i>
1816
+ </button>
1817
+ </div>
1818
+ `).join('');
1819
+ const total = cart.reduce((sum, item) => sum + item.price * (item.quantity || 1), 0);
1820
+ document.querySelector('.cart-total').textContent = `Total: ${total} FCFA`;
1821
+ }
1822
+ function updateQuantity(productId, change) {
1823
+ const item = cart.find(item => item.id === productId);
1824
+ if (item) {
1825
+ item.quantity = Math.max(1, (item.quantity || 1) + change);
1826
+ updateCartDisplay();
1827
+ cartCount = cart.reduce((sum, item) => sum + (item.quantity || 1), 0);
1828
+ document.querySelector('.cart-count').textContent = cartCount;
1829
+ }
1830
+ }
1831
+ function shareProduct(platform, productId) {
1832
+ const productUrl = window.location.href;
1833
+ const productTitle = "T-Shirt Vintage";
1834
+ switch (platform) {
1835
+ case 'whatsapp':
1836
+ window.open(`https://api.whatsapp.com/send?text=${encodeURIComponent(productTitle + ' ' + productUrl)}`);
1837
+ break;
1838
+ case 'facebook':
1839
+ window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(productUrl)}`);
1840
+ break;
1841
+ }
1842
+ }
1843
+ function uploadPhoto(index) {
1844
+ currentUploadBox = document.querySelectorAll('.photo-upload-box')[index];
1845
+ const modal = document.createElement('div');
1846
+ modal.style.cssText = `
1847
+ position: fixed;
1848
+ top: 50%;
1849
+ left: 50%;
1850
+ transform: translate(-50%, -50%);
1851
+ background: white;
1852
+ padding: 2rem;
1853
+ border-radius: 8px;
1854
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
1855
+ z-index: 2000;
1856
+ `;
1857
+ modal.innerHTML = `
1858
+ <h3>Choisir une photo</h3>
1859
+ <div style="display: flex; gap: 1rem; margin-top: 1rem;">
1860
+ <button onclick="takePicture(${index})" class="action-button">
1861
+ <i class="fas fa-camera"></i> Prendre une photo
1862
+ </button>
1863
+ <button onclick="selectFile(${index})" class="action-button">
1864
+ <i class="fas fa-folder-open"></i> Choisir un fichier
1865
+ </button>
1866
+ </div>
1867
+ <button onclick="this.parentElement.remove()" style="
1868
+ background: #eee;
1869
+ border: none;
1870
+ padding: 0.5rem 1rem;
1871
+ border-radius: 4px;
1872
+ margin-top: 1rem;
1873
+ cursor: pointer;
1874
+ ">Annuler</button>
1875
+ `;
1876
+ document.body.appendChild(modal);
1877
+ }
1878
+ function closeUploadWindow() {}
1879
+ document.getElementById('fileInput').addEventListener('change', function (e) {});
1880
+ function updateMenuOptions(selectedCategory) {
1881
+ const genderFilter = document.getElementById('gender-filter');
1882
+ const sizeFilter = document.getElementById('size-filter');
1883
+ const productsInCategory = products.filter(p => p.category === selectedCategory);
1884
+ const availableGenders = [...new Set(productsInCategory.map(p => p.gender))];
1885
+ const availableSizes = [...new Set(productsInCategory.map(p => p.size))];
1886
+ genderFilter.innerHTML = `
1887
+ <option value="">Tous</option>
1888
+ ${availableGenders.map(g => `<option value="${g}">${g === 'homme' ? 'Homme' : g === 'femme' ? 'Femme' : 'Unigenre'}</option>`).join('')}
1889
+ `;
1890
+ sizeFilter.innerHTML = `
1891
+ <option value="">Toutes</option>
1892
+ ${availableSizes.map(s => `<option value="${s}">${s.toUpperCase()}</option>`).join('')}
1893
+ `;
1894
+ }
1895
+ document.getElementById('category-filter').addEventListener('change', function (e) {
1896
+ if (e.target.value) {
1897
+ updateMenuOptions(e.target.value);
1898
+ } else {
1899
+ document.getElementById('gender-filter').innerHTML = `
1900
+ <option value="">Tous</option>
1901
+ <option value="homme">Homme</option>
1902
+ <option value="femme">Femme</option>
1903
+ <option value="unigenre">Unigenre</option>
1904
+ `;
1905
+ document.getElementById('size-filter').innerHTML = `
1906
+ <option value="">Toutes</option>
1907
+ <option value="xs">XS</option>
1908
+ <option value="s">S</option>
1909
+ <option value="m">M</option>
1910
+ <option value="l">L</option>
1911
+ <option value="xl">XL</option>
1912
+ <option value="xxl">XXL</option>
1913
+ `;
1914
+ }
1915
+ });
1916
+ let filtersEnabled = false;
1917
+ function applyFilters() {
1918
+ if (!filtersEnabled) {
1919
+ updateProductDisplay(products);
1920
+ return;
1921
+ }
1922
+ const filters = {
1923
+ gender: document.getElementById('gender-filter').value,
1924
+ category: document.getElementById('category-filter').value,
1925
+ size: document.getElementById('size-filter').value,
1926
+ minPrice: document.getElementById('min-price').value,
1927
+ maxPrice: document.getElementById('max-price').value,
1928
+ arrivalStart: document.getElementById('arrival-start').value,
1929
+ arrivalEnd: document.getElementById('arrival-end').value
1930
+ };
1931
+ const filteredProducts = products.filter(product => {
1932
+ let matches = true;
1933
+ if (filters.gender && product.gender !== filters.gender) matches = false;
1934
+ if (filters.category && product.category !== filters.category) matches = false;
1935
+ if (filters.size && product.size !== filters.size) matches = false;
1936
+ if (filters.minPrice && product.price < filters.minPrice) matches = false;
1937
+ if (filters.maxPrice && product.price > filters.maxPrice) matches = false;
1938
+ if (filters.arrivalStart && filters.arrivalEnd) {
1939
+ const arrivalDate = new Date(product.arrivalDate);
1940
+ const startDate = new Date(filters.arrivalStart);
1941
+ const endDate = new Date(filters.arrivalEnd);
1942
+ if (arrivalDate < startDate || arrivalDate > endDate) matches = false;
1943
+ }
1944
+ return matches;
1945
+ });
1946
+ updateProductDisplay(filteredProducts);
1947
+ }
1948
+ function updateProductDisplay(filteredProducts) {
1949
+ const productsGrid = document.querySelector('.products-grid');
1950
+ if (!productsGrid) return;
1951
+ productsGrid.innerHTML = filteredProducts.map(product => `
1952
+ <div class="product-card">
1953
+ <div class="product-image" onclick="showProductImages('${product.id}')">
1954
+ ${product.images && product.images.length > 0 ? `<img src="${product.images[0]}" alt="${product.name}" style="width:100%; height:100%; object-fit:cover;">` : `<i class="fas fa-tshirt fa-3x"></i>`}
1955
+ </div>
1956
+ <div class="product-info">
1957
+ <h3>${product.category}</h3>
1958
+ <p class="price">${product.price} FCFA</p>
1959
+ <button class="details-button" onclick="toggleProductDetails(this)">Voir détails</button>
1960
+ <div class="product-details">
1961
+ <p>Nom: ${product.name}</p>
1962
+ <p>Description: ${product.description}</p>
1963
+ <p>Marque: ${product.brand || 'Non spécifié'}</p>
1964
+ <p>Style: ${product.style || 'Non spécifié'}</p>
1965
+ <p>Matière: ${product.material || 'Non spécifié'}</p>
1966
+ <p>Emplacement: ${product.location || 'Non spécifié'}</p>
1967
+ <p>Couleur: ${product.color || 'Non spécifié'}</p>
1968
+ ${product.images && product.images.length > 1 ? `
1969
+ <div class="photo-grid">
1970
+ ${product.images.map(img => `
1971
+ <img src="${img}" alt="${product.name}" onclick="showProductImages('${product.id}')">
1972
+ `).join('')}
1973
+ </div>
1974
+ ` : ''}
1975
+ </div>
1976
+ <div class="share-buttons">
1977
+ <button class="share-button" onclick="shareProduct('whatsapp', '${product.id}')">
1978
+ <i class="fab fa-whatsapp"></i>
1979
+ </button>
1980
+ <button class="share-button" onclick="shareProduct('facebook', '${product.id}')">
1981
+ <i class="fab fa-facebook"></i>
1982
+ </button>
1983
+ <button class="share-button" onclick="addToCart('${product.id}')">
1984
+ <i class="fas fa-cart-plus"></i>
1985
+ </button>
1986
+ </div>
1987
+ </div>
1988
+ </div>
1989
+ `).join('');
1990
+ }
1991
+ document.querySelector('.search-bar').addEventListener('input', function (e) {
1992
+ console.log('Recherche:', e.target.value);
1993
+ });
1994
+ document.querySelectorAll('.filter-item').forEach(filter => {
1995
+ filter.addEventListener('click', function () {
1996
+ this.classList.toggle('active');
1997
+ });
1998
+ });
1999
+ document.getElementById('productForm').addEventListener('submit', function (e) {
2000
+ e.preventDefault();
2001
+ const category = document.getElementById('productCategory').value;
2002
+ const gender = document.getElementById('productGender').value;
2003
+ if (!category || !gender) {
2004
+ alert('La catégorie et le genre sont obligatoires');
2005
+ return;
2006
+ }
2007
+ const productData = {
2008
+ name: document.getElementById('productName').value || 'Sans nom',
2009
+ description: document.getElementById('productDescription').value || '',
2010
+ price: Number(document.getElementById('productPrice').value) || 0,
2011
+ category: category,
2012
+ gender: gender,
2013
+ size: document.getElementById('productSize').value || '',
2014
+ brand: document.getElementById('productBrand').value || '',
2015
+ style: document.getElementById('productStyle').value || '',
2016
+ material: document.getElementById('productMaterial').value || '',
2017
+ location: document.getElementById('productLocation').value || '',
2018
+ color: document.getElementById('productColor').value || '',
2019
+ arrivalDate: document.getElementById('productArrivalDate').value || '',
2020
+ images: uploadedImages.filter(img => img !== null)
2021
+ };
2022
+ if (this.dataset.editMode === 'true' && this.dataset.editId) {
2023
+ const index = products.findIndex(p => p.id === this.dataset.editId);
2024
+ if (index !== -1) {
2025
+ products[index] = {
2026
+ ...products[index],
2027
+ ...productData
2028
+ };
2029
+ }
2030
+ this.dataset.editMode = 'false';
2031
+ this.dataset.editId = '';
2032
+ document.querySelector('#productForm button[type="submit"]').textContent = 'Créer l\'article';
2033
+ const toast = document.createElement('div');
2034
+ toast.className = 'toast-notification';
2035
+ toast.textContent = 'Article modifié avec succès';
2036
+ document.body.appendChild(toast);
2037
+ setTimeout(() => toast.remove(), 2000);
2038
+ } else {
2039
+ productData.id = Date.now().toString();
2040
+ products.push(productData);
2041
+ const toast = document.createElement('div');
2042
+ toast.className = 'toast-notification';
2043
+ toast.textContent = 'Article créé avec succès';
2044
+ document.body.appendChild(toast);
2045
+ setTimeout(() => toast.remove(), 2000);
2046
+ }
2047
+ updateProductDisplay(products);
2048
+ updateProductsCatalog();
2049
+ this.reset();
2050
+ uploadedImages = new Array(8).fill(null);
2051
+ document.querySelectorAll('.photo-upload-box').forEach(box => {
2052
+ box.innerHTML = '<i class="fas fa-plus"></i>';
2053
+ });
2054
+ });
2055
+ function showCart() {
2056
+ document.getElementById('cart-modal').style.display = 'block';
2057
+ updateCartDisplay();
2058
+ }
2059
+ function hideCart() {
2060
+ document.getElementById('cart-modal').style.display = 'none';
2061
+ }
2062
+ function removeFromCart(productId) {
2063
+ const index = cart.findIndex(p => p.id === productId);
2064
+ if (index !== -1) {
2065
+ cart.splice(index, 1);
2066
+ cartCount--;
2067
+ document.querySelector('.cart-count').textContent = cartCount;
2068
+ updateCartDisplay();
2069
+ }
2070
+ }
2071
+ function submitOrder() {
2072
+ const cartName = document.getElementById('cartName').value.trim() || `Commande #${Date.now()}`;
2073
+ const orderData = {
2074
+ id: Date.now().toString(),
2075
+ name: cartName,
2076
+ items: cart.map(item => ({
2077
+ ...item,
2078
+ productId: item.id,
2079
+ name: item.name,
2080
+ description: item.description,
2081
+ quantity: item.quantity,
2082
+ price: item.price,
2083
+ size: item.size,
2084
+ gender: item.gender,
2085
+ category: item.category,
2086
+ images: item.images,
2087
+ status: 'pending'
2088
+ })),
2089
+ total: cart.reduce((sum, item) => sum + item.price * (item.quantity || 1), 0),
2090
+ date: new Date()
2091
+ };
2092
+ orders.push(orderData);
2093
+ cart = [];
2094
+ cartCount = 0;
2095
+ document.querySelector('.cart-count').textContent = '0';
2096
+ hideCart();
2097
+ showOrderConfirmation();
2098
+ updateOrdersList();
2099
+ }
2100
+ function updateOrdersList() {
2101
+ const ordersList = document.getElementById('orders-list');
2102
+ if (!ordersList) return;
2103
+ ordersList.innerHTML = orders.map(order => `
2104
+ <div class="order-item" style="background:white; padding:1rem; margin:1rem 0; border-radius:4px; box-shadow:0 1px 4px rgba(0,0,0,0.1);">
2105
+ <div class="order-header">
2106
+ <h4>${order.name}</h4>
2107
+ <p>Commande #${order.id}</p>
2108
+ <p>Date: ${order.date.toLocaleString()}</p>
2109
+ </div>
2110
+ <div class="order-items">
2111
+ ${order.items.map(item => `
2112
+ <div class="order-item-detail" style="display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:start; padding:1rem; border-bottom:1px solid #eee; position:relative; border-left: 4px solid ${item.status === 'found' ? '#27ae60' : item.status === 'not-found' ? '#c0392b' : '#ddd'};">
2113
+ <div class="order-item-image" style="width:100px; height:100px; display:flex; align-items:center; justify-content:center; background:#f8f8f8; border-radius:4px;">
2114
+ ${item.images && item.images.length > 0 ? `<img src="${item.images[0]}" alt="${item.name}" style="max-width:100%; max-height:100%; object-fit:cover;">` : `<i class="fas fa-tshirt fa-2x"></i>`}
2115
+ </div>
2116
+ <div class="order-item-info">
2117
+ <h4>${item.name}</h4>
2118
+ <p class="description" style="font-size:0.9rem; color:#666; margin:0.5rem 0;">${item.description || ''}</p>
2119
+ <div class="details" style="font-size:0.8rem; color:#888;">
2120
+ <p>Catégorie: ${item.category || 'Non spécifié'}</p>
2121
+ <p>Taille: ${(item.size || '').toUpperCase()}</p>
2122
+ <p>Genre: ${item.gender === 'homme' ? 'Homme' : item.gender === 'femme' ? 'Femme' : 'Unigenre'}</p>
2123
+ <p>Quantité: ${item.quantity}</p>
2124
+ </div>
2125
+ <div class="item-status-buttons" style="margin-top:1rem;">
2126
+ <button class="status-button found-button ${item.status === 'found' ? 'active' : ''}"
2127
+ onclick="updateItemStatus('${order.id}', '${item.productId}', 'found')"
2128
+ style="background: ${item.status === 'found' ? '#27ae60' : '#eee'}; color: ${item.status === 'found' ? 'white' : '#666'};">
2129
+ <i class="fas fa-check"></i> Trouvé
2130
+ </button>
2131
+ <button class="status-button not-found-button ${item.status === 'not-found' ? 'active' : ''}"
2132
+ onclick="updateItemStatus('${order.id}', '${item.productId}', 'not-found')"
2133
+ style="background: ${item.status === 'not-found' ? '#c0392b' : '#eee'}; color: ${item.status === 'not-found' ? 'white' : '#666'};">
2134
+ <i class="fas fa-times"></i> Non trouvé
2135
+ </button>
2136
+ </div>
2137
+ </div>
2138
+ <div class="order-item-price">
2139
+ <p>${item.price * item.quantity} FCFA</p>
2140
+ </div>
2141
+ </div>
2142
+ `).join('')}
2143
+ </div>
2144
+ <div class="order-footer" style="margin-top:1rem; padding-top:1rem; border-top:1px solid #eee;">
2145
+ <h4>Total: ${order.total} FCFA</h4>
2146
+ <button class="delete-order-btn" onclick="deleteOrder('${order.id}')">
2147
+ <i class="fas fa-trash"></i> Supprimer la commande
2148
+ </button>
2149
+ </div>
2150
+ </div>
2151
+ `).join('');
2152
+ }
2153
+ function updateItemStatus(orderId, itemId, status) {
2154
+ const order = orders.find(o => o.id === orderId);
2155
+ if (order) {
2156
+ const item = order.items.find(item => item.productId === itemId);
2157
+ if (item) {
2158
+ item.status = status;
2159
+ updateOrdersList();
2160
+ }
2161
+ }
2162
+ }
2163
+ function showOrderConfirmation() {
2164
+ const confirmation = document.getElementById('order-confirmation');
2165
+ confirmation.style.background = '#FF8C00';
2166
+ confirmation.style.display = 'block';
2167
+ setTimeout(() => {
2168
+ confirmation.style.display = 'none';
2169
+ }, 3000);
2170
+ }
2171
+ document.querySelector('.cart').onclick = showCart;
2172
+ document.querySelector('.close-cart').onclick = hideCart;
2173
+ document.getElementById('cart-modal').onclick = function (e) {
2174
+ if (e.target === this) {
2175
+ hideCart();
2176
+ }
2177
+ };
2178
+ document.querySelector('.checkout-button').onclick = submitOrder;
2179
+ function toggleAuthMenu() {
2180
+ const dropdown = document.getElementById('auth-dropdown');
2181
+ dropdown.classList.toggle('show');
2182
+ document.addEventListener('click', function closeMenu(e) {
2183
+ if (!e.target.closest('.auth-buttons')) {
2184
+ dropdown.classList.remove('show');
2185
+ document.removeEventListener('click', closeMenu);
2186
+ }
2187
+ });
2188
+ }
2189
+ function toggleAdvancedFilters() {
2190
+ const filtersSection = document.getElementById('advancedFilters');
2191
+ const toggleBtn = document.querySelector('.toggle-filters-btn');
2192
+ filtersSection.classList.toggle('collapsed');
2193
+ toggleBtn.classList.toggle('active');
2194
+ }
2195
+ function toggleFilterMode() {
2196
+ filtersEnabled = !filtersEnabled;
2197
+ const btn = document.querySelector('.filter-toggle-btn');
2198
+ btn.classList.toggle('active');
2199
+ btn.querySelector('span').textContent = filtersEnabled ? 'Désactiver les filtres' : 'Activer les filtres';
2200
+ if (filtersEnabled) {
2201
+ applyFilters();
2202
+ } else {
2203
+ updateProductDisplay(products);
2204
+ }
2205
+ }
2206
+ function performSearch() {
2207
+ const searchIcon = document.querySelector('.search-button i');
2208
+ if (!searchIcon) return;
2209
+ searchIcon.classList.add('loading');
2210
+ const searchBar = document.querySelector('.search-bar');
2211
+ if (!searchBar) return;
2212
+ const searchTerm = searchBar.value.toLowerCase().trim();
2213
+ setTimeout(() => {
2214
+ const searchResults = products.filter(product => {
2215
+ const terms = searchTerm.split(' ').filter(term => term.length > 0);
2216
+ if (terms.length === 0) return true;
2217
+ return terms.every(term => {
2218
+ return product.name.toLowerCase().includes(term) || product.description.toLowerCase().includes(term) || product.category.toLowerCase().includes(term) || product.gender.toLowerCase().includes(term) || product.size && product.size.toLowerCase().includes(term) || product.price.toString().includes(term);
2219
+ });
2220
+ });
2221
+ searchResults.sort((a, b) => {
2222
+ const aName = a.name.toLowerCase();
2223
+ const bName = b.name.toLowerCase();
2224
+ const aExact = aName.includes(searchTerm);
2225
+ const bExact = bName.includes(searchTerm);
2226
+ if (aExact && !bExact) return -1;
2227
+ if (!aExact && bExact) return 1;
2228
+ return bName.indexOf(searchTerm) - aName.indexOf(searchTerm);
2229
+ });
2230
+ const resultsCountDiv = document.getElementById('search-results-count');
2231
+ if (searchTerm) {
2232
+ resultsCountDiv.textContent = `${searchResults.length} article${searchResults.length > 1 ? 's' : ''} trouvé${searchResults.length > 1 ? 's' : ''}`;
2233
+ } else {
2234
+ resultsCountDiv.textContent = '';
2235
+ }
2236
+ updateProductDisplay(searchResults);
2237
+ searchIcon.classList.remove('loading');
2238
+ }, 300);
2239
+ }
2240
+ document.querySelector('.search-bar').addEventListener('keypress', function (e) {
2241
+ if (e.key === 'Enter') {
2242
+ performSearch();
2243
+ }
2244
+ });
2245
+ let currentUploadBox = null;
2246
+ let uploadedImages = new Array(8).fill(null);
2247
+ function updateProductsCatalog() {
2248
+ const catalog = document.getElementById('productsCatalog');
2249
+ if (!catalog) return;
2250
+ const productsByCategory = products.reduce((acc, product) => {
2251
+ if (!acc[product.category]) {
2252
+ acc[product.category] = [];
2253
+ }
2254
+ acc[product.category].push(product);
2255
+ return acc;
2256
+ }, {});
2257
+ const categoryDropdown = `
2258
+ <div class="category-dropdown">
2259
+ <select id="categoryFilter" onchange="filterByCategory(this.value)">
2260
+ <option value="">Toutes les catégories</option>
2261
+ ${[...new Set(products.map(p => p.category))].map(cat => `<option value="${cat}">${cat}</option>`).join('')}
2262
+ </select>
2263
+ </div>
2264
+ `;
2265
+ const productCardRenderingCode = Object.entries(productsByCategory).map(([category, categoryProducts]) => `
2266
+ <div class="category-section" data-category="${category}">
2267
+ <h2 class="category-title">${category}</h2>
2268
+ <div class="products-grid">
2269
+ ${categoryProducts.map(product => `
2270
+ <div class="product-card">
2271
+ <div class="product-image">
2272
+ ${product.images && product.images.length > 0 ? `<img src="${product.images[0]}" alt="${product.name}" style="width:100%; height:100%; object-fit:cover;">` : `<i class="fas fa-tshirt fa-3x"></i>`}
2273
+ </div>
2274
+ <div class="product-info">
2275
+ <h3>${product.name}</h3>
2276
+ <p class="description">${product.description}</p>
2277
+ <p class="price">${product.price} FCFA</p>
2278
+ <div class="details">
2279
+ <p>Catégorie: ${product.category}</p>
2280
+ <p>Taille: ${(product.size || '').toUpperCase()}</p>
2281
+ <p>Genre: ${product.gender === 'homme' ? 'Homme' : product.gender === 'femme' ? 'Femme' : 'Unigenre'}</p>
2282
+ </div>
2283
+ <div class="product-actions">
2284
+ <button class="edit-product" onclick="editProduct('${product.id}')">
2285
+ <i class="fas fa-edit"></i> Modifier
2286
+ </button>
2287
+ <button class="delete-product" onclick="deleteProduct('${product.id}')">
2288
+ <i class="fas fa-trash"></i> Supprimer
2289
+ </button>
2290
+ </div>
2291
+ </div>
2292
+ </div>
2293
+ `).join('')}
2294
+ </div>
2295
+ </div>
2296
+ `).join('');
2297
+ catalog.innerHTML = categoryDropdown + productCardRenderingCode;
2298
+ }
2299
+ function editProduct(productId) {
2300
+ const product = products.find(p => p.id === productId);
2301
+ if (!product) return;
2302
+ document.getElementById('newProductSection').style.display = 'block';
2303
+ document.getElementById('newProductSection').scrollIntoView({
2304
+ behavior: 'smooth'
2305
+ });
2306
+ const button = document.querySelector('[onclick="toggleNewProductForm()"]');
2307
+ button.innerHTML = '<i class="fas fa-times"></i> Annuler';
2308
+ document.getElementById('productName').value = product.name;
2309
+ document.getElementById('productDescription').value = product.description;
2310
+ document.getElementById('productPrice').value = product.price;
2311
+ document.getElementById('productCategory').value = product.category;
2312
+ document.getElementById('productGender').value = product.gender;
2313
+ document.getElementById('productSize').value = product.size || '';
2314
+ document.getElementById('productBrand').value = product.brand || '';
2315
+ document.getElementById('productStyle').value = product.style || '';
2316
+ document.getElementById('productMaterial').value = product.material || '';
2317
+ document.getElementById('productLocation').value = product.location || '';
2318
+ document.getElementById('productColor').value = product.color || '';
2319
+ document.getElementById('productArrivalDate').value = product.arrivalDate || '';
2320
+ uploadedImages = [...(product.images || []), ...new Array(8).fill(null)].slice(0, 8);
2321
+ document.querySelector('.photo-upload-flex button:first-child').innerHTML = uploadedImages[0] ? `<img src="${uploadedImages[0]}" alt="Preview" style="max-width: 100%; max-height: 100%; object-fit: contain;">` : 'Photo principale';
2322
+ document.querySelectorAll('.photo-upload-box').forEach((box, index) => {
2323
+ if (uploadedImages[index + 1]) {
2324
+ box.innerHTML = `<img src="${uploadedImages[index + 1]}" alt="Preview">`;
2325
+ box.style.display = 'flex';
2326
+ } else {
2327
+ box.innerHTML = '<i class="fas fa-plus"></i>';
2328
+ box.style.display = 'none';
2329
+ }
2330
+ });
2331
+ const productForm = document.getElementById('productForm');
2332
+ productForm.dataset.editMode = 'true';
2333
+ productForm.dataset.editId = productId;
2334
+ const photoWindows = document.querySelectorAll('.photo-upload-window');
2335
+ photoWindows.forEach(window => {
2336
+ window.style.maxWidth = '400px';
2337
+ });
2338
+ document.querySelector('#productForm button[type="submit"]').textContent = 'Modifier l\'article';
2339
+ }
2340
+ function deleteProduct(productId) {
2341
+ if (confirm('Êtes-vous sûr de vouloir supprimer cet article ?')) {
2342
+ products = products.filter(p => p.id !== productId);
2343
+ updateProductsCatalog();
2344
+ updateProductDisplay(products);
2345
+ }
2346
+ }
2347
+ function toggleNewProductForm() {
2348
+ const newProductSection = document.getElementById('newProductSection');
2349
+ const isVisible = newProductSection.style.display === 'block';
2350
+ newProductSection.style.display = isVisible ? 'none' : 'block';
2351
+ const button = document.querySelector('[onclick="toggleNewProductForm()"]');
2352
+ button.innerHTML = isVisible ? '<i class="fas fa-plus"></i> Nouvel article' : '<i class="fas fa-times"></i> Annuler';
2353
+ if (!isVisible) {
2354
+ document.getElementById('productForm').reset();
2355
+ uploadedImages = new Array(8).fill(null);
2356
+ document.querySelectorAll('.photo-upload-box').forEach(box => {
2357
+ box.innerHTML = '<i class="fas fa-plus"></i>';
2358
+ box.style.display = 'none';
2359
+ });
2360
+ Object.keys(persistentFields).forEach(field => {
2361
+ if (persistentFields[field]) {
2362
+ document.getElementById(field).value = persistentValues[field];
2363
+ }
2364
+ });
2365
+ document.getElementById('productBrand').value = '';
2366
+ document.getElementById('productStyle').value = '';
2367
+ document.getElementById('productMaterial').value = '';
2368
+ document.getElementById('productLocation').value = '';
2369
+ document.getElementById('productColor').value = '';
2370
+ const productForm = document.getElementById('productForm');
2371
+ productForm.dataset.editMode = 'false';
2372
+ productForm.dataset.editId = '';
2373
+ document.querySelector('#productForm button[type="submit"]').textContent = 'Créer l\'article';
2374
+ }
2375
+ }
2376
+ function clearCart() {
2377
+ if (confirm('Voulez-vous vraiment vider tout le panier ?')) {
2378
+ cart = [];
2379
+ cartCount = 0;
2380
+ document.querySelector('.cart-count').textContent = '0';
2381
+ updateCartDisplay();
2382
+ }
2383
+ }
2384
+ const VENDOR_ACCESS_CODE = '56888879';
2385
+ function showVendorLogin() {
2386
+ document.getElementById('vendorLoginModal').style.display = 'block';
2387
+ document.getElementById('auth-dropdown').classList.remove('show');
2388
+ }
2389
+ function closeVendorLogin() {
2390
+ document.getElementById('vendorLoginModal').style.display = 'none';
2391
+ }
2392
+ function checkVendorCode() {
2393
+ const code = document.getElementById('vendorCode').value;
2394
+ if (code === VENDOR_ACCESS_CODE) {
2395
+ closeVendorLogin();
2396
+ toggleInterface('vendor');
2397
+ } else {
2398
+ alert('Code d\'accès incorrect');
2399
+ }
2400
+ }
2401
+ document.getElementById('auth-dropdown').innerHTML = `
2402
+ <button onclick="toggleInterface('client')">Client</button>
2403
+ <button onclick="showVendorLogin()">Vendeur</button>
2404
+ `;
2405
+ function deleteOrder(orderId) {
2406
+ if (confirm('Êtes-vous sûr de vouloir supprimer cette commande ?')) {
2407
+ orders = orders.filter(o => o.id !== orderId);
2408
+ updateOrdersList();
2409
+ }
2410
+ }
2411
+ function searchByImage(imageFile) {
2412
+ const reader = new FileReader();
2413
+ reader.onload = function (e) {
2414
+ const imageData = e.target.result;
2415
+ alert('Recherche par image activée. Dans une version production, ceci utiliserait un service AI pour analyser l\'image.');
2416
+ const searchResults = products.slice(0, 2);
2417
+ const resultsCountDiv = document.getElementById('search-results-count');
2418
+ resultsCountDiv.textContent = `${searchResults.length} article${searchResults.length > 1 ? 's' : ''} similaire${searchResults.length > 1 ? 's' : ''} trouvé${searchResults.length > 1 ? 's' : ''}`;
2419
+ updateProductDisplay(searchResults);
2420
+ };
2421
+ reader.readAsDataURL(imageFile);
2422
+ }
2423
+ function filterByCategory(category) {
2424
+ const sections = document.querySelectorAll('.category-section');
2425
+ if (!category) {
2426
+ sections.forEach(section => section.style.display = 'block');
2427
+ } else {
2428
+ sections.forEach(section => {
2429
+ section.style.display = section.dataset.category === category ? 'block' : 'none';
2430
+ });
2431
+ }
2432
+ }
2433
+ function checkStorageUsage() {
2434
+ let totalSize = 0;
2435
+ products.forEach(product => {
2436
+ if (product.images) {
2437
+ product.images.forEach(imageUrl => {
2438
+ if (imageUrl.startsWith('data:image')) {
2439
+ totalSize += imageUrl.length * 0.75;
2440
+ }
2441
+ });
2442
+ }
2443
+ });
2444
+ let size = '';
2445
+ if (totalSize < 1024) {
2446
+ size = totalSize + ' B';
2447
+ } else if (totalSize < 1024 * 1024) {
2448
+ size = (totalSize / 1024).toFixed(2) + ' KB';
2449
+ } else {
2450
+ size = (totalSize / (1024 * 1024)).toFixed(2) + ' MB';
2451
+ }
2452
+ const modal = document.createElement('div');
2453
+ modal.style.cssText = `
2454
+ position: fixed;
2455
+ top: 50%;
2456
+ left: 50%;
2457
+ transform: translate(-50%, -50%);
2458
+ background: white;
2459
+ padding: 2rem;
2460
+ border-radius: 8px;
2461
+ box-shadow: 0 2px 8px rgba(0,0,0,0.2);
2462
+ z-index: 2000;
2463
+ `;
2464
+ modal.innerHTML = `
2465
+ <h3>Espace de stockage utilisé</h3>
2466
+ <p style="margin: 1rem 0;">Taille totale des fichiers du catalogue: ${size}</p>
2467
+ <p style="margin: 1rem 0; font-size: 0.9em; color: #666;">
2468
+ Nombre d'articles: ${products.length}<br>
2469
+ Nombre total d'images: ${products.reduce((count, p) => count + (p.images?.length || 0), 0)}
2470
+ </p>
2471
+ <button onclick="this.parentElement.remove()" style="
2472
+ background: var(--primary);
2473
+ color: white;
2474
+ border: none;
2475
+ padding: 0.8rem 1.5rem;
2476
+ border-radius: 4px;
2477
+ cursor: pointer;
2478
+ margin-top: 1rem;
2479
+ ">Fermer</button>
2480
+ `;
2481
+ document.body.appendChild(modal);
2482
+ }
2483
+ let persistentFields = {
2484
+ productName: false,
2485
+ description: false,
2486
+ price: false,
2487
+ category: false,
2488
+ gender: false,
2489
+ size: false,
2490
+ brand: false,
2491
+ style: false,
2492
+ material: false,
2493
+ location: false,
2494
+ color: false,
2495
+ arrivalDate: false
2496
+ };
2497
+ let persistentValues = {
2498
+ productName: '',
2499
+ description: '',
2500
+ price: '',
2501
+ category: '',
2502
+ gender: '',
2503
+ size: '',
2504
+ brand: '',
2505
+ style: '',
2506
+ material: '',
2507
+ location: '',
2508
+ color: '',
2509
+ arrivalDate: ''
2510
+ };
2511
+ function takePicture(index) {
2512
+ const input = document.getElementById('productPhotoInput');
2513
+ input.setAttribute('capture', 'environment');
2514
+ input.onchange = e => {
2515
+ handlePhotoFile(e.target.files[0], index);
2516
+ input.value = '';
2517
+ const modal = document.querySelector('[style*="position: fixed"]');
2518
+ if (modal && modal.style.maxWidth !== '400px') {
2519
+ modal.remove();
2520
+ }
2521
+ };
2522
+ input.click();
2523
+ }
2524
+ function selectFile(index) {
2525
+ const input = document.getElementById('productPhotoInput');
2526
+ input.removeAttribute('capture');
2527
+ input.onchange = e => {
2528
+ handlePhotoFile(e.target.files[0], index);
2529
+ input.value = '';
2530
+ const modal = document.querySelector('[style*="position: fixed"]');
2531
+ if (modal && modal.style.maxWidth !== '400px') {
2532
+ modal.remove();
2533
+ }
2534
+ };
2535
+ input.click();
2536
+ }
2537
+ function handlePhotoFile(file, index) {
2538
+ if (!file) return;
2539
+ const reader = new FileReader();
2540
+ reader.onload = function (e) {
2541
+ const previewImg = `<img src="${e.target.result}" alt="Preview" style="max-width:100%; max-height:100%; object-fit:cover;">`;
2542
+ if (index === 0) {
2543
+ document.querySelector('.photo-upload-flex button:first-child').innerHTML = previewImg;
2544
+ } else {
2545
+ const box = document.querySelectorAll('.photo-upload-box')[index - 1];
2546
+ box.innerHTML = previewImg;
2547
+ box.style.display = 'flex';
2548
+ }
2549
+ uploadedImages[index] = e.target.result;
2550
+ const modal = document.querySelector('[style*="position: fixed"]');
2551
+ if (modal && modal.style.maxWidth !== '400px') {
2552
+ modal.remove();
2553
+ }
2554
+ };
2555
+ reader.readAsDataURL(file);
2556
+ }
2557
+ function showProductImages(productId) {
2558
+ const product = products.find(p => p.id === productId);
2559
+ if (!product || !product.images || !product.images.length) return;
2560
+ const modal = document.createElement('div');
2561
+ modal.className = 'photo-modal';
2562
+ modal.innerHTML = `<img src="${product.images[0]}" alt="${product.name}">`;
2563
+ modal.onclick = () => modal.remove();
2564
+ document.body.appendChild(modal);
2565
+ modal.style.display = 'flex';
2566
+ }
2567
+ function toggleProductDetails(button) {
2568
+ const details = button.nextElementSibling;
2569
+ details.style.display = details.style.display === 'none' ? 'block' : 'none';
2570
+ button.textContent = details.style.display === 'none' ? 'Voir détails' : 'Masquer détails';
2571
+ }
2572
+ function toggleAdditionalPhotos() {
2573
+ const additionalPhotos = document.getElementById('additionalPhotos');
2574
+ const isShown = additionalPhotos.style.display === 'none';
2575
+ additionalPhotos.style.display = isShown ? 'grid' : 'none';
2576
+ if (isShown) {
2577
+ const boxes = document.querySelectorAll('.photo-upload-box');
2578
+ const nextEmptyIndex = uploadedImages.findIndex(img => img === null) - 1;
2579
+ if (nextEmptyIndex >= 0 && nextEmptyIndex < boxes.length) {
2580
+ boxes[nextEmptyIndex].style.display = 'flex';
2581
+ }
2582
+ }
2583
+ }
2584
+ function scrollToTop() {
2585
+ window.scrollTo({
2586
+ top: 0,
2587
+ behavior: 'smooth'
2588
+ });
2589
+ }</script></head></html>