<!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>