Hugging Face's logo

Spaces:
Amphon072
/
phon
Running

App Files Community
phon / admin-dashboard.html
Amphon072's picture
Amphon072
ระบบสำหรับ Group Maker Apps (ภาษาไทย) พร้อมฟีเจอร์ที่ช่วยให้ใช้งานได้จริงและครอบคลุมทั้งฝั่ง User และ Admin
72be99e verified
raw
history blame contribute delete
30.9 kB
 <!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>แดชบอร์ดแอดมิน - Group Maker</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Prompt', sans-serif;
}
.sidebar {
transition: all 0.3s ease;
}
.group-color-A {
background-color: #ef4444;
}
.group-color-B {
background-color: #3b82f6;
}
.group-color-C {
background-color: #10b981;
}
.group-color-D {
background-color: #f59e0b;
}
.group-color-E {
background-color: #8b5cf6;
}
.dark-mode {
background-color: #1a202c;
color: #f7fafc;
}
.dark-mode .dark-bg {
background-color: #2d3748;
}
.dark-mode .dark-border {
border-color: #4a5568;
}
.dark-mode .dark-text {
color: #f7fafc;
}
</style>
</head>
<body class="bg-gray-100">
<div class="flex h-screen">
<!-- Sidebar -->
<div class="sidebar w-64 bg-white shadow-md hidden md:block">
<div class="p-4 border-b">
<div class="flex items-center">
<i data-feather="users" class="text-indigo-600 h-8 w-8"></i>
<span class="ml-2 text-xl font-bold text-gray-900">Group Maker</span>
</div>
</div>
<nav class="p-4">
<div class="space-y-2">
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md">
<i data-feather="home" class="mr-3 h-5 w-5"></i>
แดชบอร์ด
</a>
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-md">
<i data-feather="plus-circle" class="mr-3 h-5 w-5"></i>
สร้างกิจกรรมใหม่
</a>
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-md">
<i data-feather="archive" class="mr-3 h-5 w-5"></i>
ประวัติกิจกรรม
</a>
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-md">
<i data-feather="settings" class="mr-3 h-5 w-5"></i>
ตั้งค่าระบบ
</a>
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-md">
<i data-feather="user" class="mr-3 h-5 w-5"></i>
บัญชีผู้ใช้
</a>
</div>
<div class="mt-8 pt-4 border-t">
<button onclick="toggleDarkMode()" class="w-full flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-md">
<i data-feather="moon" class="mr-3 h-5 w-5"></i>
โหมดกลางคืน
</button>
<a href="index.html" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-md">
<i data-feather="log-out" class="mr-3 h-5 w-5"></i>
ออกจากระบบ
</a>
</div>
</nav>
</div>
<!-- Main Content -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Top Navigation -->
<header class="bg-white shadow-sm">
<div class="flex items-center justify-between px-6 py-4">
<div class="flex items-center">
<button class="md:hidden mr-4">
<i data-feather="menu" class="h-6 w-6"></i>
</button>
<h1 class="text-xl font-bold text-gray-900">แดชบอร์ดแอดมิน</h1>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<button class="p-1 rounded-full text-gray-500 hover:text-gray-700 focus:outline-none">
<i data-feather="bell" class="h-6 w-6"></i>
</button>
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
</div>
<div class="relative">
<button class="flex items-center space-x-2 focus:outline-none">
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/1" alt="Profile">
<span class="text-sm font-medium text-gray-700">ผู้ดูแลระบบ</span>
</button>
</div>
</div>
</div>
</header>
<!-- Content -->
<main class="flex-1 overflow-y-auto p-6">
<!-- Current Session -->
<div class="mb-8" data-aos="fade-up">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-bold text-gray-900">กิจกรรมปัจจุบัน</h2>
<div class="flex space-x-2">
<button class="px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
<i data-feather="plus" class="mr-2"></i> สร้างใหม่
</button>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="p-6">
<div class="flex flex-col md:flex-row md:items-center md:justify-between">
<div>
<h3 class="text-lg font-bold text-gray-900">กิจกรรมทีมบิลด์ดิ้ง</h3>
<p class="text-gray-600">รหัสกิจกรรม: <span class="font-mono bg-gray-100 px-2 py-1 rounded">TEAM2023</span></p>
<div class="mt-2 flex items-center text-sm text-gray-500">
<i data-feather="calendar" class="mr-1 h-4 w-4"></i>
เริ่ม: 15:30 น. • สิ้นสุด: 17:00 น.
</div>
</div>
<div class="mt-4 md:mt-0">
<div class="flex flex-col sm:flex-row sm:space-x-4 space-y-2 sm:space-y-0">
<button class="px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700">
<i data-feather="maximize-2" class="mr-2"></i> ดู QR Code
</button>
<button class="px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
<i data-feather="copy" class="mr-2"></i> คัดลอกลิงก์
</button>
</div>
</div>
</div>
<div class="mt-6">
<div class="flex justify-between text-sm text-gray-600">
<span>ผู้เข้าร่วมแล้ว</span>
<span><span id="current-participants">18</span>/<span id="max-participants">30</span></span>
</div>
<div class="mt-1 w-full bg-gray-200 rounded-full h-2.5">
<div id="progress-bar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 60%"></div>
</div>
</div>
<div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h4 class="text-sm font-medium text-gray-700 mb-2">ตั้งค่ากลุ่ม</h4>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm text-gray-600">จำนวนกลุ่ม</label>
<select class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>3</option>
<option selected>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
<div>
<label class="block text-sm text-gray-600">สมาชิกต่อกลุ่ม</label>
<select class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>3-5</option>
<option selected>4-6</option>
<option>5-7</option>
<option>กำหนดเอง</option>
</select>
</div>
</div>
</div>
<div>
<h4 class="text-sm font-medium text-gray-700 mb-2">ธีมกลุ่ม</h4>
<div class="flex space-x-2">
<button class="px-3 py-1 rounded-md text-sm font-medium bg-red-100 text-red-800">สี</button>
<button class="px-3 py-1 rounded-md text-sm font-medium bg-blue-100 text-blue-800">สัตว์</button>
<button class="px-3 py-1 rounded-md text-sm font-medium bg-green-100 text-green-800">ตัวการ์ตูน</button>
<button class="px-3 py-1 rounded-md text-sm font-medium bg-yellow-100 text-yellow-800">ตัวเลข</button>
</div>
</div>
</div>
<div class="mt-6 flex flex-col sm:flex-row sm:space-x-4 space-y-2 sm:space-y-0">
<button onclick="randomizeGroups()" class="px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
<i data-feather="shuffle" class="mr-2"></i> สุ่มกลุ่ม
</button>
<button class="px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50">
<i data-feather="download" class="mr-2"></i> ส่งออกข้อมูล
</button>
<button class="px-4 py-2 border border-gray-300 text-sm font-medium rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50">
<i data-feather="trash-2" class="mr-2"></i> ปิดกิจกรรม
</button>
</div>
</div>
</div>
</div>
<!-- Participants List -->
<div class="mb-8" data-aos="fade-up" data-aos-delay="100">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-bold text-gray-900">รายชื่อผู้เข้าร่วม</h2>
<div class="flex items-center space-x-2">
<div class="relative">
<input type="text" placeholder="ค้นหา..." class="pl-8 pr-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<i data-feather="search" class="absolute left-3 top-2.5 h-4 w-4 text-gray-400"></i>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
ลำดับ
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
ชื่อ
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
รหัสประจำตัว
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
เข้าร่วมเมื่อ
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
กลุ่ม
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/2" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">สมชาย ใจดี</div>
<div class="text-sm text-gray-500">นักศึกษา</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
ST001
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
15:30 น.
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
กลุ่ม A
</span>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/3" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">สุภาพร สวยงาม</div>
<div class="text-sm text-gray-500">พนักงาน</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
EMP005
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
15:32 น.
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
กลุ่ม B
</span>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
3
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/4" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">วิเชษฐ์ เก่งมาก</div>
<div class="text-sm text-gray-500">นักศึกษา</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
ST002
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
15:35 น.
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
กลุ่ม C
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Group Results -->
<div data-aos="fade-up" data-aos-delay="200">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-bold text-gray-900">ผลการจัดกลุ่ม</h2>
<div class="flex space-x-2">
<button class="px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
<i data-feather="send" class="mr-2"></i> แจ้งผล
</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Group A -->
<div class="group-card bg-white rounded-lg shadow-md overflow-hidden">
<div class="group-color-A px-4 py-3">
<h3 class="text-lg font-bold text-white">กลุ่ม A</h3>
</div>
<div class="p-4">
<ul class="space-y-2">
<li class="flex items-center">
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/2" alt="">
<span class="ml-2 text-sm">สมชาย ใจดี</span>
</li>
<li class="flex items-center">
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/5" alt="">
<span class="ml-2 text-sm">อนุชา กล้าหาญ</span>
</li>
<li class="flex items-center">
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/6" alt="">
<span class="ml-2 text-sm">สุดารัตน์ น่ารัก</span>
</li>
</ul>
</div>
</div>
<!-- Group B -->
<div class="group-card bg-white rounded-lg shadow-md overflow-hidden">
<div class="group-color-B px-4 py-3">
<h3 class="text-lg font-bold text-white">กลุ่ม B</h3>
</div>
<div class="p-4">
<ul class="space-y-2">
<li class="flex items-center">
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/3" alt="">
<span class="ml-2 text-sm">สุภาพร สวยงาม</span>
</li>
<li class="flex items-center">
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/7" alt="">
<span class="ml-2 text-sm">ประเสริฐ ชัยชนะ</span>
</li>
<li class="flex items-center">
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/8" alt="">
<span class="ml-2 text-sm">อรุณี สดใส</span>
</li>
</ul>
</div>
</div>
<!-- Group C -->
<div class="group-card bg-white rounded-lg shadow-md overflow-hidden">
<div class="group-color-C px-4 py-3">
<h3 class="text-lg font-bold text-white">กลุ่ม C</h3>
</div>
<div class="p-4">
<ul class="space-y-2">
<li class="flex items-center">
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/4" alt="">
<span class="ml-2 text-sm">วิเชษฐ์ เก่งมาก</span>
</li>
<li class="flex items-center">
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/9" alt="">
<span class="ml-2 text-sm">สมหมาย ใจเย็น</span>
</li>
<li class="flex items-center">
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/10" alt="">
<span class="ml-2 text-sm">นันทนา อ่อนหวาน</span>
</li>
</ul>
</div>
</div>
<!-- Group D -->
<div class="group-card bg-white rounded-lg shadow-md overflow-hidden">
<div class="group-color-D px-4 py-3">
<h3 class="text-lg font-bold text-white">กลุ่ม D</h3>
</div>
<div class="p-4">
<ul class="space-y-2">
<li class="flex items-center">
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/11" alt="">
<span class="ml-2 text-sm">พงศกร ใจดี</span>
</li>
<li class="flex items-center">
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/12" alt="">
<span class="ml-2 text-sm">กนกวรรณ สวยงาม</span>
</li>
<li class="flex items-center">
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/13" alt="">
<span class="ml-2 text-sm">ธนวัฒน์ เก่งมาก</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script>
AOS.init();
feather.replace();
let darkMode = false;
function toggleDarkMode() {
darkMode = !darkMode;
document.body.classList.toggle('dark-mode');
const icon = document.querySelector('[data-feather="moon"]');
if (darkMode) {
feather.icons['sun'].replace(icon);
} else {
feather.icons['moon'].replace(icon);
}
}
function randomizeGroups() {
// Simulate randomizing groups
alert('ระบบกำลังสุ่มกลุ่มผู้เข้าร่วม...');
// After 2 seconds, show notification
setTimeout(() => {
const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-positive-interface-beep-221.mp3');
audio.play();
alert('สุ่มกลุ่มเรียบร้อยแล้ว!');
}, 2000);
}
</script>
</body>
</html>