289 lines
9.4 KiB
HTML
289 lines
9.4 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/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> |