From 66963092a3e9db5affeb2bce6f0d9e93f4a6004e Mon Sep 17 00:00:00 2001 From: qing <1776177662@qq.com> Date: Sat, 1 Aug 2026 20:56:39 +0800 Subject: [PATCH] =?UTF-8?q?feat(static):=20=E4=BC=98=E5=8C=96=E7=A4=BE?= =?UTF-8?q?=E5=8C=BA=E9=A6=96=E9=A1=B5=20=E2=80=94=20Hero=E9=A6=96?= =?UTF-8?q?=E5=B1=8F+=E7=89=B9=E6=80=A7=E5=8D=A1=E7=89=87+=E6=82=AC?= =?UTF-8?q?=E6=B5=AE=E6=AF=9B=E7=8E=BB=E7=92=83=E5=AF=BC=E8=88=AA=EF=BC=8C?= =?UTF-8?q?CTA=E9=9A=8F=E7=99=BB=E5=BD=95=E6=80=81=E5=88=87=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/public/css/index.css | 203 ++++++++++++++++++++++++++++++++++-- static/public/index.html | 102 ++++++++++++++---- static/public/js/index.js | 20 +++- 3 files changed, 292 insertions(+), 33 deletions(-) diff --git a/static/public/css/index.css b/static/public/css/index.css index 73597f3..2b933e0 100644 --- a/static/public/css/index.css +++ b/static/public/css/index.css @@ -4,31 +4,177 @@ body { align-items: normal; } -/* ===== 头部 ===== */ +@media (prefers-reduced-motion: no-preference) { + html { scroll-behavior: smooth; } +} + +/* ===== 按钮 ===== */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.55rem 1.3rem; + font-size: 0.88rem; + font-weight: 600; + font-family: inherit; + border: 1px solid transparent; + border-radius: var(--radius-sm); + cursor: pointer; + text-decoration: none; + line-height: 1.4; + transition: opacity 0.15s, transform 0.1s, background 0.15s, border-color 0.15s; +} +.btn:active { transform: scale(0.96); } +.btn-primary { background: var(--accent); color: #fff; } +.btn-primary:hover { background: var(--accent-dark); opacity: 1; } +.btn-ghost { background: var(--accent-soft); color: var(--accent-dark); } +.btn-ghost:hover { border-color: var(--accent); opacity: 1; } +.btn-lg { padding: 0.7rem 1.9rem; font-size: 1rem; border-radius: var(--radius-md); } + +/* ===== 头部：悬浮毛玻璃导航（镜像 minimap/userpanel 风格） ===== */ .header { + position: sticky; + top: 0.75rem; + z-index: 100; display: flex; justify-content: space-between; align-items: center; + flex-wrap: wrap; + gap: 0.5rem; width: 100%; + max-width: 960px; + margin: 0 auto; + padding: 0.5rem 1rem; + border-radius: var(--radius-md); + background: rgba(253, 246, 238, 0.72); + border: 1px solid var(--border-light); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + box-shadow: var(--shadow-md); + transition: background 0.2s, border-color 0.2s; } +@media (prefers-color-scheme: dark) { + .header { + background: rgba(30, 23, 18, 0.72); + border-color: var(--border); + } +} + +.header h1 { + font-size: 1.15rem; + cursor: pointer; + user-select: none; + transition: color 0.15s; +} +.header h1:hover { color: var(--accent); } .right-group { display: flex; align-items: center; -} - -.right-group > img, -.right-group > b, -.right-group > button { - margin-left: 5px; - margin-right: 5px; + flex-wrap: wrap; + gap: 0.4rem; } #avatar { + width: 36px; + height: 36px; border-radius: 50%; + border: 1.5px solid var(--border); + object-fit: cover; } -/* ===== 网站简介 ===== */ +#name { + font-size: 0.88rem; + max-width: 120px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* ===== Hero 首屏 ===== */ +.hero { + position: relative; + text-align: center; + padding: 4rem 1rem 3rem; +} +.hero::before { + content: ""; + position: absolute; + inset: 0; + background: radial-gradient(ellipse 60% 50% at 50% 30%, var(--accent-glow), transparent 70%); + pointer-events: none; +} +.hero > * { position: relative; } +.hero-title { + font-size: clamp(1.8rem, 5vw, 2.6rem); + font-weight: 800; + line-height: 1.35; + letter-spacing: 0.02em; + margin-bottom: 0.75rem; +} +.accent-text { color: var(--accent); } +.hero-sub { + font-size: 1.05rem; + color: var(--fg-secondary); +} +.hero-actions { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 0.75rem; + margin-top: 1.75rem; +} + +/* ===== 特性卡片 ===== */ +.section-title { + text-align: center; + margin-top: 3rem; +} +.features { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); + gap: 0.9rem; + width: 100%; + max-width: 960px; + margin: 0 auto; +} +.feature-card { + background: var(--card); + border: 1px solid var(--border-light); + border-radius: var(--radius-md); + padding: 1.4rem 1.25rem; + box-shadow: var(--shadow-sm); + transition: transform 0.18s, box-shadow 0.2s, border-color 0.2s; +} +.feature-card:hover { + transform: translateY(-3px); + border-color: var(--border); + box-shadow: var(--shadow-md); +} +.feature-icon { + display: flex; + align-items: center; + justify-content: center; + width: 38px; + height: 38px; + margin-bottom: 0.75rem; + border-radius: var(--radius-sm); + background: var(--accent-soft); + color: var(--accent-dark); +} +.feature-icon svg { width: 20px; height: 20px; } +.feature-card h3 { margin-bottom: 0.35rem; } +.feature-card p { + font-size: 0.86rem; + line-height: 1.65; + color: var(--fg-secondary); +} + +/* ===== 关于本站 ===== */ +.about { + text-align: center; + padding-bottom: 2rem; +} .site-intro { max-width: 640px; margin: 0 auto; @@ -36,3 +182,42 @@ body { line-height: 1.9; color: var(--fg-secondary); } +.quick-links { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 1.25rem; + margin-top: 1.5rem; +} +.quick-links a { + font-size: 0.85rem; + color: var(--muted); + text-decoration: none; + transition: color 0.15s; +} +.quick-links a:hover { color: var(--accent); } + +/* ===== 入场动画 ===== */ +@keyframes fade-up { + from { opacity: 0; transform: translateY(12px); } + to { opacity: 1; transform: none; } +} +@media (prefers-reduced-motion: no-preference) { + .hero > *, .feature-card, .about { animation: fade-up 0.5s ease both; } + .hero-sub { animation-delay: 0.08s; } + .hero-actions { animation-delay: 0.16s; } + .feature-card:nth-child(2) { animation-delay: 0.06s; } + .feature-card:nth-child(3) { animation-delay: 0.12s; } + .feature-card:nth-child(4) { animation-delay: 0.18s; } +} + +/* ===== 响应式 ===== */ +@media (max-width: 480px) { + .header { top: 0.5rem; padding: 0.45rem 0.75rem; } + .header h1 { font-size: 1rem; } + #name { max-width: 72px; } + .hero { padding: 2.5rem 0.5rem 2rem; } + .hero-sub { font-size: 0.95rem; } + .hero-actions { flex-direction: column; align-items: stretch; } + .section-title { margin-top: 2rem; } +} diff --git a/static/public/index.html b/static/public/index.html index e2b1eff..f6c31b9 100644 --- a/static/public/index.html +++ b/static/public/index.html @@ -1,35 +1,91 @@ - + + + + + - DNFS 欢迎来到树状笔记 + DNFS 树状笔记 — 让知识自然成体系
-

DNFS 树状笔记

-
- 头像加载失败 - DNFS - - - - -
+

DNFS 树状笔记

+
-
-

关于本站

-

- DNFS 树状笔记是一个以树状结构组织内容的笔记社区：每个节点都可以生长出子节点， - 像树枝一样层层延展，让知识自然成体系。支持 Markdown 文本、链接卡片、图片与文件分享， - 注册登录后即可创建属于你自己的知识树。 -

-
+ +
+
+

让知识像树一样
自然生长

+

每个节点都可以生长出子节点，像树枝一样层层延展

+
+ + 了解更多 +
+
+ +
+

为什么选择树状笔记

+
+
+ +

树状结构组织

+

每个节点都能生长出子节点，像树枝般层层延展，让零散的想法自然汇聚成体系。

+
+
+ +

Markdown 写作

+

原生支持 Markdown 渲染，代码块、引用、列表一应俱全，专注内容本身。

+
+
+ +

多媒体分享

+

链接卡片、图片直显、文件下载，多种内容形态一站承载，分享更自由。

+
+
+ +

深色模式

+

跟随系统偏好自动切换明暗主题，日夜皆宜的舒适阅读体验。

+
+
+
+ +
+

关于本站

+

+ DNFS 树状笔记是一个以树状结构组织内容的笔记社区：每个节点都可以生长出子节点， + 像树枝一样层层延展，让知识自然成体系。支持 Markdown 文本、链接卡片、图片与文件分享， + 注册登录后即可创建属于你自己的知识树。 +

+
+ 调色板 + 小游戏 + 用户使用条例 +
+
+
+ - + 蜀ICP备2024107064号-2 + + - \ No newline at end of file + diff --git a/static/public/js/index.js b/static/public/js/index.js index 15c6706..bb560ed 100644 --- a/static/public/js/index.js +++ b/static/public/js/index.js @@ -1,16 +1,30 @@ /* index.js — 社区首页逻辑 * * 登录态检测：POST /whoami（HttpOnly q4_token Cookie 自动携带，JS 不经手 Token） - * 已登录：显示用户名与"进入笔记/退出"按钮；未登录：显示"登录/注册" + * 已登录：显示头像/用户名与"进入笔记/退出"按钮，首屏 CTA 指向笔记页 + * 未登录：显示"登录/注册"，首屏 CTA 指向登录页 */ (function () { 'use strict'; const nameEl = document.getElementById('name'); + const avatarEl = document.getElementById('avatar'); const enterBtn = document.getElementById('enterBtn'); const logoutBtn = document.getElementById('logoutBtn'); const loginBtn = document.getElementById('loginBtn'); const registerBtn = document.getElementById('registerBtn'); + const ctaBtn = document.getElementById('ctaBtn'); + const logoEl = document.getElementById('logo'); + + let loggedIn = false; + + function go(url) { window.location.href = url; } + + logoEl.addEventListener('click', () => go('index.html')); + enterBtn.addEventListener('click', () => go('dnfs.html')); + loginBtn.addEventListener('click', () => go('login.html')); + registerBtn.addEventListener('click', () => go('register.html')); + ctaBtn.addEventListener('click', () => go(loggedIn ? 'dnfs.html' : 'login.html')); async function checkLogin() { try { @@ -18,11 +32,15 @@ if (!res.ok) return; const data = await res.json(); if (data && data.login && data.user) { + loggedIn = true; nameEl.textContent = String(data.user); + nameEl.style.display = ''; + avatarEl.style.display = ''; enterBtn.style.display = ''; logoutBtn.style.display = ''; loginBtn.style.display = 'none'; registerBtn.style.display = 'none'; + ctaBtn.textContent = '进入我的知识树'; } } catch (e) { console.warn('index: 登录态检测失败', e.message);