Create Online Digital Signature Maker

by

आज के युग एक Create Online Digital Signature बनाना बहुत आसान और सुविधान के लिए जरूरी है। यह ने केवलों के प्रमाण के लिए इक और भी आवश्यक बनाने के सुगमाय में भी खूब प्रयोग प्रदान करता है। आईए जानते हैं कि E-sign Digital Signature Maker कैसे बनायें?  Online Signature

Create Online digital signature maker

 Online Digital Signature  क्यों  जाना

 

  1. सुरक्षा का चुनाव करें – एक चार कीबोर्ड चुने और अच्छी Online Digital Signature Maker पर जाएं।
  2. ऑनलाइन टूल का चुनाव करें – Canva, DocuSign, Adobe Sign जैसे Tool की मदद लें।
  3. Signature Design कीजिए – अपनी जानकारी को चुने, क्रोटे करें, और काइनी टेक्स्ट को ऑनलैइन जीअफ पर प्लेस करें।
  4. सावधानिक जांचे कीजिए – डिजीटल चह्न का सुरक्षा करें और अपनी सिग्नेचर को जैवसंपन की हालत के लिए चैक करें।

Digital Signature की Website and App online Create

 

नीचे दिए गए कोड को Digital.html Save Kare  जैसे कि Hostinger पर hosting  लेकर  Page Ko Upload करके website बनाकर पैसे कमाएं. साथ में Snake Online  का App भी बना दिया उसे आप Downlod करें।

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta name=”description” content=”Create your fancy signature with ease using our tool. Mobile-friendly and responsive design with a clean interface.”>
<title>Fancy Signature Creator</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
margin: 0;
}

/* Navigation Bar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #4A90E2;
padding: 0.5em 1em;
}

.navbar h1 {
color: #fff;
font-size: 1.5em;
}

.navbar ul {
list-style: none;
display: flex;
gap: 1em;
}

.navbar ul li {
display: inline;
}

.navbar ul li a {
color: #fff;
text-decoration: none;
font-size: 1em;
}

.navbar ul li a:hover {
text-decoration: underline;
}

/* Main Section */
.main-container {
padding: 2em 1em;
text-align: center;
}

.main-container h2 {
color: #333;
font-size: 2em;
margin-bottom: 1em;
}

.signature-box {
background: #fff;
border: 1px solid #ddd;
border-radius: 10px;
padding: 2em;
max-width: 600px;
margin: 1em auto;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.signature-box canvas {
border: 1px solid #ccc;
width: 100%;
height: 200px;
display: block;
margin: auto;
}

.buttons {
margin-top: 1em;
}

.buttons button {
background-color: #4A90E2;
color: white;
border: none;
padding: 0.7em 1.5em;
margin: 0.5em;
cursor: pointer;
border-radius: 5px;
}

.buttons button:hover {
background-color: #357ABD;
}

/* Google Adsense */
.adsense {
margin-top: 2em;
text-align: center;
}

.adsense iframe {
width: 300px;
height: 250px;
border: none;
}

/* Footer */
.footer {
background: #4A90E2;
color: #fff;
text-align: center;
padding: 1em;
margin-top: 2em;
}

/* Responsive Design */
@media (max-width: 768px) {
.navbar ul {
flex-direction: column;
gap: 0.5em;
}

.signature-box {
padding: 1em;
}

.adsense iframe {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<header class=”navbar”>
<h1>Fancy Signature</h1>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</header>

<main class=”main-container”>
<h2>Create Your Fancy Signature</h2>
<div class=”signature-box”>
<canvas id=”signatureCanvas”></canvas>
<div class=”buttons”>
<button onclick=”clearCanvas()”>Clear</button>
<button onclick=”saveSignature()”>Save</button>
</div>
</div>

<div class=”adsense”>
<!– Placeholder for Google AdSense –>
<iframe src=”https://via.placeholder.com/300×250?text=Ad+Space” title=”Ad Space”></iframe>
</div>
</main>

<footer class=”footer”>
&copy; 2024 Fancy Signature. All rights reserved.
</footer>

<script>
const canvas = document.getElementById(‘signatureCanvas’);
const ctx = canvas.getContext(‘2d’);
let isDrawing = false;

function resizeCanvas() {
canvas.width = canvas.parentElement.clientWidth;
canvas.height = 200;
}

function startDrawing(e) {
isDrawing = true;
const rect = canvas.getBoundingClientRect();
ctx.beginPath();
ctx.moveTo(e.clientX – rect.left, e.clientY – rect.top);
}

function draw(e) {
if (!isDrawing) return;
const rect = canvas.getBoundingClientRect();
ctx.lineTo(e.clientX – rect.left, e.clientY – rect.top);
ctx.strokeStyle = ‘#333’;
ctx.lineWidth = 2;
ctx.stroke();
}

function stopDrawing() {
isDrawing = false;
}

function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}

function saveSignature() {
const dataURL = canvas.toDataURL(‘image/png’);
const link = document.createElement(‘a’);
link.href = dataURL;
link.download = ‘signature.png’;
link.click();
}

canvas.addEventListener(‘mousedown’, startDrawing);
canvas.addEventListener(‘mousemove’, draw);
canvas.addEventListener(‘mouseup’, stopDrawing);
canvas.addEventListener(‘mouseleave’, stopDrawing);

canvas.addEventListener(‘touchstart’, (e) => {
e.preventDefault();
const touch = e.touches[0];
const rect = canvas.getBoundingClientRect();
isDrawing = true;
ctx.beginPath();
ctx.moveTo(touch.clientX – rect.left, touch.clientY – rect.top);
});

canvas.addEventListener(‘touchmove’, (e) => {
e.preventDefault();
if (!isDrawing) return;
const touch = e.touches[0];
const rect = canvas.getBoundingClientRect();
ctx.lineTo(touch.clientX – rect.left, touch.clientY – rect.top);
ctx.strokeStyle = ‘#333’;
ctx.lineWidth = 2;
ctx.stroke();
});

canvas.addEventListener(‘touchend’, () => {
isDrawing = false;
});

window.addEventListener(‘resize’, resizeCanvas);
resizeCanvas();
</script>
</body>
</html>

Note – Keyword Search In Google

  • ऑनलाइन सिग्नेचर (Online Signature)
  • डिजीटल सिग्नेचर कैसे बनाएं
  • डिजीटल टूल्स निशुल्क

1 thought on “Create Online Digital Signature Maker”

  1. Pingback: Create Stunning Text Styles Ultimate Font Generator -

Leave a Comment