โครมาเวิร์ส
คำอธิบาย
Chromaverse เป็นเว็บแอปพลิเคชันที่มีความซับซ้อนซึ่งช่วยให้ผู้ใช้สามารถสร้างและเปรียบเทียบจานสีตามค่า hex, อินพุตแบบสุ่มหรือคำอธิบายตามอารมณ์ ผู้ใช้สามารถสร้างจานสีหลายสีดูรายละเอียดสีของแต่ละบุคคลดาวน์โหลดจานสีและเปรียบเทียบในมุมมองแบบเคียงข้างกัน การออกแบบนั้นทันสมัยและเป็นมืออาชีพซึ่งมีเอฟเฟกต์โฮเวอร์ตัวอย่างสีและความสามารถในการดาวน์โหลดขั้นสูงสำหรับทั้งจานสีและการไล่ระดับสี
คุณสมบัติ
- อินพุต HEX หลายครั้ง : ผู้ใช้สามารถป้อนค่า hex หลายค่าคั่นด้วยเครื่องหมายจุลภาคเพื่อสร้าง swatches สีแต่ละตัวและการไล่ระดับสี
- การตรวจจับสีอัตโนมัติ : ป้อนข้อความหรือคำอธิบายอารมณ์ใด ๆ และระบบจะพยายามแยกค่า hex ที่เกี่ยวข้องหรือสร้างสีตามอินพุต
- การแสดงสีวงกลม : แต่ละสีที่สร้างขึ้นจะแสดงในวงกลมวงกลมเพื่อการสร้างภาพที่ดีขึ้น
- การไล่ระดับสี : การไล่ระดับสีของสีที่สร้างขึ้นทั้งหมดจะถูกจัดเตรียมไว้โดยอัตโนมัติ
- ดาวน์โหลดสี : ดาวน์โหลดจานสีทั้งหมดหรือการไล่ระดับสีที่สร้างขึ้นเป็นภาพ PNG
- ค่า hex แสดงค่า : แสดงค่า hex แต่ละตัวสำหรับแต่ละสีในจานสีด้วยปุ่ม "คัดลอก" เพื่อคัดลอกรหัส hex ได้อย่างง่ายดาย
- เอฟเฟกต์โฮเวอร์ : เอฟเฟกต์โฮเวอร์ที่เพิ่มขึ้นทำให้แต่ละสีปรากฏขึ้นเมื่อวางตัวลงไปเพื่อปรับปรุงประสบการณ์การใช้งานของผู้ใช้
- ตัวเลือกสี : มีเครื่องมือตัวเลือกสีช่วยให้ผู้ใช้สามารถเลือกสีด้วยตนเองและแสดงค่า hex ของพวกเขาแบบเรียลไทม์
- หลายจาน : สร้างจานหลาย ๆ อย่างต่อเนื่อง แต่ละจานมีตัวเลือกในการลบด้วยข้อความแจ้งเตือนสำหรับการยืนยัน
- เปรียบเทียบจานสี : เพิ่มจานสีลงใน "รายการเปรียบเทียบ" เพื่อเปรียบเทียบการผสมสีที่แตกต่างกันในมุมมองแบบเคียงข้างกัน
- ลบและล้างจานสีทั้งหมด : ผู้ใช้สามารถลบจานเดทแต่ละตัวออกจากรายการเปรียบเทียบหรือล้างจานสีทั้งหมดด้วยการยืนยันการแจ้งเตือนก่อนที่จะล้าง
- ดาวน์โหลดรายการเปรียบเทียบ : ดาวน์โหลด Palettes ทั้งหมดในรายการเปรียบเทียบเป็นภาพ PNG เดียว
- สไตล์มืออาชีพ : การออกแบบ UI ขั้นสูงด้วยเทคนิค CSS ที่ทันสมัยเช่น Glassmorphism, การเปลี่ยนผ่านที่ราบรื่นและการออกแบบที่ตอบสนองได้มั่นใจว่าแอพดูขัดเงาและเป็นมืออาชีพ
วิธีใช้
- ป้อนค่า hex : ในฟิลด์อินพุตคุณสามารถป้อนค่า hex หนึ่งค่าขึ้นไปคั่นด้วยเครื่องหมายจุลภาค เลือกป้อนคำอธิบายข้อความหรืออารมณ์และระบบจะตรวจจับอัตโนมัติและสร้างสีให้คุณ
- สร้างจานสี : คลิกปุ่ม "สร้าง" เพื่อสร้างจานสี สีจะแสดงเป็น swatches แบบวงกลมและการไล่ระดับสีของทุกสีก็ปรากฏขึ้นเช่นกัน
- วางเมาส์เหนือสี : เลื่อนเมาส์ของคุณผ่านแต่ละสีเพื่อดูตัวอย่างที่ปรับปรุงแล้วและดูรหัส HEX ที่เกี่ยวข้อง
- ตัวเลือกดาวน์โหลด : ใช้ปุ่มที่ให้ไว้เพื่อดาวน์โหลดจานสีที่สร้างขึ้นหรือการไล่ระดับสีเป็นไฟล์ PNG
- คัดลอกค่า hex : คัดลอกรหัส Hex แต่ละรายการโดยใช้ปุ่ม "คัดลอก" ถัดจากแต่ละสี
- เพิ่มไปยังรายการเปรียบเทียบ : คลิก "เพิ่มเพื่อเปรียบเทียบรายการ" เพื่อย้ายจานสีที่สร้างขึ้นไปยังส่วนการเปรียบเทียบ
- เปรียบเทียบและลบจานสี : ดูและเปรียบเทียบหลายจาน, ลบจานเดทแต่ละชิ้นหรือล้างทั้งหมดด้วยการแจ้งเตือนการยืนยัน
- ดาวน์โหลดรายการเปรียบเทียบ : หลังจากเปรียบเทียบพาเล็ตแล้วให้ดาวน์โหลดทั้งหมดเป็นภาพ PNG เดียวสำหรับการอ้างอิงในอนาคต
คำแนะนำการติดตั้ง
โคลนที่เก็บ :
git clone https://github.com/username/color-palette-generator.git
cd color-palette-generator
เปิด index.html ในเบราว์เซอร์ของคุณ:
โครงสร้างไฟล์
color-palette-generator/
├── index.html # Main HTML file
├── style.css # CSS file for styling the UI
├── script.js # JavaScript file for functionality
ภาพรวมรหัส
HTML
- HTML จัดเตรียมโครงสร้างสำหรับฟิลด์อินพุตปุ่มการแสดงสีรายการเปรียบเทียบและตัวเลือกการดาวน์โหลด
- มันใช้
<input> , <button> , <div> , และ <canvas> องค์ประกอบเพื่อจัดโครงสร้าง UI และโต้ตอบกับ JavaScript สำหรับการใช้งาน
CSS
- CSS รวมถึงรูปแบบขั้นสูงสำหรับเอฟเฟกต์โฮเวอร์, glassmorphism, การสนับสนุนโหมดมืด, การออกแบบที่ตอบสนองและองค์ประกอบ UI ที่ทันสมัยอื่น ๆ
- สีถูกควบคุมโดยใช้ตัวแปร CSS ทำให้ง่ายต่อการสลับระหว่างโหมดแสงและสีเข้ม
จาวาสคริปต์
- JavaScript ใช้เพื่อสร้างจานสีจากอินพุตของผู้ใช้จัดการการสกัดค่าฐานสิบหกจัดการรายการเปรียบเทียบเปิดใช้งานการดาวน์โหลดรูปภาพและเพิ่มการโต้ตอบเช่นเอฟเฟกต์โฮเวอร์และการแจ้งเตือน
- รหัสใช้ประโยชน์จาก Canvas สำหรับการแสดงภาพสำหรับการดาวน์โหลดและ Clipboard API สำหรับการคัดลอกค่า hex
เทคโนโลยีที่ใช้
- HTML5 : จัดเตรียมโครงสร้างสำหรับแอปพลิเคชัน
- CSS3 : รับผิดชอบในการออกแบบที่ตอบสนองผลการโฮเมอร์และสไตล์แก้วที่ทันสมัย
- JavaScript : จัดการตรรกะสำหรับการสร้างจานสีการสกัดสีการดาวน์โหลดรูปภาพและการโต้ตอบ
- Canvas API : ใช้เพื่อสร้างภาพ PNG ที่ดาวน์โหลดได้ของจานสีและการไล่ระดับสี
ใบอนุญาต
โครงการนี้ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT ดูไฟล์ใบอนุญาตสำหรับรายละเอียด
