<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ระบบลงเวลาทำงาน</title>
<!-- Modern Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Prompt:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<!-- Face API JS -->
<script src="https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/dist/face-api.min.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<h1>ลงเวลาทำงาน</h1>
<p class="status-text">เครือข่าย <span id="networkStatus">ตรวจสอบ...</span></p>
</div>
<div class="main-tabs">
<button class="main-tab active" data-tab="attendance">ลงเวลา</button>
<button class="main-tab" data-tab="history">ประวัติ</button>
</div>
<div class="main-content">
<div id="attendanceTab">
<div id="alertContainer"></div>
<div class="camera-section">
<div class="camera-container">
<video id="video" autoplay muted></video>
<canvas id="snapshotCanvas" style="display:none;"></canvas>
<div class="face-overlay" id="faceOverlay"></div>
</div>
<div class="controls">
<button class="btn" id="startCamera">เปิดกล้อง</button>
<button class="btn check-in" id="checkInBtn" disabled>เข้างาน</button>
<button class="btn check-out" id="checkOutBtn" disabled>ออกงาน</button>
</div>
</div>
<div class="loading" id="loadingIndicator">
<div class="spinner"></div>
<p>กำลังประมวลผล...</p>
</div>
<div class="info-section">
<div class="info-grid">
<div class="info-item">
<h3>วันที่</h3>
<p id="currentDate">-</p>
</div>
<div class="info-item">
<h3>เวลา</h3>
<p id="currentTime">-</p>
</div>
<div class="info-item">
<h3>สถานะ</h3>
<p id="currentStatus">ยังไม่ได้ลงเวลา</p>
</div>
<div class="info-item">
<h3>การตรวจสอบ</h3>
<p id="faceStatus">ยังไม่ได้ตรวจสอบ</p>
</div>
</div>
<div class="location-info">
<h3>ข้อมูลตำแหน่ง</h3>
<p id="locationInfo">กำลังหาตำแหน่ง...</p>
<p id="locationAccuracy"></p>
</div>
<div class="daily-summary" id="dailySummary">
<h3>สรุปวันนี้</h3>
<div class="summary-grid">
<div class="summary-item">
<span class="summary-label">เข้างาน:</span>
<span class="summary-value" id="todayCheckIn">-</span>
</div>
<div class="summary-item">
<span class="summary-label">ออกงาน:</span>
<span class="summary-value" id="todayCheckOut">-</span>
</div>
</div>
</div>
</div>
</div>
<div id="historyTab" style="display:none;">
<div class="history-section">
<h3>ประวัติการลงเวลา</h3>
<div class="history-tabs">
<button class="history-tab active" data-type="all">ทั้งหมด</button>
<button class="history-tab" data-type="check-in">เข้างาน</button>
<button class="history-tab" data-type="check-out">ออกงาน</button>
</div>
<div id="attendanceHistory"></div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
<script>
// Main tab logic
(function() {
function setActiveMainTab(tab) {
document.querySelectorAll('.main-tab').forEach(btn => btn.classList.remove('active'));
tab.classList.add('active');
}
function showTab(tabName) {
document.getElementById('attendanceTab').style.display = tabName === 'attendance' ? '' : 'none';
document.getElementById('historyTab').style.display = tabName === 'history' ? '' : 'none';
}
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.main-tab').forEach(tab => {
tab.addEventListener('click', function() {
setActiveMainTab(this);
showTab(this.getAttribute('data-tab'));
});
});
});
})();
// History sub-tab logic (เหมือนเดิม)
(function() {
function setActiveTab(tab) {
document.querySelectorAll('.history-tab').forEach(btn => btn.classList.remove('active'));
tab.classList.add('active');
}
function filterHistory(type) {
if (window.attendanceSystem && window.attendanceSystem.loadAttendanceHistory) {
window.attendanceSystem.loadAttendanceHistory(type);
}
}
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.history-tab').forEach(tab => {
tab.addEventListener('click', function() {
setActiveTab(this);
filterHistory(this.getAttribute('data-type'));
});
});
});
})();
</script>
</body>
</html>