319 lines
12 KiB
HTML
319 lines
12 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="fr">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Palette Interactive</title>
|
||
|
|
<link rel="stylesheet" href="color.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Palette Interactive</h1>
|
||
|
|
<div class="wrapper">
|
||
|
|
<div class="controls">
|
||
|
|
<button id="add-color">Ajouter une couleur</button>
|
||
|
|
<button id="open-color-picker" class="btn">Changer la couleur du fond</button>
|
||
|
|
<input type="color" id="color-picker" style="display: none;">
|
||
|
|
<button id="export-css">Exporter en CSS</button>
|
||
|
|
<button id="trigger-import" class="btn">Importer une palette</button>
|
||
|
|
<input type="file" id="import-palette" accept=".css" style="display: none;">
|
||
|
|
<button id="help" class="btn">Aide</button>
|
||
|
|
<ul><li>Cliquez sur le fond des carrés pour changer les couleurs.</li>
|
||
|
|
<li>Modifiez le nom des variables avant d'exporter.</li>
|
||
|
|
<li>Lorsque vous importez une palette, le fichier doit être en .css et contenir uniquement les variables de couleur, par exemple
|
||
|
|
<code>--colortext: black;<br>--colorbutton: #2e2e2e;</code>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="grid palette" id="color-grid">
|
||
|
|
<!-- Couleurs -->
|
||
|
|
|
||
|
|
<div class="color-box" data-color="--colorb1">
|
||
|
|
<span class="color-hex">#1d1d1d</span>
|
||
|
|
<input type="color" class="color-value" value="#1d1d1d">
|
||
|
|
<button class="delete-btn">X</button>
|
||
|
|
<input type="text" class="color-name" value="--colorb1">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="color-box" data-color="--colorb2">
|
||
|
|
<span class="color-hex">#2e2e2e</span>
|
||
|
|
<input type="color" class="color-value" value="#2e2e2e">
|
||
|
|
<button class="delete-btn">X</button>
|
||
|
|
<input type="text" class="color-name" value="--colorb2">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="color-box" data-color="--colorb3">
|
||
|
|
<span class="color-hex">#4e4e4e</span>
|
||
|
|
<input type="color" class="color-value" value="#4e4e4e">
|
||
|
|
<button class="delete-btn">X</button>
|
||
|
|
<input type="text" class="color-name" value="--colorb3">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="color-box" data-color="--colorb4">
|
||
|
|
<span class="color-hex">#6e6e6e</span>
|
||
|
|
<input type="color" class="color-value" value="#6e6e6e">
|
||
|
|
<button class="delete-btn">X</button>
|
||
|
|
<input type="text" class="color-name" value="--colorb4">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="color-box" data-color="--colorw1">
|
||
|
|
<span class="color-hex">#dfdfdf</span>
|
||
|
|
<input type="color" class="color-value" value="#dfdfdf">
|
||
|
|
<button class="delete-btn">X</button>
|
||
|
|
<input type="text" class="color-name" value="--colorw1">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="color-box" data-color="--colorw2">
|
||
|
|
<span class="color-hex">#efefef</span>
|
||
|
|
<input type="color" class="color-value" value="#efefef">
|
||
|
|
<button class="delete-btn">X</button>
|
||
|
|
<input type="text" class="color-name" value="--colorw2">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="color-box" data-color="--colorw3">
|
||
|
|
<span class="color-hex">#f7f7f7</span>
|
||
|
|
<input type="color" class="color-value" value="#f7f7f7">
|
||
|
|
<button class="delete-btn">X</button>
|
||
|
|
<input type="text" class="color-name" value="--colorw3">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="color-box" data-color="--colorw4">
|
||
|
|
<span class="color-hex">#ffffff</span>
|
||
|
|
<input type="color" class="color-value" value="#ffffff">
|
||
|
|
<button class="delete-btn">X</button>
|
||
|
|
<input type="text" class="color-name" value="--colorw4">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="color-box" data-color="--color1a">
|
||
|
|
<span class="color-hex">#184E4A</span>
|
||
|
|
<input type="color" class="color-value" value="#184E4A">
|
||
|
|
<button class="delete-btn">X</button>
|
||
|
|
<input type="text" class="color-name" value="--color1a">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="color-box" data-color="--color1b">
|
||
|
|
<span class="color-hex">#21b2a6</span>
|
||
|
|
<input type="color" class="color-value" value="#21b2a6">
|
||
|
|
<button class="delete-btn">X</button>
|
||
|
|
<input type="text" class="color-name" value="--color1b">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="color-box" data-color="--color1c">
|
||
|
|
<span class="color-hex">#63d6c5</span>
|
||
|
|
<input type="color" class="color-value" value="#63d6c5">
|
||
|
|
<button class="delete-btn">X</button>
|
||
|
|
<input type="text" class="color-name" value="--color1c">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="color-box" data-color="--color1d">
|
||
|
|
<span class="color-hex">#a6e0db</span>
|
||
|
|
<input type="color" class="color-value" value="#a6e0db">
|
||
|
|
<button class="delete-btn">X</button>
|
||
|
|
<input type="text" class="color-name" value="--color1d">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="color-box" data-color="--color3a">
|
||
|
|
<span class="color-hex">#520c08</span>
|
||
|
|
<input type="color" class="color-value" value="#520c08">
|
||
|
|
<button class="delete-btn">X</button>
|
||
|
|
<input type="text" class="color-name" value="--color3a">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="color-box" data-color="--color3b">
|
||
|
|
<span class="color-hex">#aa0813</span>
|
||
|
|
<input type="color" class="color-value" value="#aa0813">
|
||
|
|
<button class="delete-btn">X</button>
|
||
|
|
<input type="text" class="color-name" value="--color3b">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="color-box" data-color="--color3c">
|
||
|
|
<span class="color-hex">#d45850</span>
|
||
|
|
<input type="color" class="color-value" value="#d45850">
|
||
|
|
<button class="delete-btn">X</button>
|
||
|
|
<input type="text" class="color-name" value="--color3c">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="color-box" data-color="--color3d">
|
||
|
|
<span class="color-hex">#f4a7a3</span>
|
||
|
|
<input type="color" class="color-value" value="#f4a7a3">
|
||
|
|
<button class="delete-btn">X</button>
|
||
|
|
<input type="text" class="color-name" value="--color3d">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const grid = document.getElementById('color-grid');
|
||
|
|
const addButton = document.getElementById('add-color');
|
||
|
|
const exportButton = document.getElementById('export-css');
|
||
|
|
const importInput = document.getElementById('import-palette');
|
||
|
|
|
||
|
|
// Vérifications des noms de variables CSS et des codes couleurs
|
||
|
|
function isValidCSSVariableName(name) {
|
||
|
|
return /^--[a-zA-Z0-9-]+$/.test(name);
|
||
|
|
}
|
||
|
|
|
||
|
|
function isValidHexColor(color) {
|
||
|
|
return /^#[0-9a-fA-F]{3,6}$/.test(color);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Supprimer un carré
|
||
|
|
grid.addEventListener('click', (event) => {
|
||
|
|
if (event.target.classList.contains('delete-btn')) {
|
||
|
|
const box = event.target.closest('.color-box');
|
||
|
|
box.remove();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Mettre à jour la couleur
|
||
|
|
grid.addEventListener('input', (event) => {
|
||
|
|
if (event.target.classList.contains('color-value')) {
|
||
|
|
const box = event.target.closest('.color-box');
|
||
|
|
const colorValue = event.target.value;
|
||
|
|
|
||
|
|
if (isValidHexColor(colorValue)) {
|
||
|
|
box.style.backgroundColor = colorValue;
|
||
|
|
const hexBadge = box.querySelector('.color-hex');
|
||
|
|
hexBadge.textContent = colorValue; // Met à jour le badge
|
||
|
|
} else {
|
||
|
|
alert("Couleur hexadécimale invalide !");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Ajouter un nouveau carré
|
||
|
|
addButton.addEventListener('click', () => {
|
||
|
|
const newBox = document.createElement('div');
|
||
|
|
newBox.classList.add('color-box');
|
||
|
|
|
||
|
|
const inputColor = document.createElement('input');
|
||
|
|
inputColor.type = 'color';
|
||
|
|
inputColor.classList.add('color-value');
|
||
|
|
inputColor.value = '#ffffff';
|
||
|
|
|
||
|
|
const colorNameInput = document.createElement('input');
|
||
|
|
colorNameInput.type = 'text';
|
||
|
|
colorNameInput.classList.add('color-name');
|
||
|
|
colorNameInput.value = '--new-color';
|
||
|
|
|
||
|
|
const deleteButton = document.createElement('button');
|
||
|
|
deleteButton.classList.add('delete-btn');
|
||
|
|
deleteButton.textContent = 'X';
|
||
|
|
|
||
|
|
const hexBadge = document.createElement('span');
|
||
|
|
hexBadge.classList.add('color-hex');
|
||
|
|
hexBadge.textContent = '#ffffff';
|
||
|
|
|
||
|
|
newBox.appendChild(hexBadge);
|
||
|
|
newBox.appendChild(inputColor);
|
||
|
|
newBox.appendChild(deleteButton);
|
||
|
|
newBox.appendChild(colorNameInput);
|
||
|
|
|
||
|
|
grid.appendChild(newBox);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Exporter en CSS
|
||
|
|
document.getElementById('trigger-import').addEventListener('click', () => {
|
||
|
|
document.getElementById('import-palette').click();
|
||
|
|
});
|
||
|
|
exportButton.addEventListener('click', () => {
|
||
|
|
const colorBoxes = document.querySelectorAll('.color-box');
|
||
|
|
let cssContent = `:root {\n`;
|
||
|
|
|
||
|
|
colorBoxes.forEach(box => {
|
||
|
|
const colorName = box.querySelector('.color-name').value;
|
||
|
|
const colorValue = box.querySelector('.color-value').value;
|
||
|
|
|
||
|
|
if (isValidCSSVariableName(colorName) && isValidHexColor(colorValue)) {
|
||
|
|
cssContent += ` ${colorName}: ${colorValue};\n`;
|
||
|
|
} else {
|
||
|
|
alert(`Variable ou couleur invalide : ${colorName} - ${colorValue}`);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
cssContent += `}`;
|
||
|
|
|
||
|
|
const blob = new Blob([cssContent], { type: 'text/css' });
|
||
|
|
const a = document.createElement('a');
|
||
|
|
a.href = URL.createObjectURL(blob);
|
||
|
|
a.download = 'palette.css';
|
||
|
|
a.click();
|
||
|
|
});
|
||
|
|
|
||
|
|
// Importer depuis un fichier CSS
|
||
|
|
importInput.addEventListener('change', function(event) {
|
||
|
|
const file = event.target.files[0];
|
||
|
|
|
||
|
|
if (file && file.type === 'text/css') {
|
||
|
|
const reader = new FileReader();
|
||
|
|
|
||
|
|
reader.readAsText(file);
|
||
|
|
|
||
|
|
reader.onload = function(e) {
|
||
|
|
const cssText = e.target.result.trim();
|
||
|
|
const paletteVariables = parseCssVariables(cssText);
|
||
|
|
|
||
|
|
for (const colorName in paletteVariables) {
|
||
|
|
if (paletteVariables.hasOwnProperty(colorName)) {
|
||
|
|
const colorValue = paletteVariables[colorName];
|
||
|
|
|
||
|
|
if (isValidCSSVariableName(colorName) && isValidHexColor(colorValue)) {
|
||
|
|
const colorBox = document.createElement('div');
|
||
|
|
colorBox.classList.add('color-box');
|
||
|
|
|
||
|
|
const inputColor = document.createElement('input');
|
||
|
|
inputColor.type = 'color';
|
||
|
|
inputColor.classList.add('color-value');
|
||
|
|
inputColor.value = colorValue;
|
||
|
|
|
||
|
|
const colorNameInput = document.createElement('input');
|
||
|
|
colorNameInput.type = 'text';
|
||
|
|
colorNameInput.classList.add('color-name');
|
||
|
|
colorNameInput.value = colorName;
|
||
|
|
|
||
|
|
const deleteButton = document.createElement('button');
|
||
|
|
deleteButton.classList.add('delete-btn');
|
||
|
|
deleteButton.textContent = 'X';
|
||
|
|
|
||
|
|
const hexBadge = document.createElement('span');
|
||
|
|
hexBadge.classList.add('color-hex');
|
||
|
|
hexBadge.textContent = colorValue;
|
||
|
|
|
||
|
|
colorBox.appendChild(hexBadge);
|
||
|
|
colorBox.appendChild(inputColor);
|
||
|
|
colorBox.appendChild(deleteButton);
|
||
|
|
colorBox.appendChild(colorNameInput);
|
||
|
|
|
||
|
|
grid.appendChild(colorBox);
|
||
|
|
} else {
|
||
|
|
alert(`Variable ou couleur invalide dans le fichier : ${colorName} - ${colorValue}`);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
} else {
|
||
|
|
alert('Veuillez sélectionner un fichier CSS valide.');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Extraire les variables CSS
|
||
|
|
function parseCssVariables(cssText) {
|
||
|
|
const regex = /(--[\w-]+):\s*(#[\da-fA-F]{3,6});/g;
|
||
|
|
let result;
|
||
|
|
const variables = {};
|
||
|
|
|
||
|
|
while ((result = regex.exec(cssText)) !== null) {
|
||
|
|
const variableName = result[1];
|
||
|
|
const variableValue = result[2];
|
||
|
|
variables[variableName] = variableValue;
|
||
|
|
}
|
||
|
|
|
||
|
|
return variables;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|