102 lines
4.2 KiB
HTML
102 lines
4.2 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>任务日历系统</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<!-- 登录/注册模态框 -->
|
||
<div id="authModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 id="authTitle">登录</h2>
|
||
<button class="modal-close" id="closeAuthModal">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div id="authForm">
|
||
<div class="form-group">
|
||
<label for="authServer">服务器地址：</label>
|
||
<input type="text" id="authServer" placeholder="例如：http://localhost:3000" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="authUsername">用户名：</label>
|
||
<input type="text" id="authUsername" placeholder="至少3个字符" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="authPassword">密码：</label>
|
||
<input type="password" id="authPassword" placeholder="至少6个字符" />
|
||
</div>
|
||
<div id="authMessage" class="auth-message"></div>
|
||
<div class="form-actions">
|
||
<button id="loginBtn" class="btn-primary">登录</button>
|
||
<button id="registerBtn" class="btn-secondary">注册</button>
|
||
</div>
|
||
<div class="auth-switch">
|
||
<span id="switchToRegister">还没有账号？点击注册</span>
|
||
<span id="switchToLogin" style="display: none;">已有账号？点击登录</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 主应用容器 -->
|
||
<div class="container" id="mainContainer" style="display: none;">
|
||
<header>
|
||
<div class="user-info">
|
||
<span id="userDisplay">未登录</span>
|
||
<button id="logoutBtn" class="btn-logout">退出</button>
|
||
</div>
|
||
<h1>任务日历</h1>
|
||
<div class="controls">
|
||
<button id="prevMonth" class="btn-nav">‹</button>
|
||
<span id="currentMonth" class="month-display"></span>
|
||
<button id="nextMonth" class="btn-nav">›</button>
|
||
<button id="todayBtn" class="btn-today">今天</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="legend">
|
||
<div class="legend-item">
|
||
<span class="mark completed">✓</span>
|
||
<span>任务已完成</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<span class="mark partial">○</span>
|
||
<span>部分未完成</span>
|
||
</div>
|
||
<div class="legend-item">
|
||
<span class="mark none"></span>
|
||
<span>未标记</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="calendar" id="calendar"></div>
|
||
|
||
<div class="instructions">
|
||
<p>💡 点击日期可切换标记状态：未标记 → 已完成 → 部分完成 → 未标记</p>
|
||
<p>📌 选择服务器后，数据会自动加载和保存</p>
|
||
</div>
|
||
|
||
<div class="server-section">
|
||
<label for="serverInput">API服务器地址：</label>
|
||
<div class="server-input-group">
|
||
<input type="text" id="serverInput" placeholder="例如：http://localhost:3000" />
|
||
<button id="addServerBtn" class="btn-add">添加</button>
|
||
<select id="serverSelect" class="server-select">
|
||
<option value="">选择服务器</option>
|
||
</select>
|
||
<button id="removeServerBtn" class="btn-remove">删除</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右上角提示消息 -->
|
||
<div id="statusMessage" class="status-message-toast"></div>
|
||
|
||
<script type="module" src="js/main.js"></script>
|
||
</body>
|
||
</html>
|