|
|
<!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> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#6366f1', |
|
|
secondary: '#8b5cf6', |
|
|
accent: '#ec4899', |
|
|
dark: '#1e293b', |
|
|
light: '#f8fafc' |
|
|
}, |
|
|
fontFamily: { |
|
|
'sans': ['Prompt', 'sans-serif'], |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</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; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%); |
|
|
} |
|
|
|
|
|
.group-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.group-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { |
|
|
transform: scale(1); |
|
|
} |
|
|
50% { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
100% { |
|
|
transform: scale(1); |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<nav class="bg-white shadow-sm"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i data-feather="users" class="text-primary h-8 w-8"></i> |
|
|
<span class="ml-2 text-xl font-bold text-gray-900">Group Maker</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:items-center space-x-4"> |
|
|
<a href="user.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-primary hover:bg-gray-100">สำหรับผู้ใช้</a> |
|
|
<a href="admin-login.html" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-primary hover:bg-gray-100">สำหรับแอดมิน</a> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center sm:hidden"> |
|
|
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary"> |
|
|
<i data-feather="menu" class="block h-6 w-6"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="gradient-bg text-white"> |
|
|
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 text-center"> |
|
|
<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl" data-aos="fade-down"> |
|
|
สร้างกลุ่มอัจฉริยะ |
|
|
</h1> |
|
|
<p class="mt-6 max-w-lg mx-auto text-xl" data-aos="fade-up"> |
|
|
แอปพลิเคชันสำหรับการสุ่มและจัดกลุ่มผู้เข้าร่วมกิจกรรมแบบเรียลไทม์ |
|
|
</p> |
|
|
<div class="mt-10 flex justify-center space-x-4" data-aos="fade-up" data-aos-delay="200"> |
|
|
<a href="user.html" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-primary bg-white hover:bg-gray-50"> |
|
|
<i data-feather="user" class="mr-2"></i> เข้าร่วมกลุ่ม |
|
|
</a> |
|
|
<a href="admin-login.html" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary bg-opacity-20 hover:bg-opacity-30"> |
|
|
<i data-feather="lock" class="mr-2"></i> เข้าสู่ระบบแอดมิน |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-12 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center"> |
|
|
<h2 class="text-base text-primary font-semibold tracking-wide uppercase">คุณสมบัติ</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
ทุกสิ่งที่คุณต้องการสำหรับการจัดกลุ่ม |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10"> |
|
|
<div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3"> |
|
|
|
|
|
<div class="group-card bg-gray-50 p-6 rounded-lg shadow" data-aos="fade-up"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white"> |
|
|
<i data-feather="zap"></i> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">เรียลไทม์</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
ระบบอัปเดตแบบเรียลไทม์ด้วย WebSocket ทำให้เห็นการเปลี่ยนแปลงทันที |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="group-card bg-gray-50 p-6 rounded-lg shadow" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-secondary text-white"> |
|
|
<i data-feather="smartphone"></i> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">QR Code</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
เข้าร่วมกิจกรรมง่ายๆ ด้วยการสแกน QR Code ไม่ต้องจำ URL |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="group-card bg-gray-50 p-6 rounded-lg shadow" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-accent text-white"> |
|
|
<i data-feather="sliders"></i> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">ปรับแต่งได้</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
ตั้งค่าจำนวนกลุ่มและสมาชิกต่อกลุ่มได้ตามต้องการ |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="group-card bg-gray-50 p-6 rounded-lg shadow" data-aos="fade-up"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white"> |
|
|
<i data-feather="bell"></i> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">แจ้งเตือน</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
แจ้งเตือนเมื่อผลการสุ่มกลุ่มพร้อมแล้ว ทั้งเสียงและภาพ |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="group-card bg-gray-50 p-6 rounded-lg shadow" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-pink-500 text-white"> |
|
|
<i data-feather="download"></i> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">ส่งออกข้อมูล</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
ส่งออกผลการจัดกลุ่มเป็นไฟล์ Excel/CSV เพื่อใช้งานต่อ |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="group-card bg-gray-50 p-6 rounded-lg shadow" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white"> |
|
|
<i data-feather="database"></i> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">ประวัติ</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
เก็บประวัติการจัดกลุ่มทั้งหมดไว้ดูย้อนหลังได้ |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-12 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center"> |
|
|
<h2 class="text-base text-primary font-semibold tracking-wide uppercase">วิธีการใช้งาน</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
ใช้งานง่ายเพียง 3 ขั้นตอน |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10"> |
|
|
<div class="relative"> |
|
|
<div class="absolute left-1/2 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></div> |
|
|
|
|
|
<div class="relative flex flex-col space-y-10"> |
|
|
|
|
|
<div class="flex flex-col sm:flex-row" data-aos="fade-right"> |
|
|
<div class="flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-primary text-white sm:mx-0 mx-auto"> |
|
|
<span class="text-xl font-bold">1</span> |
|
|
</div> |
|
|
<div class="mt-3 sm:mt-0 sm:ml-6 text-center sm:text-left"> |
|
|
<h3 class="text-lg font-medium text-gray-900">แอดมินสร้างกิจกรรม</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
แอดมินสร้างกิจกรรมใหม่ กำหนดจำนวนกลุ่มและสมาชิกต่อกลุ่ม จากนั้นแชร์ QR Code ให้ผู้เข้าร่วม |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col sm:flex-row" data-aos="fade-right" data-aos-delay="100"> |
|
|
<div class="flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-secondary text-white sm:mx-0 mx-auto"> |
|
|
<span class="text-xl font-bold">2</span> |
|
|
</div> |
|
|
<div class="mt-3 sm:mt-0 sm:ml-6 text-center sm:text-left"> |
|
|
<h3 class="text-lg font-medium text-gray-900">ผู้ใช้เข้าร่วมกิจกรรม</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
ผู้ใช้สแกน QR Code และกรอกชื่อหรือรหัสประจำตัวเพื่อเข้าร่วมกิจกรรม |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex flex-col sm:flex-row" data-aos="fade-right" data-aos-delay="200"> |
|
|
<div class="flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-accent text-white sm:mx-0 mx-auto"> |
|
|
<span class="text-xl font-bold">3</span> |
|
|
</div> |
|
|
<div class="mt-3 sm:mt-0 sm:ml-6 text-center sm:text-left"> |
|
|
<h3 class="text-lg font-medium text-gray-900">สุ่มและประกาศผล</h3> |
|
|
<p class="mt-2 text-base text-gray-500"> |
|
|
แอดมินกดสุ่มกลุ่มและประกาศผล ผู้ใช้ทุกคนจะเห็นผลการจัดกลุ่มพร้อมกันแบบเรียลไทม์ |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-white"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="border-t border-gray-200 pt-8 md:flex md:items-center md:justify-between"> |
|
|
<div class="flex justify-center space-x-6 md:order-2"> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-500"> |
|
|
<i data-feather="facebook"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-500"> |
|
|
<i data-feather="twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-500"> |
|
|
<i data-feather="instagram"></i> |
|
|
</a> |
|
|
</div> |
|
|
<div class="mt-8 md:mt-0 md:order-1"> |
|
|
<p class="text-center text-base text-gray-400"> |
|
|
© 2023 Group Maker. All rights reserved. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
AOS.init({ |
|
|
duration: 800, |
|
|
easing: 'ease-in-out', |
|
|
once: true |
|
|
}); |
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
