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

updated color randomizer, allows for custom color visualization now too

Browse source
This commit is contained in:
zyqunix 2024-12-26 15:57:46 +01:00
parent 71924663d8
commit 4008467462
8 changed files with 106 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -1,4 +1,4 @@
# tools # tools
There will be tools on this website for free without ads or trackers. 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
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 110 KiB

BIN
assets/config.zip → assets/zyqunix hyprland dots.zip
View file

Binary file not shown.

11
color/index.html
View file

@ -9,8 +9,17 @@
</head> </head>
<body> <body>
<div id="offscreenalert">Copied to clipboard!</div> <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>Press the hexadecimal to copy the color!</p>
<p class="hint" id="hint"></p>
<div id="main" class="main"> <div id="main" class="main">
<div id="fullColor">Press the button to get a color!</div> <div id="fullColor">Press the button to get a color!</div>
</div> </div>

24
color/index.js
View file

@ -2,6 +2,8 @@ const colorButton = document.getElementById('colorButton');
const fullColor = document.getElementById('fullColor'); const fullColor = document.getElementById('fullColor');
const main = document.getElementById('main'); const main = document.getElementById('main');
const offscreenAlert = document.getElementById('offscreenalert'); const offscreenAlert = document.getElementById('offscreenalert');
const colorInput = document.getElementById('colorInput');
const inputButton = document.getElementById('inputButton');
const chars = "0123456789ABCDEF"; const chars = "0123456789ABCDEF";
@ -38,3 +40,25 @@ main.addEventListener('click', () => {
const colorText = fullColor.textContent || fullColor.innerHTML; const colorText = fullColor.textContent || fullColor.innerHTML;
copyToClipboard(colorText).then(showAlert); 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();
});

64
color/style.css
View file

@ -32,12 +32,47 @@ button {
font-size: 1em; font-size: 1em;
background-color: #c099ff; background-color: #c099ff;
border-radius: 10px; border-radius: 10px;
border: 2px solid #d0aaff; border: 3px solid #d0aaff;
color: #191622; color: #191622;
cursor: pointer; 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; margin-bottom: 15px;
} }
@ -72,3 +107,28 @@ button:active {
height: fit-content; height: fit-content;
width: 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;
}
}

4
projects/projects.json
View file

@ -56,7 +56,7 @@
{ {
"name": "Hyprland Dots", "name": "Hyprland Dots",
"subheader": "My Hyprland Dotfiles", "subheader": "My Hyprland Dotfiles",
"description": "My Arch Hyprland dotfiles with my rofi, wallust and hypr (18mb).", "description": "My Arch Hyprland dotfiles with my rofi, wallust and hypr (18.8mb).",
"url": "/assets/config.zip" "url": "/assets/zyqunix hyprland dots.zip"
} }
] ]

7
style.css
View file

@ -193,6 +193,11 @@ html {
} }
@media (max-width: 480px) { @media (max-width: 480px) {
body {
margin: 0 10px;
}
.tools-main { .tools-main {
max-width: 100%; max-width: 100%;
} }
@ -220,6 +225,6 @@ html {
.welcome { .welcome {
font-size: 0.8rem; font-size: 0.8rem;
width: 100%; width: 100%;
padding-top: 30px; margin-top: 70px;
} }
} }