| <!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> |
|
|
