diff --git a/color/index.html b/color/index.html new file mode 100644 index 0000000..502f754 --- /dev/null +++ b/color/index.html @@ -0,0 +1,20 @@ + + + + + + Random Color Generator + + + + +
Copied to clipboard!
+ +

Press the hexadecimal to copy the color!

+
+
Press the button to get a color!
+
+ + + + \ No newline at end of file diff --git a/color/index.js b/color/index.js new file mode 100644 index 0000000..eb47620 --- /dev/null +++ b/color/index.js @@ -0,0 +1,40 @@ +const colorButton = document.getElementById('colorButton'); +const fullColor = document.getElementById('fullColor'); +const main = document.getElementById('main'); +const offscreenAlert = document.getElementById('offscreenalert'); + +const chars = "0123456789ABCDEF"; + +function generateRandomHexColor() { + return `#${Array.from({ length: 6 }, () => chars[Math.floor(Math.random() * chars.length)]).join('')}`; +} + +function applyColor(color) { + fullColor.textContent = color; + main.style.backgroundColor = color; +} + +function copyToClipboard(text) { + return navigator.clipboard.writeText(text).then(() => { + console.log("Copied to clipboard"); + }).catch(err => { + console.error("Failed to copy content:", err); + }); +} + +function showAlert() { + offscreenAlert.style.top = '10px'; + setTimeout(() => { + offscreenAlert.style.top = '-70px'; + }, 2500); +} + +colorButton.addEventListener('click', () => { + const newColor = generateRandomHexColor(); + applyColor(newColor); +}); + +main.addEventListener('click', () => { + const colorText = fullColor.textContent || fullColor.innerHTML; + copyToClipboard(colorText).then(showAlert); +}); diff --git a/color/style.css b/color/style.css new file mode 100644 index 0000000..2193dbf --- /dev/null +++ b/color/style.css @@ -0,0 +1,74 @@ +@font-face { + font-family: 'Hack'; + src: url('/Fonts/Hack/Hack-Regular.ttf') format('truetype'); +} + +@font-face { + font-family: 'JetBrainsMono'; + src: url('/Fonts/JetBrainsMono/JetBrainsMono-Regular.woff2'); +} + +body { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + min-height: 100vh; + margin: 0; + font-size: 1rem; + background-color: #2a2a2a; + color: #f0f0f0; + overflow-x: hidden; + font-family: 'Hack', 'JetBrainsMono', monospace; + user-select: none; +} + +html { + height: 100%; +} + +button { + padding: 10px; + font-size: 1em; + background-color: #c099ff; + border-radius: 10px; + border: 2px solid #d0aaff; + color: #191622; + cursor: pointer; +} + +p { + margin-bottom: 15px; +} + +button:active { + scale: 0.98; +} + +.main { + padding: 150px 225px; + background-color: #3a3a3a; + border-radius: 10px; + border: 5px solid #3f3f3f; + max-width: 450px; + max-height: 300px; + display: flex; + cursor: copy; + justify-content: center; +} + +#offscreenalert { + position: absolute; + padding: 20px; + background-color: #3a3a3a; + border: 3px solid #3f3f3f; + border-radius: 4px; + top: -70px; + transition: 0.4s cubic-bezier(.68,-0.55,.27,1.55); +} + +#fullColor { + cursor: copy; + height: fit-content; + width: fit-content; +} \ No newline at end of file diff --git a/tools.json b/tools.json index 962e5c6..355bb77 100644 --- a/tools.json +++ b/tools.json @@ -19,6 +19,17 @@ "subheader-de": "Teste deine Tastaturtasten", "description-de": "Dieses Tool erlaubt dir die Tasten deiner Tastatur zu Testen" + }, + { + "name": "Color Generator", + "subheader": "Generate Random Hexadecimal Colors", + "description": "Generate random Hexadecimal colors using a single click", + "url": "/color", + + "name-de": "Farben Generator", + "subheader-de": "Generiere Zufällige Farben", + "description-de": "Generiere zufällige hexadezimale Farben mit einem Click" + }, { "name": "Bio",