360 lines
11 KiB
HTML
360 lines
11 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>关于站长 - exyone的荒野小站</title>
|
||
<link rel="stylesheet" href="assets/css/topbar.css">
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600&family=JetBrains+Mono:wght@400;500&display=swap');
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Noto Serif SC', serif;
|
||
background: linear-gradient(135deg, #0a1929 0%, #0d2818 100%);
|
||
min-height: 100vh;
|
||
color: #ffffff;
|
||
overflow-x: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.nature-bg {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: -2;
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-attachment: fixed;
|
||
transition: background-image 1.5s ease-in-out;
|
||
}
|
||
|
||
/* 毛玻璃效果 - 使用backdrop-filter实现 */
|
||
.glass {
|
||
background: rgba(16, 42, 67, 0.25);
|
||
backdrop-filter: blur(12px) saturate(180%);
|
||
-webkit-backdrop-filter: blur(12px) saturate(180%);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 16px;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
/* 文字描边效果 - 白色文字加黑色描边 */
|
||
.text-stroke {
|
||
color: #ffffff;
|
||
text-shadow:
|
||
1px 1px 0 #000,
|
||
-1px -1px 0 #000,
|
||
1px -1px 0 #000,
|
||
-1px 1px 0 #000,
|
||
0px 1px 0 #000,
|
||
1px 0px 0 #000,
|
||
0px -1px 0 #000,
|
||
-1px 0px 0 #000;
|
||
}
|
||
|
||
.main-container {
|
||
margin-top: 56px;
|
||
padding: 20px;
|
||
min-height: calc(100vh - 56px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.about-content {
|
||
max-width: 800px;
|
||
width: 100%;
|
||
padding: 30px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.about-header {
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.about-title {
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
margin-bottom: 15px;
|
||
text-shadow:
|
||
1px 1px 0 #000,
|
||
-1px -1px 0 #000,
|
||
1px -1px 0 #000,
|
||
-1px 1px 0 #000;
|
||
}
|
||
|
||
.about-section {
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
text-shadow:
|
||
1px 1px 0 #000,
|
||
-1px -1px 0 #000,
|
||
1px -1px 0 #000,
|
||
-1px 1px 0 #000;
|
||
}
|
||
|
||
.about-text {
|
||
font-size: 16px;
|
||
line-height: 1.6;
|
||
margin-bottom: 15px;
|
||
text-shadow:
|
||
1px 1px 0 rgba(0, 0, 0, 0.5),
|
||
-1px -1px 0 rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.about-text a {
|
||
color: #ffffff;
|
||
text-decoration: underline;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.about-text a:hover {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.skills-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||
gap: 15px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.skill-item {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
padding: 10px 15px;
|
||
border-radius: 8px;
|
||
text-align: center;
|
||
font-size: 15px;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
text-shadow:
|
||
1px 1px 0 rgba(0, 0, 0, 0.5),
|
||
-1px -1px 0 rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.donation-section {
|
||
margin-bottom: 25px;
|
||
}
|
||
|
||
.donation-description {
|
||
font-size: 16px;
|
||
line-height: 1.6;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
text-shadow:
|
||
1px 1px 0 rgba(0, 0, 0, 0.5),
|
||
-1px -1px 0 rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.donation-methods {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 40px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.donation-method {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.donation-img {
|
||
width: 180px;
|
||
height: 180px;
|
||
border-radius: 8px;
|
||
margin-bottom: 10px;
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
background: rgba(255, 255, 255, 0.05);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.donation-img:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.donation-label {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
text-shadow:
|
||
1px 1px 0 rgba(0, 0, 0, 0.5),
|
||
-1px -1px 0 rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
|
||
.about-content {
|
||
padding: 20px;
|
||
}
|
||
|
||
.about-title {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.skills-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.donation-methods {
|
||
gap: 30px;
|
||
}
|
||
|
||
.donation-img {
|
||
width: 160px;
|
||
height: 160px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.about-content {
|
||
padding: 15px;
|
||
}
|
||
|
||
.about-title {
|
||
font-size: 22px;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.about-text {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.skills-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.donation-methods {
|
||
gap: 20px;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.donation-img {
|
||
width: 150px;
|
||
height: 150px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="nature-bg"></div>
|
||
|
||
<!-- 引入顶部导航栏 -->
|
||
<nav class="top-nav">
|
||
<div class="top-nav-left">
|
||
<button class="mobile-menu-btn" id="mobile-menu">☰</button>
|
||
<!-- 导航链接容器 -->
|
||
<div id="nav-links-container"></div>
|
||
</div>
|
||
<div class="top-nav-right">
|
||
<!-- 快速链接容器 -->
|
||
<div id="quick-links-container"></div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="main-container">
|
||
<div class="about-content glass widget">
|
||
<div class="about-header">
|
||
<div class="about-title">关于站长</div>
|
||
</div>
|
||
|
||
<div class="about-section">
|
||
<div class="section-title">个人简介</div>
|
||
<div class="about-text">
|
||
欢迎来到我的个人站点，本人擅长.NET和前端开发，兼任美术设计。
|
||
如果需要联系我开发游戏，请通过邮箱 <a href="mailto:exyone.dev@icloud.com">exyone.dev@icloud.com</a> 联系我。
|
||
</div>
|
||
</div>
|
||
|
||
<div class="about-section">
|
||
<div class="section-title">技术栈</div>
|
||
<div class="skills-grid">
|
||
<div class="skill-item">C#</div>
|
||
<div class="skill-item">F#</div>
|
||
<div class="skill-item">Lua</div>
|
||
<div class="skill-item">HTML5</div>
|
||
<div class="skill-item">CSS3</div>
|
||
<div class="skill-item">JavaScript</div>
|
||
<div class="skill-item">Unity3D</div>
|
||
<div class="skill-item">Blender</div>
|
||
<div class="skill-item">Krita</div>
|
||
<div class="skill-item">Git</div>
|
||
<div class="skill-item">Linux</div>
|
||
<div class="skill-item">Android</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="donation-section">
|
||
<div class="section-title">打赏支持</div>
|
||
<div class="donation-description">
|
||
如果我的工作对您有帮助，欢迎通过以下方式支持我继续创作和开发。
|
||
</div>
|
||
<div class="donation-methods">
|
||
<div class="donation-method">
|
||
<img src="assets/images/QRCode/wechatpay.png" alt="微信支付" class="donation-img">
|
||
<div class="donation-label">微信支付</div>
|
||
</div>
|
||
<div class="donation-method">
|
||
<img src="assets/images/QRCode/alipay.png" alt="支付宝" class="donation-img">
|
||
<div class="donation-label">支付宝</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="about-section">
|
||
<div class="section-title">联系方式</div>
|
||
<div class="about-text">
|
||
如果你有任何问题或合作意向，欢迎通过邮箱联系我：
|
||
<a href="mailto:exyone.dev@icloud.com">exyone.dev@icloud.com</a>
|
||
<a href="mailto:me.exyone@yandex.com">me.exyone@yandex.com</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="assets/js/wallpaper.js"></script>
|
||
<script src="assets/js/component-loader.js"></script>
|
||
<script src="assets/js/topbar.js"></script>
|
||
<script>
|
||
// 初始化组件加载器
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 初始化背景壁纸
|
||
getBingWallpaper();
|
||
// 加载顶部导航组件
|
||
loadTopBarComponents();
|
||
// 初始化移动端菜单
|
||
initMobileMenu();
|
||
});
|
||
|
||
// 添加页面加载动画
|
||
window.addEventListener('load', function () {
|
||
document.body.style.opacity = '0';
|
||
document.body.style.transition = 'opacity 1s ease-in-out';
|
||
setTimeout(() => {
|
||
document.body.style.opacity = '1';
|
||
}, 100);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |