121 lines
5.3 KiB
PHP
121 lines
5.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<title>FruitSort AI Dashboard</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
|
|
</head>
|
|
<body>
|
|
<div class="app-layout">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar" id="sidebar">
|
|
<div class="sidebar-brand">
|
|
<div class="brand-icon"><i class="fas fa-leaf"></i></div>
|
|
<div class="brand-text">FruitSort <span>AI</span></div>
|
|
<button class="close-sidebar" id="closeSidebar"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
|
|
<div class="sidebar-menu">
|
|
<div class="menu-label">MENU UTAMA</div>
|
|
<a href="/" class="menu-item {{ request()->is('/') ? 'active' : '' }}">
|
|
<i class="fas fa-border-all"></i>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
<a href="/history" class="menu-item {{ request()->is('history') ? 'active' : '' }}">
|
|
<i class="fas fa-list-ul"></i>
|
|
<span>Riwayat Sortir</span>
|
|
</a>
|
|
<a href="/gallery" class="menu-item {{ request()->is('gallery') ? 'active' : '' }}">
|
|
<i class="fas fa-images"></i>
|
|
<span>Galeri Foto</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="sidebar-footer">
|
|
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<!-- Header -->
|
|
<header class="topheader">
|
|
<div class="header-left">
|
|
<button class="menu-toggle" id="menuToggle"><i class="fas fa-bars"></i></button>
|
|
<h2 class="page-title">Monitoring Real-time</h2>
|
|
</div>
|
|
<div class="header-right">
|
|
<!-- Session Control -->
|
|
<div class="session-control">
|
|
<div class="session-status">
|
|
<span class="indicator-dot" id="indicatorDot"></span>
|
|
<div class="status-text">
|
|
<span class="indicator-text" id="indicatorText">Menunggu...</span>
|
|
<span class="session-timer" id="sessionTimer"></span>
|
|
</div>
|
|
</div>
|
|
<button class="btn-sorting" id="btnSorting" disabled>
|
|
<span id="btnSortIcon" style="font-size: 1.1rem; display: flex; align-items: center;"><i class="fas fa-play"></i></span>
|
|
<span class="btn-label" id="btnSortLabel">Memuat...</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Scrollable Body -->
|
|
<div class="content-body">
|
|
@yield("content")
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Modals & Toasts -->
|
|
<div class="foto-modal-overlay" id="fotoModal">
|
|
<div class="foto-modal-box">
|
|
<button class="foto-modal-close" id="fotoModalClose"><i class="fas fa-times"></i></button>
|
|
<img id="fotoModalImg" src="" alt="Foto Buah" />
|
|
<div class="foto-modal-info">
|
|
<span class="foto-badge" id="fotoModalLabel"></span>
|
|
<span class="foto-time" id="fotoModalTime"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="confirmModal">
|
|
<div class="modal-dialog">
|
|
<div class="modal-icon-wrap warning"><i class="fas fa-stop-circle"></i></div>
|
|
<h3 class="modal-title">Hentikan Sortir?</h3>
|
|
<p class="modal-desc">Data yang sudah terkumpul akan dikalkulasi dan hasilnya dikirim ke Telegram.</p>
|
|
<div class="modal-actions">
|
|
<button class="btn-secondary" id="modalBtnCancel">Batal</button>
|
|
<button class="btn-danger" id="modalBtnConfirm">Ya, Hentikan</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast-container" id="toastContainer"></div>
|
|
|
|
<script src="{{ asset('js/dashboard.js') }}"></script>
|
|
<script>
|
|
// Sidebar Toggle Script
|
|
document.getElementById('menuToggle').addEventListener('click', () => {
|
|
document.getElementById('sidebar').classList.toggle('active');
|
|
});
|
|
document.getElementById('closeSidebar').addEventListener('click', () => {
|
|
document.getElementById('sidebar').classList.remove('active');
|
|
});
|
|
document.querySelectorAll('.sidebar-menu a').forEach(link => {
|
|
link.addEventListener('click', function() {
|
|
document.querySelectorAll('.sidebar-menu a').forEach(l => l.classList.remove('active'));
|
|
this.classList.add('active');
|
|
if(window.innerWidth <= 768) document.getElementById('sidebar').classList.remove('active');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|