scratch card added.

Shreekant-04 · Shreekant-04 · commit 346e4f0f5ab9 · 2024-07-26T12:09:24.000+05:30
diff --git a/README.md b/README.md
@@ -268,5 +268,10 @@
           <td><a href="random-avatar-creator">Avatar Generator</a></td>
           <td><a href="https://glistening-cajeta-a6b4ef.netlify.app/random-avatar-creator/">Link</a></td>
         </tr>
+        <tr>
+         <td>52</td>
+          <td><a href="ScratchCard">Scratch Card</a></td>
+          <td><a href="https://glistening-cajeta-a6b4ef.netlify.app/ScratchCard/">Link</a></td>
+        </tr>
       </tbody>
     </table>
diff --git a/ScratchCard/Styles.css b/ScratchCard/Styles.css
@@ -0,0 +1,67 @@
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
+  font-family: "Poppins", sans-serif;
+}
+
+h1 {
+  margin: 20px 0;
+  font-size: 36px;
+  background: linear-gradient(45deg, #cf6c6f, #cf9e91, #424040, #d37e67);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-align: center;
+  font-weight: bold;
+  animation: change 2s linear infinite alternate;
+  background-clip: text;
+  background-size: 200% 200%;
+}
+
+@keyframes change {
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 100% 50%;
+  }
+}
+
+.container {
+  position: relative;
+  width: 300px;
+  height: 200px;
+  border-radius: 15px;
+  overflow: hidden;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  border: 2px solid transparent;
+  background: linear-gradient(white, white) padding-box,
+    linear-gradient(135deg, #f6d365 0%, #fda085 100%) border-box;
+}
+
+#scratchCard {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 15px;
+  z-index: 2;
+}
+
+.message {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 24px;
+  text-align: center;
+  font-weight: bold;
+  color: #333;
+  z-index: 1;
+  transition: opacity 0.3s;
+}
diff --git a/ScratchCard/index.html b/ScratchCard/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Scratch Card</title>
+    <link rel="stylesheet" href="styles.css" />
+    <link rel="shortcut icon" href="/time-management.ico" type="image/x-icon" />
+  </head>
+  <body>
+    <h1>Scratch Card</h1>
+    <div class="container">
+      <canvas id="scratchCard"></canvas>
+      <div class="message" id="message">You won a prize!</div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/ScratchCard/script.js b/ScratchCard/script.js
@@ -0,0 +1,31 @@
+const canvas = document.getElementById("scratchCard");
+const ctx = canvas.getContext("2d");
+const message = document.getElementById("message");
+
+const init = () => {
+  ctx.fillStyle = "#888";
+  ctx.fillRect(0, 0, 300, 200);
+};
+init();
+
+let isDrawing = false;
+
+function draw(x, y) {
+  if (!isDrawing) return;
+
+  ctx.globalCompositeOperation = "destination-out";
+  ctx.beginPath();
+  ctx.arc(x, y, 24, 0, Math.PI * 2, false);
+  ctx.fill();
+}
+
+canvas.addEventListener("mousedown", (e) => {
+  isDrawing = true;
+  draw(e.offsetX, e.offsetY);
+});
+canvas.addEventListener("mousemove", (e) => {
+  draw(e.offsetX, e.offsetY);
+});
+canvas.addEventListener("mouseup", () => {
+  isDrawing = false;
+});
diff --git a/index.html b/index.html
@@ -385,6 +385,13 @@
             <a href="./random-avatar-creator/" target="_blank">Link</a>
           </td>
         </tr>
+        <tr>
+          <td>52</td>
+          <td>Scratch Card</td>
+          <td>
+            <a href="./ScratchCard/" target="_blank">Link</a>
+          </td>
+        </tr>
       </tbody>
     </table>
   </body>
