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

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>