54 lines
2.0 KiB
HTML
54 lines
2.0 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 class="card">
|
|
<h3>卡片标题</h3>
|
|
<p>这是一个WinUI风格的卡片内容区域。您可以在这里放置各种内容。</p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>另一个卡片</h3>
|
|
<p>响应式设计使得在窄屏设备上侧边栏可以隐藏。</p>
|
|
</div>
|
|
<div class="card">
|
|
<h3>更多内容</h3>
|
|
<p>主内容区域可以滚动，侧边栏在移动设备上会覆盖内容。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('menuToggle').addEventListener('click', function() {
|
|
document.getElementById('sidebar').classList.toggle('open');
|
|
});
|
|
|
|
// 为侧边栏菜单项添加悬停效果
|
|
document.querySelectorAll('.sidebar-menu li').forEach(item => {
|
|
item.style.cursor = 'pointer';
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |