zyqunix/tools
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added a random hex color generator

Browse source
This commit is contained in:
zyqunix 2024-12-22 16:23:37 +01:00
parent c83218d182
commit 50ff6ad167
4 changed files with 145 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
color/index.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Color Generator</title>
<link rel="shortcut icon" href="https://rimgo.pussthecat.org/RFbdMMB.png" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="offscreenalert">Copied to clipboard!</div>
<button id="colorButton">Get Random Color</button>
<p>Press the hexadecimal to copy the color!</p>
<div id="main" class="main">
<div id="fullColor">Press the button to get a color!</div>
</div>
<script src="index.js"></script>
</body>
</html>

40
color/index.js Normal file
View file

@ -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);
});

74
color/style.css Normal file
View file

@ -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;
}

11
tools.json
View file

@ -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",