exyone/.exyone.me-html-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

上传文件至 /

Browse Source
This commit is contained in:
exyone
2025-12-08 04:41:42 +00:00
parent ab80df5422
commit c7fa1651b6
5 changed files with 1249 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

389
404.html Normal file
View File

@@ -0,0 +1,389 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面未找到 - 404错误</title>
<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;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.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;
}
/* 顶部导航栏 */
.top-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 40px;
z-index: 1000;
display: flex;
align-items: center;
padding: 0 16px;
gap: 16px;
background: rgba(10, 25, 41, 0.4);
backdrop-filter: blur(20px) saturate(200%);
-webkit-backdrop-filter: blur(20px) saturate(200%);
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.nav-links {
display: flex;
gap: 12px;
align-items: center;
}
.nav-link {
color: #ffffff;
text-decoration: none;
font-size: 14px;
font-family: 'JetBrains Mono', monospace;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.05);
text-shadow:
1px 1px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000;
}
.nav-link:hover {
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
transform: translateY(-1px);
}
/* 移动端菜单按钮 */
.mobile-menu-btn {
display: none;
background: none;
border: none;
color: #ffffff;
font-size: 24px;
cursor: pointer;
padding: 4px;
text-shadow:
1px 1px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000;
}
/* 404页面样式 */
.main-container {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 80px 20px 40px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.error-container {
text-align: center;
padding: 40px;
border-radius: 20px;
animation: fadeIn 1s ease-in-out;
max-width: 500px;
width: 100%;
}
.error-number {
font-size: 120px;
font-weight: bold;
margin-bottom: 20px;
font-family: 'JetBrains Mono', monospace;
opacity: 0.8;
text-shadow:
0 0 20px rgba(255, 255, 255, 0.5),
0 0 40px rgba(255, 255, 255, 0.3);
}
.error-title {
font-size: 32px;
margin-bottom: 15px;
font-weight: 600;
}
.error-message {
font-size: 18px;
margin-bottom: 30px;
opacity: 0.9;
line-height: 1.5;
}
.back-home-btn {
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 12px 30px;
font-size: 16px;
font-family: 'JetBrains Mono', monospace;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.back-home-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
/* 装饰元素 */
.decorative-elements {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: -1;
}
.decor-circle {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
animation: float 8s ease-in-out infinite;
}
.decor-circle:nth-child(1) {
width: 300px;
height: 300px;
top: -150px;
left: 10%;
animation-delay: 0s;
}
.decor-circle:nth-child(2) {
width: 200px;
height: 200px;
bottom: -100px;
right: 10%;
animation-delay: 2s;
}
.decor-circle:nth-child(3) {
width: 150px;
height: 150px;
top: 50%;
left: -75px;
animation-delay: 4s;
}
@keyframes float {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(10deg);
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.top-nav {
padding: 0 12px;
}
.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: rgba(10, 25, 41, 0.9);
backdrop-filter: blur(20px);
flex-direction: column;
padding: 10px;
gap: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-links.active {
display: flex;
}
.nav-link {
width: 100%;
text-align: center;
padding: 8px;
}
.mobile-menu-btn {
display: block;
}
.error-number {
font-size: 80px;
}
.error-title {
font-size: 24px;
}
.error-message {
font-size: 16px;
}
.error-container {
padding: 30px 20px;
}
}
@media (max-width: 480px) {
.error-number {
font-size: 60px;
}
.error-title {
font-size: 20px;
}
.error-message {
font-size: 14px;
}
.back-home-btn {
padding: 10px 20px;
font-size: 14px;
}
}
</style>
</head>
<body>
<!-- 背景 -->
<div class="nature-bg"></div>
<!-- 装饰元素 -->
<div class="decorative-elements">
<div class="decor-circle"></div>
<div class="decor-circle"></div>
<div class="decor-circle"></div>
</div>
<!-- 顶部导航栏 -->
<nav class="top-nav">
<button class="mobile-menu-btn" id="mobile-menu">☰</button>
<div class="nav-links" id="nav-links">
<a href="index.html" class="nav-link">🏠 首页</a>
<a href="about.html" class="nav-link">👤 关于站长</a>
<a href="#blog" class="nav-link">📝 博客</a>
<a href="#forum" class="nav-link">💬 论坛</a>
<a href="https://github.com" class="nav-link" target="_blank">🔧 Git</a>
<a href="friendwebsite.html" class="nav-link" target="_blank">🤝 友好网站</a>
</div>
</nav>
<!-- 主内容区域 -->
<div class="main-container">
<div class="error-container glass">
<div class="error-number text-stroke">404</div>
<div class="error-title text-stroke">页面未找到</div>
<div class="error-message">
抱歉，您访问的页面不存在或已被删除。<br>
请检查您输入的网址是否正确，或返回首页继续浏览。
</div>
<a href="index.html" class="back-home-btn">返回首页</a>
</div>
</div>
<script>
// 移动端菜单功能
document.getElementById('mobile-menu').addEventListener('click', () => {
const navLinks = document.getElementById('nav-links');
navLinks.classList.toggle('active');
});
// 添加页面加载动画
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);
});
// 添加随机小动画效果
setTimeout(() => {
const circles = document.querySelectorAll('.decor-circle');
circles.forEach(circle => {
const delay = Math.random() * 3;
circle.style.animationDelay = `${delay}s`;
});
}, 500);
</script>
</body>
</html>

143
README.md
View File

@@ -1,2 +1,141 @@
# .exyone.me-html-homepage
# exyone的荒野小站
一个现代化的个人网站，集成了多种实用工具和小组件，采用响应式设计，提供优秀的用户体验。
## 🌟 项目特色
- **现代化设计**：采用毛玻璃效果和渐变背景，视觉效果出色
- **响应式布局**：完美适配桌面端和移动端设备
- **组件化架构**：模块化设计，便于维护和扩展
- **丰富功能**：集成多种实用工具和小组件
- **动态壁纸**：每日自动更新必应壁纸背景
## 🛠️ 功能模块
### 主要页面
- **首页**：集成多种实用小组件的仪表板
- **关于页面**：个人简介、技术栈和联系方式
- **友好网站**：精选网站导航和分类
- **404页面**：自定义错误页面
### 实用小组件
- **时钟组件**：数字时钟和模拟时钟
- **日历组件**：显示当前日期和月份
- **待办事项**：任务管理工具
- **笔记组件**：快速记录想法
- **搜索组件**：快速搜索引擎
- **计算器**：基础数学计算
- **天气组件**：显示天气信息
- **名言组件**：每日一句名言
- **倒计时组件**：重要日期提醒
- **个人资料**：个人信息展示
## 🎨 设计特点
- **毛玻璃效果**：使用backdrop-filter实现现代化视觉效果
- **文字描边**：增强文字可读性
- **动画效果**：流畅的过渡和交互动画
- **响应式设计**：自适应不同屏幕尺寸
- **深色主题**：护眼的深色界面设计
## 📁 项目结构
```
├── 404.html # 404错误页面
├── README.md # 项目说明文档
├── about.html # 关于页面
├── friendwebsite.html # 友好网站页面
├── index.html # 首页
├── assets/ # 静态资源
│ ├── css/ # 样式文件
│ │ └── style.css # 主样式文件
│ ├── images/ # 图片资源
│ │ └── QRCode/ # 付款二维码
│ ├── js/ # JavaScript文件
│ │ ├── component-loader.js # 组件加载器
│ │ ├── topbar.js # 顶部导航栏脚本
│ │ └── wallpaper.js # 壁纸加载脚本
│ └── videos/ # 视频资源
├── components/ # 组件目录
│ ├── topbar/ # 顶部导航栏组件
│ │ ├── nav-links.html # 导航链接
│ │ └── quick-links.html # 快速链接
│ └── widgets/ # 小组件
│ ├── analog-clock.html # 模拟时钟
│ ├── calculator.html # 计算器
│ ├── calendar.html # 日历
│ ├── clock.html # 数字时钟
│ ├── countdown.html # 倒计时
│ ├── notes.html # 笔记
│ ├── profile.html # 个人资料
│ ├── quotes.html # 名言
│ ├── search.html # 搜索
│ ├── todo.html # 待办事项
│ └── weather.html # 天气
└── public/ # 公共文件
```
## 🚀 技术栈
- **前端技术**：
- HTML5 语义化标签
- CSS3 现代样式和动画
- JavaScript ES6+ 特性
- 响应式设计 (Flexbox & Grid)
- 毛玻璃效果 (backdrop-filter)
- **API集成**：
- 一言API (名言获取)
- 必应壁纸API (每日壁纸)
- 天气API (天气信息)
## 📱 使用方法
1. **克隆项目**：
```bash
git clone [项目地址]
cd [项目目录]
```
2. **启动本地服务器**：
```bash
# 使用Python
python -m http.server 8000
# 或使用Node.js
npx http-server -p 8000
```
3. **访问网站**：
打开浏览器访问 `http://localhost:8000`
## 🤝 贡献指南
欢迎提交问题和改进建议！
1. Fork 本项目
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request
## 📄 许可证
本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情
## 👨‍💻 作者
**exyone** - 全栈开发工程师
- 邮箱：exyone.dev@icloud.com
- 备用邮箱：me.exyone@yandex.com
## 🙏 致谢
- 感谢所有开源项目的贡献者
- 感谢提供API服务的平台
- 感谢所有支持者和用户
---
⭐ 如果这个项目对你有帮助，请给它一个星标！

360
about.html Normal file
View File

@@ -0,0 +1,360 @@
<!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>

289
friendwebsite.html Normal file
View File

@@ -0,0 +1,289 @@
<!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/style.css">
<style>
/* 友站链接页面特定样式 */
.main-container {
display: flex;
justify-content: center;
align-items: flex-start;
min-height: calc(100vh - 60px);
padding: 20px 0;
}
.websites-container {
max-width: 800px;
width: 100%;
padding: 20px;
margin: 0 auto 40px;
box-sizing: border-box;
}
.page-header {
text-align: center;
margin-bottom: 30px;
position: relative;
}
.page-title {
font-size: 28px;
font-weight: 600;
margin-bottom: 15px;
}
.page-description {
font-size: 16px;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
/* 细长列表样式 */
.websites-list {
display: flex;
flex-direction: column;
gap: 15px;
}
/* 网站项目 - 细长列表形式 */
.website-item {
display: flex;
padding: 15px;
gap: 15px;
transition: all 0.3s ease;
position: relative;
border-radius: 12px;
}
/* 左侧图片占位区域 */
.website-image {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid rgba(255, 255, 255, 0.2);
overflow: hidden;
}
.website-image-placeholder {
color: rgba(255, 255, 255, 0.3);
font-size: 24px;
}
/* 网站信息区域 */
.website-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* 网站名称样式 */
.website-name {
font-size: 18px;
font-weight: 600;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 8px;
}
/* 网站图标样式 */
.website-icon {
font-size: 20px;
}
/* 网站描述样式 */
.website-description {
font-size: 14px;
opacity: 0.85;
line-height: 1.5;
margin-bottom: 8px;
}
/* 网站链接样式 */
.website-link {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
text-decoration: none;
border-radius: 6px;
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
transition: all 0.3s ease;
position: relative;
align-self: flex-start;
}
.website-link:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
}
/* 响应式设计 */
@media (max-width: 768px) {
.websites-container {
padding: 15px;
}
.website-item {
flex-direction: column;
align-items: flex-start;
}
.website-image {
width: 100%;
height: 60px;
margin-bottom: 10px;
}
}
/* 预设格式示例 */
.preset-template {
background: rgba(255, 255, 255, 0.05);
border: 1px dashed rgba(255, 255, 255, 0.3);
border-radius: 8px;
padding: 10px;
margin: 20px 0;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: rgba(255, 255, 255, 0.7);
}
</style>
</head>
<body>
<div class="nature-bg"></div>
<!-- 引入顶部导航栏 -->
<nav class="top-nav">
<button class="mobile-menu-btn" id="mobile-menu">☰</button>
<!-- 导航链接容器 -->
<div id="nav-links-container"></div>
<!-- 快速链接容器 -->
<div id="quick-links-container"></div>
</nav>
<div class="main-container">
<div class="websites-container glass">
<div class="page-header">
<div class="page-title">友站链接</div>
<div class="page-description">欢迎来我朋友们的网站串串门</div>
</div>
<!-- 网站列表 -->
<div class="websites-list">
<div class="website-item glass">
<div class="website-image">
<img src="https://cloudflare-img-5xo.pages.dev/file/1737368452178_b_84b10f66e889555b8000d17eb26a8d84.jpg"
alt="李喜的资源站" style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="website-info">
<div class="website-name">
<span class="website-icon">📱</span>
李喜的资源站
</div>
<div class="website-description">专业的安卓刷机资源站，提供各类安卓设备的ROM包、工具和教程</div>
<a href="http://xz.ovo.lat/" class="website-link" target="_blank">
<span>访问网站</span>
<span>→</span>
</a>
</div>
</div>
<div class="website-item glass">
<div class="website-image">
<img src="https://static-cdn.jtvnw.net/jtv_user_pictures/6b32d361-6dd6-4c85-91bd-c3124991bd62-profile_image-70x70.png"
alt="asft8822的Twitch直播间" style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="website-info">
<div class="website-name">
<span class="website-icon">📺</span>
asft8822的Twitch直播間
</div>
<div class="website-description">是一個遊戲主播，會在Twitch上直播Apex Legends等游戲，歡迎前來觀看支持！</div>
<a href="https://www.twitch.tv/asft8822" class="website-link" target="_blank">
<span>訪問直播間</span>
<span>→</span>
</a>
</div>
</div>
<!-- 预设格式示例 -->
<div class="preset-template">
<!-- 复制以下格式添加新网站 -->
<div class="website-item glass">
<div class="website-image">
<div class="website-image-placeholder">🖼️</div>
</div>
<div class="website-info">
<div class="website-name">
<span class="website-icon">图标</span>
网站名称
</div>
<div class="website-description">网站描述文字</div>
<a href="#" class="website-link" target="_blank">
<span>访问网站</span>
<span>→</span>
</a>
</div>
</div>
</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();
// 初始化项目动画状态
const websiteItems = document.querySelectorAll('.website-item');
websiteItems.forEach(item => {
item.style.transition = 'all 0.3s ease';
});
// 移动端菜单功能
document.getElementById('mobile-menu').addEventListener('click', () => {
const navLinks = document.getElementById('nav-links');
if (navLinks) {
navLinks.classList.toggle('active');
}
});
});
// 添加页面加载动画
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>

70
index.html Normal file
View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="zh-CN">
<!--
项目地址: http://git.exyone.me/exyone/.exyone.me-html-homepage
作者: exyone
描述: 一个集成了多种实用工具的个人主页
创建时间: 2025年
版本: 1.0.0
-->
<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/style.css">
<!-- 核心JavaScript文件 -->
<script src="assets/js/wallpaper.js"></script>
<script src="assets/js/component-loader.js"></script>
<script src="assets/js/topbar.js"></script>
</head>
<body>
<!-- 背景容器 -->
<div class="nature-bg" id="bing-wallpaper"></div>
<!-- 顶部导航栏 -->
<nav class="top-nav">
<button class="mobile-menu-btn" id="mobile-menu">☰</button>
<!-- 导航链接容器 -->
<div id="nav-links-container"></div>
<!-- 快速链接容器 -->
<div id="quick-links-container"></div>
</nav>
<!-- 主内容区域 -->
<div class="main-container">
<!-- 左侧功能面板 -->
<div class="left-panel">
<!-- 时钟与搜索区域 -->
<div class="clock-search-container">
<!-- 数字时钟组件 -->
<div id="clock-component"></div>
<!-- 搜索组件 -->
<div id="search-component"></div>
</div>
<!-- 日历组件 -->
<div id="calendar-component"></div>
<!-- 模拟时钟组件 -->
<div id="analog-clock-component"></div>
<!-- 天气组件 -->
<div id="weather-component"></div>
<!-- 个人信息组件 -->
<div id="profile-component"></div>
<!-- 计算器组件 -->
<div id="calculator-component"></div>
<!-- 名言组件 -->
<div id="quotes-component"></div>
<!-- 倒计时组件 -->
<div id="countdown-component"></div>
</div>
</div>
<!-- 页面初始化脚本 -->
<script>
document.addEventListener('DOMContentLoaded', () => {
// 初始化背景壁纸
getBingWallpaper();
// 加载顶部导航组件（组件加载完成后会自动初始化移动端菜单）
loadTopBarComponents();
// 加载所有功能组件
loadAllComponents();
});
</script>
</body>
</html>