Hugging Face's logo

Spaces:
escambalkon
/
anycoder-7cb3a649
Running

App Files Community
escambalkon commited on
Commit
52e8bb8
·
verified ·
1 Parent(s): 1c64af9

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +86 -1067
index.html CHANGED
@@ -1,1067 +1,86 @@
1
- <!DOCTYPE html>
2
- <html lang="tr">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Pencere Üretim Yönetim Sistemi</title>
7
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
- <style>
9
- * {
10
- margin: 0;
11
- padding: 0;
12
- box-sizing: border-box;
13
- }
14
-
15
- :root {
16
- --primary-color: #2563eb;
17
- --secondary-color: #1e40af;
18
- --success-color: #10b981;
19
- --warning-color: #f59e0b;
20
- --danger-color: #ef4444;
21
- --dark-color: #1f2937;
22
- --light-color: #f3f4f6;
23
- --border-color: #e5e7eb;
24
- --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
25
- --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
26
- }
27
-
28
- body {
29
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
30
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
31
- min-height: 100vh;
32
- color: var(--dark-color);
33
- }
34
-
35
- .container {
36
- max-width: 1400px;
37
- margin: 0 auto;
38
- padding: 20px;
39
- }
40
-
41
- header {
42
- background: white;
43
- border-radius: 15px;
44
- padding: 20px 30px;
45
- margin-bottom: 30px;
46
- box-shadow: var(--shadow-lg);
47
- display: flex;
48
- justify-content: space-between;
49
- align-items: center;
50
- flex-wrap: wrap;
51
- gap: 20px;
52
- }
53
-
54
- .logo {
55
- display: flex;
56
- align-items: center;
57
- gap: 15px;
58
- font-size: 24px;
59
- font-weight: bold;
60
- color: var(--primary-color);
61
- }
62
-
63
- .logo i {
64
- font-size: 32px;
65
- background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
66
- -webkit-background-clip: text;
67
- -webkit-text-fill-color: transparent;
68
- }
69
-
70
- .header-actions {
71
- display: flex;
72
- gap: 15px;
73
- align-items: center;
74
- }
75
-
76
- .user-info {
77
- display: flex;
78
- align-items: center;
79
- gap: 10px;
80
- padding: 8px 15px;
81
- background: var(--light-color);
82
- border-radius: 25px;
83
- }
84
-
85
- .user-avatar {
86
- width: 35px;
87
- height: 35px;
88
- border-radius: 50%;
89
- background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
90
- display: flex;
91
- align-items: center;
92
- justify-content: center;
93
- color: white;
94
- font-weight: bold;
95
- }
96
-
97
- .nav-tabs {
98
- background: white;
99
- border-radius: 15px;
100
- padding: 10px;
101
- margin-bottom: 30px;
102
- box-shadow: var(--shadow);
103
- display: flex;
104
- gap: 10px;
105
- overflow-x: auto;
106
- }
107
-
108
- .nav-tab {
109
- padding: 12px 24px;
110
- border-radius: 10px;
111
- cursor: pointer;
112
- transition: all 0.3s ease;
113
- white-space: nowrap;
114
- display: flex;
115
- align-items: center;
116
- gap: 8px;
117
- font-weight: 500;
118
- }
119
-
120
- .nav-tab:hover {
121
- background: var(--light-color);
122
- }
123
-
124
- .nav-tab.active {
125
- background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
126
- color: white;
127
- }
128
-
129
- .content-area {
130
- background: white;
131
- border-radius: 15px;
132
- padding: 30px;
133
- min-height: 500px;
134
- box-shadow: var(--shadow-lg);
135
- }
136
-
137
- .tab-content {
138
- display: none;
139
- animation: fadeIn 0.5s ease;
140
- }
141
-
142
- .tab-content.active {
143
- display: block;
144
- }
145
-
146
- @keyframes fadeIn {
147
- from { opacity: 0; transform: translateY(10px); }
148
- to { opacity: 1; transform: translateY(0); }
149
- }
150
-
151
- .stats-grid {
152
- display: grid;
153
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
154
- gap: 20px;
155
- margin-bottom: 30px;
156
- }
157
-
158
- .stat-card {
159
- background: linear-gradient(135deg, var(--light-color), white);
160
- padding: 25px;
161
- border-radius: 15px;
162
- border: 1px solid var(--border-color);
163
- transition: all 0.3s ease;
164
- position: relative;
165
- overflow: hidden;
166
- }
167
-
168
- .stat-card::before {
169
- content: '';
170
- position: absolute;
171
- top: 0;
172
- left: 0;
173
- width: 4px;
174
- height: 100%;
175
- background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
176
- }
177
-
178
- .stat-card:hover {
179
- transform: translateY(-5px);
180
- box-shadow: var(--shadow-lg);
181
- }
182
-
183
- .stat-icon {
184
- width: 50px;
185
- height: 50px;
186
- border-radius: 12px;
187
- display: flex;
188
- align-items: center;
189
- justify-content: center;
190
- font-size: 24px;
191
- margin-bottom: 15px;
192
- }
193
-
194
- .stat-value {
195
- font-size: 32px;
196
- font-weight: bold;
197
- margin-bottom: 5px;
198
- }
199
-
200
- .stat-label {
201
- color: #6b7280;
202
- font-size: 14px;
203
- }
204
-
205
- .stat-change {
206
- display: inline-block;
207
- padding: 4px 8px;
208
- border-radius: 6px;
209
- font-size: 12px;
210
- margin-top: 10px;
211
- }
212
-
213
- .stat-change.positive {
214
- background: rgba(16, 185, 129, 0.1);
215
- color: var(--success-color);
216
- }
217
-
218
- .stat-change.negative {
219
- background: rgba(239, 68, 68, 0.1);
220
- color: var(--danger-color);
221
- }
222
-
223
- .data-table {
224
- width: 100%;
225
- border-collapse: collapse;
226
- margin-top: 20px;
227
- }
228
-
229
- .data-table th {
230
- background: var(--light-color);
231
- padding: 12px;
232
- text-align: left;
233
- font-weight: 600;
234
- color: var(--dark-color);
235
- border-bottom: 2px solid var(--border-color);
236
- }
237
-
238
- .data-table td {
239
- padding: 12px;
240
- border-bottom: 1px solid var(--border-color);
241
- }
242
-
243
- .data-table tr:hover {
244
- background: rgba(37, 99, 235, 0.05);
245
- }
246
-
247
- .status-badge {
248
- display: inline-block;
249
- padding: 4px 12px;
250
- border-radius: 20px;
251
- font-size: 12px;
252
- font-weight: 600;
253
- }
254
-
255
- .status-badge.pending {
256
- background: rgba(245, 158, 11, 0.1);
257
- color: var(--warning-color);
258
- }
259
-
260
- .status-badge.in-progress {
261
- background: rgba(37, 99, 235, 0.1);
262
- color: var(--primary-color);
263
- }
264
-
265
- .status-badge.completed {
266
- background: rgba(16, 185, 129, 0.1);
267
- color: var(--success-color);
268
- }
269
-
270
- .status-badge.cancelled {
271
- background: rgba(239, 68, 68, 0.1);
272
- color: var(--danger-color);
273
- }
274
-
275
- .btn {
276
- padding: 10px 20px;
277
- border: none;
278
- border-radius: 8px;
279
- cursor: pointer;
280
- font-weight: 500;
281
- transition: all 0.3s ease;
282
- display: inline-flex;
283
- align-items: center;
284
- gap: 8px;
285
- }
286
-
287
- .btn-primary {
288
- background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
289
- color: white;
290
- }
291
-
292
- .btn-primary:hover {
293
- transform: translateY(-2px);
294
- box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
295
- }
296
-
297
- .btn-secondary {
298
- background: var(--light-color);
299
- color: var(--dark-color);
300
- }
301
-
302
- .btn-secondary:hover {
303
- background: var(--border-color);
304
- }
305
-
306
- .btn-icon {
307
- width: 35px;
308
- height: 35px;
309
- padding: 0;
310
- display: flex;
311
- align-items: center;
312
- justify-content: center;
313
- border-radius: 8px;
314
- }
315
-
316
- .modal {
317
- display: none;
318
- position: fixed;
319
- top: 0;
320
- left: 0;
321
- width: 100%;
322
- height: 100%;
323
- background: rgba(0, 0, 0, 0.5);
324
- z-index: 1000;
325
- animation: fadeIn 0.3s ease;
326
- }
327
-
328
- .modal.active {
329
- display: flex;
330
- align-items: center;
331
- justify-content: center;
332
- }
333
-
334
- .modal-content {
335
- background: white;
336
- border-radius: 15px;
337
- padding: 30px;
338
- max-width: 600px;
339
- width: 90%;
340
- max-height: 90vh;
341
- overflow-y: auto;
342
- animation: slideUp 0.3s ease;
343
- }
344
-
345
- @keyframes slideUp {
346
- from { transform: translateY(50px); opacity: 0; }
347
- to { transform: translateY(0); opacity: 1; }
348
- }
349
-
350
- .modal-header {
351
- display: flex;
352
- justify-content: space-between;
353
- align-items: center;
354
- margin-bottom: 20px;
355
- }
356
-
357
- .modal-title {
358
- font-size: 24px;
359
- font-weight: bold;
360
- }
361
-
362
- .close-modal {
363
- background: none;
364
- border: none;
365
- font-size: 24px;
366
- cursor: pointer;
367
- color: #6b7280;
368
- transition: color 0.3s ease;
369
- }
370
-
371
- .close-modal:hover {
372
- color: var(--danger-color);
373
- }
374
-
375
- .form-group {
376
- margin-bottom: 20px;
377
- }
378
-
379
- .form-label {
380
- display: block;
381
- margin-bottom: 8px;
382
- font-weight: 500;
383
- }
384
-
385
- .form-control {
386
- width: 100%;
387
- padding: 10px 15px;
388
- border: 1px solid var(--border-color);
389
- border-radius: 8px;
390
- font-size: 14px;
391
- transition: all 0.3s ease;
392
- }
393
-
394
- .form-control:focus {
395
- outline: none;
396
- border-color: var(--primary-color);
397
- box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
398
- }
399
-
400
- .form-row {
401
- display: grid;
402
- grid-template-columns: 1fr 1fr;
403
- gap: 20px;
404
- }
405
-
406
- .progress-bar {
407
- width: 100%;
408
- height: 8px;
409
- background: var(--light-color);
410
- border-radius: 4px;
411
- overflow: hidden;
412
- margin-top: 5px;
413
- }
414
-
415
- .progress-fill {
416
- height: 100%;
417
- background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
418
- border-radius: 4px;
419
- transition: width 0.3s ease;
420
- }
421
-
422
- .production-card {
423
- background: white;
424
- border: 1px solid var(--border-color);
425
- border-radius: 12px;
426
- padding: 20px;
427
- margin-bottom: 15px;
428
- transition: all 0.3s ease;
429
- }
430
-
431
- .production-card:hover {
432
- box-shadow: var(--shadow);
433
- transform: translateX(5px);
434
- }
435
-
436
- .production-header {
437
- display: flex;
438
- justify-content: space-between;
439
- align-items: start;
440
- margin-bottom: 15px;
441
- }
442
-
443
- .production-info {
444
- flex: 1;
445
- }
446
-
447
- .production-title {
448
- font-size: 18px;
449
- font-weight: 600;
450
- margin-bottom: 5px;
451
- }
452
-
453
- .production-meta {
454
- color: #6b7280;
455
- font-size: 14px;
456
- }
457
-
458
- .toast {
459
- position: fixed;
460
- bottom: 20px;
461
- right: 20px;
462
- background: white;
463
- padding: 15px 20px;
464
- border-radius: 10px;
465
- box-shadow: var(--shadow-lg);
466
- display: flex;
467
- align-items: center;
468
- gap: 10px;
469
- z-index: 2000;
470
- animation: slideInRight 0.3s ease;
471
- max-width: 300px;
472
- }
473
-
474
- @keyframes slideInRight {
475
- from { transform: translateX(100%); }
476
- to { transform: translateX(0); }
477
- }
478
-
479
- .toast.success {
480
- border-left: 4px solid var(--success-color);
481
- }
482
-
483
- .toast.error {
484
- border-left: 4px solid var(--danger-color);
485
- }
486
-
487
- .toast.info {
488
- border-left: 4px solid var(--primary-color);
489
- }
490
-
491
- .search-bar {
492
- position: relative;
493
- margin-bottom: 20px;
494
- }
495
-
496
- .search-input {
497
- width: 100%;
498
- padding: 12px 15px 12px 45px;
499
- border: 1px solid var(--border-color);
500
- border-radius: 10px;
501
- font-size: 14px;
502
- }
503
-
504
- .search-icon {
505
- position: absolute;
506
- left: 15px;
507
- top: 50%;
508
- transform: translateY(-50%);
509
- color: #6b7280;
510
- }
511
-
512
- .filter-group {
513
- display: flex;
514
- gap: 10px;
515
- margin-bottom: 20px;
516
- flex-wrap: wrap;
517
- }
518
-
519
- .filter-btn {
520
- padding: 8px 16px;
521
- border: 1px solid var(--border-color);
522
- background: white;
523
- border-radius: 8px;
524
- cursor: pointer;
525
- transition: all 0.3s ease;
526
- }
527
-
528
- .filter-btn:hover {
529
- background: var(--light-color);
530
- }
531
-
532
- .filter-btn.active {
533
- background: var(--primary-color);
534
- color: white;
535
- border-color: var(--primary-color);
536
- }
537
-
538
- @media (max-width: 768px) {
539
- .container {
540
- padding: 10px;
541
- }
542
-
543
- header {
544
- padding: 15px 20px;
545
- }
546
-
547
- .content-area {
548
- padding: 20px;
549
- }
550
-
551
- .form-row {
552
- grid-template-columns: 1fr;
553
- }
554
-
555
- .stats-grid {
556
- grid-template-columns: 1fr;
557
- }
558
-
559
- .nav-tabs {
560
- padding: 5px;
561
- }
562
-
563
- .nav-tab {
564
- padding: 10px 15px;
565
- font-size: 14px;
566
- }
567
- }
568
-
569
- .chart-container {
570
- background: white;
571
- border-radius: 12px;
572
- padding: 20px;
573
- margin-top: 20px;
574
- border: 1px solid var(--border-color);
575
- }
576
-
577
- .chart-header {
578
- display: flex;
579
- justify-content: space-between;
580
- align-items: center;
581
- margin-bottom: 20px;
582
- }
583
-
584
- .chart-title {
585
- font-size: 18px;
586
- font-weight: 600;
587
- }
588
-
589
- .simple-chart {
590
- display: flex;
591
- align-items: flex-end;
592
- height: 200px;
593
- gap: 10px;
594
- padding: 10px;
595
- }
596
-
597
- .chart-bar {
598
- flex: 1;
599
- background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));
600
- border-radius: 4px 4px 0 0;
601
- position: relative;
602
- transition: all 0.3s ease;
603
- }
604
-
605
- .chart-bar:hover {
606
- opacity: 0.8;
607
- }
608
-
609
- .chart-label {
610
- position: absolute;
611
- bottom: -25px;
612
- left: 50%;
613
- transform: translateX(-50%);
614
- font-size: 12px;
615
- white-space: nowrap;
616
- }
617
-
618
- .chart-value {
619
- position: absolute;
620
- top: -20px;
621
- left: 50%;
622
- transform: translateX(-50%);
623
- font-size: 12px;
624
- font-weight: 600;
625
- }
626
- </style>
627
- </head>
628
- <body>
629
- <div class="container">
630
- <header>
631
- <div class="logo">
632
- <i class="fas fa-window-maximize"></i>
633
- <span>Pencere Üretim Sistemi</span>
634
- </div>
635
- <div class="header-actions">
636
- <button class="btn btn-primary" onclick="openNewOrderModal()">
637
- <i class="fas fa-plus"></i>
638
- Yeni Sipariş
639
- </button>
640
- <div class="user-info">
641
- <div class="user-avatar">A</div>
642
- <span>Admin</span>
643
- </div>
644
- </div>
645
- </header>
646
-
647
- <nav class="nav-tabs">
648
- <div class="nav-tab active" onclick="switchTab('dashboard')">
649
- <i class="fas fa-chart-line"></i>
650
- <span>Dashboard</span>
651
- </div>
652
- <div class="nav-tab" onclick="switchTab('orders')">
653
- <i class="fas fa-clipboard-list"></i>
654
- <span>Siparişler</span>
655
- </div>
656
- <div class="nav-tab" onclick="switchTab('production')">
657
- <i class="fas fa-industry"></i>
658
- <span>Üretim</span>
659
- </div>
660
- <div class="nav-tab" onclick="switchTab('inventory')">
661
- <i class="fas fa-warehouse"></i>
662
- <span>Envanter</span>
663
- </div>
664
- <div class="nav-tab" onclick="switchTab('customers')">
665
- <i class="fas fa-users"></i>
666
- <span>Müşteriler</span>
667
- </div>
668
- <div class="nav-tab" onclick="switchTab('reports')">
669
- <i class="fas fa-file-alt"></i>
670
- <span>Raporlar</span>
671
- </div>
672
- </nav>
673
-
674
- <main class="content-area">
675
- <!-- Dashboard Tab -->
676
- <div id="dashboard" class="tab-content active">
677
- <h2 style="margin-bottom: 25px;">Genel Bakış</h2>
678
-
679
- <div class="stats-grid">
680
- <div class="stat-card">
681
- <div class="stat-icon" style="background: rgba(37, 99, 235, 0.1); color: var(--primary-color);">
682
- <i class="fas fa-clipboard-check"></i>
683
- </div>
684
- <div class="stat-value">247</div>
685
- <div class="stat-label">Aktif Sipariş</div>
686
- <span class="stat-change positive">
687
- <i class="fas fa-arrow-up"></i> 12% bu ay
688
- </span>
689
- </div>
690
-
691
- <div class="stat-card">
692
- <div class="stat-icon" style="background: rgba(16, 185, 129, 0.1); color: var(--success-color);">
693
- <i class="fas fa-box"></i>
694
- </div>
695
- <div class="stat-value">1,842</div>
696
- <div class="stat-label">Üretilen Pencere</div>
697
- <span class="stat-change positive">
698
- <i class="fas fa-arrow-up"></i> 8% bu ay
699
- </span>
700
- </div>
701
-
702
- <div class="stat-card">
703
- <div class="stat-icon" style="background: rgba(245, 158, 11, 0.1); color: var(--warning-color);">
704
- <i class="fas fa-clock"></i>
705
- </div>
706
- <div class="stat-value">32</div>
707
- <div class="stat-label">Bekleyen İş</div>
708
- <span class="stat-change negative">
709
- <i class="fas fa-arrow-down"></i> 5% bu ay
710
- </span>
711
- </div>
712
-
713
- <div class="stat-card">
714
- <div class="stat-icon" style="background: rgba(239, 68, 68, 0.1); color: var(--danger-color);">
715
- <i class="fas fa-exclamation-triangle"></i>
716
- </div>
717
- <div class="stat-value">8</div>
718
- <div class="stat-label">Gecikmiş Sipariş</div>
719
- <span class="stat-change negative">
720
- <i class="fas fa-arrow-up"></i> 2 yeni
721
- </span>
722
- </div>
723
- </div>
724
-
725
- <div class="chart-container">
726
- <div class="chart-header">
727
- <h3 class="chart-title">Aylık Üretim Grafiği</h3>
728
- <select class="form-control" style="width: 150px;">
729
- <option>Son 6 Ay</option>
730
- <option>Son 3 Ay</option>
731
- <option>Son 12 Ay</option>
732
- </select>
733
- </div>
734
- <div class="simple-chart">
735
- <div class="chart-bar" style="height: 60%;">
736
- <span class="chart-value">240</span>
737
- <span class="chart-label">Tem</span>
738
- </div>
739
- <div class="chart-bar" style="height: 75%;">
740
- <span class="chart-value">300</span>
741
- <span class="chart-label">Ağu</span>
742
- </div>
743
- <div class="chart-bar" style="height: 85%;">
744
- <span class="chart-value">340</span>
745
- <span class="chart-label">Eyl</span>
746
- </div>
747
- <div class="chart-bar" style="height: 70%;">
748
- <span class="chart-value">280</span>
749
- <span class="chart-label">Eki</span>
750
- </div>
751
- <div class="chart-bar" style="height: 90%;">
752
- <span class="chart-value">360</span>
753
- <span class="chart-label">Kas</span>
754
- </div>
755
- <div class="chart-bar" style="height: 80%;">
756
- <span class="chart-value">320</span>
757
- <span class="chart-label">Ara</span>
758
- </div>
759
- </div>
760
- </div>
761
- </div>
762
-
763
- <!-- Orders Tab -->
764
- <div id="orders" class="tab-content">
765
- <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
766
- <h2>Sipariş Yönetimi</h2>
767
- <button class="btn btn-primary" onclick="openNewOrderModal()">
768
- <i class="fas fa-plus"></i>
769
- Yeni Sipariş
770
- </button>
771
- </div>
772
-
773
- <div class="search-bar">
774
- <i class="fas fa-search search-icon"></i>
775
- <input type="text" class="search-input" placeholder="Sipariş ara..." onkeyup="searchOrders(this.value)">
776
- </div>
777
-
778
- <div class="filter-group">
779
- <button class="filter-btn active" onclick="filterOrders('all', this)">Tümü</button>
780
- <button class="filter-btn" onclick="filterOrders('pending', this)">Bekleyen</button>
781
- <button class="filter-btn" onclick="filterOrders('in-progress', this)">Üretimde</button>
782
- <button class="filter-btn" onclick="filterOrders('completed', this)">Tamamlandı</button>
783
- <button class="filter-btn" onclick="filterOrders('cancelled', this)">İptal</button>
784
- </div>
785
-
786
- <table class="data-table">
787
- <thead>
788
- <tr>
789
- <th>Sipariş No</th>
790
- <th>Müşteri</th>
791
- <th>Pencere Tipi</th>
792
- <th>Adet</th>
793
- <th>Teslim Tarihi</th>
794
- <th>Durum</th>
795
- <th>İşlemler</th>
796
- </tr>
797
- </thead>
798
- <tbody id="ordersTableBody">
799
- <tr>
800
- <td>#SIP-2024-001</td>
801
- <td>ABC İnşaat</td>
802
- <td>Çift Cam PVC</td>
803
- <td>25</td>
804
- <td>15.12.2024</td>
805
- <td><span class="status-badge in-progress">Üretimde</span></td>
806
- <td>
807
- <button class="btn btn-icon btn-secondary" onclick="editOrder('001')">
808
- <i class="fas fa-edit"></i>
809
- </button>
810
- <button class="btn btn-icon btn-secondary" onclick="viewOrder('001')">
811
- <i class="fas fa-eye"></i>
812
- </button>
813
- </td>
814
- </tr>
815
- <tr>
816
- <td>#SIP-2024-002</td>
817
- <td>XYZ Mimarlık</td>
818
- <td>Alüminyum</td>
819
- <td>15</td>
820
- <td>20.12.2024</td>
821
- <td><span class="status-badge pending">Bekleyen</span></td>
822
- <td>
823
- <button class="btn btn-icon btn-secondary" onclick="editOrder('002')">
824
- <i class="fas fa-edit"></i>
825
- </button>
826
- <button class="btn btn-icon btn-secondary" onclick="viewOrder('002')">
827
- <i class="fas fa-eye"></i>
828
- </button>
829
- </td>
830
- </tr>
831
- <tr>
832
- <td>#SIP-2024-003</td>
833
- <td>Metro Yapı</td>
834
- <td>Ahşap</td>
835
- <td>30</td>
836
- <td>10.12.2024</td>
837
- <td><span class="status-badge completed">Tamamlandı</span></td>
838
- <td>
839
- <button class="btn btn-icon btn-secondary" onclick="editOrder('003')">
840
- <i class="fas fa-edit"></i>
841
- </button>
842
- <button class="btn btn-icon btn-secondary" onclick="viewOrder('003')">
843
- <i class="fas fa-eye"></i>
844
- </button>
845
- </td>
846
- </tr>
847
- </tbody>
848
- </table>
849
- </div>
850
-
851
- <!-- Production Tab -->
852
- <div id="production" class="tab-content">
853
- <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
854
- <h2>Üretim Takibi</h2>
855
- <button class="btn btn-primary" onclick="startNewProduction()">
856
- <i class="fas fa-play"></i>
857
- Yeni Üretim Başlat
858
- </button>
859
- </div>
860
-
861
- <div class="production-card">
862
- <div class="production-header">
863
- <div class="production-info">
864
- <div class="production-title">Sipariş #SIP-2024-001</div>
865
- <div class="production-meta">
866
- <i class="fas fa-building"></i> ABC İnşaat |
867
- <i class="fas fa-window-maximize"></i> Çift Cam PVC |
868
- <i class="fas fa-box"></i> 25 adet
869
- </div>
870
- </div>
871
- <span class="status-badge in-progress">Üretimde</span>
872
- </div>
873
- <div style="margin-top: 15px;">
874
- <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
875
- <span>İlerleme</span>
876
- <span style="font-weight: 600;">65%</span>
877
- </div>
878
- <div class="progress-bar">
879
- <div class="progress-fill" style="width: 65%;"></div>
880
- </div>
881
- <div style="display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; color: #6b7280;">
882
- <span>Başlangıç: 01.12.2024</span>
883
- <span>Tahmini Bitiş: 15.12.2024</span>
884
- </div>
885
- </div>
886
- </div>
887
-
888
- <div class="production-card">
889
- <div class="production-header">
890
- <div class="production-info">
891
- <div class="production-title">Sipariş #SIP-2024-002</div>
892
- <div class="production-meta">
893
- <i class="fas fa-building"></i> XYZ Mimarlık |
894
- <i class="fas fa-window-maximize"></i> Alüminyum |
895
- <i class="fas fa-box"></i> 15 adet
896
- </div>
897
- </div>
898
- <span class="status-badge pending">Beklemede</span>
899
- </div>
900
- <div style="margin-top: 15px;">
901
- <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
902
- <span>İlerleme</span>
903
- <span style="font-weight: 600;">0%</span>
904
- </div>
905
- <div class="progress-bar">
906
- <div class="progress-fill" style="width: 0%;"></div>
907
- </div>
908
- <div style="display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; color: #6b7280;">
909
- <span>Planlanan Başlangıç: 05.12.2024</span>
910
- <span>Tahmini Bitiş: 20.12.2024</span>
911
- </div>
912
- </div>
913
- </div>
914
- </div>
915
-
916
- <!-- Inventory Tab -->
917
- <div id="inventory" class="tab-content">
918
- <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
919
- <h2>Envanter Yönetimi</h2>
920
- <button class="btn btn-primary" onclick="addInventoryItem()">
921
- <i class="fas fa-plus"></i>
922
- Malzeme Ekle
923
- </button>
924
- </div>
925
-
926
- <table class="data-table">
927
- <thead>
928
- <tr>
929
- <th>Malzeme Kodu</th>
930
- <th>Malzeme Adı</th>
931
- <th>Tip</th>
932
- <th>Miktar</th>
933
- <th>Birim</th>
934
- <th>Durum</th>
935
- <th>İşlemler</th>
936
- </tr>
937
- </thead>
938
- <tbody>
939
- <tr>
940
- <td>MZ-001</td>
941
- <td>PVC Profil 60mm</td>
942
- <td>Profil</td>
943
- <td>850</td>
944
- <td>Metre</td>
945
- <td><span class="status-badge completed">Stokta</span></td>
946
- <td>
947
- <button class="btn btn-icon btn-secondary">
948
- <i class="fas fa-edit"></i>
949
- </button>
950
- </td>
951
- </tr>
952
- <tr>
953
- <td>MZ-002</td>
954
- <td>Cam 4mm</td>
955
- <td>Cam</td>
956
- <td>120</td>
957
- <td>m²</td>
958
- <td><span class="status-badge completed">Stokta</span></td>
959
- <td>
960
- <button class="btn btn-icon btn-secondary">
961
- <i class="fas fa-edit"></i>
962
- </button>
963
- </td>
964
- </tr>
965
- <tr>
966
- <td>MZ-003</td>
967
- <td>Alüminyum Profil</td>
968
- <td>Profil</td>
969
- <td>45</td>
970
- <td>Metre</td>
971
- <td><span class="status-badge pending">Düşük Stok</span></td>
972
- <td>
973
- <button class="btn btn-icon btn-secondary">
974
- <i class="fas fa-edit"></i>
975
- </button>
976
- </td>
977
- </tr>
978
- </tbody>
979
- </table>
980
- </div>
981
-
982
- <!-- Customers Tab -->
983
- <div id="customers" class="tab-content">
984
- <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
985
- <h2>Müşteri Yönetimi</h2>
986
- <button class="btn btn-primary" onclick="openNewCustomerModal()">
987
- <i class="fas fa-user-plus"></i>
988
- Yeni Müşteri
989
- </button>
990
- </div>
991
-
992
- <div class="search-bar">
993
- <i class="fas fa-search search-icon"></i>
994
- <input type="text" class="search-input" placeholder="Müşteri ara..." onkeyup="searchCustomers(this.value)">
995
- </div>
996
-
997
- <table class="data-table">
998
- <thead>
999
- <tr>
1000
- <th>Firma Adı</th>
1001
- <th>Yetkili Kişi</th>
1002
- <th>Telefon</th>
1003
- <th>E-posta</th>
1004
- <th>Toplam Sipariş</th>
1005
- <th>Durum</th>
1006
- <th>İşlemler</th>
1007
- </tr>
1008
- </thead>
1009
- <tbody>
1010
- <tr>
1011
- <td>ABC İnşaat</td>
1012
- <td>Mehmet Yılmaz</td>
1013
- <td>0532 123 45 67</td>
1014
- <td>mehmet@abcinsaat.com</td>
1015
- <td>42</td>
1016
- <td><span class="status-badge completed">Aktif</span></td>
1017
- <td>
1018
- <button class="btn btn-icon btn-secondary">
1019
- <i class="fas fa-edit"></i>
1020
- </button>
1021
- <button class="btn btn-icon btn-secondary">
1022
- <i class="fas fa-phone"></i>
1023
- </button>
1024
- </td>
1025
- </tr>
1026
- <tr>
1027
- <td>XYZ Mimarlık</td>
1028
- <td>Ayşe Kaya</td>
1029
- <td>0533 234 56 78</td>
1030
- <td>ayse@xyzmimarlik.com</td>
1031
- <td>28</td>
1032
- <td><span class="status-badge completed">Aktif</span></td>
1033
- <td>
1034
- <button class="btn btn-icon btn-secondary">
1035
- <i class="fas fa-edit"></i>
1036
- </button>
1037
- <button class="btn btn-icon btn-secondary">
1038
- <i class="fas fa-phone"></i>
1039
- </button>
1040
- </td>
1041
- </tr>
1042
- </tbody>
1043
- </table>
1044
- </div>
1045
-
1046
- <!-- Reports Tab -->
1047
- <div id="reports" class="tab-content">
1048
- <h2 style="margin-bottom: 25px;">Raporlar</h2>
1049
-
1050
- <div class="stats-grid">
1051
- <div class="stat-card" style="cursor: pointer;" onclick="generateReport('monthly')">
1052
- <div class="stat-icon" style="background: rgba(37, 99, 235, 0.1); color: var(--primary-color);">
1053
- <i class="fas fa-file-pdf"></i>
1054
- </div>
1055
- <div class="stat-value">Aylık Rapor</div>
1056
- <div class="stat-label">Detaylı üretim raporu</div>
1057
- </div>
1058
-
1059
- <div class="stat-card" style="cursor: pointer;" onclick="generateReport('production')">
1060
- <div class="stat-icon" style="background: rgba(16, 185, 129, 0.1); color: var(--success-color);">
1061
- <i class="fas fa-chart-bar"></i>
1062
- </div>
1063
- <div class="stat-value">Üretim Analizi</div>
1064
- <div class="stat-label">Verimlilik raporu</div>
1065
- </div>
1066
-
1067
- <div class="stat-card" style="cursor: pointer;" onclick="generateReport
 
1
+ Bu kod, **Pencere Üretim Yönetim Sistemi** adında profesyonel bir web uygulamasıdır. Sistemin özelliklerini ve işlevlerini şu şekilde açıklayabilirim:
2
+
3
+ ## 🏭 **Genel Özellikler**
4
+
5
+ Bu sistem, pencere üretimi yapan firmalar için tasarlanmış kapsamlı bir yönetim panelidir. Şu modüller içerir:
6
+
7
+ ### 📊 **Dashboard (Ana Panel)**
8
+ - **Aktif Sipariş Sayısı**: Anlık sipariş takibi
9
+ - **Üretilen Pencere Sayısı**: Toplam üretim istatistiği
10
+ - **Bekleyen İşler**: İş planlaması
11
+ - **Gecikmiş Siparişler**: Risk takibi
12
+ - **Aylık Üretim Grafiği**: Görsel analiz
13
+
14
+ ### 📋 **Sipariş Yönetimi**
15
+ - Yeni sipariş oluşturma
16
+ - Sipariş arama ve filtreleme
17
+ - Durum takibi (Bekleyen, Üretimde, Tamamlandı, İptal)
18
+ - Sipariş düzenleme ve görüntüleme
19
+
20
+ ### 🏗️ **Üretim Takibi**
21
+ - Aktif üretimlerin ilerlemesi
22
+ - Başlangıç ve bitiş tarihleri
23
+ - Yüzdesel ilerleme göstergesi
24
+ - Üretim planlama
25
+
26
+ ### 📦 **Envanter Yönetimi**
27
+ - Malzeme takibi (Profil, Cam vb.)
28
+ - Stok durumu kontrolü
29
+ - Düşük stok uyarıları
30
+ - Malzeme kodu sistemi
31
+
32
+ ### 👥 **Müşteri Yönetimi**
33
+ - Firma bilgileri
34
+ - Yetkili kişi kayıtları
35
+ - İletişim bilgileri
36
+ - Toplam sipariş takibi
37
+
38
+ ### 📈 **Raporlama**
39
+ - Aylık üretim raporları
40
+ - Verimlilik analizleri
41
+ - PDF export özellikleri
42
+
43
+ ## 🎨 **Tasarım Özellikleri**
44
+
45
+ ### **Modern Arayüz**
46
+ - Gradient renkler
47
+ - Smooth animasyonlar
48
+ - Hover efektleri
49
+ - Responsive tasarım
50
+
51
+ ### **Kullanıcı Deneyimi**
52
+ - Tab tabanlı navigasyon
53
+ - Modal pencereler
54
+ - Toast bildirimleri
55
+ - Arama ve filtreleme
56
+
57
+ ### **Görsel Elementler**
58
+ - Font Awesome ikonlar
59
+ - Progress barlar
60
+ - Status badge'ler
61
+ - İnteraktif grafikler
62
+
63
+ ## 📱 **Responsive Tasarım**
64
+
65
+ Sistem tüm cihazlarda çalışır:
66
+ - **Masaüstü**: Tam özellikli görünüm
67
+ - **Tablet**: Optimize edilmiş arayüz
68
+ - **Mobil**: Kullanıcı dostu mobil görünüm
69
+
70
+ ## 🔧 **Teknik Özellikler**
71
+
72
+ - **HTML5**: Modern yapı
73
+ - **CSS3**: Grid, Flexbox, Animasyonlar
74
+ - **JavaScript**: Dinamik işlevler
75
+ - **Font Awesome**: İkon kütüphanesi
76
+ - **ES6+**: Modern JavaScript özellikleri
77
+
78
+ ## 🎯 **Kullanım Alanları**
79
+
80
+ Bu sistem özellikle şu işletmeler için ideal:
81
+ - PVC pencere üreticileri
82
+ - Alüminyum doğrama firmaları
83
+ - Ahşap pencere atölyeleri
84
+ - İnşaat malzemesi tedarikçileri
85
+
86
+ Sistem, üretim sürecini baştan sona dijitalleştirerek verimliliği artırır ve müşteri memnuniyetini yükseltir.