Hugging Face's logo

Spaces:
escambalkon
/
anycoder-92d2c3fc
Running

App Files Community
escambalkon commited on
Commit
5316320
·
verified ·
1 Parent(s): 81358f0

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1000 -19
index.html CHANGED
@@ -1,19 +1,1000 @@
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="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
+ :root {
10
+ --primary: #2563eb;
11
+ --primary-dark: #1e40af;
12
+ --secondary: #10b981;
13
+ --danger: #ef4444;
14
+ --warning: #f59e0b;
15
+ --dark: #1f2937;
16
+ --gray: #6b7280;
17
+ --light: #f3f4f6;
18
+ --white: #ffffff;
19
+ --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
20
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
21
+ --radius: 12px;
22
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
23
+ }
24
+
25
+ * {
26
+ margin: 0;
27
+ padding: 0;
28
+ box-sizing: border-box;
29
+ }
30
+
31
+ body {
32
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
33
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
34
+ min-height: 100vh;
35
+ color: var(--dark);
36
+ }
37
+
38
+ .container {
39
+ max-width: 1400px;
40
+ margin: 0 auto;
41
+ padding: 20px;
42
+ }
43
+
44
+ header {
45
+ background: rgba(255, 255, 255, 0.95);
46
+ backdrop-filter: blur(10px);
47
+ padding: 20px 0;
48
+ box-shadow: var(--shadow);
49
+ position: sticky;
50
+ top: 0;
51
+ z-index: 100;
52
+ }
53
+
54
+ .header-content {
55
+ display: flex;
56
+ justify-content: space-between;
57
+ align-items: center;
58
+ padding: 0 20px;
59
+ }
60
+
61
+ .logo {
62
+ display: flex;
63
+ align-items: center;
64
+ gap: 15px;
65
+ font-size: 24px;
66
+ font-weight: bold;
67
+ color: var(--primary);
68
+ }
69
+
70
+ .logo i {
71
+ font-size: 32px;
72
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
73
+ -webkit-background-clip: text;
74
+ -webkit-text-fill-color: transparent;
75
+ }
76
+
77
+ .stats-bar {
78
+ display: grid;
79
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
80
+ gap: 20px;
81
+ margin: 30px 0;
82
+ }
83
+
84
+ .stat-card {
85
+ background: rgba(255, 255, 255, 0.95);
86
+ backdrop-filter: blur(10px);
87
+ padding: 20px;
88
+ border-radius: var(--radius);
89
+ box-shadow: var(--shadow-sm);
90
+ transition: var(--transition);
91
+ cursor: pointer;
92
+ }
93
+
94
+ .stat-card:hover {
95
+ transform: translateY(-5px);
96
+ box-shadow: var(--shadow);
97
+ }
98
+
99
+ .stat-card .icon {
100
+ width: 50px;
101
+ height: 50px;
102
+ border-radius: 10px;
103
+ display: flex;
104
+ align-items: center;
105
+ justify-content: center;
106
+ font-size: 24px;
107
+ margin-bottom: 15px;
108
+ }
109
+
110
+ .stat-card.blue .icon { background: rgba(37, 99, 235, 0.1); color: var(--primary); }
111
+ .stat-card.green .icon { background: rgba(16, 185, 129, 0.1); color: var(--secondary); }
112
+ .stat-card.orange .icon { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
113
+ .stat-card.red .icon { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
114
+
115
+ .stat-value {
116
+ font-size: 28px;
117
+ font-weight: bold;
118
+ margin-bottom: 5px;
119
+ }
120
+
121
+ .stat-label {
122
+ color: var(--gray);
123
+ font-size: 14px;
124
+ }
125
+
126
+ .main-content {
127
+ display: grid;
128
+ grid-template-columns: 250px 1fr;
129
+ gap: 20px;
130
+ margin-top: 30px;
131
+ }
132
+
133
+ .sidebar {
134
+ background: rgba(255, 255, 255, 0.95);
135
+ backdrop-filter: blur(10px);
136
+ border-radius: var(--radius);
137
+ padding: 20px;
138
+ height: fit-content;
139
+ position: sticky;
140
+ top: 100px;
141
+ }
142
+
143
+ .nav-item {
144
+ display: flex;
145
+ align-items: center;
146
+ gap: 15px;
147
+ padding: 15px;
148
+ border-radius: 8px;
149
+ cursor: pointer;
150
+ transition: var(--transition);
151
+ margin-bottom: 10px;
152
+ color: var(--gray);
153
+ }
154
+
155
+ .nav-item:hover {
156
+ background: var(--light);
157
+ color: var(--primary);
158
+ transform: translateX(5px);
159
+ }
160
+
161
+ .nav-item.active {
162
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
163
+ color: var(--white);
164
+ }
165
+
166
+ .content-area {
167
+ background: rgba(255, 255, 255, 0.95);
168
+ backdrop-filter: blur(10px);
169
+ border-radius: var(--radius);
170
+ padding: 30px;
171
+ min-height: 600px;
172
+ }
173
+
174
+ .section {
175
+ display: none;
176
+ }
177
+
178
+ .section.active {
179
+ display: block;
180
+ animation: fadeIn 0.5s;
181
+ }
182
+
183
+ @keyframes fadeIn {
184
+ from { opacity: 0; transform: translateY(20px); }
185
+ to { opacity: 1; transform: translateY(0); }
186
+ }
187
+
188
+ .section-header {
189
+ display: flex;
190
+ justify-content: space-between;
191
+ align-items: center;
192
+ margin-bottom: 30px;
193
+ padding-bottom: 20px;
194
+ border-bottom: 2px solid var(--light);
195
+ }
196
+
197
+ .section-title {
198
+ font-size: 24px;
199
+ font-weight: 600;
200
+ }
201
+
202
+ .btn {
203
+ padding: 12px 24px;
204
+ border: none;
205
+ border-radius: 8px;
206
+ font-size: 14px;
207
+ font-weight: 600;
208
+ cursor: pointer;
209
+ transition: var(--transition);
210
+ display: inline-flex;
211
+ align-items: center;
212
+ gap: 8px;
213
+ }
214
+
215
+ .btn-primary {
216
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
217
+ color: var(--white);
218
+ }
219
+
220
+ .btn-primary:hover {
221
+ transform: translateY(-2px);
222
+ box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
223
+ }
224
+
225
+ .btn-success {
226
+ background: var(--secondary);
227
+ color: var(--white);
228
+ }
229
+
230
+ .btn-danger {
231
+ background: var(--danger);
232
+ color: var(--white);
233
+ }
234
+
235
+ .form-grid {
236
+ display: grid;
237
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
238
+ gap: 20px;
239
+ margin-bottom: 20px;
240
+ }
241
+
242
+ .form-group {
243
+ display: flex;
244
+ flex-direction: column;
245
+ }
246
+
247
+ .form-group label {
248
+ margin-bottom: 8px;
249
+ font-weight: 500;
250
+ color: var(--dark);
251
+ }
252
+
253
+ .form-control {
254
+ padding: 12px;
255
+ border: 2px solid var(--light);
256
+ border-radius: 8px;
257
+ font-size: 14px;
258
+ transition: var(--transition);
259
+ }
260
+
261
+ .form-control:focus {
262
+ outline: none;
263
+ border-color: var(--primary);
264
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
265
+ }
266
+
267
+ .table-container {
268
+ overflow-x: auto;
269
+ margin-top: 20px;
270
+ }
271
+
272
+ table {
273
+ width: 100%;
274
+ border-collapse: collapse;
275
+ }
276
+
277
+ th, td {
278
+ padding: 15px;
279
+ text-align: left;
280
+ border-bottom: 1px solid var(--light);
281
+ }
282
+
283
+ th {
284
+ background: var(--light);
285
+ font-weight: 600;
286
+ color: var(--dark);
287
+ }
288
+
289
+ tr:hover {
290
+ background: rgba(37, 99, 235, 0.05);
291
+ }
292
+
293
+ .status-badge {
294
+ padding: 5px 12px;
295
+ border-radius: 20px;
296
+ font-size: 12px;
297
+ font-weight: 600;
298
+ display: inline-block;
299
+ }
300
+
301
+ .status-pending { background: rgba(245, 158, 11, 0.1); color: var(--warning); }
302
+ .status-processing { background: rgba(37, 99, 235, 0.1); color: var(--primary); }
303
+ .status-completed { background: rgba(16, 185, 129, 0.1); color: var(--secondary); }
304
+
305
+ .modal {
306
+ display: none;
307
+ position: fixed;
308
+ top: 0;
309
+ left: 0;
310
+ width: 100%;
311
+ height: 100%;
312
+ background: rgba(0, 0, 0, 0.5);
313
+ backdrop-filter: blur(5px);
314
+ z-index: 1000;
315
+ align-items: center;
316
+ justify-content: center;
317
+ }
318
+
319
+ .modal.active {
320
+ display: flex;
321
+ animation: fadeIn 0.3s;
322
+ }
323
+
324
+ .modal-content {
325
+ background: var(--white);
326
+ border-radius: var(--radius);
327
+ padding: 30px;
328
+ max-width: 600px;
329
+ width: 90%;
330
+ max-height: 90vh;
331
+ overflow-y: auto;
332
+ animation: slideUp 0.3s;
333
+ }
334
+
335
+ @keyframes slideUp {
336
+ from { transform: translateY(50px); opacity: 0; }
337
+ to { transform: translateY(0); opacity: 1; }
338
+ }
339
+
340
+ .modal-header {
341
+ display: flex;
342
+ justify-content: space-between;
343
+ align-items: center;
344
+ margin-bottom: 20px;
345
+ }
346
+
347
+ .modal-title {
348
+ font-size: 20px;
349
+ font-weight: 600;
350
+ }
351
+
352
+ .close-btn {
353
+ background: none;
354
+ border: none;
355
+ font-size: 24px;
356
+ cursor: pointer;
357
+ color: var(--gray);
358
+ transition: var(--transition);
359
+ }
360
+
361
+ .close-btn:hover {
362
+ color: var(--danger);
363
+ }
364
+
365
+ .window-types {
366
+ display: grid;
367
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
368
+ gap: 15px;
369
+ margin: 20px 0;
370
+ }
371
+
372
+ .window-type-card {
373
+ padding: 20px;
374
+ border: 2px solid var(--light);
375
+ border-radius: 8px;
376
+ text-align: center;
377
+ cursor: pointer;
378
+ transition: var(--transition);
379
+ }
380
+
381
+ .window-type-card:hover {
382
+ border-color: var(--primary);
383
+ transform: translateY(-3px);
384
+ box-shadow: var(--shadow-sm);
385
+ }
386
+
387
+ .window-type-card.selected {
388
+ border-color: var(--primary);
389
+ background: rgba(37, 99, 235, 0.05);
390
+ }
391
+
392
+ .window-type-card i {
393
+ font-size: 32px;
394
+ color: var(--primary);
395
+ margin-bottom: 10px;
396
+ }
397
+
398
+ .calculation-result {
399
+ background: var(--light);
400
+ padding: 20px;
401
+ border-radius: 8px;
402
+ margin-top: 20px;
403
+ }
404
+
405
+ .result-item {
406
+ display: flex;
407
+ justify-content: space-between;
408
+ padding: 10px 0;
409
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
410
+ }
411
+
412
+ .result-item:last-child {
413
+ border-bottom: none;
414
+ font-size: 18px;
415
+ font-weight: bold;
416
+ color: var(--primary);
417
+ margin-top: 10px;
418
+ padding-top: 20px;
419
+ }
420
+
421
+ .action-buttons {
422
+ display: flex;
423
+ gap: 10px;
424
+ }
425
+
426
+ .btn-sm {
427
+ padding: 8px 16px;
428
+ font-size: 12px;
429
+ }
430
+
431
+ .toast {
432
+ position: fixed;
433
+ bottom: 20px;
434
+ right: 20px;
435
+ background: var(--dark);
436
+ color: var(--white);
437
+ padding: 15px 20px;
438
+ border-radius: 8px;
439
+ display: none;
440
+ align-items: center;
441
+ gap: 10px;
442
+ animation: slideInRight 0.3s;
443
+ z-index: 2000;
444
+ }
445
+
446
+ .toast.show {
447
+ display: flex;
448
+ }
449
+
450
+ .toast.success { background: var(--secondary); }
451
+ .toast.error { background: var(--danger); }
452
+
453
+ @keyframes slideInRight {
454
+ from { transform: translateX(100%); }
455
+ to { transform: translateX(0); }
456
+ }
457
+
458
+ @media (max-width: 768px) {
459
+ .main-content {
460
+ grid-template-columns: 1fr;
461
+ }
462
+
463
+ .sidebar {
464
+ position: static;
465
+ display: flex;
466
+ overflow-x: auto;
467
+ gap: 10px;
468
+ }
469
+
470
+ .nav-item {
471
+ white-space: nowrap;
472
+ }
473
+
474
+ .stats-bar {
475
+ grid-template-columns: 1fr;
476
+ }
477
+
478
+ .form-grid {
479
+ grid-template-columns: 1fr;
480
+ }
481
+ }
482
+
483
+ .built-with {
484
+ color: var(--gray);
485
+ font-size: 12px;
486
+ text-decoration: none;
487
+ transition: var(--transition);
488
+ }
489
+
490
+ .built-with:hover {
491
+ color: var(--primary);
492
+ }
493
+ </style>
494
+ </head>
495
+ <body>
496
+ <header>
497
+ <div class="header-content">
498
+ <div class="logo">
499
+ <i class="fas fa-window-maximize"></i>
500
+ <span>PencerePro</span>
501
+ </div>
502
+ <div>
503
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
504
+ Built with anycoder <i class="fas fa-external-link-alt"></i>
505
+ </a>
506
+ </div>
507
+ </div>
508
+ </header>
509
+
510
+ <div class="container">
511
+ <div class="stats-bar">
512
+ <div class="stat-card blue">
513
+ <div class="icon">
514
+ <i class="fas fa-clipboard-list"></i>
515
+ </div>
516
+ <div class="stat-value" id="totalOrders">24</div>
517
+ <div class="stat-label">Toplam Sipariş</div>
518
+ </div>
519
+ <div class="stat-card green">
520
+ <div class="icon">
521
+ <i class="fas fa-check-circle"></i>
522
+ </div>
523
+ <div class="stat-value" id="completedOrders">18</div>
524
+ <div class="stat-label">Tamamlanan</div>
525
+ </div>
526
+ <div class="stat-card orange">
527
+ <div class="icon">
528
+ <i class="fas fa-cogs"></i>
529
+ </div>
530
+ <div class="stat-value" id="processingOrders">4</div>
531
+ <div class="stat-label">Üretimde</div>
532
+ </div>
533
+ <div class="stat-card red">
534
+ <div class="icon">
535
+ <i class="fas fa-exclamation-triangle"></i>
536
+ </div>
537
+ <div class="stat-value" id="pendingOrders">2</div>
538
+ <div class="stat-label">Bekleyen</div>
539
+ </div>
540
+ </div>
541
+
542
+ <div class="main-content">
543
+ <aside class="sidebar">
544
+ <nav>
545
+ <div class="nav-item active" onclick="showSection('orders')">
546
+ <i class="fas fa-shopping-cart"></i>
547
+ <span>Siparişler</span>
548
+ </div>
549
+ <div class="nav-item" onclick="showSection('newOrder')">
550
+ <i class="fas fa-plus-circle"></i>
551
+ <span>Yeni Sipariş</span>
552
+ </div>
553
+ <div class="nav-item" onclick="showSection('calculator')">
554
+ <i class="fas fa-calculator"></i>
555
+ <span>Hesaplama</span>
556
+ </div>
557
+ <div class="nav-item" onclick="showSection('production')">
558
+ <i class="fas fa-industry"></i>
559
+ <span>Üretim</span>
560
+ </div>
561
+ <div class="nav-item" onclick="showSection('materials')">
562
+ <i class="fas fa-boxes"></i>
563
+ <span>Malzemeler</span>
564
+ </div>
565
+ <div class="nav-item" onclick="showSection('reports')">
566
+ <i class="fas fa-chart-bar"></i>
567
+ <span>Raporlar</span>
568
+ </div>
569
+ </nav>
570
+ </aside>
571
+
572
+ <main class="content-area">
573
+ <!-- Siparişler Bölümü -->
574
+ <section id="orders" class="section active">
575
+ <div class="section-header">
576
+ <h2 class="section-title">Siparişler</h2>
577
+ <button class="btn btn-primary" onclick="showSection('newOrder')">
578
+ <i class="fas fa-plus"></i> Yeni Sipariş
579
+ </button>
580
+ </div>
581
+ <div class="table-container">
582
+ <table>
583
+ <thead>
584
+ <tr>
585
+ <th>Sipariş No</th>
586
+ <th>Müşteri</th>
587
+ <th>Pencere Tipi</th>
588
+ <th>Ölçüler</th>
589
+ <th>Tarih</th>
590
+ <th>Durum</th>
591
+ <th>İşlemler</th>
592
+ </tr>
593
+ </thead>
594
+ <tbody id="ordersTableBody">
595
+ <tr>
596
+ <td>#2024001</td>
597
+ <td>Ahmet Yılmaz</td>
598
+ <td>Çift Kanatlı</td>
599
+ <td>120x150 cm</td>
600
+ <td>15.01.2024</td>
601
+ <td><span class="status-badge status-completed">Tamamlandı</span></td>
602
+ <td>
603
+ <div class="action-buttons">
604
+ <button class="btn btn-primary btn-sm" onclick="viewOrder(1)">
605
+ <i class="fas fa-eye"></i>
606
+ </button>
607
+ <button class="btn btn-success btn-sm" onclick="editOrder(1)">
608
+ <i class="fas fa-edit"></i>
609
+ </button>
610
+ <button class="btn btn-danger btn-sm" onclick="deleteOrder(1)">
611
+ <i class="fas fa-trash"></i>
612
+ </button>
613
+ </div>
614
+ </td>
615
+ </tr>
616
+ <tr>
617
+ <td>#2024002</td>
618
+ <td>Ayşe Demir</td>
619
+ <td>Sabit</td>
620
+ <td>100x120 cm</td>
621
+ <td>16.01.2024</td>
622
+ <td><span class="status-badge status-processing">Üretimde</span></td>
623
+ <td>
624
+ <div class="action-buttons">
625
+ <button class="btn btn-primary btn-sm" onclick="viewOrder(2)">
626
+ <i class="fas fa-eye"></i>
627
+ </button>
628
+ <button class="btn btn-success btn-sm" onclick="editOrder(2)">
629
+ <i class="fas fa-edit"></i>
630
+ </button>
631
+ <button class="btn btn-danger btn-sm" onclick="deleteOrder(2)">
632
+ <i class="fas fa-trash"></i>
633
+ </button>
634
+ </div>
635
+ </td>
636
+ </tr>
637
+ <tr>
638
+ <td>#2024003</td>
639
+ <td>Mehmet Kaya</td>
640
+ <td>Panjur</td>
641
+ <td>90x110 cm</td>
642
+ <td>17.01.2024</td>
643
+ <td><span class="status-badge status-pending">Beklemede</span></td>
644
+ <td>
645
+ <div class="action-buttons">
646
+ <button class="btn btn-primary btn-sm" onclick="viewOrder(3)">
647
+ <i class="fas fa-eye"></i>
648
+ </button>
649
+ <button class="btn btn-success btn-sm" onclick="editOrder(3)">
650
+ <i class="fas fa-edit"></i>
651
+ </button>
652
+ <button class="btn btn-danger btn-sm" onclick="deleteOrder(3)">
653
+ <i class="fas fa-trash"></i>
654
+ </button>
655
+ </div>
656
+ </td>
657
+ </tr>
658
+ </tbody>
659
+ </table>
660
+ </div>
661
+ </section>
662
+
663
+ <!-- Yeni Sipariş Bölümü -->
664
+ <section id="newOrder" class="section">
665
+ <div class="section-header">
666
+ <h2 class="section-title">Yeni Sipariş Oluştur</h2>
667
+ </div>
668
+ <form id="newOrderForm">
669
+ <div class="form-grid">
670
+ <div class="form-group">
671
+ <label>Müşteri Adı</label>
672
+ <input type="text" class="form-control" id="customerName" required>
673
+ </div>
674
+ <div class="form-group">
675
+ <label>Telefon</label>
676
+ <input type="tel" class="form-control" id="customerPhone" required>
677
+ </div>
678
+ <div class="form-group">
679
+ <label>Adres</label>
680
+ <input type="text" class="form-control" id="customerAddress" required>
681
+ </div>
682
+ </div>
683
+
684
+ <h3 style="margin: 30px 0 20px;">Pencere Bilgileri</h3>
685
+ <div class="window-types">
686
+ <div class="window-type-card" onclick="selectWindowType(this, 'sabit')">
687
+ <i class="fas fa-square"></i>
688
+ <div>Sabit</div>
689
+ </div>
690
+ <div class="window-type-card" onclick="selectWindowType(this, 'ciftKanat')">
691
+ <i class="fas fa-columns"></i>
692
+ <div>Çift Kanatlı</div>
693
+ </div>
694
+ <div class="window-type-card" onclick="selectWindowType(this, 'tekKanat')">
695
+ <i class="fas fa-door-open"></i>
696
+ <div>Tek Kanatlı</div>
697
+ </div>
698
+ <div class="window-type-card" onclick="selectWindowType(this, 'panjur')">
699
+ <i class="fas fa-bars"></i>
700
+ <div>Panjur</div>
701
+ </div>
702
+ </div>
703
+
704
+ <div class="form-grid">
705
+ <div class="form-group">
706
+ <label>Genişlik (cm)</label>
707
+ <input type="number" class="form-control" id="width" required>
708
+ </div>
709
+ <div class="form-group">
710
+ <label>Yükseklik (cm)</label>
711
+ <input type="number" class="form-control" id="height" required>
712
+ </div>
713
+ <div class="form-group">
714
+ <label>Renk</label>
715
+ <select class="form-control" id="color">
716
+ <option>Beyaz</option>
717
+ <option>Kahve</option>
718
+ <option>Ahşap</option>
719
+ <option>Gri</option>
720
+ <option>Siyah</option>
721
+ </select>
722
+ </div>
723
+ <div class="form-group">
724
+ <label>Cam Tipi</label>
725
+ <select class="form-control" id="glassType">
726
+ <option>Çift Cam</option>
727
+ <option>Tek Cam</option>
728
+ <option>Lamine</option>
729
+ <option>Low-E</option>
730
+ </select>
731
+ </div>
732
+ <div class="form-group">
733
+ <label>Adet</label>
734
+ <input type="number" class="form-control" id="quantity" value="1" min="1" required>
735
+ </div>
736
+ <div class="form-group">
737
+ <label>Teslim Tarihi</label>
738
+ <input type="date" class="form-control" id="deliveryDate" required>
739
+ </div>
740
+ </div>
741
+
742
+ <div class="calculation-result" id="calculationResult" style="display: none;">
743
+ <h4>Fiyat Hesaplaması</h4>
744
+ <div class="result-item">
745
+ <span>Metrekare Fiyatı:</span>
746
+ <span id="m2Price">₺0</span>
747
+ </div>
748
+ <div class="result-item">
749
+ <span>Malzeme Maliyeti:</span>
750
+ <span id="materialCost">₺0</span>
751
+ </div>
752
+ <div class="result-item">
753
+ <span>İşçilik:</span>
754
+ <span id="laborCost">₺0</span>
755
+ </div>
756
+ <div class="result-item">
757
+ <span>Toplam Fiyat:</span>
758
+ <span id="totalPrice">₺0</span>
759
+ </div>
760
+ </div>
761
+
762
+ <div style="margin-top: 30px; display: flex; gap: 10px;">
763
+ <button type="button" class="btn btn-primary" onclick="calculatePrice()">
764
+ <i class="fas fa-calculator"></i> Hesapla
765
+ </button>
766
+ <button type="submit" class="btn btn-success">
767
+ <i class="fas fa-save"></i> Siparişi Kaydet
768
+ </button>
769
+ <button type="button" class="btn btn-danger" onclick="resetForm()">
770
+ <i class="fas fa-times"></i> İptal
771
+ </button>
772
+ </div>
773
+ </form>
774
+ </section>
775
+
776
+ <!-- Hesaplama Bölümü -->
777
+ <section id="calculator" class="section">
778
+ <div class="section-header">
779
+ <h2 class="section-title">Hızlı Hesaplama</h2>
780
+ </div>
781
+ <div class="form-grid">
782
+ <div class="form-group">
783
+ <label>Pencere Tipi</label>
784
+ <select class="form-control" id="calcWindowType">
785
+ <option value="sabit">Sabit</option>
786
+ <option value="ciftKanat">Çift Kanatlı</option>
787
+ <option value="tekKanat">Tek Kanatlı</option>
788
+ <option value="panjur">Panjur</option>
789
+ </select>
790
+ </div>
791
+ <div class="form-group">
792
+ <label>Genişlik (cm)</label>
793
+ <input type="number" class="form-control" id="calcWidth">
794
+ </div>
795
+ <div class="form-group">
796
+ <label>Yükseklik (cm)</label>
797
+ <input type="number" class="form-control" id="calcHeight">
798
+ </div>
799
+ <div class="form-group">
800
+ <label>Cam Tipi</label>
801
+ <select class="form-control" id="calcGlassType">
802
+ <option value="cift">Çift Cam</option>
803
+ <option value="tek">Tek Cam</option>
804
+ <option value="lamine">Lamine</option>
805
+ </select>
806
+ </div>
807
+ </div>
808
+ <button class="btn btn-primary" onclick="quickCalculate()">
809
+ <i class="fas fa-calculator"></i> Hesapla
810
+ </button>
811
+ <div class="calculation-result" id="quickResult" style="display: none; margin-top: 20px;">
812
+ <h4>Hesaplama Sonucu</h4>
813
+ <div class="result-item">
814
+ <span>Metrekare:</span>
815
+ <span id="quickM2">0 m²</span>
816
+ </div>
817
+ <div class="result-item">
818
+ <span>Birim Fiyat:</span>
819
+ <span id="quickUnitPrice">₺0/m²</span>
820
+ </div>
821
+ <div class="result-item">
822
+ <span>Toplam Fiyat:</span>
823
+ <span id="quickTotalPrice">₺0</span>
824
+ </div>
825
+ </div>
826
+ </section>
827
+
828
+ <!-- Üretim Bölümü -->
829
+ <section id="production" class="section">
830
+ <div class="section-header">
831
+ <h2 class="section-title">Üretim Takibi</h2>
832
+ </div>
833
+ <div class="table-container">
834
+ <table>
835
+ <thead>
836
+ <tr>
837
+ <th>Sipariş No</th>
838
+ <th>Müşteri</th>
839
+ <th>Başlangıç</th>
840
+ <th>Bitiş</th>
841
+ <th>İlerleme</th>
842
+ <th>Durum</th>
843
+ <th>İşlem</th>
844
+ </tr>
845
+ </thead>
846
+ <tbody>
847
+ <tr>
848
+ <td>#2024002</td>
849
+ <td>Ayşe Demir</td>
850
+ <td>16.01.2024</td>
851
+ <td>20.01.2024</td>
852
+ <td>
853
+ <div style="background: #e5e7eb; border-radius: 10px; height: 20px; overflow: hidden;">
854
+ <div style="background: #10b981; width: 65%; height: 100%; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px;">65%</div>
855
+ </div>
856
+ </td>
857
+ <td><span class="status-badge status-processing">Üretimde</span></td>
858
+ <td>
859
+ <button class="btn btn-primary btn-sm" onclick="updateProgress(2)">
860
+ <i class="fas fa-edit"></i> Güncelle
861
+ </button>
862
+ </td>
863
+ </tr>
864
+ </tbody>
865
+ </table>
866
+ </div>
867
+ </section>
868
+
869
+ <!-- Malzemeler Bölümü -->
870
+ <section id="materials" class="section">
871
+ <div class="section-header">
872
+ <h2 class="section-title">Malzeme Stok</h2>
873
+ <button class="btn btn-primary" onclick="addMaterial()">
874
+ <i class="fas fa-plus"></i> Malzeme Ekle
875
+ </button>
876
+ </div>
877
+ <div class="table-container">
878
+ <table>
879
+ <thead>
880
+ <tr>
881
+ <th>Malzeme</th>
882
+ <th>Tür</th>
883
+ <th>Stok</th>
884
+ <th>Birim</th>
885
+ <th>Kritik Seviye</th>
886
+ <th>Son Güncelleme</th>
887
+ <th>Durum</th>
888
+ </tr>
889
+ </thead>
890
+ <tbody>
891
+ <tr>
892
+ <td>PVC Profil</td>
893
+ <td>Çerçeve</td>
894
+ <td>450</td>
895
+ <td>Metre</td>
896
+ <td>100</td>
897
+ <td>18.01.2024</td>
898
+ <td><span class="status-badge status-completed">Yeterli</span></td>
899
+ </tr>
900
+ <tr>
901
+ <td>Cam</td>
902
+ <td>Çift Cam</td>
903
+ <td>85</td>
904
+ <td>m²</td>
905
+ <td>50</td>
906
+ <td>17.01.2024</td>
907
+ <td><span class="status-badge status-completed">Yeterli</span></td>
908
+ </tr>
909
+ <tr>
910
+ <td>Kilit Mekanizması</td>
911
+ <td>Aksesuar</td>
912
+ <td>45</td>
913
+ <td>Adet</td>
914
+ <td>20</td>
915
+ <td>16.01.2024</td>
916
+ <td><span class="status-badge status-completed">Yeterli</span></td>
917
+ </tr>
918
+ </tbody>
919
+ </table>
920
+ </div>
921
+ </section>
922
+
923
+ <!-- Raporlar Bölümü -->
924
+ <section id="reports" class="section">
925
+ <div class="section-header">
926
+ <h2 class="section-title">Raporlar</h2>
927
+ </div>
928
+ <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;">
929
+ <div class="stat-card blue">
930
+ <div class="icon">
931
+ <i class="fas fa-chart-line"></i>
932
+ </div>
933
+ <div class="stat-value">₺125,450</div>
934
+ <div class="stat-label">Bu Ay Ciro</div>
935
+ </div>
936
+ <div class="stat-card green">
937
+ <div class="icon">
938
+ <i class="fas fa-box"></i>
939
+ </div>
940
+ <div class="stat-value">142</div>
941
+ <div class="stat-label">Üretilen Pencere</div>
942
+ </div>
943
+ <div class="stat-card orange">
944
+ <div class="icon">
945
+ <i class="fas fa-users"></i>
946
+ </div>
947
+ <div class="stat-value">89</div>
948
+ <div class="stat-label">Toplam Müşteri</div>
949
+ </div>
950
+ </div>
951
+ <div style="margin-top: 30px;">
952
+ <h3>Aylık Satış Grafiği</h3>
953
+ <div style="background: var(--light); padding: 40px; border-radius: 8px; text-align: center; margin-top: 20px;">
954
+ <i class="fas fa-chart-bar" style="font-size: 48px; color: var(--primary); margin-bottom: 20px;"></i>
955
+ <p>Grafik görseli burada gösterilecektir</p>
956
+ </div>
957
+ </div>
958
+ </section>
959
+ </main>
960
+ </div>
961
+ </div>
962
+
963
+ <!-- Modal -->
964
+ <div id="modal" class="modal">
965
+ <div class="modal-content">
966
+ <div class="modal-header">
967
+ <h3 class="modal-title" id="modalTitle">Modal Başlığı</h3>
968
+ <button class="close-btn" onclick="closeModal()">
969
+ <i class="fas fa-times"></i>
970
+ </button>
971
+ </div>
972
+ <div id="modalBody">
973
+ Modal içeriği
974
+ </div>
975
+ </div>
976
+ </div>
977
+
978
+ <!-- Toast -->
979
+ <div id="toast" class="toast">
980
+ <i class="fas fa-check-circle"></i>
981
+ <span id="toastMessage">İşlem başarılı!</span>
982
+ </div>
983
+
984
+ <script>
985
+ let selectedWindowType = '';
986
+ let orders = JSON.parse(localStorage.getItem('orders')) || [];
987
+
988
+ // Bölüm gösterme
989
+ function showSection(sectionId) {
990
+ const sections = document.querySelectorAll('.section');
991
+ sections.forEach(section => section.classList.remove('active'));
992
+
993
+ const navItems = document.querySelectorAll('.nav-item');
994
+ navItems.forEach(item => item.classList.remove('active'));
995
+
996
+ document.getElementById(sectionId).classList.add('active');
997
+ event.target.closest('.nav-item').classList.add('active');
998
+ }
999
+
1000
+ // Pencere tipi seçimi