Chromaverse
Description
Le Chromaverse est une application Web sophistiquée qui permet aux utilisateurs de générer et de comparer les palettes de couleurs en fonction des valeurs hexadécimales, des entrées aléatoires ou des descriptions basées sur l'humeur. Les utilisateurs peuvent générer plusieurs palettes, afficher les détails des couleurs individuelles, télécharger les palettes et les comparer dans une vue côte à côte. Le design est élégant et professionnel, avec des effets de survol, des aperçus de couleurs et des capacités de téléchargement avancées pour les palettes de couleurs et les gradients.
Caractéristiques
- Entrée hexagonale multiple : les utilisateurs peuvent entrer plusieurs valeurs hexagonales séparées par des virgules pour générer des échantillons de couleurs individuelles et un gradient.
- Auto-détection des couleurs : entrez n'importe quel texte ou description de l'humeur, et le système tentera d'extraire des valeurs hexadécimales pertinentes ou de générer des couleurs en fonction de l'entrée.
- Affichage de la couleur du cercle : chaque couleur générée est affichée dans un échantillon circulaire pour une meilleure visualisation.
- Génération de gradient : Un gradient de toutes les couleurs généré est automatiquement fourni.
- Téléchargement des couleurs : Téléchargez la palette entière ou le gradient généré sous forme d'image PNG.
- Affichage de la valeur hexagonale : affichez des valeurs hexadécimales individuelles pour chaque couleur de la palette, avec un bouton "Copier" pour copier facilement le code hexadécimal.
- Effets de survol : les effets de volants améliorés font que les couleurs individuelles éclatent lorsqu'ils surviennent, améliorant l'expérience utilisateur.
- Sélecteur de couleurs : Un outil de sélecteur de couleurs est disponible, permettant aux utilisateurs de sélectionner manuellement les couleurs et d'afficher leurs valeurs hexadécimales en temps réel.
- Plusieurs palettes : générer plusieurs palettes successivement. Chaque palette a une option pour le supprimer, avec un message d'alerte de confirmation.
- Comparez les palettes : ajoutez des palettes à une "liste de comparaison" pour comparer visuellement différentes combinaisons de couleurs dans une vue côte à côte.
- Supprimer et effacer toutes les palettes : les utilisateurs peuvent supprimer les palettes individuelles de la liste de comparaison ou effacer toutes les palettes avec une confirmation d'alerte avant la compensation.
- Téléchargez la liste de comparaison : téléchargez toutes les palettes dans la liste de comparaison en tant qu'image PNG unique.
- Styling professionnel : conception de l'interface utilisateur avancée avec des techniques CSS modernes telles que le verre de verre, les transitions en douceur et la conception réactive garantit que l'application est polie et professionnelle.
Comment utiliser
- Entrez les valeurs hexagonales : dans le champ de saisie, vous pouvez saisir une ou plusieurs valeurs hexagonales séparées par des virgules. Facultativement, entrez des descriptions de texte ou des humeurs, et le système détectera automatiquement et générera des couleurs pour vous.
- Générer la palette : cliquez sur le bouton "Générer" pour générer une palette de couleurs. Les couleurs sont affichées sous forme d'échantillons circulaires, et un dégradé de toutes les couleurs est également affiché.
- Survolez les couleurs : déplacez votre souris sur les couleurs individuelles pour voir des aperçus améliorés et afficher les codes hexadécimaux respectifs.
- Options de téléchargement : utilisez les boutons fournis pour télécharger la palette de couleurs générée ou le gradient en tant que fichier PNG.
- Copier les valeurs hexagonales : copier les codes hexadécimaux individuels à l'aide du bouton "Copier" à côté de chaque couleur.
- Ajouter à la liste de comparaison : cliquez sur "Ajouter la liste de comparaison" pour déplacer la palette générée vers une section de comparaison.
- Comparez et supprimez les palettes : affichez et comparez plusieurs palettes, supprimez les palettes individuelles ou effacez tout avec une alerte de confirmation.
- Téléchargez la liste de comparaison : Après avoir comparé les palettes, téléchargez-les tous comme une seule image PNG pour référence future.
Instructions d'installation
Clone le référentiel :
git clone https://github.com/username/color-palette-generator.git
cd color-palette-generator
Ouvrez index.html dans votre navigateur:
Structure de fichiers
color-palette-generator/
├── index.html # Main HTML file
├── style.css # CSS file for styling the UI
├── script.js # JavaScript file for functionality
Présentation du code
Html
- Le HTML fournit la structure du champ de saisie, des boutons, de l'affichage des couleurs, de la liste de comparaison et des options de téléchargement.
- Il utilise des éléments
<input> , <button> , <div> et <canvas> pour structurer l'interface utilisateur et interagir avec JavaScript pour les fonctionnalités.
CSS
- Le CSS comprend des styles avancés pour les effets de survol, le verre de verre, le support en mode sombre, le design réactif et d'autres éléments d'interface utilisateur modernes.
- Les couleurs sont contrôlées à l'aide de variables CSS, ce qui facilite la commutation entre les modes clairs et sombres.
Javascrip
- JavaScript est utilisé pour générer des palettes de couleurs à partir de l'entrée de l'utilisateur, gérer l'extraction de la valeur hexagonale, gérer la liste de comparaison, permettre le téléchargement d'images et ajouter une interactivité telle que les effets de survol et les alertes.
- Le code exploite la toile pour rendre des images pour le téléchargement et l'API du presse-papiers pour copier les valeurs hexagonales.
Technologies utilisées
- HTML5 : fournit la structure de l'application.
- CSS3 : Responsable de la conception réactive, des effets de survol et du style de verre moderne.
- JavaScript : gère la logique pour générer des palettes, extraire les couleurs, télécharger des images et interactivité.
- API Canvas : Utilisé pour générer des images PNG téléchargeables de palettes de couleurs et de gradients.
Licence
Ce projet est autorisé sous la licence du MIT. Voir le fichier de licence pour plus de détails.
