الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

Chromaverse

وصف
إن Chromaverse هو تطبيق ويب متطور يسمح للمستخدمين بإنشاء ومقارنة لوحات الألوان بناءً على قيم السداسي أو المدخلات العشوائية أو الأوصاف القائمة على المزاج. يمكن للمستخدمين إنشاء لوحات متعددة ، وعرض تفاصيل الألوان الفردية ، وتنزيل اللوحات ، ومقارنتها في عرض جنبًا إلى جنب. التصميم أنيق ومهني ، ويتميز بتأثيرات التحويم ، ومعاينات الألوان ، وقدرات التنزيل المتقدمة لكل من لوحات الألوان والتدرجات.

سمات

  1. إدخال Hex المتعدد : يمكن للمستخدمين إدخال قيم سداسية متعددة مفصولة بواسطة الفواصل لإنشاء حوامل ألوان فردية وتدرج.
  2. كشف تلقائي للألوان : أدخل أي نص أو وصف مزاجي ، وسيحاول النظام استخراج قيم السداسي ذات الصلة أو إنشاء ألوان بناءً على الإدخال.
  3. شاشة لون الدائرة : يتم عرض كل لون تم إنشاؤه في حوبة دائرية لتحسين التصور.
  4. توليد التدرج : يتم توفير التدرج من جميع الألوان التي تم إنشاؤها تلقائيًا.
  5. تنزيل اللون : قم بتنزيل اللوحة بأكملها أو التدرج الذي تم إنشاؤه كصورة PNG.
  6. عرض قيمة السداسي : عرض قيم سداسية سدرية فردية لكل لون في اللوحة ، مع زر "نسخ" لنسخ رمز السداسي بسهولة.
  7. تأثيرات التحويم : تجعل تأثيرات التحويم المحسّنة الألوان الفردية عند تحومها ، وتحسين تجربة المستخدم.
  8. محدد الألوان : تتوفر أداة ألوان ألوان ، مما يسمح للمستخدمين بتحديد الألوان يدويًا وعرض قيم السداسي في الوقت الفعلي.
  9. لوحات متعددة : إنشاء لوحات متعددة على التوالي. كل لوحة لديها خيار لحذفها ، مع رسالة تنبيه للتأكيد.
  10. قارن اللوحات : أضف لوحات إلى "قائمة مقارنة" لمقارنة مجموعات الألوان المختلفة بصريًا في عرض جنبًا إلى جنب.
  11. قم بإزالة ومسح جميع اللوحات : يمكن للمستخدمين إزالة اللوحات الفردية من قائمة المقارنة أو مسح جميع اللوحات مع تأكيد التنبيه قبل المقاصة.
  12. قم بتنزيل قائمة المقارنة : قم بتنزيل جميع اللوحات في قائمة المقارنة كصورة PNG واحدة.
  13. التصميم الاحترافي : يضمن تصميم واجهة المستخدم المتقدمة مع تقنيات CSS الحديثة مثل الجورشفة الزجاجية والتحولات السلسة والتصميم المستجيب أن التطبيق يبدو مصقولًا ومهنيًا.

كيفية استخدام

  1. أدخل قيم Hex : في حقل الإدخال ، يمكنك إدخال واحد أو أكثر من قيم Hex مفصولة بفواصل. اختياريا ، أدخل أوصاف نصية أو مزاجية ، وسيقوم النظام بإنشاء وإنشاء ألوان لك.
  2. إنشاء لوحة : انقر فوق الزر "إنشاء" لإنشاء لوحة ألوان. يتم عرض الألوان على أنها حوامل دائرية ، ويظهر أيضًا تدرج من جميع الألوان.
  3. تحوم فوق الألوان : حرك الماوس فوق الألوان الفردية لمشاهدة معاينات محسّنة وعرض رموز سداسية سداسية.
  4. خيارات التنزيل : استخدم الأزرار المقدمة لتنزيل إما لوحة الألوان التي تم إنشاؤها أو التدرج كملف PNG.
  5. نسخ قيم Hex : انسخ رموز السداسي الفردية باستخدام زر "نسخ" بجوار كل لون.
  6. أضف إلى القائمة المقارنة : انقر فوق "إضافة إلى قائمة المقارنة" لنقل اللوحة التي تم إنشاؤها إلى قسم المقارنة.
  7. قارن وحذف لوحات : عرض وقارن اللوحات المتعددة ، وإزالة اللوحات الفردية ، أو مسح كل شيء مع تنبيه التأكيد.
  8. تنزيل قائمة مقارنة : بعد مقارنة اللوحات ، قم بتنزيلها جميعًا كصورة PNG واحدة للرجوع إليها في المستقبل.

تعليمات التثبيت

  1. استنساخ المستودع : 

    git clone https://github.com/username/color-palette-generator.git
cd color-palette-generator

  2. افتح index.html في متصفحك: 

    open 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> لتنظيم واجهة المستخدم والتفاعل مع JavaScript للوظائف.

CSS

  • يتضمن CSS أنماطًا متقدمة لتأثيرات التحويم ، والورم الزجاجي ، ودعم الوضع المظلم ، والتصميم المستجيب ، وعناصر واجهة المستخدم الحديثة الأخرى.
  • يتم التحكم في الألوان باستخدام متغيرات CSS ، مما يجعل من السهل التبديل بين الأوضاع الخفيفة والظلام.

جافا سكريبت

  • يتم استخدام JavaScript لإنشاء لوحات ألوان من إدخال المستخدم ، والتعامل مع استخراج قيمة السداسي ، وإدارة قائمة المقارنة ، وتمكين تنزيل الصور ، وإضافة التفاعل مثل تأثيرات التحويم والتنبيهات.
  • يقوم الرمز بتعزيز القماش لتقديم الصور للتنزيل والحافظة API لنسخ قيم السداسي.

التقنيات المستخدمة

  1. HTML5 : يوفر هيكل التطبيق.
  2. CSS3 : مسؤول عن التصميم المستجيب ، تأثيرات التحويم ، والأسلوب الزجاجي الحديث.
  3. JavaScript : تعامل مع المنطق لتوليد لوحات واستخراج الألوان وتنزيل الصور والتفاعل.
  4. Canvas API : تستخدم لإنشاء صور PNG قابلة للتنزيل من لوحات الألوان والتدرجات.

رخصة

هذا المشروع مرخص بموجب ترخيص معهد ماساتشوستس للتكنولوجيا. انظر ملف الترخيص للحصول على التفاصيل.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل