228 lines
14 KiB
HTML
228 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="DNFS 树状笔记：以树状结构组织知识的笔记社区，支持 Markdown、链接卡片、图片与文件分享。">
|
|
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fdf6ee">
|
|
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1e1712">
|
|
<link rel="icon" href="favicon.ico">
|
|
<link rel="stylesheet" href="css/theme.css">
|
|
<link rel="stylesheet" href="css/index.css">
|
|
<title>DNFS 树状笔记 — 让知识自然成体系</title>
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<div class="wrap">
|
|
<div class="header-inner">
|
|
<h1 id="logo">
|
|
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="10.51" x2="15.42" y2="6.51"/><line x1="8.59" y1="13.49" x2="15.42" y2="17.49"/></svg>
|
|
<span>DNFS 树状笔记</span>
|
|
</h1>
|
|
<nav class="right-group" aria-label="用户操作">
|
|
<img src="favicon.ico" alt="用户头像" id="avatar" style="display:none">
|
|
<b id="name" style="display:none"></b>
|
|
<button id="enterBtn" class="btn btn-primary" style="display:none">进入笔记</button>
|
|
<button id="logoutBtn" class="btn btn-ghost" style="display:none">退出</button>
|
|
<button id="loginBtn" class="btn btn-primary">登录</button>
|
|
<button id="registerBtn" class="btn btn-ghost">注册</button>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="main-page">
|
|
<!-- ===== Hero ===== -->
|
|
<section class="hero">
|
|
<div class="hero-bg" aria-hidden="true">
|
|
<svg class="hero-tree" viewBox="0 0 800 440" fill="none">
|
|
<defs>
|
|
<radialGradient id="glow" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="currentColor" stop-opacity="0.18"/>
|
|
<stop offset="100%" stop-color="currentColor" stop-opacity="0"/>
|
|
</radialGradient>
|
|
</defs>
|
|
<circle cx="400" cy="210" r="180" fill="url(#glow)"/>
|
|
<g class="tree-branches" stroke="currentColor" stroke-linecap="round">
|
|
<path pathLength="100" d="M400 400 L400 295" stroke-width="2.5"/>
|
|
<path pathLength="100" d="M400 295 C 365 265, 310 240, 260 205" stroke-width="2"/>
|
|
<path pathLength="100" d="M400 295 C 435 265, 490 240, 540 205" stroke-width="2"/>
|
|
<path pathLength="100" d="M260 205 C 238 178, 210 152, 185 120" stroke-width="1.5"/>
|
|
<path pathLength="100" d="M260 205 C 278 178, 300 152, 318 120" stroke-width="1.5"/>
|
|
<path pathLength="100" d="M540 205 C 518 178, 496 152, 478 120" stroke-width="1.5"/>
|
|
<path pathLength="100" d="M540 205 C 562 178, 590 152, 615 120" stroke-width="1.5"/>
|
|
<path pathLength="100" d="M185 120 C 172 100, 160 82, 150 60" stroke-width="1"/>
|
|
<path pathLength="100" d="M318 120 C 328 100, 338 82, 345 60" stroke-width="1"/>
|
|
<path pathLength="100" d="M478 120 C 468 100, 458 82, 452 60" stroke-width="1"/>
|
|
<path pathLength="100" d="M615 120 C 628 100, 640 82, 650 60" stroke-width="1"/>
|
|
</g>
|
|
<g class="tree-nodes" fill="currentColor">
|
|
<circle cx="400" cy="400" r="7" opacity=".9"/>
|
|
<circle cx="400" cy="295" r="5.5"/>
|
|
<circle cx="260" cy="205" r="5"/>
|
|
<circle cx="540" cy="205" r="5"/>
|
|
<circle cx="185" cy="120" r="4"/>
|
|
<circle cx="318" cy="120" r="4"/>
|
|
<circle cx="478" cy="120" r="4"/>
|
|
<circle cx="615" cy="120" r="4"/>
|
|
<circle cx="150" cy="60" r="3" opacity=".65"/>
|
|
<circle cx="345" cy="60" r="3" opacity=".65"/>
|
|
<circle cx="452" cy="60" r="3" opacity=".65"/>
|
|
<circle cx="650" cy="60" r="3" opacity=".65"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="wrap hero-inner">
|
|
<p class="hero-badge"><span class="badge-dot"></span>树状结构 · Markdown · 多媒体分享</p>
|
|
<h2 class="hero-title">让知识像树一样<br><span class="accent-text">自然生长</span></h2>
|
|
<p class="hero-sub">每个节点都可以生长出子节点，像树枝一样层层延展<br>让零散的想法汇聚成体系</p>
|
|
<div class="hero-actions">
|
|
<button class="btn btn-primary btn-lg" data-cta>开始记录</button>
|
|
<a class="btn btn-ghost btn-lg" href="#features">了解更多</a>
|
|
</div>
|
|
</div>
|
|
|
|
<a class="scroll-hint" href="#features" aria-label="下滑了解特性">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
|
|
</a>
|
|
</section>
|
|
|
|
<!-- ===== 核心特性 ===== -->
|
|
<section id="features" class="section features-section">
|
|
<div class="wrap">
|
|
<p class="section-eyebrow">核心特性</p>
|
|
<h2 class="section-title">为什么选择树状笔记</h2>
|
|
<p class="section-sub">从灵感到体系，让知识在树上自然生长</p>
|
|
<div class="features">
|
|
<div class="feature-card">
|
|
<div class="feature-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="10.51" x2="15.42" y2="6.51"/><line x1="8.59" y1="13.49" x2="15.42" y2="17.49"/></svg>
|
|
</div>
|
|
<div class="feature-body">
|
|
<h3>树状结构组织</h3>
|
|
<p>每个节点都能生长出子节点，像树枝般层层延展，让零散的想法自然汇聚成体系。</p>
|
|
</div>
|
|
<span class="feature-tag">无限层级</span>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
|
|
</div>
|
|
<div class="feature-body">
|
|
<h3>Markdown 写作</h3>
|
|
<p>原生支持 Markdown 渲染，代码块、引用、列表一应俱全，专注内容本身。</p>
|
|
</div>
|
|
<span class="feature-tag">专注写作</span>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
|
|
</div>
|
|
<div class="feature-body">
|
|
<h3>多媒体分享</h3>
|
|
<p>链接卡片、图片直显、文件下载，多种内容形态一站承载，分享更自由。</p>
|
|
</div>
|
|
<span class="feature-tag">自由分享</span>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
|
|
</div>
|
|
<div class="feature-body">
|
|
<h3>深色模式</h3>
|
|
<p>跟随系统偏好自动切换明暗主题，深夜记录也不刺眼，日夜皆宜。</p>
|
|
</div>
|
|
<span class="feature-tag">日夜皆宜</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== 关于本站 ===== -->
|
|
<section class="section about-section">
|
|
<div class="wrap">
|
|
<p class="section-eyebrow">我们的理念</p>
|
|
<h2 class="section-title">关于本站</h2>
|
|
<div class="about-panel">
|
|
<svg class="about-deco" viewBox="0 0 200 200" fill="none" aria-hidden="true">
|
|
<circle cx="100" cy="100" r="90" stroke="currentColor" stroke-width=".6" opacity=".15"/>
|
|
<circle cx="100" cy="100" r="60" stroke="currentColor" stroke-width=".5" opacity=".10"/>
|
|
<circle cx="100" cy="100" r="30" stroke="currentColor" stroke-width=".4" opacity=".08"/>
|
|
</svg>
|
|
<p class="site-intro">
|
|
DNFS 树状笔记是一个以树状结构组织内容的笔记社区：每个节点都可以生长出子节点，
|
|
像树枝一样层层延展，让知识自然成体系。支持 Markdown 文本、链接卡片、图片与文件分享，
|
|
注册登录后即可创建属于你自己的知识树。
|
|
</p>
|
|
<ul class="about-stats">
|
|
<li><b>∞</b><span>节点层级无上限</span></li>
|
|
<li><b>MD</b><span>原生 Markdown 渲染</span></li>
|
|
<li><b>4+</b><span>内容形态一站承载</span></li>
|
|
</ul>
|
|
</div>
|
|
<nav class="quick-links" aria-label="快捷链接">
|
|
<a href="allcolor.html">调色板</a>
|
|
<a href="games/">小游戏</a>
|
|
<a href="LICENSE.html">用户使用条例</a>
|
|
</nav>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== 结尾 CTA ===== -->
|
|
<section class="section cta-section" aria-label="立即开始">
|
|
<div class="wrap">
|
|
<div class="cta-band">
|
|
<svg class="cta-tree" viewBox="0 0 400 200" fill="none" aria-hidden="true">
|
|
<g stroke="currentColor" stroke-width="1.2" stroke-linecap="round" opacity=".6">
|
|
<path d="M200 190 L200 140"/>
|
|
<path d="M200 140 C 175 120, 145 105, 120 85"/>
|
|
<path d="M200 140 C 225 120, 255 105, 280 85"/>
|
|
<path d="M120 85 C 105 65, 90 50, 80 30"/>
|
|
<path d="M120 85 C 135 65, 148 50, 155 30"/>
|
|
<path d="M280 85 C 265 65, 252 50, 245 30"/>
|
|
<path d="M280 85 C 295 65, 310 50, 320 30"/>
|
|
</g>
|
|
<g fill="currentColor" opacity=".5">
|
|
<circle cx="200" cy="190" r="4"/>
|
|
<circle cx="200" cy="140" r="3"/>
|
|
<circle cx="120" cy="85" r="2.5"/>
|
|
<circle cx="280" cy="85" r="2.5"/>
|
|
<circle cx="80" cy="30" r="2"/>
|
|
<circle cx="155" cy="30" r="2"/>
|
|
<circle cx="245" cy="30" r="2"/>
|
|
<circle cx="320" cy="30" r="2"/>
|
|
</g>
|
|
</svg>
|
|
<h2 class="cta-title">准备好让知识生长了吗？</h2>
|
|
<p class="cta-sub">注册一个账号，种下你的第一棵知识树</p>
|
|
<button class="btn btn-cta btn-lg" data-cta>立即开始</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<div class="wrap">
|
|
<div class="footer-inner">
|
|
<div class="footer-brand">
|
|
<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="10.51" x2="15.42" y2="6.51"/><line x1="8.59" y1="13.49" x2="15.42" y2="17.49"/></svg>
|
|
<span>DNFS 树状笔记</span>
|
|
</div>
|
|
<nav class="footer-nav" aria-label="页脚导航">
|
|
<a href="dnfs.html">树状笔记</a>
|
|
<a href="allcolor.html">调色板</a>
|
|
<a href="games/">小游戏</a>
|
|
<a href="LICENSE.html">用户使用条例</a>
|
|
</nav>
|
|
<p class="footer-icp">
|
|
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">蜀ICP备2024107064号-2</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<script src="js/token_manager.js"></script>
|
|
<script src="js/index.js"></script>
|
|
</body>
|
|
</html>
|