added a random hex color generator
This commit is contained in:
zyqunix
parent
c83218d182
commit
50ff6ad167
4 changed files with 145 additions and 0 deletions
20
color/index.html
Normal file
20
color/index.html
Normal 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
40
color/index.js
Normal 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
74
color/style.css
Normal 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
11
tools.json
|
|
@ -19,6 +19,17 @@
|
||||||
"subheader-de": "Teste deine Tastaturtasten",
|
"subheader-de": "Teste deine Tastaturtasten",
|
||||||
"description-de": "Dieses Tool erlaubt dir die Tasten deiner Tastatur zu Testen"
|
"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",
|
"name": "Bio",
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue