2025-06-17 01:43:15 +00:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
2025-07-04 23:49:18 +00:00
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
<title>圆周云境</title>
|
|
|
|
|
|
<link rel="icon" href="./logo-sm.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 src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
|
|
|
|
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
|
|
|
|
<script>
|
|
|
|
|
|
tailwind.config = {
|
|
|
|
|
|
theme: {
|
|
|
|
|
|
extend: {
|
|
|
|
|
|
colors: {
|
|
|
|
|
|
primary: '#0ea5e9', // 亮蓝色作为主色调
|
|
|
|
|
|
secondary: '#1e293b', // 深蓝色作为次要色
|
|
|
|
|
|
accent: '#f59e0b', // 橙色作为强调色
|
|
|
|
|
|
dark: '#0f172a', // 深色背景
|
|
|
|
|
|
darker: '#020617' // 更深的背景
|
|
|
|
|
|
},
|
|
|
|
|
|
fontFamily: {
|
|
|
|
|
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
|
|
|
|
},
|
|
|
|
|
|
animation: {
|
|
|
|
|
|
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
|
|
|
|
'float': 'float 6s ease-in-out infinite',
|
|
|
|
|
|
'glow': 'glow 2s ease-in-out infinite alternate'
|
|
|
|
|
|
},
|
|
|
|
|
|
keyframes: {
|
|
|
|
|
|
float: {
|
|
|
|
|
|
'0%, 100%': { transform: 'translateY(0)' },
|
|
|
|
|
|
'50%': { transform: 'translateY(-10px)' }
|
|
|
|
|
|
},
|
|
|
|
|
|
glow: {
|
|
|
|
|
|
'0%': { boxShadow: '0 0 5px rgba(14, 165, 233, 0.5)' },
|
|
|
|
|
|
'100%': { boxShadow: '0 0 20px rgba(14, 165, 233, 0.8), 0 0 30px rgba(14, 165, 233, 0.5)' }
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-06-17 01:43:15 +00:00
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-07-04 23:49:18 +00:00
|
|
|
|
</script>
|
|
|
|
|
|
<style type="text/tailwindcss">
|
|
|
|
|
|
@layer utilities {
|
|
|
|
|
|
.content-auto {
|
|
|
|
|
|
content-visibility: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
.text-glow {
|
|
|
|
|
|
text-shadow: 0 0 10px rgba(14, 165, 233, 0.7);
|
|
|
|
|
|
}
|
|
|
|
|
|
.bg-grid {
|
|
|
|
|
|
background-size: 40px 40px;
|
|
|
|
|
|
background-image:
|
|
|
|
|
|
linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
|
|
|
|
|
|
linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
|
|
|
|
|
|
}
|
|
|
|
|
|
.card-3d {
|
|
|
|
|
|
transform-style: preserve-3d;
|
|
|
|
|
|
perspective: 1000px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.card-3d:hover .card-inner {
|
|
|
|
|
|
transform: rotateY(5deg) rotateX(5deg) translateZ(10px);
|
|
|
|
|
|
}
|
|
|
|
|
|
.card-inner {
|
|
|
|
|
|
transition: transform 0.5s ease;
|
|
|
|
|
|
backface-visibility: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
.animate-spin-slow {
|
|
|
|
|
|
animation: spin-slow 1.5s linear infinite;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
/* 粒子背景 */
|
|
|
|
|
|
#particles-js {
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
z-index: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 自定义滚动条 */
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
|
|
|
|
width: 8px;
|
|
|
|
|
|
height: 8px;
|
|
|
|
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar-track {
|
|
|
|
|
|
background: #0f172a;
|
|
|
|
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
|
|
|
|
background: #0ea5e9;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
|
|
|
|
background: #3b82f6;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 数字计数动画 */
|
|
|
|
|
|
.counter {
|
|
|
|
|
|
transition: all 0.5s ease;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 骨架屏加载效果 */
|
|
|
|
|
|
.skeleton {
|
|
|
|
|
|
background: linear-gradient(90deg, #1e293b 25%, #0f172a 50%, #1e293b 75%);
|
|
|
|
|
|
background-size: 200% 100%;
|
|
|
|
|
|
animation: skeleton-loading 1.5s infinite;
|
|
|
|
|
|
}
|
|
|
|
|
|
@keyframes skeleton-loading {
|
|
|
|
|
|
0% { background-position: 200% 0; }
|
|
|
|
|
|
100% { background-position: -200% 0; }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@keyframes spin-slow {
|
|
|
|
|
|
from { transform: rotate(0deg); }
|
|
|
|
|
|
to { transform: rotate(360deg); }
|
|
|
|
|
|
}
|
|
|
|
|
|
@keyframes slideDown {
|
|
|
|
|
|
from { transform: translateY(-20px); opacity: 0; }
|
|
|
|
|
|
to { transform: translateY(0); opacity: 1; }
|
|
|
|
|
|
}
|
|
|
|
|
|
.animate-slideDown {
|
|
|
|
|
|
animation: slideDown 0.3s ease-out forwards;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 加载动画淡出效果 */
|
|
|
|
|
|
.fade-out {
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
transition: opacity 1s ease;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 亮色模式样式 */
|
|
|
|
|
|
.light-mode {
|
|
|
|
|
|
--color-primary: #2563eb;
|
|
|
|
|
|
--color-secondary: #e2e8f0;
|
|
|
|
|
|
--color-accent: #d97706;
|
|
|
|
|
|
--color-dark: #f1f5f9;
|
|
|
|
|
|
--color-darker: #e2e8f0;
|
|
|
|
|
|
--color-text: #1e293b;
|
|
|
|
|
|
--color-text-light: #64748b;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode body {
|
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
|
background-color: var(--color-darker);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode .bg-secondary {
|
|
|
|
|
|
background-color: var(--color-secondary);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode .bg-darker {
|
|
|
|
|
|
background-color: var(--color-darker);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode .text-gray-400 {
|
|
|
|
|
|
color: var(--color-text-light);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode .text-gray-300 {
|
|
|
|
|
|
color: var(--color-text-light);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode .text-white {
|
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode .bg-grid {
|
|
|
|
|
|
background-image:
|
|
|
|
|
|
linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
|
|
|
|
|
|
linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode ::-webkit-scrollbar-track {
|
|
|
|
|
|
background: var(--color-darker);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode ::-webkit-scrollbar-thumb {
|
|
|
|
|
|
background: var(--color-primary);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode ::-webkit-scrollbar-thumb:hover {
|
|
|
|
|
|
background: #1d4ed8;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode .border-primary {
|
|
|
|
|
|
border-color: rgba(37, 99, 235, 0.3);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode .border-primary\/20 {
|
|
|
|
|
|
border-color: rgba(37, 99, 235, 0.2);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode .border-primary\/50 {
|
|
|
|
|
|
border-color: rgba(37, 99, 235, 0.5);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode .bg-primary\/20 {
|
|
|
|
|
|
background-color: rgba(37, 99, 235, 0.2);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode .bg-primary\/30 {
|
|
|
|
|
|
background-color: rgba(37, 99, 235, 0.3);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode .bg-primary\/10 {
|
|
|
|
|
|
background-color: rgba(37, 99, 235, 0.1);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode .bg-secondary\/50 {
|
|
|
|
|
|
background-color: rgba(226, 232, 240, 0.5);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode .bg-secondary\/80 {
|
|
|
|
|
|
background-color: rgba(226, 232, 240, 0.8);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode .bg-secondary\/95 {
|
|
|
|
|
|
background-color: rgba(226, 232, 240, 0.95);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode .bg-dark {
|
|
|
|
|
|
background-color: var(--color-dark);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode .bg-darker {
|
|
|
|
|
|
background-color: var(--color-darker);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode .text-primary {
|
|
|
|
|
|
color: var(--color-primary);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode .text-accent {
|
|
|
|
|
|
color: var(--color-accent);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode .shadow-primary\/20 {
|
|
|
|
|
|
--tw-shadow-color: rgba(37, 99, 235, 0.2);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode .shadow-primary\/40 {
|
|
|
|
|
|
--tw-shadow-color: rgba(37, 99, 235, 0.4);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.light-mode .skeleton {
|
|
|
|
|
|
background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 图表适配亮色模式 */
|
|
|
|
|
|
.light-mode .chartjs-render-monitor {
|
|
|
|
|
|
filter: invert(0.9) hue-rotate(180deg);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 过渡效果 */
|
|
|
|
|
|
body, .bg-secondary, .bg-darker, .text-gray-400, .text-gray-300,
|
|
|
|
|
|
.text-white, .border-primary, .bg-primary\/20, .bg-secondary\/50,
|
|
|
|
|
|
.bg-dark, .text-primary, .text-accent {
|
|
|
|
|
|
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
/* Header 专用样式 - 强制保持深色 */
|
|
|
|
|
|
.navbar {
|
|
|
|
|
|
--header-bg: rgba(15, 23, 42, 0.8);
|
|
|
|
|
|
--header-border: rgba(14, 165, 233, 0.1);
|
|
|
|
|
|
--header-text: rgba(255, 255, 255, 1);
|
|
|
|
|
|
--header-text-hover: rgba(14, 165, 233, 1);
|
|
|
|
|
|
--header-hover-bg: rgba(14, 165, 233, 0.1);
|
2025-06-17 01:43:15 +00:00
|
|
|
|
|
2025-07-04 23:49:18 +00:00
|
|
|
|
background: var(--header-bg) !important;
|
|
|
|
|
|
border-bottom: 1px solid var(--header-border) !important;
|
|
|
|
|
|
backdrop-filter: blur(12px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 导航链接 */
|
|
|
|
|
|
.nav-link {
|
|
|
|
|
|
color: var(--header-text) !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
.nav-link:hover {
|
|
|
|
|
|
color: var(--header-text-hover) !important;
|
|
|
|
|
|
background: var(--header-hover-bg) !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* Logo 文字 */
|
|
|
|
|
|
.navbar .text-white {
|
|
|
|
|
|
color: var(--header-text) !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
.navbar .group:hover .text-white {
|
|
|
|
|
|
color: var(--header-text-hover) !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 移动菜单 */
|
|
|
|
|
|
.mobile-menu {
|
|
|
|
|
|
background: rgba(15, 23, 42, 0.95) !important;
|
|
|
|
|
|
border-top: 1px solid var(--header-border) !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 主题按钮 */
|
|
|
|
|
|
.theme-btn {
|
|
|
|
|
|
color: var(--header-text) !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
.theme-btn:hover {
|
|
|
|
|
|
color: var(--header-text-hover) !important;
|
|
|
|
|
|
background: var(--header-hover-bg) !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 覆盖所有可能的浅色模式影响 */
|
|
|
|
|
|
.light-mode .navbar,
|
|
|
|
|
|
.light-mode .navbar *:not(.theme-icon) {
|
|
|
|
|
|
color: inherit !important;
|
|
|
|
|
|
background: inherit !important;
|
|
|
|
|
|
border-color: inherit !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
.loader-spinner {
|
|
|
|
|
|
border: 4px solid rgba(255, 255, 255, 0.3);
|
|
|
|
|
|
border-top: 4px solid #4e73df;
|
2025-06-17 01:43:15 +00:00
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
width: 50px;
|
|
|
|
|
|
height: 50px;
|
2025-07-04 23:49:18 +00:00
|
|
|
|
animation: spin 1.5s linear infinite;
|
2025-06-17 01:43:15 +00:00
|
|
|
|
}
|
2025-07-04 23:49:18 +00:00
|
|
|
|
|
|
|
|
|
|
@keyframes spin {
|
|
|
|
|
|
0% { transform: rotate(0deg); }
|
|
|
|
|
|
100% { transform: rotate(360deg); }
|
2025-06-17 01:43:15 +00:00
|
|
|
|
}
|
2025-07-04 23:49:18 +00:00
|
|
|
|
|
|
|
|
|
|
.fade-out {
|
|
|
|
|
|
animation: fadeOut 1s forwards;
|
2025-06-17 01:43:15 +00:00
|
|
|
|
}
|
2025-07-04 23:49:18 +00:00
|
|
|
|
|
|
|
|
|
|
@keyframes fadeOut {
|
|
|
|
|
|
0% { opacity: 1; }
|
|
|
|
|
|
100% { opacity: 0; visibility: hidden; }
|
2025-06-17 01:43:15 +00:00
|
|
|
|
}
|
2025-07-04 23:49:18 +00:00
|
|
|
|
</style>
|
2025-06-17 01:43:15 +00:00
|
|
|
|
</head>
|
2025-07-04 23:49:18 +00:00
|
|
|
|
<body class="font-sans antialiased text-gray-100 bg-darker bg-grid overflow-x-hidden">
|
|
|
|
|
|
<!-- 粒子背景容器 -->
|
|
|
|
|
|
<div id="particles-js" class="z-0"></div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 加载动画 -->
|
|
|
|
|
|
<div id="loader" class="fixed inset-0 bg-dark flex items-center justify-center z-50">
|
|
|
|
|
|
<div class="loader-spinner"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 导航栏 -->
|
|
|
|
|
|
<header class="navbar fixed top-0 left-0 w-full bg-darker/80 backdrop-blur-md z-40 transition-all duration-300 shadow-lg">
|
|
|
|
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
|
|
|
|
|
|
<a href="#home" class="flex items-center space-x-2 group">
|
|
|
|
|
|
<div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center transition-all
|
|
|
|
|
|
group-hover:bg-white/90">
|
|
|
|
|
|
<img src="./logo-sm.png" alt="圆周云境logo"
|
|
|
|
|
|
class="w-8 h-8 object-contain filter brightness-90 contrast-110
|
|
|
|
|
|
group-hover:brightness-100 transition-all">
|
2025-06-17 01:43:15 +00:00
|
|
|
|
</div>
|
2025-07-04 23:49:18 +00:00
|
|
|
|
<span class="text-xl font-bold text-white group-hover:text-primary transition-colors
|
|
|
|
|
|
group-hover:text-glow">
|
|
|
|
|
|
圆周云境
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
|
|
<nav class="hidden md:flex items-center space-x-6">
|
|
|
|
|
|
<a href="#home" class="px-3 py-2 text-gray-300 hover:text-primary transition-colors duration-300 font-medium">首页</a>
|
|
|
|
|
|
<a href="#services" class="px-3 py-2 text-gray-300 hover:text-primary transition-colors duration-300 font-medium">服务</a>
|
|
|
|
|
|
<a href="#projects" class="px-3 py-2 text-gray-300 hover:text-primary transition-colors duration-300 font-medium">成果</a>
|
|
|
|
|
|
<a href="#technology" class="px-3 py-2 text-gray-300 hover:text-primary transition-colors duration-300 font-medium">配置</a>
|
|
|
|
|
|
|
|
|
|
|
|
<button id="theme-toggle" class="w-10 h-10 flex items-center justify-center text-gray-300 hover:text-primary transition-colors">
|
|
|
|
|
|
<i class="fa fa-moon text-xl" id="theme-icon"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</nav>
|
2025-06-17 01:43:15 +00:00
|
|
|
|
|
2025-07-04 23:49:18 +00:00
|
|
|
|
<button id="menu-toggle" class="md:hidden text-gray-300 p-2 rounded-lg hover:bg-primary/10 transition-all">
|
|
|
|
|
|
<i class="fa fa-bars text-xl"></i>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 移动菜单 -->
|
|
|
|
|
|
<div id="mobile-menu" class="md:hidden hidden bg-darker/95 backdrop-blur-lg border-t border-primary/20 animate-slideDown">
|
|
|
|
|
|
<div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
|
|
|
|
|
|
<a href="#home" class="px-4 py-3 rounded-lg text-gray-300 hover:text-primary hover:bg-primary/10 transition-all">首页</a>
|
|
|
|
|
|
<a href="#services" class="px-4 py-3 rounded-lg text-gray-300 hover:text-primary hover:bg-primary/10 transition-all">服务</a>
|
|
|
|
|
|
<a href="#projects" class="px-4 py-3 rounded-lg text-gray-300 hover:text-primary hover:bg-primary/10 transition-all">成果</a>
|
|
|
|
|
|
<a href="#technology" class="px-4 py-3 rounded-lg text-gray-300 hover:text-primary hover:bg-primary/10 transition-all">配置</a>
|
|
|
|
|
|
|
|
|
|
|
|
<button id="mobile-theme-toggle" class="px-4 py-3 rounded-lg text-gray-300 hover:text-primary hover:bg-primary/10 transition-all flex items-center">
|
|
|
|
|
|
<i class="fa fa-moon mr-3" id="mobile-theme-icon"></i>
|
|
|
|
|
|
<span>切换主题</span>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</header>
|
|
|
|
|
|
<main class="relative z-10">
|
|
|
|
|
|
<!-- 英雄区 -->
|
|
|
|
|
|
<section class="hero pt-32 pb-20 relative overflow-hidden" id="home">
|
|
|
|
|
|
<div class="container mx-auto px-4 text-center">
|
|
|
|
|
|
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight mb-6">
|
|
|
|
|
|
<span class="block text-white">圆周云境</span>
|
|
|
|
|
|
<span class="block text-primary text-glow">公益MC服务器</span>
|
|
|
|
|
|
</h1>
|
|
|
|
|
|
<p class="text-[clamp(1rem,2vw,1.25rem)] text-gray-300 max-w-2xl mx-auto mb-10">
|
|
|
|
|
|
🌟 自2024年起运营的公益MC服务器
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4 mb-12">
|
|
|
|
|
|
<a href="/auth" class="px-8 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all shadow-lg shadow-primary/20 hover:shadow-primary/40 transform hover:-translate-y-1 flex items-center justify-center gap-2">
|
|
|
|
|
|
<i class="fa fa-rocket"></i>
|
|
|
|
|
|
<span>立即登录</span>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a href="#projects" class="px-8 py-3 border border-primary/50 text-primary rounded-lg hover:bg-primary/10 transition-all flex items-center justify-center gap-2">
|
|
|
|
|
|
<i class="fa fa-th-large"></i>
|
|
|
|
|
|
<span>查看项目</span>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</div>
|
2025-06-17 01:43:15 +00:00
|
|
|
|
|
2025-07-04 23:49:18 +00:00
|
|
|
|
<!-- 统计数据 -->
|
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
|
|
|
|
|
|
<div class="bg-secondary/50 backdrop-blur-sm rounded-xl p-6 card-3d">
|
|
|
|
|
|
<div class="card-inner">
|
|
|
|
|
|
<div class="text-3xl md:text-4xl font-bold text-primary mb-2 counter" data-target="1">0</div>
|
|
|
|
|
|
<div class="text-sm text-gray-400">活跃用户</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-secondary/50 backdrop-blur-sm rounded-xl p-6 card-3d">
|
|
|
|
|
|
<div class="card-inner">
|
|
|
|
|
|
<div class="text-3xl md:text-4xl font-bold text-primary mb-2 counter" data-target="2">0</div>
|
|
|
|
|
|
<div class="text-sm text-gray-400">服务器实例</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-secondary/50 backdrop-blur-sm rounded-xl p-6 card-3d">
|
|
|
|
|
|
<div class="card-inner">
|
|
|
|
|
|
<div class="text-3xl md:text-4xl font-bold text-primary mb-2 counter" data-target="99.9">0</div>
|
|
|
|
|
|
<div class="text-sm text-gray-400">服务可用性(%)</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-secondary/50 backdrop-blur-sm rounded-xl p-6 card-3d">
|
|
|
|
|
|
<div class="card-inner">
|
|
|
|
|
|
<div class="text-3xl md:text-4xl font-bold text-primary mb-2 counter" data-target="3">0</div>
|
|
|
|
|
|
<div class="text-sm text-gray-400">线路BGP</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 装饰元素 -->
|
|
|
|
|
|
<div class="absolute -bottom-10 -right-10 w-64 h-64 bg-primary/10 rounded-full filter blur-3xl"></div>
|
|
|
|
|
|
<div class="absolute -top-10 -left-10 w-40 h-40 bg-accent/10 rounded-full filter blur-3xl"></div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 服务介绍 -->
|
|
|
|
|
|
<section class="services py-20 relative" id="services">
|
|
|
|
|
|
<div class="container mx-auto px-4">
|
|
|
|
|
|
<div class="text-center mb-16">
|
|
|
|
|
|
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">
|
|
|
|
|
|
<span class="text-white">我们的</span>
|
|
|
|
|
|
<span class="text-primary">服务器特色</span>
|
|
|
|
|
|
</h2>
|
|
|
|
|
|
<p class="text-gray-400 max-w-2xl mx-auto">专业级技术解决方案，为您的MC服务器提供全方位支持</p>
|
2025-06-17 01:43:15 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2025-07-04 23:49:18 +00:00
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
|
|
|
|
<!-- 服务卡片1 -->
|
|
|
|
|
|
<div class="bg-secondary/50 backdrop-blur-md rounded-2xl p-8 border border-primary/20 card-3d hover:border-primary/50 transition-all group">
|
|
|
|
|
|
<div class="card-inner">
|
|
|
|
|
|
<div class="w-14 h-14 bg-primary/20 rounded-xl flex items-center justify-center mb-6 group-hover:bg-primary/30 transition-colors">
|
|
|
|
|
|
<i class="fa fa-shield text-primary text-2xl"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<h3 class="text-xl font-bold mb-3 text-white">服务器安全防护</h3>
|
|
|
|
|
|
<p class="text-gray-400 mb-4">多层级安全防护体系，抵御DDoS攻击、恶意入侵，保障服务器数据安全</p>
|
|
|
|
|
|
<ul class="space-y-2 mb-6">
|
|
|
|
|
|
<li class="flex items-start">
|
|
|
|
|
|
<i class="fa fa-check text-primary mt-1 mr-2"></i>
|
|
|
|
|
|
<span class="text-sm text-gray-300">DDos防护，三线BGP</span>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="flex items-start">
|
|
|
|
|
|
<i class="fa fa-check text-primary mt-1 mr-2"></i>
|
|
|
|
|
|
<span class="text-sm text-gray-300">快速回档系统</span>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="flex items-start">
|
|
|
|
|
|
<i class="fa fa-check text-primary mt-1 mr-2"></i>
|
|
|
|
|
|
<span class="text-sm text-gray-300">玩家数据加密存储</span>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 服务卡片2 -->
|
|
|
|
|
|
<div class="bg-secondary/50 backdrop-blur-md rounded-2xl p-8 border border-primary/20 card-3d hover:border-primary/50 transition-all group">
|
|
|
|
|
|
<div class="card-inner">
|
|
|
|
|
|
<div class="w-14 h-14 bg-primary/20 rounded-xl flex items-center justify-center mb-6 group-hover:bg-primary/30 transition-colors">
|
|
|
|
|
|
<i class="fa fa-bolt text-primary text-2xl"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<h3 class="text-xl font-bold mb-3 text-white">高性能优化</h3>
|
|
|
|
|
|
<p class="text-gray-400 mb-4">专业级服务器性能调优，确保游戏流畅运行，提升玩家体验</p>
|
|
|
|
|
|
<ul class="space-y-2 mb-6">
|
|
|
|
|
|
<li class="flex items-start">
|
|
|
|
|
|
<i class="fa fa-check text-primary mt-1 mr-2"></i>
|
|
|
|
|
|
<span class="text-sm text-gray-300">服务器资源优化配置</span>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="flex items-start">
|
|
|
|
|
|
<i class="fa fa-check text-primary mt-1 mr-2"></i>
|
|
|
|
|
|
<span class="text-sm text-gray-300">网络传输优化</span>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="flex items-start">
|
|
|
|
|
|
<i class="fa fa-check text-primary mt-1 mr-2"></i>
|
|
|
|
|
|
<span class="text-sm text-gray-300">插件性能优化</span>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 项目展示 -->
|
|
|
|
|
|
<section class="projects py-20 bg-secondary/30 relative" id="projects">
|
|
|
|
|
|
<div class="container mx-auto px-4">
|
|
|
|
|
|
<div class="text-center mb-16">
|
|
|
|
|
|
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">
|
|
|
|
|
|
<span class="text-white">我们的</span>
|
|
|
|
|
|
<span class="text-primary">产品</span>
|
|
|
|
|
|
</h2>
|
|
|
|
|
|
<p class="text-gray-400 max-w-2xl mx-auto">查看我们的产品列表</p>
|
2025-06-17 01:43:15 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2025-07-04 23:49:18 +00:00
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
|
|
|
|
<!-- 项目1 -->
|
|
|
|
|
|
<div class="bg-secondary/50 backdrop-blur-md rounded-2xl overflow-hidden group">
|
|
|
|
|
|
<div class="relative h-60 overflow-hidden">
|
|
|
|
|
|
<img src="./img/Hare'sWorld.png" alt="项目预览" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
|
|
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-secondary to-transparent"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="p-6">
|
|
|
|
|
|
<div class="flex justify-between items-start mb-3">
|
|
|
|
|
|
<h3 class="text-xl font-bold text-white">Hare's World</h3>
|
|
|
|
|
|
<span class="px-3 py-1 bg-primary/20 text-primary text-xs rounded-full">我的世界服务器</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p class="text-gray-400 mb-4">自主研发的MC服务器，采用BGP多线接入和智能路由技术，大幅降低玩家延迟</p>
|
|
|
|
|
|
<div class="flex justify-between items-center">
|
|
|
|
|
|
<span class="text-sm text-gray-400">2024年12月</span>
|
|
|
|
|
|
<a href="./haresworld.html" class="text-primary hover:text-primary/80 transition-colors flex items-center">
|
|
|
|
|
|
查看详情 <i class="fa fa-arrow-right ml-2"></i>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 项目2 -->
|
|
|
|
|
|
<div class="bg-secondary/50 backdrop-blur-md rounded-2xl overflow-hidden group">
|
|
|
|
|
|
<div class="relative h-60 overflow-hidden">
|
|
|
|
|
|
<img src="./img/web.png" alt="项目预览" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
|
|
|
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-secondary to-transparent"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="p-6">
|
|
|
|
|
|
<div class="flex justify-between items-start mb-3">
|
|
|
|
|
|
<h3 class="text-xl font-bold text-white">CCS统一通行证网站</h3>
|
|
|
|
|
|
<span class="px-3 py-1 bg-accent/20 text-accent text-xs rounded-full">系统</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p class="text-gray-400 mb-4">集成服务器管理、玩家信息创建等多项功能，便于管理。</p>
|
|
|
|
|
|
<div class="flex justify-between items-center">
|
|
|
|
|
|
<span class="text-sm text-gray-400">2025年3月</span>
|
|
|
|
|
|
<a href="/auth" class="text-primary hover:text-primary/80 transition-colors flex items-center">
|
|
|
|
|
|
立即登录 <i class="fa fa-arrow-right ml-2"></i>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 技术实力 -->
|
|
|
|
|
|
<section class="technology py-20 relative" id="technology">
|
|
|
|
|
|
<div class="container mx-auto px-4">
|
|
|
|
|
|
<div class="text-center mb-16">
|
|
|
|
|
|
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">
|
|
|
|
|
|
<span class="text-white">我们的</span>
|
|
|
|
|
|
<span class="text-primary">服务器配置</span>
|
2025-06-17 01:43:15 +00:00
|
|
|
|
</h2>
|
2025-07-04 23:49:18 +00:00
|
|
|
|
<p class="text-gray-400 max-w-2xl mx-auto">专业的技术架构和强大的基础设施支持</p>
|
2025-06-17 01:43:15 +00:00
|
|
|
|
</div>
|
2025-07-04 23:49:18 +00:00
|
|
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<h3 class="text-2xl font-bold text-white mb-6">服务器性能数据</h3>
|
|
|
|
|
|
<p class="text-gray-400 mb-8">我们的基础设施采用高性能硬件和优化技术，确保服务器始终保持高性能运行</p>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="bg-secondary/50 backdrop-blur-md rounded-xl p-6 mb-8">
|
|
|
|
|
|
<canvas id="performanceChart" height="250"></canvas>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
|
|
|
|
|
<div class="bg-secondary/50 backdrop-blur-md rounded-xl p-6">
|
|
|
|
|
|
<div class="text-3xl font-bold text-primary mb-2">99.9%</div>
|
|
|
|
|
|
<div class="text-gray-400">服务可用性</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-secondary/50 backdrop-blur-md rounded-xl p-6">
|
|
|
|
|
|
<div class="text-3xl font-bold text-primary mb-2">15-30ms</div>
|
|
|
|
|
|
<div class="text-gray-400">平均响应时间</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
|
|
|
|
|
<!-- 技术卡片1 -->
|
|
|
|
|
|
<div class="bg-secondary/50 backdrop-blur-md rounded-xl p-6 border border-primary/20 hover:border-primary/50 transition-all transform hover:-translate-y-2">
|
|
|
|
|
|
<div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center mb-4">
|
|
|
|
|
|
<i class="fa fa-microchip text-primary text-xl"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<h4 class="text-lg font-bold text-white mb-2">高性能硬件</h4>
|
|
|
|
|
|
<p class="text-gray-400 text-sm">采用最新一代服务器硬件，配备高频CPU和低延迟BGP线路</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 技术卡片2 -->
|
|
|
|
|
|
<div class="bg-secondary/50 backdrop-blur-md rounded-xl p-6 border border-primary/20 hover:border-primary/50 transition-all transform hover:-translate-y-2">
|
|
|
|
|
|
<div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center mb-4">
|
|
|
|
|
|
<i class="fa fa-cloud text-primary text-xl"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<h4 class="text-lg font-bold text-white mb-2">有趣的称号系统</h4>
|
|
|
|
|
|
<p class="text-gray-400 text-sm">BlueArchive玩家称号，让您在游玩过程中享受不一样的趣味</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 技术卡片3 -->
|
|
|
|
|
|
<div class="bg-secondary/50 backdrop-blur-md rounded-xl p-6 border border-primary/20 hover:border-primary/50 transition-all transform hover:-translate-y-2">
|
|
|
|
|
|
<div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center mb-4">
|
|
|
|
|
|
<i class="fa fa-shield text-primary text-xl"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<h4 class="text-lg font-bold text-white mb-2">多层防护</h4>
|
|
|
|
|
|
<p class="text-gray-400 text-sm">DDoS防护、入侵检测系统</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 技术卡片4 -->
|
|
|
|
|
|
<div class="bg-secondary/50 backdrop-blur-md rounded-xl p-6 border border-primary/20 hover:border-primary/50 transition-all transform hover:-translate-y-2">
|
|
|
|
|
|
<div class="w-12 h-12 bg-primary/20 rounded-xl flex items-center justify-center mb-4">
|
|
|
|
|
|
<i class="fa fa-history text-primary text-xl"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<h4 class="text-lg font-bold text-white mb-2">自动备份</h4>
|
|
|
|
|
|
<p class="text-gray-400 text-sm">自动备份系统，确保数据安全可靠</p>
|
|
|
|
|
|
</div>
|
2025-06-17 01:43:15 +00:00
|
|
|
|
</div>
|
2025-07-04 23:49:18 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 联系我们
|
|
|
|
|
|
<section class="contact py-20 bg-secondary/30 relative" id="contact">
|
|
|
|
|
|
<div class="container mx-auto px-4">
|
|
|
|
|
|
<div class="text-center mb-16">
|
|
|
|
|
|
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">
|
|
|
|
|
|
<span class="text-white">联系</span>
|
|
|
|
|
|
<span class="text-primary">我们</span>
|
|
|
|
|
|
</h2>
|
|
|
|
|
|
<p class="text-gray-400 max-w-2xl mx-auto">有任何问题或合作需求，欢迎随时联系我们</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
|
|
|
|
<div class="bg-secondary/50 backdrop-blur-md rounded-2xl p-8">
|
|
|
|
|
|
<h3 class="text-xl font-bold text-white mb-6">发送消息</h3>
|
|
|
|
|
|
<form id="contactForm" class="space-y-6">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<label for="name" class="block text-sm font-medium text-gray-400 mb-1">姓名</label>
|
|
|
|
|
|
<input type="text" id="name" class="w-full px-4 py-3 bg-darker border border-primary/30 rounded-lg focus:outline-none focus:border-primary transition-colors" placeholder="您的姓名">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<label for="email" class="block text-sm font-medium text-gray-400 mb-1">邮箱</label>
|
|
|
|
|
|
<input type="email" id="email" class="w-full px-4 py-3 bg-darker border border-primary/30 rounded-lg focus:outline-none focus:border-primary transition-colors" placeholder="您的邮箱地址">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<label for="subject" class="block text-sm font-medium text-gray-400 mb-1">主题</label>
|
|
|
|
|
|
<input type="text" id="subject" class="w-full px-4 py-3 bg-darker border border-primary/30 rounded-lg focus:outline-none focus:border-primary transition-colors" placeholder="消息主题">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<label for="message" class="block text-sm font-medium text-gray-400 mb-1">消息内容</label>
|
|
|
|
|
|
<textarea id="message" rows="4" class="w-full px-4 py-3 bg-darker border border-primary/30 rounded-lg focus:outline-none focus:border-primary transition-colors" placeholder="请输入您的消息..."></textarea>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<button type="submit" class="w-full px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all shadow-lg shadow-primary/20 flex items-center justify-center gap-2">
|
|
|
|
|
|
<i class="fa fa-paper-plane"></i>
|
|
|
|
|
|
<span>发送消息</span>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</form>
|
2025-06-17 01:43:15 +00:00
|
|
|
|
</div>
|
2025-07-04 23:49:18 +00:00
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<div class="bg-secondary/50 backdrop-blur-md rounded-2xl p-8 mb-8">
|
|
|
|
|
|
<h3 class="text-xl font-bold text-white mb-6">联系方式</h3>
|
|
|
|
|
|
<ul class="space-y-4">
|
|
|
|
|
|
<li class="flex items-start">
|
|
|
|
|
|
<div class="w-10 h-10 bg-primary/20 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
|
|
|
|
|
|
<i class="fa fa-envelope text-primary"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<h4 class="text-white font-medium">邮箱</h4>
|
|
|
|
|
|
<p class="text-gray-400">contact@cyclecloudscape.com</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="flex items-start">
|
|
|
|
|
|
<div class="w-10 h-10 bg-primary/20 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
|
|
|
|
|
|
<i class="fa fa-comment text-primary"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<h4 class="text-white font-medium">交流群</h4>
|
|
|
|
|
|
<p class="text-gray-400">QQ群: 123456789</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="flex items-start">
|
|
|
|
|
|
<div class="w-10 h-10 bg-primary/20 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
|
|
|
|
|
|
<i class="fa fa-globe text-primary"></i>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<h4 class="text-white font-medium">官网</h4>
|
|
|
|
|
|
<p class="text-gray-400">www.cyclecloudscape.com</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-secondary/50 backdrop-blur-md rounded-2xl p-8">
|
|
|
|
|
|
<h3 class="text-xl font-bold text-white mb-6">关注我们</h3>
|
|
|
|
|
|
<div class="flex space-x-4">
|
|
|
|
|
|
<a href="#" class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
|
|
|
|
|
|
<i class="fa fa-qq"></i>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a href="#" class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
|
|
|
|
|
|
<i class="fa fa-weibo"></i>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a href="#" class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
|
|
|
|
|
|
<i class="fa fa-github"></i>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
<a href="#" class="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
|
|
|
|
|
|
<i class="fa fa-bilibili"></i>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2025-06-17 01:43:15 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2025-07-04 23:49:18 +00:00
|
|
|
|
</section>
|
|
|
|
|
|
</main>
|
|
|
|
|
|
-->
|
|
|
|
|
|
<!-- 页脚 -->
|
|
|
|
|
|
<footer class="footer py-12 bg-secondary/80 backdrop-blur-md border-t border-primary/20">
|
|
|
|
|
|
<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>
|
2025-06-17 01:43:15 +00:00
|
|
|
|
</div>
|
2025-07-04 23:49:18 +00:00
|
|
|
|
<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>
|
2025-06-17 01:43:15 +00:00
|
|
|
|
</div>
|
2025-07-04 23:49:18 +00:00
|
|
|
|
<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(未开源))<br>请遵守国家法律,本站可能与某些老旧浏览器不兼容 | 背景图片来源:《蔚蓝档案》侵权请联系删除
|
|
|
|
|
|
<br />ICP备案/许可证号：<a href="https://beian.miit.gov.cn/" target="_blank">赣ICP备2025065357号</a>
|
2025-06-17 01:43:15 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2025-07-04 23:49:18 +00:00
|
|
|
|
</footer>
|
2025-06-17 01:43:15 +00:00
|
|
|
|
|
2025-07-04 23:49:18 +00:00
|
|
|
|
<!-- 返回顶部按钮 -->
|
|
|
|
|
|
<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 z-40">
|
|
|
|
|
|
<i class="fa fa-arrow-up"></i>
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
// 粒子背景初始化
|
|
|
|
|
|
particlesJS("particles-js", {
|
|
|
|
|
|
"particles": {
|
|
|
|
|
|
"number": {
|
|
|
|
|
|
"value": 80,
|
|
|
|
|
|
"density": {
|
|
|
|
|
|
"enable": true,
|
|
|
|
|
|
"value_area": 800
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"color": {
|
|
|
|
|
|
"value": "#0ea5e9"
|
|
|
|
|
|
},
|
|
|
|
|
|
"shape": {
|
|
|
|
|
|
"type": "circle"
|
|
|
|
|
|
},
|
|
|
|
|
|
"opacity": {
|
|
|
|
|
|
"value": 0.5,
|
|
|
|
|
|
"random": true
|
|
|
|
|
|
},
|
|
|
|
|
|
"size": {
|
|
|
|
|
|
"value": 3,
|
|
|
|
|
|
"random": true
|
|
|
|
|
|
},
|
|
|
|
|
|
"line_linked": {
|
|
|
|
|
|
"enable": true,
|
|
|
|
|
|
"distance": 150,
|
|
|
|
|
|
"color": "#0ea5e9",
|
|
|
|
|
|
"opacity": 0.2,
|
|
|
|
|
|
"width": 1
|
|
|
|
|
|
},
|
|
|
|
|
|
"move": {
|
|
|
|
|
|
"enable": true,
|
|
|
|
|
|
"speed": 1,
|
|
|
|
|
|
"direction": "none",
|
|
|
|
|
|
"random": true,
|
|
|
|
|
|
"straight": false,
|
|
|
|
|
|
"out_mode": "out",
|
|
|
|
|
|
"bounce": false
|
2025-06-17 01:43:15 +00:00
|
|
|
|
}
|
2025-07-04 23:49:18 +00:00
|
|
|
|
},
|
|
|
|
|
|
"interactivity": {
|
|
|
|
|
|
"detect_on": "canvas",
|
|
|
|
|
|
"events": {
|
|
|
|
|
|
"onhover": {
|
|
|
|
|
|
"enable": true,
|
|
|
|
|
|
"mode": "grab"
|
|
|
|
|
|
},
|
|
|
|
|
|
"onclick": {
|
|
|
|
|
|
"enable": true,
|
|
|
|
|
|
"mode": "push"
|
|
|
|
|
|
},
|
|
|
|
|
|
"resize": true
|
|
|
|
|
|
},
|
|
|
|
|
|
"modes": {
|
|
|
|
|
|
"grab": {
|
|
|
|
|
|
"distance": 140,
|
|
|
|
|
|
"line_linked": {
|
|
|
|
|
|
"opacity": 0.5
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"push": {
|
|
|
|
|
|
"particles_nb": 3
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
"retina_detect": true
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 页面加载完成后执行
|
|
|
|
|
|
window.addEventListener('load', function() {
|
|
|
|
|
|
// 隐藏加载动画
|
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
|
document.getElementById('loader').classList.add('fade-out');
|
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
|
document.getElementById('loader').style.display = 'none';
|
|
|
|
|
|
}, 1000);
|
|
|
|
|
|
}, 1000);
|
|
|
|
|
|
|
|
|
|
|
|
// 性能图表变量
|
|
|
|
|
|
let performanceChart;
|
2025-06-17 01:43:15 +00:00
|
|
|
|
|
2025-07-04 23:49:18 +00:00
|
|
|
|
// 初始化性能图表
|
|
|
|
|
|
function initChart() {
|
|
|
|
|
|
const ctx = document.getElementById('performanceChart').getContext('2d');
|
|
|
|
|
|
const isLightMode = document.documentElement.classList.contains('light-mode');
|
2025-06-17 01:43:15 +00:00
|
|
|
|
|
2025-07-04 23:49:18 +00:00
|
|
|
|
const gridColor = isLightMode ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)';
|
|
|
|
|
|
const textColor = isLightMode ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)';
|
|
|
|
|
|
|
|
|
|
|
|
return new Chart(ctx, {
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
data: {
|
|
|
|
|
|
labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
|
|
|
|
|
datasets: [{
|
|
|
|
|
|
label: '平均TPS',
|
|
|
|
|
|
data: [19.8, 19.9, 20, 20, 20, 20],
|
|
|
|
|
|
borderColor: '#0ea5e9',
|
|
|
|
|
|
backgroundColor: 'rgba(14, 165, 233, 0.1)',
|
|
|
|
|
|
tension: 0.3,
|
|
|
|
|
|
fill: true
|
|
|
|
|
|
}, {
|
|
|
|
|
|
label: '平均延迟(ms)',
|
|
|
|
|
|
data: [28, 25, 22, 20, 18, 15],
|
|
|
|
|
|
borderColor: '#f59e0b',
|
|
|
|
|
|
backgroundColor: 'rgba(245, 158, 11, 0.1)',
|
|
|
|
|
|
tension: 0.3,
|
|
|
|
|
|
fill: true
|
|
|
|
|
|
}]
|
|
|
|
|
|
},
|
|
|
|
|
|
options: {
|
|
|
|
|
|
responsive: true,
|
|
|
|
|
|
maintainAspectRatio: false,
|
|
|
|
|
|
scales: {
|
|
|
|
|
|
y: {
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
color: gridColor
|
|
|
|
|
|
},
|
|
|
|
|
|
ticks: {
|
|
|
|
|
|
color: textColor
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
x: {
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
color: gridColor
|
|
|
|
|
|
},
|
|
|
|
|
|
ticks: {
|
|
|
|
|
|
color: textColor
|
|
|
|
|
|
}
|
2025-06-17 01:43:15 +00:00
|
|
|
|
}
|
2025-07-04 23:49:18 +00:00
|
|
|
|
},
|
|
|
|
|
|
plugins: {
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
labels: {
|
|
|
|
|
|
color: textColor
|
|
|
|
|
|
}
|
2025-06-17 01:43:15 +00:00
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-07-04 23:49:18 +00:00
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 初始化图表
|
|
|
|
|
|
performanceChart = initChart();
|
|
|
|
|
|
|
|
|
|
|
|
// 数字计数动画
|
|
|
|
|
|
const counters = document.querySelectorAll('.counter');
|
|
|
|
|
|
const speed = 200;
|
|
|
|
|
|
|
|
|
|
|
|
const animateCounters = () => {
|
|
|
|
|
|
counters.forEach(counter => {
|
|
|
|
|
|
const target = +counter.getAttribute('data-target');
|
|
|
|
|
|
const count = +counter.innerText;
|
|
|
|
|
|
const increment = target / speed;
|
2025-06-17 01:43:15 +00:00
|
|
|
|
|
2025-07-04 23:49:18 +00:00
|
|
|
|
if (count < target) {
|
|
|
|
|
|
counter.innerText = Math.ceil(count + increment);
|
|
|
|
|
|
setTimeout(animateCounters, 1);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
counter.innerText = target;
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 滚动显示元素
|
|
|
|
|
|
const observerOptions = {
|
|
|
|
|
|
root: null,
|
|
|
|
|
|
rootMargin: '0px',
|
|
|
|
|
|
threshold: 0.1
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
|
|
|
|
entries.forEach(entry => {
|
|
|
|
|
|
if (entry.isIntersecting) {
|
|
|
|
|
|
if (entry.target.classList.contains('counter')) {
|
|
|
|
|
|
animateCounters();
|
|
|
|
|
|
observer.unobserve(entry.target);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}, observerOptions);
|
|
|
|
|
|
|
|
|
|
|
|
counters.forEach(counter => {
|
|
|
|
|
|
observer.observe(counter);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 移动端菜单切换
|
|
|
|
|
|
const menuToggle = document.getElementById('menu-toggle');
|
|
|
|
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
|
|
|
|
|
|
|
|
|
|
menuToggle.addEventListener('click', function() {
|
|
|
|
|
|
mobileMenu.classList.toggle('hidden');
|
|
|
|
|
|
if (mobileMenu.classList.contains('hidden')) {
|
|
|
|
|
|
menuToggle.innerHTML = '<i class="fa fa-bars text-2xl"></i>';
|
|
|
|
|
|
} else {
|
|
|
|
|
|
menuToggle.innerHTML = '<i class="fa fa-times text-2xl"></i>';
|
2025-06-17 01:43:15 +00:00
|
|
|
|
}
|
2025-07-04 23:49:18 +00:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 联系表单提交
|
|
|
|
|
|
const contactForm = document.getElementById('contactForm');
|
|
|
|
|
|
if (contactForm) {
|
|
|
|
|
|
contactForm.addEventListener('submit', function(e) {
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
// 这里可以添加表单提交逻辑
|
|
|
|
|
|
alert('消息已提交，我们将尽快回复您！');
|
|
|
|
|
|
contactForm.reset();
|
|
|
|
|
|
});
|
2025-06-17 01:43:15 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
2025-07-04 23:49:18 +00:00
|
|
|
|
// 返回顶部按钮
|
|
|
|
|
|
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-4');
|
|
|
|
|
|
} else {
|
|
|
|
|
|
navbar.classList.add('py-4');
|
|
|
|
|
|
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;
|
|
|
|
|
|
|
|
|
|
|
|
// 关闭移动端菜单
|
|
|
|
|
|
if (!mobileMenu.classList.contains('hidden')) {
|
|
|
|
|
|
mobileMenu.classList.add('hidden');
|
|
|
|
|
|
menuToggle.innerHTML = '<i class="fa fa-bars text-2xl"></i>';
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const targetElement = document.querySelector(targetId);
|
|
|
|
|
|
if (targetElement) {
|
|
|
|
|
|
window.scrollTo({
|
|
|
|
|
|
top: targetElement.offsetTop - 80,
|
|
|
|
|
|
behavior: 'smooth'
|
2025-06-17 01:43:15 +00:00
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
2025-07-04 23:49:18 +00:00
|
|
|
|
|
|
|
|
|
|
// 主题切换功能
|
|
|
|
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
|
|
|
|
const mobileThemeToggle = document.getElementById('mobile-theme-toggle');
|
|
|
|
|
|
const themeIcon = document.getElementById('theme-icon');
|
|
|
|
|
|
const mobileThemeIcon = document.getElementById('mobile-theme-icon');
|
|
|
|
|
|
|
|
|
|
|
|
// 检查本地存储或系统偏好
|
|
|
|
|
|
const currentTheme = localStorage.getItem('theme') ||
|
|
|
|
|
|
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
|
|
|
|
|
|
|
|
|
|
|
// 应用当前主题
|
|
|
|
|
|
if (currentTheme === 'light') {
|
|
|
|
|
|
document.documentElement.classList.add('light-mode');
|
|
|
|
|
|
themeIcon.classList.replace('fa-moon', 'fa-sun');
|
|
|
|
|
|
mobileThemeIcon.classList.replace('fa-moon', 'fa-sun');
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 切换主题函数
|
|
|
|
|
|
function toggleTheme() {
|
|
|
|
|
|
if (document.documentElement.classList.contains('light-mode')) {
|
|
|
|
|
|
document.documentElement.classList.remove('light-mode');
|
|
|
|
|
|
localStorage.setItem('theme', 'dark');
|
|
|
|
|
|
themeIcon.classList.replace('fa-sun', 'fa-moon');
|
|
|
|
|
|
mobileThemeIcon.classList.replace('fa-sun', 'fa-moon');
|
|
|
|
|
|
} else {
|
|
|
|
|
|
document.documentElement.classList.add('light-mode');
|
|
|
|
|
|
localStorage.setItem('theme', 'light');
|
|
|
|
|
|
themeIcon.classList.replace('fa-moon', 'fa-sun');
|
|
|
|
|
|
mobileThemeIcon.classList.replace('fa-moon', 'fa-sun');
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 重新初始化图表以适应新主题
|
|
|
|
|
|
if (performanceChart) {
|
|
|
|
|
|
performanceChart.destroy();
|
|
|
|
|
|
}
|
|
|
|
|
|
performanceChart = initChart();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 添加事件监听
|
|
|
|
|
|
themeToggle.addEventListener('click', toggleTheme);
|
|
|
|
|
|
mobileThemeToggle.addEventListener('click', toggleTheme);
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
2025-06-17 01:43:15 +00:00
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
