Press the button to get a color!
diff --git a/color/index.js b/color/index.js
index eb47620..f39e7f1 100644
--- a/color/index.js
+++ b/color/index.js
@@ -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();
+});
\ No newline at end of file
diff --git a/color/style.css b/color/style.css
index 2193dbf..e4db4a4 100644
--- a/color/style.css
+++ b/color/style.css
@@ -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;
-}
\ No newline at end of file
+}
+
+.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;
+ }
+}
diff --git a/projects/projects.json b/projects/projects.json
index 48c33e5..d3a4884 100644
--- a/projects/projects.json
+++ b/projects/projects.json
@@ -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"
}
]
\ No newline at end of file
diff --git a/style.css b/style.css
index e005823..ce454d9 100644
--- a/style.css
+++ b/style.css
@@ -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;
}
}
\ No newline at end of file