|
|
<!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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col overflow-hidden"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<main class="flex-1 overflow-y-auto p-6"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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() { |
|
|
|
|
|
alert('ระบบกำลังสุ่มกลุ่มผู้เข้าร่วม...'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-positive-interface-beep-221.mp3'); |
|
|
audio.play(); |
|
|
|
|
|
alert('สุ่มกลุ่มเรียบร้อยแล้ว!'); |
|
|
}, 2000); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
