feat: CC & favicon & MDJAmin

MDJAmin · MDJAmin · commit 65db17c76aea · 2025-08-26T09:46:50.000+04:30
diff --git a/css/style.css b/css/style.css
@@ -15,9 +15,8 @@
       hsl(var(--hue) 80% 70%),
       transparent
     )
-    calc((var(--x) * 1px) - (var(--size) * 0.5))
-    calc((var(--y) * 1px) - (var(--size) * 0.5)) / var(--size) var(--size)
-    no-repeat fixed;
+    calc((var(--x) * 1px) - (var(--size) * 0.5)) calc((var(--y) * 1px) - (var(--size) * 0.5)) /
+    var(--size) var(--size) no-repeat fixed;
 }
 
 .controls {
@@ -33,8 +32,8 @@ body {
   flex-wrap: wrap;
   justify-content: center;
   min-height: 100vh;
-  font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue",
-    Helvetica, Arial, sans-serif, system-ui;
+  font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial,
+    sans-serif, system-ui;
   background: var(--bg);
 }
 
@@ -89,3 +88,30 @@ button::after {
   background: var(--glow);
   border-radius: 1rem;
 }
+
+.MDJAminDiv {
+  z-index: 4444;
+  position: fixed;
+  bottom: 5%;
+  left: 2%;
+}
+
+.MDJAmin {
+  text-decoration: none;
+  border-bottom: 1px dashed rgb(204, 204, 204);
+  border-top: 1px dashed rgb(204, 204, 204);
+  /* border-bottom: 1px dashed rgb(44, 44, 44); */
+  /* border-top: 1px dashed rgb(44, 44, 44); */
+  padding: 4px 0;
+  /* color: rgba(44, 44, 44, 0.525); */
+  color: rgba(204, 204, 204, 0.414);
+  font-family: monospace;
+  font-style: italic;
+  font-size: 1.1em;
+  transition: all 0.5s;
+}
+
+.MDJAmin:hover {
+  /* color: #000000; */
+  color: white;
+}
diff --git a/favicon.png b/favicon.png
diff --git a/index.html b/index.html
@@ -2,22 +2,41 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="css/style.css" />
-    <title>Document</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <link
+      rel="stylesheet"
+      href="css/style.css"
+    />
+    <link
+      rel="shortcut icon"
+      href="favicon.png"
+      type="image/x-icon"
+    />
+    <title>Futuristic Glowing Button</title>
   </head>
   <body>
     <div>
       <button>
-        <span>Start</span>
+        <span>Hover</span>
       </button>
       <button>
-        <span>Stop</span>
+        <span>CLick</span>
       </button>
       <button>
-    Click
+        <span>Hold</span>
       </button>
     </div>
+    <div class="MDJAminDiv">
+      <a
+        class="MDJAmin"
+        href="https://github.com/MDJAmin"
+        target="_blank"
+        >MDJAmin</a
+      >
+    </div>
     <script src="js/script.js"></script>
   </body>
 </html>
diff --git a/js/script.js b/js/script.js
@@ -1,12 +1,11 @@
 const syncPointer = ({ x: pointerX, y: pointerY }) => {
-    const x = pointerX.toFixed(2)
-    const y = pointerY.toFixed(2)
-    const xp = (pointerX / window.innerWidth).toFixed(2)
-    const yp = (pointerY / window.innerHeight).toFixed(2)
-    document.documentElement.style.setProperty('--x', x)
-    document.documentElement.style.setProperty('--xp', xp)
-    document.documentElement.style.setProperty('--y', y)
-    document.documentElement.style.setProperty('--yp', yp)
-  }
-  document.body.addEventListener('pointermove', syncPointer)
-      
+  const x = pointerX.toFixed(2);
+  const y = pointerY.toFixed(2);
+  const xp = (pointerX / window.innerWidth).toFixed(2);
+  const yp = (pointerY / window.innerHeight).toFixed(2);
+  document.documentElement.style.setProperty("--x", x);
+  document.documentElement.style.setProperty("--xp", xp);
+  document.documentElement.style.setProperty("--y", y);
+  document.documentElement.style.setProperty("--yp", yp);
+};
+document.body.addEventListener("pointermove", syncPointer);
