码桶
发现社区成员的开源项目
index.html28.6 KB
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>追忆Beyond站 - BEYOND综合信息网</title>
<meta name="keywords" content="beyond,Beyond视频,Beyond演唱会,黄家驹，黄家强，黄贯中，叶世荣，beyond乐队,追忆beyond站" />
<meta name="description" content="专门提供Beyond乐队信息的网站。收集BEYOND音乐专辑，演唱会，电影，综艺，图片等资料。传播Beyond的精神，让经典永不褪色。">
<!-- 引入Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入Font Awesome -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css" rel="stylesheet">
<!-- 配置Tailwind自定义颜色 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#E63946', // Beyond经典红色
secondary: '#1D3557',
accent: '#F1FAEE',
dark: '#0D1B2A',
light: '#F1FAEE'
},
fontFamily: {
sans: ['Noto Sans SC', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.bg-blur {
backdrop-filter: blur(8px);
}
.transition-transform {
transition: transform 0.3s ease;
}
}
</style>
<style>
/* 基础动画效果 */
.fade-in {
animation: fadeIn 0.8s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* 平滑滚动 */
html {
scroll-behavior: smooth;
}
/* 导航栏滚动效果 */
.navbar-scrolled {
background-color: rgba(13, 27, 42, 0.95);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="bg-light text-dark font-sans">
<!-- 导航栏 -->
<nav id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-transparent">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<a href="#" class="text-2xl font-bold text-white text-shadow flex items-center">
<i class="fa fa-music mr-2"></i> 追忆Beyond站
</a>
<!-- 桌面导航 -->
<div class="hidden md:flex space-x-6">
<a href="#about" class="text-white hover:text-primary transition-colors">关于乐队</a>
<a href="#members" class="text-white hover:text-primary transition-colors">乐队成员</a>
<a href="#albums" class="text-white hover:text-primary transition-colors">专辑作品</a>
<a href="#concerts" class="text-white hover:text-primary transition-colors">演唱会</a>
<a href="#contact" class="text-white hover:text-primary transition-colors">联系我们</a>
<a href="https://www.beyond.com.hk/" class="text-white hover:text-primary transition-colors">beyond.com.hk</a>
</div>
<!-- 移动端菜单按钮 -->
<button id="menuBtn" class="md:hidden text-white text-2xl">
<i class="fa fa-bars"></i>
</button>
</div>
<!-- 移动端导航菜单 -->
<div id="mobileMenu" class="md:hidden hidden bg-dark bg-opacity-95">
<div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
<a href="#about" class="text-white hover:text-primary transition-colors py-2">关于乐队</a>
<a href="#members" class="text-white hover:text-primary transition-colors py-2">乐队成员</a>
<a href="#albums" class="text-white hover:text-primary transition-colors py-2">专辑作品</a>
<a href="#concerts" class="text-white hover:text-primary transition-colors py-2">演唱会</a>
<a href="#contact" class="text-white hover:text-primary transition-colors py-2">联系我们</a>
</div>
</div>
</nav>
<!-- 英雄区域 -->
<header class="relative h-screen flex items-center justify-center overflow-hidden">
<div class="absolute inset-0 z-0">
<img src="//res.chenzhizuo.cn/beyond/body/cover.jpg" alt="Beyond乐队,图源beyond.com.hk" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-dark bg-opacity-60"></div>
</div>
<div class="container mx-auto px-4 z-10 text-center fade-in">
<h1 class="text-[clamp(2.5rem,8vw,5rem)] font-bold text-white mb-6 text-shadow leading-tight">
追忆Beyond<br>永不磨灭的传奇
</h1>
<p class="text-[clamp(1rem,3vw,1.5rem)] text-white mb-8 max-w-3xl mx-auto text-shadow">
探索Beyond乐队的音乐世界，重温那些影响了一代人的经典旋律
</p>
<a href="#about" class="inline-block bg-primary hover:bg-primary/80 text-white font-bold py-3 px-8 rounded-full transition-all transform hover:scale-105">
开始探索 <i class="fa fa-arrow-down ml-2"></i>
</a>
</div>
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 text-white animate-bounce">
<i class="fa fa-angle-double-down text-3xl"></i>
</div>
</header>
<!-- 关于乐队 -->
<section id="about" class="py-20 bg-accent">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-4 text-secondary">关于Beyond</h2>
<div class="w-24 h-1 bg-primary mx-auto"></div>
</div>
<div class="flex flex-col md:flex-row items-center gap-10">
<div class="md:w-1/2">
<img src="//res.chenzhizuo.cn/beyond/body/beyond.jpg" alt="Beyond乐队合影" class="rounded-lg shadow-xl w-full h-auto hover:shadow-2xl transition-all transform hover:scale-[1.02]">
</div>
<div class="md:w-1/2">
<p class="text-lg mb-4 leading-relaxed">
Beyond是一支成立于1983年的香港摇滚乐队，由黄家驹、黄贯中、黄家强和叶世荣组成。他们以原创音乐著称，作品题材广泛，从爱情到社会议题，从和平到理想，都有所涉及。
</p>
<p class="text-lg mb-4 leading-relaxed">
乐队凭借《海阔天空》、《真的爱你》、《光辉岁月》等经典作品享誉华语乐坛，他们的音乐不仅在香港和中国大陆广受欢迎，还在东南亚地区拥有大量粉丝。
</p>
<p class="text-lg leading-relaxed">
1993年，主唱黄家驹在日本意外离世，乐队经历了重组和风格转变，最终于2005年宣布暂时解散。尽管乐队已不复存在，但他们的音乐精神依然影响着一代又一代的年轻人。
</p>
</div>
</div>
</div>
</section>
<!-- 乐队成员 -->
<section id="members" class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-4 text-secondary">乐队成员</h2>
<div class="w-24 h-1 bg-primary mx-auto"></div>
<p class="mt-4 text-lg text-gray-600">Beyond的核心成员，他们共同创造了无数经典</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- 黄家驹 -->
<div class="bg-accent rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-2">
<div class="h-64 overflow-hidden">
<img src="//res.chenzhizuo.cn/beyond/body/hjj.jpg" alt="黄家驹" class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2 text-secondary">黄家驹</h3>
<p class="text-gray-600 mb-3">主唱 / 吉他手</p>
<p class="text-gray-700">
乐队的创始人之一，主要词曲创作人，Beyond的灵魂人物。他的歌声和创作影响了整个华语乐坛。
</p>
</div>
</div>
<!-- 黄贯中 -->
<div class="bg-accent rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-2">
<div class="h-64 overflow-hidden">
<img src="//res.chenzhizuo.cn/beyond/body/hgz.jpg" alt="黄贯中" class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2 text-secondary">黄贯中</h3>
<p class="text-gray-600 mb-3">吉他手 / 主唱</p>
<p class="text-gray-700">
乐队的主音吉他手，黄家驹去世后成为乐队主唱之一，以独特的吉他风格和嗓音著称。
</p>
</div>
</div>
<!-- 黄家强 -->
<div class="bg-accent rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-2">
<div class="h-64 overflow-hidden">
<img src="//res.chenzhizuo.cn/beyond/body/hjq.jpg" alt="黄家强" class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2 text-secondary">黄家强</h3>
<p class="text-gray-600 mb-3">贝斯手 / 主唱</p>
<p class="text-gray-700">
黄家驹的弟弟，乐队的贝斯手，也参与歌曲创作和演唱，是乐队的重要成员。
</p>
</div>
</div>
<!-- 叶世荣 -->
<div class="bg-accent rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-2">
<div class="h-64 overflow-hidden">
<img src="//res.chenzhizuo.cn/beyond/body/ysr.jpg" alt="叶世荣" class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2 text-secondary">叶世荣</h3>
<p class="text-gray-600 mb-3">鼓手</p>
<p class="text-gray-700">
乐队的鼓手，也是创始成员之一，以稳定的节奏和独特的鼓点为Beyond的音乐奠定了基础。
</p>
</div>
</div>
</div>
</div>
</section>
<!-- 专辑作品 -->
<section id="albums" class="py-20 bg-secondary text-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-4">经典专辑</h2>
<div class="w-24 h-1 bg-primary mx-auto"></div>
<p class="mt-4 text-lg text-gray-300">Beyond发行的经典专辑，每一张都承载着无数回忆</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 专辑1 -->
<div class="bg-dark bg-opacity-50 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-2">
<div class="h-64 overflow-hidden">
<img src="//res.chenzhizuo.cn/beyond/cover/1993%20-%20%E4%B9%90%E4%B8%8E%E6%80%92.jpg" alt="《乐与怒》专辑封面" class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">乐与怒</h3>
<p class="text-gray-300 mb-2">发行年份: 1993年</p>
<p class="text-gray-300 mb-4">
这是Beyond在黄家驹生前发行的最后一张专辑，歌曲《海阔天空》成为不朽经典。
</p>
<a href="http://mp3.52beyond.com/show_special.asp?special_id=10" class="inline-block text-primary hover:text-primary/80 font-medium">
查看详情 <i class="fa fa-arrow-right ml-1"></i>
</a>
</div>
</div>
<!-- 专辑2 -->
<div class="bg-dark bg-opacity-50 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-2">
<div class="h-64 overflow-hidden">
<img src="//res.chenzhizuo.cn/beyond/cover/1989%20-%20BEYOND%20IV.jpg" alt="《真的爱你》专辑封面" class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">BEYOND IV</h3>
<p class="text-gray-300 mb-2">发行年份: 1989年</p>
<p class="text-gray-300 mb-4">
专辑中的《真的爱你》是写给母亲的歌曲，成为Beyond的代表作之一，广为人知。
</p>
<a href="http://mp3.52beyond.com/show_special.asp?special_id=5" class="inline-block text-primary hover:text-primary/80 font-medium">
查看详情 <i class="fa fa-arrow-right ml-1"></i>
</a>
</div>
</div>
<!-- 专辑3 -->
<div class="bg-dark bg-opacity-50 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-2">
<div class="h-64 overflow-hidden">
<img src="//res.chenzhizuo.cn/beyond/cover/1990%20-%20%E5%91%BD%E8%BF%90%E6%B4%BE%E5%AF%B9.jpg" alt="《命运派对》专辑封面" class="w-full h-full object-cover transition-transform hover:scale-110 duration-500">
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2">命运派对</h3>
<p class="text-gray-300 mb-2">发行年份: 1990年</p>
<p class="text-gray-300 mb-4">
歌曲《光辉岁月》是黄家驹为曼德拉创作的作品，传递了对自由和平等的追求。
</p>
<a href="http://mp3.52beyond.com/show_special.asp?special_id=7" class="inline-block text-primary hover:text-primary/80 font-medium">
查看详情 <i class="fa fa-arrow-right ml-1"></i>
</a>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="http://mp3.52beyond.com/" class="inline-block bg-primary hover:bg-primary/80 text-white font-bold py-3 px-8 rounded-full transition-all transform hover:scale-105">
查看全部专辑 <i class="fa fa-disc ml-2"></i>
</a>
</div>
</div>
</section>
<!-- 演唱会 -->
<section id="concerts" class="py-20 bg-accent">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-4 text-secondary">经典演唱会</h2>
<div class="w-24 h-1 bg-primary mx-auto"></div>
<p class="mt-4 text-lg text-gray-600">Beyond那些令人难忘的现场表演</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10">
<!-- 演唱会1 -->
<div class="bg-white rounded-lg overflow-hidden shadow-lg flex flex-col md:flex-row">
<div class="md:w-2/5">
<img src="//res.chenzhizuo.cn/beyond/concert/live91.jpg" alt="1991年生命接触演唱会" class="w-full h-full object-cover">
</div>
<div class="md:w-3/5 p-6">
<span class="inline-block bg-primary text-white text-sm font-bold px-3 py-1 rounded-full mb-4">1991年</span>
<h3 class="text-2xl font-bold mb-3 text-secondary">Beyond Live 1991 生命接触演唱会</h3>
<p class="text-gray-600 mb-4">
这是Beyond最经典的演唱会之一，于1991年在香港红磡体育馆举行。演唱会上，乐队演唱了多首经典歌曲，包括《光辉岁月》、《真的爱你》等。
</p>
<div class="flex justify-between items-center mt-auto">
<span class="text-gray-500"><i class="fa fa-map-marker mr-1"></i> 香港红磡体育馆</span>
<a href="#" class="text-primary hover:text-primary/80 font-medium">
观看录像 <i class="fa fa-play-circle ml-1"></i>
</a>
</div>
</div>
</div>
<!-- 演唱会2 -->
<div class="bg-white rounded-lg overflow-hidden shadow-lg flex flex-col md:flex-row">
<div class="md:w-2/5">
<img src="//res.chenzhizuo.cn/beyond/concert/story05.jpg" alt="2005年BEYOND告别演唱会" class="w-full h-full object-cover">
</div>
<div class="md:w-3/5 p-6">
<span class="inline-block bg-primary text-white text-sm font-bold px-3 py-1 rounded-full mb-4">2005年</span>
<h3 class="text-2xl font-bold mb-3 text-secondary">Beyond The Story Live 2005 告别演唱会</h3>
<p class="text-gray-600 mb-4">
这是Beyond宣布解散前的最后一次大型巡演，于2005年举行，覆盖多个城市。演唱会回顾了乐队多年来的经典作品，感动了无数粉丝。
</p>
<div class="flex justify-between items-center mt-auto">
<span class="text-gray-500"><i class="fa fa-map-marker mr-1"></i> 全球巡演</span>
<a href="#" class="text-primary hover:text-primary/80 font-medium">
观看录像 <i class="fa fa-play-circle ml-1"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 联系我们 -->
<section id="contact" class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold mb-4 text-secondary">联系我们</h2>
<div class="w-24 h-1 bg-primary mx-auto"></div>
<p class="mt-4 text-lg text-gray-600">网站规划中，有任何意见或建议，可通过以下方式联系站长</p>
</div>
<div class="max-w-4xl mx-auto bg-accent rounded-xl shadow-lg p-8 md:p-10">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 class="text-xl font-bold mb-6 text-secondary">联系方式</h3>
<ul class="space-y-4">
<li class="flex items-start">
<i class="fa fa-link text-primary text-xl mt-1 mr-4"></i>
<div>
<p class="font-medium">BEYOND资源分享</p>
<a href="http://list.52beyond.com/" class="text-primary hover:underline" target="_blank">http://list.52beyond.com/</a>
</div>
</li>
<li class="flex items-start">
<i class="fa fa-music text-primary text-xl mt-1 mr-4"></i>
<div>
<p class="font-medium">BEYOND专辑信息</p>
<a href="http://mp3.52beyond.com/" class="text-primary hover:underline" target="_blank">http://mp3.52beyond.com/</a>
</div>
</li>
<li class="flex items-start">
<i class="fa fa-envelope text-primary text-xl mt-1 mr-4"></i>
<div>
<p class="font-medium">电子邮件</p>
<a href="mailto:[email protected]" class="text-primary hover:underline">[email protected]</a>
</div>
</li>
<li class="flex items-start">
<i class="fa fa-cloud text-primary text-xl mt-1 mr-4"></i>
<div>
<p class="font-medium">网盘/留言</p>
<a href="http://beyond.ys168.com/" class="text-primary hover:underline" target="_blank">http://beyond.ys168.com/</a>
</div>
</li>
<li class="flex items-start">
<i class="fa fa-globe text-primary text-xl mt-1 mr-4"></i>
<div>
<p class="font-medium">兄弟站点</p>
<a href="https://beyond.wang/" class="text-primary hover:underline" target="_blank">https://beyond.wang/</a>
</div>
</li>
</ul>
</div>
<div>
<h3 class="text-xl font-bold mb-6 text-secondary">留言反馈</h3>
<form action="handle_message.php" method="POST">
<div class="mb-4">
<label for="name" class="block text-gray-700 mb-2">您的姓名或昵称</label>
<input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 mb-2">联系方式</label>
<input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
</div>
<div class="mb-6">
<label for="message" class="block text-gray-700 mb-2">您的留言</label>
<textarea id="message" name="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"></textarea>
</div>
<button type="submit" class="w-full bg-primary hover:bg-primary/80 text-white font-bold py-3 px-6 rounded-lg transition-all transform hover:scale-[1.02]">
提交留言 <i class="fa fa-paper-plane ml-2"></i>
</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-dark text-white py-10">
<div class="container mx-auto px-4">
<div class="text-center">
<h3 class="text-2xl font-bold mb-4">追忆Beyond站</h3>
<p class="text-gray-400 mb-6">
致力于传播Beyond的音乐精神，让经典永不褪色
</p>
<div class="flex justify-center space-x-4 mb-6">
<a href="#" class="text-gray-400 hover:text-primary transition-colors text-xl">
<i class="fa fa-facebook"></i>
</a>
<a href="#" class="text-gray-400 hover:text-primary transition-colors text-xl">
<i class="fa fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-primary transition-colors text-xl">
<i class="fa fa-instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-primary transition-colors text-xl">
<i class="fa fa-youtube-play"></i>
</a>
</div>
<p class="text-gray-500 text-sm">
© 2005-2025 追忆Beyond站 - 歌迷自建非官方粉丝网站，仅用于分享和纪念，鼓励购买正版资源
</p>
</div>
</div>
</footer>
<!-- 返回顶部按钮 -->
<button id="backToTop" class="fixed bottom-8 right-8 bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-primary/80">
<i class="fa fa-arrow-up"></i>
</button>
<!-- JavaScript -->
<script>
// 导航栏滚动效果
const navbar = document.getElementById('navbar');
const backToTop = document.getElementById('backToTop');
window.addEventListener('scroll', function() {
if (window.scrollY > 100) {
navbar.classList.add('navbar-scrolled');
backToTop.classList.remove('opacity-0', 'invisible');
backToTop.classList.add('opacity-100', 'visible');
} else {
navbar.classList.remove('navbar-scrolled');
backToTop.classList.add('opacity-0', 'invisible');
backToTop.classList.remove('opacity-100', 'visible');
}
});
// 移动端菜单
const menuBtn = document.getElementById('menuBtn');
const mobileMenu = document.getElementById('mobileMenu');
menuBtn.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
if (mobileMenu.classList.contains('hidden')) {
menuBtn.innerHTML = '<i class="fa fa-bars"></i>';
} else {
menuBtn.innerHTML = '<i class="fa fa-times"></i>';
}
});
// 点击移动端菜单项后关闭菜单
const mobileLinks = mobileMenu.querySelectorAll('a');
mobileLinks.forEach(link => {
link.addEventListener('click', function() {
mobileMenu.classList.add('hidden');
menuBtn.innerHTML = '<i class="fa fa-bars"></i>';
});
});
// 返回顶部功能
backToTop.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 百度统计代码
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?a71a7e871037da031aa20311da0f5258";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>