1209 lines
44 KiB
HTML
1209 lines
44 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 wikilinks, graph view, LaTeX math, Mermaid diagrams, tags, templates, and code highlighting. 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, math equations, templates, tags, yaml frontmatter">
|
||
<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="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.">
|
||
<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="A lightweight, privacy-focused note-taking application with LaTeX math, Mermaid diagrams, tags, templates, and code highlighting. Self-hosted, free, and 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 (5 rows × 3 cols = 15 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; }
|
||
|
||
.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: 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>
|
||
<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>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>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>8 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 class="feature animate-on-scroll">
|
||
<div class="feature-icon">🌍</div>
|
||
<h3>Multi-Language</h3>
|
||
<p>Built-in translations for English, Spanish, German, and French. Easy to add more.</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>
|
||
</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, Obsidian and Evernote alternative, privacy-focused Markdown note-taking application with LaTeX math, Mermaid diagrams, and code highlighting. Self-hosted, free, and open source.",
|
||
"url": "https://www.notediscovery.com",
|
||
"applicationCategory": "ProductivityApplication",
|
||
"operatingSystem": "Linux, Windows, macOS",
|
||
"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",
|
||
"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>
|