diff --git a/index.html b/index.html
new file mode 100644
index 0000000..72f9b2a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="./vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Image to perceived Luminance</title>
+  <script type="module" crossorigin>(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const t of document.querySelectorAll('link[rel="modulepreload"]'))n(t);new MutationObserver(t=>{for(const r of t)if(r.type==="childList")for(const s of r.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&n(s)}).observe(document,{childList:!0,subtree:!0});function i(t){const r={};return t.integrity&&(r.integrity=t.integrity),t.referrerPolicy&&(r.referrerPolicy=t.referrerPolicy),t.crossOrigin==="use-credentials"?r.credentials="include":t.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function n(t){if(t.ep)return;t.ep=!0;const r=i(t);fetch(t.href,r)}})();class h{constructor(e){document.addEventListener("paste",i=>{var r;const n=(r=i.clipboardData)==null?void 0:r.items;let t=0;if(console.log("items",n),!n)throw new Error("Error: no items found");for(let s=0;s<n.length;s++){const c=n[s];if(console.log("item",c),c.kind==="file"){console.log("item",c);const l=c.getAsFile(),m=new FileReader;if(m.onload=d=>{var f,g;if(!((f=d.target)!=null&&f.result))throw new Error("Error: file format not supported");e((g=d.target)==null?void 0:g.result)},m.onerror=d=>{throw new Error(`${d}`)},!l)throw new Error("Error: blob was null");m.readAsDataURL(l)}else t++}if(t===n.length)throw new Error("No image/file found")})}}const a=document.createElement("canvas"),u=a.getContext("2d");if(!u)throw new Error("ERROR: 2d context not supported!");new h(o=>{if(typeof o!="string")throw new Error("Error: arraybuffer not supported!");const e=document.createElement("img");e.src=o,e.onload=()=>{var l;console.log("loaded"),a.width=e.width,a.height=e.height;const i=p(u,e,()=>{}),n=p(u,e,w),t=document.createElement("img"),r=document.createElement("img");t.src=i,r.src=n;const s=document.createElement("div");s.classList.add("shadow-container"),s.append(t),s.append(r);const c=document.createElement("div");c.classList.add("img-container"),c.append(s),(l=document.getElementById("content"))==null||l.prepend(c)}});function p(o,e,i){o.drawImage(e,0,0);const n=o.getImageData(0,0,a.width,a.height);return i(n.data),o.putImageData(n,0,0),a.toDataURL()}function w(o){for(let e=0;e<o.length;e+=4){const i=o[e]/255,n=o[e+1]/255,t=o[e+2]/255,r=.299*i+.587*n+.114*t;o[e]=r*255,o[e+1]=r*255,o[e+2]=r*255}}
+</script>
+  <style rel="stylesheet" crossorigin>*,html{font-family:Arial,Helvetica,sans-serif;padding:0;margin:0;box-sizing:border-box;--app-color: #ffffff;--pattern-color: rgb(187, 187, 187);--border-color: rgb(207, 207, 207)}html{display:grid;text-align:center}h1{margin:3rem}#content{display:grid;gap:2rem;padding-bottom:5rem}.img-container{display:flex;justify-content:center}.shadow-container{display:flex;box-shadow:.2rem .2rem 10px #000}
+</style>
+</head>
+
+<body>
+  <h1><b><i>CTRL+V</i></b> <span style="font-weight: 300;">to convert image to perceived luminance</span></h1>
+
+  <div id="content"></div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/vite.svg b/vite.svg
new file mode 100644
index 0000000..e7b8dfb
--- /dev/null
+++ b/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
