Spaces:
Running
Running
| <html lang="tr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="BIST-100 hisse analizi ve TimesFM tahmin sistemi - Güven puanı ile desteklenen yapay zeka tahminleri"> | |
| <title>BIST Predictor — TimesFM Tahmin Sistemi</title> | |
| <!-- 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=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <!-- Chart.js --> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script> | |
| <link rel="stylesheet" href="css/style.css"> | |
| </head> | |
| <body> | |
| <!-- ─── Header ────────────────────────────────────────────────────── --> | |
| <header id="app-header"> | |
| <div class="header-left"> | |
| <div class="logo"> | |
| <div class="logo-icon"> | |
| <svg width="28" height="28" viewBox="0 0 28 28" fill="none"> | |
| <path d="M14 2L26 8V20L14 26L2 20V8L14 2Z" stroke="url(#logo-grad)" stroke-width="2" fill="none"/> | |
| <path d="M14 8L20 11V17L14 20L8 17V11L14 8Z" fill="url(#logo-grad)"/> | |
| <defs> | |
| <linearGradient id="logo-grad" x1="2" y1="2" x2="26" y2="26"> | |
| <stop offset="0%" stop-color="#00e676"/> | |
| <stop offset="100%" stop-color="#00bcd4"/> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| </div> | |
| <div class="logo-text"> | |
| <h1>BIST Predictor</h1> | |
| <span class="logo-subtitle">TimesFM 2.5 Tahmin Motoru</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="header-center"> | |
| <div class="horizon-tabs" id="horizon-tabs"> | |
| <button class="horizon-tab active" data-horizon="10">10 Gün</button> | |
| <button class="horizon-tab" data-horizon="30">30 Gün</button> | |
| <button class="horizon-tab" data-horizon="90">90 Gün</button> | |
| </div> | |
| </div> | |
| <div class="header-right"> | |
| <div class="system-status" id="system-status"> | |
| <div class="status-dot" id="status-dot"></div> | |
| <span id="status-text">Bağlanıyor...</span> | |
| </div> | |
| <div class="header-date" id="header-date"></div> | |
| <button class="btn btn-icon" id="btn-refresh" title="Verileri Yenile"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M23 4v6h-6M1 20v-6h6"/> | |
| <path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- ─── Main Content ──────────────────────────────────────────────── --> | |
| <main id="app-main"> | |
| <!-- Sol Panel: Hisse Listesi --> | |
| <aside class="sidebar" id="sidebar"> | |
| <div class="sidebar-header"> | |
| <h2>BIST-100 Hisseler</h2> | |
| <div class="search-box"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/> | |
| </svg> | |
| <input type="text" id="stock-search" placeholder="Hisse ara..." autocomplete="off"> | |
| </div> | |
| <div class="sort-box" style="margin-top: 10px;"> | |
| <select id="stock-sort" class="sort-select" style="width:100%; background:var(--bg-card); color:var(--text-main); border:1px solid rgba(255,255,255,0.06); border-radius:8px; padding:8px 12px; font-family:var(--font-primary); font-size: 0.85rem; outline:none; cursor:pointer;"> | |
| <option value="name">İsme Göre (A-Z)</option> | |
| <option value="score">Güven Puanına Göre</option> | |
| <option value="increase">Tahmini Artışa Göre</option> | |
| <option value="decrease">Tahmini Azalışa Göre</option> | |
| </select> | |
| </div> | |
| <div class="category-tabs" id="category-tabs" style="display:flex; gap:5px; margin-top:10px;"> | |
| <button class="cat-btn active" data-cat="all" style="flex:1; padding:6px; border-radius:6px; background:rgba(0, 230, 118, 0.2); color:#00e676; border:1px solid rgba(0, 230, 118, 0.3); font-size:0.75rem; font-weight:600; cursor:pointer; transition:all 0.2s;">Tümü</button> | |
| <button class="cat-btn" data-cat="Hisse" style="flex:1; padding:6px; border-radius:6px; background:var(--bg-card); color:var(--text-muted); border:1px solid rgba(255,255,255,0.06); font-size:0.75rem; cursor:pointer; transition:all 0.2s;">Hisse</button> | |
| <button class="cat-btn" data-cat="Emtia" style="flex:1; padding:6px; border-radius:6px; background:var(--bg-card); color:var(--text-muted); border:1px solid rgba(255,255,255,0.06); font-size:0.75rem; cursor:pointer; transition:all 0.2s;">Emtia</button> | |
| </div> | |
| </div> | |
| <div class="stock-list" id="stock-list"> | |
| <div class="loading-spinner"> | |
| <div class="spinner"></div> | |
| <span>Yükleniyor...</span> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Ana Panel: Detay Görünümü --> | |
| <section class="main-panel" id="main-panel"> | |
| <!-- Üst Kartlar --> | |
| <div class="stats-row" id="stats-row"> | |
| <div class="stat-card" id="stat-price"> | |
| <div class="stat-label">Son Fiyat</div> | |
| <div class="stat-value" id="stat-price-value">—</div> | |
| <div class="stat-change" id="stat-price-change"></div> | |
| </div> | |
| <div class="stat-card" id="stat-prediction"> | |
| <div class="stat-label">Tahmin (Sonraki)</div> | |
| <div class="stat-value" id="stat-prediction-value">—</div> | |
| <div class="stat-change" id="stat-prediction-change"></div> | |
| </div> | |
| <div class="stat-card confidence-card" id="stat-confidence"> | |
| <div class="stat-label">Güven Puanı</div> | |
| <div class="confidence-gauge" id="confidence-gauge"> | |
| <svg viewBox="0 0 120 120" class="gauge-svg"> | |
| <circle cx="60" cy="60" r="50" class="gauge-bg"/> | |
| <circle cx="60" cy="60" r="50" class="gauge-fill" id="gauge-fill" | |
| stroke-dasharray="314" stroke-dashoffset="314"/> | |
| </svg> | |
| <div class="gauge-value" id="gauge-value">—</div> | |
| </div> | |
| <div class="confidence-label" id="confidence-label"></div> | |
| </div> | |
| <div class="stat-card" id="stat-accuracy"> | |
| <div class="stat-label">Yön Doğruluğu</div> | |
| <div class="stat-value" id="stat-accuracy-value">—</div> | |
| <div class="stat-sub" id="stat-accuracy-sub"></div> | |
| </div> | |
| </div> | |
| <!-- Grafik Alanı --> | |
| <div class="chart-container glass-card" id="chart-container"> | |
| <div class="chart-header"> | |
| <h3 id="chart-title">Hisse Seçin</h3> | |
| <div class="chart-controls"> | |
| <button class="btn btn-sm active" data-range="30" id="btn-range-30">1 Ay</button> | |
| <button class="btn btn-sm" data-range="90" id="btn-range-90">3 Ay</button> | |
| <button class="btn btn-sm" data-range="180" id="btn-range-180">6 Ay</button> | |
| </div> | |
| </div> | |
| <div class="chart-wrapper"> | |
| <canvas id="price-chart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Alt Kartlar --> | |
| <div class="bottom-row"> | |
| <!-- Güven Puanı Detayları --> | |
| <div class="detail-card glass-card" id="confidence-details"> | |
| <h3>Güven Puanı Detayları</h3> | |
| <div class="confidence-metrics" id="confidence-metrics"> | |
| <div class="metric-bar"> | |
| <div class="metric-info"> | |
| <span class="metric-name">Yön Doğruluğu</span> | |
| <span class="metric-weight">%40</span> | |
| </div> | |
| <div class="bar-track"> | |
| <div class="bar-fill" id="bar-direction" style="width:0%"></div> | |
| </div> | |
| <span class="metric-value" id="val-direction">0</span> | |
| </div> | |
| <div class="metric-bar"> | |
| <div class="metric-info"> | |
| <span class="metric-name">MAPE Skoru</span> | |
| <span class="metric-weight">%30</span> | |
| </div> | |
| <div class="bar-track"> | |
| <div class="bar-fill" id="bar-mape" style="width:0%"></div> | |
| </div> | |
| <span class="metric-value" id="val-mape">0</span> | |
| </div> | |
| <div class="metric-bar"> | |
| <div class="metric-info"> | |
| <span class="metric-name">Quantile Kapsama</span> | |
| <span class="metric-weight">%20</span> | |
| </div> | |
| <div class="bar-track"> | |
| <div class="bar-fill" id="bar-quantile" style="width:0%"></div> | |
| </div> | |
| <span class="metric-value" id="val-quantile">0</span> | |
| </div> | |
| <div class="metric-bar"> | |
| <div class="metric-info"> | |
| <span class="metric-name">Volatilite Uyumu</span> | |
| <span class="metric-weight">%10</span> | |
| </div> | |
| <div class="bar-track"> | |
| <div class="bar-fill" id="bar-volatility" style="width:0%"></div> | |
| </div> | |
| <span class="metric-value" id="val-volatility">0</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tahmin Karşılaştırma Tablosu --> | |
| <div class="detail-card glass-card" id="comparison-table-card"> | |
| <h3>Tahmin vs Gerçek</h3> | |
| <div class="table-wrapper"> | |
| <table class="data-table" id="comparison-table"> | |
| <thead> | |
| <tr> | |
| <th>Tarih</th> | |
| <th>Tahmin</th> | |
| <th>Gerçek</th> | |
| <th>Hata %</th> | |
| <th>Bant</th> | |
| </tr> | |
| </thead> | |
| <tbody id="comparison-tbody"> | |
| <tr><td colspan="5" class="empty-state">Henüz karşılaştırma verisi yok</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- ─── Toast Notification ─────────────────────────────────────── --> | |
| <div class="toast-container" id="toast-container"></div> | |
| <!-- ─── Loading Overlay ────────────────────────────────────────── --> | |
| <div class="loading-overlay" id="loading-overlay" style="display:none"> | |
| <div class="loading-content"> | |
| <div class="spinner large"></div> | |
| <h3 id="loading-title">İşlem devam ediyor...</h3> | |
| <p id="loading-message"></p> | |
| <div class="progress-bar" id="loading-progress-bar" style="display:none"> | |
| <div class="progress-fill" id="loading-progress-fill"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scripts --> | |
| <script src="js/api.js"></script> | |
| <script src="js/charts.js"></script> | |
| <script src="js/app.js"></script> | |
| </body> | |
| </html> | |