diff --git a/projects/SignatureMakingSite/index.html b/projects/SignatureMakingSite/index.html new file mode 100644 index 00000000..ddd3cee6 --- /dev/null +++ b/projects/SignatureMakingSite/index.html @@ -0,0 +1,41 @@ + + + + + + Signature App + + + +
+
+ + + + + + +
+
+
+ +
+
+ Animated GIF +
+
+
+ + + +
+
+ + + diff --git a/projects/SignatureMakingSite/script.js b/projects/SignatureMakingSite/script.js new file mode 100644 index 00000000..1fb4b901 --- /dev/null +++ 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 new file mode 100644 index 00000000..71a0137b --- /dev/null +++ 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; +}