Spaces:
Sleeping
Sleeping
| <html lang="id"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Sistem Pengenalan Wajah</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> | |
| body { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| .card { | |
| border-radius: 15px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| border: none; | |
| } | |
| .btn-custom { | |
| border-radius: 25px; | |
| padding: 12px 30px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-custom:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); | |
| } | |
| .face-list { | |
| max-height: 300px; | |
| overflow-y: auto; | |
| } | |
| .face-item { | |
| background: #f8f9fa; | |
| border-radius: 10px; | |
| margin-bottom: 10px; | |
| padding: 15px; | |
| border-left: 4px solid #667eea; | |
| } | |
| .navbar-brand { | |
| font-weight: bold; | |
| font-size: 1.5rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: rgba(0, 0, 0, 0.1)"> | |
| <div class="container"> | |
| <a class="navbar-brand" href="/"> | |
| <i class="fas fa-user-check me-2"></i> | |
| Sistem Pengenalan Wajah | |
| </a> | |
| </div> | |
| </nav> | |
| <div class="container mt-5"> | |
| <div class="row justify-content-center"> | |
| <div class="col-md-8"> | |
| <div class="card"> | |
| <div class="card-header text-center bg-primary text-white"> | |
| <h2 class="mb-0"> | |
| <i class="fas fa-home me-2"></i> | |
| Dashboard Utama | |
| </h2> | |
| </div> | |
| <div class="card-body p-5"> | |
| <div class="text-center mb-4"> | |
| <p class="lead">Selamat datang di sistem pengenalan wajah sederhana!</p> | |
| </div> | |
| <div class="row mb-4"> | |
| <div class="col-md-6 mb-3"> | |
| <a href="/register" class="btn btn-success btn-custom w-100"> | |
| <i class="fas fa-user-plus me-2"></i> | |
| Daftarkan Wajah Baru | |
| </a> | |
| </div> | |
| <div class="col-md-6 mb-3"> | |
| <a href="/recognize" class="btn btn-primary btn-custom w-100"> | |
| <i class="fas fa-search me-2"></i> | |
| Pengenalan Wajah | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-5"> | |
| <h4 class="mb-3"> | |
| <i class="fas fa-users me-2"></i> | |
| Wajah Terdaftar ({{ registered_faces|length }}) | |
| </h4> | |
| {% if registered_faces %} | |
| <div class="face-list"> | |
| {% for name in registered_faces %} | |
| <div class="face-item d-flex justify-content-between align-items-center"> | |
| <div> | |
| <i class="fas fa-user me-2 text-primary"></i> | |
| <strong>{{ name }}</strong> | |
| </div> | |
| <a href="/delete_face/{{ name }}" class="btn btn-danger btn-sm" onclick="return confirm('Apakah Anda yakin ingin menghapus {{ name }}?')"> | |
| <i class="fas fa-trash"></i> | |
| </a> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| {% else %} | |
| <div class="alert alert-info"> | |
| <i class="fas fa-info-circle me-2"></i> | |
| Belum ada wajah yang terdaftar. Silakan daftarkan wajah baru terlebih dahulu. | |
| </div> | |
| {% endif %} | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- <div class="row justify-content-center mt-4"> | |
| <div class="col-md-8"> | |
| <div class="card"> | |
| <div class="card-body"> | |
| <h5 class="card-title"> | |
| <i class="fas fa-info-circle me-2"></i> | |
| Cara Penggunaan | |
| </h5> | |
| <ol> | |
| <li><strong>Daftarkan Wajah Baru:</strong> Klik tombol "Daftarkan Wajah Baru" untuk menambahkan wajah ke database</li> | |
| <li><strong>Pengenalan Wajah:</strong> Klik tombol "Pengenalan Wajah" untuk mengidentifikasi wajah yang sudah terdaftar</li> | |
| <li><strong>Hapus Data:</strong> Gunakan tombol sampah untuk menghapus data wajah yang tidak diperlukan</li> | |
| </ol> | |
| </div> | |
| </div> | |
| </div> | |
| </div> --> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| </body> | |
| </html> | |