<!DOCTYPE html> <html> <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> </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>