Spaces:
Running
Running
Ctrl+K
ชื่อโปรเจกต์: Strava Activity Feed & Stats Mockupเป้าหมาย: สร้างไฟล์ HTML5 เดี่ยว (.html) ที่ประกอบด้วย HTML, CSS, และ JavaScript ทั้งหมด เพื่อจำลองหน้า Activity Feed (ฟีดกิจกรรม) และส่วนแสดง Weekly/Monthly Totals (สถิติรวมรายสัปดาห์/รายเดือน) ของแอป Strava ซึ่งเน้นการแสดงผลเชิงสังคม (Social) และข้อมูลการฝึกซ้อม (Performance Data)📝 รายละเอียด Prompt1. โครงสร้างไฟล์ (File Structure)ต้องเป็น ไฟล์ HTML5 เดี่ยว (index.html หรือชื่ออื่นตามสะดวก)HTML, CSS, และ JavaScript ทั้งหมดต้องอยู่ในไฟล์เดียวCSS ต้องอยู่ในแท็ก <style> (ใช้ Dark Mode และโทนสีส้ม/เทาของ Strava)JavaScript ต้องอยู่ในแท็ก <script> (ใช้ Vanilla JS ในการจัดการ DOM เพื่อสร้างฟีดกิจกรรม)ห้ามใช้ Library/Framework ภายนอก (เช่น React, Vue, jQuery, หรือ Library แผนที่/ชาร์ต)2. ข้อมูลจำลอง (Mock Data)สร้างโครงสร้างข้อมูล JavaScript เพื่อจำลอง Activity Feed (อย่างน้อย 5 กิจกรรม) และ Weekly/Monthly Totals ดังนี้:A. Activity Feed Data (อาร์เรย์ของกิจกรรม)FieldDescriptionTypeExampleidรหัสกิจกรรมNumber101athleteNameชื่อนักกีฬาString"Chris Froome"avatarUrlURL รูปโปรไฟล์Stringhttps://via.placeholder.com/40/FF5500activityTypeประเภทกิจกรรมString"Run" หรือ "Ride"activityTitleชื่อกิจกรรมString"Morning Interval Training"distanceระยะทาง (กม.)Number15.2timeเวลา (ชั่วโมง:นาที:วินาที)String"0:58:30"elevationความสูงที่สะสม (เมตร)Number250kudosจำนวน Kudos (Likes)Number58commentsจำนวน CommentsNumber5mapImageUrlURL รูปแผนที่จำลองStringhttps://via.placeholder.com/600x200/444444/FFFFFF?text=Route+Map+MockupB. Totals Data (สถิติรวม)FieldDescriptionTypeExampleweeklyDistanceระยะรวมสัปดาห์นี้Number85.5weeklyTimeเวลารวมสัปดาห์นี้String"5h 45m"monthlyDistanceระยะรวมเดือนนี้Number320.1monthlyActivitiesจำนวนกิจกรรมรวมเดือนนี้Number153. องค์ประกอบของ Dashboard (Dashboard Components)Dashboard ต้องเน้นองค์ประกอบหลัก 3 ส่วนของ Strava:A. Sidebar/Weekly Totals (สถิติรวมรายสัปดาห์)แสดง Weekly Totals (weeklyDistance, weeklyTime)Goals Mockup: แสดง Progress Bar จำลองความคืบหน้าของเป้าหมายรายสัปดาห์ (เช่น 85.5/100 km).B. Activity Feed (ส่วนกลาง)ต้องใช้ JavaScript ในการวนซ้ำ (Loop) ข้อมูล Activity Feed Data เพื่อสร้าง Card กิจกรรมแต่ละรายการActivity Card Layout: แต่ละ Card ต้องแสดง:รูป Avatar และชื่อนักกีฬาประเภทกิจกรรม (พร้อม Icon ที่เหมาะสม เช่น 🏃♂️ หรือ 🚴♀️)ชื่อกิจกรรมที่โดดเด่นสถิติหลัก 3 ตัว: ระยะทาง (distance), เวลา (time), ความสูง (elevation)Map Mockup: แสดงรูป mapImageUrl (ให้ดูเหมือนเส้นทาง GPS)Social Bar: แสดงจำนวน Kudos, Comments, และปุ่มจำลอง "Give Kudos" (ต้องมีฟังก์ชัน JS ง่ายๆ ในการเพิ่ม Kudos เมื่อคลิก)C. Challenges/Clubs Mockup (การแข่งขันและคลับ)แสดง Card เล็กๆ จำลองการเข้าร่วม Challenge (เช่น "November Running Challenge") และ Club (เช่น "Local Runners Club") พร้อมตัวเลขจำนวนสมาชิก/ความคืบหน้า4. คุณสมบัติการโต้ตอบ (Interactive Features)Kudos Counter: เมื่อผู้ใช้คลิกปุ่ม "Give Kudos" บน Activity Card ใดๆ JavaScript ต้อง เพิ่มจำนวน Kudos ของกิจกรรมนั้นๆ บนหน้าจอทันทีInfinite Scroll Mockup: เพิ่มปุ่ม/ข้อความที่ส่วนท้ายของฟีด เช่น "Load More Activities" (แสดงให้เห็นถึงแนวคิดการโหลดข้อมูลเพิ่ม)Filter Mockup: มีปุ่ม/แถบด้านบนสำหรับ "Following" และ "Yours" (แสดงให้เห็นถึงแนวคิดการเปลี่ยนฟีด)5. ข้อจำกัดด้านการออกแบบ (Design Constraints)โทนสี Strava: ใช้สีเทา/ดำ (Dark Mode) เป็นพื้นหลัง และสีส้ม (#FC4C02 หรือใกล้เคียง) สำหรับ Accent Color, ปุ่ม, และกราฟTypography: ใช้ฟอนต์ที่อ่านง่ายและสะอาด (เช่น System Font หรือ Sans-serif)🚀 สิ่งที่ต้องการจากการตอบกลับโค้ด HTML5 ที่ทำงานได้เต็มรูปแบบ (Full working HTML5 file) พร้อมข้อมูลจำลองและฟังก์ชัน JavaScript ข้างต้น เพื่อเป็น Mockup Dashboard ของ Strava ที่จำลอง Activity Feed และ Social Component ได้อย่างครบถ้วน
4d29c3f verified