2025-01-14 23:30:21 -05:00
<!DOCTYPE html>
< html lang = "en" >
2025-01-14 13:17:55 -05:00
< head >
< title > How To Use - Open Signature Generator< / title >
< meta name = "Open Signature Generator" / >
< meta name = "description" content = "Generate and verify document signatures for free!" / >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1, minimum-scale=1" / >
< / head >
< body >
< div id = "title-container" >
< h1 > How To Use< / h1 >
< / div >
< div id = "how-to-container" >
< h2 > Creating Your Signature< / h2 >
< ul >
< li > Enter your name in the text field< / li >
< li > Choose a font style from the dropdown menu< / li >
< li > Toggle 'Invert' if you need a white signature on dark background< / li >
< li > Click 'Go!' to generate your signature< / li >
< / ul >
< h2 > Using Your Signature< / h2 >
< ul >
< li > Your signature will automatically download< / li >
< li > Click the signature to copy it to your clipboard< / li >
< li > Paste or drag-and-drop the signature into your document. You can use LibreOffice, or any other document editor!< / li >
< li > Resize the signature image and place it on the signature line in your document< / li >
< li > Print your signed document or save it as a PDF< / li >
< li > You or the document recipient can use the QR code to verify the signature's authenticity< / li >
< / ul >
< h2 > Verification< / h2 >
< ul >
< li > Use the QR code or provided URL< / li >
< li > Check the timestamp and original details from when the signature was registered< / li >
< li > Compare the displayed signature with the one in your document, they should be pixel-perfect identical< / li >
< / ul >
2025-01-15 00:56:10 -05:00
< h2 > Are these signatures legally binding?< / h2 >
< p > They absolutely can be! Read more about it < a href = "https://en.wikipedia.org/wiki/Electronic_Signatures_in_Global_and_National_Commerce_Act" > here< / a > < / p >
< p > Under the ESIGN Act, some types of documents CAN NOT BE SIGNED ELECTRONICALLY. This includes:< / p >
< ul >
< li > Marriage, Birth, and Death certificates< / li >
< li > Wills, codicils, and testamentary trusts< / li >
2025-01-15 17:20:14 -05:00
< li > Depending on your state, "DNR" orders, general powers of attorney, and any document which specifies a physical signature.< / li >
2025-01-15 00:56:10 -05:00
< / ul >
< p > In summary (for the USA) all ESIGN Act requirements can be met:< / p >
< ul >
< li > By generating the signature, and choosing to use it in a document, you are demonstrating intent to sign.< / li >
< li > By using the signature you are consenting to do business electronically with those you are signing with.< / li >
< li > The Opt-out clause is not applicable to generating a signature, since you can always choose not to use it.< / li >
< li > All signers must recieve "Fully Executed" and fully signed copies of the document for the signature to be legally binding.< / li >
< li > You may be required to retain digital records of the document under the ESIGN Act.< / li >
< / ul >
2025-01-14 13:17:55 -05:00
< / div >
< div class = "button-container" >
< a href = "/" class = "button" > Back to Generator< / a >
< / div >
< div id = "animated-background" >
< svg viewBox = "0 0 100 100" > < / svg >
< / div >
< / body >
< script >
let animmatedBackground = document.getElementById('animated-background');
function stopAnimations() {
const animations = animatedBackground.querySelectorAll('animate, animateTransform');
animations.forEach(animation => {
animation.style.setProperty('animation-play-state', 'paused');
});
}
document.addEventListener('DOMContentLoaded', () => {
// Stop animations after 5 minutes to save resources
setTimeout(stopAnimations, 300 * 1000);
});
< / script >
< style >
body {
background-color: #000000;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: Arial, sans-serif;
}
#title-container {
position: absolute;
width: 100%;
top: 20px;
z-index: 2;
text-align: center;
}
#title-container h1 {
font-size: clamp(24px, calc(6vw + 8px), 64px);
margin-top: 20px;
color: white;
text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);
}
#how-to-container {
background-color: rgb(236, 236, 234);
width: 70%;
max-width: 600px;
margin: 120px auto 40px auto;
padding: 40px;
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
position: relative;
z-index: 1;
font-size: 1.0em;
}
.button-container {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.button {
padding: 10px 20px;
background-color: #1f4e82;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.button:hover {
background-color: #095fbf;
}
#animated-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: clip;
}
@property --a {
syntax: '< color > ';
inherits: false;
initial-value: #453f53;
}
@property --b {
syntax: '< color > ';
inherits: false;
initial-value: #fff;
}
@property --c {
syntax: '< color > ';
inherits: false;
initial-value: #777;
}
#animated-background svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--pattern), var(--map, linear-gradient(90deg, #888, #fff));
background-blend-mode: multiply;
filter: contrast(5) blur(20px) saturate(35%) brightness(0.4);
mix-blend-mode: darken;
--pattern: repeating-radial-gradient(circle, var(--a), var(--b), var(--c) 15em);
/* We use steps here to limit framerate to reduce CPU usage displaying the animation*/
/* Because it is a slowly changing background, a low framerate does not impact apparent smoothness of the animation */
animation: bganimation 120s forwards steps(1200) infinite;
transform: translateX(35%) translateY(75%) scale(4.5)
}
@keyframes bganimation {
0% { --a: #453f53;
--b: #fff;
--c: #777;
transform: translateX(35%) translateY(75%) scale(4.5)}
33% { --a: #ce8083;
--b: #ac8cbd;
--c: #3b1c80;
transform: rotate(-10deg) scale(4.0,3.5) translateX(15%) translateY(25%)}
66% { --a: #309385;
--b: #5aa8fb;
--c: #866849;
transform: rotate(10deg) scale(4.5,3.5) translateX(25%) translateY(-15%)}
100% { --a: #453f53;
--b: #fff;
--c: #777;
transform: translateX(35%) translateY(75%) scale(4.5)}
}
< / style >
< / html >
