Hugging Face's logo

Spaces:
escambalkon
/
anycoder-92d2c3fc
Running

App Files Community
escambalkon commited on
Commit
ba5f92d
·
verified ·
1 Parent(s): cf8a5d2

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1075 -1093
index.html CHANGED
@@ -1,1113 +1,1095 @@
1
  <!DOCTYPE html>
2
  <html lang="tr">
3
-
4
  <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>PencerePro - Üretim Yönetim Sistemi</title>
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
- <style>
10
- :root {
11
- --primary: #2563eb;
12
- --primary-dark: #1e40af;
13
- --secondary: #10b981;
14
- --danger: #ef4444;
15
- --warning: #f59e0b;
16
- --dark: #1f2937;
17
- --gray: #6b7280;
18
- --light: #f3f4f6;
19
- --white: #ffffff;
20
- --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
21
- --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
22
- --radius: 12px;
23
- --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
24
- }
25
-
26
- * {
27
- margin: 0;
28
- padding: 0;
29
- box-sizing: border-box;
30
- }
31
-
32
- body {
33
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
34
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
35
- min-height: 100vh;
36
- color: var(--dark);
37
- }
38
-
39
- /* Login Container */
40
- .login-container {
41
- display: flex;
42
- justify-content: center;
43
- align-items: center;
44
- min-height: 100vh;
45
- padding: 20px;
46
- }
47
-
48
- .login-card {
49
- background: var(--white);
50
- border-radius: var(--radius);
51
- box-shadow: var(--shadow);
52
- width: 100%;
53
- max-width: 450px;
54
- padding: 40px;
55
- animation: slideUp 0.5s;
56
- }
57
-
58
- @keyframes slideUp {
59
- from {
60
- transform: translateY(50px);
61
- opacity: 0;
62
- }
63
- to {
64
- transform: translateY(0);
65
- opacity: 1;
66
- }
67
- }
68
-
69
- .login-header {
70
- text-align: center;
71
- margin-bottom: 40px;
72
- }
73
-
74
- .login-logo {
75
- display: flex;
76
- align-items: center;
77
- justify-content: center;
78
- gap: 15px;
79
- font-size: 32px;
80
- font-weight: bold;
81
- color: var(--primary);
82
- margin-bottom: 10px;
83
- }
84
-
85
- .login-logo i {
86
- font-size: 48px;
87
- background: linear-gradient(135deg, var(--primary), var(--secondary));
88
- -webkit-background-clip: text;
89
- -webkit-text-fill-color: transparent;
90
- }
91
-
92
- .login-subtitle {
93
- color: var(--gray);
94
- font-size: 14px;
95
- }
96
-
97
- .form-group {
98
- margin-bottom: 20px;
99
- }
100
-
101
- .form-group label {
102
- display: block;
103
- margin-bottom: 8px;
104
- font-weight: 500;
105
- color: var(--dark);
106
- }
107
-
108
- .input-group {
109
- position: relative;
110
- }
111
-
112
- .input-group i {
113
- position: absolute;
114
- left: 15px;
115
- top: 50%;
116
- transform: translateY(-50%);
117
- color: var(--gray);
118
- }
119
-
120
- .form-control {
121
- width: 100%;
122
- padding: 12px 15px 12px 45px;
123
- border: 2px solid var(--light);
124
- border-radius: 8px;
125
- font-size: 14px;
126
- transition: var(--transition);
127
- }
128
-
129
- .form-control:focus {
130
- outline: none;
131
- border-color: var(--primary);
132
- box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
133
- }
134
-
135
- .btn {
136
- width: 100%;
137
- padding: 12px 24px;
138
- border: none;
139
- border-radius: 8px;
140
- font-size: 14px;
141
- font-weight: 600;
142
- cursor: pointer;
143
- transition: var(--transition);
144
- display: inline-flex;
145
- align-items: center;
146
- justify-content: center;
147
- gap: 8px;
148
- }
149
-
150
- .btn-primary {
151
- background: linear-gradient(135deg, var(--primary), var(--primary-dark));
152
- color: var(--white);
153
- }
154
-
155
- .btn-primary:hover {
156
- transform: translateY(-2px);
157
- box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
158
- }
159
-
160
- .btn-secondary {
161
- background: var(--light);
162
- color: var(--dark);
163
- }
164
-
165
- .btn-secondary:hover {
166
- background: #e5e7eb;
167
- }
168
-
169
- .login-footer {
170
- text-align: center;
171
- margin-top: 30px;
172
- padding-top: 20px;
173
- border-top: 1px solid var(--light);
174
- }
175
-
176
- .login-footer a {
177
- color: var(--primary);
178
- text-decoration: none;
179
- font-weight: 500;
180
- }
181
-
182
- .login-footer a:hover {
183
- text-decoration: underline;
184
- }
185
-
186
- .auth-tabs {
187
- display: flex;
188
- margin-bottom: 30px;
189
- background: var(--light);
190
- border-radius: 8px;
191
- padding: 4px;
192
- }
193
-
194
- .auth-tab {
195
- flex: 1;
196
- padding: 10px;
197
- background: transparent;
198
- border: none;
199
- border-radius: 6px;
200
- cursor: pointer;
201
- font-weight: 500;
202
- color: var(--gray);
203
- transition: var(--transition);
204
- }
205
-
206
- .auth-tab.active {
207
- background: var(--white);
208
- color: var(--primary);
209
- box-shadow: var(--shadow-sm);
210
- }
211
-
212
- .subscription-info {
213
- background: linear-gradient(135deg, var(--primary), var(--primary-dark));
214
- color: var(--white);
215
- padding: 20px;
216
- border-radius: 8px;
217
- margin-bottom: 30px;
218
- text-align: center;
219
- }
220
-
221
- .subscription-info h3 {
222
- margin-bottom: 10px;
223
- }
224
-
225
- .subscription-info p {
226
- font-size: 14px;
227
- opacity: 0.9;
228
- }
229
-
230
- /* Main App Styles */
231
- .app-container {
232
- display: none;
233
- }
234
-
235
- .container {
236
- max-width: 1400px;
237
- margin: 0 auto;
238
- padding: 20px;
239
- }
240
-
241
- header {
242
- background: rgba(255, 255, 255, 0.95);
243
- backdrop-filter: blur(10px);
244
- padding: 20px 0;
245
- box-shadow: var(--shadow);
246
- position: sticky;
247
- top: 0;
248
- z-index: 100;
249
- }
250
-
251
- .header-content {
252
- display: flex;
253
- justify-content: space-between;
254
- align-items: center;
255
- padding: 0 20px;
256
- }
257
-
258
- .logo {
259
- display: flex;
260
- align-items: center;
261
- gap: 15px;
262
- font-size: 24px;
263
- font-weight: bold;
264
- color: var(--primary);
265
- }
266
-
267
- .logo i {
268
- font-size: 32px;
269
- background: linear-gradient(135deg, var(--primary), var(--secondary));
270
- -webkit-background-clip: text;
271
- -webkit-text-fill-color: transparent;
272
- }
273
-
274
- .user-info {
275
- display: flex;
276
- align-items: center;
277
- gap: 20px;
278
- }
279
-
280
- .user-avatar {
281
- width: 40px;
282
- height: 40px;
283
- border-radius: 50%;
284
- background: linear-gradient(135deg, var(--primary), var(--secondary));
285
- color: var(--white);
286
- display: flex;
287
- align-items: center;
288
- justify-content: center;
289
- font-weight: bold;
290
- }
291
-
292
- .user-details {
293
- display: flex;
294
- flex-direction: column;
295
- }
296
-
297
- .user-name {
298
- font-weight: 600;
299
- color: var(--dark);
300
- }
301
-
302
- .user-role {
303
- font-size: 12px;
304
- color: var(--gray);
305
- }
306
-
307
- .btn-logout {
308
- padding: 8px 16px;
309
- background: var(--danger);
310
- color: var(--white);
311
- border: none;
312
- border-radius: 6px;
313
- cursor: pointer;
314
- transition: var(--transition);
315
- font-size: 14px;
316
- }
317
-
318
- .btn-logout:hover {
319
- background: #dc2626;
320
- }
321
-
322
- .stats-bar {
323
- display: grid;
324
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
325
- gap: 20px;
326
- margin: 30px 0;
327
- }
328
-
329
- .stat-card {
330
- background: rgba(255, 255, 255, 0.95);
331
- backdrop-filter: blur(10px);
332
- padding: 20px;
333
- border-radius: var(--radius);
334
- box-shadow: var(--shadow-sm);
335
- transition: var(--transition);
336
- cursor: pointer;
337
- }
338
-
339
- .stat-card:hover {
340
- transform: translateY(-5px);
341
- box-shadow: var(--shadow);
342
- }
343
-
344
- .stat-card .icon {
345
- width: 50px;
346
- height: 50px;
347
- border-radius: 10px;
348
- display: flex;
349
- align-items: center;
350
- justify-content: center;
351
- font-size: 24px;
352
- margin-bottom: 15px;
353
- }
354
-
355
- .stat-card.blue .icon {
356
- background: rgba(37, 99, 235, 0.1);
357
- color: var(--primary);
358
- }
359
-
360
- .stat-card.green .icon {
361
- background: rgba(16, 185, 129, 0.1);
362
- color: var(--secondary);
363
- }
364
-
365
- .stat-card.orange .icon {
366
- background: rgba(245, 158, 11, 0.1);
367
- color: var(--warning);
368
- }
369
-
370
- .stat-card.red .icon {
371
- background: rgba(239, 68, 68, 0.1);
372
- color: var(--danger);
373
- }
374
-
375
- .stat-value {
376
- font-size: 28px;
377
- font-weight: bold;
378
- margin-bottom: 5px;
379
- }
380
-
381
- .stat-label {
382
- color: var(--gray);
383
- font-size: 14px;
384
- }
385
-
386
- .main-content {
387
- display: grid;
388
- grid-template-columns: 250px 1fr;
389
- gap: 20px;
390
- margin-top: 30px;
391
- }
392
-
393
- .sidebar {
394
- background: rgba(255, 255, 255, 0.95);
395
- backdrop-filter: blur(10px);
396
- border-radius: var(--radius);
397
- padding: 20px;
398
- height: fit-content;
399
- position: sticky;
400
- top: 100px;
401
- }
402
-
403
- .nav-item {
404
- display: flex;
405
- align-items: center;
406
- gap: 15px;
407
- padding: 15px;
408
- border-radius: 8px;
409
- cursor: pointer;
410
- transition: var(--transition);
411
- margin-bottom: 10px;
412
- color: var(--gray);
413
- }
414
-
415
- .nav-item:hover {
416
- background: var(--light);
417
- color: var(--primary);
418
- transform: translateX(5px);
419
- }
420
-
421
- .nav-item.active {
422
- background: linear-gradient(135deg, var(--primary), var(--primary-dark));
423
- color: var(--white);
424
- }
425
-
426
- .content-area {
427
- background: rgba(255, 255, 255, 0.95);
428
- backdrop-filter: blur(10px);
429
- border-radius: var(--radius);
430
- padding: 30px;
431
- min-height: 600px;
432
- }
433
-
434
- .section {
435
- display: none;
436
- }
437
-
438
- .section.active {
439
- display: block;
440
- animation: fadeIn 0.5s;
441
- }
442
-
443
- @keyframes fadeIn {
444
- from {
445
- opacity: 0;
446
- transform: translateY(20px);
447
- }
448
- to {
449
- opacity: 1;
450
- transform: translateY(0);
451
- }
452
- }
453
-
454
- .section-header {
455
- display: flex;
456
- justify-content: space-between;
457
- align-items: center;
458
- margin-bottom: 30px;
459
- padding-bottom: 20px;
460
- border-bottom: 2px solid var(--light);
461
- }
462
-
463
- .section-title {
464
- font-size: 24px;
465
- font-weight: 600;
466
- }
467
-
468
- .btn-sm {
469
- padding: 8px 16px;
470
- font-size: 12px;
471
- }
472
-
473
- .table-container {
474
- overflow-x: auto;
475
- margin-top: 20px;
476
- }
477
-
478
- table {
479
- width: 100%;
480
- border-collapse: collapse;
481
- }
482
-
483
- th,
484
- td {
485
- padding: 15px;
486
- text-align: left;
487
- border-bottom: 1px solid var(--light);
488
- }
489
-
490
- th {
491
- background: var(--light);
492
- font-weight: 600;
493
- color: var(--dark);
494
- }
495
-
496
- tr:hover {
497
- background: rgba(37, 99, 235, 0.05);
498
- }
499
-
500
- .status-badge {
501
- padding: 5px 12px;
502
- border-radius: 20px;
503
- font-size: 12px;
504
- font-weight: 600;
505
- display: inline-block;
506
- }
507
-
508
- .status-pending {
509
- background: rgba(245, 158, 11, 0.1);
510
- color: var(--warning);
511
- }
512
-
513
- .status-processing {
514
- background: rgba(37, 99, 235, 0.1);
515
- color: var(--primary);
516
- }
517
-
518
- .status-completed {
519
- background: rgba(16, 185, 129, 0.1);
520
- color: var(--secondary);
521
- }
522
-
523
- .toast {
524
- position: fixed;
525
- bottom: 20px;
526
- right: 20px;
527
- background: var(--dark);
528
- color: var(--white);
529
- padding: 15px 20px;
530
- border-radius: 8px;
531
- display: none;
532
- align-items: center;
533
- gap: 10px;
534
- animation: slideInRight 0.3s;
535
- z-index: 2000;
536
- }
537
-
538
- .toast.show {
539
- display: flex;
540
- }
541
-
542
- .toast.success {
543
- background: var(--secondary);
544
- }
545
-
546
- .toast.error {
547
- background: var(--danger);
548
- }
549
-
550
- @keyframes slideInRight {
551
- from {
552
- transform: translateX(100%);
553
- }
554
- to {
555
- transform: translateX(0);
556
- }
557
- }
558
-
559
- .built-with {
560
- color: var(--gray);
561
- font-size: 12px;
562
- text-decoration: none;
563
- transition: var(--transition);
564
- }
565
-
566
- .built-with:hover {
567
- color: var(--primary);
568
- }
569
-
570
- @media (max-width: 768px) {
571
- .main-content {
572
- grid-template-columns: 1fr;
573
- }
574
-
575
- .sidebar {
576
- position: static;
577
- display: flex;
578
- overflow-x: auto;
579
- gap: 10px;
580
- }
581
-
582
- .nav-item {
583
- white-space: nowrap;
584
- }
585
-
586
- .stats-bar {
587
- grid-template-columns: 1fr;
588
- }
589
-
590
- .header-content {
591
- flex-direction: column;
592
- gap: 15px;
593
- }
594
-
595
- .user-info {
596
- width: 100%;
597
- justify-content: space-between;
598
- }
599
- }
600
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
601
  </head>
602
 
603
  <body>
604
- <!-- Login Container -->
605
- <div id="loginContainer" class="login-container">
606
- <div class="login-card">
607
- <div class="login-header">
608
- <div class="login-logo">
609
- <i class="fas fa-window-maximize"></i>
610
- <span>PencerePro</span>
611
- </div>
612
- <p class="login-subtitle">Pencere Üretim Yönetim Sistemi</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
613
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
614
 
615
- <div class="subscription-info">
616
- <h3><i class="fas fa-crown"></i> Premium Lisans</h3>
617
- <p>Bu sistem kiralık bir yazılımdır. Lütfen giriş bilgilerinizi kullanın.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
618
  </div>
 
619
 
620
- <div class="auth-tabs">
621
- <button class="auth-tab active" onclick="switchTab('login')">Giriş Yap</button>
622
- <button class="auth-tab" onclick="switchTab('register')">Kayıt Ol</button>
 
623
  </div>
 
 
 
 
 
 
624
 
625
- <!-- Login Form -->
626
- <form id="loginForm" onsubmit="handleLogin(event)">
627
- <div class="form-group">
628
- <label>E-posta / Kullanıcı Adı</label>
629
- <div class="input-group">
630
- <i class="fas fa-user"></i>
631
- <input type="text" class="form-control" id="loginUsername" required placeholder="E-posta veya kullanıcı adı">
632
- </div>
633
- </div>
634
- <div class="form-group">
635
- <label>Şifre</label>
636
- <div class="input-group">
637
- <i class="fas fa-lock"></i>
638
- <input type="password" class="form-control" id="loginPassword" required placeholder="Şifreniz">
639
- </div>
640
- </div>
641
- <button type="submit" class="btn btn-primary">
642
- <i class="fas fa-sign-in-alt"></i> Giriş Yap
643
- </button>
644
- </form>
645
-
646
- <!-- Register Form -->
647
- <form id="registerForm" style="display: none;" onsubmit="handleRegister(event)">
648
- <div class="form-group">
649
- <label>Ad Soyad</label>
650
- <div class="input-group">
651
- <i class="fas fa-user"></i>
652
- <input type="text" class="form-control" id="registerName" required placeholder="Adınız ve soyadınız">
653
- </div>
654
- </div>
655
- <div class="form-group">
656
- <label>Kullanıcı Adı</label>
657
- <div class="input-group">
658
- <i class="fas fa-id-badge"></i>
659
- <input type="text" class="form-control" id="registerUsername" required placeholder="Kullanıcı adı">
660
- </div>
661
- </div>
662
- <div class="form-group">
663
- <label>E-posta</label>
664
- <div class="input-group">
665
- <i class="fas fa-envelope"></i>
666
- <input type="email" class="form-control" id="registerEmail" required placeholder="E-posta adresiniz">
667
- </div>
668
- </div>
669
- <div class="form-group">
670
- <label>Şifre</label>
671
- <div class="input-group">
672
- <i class="fas fa-lock"></i>
673
- <input type="password" class="form-control" id="registerPassword" required placeholder="Şifreniz">
674
- </div>
675
- </div>
676
- <div class="form-group">
677
- <label>Şifre Tekrar</label>
678
- <div class="input-group">
679
- <i class="fas fa-lock"></i>
680
- <input type="password" class="form-control" id="registerPasswordConfirm" required placeholder="Şifrenizi tekrar girin">
681
- </div>
682
- </div>
683
- <button type="submit" class="btn btn-primary">
684
- <i class="fas fa-user-plus"></i> Kayıt Ol
685
- </button>
686
- </form>
687
-
688
- <div class="login-footer">
689
- <p>© 2024 PencerePro - Tüm hakları saklıdır</p>
690
- <p style="margin-top: 10px;">
691
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
692
- Built with anycoder <i class="fas fa-external-link-alt"></i>
693
- </a>
694
- </p>
695
  </div>
696
- </div>
697
- </div>
 
 
 
 
698
 
699
- <!-- Main Application -->
700
- <div id="appContainer" class="app-container">
701
- <header>
702
- <div class="header-content">
703
- <div class="logo">
704
- <i class="fas fa-window-maximize"></i>
705
- <span>PencerePro</span>
706
- </div>
707
- <div class="user-info">
708
- <div class="user-avatar" id="userAvatar">A</div>
709
- <div class="user-details">
710
- <span class="user-name" id="userName">Admin User</span>
711
- <span class="user-role" id="userRole">Yönetici</span>
712
- </div>
713
- <button class="btn-logout" onclick="logout()">
714
- <i class="fas fa-sign-out-alt"></i> Çıkış
715
- </button>
716
- </div>
717
  </div>
718
- </header>
719
-
720
- <div class="container">
721
- <div class="stats-bar">
722
- <div class="stat-card blue">
723
- <div class="icon">
724
- <i class="fas fa-clipboard-list"></i>
725
- </div>
726
- <div class="stat-value" id="totalOrders">24</div>
727
- <div class="stat-label">Toplam Sipariş</div>
728
- </div>
729
- <div class="stat-card green">
730
- <div class="icon">
731
- <i class="fas fa-check-circle"></i>
732
- </div>
733
- <div class="stat-value" id="completedOrders">18</div>
734
- <div class="stat-label">Tamamlanan</div>
735
- </div>
736
- <div class="stat-card orange">
737
- <div class="icon">
738
- <i class="fas fa-cogs"></i>
739
- </div>
740
- <div class="stat-value" id="processingOrders">4</div>
741
- <div class="stat-label">Üretimde</div>
742
- </div>
743
- <div class="stat-card red">
744
- <div class="icon">
745
- <i class="fas fa-exclamation-triangle"></i>
746
- </div>
747
- <div class="stat-value" id="pendingOrders">2</div>
748
- <div class="stat-label">Bekleyen</div>
749
- </div>
750
  </div>
 
751
 
752
- <div class="main-content">
753
- <aside class="sidebar">
754
- <nav>
755
- <div class="nav-item active" onclick="showSection('dashboard')">
756
- <i class="fas fa-tachometer-alt"></i>
757
- <span>Panel</span>
758
- </div>
759
- <div class="nav-item" onclick="showSection('orders')">
760
- <i class="fas fa-shopping-cart"></i>
761
- <span>Siparişler</span>
762
- </div>
763
- <div class="nav-item" onclick="showSection('newOrder')">
764
- <i class="fas fa-plus-circle"></i>
765
- <span>Yeni Sipariş</span>
766
- </div>
767
- <div class="nav-item" onclick="showSection('calculator')">
768
- <i class="fas fa-calculator"></i>
769
- <span>Hesaplama</span>
770
- </div>
771
- <div class="nav-item" onclick="showSection('production')">
772
- <i class="fas fa-industry"></i>
773
- <span>Üretim</span>
774
- </div>
775
- <div class="nav-item" onclick="showSection('materials')">
776
- <i class="fas fa-boxes"></i>
777
- <span>Malzemeler</span>
778
- </div>
779
- <div class="nav-item" onclick="showSection('reports')">
780
- <i class="fas fa-chart-bar"></i>
781
- <span>Raporlar</span>
782
- </div>
783
- <div class="nav-item" onclick="showSection('users')" id="usersNavItem" style="display: none;">
784
- <i class="fas fa-users"></i>
785
- <span>Kullanıcılar</span>
786
- </div>
787
- </nav>
788
- </aside>
789
-
790
- <main class="content-area">
791
- <!-- Dashboard Section -->
792
- <section id="dashboard" class="section active">
793
- <div class="section-header">
794
- <h2 class="section-title">Hoş Geldiniz!</h2>
795
- </div>
796
- <div style="text-align: center; padding: 40px;">
797
- <i class="fas fa-chart-line" style="font-size: 64px; color: var(--primary); margin-bottom: 20px;"></i>
798
- <h3>PencerePro Yönetim Paneli</h3>
799
- <p style="color: var(--gray); margin-top: 10px;">Sol menüden işlem seçebilirsiniz.</p>
800
- </div>
801
- </section>
802
-
803
- <!-- Orders Section -->
804
- <section id="orders" class="section">
805
- <div class="section-header">
806
- <h2 class="section-title">Siparişler</h2>
807
- </div>
808
- <div class="table-container">
809
- <table>
810
- <thead>
811
- <tr>
812
- <th>Sipariş No</th>
813
- <th>Müşteri</th>
814
- <th>Pencere Tipi</th>
815
- <th>Ölçüler</th>
816
- <th>Tarih</th>
817
- <th>Durum</th>
818
- </tr>
819
- </thead>
820
- <tbody>
821
- <tr>
822
- <td>#2024001</td>
823
- <td>Ahmet Yılmaz</td>
824
- <td>Çift Kanatlı</td>
825
- <td>120x150 cm</td>
826
- <td>15.01.2024</td>
827
- <td><span class="status-badge status-completed">Tamamlandı</span></td>
828
- </tr>
829
- <tr>
830
- <td>#2024002</td>
831
- <td>Ayşe Demir</td>
832
- <td>Sabit</td>
833
- <td>100x120 cm</td>
834
- <td>16.01.2024</td>
835
- <td><span class="status-badge status-processing">Üretimde</span></td>
836
- </tr>
837
- <tr>
838
- <td>#2024003</td>
839
- <td>Mehmet Kaya</td>
840
- <td>Panjur</td>
841
- <td>90x110 cm</td>
842
- <td>17.01.2024</td>
843
- <td><span class="status-badge status-pending">Beklemede</span></td>
844
- </tr>
845
- </tbody>
846
- </table>
847
- </div>
848
- </section>
849
-
850
- <!-- New Order Section -->
851
- <section id="newOrder" class="section">
852
- <div class="section-header">
853
- <h2 class="section-title">Yeni Sipariş</h2>
854
- </div>
855
- <div style="text-align: center; padding: 40px;">
856
- <i class="fas fa-plus-circle" style="font-size: 64px; color: var(--primary); margin-bottom: 20px;"></i>
857
- <h3>Yeni Sipariş Formu</h3>
858
- <p style="color: var(--gray); margin-top: 10px;">Sipariş formu burada gösterilecektir.</p>
859
- </div>
860
- </section>
861
-
862
- <!-- Calculator Section -->
863
- <section id="calculator" class="section">
864
- <div class="section-header">
865
- <h2 class="section-title">Hesaplama</h2>
866
- </div>
867
- <div style="text-align: center; padding: 40px;">
868
- <i class="fas fa-calculator" style="font-size: 64px; color: var(--primary); margin-bottom: 20px;"></i>
869
- <h3>Fiyat Hesaplama</h3>
870
- <p style="color: var(--gray); margin-top: 10px;">Hesaplama aracı burada gösterilecektir.</p>
871
- </div>
872
- </section>
873
-
874
- <!-- Production Section -->
875
- <section id="production" class="section">
876
- <div class="section-header">
877
- <h2 class="section-title">Üretim Takibi</h2>
878
- </div>
879
- <div style="text-align: center; padding: 40px;">
880
- <i class="fas fa-industry" style="font-size: 64px; color: var(--primary); margin-bottom: 20px;"></i>
881
- <h3>Üretim Yönetimi</h3>
882
- <p style="color: var(--gray); margin-top: 10px;">Üretim takip arayüzü burada gösterilecektir.</p>
883
- </div>
884
- </section>
885
-
886
- <!-- Materials Section -->
887
- <section id="materials" class="section">
888
- <div class="section-header">
889
- <h2 class="section-title">Malzeme Stok</h2>
890
- </div>
891
- <div style="text-align: center; padding: 40px;">
892
- <i class="fas fa-boxes" style="font-size: 64px; color: var(--primary); margin-bottom: 20px;"></i>
893
- <h3>Stok Yönetimi</h3>
894
- <p style="color: var(--gray); margin-top: 10px;">Malzeme stok arayüzü burada gösterilecektir.</p>
895
- </div>
896
- </section>
897
-
898
- <!-- Reports Section -->
899
- <section id="reports" class="section">
900
- <div class="section-header">
901
- <h2 class="section-title">Raporlar</h2>
902
- </div>
903
- <div style="text-align: center; padding: 40px;">
904
- <i class="fas fa-chart-bar" style="font-size: 64px; color: var(--primary); margin-bottom: 20px;"></i>
905
- <h3>Raporlama</h3>
906
- <p style="color: var(--gray); margin-top: 10px;">Raporlama arayüzü burada gösterilecektir.</p>
907
- </div>
908
- </section>
909
-
910
- <!-- Users Section -->
911
- <section id="users" class="section">
912
- <div class="section-header">
913
- <h2 class="section-title">Kullanıcı Yönetimi</h2>
914
- <button class="btn btn-primary" onclick="showAddUserModal()">
915
- <i class="fas fa-plus"></i> Yeni Kullanıcı
916
- </button>
917
- </div>
918
- <div class="table-container">
919
- <table>
920
- <thead>
921
- <tr>
922
- <th>Kullanıcı Adı</th>
923
- <th>Ad Soyad</th>
924
- <th>E-posta</th>
925
- <th>Rol</th>
926
- <th>Durum</th>
927
- <th>İşlemler</th>
928
- </tr>
929
- </thead>
930
- <tbody id="usersTableBody">
931
- <!-- Users will be loaded here -->
932
- </tbody>
933
- </table>
934
- </div>
935
- </section>
936
- </main>
937
  </div>
938
- </div>
939
- </div>
 
 
 
 
940
 
941
- <!-- Toast Notification -->
942
- <div id="toast" class="toast">
943
- <i class="fas fa-check-circle"></i>
944
- <span id="toastMessage">İşlem başarılı!</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
945
  </div>
946
-
947
- <script>
948
- // User Management System
949
- let currentUser = null;
950
- let users = JSON.parse(localStorage.getItem('pencereProUsers')) || [];
951
-
952
- // Initialize default admin user if no users exist
953
- if (users.length === 0) {
954
- users = [
955
- {
956
- id: 1,
957
- username: 'admin',
958
- email: 'admin@pencerepro.com',
959
- name: 'Administrator',
960
- password: 'admin123',
961
- role: 'admin',
962
- status: 'active',
963
- createdAt: new Date().toISOString()
964
- }
965
- ];
966
- localStorage.setItem('pencereProUsers', JSON.stringify(users));
967
- }
968
-
969
- // Check if user is already logged in
970
- window.onload = function() {
971
- const savedUser = localStorage.getItem('pencereProCurrentUser');
972
- if (savedUser) {
973
- currentUser = JSON.parse(savedUser);
974
- showApp();
975
- }
976
- };
977
-
978
- function switchTab(tab) {
979
- const tabs = document.querySelectorAll('.auth-tab');
980
- tabs.forEach(t => t.classList.remove('active'));
981
-
982
- if (tab === 'login') {
983
- tabs[0].classList.add('active');
984
- document.getElementById('loginForm').style.display = 'block';
985
- document.getElementById('registerForm').style.display = 'none';
986
- } else {
987
- tabs[1].classList.add('active');
988
- document.getElementById('loginForm').style.display = 'none';
989
- document.getElementById('registerForm').style.display = 'block';
990
- }
991
- }
992
-
993
- function handleLogin(event) {
994
- event.preventDefault();
995
-
996
- const username = document.getElementById('loginUsername').value;
997
- const password = document.getElementById('loginPassword').value;
998
-
999
- const user = users.find(u =>
1000
- (u.username === username || u.email === username) && u.password === password
1001
- );
1002
-
1003
- if (user) {
1004
- if (user.status !== 'active') {
1005
- showToast('Hesabınız devre dışı!', 'error');
1006
- return;
1007
- }
1008
-
1009
- currentUser = user;
1010
- localStorage.setItem('pencereProCurrentUser', JSON.stringify(user));
1011
- showToast('Giriş başarılı!', 'success');
1012
- showApp();
1013
- } else {
1014
- showToast('Kullanıcı adı veya şifre hatalı!', 'error');
1015
- }
1016
- }
1017
-
1018
- function handleRegister(event) {
1019
- event.preventDefault();
1020
-
1021
- const name = document.getElementById('registerName').value;
1022
- const username = document.getElementById('registerUsername').value;
1023
- const email = document.getElementById('registerEmail').value;
1024
- const password = document.getElementById('registerPassword').value;
1025
- const passwordConfirm = document.getElementById('registerPasswordConfirm').value;
1026
-
1027
- if (password !== passwordConfirm) {
1028
- showToast('Şifreler eşleşmiyor!', 'error');
1029
- return;
1030
- }
1031
-
1032
- if (users.find(u => u.username === username)) {
1033
- showToast('Bu kullanıcı adı zaten kullanılıyor!', 'error');
1034
- return;
1035
- }
1036
-
1037
- if (users.find(u => u.email === email)) {
1038
- showToast('Bu e-posta zaten kayıtlı!', 'error');
1039
- return;
1040
- }
1041
-
1042
- const newUser = {
1043
- id: users.length + 1,
1044
- username: username,
1045
- email: email,
1046
- name: name,
1047
- password: password,
1048
- role: 'user',
1049
- status: 'active',
1050
- createdAt: new Date().toISOString()
1051
- };
1052
-
1053
- users.push(newUser);
1054
- localStorage.setItem('pencereProUsers', JSON.stringify(users));
1055
-
1056
- showToast('Kayıt başarılı! Giriş yapabilirsiniz.', 'success');
1057
- switchTab('login');
1058
-
1059
- // Clear form
1060
- document.getElementById('registerForm').reset();
1061
- }
1062
-
1063
- function showApp() {
1064
- document.getElementById('loginContainer').style.display = 'none';
1065
- document.getElementById('appContainer').style.display = 'block';
1066
-
1067
- // Update user info in header
1068
- document.getElementById('userName').textContent = currentUser.name;
1069
- document.getElementById('userRole').textContent = currentUser.role === 'admin' ? 'Yönetici' : 'Kullanıcı';
1070
- document.getElementById('userAvatar').textContent = currentUser.name.charAt(0).toUpperCase();
1071
-
1072
- // Show/hide admin features
1073
- if (currentUser.role === 'admin') {
1074
- document.getElementById('usersNavItem').style.display = 'flex';
1075
- }
1076
-
1077
- // Load users table if admin
1078
- if (currentUser.role === 'admin') {
1079
- loadUsersTable();
1080
- }
1081
- }
1082
-
1083
- function logout() {
1084
- currentUser = null;
1085
- localStorage.removeItem('pencereProCurrentUser');
1086
- document.getElementById('loginContainer').style.display = 'flex';
1087
- document.getElementById('appContainer').style.display = 'none';
1088
- document.getElementById('loginForm').reset();
1089
- showToast('Çıkış yapıldı.', 'success');
1090
- }
1091
-
1092
- function showSection(sectionId) {
1093
- const sections = document.querySelectorAll('.section');
1094
- sections.forEach(section => section.classList.remove('active'));
1095
-
1096
- const navItems = document.querySelectorAll('.nav-item');
1097
- navItems.forEach(item => item.classList.remove('active'));
1098
-
1099
- document.getElementById(sectionId).classList.add('active');
1100
- event.target.closest('.nav-item').classList.add('active');
1101
- }
1102
-
1103
- function loadUsersTable() {
1104
- const tbody = document.getElementById('usersTableBody');
1105
- tbody.innerHTML = '';
1106
-
1107
- users.forEach(user => {
1108
- const tr = document.createElement('tr');
1109
- tr.innerHTML = `
1110
- <td>${user.username}</td>
1111
- <td>${user.name}</td>
1112
- <td>${user.email}</td>
1113
- <td>${user.role === 'admin' ? 'Yönetici
 
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>PencerePro - Ü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
+ /* Login Container */
39
+ .login-container {
40
+ display: flex;
41
+ justify-content: center;
42
+ align-items: center;
43
+ min-height: 100vh;
44
+ padding: 20px;
45
+ }
46
+
47
+ .login-card {
48
+ background: var(--white);
49
+ border-radius: var(--radius);
50
+ box-shadow: var(--shadow);
51
+ width: 100%;
52
+ max-width: 480px;
53
+ padding: 40px;
54
+ animation: slideUp 0.5s;
55
+ }
56
+
57
+ @keyframes slideUp {
58
+ from {
59
+ transform: translateY(50px);
60
+ opacity: 0;
61
+ }
62
+ to {
63
+ transform: translateY(0);
64
+ opacity: 1;
65
+ }
66
+ }
67
+
68
+ .login-header {
69
+ text-align: center;
70
+ margin-bottom: 30px;
71
+ }
72
+
73
+ .login-logo {
74
+ display: flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+ gap: 15px;
78
+ font-size: 32px;
79
+ font-weight: bold;
80
+ color: var(--primary);
81
+ margin-bottom: 10px;
82
+ }
83
+
84
+ .login-logo i {
85
+ font-size: 48px;
86
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
87
+ -webkit-background-clip: text;
88
+ -webkit-text-fill-color: transparent;
89
+ }
90
+
91
+ .login-subtitle {
92
+ color: var(--gray);
93
+ font-size: 14px;
94
+ }
95
+
96
+ .form-group {
97
+ margin-bottom: 20px;
98
+ }
99
+
100
+ .form-group label {
101
+ display: block;
102
+ margin-bottom: 8px;
103
+ font-weight: 500;
104
+ color: var(--dark);
105
+ }
106
+
107
+ .input-group {
108
+ position: relative;
109
+ }
110
+
111
+ .input-group i {
112
+ position: absolute;
113
+ left: 15px;
114
+ top: 50%;
115
+ transform: translateY(-50%);
116
+ color: var(--gray);
117
+ }
118
+
119
+ .form-control {
120
+ width: 100%;
121
+ padding: 12px 15px 12px 45px;
122
+ border: 2px solid var(--light);
123
+ border-radius: 8px;
124
+ font-size: 14px;
125
+ transition: var(--transition);
126
+ }
127
+
128
+ .form-control:focus {
129
+ outline: none;
130
+ border-color: var(--primary);
131
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
132
+ }
133
+
134
+ .btn {
135
+ width: 100%;
136
+ padding: 12px 24px;
137
+ border: none;
138
+ border-radius: 8px;
139
+ font-size: 14px;
140
+ font-weight: 600;
141
+ cursor: pointer;
142
+ transition: var(--transition);
143
+ display: inline-flex;
144
+ align-items: center;
145
+ justify-content: center;
146
+ gap: 8px;
147
+ }
148
+
149
+ .btn-primary {
150
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
151
+ color: var(--white);
152
+ }
153
+
154
+ .btn-primary:hover {
155
+ transform: translateY(-2px);
156
+ box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
157
+ }
158
+
159
+ .btn-secondary {
160
+ background: var(--light);
161
+ color: var(--dark);
162
+ }
163
+
164
+ .btn-secondary:hover {
165
+ background: #e5e7eb;
166
+ }
167
+
168
+ .login-footer {
169
+ text-align: center;
170
+ margin-top: 30px;
171
+ padding-top: 20px;
172
+ border-top: 1px solid var(--light);
173
+ }
174
+
175
+ .login-footer a {
176
+ color: var(--primary);
177
+ text-decoration: none;
178
+ font-weight: 500;
179
+ }
180
+
181
+ .login-footer a:hover {
182
+ text-decoration: underline;
183
+ }
184
+
185
+ .auth-tabs {
186
+ display: flex;
187
+ margin-bottom: 25px;
188
+ background: var(--light);
189
+ border-radius: 8px;
190
+ padding: 4px;
191
+ }
192
+
193
+ .auth-tab {
194
+ flex: 1;
195
+ padding: 10px;
196
+ background: transparent;
197
+ border: none;
198
+ border-radius: 6px;
199
+ cursor: pointer;
200
+ font-weight: 500;
201
+ color: var(--gray);
202
+ transition: var(--transition);
203
+ }
204
+
205
+ .auth-tab.active {
206
+ background: var(--white);
207
+ color: var(--primary);
208
+ box-shadow: var(--shadow-sm);
209
+ }
210
+
211
+ .subscription-info {
212
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
213
+ color: var(--white);
214
+ padding: 20px;
215
+ border-radius: 8px;
216
+ margin-bottom: 25px;
217
+ text-align: center;
218
+ }
219
+
220
+ .subscription-info h3 {
221
+ margin-bottom: 10px;
222
+ }
223
+
224
+ .subscription-info p {
225
+ font-size: 14px;
226
+ opacity: 0.9;
227
+ }
228
+
229
+ .admin-hint {
230
+ background: #fef3c7;
231
+ border: 1px solid #fbbf24;
232
+ color: #92400e;
233
+ padding: 12px;
234
+ border-radius: 8px;
235
+ margin-bottom: 20px;
236
+ font-size: 13px;
237
+ }
238
+
239
+ .admin-hint i {
240
+ margin-right: 8px;
241
+ }
242
+
243
+ /* Main App Styles */
244
+ .app-container {
245
+ display: none;
246
+ }
247
+
248
+ .container {
249
+ max-width: 1400px;
250
+ margin: 0 auto;
251
+ padding: 20px;
252
+ }
253
+
254
+ header {
255
+ background: rgba(255, 255, 255, 0.95);
256
+ backdrop-filter: blur(10px);
257
+ padding: 20px 0;
258
+ box-shadow: var(--shadow);
259
+ position: sticky;
260
+ top: 0;
261
+ z-index: 100;
262
+ }
263
+
264
+ .header-content {
265
+ display: flex;
266
+ justify-content: space-between;
267
+ align-items: center;
268
+ padding: 0 20px;
269
+ }
270
+
271
+ .logo {
272
+ display: flex;
273
+ align-items: center;
274
+ gap: 15px;
275
+ font-size: 24px;
276
+ font-weight: bold;
277
+ color: var(--primary);
278
+ }
279
+
280
+ .logo i {
281
+ font-size: 32px;
282
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
283
+ -webkit-background-clip: text;
284
+ -webkit-text-fill-color: transparent;
285
+ }
286
+
287
+ .user-info {
288
+ display: flex;
289
+ align-items: center;
290
+ gap: 20px;
291
+ }
292
+
293
+ .user-avatar {
294
+ width: 40px;
295
+ height: 40px;
296
+ border-radius: 50%;
297
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
298
+ color: var(--white);
299
+ display: flex;
300
+ align-items: center;
301
+ justify-content: center;
302
+ font-weight: bold;
303
+ }
304
+
305
+ .user-details {
306
+ display: flex;
307
+ flex-direction: column;
308
+ }
309
+
310
+ .user-name {
311
+ font-weight: 600;
312
+ color: var(--dark);
313
+ }
314
+
315
+ .user-role {
316
+ font-size: 12px;
317
+ color: var(--gray);
318
+ }
319
+
320
+ .btn-logout {
321
+ padding: 8px 16px;
322
+ background: var(--danger);
323
+ color: var(--white);
324
+ border: none;
325
+ border-radius: 6px;
326
+ cursor: pointer;
327
+ transition: var(--transition);
328
+ font-size: 14px;
329
+ }
330
+
331
+ .btn-logout:hover {
332
+ background: #dc2626;
333
+ }
334
+
335
+ .stats-bar {
336
+ display: grid;
337
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
338
+ gap: 20px;
339
+ margin: 30px 0;
340
+ }
341
+
342
+ .stat-card {
343
+ background: rgba(255, 255, 255, 0.95);
344
+ backdrop-filter: blur(10px);
345
+ padding: 20px;
346
+ border-radius: var(--radius);
347
+ box-shadow: var(--shadow-sm);
348
+ transition: var(--transition);
349
+ cursor: pointer;
350
+ }
351
+
352
+ .stat-card:hover {
353
+ transform: translateY(-5px);
354
+ box-shadow: var(--shadow);
355
+ }
356
+
357
+ .stat-card .icon {
358
+ width: 50px;
359
+ height: 50px;
360
+ border-radius: 10px;
361
+ display: flex;
362
+ align-items: center;
363
+ justify-content: center;
364
+ font-size: 24px;
365
+ margin-bottom: 15px;
366
+ }
367
+
368
+ .stat-card.blue .icon {
369
+ background: rgba(37, 99, 235, 0.1);
370
+ color: var(--primary);
371
+ }
372
+
373
+ .stat-card.green .icon {
374
+ background: rgba(16, 185, 129, 0.1);
375
+ color: var(--secondary);
376
+ }
377
+
378
+ .stat-card.orange .icon {
379
+ background: rgba(245, 158, 11, 0.1);
380
+ color: var(--warning);
381
+ }
382
+
383
+ .stat-card.red .icon {
384
+ background: rgba(239, 68, 68, 0.1);
385
+ color: var(--danger);
386
+ }
387
+
388
+ .stat-value {
389
+ font-size: 28px;
390
+ font-weight: bold;
391
+ margin-bottom: 5px;
392
+ }
393
+
394
+ .stat-label {
395
+ color: var(--gray);
396
+ font-size: 14px;
397
+ }
398
+
399
+ .main-content {
400
+ display: grid;
401
+ grid-template-columns: 250px 1fr;
402
+ gap: 20px;
403
+ margin-top: 30px;
404
+ }
405
+
406
+ .sidebar {
407
+ background: rgba(255, 255, 255, 0.95);
408
+ backdrop-filter: blur(10px);
409
+ border-radius: var(--radius);
410
+ padding: 20px;
411
+ height: fit-content;
412
+ position: sticky;
413
+ top: 100px;
414
+ }
415
+
416
+ .nav-item {
417
+ display: flex;
418
+ align-items: center;
419
+ gap: 15px;
420
+ padding: 15px;
421
+ border-radius: 8px;
422
+ cursor: pointer;
423
+ transition: var(--transition);
424
+ margin-bottom: 10px;
425
+ color: var(--gray);
426
+ }
427
+
428
+ .nav-item:hover {
429
+ background: var(--light);
430
+ color: var(--primary);
431
+ transform: translateX(5px);
432
+ }
433
+
434
+ .nav-item.active {
435
+ background: linear-gradient(135deg, var(--primary), var(--primary-dark));
436
+ color: var(--white);
437
+ }
438
+
439
+ .content-area {
440
+ background: rgba(255, 255, 255, 0.95);
441
+ backdrop-filter: blur(10px);
442
+ border-radius: var(--radius);
443
+ padding: 30px;
444
+ min-height: 600px;
445
+ }
446
+
447
+ .section {
448
+ display: none;
449
+ }
450
+
451
+ .section.active {
452
+ display: block;
453
+ animation: fadeIn 0.5s;
454
+ }
455
+
456
+ @keyframes fadeIn {
457
+ from {
458
+ opacity: 0;
459
+ transform: translateY(20px);
460
+ }
461
+ to {
462
+ opacity: 1;
463
+ transform: translateY(0);
464
+ }
465
+ }
466
+
467
+ .section-header {
468
+ display: flex;
469
+ justify-content: space-between;
470
+ align-items: center;
471
+ margin-bottom: 30px;
472
+ padding-bottom: 20px;
473
+ border-bottom: 2px solid var(--light);
474
+ }
475
+
476
+ .section-title {
477
+ font-size: 24px;
478
+ font-weight: 600;
479
+ }
480
+
481
+ .btn-sm {
482
+ padding: 8px 16px;
483
+ font-size: 12px;
484
+ }
485
+
486
+ .table-container {
487
+ overflow-x: auto;
488
+ margin-top: 20px;
489
+ }
490
+
491
+ table {
492
+ width: 100%;
493
+ border-collapse: collapse;
494
+ }
495
+
496
+ th,
497
+ td {
498
+ padding: 15px;
499
+ text-align: left;
500
+ border-bottom: 1px solid var(--light);
501
+ }
502
+
503
+ th {
504
+ background: var(--light);
505
+ font-weight: 600;
506
+ color: var(--dark);
507
+ }
508
+
509
+ tr:hover {
510
+ background: rgba(37, 99, 235, 0.05);
511
+ }
512
+
513
+ .status-badge {
514
+ padding: 5px 12px;
515
+ border-radius: 20px;
516
+ font-size: 12px;
517
+ font-weight: 600;
518
+ display: inline-block;
519
+ }
520
+
521
+ .status-pending {
522
+ background: rgba(245, 158, 11, 0.1);
523
+ color: var(--warning);
524
+ }
525
+
526
+ .status-processing {
527
+ background: rgba(37, 99, 235, 0.1);
528
+ color: var(--primary);
529
+ }
530
+
531
+ .status-completed {
532
+ background: rgba(16, 185, 129, 0.1);
533
+ color: var(--secondary);
534
+ }
535
+
536
+ .toast {
537
+ position: fixed;
538
+ bottom: 20px;
539
+ right: 20px;
540
+ background: var(--dark);
541
+ color: var(--white);
542
+ padding: 15px 20px;
543
+ border-radius: 8px;
544
+ display: none;
545
+ align-items: center;
546
+ gap: 10px;
547
+ animation: slideInRight 0.3s;
548
+ z-index: 2000;
549
+ }
550
+
551
+ .toast.show {
552
+ display: flex;
553
+ }
554
+
555
+ .toast.success {
556
+ background: var(--secondary);
557
+ }
558
+
559
+ .toast.error {
560
+ background: var(--danger);
561
+ }
562
+
563
+ @keyframes slideInRight {
564
+ from {
565
+ transform: translateX(100%);
566
+ }
567
+ to {
568
+ transform: translateX(0);
569
+ }
570
+ }
571
+
572
+ .built-with {
573
+ color: var(--gray);
574
+ font-size: 12px;
575
+ text-decoration: none;
576
+ transition: var(--transition);
577
+ }
578
+
579
+ .built-with:hover {
580
+ color: var(--primary);
581
+ }
582
+
583
+ @media (max-width: 768px) {
584
+ .main-content {
585
+ grid-template-columns: 1fr;
586
+ }
587
+
588
+ .sidebar {
589
+ position: static;
590
+ display: flex;
591
+ overflow-x: auto;
592
+ gap: 10px;
593
+ }
594
+
595
+ .nav-item {
596
+ white-space: nowrap;
597
+ }
598
+
599
+ .stats-bar {
600
+ grid-template-columns: 1fr;
601
+ }
602
+
603
+ .header-content {
604
+ flex-direction: column;
605
+ gap: 15px;
606
+ }
607
+
608
+ .user-info {
609
+ width: 100%;
610
+ justify-content: space-between;
611
+ }
612
+ }
613
+ </style>
614
  </head>
615
 
616
  <body>
617
+ <!-- Login Container -->
618
+ <div id="loginContainer" class="login-container">
619
+ <div class="login-card">
620
+ <div class="login-header">
621
+ <div class="login-logo">
622
+ <i class="fas fa-window-maximize"></i>
623
+ <span>PencerePro</span>
624
+ </div>
625
+ <p class="login-subtitle">Pencere Üretim Yönetim Sistemi</p>
626
+ </div>
627
+
628
+ <div class="subscription-info">
629
+ <h3><i class="fas fa-crown"></i> Premium Lisans</h3>
630
+ <p>Bu sistem kiralık bir yazılımdır. Lütfen giriş bilgilerinizi kullanın.</p>
631
+ </div>
632
+
633
+ <div class="admin-hint">
634
+ <i class="fas fa-info-circle"></i>
635
+ <strong>Yönetici Girişi:</strong> Kullanıcı adı: <strong>admin</strong> | Şifre: <strong>admin123</strong>
636
+ </div>
637
+
638
+ <div class="auth-tabs">
639
+ <button class="auth-tab active" onclick="switchTab('login')">Giriş Yap</button>
640
+ <button class="auth-tab" onclick="switchTab('register')">Kayıt Ol</button>
641
+ </div>
642
+
643
+ <!-- Login Form -->
644
+ <form id="loginForm" onsubmit="handleLogin(event)">
645
+ <div class="form-group">
646
+ <label>E-posta / Kullanıcı Adı</label>
647
+ <div class="input-group">
648
+ <i class="fas fa-user"></i>
649
+ <input type="text" class="form-control" id="loginUsername" required placeholder="E-posta veya kullanıcı adı">
650
+ </div>
651
+ </div>
652
+ <div class="form-group">
653
+ <label>Şifre</label>
654
+ <div class="input-group">
655
+ <i class="fas fa-lock"></i>
656
+ <input type="password" class="form-control" id="loginPassword" required placeholder="Şifreniz">
657
+ </div>
658
+ </div>
659
+ <button type="submit" class="btn btn-primary">
660
+ <i class="fas fa-sign-in-alt"></i> Giriş Yap
661
+ </button>
662
+ </form>
663
+
664
+ <!-- Register Form -->
665
+ <form id="registerForm" style="display: none;" onsubmit="handleRegister(event)">
666
+ <div class="form-group">
667
+ <label>Ad Soyad</label>
668
+ <div class="input-group">
669
+ <i class="fas fa-user"></i>
670
+ <input type="text" class="form-control" id="registerName" required placeholder="Adınız ve soyadınız">
671
+ </div>
672
+ </div>
673
+ <div class="form-group">
674
+ <label>Kullanıcı Adı</label>
675
+ <div class="input-group">
676
+ <i class="fas fa-id-badge"></i>
677
+ <input type="text" class="form-control" id="registerUsername" required placeholder="Kullanıcı adı">
678
+ </div>
679
+ </div>
680
+ <div class="form-group">
681
+ <label>E-posta</label>
682
+ <div class="input-group">
683
+ <i class="fas fa-envelope"></i>
684
+ <input type="email" class="form-control" id="registerEmail" required placeholder="E-posta adresiniz">
685
+ </div>
686
+ </div>
687
+ <div class="form-group">
688
+ <label>Şifre</label>
689
+ <div class="input-group">
690
+ <i class="fas fa-lock"></i>
691
+ <input type="password" class="form-control" id="registerPassword" required placeholder="Şifreniz">
692
+ </div>
693
+ </div>
694
+ <div class="form-group">
695
+ <label>Şifre Tekrar</label>
696
+ <div class="input-group">
697
+ <i class="fas fa-lock"></i>
698
+ <input type="password" class="form-control" id="registerPasswordConfirm" required placeholder="Şifrenizi tekrar girin">
699
+ </div>
700
+ </div>
701
+ <button type="submit" class="btn btn-primary">
702
+ <i class="fas fa-user-plus"></i> Kayıt Ol
703
+ </button>
704
+ </form>
705
+
706
+ <div class="login-footer">
707
+ <p>© 2024 PencerePro - Tüm hakları saklıdır</p>
708
+ <p style="margin-top: 10px;">
709
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
710
+ Built with anycoder <i class="fas fa-external-link-alt"></i>
711
+ </a>
712
+ </p>
713
+ </div>
714
+ </div>
715
+ </div>
716
+
717
+ <!-- Main Application -->
718
+ <div id="appContainer" class="app-container">
719
+ <header>
720
+ <div class="header-content">
721
+ <div class="logo">
722
+ <i class="fas fa-window-maximize"></i>
723
+ <span>PencerePro</span>
724
+ </div>
725
+ <div class="user-info">
726
+ <div class="user-avatar" id="userAvatar">A</div>
727
+ <div class="user-details">
728
+ <span class="user-name" id="userName">Admin User</span>
729
+ <span class="user-role" id="userRole">Yönetici</span>
730
+ </div>
731
+ <button class="btn-logout" onclick="logout()">
732
+ <i class="fas fa-sign-out-alt"></i> Çıkış
733
+ </button>
734
+ </div>
735
+ </div>
736
+ </header>
737
+
738
+ <div class="container">
739
+ <div class="stats-bar">
740
+ <div class="stat-card blue">
741
+ <div class="icon">
742
+ <i class="fas fa-clipboard-list"></i>
743
+ </div>
744
+ <div class="stat-value" id="totalOrders">24</div>
745
+ <div class="stat-label">Toplam Sipariş</div>
746
+ </div>
747
+ <div class="stat-card green">
748
+ <div class="icon">
749
+ <i class="fas fa-check-circle"></i>
750
+ </div>
751
+ <div class="stat-value" id="completedOrders">18</div>
752
+ <div class="stat-label">Tamamlanan</div>
753
+ </div>
754
+ <div class="stat-card orange">
755
+ <div class="icon">
756
+ <i class="fas fa-cogs"></i>
757
+ </div>
758
+ <div class="stat-value" id="processingOrders">4</div>
759
+ <div class="stat-label">Üretimde</div>
760
+ </div>
761
+ <div class="stat-card red">
762
+ <div class="icon">
763
+ <i class="fas fa-exclamation-triangle"></i>
764
+ </div>
765
+ <div class="stat-value" id="pendingOrders">2</div>
766
+ <div class="stat-label">Bekleyen</div>
767
+ </div>
768
+ </div>
769
+
770
+ <div class="main-content">
771
+ <aside class="sidebar">
772
+ <nav>
773
+ <div class="nav-item active" onclick="showSection('dashboard')">
774
+ <i class="fas fa-tachometer-alt"></i>
775
+ <span>Panel</span>
776
+ </div>
777
+ <div class="nav-item" onclick="showSection('orders')">
778
+ <i class="fas fa-shopping-cart"></i>
779
+ <span>Siparişler</span>
780
+ </div>
781
+ <div class="nav-item" onclick="showSection('newOrder')">
782
+ <i class="fas fa-plus-circle"></i>
783
+ <span>Yeni Sipariş</span>
784
+ </div>
785
+ <div class="nav-item" onclick="showSection('calculator')">
786
+ <i class="fas fa-calculator"></i>
787
+ <span>Hesaplama</span>
788
+ </div>
789
+ <div class="nav-item" onclick="showSection('production')">
790
+ <i class="fas fa-industry"></i>
791
+ <span>Üretim</span>
792
  </div>
793
+ <div class="nav-item" onclick="showSection('materials')">
794
+ <i class="fas fa-boxes"></i>
795
+ <span>Malzemeler</span>
796
+ </div>
797
+ <div class="nav-item" onclick="showSection('reports')">
798
+ <i class="fas fa-chart-bar"></i>
799
+ <span>Raporlar</span>
800
+ </div>
801
+ <div class="nav-item" onclick="showSection('users')" id="usersNavItem" style="display: none;">
802
+ <i class="fas fa-users"></i>
803
+ <span>Kullanıcılar</span>
804
+ </div>
805
+ </nav>
806
+ </aside>
807
+
808
+ <main class="content-area">
809
+ <!-- Dashboard Section -->
810
+ <section id="dashboard" class="section active">
811
+ <div class="section-header">
812
+ <h2 class="section-title">Hoş Geldiniz!</h2>
813
+ </div>
814
+ <div style="text-align: center; padding: 40px;">
815
+ <i class="fas fa-chart-line" style="font-size: 64px; color: var(--primary); margin-bottom: 20px;"></i>
816
+ <h3>PencerePro Yönetim Paneli</h3>
817
+ <p style="color: var(--gray); margin-top: 10px;">Sol menüden işlem seçebilirsiniz.</p>
818
+ </div>
819
+ </section>
820
 
821
+ <!-- Orders Section -->
822
+ <section id="orders" class="section">
823
+ <div class="section-header">
824
+ <h2 class="section-title">Siparişler</h2>
825
+ </div>
826
+ <div class="table-container">
827
+ <table>
828
+ <thead>
829
+ <tr>
830
+ <th>Sipariş No</th>
831
+ <th>Müşteri</th>
832
+ <th>Pencere Tipi</th>
833
+ <th>Ölçüler</th>
834
+ <th>Tarih</th>
835
+ <th>Durum</th>
836
+ </tr>
837
+ </thead>
838
+ <tbody>
839
+ <tr>
840
+ <td>#2024001</td>
841
+ <td>Ahmet Yılmaz</td>
842
+ <td>Çift Kanatlı</td>
843
+ <td>120x150 cm</td>
844
+ <td>15.01.2024</td>
845
+ <td><span class="status-badge status-completed">Tamamlandı</span></td>
846
+ </tr>
847
+ <tr>
848
+ <td>#2024002</td>
849
+ <td>Ayşe Demir</td>
850
+ <td>Sabit</td>
851
+ <td>100x120 cm</td>
852
+ <td>16.01.2024</td>
853
+ <td><span class="status-badge status-processing">Üretimde</span></td>
854
+ </tr>
855
+ <tr>
856
+ <td>#2024003</td>
857
+ <td>Mehmet Kaya</td>
858
+ <td>Panjur</td>
859
+ <td>90x110 cm</td>
860
+ <td>17.01.2024</td>
861
+ <td><span class="status-badge status-pending">Beklemede</span></td>
862
+ </tr>
863
+ </tbody>
864
+ </table>
865
  </div>
866
+ </section>
867
 
868
+ <!-- New Order Section -->
869
+ <section id="newOrder" class="section">
870
+ <div class="section-header">
871
+ <h2 class="section-title">Yeni Sipariş</h2>
872
  </div>
873
+ <div style="text-align: center; padding: 40px;">
874
+ <i class="fas fa-plus-circle" style="font-size: 64px; color: var(--primary); margin-bottom: 20px;"></i>
875
+ <h3>Yeni Sipariş Formu</h3>
876
+ <p style="color: var(--gray); margin-top: 10px;">Sipariş formu burada gösterilecektir.</p>
877
+ </div>
878
+ </section>
879
 
880
+ <!-- Calculator Section -->
881
+ <section id="calculator" class="section">
882
+ <div class="section-header">
883
+ <h2 class="section-title">Hesaplama</h2>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
884
  </div>
885
+ <div style="text-align: center; padding: 40px;">
886
+ <i class="fas fa-calculator" style="font-size: 64px; color: var(--primary); margin-bottom: 20px;"></i>
887
+ <h3>Fiyat Hesaplama</h3>
888
+ <p style="color: var(--gray); margin-top: 10px;">Hesaplama aracı burada gösterilecektir.</p>
889
+ </div>
890
+ </section>
891
 
892
+ <!-- Production Section -->
893
+ <section id="production" class="section">
894
+ <div class="section-header">
895
+ <h2 class="section-title">Üretim Takibi</h2>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
896
  </div>
897
+ <div style="text-align: center; padding: 40px;">
898
+ <i class="fas fa-industry" style="font-size: 64px; color: var(--primary); margin-bottom: 20px;"></i>
899
+ <h3>Üretim Yönetimi</h3>
900
+ <p style="color: var(--gray); margin-top: 10px;">Üretim takip arayüzü burada gösterilecektir.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
901
  </div>
902
+ </section>
903
 
904
+ <!-- Materials Section -->
905
+ <section id="materials" class="section">
906
+ <div class="section-header">
907
+ <h2 class="section-title">Malzeme Stok</h2>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
908
  </div>
909
+ <div style="text-align: center; padding: 40px;">
910
+ <i class="fas fa-boxes" style="font-size: 64px; color: var(--primary); margin-bottom: 20px;"></i>
911
+ <h3>Stok Yönetimi</h3>
912
+ <p style="color: var(--gray); margin-top: 10px;">Malzeme stok arayüzü burada gösterilecektir.</p>
913
+ </div>
914
+ </section>
915
 
916
+ <!-- Reports Section -->
917
+ <section id="reports" class="section">
918
+ <div class="section-header">
919
+ <h2 class="section-title">Raporlar</h2>
920
+ </div>
921
+ <div style="text-align: center; padding: 40px;">
922
+ <i class="fas fa-chart-bar" style="font-size: 64px; color: var(--primary); margin-bottom: 20px;"></i>
923
+ <h3>Raporlama</h3>
924
+ <p style="color: var(--gray); margin-top: 10px;">Raporlama arayüzü burada gösterilecektir.</p>
925
+ </div>
926
+ </section>
927
+
928
+ <!-- Users Section -->
929
+ <section id="users" class="section">
930
+ <div class="section-header">
931
+ <h2 class="section-title">Kullanıcı Yönetimi</h2>
932
+ <button class="btn btn-primary btn-sm" onclick="showAddUserModal()">
933
+ <i class="fas fa-plus"></i> Yeni Kullanıcı
934
+ </button>
935
+ </div>
936
+ <div class="table-container">
937
+ <table>
938
+ <thead>
939
+ <tr>
940
+ <th>Kullanıcı Adı</th>
941
+ <th>Ad Soyad</th>
942
+ <th>E-posta</th>
943
+ <th>Rol</th>
944
+ <th>Durum</th>
945
+ <th>İşlemler</th>
946
+ </tr>
947
+ </thead>
948
+ <tbody id="usersTableBody">
949
+ <!-- Users will be loaded here -->
950
+ </tbody>
951
+ </table>
952
+ </div>
953
+ </section>
954
+ </main>
955
+ </div>
956
  </div>
957
+ </div>
958
+
959
+ <!-- Toast Notification -->
960
+ <div id="toast" class="toast">
961
+ <i class="fas fa-check-circle"></i>
962
+ <span id="toastMessage">İşlem başarılı!</span>
963
+ </div>
964
+
965
+ <script>
966
+ // User Management System
967
+ let currentUser = null;
968
+ let users = JSON.parse(localStorage.getItem('pencereProUsers')) || [];
969
+
970
+ // Initialize default admin user if no users exist
971
+ if (users.length === 0) {
972
+ users = [
973
+ {
974
+ id: 1,
975
+ username: 'admin',
976
+ email: 'admin@pencerepro.com',
977
+ name: 'Administrator',
978
+ password: 'admin123',
979
+ role: 'admin',
980
+ status: 'active',
981
+ createdAt: new Date().toISOString()
982
+ }
983
+ ];
984
+ localStorage.setItem('pencereProUsers', JSON.stringify(users));
985
+ }
986
+
987
+ // Check if user is already logged in
988
+ window.onload = function() {
989
+ const savedUser = localStorage.getItem('pencereProCurrentUser');
990
+ if (savedUser) {
991
+ currentUser = JSON.parse(savedUser);
992
+ showApp();
993
+ }
994
+ };
995
+
996
+ function switchTab(tab) {
997
+ const tabs = document.querySelectorAll('.auth-tab');
998
+ tabs.forEach(t => t.classList.remove('active'));
999
+
1000
+ if (tab === 'login') {
1001
+ tabs[0].classList.add('active');
1002
+ document.getElementById('loginForm').style.display = 'block';
1003
+ document.getElementById('registerForm').style.display = 'none';
1004
+ } else {
1005
+ tabs[1].classList.add('active');
1006
+ document.getElementById('loginForm').style.display = 'none';
1007
+ document.getElementById('registerForm').style.display = 'block';
1008
+ }
1009
+ }
1010
+
1011
+ function handleLogin(event) {
1012
+ event.preventDefault();
1013
+
1014
+ const username = document.getElementById('loginUsername').value.trim();
1015
+ const password = document.getElementById('loginPassword').value;
1016
+
1017
+ const user = users.find(u =>
1018
+ (u.username === username || u.email === username) && u.password === password
1019
+ );
1020
+
1021
+ if (user) {
1022
+ if (user.status !== 'active') {
1023
+ showToast('Hesabınız devre dışı!', 'error');
1024
+ return;
1025
+ }
1026
+
1027
+ currentUser = user;
1028
+ localStorage.setItem('pencereProCurrentUser', JSON.stringify(user));
1029
+ showToast('Giriş başarılı!', 'success');
1030
+ showApp();
1031
+ } else {
1032
+ showToast('Kullanıcı adı veya şifre hatalı!', 'error');
1033
+ }
1034
+ }
1035
+
1036
+ function handleRegister(event) {
1037
+ event.preventDefault();
1038
+
1039
+ const name = document.getElementById('registerName').value.trim();
1040
+ const username = document.getElementById('registerUsername').value.trim();
1041
+ const email = document.getElementById('registerEmail').value.trim();
1042
+ const password = document.getElementById('registerPassword').value;
1043
+ const passwordConfirm = document.getElementById('registerPasswordConfirm').value;
1044
+
1045
+ if (password !== passwordConfirm) {
1046
+ showToast('Şifreler eşleşmiyor!', 'error');
1047
+ return;
1048
+ }
1049
+
1050
+ if (users.find(u => u.username === username)) {
1051
+ showToast('Bu kullanıcı adı zaten kullanılıyor!', 'error');
1052
+ return;
1053
+ }
1054
+
1055
+ if (users.find(u => u.email === email)) {
1056
+ showToast('Bu e-posta zaten kayıtlı!', 'error');
1057
+ return;
1058
+ }
1059
+
1060
+ const newUser = {
1061
+ id: users.length + 1,
1062
+ username: username,
1063
+ email: email,
1064
+ name: name,
1065
+ password: password,
1066
+ role: 'user',
1067
+ status: 'active',
1068
+ createdAt: new Date().toISOString()
1069
+ };
1070
+
1071
+ users.push(newUser);
1072
+ localStorage.setItem('pencereProUsers', JSON.stringify(users));
1073
+
1074
+ showToast('Kayıt başarılı! Giriş yapabilirsiniz.', 'success');
1075
+ switchTab('login');
1076
+
1077
+ // Clear form
1078
+ document.getElementById('registerForm').reset();
1079
+ }
1080
+
1081
+ function showApp() {
1082
+ document.getElementById('loginContainer').style.display = 'none';
1083
+ document.getElementById('appContainer').style.display = 'block';
1084
+
1085
+ // Update user info in header
1086
+ document.getElementById('userName').textContent = currentUser.name;
1087
+ document.getElementById('userRole').textContent = currentUser.role === 'admin' ? 'Yönetici' : 'Kullanıcı';
1088
+ document.getElementById('userAvatar').textContent = currentUser.name.charAt(0).toUpperCase();
1089
+
1090
+ // Show/hide admin features
1091
+ if (currentUser.role === 'admin') {
1092
+ document.getElementById('usersNavItem').style.display = 'flex';
1093
+ }
1094
+
1095
+ //