Hugging Face's logo

Spaces:
Esmaeilkianii
/
anycoder-cddd2a1b
Running

App Files Community
Esmaeilkianii commited on
Commit
1b58f7a
·
verified ·
1 Parent(s): b42177a

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +729 -19
index.html CHANGED
@@ -1,19 +1,729 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fa" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>نرم‌افزار مدیریت آزمایشگاه آب و خاک - آزمایشگاه اهواز</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary-color: #2c3e50;
11
+ --secondary-color: #3498db;
12
+ --accent-color: #e74c3c;
13
+ --success-color: #27ae60;
14
+ --warning-color: #f39c12;
15
+ --light-color: #ecf0f1;
16
+ --dark-color: #2c3e50;
17
+ --text-color: #333;
18
+ --text-light: #7f8c8d;
19
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
20
+ --border-radius: 8px;
21
+ --transition: all 0.3s ease;
22
+ }
23
+
24
+ * {
25
+ margin: 0;
26
+ padding: 0;
27
+ box-sizing: border-box;
28
+ font-family: 'Vazirmatn', 'IranYekan', 'Tahoma', sans-serif;
29
+ }
30
+
31
+ @font-face {
32
+ font-family: 'Vazirmatn';
33
+ src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');
34
+ }
35
+
36
+ body {
37
+ background-color: #f5f7fa;
38
+ color: var(--text-color);
39
+ line-height: 1.6;
40
+ }
41
+
42
+ .container {
43
+ display: grid;
44
+ grid-template-columns: 250px 1fr;
45
+ min-height: 100vh;
46
+ }
47
+
48
+ /* Sidebar */
49
+ .sidebar {
50
+ background-color: var(--primary-color);
51
+ color: white;
52
+ padding: 1.5rem;
53
+ position: sticky;
54
+ top: 0;
55
+ height: 100vh;
56
+ overflow-y: auto;
57
+ }
58
+
59
+ .sidebar-header {
60
+ display: flex;
61
+ flex-direction: column;
62
+ align-items: center;
63
+ margin-bottom: 2rem;
64
+ padding-bottom: 1rem;
65
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
66
+ }
67
+
68
+ .sidebar-header h2 {
69
+ font-size: 1.2rem;
70
+ margin-top: 0.5rem;
71
+ text-align: center;
72
+ }
73
+
74
+ .sidebar-header p {
75
+ font-size: 0.8rem;
76
+ opacity: 0.8;
77
+ text-align: center;
78
+ }
79
+
80
+ .sidebar-menu {
81
+ list-style: none;
82
+ }
83
+
84
+ .sidebar-menu li {
85
+ margin-bottom: 0.5rem;
86
+ }
87
+
88
+ .sidebar-menu a {
89
+ display: flex;
90
+ align-items: center;
91
+ padding: 0.8rem 1rem;
92
+ color: white;
93
+ text-decoration: none;
94
+ border-radius: var(--border-radius);
95
+ transition: var(--transition);
96
+ }
97
+
98
+ .sidebar-menu a:hover, .sidebar-menu a.active {
99
+ background-color: rgba(255, 255, 255, 0.1);
100
+ }
101
+
102
+ .sidebar-menu i {
103
+ margin-left: 0.8rem;
104
+ font-size: 1.1rem;
105
+ }
106
+
107
+ /* Main Content */
108
+ .main-content {
109
+ padding: 1.5rem;
110
+ background-color: #f5f7fa;
111
+ }
112
+
113
+ .header {
114
+ display: flex;
115
+ justify-content: space-between;
116
+ align-items: center;
117
+ margin-bottom: 1.5rem;
118
+ padding-bottom: 1rem;
119
+ border-bottom: 1px solid #ddd;
120
+ }
121
+
122
+ .header h1 {
123
+ font-size: 1.5rem;
124
+ color: var(--primary-color);
125
+ }
126
+
127
+ .header-actions {
128
+ display: flex;
129
+ gap: 1rem;
130
+ }
131
+
132
+ .btn {
133
+ padding: 0.5rem 1rem;
134
+ border: none;
135
+ border-radius: var(--border-radius);
136
+ cursor: pointer;
137
+ transition: var(--transition);
138
+ display: flex;
139
+ align-items: center;
140
+ gap: 0.5rem;
141
+ }
142
+
143
+ .btn-primary {
144
+ background-color: var(--secondary-color);
145
+ color: white;
146
+ }
147
+
148
+ .btn-primary:hover {
149
+ background-color: #2980b9;
150
+ }
151
+
152
+ .btn-success {
153
+ background-color: var(--success-color);
154
+ color: white;
155
+ }
156
+
157
+ .btn-success:hover {
158
+ background-color: #219653;
159
+ }
160
+
161
+ .btn-warning {
162
+ background-color: var(--warning-color);
163
+ color: white;
164
+ }
165
+
166
+ .btn-warning:hover {
167
+ background-color: #d35400;
168
+ }
169
+
170
+ .btn-danger {
171
+ background-color: var(--accent-color);
172
+ color: white;
173
+ }
174
+
175
+ .btn-danger:hover {
176
+ background-color: #c0392b;
177
+ }
178
+
179
+ .btn-outline {
180
+ background-color: transparent;
181
+ border: 1px solid var(--secondary-color);
182
+ color: var(--secondary-color);
183
+ }
184
+
185
+ .btn-outline:hover {
186
+ background-color: rgba(52, 152, 219, 0.1);
187
+ }
188
+
189
+ /* Cards */
190
+ .card {
191
+ background-color: white;
192
+ border-radius: var(--border-radius);
193
+ box-shadow: var(--shadow);
194
+ padding: 1.5rem;
195
+ margin-bottom: 1.5rem;
196
+ }
197
+
198
+ .card-header {
199
+ display: flex;
200
+ justify-content: space-between;
201
+ align-items: center;
202
+ margin-bottom: 1rem;
203
+ padding-bottom: 1rem;
204
+ border-bottom: 1px solid #eee;
205
+ }
206
+
207
+ .card-title {
208
+ font-size: 1.2rem;
209
+ color: var(--primary-color);
210
+ }
211
+
212
+ /* Dashboard Stats */
213
+ .stats-grid {
214
+ display: grid;
215
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
216
+ gap: 1.5rem;
217
+ margin-bottom: 1.5rem;
218
+ }
219
+
220
+ .stat-card {
221
+ background-color: white;
222
+ border-radius: var(--border-radius);
223
+ box-shadow: var(--shadow);
224
+ padding: 1.5rem;
225
+ text-align: center;
226
+ transition: var(--transition);
227
+ }
228
+
229
+ .stat-card:hover {
230
+ transform: translateY(-5px);
231
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
232
+ }
233
+
234
+ .stat-card i {
235
+ font-size: 2rem;
236
+ margin-bottom: 0.5rem;
237
+ color: var(--secondary-color);
238
+ }
239
+
240
+ .stat-card h3 {
241
+ font-size: 2rem;
242
+ margin-bottom: 0.5rem;
243
+ }
244
+
245
+ .stat-card p {
246
+ color: var(--text-light);
247
+ font-size: 0.9rem;
248
+ }
249
+
250
+ /* Sample Table */
251
+ .table-responsive {
252
+ overflow-x: auto;
253
+ }
254
+
255
+ table {
256
+ width: 100%;
257
+ border-collapse: collapse;
258
+ }
259
+
260
+ th, td {
261
+ padding: 1rem;
262
+ text-align: center;
263
+ border-bottom: 1px solid #eee;
264
+ }
265
+
266
+ th {
267
+ background-color: var(--light-color);
268
+ color: var(--primary-color);
269
+ font-weight: 600;
270
+ }
271
+
272
+ tr:hover {
273
+ background-color: rgba(52, 152, 219, 0.05);
274
+ }
275
+
276
+ .status-badge {
277
+ padding: 0.3rem 0.8rem;
278
+ border-radius: 20px;
279
+ font-size: 0.8rem;
280
+ font-weight: 600;
281
+ }
282
+
283
+ .status-received {
284
+ background-color: #fff3cd;
285
+ color: #856404;
286
+ }
287
+
288
+ .status-processing {
289
+ background-color: #d1ecf1;
290
+ color: #0c5460;
291
+ }
292
+
293
+ .status-completed {
294
+ background-color: #d4edda;
295
+ color: #155724;
296
+ }
297
+
298
+ .status-rejected {
299
+ background-color: #f8d7da;
300
+ color: #721c24;
301
+ }
302
+
303
+ /* Modal */
304
+ .modal {
305
+ display: none;
306
+ position: fixed;
307
+ z-index: 1000;
308
+ left: 0;
309
+ top: 0;
310
+ width: 100%;
311
+ height: 100%;
312
+ background-color: rgba(0, 0, 0, 0.5);
313
+ }
314
+
315
+ .modal-content {
316
+ background-color: white;
317
+ margin: 5% auto;
318
+ padding: 2rem;
319
+ border-radius: var(--border-radius);
320
+ width: 90%;
321
+ max-width: 600px;
322
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
323
+ animation: modalopen 0.3s;
324
+ }
325
+
326
+ @keyframes modalopen {
327
+ from {opacity: 0; transform: translateY(-50px);}
328
+ to {opacity: 1; transform: translateY(0);}
329
+ }
330
+
331
+ .modal-header {
332
+ display: flex;
333
+ justify-content: space-between;
334
+ align-items: center;
335
+ margin-bottom: 1.5rem;
336
+ padding-bottom: 1rem;
337
+ border-bottom: 1px solid #eee;
338
+ }
339
+
340
+ .modal-header h2 {
341
+ font-size: 1.3rem;
342
+ }
343
+
344
+ .close-btn {
345
+ background: none;
346
+ border: none;
347
+ font-size: 1.5rem;
348
+ cursor: pointer;
349
+ color: var(--text-light);
350
+ }
351
+
352
+ .modal-body {
353
+ margin-bottom: 1.5rem;
354
+ }
355
+
356
+ .form-group {
357
+ margin-bottom: 1rem;
358
+ }
359
+
360
+ .form-group label {
361
+ display: block;
362
+ margin-bottom: 0.5rem;
363
+ font-weight: 600;
364
+ }
365
+
366
+ .form-control {
367
+ width: 100%;
368
+ padding: 0.7rem;
369
+ border: 1px solid #ddd;
370
+ border-radius: var(--border-radius);
371
+ font-size: 1rem;
372
+ }
373
+
374
+ .modal-footer {
375
+ display: flex;
376
+ justify-content: flex-end;
377
+ gap: 1rem;
378
+ }
379
+
380
+ /* Charts */
381
+ .chart-container {
382
+ background-color: white;
383
+ border-radius: var(--border-radius);
384
+ box-shadow: var(--shadow);
385
+ padding: 1.5rem;
386
+ margin-bottom: 1.5rem;
387
+ }
388
+
389
+ .chart-header {
390
+ display: flex;
391
+ justify-content: space-between;
392
+ align-items: center;
393
+ margin-bottom: 1.5rem;
394
+ }
395
+
396
+ .chart-title {
397
+ font-size: 1.2rem;
398
+ color: var(--primary-color);
399
+ }
400
+
401
+ /* Responsive */
402
+ @media (max-width: 768px) {
403
+ .container {
404
+ grid-template-columns: 1fr;
405
+ }
406
+
407
+ .sidebar {
408
+ position: fixed;
409
+ top: 0;
410
+ left: -100%;
411
+ width: 200px;
412
+ height: 100vh;
413
+ z-index: 1000;
414
+ transition: var(--transition);
415
+ }
416
+
417
+ .sidebar.active {
418
+ left: 0;
419
+ }
420
+
421
+ .main-content {
422
+ padding: 1rem;
423
+ }
424
+
425
+ .header {
426
+ flex-direction: column;
427
+ align-items: flex-start;
428
+ gap: 1rem;
429
+ }
430
+
431
+ .stats-grid {
432
+ grid-template-columns: 1fr;
433
+ }
434
+ }
435
+
436
+ /* AnyCoder Link */
437
+ .anycoder-link {
438
+ position: fixed;
439
+ bottom: 1rem;
440
+ left: 1rem;
441
+ background-color: var(--primary-color);
442
+ color: white;
443
+ padding: 0.5rem 1rem;
444
+ border-radius: var(--border-radius);
445
+ text-decoration: none;
446
+ font-size: 0.8rem;
447
+ z-index: 1000;
448
+ box-shadow: var(--shadow);
449
+ }
450
+
451
+ .anycoder-link:hover {
452
+ background-color: #1a252f;
453
+ }
454
+ </style>
455
+ </head>
456
+ <body>
457
+ <div class="container">
458
+ <!-- Sidebar -->
459
+ <aside class="sidebar">
460
+ <div class="sidebar-header">
461
+ <i class="fas fa-flask fa-2x"></i>
462
+ <h2>آزمایشگاه آب و خاک اهواز</h2>
463
+ <p>سیستم مدیریت اطلاعات آزمایشگاهی</p>
464
+ </div>
465
+ <ul class="sidebar-menu">
466
+ <li><a href="#" class="active"><i class="fas fa-home"></i>داشبورد</a></li>
467
+ <li><a href="#"><i class="fas fa-vial"></i>نمونه‌ها</a></li>
468
+ <li><a href="#"><i class="fas fa-microscope"></i>آزمایش‌ها</a></li>
469
+ <li><a href="#"><i class="fas fa-file-alt"></i>گزارش‌ها</a></li>
470
+ <li><a href="#"><i class="fas fa-users"></i>کاربران</a></li>
471
+ <li><a href="#"><i class="fas fa-cogs"></i>تنظیمات</a></li>
472
+ <li><a href="#"><i class="fas fa-chart-line"></i>آمار و نمودار</a></li>
473
+ <li><a href="#"><i class="fas fa-calendar-alt"></i>تقویم</a></li>
474
+ </ul>
475
+ </aside>
476
+
477
+ <!-- Main Content -->
478
+ <main class="main-content">
479
+ <!-- Header -->
480
+ <header class="header">
481
+ <h1>داشبورد مدیریت آزمایشگاه</h1>
482
+ <div class="header-actions">
483
+ <button class="btn btn-primary"><i class="fas fa-plus"></i>نمونه جدید</button>
484
+ <button class="btn btn-outline"><i class="fas fa-sync-alt"></i>بروزرسانی</button>
485
+ </div>
486
+ </header>
487
+
488
+ <!-- Stats Cards -->
489
+ <div class="stats-grid">
490
+ <div class="stat-card">
491
+ <i class="fas fa-vial"></i>
492
+ <h3>1</h3>
493
+ <p>کل نمونه‌ها</p>
494
+ </div>
495
+ <div class="stat-card">
496
+ <i class="fas fa-check-circle"></i>
497
+ <h3>2</h3>
498
+ <p>آزمایش‌های تکمیل شده</p>
499
+ </div>
500
+ <div class="stat-card">
501
+ <i class="fas fa-file-pdf"></i>
502
+ <h3>1</h3>
503
+ <p>گزارش‌های صادر شده</p>
504
+ </div>
505
+ <div class="stat-card">
506
+ <i class="fas fa-clock"></i>
507
+ <h3>0</h3>
508
+ <p>نمونه‌های در انتظار</p>
509
+ </div>
510
+ </div>
511
+
512
+ <!-- Recent Samples -->
513
+ <div class="card">
514
+ <div class="card-header">
515
+ <h3 class="card-title">آخرین نمونه‌ها</h3>
516
+ <a href="#" class="btn btn-outline">مشاهده همه</a>
517
+ </div>
518
+ <div class="table-responsive">
519
+ <table>
520
+ <thead>
521
+ <tr>
522
+ <th>شناسه نمونه</th>
523
+ <th>نوع</th>
524
+ <th>موقعیت</th>
525
+ <th>تاریخ جمع‌آوری</th>
526
+ <th>وضعیت</th>
527
+ <th>عملیات</th>
528
+ </tr>
529
+ </thead>
530
+ <tbody>
531
+ <tr>
532
+ <td>SAMPLE_DKH_2025_001</td>
533
+ <td>خاک</td>
534
+ <td>مزرعه شماره 12 - دهخدا</td>
535
+ <td>2025-09-28</td>
536
+ <td><span class="status-badge status-received">دریافت شده</span></td>
537
+ <td>
538
+ <button class="btn btn-success btn-sm"><i class="fas fa-eye"></i></button>
539
+ <button class="btn btn-primary btn-sm"><i class="fas fa-edit"></i></button>
540
+ <button class="btn btn-danger btn-sm"><i class="fas fa-trash"></i></button>
541
+ </td>
542
+ </tr>
543
+ </tbody>
544
+ </table>
545
+ </div>
546
+ </div>
547
+
548
+ <!-- Charts -->
549
+ <div class="chart-container">
550
+ <div class="chart-header">
551
+ <h3 class="chart-title">روند پارامترهای خاک</h3>
552
+ <div>
553
+ <button class="btn btn-outline btn-sm">هفته</button>
554
+ <button class="btn btn-outline btn-sm">ماه</button>
555
+ <button class="btn btn-outline btn-sm">سال</button>
556
+ </div>
557
+ </div>
558
+ <div style="height: 300px; background-color: #f8f9fa; border-radius: var(--border-radius); display: flex; align-items: center; justify-content: center;">
559
+ <p>نمودار روند پارامترها (pH, EC, N, P, K) در اینجا نمایش داده می‌شود</p>
560
+ </div>
561
+ </div>
562
+
563
+ <!-- Instruments Status -->
564
+ <div class="card">
565
+ <div class="card-header">
566
+ <h3 class="card-title">وضعیت دستگاه‌ها</h3>
567
+ </div>
568
+ <div class="table-responsive">
569
+ <table>
570
+ <thead>
571
+ <tr>
572
+ <th>شناسه</th>
573
+ <th>نام دستگاه</th>
574
+ <th>نوع</th>
575
+ <th>وضعیت</th>
576
+ <th>آخرین کالیبراسیون</th>
577
+ </tr>
578
+ </thead>
579
+ <tbody>
580
+ <tr>
581
+ <td>I001</td>
582
+ <td>EC/pH Meter</td>
583
+ <td>رسانایی و pH</td>
584
+ <td><span class="status-badge status-completed">فعال</span></td>
585
+ <td>2025-08-01</td>
586
+ </tr>
587
+ <tr>
588
+ <td>I002</td>
589
+ <td>Spectrophotometer</td>
590
+ <td>اسپکتروفتومتر</td>
591
+ <td><span class="status-badge status-completed">فعال</span></td>
592
+ <td>2025-07-15</td>
593
+ </tr>
594
+ </tbody>
595
+ </table>
596
+ </div>
597
+ </div>
598
+ </main>
599
+ </div>
600
+
601
+ <!-- Sample Details Modal -->
602
+ <div id="sampleModal" class="modal">
603
+ <div class="modal-content">
604
+ <div class="modal-header">
605
+ <h2>جزئیات نمونه</h2>
606
+ <button class="close-btn" onclick="closeModal('sampleModal')">&times;</button>
607
+ </div>
608
+ <div class="modal-body">
609
+ <div class="form-group">
610
+ <label>شناسه نمونه</label>
611
+ <input type="text" class="form-control" value="SAMPLE_DKH_2025_001" readonly>
612
+ </div>
613
+ <div class="form-group">
614
+ <label>نوع نمونه</label>
615
+ <input type="text" class="form-control" value="خاک" readonly>
616
+ </div>
617
+ <div class="form-group">
618
+ <label>نام مشتری</label>
619
+ <input type="text" class="form-control" value="کشت و صنعت دهخدا" readonly>
620
+ </div>
621
+ <div class="form-group">
622
+ <label>موقعیت</label>
623
+ <input type="text" class="form-control" value="مزرعه شماره 12 - دهخدا" readonly>
624
+ </div>
625
+ <div class="form-group">
626
+ <label>تاریخ جمع‌آوری</label>
627
+ <input type="text" class="form-control" value="2025-09-28" readonly>
628
+ </div>
629
+ <div class="form-group">
630
+ <label>وضعیت</label>
631
+ <input type="text" class="form-control" value="دریافت شده" readonly>
632
+ </div>
633
+ </div>
634
+ <div class="modal-footer">
635
+ <button class="btn btn-outline" onclick="closeModal('sampleModal')">بستن</button>
636
+ <button class="btn btn-primary">ویرایش</button>
637
+ </div>
638
+ </div>
639
+ </div>
640
+
641
+ <!-- AnyCoder Link -->
642
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">
643
+ <i class="fas fa-code"></i> Built with anycoder
644
+ </a>
645
+
646
+ <script>
647
+ // Mobile sidebar toggle
648
+ const sidebar = document.querySelector('.sidebar');
649
+ const toggleBtn = document.createElement('button');
650
+ toggleBtn.innerHTML = '<i class="fas fa-bars"></i>';
651
+ toggleBtn.className = 'btn btn-primary';
652
+ toggleBtn.style.position = 'fixed';
653
+ toggleBtn.style.top = '1rem';
654
+ toggleBtn.style.left = '1rem';
655
+ toggleBtn.style.zIndex = '1001';
656
+ toggleBtn.style.display = 'none';
657
+ toggleBtn.onclick = () => sidebar.classList.toggle('active');
658
+
659
+ document.body.appendChild(toggleBtn);
660
+
661
+ // Check screen size and show/hide toggle button
662
+ function checkScreenSize() {
663
+ if (window.innerWidth <= 768) {
664
+ toggleBtn.style.display = 'block';
665
+ sidebar.classList.remove('active');
666
+ } else {
667
+ toggleBtn.style.display = 'none';
668
+ sidebar.classList.add('active');
669
+ }
670
+ }
671
+
672
+ window.addEventListener('resize', checkScreenSize);
673
+ checkScreenSize();
674
+
675
+ // Modal functions
676
+ function openModal(modalId) {
677
+ document.getElementById(modalId).style.display = 'block';
678
+ }
679
+
680
+ function closeModal(modalId) {
681
+ document.getElementById(modalId).style.display = 'none';
682
+ }
683
+
684
+ // Close modal when clicking outside
685
+ window.onclick = function(event) {
686
+ if (event.target.className === 'modal') {
687
+ event.target.style.display = 'none';
688
+ }
689
+ }
690
+
691
+ // Sample data for charts (would be implemented with Chart.js in a real app)
692
+ const chartData = {
693
+ labels: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور'],
694
+ datasets: [
695
+ {
696
+ label: 'pH',
697
+ data: [7.2, 7.3, 7.5, 7.4, 7.6, 7.5],
698
+ borderColor: '#3498db',
699
+ backgroundColor: 'rgba(52, 152, 219, 0.1)'
700
+ },
701
+ {
702
+ label: 'EC (µS/cm)',
703
+ data: [1100, 1150, 1200, 1180, 1220, 1200],
704
+ borderColor: '#e74c3c',
705
+ backgroundColor: 'rgba(231, 76, 60, 0.1)'
706
+ }
707
+ ]
708
+ };
709
+
710
+ // Initialize dashboard
711
+ document.addEventListener('DOMContentLoaded', function() {
712
+ // Add event listeners to view buttons
713
+ document.querySelectorAll('.btn-success').forEach(btn => {
714
+ btn.addEventListener('click', function() {
715
+ openModal('sampleModal');
716
+ });
717
+ });
718
+
719
+ // Add active class to current page in sidebar
720
+ const currentPage = window.location.pathname.split('/').pop();
721
+ document.querySelectorAll('.sidebar-menu a').forEach(link => {
722
+ if (link.getAttribute('href') === currentPage) {
723
+ link.classList.add('active');
724
+ }
725
+ });
726
+ });
727
+ </script>
728
+ </body>
729
+ </html>