ben/spotnotes.app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add about page with app overview and features

Browse source
This commit is contained in:
Ben Miller 2026-10-06 15:26:34 -05:00
parent 960f9a8968
commit 68e19eb1fa
1 changed files with 56 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
static/about.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -9,14 +10,15 @@
<link rel="stylesheet" href="/assets/css/auth.css"> <link rel="stylesheet" href="/assets/css/auth.css">
<link rel="icon" href="favicon.ico" type="image/x-icon" /> <link rel="icon" href="favicon.ico" type="image/x-icon" />
</head> </head>
<body class="page-body"> <body class="page-body">
<nav class="navbar"> <nav class="navbar">
<a href="/" class="brand"> <a href="/" class="brand">
<img src="/assets/images/spotnotes.png" alt="SpotNotes.app" style="height: 44px;"> <img src="/assets/images/spotnotes.png" alt="SpotNotes.app" style="height: 44px;">
</a> </a>
<button class="nav-toggle" id="nav-toggle" aria-label="Toggle Navigation">☰</button> <button class="nav-toggle" id="nav-toggle" aria-label="Toggle Navigation">☰</button>
<div class="nav-links" id="nav-links"> <div class="nav-links" id="nav-links">
<a href="/login.html" id="link-login">Login</a> <a href="/login.html" id="link-login">Login</a>
<a href="/about.html">About</a> <a href="/about.html">About</a>
<a href="/contact.html">Contact</a> <a href="/contact.html">Contact</a>
@ -30,11 +32,13 @@
<h1 style="margin-bottom: 1rem;">About SpotNotes.app</h1> <h1 style="margin-bottom: 1rem;">About SpotNotes.app</h1>
<p style="line-height: 1.6; color: #555;"> <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. 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. Unlike traditional note-taking apps, SpotNotes allows you to pin your thoughts, reminders, and discoveries
to specific coordinates on a map.
</p> </p>
<p style="line-height: 1.6; color: #555; margin-top: 10px;"> <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, 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. SpotNotes gives your notes a place in the real world.
</p> </p>
@ -44,63 +48,76 @@
<div style="display: flex; flex-wrap: wrap; gap: 20px;"> <div style="display: flex; flex-wrap: wrap; gap: 20px;">
<div style="flex: 1 1 300px;"> <div style="flex: 1 1 300px;">
<h3 style="font-size: 1.1rem; margin-bottom: 5px;">📍 Location-Based Notes</h3> <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> <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>
<div style="flex: 1 1 300px;"> <div style="flex: 1 1 300px;">
<h3 style="font-size: 1.1rem; margin-bottom: 5px;">🔒 Zero-Knowledge Encryption</h3> <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> <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>
<div style="flex: 1 1 300px;"> <div style="flex: 1 1 300px;">
<h3 style="font-size: 1.1rem; margin-bottom: 5px;">🌍 Public & Open Notepads</h3> <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> <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>
<div style="flex: 1 1 300px;"> <div style="flex: 1 1 300px;">
<h3 style="font-size: 1.1rem; margin-bottom: 5px;">🤝 Secure E2EE Collaboration</h3> <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> <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>
</div> </div>
<hr style="margin: 30px 0; border: 0; border-top: 1px solid #eee;"> <hr style="margin: 30px 0; border: 0; border-top: 1px solid #eee;">
<!-- Open Source & Don't Trust, Verify Section --> <!-- Open Source & Don't Trust, Verify Section -->
<div style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border: 1px solid #cbd5e1; border-radius: 12px; padding: 24px; margin-bottom: 30px;"> <div
style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border: 1px solid #cbd5e1; border-radius: 12px; padding: 24px; margin-bottom: 30px;">
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;"> <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
<span style="font-size: 1.6rem;">🛠️</span> <span style="font-size: 1.6rem;">🛠️</span>
<h2 style="margin: 0; font-size: 1.35rem; color: #0f172a;">Don't Trust, Verify — 100% Open Source</h2> <h2 style="margin: 0; font-size: 1.35rem; color: #0f172a;">Don't Trust, Verify — 100% Open Source</h2>
</div> </div>
<p style="line-height: 1.6; color: #334155; margin-bottom: 16px;"> <p style="line-height: 1.6; color: #334155; margin-bottom: 16px;">
True privacy shouldn't be based on marketing claims or blind faith. SpotNotes is built with total transparency: True privacy shouldn't be based on marketing claims or blind faith. SpotNotes is built with total
<strong>don't trust our word for it — verify the implementation yourself, audit our zero-knowledge cryptographic routines, or run your own instance.</strong> transparency:
<strong>don't trust our word for it — verify the implementation yourself, audit our zero-knowledge
cryptographic routines, or run your own instance.</strong>
</p> </p>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 20px 0;"> <div
style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 20px 0;">
<div style="background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px;"> <div style="background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px;">
<h4 style="margin: 0 0 6px 0; color: #0284c7; font-size: 0.95rem;">🔍 Audit the Cryptography</h4> <h4 style="margin: 0 0 6px 0; color: #0284c7; font-size: 0.95rem;">🔍 Audit the Cryptography</h4>
<p style="margin: 0; font-size: 0.85rem; color: #64748b; line-height: 1.4;"> <p style="margin: 0; font-size: 0.85rem; color: #64748b; line-height: 1.4;">
Inspect every single line of client-side Web Crypto (AES-256-GCM, RSA-OAEP, PBKDF2) to confirm private notes never leave your browser unencrypted. Inspect every single line of client-side Web Crypto (AES-256-GCM, RSA-OAEP, PBKDF2) to confirm
private notes never leave your browser unencrypted.
</p> </p>
</div> </div>
<div style="background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px;"> <div style="background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px;">
<h4 style="margin: 0 0 6px 0; color: #0284c7; font-size: 0.95rem;">🚀 Self-Host Your Own Server</h4> <h4 style="margin: 0 0 6px 0; color: #0284c7; font-size: 0.95rem;">🚀 Self-Host Your Own Server</h4>
<p style="margin: 0; font-size: 0.85rem; color: #64748b; line-height: 1.4;"> <p style="margin: 0; font-size: 0.85rem; color: #64748b; line-height: 1.4;">
Deploy SpotNotes on your own hardware or VPS in minutes with zero lock-in. Full data sovereignty and control over your deployment. Deploy SpotNotes on your own hardware or VPS in minutes with zero lock-in. Full data sovereignty
and control over your deployment.
</p> </p>
</div> </div>
<div style="background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px;"> <div style="background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 14px;">
<h4 style="margin: 0 0 6px 0; color: #0284c7; font-size: 0.95rem;">🤝 Open Collaboration</h4> <h4 style="margin: 0 0 6px 0; color: #0284c7; font-size: 0.95rem;">🤝 Open Collaboration</h4>
<p style="margin: 0; font-size: 0.85rem; color: #64748b; line-height: 1.4;"> <p style="margin: 0; font-size: 0.85rem; color: #64748b; line-height: 1.4;">
Follow ongoing development, submit pull requests, open issues, and join the community on our self-hosted Forgejo instance. Follow ongoing development, submit pull requests, open issues, and join the community on our
self-hosted Forgejo instance.
</p> </p>
</div> </div>
</div> </div>
<div style="margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;"> <div style="margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;">
<a href="https://forgejo.benjimanmiller.com/ben/spotnotes.app" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="text-decoration: none; display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 10px 22px; font-weight: 600;"> <a href="https://forgejo.benjimanmiller.com/ben/spotnotes.app" target="_blank" rel="noopener noreferrer"
class="btn btn-primary"
style="text-decoration: none; display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 10px 22px; font-weight: 600;">
<span>📂 View Source on Forgejo</span> <span>📂 View Source on Forgejo</span>
<span>&nearr;</span> <span>&nearr;</span>
</a> </a>
<span style="font-size: 0.85rem; color: #64748b; font-family: monospace;">forgejo.benjimanmiller.com/ben/spotnotes.app</span>
</div> </div>
</div> </div>
@ -110,29 +127,40 @@
<div style="margin-bottom: 20px;"> <div style="margin-bottom: 20px;">
<h4 style="margin-bottom: 5px;">Can the server operator or host see my private notes?</h4> <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> <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>
<div style="margin-bottom: 20px;"> <div style="margin-bottom: 20px;">
<h4 style="margin-bottom: 5px;">Where can I find the source code or self-host SpotNotes?</h4> <h4 style="margin-bottom: 5px;">Where can I find the source code or self-host SpotNotes?</h4>
<p style="color: #555;">SpotNotes is 100% open source. You can explore the codebase, review the cryptography, or clone the repository to run your own server at <a href="https://forgejo.benjimanmiller.com/ben/spotnotes.app" target="_blank" rel="noopener noreferrer" style="color: #0284c7; text-decoration: underline;">forgejo.benjimanmiller.com/ben/spotnotes.app</a>.</p> <p style="color: #555;">SpotNotes is 100% open source. You can explore the codebase, review the
cryptography, or clone the repository to run your own server at <a
href="https://forgejo.benjimanmiller.com/ben/spotnotes.app" target="_blank"
rel="noopener noreferrer"
style="color: #0284c7; text-decoration: underline;">forgejo.benjimanmiller.com/ben/spotnotes.app</a>.
</p>
</div> </div>
<div style="margin-bottom: 20px;"> <div style="margin-bottom: 20px;">
<h4 style="margin-bottom: 5px;">How does sharing private notepads work?</h4> <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> <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>
<div style="margin-bottom: 20px;"> <div style="margin-bottom: 20px;">
<h4 style="margin-bottom: 5px;">Do I need an account to view public notes?</h4> <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> <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>
<div style="margin-top: 40px; text-align: center;"> <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> <a href="/" class="btn btn-primary"
style="text-decoration: none; display: inline-block; width: auto; padding: 12px 30px;">Start
Exploring</a>
</div> </div>
</div> </div>
<script src="/assets/js/nav.js"></script> <script src="/assets/js/nav.js"></script>
</body> </body>
</html> </html>