<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HR-Pro Dashboard</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700&family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="app-container">
<!-- Desktop Navigation Header -->
<nav class="desktop-nav">
<div class="nav-brand">
<h1><i class="fas fa-building"></i> HR-Pro</h1>
</div>
<div class="nav-menu">
<button id="nav-dashboard" class="nav-item active">
<i class="fas fa-tachometer-alt"></i>
<span>Dashboard</span>
</button>
<button id="nav-employees" class="nav-item">
<i class="fas fa-users"></i>
<span>พนักงาน</span>
</button>
<button id="nav-recruitment" class="nav-item">
<i class="fas fa-user-plus"></i>
<span>สรรหา</span>
</button>
<button id="nav-tasks" class="nav-item">
<i class="fas fa-tasks"></i>
<span>งาน</span>
</button>
<button id="nav-leave" class="nav-item">
<i class="fas fa-calendar-alt"></i>
<span>ลา</span>
</button>
</div>
<div class="nav-actions">
<button class="notification-btn">
<i class="fas fa-bell"></i>
<span class="notification-badge">3</span>
</button>
<div class="user-profile">
<div class="user-avatar">
<i class="fas fa-user"></i>
</div>
</div>
</div>
</nav>
<!-- Main Content for Desktop -->
<main id="desktop-content">
<!-- Content will be dynamically loaded by JavaScript for desktop -->
</main>
<!-- Mobile Container -->
<div class="mobile-container">
<!-- Mobile Header -->
<header class="mobile-header">
<h1 id="header-title">Dashboard</h1>
<div class="header-actions">
<i class="fas fa-bell"></i>
</div>
</header>
<!-- Main Content -->
<main id="app-content">
<!-- Content will be dynamically loaded by JavaScript -->
</main>
<!-- Mobile Navigation Bar -->
<nav class="mobile-nav">
<button id="nav-dashboard-mobile" class="nav-button active">
<i class="fas fa-tachometer-alt"></i>
<span>Dashboard</span>
</button>
<button id="nav-employees-mobile" class="nav-button">
<i class="fas fa-users"></i>
<span>พนักงาน</span>
</button>
<button id="nav-recruitment-mobile" class="nav-button">
<i class="fas fa-user-plus"></i>
<span>สรรหา</span>
</button>
<button id="nav-tasks-mobile" class="nav-button">
<i class="fas fa-tasks"></i>
<span>งาน</span>
</button>
<button id="nav-leave-mobile" class="nav-button">
<i class="fas fa-calendar-alt"></i>
<span>ลา</span>
</button>
</nav>
</div>
</div>
<script src="app.js"></script>
</body>
</html>