Chromaverse
Описание
Chromaverse-это сложное веб-приложение, которое позволяет пользователям генерировать и сравнивать цветовые палитры на основе значений HEX, случайных входов или описаний на основе настроения. Пользователи могут генерировать несколько палитров, просматривать индивидуальные данные о цвете, загружать палитры и сравнивать их в бок о бок. Дизайн гладкий и профессиональный, обладающий эффектами падения, предварительным просмотром цветов и расширенными возможностями загрузки как для цветовых палитров, так и для градиентов.
Функции
- Несколько шестнадцатеричных вводов : пользователи могут ввести несколько значений HEX, разделенных запятыми, чтобы генерировать отдельные образцы цветов и градиент.
- Автоодация цветов : введите любое описание текста или настроения, и система попытается извлечь соответствующие значения шестигранника или генерировать цвета на основе ввода.
- Цветный дисплей круга : каждый сгенерированный цвет отображается в круговом образе для лучшей визуализации.
- Генерация градиента : градиент всех сгенерированных цветов автоматически предоставляется.
- Скачать цвет : Загрузите всю палитру или сгенерированный градиент как изображение PNG.
- Отображение значения шестнадцатеричного значения : отображать отдельные значения шестнадцатеричного шестигранника для каждого цвета в палитре, с кнопкой «Копировать», чтобы легко копировать шестнадцатеричный код.
- Эффекты наклона : улучшенные эффекты падения заставляют отдельные цвета всплыть, когда они зависят, улучшая пользовательский опыт.
- Селектор цвета : доступен инструмент для выбора цвета, позволяющий пользователям вручную выбирать цвета и отображать свои шестнадцатеричные значения в режиме реального времени.
- Многочисленные палитры : генерируйте несколько палитр подряд. У каждой палитры есть возможность удалить его, с предупреждением для подтверждения.
- Сравните палитры : добавьте палитр в «Список сравнения», чтобы визуально сравнить различные цветовые комбинации в бок о бок.
- Удалите и очистите все палитры : пользователи могут удалить отдельные палитры из списка сравнения или очистить все палитры с подтверждением оповещения перед очисткой.
- Скачать список сравнения : скачать все палитры в списке сравнения в виде одного изображения PNG.
- Профессиональный стиль : продвинутый дизайн пользовательского интерфейса с современными методами CSS, такими как Glassmorphism, плавные переходы и отзывчивый дизайн, гарантируют приложение выглядеть полированным и профессиональным.
Как использовать
- Введите значения шестигранника : в поле ввода вы можете ввести одно или несколько значений шестнадцатеричного шестигранника, разделенных запятыми. При желании введите описания или настроения текста, и система будет автоматически определять и генерировать цвета для вас.
- Создайте палитру : нажмите кнопку «Создать», чтобы сгенерировать цветовую палитру. Цвета отображаются в виде круглых образцов, и также показан градиент всех цветов.
- Нависните над цветами : переместите мышь на отдельные цвета, чтобы увидеть улучшенные предварительные просмотры и просмотреть соответствующие шестигранные коды.
- Параметры загрузки : используйте предоставленные кнопки для загрузки сгенерированной цветовой палитра или градиента в качестве файла PNG.
- Скопируйте значения шестигранника : скопируйте отдельные шестнадцатеричные коды, используя кнопку «Копировать» рядом с каждым цветом.
- Добавить в список сравнения : нажмите «Добавить в список сравнения», чтобы переместить сгенерированную палитру в раздел сравнения.
- Сравните и удалите палитры : просматривайте и сравните несколько палитр, удалите отдельные палитры или очистите все с помощью подтверждения.
- Скачать список сравнения : после сравнения палитр загрузите их все как одно изображение 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> для структуры пользовательского интерфейса и взаимодействия с JavaScript для функциональности.
CSS
- CSS включает в себя расширенные стили для эффектов падения, Glassmorphism, поддержку темного режима, отзывчивый дизайн и другие современные элементы пользовательского интерфейса.
- Цвета контролируются с использованием переменных CSS, что позволяет легко переключаться между светом и темными режимами.
JavaScript
- JavaScript используется для генерации цветовых палитров из пользовательского ввода, обработки шестнадцатеричного значения, управления списком сравнения, включения загрузки изображений и добавления интерактивности, такой как эффекты наклонения и оповещения.
- Код использует Canvas для рендеринга изображений для загрузки и API буфера обмена для копирования значений HEX.
Технологии используются
- HTML5 : предоставляет структуру для приложения.
- CSS3 : Ответственный за отзывчивый дизайн, эффекты падения и современный стеклянный стиль.
- JavaScript : обрабатывает логику для генерации палитров, извлечения цветов, загрузки изображений и интерактивности.
- Canvas API : используется для генерации загружаемых изображений PNG цветовых палитров и градиентов.
Лицензия
Этот проект лицензирован по лицензии MIT. Смотрите файл лицензии для получения подробной информации.
