A fresh start before publishing

.gitignore

@@ -0,0 +1,4 @@
+signatures.db
+__pycache__/
+*.pyc
+server.log

LICENSE.md

@@ -0,0 +1,27 @@
+# Custom MIT-Based License with Additional Terms
+
+This software is licensed under the MIT License with Additional Terms.
+This is NOT the standard MIT License.
+
+## MIT License
+
+Copyright (c) 2025 Jeremy Karst
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+## Additional Terms
+
+In addition to the terms and conditions of the MIT License above, the following terms apply:
+
+1. Project Identity Protection
+   Any redistribution, fork, or modified version of this software must not use the name "Open Signature Generator", either alone or as part of another name, except to indicate that the work is derived from or based on this software. This restriction includes, but is not limited to, public hosting of modified versions and derivative works.
+
+2. Scope of Additional Terms
+   These Additional Terms are intended to supplement, not replace, the permissions and restrictions specified in the MIT License above. In the event of any conflict between these Additional Terms and the MIT License, these Additional Terms shall take precedence.
+
+3. Severability
+   If any portion of these Additional Terms is found to be invalid or unenforceable, the remaining portions shall remain in effect.

benchmark.py

@@ -0,0 +1,160 @@
+import time
+import requests
+import statistics
+from concurrent.futures import ThreadPoolExecutor
+import argparse
+from rich.console import Console
+from rich.table import Table
+from rich.progress import Progress
+import random
+
+def make_request(base_url, session):
+    """Make requests to test the full signature flow"""
+    start_time = time.time()
+    try:
+        # Fetch fonts
+        fonts_response = session.get(f"{base_url}/fonts")
+        fonts_response.raise_for_status()
+        available_fonts = list(fonts_response.json().keys())
+
+        # 1. Register a new signature
+        name = f"Test User {random.randint(100000000, 999999999)}"
+        register_data = {
+            'name': name,
+            'font': random.choice(available_fonts),
+            'timezone': '0',
+            'invert': 'false'
+        }
+        register_response = session.get(f"{base_url}/register", params=register_data)
+        register_response.raise_for_status()
+        signature_hash = register_response.text
+        register_time = time.time()
+
+        # 2. Verify the signature
+        verify_response = session.get(f"{base_url}/verify/{signature_hash}")
+        verify_response.raise_for_status()
+        verify_time = time.time()
+
+        # 3. Get the signature image
+        image_response = session.get(f"{base_url}/images/{signature_hash}.png")
+        image_response.raise_for_status()
+        image_time = time.time()
+
+        return {
+            'register_time': register_time - start_time,
+            'register_status': register_response.status_code,
+            'verify_time': verify_time - register_time,
+            'verify_status': verify_response.status_code,
+            'image_time': image_time - verify_time,
+            'image_status': image_response.status_code
+        }
+    except requests.RequestException as e:
+        print(f"Request failed: {e}")
+        return None
+
+def run_benchmark(base_url, num_threads, requests_per_thread, progress=None):
+    """Run benchmark with specified number of threads"""
+    session = requests.Session()
+    register_times = []
+    verify_times = []
+    image_times = []
+    errors = 0
+    
+    def worker():
+        for _ in range(requests_per_thread):
+            result = make_request(base_url, session)
+            if result is None:
+                nonlocal errors
+                errors += 1
+            else:
+                register_times.append(result['register_time'])
+                verify_times.append(result['verify_time'])
+                image_times.append(result['image_time'])
+            if progress:
+                progress.update(task, advance=1)
+
+    # Create and start threads
+    with Progress() as progress:
+        task = progress.add_task(f"[cyan]Running {num_threads} threads...", total=num_threads * requests_per_thread)
+        with ThreadPoolExecutor(max_workers=num_threads) as executor:
+            futures = [executor.submit(worker) for _ in range(num_threads)]
+            for future in futures:
+                future.result()
+
+    if not image_times:
+        return None
+
+    return {
+        'successful_register_requests': len(register_times),
+        'successful_verify_requests': len(verify_times),
+        'successful_image_requests': len(image_times),
+        'failed_requests': errors,
+        'median_register_response_time': statistics.median(register_times),
+        'median_verify_response_time': statistics.median(verify_times),
+        'median_image_response_time': statistics.median(image_times),
+        'min_response_time': min(register_times + verify_times + image_times),
+        'max_response_time': max(register_times + verify_times + image_times),
+        'total_time': sum(register_times + verify_times + image_times)
+    }
+
+def main():
+    parser = argparse.ArgumentParser(description='Benchmark web server performance')
+    parser.add_argument('--url', default='http://localhost:8080', help='Base URL of the server')
+    parser.add_argument('--start-threads', type=int, default=1, help='Starting number of threads')
+    parser.add_argument('--max-threads', type=int, default=100, help='Maximum number of threads')
+    parser.add_argument('--requests-per-thread', type=int, default=20, help='Number of requests per thread')
+    
+    args = parser.parse_args()
+    
+    console = Console()
+    results_table = Table(show_header=True, header_style="bold cyan")
+    results_table.add_column("Threads")
+    results_table.add_column("Total Requests")
+    results_table.add_column("Success Rate")
+    results_table.add_column("Median Response (s)")
+    results_table.add_column("Req/sec")
+
+    console.print(f"\n[bold green]Starting benchmark against {args.url}[/bold green]")
+    console.print("[yellow]Note: Each request includes register, verify, and image generation[/yellow]\n")
+
+    # Test thread counts from start to max, doubling every step
+    assert args.start_threads > 0, "Starting threads must be greater than 0"
+    thread_counts = [args.start_threads]
+    while thread_counts[-1] < args.max_threads:
+        thread_counts.append(thread_counts[-1] * 2)
+    if thread_counts[-1] > args.max_threads:
+        thread_counts[-1] = args.max_threads
+
+    for num_threads in thread_counts:
+        console.print(f"[yellow]Testing with {num_threads} threads...[/yellow]")
+        
+        start_time = time.time()
+        result = run_benchmark(args.url, num_threads, args.requests_per_thread)
+        end_time = time.time()
+        
+        if result:
+            register_success_rate = (result['successful_register_requests'] / (num_threads * args.requests_per_thread)) * 100
+            verify_success_rate = (result['successful_verify_requests'] / (num_threads * args.requests_per_thread)) * 100
+            image_success_rate = (result['successful_image_requests'] / (num_threads * args.requests_per_thread)) * 100
+            requests_per_second = (result['successful_register_requests'] + result['successful_verify_requests'] + result['successful_image_requests']) / (end_time - start_time)
+            results_table.add_row(
+                str(num_threads),
+                str(num_threads * args.requests_per_thread * 3),
+                f"{register_success_rate:.1f}% / {verify_success_rate:.1f}% / {image_success_rate:.1f}%",
+                f"{result['median_register_response_time']:.3f} / {result['median_verify_response_time']:.3f} / {result['median_image_response_time']:.3f}",
+                f"{requests_per_second:.1f}"
+            )
+        else:
+            results_table.add_row(
+                str(num_threads),
+                str(num_threads * args.requests_per_thread),
+                "0%",
+                "N/A",
+                "N/A"
+            )
+
+    console.print("\n[bold]Benchmark Results:[/bold]")
+    console.print(results_table)
+
+if __name__ == "__main__":
+    main() 

compose.yaml

@@ -0,0 +1,21 @@
+name: open-signature-generator
+services:
+  osg:
+    build:
+      context: .
+      dockerfile: osg.dockerfile
+      
+    image: osg:20 # <--automate this number change to trigger stack redeploy.
+      
+    environment:
+      DOCKER: "true"
+      HOSTPREFIX: "osg.jkdev.org"
+      
+    ports:
+      - "8312:8080"
+      
+    volumes:
+      - sqlite-database:/data
+
+volumes:
+  sqlite-database:

create_docker_image.bat

@@ -0,0 +1,2 @@
+docker build -f ./osg.dockerfile -t python-osg .
+pause

osg.dockerfile

@@ -0,0 +1,8 @@
+FROM python:3.12-slim
+ADD server.py .
+ADD sha_sign.py .
+COPY web_content/ /web_content/
+COPY requirements.txt /requirements.txt
+RUN pip install -r requirements.txt
+CMD ["python", "server.py"]
+EXPOSE 8080

requirements.txt

@@ -0,0 +1,6 @@
+CherryPy==18.9.0
+cryptography==42.0.5
+fonttools==4.50.0
+geocoder==1.38.1
+pillow==10.2.0
+qrcode==8.0

server.py

@@ -0,0 +1,410 @@
+import os
+import sqlite3
+import time
+import threading
+import datetime
+import io
+import json
+import logging
+from logging.handlers import RotatingFileHandler
+from collections import deque
+from threading import Timer
+import multiprocessing
+from multiprocessing import Pool
+
+import cherrypy
+from cherrypy.lib import file_generator
+from fontTools import ttLib
+import geocoder
+
+from sha_sign import hash_text, generate_signature_image
+
+
+def open_db(path):
+    db_lock = threading.Lock()
+    if not os.path.exists(path):
+        conn = sqlite3.connect(path, check_same_thread=False, cached_statements=0, autocommit = False)
+        conn.execute("CREATE TABLE signatures (hash TEXT PRIMARY KEY, name TEXT, time INTEGER, timezone INTEGER, font TEXT, invert BOOLEAN, identity TEXT)")
+        conn.commit()
+    else:
+        conn = sqlite3.connect(path, check_same_thread=False, cached_statements=0)
+    return conn, db_lock
+
+
+def run_server(host_ip, host_port, host_prefix, static_dir, database_connection, db_lock, font_data, production=False):
+    logger = logging.getLogger(__name__)
+    static_dir = os.path.abspath(static_dir)
+    
+    # Create process pool for signature generation
+    process_pool = Pool(processes=multiprocessing.cpu_count() // 2)
+
+    # Define web server
+    root_server_config= {
+        '/': {
+                'tools.staticdir.on': True,
+                'tools.staticdir.dir': static_dir,
+                'tools.staticdir.index': 'index.html',
+            },
+        '/images': {
+            'tools.caching.on': True,
+            'tools.caching.delay': 60,
+        }
+    }
+
+    global_server_config = {
+            'server.socket_host': host_ip,
+            'server.socket_port': host_port,
+            'server.max_request_body_size': 10*1024,
+            'server.socket_timeout': 10,
+            'response.timeout': 30,
+            'tools.gzip.on': True,
+            'tools.gzip.mime_types': ['text/*', 'application/*'],
+            'tools.encode.text_only': False
+        }
+    
+    if production:
+        global_server_config['environment'] = 'production'
+    
+    cherrypy.config.update(global_server_config)
+
+    def error_page_404(status, message, traceback, version):
+        return "Error 404: Page Not Found!"
+    cherrypy.config.update({'error_page.404': error_page_404})
+
+    class RateLimiter:
+        def __init__(self, requests_per_interval=20, limit_interval = 120, cleanup_interval=300):
+            assert cleanup_interval > limit_interval, "Cleanup interval must be greater than limit interval"
+            self.requests_per_minute = requests_per_interval
+            self.window = limit_interval  # seconds
+            self.cleanup_interval = cleanup_interval  # cleanup every 5 minutes
+            self.requests = {}  # ip -> deque of timestamps
+            self.start_cleanup_timer()
+        
+        def start_cleanup_timer(self):
+            """Start periodic cleanup of old IP records"""
+            Timer(self.cleanup_interval, self._cleanup_old_records).start()
+        
+        def _cleanup_old_records(self):
+            """Remove IPs that haven't made requests in the last window"""
+            current_time = time.time()
+            # Create list of IPs to remove to avoid runtime dictionary modification
+            to_remove = [
+                ip for ip, timestamps in self.requests.items()
+                if not timestamps or current_time - timestamps[-1] > self.window
+            ]
+            for ip in to_remove:
+                del self.requests[ip]
+            
+            # Restart cleanup timer
+            self.start_cleanup_timer()
+        
+        def is_rate_limited(self, ip):
+            if ip == '127.0.0.1':
+                return False
+            
+            current_time = time.time()
+            
+            # Initialize or get request deque for this IP
+            if ip not in self.requests:
+                self.requests[ip] = deque(maxlen=self.requests_per_minute)
+            
+            timestamps = self.requests[ip]
+            
+            # Remove timestamps outside the current window
+            while timestamps and current_time - timestamps[0] > self.window:
+                timestamps.popleft()
+            
+            # Check if rate limited
+            if len(timestamps) >= self.requests_per_minute:
+                return True
+            
+            # Add new request timestamp
+            timestamps.append(current_time)
+            return False
+
+    class RootServer(object):
+        rate_limiter = RateLimiter()
+
+        with open(os.path.join(static_dir, "verification.html"), "r") as f:
+            verification_html = f.read()
+        with open(os.path.join(static_dir, "howto.html"), "r") as f:
+            howto_html = f.read()
+        with open(os.path.join(static_dir, "privacy.html"), "r") as f:
+            privacy_html = f.read()
+
+        @staticmethod
+        def _get_ip(request):
+            if 'Cf-Connecting-Ip' in request.headers:
+                logger.debug("Using Cloudflare IP: %s", request.headers['Cf-Connecting-Ip'])
+                ip = request.headers['CF-Connecting-IP']
+            elif 'X-Forwarded-For' in request.headers:
+                logger.debug("Using X-Forwarded-For IP: %s", request.headers['X-Forwarded-For'])
+                ip = request.headers['X-Forwarded-For']
+            else:
+                logger.debug("Using Remote IP: %s", request.remote.ip)
+                ip = request.remote.ip
+            return ip
+
+        @cherrypy.expose
+        def register(self, name: str, font: str, timezone: str = '0', invert: str = 'false'):
+            request = cherrypy.request
+            ip = self._get_ip(request)
+
+            if self.rate_limiter.is_rate_limited(ip):
+                raise cherrypy.HTTPError(429, "Too Many Requests, try again later.")
+            
+            # Validate inputs
+            if len(name) <= 0 or len(name) > 255:
+                raise cherrypy.HTTPError(400, "Bad Request, invalid signature name")
+            # Ensure name can be utf-8 encoded
+            try:
+                name.encode('utf-8')
+            except UnicodeEncodeError:
+                raise cherrypy.HTTPError(400, "Bad Request, invalid signature name")
+            if font not in font_data:
+                raise cherrypy.HTTPError(400, "Bad Request, invalid font name")
+            try:
+                timezone = int(timezone)
+            except ValueError:
+                raise cherrypy.HTTPError(400, "Bad Request, invalid timezone")
+            if timezone < -12*60 or timezone > 14*60:
+                raise cherrypy.HTTPError(400, "Bad Request, invalid timezone")
+            if invert.lower() not in ['true', 'false']:
+                raise cherrypy.HTTPError(400, "Bad Request, invalid invert value")
+            else:
+                try:
+                    invert = invert.lower() == 'true'
+                except ValueError:
+                    raise cherrypy.HTTPError(400, "Bad Request, invalid invert value")
+            
+            # CamelCase the name if it's not already
+            name_parts = name.split(' ')
+            for i, part in enumerate(name_parts): 
+                if part[0].islower():
+                    name_parts[i] = part[0].upper() + part[1:]
+            name = ' '.join(name_parts)
+
+            # Get user agent and ip for later signature verification
+            user_agent = request.headers['User-Agent']
+
+            # Try to get user location
+            try:
+                if ip == '127.0.0.1':
+                    raise Exception("Localhost IP detected, skipping location lookup")
+                location = geocoder.ip(ip)
+                if location.lat is None or location.lng is None:
+                    latlon = [0.0, 0.0]
+                else:
+                    latlon = [location.lat, location.lng]
+                if location.org is None:
+                    provider = 'None Found'
+                else:
+                    provider = location.org
+                if location.address == "":
+                    address = 'None Found'
+                else:
+                    address = location.address
+            except Exception as e:
+                latlon = [0.0, 0.0]
+                address = 'None Found'
+                provider = 'None Found'
+
+            # Get current unix time for signature timestamp
+            unix_time = int(time.time())
+
+            # Generate signature hash
+            hash_id = hash_text(f"{name}{unix_time}")
+
+            # Sanity check hash length, in theory there is a small chance the hash will be short since we prune '=' padding
+            if len(hash_id) < 8:
+                raise cherrypy.HTTPError(500, "Internal Server Error, hash generation failed")
+            
+            identity = json.dumps({ # This shouldn't be able to fail since geocoder's api is stable and returns stringifyable data
+                'ip': ip,
+                'useragent': user_agent,
+                'latlon': latlon,
+                'address': address,
+                'provider': provider
+            }) 
+            # Insert signature into database
+            with db_lock:
+                try:
+                    database_connection.execute("INSERT INTO signatures (hash, name, time, timezone, font, invert, identity) VALUES (?, ?, ?, ?, ?, ?, ?)", (hash_id, name, unix_time, timezone, font, invert, identity))
+                    database_connection.commit()
+                except Exception as e:
+                    logger.error("Error inserting signature into database: %s", e)
+                    raise cherrypy.HTTPError(500, "Internal Server Error, failed to insert signature into database")
+
+            return hash_id
+        
+        @cherrypy.expose
+        def verify(self, *args):
+            request = cherrypy.request
+            ip = self._get_ip(request)
+
+            if self.rate_limiter.is_rate_limited(ip):
+                raise cherrypy.HTTPError(429, "Too Many Requests, try again later.")
+            
+            if len(args) == 1:
+                id = args[0]
+                if len(id) == 0 or len(id) > 64:
+                    raise cherrypy.HTTPError(400, "Bad Request, invalid signature id")
+                try:
+                    id.encode('utf-8')
+                except UnicodeEncodeError:
+                    raise cherrypy.HTTPError(400, "Bad Request, invalid signature id")
+
+                # Get signature data from database
+                cursor = database_connection.cursor()
+                cursor.execute("SELECT name, time, timezone, font, invert, identity FROM signatures WHERE hash = ?", (id,))
+                result = cursor.fetchone()
+                if result is None:
+                    raise cherrypy.HTTPError(404, "Not Found")
+                name, time, timezone, font, invert, identity = result
+
+                return json.dumps({
+                    "name": name,
+                    "time": time,
+                    "timezone": timezone,
+                    "font": font,
+                    "invert": invert,
+                    "identity": json.loads(identity)
+                })
+
+            else: # Redirect to verification page
+                raise cherrypy.HTTPRedirect(f"{host_prefix}/verify/{id}")
+            
+        @cherrypy.expose
+        def v(self, *args):
+            request = cherrypy.request
+            ip = self._get_ip(request)
+
+            if self.rate_limiter.is_rate_limited(ip):
+                raise cherrypy.HTTPError(429, "Too Many Requests, try again later.")
+                
+            if len(args) == 1:
+                id = args[0]
+                if len(id) == 0 or len(id) > 64:
+                    raise cherrypy.HTTPError(400, "Bad Request, invalid signature id")
+                try:
+                    id.encode('utf-8')
+                except UnicodeEncodeError:
+                    raise cherrypy.HTTPError(400, "Bad Request, invalid signature id")
+                
+                if 'environment' in global_server_config and global_server_config['environment'] == 'production':
+                    return self.verification_html
+                else: # If we are debugging, read the newest verification.html file from disk
+                    with open(os.path.join(static_dir, "verification.html"), "r") as f:
+                        verification_html = f.read()
+                    return verification_html
+            else:
+                raise cherrypy.HTTPRedirect(f"{host_prefix}")
+        
+        @cherrypy.expose
+        def fonts(self):
+            return json.dumps(font_data)
+
+
+        @cherrypy.expose
+        def images(self, *args):
+            request = cherrypy.request
+            ip = self._get_ip(request)
+
+            if self.rate_limiter.is_rate_limited(ip):
+                raise cherrypy.HTTPError(429, "Too Many Requests, try again later.")
+            
+            if len(args) == 1:
+                hash_id = args[0]
+                if hash_id.endswith('.png'):
+                    hash_id = hash_id[:-4]
+                try:
+                    hash_id.encode('utf-8')
+                except UnicodeEncodeError:
+                    raise cherrypy.HTTPError(400, "Bad Request, invalid signature id")
+                qr_url = f"{host_prefix}/v/{hash_id}"
+                cursor = database_connection.cursor()
+                cursor.execute("SELECT name, time, timezone, font, invert FROM signatures WHERE hash = ?", (hash_id,))
+                result = cursor.fetchone()
+                if result is None:
+                    raise cherrypy.HTTPError(404, "Not Found")
+                name, time, timezone, font, invert = result
+
+                timezone = datetime.timezone(datetime.timedelta(minutes=timezone))
+                sig_font_path = os.path.join(static_dir, "fonts", font_data[font])
+                note_font_path = os.path.join(static_dir, "fonts", "Steelfish.ttf")
+
+                # Offload image generation to process pool
+                try:
+                    sig_image = process_pool.apply(
+                        generate_signature_image,
+                        (name, time, timezone, qr_url, sig_font_path, note_font_path, invert)
+                    )
+                    buffer = io.BytesIO()
+                    sig_image.save(buffer, format="PNG")
+                    buffer.seek(0)
+                    return file_generator(buffer)
+                except Exception as e:
+                    logger.error("Error generating signature image: %s", e)
+                    raise cherrypy.HTTPError(500, "Internal Server Error")
+            else:
+                raise cherrypy.HTTPError(404, "Not Found")
+
+        @cherrypy.expose
+        def howto(self):
+            if 'environment' in global_server_config and global_server_config['environment'] == 'production':
+                return self.howto_html
+            else:  # If we are debugging, read the newest file from disk
+                with open(os.path.join(static_dir, "howto.html"), "r") as f:
+                    howto_html = f.read()
+                return howto_html
+
+        @cherrypy.expose
+        def privacy(self):
+            if 'environment' in global_server_config and global_server_config['environment'] == 'production':
+                return self.privacy_html
+            else:  # If we are debugging, read the newest file from disk
+                with open(os.path.join(static_dir, "privacy.html"), "r") as f:
+                    privacy_html = f.read()
+                return privacy_html
+    
+    logger.info("Starting server on %s:%s", host_ip, host_port)
+    cherrypy.quickstart(RootServer(), config=root_server_config)
+    
+
+if __name__ == "__main__":
+    socket_host = '0.0.0.0'
+    socket_port = 8080
+    static_dir = "./web_content/"
+    db_path = "./data/signatures.db"
+    host_prefix = "osg.jkdev.org"
+    production = True
+
+    if os.environ.get("DOCKER"):
+        host_prefix = os.environ.get("HOSTPREFIX")
+        production = True
+
+    os.makedirs(os.path.dirname(db_path), exist_ok=True)
+    database_connection, db_lock = open_db(db_path)
+
+    font_data = {}
+    for file in os.listdir(os.path.join(static_dir, "fonts")):
+        if file.endswith(".ttf"):
+            font = ttLib.TTFont(os.path.join(static_dir, "fonts", file))
+            font_name = font['name'].getDebugName(4)
+            if font_name.endswith(' Regular'):
+                font_name = font_name[:-8]
+            font_data[font_name] = file
+    # Remove Steelfish from font data, we only use it for the note font
+    font_data.pop('Steelfish')
+    logger = logging.getLogger(__name__)
+    logger.debug("Font data: %s", font_data)
+
+    handler = RotatingFileHandler('server.log', maxBytes=10*1024*1024, backupCount=5)
+
+    logging.basicConfig(
+        level=logging.INFO,
+        format='%(asctime)s - %(levelname)s - %(message)s',
+        handlers = [handler]
+    )
+
+    run_server(socket_host, socket_port, host_prefix, static_dir, database_connection, db_lock, font_data, production)

sha_sign.py

@@ -0,0 +1,132 @@
+import base64
+import time
+import datetime
+
+try:
+    import cryptography
+    import qrcode
+    import PIL
+    import pytz
+except ImportError:
+    import pip
+    pip.main(['install', 'cryptography', 'qrcode', 'Pillow'])
+
+from cryptography.hazmat.primitives import hashes
+import qrcode
+from qrcode.image.styledpil import StyledPilImage
+from qrcode.image.styles.moduledrawers.pil import CircleModuleDrawer
+from qrcode.image.styles.colormasks import RadialGradiantColorMask
+from PIL import Image, ImageDraw, ImageFont
+
+def hash_text(text: str) -> str:
+    message = text.encode('utf-8')
+    
+    hash_class = hashes.Hash(hashes.SHA256())
+    
+    hash_class.update(message)
+    signature = hash_class.finalize()
+
+    first_half = signature[:len(signature)//2]
+    second_half = signature[len(signature)//2:]
+
+    xored = bytes(a ^ b for a, b in zip(first_half, second_half))
+
+    b64bytes = base64.b64encode(xored).replace(b'+', b'-').replace(b'/', b'_').replace(b'=', b'')
+    b64str = b64bytes.decode('utf-8')
+
+    return b64str
+
+def generate_signature_image(sig_name: str, sig_time: int, sig_timezone: datetime.timezone, signature_url: str, sig_font_path: str, note_font_path: str, padding: int = 100, interspacing: int = 60, invert_colors: bool = False, gradient: bool = True):
+    start_time = time.perf_counter()
+    
+    # Create a datetime object from the sig_time and sig_timezone
+    sig_time = datetime.datetime.fromtimestamp(sig_time, sig_timezone)
+    datetime_time = time.perf_counter()
+
+    note_text = f"Digitally Signed by\n{sig_name}\n{sig_time.strftime('%Y-%m-%d %I:%M %p')}"
+
+    # QR code generation timing
+    # qr_start = time.perf_counter()
+    qr = qrcode.QRCode(
+        version=1,
+        error_correction=qrcode.constants.ERROR_CORRECT_L,
+        box_size=8,
+        border=0,
+    )
+    qr.add_data(signature_url)
+    if invert_colors:
+        if gradient:
+            qr_img = qr.make_image(fit=True, image_factory=StyledPilImage, module_drawer=CircleModuleDrawer(), color_mask=RadialGradiantColorMask(back_color=(0, 0, 0, 128), center_color=(245, 245, 245, 255), edge_color=(250, 250, 250, 255)))
+        else:
+            qr_img = qr.make_image(fit=True, image_factory=StyledPilImage, module_drawer=CircleModuleDrawer())
+    else:
+        if gradient:
+            qr_img = qr.make_image(fit=True, image_factory=StyledPilImage, module_drawer=CircleModuleDrawer(), color_mask=RadialGradiantColorMask(back_color=(255, 255, 255, 128), center_color=(10, 10, 150, 255), edge_color=(5, 5, 20, 255)))
+        else:
+            qr_img = qr.make_image(fit=True, image_factory=StyledPilImage, module_drawer=CircleModuleDrawer())
+    qr_size = qr_img.pixel_size
+    # qr_time = time.perf_counter()
+
+    # Text measurement timing
+    # text_start = time.perf_counter()
+    test_image = Image.new("RGBA", (2000, 1000), (0, 0, 0, 0))
+    sig_font = ImageFont.truetype(sig_font_path, 350)
+    sans_font = ImageFont.truetype(note_font_path, 80)
+    draw = ImageDraw.Draw(test_image)
+    sig_bbox = draw.textbbox((0, 0), sig_name, font=sig_font, anchor="ls") # (left, top, right, bottom)
+    note_bbox = draw.multiline_textbbox((0, 0), note_text, font=sans_font, anchor="ls") # (left, top, right, bottom)
+    # text_measure_time = time.perf_counter()
+
+    sig_width = sig_bbox[2] - sig_bbox[0]
+    sig_height = sig_bbox[3] - sig_bbox[1]
+    note_width = note_bbox[2] - note_bbox[0]
+    note_height = note_bbox[3] - note_bbox[1]
+
+    total_image_width = padding + sig_width + interspacing + note_width + interspacing + qr_size + padding
+    total_image_height = padding + max(sig_height, note_height) + padding
+    v_anchor = total_image_height - sig_bbox[3] - padding
+
+    if invert_colors:
+        sig_color = "white"
+        note_color = "white"
+        background_color = (255, 255, 255, 0)
+    else:
+        sig_color = "black"
+        note_color = "black"
+        background_color = (0, 0, 0, 0)
+
+    image = Image.new("RGBA", (total_image_width, total_image_height), background_color)
+    draw = ImageDraw.Draw(image)
+    draw.text((padding - sig_bbox[0], v_anchor), sig_name, font=sig_font, fill=sig_color, anchor="ls")
+    draw.text((padding + sig_width + interspacing - note_bbox[0], v_anchor - note_bbox[3]), note_text, font=sans_font, fill=note_color, anchor="ls")
+    image.paste(qr_img, (padding + sig_width + interspacing + note_width + interspacing, v_anchor - qr_size))
+
+    # final_time = time.perf_counter()
+    
+    # # Print timing information
+    # print(f"Signature Image Generation Timing:")
+    # print(f"  DateTime processing: {(datetime_time - start_time)*1000:.2f}ms")
+    # print(f"  QR code generation: {(qr_time - qr_start)*1000:.2f}ms")
+    # print(f"  Text measurement: {(text_measure_time - text_start)*1000:.2f}ms")
+    # print(f"  Final image composition: {(final_time - text_measure_time)*1000:.2f}ms")
+    # print(f"  Total time: {(final_time - start_time)*1000:.2f}ms")
+    
+    return image
+
+
+if __name__ == "__main__":
+    sig_name = "Yöùr Ñamé Herê"
+    sig_font_path = "./web_content/fonts/HerrVonMuellerhoff.ttf"
+    note_font_path = "./web_content/fonts/Steelfish.ttf"
+
+    timestamp = int(time.time())
+    timezone = datetime.datetime.now(datetime.timezone.utc).astimezone().tzinfo
+    sig_text = f"{sig_name}{timestamp}"
+
+    hash_id = hash_text(sig_text)
+
+    signature_data = f"osg.jkdev.org/v/{hash_id}"
+
+    image = generate_signature_image(sig_name, timestamp, timezone, signature_data, sig_font_path, note_font_path, invert_colors=False, gradient=True)
+
+    image.save(f"Signature {hash_id} {timestamp}.png", optimize=True, compress_level=9)

web_content/fonts/Browse Fonts - Google Fonts.url

@@ -0,0 +1,6 @@
+[InternetShortcut]
+URL=https://fonts.google.com/
+IDList=
+HotKey=0
+IconFile=C:\Users\Jeremy\AppData\Local\Mozilla\Firefox\Profiles\6t1edzxq.default-release\shortcutCache\P1203vbMVqfejXjLF2mJYsLidUWdlROn4HMsI3cW9bI=.ico
+IconIndex=0

web_content/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2010, Haley Fiege (haley@kingdomofawesome.com)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

web_content/howto.html

@@ -0,0 +1,192 @@
+<!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> 

web_content/index.html

@@ -0,0 +1,689 @@
+<!DOCTYPE html>
+<head>
+    <title>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>
+            Open Signature Generator
+        </h1>
+    </div>
+
+    <div id="document-container">
+        <div class="document-content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
+        </div>
+        
+        <div class="signature-area">
+            <img src="example-signature.png" class="signature-image" alt="Signature" />
+            <img src="example-signature-inverted.png" class="signature-image signature-image-inverted hidden" alt="Signature" />
+            <div id="signature-line"></div>
+            <svg class="copy-hint-arrow hidden" viewBox="0 -2 16 18">
+                <path fill-rule="evenodd" d="M14.854 4.854a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 4H3.5A2.5 2.5 0 0 0 1 6.5v8a.5.5 0 0 0 1 0v-8A1.5 1.5 0 0 1 3.5 5h9.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4z"/>
+            </svg>
+            <div class="copy-hint-text hidden">Your Signature is Downloaded!<br>Click to Copy to Clipboard</div>
+        </div>
+    </div>
+
+    <div id="sig-ver-url-container" class="sig-ver-url-container hidden">
+        <label for="sig-ver-url">QR Code URL:</label>
+        <input type="text" id="sig-ver-url" class="sig-ver-url" readonly>
+    </div>
+
+    <div class="controls">
+        <input type="text" id="name-input" placeholder="Enter signature name" />
+        <div class="font-select-container">
+            <div id="font-select-display" class="font-select-display">Select Font</div>
+            <div id="font-options" class="font-options hidden"></div>
+        </div>
+        <input type="checkbox" id="invert-toggle">
+        <label for="invert-toggle">Invert</label>
+        <button id="go-button" class="go-button">Go!</button>
+    </div>
+
+    <div class="button-container">
+        <a href="/howto" class="button">How To Use OSG</a>
+        <a href="/privacy" class="button">Privacy Policy</a>
+    </div>
+
+    <div id="animated-background">
+        <svg viewBox="0 0 100 100"></svg>
+    </div>
+</body>
+
+<script>
+    const nameInput = document.getElementById('name-input');
+    const fontSelectDisplay = document.getElementById('font-select-display');
+    const signatureImage = document.querySelector('.signature-image');
+    const signatureImageInverted = document.querySelector('.signature-image-inverted');
+    const invertToggle = document.getElementById('invert-toggle');
+    const goButton = document.getElementById('go-button');
+    const documentContainer = document.getElementById('document-container');
+    const documentContent = document.querySelector('.document-content');
+    const signatureLine = document.getElementById('signature-line');
+    const animatedBackground = document.getElementById('animated-background');
+    const sigVerUrlContainer = document.getElementById('sig-ver-url-container');
+
+    function nameInputCallback() {
+        // Save signature name to local storage
+        localStorage.setItem('signatureName', nameInput.value);
+    }
+    nameInput.addEventListener('change', nameInputCallback);
+
+    function invertSignature() {   
+        if (invertToggle.checked) {
+            signatureImage.classList.add('hidden');
+            signatureImageInverted.classList.remove('hidden');
+            documentContainer.style.setProperty("background-color", "rgb(20, 20, 20)");
+            documentContent.style.setProperty("color", "white");
+            signatureLine.style.setProperty("border-color", "white");
+        } else {
+            signatureImage.classList.remove('hidden');
+            signatureImageInverted.classList.add('hidden');
+            documentContainer.style.setProperty("background-color", "rgb(236, 236, 234)");
+            documentContent.style.setProperty("color", "black");
+            signatureLine.style.setProperty("border-color", "black");
+        }
+    }
+
+    function copyImageToClipboard(image) {
+        fetch(image.src).then(response => {
+            response.blob().then(blob => {
+                navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);
+            });
+        });
+    }
+    signatureImage.addEventListener('click', () => {
+        copyImageToClipboard(signatureImage);
+    });
+    signatureImageInverted.addEventListener('click', () => {
+        copyImageToClipboard(signatureImageInverted);
+    });
+
+    invertToggle.addEventListener('change', invertSignature);
+    goButton.addEventListener('click', () => {
+        var name = nameInput.value.trim(); // Trim whitespace from name
+        
+        // Add validation for empty name
+        if (!name) {
+            nameInput.classList.add('error-shake');
+            setTimeout(() => nameInput.classList.remove('error-shake'), 600);
+            return;
+        }
+
+        var font = fontSelectDisplay.innerHTML;
+        var invert = invertToggle.checked;
+        var timezone = -1 * new Date().getTimezoneOffset();
+
+        // Hide the copy hint elements if they are not already hidden
+        document.querySelector('.copy-hint-arrow').classList.add('hidden');
+        document.querySelector('.copy-hint-text').classList.add('hidden');
+
+        // Clear the sig-ver-url container
+        sigVerUrlContainer.value = '';
+        sigVerUrlContainer.classList.add('hidden');
+
+        // Disable the go button
+        goButton.disabled = true;
+
+        // Show a progress spinner
+        goButton.innerHTML = 'Generating...';
+        goButton.classList.add('go-spinner');
+
+        fetch(`register?name=${encodeURIComponent(name)}&font=${encodeURIComponent(font)}&timezone=${encodeURIComponent(timezone)}&invert=${invert}`, {
+            method: 'GET',
+        })
+        .then(response => {
+            if (response.ok) {
+                let fetch_data = response.text();
+                fetch_data.then(image_id => {
+                    let image_url = `/images/${image_id}.png`;
+                    var image_element;
+                    if (!invertToggle.checked) {
+                        image_element = signatureImage;
+                    } else {
+                        image_element = signatureImageInverted;
+                    }
+                    image_element.src = image_url;
+                    
+                    // Display the image ID
+                    const urlInput = document.getElementById('sig-ver-url');
+                    let sig_ver_url = `${window.location.origin}/v/${image_id}`;
+                    urlInput.value = sig_ver_url;
+                    sigVerUrlContainer.classList.remove('hidden');
+
+                    // Add click-to-copy functionality
+                    urlInput.addEventListener('click', function() {
+                        this.select();
+                        navigator.clipboard.writeText(this.value);
+                    });
+                    
+                    // Wait until the image is loaded
+                    image_element.onload = () => {
+                        // Show the copy hint elements
+                        document.querySelector('.copy-hint-arrow').classList.remove('hidden');
+                        document.querySelector('.copy-hint-text').classList.remove('hidden');
+                        
+                        // Save image to disk
+                        let a = document.createElement('a');
+                        a.href = image_url;
+                        a.download = `Signature-${name}.png`;
+                        a.click();
+
+                        // Re-enable the go button
+                        goButton.disabled = false;
+                        goButton.innerHTML = 'Go!';
+                        goButton.classList.remove('go-spinner');
+                    };
+                });
+            } else {
+                if (response.status === 429) {
+                    // Notify the user that they are being rate limited
+                    alert('Too many requests, try again later.');
+                }
+                // Re-enable the go button
+                goButton.disabled = false;
+                goButton.innerHTML = 'Go!';
+                goButton.classList.remove('go-spinner');
+                throw new Error('Network response was not ok');
+            }
+        })
+        .catch(error => {
+            console.error('Error:', error);
+        });
+    });
+
+    // Add this function to load and parse fonts from server
+    async function loadFonts() {
+        const response = await fetch('/fonts');
+        const fontList = await response.json();
+        const fonts = Object.keys(fontList);
+        
+        const fontOptionsContainer = document.getElementById('font-options');
+        const fontDisplay = document.getElementById('font-select-display');
+        fontOptionsContainer.innerHTML = ''; // Clear existing options
+        
+        // Load each font and create styled divs
+        const fontLoadPromises = fonts.map(async (fontName) => {
+            const fontPath = `/fonts/${fontList[fontName]}`;
+            const font = new FontFace(fontName, `url(${fontPath})`);
+            
+            try {
+                await font.load();
+                document.fonts.add(font);
+                
+                // Create and style option div
+                const option = document.createElement('div');
+                option.className = 'font-option';
+                option.dataset.value = fontName;
+                option.textContent = fontName;
+                option.style.fontFamily = `"${font.family}"`;
+                
+                option.addEventListener('click', () => {
+                    fontDisplay.textContent = fontName;
+                    fontDisplay.style.fontFamily = `"${font.family}"`;
+                    fontOptionsContainer.classList.add('hidden');
+                    localStorage.setItem('selectedFont', fontName);
+                });
+
+                option.addEventListener('mouseenter', () => {
+                    fontDisplay.textContent = fontName;
+                    fontDisplay.style.fontFamily = `"${font.family}"`;
+                });
+                
+                fontOptionsContainer.appendChild(option);
+            } catch (err) {
+                console.error(`Failed to load font ${fontName}:`, err);
+            }
+        });
+
+        await Promise.all(fontLoadPromises);
+        
+        // Setup display click handler
+        fontDisplay.addEventListener('click', () => {
+            fontOptionsContainer.classList.remove('hidden');
+        });
+
+        // Close options when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!e.target.closest('.font-select-container')) {
+                fontOptionsContainer.classList.add('hidden');
+            }
+        });
+
+        // Set initial font
+        if (localStorage.getItem('selectedFont')) {
+            const savedFont = localStorage.getItem('selectedFont');
+            const option = fontOptionsContainer.querySelector(`[data-value="${savedFont}"]`);
+            if (option) {
+                option.click();
+            }
+        } else {
+            // Choose a random font
+            const options = fontOptionsContainer.querySelectorAll('.font-option');
+            const randomOption = options[Math.floor(Math.random() * options.length)];
+            if (randomOption) {
+                randomOption.click();
+            }
+        }
+    }
+
+    function stopAnimations() {
+        const animations = animatedBackground.querySelectorAll('animate, animateTransform');
+        animations.forEach(animation => {
+            animation.style.setProperty('animation-play-state', 'paused');
+        });
+    }
+
+    sigVerUrlContainer.addEventListener('click', () => {
+        sigVerUrlContainer.select();
+    });
+
+    // Modify your initialization code
+    document.addEventListener('DOMContentLoaded', () => {
+        // Fetch and populate fonts
+        loadFonts();
+        // Load signature name and font from local storage
+        nameInput.value = localStorage.getItem('signatureName') || '';
+        // 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);
+    }
+
+    #document-container {
+        background-color: rgb(236, 236, 234);
+        width: 70%;
+        max-width: 500px;
+        height: 300px;
+        margin: 100px auto 20px auto;
+        padding: 40px;
+        border-radius: 8px;
+        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
+        position: relative;
+        z-index: 1;
+        overflow: hidden;
+    }
+
+    .document-content {
+        position: absolute;
+        width: calc(100% - 80px);
+        bottom: 100px;
+        filter: blur(4px);
+        color: #181818;
+        line-height: 1.5;
+        font-size: 1em;
+    }
+
+    .signature-area{
+        position: absolute;
+        bottom: 0;
+        width: calc(100% - 80px);
+        height: 80px;
+        padding-top: 20px;
+        margin-bottom: 30px;
+    }
+
+    .document-content p {
+        text-indent: 4em;
+    }
+
+    .signature-image {
+        position: absolute;
+        filter: none;
+        text-align: left;
+        bottom: 0;
+        transform: translateY(20%);
+        width: 60%;
+        height: auto;
+        max-width: 500px;
+    }
+
+    /* .signature-image-inverted {
+    } */
+
+    #signature-line {
+        position: absolute;
+        border-bottom: 2px solid black;
+        width: 60%;
+        bottom: 0;
+    }
+
+    .controls {
+        position: relative;
+        bottom: auto;
+        margin: 20px auto;
+        background: rgba(255, 255, 255, 0.9);
+        padding: 10px 20px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        gap: 20px;
+        z-index: 2;
+        width: 80%;
+        max-width: 540px;
+        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
+    }
+
+    .controls input[type='text'] {
+        width: 30%;
+        margin: auto 0;
+    }
+
+    .controls select {
+        width: 30%;
+        margin: auto 0;
+    }
+
+    .controls input[type='checkbox'] {
+        width: 15px;
+        margin: auto 0;
+    }
+
+    .controls label {
+        width: 5%;
+        font-size: 0.8em;
+        position: relative;
+        left: -12px;
+        margin: auto 0;
+        display: flex;
+        align-items: center;
+    }
+
+    .controls button {
+        position: relative;
+        width: 20%;
+        margin: auto 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    input, select {
+        padding: 6px;
+        border-radius: 4px;
+        border: 1px solid #ccc;
+    }
+
+    .go-button {
+        margin: 10px;
+        font-weight: bold;
+        font-size: 1.1em;
+    }
+
+    .go-spinner {
+        padding: 2px;
+        border: 2px solid #ccc;
+        background: linear-gradient(90deg, #010030, #ac0000, #000000);
+        background-size: 200% 100%;
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        animation: gradient-sweep 2s linear infinite;
+        font-size: 0.9em;
+    }
+
+    @keyframes gradient-sweep {
+        0% { background-position: 200% 50%; }
+        100% { background-position: -100% 50%; }
+    }
+
+    .copy-hint-arrow {
+        position: absolute;
+        right: 40px;
+        top: 0px;
+        transform: scale(-0.5, -0.5);
+        pointer-events: none;
+        animation: fadeIn 2s ease-in ;
+        width: 30%;
+        height: 150%;
+    }
+
+    @keyframes animateStroke {
+        0% { stroke-dashoffset: 200;
+             opacity: 0; }
+        100% { stroke-dashoffset: 0;
+               opacity: 1; }
+    }
+
+    .copy-hint-arrow path {
+        stroke-dasharray: 200;
+        stroke: rgba(0,0,0,0.9);
+        stroke-width: 2;
+        fill: none;
+        animation: animateStroke 2s ease-in;
+    }
+
+    .copy-hint-arrow polygon {
+        fill: rgba(0,0,0,0.9);
+    }
+
+    .copy-hint-text {
+        position: absolute;
+        font-weight: bold;
+        right: 25px;
+        bottom: 85px;
+        color: rgba(0,0,0,0.9);
+        font-size: 18px;
+        animation: fadeIn 1s ease-in;
+        pointer-events: none;
+        text-align: center;
+    }
+
+    @keyframes fadeIn {
+        0% { opacity: 0; }
+        100% { opacity: 1; }
+    }
+
+    .hidden {
+        display: none !important;
+    }
+
+    #font-select {
+        padding: 8px;
+        font-size: 18px;
+        text-align: center;
+    }
+
+    #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)}
+    }
+
+    .font-select-container {
+        position: relative;
+        width: 30%;
+        display: inline-block;
+    }
+
+    .font-select-display {
+        padding: 6px;
+        border-radius: 4px;
+        border: 1px solid #ccc;
+        background: white;
+        cursor: pointer;
+        text-align: center;
+        font-size: 2vh;
+        height: 25px;
+        user-select: none;
+        overflow: clip;
+    }
+
+    .font-options {
+        position: absolute;
+        bottom: 100%;
+        left: -20px;
+        max-height: 300px;
+        overflow-y: auto;
+        background: white;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        z-index: 1000;
+        box-shadow: 0 -2px 4px rgba(0,0,0,0.2);
+        font-size: 3vh;
+        width: calc(100% + 40px);
+    }
+
+    .font-option {
+        padding: 8px;
+        cursor: pointer;
+        text-align: center;
+        user-select: none;
+        position: relative;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .font-option:hover {
+        background: #f0f0f0;
+    }
+
+    .sig-ver-url-container {
+        left: 0;
+        display: flex;
+        align-items: center;
+        padding: 4px 8px;
+        gap: 8px;
+        font-size: 0.8em;
+        color: #666;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        background: #fff;
+    }
+
+    .sig-ver-url {
+        flex: 1;
+        color: #333;
+        cursor: pointer;
+        min-width: 250px;
+        font-size: 0.7em;
+    }
+
+    .sig-ver-url:hover {
+        background: #ccd0eb;
+        user-select: all;
+    }
+
+    @keyframes shake {
+        0%, 100% { transform: translateX(0); }
+        25% { transform: translateX(-5px); }
+        75% { transform: translateX(5px); }
+    }
+
+    .error-shake {
+        animation: shake 0.2s ease-in-out 0s 3;
+        background-color: #ffebee;
+        border-color: #ff5252;
+    }
+
+    .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;
+    }
+
+</style>

web_content/privacy.html

@@ -0,0 +1,193 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Privacy Policy - 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>Privacy Policy</h1>
+    </div>
+
+    <div id="privacy-policy">
+        <h2>Data Collection and Usage</h2>
+        <p>The Open Signature Generator is designed with transparency and privacy in mind. We collect the minimum possible data necessary for operation:</p>
+        
+        <ul>
+            <li>Signature images are cached temporarily, but are otherwise generated on-demand</li>
+            <li>The IP address, timezone, and selected font of the creator of the signature is stored for use on the verification page.</li>
+            <li>Publically available information about an IP address is retrieved when a signature is created using the Python Geocoder library. </li>
+            <li>No tracking, analytics, or cookies are used.</li>
+        </ul>
+
+        <h2>Information Sharing</h2>
+        <p>We do not sell, trade, transfer, or share your information with any third parties under any circumstances. Your information remains strictly confidential.</p>
+
+        <h2>Data Security</h2>
+        <p>We implement reasonable security measures to protect your information from unauthorized access, disclosure, alteration, or destruction. These measures include:</p>
+        <ul>
+            <li>The database is not internet accessible, and entries cannot be changed.</li>
+            <li>Verification page is only accessible through a high-entropy URL which is unique to your signature.</li>
+            <li>To preserve your signature verification pages, redundant storage and backups minimize risk of data loss.</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);
+    }
+
+    #privacy-policy {
+        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;
+        overflow: auto;
+        font-size: 1.0em;
+    }
+
+    .hidden {
+        display: none !important;
+    }
+
+    #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)}
+    }
+
+    .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;
+    }
+
+</style>
+</html> 

web_content/verification.html

@@ -0,0 +1,280 @@
+<!DOCTYPE html>
+<head>
+    <title>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>
+            Open Signature Generator
+        </h1>
+    </div>
+
+    <div id="document-container">
+        <div id="loading-spinner" class="loading">Loading...</div>
+        <img id="signature-image" style="max-width: 100%; margin-bottom: 20px;">
+        <div id="verification-info"></div>
+    </div>
+
+    <div class="button-container"></div>
+        <a href="/" class="button">Go to Open Signature Generator!</a>
+    </div>
+
+    <div id="animated-background">
+        <svg viewBox="0 0 100 100"></svg>
+    </div>
+</body>
+
+<script>
+    const animatedBackground = document.getElementById('animated-background');
+
+    function stopAnimations() {
+        const animations = animatedBackground.querySelectorAll('animate, animateTransform');
+        animations.forEach(animation => {
+            animation.style.setProperty('animation-play-state', 'paused');
+        });
+    }
+
+    // Modify your initialization code
+    document.addEventListener('DOMContentLoaded', () => {
+        // Extract the signature hash from the URL
+        let url = window.location.href;
+        let hash = url.split('/v/')[1];
+
+        let image_url = `/images/${hash}.png`;
+
+        // Set the image source
+        const signatureImage = document.getElementById('signature-image');
+        const loadingSpinner = document.getElementById('loading-spinner');
+
+        signatureImage.onload = function() {
+            loadingSpinner.style.display = 'none';
+            signatureImage.style.opacity = 1;
+        };
+
+        signatureImage.onerror = function() {
+            loadingSpinner.textContent = 'Error loading signature image';
+            loadingSpinner.style.display = 'none';
+        };
+
+        signatureImage.src = image_url;
+
+        // Fetch and display verification data
+        fetch(`/verify/${hash}`)
+            .then(response => response.json())
+            .then(data => {
+                // Create a Date object from the time int and the timezone
+                const time = new Date(data.time * 1000);
+                const timezone_offset_minutes = data.timezone;
+                let timezone_string = "";
+                if (timezone_offset_minutes > 0) {
+                    timezone_string = "UTC +" + Math.floor(timezone_offset_minutes/60) + ":" + String(Math.floor(timezone_offset_minutes%60)).padStart(2, '0');
+                } else {
+                    timezone_string = "UTC " + Math.floor(timezone_offset_minutes/60) + ":" + String(Math.floor(timezone_offset_minutes%60)).padStart(2, '0');
+                }
+
+                if (data.invert) {
+                    document.getElementById('signature-image').classList.add('invert');
+                }
+
+                const verificationInfo = document.getElementById('verification-info');
+                verificationInfo.innerHTML = `
+                    <h3>Signature Details</h3>
+                    <p><strong>Created:</strong> ${time.toLocaleString()}</p>
+                    <p><strong>Creator Information:</strong>
+                        <ul>
+                            <li><strong>Signed Name:</strong> ${data.name}</li>
+                            <li><strong>Signing Browser Timezone:</strong> ${timezone_string}</li>
+                            <li><strong>IP Address:</strong> ${data.identity.ip}</li>
+                            <li><strong>Approximate Physical Address:</strong> ${data.identity.address}</li>
+                            <li><strong>Approximate GPS Location:</strong> ${data.identity.latlon}</li>
+                            <li><strong>Internet Service Provider:</strong> ${data.identity.provider}</li>
+                            <li><strong>Browser Information:</strong> ${data.identity.useragent}</li>
+                        </ul>
+                    </p>
+                    ${data.message ? `<p><strong>Message:</strong> ${data.message}</p>` : ''}
+                `;
+                verificationInfo.style.color = '#333';
+            })
+            .catch(error => {
+                const verificationInfo = document.getElementById('verification-info');
+                verificationInfo.innerHTML = `<p style="color: red">Error loading signature verification data.</p>`;
+                console.error('Error:', error);
+            });
+
+        // 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);
+    }
+
+    #document-container {
+        background-color: rgb(236, 236, 234);
+        width: 70%;
+        max-width: 600px;
+        margin: 100px auto 20px auto;
+        padding: 40px;
+        border-radius: 8px;
+        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
+        position: relative;
+        z-index: 1;
+        overflow: hidden;
+    }
+
+    #signature-image {
+        border-radius: 1px;
+        border: 1px solid #000000;
+    }
+
+    .invert {
+        background-color: #000000;
+    }
+
+    #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)}
+    }
+
+    .loading {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 3.0em;
+        color: #666;
+        height: 100px;
+        position: relative;
+    }
+
+    .loading::after {
+        content: '';
+        width: 40px;
+        height: 40px;
+        border: 4px solid #f3f3f3;
+        border-top: 4px solid #3498db;
+        border-radius: 50%;
+        animation: spin 1.0s ease-in-out infinite;
+        position: absolute;
+        margin-left: 10px;
+        opacity: 0.6;
+    }
+
+    @keyframes spin {
+        0% { transform: rotate(90deg); }
+        100% { transform: rotate(450deg); }
+    }
+
+    .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;
+    }
+
+    #signature-image {
+        border: 1px solid #000000;
+        opacity: 0;
+        transition: opacity 0.5s ease-in-out;
+    }
+
+</style>