71 lines
2.7 KiB
HTML
71 lines
2.7 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>Solsynth network</title>
|
|
<link rel="stylesheet" href="static/styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="title-bar">
|
|
<button class="menu-toggle" id="menuToggle">☰</button>
|
|
<h1>Solsynth network</h1>
|
|
</div>
|
|
|
|
<div class="main-container">
|
|
<div class="sidebar" id="sidebar">
|
|
<div class="sidebar-header">菜单</div>
|
|
<ul class="sidebar-menu">
|
|
<li class="active" onclick="window.location.href='/';" style="cursor: pointer;">首页</li>
|
|
<li onclick="window.location.href='/Chat';" style="cursor: pointer;">聊天</li>
|
|
<li onclick="window.location.href='/Realm';" style="cursor: pointer;">领域</li>
|
|
<li onclick="window.location.href='/Account';" style="cursor: pointer;">设置</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<h2>欢迎使用</h2>
|
|
<div id="posts-container">
|
|
<!-- 帖子卡片将通过JavaScript动态加载 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('menuToggle').addEventListener('click', function() {
|
|
document.getElementById('sidebar').classList.toggle('open');
|
|
});
|
|
|
|
// 获取帖子数据
|
|
async function fetchPosts() {
|
|
try {
|
|
const response = await fetch('/api/posts');
|
|
const posts = await response.json();
|
|
|
|
const container = document.getElementById('posts-container');
|
|
container.innerHTML = '';
|
|
|
|
posts.forEach(post => {
|
|
const card = document.createElement('div');
|
|
card.className = 'card';
|
|
card.innerHTML = `
|
|
<h3>${post.title}</h3>
|
|
<p class="post-content">${post.content}</p>
|
|
<p class="post-description">${post.description}</p>
|
|
<div class="post-author">
|
|
<span class="username">@${post.author.username}</span>
|
|
<span class="nickname">${post.author.nickname}</span>
|
|
</div>
|
|
`;
|
|
container.appendChild(card);
|
|
});
|
|
} catch (error) {
|
|
console.error('获取帖子失败:', error);
|
|
}
|
|
}
|
|
|
|
// 页面加载时获取帖子
|
|
document.addEventListener('DOMContentLoaded', fetchPosts);
|
|
</script>
|
|
</body>
|
|
</html> |