1225 lines
45 KiB
HTML
1225 lines
45 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" data-theme="light">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
<!-- Primary Meta Tags -->
|
||
<title>NoteDiscovery - Your Self-Hosted Knowledge Base</title>
|
||
<meta name="title" content="NoteDiscovery - Your Self-Hosted Knowledge Base">
|
||
<meta name="description" content="A lightweight, privacy-focused Markdown note-taking application with AI assistant integration (MCP), wikilinks, graph view, embedded drawing editor, LaTeX math, Mermaid diagrams, tags, templates, and code highlighting. Works with Claude, Cursor, and other AI tools. Self-hosted, free, and open source.">
|
||
<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, drawing, sketch, whiteboard, math equations, templates, tags, yaml frontmatter, AI assistant, MCP, model context protocol, Claude, Cursor, AI notes, AI knowledge base, AI-powered notes">
|
||
<meta name="author" content="Gamosoft">
|
||
<meta name="robots" content="index, follow">
|
||
<link rel="canonical" href="https://www.notediscovery.com">
|
||
|
||
<!-- Open Graph / Facebook -->
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://www.notediscovery.com">
|
||
<meta property="og:title" content="NoteDiscovery - Your Self-Hosted Knowledge Base">
|
||
<meta property="og:description" content="AI-powered note-taking with MCP integration for Claude, Cursor & more. LaTeX math, Mermaid diagrams, drawing editor, graph view, wikilinks. Self-hosted, free, and open source.">
|
||
<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">
|
||
<meta property="og:site_name" content="NoteDiscovery">
|
||
|
||
<!-- Twitter Card -->
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:site" content="@gamosoft">
|
||
<meta name="twitter:creator" content="@gamosoft">
|
||
<meta name="twitter:title" content="NoteDiscovery - Your Self-Hosted Knowledge Base">
|
||
<meta name="twitter:description" content="AI-powered note-taking with MCP integration for Claude & Cursor. LaTeX, Mermaid diagrams, drawing editor, graph view. Self-hosted, free, open source.">
|
||
<meta name="twitter:image" content="https://www.notediscovery.com/og-image.png">
|
||
<meta name="twitter:image:alt" content="NoteDiscovery - Self-hosted note-taking application interface">
|
||
|
||
<!-- Favicon -->
|
||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||
<link rel="apple-touch-icon" href="logo.svg">
|
||
|
||
<!-- Theme Color -->
|
||
<meta name="theme-color" content="#667eea">
|
||
<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;
|
||
}
|
||
|
||
.header-buttons {
|
||
position: fixed;
|
||
top: 1rem;
|
||
right: 1rem;
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
align-items: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.theme-toggle {
|
||
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);
|
||
}
|
||
|
||
.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);
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.cta-buttons {
|
||
display: flex;
|
||
gap: 1rem;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
margin-top: 1.5rem;
|
||
}
|
||
|
||
.cta-button {
|
||
display: inline-block;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
padding: 1rem 2.5rem;
|
||
border-radius: 50px;
|
||
text-decoration: none;
|
||
font-size: 1.1rem;
|
||
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);
|
||
}
|
||
|
||
.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: "▶ ";
|
||
}
|
||
|
||
.demo-notice {
|
||
margin-top: 1rem;
|
||
font-size: 0.85rem;
|
||
color: #6b7280;
|
||
font-style: italic;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
/* 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 (16 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; }
|
||
.feature.animated:nth-child(14) { animation-delay: 0.3s; }
|
||
.feature.animated:nth-child(15) { animation-delay: 0.4s; }
|
||
.feature.animated:nth-child(16) { animation-delay: 0.45s; }
|
||
|
||
.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;
|
||
}
|
||
|
||
/* 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%;
|
||
}
|
||
|
||
.screenshot-frame {
|
||
background: var(--card-bg);
|
||
border-radius: 12px;
|
||
padding: 0.5rem;
|
||
box-shadow: 0 20px 60px var(--shadow);
|
||
transition: box-shadow 0.3s ease, background 0.3s ease;
|
||
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;
|
||
}
|
||
|
||
.screenshot-title {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 0.85rem;
|
||
color: var(--text-secondary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
/* 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);
|
||
}
|
||
|
||
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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
h1 {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.tagline {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.hero, .benefits {
|
||
padding: 2rem;
|
||
}
|
||
|
||
.features {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.header-buttons {
|
||
top: 0.5rem;
|
||
right: 0.5rem;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.theme-toggle {
|
||
padding: 0.4rem 0.8rem;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.kofi-mini {
|
||
padding: 0.4rem 0.8rem;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.logo {
|
||
width: 80px;
|
||
height: 80px;
|
||
}
|
||
|
||
.support-button {
|
||
padding: 0.5rem 1.2rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
</style>
|
||
|
||
<!-- 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>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<div class="header-buttons">
|
||
<a href="https://ko-fi.com/gamosoft" class="kofi-mini" target="_blank" rel="noopener" aria-label="Support on Ko-fi">
|
||
<span>☕</span>
|
||
<span>Support</span>
|
||
</a>
|
||
<button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle theme">
|
||
<span id="theme-icon">🌙</span>
|
||
</button>
|
||
</div>
|
||
<img src="logo.svg" alt="NoteDiscovery Logo" class="logo">
|
||
<h1>NoteDiscovery</h1>
|
||
<p class="tagline">Your Self-Hosted Knowledge Base</p>
|
||
</header>
|
||
|
||
<div class="hero animate-on-scroll">
|
||
<div class="hero-content">
|
||
<h2>Take Control of Your Notes</h2>
|
||
<p>A lightweight, privacy-focused note-taking application with powerful features: AI assistant integration (MCP), LaTeX math equations, Mermaid diagrams, an embedded drawing editor for quick sketches, smart tags, custom templates, code highlighting, and more. Write and organize your notes with a beautiful, modern interface all running on your own server.</p>
|
||
<div class="cta-buttons">
|
||
<a href="https://gamosoft-notediscovery-demo.hf.space" class="cta-button demo" target="_blank" rel="noopener">Try Live Demo</a>
|
||
<a href="https://github.com/gamosoft/NoteDiscovery" class="cta-button" target="_blank" rel="noopener">Get Started on GitHub →</a>
|
||
</div>
|
||
<p class="demo-notice">✨ Demo resets daily · For demonstration purposes only</p>
|
||
<div class="pikapods-deploy" style="margin-top: 1.5rem;">
|
||
<p style="margin-bottom: 0.75rem; font-size: 0.95rem;">☁️ Or deploy your own instance in one click:</p>
|
||
<a href="https://www.pikapods.com/pods?run=notediscovery" target="_blank" rel="noopener">
|
||
<img src="https://www.pikapods.com/static/run-button.svg" alt="Run on PikaPods" style="height: 40px; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="screenshot-section animate-on-scroll">
|
||
<h2>See It in Action</h2>
|
||
<p>A clean, intuitive interface designed for productivity and focus</p>
|
||
<div class="screenshot-container">
|
||
<div class="carousel">
|
||
<div class="carousel-track" id="carouselTrack">
|
||
<!-- Slide 1: Main Interface -->
|
||
<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">Editor View • Main Interface</span>
|
||
</div>
|
||
<img src="carousel-1.jpg" alt="NoteDiscovery Main Interface" loading="lazy">
|
||
</div>
|
||
</div>
|
||
<!-- Slide 2: Search -->
|
||
<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">Smart Search • Find Anything Instantly</span>
|
||
</div>
|
||
<img src="carousel-2.jpg" alt="NoteDiscovery Smart Search" loading="lazy">
|
||
</div>
|
||
</div>
|
||
<!-- Slide 3: Tag Filter -->
|
||
<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">Tag Filtering • Organize by Topics</span>
|
||
</div>
|
||
<img src="carousel-3.jpg" alt="NoteDiscovery Tag Filtering" loading="lazy">
|
||
</div>
|
||
</div>
|
||
<!-- Slide 4: Outline -->
|
||
<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">Outline Panel • Navigate Headings</span>
|
||
</div>
|
||
<img src="carousel-4.jpg" alt="NoteDiscovery Outline Panel" loading="lazy">
|
||
</div>
|
||
</div>
|
||
<!-- Slide 5: Card View -->
|
||
<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">Card View • Visual Organization</span>
|
||
</div>
|
||
<img src="carousel-5.jpg" alt="NoteDiscovery Card View" loading="lazy">
|
||
</div>
|
||
</div>
|
||
<!-- Slide 6: Graph View -->
|
||
<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 • Visualize Connections</span>
|
||
</div>
|
||
<img src="carousel-6.jpg" alt="NoteDiscovery Graph View" loading="lazy">
|
||
</div>
|
||
</div>
|
||
<!-- Slide 7: Mobile Support -->
|
||
<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">Mobile Ready • Notes On The Go</span>
|
||
</div>
|
||
<img src="carousel-7.png" alt="NoteDiscovery Mobile Support" loading="lazy">
|
||
</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>
|
||
<button class="carousel-indicator" onclick="goToSlide(4)" aria-label="Slide 5"></button>
|
||
<button class="carousel-indicator" onclick="goToSlide(5)" aria-label="Slide 6"></button>
|
||
<button class="carousel-indicator" onclick="goToSlide(6)" aria-label="Slide 7"></button>
|
||
</div>
|
||
<button class="carousel-btn" onclick="moveCarousel(1)" aria-label="Next screenshot">›</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="features">
|
||
<div class="feature animate-on-scroll">
|
||
<div class="feature-icon">🔒</div>
|
||
<h3>100% Private</h3>
|
||
<p>Your notes never leave your server. Complete data ownership and privacy.</p>
|
||
</div>
|
||
|
||
<div class="feature animate-on-scroll">
|
||
<div class="feature-icon">💰</div>
|
||
<h3>Completely Free</h3>
|
||
<p>No subscriptions, no hidden fees. Free and open source forever.</p>
|
||
</div>
|
||
|
||
<div class="feature animate-on-scroll">
|
||
<div class="feature-icon">🤖</div>
|
||
<h3>AI Assistant Ready</h3>
|
||
<p>MCP integration lets Claude, Cursor & other AI tools search, create, and organize your notes.</p>
|
||
</div>
|
||
|
||
<div class="feature animate-on-scroll">
|
||
<div class="feature-icon">🧮</div>
|
||
<h3>LaTeX Math</h3>
|
||
<p>Beautiful equation rendering with MathJax. Perfect for scientific notes.</p>
|
||
</div>
|
||
|
||
<div class="feature animate-on-scroll">
|
||
<div class="feature-icon">📊</div>
|
||
<h3>Diagrams</h3>
|
||
<p>Create flowcharts, mind maps, and diagrams with Mermaid syntax.</p>
|
||
</div>
|
||
|
||
<div class="feature animate-on-scroll">
|
||
<div class="feature-icon">✏️</div>
|
||
<h3>Drawing editor</h3>
|
||
<p>Sketch and annotate as PNG files next to your notes—autosave, shapes, eraser, and eyedropper.</p>
|
||
</div>
|
||
|
||
<div class="feature animate-on-scroll">
|
||
<div class="feature-icon">💻</div>
|
||
<h3>Code Highlighting</h3>
|
||
<p>Syntax highlighting for popular coding languages. Developer-friendly notes.</p>
|
||
</div>
|
||
|
||
<div class="feature animate-on-scroll">
|
||
<div class="feature-icon">🏷️</div>
|
||
<h3>Smart Tags</h3>
|
||
<p>Organize with YAML frontmatter tags. Collapsible properties panel shows metadata at a glance.</p>
|
||
</div>
|
||
|
||
<div class="feature animate-on-scroll">
|
||
<div class="feature-icon">📋</div>
|
||
<h3>Note Templates</h3>
|
||
<p>Create from custom templates with dynamic placeholders. Meeting notes, journals, and more.</p>
|
||
</div>
|
||
|
||
<div class="feature animate-on-scroll">
|
||
<div class="feature-icon">🕸️</div>
|
||
<h3>Graph View</h3>
|
||
<p>Interactive visualization of connected notes. Drag to explore relationships.</p>
|
||
</div>
|
||
|
||
<div class="feature animate-on-scroll">
|
||
<div class="feature-icon">📂</div>
|
||
<h3>Simple Storage</h3>
|
||
<p>Plain markdown files in folders. No vendor lock-in, easy backups.</p>
|
||
</div>
|
||
|
||
<div class="feature animate-on-scroll">
|
||
<div class="feature-icon">🎨</div>
|
||
<h3>Beautiful Themes</h3>
|
||
<p>Several built-in themes with dark/light modes and full customization.</p>
|
||
</div>
|
||
|
||
<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>
|
||
|
||
<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>
|
||
|
||
<div class="feature animate-on-scroll">
|
||
<div class="feature-icon">🔌</div>
|
||
<h3>Extensible</h3>
|
||
<p>Plugin system lets you add custom features and integrations.</p>
|
||
</div>
|
||
|
||
<div class="feature animate-on-scroll">
|
||
<div class="feature-icon">📲</div>
|
||
<h3>Install as App</h3>
|
||
<p>Progressive Web App (PWA) - install on desktop or mobile for a native experience.</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="benefits animate-on-scroll">
|
||
<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>Image Support</strong>
|
||
Drag & drop images directly
|
||
</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>Quick Switcher</strong>
|
||
Jump to any note with a shortcut
|
||
</div>
|
||
</div>
|
||
|
||
<div class="benefit-item">
|
||
<span class="emoji">🔐</span>
|
||
<div class="text">
|
||
<strong>Optional Auth</strong>
|
||
Password protection when needed
|
||
</div>
|
||
</div>
|
||
|
||
<div class="benefit-item">
|
||
<span class="emoji">🌐</span>
|
||
<div class="text">
|
||
<strong>Public Sharing</strong>
|
||
Share notes via link, even with auth enabled
|
||
</div>
|
||
</div>
|
||
|
||
<div class="benefit-item">
|
||
<span class="emoji">🔗</span>
|
||
<div class="text">
|
||
<strong>Wikilinks</strong>
|
||
[[Link notes]] Obsidian-style
|
||
</div>
|
||
</div>
|
||
|
||
<div class="benefit-item">
|
||
<span class="emoji">🌍</span>
|
||
<div class="text">
|
||
<strong>Multi-Language</strong>
|
||
Multiple interface languages; add your own via locale files
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero animate-on-scroll">
|
||
<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>
|
||
<div class="cta-buttons">
|
||
<a href="https://gamosoft-notediscovery-demo.hf.space" class="cta-button demo" target="_blank" rel="noopener">Try Live Demo</a>
|
||
<a href="https://github.com/gamosoft/NoteDiscovery" class="cta-button" target="_blank" rel="noopener">View on GitHub →</a>
|
||
</div>
|
||
<p class="demo-notice">✨ Demo resets daily · For demonstration purposes only</p>
|
||
<div class="pikapods-deploy" style="margin-top: 1.5rem;">
|
||
<p style="margin-bottom: 0.75rem; font-size: 0.95rem;">☁️ Don't want to self-host? Deploy on PikaPods:</p>
|
||
<a href="https://www.pikapods.com/pods?run=notediscovery" target="_blank" rel="noopener">
|
||
<img src="https://www.pikapods.com/static/run-button.svg" alt="Run on PikaPods" style="height: 40px; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer>
|
||
<p>Made with ❤️ for the self-hosting community</p>
|
||
<p>
|
||
<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>
|
||
</p>
|
||
</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' ? '🌙' : '☀️';
|
||
}
|
||
|
||
function getBrowserThemePreference() {
|
||
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||
return prefersDarkMode ? 'dark' : 'light';
|
||
}
|
||
|
||
// Load saved theme on page load
|
||
(function() {
|
||
const savedTheme = localStorage.getItem('theme') || getBrowserThemePreference();
|
||
document.documentElement.setAttribute('data-theme', savedTheme);
|
||
|
||
// Update icon
|
||
const icon = document.getElementById('theme-icon');
|
||
icon.textContent = savedTheme === 'light' ? '🌙' : '☀️';
|
||
})();
|
||
|
||
// 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 = 7;
|
||
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
|
||
}
|
||
}
|
||
}
|
||
});
|
||
})();
|
||
</script>
|
||
|
||
<!-- Structured Data / JSON-LD for Rich Snippets -->
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "SoftwareApplication",
|
||
"name": "NoteDiscovery",
|
||
"description": "A lightweight, AI-powered Markdown note-taking application with MCP integration for Claude, Cursor and other AI assistants. Features LaTeX math, Mermaid diagrams, drawing editor, graph view, and code highlighting. Self-hosted Obsidian and Evernote alternative. Free and open source.",
|
||
"url": "https://www.notediscovery.com",
|
||
"applicationCategory": "ProductivityApplication",
|
||
"operatingSystem": "Linux, Windows, macOS",
|
||
"featureList": "AI assistant integration, MCP (Model Context Protocol), Claude integration, Cursor integration, Markdown editor, Wikilinks, Graph view, Drawing editor, LaTeX math equations, Mermaid diagrams, Code syntax highlighting, Dark mode, Plugin system, Internal links, Properties panel, HTML export, Full-text search, Self-hosted, Obsidian alternative, Evernote alternative, Notion alternative, Second brain, AI-powered notes",
|
||
"offers": {
|
||
"@type": "Offer",
|
||
"price": "0",
|
||
"priceCurrency": "USD"
|
||
},
|
||
"author": {
|
||
"@type": "Person",
|
||
"name": "Gamosoft"
|
||
},
|
||
"softwareVersion": "1.0",
|
||
"aggregateRating": {
|
||
"@type": "AggregateRating",
|
||
"ratingValue": "5",
|
||
"ratingCount": "1"
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|