spotnotes.app/static/about.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About - SpotNotes.app</title>
    <link rel="stylesheet" href="/assets/css/base.css">
    <link rel="stylesheet" href="/assets/css/navbar.css">
    <link rel="stylesheet" href="/assets/css/auth.css">
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
</head>
<body class="page-body">

    <nav class="navbar">
            <a href="/" class="brand">
            <img src="/assets/images/spotnotes.png" alt="SpotNotes.app" style="height: 44px;">
            </a>
            <button class="nav-toggle" id="nav-toggle" aria-label="Toggle Navigation">☰</button>
            <div class="nav-links" id="nav-links">
            <a href="/login.html" id="link-login">Login</a>
            <a href="/about.html">About</a>
            <a href="/contact.html">Contact</a>
            <a href="#" id="link-logout" style="display: none;">Logout</a>
        </div>
    </nav>

    <div class="content-container">
        <img src="/assets/images/spotnotes.png" alt="SpotNotes.app" style="width: 95%;">

        <h1 style="margin-bottom: 1rem;">About SpotNotes.app</h1>
        <p style="line-height: 1.6; color: #555;">
            SpotNotes is a unique location-based digital notepad designed to help you connect with the world around you. 
            Unlike traditional note-taking apps, SpotNotes allows you to pin your thoughts, reminders, and discoveries to specific coordinates on a map.
        </p>
        
        <p style="line-height: 1.6; color: #555; margin-top: 10px;">
            Whether you are marking a hidden hiking trail, leaving a review for a local coffee shop, or just jotting down a memory at a specific spot, 
            SpotNotes gives your notes a place in the real world.
        </p>

        <hr style="margin: 30px 0; border: 0; border-top: 1px solid #eee;">

        <h2 style="margin-bottom: 1rem;">Key Features</h2>
        <div style="display: flex; flex-wrap: wrap; gap: 20px;">
            <div style="flex: 1 1 300px;">
                <h3 style="font-size: 1.1rem; margin-bottom: 5px;">📍 Location-Based Notes</h3>
                <p style="font-size: 0.9rem; color: #666;">Create notes that are tied to exact map coordinates. View them in context with the surrounding area.</p>
            </div>
            <div style="flex: 1 1 300px;">
                <h3 style="font-size: 1.1rem; margin-bottom: 5px;">🔒 Zero-Knowledge Encryption</h3>
                <p style="font-size: 0.9rem; color: #666;">All private notes are encrypted client-side using AES-GCM-256 and RSA-OAEP before storage. The server operator has zero access to your private thoughts or locations.</p>
            </div>
            <div style="flex: 1 1 300px;">
                <h3 style="font-size: 1.1rem; margin-bottom: 5px;">🌍 Public & Open Notepads</h3>
                <p style="font-size: 0.9rem; color: #666;">Publish guides, landmarks, and discoveries publicly. Public notes remain unencrypted so anyone worldwide can discover and explore them.</p>
            </div>
            <div style="flex: 1 1 300px;">
                <h3 style="font-size: 1.1rem; margin-bottom: 5px;">🤝 Secure E2EE Collaboration</h3>
                <p style="font-size: 0.9rem; color: #666;">Share private notepads securely with specific users using public-key cryptography, or via link with decryption key fragments.</p>
            </div>
        </div>

        <hr style="margin: 30px 0; border: 0; border-top: 1px solid #eee;">

        <h2 style="margin-bottom: 1rem;">Frequently Asked Questions</h2>
        
        <div style="margin-bottom: 20px;">
            <h4 style="margin-bottom: 5px;">Can the server operator or host see my private notes?</h4>
            <p style="color: #555;">No. Private notes are encrypted client-side in your browser using the Web Crypto API before being transmitted. The server only stores ciphertext.</p>
        </div>

        <div style="margin-bottom: 20px;">
            <h4 style="margin-bottom: 5px;">How does sharing private notepads work?</h4>
            <p style="color: #555;">When you add a collaborator, your browser encrypts the notepad key using the collaborator's public key. Only their private key can unlock it.</p>
        </div>

        <div style="margin-bottom: 20px;">
            <h4 style="margin-bottom: 5px;">Do I need an account to view public notes?</h4>
            <p style="color: #555;">No, you can explore public notes and global feeds without an account. Registration is required to create and save private encrypted notes.</p>
        </div>

        <div style="margin-top: 40px; text-align: center;">
            <a href="/" class="btn btn-primary" style="text-decoration: none; display: inline-block; width: auto; padding: 12px 30px;">Start Exploring</a>
        </div>
    </div>

    <script src="/assets/js/nav.js"></script>
</body>
</html>