270 lines
13 KiB
HTML
270 lines
13 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>圆周云境</title>
|
|||
|
|
<link rel="icon" href="./logo.png" type="image/png">
|
|||
|
|
<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: '#4e73df',
|
|||
|
|
secondary: '#e9ecef',
|
|||
|
|
accent: '#fff3cd'
|
|||
|
|
},
|
|||
|
|
fontFamily: {
|
|||
|
|
sans: ['PingFang SC', 'Microsoft YaHei', 'sans-serif'],
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style type="text/tailwindcss">
|
|||
|
|
@layer utilities {
|
|||
|
|
.content-auto {
|
|||
|
|
content-visibility: auto;
|
|||
|
|
}
|
|||
|
|
.bg-blur {
|
|||
|
|
backdrop-filter: blur(8px);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<style>
|
|||
|
|
/* 自定义加载动画 */
|
|||
|
|
.loader-spinner {
|
|||
|
|
border: 4px solid rgba(255, 255, 255, 0.3);
|
|||
|
|
border-top: 4px solid #4e73df;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
width: 50px;
|
|||
|
|
height: 50px;
|
|||
|
|
animation: spin 1.5s linear infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes spin {
|
|||
|
|
0% { transform: rotate(0deg); }
|
|||
|
|
100% { transform: rotate(360deg); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fade-out {
|
|||
|
|
animation: fadeOut 1s forwards;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes fadeOut {
|
|||
|
|
0% { opacity: 1; }
|
|||
|
|
100% { opacity: 0; visibility: hidden; }
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body class="font-sans antialiased text-gray-900 leading-relaxed">
|
|||
|
|
<div class="fixed inset-0 bg-cover bg-center z-0" style="background-image: url('back.jpeg');"></div>
|
|||
|
|
<!--<div class="fixed inset-0 bg-black/5 z-10"></div>-->
|
|||
|
|
|
|||
|
|
<div class="relative z-20">
|
|||
|
|
<div id="loader" class="fixed inset-0 bg-white flex items-center justify-center z-50">
|
|||
|
|
<div class="loader-spinner"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<header class="navbar fixed top-0 left-0 w-full bg-white/90 shadow-md z-40 transition-all duration-300">
|
|||
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
|
|||
|
|
<a href="#home" class="flex items-center text-lg font-bold text-primary no-underline hover:no-underline">
|
|||
|
|
<img src="./logo.png" alt="Logo" class="w-6 h-6 mr-2">
|
|||
|
|
<h2 class="text-lg font-semibold">圆周云境</h2>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<section class="hero pt-32 pb-20 bg-white/80 backdrop-blur-sm" id="home">
|
|||
|
|
<div class="container mx-auto px-4 text-center">
|
|||
|
|
<h1 class="text-[clamp(1.5rem,3vw,2.2rem)] font-bold text-primary mb-6 leading-tight">
|
|||
|
|
CCS.MC服务器玩家通行证
|
|||
|
|
</h1>
|
|||
|
|
<div class="flex justify-center flex-wrap gap-2 mb-8">
|
|||
|
|
<span class="px-4 py-2 bg-gray-100/70 rounded-full text-xs font-medium text-gray-800">
|
|||
|
|
高配置
|
|||
|
|
</span>
|
|||
|
|
<span class="px-4 py-2 bg-gray-100/70 rounded-full text-xs font-medium text-gray-800">
|
|||
|
|
极速游玩
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="bg-accent/70 border border-yellow-300 rounded-lg px-6 py-4 mb-10 max-w-md mx-auto">
|
|||
|
|
<p class="text-sm text-yellow-800">🌟 自2024年起运营的公益MC服务器</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
|||
|
|
<a href="./auth" class="px-8 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all shadow-lg hover:shadow-primary/30 transform hover:-translate-y-1">
|
|||
|
|
进入控制台申请
|
|||
|
|
</a>
|
|||
|
|
<a href="#about" class="px-8 py-3 border border-gray-300 rounded-lg hover:border-primary hover:text-primary transition-all">
|
|||
|
|
关于我们
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="about py-20 bg-white/80 backdrop-blur-sm" id="about">
|
|||
|
|
<div class="container mx-auto px-4">
|
|||
|
|
<div class="bg-secondary/70 rounded-xl px-8 py-8 mb-12 text-center max-w-3xl mx-auto">
|
|||
|
|
<h2 class="text-[clamp(1.3rem,2.5vw,1.8rem)] font-bold text-primary mb-4">关于我们</h2>
|
|||
|
|
</div>
|
|||
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|||
|
|
<div class="bg-white/90 rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow">
|
|||
|
|
<h3 class="text-base font-bold text-gray-800 mb-4 flex items-center">
|
|||
|
|
<i class="fa fa-info-circle text-primary mr-2"></i>
|
|||
|
|
关于我们
|
|||
|
|
</h3>
|
|||
|
|
<p class="text-sm text-gray-700">
|
|||
|
|
圆周云境（CycleCloudscape）诞生于2022年，原名圆周文化，后转型升级，主营MC服务器领域
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="bg-white/90 rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow">
|
|||
|
|
<h3 class="text-base font-bold text-gray-800 mb-4 flex items-center">
|
|||
|
|
<i class="fa fa-lightbulb-o text-primary mr-2"></i>
|
|||
|
|
服务类型
|
|||
|
|
</h3>
|
|||
|
|
<p class="text-sm text-gray-700">
|
|||
|
|
我们主营MC服务器领域，为广大玩家以及服主提供身份验证系统，提供公益Hyp加速ip。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="bg-white/90 rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow">
|
|||
|
|
<h3 class="text-base font-bold text-gray-800 mb-4 flex items-center">
|
|||
|
|
<i class="fa fa-star text-primary mr-2"></i>
|
|||
|
|
是否收费?
|
|||
|
|
</h3>
|
|||
|
|
<p class="text-sm text-gray-700">
|
|||
|
|
我们提供完全免费的网络服务。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 友情链接 -->
|
|||
|
|
<section class="partner py-20 bg-gray-100/70 backdrop-blur-sm">
|
|||
|
|
<div class="container mx-auto px-4">
|
|||
|
|
<h2 class="text-[clamp(1.3rem,2.5vw,1.8rem)] font-bold text-primary text-center mb-12">友情链接</h2>
|
|||
|
|
<div class="bg-white/90 rounded-xl shadow-xl overflow-hidden max-w-4xl mx-auto hover:shadow-2xl transition-shadow">
|
|||
|
|
<div class="flex flex-col md:flex-row">
|
|||
|
|
<div class="w-full md:w-1/3 p-6 md:p-0">
|
|||
|
|
<img src="./rainyun.jpg" alt="雨云" class="w-full h-full object-cover">
|
|||
|
|
</div>
|
|||
|
|
<div class="w-full md:w-2/3 p-8">
|
|||
|
|
<h3 class="text-lg font-bold text-gray-800 mb-4">雨云 - 新一代云服务提供商!</h3>
|
|||
|
|
<p class="text-sm text-gray-700 mb-6">
|
|||
|
|
预装各类服务端，开箱即用，一分钟即可开好MC服！独家动态计费，享受高性能同时节省闲置费用，不用担心玩家上学或睡觉！点击链接注册可享5折优惠券！
|
|||
|
|
</p>
|
|||
|
|
<a href="https://www.rainyun.com/dyzzyduq_" class="inline-flex items-center px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all shadow-md hover:shadow-lg transform hover:-translate-y-1">
|
|||
|
|
访问雨云官网 <i class="fa fa-arrow-right ml-2"></i>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 硬件设施 -->
|
|||
|
|
<section class="hardware py-20 bg-gray-100/70 backdrop-blur-sm" id="hardware">
|
|||
|
|
<div class="container mx-auto px-4 text-center">
|
|||
|
|
<h2 class="text-[clamp(1.3rem,2.5vw,1.8rem)] font-bold text-primary mb-6">专业级硬件设施</h2>
|
|||
|
|
<p class="text-sm text-gray-700 mb-12 max-w-2xl mx-auto">高品质基础架构，为您的游玩保驾护航</p>
|
|||
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|||
|
|
<div class="bg-white/90 rounded-xl p-8 shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-2">
|
|||
|
|
<div class="text-3xl text-primary mb-6 p-4 bg-primary/10 rounded-full inline-block">
|
|||
|
|
<i class="fa fa-microchip"></i>
|
|||
|
|
</div>
|
|||
|
|
<h3 class="text-base font-bold text-gray-800 mb-4">高性能CPU</h3>
|
|||
|
|
<p class="text-sm text-gray-700">
|
|||
|
|
高频高性能处理器，保证玩家游玩顺畅
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="bg-white/90 rounded-xl p-8 shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-2">
|
|||
|
|
<div class="text-3xl text-primary mb-6 p-4 bg-primary/10 rounded-full inline-block">
|
|||
|
|
<i class="fa fa-bolt"></i>
|
|||
|
|
</div>
|
|||
|
|
<h3 class="text-base font-bold text-gray-800 mb-4">极速网络</h3>
|
|||
|
|
<p class="text-sm text-gray-700">
|
|||
|
|
提供极速的游玩线路(BGP)，保证玩家体验
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="bg-white/90 rounded-xl p-8 shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-2">
|
|||
|
|
<div class="text-3xl text-primary mb-6 p-4 bg-primary/10 rounded-full inline-block">
|
|||
|
|
<i class="fa fa-server"></i>
|
|||
|
|
</div>
|
|||
|
|
<h3 class="text-base font-bold text-gray-800 mb-4">存档永久保留</h3>
|
|||
|
|
<p class="text-sm text-gray-700">
|
|||
|
|
提供存档永久保留
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- 页脚 -->
|
|||
|
|
<footer class="footer py-12 bg-white border-t backdrop-blur-sm text-center">
|
|||
|
|
<div class="container mx-auto px-4">
|
|||
|
|
<div class="flex flex-col md:flex-row justify-between items-center">
|
|||
|
|
<div class="mb-4 md:mb-0">
|
|||
|
|
<div class="flex items-center space-x-2">
|
|||
|
|
<i class="fa fa-server"></i>
|
|||
|
|
<span class="font-bold">CCS圆周云境</span>
|
|||
|
|
</div>
|
|||
|
|
<p class="text-gray-400 text-sm mt-1">背景图片来源<a href="https://bluearchive-cn.com/">《蔚蓝档案》</a></p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="mt-6 pt-6 border-t border-gray-700 text-center text-gray-400 text-sm">
|
|||
|
|
© 2025 圆周云境 | 版本 2.4.1(Alpha)
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
<!-- 返回顶部按钮 -->
|
|||
|
|
<a href="#home" id="backToTop" class="fixed bottom-8 right-8 bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center opacity-0 invisible transition-all duration-300 shadow-lg hover:bg-primary/90 transform hover:scale-110">
|
|||
|
|
<i class="fa fa-arrow-up"></i>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
window.addEventListener('load', function() {
|
|||
|
|
setTimeout(function() {
|
|||
|
|
document.getElementById('loader').classList.add('fade-out');
|
|||
|
|
}, 1000);
|
|||
|
|
|
|||
|
|
const backToTopButton = document.getElementById('backToTop');
|
|||
|
|
window.addEventListener('scroll', function() {
|
|||
|
|
if (window.pageYOffset > 300) {
|
|||
|
|
backToTopButton.classList.remove('opacity-0', 'invisible');
|
|||
|
|
backToTopButton.classList.add('opacity-100', 'visible');
|
|||
|
|
} else {
|
|||
|
|
backToTopButton.classList.add('opacity-0', 'invisible');
|
|||
|
|
backToTopButton.classList.remove('opacity-100', 'visible');
|
|||
|
|
}
|
|||
|
|
const navbar = document.querySelector('.navbar');
|
|||
|
|
if (window.pageYOffset > 100) {
|
|||
|
|
navbar.classList.add('py-2');
|
|||
|
|
navbar.classList.remove('py-3');
|
|||
|
|
} else {
|
|||
|
|
navbar.classList.add('py-3');
|
|||
|
|
navbar.classList.remove('py-2');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|||
|
|
anchor.addEventListener('click', function(e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
const targetId = this.getAttribute('href');
|
|||
|
|
if (targetId === '#') return;
|
|||
|
|
|
|||
|
|
const targetElement = document.querySelector(targetId);
|
|||
|
|
if (targetElement) {
|
|||
|
|
window.scrollTo({
|
|||
|
|
top: targetElement.offsetTop - 80,
|
|||
|
|
behavior: 'smooth'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|