updated color randomizer, allows for custom color visualization now too
This commit is contained in:
zyqunix
parent
71924663d8
commit
4008467462
8 changed files with 106 additions and 8 deletions
|
|
@ -1,4 +1,4 @@
|
|||
# tools
|
||||
There will be tools on this website for free without ads or trackers.
|
||||
|
||||
i needa make a global css, ion feel like writing the same shit every time Lol
|
||||
if you're reading this, FORK THIS REPO AND PLEASE MAKE A GLOBAL CSS - I do not have time to do this myself, so YOUR help could be appreciated! (Your name will also be on the main page! (possible bio too))
|
||||
BIN
assets/Color Generator.png
Normal file
BIN
assets/Color Generator.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
|
@ -9,8 +9,17 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="offscreenalert">Copied to clipboard!</div>
|
||||
<button id="colorButton">Get Random Color</button>
|
||||
|
||||
<button class="colors" id="colorButton">Get Random Color</button>
|
||||
|
||||
<div class="input">
|
||||
<input class="colors" type="text" name="input color" id="colorInput" placeholder="Your Color" maxlength="7">
|
||||
<button class="inputButton" id="inputButton" type="button">Enter</button>
|
||||
</div>
|
||||
|
||||
<p>Press the hexadecimal to copy the color!</p>
|
||||
<p class="hint" id="hint"></p>
|
||||
|
||||
<div id="main" class="main">
|
||||
<div id="fullColor">Press the button to get a color!</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ const colorButton = document.getElementById('colorButton');
|
|||
const fullColor = document.getElementById('fullColor');
|
||||
const main = document.getElementById('main');
|
||||
const offscreenAlert = document.getElementById('offscreenalert');
|
||||
const colorInput = document.getElementById('colorInput');
|
||||
const inputButton = document.getElementById('inputButton');
|
||||
|
||||
const chars = "0123456789ABCDEF";
|
||||
|
||||
|
|
@ -38,3 +40,25 @@ main.addEventListener('click', () => {
|
|||
const colorText = fullColor.textContent || fullColor.innerHTML;
|
||||
copyToClipboard(colorText).then(showAlert);
|
||||
});
|
||||
|
||||
colorInput.addEventListener("keydown", function(event) {
|
||||
if (event.key === "Enter") {
|
||||
const inputValue = colorInput.value;
|
||||
if (/^#[0-9A-F]{6}$/i.test(inputValue)) {
|
||||
applyColor(inputValue);
|
||||
} else {
|
||||
document.getElementById('hint').innerHTML = "Invalid color format. Please enter a valid hex color code. EG #aabbcc";
|
||||
}
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
inputButton.addEventListener("click", function(event) {
|
||||
const inputValue = colorInput.value;
|
||||
if (/^#[0-9A-F]{6}$/i.test(inputValue)) {
|
||||
applyColor(inputValue);
|
||||
} else {
|
||||
document.getElementById('hint').innerHTML = "Invalid color format. Please enter a valid hex color code. EG #aabbcc";
|
||||
}
|
||||
event.preventDefault();
|
||||
});
|
||||
|
|
@ -32,12 +32,47 @@ button {
|
|||
font-size: 1em;
|
||||
background-color: #c099ff;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #d0aaff;
|
||||
border: 3px solid #d0aaff;
|
||||
color: #191622;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
p {
|
||||
input {
|
||||
padding: 10px;
|
||||
font-size: 1em;
|
||||
background-color: #886db4;
|
||||
border-radius: 10px;
|
||||
border: 3px solid #644f84;
|
||||
color: #191622;
|
||||
cursor: text;
|
||||
outline: none;
|
||||
transition: background-color 0.25s, border 0.25s;
|
||||
}
|
||||
|
||||
.inputButton {
|
||||
padding: 10px;
|
||||
font-size: 1em;
|
||||
background-color: #886db4;
|
||||
border-radius: 10px;
|
||||
border: 3px solid #644f84;
|
||||
color: #191622;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: background-color 0.25s, border 0.25s;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: #3f3f3f;
|
||||
}
|
||||
|
||||
input:not(:placeholder-shown),
|
||||
.inputButton:hover {
|
||||
background-color: #a986e2;
|
||||
border-radius: 10px;
|
||||
border-color:rgb(168, 134, 209);
|
||||
}
|
||||
|
||||
p:not(.hint) {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
|
|
@ -71,4 +106,29 @@ button:active {
|
|||
cursor: copy;
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
.colors {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.main {
|
||||
padding: 75px 70.5px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
button, input {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.main {
|
||||
padding: 75px 10.5px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
{
|
||||
"name": "Hyprland Dots",
|
||||
"subheader": "My Hyprland Dotfiles",
|
||||
"description": "My Arch Hyprland dotfiles with my rofi, wallust and hypr (18mb).",
|
||||
"url": "/assets/config.zip"
|
||||
"description": "My Arch Hyprland dotfiles with my rofi, wallust and hypr (18.8mb).",
|
||||
"url": "/assets/zyqunix hyprland dots.zip"
|
||||
}
|
||||
]
|
||||
|
|
@ -193,6 +193,11 @@ html {
|
|||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
||||
body {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.tools-main {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
@ -220,6 +225,6 @@ html {
|
|||
.welcome {
|
||||
font-size: 0.8rem;
|
||||
width: 100%;
|
||||
padding-top: 30px;
|
||||
margin-top: 70px;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue