initial commit

RevanSP · Dec 28, 2024 · 807118e · 807118e
commit 807118e
Show file tree

Hide file tree

Showing 4 changed files with 217 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>COLOR PICKER FROM IMAGE</title>
+    <link rel="icon" type="image/png" href="public/favicon.png" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;700&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="public/style.css" />
+</head>
+
+<body class="bg-base-300 h-screen flex justify-center items-center">
+    <div class="card bg-base-100 w-96 md:w-auto border-2 border-neutral-content shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] border-black rounded-none">
+        <div class="card-body">
+            <h1 class="font-bold text-2xl text-center mb-3">COLOR PICKER FROM IMAGE</h1>
+            <input type="file" id="fileInput" class="file-input file-input-bordered border-2 border-black rounded-none border-neutral-content shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]" />
+            <div class="mt-4 max-h-[80vh] overflow-y-auto p-4 border-2 border-black rounded shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]">
+              <canvas id="imageCanvas" class="w-full rounded border-2 border-black"></canvas>
+            </div>
+            <input class="input input-bordered  w-full border-2 input-sm border-black rounded shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] mt-4" placeholder="COLOR PALETTE OUTPUT" readonly />
+            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
+                <div class="join border-2 border-black rounded shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]">
+                  <input id="hexInput" class="input input-bordered input-sm join-item w-full" placeholder="HEXADECIMAL" readonly />
+                  <button id="copyHex" class="btn join-item btn-sm !rounded-none border-l-black border-2">COPY</button>
+                </div>
+                <div class="join border-2 border-black rounded shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]">
+                  <input id="rgbInput" class="input input-bordered join-item input-sm w-full" placeholder="RED, GREEN, BLUE" readonly />
+                  <button id="copyRgb" class="btn join-item btn-sm !rounded-none border-l-black border-2">COPY</button>
+                </div>
+                <div class="join border-2 border-black rounded shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]">
+                  <input id="hslInput" class="input input-bordered input-sm join-item w-full" placeholder="HUE, SATURATION, LIGHTNESS" readonly />
+                  <button id="copyHsl" class="btn join-item btn-sm !rounded-none border-l-black border-2">COPY</button>
+                </div>
+              </div>
+            <div class="flex justify-center space-x-4 mt-6">
+                <a href="https://www.instagram.com/m9nokuro"
+                    class="btn btn-white border-2 rounded border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                        class="bi bi-instagram" viewBox="0 0 16 16">
+                        <path
+                            d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334" />
+                    </svg>
+                </a>
+                <a href="https://github.com/RevanSP"
+                    class="btn btn-white border-2 rounded border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                        class="bi bi-github" viewBox="0 0 16 16">
+                        <path
+                            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8" />
+                    </svg>
+                </a>
+                <a href="https://web.facebook.com/profile.php?id=100082958149027&_rdc=1&_rdr"
+                    class="btn btn-white border-2 rounded border-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                        class="bi bi-facebook" viewBox="0 0 16 16">
+                        <path
+                            d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
+                    </svg>
+                </a>
+            </div>
+            <h3 class="text-center mt-6 font-bold">ReiivanTheOnlyOne .</h3>
+        </div>
+    </div>
+    <script src="public/script.js"></script>
+</body>
+
+</html>
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/script.js b/public/script.js
@@ -0,0 +1,144 @@
+const fileInput = document.getElementById("fileInput");
+const canvas = document.getElementById("imageCanvas");
+const hexInput = document.getElementById("hexInput");
+const rgbInput = document.getElementById("rgbInput");
+const hslInput = document.getElementById("hslInput");
+const colorPaletteInput = document.querySelector('input[placeholder="COLOR PALETTE OUTPUT"]');
+const copyHexButton = document.getElementById("copyHex");
+const copyRgbButton = document.getElementById("copyRgb");
+const copyHslButton = document.getElementById("copyHsl");
+
+let imageUrl = null;
+
+fileInput.addEventListener("change", (event) => {
+  const file = event.target.files[0];
+  if (file) {
+    imageUrl = URL.createObjectURL(file);
+    const img = new Image();
+    img.onload = function () {
+      const ctx = canvas.getContext("2d");
+
+      const fixedWidth = 320;
+      const fixedHeight = fixedWidth * (9 / 16);
+
+      canvas.width = fixedWidth;
+      canvas.height = fixedHeight;
+
+      const aspectRatio = img.naturalWidth / img.naturalHeight;
+      let drawWidth = fixedWidth;
+      let drawHeight = fixedHeight;
+
+      if (aspectRatio > 1) {
+        drawHeight = fixedWidth / aspectRatio;
+      } else {
+        drawWidth = fixedHeight * aspectRatio;
+      }
+
+      const offsetX = (fixedWidth - drawWidth) / 2;
+      const offsetY = (fixedHeight - drawHeight) / 2;
+
+      ctx.drawImage(img, offsetX, offsetY, drawWidth, drawHeight);
+    };
+    img.src = imageUrl;
+  }
+});
+
+canvas.addEventListener("click", (event) => {
+  const rect = canvas.getBoundingClientRect();
+  const x = Math.floor((event.clientX - rect.left) * (canvas.width / rect.width));
+  const y = Math.floor((event.clientY - rect.top) * (canvas.height / rect.height));
+  const ctx = canvas.getContext("2d");
+  const imageData = ctx.getImageData(x, y, 1, 1).data;
+  const r = imageData[0];
+  const g = imageData[1];
+  const b = imageData[2];
+
+  const rgbColor = `rgb(${r}, ${g}, ${b})`;
+  const hexColor = rgbToHex(r, g, b);
+  const hslColor = rgbToHsl(r, g, b);
+
+  hexInput.value = hexColor;
+  rgbInput.value = rgbColor;
+  hslInput.value = hslColor;
+
+  // Set the background color of the color palette input field
+  colorPaletteInput.style.backgroundColor = hexColor;
+
+  enableCopyButtons();
+});
+
+copyHexButton.addEventListener("click", () => {
+  navigator.clipboard.writeText(hexInput.value);
+  showCopied(copyHexButton);
+});
+
+copyRgbButton.addEventListener("click", () => {
+  navigator.clipboard.writeText(rgbInput.value);
+  showCopied(copyRgbButton);
+});
+
+copyHslButton.addEventListener("click", () => {
+  navigator.clipboard.writeText(hslInput.value);
+  showCopied(copyHslButton);
+});
+
+function rgbToHex(r, g, b) {
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
+}
+
+function rgbToHsl(r, g, b) {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  let l = (max + min) / 2;
+
+  if (max !== min) {
+    const delta = max - min;
+    s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+
+    switch (max) {
+      case r:
+        h = (g - b) / delta + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / delta + 2;
+        break;
+      case b:
+        h = (r - g) / delta + 4;
+        break;
+      default:
+        break;
+    }
+    h /= 6;
+  }
+
+  return `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`;
+}
+
+function enableCopyButtons() {
+  if (hexInput.value) {
+    copyHexButton.disabled = false;
+  }
+  if (rgbInput.value) {
+    copyRgbButton.disabled = false;
+  }
+  if (hslInput.value) {
+    copyHslButton.disabled = false;
+  }
+}
+
+function showCopied(button) {
+  const originalText = button.innerText;
+  button.innerText = "COPIED";
+  setTimeout(() => {
+    button.innerText = originalText;
+  }, 3000);
+}
+
+copyHexButton.disabled = true;
+copyRgbButton.disabled = true;
+copyHslButton.disabled = true;
diff --git a/public/style.css b/public/style.css
@@ -0,0 +1,3 @@
+* {
+    font-family: 'Google Sans', sans-serif;
+}