Spaces:
Running
Running
| <html lang="tr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PencerePro - Üretim Yönetim Sistemi</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #2563eb; | |
| --primary-dark: #1e40af; | |
| --secondary: #10b981; | |
| --danger: #ef4444; | |
| --warning: #f59e0b; | |
| --dark: #1f2937; | |
| --gray: #6b7280; | |
| --light: #f3f4f6; | |
| --white: #ffffff; | |
| --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); | |
| --radius: 12px; | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| color: var(--dark); | |
| } | |
| .app-container { | |
| display: block; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| header { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| padding: 20px 0; | |
| box-shadow: var(--shadow); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0 20px; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| font-size: 24px; | |
| font-weight: bold; | |
| color: var(--primary); | |
| } | |
| .logo i { | |
| font-size: 32px; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .user-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| } | |
| .user-avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| color: var(--white); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| } | |
| .user-details { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .user-name { | |
| font-weight: 600; | |
| color: var(--dark); | |
| } | |
| .user-role { | |
| font-size: 12px; | |
| color: var(--gray); | |
| } | |
| .stats-bar { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 20px; | |
| margin: 30px 0; | |
| } | |
| .stat-card { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| padding: 20px; | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow-sm); | |
| transition: var(--transition); | |
| cursor: pointer; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--shadow); | |
| } | |
| .stat-card .icon { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 24px; | |
| margin-bottom: 15px; | |
| } | |
| .stat-card.blue .icon { | |
| background: rgba(37, 99, 235, 0.1); | |
| color: var(--primary); | |
| } | |
| .stat-card.green .icon { | |
| background: rgba(16, 185, 129, 0.1); | |
| color: var(--secondary); | |
| } | |
| .stat-card.orange .icon { | |
| background: rgba(245, 158, 11, 0.1); | |
| color: var(--warning); | |
| } | |
| .stat-card.red .icon { | |
| background: rgba(239, 68, 68, 0.1); | |
| color: var(--danger); | |
| } | |
| .stat-value { | |
| font-size: 28px; | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| } | |
| .stat-label { | |
| color: var(--gray); | |
| font-size: 14px; | |
| } | |
| .main-content { | |
| display: grid; | |
| grid-template-columns: 250px 1fr; | |
| gap: 20px; | |
| margin-top: 30px; | |
| } | |
| .sidebar { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-radius: var(--radius); | |
| padding: 20px; | |
| height: fit-content; | |
| position: sticky; | |
| top: 100px; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| padding: 15px; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| margin-bottom: 10px; | |
| color: var(--gray); | |
| } | |
| .nav-item:hover { | |
| background: var(--light); | |
| color: var(--primary); | |
| transform: translateX(5px); | |
| } | |
| .nav-item.active { | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: var(--white); | |
| } | |
| .content-area { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| border-radius: var(--radius); | |
| padding: 30px; | |
| min-height: 600px; | |
| } | |
| .section { | |
| display: none; | |
| } | |
| .section.active { | |
| display: block; | |
| animation: fadeIn 0.5s; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .section-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 30px; | |
| padding-bottom: 20px; | |
| border-bottom: 2px solid var(--light); | |
| } | |
| .section-title { | |
| font-size: 24px; | |
| font-weight: 600; | |
| } | |
| .btn-sm { | |
| padding: 8px 16px; | |
| font-size: 12px; | |
| } | |
| .btn { | |
| padding: 8px 16px; | |
| border: none; | |
| border-radius: 6px; | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: var(--white); | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3); | |
| } | |
| .table-container { | |
| overflow-x: auto; | |
| margin-top: 20px; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| th, | |
| td { | |
| padding: 15px; | |
| text-align: left; | |
| border-bottom: 1px solid var(--light); | |
| } | |
| th { | |
| background: var(--light); | |
| font-weight: 600; | |
| color: var(--dark); | |
| } | |
| tr:hover { | |
| background: rgba(37, 99, 235, 0.05); | |
| } | |
| .status-badge { | |
| padding: 5px 12px; | |
| border-radius: 20px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| display: inline-block; | |
| } | |
| .status-pending { | |
| background: rgba(245, 158, 11, 0.1); | |
| color: var(--warning); | |
| } | |
| .status-processing { | |
| background: rgba(37, 99, 235, 0.1); | |
| color: var(--primary); | |
| } | |
| .status-completed { | |
| background: rgba(16, 185, 129, 0.1); | |
| color: var(--secondary); | |
| } | |
| .status-active { | |
| background: rgba(16, 185, 129, 0.1); | |
| color: var(--secondary); | |
| } | |
| .status-inactive { | |
| background: rgba(239, 68, 68, 0.1); | |
| color: var(--danger); | |
| } | |
| .toast { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| background: var(--dark); | |
| color: var(--white); | |
| padding: 15px 20px; | |
| border-radius: 8px; | |
| display: none; | |
| align-items: center; | |
| gap: 10px; | |
| animation: slideInRight 0.3s; | |
| z-index: 2000; | |
| } | |
| .toast.show { | |
| display: flex; | |
| } | |
| .toast.success { | |
| background: var(--secondary); | |
| } | |
| .toast.error { | |
| background: var(--danger); | |
| } | |
| @keyframes slideInRight { | |
| from { | |
| transform: translateX(100%); | |
| } | |
| to { | |
| transform: translateX(0); | |
| } | |
| } | |
| .built-with { | |
| color: var(--gray); | |
| font-size: 12px; | |
| text-decoration: none; | |
| transition: var(--transition); | |
| } | |
| .built-with:hover { | |
| color: var(--primary); | |
| } | |
| .action-btn { | |
| padding: 5px 10px; | |
| margin: 0 2px; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 12px; | |
| transition: var(--transition); | |
| } | |
| .action-btn.edit { | |
| background: var(--primary); | |
| color: var(--white); | |
| } | |
| .action-btn.delete { | |
| background: var(--danger); | |
| color: var(--white); | |
| } | |
| .action-btn:hover { | |
| opacity: 0.8; | |
| } | |
| /* Enhanced Dashboard Styles */ | |
| .dashboard-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| margin-top: 30px; | |
| } | |
| .dashboard-card { | |
| background: rgba(255, 255, 255, 0.5); | |
| backdrop-filter: blur(10px); | |
| border-radius: var(--radius); | |
| padding: 25px; | |
| transition: var(--transition); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .dashboard-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: var(--shadow); | |
| background: rgba(255, 255, 255, 0.7); | |
| } | |
| .dashboard-card h3 { | |
| color: var(--primary); | |
| margin-bottom: 15px; | |
| font-size: 18px; | |
| } | |
| .dashboard-card p { | |
| color: var(--gray); | |
| line-height: 1.6; | |
| } | |
| .quick-actions { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 15px; | |
| margin-top: 20px; | |
| } | |
| .quick-action-btn { | |
| background: rgba(255, 255, 255, 0.8); | |
| border: 2px solid var(--primary); | |
| color: var(--primary); | |
| padding: 20px; | |
| border-radius: var(--radius); | |
| text-align: center; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| text-decoration: none; | |
| } | |
| .quick-action-btn:hover { | |
| background: var(--primary); | |
| color: var(--white); | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3); | |
| } | |
| .quick-action-btn i { | |
| font-size: 32px; | |
| margin-bottom: 10px; | |
| display: block; | |
| } | |
| .quick-action-btn span { | |
| font-weight: 600; | |
| font-size: 14px; | |
| } | |
| /* New Order Form Styles */ | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: 500; | |
| color: var(--dark); | |
| } | |
| .form-control { | |
| width: 100%; | |
| padding: 12px; | |
| border: 2px solid var(--light); | |
| border-radius: 8px; | |
| font-size: 14px; | |
| transition: var(--transition); | |
| } | |
| .form-control:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); | |
| } | |
| .form-row { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 20px; | |
| } | |
| /* Calculator Styles */ | |
| .calculator-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 30px; | |
| margin-top: 30px; | |
| } | |
| .calculator-inputs { | |
| background: rgba(255, 255, 255, 0.5); | |
| padding: 25px; | |
| border-radius: var(--radius); | |
| } | |
| .calculator-result { | |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); | |
| color: var(--white); | |
| padding: 25px; | |
| border-radius: var(--radius); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| .calculator-result h3 { | |
| margin-bottom: 20px; | |
| font-size: 20px; | |
| } | |
| .price-display { | |
| font-size: 48px; | |
| font-weight: bold; | |
| margin-bottom: 10px; | |
| } | |
| .price-details { | |
| font-size: 14px; | |
| opacity: 0.9; | |
| } | |
| @media (max-width: 768px) { | |
| .main-content { | |
| grid-template-columns: 1fr; | |
| } | |
| .sidebar { | |
| position: static; | |
| display: flex; | |
| overflow-x: auto; | |
| gap: 10px; | |
| } | |
| .nav-item { | |
| white-space: nowrap; | |
| } | |
| .stats-bar { | |
| grid-template-columns: 1fr; | |
| } | |
| .header-content { | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .user-info { | |
| width: 100%; | |
| justify-content: space-between; | |
| } | |
| .calculator-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .dashboard-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Main Application --> | |
| <div id="appContainer" class="app-container"> | |
| <header> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <i class="fas fa-window-maximize"></i> | |
| <span>PencerePro</span> | |
| </div> | |
| <div class="user-info"> | |
| <div class="user-avatar">A</div> | |
| <div class="user-details"> | |
| <span class="user-name">Admin User</span> | |
| <span class="user-role">Yönetici</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="container"> | |
| <div class="stats-bar"> | |
| <div class="stat-card blue"> | |
| <div class="icon"> | |
| <i class="fas fa-clipboard-list"></i> | |
| </div> | |
| <div class="stat-value" id="totalOrders">24</div> | |
| <div class="stat-label">Toplam Sipariş</div> | |
| </div> | |
| <div class="stat-card green"> | |
| <div class="icon"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <div class="stat-value" id="completedOrders">18</div> | |
| <div class="stat-label">Tamamlanan</div> | |
| </div> | |
| <div class="stat-card orange"> | |
| <div class="icon"> | |
| <i class="fas fa-cogs"></i> | |
| </div> | |
| <div class="stat-value" id="processingOrders">4</div> | |
| <div class="stat-label">Üretimde</div> | |
| </div> | |
| <div class="stat-card red"> | |
| <div class="icon"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| </div> | |
| <div class="stat-value" id="pendingOrders">2</div> | |
| <div class="stat-label">Bekleyen</div> | |
| </div> | |
| </div> | |
| <div class="main-content"> | |
| <aside class="sidebar"> | |
| <nav> | |
| <div class="nav-item active" onclick="showSection('dashboard')"> | |
| <i class="fas fa-tachometer-alt"></i> | |
| <span>Panel</span> | |
| </div> | |
| <div class="nav-item" onclick="showSection('orders')"> | |
| <i class="fas fa-shopping-cart"></i> | |
| <span>Siparişler</span> | |
| </div> | |
| <div class="nav-item" onclick="showSection('newOrder')"> | |
| <i class="fas fa-plus-circle"></i> | |
| <span>Yeni Sipariş</span> | |
| </div> | |
| <div class="nav-item" onclick="showSection('calculator')"> | |
| <i class="fas fa-calculator"></i> | |
| <span>Hesaplama</span> | |
| </div> | |
| <div class="nav-item" onclick="showSection('production')"> | |
| <i class="fas fa-industry"></i> | |
| <span>Üretim</span> | |
| </div> | |
| <div class="nav-item" onclick="showSection('materials')"> | |
| <i class="fas fa-boxes"></i> | |
| <span>Malzemeler</span> | |
| </div> | |
| <div class="nav-item" onclick="showSection('reports')"> | |
| <i class="fas fa-chart-bar"></i> | |
| <span>Raporlar</span> | |
| </div> | |
| </nav> | |
| </aside> | |
| <main class="content-area"> | |
| <!-- Dashboard Section --> | |
| <section id="dashboard" class="section active"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Hoş Geldiniz!</h2> | |
| </div> | |
| <div class="dashboard-grid"> | |
| <div class="dashboard-card"> | |
| <h3><i class="fas fa-chart-line"></i> İstatistikler</h3> | |
| <p>Bu ay 24 yeni sipariş alındı. 18 sipariş başarıyla tamamlandı. Üretim verimliliği %75 arttı.</p> | |
| </div> | |
| <div class="dashboard-card"> | |
| <h3><i class="fas fa-tasks"></i> Yapılacaklar</h3> | |
| <p>• 3 sipariş üretimde bekliyor<br>• Malzeme stoğu kontrol edilmeli<br>• Haftalık rapor hazırlanmalı</p> | |
| </div> | |
| <div class="dashboard-card"> | |
| <h3><i class="fas fa-bell"></i> Duyurular</h3> | |
| <p>• Yeni malzeme tedarikçisi eklendi<br>• Sistem bakımı 25.01.2024'te<br>• Kampanya: %10 indirim</p> | |
| </div> | |
| </div> | |
| <h3 style="margin-top: 40px; margin-bottom: 20px; color: var(--dark);">Hızlı İşlemler</h3> | |
| <div class="quick-actions"> | |
| <div class="quick-action-btn" onclick="showSection('newOrder')"> | |
| <i class="fas fa-plus"></i> | |
| <span>Yeni Sipariş</span> | |
| </div> | |
| <div class="quick-action-btn" onclick="showSection('calculator')"> | |
| <i class="fas fa-calculator"></i> | |
| <span>Fiyat Hesapla</span> | |
| </div> | |
| <div class="quick-action-btn" onclick="showSection('production')"> | |
| <i class="fas fa-industry"></i> | |
| <span>Üretim Gör</span> | |
| </div> | |
| <div class="quick-action-btn" onclick="showSection('reports')"> | |
| <i class="fas fa-file-alt"></i> | |
| <span>Rapor Al</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Orders Section --> | |
| <section id="orders" class="section"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Siparişler</h2> | |
| </div> | |
| <div class="table-container"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Sipariş No</th> | |
| <th>Müşteri</th> | |
| <th>Pencere Tipi</th> | |
| <th>Ölçüler</th> | |
| <th>Tarih</th> | |
| <th>Durum</th> | |
| <th>İşlemler</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>#2024001</td> | |
| <td>Ahmet Yılmaz</td> | |
| <td>Çift Kanatlı</td> | |
| <td>120x150 cm</td> | |
| <td>15.01.2024</td> | |
| <td><span class="status-badge status-completed">Tamamlandı</span></td> | |
| <td> | |
| <button class="action-btn edit" onclick="editOrder('2024001')"><i class="fas fa-edit"></i></button> | |
| <button class="action-btn delete" onclick="deleteOrder('2024001')"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>#2024002</td> | |
| <td>Ayşe Demir</td> | |
| <td>Sabit</td> | |
| <td>100x120 cm</td> | |
| <td>16.01.2024</td> | |
| <td><span class="status-badge status-processing">Üretimde</span></td> | |
| <td> | |
| <button class="action-btn edit" onclick="editOrder('2024002')"><i class="fas fa-edit"></i></button> | |
| <button class="action-btn delete" onclick="deleteOrder('2024002')"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>#2024003</td> | |
| <td>Mehmet Kaya</td> | |
| <td>Panjur</td> | |
| <td>90x110 cm</td> | |
| <td>17.01.2024</td> | |
| <td><span class="status-badge status-pending">Beklemede</span></td> | |
| <td> | |
| <button class="action-btn edit" onclick="editOrder('2024003')"><i class="fas fa-edit"></i></button> | |
| <button class="action-btn delete" onclick="deleteOrder('2024003')"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>#2024004</td> | |
| <td>Zeynep Ak</td> | |
| <td>Çift Kanatlı</td> | |
| <td>140x180 cm</td> | |
| <td>18.01.2024</td> | |
| <td><span class="status-badge status-processing">Üretimde</span></td> | |
| <td> | |
| <button class="action-btn edit" onclick="editOrder('2024004')"><i class="fas fa-edit"></i></button> | |
| <button class="action-btn delete" onclick="deleteOrder('2024004')"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>#2024005</td> | |
| <td>Mustafa Çelik</td> | |
| <td>Sabit</td> | |
| <td>80x100 cm</td> | |
| <td>19.01.2024</td> | |
| <td><span class="status-badge status-pending">Beklemede</span></td> | |
| <td> | |
| <button class="action-btn edit" onclick="editOrder('2024005')"><i class="fas fa-edit"></i></button> | |
| <button class="action-btn delete" onclick="deleteOrder('2024005')"><i class="fas fa-trash"></i></button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| <!-- New Order Section --> | |
| <section id="newOrder" class="section"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Yeni Sipariş</h2> | |
| </div> | |
| <form onsubmit="saveOrder(event)"> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label>Müşteri Adı</label> | |
| <input type="text" class="form-control" placeholder="Müşteri adı soyadı" required> | |
| </div> | |
| <div class="form-group"> | |
| <label>Telefon</label> | |
| <input type="tel" class="form-control" placeholder="Telefon numarası" required> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label>Pencere Tipi</label> | |
| <select class="form-control" required> | |
| <option value="">Seçiniz...</option> | |
| <option value="sabit">Sabit</option> | |
| <option value="tek-kanat">Tek Kanatlı</option> | |
| <option value="cift-kanat">Çift Kanatlı</option> | |
| <option value="panjur">Panjur</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label>Malzeme</label> | |
| <select class="form-control" required> | |
| <option value="">Seçiniz...</option> | |
| <option value="pvc">PVC</option> | |
| <option value="aluminyum">Alüminyum</option> | |
| <option value="ahsap">Ahşap</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label>Genişlik (cm)</label> | |
| <input type="number" class="form-control" placeholder="Genişlik" min="10" required> | |
| </div> | |
| <div class="form-group"> | |
| <label>Yükseklik (cm)</label> | |
| <input type="number" class="form-control" placeholder="Yükseklik" min="10" required> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Notlar</label> | |
| <textarea class="form-control" rows="3" placeholder="Ek notlar..."></textarea> | |
| </div> | |
| <button type="submit" class="btn btn-primary"> | |
| <i class="fas fa-save"></i> Siparişi Kaydet | |
| </button> | |
| </form> | |
| </section> | |
| <!-- Calculator Section --> | |
| <section id="calculator" class="section"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Fiyat Hesaplama</h2> | |
| </div> | |
| <div class="calculator-grid"> | |
| <div class="calculator-inputs"> | |
| <form onsubmit="calculatePrice(event)"> | |
| <div class="form-group"> | |
| <label>Pencere Tipi</label> | |
| <select class="form-control" id="calcType" onchange="updatePrice()" required> | |
| <option value="">Seçiniz...</option> | |
| <option value="sabit">Sabit - +0%</option> | |
| <option value="tek-kanat">Tek Kanatlı - +10%</option> | |
| <option value="cift-kanat">Çift Kanatlı - +20%</option> | |
| <option value="panjur">Panjur - +30%</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label>Malzeme</label> | |
| <select class="form-control" id="calcMaterial" onchange="updatePrice()" required> | |
| <option value="">Seçiniz...</option> | |
| <option value="pvc">PVC - 500₺/m²</option> | |
| <option value="aluminyum">Alüminyum - 750₺/m²</option> | |
| <option value="ahsap">Ahşap - 1000₺/m²</option> | |
| </select> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label>Genişlik (cm)</label> | |
| <input type="number" class="form-control" id="calcWidth" placeholder="Genişlik" min="10" onchange="updatePrice()" required> | |
| </div> | |
| <div class="form-group"> | |
| <label>Yükseklik (cm)</label> | |
| <input type="number" class="form-control" id="calcHeight" placeholder="Yükseklik" min="10" onchange="updatePrice()" required> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Ekstralar</label> | |
| <div style="display: flex; gap: 15px; margin-top: 10px;"> | |
| <label> | |
| <input type="checkbox" value="cam" onchange="updatePrice()"> | |
| Cam Film (+50₺) | |
| </label> | |
| <label> | |
| <input type="checkbox" value="sineklik" onchange="updatePrice()"> | |
| Sineklik (+100₺) | |
| </label> | |
| <label> | |
| <input type="checkbox" value="izolasyon" onchange="updatePrice()"> | |
| İzolasyon (+150₺) | |
| </label> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="calculator-result"> | |
| <h3>Hesaplanan Fiyat</h3> | |
| <div class="price-display" id="totalPrice">0 ₺</div> | |
| <div class="price-details" id="priceDetails"> | |
| Lütfen ölçüleri ve seçenekleri girin | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Production Section --> | |
| <section id="production" class="section"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Üretim Takibi</h2> | |
| </div> | |
| <div class="table-container"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Sipariş No</th> | |
| <th>Müşteri</th> | |
| <th>Operasyon</th> | |
| <th>Başlangıç</th> | |
| <th>Bitiş</th> | |
| <th>Durum</th> | |
| <th>İlerleme</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>#2024002</td> | |
| <td>Ayşe Demir</td> | |
| <td>Kesim</td> | |
| <td>08:00</td> | |
| <td>10:30</td> | |
| <td><span class="status-badge status-completed">Tamamlandı</span></td> | |
| <td>100%</td> | |
| </tr> | |
| <tr> | |
| <td>#2024004</td> | |
| <td>Zeynep Ak</td> | |
| <td>Montaj</td> | |
| <td>11:00</td> | |
| <td>Devamıyor</td> | |
| <td><span class="status-badge status-processing">İşlemde</span></td> | |
| <td>65%</td> | |
| </tr> | |
| <tr> | |
| <td>#2024003</td> | |
| <td>Mehmet Kaya</td> | |
| <td>Bekliyor</td> | |
| <td>-</td> | |
| <td>-</td> | |
| <td><span class="status-badge status-pending">Beklemede</span></td> | |
| <td>0%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| <!-- Materials Section --> | |
| <section id="materials" class="section"> | |
| <div class="section-header"> | |
| <h2 class="section-title">Malzeme Stok</h2> | |
| </div> | |
| <div class="table-container"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Malzeme</th> | |
| <th>Tür</th> | |
| <th>Stok Miktarı</th> | |
| <th>Birim</th> | |
| <th>Kritik Seviye</th> | |
| <th>Son Güncelleme</th> | |
| <th>Durum</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>PVC Profil</td> | |
| <td>Çerçeve</td> | |
| <td>450</td> | |
| <td>Metre</td> | |
| <td>200</td> | |
| <td>20.01.2024</td> | |
| <td><span class="status-badge status-active">Stokta</span></td> | |
| </tr> | |
| <tr> | |
| <td>Cam</td> | |
| <td>4mm</td> | |
| <td>120</td> | |
| <td>m²</td> | |
| <td>50</td> | |
| <td>19.01.2024</td> | |
| <td><span class="status-badge status-active">Stokta</span></td> | |
| </tr> | |
| <tr> | |
| <td>Kilit Mekanizma</td> | |
| <td>Standart</td> | |
| <td>35</td> | |
| <td>Adet</td> | |
| <td>30</td> | |
| <td>18.01.2024</td> | |
| <td><span class="status-badge status-pending">Düşük Stok</span></td> | |
| </tr> | |
| <tr> | |
| <td>Conta</td> | |
| <td>Siyah</td> | |
| <td>850</td> | |
| <td>Metre</td> | |
| <td>100</td> | |
| <td>20.01.2024</td> | |
| <td><span class="status-badge status-active">Stokta</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </ |