mirror of
https://gitee.com/wanwujie/deer-flow
synced 2026-04-03 06:12:14 +08:00
feat: remove demo
This commit is contained in:
Henry Li
File diff suppressed because one or more lines are too long
@@ -1,363 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>棋圣聂卫平 - 永恒的围棋传奇</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700;900&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚫</text></svg>">
|
||||
</head>
|
||||
<body>
|
||||
<!-- 水墨背景效果 -->
|
||||
<div class="ink-background"></div>
|
||||
<div class="ink-splatter"></div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<nav class="main-nav">
|
||||
<div class="nav-container">
|
||||
<div class="nav-logo">
|
||||
<span class="go-stone black"></span>
|
||||
<h1>棋圣聂卫平</h1>
|
||||
<span class="go-stone white"></span>
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="#home" class="nav-link">首页</a></li>
|
||||
<li><a href="#life" class="nav-link">生平</a></li>
|
||||
<li><a href="#achievements" class="nav-link">成就</a></li>
|
||||
<li><a href="#gallery" class="nav-link">棋局</a></li>
|
||||
<li><a href="#candle" class="nav-link">点蜡烛</a></li>
|
||||
<li><a href="#legacy" class="nav-link">传承</a></li>
|
||||
</ul>
|
||||
<button class="nav-toggle" aria-label="导航菜单">
|
||||
<span class="bar"></span>
|
||||
<span class="bar"></span>
|
||||
<span class="bar"></span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 主内容区域 -->
|
||||
<main>
|
||||
<!-- 英雄区域 -->
|
||||
<section id="home" class="hero">
|
||||
<div class="hero-content">
|
||||
<div class="hero-text">
|
||||
<h2 class="hero-title">一代<span class="highlight">棋圣</span></h2>
|
||||
<h3 class="hero-subtitle">1952 - 2026</h3>
|
||||
<p class="hero-quote">"只要是对围棋有益的事，我都愿意倾力去做。"</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="#life" class="btn btn-primary">探索传奇</a>
|
||||
<a href="#achievements" class="btn btn-outline">围棋成就</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-image">
|
||||
<div class="portrait-frame">
|
||||
<img src="https://imgcdn.yicai.com/uppics/images/2026/01/0366fe347acc0e54c6183eb0c9203e51.jpg" alt="聂卫平黑白肖像" class="portrait">
|
||||
<div class="frame-decoration"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll-indicator">
|
||||
<span class="scroll-text">向下探索</span>
|
||||
<div class="scroll-line"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 生平介绍 -->
|
||||
<section id="life" class="section life-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">生平轨迹</h2>
|
||||
<div class="section-subtitle">黑白之间，落子无悔</div>
|
||||
<div class="section-divider">
|
||||
<span class="divider-line"></span>
|
||||
<span class="divider-icon">⚫</span>
|
||||
<span class="divider-line"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">1952</div>
|
||||
<div class="timeline-content">
|
||||
<h3>生于北京</h3>
|
||||
<p>聂卫平出生于北京，童年时期受家庭熏陶开始接触围棋。</p>
|
||||
</div>
|
||||
<div class="timeline-marker">
|
||||
<div class="marker-circle"></div>
|
||||
<div class="marker-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">1962</div>
|
||||
<div class="timeline-content">
|
||||
<h3>初露锋芒</h3>
|
||||
<p>在北京六城市少儿围棋邀请赛中获得儿童组第三名，从陈毅元帅手中接过景泰蓝奖杯。</p>
|
||||
</div>
|
||||
<div class="timeline-marker">
|
||||
<div class="marker-circle"></div>
|
||||
<div class="marker-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">1973</div>
|
||||
<div class="timeline-content">
|
||||
<h3>入选国家队</h3>
|
||||
<p>中国棋院重建，21岁的聂卫平入选围棋集训队，开始职业棋手生涯。</p>
|
||||
</div>
|
||||
<div class="timeline-marker">
|
||||
<div class="marker-circle"></div>
|
||||
<div class="marker-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">1984-1988</div>
|
||||
<div class="timeline-content">
|
||||
<h3>中日擂台赛奇迹</h3>
|
||||
<p>在中日围棋擂台赛上创造11连胜神话，打破日本围棋"不可战胜"的神话，被授予"棋圣"称号。</p>
|
||||
</div>
|
||||
<div class="timeline-marker">
|
||||
<div class="marker-circle"></div>
|
||||
<div class="marker-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">2013</div>
|
||||
<div class="timeline-content">
|
||||
<h3>战胜病魔</h3>
|
||||
<p>被查出罹患癌症，以乐观态度顽强与病魔作斗争，痊愈后继续为围棋事业奔波。</p>
|
||||
</div>
|
||||
<div class="timeline-marker">
|
||||
<div class="marker-circle"></div>
|
||||
<div class="marker-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">2026</div>
|
||||
<div class="timeline-content">
|
||||
<h3>棋圣远行</h3>
|
||||
<p>2026年1月14日，聂卫平在北京逝世，享年74岁，一代棋圣落下人生最后一子。</p>
|
||||
</div>
|
||||
<div class="timeline-marker">
|
||||
<div class="marker-circle"></div>
|
||||
<div class="marker-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 主要成就 -->
|
||||
<section id="achievements" class="section achievements-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">辉煌成就</h2>
|
||||
<div class="section-subtitle">一子定乾坤，十一连胜铸传奇</div>
|
||||
<div class="section-divider">
|
||||
<span class="divider-line"></span>
|
||||
<span class="divider-icon">⚪</span>
|
||||
<span class="divider-line"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="achievements-grid">
|
||||
<div class="achievement-card">
|
||||
<div class="achievement-icon">
|
||||
<i class="fas fa-trophy"></i>
|
||||
</div>
|
||||
<h3>棋圣称号</h3>
|
||||
<p>1988年被授予"棋圣"称号，这是中国围棋界的最高荣誉，至今独此一人。</p>
|
||||
</div>
|
||||
<div class="achievement-card">
|
||||
<div class="achievement-icon">
|
||||
<i class="fas fa-flag"></i>
|
||||
</div>
|
||||
<h3>中日擂台赛11连胜</h3>
|
||||
<p>在中日围棋擂台赛上创造11连胜神话，极大振奋了民族精神和自信心。</p>
|
||||
</div>
|
||||
<div class="achievement-card">
|
||||
<div class="achievement-icon">
|
||||
<i class="fas fa-users"></i>
|
||||
</div>
|
||||
<h3>人才培养</h3>
|
||||
<p>培养常昊、古力、柯洁等20多位世界冠军，近300名职业棋手。</p>
|
||||
</div>
|
||||
<div class="achievement-card">
|
||||
<div class="achievement-icon">
|
||||
<i class="fas fa-globe-asia"></i>
|
||||
</div>
|
||||
<h3>围棋推广</h3>
|
||||
<p>推动围棋从专业走向大众，"聂旋风"席卷全国，极大增加了围棋人口。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats-container">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number" data-count="11">0</div>
|
||||
<div class="stat-label">擂台赛连胜</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number" data-count="74">0</div>
|
||||
<div class="stat-label">人生岁月</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number" data-count="300">0</div>
|
||||
<div class="stat-label">培养棋手</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number" data-count="40">0</div>
|
||||
<div class="stat-label">围棋生涯</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 围棋棋盘展示 -->
|
||||
<section id="gallery" class="section gallery-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">经典棋局</h2>
|
||||
<div class="section-subtitle">纵横十九道，妙手定乾坤</div>
|
||||
<div class="section-divider">
|
||||
<span class="divider-line"></span>
|
||||
<span class="divider-icon">⚫</span>
|
||||
<span class="divider-line"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="go-board-container">
|
||||
<div class="go-board">
|
||||
<!-- 围棋棋盘网格 -->
|
||||
<div class="board-grid"></div>
|
||||
<!-- 经典棋局棋子 -->
|
||||
<div class="board-stones">
|
||||
<!-- 这里将通过JavaScript动态生成棋子 -->
|
||||
</div>
|
||||
<div class="board-info">
|
||||
<h3>1985年首届中日擂台赛决胜局</h3>
|
||||
<p>聂卫平执黑3目半击败日本队主将藤泽秀行，打破日本围棋"不可战胜"的神话。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="game-quotes">
|
||||
<blockquote class="game-quote">
|
||||
<p>"我是从乒乓球队借的衣服，当时我想自己代表中国来比赛，你不能输，我也不能输，人生能有几回搏，那就分个高低吧。"</p>
|
||||
<footer>—— 聂卫平谈首届擂台赛</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 蜡烛纪念 -->
|
||||
<section id="candle" class="section candle-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">点亮心灯</h2>
|
||||
<div class="section-subtitle">一烛一缅怀，光明永相传</div>
|
||||
<div class="section-divider">
|
||||
<span class="divider-line"></span>
|
||||
<span class="divider-icon">🕯️</span>
|
||||
<span class="divider-line"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="candle-container">
|
||||
<div class="candle-instructions">
|
||||
<p>点击下方的蜡烛，为棋圣聂卫平点亮一盏心灯，表达您的缅怀之情。</p>
|
||||
<div class="candle-stats">
|
||||
<div class="candle-count">
|
||||
<span class="count-number">0</span>
|
||||
<span class="count-label">盏蜡烛已点亮</span>
|
||||
</div>
|
||||
<div class="candle-message">
|
||||
<span class="message-text">您的缅怀将永远铭记</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="candle-grid">
|
||||
<!-- 蜡烛将通过JavaScript动态生成 -->
|
||||
</div>
|
||||
<div class="candle-controls">
|
||||
<button class="btn btn-primary light-candle-btn">
|
||||
<i class="fas fa-fire"></i>
|
||||
点亮蜡烛
|
||||
</button>
|
||||
<button class="btn btn-outline reset-candles-btn">
|
||||
<i class="fas fa-redo"></i>
|
||||
重置蜡烛
|
||||
</button>
|
||||
<button class="btn btn-outline auto-light-btn">
|
||||
<i class="fas fa-magic"></i>
|
||||
自动点亮
|
||||
</button>
|
||||
</div>
|
||||
<div class="candle-quote">
|
||||
<blockquote>
|
||||
<p>"棋盘上的道理对于日常生活、学习工作，都有指导作用。即使在AI时代，人类仍需要围棋。"</p>
|
||||
<footer>—— 聂卫平</footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 传承与影响 -->
|
||||
<section id="legacy" class="section legacy-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">精神传承</h2>
|
||||
<div class="section-subtitle">棋魂永驻，精神不朽</div>
|
||||
<div class="section-divider">
|
||||
<span class="divider-line"></span>
|
||||
<span class="divider-icon">⚪</span>
|
||||
<span class="divider-line"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="legacy-content">
|
||||
<div class="legacy-text">
|
||||
<h3>超越时代的棋圣</h3>
|
||||
<p>聂卫平的一生是传奇的一生、热爱的一生、奉献的一生。他崛起于中国改革开放初期，他的胜利不仅是体育成就，更是民族自信的象征。</p>
|
||||
<p>他打破了日本围棋的垄断，推动世界棋坛进入中日韩三国鼎立时代，为中国围棋从追赶到领先奠定了基础。他让围棋这项中华古老技艺重新焕发生机，成为连接传统与现代的文化桥梁。</p>
|
||||
<p>即便在AI改变围棋的今天，聂卫平所代表的人类智慧、意志力和文化传承的价值依然不可或缺。他下完了自己的人生棋局，但留下的"棋魂"将永远在中国围棋史上熠熠生辉。</p>
|
||||
</div>
|
||||
<div class="legacy-image">
|
||||
<div class="ink-painting">
|
||||
<div class="painting-stroke"></div>
|
||||
<div class="painting-stroke"></div>
|
||||
<div class="painting-stroke"></div>
|
||||
<div class="painting-text">棋如人生</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<footer class="main-footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-logo">
|
||||
<span class="go-stone black"></span>
|
||||
<span>棋圣聂卫平</span>
|
||||
<span class="go-stone white"></span>
|
||||
</div>
|
||||
<p class="footer-quote">"棋盘上的道理对于日常生活、学习工作，都有指导作用。即使在AI时代，人类仍需要围棋。"</p>
|
||||
<div class="footer-links">
|
||||
<a href="#home">首页</a>
|
||||
<a href="#life">生平</a>
|
||||
<a href="#achievements">成就</a>
|
||||
<a href="#gallery">棋局</a>
|
||||
<a href="#legacy">传承</a>
|
||||
</div>
|
||||
<div class="footer-copyright">
|
||||
<p>© 2026 纪念棋圣聂卫平 | 永恒的围棋传奇</p>
|
||||
<a href="https://deerflow.tech" target="_blank" class="deerflow-badge">Created By Deerflow</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<!-- 返回顶部按钮 -->
|
||||
<button class="back-to-top" aria-label="返回顶部">
|
||||
<i class="fas fa-chevron-up"></i>
|
||||
</button>
|
||||
|
||||
<!-- 围棋棋子浮动效果 -->
|
||||
<div class="floating-stones">
|
||||
<div class="floating-stone black"></div>
|
||||
<div class="floating-stone white"></div>
|
||||
<div class="floating-stone black"></div>
|
||||
<div class="floating-stone white"></div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,646 +0,0 @@
|
||||
// 聂卫平纪念网站 - 交互效果
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 初始化
|
||||
initNavigation();
|
||||
initScrollEffects();
|
||||
initStatsCounter();
|
||||
initGoBoard();
|
||||
initBackToTop();
|
||||
initAnimations();
|
||||
initCandleMemorial(); // 初始化蜡烛纪念功能
|
||||
|
||||
console.log('棋圣聂卫平纪念网站已加载 - 永恒的围棋传奇');
|
||||
});
|
||||
|
||||
// 导航菜单功能
|
||||
function initNavigation() {
|
||||
const navToggle = document.querySelector('.nav-toggle');
|
||||
const navMenu = document.querySelector('.nav-menu');
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
|
||||
// 切换移动端菜单
|
||||
navToggle.addEventListener('click', function() {
|
||||
navMenu.classList.toggle('active');
|
||||
navToggle.classList.toggle('active');
|
||||
});
|
||||
|
||||
// 点击导航链接时关闭菜单
|
||||
navLinks.forEach(link => {
|
||||
link.addEventListener('click', function() {
|
||||
navMenu.classList.remove('active');
|
||||
navToggle.classList.remove('active');
|
||||
});
|
||||
});
|
||||
|
||||
// 滚动时高亮当前部分
|
||||
window.addEventListener('scroll', highlightCurrentSection);
|
||||
}
|
||||
|
||||
// 高亮当前滚动到的部分
|
||||
function highlightCurrentSection() {
|
||||
const sections = document.querySelectorAll('section');
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
|
||||
let currentSection = '';
|
||||
|
||||
sections.forEach(section => {
|
||||
const sectionTop = section.offsetTop - 100;
|
||||
const sectionHeight = section.clientHeight;
|
||||
const scrollPosition = window.scrollY;
|
||||
|
||||
if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
|
||||
currentSection = section.getAttribute('id');
|
||||
}
|
||||
});
|
||||
|
||||
navLinks.forEach(link => {
|
||||
link.classList.remove('active');
|
||||
if (link.getAttribute('href') === `#${currentSection}`) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 滚动效果
|
||||
function initScrollEffects() {
|
||||
// 添加滚动时的淡入效果
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animated');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// 观察需要动画的元素
|
||||
const animatedElements = document.querySelectorAll('.timeline-item, .achievement-card, .game-quote, .legacy-text, .legacy-image');
|
||||
animatedElements.forEach(el => observer.observe(el));
|
||||
|
||||
// 平滑滚动到锚点
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
const targetId = this.getAttribute('href');
|
||||
if (targetId === '#') return;
|
||||
|
||||
const targetElement = document.querySelector(targetId);
|
||||
if (targetElement) {
|
||||
e.preventDefault();
|
||||
window.scrollTo({
|
||||
top: targetElement.offsetTop - 80,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 统计数据计数器
|
||||
function initStatsCounter() {
|
||||
const statNumbers = document.querySelectorAll('.stat-number');
|
||||
|
||||
const observerOptions = {
|
||||
threshold: 0.5
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const statNumber = entry.target;
|
||||
const target = parseInt(statNumber.getAttribute('data-count'));
|
||||
const duration = 2000; // 2秒
|
||||
const increment = target / (duration / 16); // 60fps
|
||||
let current = 0;
|
||||
|
||||
const timer = setInterval(() => {
|
||||
current += increment;
|
||||
if (current >= target) {
|
||||
current = target;
|
||||
clearInterval(timer);
|
||||
}
|
||||
statNumber.textContent = Math.floor(current);
|
||||
}, 16);
|
||||
|
||||
observer.unobserve(statNumber);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
statNumbers.forEach(number => observer.observe(number));
|
||||
}
|
||||
|
||||
// 围棋棋盘初始化
|
||||
function initGoBoard() {
|
||||
const boardStones = document.querySelector('.board-stones');
|
||||
if (!boardStones) return;
|
||||
|
||||
// 经典棋局棋子位置 (模拟1985年决胜局)
|
||||
const stonePositions = [
|
||||
{ type: 'black', x: 4, y: 4 },
|
||||
{ type: 'white', x: 4, y: 16 },
|
||||
{ type: 'black', x: 16, y: 4 },
|
||||
{ type: 'white', x: 16, y: 16 },
|
||||
{ type: 'black', x: 10, y: 10 },
|
||||
{ type: 'white', x: 9, y: 9 },
|
||||
{ type: 'black', x: 3, y: 15 },
|
||||
{ type: 'white', x: 15, y: 3 },
|
||||
{ type: 'black', x: 17, y: 17 },
|
||||
{ type: 'white', x: 2, y: 2 }
|
||||
];
|
||||
|
||||
// 创建棋子
|
||||
stonePositions.forEach((stone, index) => {
|
||||
const stoneElement = document.createElement('div');
|
||||
stoneElement.className = `board-stone ${stone.type}`;
|
||||
|
||||
// 计算位置 (19x19棋盘)
|
||||
const xPercent = (stone.x / 18) * 100;
|
||||
const yPercent = (stone.y / 18) * 100;
|
||||
|
||||
stoneElement.style.left = `${xPercent}%`;
|
||||
stoneElement.style.top = `${yPercent}%`;
|
||||
stoneElement.style.animationDelay = `${index * 0.2}s`;
|
||||
|
||||
boardStones.appendChild(stoneElement);
|
||||
});
|
||||
|
||||
// 添加棋盘样式
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.board-stone {
|
||||
position: absolute;
|
||||
width: 4%;
|
||||
height: 4%;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
|
||||
animation: stoneAppear 0.5s ease-out forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.board-stone.black {
|
||||
background: radial-gradient(circle at 30% 30%, #555, #000);
|
||||
}
|
||||
|
||||
.board-stone.white {
|
||||
background: radial-gradient(circle at 30% 30%, #fff, #ddd);
|
||||
border: 1px solid #aaa;
|
||||
}
|
||||
|
||||
@keyframes stoneAppear {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -50%) scale(0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
// 返回顶部按钮
|
||||
function initBackToTop() {
|
||||
const backToTopBtn = document.querySelector('.back-to-top');
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
if (window.scrollY > 300) {
|
||||
backToTopBtn.classList.add('visible');
|
||||
} else {
|
||||
backToTopBtn.classList.remove('visible');
|
||||
}
|
||||
});
|
||||
|
||||
backToTopBtn.addEventListener('click', function() {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化动画
|
||||
function initAnimations() {
|
||||
// 添加滚动时的水墨效果
|
||||
let lastScrollTop = 0;
|
||||
const inkSplatter = document.querySelector('.ink-splatter');
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
const scrollTop = window.scrollY;
|
||||
const scrollDirection = scrollTop > lastScrollTop ? 'down' : 'up';
|
||||
|
||||
// 根据滚动方向调整水墨效果
|
||||
if (inkSplatter) {
|
||||
const opacity = 0.1 + (scrollTop / 5000);
|
||||
inkSplatter.style.opacity = Math.min(opacity, 0.3);
|
||||
|
||||
// 轻微移动效果
|
||||
const moveX = (scrollTop % 100) / 100;
|
||||
inkSplatter.style.transform = `translateX(${moveX}px)`;
|
||||
}
|
||||
|
||||
lastScrollTop = scrollTop;
|
||||
});
|
||||
|
||||
// 鼠标移动时的墨水效果
|
||||
document.addEventListener('mousemove', function(e) {
|
||||
const floatingStones = document.querySelectorAll('.floating-stone');
|
||||
|
||||
floatingStones.forEach((stone, index) => {
|
||||
const speed = 0.01 + (index * 0.005);
|
||||
const x = (window.innerWidth - e.clientX) * speed;
|
||||
const y = (window.innerHeight - e.clientY) * speed;
|
||||
|
||||
stone.style.transform = `translate(${x}px, ${y}px)`;
|
||||
});
|
||||
});
|
||||
|
||||
// 页面加载时的动画序列
|
||||
setTimeout(() => {
|
||||
document.body.classList.add('loaded');
|
||||
}, 100);
|
||||
}
|
||||
|
||||
// 添加键盘快捷键
|
||||
document.addEventListener('keydown', function(e) {
|
||||
// 空格键滚动
|
||||
if (e.code === 'Space' && !e.target.matches('input, textarea')) {
|
||||
e.preventDefault();
|
||||
window.scrollBy({
|
||||
top: window.innerHeight * 0.8,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
|
||||
// ESC键返回顶部
|
||||
if (e.code === 'Escape') {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
|
||||
// 数字键跳转到对应部分
|
||||
if (e.code >= 'Digit1' && e.code <= 'Digit5') {
|
||||
const sectionIndex = parseInt(e.code.replace('Digit', '')) - 1;
|
||||
const sections = ['home', 'life', 'achievements', 'gallery', 'legacy'];
|
||||
|
||||
if (sectionIndex < sections.length) {
|
||||
const targetSection = document.getElementById(sections[sectionIndex]);
|
||||
if (targetSection) {
|
||||
window.scrollTo({
|
||||
top: targetSection.offsetTop - 80,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 添加打印友好功能
|
||||
window.addEventListener('beforeprint', function() {
|
||||
document.body.classList.add('printing');
|
||||
});
|
||||
|
||||
window.addEventListener('afterprint', function() {
|
||||
document.body.classList.remove('printing');
|
||||
});
|
||||
|
||||
// 性能优化：图片懒加载
|
||||
if ('IntersectionObserver' in window) {
|
||||
const imageObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
if (img.dataset.src) {
|
||||
img.src = img.dataset.src;
|
||||
img.removeAttribute('data-src');
|
||||
}
|
||||
imageObserver.unobserve(img);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('img[data-src]').forEach(img => imageObserver.observe(img));
|
||||
}
|
||||
|
||||
// 添加触摸设备优化
|
||||
if ('ontouchstart' in window) {
|
||||
document.body.classList.add('touch-device');
|
||||
|
||||
// 为触摸设备调整悬停效果
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.touch-device .achievement-card:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.touch-device .btn:hover {
|
||||
transform: none;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
// 添加页面可见性API支持
|
||||
document.addEventListener('visibilitychange', function() {
|
||||
if (document.hidden) {
|
||||
console.log('页面隐藏中...');
|
||||
} else {
|
||||
console.log('页面恢复显示');
|
||||
}
|
||||
});
|
||||
|
||||
// 错误处理
|
||||
window.addEventListener('error', function(e) {
|
||||
console.error('页面错误:', e.message);
|
||||
});
|
||||
|
||||
// 蜡烛纪念功能
|
||||
function initCandleMemorial() {
|
||||
const candleGrid = document.querySelector('.candle-grid');
|
||||
const lightCandleBtn = document.querySelector('.light-candle-btn');
|
||||
const resetCandlesBtn = document.querySelector('.reset-candles-btn');
|
||||
const autoLightBtn = document.querySelector('.auto-light-btn');
|
||||
const countNumber = document.querySelector('.count-number');
|
||||
const messageText = document.querySelector('.message-text');
|
||||
|
||||
if (!candleGrid) return;
|
||||
|
||||
// 蜡烛数量
|
||||
const candleCount = 24; // 24支蜡烛，象征24小时永恒纪念
|
||||
let litCandles = 0;
|
||||
let candles = [];
|
||||
|
||||
// 初始化蜡烛
|
||||
function createCandles() {
|
||||
candleGrid.innerHTML = '';
|
||||
candles = [];
|
||||
litCandles = 0;
|
||||
|
||||
for (let i = 0; i < candleCount; i++) {
|
||||
const candle = document.createElement('div');
|
||||
candle.className = 'candle-item';
|
||||
candle.dataset.index = i;
|
||||
|
||||
candle.innerHTML = `
|
||||
<div class="candle-flame">
|
||||
<div class="flame-core"></div>
|
||||
<div class="flame-outer"></div>
|
||||
<div class="flame-spark"></div>
|
||||
<div class="flame-spark"></div>
|
||||
<div class="flame-spark"></div>
|
||||
</div>
|
||||
<div class="candle-body"></div>
|
||||
`;
|
||||
|
||||
// 点击点亮/熄灭蜡烛
|
||||
candle.addEventListener('click', function() {
|
||||
toggleCandle(i);
|
||||
});
|
||||
|
||||
candleGrid.appendChild(candle);
|
||||
candles.push({
|
||||
element: candle,
|
||||
lit: false
|
||||
});
|
||||
}
|
||||
|
||||
updateCounter();
|
||||
}
|
||||
|
||||
// 切换蜡烛状态
|
||||
function toggleCandle(index) {
|
||||
const candle = candles[index];
|
||||
|
||||
if (candle.lit) {
|
||||
// 熄灭蜡烛
|
||||
candle.element.classList.remove('candle-lit');
|
||||
candle.lit = false;
|
||||
litCandles--;
|
||||
|
||||
// 添加熄灭动画
|
||||
candle.element.style.animation = 'none';
|
||||
setTimeout(() => {
|
||||
candle.element.style.animation = '';
|
||||
}, 10);
|
||||
} else {
|
||||
// 点亮蜡烛
|
||||
candle.element.classList.add('candle-lit');
|
||||
candle.lit = true;
|
||||
litCandles++;
|
||||
|
||||
// 添加点亮动画
|
||||
candle.element.style.animation = 'candleLightUp 0.5s ease';
|
||||
}
|
||||
|
||||
updateCounter();
|
||||
updateMessage();
|
||||
saveCandleState();
|
||||
}
|
||||
|
||||
// 点亮一支蜡烛
|
||||
function lightOneCandle() {
|
||||
// 找到未点亮的蜡烛
|
||||
const unlitCandles = candles.filter(c => !c.lit);
|
||||
if (unlitCandles.length === 0) return false;
|
||||
|
||||
// 随机选择一支
|
||||
const randomIndex = Math.floor(Math.random() * unlitCandles.length);
|
||||
const candleIndex = candles.indexOf(unlitCandles[randomIndex]);
|
||||
|
||||
toggleCandle(candleIndex);
|
||||
return true;
|
||||
}
|
||||
|
||||
// 自动点亮所有蜡烛
|
||||
function autoLightCandles() {
|
||||
if (litCandles === candleCount) return;
|
||||
|
||||
let delay = 0;
|
||||
for (let i = 0; i < candles.length; i++) {
|
||||
if (!candles[i].lit) {
|
||||
setTimeout(() => {
|
||||
toggleCandle(i);
|
||||
}, delay);
|
||||
delay += 100; // 每100毫秒点亮一支
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 重置所有蜡烛
|
||||
function resetAllCandles() {
|
||||
candles.forEach((candle, index) => {
|
||||
if (candle.lit) {
|
||||
candle.element.classList.remove('candle-lit');
|
||||
candle.lit = false;
|
||||
|
||||
// 添加重置动画
|
||||
candle.element.style.animation = 'none';
|
||||
setTimeout(() => {
|
||||
candle.element.style.animation = '';
|
||||
}, 10);
|
||||
}
|
||||
});
|
||||
|
||||
litCandles = 0;
|
||||
updateCounter();
|
||||
updateMessage();
|
||||
saveCandleState();
|
||||
}
|
||||
|
||||
// 更新计数器
|
||||
function updateCounter() {
|
||||
if (countNumber) {
|
||||
countNumber.textContent = litCandles;
|
||||
|
||||
// 添加计数动画
|
||||
countNumber.style.transform = 'scale(1.2)';
|
||||
setTimeout(() => {
|
||||
countNumber.style.transform = 'scale(1)';
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
|
||||
// 更新消息
|
||||
function updateMessage() {
|
||||
if (!messageText) return;
|
||||
|
||||
const messages = [
|
||||
"您的缅怀将永远铭记",
|
||||
"一烛一缅怀，光明永相传",
|
||||
"棋圣精神，永垂不朽",
|
||||
"黑白之间，永恒追忆",
|
||||
"围棋之光，永不熄灭",
|
||||
"传承是最好的纪念"
|
||||
];
|
||||
|
||||
// 根据点亮数量选择消息
|
||||
let messageIndex;
|
||||
if (litCandles === 0) {
|
||||
messageIndex = 0;
|
||||
} else if (litCandles < candleCount / 2) {
|
||||
messageIndex = 1;
|
||||
} else if (litCandles < candleCount) {
|
||||
messageIndex = 2;
|
||||
} else {
|
||||
messageIndex = 3;
|
||||
}
|
||||
|
||||
// 随机选择同级别的消息
|
||||
const startIndex = Math.floor(messageIndex / 2) * 2;
|
||||
const endIndex = startIndex + 2;
|
||||
const availableMessages = messages.slice(startIndex, endIndex);
|
||||
const randomMessage = availableMessages[Math.floor(Math.random() * availableMessages.length)];
|
||||
|
||||
messageText.textContent = randomMessage;
|
||||
}
|
||||
|
||||
// 保存蜡烛状态到本地存储
|
||||
function saveCandleState() {
|
||||
try {
|
||||
const candleState = candles.map(c => c.lit);
|
||||
localStorage.setItem('nieCandleState', JSON.stringify(candleState));
|
||||
localStorage.setItem('nieCandleCount', litCandles.toString());
|
||||
} catch (e) {
|
||||
console.log('无法保存蜡烛状态:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// 加载蜡烛状态
|
||||
function loadCandleState() {
|
||||
try {
|
||||
const savedState = localStorage.getItem('nieCandleState');
|
||||
const savedCount = localStorage.getItem('nieCandleCount');
|
||||
|
||||
if (savedState) {
|
||||
const candleState = JSON.parse(savedState);
|
||||
candleState.forEach((isLit, index) => {
|
||||
if (isLit && candles[index]) {
|
||||
candles[index].element.classList.add('candle-lit');
|
||||
candles[index].lit = true;
|
||||
}
|
||||
});
|
||||
|
||||
litCandles = savedCount ? parseInt(savedCount) : candleState.filter(Boolean).length;
|
||||
updateCounter();
|
||||
updateMessage();
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('无法加载蜡烛状态:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化
|
||||
createCandles();
|
||||
|
||||
// 加载保存的状态
|
||||
setTimeout(() => {
|
||||
loadCandleState();
|
||||
}, 100);
|
||||
|
||||
// 按钮事件
|
||||
if (lightCandleBtn) {
|
||||
lightCandleBtn.addEventListener('click', function() {
|
||||
if (!lightOneCandle()) {
|
||||
// 所有蜡烛都已点亮
|
||||
this.innerHTML = '<i class="fas fa-check"></i> 所有蜡烛已点亮';
|
||||
this.disabled = true;
|
||||
setTimeout(() => {
|
||||
this.innerHTML = '<i class="fas fa-fire"></i> 点亮蜡烛';
|
||||
this.disabled = false;
|
||||
}, 2000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (resetCandlesBtn) {
|
||||
resetCandlesBtn.addEventListener('click', function() {
|
||||
if (confirm('确定要熄灭所有蜡烛吗？')) {
|
||||
resetAllCandles();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (autoLightBtn) {
|
||||
autoLightBtn.addEventListener('click', function() {
|
||||
autoLightCandles();
|
||||
});
|
||||
}
|
||||
|
||||
// 添加键盘快捷键
|
||||
document.addEventListener('keydown', function(e) {
|
||||
// C键点亮一支蜡烛
|
||||
if (e.code === 'KeyC' && !e.target.matches('input, textarea')) {
|
||||
e.preventDefault();
|
||||
lightOneCandle();
|
||||
}
|
||||
|
||||
// R键重置蜡烛
|
||||
if (e.code === 'KeyR' && e.ctrlKey && !e.target.matches('input, textarea')) {
|
||||
e.preventDefault();
|
||||
resetAllCandles();
|
||||
}
|
||||
|
||||
// A键自动点亮
|
||||
if (e.code === 'KeyA' && e.ctrlKey && !e.target.matches('input, textarea')) {
|
||||
e.preventDefault();
|
||||
autoLightCandles();
|
||||
}
|
||||
});
|
||||
|
||||
console.log('蜡烛纪念功能已初始化');
|
||||
}
|
||||
|
||||
// 页面卸载前的确认
|
||||
window.addEventListener('beforeunload', function(e) {
|
||||
// 可以在这里添加保存功能
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@@ -208,11 +208,13 @@ function ToolCall({
|
||||
{Array.isArray(result) && (
|
||||
<ChainOfThoughtSearchResults>
|
||||
{result.map((item) => (
|
||||
<ChainOfThoughtSearchResult key={item.url}>
|
||||
<a href={item.url} target="_blank" rel="noreferrer">
|
||||
{item.title}
|
||||
</a>
|
||||
</ChainOfThoughtSearchResult>
|
||||
<Tooltip key={item.url} content={item.snippet}>
|
||||
<ChainOfThoughtSearchResult key={item.url}>
|
||||
<a href={item.url} target="_blank" rel="noreferrer">
|
||||
{item.title}
|
||||
</a>
|
||||
</ChainOfThoughtSearchResult>
|
||||
</Tooltip>
|
||||
))}
|
||||
</ChainOfThoughtSearchResults>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user