Hugging Face's logo

Spaces:
escambalkon
/
anycoder-92d2c3fc
Running

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

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +771 -658
index.html CHANGED
@@ -1,9 +1,10 @@
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 {
@@ -35,6 +36,202 @@
35
  color: var(--dark);
36
  }
37
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
38
  .container {
39
  max-width: 1400px;
40
  margin: 0 auto;
@@ -74,6 +271,54 @@
74
  -webkit-text-fill-color: transparent;
75
  }
76
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
77
  .stats-bar {
78
  display: grid;
79
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -107,10 +352,25 @@
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;
@@ -181,8 +441,14 @@
181
  }
182
 
183
  @keyframes fadeIn {
184
- from { opacity: 0; transform: translateY(20px); }
185
- to { opacity: 1; transform: translateY(0); }
 
 
 
 
 
 
186
  }
187
 
188
  .section-header {
@@ -199,69 +465,9 @@
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 {
@@ -274,7 +480,8 @@
274
  border-collapse: collapse;
275
  }
276
 
277
- th, td {
 
278
  padding: 15px;
279
  text-align: left;
280
  border-bottom: 1px solid var(--light);
@@ -298,134 +505,19 @@
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 {
@@ -447,12 +539,32 @@
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) {
@@ -475,517 +587,508 @@
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'));
@@ -997,4 +1100,14 @@
997
  event.target.closest('.nav-item').classList.add('active');
998
  }
999
 
1000
- // Pencere tipi seçimi
 
 
 
 
 
 
 
 
 
 
 
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 {
 
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;
 
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));
 
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;
 
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 {
 
465
  font-weight: 600;
466
  }
467
 
468
+ .btn-sm {
469
+ padding: 8px 16px;
470
+ font-size: 12px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
471
  }
472
 
473
  .table-container {
 
480
  border-collapse: collapse;
481
  }
482
 
483
+ th,
484
+ td {
485
  padding: 15px;
486
  text-align: left;
487
  border-bottom: 1px solid var(--light);
 
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 {
 
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) {
 
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'));
 
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