<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard</title>
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Kanit', sans-serif;
background: linear-gradient(135deg, #0f1419 0%, #1a2332 100%);
color: white;
min-height: 100vh;
}
/* Login Page Styles */
.login-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #0f1419 0%, #1a2332 50%, #2c3e50 100%);
}
.login-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 40px;
width: 100%;
max-width: 400px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}
.login-header {
text-align: center;
margin-bottom: 30px;
}
.login-header h1 {
font-size: 28px;
font-weight: 700;
margin-bottom: 8px;
background: linear-gradient(45deg, #3b82f6, #60a5fa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.login-header p {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
}
.form-group input {
width: 100%;
padding: 12px 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
color: white;
font-size: 14px;
transition: all 0.3s ease;
}
.form-group input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.login-btn {
width: 100%;
padding: 12px;
background: linear-gradient(45deg, #1e40af, #3b82f6);
border: none;
border-radius: 12px;
color: white;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 10px;
}
.login-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
}
/* Dashboard Styles */
.dashboard {
display: none;
}
.dashboard.active {
display: block;
}
.sidebar {
position: fixed;
left: 0;
top: 0;
width: 280px;
height: 100vh;
background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
border-right: 1px solid rgba(255, 255, 255, 0.1);
overflow-y: auto;
z-index: 1000;
}
.sidebar-header {
padding: 30px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.logo {
display: flex;
align-items: center;
gap: 12px;
}
.logo-icon {
width: 40px;
height: 40px;
background: linear-gradient(45deg, #3b82f6, #60a5fa);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.logo h2 {
font-size: 20px;
font-weight: 700;
}
.nav-menu {
padding: 20px 0;
}
.nav-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px 20px;
cursor: pointer;
transition: all 0.3s ease;
border-left: 3px solid transparent;
}
.nav-item:hover,
.nav-item.active {
background: rgba(59, 130, 246, 0.1);
border-left-color: #3b82f6;
}
.nav-item .material-icons {
font-size: 22px;
color: rgba(255, 255, 255, 0.7);
}
.nav-item span {
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
}
.main-content {
margin-left: 280px;
padding: 0;
min-height: 100vh;
}
.topbar {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 20px 30px;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 100;
}
.search-box {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 12px 16px;
width: 300px;
}
.search-box input {
background: none;
border: none;
outline: none;
color: white;
margin-left: 10px;
width: 100%;
}
.user-profile {
display: flex;
align-items: center;
gap: 15px;
}
.notifications {
position: relative;
padding: 8px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.notifications:hover {
background: rgba(255, 255, 255, 0.1);
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(45deg, #3b82f6, #60a5fa);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
cursor: pointer;
}
.content-area {
padding: 30px;
}
.page-header {
margin-bottom: 30px;
}
.page-title {
font-size: 28px;
font-weight: 700;
margin-bottom: 8px;
}
.page-subtitle {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.stat-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 25px;
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.stat-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.stat-icon {
width: 50px;
height: 50px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.stat-icon.blue {
background: linear-gradient(45deg, #3b82f6, #60a5fa);
}
.stat-icon.green {
background: linear-gradient(45deg, #10b981, #34d399);
}
.stat-icon.purple {
background: linear-gradient(45deg, #8b5cf6, #a78bfa);
}
.stat-icon.orange {
background: linear-gradient(45deg, #f59e0b, #fbbf24);
}
.stat-value {
font-size: 32px;
font-weight: 700;
margin-bottom: 5px;
}
.stat-label {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
margin-bottom: 10px;
}
.stat-change {
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
}
.stat-change.positive {
color: #34d399;
}
.stat-change.negative {
color: #f87171;
}
.charts-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
margin-bottom: 30px;
}
.chart-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 25px;
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.chart-title {
font-size: 18px;
font-weight: 600;
}
canvas {
width: 100%;
max-height: 200px;
}
.recent-activity {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 25px;
}
.activity-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.activity-item:last-child {
border-bottom: none;
}
.activity-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(45deg, #3b82f6, #60a5fa);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
}
.activity-info h4 {
font-size: 14px;
font-weight: 600;
margin-bottom: 2px;
}
.activity-info p {
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
}
.activity-time {
margin-left: auto;
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
}
.logout-btn {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
padding: 12px;
background: linear-gradient(45deg, #dc2626, #ef4444);
border: none;
border-radius: 12px;
color: white;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.logout-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(220, 38, 38, 0.3);
}
@media (max-width: 768px) {
.sidebar {
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.sidebar.open {
transform: translateX(0);
}
.main-content {
margin-left: 0;
}
.charts-grid {
grid-template-columns: 1fr;
}
.stats-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- Login Page -->
<div class="login-container" id="loginContainer">
<div class="login-card">
<div class="login-header">
<h1>Admin Panel</h1>
<p>เข้าสู่ระบบเพื่อจัดการแดชบอร์ด</p>
</div>
<form id="loginForm">
<div class="form-group">
<label for="username">ชื่อผู้ใช้</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">รหัสผ่าน</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit" class="login-btn">เข้าสู่ระบบ</button>
</form>
</div>
</div>
<!-- Dashboard -->
<div class="dashboard" id="dashboard">
<!-- Sidebar -->
<aside class="sidebar">
<div class="sidebar-header">
<div class="logo">
<div class="logo-icon">
<span class="material-icons">dashboard</span>
</div>
<h2>Admin Panel</h2>
</div>
</div>
<nav class="nav-menu">
<div class="nav-item active" data-page="dashboard">
<span class="material-icons">dashboard</span>
<span>แดชบอร์ด</span>
</div>
<div class="nav-item" data-page="users">
<span class="material-icons">people</span>
<span>ผู้ใช้งาน</span>
</div>
<div class="nav-item" data-page="products">
<span class="material-icons">inventory</span>
<span>สินค้า</span>
</div>
<div class="nav-item" data-page="orders">
<span class="material-icons">shopping_cart</span>
<span>คำสั่งซื้อ</span>
</div>
<div class="nav-item" data-page="analytics">
<span class="material-icons">analytics</span>
<span>วิเคราะห์</span>
</div>
<div class="nav-item" data-page="settings">
<span class="material-icons">settings</span>
<span>ตั้งค่า</span>
</div>
</nav>
<button class="logout-btn" id="logoutBtn">
<span class="material-icons" style="font-size: 18px; margin-right: 8px;">logout</span>
ออกจากระบบ
</button>
</aside>
<!-- Main Content -->
<main class="main-content">
<!-- Top Bar -->
<header class="topbar">
<div class="search-box">
<span class="material-icons">search</span>
<input type="text" placeholder="ค้นหา...">
</div>
<div class="user-profile">
<div class="notifications">
<span class="material-icons">notifications</span>
</div>
<div class="user-avatar" id="userAvatar">A</div>
</div>
</header>
<!-- Content Area -->
<div class="content-area">
<div class="page-header">
<h1 class="page-title">แดชบอร์ด</h1>
<p class="page-subtitle">ภาพรวมของระบบและข้อมูลสำคัญ</p>
</div>
<!-- Stats Cards -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-header">
<div class="stat-icon blue">
<span class="material-icons">people</span>
</div>
</div>
<div class="stat-value">2,543</div>
<div class="stat-label">ผู้ใช้งานทั้งหมด</div>
<div class="stat-change positive">
<span class="material-icons" style="font-size: 16px;">trending_up</span>
+12.5% จากเดือนที่แล้ว
</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-icon green">
<span class="material-icons">shopping_cart</span>
</div>
</div>
<div class="stat-value">1,892</div>
<div class="stat-label">คำสั่งซื้อ</div>
<div class="stat-change positive">
<span class="material-icons" style="font-size: 16px;">trending_up</span>
+8.2% จากเดือนที่แล้ว
</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-icon purple">
<span class="material-icons">attach_money</span>
</div>
</div>
<div class="stat-value">฿89,432</div>
<div class="stat-label">ยอดขายวันนี้</div>
<div class="stat-change negative">
<span class="material-icons" style="font-size: 16px;">trending_down</span>
-3.1% จากเมื่อวาน
</div>
</div>
<div class="stat-card">
<div class="stat-header">
<div class="stat-icon orange">
<span class="material-icons">inventory</span>
</div>
</div>
<div class="stat-value">342</div>
<div class="stat-label">สินค้าในคลัง</div>
<div class="stat-change positive">
<span class="material-icons" style="font-size: 16px;">trending_up</span>
+5.7% จากสัปดาห์ที่แล้ว
</div>
</div>
</div>
<!-- Charts -->
<div class="charts-grid">
<div class="chart-card">
<div class="chart-header">
<h3 class="chart-title">ยอดขายรายเดือน</h3>
</div>
<canvas id="salesChart"></canvas>
</div>
<div class="chart-card">
<div class="chart-header">
<h3 class="chart-title">สัดส่วนผู้ใช้งาน</h3>
</div>
<canvas id="userChart"></canvas>
</div>
</div>
<!-- Recent Activity -->
<div class="recent-activity">
<div class="chart-header">
<h3 class="chart-title">กิจกรรมล่าสุด</h3>
</div>
<div class="activity-item">
<div class="activity-avatar">JD</div>
<div class="activity-info">
<h4>จอห์น โด สั่งซื้อสินค้า</h4>
<p>สั่งซื้อ MacBook Pro M2 จำนวน 1 เครื่อง</p>
</div>
<div class="activity-time">5 นาทีที่ผ่านมา</div>
</div>
<div class="activity-item">
<div class="activity-avatar">AS</div>
<div class="activity-info">
<h4>แอนนา สมิธ ลงทะเบียนใหม่</h4>
<p>ผู้ใช้ใหม่เข้าร่วมระบบ</p>
</div>
<div class="activity-time">15 นาทีที่ผ่านมา</div>
</div>
<div class="activity-item">
<div class="activity-avatar">MB</div>
<div class="activity-info">
<h4>ไมค์ บราวน์ อัพเดทโปรไฟล์</h4>
<p>เปลี่ยนข้อมูลส่วนตัวและรูปภาพ</p>
</div>
<div class="activity-time">1 ชั่วโมงที่ผ่านมา</div>
</div>
<div class="activity-item">
<div class="activity-avatar">SK</div>
<div class="activity-info">
<h4>ซาร่า คิม ยกเลิกคำสั่งซื้อ</h4>
<p>ยกเลิกคำสั่งซื้อ #ORD-2024-001</p>
</div>
<div class="activity-time">2 ชั่วโมงที่ผ่านมา</div>
</div>
</div>
</div>
</main>
</div>
<script>
// Authentication
const loginForm = document.getElementById('loginForm');
const loginContainer = document.getElementById('loginContainer');
const dashboard = document.getElementById('dashboard');
const logoutBtn = document.getElementById('logoutBtn');
// Check if user is already logged in
if (sessionStorage.getItem('isLoggedIn')) {
showDashboard();
}
loginForm.addEventListener('submit', function(e) {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// Simple authentication (replace with real authentication)
if (username === 'admin' && password === 'admin123') {
sessionStorage.setItem('isLoggedIn', 'true');
sessionStorage.setItem('username', username);
showDashboard();
} else {
alert('ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง');
}
});
logoutBtn.addEventListener('click', function() {
sessionStorage.removeItem('isLoggedIn');
sessionStorage.removeItem('username');
showLogin();
});
function showDashboard() {
loginContainer.style.display = 'none';
dashboard.classList.add('active');
// Set user avatar
const username = sessionStorage.getItem('username') || 'A';
document.getElementById('userAvatar').textContent = username.charAt(0).toUpperCase();
// Initialize charts
initCharts();
}
function showLogin() {
loginContainer.style.display = 'flex';
dashboard.classList.remove('active');
}
// Navigation
const navItems = document.querySelectorAll('.nav-item');
navItems.forEach(item => {
item.addEventListener('click', function() {
navItems.forEach(nav => nav.classList.remove('active'));
this.classList.add('active');
const page = this.dataset.page;
updatePageContent(page);
});
});
function updatePageContent(page) {
const pageTitle = document.querySelector('.page-title');
const pageSubtitle = document.querySelector('.page-subtitle');
switch (page) {
case 'dashboard':
pageTitle.textContent = 'แดชบอร์ด';
pageSubtitle.textContent = 'ภาพรวมของระบบและข้อมูลสำคัญ';
break;
case 'users':
pageTitle.textContent = 'จัดการผู้ใช้งาน';
pageSubtitle.textContent = 'ดูและจัดการข้อมูลผู้ใช้งานในระบบ';
break;
case 'products':
pageTitle.textContent = 'จัดการสินค้า';
pageSubtitle.textContent = 'เพิ่ม แก้ไข และจัดการสินค้าในระบบ';
break;
case 'orders':
pageTitle.textContent = 'จัดการคำสั่งซื้อ';
pageSubtitle.textContent = 'ติดตามและจัดการคำสั่งซื้อของลูกค้า';
break;
case 'analytics':
pageTitle.textContent = 'วิเคราะห์ข้อมูล';
pageSubtitle.textContent = 'รายงานและการวิเคราะห์ข้อมูลทางธุรกิจ';
break;
case 'settings':
pageTitle.textContent = 'ตั้งค่าระบบ';
pageSubtitle.textContent = 'กำหนดค่าและตั้งค่าระบบต่างๆ';
break;
}
}
// Initialize Charts
function initCharts() {
// Sales Chart
const salesCtx = document.getElementById('salesChart').getContext('2d');
new Chart(salesCtx, {
type: 'line',
data: {
labels: ['ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.'],
datasets: [{
label: 'ยอดขาย (บาท)',
data: [65000, 89000, 120000, 81000, 156000, 189000],
borderColor: '#3b82f6',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
borderWidth: 3,
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
labels: {
color: 'white'
}
}
},
scales: {
y: {
beginAtZero: true,
ticks: {
color: 'rgba(255, 255, 255, 0.7)'
},
grid: {
color: 'rgba(255, 255, 255, 0.1)'
}
},
x: {
ticks: {
color: 'rgba(255, 255, 255, 0.7)'
},
grid: {
color: 'rgba(255, 255, 255, 0.1)'
}
}
}
}
});
// User Chart
const userCtx = document.getElementById('userChart').getContext('2d');
new Chart(userCtx, {
type: 'doughnut',
data: {
labels: ['ผู้ใช้ใหม่', 'ผู้ใช้เก่า', 'ผู้ใช้ VIP'],
datasets: [{
data: [45, 35, 20],
backgroundColor: [
'#3b82f6',
'#10b981',
'#f59e0b'
],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
labels: {
color: 'white',
padding: 20,
usePointStyle: true
}
}
}
}
});
}
// Mobile menu toggle
function toggleSidebar() {
const sidebar = document.querySelector('.sidebar');
sidebar.classList.toggle('open');
}
// Add mobile menu button if needed
if (window.innerWidth <= 768) {
const topbar = document.querySelector('.topbar');
const menuBtn = document.createElement('button');
menuBtn.innerHTML = '<span class="material-icons">menu</span>';
menuBtn.style.cssText = `
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: all 0.3s ease;
`;
menuBtn.addEventListener('click', toggleSidebar);
topbar.insertBefore(menuBtn, topbar.firstChild);
}
// Real-time updates simulation
function updateStats() {
const statValues = document.querySelectorAll('.stat-value');
statValues.forEach(stat => {
if (Math.random() > 0.7) { // 30% chance to update
const currentValue = parseInt(stat.textContent.replace(/[^\d]/g, ''));
const change = Math.floor(Math.random() * 10) - 5; // Random change between -5 and +5
const newValue = Math.max(0, currentValue + change);
if (stat.textContent.includes('฿')) {
stat.textContent = `฿${newValue.toLocaleString()}`;
} else {
stat.textContent = newValue.toLocaleString();
}
}
});
}
// Update stats every 30 seconds
setInterval(updateStats, 30000);
// Smooth scrolling for navigation
document.querySelectorAll('.nav-item').forEach(item => {
item.addEventListener('click', function() {
document.querySelector('.content-area').scrollTo({
top: 0,
behavior: 'smooth'
});
});
});
// Add loading animation
function showLoading() {
const loading = document.createElement('div');
loading.innerHTML = `
<div style="
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 20, 25, 0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
">
<div style="
width: 50px;
height: 50px;
border: 3px solid rgba(59, 130, 246, 0.3);
border-top: 3px solid #3b82f6;
border-radius: 50%;
animation: spin 1s linear infinite;
"></div>
</div>
<style>
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
`;
document.body.appendChild(loading);
setTimeout(() => {
document.body.removeChild(loading);
}, 1500);
}
// Add hover effects for cards
document.querySelectorAll('.stat-card, .chart-card').forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-5px) scale(1.02)';
});
card.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0) scale(1)';
});
});
// Add notification system
function showNotification(message, type = 'info') {
const notification = document.createElement('div');
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: ${type === 'success' ? 'linear-gradient(45deg, #10b981, #34d399)' :
type === 'error' ? 'linear-gradient(45deg, #dc2626, #ef4444)' :
'linear-gradient(45deg, #3b82f6, #60a5fa)'};
color: white;
padding: 15px 20px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
z-index: 10000;
font-weight: 500;
transform: translateX(400px);
transition: all 0.3s ease;
`;
notification.textContent = message;
document.body.appendChild(notification);
setTimeout(() => {
notification.style.transform = 'translateX(0)';
}, 100);
setTimeout(() => {
notification.style.transform = 'translateX(400px)';
setTimeout(() => {
document.body.removeChild(notification);
}, 300);
}, 3000);
}
// Demo notifications
setTimeout(() => {
showNotification('ยินดีต้อนรับสู่แดชบอร์ด Admin!', 'success');
}, 2000);
// Add search functionality
document.querySelector('.search-box input').addEventListener('input', function(e) {
const searchTerm = e.target.value.toLowerCase();
if (searchTerm.length > 2) {
// Simulate search results
console.log('ค้นหา:', searchTerm);
showNotification(`ค้นหา "${searchTerm}" พบ ${Math.floor(Math.random() * 10)} รายการ`);
}
});
// Add keyboard shortcuts
document.addEventListener('keydown', function(e) {
if (e.ctrlKey || e.metaKey) {
switch (e.key) {
case '1':
e.preventDefault();
document.querySelector('[data-page="dashboard"]').click();
break;
case '2':
e.preventDefault();
document.querySelector('[data-page="users"]').click();
break;
case '3':
e.preventDefault();
document.querySelector('[data-page="products"]').click();
break;
case 'k':
e.preventDefault();
document.querySelector('.search-box input').focus();
break;
}
}
});
// Initialize tooltips
function initTooltips() {
const elements = document.querySelectorAll('[data-tooltip]');
elements.forEach(element => {
element.addEventListener('mouseenter', function() {
const tooltip = document.createElement('div');
tooltip.className = 'tooltip';
tooltip.textContent = this.dataset.tooltip;
tooltip.style.cssText = `
position: absolute;
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 8px 12px;
border-radius: 6px;
font-size: 12px;
pointer-events: none;
z-index: 10000;
white-space: nowrap;
`;
document.body.appendChild(tooltip);
const rect = this.getBoundingClientRect();
tooltip.style.left = rect.left + rect.width / 2 - tooltip.offsetWidth / 2 + 'px';
tooltip.style.top = rect.top - tooltip.offsetHeight - 10 + 'px';
});
element.addEventListener('mouseleave', function() {
const tooltip = document.querySelector('.tooltip');
if (tooltip) {
document.body.removeChild(tooltip);
}
});
});
}
// Initialize everything when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
initTooltips();
// Add animation to stat cards on load
const statCards = document.querySelectorAll('.stat-card');
statCards.forEach((card, index) => {
card.style.opacity = '0';
card.style.transform = 'translateY(30px)';
setTimeout(() => {
card.style.transition = 'all 0.6s ease';
card.style.opacity = '1';
card.style.transform = 'translateY(0)';
}, index * 150);
});
});
</script>
</body>
</html>