494 lines
22 KiB
HTML
Executable File
494 lines
22 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>CCSIT | Hare's World服务器</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: '#8B5CF6', // 蔚蓝档案主色调：紫色
|
||
secondary: '#C084FC', // 浅紫色
|
||
accent: '#EC4899', // 强调色：粉色
|
||
dark: '#121826', // 深色背景
|
||
light: '#F3F4F6', // 浅色文字
|
||
wa: '#8B5CF6', // 蔚蓝档案紫色
|
||
'wa-dark': '#5B21B6', // 深紫色
|
||
'wa-light': '#C084FC', // 浅紫色
|
||
'wa-accent': '#EC4899', // 粉色强调
|
||
},
|
||
fontFamily: {
|
||
minecraft: ['"Minecraft"', 'sans-serif'],
|
||
inter: ['Inter', 'sans-serif'],
|
||
wa: ['"Segoe UI"', 'Roboto', 'sans-serif'], // Added fallback fonts
|
||
},
|
||
animation: {
|
||
'float': 'float 3s ease-in-out infinite',
|
||
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||
'bounce-slow': 'bounce 3s infinite',
|
||
},
|
||
keyframes: {
|
||
float: {
|
||
'0%, 100%': { transform: 'translateY(0)' },
|
||
'50%': { transform: 'translateY(-10px)' },
|
||
}
|
||
},
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
<style type="text/tailwindcss">
|
||
@layer utilities {
|
||
.content-auto {
|
||
content-visibility: auto;
|
||
}
|
||
.text-shadow {
|
||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||
}
|
||
.text-shadow-lg {
|
||
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
|
||
}
|
||
.bg-grid {
|
||
background-image:
|
||
linear-gradient(rgba(139, 92, 246, 0.05) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(139, 92, 246, 0.05) 1px, transparent 1px);
|
||
background-size: 20px 20px;
|
||
}
|
||
.wa-title {
|
||
@apply font-wa text-wa text-shadow-lg tracking-wide;
|
||
}
|
||
.wa-card {
|
||
@apply bg-dark/60 backdrop-blur-sm rounded-xl border border-wa/20 hover:border-wa/40 transition-all duration-500 hover:shadow-lg hover:shadow-wa/20;
|
||
}
|
||
.rank-badge {
|
||
@apply inline-block px-3 py-1 rounded-full text-xs font-bold uppercase;
|
||
}
|
||
.nav-link {
|
||
@apply relative text-white/80 hover:text-white transition-colors duration-300 after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-wa after:transition-all after:duration-300 hover:after:w-full;
|
||
}
|
||
.nav-link.active {
|
||
@apply text-white after:w-full;
|
||
}
|
||
.btn-primary {
|
||
@apply bg-wa hover:bg-wa-dark text-white font-bold py-3 px-8 rounded-lg transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg hover:shadow-wa/30;
|
||
}
|
||
.btn-secondary {
|
||
@apply bg-dark/50 hover:bg-dark/70 text-white font-bold py-3 px-8 rounded-lg transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg;
|
||
}
|
||
.scrollbar-hidden::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.scrollbar-hidden {
|
||
-ms-overflow-style: none;
|
||
scrollbar-width: none;
|
||
}
|
||
.animate-float {
|
||
animation: float 3s ease-in-out infinite;
|
||
}
|
||
.animate-pulse-slow {
|
||
animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||
}
|
||
}
|
||
</style>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||
</head>
|
||
<body class="font-inter bg-dark bg-grid text-light overflow-x-hidden">
|
||
<!-- 导航栏 -->
|
||
<nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-300" id="mainNav">
|
||
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
|
||
<div class="flex items-center">
|
||
<i class="fa fa-cube text-wa text-2xl mr-3 animate-pulse"></i>
|
||
<h1 class="text-xl font-bold text-white">Hare's<span class="text-wa"> World</span></h1>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 页面内容 -->
|
||
<main>
|
||
<!-- 首页 -->
|
||
<section id="home" class="min-h-screen flex items-center justify-center relative overflow-hidden">
|
||
<div class="absolute inset-0 bg-[url('https://picsum.photos/id/142/1920/1080')] bg-cover bg-center opacity-20"></div>
|
||
<div class="absolute inset-0 bg-gradient-to-b from-dark via-dark/80 to-dark"></div>
|
||
|
||
<div class="container mx-auto px-4 pt-24 pb-16 relative z-10">
|
||
<div class="max-w-4xl mx-auto text-center">
|
||
<div class="mb-8 animate-pulse">
|
||
<i class="fa fa-cube text-wa text-5xl"></i>
|
||
</div>
|
||
<h1 class="text-[clamp(2.5rem,8vw,5rem)] font-bold text-white mb-6 text-shadow-lg">
|
||
Hare's<span class="wa-title"> World</span>
|
||
</h1>
|
||
<p class="text-[clamp(1.2rem,3vw,1.8rem)] text-white/90 mb-12 max-w-3xl mx-auto text-shadow">
|
||
探索无限可能
|
||
</p>
|
||
|
||
<div class="flex flex-col sm:flex-row justify-center gap-6 mb-16">
|
||
<div class="flex items-center bg-dark/50 backdrop-blur-sm p-4 rounded-xl border border-wa/20">
|
||
<span class="inline-block w-3 h-3 rounded-full bg-green-500 animate-pulse mr-3"></span>
|
||
<div>
|
||
<div class="text-white/60 text-sm">当前在线</div>
|
||
<div class="text-white text-xl font-bold current-players">加载中...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center bg-dark/50 backdrop-blur-sm p-4 rounded-xl border border-wa/20">
|
||
<i class="fa fa-clock-o text-wa mr-3"></i>
|
||
<div>
|
||
<div class="text-white/60 text-sm">服务器运行时间</div>
|
||
<div class="text-white text-xl font-bold">24/7 不间断</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex flex-wrap justify-center gap-4">
|
||
<a href="#features" class="btn-primary">
|
||
<i class="fa fa-rocket mr-2"></i> 探索特色
|
||
</a>
|
||
<a href="#join" class="btn-secondary">
|
||
<i class="fa fa-gamepad mr-2"></i> 立即加入
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="absolute bottom-8 left-0 right-0 flex justify-center animate-bounce">
|
||
<a href="#features" class="text-white/70 hover:text-white transition-colors">
|
||
<i class="fa fa-angle-down text-3xl"></i>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 特色系统 -->
|
||
<section id="features" class="min-h-screen flex items-center justify-center relative py-24">
|
||
<div class="absolute inset-0 bg-gradient-to-b from-dark to-wa-dark/10"></div>
|
||
<div class="container mx-auto px-4 relative z-10">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-[clamp(2rem,6vw,4rem)] font-bold text-white mb-4 text-shadow">
|
||
<span class="wa-title">服务器</span> 特色系统
|
||
</h2>
|
||
<p class="text-white/70 max-w-2xl mx-auto text-lg">
|
||
我们的服务器整合了多种独特功能，打造沉浸式游戏体验
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
<!-- 特色卡片1 -->
|
||
<div class="wa-card p-8 group">
|
||
<div class="w-16 h-16 bg-wa/20 rounded-full flex items-center justify-center mb-6 mx-auto transform group-hover:scale-110 transition-transform">
|
||
<i class="fa fa-user-circle text-2xl text-wa"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-white mb-4 group-hover:text-wa transition-colors">角色称号系统</h3>
|
||
<p class="text-white/70">独特称号，从"兔耳新生"到"联邦学生会"，展现你的游戏成就</p>
|
||
</div>
|
||
|
||
<!-- 特色卡片2 -->
|
||
<div class="wa-card p-8 group">
|
||
<div class="w-16 h-16 bg-wa/20 rounded-full flex items-center justify-center mb-6 mx-auto transform group-hover:scale-110 transition-transform">
|
||
<i class="fa fa-trophy text-2xl text-wa"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-white mb-4 group-hover:text-wa transition-colors">RTP插件</h3>
|
||
<p class="text-white/70">随机传送，在主世界正负20000格传送，让您的每个基地都独一无二</p>
|
||
</div>
|
||
|
||
<!-- 特色卡片3 -->
|
||
<div class="wa-card p-8 group">
|
||
<div class="w-16 h-16 bg-wa/20 rounded-full flex items-center justify-center mb-6 mx-auto transform group-hover:scale-110 transition-transform">
|
||
<i class="fa fa-university text-2xl text-wa"></i>
|
||
</div>
|
||
<h3 class="text-xl font-bold text-white mb-4 group-hover:text-wa transition-colors">生电优化</h3>
|
||
<p class="text-white/70">leaves服务核心，轻度生电，养老毫无问题</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 称号与等级 -->
|
||
<section id="ranks" class="min-h-screen flex items-center justify-center relative py-24">
|
||
<div class="absolute inset-0 bg-gradient-to-b from-wa-dark/10 to-wa-dark/20"></div>
|
||
<div class="container mx-auto px-4 relative z-10">
|
||
<div class="text-center mb-16">
|
||
<h2 class="text-[clamp(2rem,6vw,4rem)] font-bold text-white mb-4 text-shadow">
|
||
<span class="wa-title">称号系统</span>
|
||
</h2>
|
||
<p class="text-white/70 max-w-2xl mx-auto text-lg">
|
||
通过游戏成就解锁独特称号，展现你的实力与地位
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
<!-- 等级1 -->
|
||
<div class="wa-card p-8 overflow-hidden relative group">
|
||
<div class="absolute -right-4 -top-4 w-24 h-24 bg-wa/20 rounded-full"></div>
|
||
<div class="relative">
|
||
<div class="flex justify-between items-start mb-6">
|
||
<div class="rank-badge bg-wa-dark text-white">🐇兔耳新生</div>
|
||
<div class="text-3xl font-bold text-wa">Player</div>
|
||
</div>
|
||
|
||
<div class="h-1 bg-wa/30 rounded-full mb-6">
|
||
<div class="h-full bg-wa rounded-full" style="width: 10%"></div>
|
||
</div>
|
||
|
||
<h3 class="text-xl font-bold text-white mb-4">“新生，欢迎来到基沃托斯”</h3>
|
||
<p class="text-white/70 mb-6">
|
||
作为学院的新生，你将接受基础训练，学习基本技能和游戏机制。
|
||
</p>
|
||
|
||
<div class="space-y-2">
|
||
<div class="flex items-center">
|
||
<i class="fa fa-check text-green-400 mr-2"></i>
|
||
<span class="text-white/80">校园探索权限</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<i class="fa fa-check text-green-400 mr-2"></i>
|
||
<span class="text-white/80">基础奖励包</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-8 pt-6 border-t border-wa/10">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<div class="text-white/60 text-sm">称号达成条件:</div>
|
||
<div class="text-white font-bold">进入服务器自动获取</div>
|
||
</div>
|
||
<button class="text-wa hover:text-wa-light transition-colors">
|
||
<i class="fa fa-arrow-right"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 等级2 -->
|
||
<div class="wa-card p-8 overflow-hidden relative group transform hover:-translate-y-2 transition-transform">
|
||
<div class="absolute -right-4 -top-4 w-24 h-24 bg-wa/30 rounded-full"></div>
|
||
<div class="relative">
|
||
<div class="flex justify-between items-start mb-6">
|
||
<div class="rank-badge bg-wa text-white">🥕胡萝卜特攻</div>
|
||
<div class="text-3xl font-bold text-wa">Player</div>
|
||
</div>
|
||
|
||
<div class="h-1 bg-wa/30 rounded-full mb-6">
|
||
<div class="h-full bg-wa rounded-full" style="width: 50%"></div>
|
||
</div>
|
||
|
||
<h3 class="text-xl font-bold text-white mb-4">“WOW，你升级了!!!”</h3>
|
||
<p class="text-white/70 mb-6">
|
||
作为学院的高年级学生，你将接受更好的学院资助，探索世界。
|
||
</p>
|
||
|
||
<div class="space-y-2">
|
||
<div class="flex items-center">
|
||
<i class="fa fa-check text-green-400 mr-2"></i>
|
||
<span class="text-white/80">高级奖励解锁</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<i class="fa fa-check text-green-400 mr-2"></i>
|
||
<span class="text-white/80">特殊能力解锁</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-8 pt-6 border-t border-wa/10">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<div class="text-white/60 text-sm">称号达成条件:</div>
|
||
<div class="text-white font-bold">5*金胡萝卜</div>
|
||
</div>
|
||
<button class="text-wa hover:text-wa-light transition-colors">
|
||
<i class="fa fa-arrow-right"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 等级3 -->
|
||
<div class="wa-card p-8 overflow-hidden relative group">
|
||
<div class="absolute -right-4 -top-4 w-24 h-24 bg-wa-light/30 rounded-full"></div>
|
||
<div class="relative">
|
||
<div class="flex justify-between items-start mb-6">
|
||
<div class="rank-badge bg-wa-light text-dark">⚔战术指挥部\★联邦学生会</div>
|
||
<div class="text-3xl font-bold text-wa-light">Admin</div>
|
||
</div>
|
||
|
||
<div class="h-1 bg-wa/30 rounded-full mb-6">
|
||
<div class="h-full bg-wa-light rounded-full" style="width: 100%"></div>
|
||
</div>
|
||
|
||
<h3 class="text-xl font-bold text-white mb-4">“看，那是学生会成员，可不要在他们眼前干坏事(⊙o⊙)”</h3>
|
||
<p class="text-white/70 mb-6">
|
||
达到学院最高等级，掌握终极权限，维护基沃托斯的安全稳定。
|
||
</p>
|
||
|
||
<div class="space-y-2">
|
||
<div class="flex items-center">
|
||
<i class="fa fa-check text-green-400 mr-2"></i>
|
||
<span class="text-white/80">终极管理员权限解锁</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<i class="fa fa-check text-green-400 mr-2"></i>
|
||
<span class="text-white/80">专属指挥官装备礼包</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-8 pt-6 border-t border-wa/10">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<div class="text-white/60 text-sm">称号达成条件:</div>
|
||
<div class="text-white font-bold">咨询任意:"联邦学生会"成员申请</div>
|
||
</div>
|
||
<button class="text-wa-light hover:text-white transition-colors">
|
||
<i class="fa fa-star"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 原本称号展示部分 -->
|
||
<div class="mt-16 text-center">
|
||
<h3 class="text-2xl font-bold text-white mb-8">进入服务器步骤</h3>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 max-w-4xl mx-auto">
|
||
<!-- 步骤 1 -->
|
||
<div class="wa-card p-4 text-center">
|
||
<div class="text-wa text-4xl mb-2">
|
||
<i class="fa fa-download"></i>
|
||
</div>
|
||
<div class="rank-badge bg-wa-dark text-white mb-2">步骤 1</div>
|
||
<p class="text-white/60 text-sm">下载1.18-1.21任意版本的 Minecraft 游戏客户端。</p>
|
||
</div>
|
||
|
||
<!-- 步骤 2 -->
|
||
<div class="wa-card p-4 text-center">
|
||
<div class="text-wa text-4xl mb-2">
|
||
<i class="fa fa-cog"></i>
|
||
</div>
|
||
<div class="rank-badge bg-wa text-white mb-2">步骤 2</div>
|
||
<p class="text-white/60 text-sm">安装游戏客户端，确保网络连接正常。</p>
|
||
</div>
|
||
|
||
<!-- 步骤 3 -->
|
||
<div class="wa-card p-4 text-center">
|
||
<div class="text-wa text-4xl mb-2">
|
||
<i class="fa fa-plus"></i>
|
||
</div>
|
||
<div class="rank-badge bg-wa-dark text-white mb-2">步骤 3</div>
|
||
<p class="text-white/60 text-sm">在游戏客户端中添加服务器地址：play.mc.ccsnetwork.cn。</p>
|
||
</div>
|
||
|
||
<!-- 步骤 4 -->
|
||
<div class="wa-card p-4 text-center">
|
||
<div class="text-wa text-4xl mb-2">
|
||
<i class="fa fa-play"></i>
|
||
</div>
|
||
<div class="rank-badge bg-wa-light text-dark mb-2">步骤 4</div>
|
||
<p class="text-white/60 text-sm">点击连接服务器，开始游戏。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
<footer class="bg-dark/90 backdrop-blur-md py-12">
|
||
<div class="container mx-auto px-4">
|
||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
|
||
<div>
|
||
<div class="flex items-center space-x-2 mb-4">
|
||
<span class="text-xl font-bold text-white">圆周云境</span>
|
||
</div>
|
||
<p class="text-gray-400 text-sm" >一切，为了梦，为了你</p>
|
||
<p class="text-gray-400 text-sm">本站由:<a href="rainyun.com" class="text-gray-400 text-sm"> 雨云 提供技术支持</a></p>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-white font-bold mb-4">使用协议</h4>
|
||
<ul class="space-y-2">
|
||
<li><a href="./console/cookie.html" class="text-gray-400 hover:text-primary transition-colors">cookies政策</a></li>
|
||
<li><a href="./console/terms.html" class="text-gray-400 hover:text-primary transition-colors">隐私政策</a></li>
|
||
<li><a href="https://gitea.ccsnetwork.cn/CCSIT/ccswebsite/commits/branch/main" class="text-gray-400 hover:text-primary transition-colors">更新日志</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 class="text-white font-bold mb-4">社区</h4>
|
||
<ul class="space-y-2">
|
||
<li><a href="https://qm.qq.com/cgi-bin/qm/qr?k=GFwl1pDbLeeUGOh3kuVH0664EIdI-N5w&jump_from=webapi&authKey=UzTFWTWasv6xxgl7aU+kHAb80/Ps/gA4AWoJ3v5r4hfj07iDIXBl/sMfY+teTnf3" class="text-white/60 hover:text-blue-400 transition-colors">QQ群</a></li>
|
||
<li><a href="https://space.bilibili.com/1382004137?spm_id_from=333.1007.0.0" class="text-white/60 hover:text-blue-400 transition-colors">Bilibili</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="pt-8 border-t border-primary/10 text-center text-gray-500 text-sm">
|
||
Copyright © 2023-2025 CCSIT Network.All rights reserved.
|
||
© 圆周云境信息技术 保留所有权利。| 版本:2.8.9(submitID:NULL(未开源))
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
|
||
|
||
<script>
|
||
// 动态加载服务器数据
|
||
async function fetchServerData() {
|
||
try {
|
||
// 调用PHP后端接口
|
||
const response = await fetch("get_server_status.php");
|
||
const data = await response.json();
|
||
|
||
// 检查是否有错误
|
||
if (data.error) {
|
||
console.error("获取服务器数据失败:", data.error);
|
||
return;
|
||
}
|
||
|
||
// 更新在线玩家数量
|
||
document.querySelector(".current-players").textContent = `${data.online}/${data.max} 玩家`;
|
||
|
||
// 更新服务器版本
|
||
document.querySelector(".server-version").textContent = data.version;
|
||
|
||
// 更新服务器状态
|
||
const serverStatus = document.querySelector(".server-status");
|
||
if (data.status === "online") {
|
||
serverStatus.classList.remove("text-red-500");
|
||
serverStatus.classList.add("text-green-500");
|
||
serverStatus.textContent = "在线";
|
||
} else {
|
||
serverStatus.classList.remove("text-green-500");
|
||
serverStatus.classList.add("text-red-500");
|
||
serverStatus.textContent = "离线";
|
||
}
|
||
|
||
// 更新服务器延迟
|
||
document.querySelector(".server-delay").textContent = `${data.delay}ms`;
|
||
|
||
// 更新服务器广播内容 (MOTD)
|
||
document.querySelector(".server-motd").textContent = data.motd;
|
||
|
||
// 更新游戏模式
|
||
document.querySelector(".server-gamemode").textContent = data.gamemode;
|
||
|
||
// 更新协议版本
|
||
document.querySelector(".server-agreement").textContent = data.agreement;
|
||
|
||
// 如果需要，更新服务器图标
|
||
const serverIcon = document.querySelector(".server-icon");
|
||
if (data.icon) {
|
||
serverIcon.src = data.icon;
|
||
}
|
||
} catch (error) {
|
||
console.error("获取服务器数据失败:", error);
|
||
}
|
||
}
|
||
|
||
// 页面加载完成后调用
|
||
window.onload = fetchServerData;
|
||
|
||
// 每30秒刷新一次数据
|
||
setInterval(fetchServerData, 30000);
|
||
</script>
|
||
</body>
|
||
</html> |