2025-11-09 10:42:51 +00:00
<!DOCTYPE html>
< html lang = "en" data-theme = "light" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2025-11-09 11:23:15 +00:00
<!-- Primary Meta Tags -->
2025-11-09 10:42:51 +00:00
< title > NoteDiscovery - Your Self-Hosted Knowledge Base< / title >
2025-11-09 11:23:15 +00:00
< meta name = "title" content = "NoteDiscovery - Your Self-Hosted Knowledge Base" >
2025-12-05 11:21:25 +00:00
< meta name = "description" content = "A lightweight, privacy-focused Markdown note-taking application with wikilinks, graph view, LaTeX math, Mermaid diagrams, tags, templates, and code highlighting. Self-hosted, free, and open source." >
2025-11-26 13:45:48 +00:00
< meta name = "keywords" content = "note taking, markdown editor, self-hosted, knowledge base, open source, privacy, notes app, docker, second brain, obsidian alternative, notion, evernote, onenote, latex, mermaid, diagrams, math equations, templates, tags, yaml frontmatter" >
2025-11-09 11:23:15 +00:00
< meta name = "author" content = "Gamosoft" >
< meta name = "robots" content = "index, follow" >
2025-11-09 17:59:48 +00:00
< link rel = "canonical" href = "https://www.notediscovery.com" >
2025-11-09 11:23:15 +00:00
<!-- Open Graph / Facebook -->
< meta property = "og:type" content = "website" >
2025-11-09 17:59:48 +00:00
< meta property = "og:url" content = "https://www.notediscovery.com" >
2025-11-09 11:23:15 +00:00
< meta property = "og:title" content = "NoteDiscovery - Your Self-Hosted Knowledge Base" >
2025-12-04 09:07:07 +00:00
< meta property = "og:description" content = "A lightweight, privacy-focused Markdown note-taking application with wikilinks, LaTeX math, Mermaid diagrams, tags, templates, and code highlighting. Self-hosted, free, and open source." >
2025-11-09 11:50:11 +00:00
< meta property = "og:image" content = "https://www.notediscovery.com/og-image.png" >
< meta property = "og:image:width" content = "1200" >
< meta property = "og:image:height" content = "630" >
2025-11-09 11:23:15 +00:00
< meta property = "og:site_name" content = "NoteDiscovery" >
2025-11-09 17:53:06 +00:00
<!-- Twitter Card -->
2025-11-09 11:23:15 +00:00
< meta name = "twitter:card" content = "summary_large_image" >
2025-11-09 17:53:06 +00:00
< meta name = "twitter:site" content = "@gamosoft" >
< meta name = "twitter:creator" content = "@gamosoft" >
2025-11-09 11:23:15 +00:00
< meta name = "twitter:title" content = "NoteDiscovery - Your Self-Hosted Knowledge Base" >
2025-11-26 13:45:48 +00:00
< meta name = "twitter:description" content = "A lightweight, privacy-focused note-taking application with LaTeX math, Mermaid diagrams, tags, templates, and code highlighting. Self-hosted, free, and open source." >
2025-11-09 11:50:11 +00:00
< meta name = "twitter:image" content = "https://www.notediscovery.com/og-image.png" >
2025-11-09 17:53:06 +00:00
< meta name = "twitter:image:alt" content = "NoteDiscovery - Self-hosted note-taking application interface" >
2025-11-09 11:23:15 +00:00
<!-- Favicon -->
2025-11-09 10:42:51 +00:00
< link rel = "icon" type = "image/svg+xml" href = "favicon.svg" >
2025-11-09 11:23:15 +00:00
< link rel = "apple-touch-icon" href = "logo.svg" >
<!-- Theme Color -->
< meta name = "theme-color" content = "#667eea" >
2025-11-09 10:42:51 +00:00
< style >
:root {
--bg-gradient-start: #667eea;
--bg-gradient-end: #764ba2;
--text-primary: #1e293b;
--text-secondary: #64748b;
--text-header: #334155;
--card-bg: #ffffff;
--card-secondary: #f8fafc;
--shadow: rgba(0, 0, 0, 0.3);
--shadow-light: rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] {
--bg-gradient-start: #1e293b;
--bg-gradient-end: #0f172a;
--text-primary: #e2e8f0;
--text-secondary: #cbd5e1;
--text-header: #f1f5f9;
--card-bg: #1e293b;
--card-secondary: #334155;
--shadow: rgba(0, 0, 0, 0.6);
--shadow-light: rgba(0, 0, 0, 0.4);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: var(--text-primary);
background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
min-height: 100vh;
transition: background 0.3s ease, color 0.3s ease;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
header {
text-align: center;
padding: 3rem 0;
color: white;
position: relative;
}
2025-11-14 19:35:07 +00:00
.header-buttons {
position: fixed;
2025-11-09 10:42:51 +00:00
top: 1rem;
right: 1rem;
2025-11-14 19:35:07 +00:00
display: flex;
gap: 0.75rem;
align-items: center;
z-index: 1000;
}
.theme-toggle {
2025-11-09 10:42:51 +00:00
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
padding: 0.5rem 1rem;
cursor: pointer;
font-size: 1.2rem;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.theme-toggle:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.05);
}
2025-11-14 19:35:07 +00:00
.kofi-mini {
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
padding: 0.5rem 1rem;
cursor: pointer;
font-size: 0.95rem;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
color: #1e293b;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-weight: 600;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}
.kofi-mini:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.05);
}
/* Dark theme Ko-fi button */
[data-theme="dark"] .kofi-mini {
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
2025-11-09 10:42:51 +00:00
.logo {
width: 120px;
height: 120px;
margin: 0 auto 1rem;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}
h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 0.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.tagline {
font-size: 1.5rem;
opacity: 0.95;
font-weight: 300;
}
.hero {
background: var(--card-bg);
border-radius: 20px;
padding: 3rem;
margin: 2rem 0;
box-shadow: 0 20px 60px var(--shadow);
transition: background 0.3s ease;
}
.hero-content {
text-align: center;
margin-bottom: 2rem;
}
.hero-content h2 {
font-size: 2rem;
color: var(--text-header);
margin-bottom: 1rem;
}
.hero-content p {
font-size: 1.2rem;
color: var(--text-secondary);
max-width: 800px;
margin: 0 auto;
}
2025-12-07 13:03:38 +00:00
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 1.5rem;
}
2025-11-09 10:42:51 +00:00
.cta-button {
display: inline-block;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
2025-12-07 13:03:38 +00:00
padding: 1rem 2.5rem;
2025-11-09 10:42:51 +00:00
border-radius: 50px;
text-decoration: none;
2025-12-07 13:03:38 +00:00
font-size: 1.1rem;
2025-11-09 10:42:51 +00:00
font-weight: 600;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}
2025-12-07 13:03:38 +00:00
.cta-button.demo {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}
.cta-button.demo:hover {
box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
}
.cta-button.demo::before {
content: "▶ ";
}
2025-12-07 16:16:39 +00:00
.demo-notice {
margin-top: 1rem;
font-size: 0.85rem;
color: #6b7280;
font-style: italic;
opacity: 0.9;
}
2025-11-09 10:42:51 +00:00
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.feature {
background: var(--card-secondary);
padding: 2rem;
border-radius: 15px;
text-align: center;
transition: transform 0.2s, background 0.3s ease;
}
.feature:hover {
transform: translateY(-5px);
}
.feature-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
.feature h3 {
font-size: 1.3rem;
color: var(--text-header);
margin-bottom: 0.5rem;
}
.feature p {
color: var(--text-secondary);
font-size: 1rem;
}
.benefits {
background: var(--card-bg);
border-radius: 20px;
padding: 3rem;
margin: 2rem 0;
box-shadow: 0 10px 30px var(--shadow-light);
transition: background 0.3s ease;
}
.benefits h2 {
text-align: center;
font-size: 2rem;
color: var(--text-header);
margin-bottom: 2rem;
}
.benefit-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.benefit-item {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.benefit-item .emoji {
font-size: 1.5rem;
flex-shrink: 0;
}
.benefit-item .text {
color: var(--text-secondary);
}
.benefit-item strong {
color: var(--text-header);
display: block;
margin-bottom: 0.25rem;
}
2025-12-07 13:03:38 +00:00
/* Scroll Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInScale {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.animate-on-scroll {
opacity: 0;
}
.animate-on-scroll.animated {
animation: fadeInUp 0.6s ease-out forwards;
}
.animate-on-scroll.animated-scale {
animation: fadeInScale 0.6s ease-out forwards;
}
/* Stagger animation delays for feature cards */
.feature.animated:nth-child(1) { animation-delay: 0s; }
.feature.animated:nth-child(2) { animation-delay: 0.1s; }
.feature.animated:nth-child(3) { animation-delay: 0.2s; }
.feature.animated:nth-child(4) { animation-delay: 0.05s; }
.feature.animated:nth-child(5) { animation-delay: 0.15s; }
.feature.animated:nth-child(6) { animation-delay: 0.25s; }
.feature.animated:nth-child(7) { animation-delay: 0.1s; }
.feature.animated:nth-child(8) { animation-delay: 0.2s; }
.feature.animated:nth-child(9) { animation-delay: 0.3s; }
.feature.animated:nth-child(10) { animation-delay: 0.15s; }
.feature.animated:nth-child(11) { animation-delay: 0.25s; }
.feature.animated:nth-child(12) { animation-delay: 0.35s; }
.feature.animated:nth-child(13) { animation-delay: 0.2s; }
2025-11-09 17:35:35 +00:00
.screenshot-section {
margin: 4rem 0 3rem 0;
text-align: center;
}
.screenshot-section h2 {
font-size: 2rem;
color: white;
margin-bottom: 1rem;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.screenshot-section p {
color: rgba(255, 255, 255, 0.95);
font-size: 1.1rem;
margin-bottom: 2.5rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.screenshot-container {
position: relative;
max-width: 1000px;
margin: 0 auto;
padding: 0 1rem;
}
2025-12-07 13:03:38 +00:00
/* Screenshot Carousel */
.carousel {
position: relative;
overflow: hidden;
}
.carousel-track {
display: flex;
transition: transform 0.5s ease-in-out;
width: 100%;
}
.carousel-slide {
width: 100%;
min-width: 100%;
flex: 0 0 100%;
}
2025-11-09 17:35:35 +00:00
.screenshot-frame {
background: var(--card-bg);
border-radius: 12px;
padding: 0.5rem;
box-shadow: 0 20px 60px var(--shadow);
2025-12-07 13:03:38 +00:00
transition: box-shadow 0.3s ease, background 0.3s ease;
2025-11-09 17:35:35 +00:00
overflow: hidden;
}
.screenshot-frame:hover {
box-shadow: 0 25px 80px var(--shadow);
}
.screenshot-window-bar {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.8rem;
background: var(--card-secondary);
border-radius: 8px 8px 0 0;
margin-bottom: 0.5rem;
}
2025-12-07 13:03:38 +00:00
.screenshot-title {
flex: 1;
text-align: center;
font-size: 0.85rem;
color: var(--text-secondary);
font-weight: 500;
}
2025-11-09 17:35:35 +00:00
.screenshot-dots {
display: flex;
gap: 0.4rem;
}
.screenshot-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.screenshot-dot:nth-child(1) { background: #ff5f56; }
.screenshot-dot:nth-child(2) { background: #ffbd2e; }
.screenshot-dot:nth-child(3) { background: #27c93f; }
.screenshot-frame img {
width: 100%;
height: auto;
display: block;
border-radius: 0 0 8px 8px;
}
2025-12-07 13:03:38 +00:00
/* Carousel Navigation */
.carousel-nav {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-top: 1.5rem;
}
.carousel-btn {
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
width: 44px;
height: 44px;
cursor: pointer;
font-size: 1.2rem;
color: white;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
}
.carousel-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
.carousel-indicators {
display: flex;
gap: 0.5rem;
}
.carousel-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.carousel-indicator.active {
background: white;
transform: scale(1.2);
}
.carousel-indicator:hover {
background: rgba(255, 255, 255, 0.6);
}
2025-11-09 10:42:51 +00:00
footer {
text-align: center;
padding: 3rem 0;
color: white;
}
footer p {
opacity: 0.9;
margin-bottom: 1rem;
}
.github-link {
color: white;
text-decoration: underline;
font-weight: 500;
}
2025-11-09 11:42:01 +00:00
.support-button {
display: inline-block;
background: #0070ba;
color: white;
padding: 0.6rem 1.5rem;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s ease;
margin-top: 1rem;
box-shadow: 0 2px 8px rgba(0, 112, 186, 0.3);
}
.support-button:hover {
background: #005a92;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 112, 186, 0.4);
}
.support-button::before {
content: "☕ ";
margin-right: 0.3rem;
}
2025-11-09 10:42:51 +00:00
@media (max-width: 768px) {
h1 {
font-size: 2rem;
}
.tagline {
font-size: 1.2rem;
}
.hero, .benefits {
padding: 2rem;
}
.features {
grid-template-columns: 1fr;
}
2025-11-14 19:35:07 +00:00
.header-buttons {
2025-11-09 10:42:51 +00:00
top: 0.5rem;
right: 0.5rem;
2025-11-14 19:35:07 +00:00
gap: 0.5rem;
}
.theme-toggle {
2025-11-09 10:42:51 +00:00
padding: 0.4rem 0.8rem;
font-size: 1rem;
}
2025-11-14 19:35:07 +00:00
.kofi-mini {
padding: 0.4rem 0.8rem;
font-size: 0.85rem;
}
2025-11-09 10:42:51 +00:00
.logo {
width: 80px;
height: 80px;
}
2025-11-09 11:42:01 +00:00
.support-button {
padding: 0.5rem 1.2rem;
font-size: 0.9rem;
}
2025-11-09 17:35:35 +00:00
.screenshot-section {
margin: 3rem 0 2rem 0;
}
.screenshot-section h2 {
font-size: 1.5rem;
}
.screenshot-section p {
font-size: 1rem;
padding: 0 1rem;
}
.screenshot-frame {
box-shadow: 0 10px 40px var(--shadow);
}
.screenshot-window-bar {
padding: 0.5rem 0.6rem;
}
.screenshot-dot {
width: 10px;
height: 10px;
}
2025-12-07 13:03:38 +00:00
.screenshot-title {
font-size: 0.75rem;
}
.carousel-btn {
width: 36px;
height: 36px;
font-size: 1rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-button {
width: 100%;
max-width: 280px;
text-align: center;
}
2025-11-09 10:42:51 +00:00
}
2025-11-14 19:35:07 +00:00
2025-11-09 10:42:51 +00:00
< / style >
2025-11-09 11:08:53 +00:00
<!-- Google Analytics -->
< script async src = "https://www.googletagmanager.com/gtag/js?id=G-2TVGZ9N7LF" > < / script >
< script >
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-2TVGZ9N7LF');
< / script >
2025-11-09 10:42:51 +00:00
< / head >
< body >
< div class = "container" >
< header >
2025-11-14 19:35:07 +00:00
< div class = "header-buttons" >
2025-12-04 09:55:10 +00:00
< a href = "https://ko-fi.com/gamosoft" class = "kofi-mini" target = "_blank" rel = "noopener" aria-label = "Support on Ko-fi" >
2025-11-14 19:35:07 +00:00
< span > ☕< / span >
< span > Support< / span >
< / a >
< button class = "theme-toggle" onclick = "toggleTheme()" aria-label = "Toggle theme" >
< span id = "theme-icon" > 🌙< / span >
< / button >
< / div >
2025-11-09 10:42:51 +00:00
< img src = "logo.svg" alt = "NoteDiscovery Logo" class = "logo" >
< h1 > NoteDiscovery< / h1 >
< p class = "tagline" > Your Self-Hosted Knowledge Base< / p >
< / header >
2025-12-07 13:03:38 +00:00
< div class = "hero animate-on-scroll" >
2025-11-09 10:42:51 +00:00
< div class = "hero-content" >
< h2 > Take Control of Your Notes< / h2 >
2025-11-26 13:45:48 +00:00
< p > A lightweight, privacy-focused note-taking application with powerful features: LaTeX math equations, Mermaid diagrams, smart tags, custom templates, code highlighting, and more. Write, organize, and discover your notes with a beautiful, modern interface—all running on your own server.< / p >
2025-12-07 13:03:38 +00:00
< div class = "cta-buttons" >
2025-12-07 16:24:11 +00:00
< a href = "https://gamosoft-notediscovery-demo.hf.space" class = "cta-button demo" target = "_blank" rel = "noopener" > Try Live Demo< / a >
2025-12-07 13:03:38 +00:00
< a href = "https://github.com/gamosoft/NoteDiscovery" class = "cta-button" target = "_blank" rel = "noopener" > Get Started on GitHub →< / a >
< / div >
2025-12-07 16:16:39 +00:00
< p class = "demo-notice" > ✨ Demo resets daily · For demonstration purposes only< / p >
2025-11-09 10:42:51 +00:00
< / div >
< / div >
2025-12-07 13:03:38 +00:00
< div class = "screenshot-section animate-on-scroll" >
2025-11-09 17:35:35 +00:00
< h2 > See It in Action< / h2 >
< p > A clean, intuitive interface designed for productivity and focus< / p >
< div class = "screenshot-container" >
2025-12-07 13:03:38 +00:00
< div class = "carousel" >
< div class = "carousel-track" id = "carouselTrack" >
<!-- Slide 1: Main Interface (Light) -->
< div class = "carousel-slide" >
< div class = "screenshot-frame" >
< div class = "screenshot-window-bar" >
< div class = "screenshot-dots" >
< div class = "screenshot-dot" > < / div >
< div class = "screenshot-dot" > < / div >
< div class = "screenshot-dot" > < / div >
< / div >
2025-12-07 16:08:30 +00:00
< span class = "screenshot-title" > Editor View • Main Interface< / span >
2025-12-07 13:03:38 +00:00
< / div >
2025-12-07 16:08:30 +00:00
< img src = "carousel-1.jpg" alt = "NoteDiscovery Editor - Light Theme" loading = "lazy" >
2025-12-07 13:03:38 +00:00
< / div >
< / div >
< div class = "carousel-slide" >
< div class = "screenshot-frame" >
< div class = "screenshot-window-bar" >
< div class = "screenshot-dots" >
< div class = "screenshot-dot" > < / div >
< div class = "screenshot-dot" > < / div >
< div class = "screenshot-dot" > < / div >
< / div >
2025-12-07 16:08:30 +00:00
< span class = "screenshot-title" > Editor View • Search Notes< / span >
2025-12-07 13:03:38 +00:00
< / div >
2025-12-07 16:08:30 +00:00
< img src = "carousel-2.jpg" alt = "NoteDiscovery Editor - Dark Theme" loading = "lazy" >
2025-12-07 13:03:38 +00:00
< / div >
< / div >
< div class = "carousel-slide" >
< div class = "screenshot-frame" >
< div class = "screenshot-window-bar" >
< div class = "screenshot-dots" >
< div class = "screenshot-dot" > < / div >
< div class = "screenshot-dot" > < / div >
< div class = "screenshot-dot" > < / div >
< / div >
< span class = "screenshot-title" > Graph View • Note Connections< / span >
< / div >
2025-12-07 16:08:30 +00:00
< img src = "carousel-3.jpg" alt = "NoteDiscovery Graph View" loading = "lazy" >
2025-12-07 13:03:38 +00:00
< / div >
2025-11-09 17:35:35 +00:00
< / div >
2025-12-07 13:03:38 +00:00
< div class = "carousel-slide" >
< div class = "screenshot-frame" >
< div class = "screenshot-window-bar" >
< div class = "screenshot-dots" >
< div class = "screenshot-dot" > < / div >
< div class = "screenshot-dot" > < / div >
< div class = "screenshot-dot" > < / div >
< / div >
2025-12-07 16:08:30 +00:00
< span class = "screenshot-title" > Frontmatter Metadata • Note Tag Search< / span >
2025-12-07 13:03:38 +00:00
< / div >
2025-12-07 16:08:30 +00:00
< img src = "carousel-4.jpg" alt = "NoteDiscovery Mobile View" loading = "lazy" >
2025-12-07 13:03:38 +00:00
< / div >
< / div >
< / div >
< / div >
<!-- Carousel Navigation -->
< div class = "carousel-nav" >
< button class = "carousel-btn" onclick = "moveCarousel(-1)" aria-label = "Previous screenshot" > ‹ < / button >
< div class = "carousel-indicators" >
< button class = "carousel-indicator active" onclick = "goToSlide(0)" aria-label = "Slide 1" > < / button >
< button class = "carousel-indicator" onclick = "goToSlide(1)" aria-label = "Slide 2" > < / button >
< button class = "carousel-indicator" onclick = "goToSlide(2)" aria-label = "Slide 3" > < / button >
< button class = "carousel-indicator" onclick = "goToSlide(3)" aria-label = "Slide 4" > < / button >
2025-11-09 17:35:35 +00:00
< / div >
2025-12-07 13:03:38 +00:00
< button class = "carousel-btn" onclick = "moveCarousel(1)" aria-label = "Next screenshot" > › < / button >
2025-11-09 17:35:35 +00:00
< / div >
< / div >
< / div >
2025-11-09 10:42:51 +00:00
< div class = "features" >
2025-12-07 13:03:38 +00:00
< div class = "feature animate-on-scroll" >
2025-11-09 10:42:51 +00:00
< div class = "feature-icon" > 🔒< / div >
< h3 > 100% Private< / h3 >
< p > Your notes never leave your server. Complete data ownership and privacy.< / p >
< / div >
2025-12-07 13:03:38 +00:00
< div class = "feature animate-on-scroll" >
2025-11-09 10:42:51 +00:00
< div class = "feature-icon" > 💰< / div >
< h3 > Completely Free< / h3 >
< p > No subscriptions, no hidden fees. Free and open source forever.< / p >
< / div >
2025-12-07 13:03:38 +00:00
< div class = "feature animate-on-scroll" >
2025-11-09 10:42:51 +00:00
< div class = "feature-icon" > 🚀< / div >
< h3 > Lightning Fast< / h3 >
< p > Instant search and navigation. Works offline, always responsive.< / p >
< / div >
2025-12-07 13:03:38 +00:00
< div class = "feature animate-on-scroll" >
2025-11-18 17:04:42 +00:00
< div class = "feature-icon" > 🧮< / div >
< h3 > LaTeX Math< / h3 >
< p > Beautiful equation rendering with MathJax. Perfect for scientific notes.< / p >
< / div >
2025-12-07 13:03:38 +00:00
< div class = "feature animate-on-scroll" >
2025-11-18 17:04:42 +00:00
< div class = "feature-icon" > 📊< / div >
< h3 > Diagrams< / h3 >
< p > Create flowcharts, mind maps, and diagrams with Mermaid syntax.< / p >
< / div >
2025-12-07 13:03:38 +00:00
< div class = "feature animate-on-scroll" >
2025-11-18 17:04:42 +00:00
< div class = "feature-icon" > 💻< / div >
< h3 > Code Highlighting< / h3 >
< p > Syntax highlighting for popular coding languages. Developer-friendly notes.< / p >
< / div >
2025-12-07 13:03:38 +00:00
< div class = "feature animate-on-scroll" >
2025-11-26 13:45:48 +00:00
< div class = "feature-icon" > 🏷️< / div >
< h3 > Smart Tags< / h3 >
2025-12-04 09:07:07 +00:00
< p > Organize with YAML frontmatter tags. Collapsible properties panel shows metadata at a glance.< / p >
2025-11-26 13:45:48 +00:00
< / div >
2025-12-07 13:03:38 +00:00
< div class = "feature animate-on-scroll" >
2025-11-26 13:45:48 +00:00
< div class = "feature-icon" > 📋< / div >
< h3 > Note Templates< / h3 >
< p > Create from custom templates with dynamic placeholders. Meeting notes, journals, and more.< / p >
< / div >
2025-12-07 13:03:38 +00:00
< div class = "feature animate-on-scroll" >
2025-12-04 09:07:07 +00:00
< div class = "feature-icon" > 🔗< / div >
< h3 > Wikilinks< / h3 >
2025-12-17 08:12:42 +00:00
< p > Link notes with [[double brackets]] Obsidian-style. Jump to sections with [[note#heading]] anchors.< / p >
2025-12-04 09:07:07 +00:00
< / div >
2025-12-07 13:03:38 +00:00
< div class = "feature animate-on-scroll" >
2025-12-05 11:21:25 +00:00
< div class = "feature-icon" > 🕸️< / div >
< h3 > Graph View< / h3 >
< p > Interactive visualization of connected notes. Drag to explore relationships.< / p >
< / div >
2025-12-07 13:03:38 +00:00
< div class = "feature animate-on-scroll" >
2025-11-09 10:42:51 +00:00
< div class = "feature-icon" > 📂< / div >
< h3 > Simple Storage< / h3 >
< p > Plain markdown files in folders. No vendor lock-in, easy backups.< / p >
< / div >
2025-12-07 13:03:38 +00:00
< div class = "feature animate-on-scroll" >
2025-11-09 10:42:51 +00:00
< div class = "feature-icon" > 🎨< / div >
< h3 > Beautiful Themes< / h3 >
2025-11-18 17:04:42 +00:00
< p > 8 built-in themes with dark/light modes and full customization.< / p >
2025-11-09 10:42:51 +00:00
< / div >
2025-12-16 13:39:17 +00:00
< div class = "feature animate-on-scroll" >
< div class = "feature-icon" > ⭐< / div >
< h3 > Favorites< / h3 >
< p > Star your most-used notes for instant access from the sidebar.< / p >
< / div >
2025-12-17 08:12:42 +00:00
< div class = "feature animate-on-scroll" >
< div class = "feature-icon" > 📑< / div >
< h3 > Outline Panel< / h3 >
< p > Navigate headings with a click-to-jump table of contents. Link to sections with anchors.< / p >
< / div >
2025-12-07 13:03:38 +00:00
< div class = "feature animate-on-scroll" >
2025-11-09 10:42:51 +00:00
< div class = "feature-icon" > 🔌< / div >
< h3 > Extensible< / h3 >
< p > Plugin system lets you add custom features and integrations.< / p >
< / div >
< / div >
2025-12-07 13:03:38 +00:00
< div class = "benefits animate-on-scroll" >
2025-11-09 10:42:51 +00:00
< h2 > Why Choose NoteDiscovery?< / h2 >
< div class = "benefit-list" >
< div class = "benefit-item" >
< span class = "emoji" > ✨< / span >
< div class = "text" >
< strong > Easy Setup< / strong >
Run with Docker in seconds
< / div >
< / div >
< div class = "benefit-item" >
< span class = "emoji" > 📱< / span >
< div class = "text" >
< strong > Responsive Design< / strong >
Works on desktop, tablet, and mobile
< / div >
< / div >
< div class = "benefit-item" >
< span class = "emoji" > 🔍< / span >
< div class = "text" >
< strong > Powerful Search< / strong >
Find anything instantly
< / div >
< / div >
< div class = "benefit-item" >
< span class = "emoji" > 📝< / span >
< div class = "text" >
< strong > Markdown Editor< / strong >
Write with live preview
< / div >
< / div >
< div class = "benefit-item" >
< span class = "emoji" > 🌙< / span >
< div class = "text" >
< strong > Dark Mode< / strong >
Easy on the eyes
< / div >
< / div >
< div class = "benefit-item" >
< span class = "emoji" > 💻< / span >
< div class = "text" >
< strong > Self-Hosted< / strong >
You own your data
< / div >
< / div >
2025-11-18 17:04:42 +00:00
2025-11-26 13:45:48 +00:00
< div class = "benefit-item" >
2025-11-26 13:48:54 +00:00
< span class = "emoji" > 🔗< / span >
2025-11-26 13:45:48 +00:00
< div class = "text" >
2025-12-04 09:07:07 +00:00
< strong > Wikilinks< / strong >
[[Link notes]] Obsidian-style
2025-11-26 13:45:48 +00:00
< / div >
< / div >
2025-12-05 11:21:25 +00:00
< div class = "benefit-item" >
< span class = "emoji" > 🕸️< / span >
< div class = "text" >
< strong > Graph View< / strong >
Visualize note connections
< / div >
< / div >
2025-11-18 17:04:42 +00:00
< div class = "benefit-item" >
2025-11-26 13:48:54 +00:00
< span class = "emoji" > 🖼️< / span >
2025-11-18 17:04:42 +00:00
< div class = "text" >
2025-11-26 13:48:54 +00:00
< strong > Image Support< / strong >
Drag & drop images directly
2025-11-18 17:04:42 +00:00
< / div >
< / div >
< div class = "benefit-item" >
< span class = "emoji" > 📄< / span >
< div class = "text" >
< strong > HTML Export< / strong >
Share standalone HTML files
< / div >
< / div >
< div class = "benefit-item" >
< span class = "emoji" > ⌨️< / span >
< div class = "text" >
< strong > Keyboard Shortcuts< / strong >
Navigate and create with speed
< / div >
< / div >
< div class = "benefit-item" >
< span class = "emoji" > 🔐< / span >
< div class = "text" >
< strong > Optional Auth< / strong >
Password protection when needed
< / div >
< / div >
2025-12-04 09:07:07 +00:00
< div class = "benefit-item" >
< span class = "emoji" > ⚙️< / span >
< div class = "text" >
< strong > Properties Panel< / strong >
View frontmatter metadata at a glance
< / div >
< / div >
2025-11-09 10:42:51 +00:00
< / div >
< / div >
2025-12-07 13:03:38 +00:00
< div class = "hero animate-on-scroll" >
2025-11-09 10:42:51 +00:00
< div class = "hero-content" >
< h2 > Ready to Get Started?< / h2 >
< p > Join the self-hosting community and take back control of your notes today.< / p >
2025-12-07 13:03:38 +00:00
< div class = "cta-buttons" >
2025-12-07 16:24:11 +00:00
< a href = "https://gamosoft-notediscovery-demo.hf.space" class = "cta-button demo" target = "_blank" rel = "noopener" > Try Live Demo< / a >
2025-12-07 13:03:38 +00:00
< a href = "https://github.com/gamosoft/NoteDiscovery" class = "cta-button" target = "_blank" rel = "noopener" > View on GitHub →< / a >
< / div >
2025-12-07 16:16:39 +00:00
< p class = "demo-notice" > ✨ Demo resets daily · For demonstration purposes only< / p >
2025-11-09 10:42:51 +00:00
< / div >
< / div >
< footer >
< p > Made with ❤️ for the self-hosting community< / p >
< p >
2025-12-04 09:55:10 +00:00
< a href = "https://github.com/gamosoft/NoteDiscovery" class = "github-link" target = "_blank" rel = "noopener" > Star on GitHub< / a > •
< a href = "https://github.com/gamosoft/NoteDiscovery/issues" class = "github-link" target = "_blank" rel = "noopener" > Report Issues< / a >
2025-11-09 11:42:01 +00:00
< / p >
2025-11-09 10:42:51 +00:00
< / footer >
< / div >
< script >
// Theme management
function toggleTheme() {
const html = document.documentElement;
const currentTheme = html.getAttribute('data-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
html.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
// Update icon
const icon = document.getElementById('theme-icon');
icon.textContent = newTheme === 'light' ? '🌙' : '☀️';
}
// Load saved theme on page load
(function() {
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);
// Update icon
const icon = document.getElementById('theme-icon');
icon.textContent = savedTheme === 'light' ? '🌙' : '☀️';
})();
2025-12-07 13:03:38 +00:00
// Scroll Animations with Intersection Observer
(function() {
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animated');
// Optionally stop observing after animation
// observer.unobserve(entry.target);
}
});
}, observerOptions);
// Observe all animate-on-scroll elements
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.animate-on-scroll').forEach(el => {
observer.observe(el);
});
});
})();
// Screenshot Carousel
let currentSlide = 0;
const totalSlides = 4;
let autoPlayInterval;
function updateCarousel() {
const track = document.getElementById('carouselTrack');
if (track) {
track.style.transform = `translateX(-${currentSlide * 100}%)`;
}
// Update indicators
document.querySelectorAll('.carousel-indicator').forEach((indicator, index) => {
indicator.classList.toggle('active', index === currentSlide);
});
}
function moveCarousel(direction) {
currentSlide = (currentSlide + direction + totalSlides) % totalSlides;
updateCarousel();
resetAutoPlay();
}
function goToSlide(index) {
currentSlide = index;
updateCarousel();
resetAutoPlay();
}
function resetAutoPlay() {
clearInterval(autoPlayInterval);
autoPlayInterval = setInterval(() => moveCarousel(1), 5000);
}
// Start auto-play on load
document.addEventListener('DOMContentLoaded', () => {
autoPlayInterval = setInterval(() => moveCarousel(1), 5000);
});
// Pause auto-play on hover
document.addEventListener('DOMContentLoaded', () => {
const carousel = document.querySelector('.carousel');
if (carousel) {
carousel.addEventListener('mouseenter', () => clearInterval(autoPlayInterval));
carousel.addEventListener('mouseleave', resetAutoPlay);
}
});
// Touch/Swipe support for mobile
(function() {
let touchStartX = 0;
let touchEndX = 0;
document.addEventListener('DOMContentLoaded', () => {
const carousel = document.querySelector('.carousel');
if (!carousel) return;
carousel.addEventListener('touchstart', e => {
touchStartX = e.changedTouches[0].screenX;
}, { passive: true });
carousel.addEventListener('touchend', e => {
touchEndX = e.changedTouches[0].screenX;
handleSwipe();
}, { passive: true });
function handleSwipe() {
const swipeThreshold = 50;
const diff = touchStartX - touchEndX;
if (Math.abs(diff) > swipeThreshold) {
if (diff > 0) {
moveCarousel(1); // Swipe left = next
} else {
moveCarousel(-1); // Swipe right = prev
}
}
}
});
})();
2025-11-09 10:42:51 +00:00
< / script >
2025-11-09 11:23:15 +00:00
<!-- Structured Data / JSON - LD for Rich Snippets -->
< script type = "application/ld+json" >
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "NoteDiscovery",
2025-11-18 17:04:42 +00:00
"description": "A lightweight, Obsidian and Evernote alternative, privacy-focused Markdown note-taking application with LaTeX math, Mermaid diagrams, and code highlighting. Self-hosted, free, and open source.",
2025-11-09 11:23:15 +00:00
"url": "https://www.notediscovery.com",
"applicationCategory": "ProductivityApplication",
"operatingSystem": "Linux, Windows, macOS",
2025-12-05 11:21:25 +00:00
"featureList": "Markdown editor, Wikilinks, Graph view, LaTeX math equations, Mermaid diagrams, Code syntax highlighting, Dark mode, Plugin system, Internal links, Properties panel, HTML export, Full-text search, Self-hosted, Obsidian, Evernote, Notion, Onenote, Second brain",
2025-11-09 11:23:15 +00:00
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"author": {
"@type": "Person",
"name": "Gamosoft"
},
"softwareVersion": "1.0",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "5",
"ratingCount": "1"
}
}
< / script >
2025-11-09 10:42:51 +00:00
< / body >
< / html >
