diff --git a/Public/color-palette-generator.html b/Public/color-palette-generator.html new file mode 100644 index 00000000..b635a727 --- /dev/null +++ b/Public/color-palette-generator.html @@ -0,0 +1,42 @@ + + + + + + Color Palette Generator + + + +
+
+ #FFFFFF + + +
+
+ #FFFFFF + + +
+
+ #FFFFFF + + +
+
+ #FFFFFF + + +
+
+ #FFFFFF + + +
+
+
+ +
+ + + diff --git a/assets/Js/color-palette-generator.js b/assets/Js/color-palette-generator.js new file mode 100644 index 00000000..3028cc8e --- /dev/null +++ b/assets/Js/color-palette-generator.js @@ -0,0 +1,40 @@ +let lockedColors = [false, false, false, false, false]; + +// Generate random color in hex format +function generateRandomColor() { + const hexChars = '0123456789ABCDEF'; + let color = '#'; + for (let i = 0; i < 6; i++) { + color += hexChars[Math.floor(Math.random() * 16)]; + } + return color; +} + +// Update the color of each box +function generateColors() { + for (let i = 1; i <= 5; i++) { + if (!lockedColors[i - 1]) { + const color = generateRandomColor(); + document.getElementById(`color${i}`).style.backgroundColor = color; + document.getElementById(`hex${i}`).innerText = color; + } + } +} + +// Toggle lock for color +function toggleLock(index) { + lockedColors[index - 1] = !lockedColors[index - 1]; + const lockBtn = document.querySelector(`#color${index} .lock-btn`); + lockBtn.innerText = lockedColors[index - 1] ? '🔒' : '🔓'; +} + +// Copy color to clipboard +function copyToClipboard(index) { + const colorCode = document.getElementById(`hex${index}`).innerText; + navigator.clipboard.writeText(colorCode).then(() => { + alert(`Copied: ${colorCode}`); + }); +} + +// Initialize with a random palette +window.onload = generateColors; diff --git a/assets/css/color-palette-generator.css b/assets/css/color-palette-generator.css new file mode 100644 index 00000000..caa84fc5 --- /dev/null +++ b/assets/css/color-palette-generator.css @@ -0,0 +1,77 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #0c0303; +} + +.palette-container { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 20px; +} + +.color-box { + width: 150px; + height: 150px; + margin: 10px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + border-radius: 10px; + position: relative; + color: white; + font-weight: bold; + text-transform: uppercase; +} + +.color-box .hex-code { + font-size: 18px; + margin-top: 15px; +} + +.lock-btn, .copy-btn { + background: transparent; + border: none; + color: white; + cursor: pointer; + font-size: 20px; + margin: 5px; +} + +.controls { + margin-top: 20px; +} + +#generateBtn { + padding: 10px 20px; + background-color: #333; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 18px; +} + +#generateBtn:hover { + background-color: #555; +} + + +@media screen and (max_width: 600px) { + .palette-container { + flex-direction: column; + + } +} \ No newline at end of file