21/06/2026
Prompt: "តួនាទី និង គោលបំណង (Role & Objective):
ដើរតួជា Front-end Developer និង UI/UX Designer ដ៏ជំនាញម្នាក់។ សូមសរសេរកូដ Web application មួយដែលមានឈ្មោះថា "Random Competitor Finder" (ស្វែងរកអ្នកប្រកួត) ដោយប្រើឯកសារ HTML តែមួយ (Single-file HTML)។ ប្រើប្រាស់ HTML5, Tailwind CSS (តាមរយៈ CDN), Vanilla JavaScript, FontAwesome សម្រាប់ icons និង Canvas Confetti សម្រាប់ effects អបអរសាទរ។ UI ត្រូវតែជាភាសាខ្មែរ។
១. តម្រូវការ UI/UX និង Styling:
* Typography: ប្រើ Google Fonts ដោយកំណត់យក 'Times New Roman' សម្រាប់ភាសាអង់គ្លេស/លេខ និង 'Battambang' សម្រាប់អក្សរខ្មែរ។
* Background: បង្កើត Dark-themed animated gradient background ដែលរំកិលចុះឡើងយ៉ាងរលូន (ប្រើ linear-gradient ជាមួយ 15s animation)។
* Theme: អនុវត្តការរចនាបែប Glassmorphism ដោយប្រើ backdrop-filter: blur, Background ស/ខ្មៅ ថ្លាៗ (Semi-transparent) និង soft shadows (box-shadow)។
* Custom Borders: បង្កើត "Glowing Animated Border" ដោយប្រើ CSS conic-gradient និង rotateGlow ដើម្បីរុំព័ទ្ធ Main action stage និងកាតរបស់អ្នកឈ្នះ (Winner cards)។
* Animations: បន្ថែម Custom CSS animations ដូចជា pop-in សម្រាប់ពេល Load ដំបូង និង pulse-fast សម្រាប់ពេលកំពុងក្រឡុក (Shuffling state)។ ដាក់ Hover effects (scale-105) លើ Buttons ផងដែរ។
២. រចនាសម្ព័ន្ធ Layout (Responsive Grid):
* Left Column (Sidebar - ទំហំ 4/12 លើ Desktop): មានទម្រង់ "Add Student" ព្រមទាំង "Student List & Settings"។
* Right Column (Main Stage - ទំហំ 8/12 លើ Desktop): ជាផ្ទាំងបង្ហាញ (Stage) ដែលមាន Glowing border សម្រាប់បង្ហាញសកម្មភាពក្រឡុក និងលទ្ធផល។ ត្រូវមាន "Back" button នៅខាងឆ្វេងផ្នែកខាងលើ។
៣. មុខងារចម្បង (Core Features) និង JavaScript Logic:
* Form Inputs:
* Text input សម្រាប់ឈ្មោះសិស្ស។
* Radio buttons សម្រាប់ ភេទ (ប្រុស/ស្រី) ជាមួយ Icons ត្រឹមត្រូវ។
* File input សម្រាប់ រូបថត (Image upload)។
* Image Handling (ចំណុចសំខាន់): ប្រសិនបើមានរូបភាពត្រូវបាន Upload, ត្រូវប្រើ Canvas API ដើម្បី Compress រូបភាពនោះ (ទំហំអតិបរមា 300px, Quality 0.7) មុននឹង Save។ បើគ្មានការ Upload រូបទេ ត្រូវប្រើ Default avatars ពី Dicebear API ដោយផ្អែកលើភេទដែលបានជ្រើសរើស។
* Data Persistence: រក្សាទុកទិន្នន័យ (Student array) ទៅក្នុង `localStorage`។ បង្កើតការចាប់ Error (Catch quota limits) និងបង្ហាញ Alert។ ត្រូវ Load ទិន្នន័យនេះមកវិញពេលបើកទំព័រដំបូង (Window initialization)។
* List Management: បង្ហាញចំនួនសិស្សសរុប។ បង្ហាញបញ្ជីសិស្សដែលបានបញ្ចូល ជាមួយរូបថតដែលបាន Compress រួច, ឈ្មោះ, ភេទ និងប៊ូតុង "Delete"។ ត្រូវមានប៊ូតុង "Clear All" ផងដែរ។
* Shuffle Configuration & Filtering:
* Input សម្រាប់កំណត់រយៈពេលក្រឡុក (Shuffle duration) ពី ១ ដល់ ៦០ វិនាទី ហើយ Save ចូល `localStorage`។
* Radio button filter សម្រាប់ជ្រើសរើសបេក្ខភាព៖ "All" (ទាំងអស់), "Male" (ប្រុស) ឬ "Female" (ស្រី)។
* Shuffle Logic:
* Validate មើលថាតើមានសិស្សយ៉ាងតិច ២ នាក់ដែរឬទេ ផ្អែកលើ Filter ដែលបានជ្រើសរើស។ បង្ហាញ Custom popup/toast message ប្រសិនបើ Validation fails។
* លាក់ប៊ូតុង "Start", បង្ហាញអក្សរ "VS" លោតៗ (Pulsing) ជាមួយការផ្លាស់ប្តូរ Profiles ចៃដន្យយ៉ាងលឿន ក្នុងរយៈពេលកំណត់នៃ Timer (ប្រើ `setInterval` ~80ms)។
* Result Display:
* នៅពេល Timer ចប់, ត្រូវជ្រើសរើសអ្នកឈ្នះ (Winners) ២ នាក់ដោយចៃដន្យ ពីក្នុង Filtered pool។
* បង្ហាញអ្នកទាំងពីរទន្ទឹមគ្នា ជាមួយ Animated Glowing Borders។
* ដំណើរការ library canvas-confetti (បាញ់កាំជ្រួចអបអរពីសងខាង)។
* មានប៊ូតុង "Reset/Shuffle Again" សម្រាប់ចាប់ផ្តើមសារថ្មី។
៤. គុណភាពកូដ (Code Quality):
* សរសេរអ្វីៗគ្រប់យ៉ាងនៅក្នុងឯកសារ .html តែមួយ (ប្រើ សម្រាប់ Custom CSS និង សម្រាប់ Logic)។
* សរសេរកូដឲ្យមានសណ្តាប់ធ្នាប់ ស្អាត (Clean) និងមាន Comments ច្បាស់លាស់។ ធានាថា Responsive design ដំណើរការល្អឥតខ្ចោះលើទូរស័ព្ទដៃ (Mobile devices)។"
#ជំនួយការគ្រូបង្រៀន