Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Data Analysis - Gold Price Prediction</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| } | |
| .gold-accent { | |
| color: #FFD700; | |
| } | |
| .stat-card { | |
| border: none; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| transition: transform 0.3s ease; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .navbar-brand { | |
| font-weight: bold; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="navbar navbar-expand-lg navbar-dark gradient-bg"> | |
| <div class="container"> | |
| <a class="navbar-brand" href="/"> | |
| <i class="fas fa-coins gold-accent"></i> | |
| Gold Price Predictor | |
| </a> | |
| <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> | |
| <span class="navbar-toggler-icon"></span> | |
| </button> | |
| <div class="collapse navbar-collapse" id="navbarNav"> | |
| <ul class="navbar-nav ms-auto"> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="/">Home</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link active" href="/data-analysis">Data Analysis</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div class="container my-5"> | |
| <div class="row mb-4"> | |
| <div class="col-12"> | |
| <h1 class="text-center mb-5"> | |
| <i class="fas fa-chart-bar text-warning"></i> | |
| Analisis Data Historis Harga Emas | |
| </h1> | |
| </div> | |
| </div> | |
| <!-- Statistics Cards --> | |
| <div class="row mb-5"> | |
| <div class="col-md-3 mb-3"> | |
| <div class="card stat-card text-center"> | |
| <div class="card-body"> | |
| <i class="fas fa-database fa-2x text-primary mb-3"></i> | |
| <h5 class="card-title">Total Records</h5> | |
| <h3 class="text-primary">{{ stats.total_records }}</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 mb-3"> | |
| <div class="card stat-card text-center"> | |
| <div class="card-body"> | |
| <i class="fas fa-calendar-alt fa-2x text-info mb-3"></i> | |
| <h5 class="card-title">Date Range</h5> | |
| <p class="text-info small">{{ stats.date_range }}</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 mb-3"> | |
| <div class="card stat-card text-center"> | |
| <div class="card-body"> | |
| <i class="fas fa-chart-line fa-2x text-success mb-3"></i> | |
| <h5 class="card-title">Avg Close Price</h5> | |
| <h4 class="text-success">IDR {{ "{:,.0f}".format(stats.avg_close) }}</h4> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-3 mb-3"> | |
| <div class="card stat-card text-center"> | |
| <div class="card-body"> | |
| <i class="fas fa-chart-area fa-2x text-warning mb-3"></i> | |
| <h5 class="card-title">Avg Open Price</h5> | |
| <h4 class="text-warning">IDR {{ "{:,.0f}".format(stats.avg_open) }}</h4> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Additional Statistics --> | |
| <div class="row mb-5"> | |
| <div class="col-md-4 mb-3"> | |
| <div class="card stat-card"> | |
| <div class="card-body text-center"> | |
| <i class="fas fa-arrow-down fa-2x text-danger mb-3"></i> | |
| <h5 class="card-title">Minimum Close Price</h5> | |
| <h4 class="text-danger">IDR {{ "{:,.0f}".format(stats.min_close) }}</h4> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-4 mb-3"> | |
| <div class="card stat-card"> | |
| <div class="card-body text-center"> | |
| <i class="fas fa-arrow-up fa-2x text-success mb-3"></i> | |
| <h5 class="card-title">Maximum Close Price</h5> | |
| <h4 class="text-success">IDR {{ "{:,.0f}".format(stats.max_close) }}</h4> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-4 mb-3"> | |
| <div class="card stat-card"> | |
| <div class="card-body text-center"> | |
| <i class="fas fa-clock fa-2x text-primary mb-3"></i> | |
| <h5 class="card-title">Current Price</h5> | |
| <h5 class="text-primary">Close: IDR {{ "{:,.0f}".format(stats.current_close) }}</h5> | |
| <h5 class="text-info">Open: IDR {{ "{:,.0f}".format(stats.current_open) }}</h5> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Historical Chart --> | |
| <div class="card stat-card mb-5"> | |
| <div class="card-header"> | |
| <h5 class="mb-0"> | |
| <i class="fas fa-chart-line"></i> | |
| Grafik Harga Historis Emas | |
| </h5> | |
| </div> | |
| <div class="card-body text-center"> | |
| <img src="data:image/png;base64,{{ chart }}" class="img-fluid" alt="Historical Price Chart"> | |
| </div> | |
| </div> | |
| <!-- Information Cards --> | |
| <div class="row"> | |
| <div class="col-md-6 mb-4"> | |
| <div class="card stat-card"> | |
| <div class="card-header"> | |
| <h5 class="mb-0"> | |
| <i class="fas fa-info-circle"></i> | |
| Tentang Data | |
| </h5> | |
| </div> | |
| <div class="card-body"> | |
| <ul class="list-unstyled"> | |
| <li><i class="fas fa-check text-success"></i> Data diperoleh dari website https://www.investing.com/commodities/gold-historical-data</li> | |
| <li><i class="fas fa-check text-success"></i> Mencakup data historis emas selama 3 tahun</li> | |
| <li><i class="fas fa-check text-success"></i> Data telah dibersihkan dan dinormalisasi</li> | |
| <li><i class="fas fa-check text-success"></i> Tidak ada data yang hilang (null values)</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-6 mb-4"> | |
| <div class="card stat-card"> | |
| <div class="card-header"> | |
| <h5 class="mb-0"> | |
| <i class="fas fa-cog"></i> | |
| Tentang Model | |
| </h5> | |
| </div> | |
| <div class="card-body"> | |
| <ul class="list-unstyled"> | |
| <li><i class="fas fa-check text-success"></i> Algoritma: Linear Regression</li> | |
| <li><i class="fas fa-check text-success"></i> Sliding Window: 7 hari</li> | |
| <li><i class="fas fa-check text-success"></i> Normalisasi: MinMaxScaler</li> | |
| <li><i class="fas fa-check text-success"></i> Train/Test Split: 80/20</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Back to Prediction --> | |
| <div class="text-center mt-5"> | |
| <a href="/" class="btn btn-warning btn-lg"> | |
| <i class="fas fa-arrow-left"></i> | |
| Kembali ke Prediksi | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="gradient-bg text-center py-4 mt-5"> | |
| <div class="container"> | |
| <p class="mb-0">© 2025 Kelompok 4 - Sistem Prediksi Harga Emas. Powered by Machine Learning.</p> | |
| </div> | |
| </footer> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| </body> | |
| </html> |