189 lines
8.0 KiB
HTML
189 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>枢机信用储备银行 - 示例页面</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.gvsds.com/font-awesome/css/all.min.css" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- Tailwind 配置 -->
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#3b82f6',
|
|
secondary: '#8b5cf6',
|
|
accent: '#10b981',
|
|
danger: '#ef4444',
|
|
warning: '#f59e0b',
|
|
info: '#06b6d4',
|
|
dark: {
|
|
100: '#1e293b',
|
|
200: '#0f172a',
|
|
300: '#020617'
|
|
},
|
|
light: {
|
|
100: '#f8fafc',
|
|
200: '#f1f5f9',
|
|
300: '#e2e8f0'
|
|
},
|
|
minecraft: {
|
|
gold: '#FFD700',
|
|
iron: '#C0C0C0',
|
|
diamond: '#B9F2FF',
|
|
emerald: '#50C878',
|
|
redstone: '#FF0000',
|
|
lapis: '#2E5894',
|
|
netherite: '#443A49'
|
|
}
|
|
},
|
|
fontFamily: {
|
|
inter: ['Inter', 'sans-serif'],
|
|
minecraft: ['"Minecraft"', 'Inter', 'sans-serif']
|
|
},
|
|
boxShadow: {
|
|
'glow': '0 0 15px rgba(59, 130, 246, 0.5)',
|
|
'glow-dark': '0 0 15px rgba(139, 92, 246, 0.5)',
|
|
'glow-accent': '0 0 15px rgba(16, 185, 129, 0.5)'
|
|
},
|
|
animation: {
|
|
'float': 'float 3s ease-in-out infinite',
|
|
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) 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-glow {
|
|
text-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
|
|
}
|
|
.text-shadow-dark {
|
|
text-shadow: 0 0 10px rgba(139, 92, 246, 0.7);
|
|
}
|
|
.bg-blur {
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.transition-transform-slow {
|
|
transition: transform 0.5s ease;
|
|
}
|
|
.hover-scale {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.hover-scale:hover {
|
|
transform: scale(1.03);
|
|
}
|
|
.card-gradient {
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
|
|
}
|
|
.dark .card-gradient {
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
|
|
}
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-inter bg-light-200 dark:bg-dark-200 text-dark-300 dark:text-light-100 transition-colors duration-300 min-h-screen flex flex-col">
|
|
<!-- 导航栏 -->
|
|
<header class="sticky top-0 z-50 bg-light-100/80 dark:bg-dark-100/80 bg-blur border-b border-light-300/30 dark:border-dark-300/30 shadow-md">
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
|
|
<div class="flex items-center space-x-2">
|
|
<div class="text-primary dark:text-secondary text-3xl">
|
|
<i class="fa fa-bank"></i>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-xl md:text-2xl font-bold text-primary dark:text-secondary">枢机信用储备银行</h1>
|
|
<p class="text-xs md:text-sm text-gray-600 dark:text-gray-400">银河锋锐软件开发工作室</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-4">
|
|
|
|
<button id="theme-toggle" class="p-2 rounded-full bg-light-300 dark:bg-dark-300 hover:bg-light-200 dark:hover:bg-dark-100 transition-colors">
|
|
<i class="fa fa-moon dark:hidden text-dark-300"></i>
|
|
<i class="fa fa-sun hidden dark:inline text-light-100"></i>
|
|
</button>
|
|
|
|
<button class="md:hidden p-2 rounded-full bg-light-300 dark:bg-dark-300 hover:bg-light-200 dark:hover:bg-dark-100 transition-colors" id="mobile-menu-button">
|
|
<i class="fa fa-bars text-dark-300 dark:text-light-100"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 移动端菜单 -->
|
|
<div id="mobile-menu" class="hidden md:hidden bg-light-100 dark:bg-dark-100 border-b border-light-300/30 dark:border-dark-300">
|
|
</div>
|
|
</header>
|
|
|
|
<main class="flex-grow">
|
|
<!-- 支付表单 -->
|
|
<section class="py-12 bg-light-100 dark:bg-dark-100">
|
|
PASS
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="bg-light-100 dark:bg-dark-100 border-t border-light-300/30 dark:border-dark-300/30 py-8">
|
|
<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">
|
|
<div class="text-primary dark:text-secondary text-2xl">
|
|
<i class="fa fa-bank"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-lg font-bold">枢机信用储备银行</h2>
|
|
<p class="text-xs text-gray-600 dark:text-gray-400">银河锋锐软件开发工作室</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400">
|
|
<p>© 2025 枢机信用储备银行. 保留所有权利.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// 初始化页面
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 主题切换
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
themeToggle.addEventListener('click', () => {
|
|
document.documentElement.classList.toggle('dark');
|
|
localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
|
|
});
|
|
|
|
// 移动端菜单
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
mobileMenuButton.addEventListener('click', () => {
|
|
mobileMenu.classList.toggle('hidden');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |