A1300399510/PC-official
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

添加 h5/thousands.html

Browse Source
This commit is contained in:
XiaoMo
2025-12-10 06:47:41 +00:00
parent 551b282e41
commit c7a37c5a42
1 changed files with 608 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

608
h5/thousands.html Normal file
View File

@@ -0,0 +1,608 @@
<!DOCTYPE html><html lang="zh-CN"><head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>千军万马 - 温州抗倭史诗</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&amp;family=Noto+Sans+SC:wght@300;400;500&amp;display=swap" rel="stylesheet"/>
<style>
body {
font-family: 'Noto Sans SC', sans-serif;
background: linear-gradient(135deg, #FFF8DC 0%, #F5F5DC 100%);
overflow-x: hidden;
}
.hero-title {
font-family: 'Noto Serif SC', serif;
background: linear-gradient(45deg, #8B4513, #CD7F32);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.lyrics-text {
font-family: 'Noto Serif SC', serif;
color: #8B4513;
line-height: 2;
}
.bg-canvas {
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.content-overlay {
position: relative;
z-index: 10;
}
.nav-item {
transition: all 0.3s ease;
}
.nav-item:hover {
transform: translateY(-2px);
color: #DC143C;
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(139, 69, 19, 0.2);
}
.pulse-animation {
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.fade-in {
opacity: 0;
transform: translateY(30px);
}
.hero-image {
background-image: url('https://pjoss.x-php.com/20251210/f551cd20d2f0c2036c42d22b00711b05.png');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
</style>
</head>
<body>
<!-- 背景动画画布 -->
<div id="bg-canvas" class="bg-canvas"></div>
<!-- 导航栏 -->
<nav class="fixed top-0 w-full bg-white/90 backdrop-blur-sm z-50 shadow-sm">
<div class="max-w-7xl mx-auto px-6 py-4">
<div class="flex justify-between items-center">
<div class="hero-title text-2xl font-bold">千军万马</div>
<div class="flex space-x-8">
<a href="#home" class="nav-item cursor-pointer">首页</a>
<a href="#lyrics" class="nav-item cursor-pointer">歌词</a>
<a href="#history" class="nav-item cursor-pointer">历史</a>
<a href="#music" class="nav-item cursor-pointer">音乐</a>
</div>
</div>
</div>
</nav>
<!-- 主要内容 -->
<div class="content-overlay">
<!-- 英雄区域 -->
<section id="home" class="hero-image min-h-screen flex items-center justify-center relative">
<div class="absolute inset-0 bg-black/30"></div>
<div class="relative z-10 text-center text-white px-6">
<h1 class="text-6xl md:text-8xl font-bold mb-6 fade-in" style="font-family: &#39;Noto Serif SC&#39;, serif;">千军万马</h1>
<p class="text-xl md:text-2xl mb-8 fade-in">温州抗倭史诗 · 非遗鼓词传承</p>
<div class="flex flex-col md:flex-row gap-4 justify-center fade-in">
<button onclick="playMusic()" class="bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-full text-lg font-medium transition-all duration-300 transform hover:scale-105">
播放音乐
</button>
<button onclick="scrollToSection(&#39;lyrics&#39;)" class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-gray-800 px-8 py-3 rounded-full text-lg font-medium transition-all duration-300">
查看歌词
</button>
</div>
</div>
</section>
<!-- 歌词展示区域 -->
<section id="lyrics" class="py-20 px-6">
<div class="max-w-4xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-16 hero-title fade-in">歌词欣赏</h2>
<!-- 歌词卡片 -->
<div class="bg-white/80 backdrop-blur-sm rounded-2xl p-8 shadow-lg card-hover fade-in mb-8">
<div class="text-center mb-8">
<h3 class="text-2xl font-bold lyrics-text mb-4">【开篇】</h3>
<p class="lyrics-text text-lg">公元一五五八年，倭寇越来越嚣张。</p>
<p class="lyrics-text text-lg">烧杀抢掠恶做尽，沿海百姓遭祸殃。</p>
</div>
<div class="text-center mb-8">
<h3 class="text-2xl font-bold lyrics-text mb-4">【第一幕】</h3>
<p class="lyrics-text text-lg">王沛王德俩叔侄，满腔热血保家乡。</p>
<p class="lyrics-text text-lg">身中数矛热血涌，赤胆忠魂震东洋。</p>
</div>
<div class="text-center mb-8">
<h3 class="text-2xl font-bold lyrics-text mb-4">【第二幕】</h3>
<p class="lyrics-text text-lg">叔果叔杲意志强，筹款要建护城墙。</p>
<p class="lyrics-text text-lg">王氏遗孀倾囊助，为保家园添力量。</p>
</div>
<div class="text-center mb-8">
<h3 class="text-2xl font-bold lyrics-text mb-4">【第三幕】</h3>
<p class="lyrics-text text-lg">城堡坚固厚城墙，倭寇围困日久长。</p>
<p class="lyrics-text text-lg">砻糠替谷河面运，砻糠之计退敌强。</p>
</div>
<div class="text-center mb-8">
<h3 class="text-2xl font-bold lyrics-text mb-4">【第四幕】</h3>
<p class="lyrics-text text-lg">遗孀乘机率众出，突袭敌营上战场。</p>
<p class="lyrics-text text-lg">战鼓声声号角响，杀的倭寇魂魄消。</p>
</div>
<div class="text-center mb-8">
<h3 class="text-2xl font-bold lyrics-text mb-4">【结尾】</h3>
<p class="lyrics-text text-lg">一段鼓词情难尽，古人壮举永传扬。</p>
<p class="lyrics-text text-lg">家国安宁民康泰，温州处处保永昌。</p>
</div>
<div class="text-center">
<p class="lyrics-text text-sm">作者：陈继宁（温州市鼓词研究会会长）</p>
<p class="lyrics-text text-sm">2025-12-01</p>
</div>
</div>
<!-- 音乐控制 -->
<div class="text-center">
<div class="bg-white/60 backdrop-blur-sm rounded-full px-8 py-4 inline-flex items-center space-x-6 shadow-lg">
<button id="playBtn" onclick="togglePlay()" class="w-12 h-12 bg-red-600 hover:bg-red-700 text-white rounded-full flex items-center justify-center transition-all duration-300">
▶
</button>
<div class="flex items-center space-x-2">
<span class="text-sm text-gray-600">00:00</span>
<div class="w-64 h-2 bg-gray-300 rounded-full">
<div id="progressBar" class="h-full bg-red-600 rounded-full" style="width: 0%"></div>
</div>
<span class="text-sm text-gray-600">04:32</span>
</div>
<button onclick="toggleMute()" class="w-10 h-10 bg-gray-200 hover:bg-gray-300 rounded-full flex items-center justify-center transition-all duration-300">
🔊
</button>
</div>
</div>
</div>
</section>
<!-- 历史背景区域 -->
<section id="history" class="py-20 px-6 bg-gradient-to-b from-transparent to-white/50">
<div class="max-w-6xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-16 hero-title fade-in">历史背景</h2>
<div class="grid md:grid-cols-2 gap-12 items-center mb-16">
<div class="fade-in">
<img src="https://pjoss.x-php.com/20251210/de589ced94b90b32165b55673479aa52.png" alt="温州古城" class="w-full rounded-2xl shadow-lg"/>
</div>
<div class="fade-in">
<h3 class="text-2xl font-bold lyrics-text mb-6">温州抗倭历史</h3>
<p class="text-gray-700 leading-relaxed mb-4">
明朝洪武二年（1369年），倭寇首次进犯温州地区，从此开启了温州人民长达数百年的抗倭斗争。
温州地处浙南沿海，拥有众多岛屿，成为倭寇侵扰的重灾区。
</p>
<p class="text-gray-700 leading-relaxed mb-4">
在这场艰苦卓绝的斗争中，涌现出无数英雄人物。王沛、王德叔侄率领乡勇抗倭，
最终壮烈牺牲；戚继光将军更是在温州地区屡败倭寇，创造了鸳鸯阵法，
为抗倭战争作出了巨大贡献。
</p>
<p class="text-gray-700 leading-relaxed">
温州人民用血肉之躯筑起了一道保卫家园的钢铁长城，
体现了中华民族团结抗倭的爱国主义精神和不怕牺牲的高尚品格。
</p>
</div>
</div>
<!-- 历史时间轴 -->
<div class="fade-in">
<h3 class="text-2xl font-bold text-center lyrics-text mb-12">重要历史节点</h3>
<div class="relative">
<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-red-600 to-yellow-600"></div>
<div class="space-y-12">
<div class="flex items-center">
<div class="w-1/2 pr-8 text-right">
<div class="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-lg card-hover">
<h4 class="text-xl font-bold text-red-600 mb-2">1369年</h4>
<p class="text-gray-700">倭寇首次进犯温州，攻击永嘉、乐清等地</p>
</div>
</div>
<div class="w-4 h-4 bg-red-600 rounded-full border-4 border-white shadow-lg"></div>
<div class="w-1/2 pl-8"></div>
</div>
<div class="flex items-center">
<div class="w-1/2 pr-8"></div>
<div class="w-4 h-4 bg-yellow-600 rounded-full border-4 border-white shadow-lg"></div>
<div class="w-1/2 pl-8">
<div class="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-lg card-hover">
<h4 class="text-xl font-bold text-yellow-600 mb-2">1558年</h4>
<p class="text-gray-700">王沛、王德叔侄壮烈牺牲，英桥王氏建造永昌堡</p>
</div>
</div>
</div>
<div class="flex items-center">
<div class="w-1/2 pr-8 text-right">
<div class="bg-white/80 backdrop-blur-sm rounded-lg p-6 shadow-lg card-hover">
<h4 class="text-xl font-bold text-red-600 mb-2">1560年代</h4>
<p class="text-gray-700">戚继光率戚家军在温州地区屡败倭寇</p>
</div>
</div>
<div class="w-4 h-4 bg-red-600 rounded-full border-4 border-white shadow-lg"></div>
<div class="w-1/2 pl-8"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 音乐文化区域 -->
<section id="music" class="py-20 px-6">
<div class="max-w-6xl mx-auto">
<h2 class="text-4xl font-bold text-center mb-16 hero-title fade-in">音乐文化</h2>
<div class="grid md:grid-cols-2 gap-12 items-center mb-16">
<div class="fade-in">
<h3 class="text-2xl font-bold lyrics-text mb-6">陈继宁</h3>
<p class="text-gray-700 leading-relaxed mb-4">
温州学传播大使，温州市社科联理事，温州市鼓词研究会会长，国家级非遗温州鼓词陈派传人
</p>
<h3 class="text-2xl font-bold lyrics-text mb-6">温州鼓词</h3>
<p class="text-gray-700 leading-relaxed mb-4">
温州鼓词是国家级非物质文化遗产，流行于浙江温州及其毗邻地区，
用温州方言表演，具有浓厚的地方色彩和独特的艺术风格。
</p>
<p class="text-gray-700 leading-relaxed mb-4">
表演形式以一人&#34;单档&#34;为主，艺人自弹牛筋琴伴奏说唱。
牛筋琴是温州独有的乐器，音色浑厚柔美，为鼓词赋予了无可替代的声韵特质。
</p>
<p class="text-gray-700 leading-relaxed">
《千军万马》这首歌融合了温州鼓词的元素，
通过现代音乐手法重新演绎传统文化，
让年轻一代能够更好地理解和传承这一宝贵的文化遗产。
</p>
</div>
<div class="fade-in">
<img src="https://pjoss.x-php.com/20251210/1bfead1f41b7e0b4a291ab2da46400f7.jpg" alt="传统乐器" class="w-full rounded-2xl shadow-lg"/>
</div>
</div>
<!-- 音乐特色 -->
<div class="grid md:grid-cols-3 gap-8 fade-in">
<div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 text-center shadow-lg card-hover">
<div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
<span class="text-2xl">🎵</span>
</div>
<h4 class="text-xl font-bold lyrics-text mb-3">民歌长调</h4>
<p class="text-gray-700 text-sm">悠扬婉转的旋律，体现温州山水的灵秀之气</p>
</div>
<div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 text-center shadow-lg card-hover">
<div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
<span class="text-2xl">🎸</span>
</div>
<h4 class="text-xl font-bold lyrics-text mb-3">摇滚力量</h4>
<p class="text-gray-700 text-sm">现代摇滚的节奏感，展现抗倭斗争的激昂斗志</p>
</div>
<div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 text-center shadow-lg card-hover">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
<span class="text-2xl">🥁</span>
</div>
<h4 class="text-xl font-bold lyrics-text mb-3">鼓词韵律</h4>
<p class="text-gray-700 text-sm">传统鼓词的独特韵味，传承非遗文化精髓</p>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-gray-800 text-white py-12">
<div class="max-w-6xl mx-auto px-6 text-center">
<div class="hero-title text-2xl font-bold mb-4">千军万马</div>
<p class="text-gray-400 mb-6">传承温州抗倭精神，弘扬非遗鼓词文化</p>
<div class="text-sm text-gray-500">
© 2025 千军万马音乐项目. 致敬历史，传承文化，创新发展.
</div>
</div>
</footer>
</div>
<script>
// 背景动画
let bgSketch = function(p) {
let particles = [];
let numParticles = 50;
p.setup = function() {
let canvas = p.createCanvas(p.windowWidth, p.windowHeight);
canvas.parent('bg-canvas');
// 初始化粒子
for (let i = 0; i < numParticles; i++) {
particles.push({
x: p.random(p.width),
y: p.random(p.height),
vx: p.random(-0.5, 0.5),
vy: p.random(-0.5, 0.5),
size: p.random(2, 6),
alpha: p.random(50, 150)
});
}
};
p.draw = function() {
p.clear();
// 绘制流动粒子
for (let particle of particles) {
p.fill(139, 69, 19, particle.alpha);
p.noStroke();
p.ellipse(particle.x, particle.y, particle.size);
// 更新位置
particle.x += particle.vx;
particle.y += particle.vy;
// 边界检测
if (particle.x < 0 || particle.x > p.width) particle.vx *= -1;
if (particle.y < 0 || particle.y > p.height) particle.vy *= -1;
}
// 绘制连接线
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
let dist = p.dist(particles[i].x, particles[i].y, particles[j].x, particles[j].y);
if (dist < 100) {
p.stroke(139, 69, 19, 50 * (1 - dist / 100));
p.strokeWeight(1);
p.line(particles[i].x, particles[i].y, particles[j].x, particles[j].y);
}
}
}
};
p.windowResized = function() {
p.resizeCanvas(p.windowWidth, p.windowHeight);
};
};
// 初始化背景动画
new p5(bgSketch);
// 页面加载完成后的动画
document.addEventListener('DOMContentLoaded', function() {
// 淡入动画
const fadeElements = document.querySelectorAll('.fade-in');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
anime({
targets: entry.target,
opacity: [0, 1],
translateY: [30, 0],
duration: 800,
easing: 'easeOutQuart',
delay: anime.stagger(200)
});
observer.unobserve(entry.target);
}
});
});
fadeElements.forEach(el => {
observer.observe(el);
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
});
// 音乐播放控制
const AUDIO_URL = 'https://pjoss.x-php.com/20251210/1f5b3890c2c336bec63f9af90fe40ae2.mp3';
let isPlaying = false;
let isMuted = false;
let duration = 0;
const audio = new Audio(AUDIO_URL);
audio.preload = 'metadata';
audio.addEventListener('loadedmetadata', () => {
duration = isFinite(audio.duration) ? Math.floor(audio.duration) : 0;
const timeEls = document.querySelectorAll('.text-sm.text-gray-600');
if (timeEls[1]) {
timeEls[1].textContent = formatTime(duration);
}
});
audio.addEventListener('timeupdate', () => {
updateProgress();
});
audio.addEventListener('ended', () => {
isPlaying = false;
updatePlayButton();
updateProgress();
});
audio.addEventListener('error', () => {
showNotification('音频加载或播放失败');
});
function playMusic() {
audio.play().then(() => {
isPlaying = true;
updatePlayButton();
showNotification('音乐播放中...');
}).catch(() => {
showNotification('无法自动播放，请手动点击播放');
});
}
function togglePlay() {
if (isPlaying) {
pauseMusic();
} else {
playMusic();
}
}
function pauseMusic() {
audio.pause();
isPlaying = false;
updatePlayButton();
}
function toggleMute() {
isMuted = !isMuted;
audio.muted = isMuted;
const muteBtn = document.querySelector('button[onclick="toggleMute()"]');
muteBtn.textContent = isMuted ? '🔇' : '🔊';
}
function updatePlayButton() {
const playBtn = document.getElementById('playBtn');
playBtn.textContent = isPlaying ? '⏸' : '▶';
}
function updateProgress() {
const progressBar = document.getElementById('progressBar');
const d = duration || (isFinite(audio.duration) ? Math.floor(audio.duration) : 0);
const ct = Math.floor(audio.currentTime || 0);
const progress = d ? (ct / d) * 100 : 0;
progressBar.style.width = progress + '%';
const timeEls = document.querySelectorAll('.text-sm.text-gray-600');
if (timeEls[0]) {
timeEls[0].textContent = formatTime(ct);
}
if (timeEls[1] && d) {
timeEls[1].textContent = formatTime(d);
}
}
function formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = seconds % 60;
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}
function scrollToSection(sectionId) {
const section = document.getElementById(sectionId);
if (section) {
section.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
}
function showNotification(message) {
// 创建通知元素
const notification = document.createElement('div');
notification.className = 'fixed top-24 right-6 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 transform translate-x-full transition-transform duration-300';
notification.textContent = message;
document.body.appendChild(notification);
// 显示动画
setTimeout(() => {
notification.classList.remove('translate-x-full');
}, 100);
// 隐藏动画
setTimeout(() => {
notification.classList.add('translate-x-full');
setTimeout(() => {
document.body.removeChild(notification);
}, 300);
}, 3000);
}
// 滚动时的视差效果
window.addEventListener('scroll', function() {
const scrolled = window.pageYOffset;
const parallax = document.querySelector('.hero-image');
if (parallax) {
const speed = scrolled * 0.5;
parallax.style.transform = `translateY(${speed}px)`;
}
});
// 导航栏滚动效果
let lastScrollTop = 0;
window.addEventListener('scroll', function() {
const nav = document.querySelector('nav');
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > lastScrollTop && scrollTop > 100) {
// 向下滚动，隐藏导航栏
nav.style.transform = 'translateY(-100%)';
} else {
// 向上滚动，显示导航栏
nav.style.transform = 'translateY(0)';
}
lastScrollTop = scrollTop;
});
// 键盘快捷键
document.addEventListener('keydown', function(e) {
if (e.code === 'Space') {
e.preventDefault();
togglePlay();
} else if (e.code === 'KeyM') {
e.preventDefault();
toggleMute();
}
});
// 页面可见性变化处理
document.addEventListener('visibilitychange', function() {
if (document.hidden && isPlaying) {
// 页面隐藏时暂停音乐
pauseMusic();
}
});
// 页面加载时预加载资源
window.addEventListener('load', function() {
// preloadImages();
// 添加加载完成动画
anime({
targets: 'body',
opacity: [0, 1],
duration: 1000,
easing: 'easeOutQuart'
});
});
</script>
</body></html>