Merge pull request #1624 from anchalchaturvedi08/b1-add-app

Created the signature app
iamrahulmahato · Oct 23, 2024 · 07c6bbd · 07c6bbd
2 parents 2afc93c + 3cea7eb
commit 07c6bbd
Show file tree

Hide file tree

Showing 3 changed files with 195 additions and 0 deletions.
diff --git a/projects/SignatureMakingSite/index.html b/projects/SignatureMakingSite/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Signature App</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="controls">
+            <label for="textColor">Text Color</label>
+            <input type="color" id="textColor" value="#000000">
+            <label for="canvasBgColor">Canvas Background</label>
+            <input type="color" id="canvasBgColor" value="#FFFFFF">
+            <label for="fontSize">Font Size</label>
+            <select id="fontSize">
+                <option value="1px">1px</option>
+                <option value="2px">2px</option>
+                <option value="3px">3px</option>
+                <option value="4px">4px</option>
+                <option value="5px">5px</option>
+            </select>
+        </div>
+        <div class="signature-container">
+            <div class="signature-area">
+                <canvas id="signatureCanvas" width="700" height="400"></canvas>
+            </div>
+            <div class="gif-container">
+                <img src="https://media.tenor.com/yCFHzEvKa9MAAAAi/hello.gif" alt="Animated GIF">
+            </div>
+        </div>
+        <div class="buttons">
+            <button id="clearBtn">Clear</button>
+            <button id="saveBtn">Save & Download</button>
+            <button id="retrieveBtn">Retrieve Saved Signature</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/projects/SignatureMakingSite/script.js b/projects/SignatureMakingSite/script.js
@@ -0,0 +1,68 @@
+const canvas = document.getElementById('signatureCanvas');
+const ctx = canvas.getContext('2d');
+let painting = false;
+
+const startPosition = (e) => {
+    painting = true;
+    draw(e);
+};
+
+const finishedPosition = () => {
+    painting = false;
+    ctx.beginPath();
+};
+
+const draw = (e) => {
+    if (!painting) return; // Only draw when the mouse is pressed down
+    ctx.lineWidth = document.getElementById('fontSize').value;
+    ctx.lineCap = 'round';
+    ctx.strokeStyle = document.getElementById('textColor').value;
+
+    // Draw line
+    ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
+};
+
+// Mouse events
+canvas.addEventListener('mousedown', startPosition);
+canvas.addEventListener('mouseup', finishedPosition);
+canvas.addEventListener('mousemove', draw);
+canvas.addEventListener('mouseleave', finishedPosition); // Stop drawing when leaving canvas
+canvas.addEventListener('mouseenter', () => {
+    if (painting) {
+        draw(event); // Draw if painting is true when mouse enters
+    }
+});
+
+// Button events
+document.getElementById('clearBtn').addEventListener('click', () => {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+});
+
+document.getElementById('saveBtn').addEventListener('click', () => {
+    const dataURL = canvas.toDataURL('image/png');
+    const link = document.createElement('a');
+    link.href = dataURL;
+    link.download = 'signature.png';
+    link.click();
+});
+
+document.getElementById('retrieveBtn').addEventListener('click', () => {
+    const savedImage = localStorage.getItem('savedSignature');
+    if (savedImage) {
+        const img = new Image();
+        img.src = savedImage;
+        img.onload = () => {
+            ctx.drawImage(img, 0, 0);
+        };
+    } else {
+        alert('No saved signature found!');
+    }
+});
+
+// Change canvas background color
+document.getElementById('canvasBgColor').addEventListener('change', (e) => {
+    canvas.style.backgroundColor = e.target.value;
+});
diff --git a/projects/SignatureMakingSite/style.css b/projects/SignatureMakingSite/style.css
@@ -0,0 +1,86 @@
+body {
+    background-image: url('https://wallpapers.com/images/hd/minimalist-vintage-1920-x-1080-wallpaper-h18al5zfcc6wozfv.jpg');
+    background-size: cover;
+    background-position: center;
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    color: #fff;
+}
+
+.container {
+    background: rgba(0, 0, 0, 0.7);
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+}
+
+.controls {
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 20px;
+}
+
+.controls label, .controls input, .controls select {
+    margin-right: 10px;
+}
+
+.signature-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.signature-area {
+    border: 2px solid #fff;
+    background-color: #fff;
+    margin-right: 20px;
+}
+
+#signatureCanvas {
+    background-color: #fff;
+}
+
+.gif-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.gif-container img {
+    width: 100px;
+    height: auto;
+}
+
+.buttons {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 20px;
+}
+
+button {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+}
+
+#clearBtn {
+    background-color: #ff4f4f;
+    color: #fff;
+}
+
+#saveBtn {
+    background-color: #4caf50;
+    color: #fff;
+}
+
+#retrieveBtn {
+    background-color: #ffa500;
+    color: #fff;
+}