Envoi du code initial
This commit is contained in:
parent
39a3c6961a
commit
3d1a054644
2 changed files with 460 additions and 0 deletions
142
color.css
Normal file
142
color.css
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
:root {
|
||||
/* Couleur de l'interface */
|
||||
--colorbg: #e0e0e0;
|
||||
--colortext: black;
|
||||
--colorbutton: #2e2e2e;
|
||||
--colortextbtn: white;
|
||||
--colorbtnhover: #184e4a;
|
||||
/* Couleur de la palette par défaut */
|
||||
--colorb1: #1d1d1d;
|
||||
--colorb2: #2e2e2e;
|
||||
--colorb3: #4e4e4e;
|
||||
--colorb4: #6e6e6e;
|
||||
--colorw1: #dfdfdf;
|
||||
--colorw2: #efefef;
|
||||
--colorw3: #f7f7f7;
|
||||
--colorw4: #ffffff;
|
||||
--color1a: #184E4A;
|
||||
--color1b: #21b2a6;
|
||||
--color1c: #63d6c5;
|
||||
--color1d: #a6e0db;
|
||||
--color3a: #520c08;
|
||||
--color3b: #aa0813;
|
||||
--color3c: #d45850;
|
||||
--color3d: #f4a7a3;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
background-color: var(--colorbg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.controls {
|
||||
max-width: 15em;
|
||||
margin: 2em;
|
||||
margin-top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.controls ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
.controls ul li:before {
|
||||
content: "➔ ";
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 150px);
|
||||
grid-auto-rows: 200px;
|
||||
gap: 0;
|
||||
}
|
||||
.color-box {
|
||||
color:var(--colortextbtn);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.color-value {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
input.color-value {
|
||||
border: none;
|
||||
outline: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input.color-value::-webkit-color-swatch {
|
||||
border: none; /* Supprime les bordures internes dans les navigateurs basés sur WebKit */
|
||||
}
|
||||
.color-name {
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background-color: var(--colorbutton);
|
||||
color: var(--colortextbtn);
|
||||
font-size: 14px;
|
||||
border-left: var(--colortextbtn) 1px dotted;
|
||||
}
|
||||
.color-name:hover {
|
||||
background-color: var(--colorbtnhover);
|
||||
}
|
||||
.delete-btn {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
padding: 5px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.color-hex {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.8); /* Couleur du texte (blanc transparent) */
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Fond légèrement opaque */
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
cursor: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 15px;
|
||||
margin: 5px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
background-color: var(--colorbutton);
|
||||
color: var(--colortextbtn);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: var(--colorbtnhover);
|
||||
}
|
||||
318
color.html
Normal file
318
color.html
Normal file
|
|
@ -0,0 +1,318 @@
|
|||
<!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>
|
||||
Loading…
Reference in a new issue