358 lines
18 KiB
HTML
358 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="tr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>hBarkodDB | Akıllı Barkod Veritabanı ve Tarayıcı</title>
|
||
<meta name="description" content="Barkodist verilerini işleyip barkod ve ürün veritabanı oluşturan akıllı otomasyon sistemi.">
|
||
<link rel="stylesheet" href="style.css">
|
||
<!-- Google Fonts -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
|
||
<!-- FontAwesome for Premium Icons -->
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<!-- CDNs for Barcode and QR Code Generation -->
|
||
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
|
||
<!-- Frontend logic -->
|
||
<script src="app.js" defer></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="app-container">
|
||
<!-- Sidebar Navigation -->
|
||
<aside class="sidebar">
|
||
<div class="logo-area">
|
||
<div class="logo-icon">
|
||
<i class="fa-solid fa-barcode-read"></i>
|
||
</div>
|
||
<div class="logo-text">
|
||
<span class="brand-name">hBarkod<span class="accent-text">DB</span></span>
|
||
<span class="brand-sub">Veri & Barkod Sistemi</span>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="nav-menu">
|
||
<button class="nav-btn active" data-tab="dashboard-tab" id="btn-tab-dashboard">
|
||
<i class="fa-solid fa-chart-line"></i> <span>Kontrol Paneli</span>
|
||
</button>
|
||
<button class="nav-btn" data-tab="database-tab" id="btn-tab-database">
|
||
<i class="fa-solid fa-database"></i> <span>Ürün Veritabanı</span>
|
||
</button>
|
||
<button class="nav-btn" data-tab="add-product-tab" id="btn-tab-add">
|
||
<i class="fa-solid fa-plus-circle"></i> <span>Ürün Ekle</span>
|
||
</button>
|
||
</nav>
|
||
|
||
<div class="sidebar-footer">
|
||
<div class="status-indicator connected">
|
||
<span class="dot"></span>
|
||
<span class="status-text">Sunucu Bağlantısı Aktif</span>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- Main Content Area -->
|
||
<main class="main-content">
|
||
<!-- Header -->
|
||
<header class="app-header">
|
||
<div class="header-title">
|
||
<h1 id="page-title">Kontrol Paneli</h1>
|
||
<p class="subtitle" id="page-subtitle">Veri tarama sürecini ve sunucu istatistiklerini canlı takip edin</p>
|
||
</div>
|
||
<div class="header-actions">
|
||
<div class="api-speed">
|
||
<i class="fa-solid fa-bolt text-yellow"></i>
|
||
<span id="active-threads-badge">0 Aktif İşçi</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Tab: Dashboard -->
|
||
<section id="dashboard-tab" class="tab-content active">
|
||
<!-- Stat Grid -->
|
||
<div class="stats-grid">
|
||
<div class="stat-card total">
|
||
<div class="stat-icon"><i class="fa-solid fa-link"></i></div>
|
||
<div class="stat-info">
|
||
<h3>Toplam Adres</h3>
|
||
<div class="value" id="stat-total">0</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card completed">
|
||
<div class="stat-icon"><i class="fa-solid fa-check-double"></i></div>
|
||
<div class="stat-info">
|
||
<h3>Taranan Ürün</h3>
|
||
<div class="value" id="stat-completed">0</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card pending">
|
||
<div class="stat-icon"><i class="fa-solid fa-clock-rotate-left"></i></div>
|
||
<div class="stat-info">
|
||
<h3>Sırada Bekleyen</h3>
|
||
<div class="value" id="stat-pending">0</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-card failed">
|
||
<div class="stat-icon"><i class="fa-solid fa-triangle-exclamation"></i></div>
|
||
<div class="stat-info">
|
||
<h3>Hatalı Deneme</h3>
|
||
<div class="value" id="stat-failed">0</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Progress Section -->
|
||
<div class="card progress-card">
|
||
<div class="card-header">
|
||
<h2>Tarama İlerleme Durumu</h2>
|
||
<span class="percentage" id="progress-percent">0%</span>
|
||
</div>
|
||
<div class="progress-bar-wrapper">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill fill-success" id="progress-fill-success" style="width: 0%"></div>
|
||
<div class="progress-fill fill-error" id="progress-fill-error" style="width: 0%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Control and Logs Area -->
|
||
<div class="dashboard-split">
|
||
<!-- Control Settings Card -->
|
||
<div class="card control-card">
|
||
<h2>Tarayıcı Kontrolü</h2>
|
||
<p class="card-description">Eşzamanlı istek sayısını ve gecikmeyi ayarlayarak tarama işlemini yönetin.</p>
|
||
|
||
<div class="control-group">
|
||
<label for="input-concurrency">Eşzamanlı İşçi (Thread) Sayısı</label>
|
||
<div class="number-input-wrapper">
|
||
<input type="number" id="input-concurrency" min="1" max="50" value="5">
|
||
<span class="input-hint">Önerilen: 5-10</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label for="input-delay">İstekler Arası Gecikme (ms)</label>
|
||
<div class="number-input-wrapper">
|
||
<input type="number" id="input-delay" min="0" max="10000" step="100" value="500">
|
||
<span class="input-hint">Sayfayı yormamak için ideal: 500ms</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-actions">
|
||
<button id="btn-toggle-scrape" class="btn btn-primary btn-large">
|
||
<i class="fa-solid fa-play"></i> Tarayıcıyı Başlat
|
||
</button>
|
||
<button id="btn-retry-failed" class="btn btn-secondary">
|
||
<i class="fa-solid fa-rotate-left"></i> Hatalıları Yeniden Dene
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Live Logs Card -->
|
||
<div class="card logs-card">
|
||
<div class="card-header">
|
||
<h2>Canlı Tarama Günlüğü</h2>
|
||
<button id="btn-clear-logs" class="btn btn-text-icon" title="Konsolu Temizle">
|
||
<i class="fa-solid fa-trash-can"></i>
|
||
</button>
|
||
</div>
|
||
<div class="console-box" id="console-logs">
|
||
<div class="console-line system">Sistem yükleniyor. Bağlantı bekleniyor...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Tab: Product Database -->
|
||
<section id="database-tab" class="tab-content">
|
||
<!-- Search & Filters -->
|
||
<div class="card filter-card">
|
||
<div class="filter-row">
|
||
<div class="search-box">
|
||
<i class="fa-solid fa-magnifying-glass"></i>
|
||
<input type="text" id="db-search" placeholder="Ürün adı, barkod, şirket veya kategori ara...">
|
||
</div>
|
||
<div class="filter-selects">
|
||
<select id="filter-category">
|
||
<option value="">Tüm Kategoriler</option>
|
||
</select>
|
||
<select id="filter-company">
|
||
<option value="">Tüm Şirketler</option>
|
||
</select>
|
||
<button id="btn-clear-filters" class="btn btn-secondary" title="Filtreleri Sıfırla">
|
||
<i class="fa-solid fa-filter-circle-xmark"></i> Temizle
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Products Display -->
|
||
<div class="products-container">
|
||
<div class="products-grid" id="products-grid-list">
|
||
<!-- Product cards will be injected here -->
|
||
</div>
|
||
|
||
<!-- Empty State -->
|
||
<div class="empty-state hidden" id="db-empty-state">
|
||
<div class="empty-icon"><i class="fa-solid fa-box-open"></i></div>
|
||
<h2>Ürün Bulunamadı</h2>
|
||
<p>Aradığınız kriterlere uygun herhangi bir barkod kaydı mevcut değil.</p>
|
||
</div>
|
||
|
||
<!-- Loading State -->
|
||
<div class="loading-state hidden" id="db-loading-state">
|
||
<div class="spinner"></div>
|
||
<p>Ürünler yükleniyor...</p>
|
||
</div>
|
||
|
||
<!-- Pagination -->
|
||
<div class="pagination-wrapper" id="pagination-controls">
|
||
<button class="btn btn-page" id="btn-prev-page"><i class="fa-solid fa-chevron-left"></i> Önceki</button>
|
||
<div class="page-numbers" id="page-numbers-container">
|
||
<span class="active">1</span>
|
||
</div>
|
||
<button class="btn btn-page" id="btn-next-page">Sonraki <i class="fa-solid fa-chevron-right"></i></button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Tab: Add Product -->
|
||
<section id="add-product-tab" class="tab-content">
|
||
<div class="card form-card">
|
||
<h2>Manuel Barkod & Ürün Ekle</h2>
|
||
<p class="card-description">Veritabanına manuel olarak yeni bir ürün ve barkod kaydı girmek için aşağıdaki formu kullanın.</p>
|
||
|
||
<form id="product-form" class="premium-form">
|
||
<input type="hidden" id="form-product-id" value="">
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="form-barcode">Barkod Numarası (EAN-13) *</label>
|
||
<input type="text" id="form-barcode" required placeholder="Örn: 8680908020014">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="form-name">Ürün Adı (Miktar ve Birimli) *</label>
|
||
<input type="text" id="form-name" required placeholder="Örn: Indomie Körili Hazır Noodle (75 g)">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="form-category">Kategori</label>
|
||
<input type="text" id="form-category" placeholder="Örn: Gıda Ürünleri">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="form-subcategory">Alt Kategori</label>
|
||
<input type="text" id="form-subcategory" placeholder="Örn: Makarna">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="form-company">Ait Olduğu Şirket</label>
|
||
<input type="text" id="form-company" placeholder="Örn: Indofood">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="form-image">Ürün Görsel URL'si</label>
|
||
<input type="text" id="form-image" placeholder="Örn: https://example.com/image.jpg">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" id="btn-save-product" class="btn btn-primary btn-large">
|
||
<i class="fa-solid fa-save"></i> Ürünü Kaydet
|
||
</button>
|
||
<button type="button" id="btn-reset-form" class="btn btn-secondary">
|
||
Temizle
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<!-- Product Detail & Barcode Generator Modal -->
|
||
<div class="modal-overlay" id="product-detail-modal">
|
||
<div class="modal-container">
|
||
<button class="modal-close" id="btn-close-modal"><i class="fa-solid fa-xmark"></i></button>
|
||
<div class="modal-content-grid">
|
||
<!-- Left: Product info and Image -->
|
||
<div class="modal-left">
|
||
<div class="modal-product-img-box">
|
||
<img id="modal-product-image" src="" alt="Ürün Resmi" onerror="this.src='https://placehold.co/400x400/1e293b/cbd5e1?text=%C3%9Cr%C3%BCn+G%C3%B6rseli'">
|
||
</div>
|
||
<div class="modal-product-meta">
|
||
<h2 id="modal-product-name">Ürün Adı Buraya Gelecek</h2>
|
||
<div class="tag-row">
|
||
<span class="badge badge-category" id="modal-product-category"><i class="fa-solid fa-tags"></i> Kategori</span>
|
||
<span class="badge badge-company" id="modal-product-company"><i class="fa-solid fa-building"></i> Şirket</span>
|
||
</div>
|
||
|
||
<div class="parsed-details">
|
||
<h3>Birim ve Miktar Analizi</h3>
|
||
<table class="details-table">
|
||
<tr>
|
||
<td>Temiz Ürün Adı</td>
|
||
<td id="modal-clean-name">-</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Miktar (Ham)</td>
|
||
<td id="modal-amount-raw">-</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Sayısal Miktar</td>
|
||
<td id="modal-amount">-</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Birim</td>
|
||
<td id="modal-unit">-</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right: Barcode & QR Code generators -->
|
||
<div class="modal-right">
|
||
<h2>Barkod & Kod Üretimi</h2>
|
||
<p class="modal-desc">Ürün kodunu anında EAN-13 standartlarında veya mobil uyumlu QR kod olarak üretebilir, indirebilirsiniz.</p>
|
||
|
||
<div class="code-generator-section">
|
||
<!-- EAN-13 Barcode -->
|
||
<div class="barcode-render-box">
|
||
<div class="render-title">EAN-13 Barkodu</div>
|
||
<div class="canvas-wrapper">
|
||
<svg id="modal-barcode-svg"></svg>
|
||
</div>
|
||
<button class="btn btn-small btn-secondary download-btn" data-type="barcode">
|
||
<i class="fa-solid fa-download"></i> Barkod İndir (SVG)
|
||
</button>
|
||
</div>
|
||
|
||
<!-- QR Code -->
|
||
<div class="barcode-render-box">
|
||
<div class="render-title">QR Kod</div>
|
||
<div class="canvas-wrapper">
|
||
<canvas id="modal-qrcode-canvas"></canvas>
|
||
</div>
|
||
<button class="btn btn-small btn-secondary download-btn" data-type="qrcode">
|
||
<i class="fa-solid fa-download"></i> QR Kod İndir (PNG)
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Notification Toast -->
|
||
<div class="toast" id="toast">
|
||
<i class="fa-solid fa-circle-check toast-icon"></i>
|
||
<span class="toast-message">İşlem başarıyla gerçekleştirildi.</span>
|
||
</div>
|
||
</body>
|
||
</html>
|