197 lines
7.1 KiB
HTML
197 lines
7.1 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="{{ url_for('static', filename='style.css') }}">
|
||
<script>window.__INITIAL_STATS__ = {{ initial_stats | safe }};</script>
|
||
</head>
|
||
<body>
|
||
{% include "icons.html" %}
|
||
|
||
<div id="toast" class="toast"></div>
|
||
|
||
<div class="app-layout">
|
||
|
||
<!-- ═══ 左侧边栏 ═══ -->
|
||
<aside class="sidebar">
|
||
|
||
<!-- 用户信息 -->
|
||
<div class="sidebar-user">
|
||
<div class="user-avatar">{{ username[0] }}</div>
|
||
<div class="user-info">
|
||
<span class="user-name">{{ username }}</span>
|
||
<span class="user-tag">道阁 · 紫微</span>
|
||
</div>
|
||
<a href="/logout" class="btn-logout-icon" title="退出登录" onclick="return confirm('确定退出登录？')">
|
||
<svg class="icon-sm"><use href="#icon-logout"/></svg>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- 统计信息 -->
|
||
<div class="sidebar-stats" id="sidebar-stats">
|
||
<div class="stat-item">
|
||
<span class="stat-num" id="stat-days">--</span>
|
||
<span class="stat-label">打卡天</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-num" id="stat-morning">--</span>
|
||
<span class="stat-label">立志</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-num" id="stat-study">--</span>
|
||
<span class="stat-label">勤学</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 日历 -->
|
||
<div class="calendar-widget">
|
||
<div class="cal-header">
|
||
<button class="cal-nav" onclick="changeCalMonth(-1)">
|
||
<svg class="icon-sm"><use href="#icon-chevron-left"/></svg>
|
||
</button>
|
||
<span class="cal-month-label" id="cal-month-label">2026年 6月</span>
|
||
<button class="cal-nav" onclick="changeCalMonth(1)">
|
||
<svg class="icon-sm"><use href="#icon-chevron-right"/></svg>
|
||
</button>
|
||
</div>
|
||
<div class="cal-weekdays">
|
||
<span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span>
|
||
</div>
|
||
<div class="cal-grid" id="cal-grid"></div>
|
||
<div class="cal-legend">
|
||
<span class="legend-dot pass"></span> 达标
|
||
<span class="legend-dot fail"></span> 未达标
|
||
<span class="legend-dot empty"></span> 未打卡
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 功能入口 -->
|
||
<nav class="sidebar-nav">
|
||
<a class="nav-item active" data-panel="daily" onclick="switchPanel('daily')">
|
||
<svg class="icon-sm"><use href="#icon-calendar"/></svg>
|
||
每日打卡
|
||
</a>
|
||
<a class="nav-item" data-panel="weekly" onclick="switchPanel('weekly')">
|
||
<svg class="icon-sm"><use href="#icon-chart-bar"/></svg>
|
||
每周评分
|
||
</a>
|
||
<a class="nav-item" data-panel="history" onclick="switchPanel('history')">
|
||
<svg class="icon-sm"><use href="#icon-list-bullet"/></svg>
|
||
历史记录
|
||
</a>
|
||
</nav>
|
||
|
||
<!-- 底部新建按钮 -->
|
||
<div class="sidebar-footer">
|
||
<button class="btn-new-day" onclick="goToday()">
|
||
<svg class="icon-sm"><use href="#icon-sun"/></svg>
|
||
回到今天
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ═══ 右侧主内容区 ═══ -->
|
||
<main class="main-content">
|
||
|
||
<!-- ── 每日打卡面板 ── -->
|
||
<section class="panel active" id="panel-daily">
|
||
<div class="panel-header">
|
||
<h2>每日打卡</h2>
|
||
<input type="date" id="check-date" class="check-date-input" onchange="loadCheckin()">
|
||
</div>
|
||
<div class="daily-grid">
|
||
<div class="card card-morning">
|
||
<div class="card-head">
|
||
<div class="card-head-left">
|
||
<svg class="icon-h2"><use href="#icon-sun"/></svg>
|
||
<h3>早间立志</h3>
|
||
</div>
|
||
<button class="btn-edit-toggle" onclick="toggleEditMode(this)" title="编辑">
|
||
<svg class="icon-sm"><use href="#icon-pencil"/></svg>
|
||
</button>
|
||
</div>
|
||
<p class="card-desc">今天最重要的 1~3 件事</p>
|
||
<div id="morning-list"></div>
|
||
<button class="btn-add edit-only" onclick="addMorning()">
|
||
<svg class="icon-sm"><use href="#icon-plus"/></svg> 增加一条
|
||
</button>
|
||
</div>
|
||
<div class="card card-evening">
|
||
<div class="card-head">
|
||
<div class="card-head-left">
|
||
<svg class="icon-h2"><use href="#icon-magnifying-glass"/></svg>
|
||
<h3>责善 · 改过</h3>
|
||
</div>
|
||
<button class="btn-edit-toggle" onclick="toggleEditMode(this)" title="编辑">
|
||
<svg class="icon-sm"><use href="#icon-pencil"/></svg>
|
||
</button>
|
||
</div>
|
||
<p class="card-desc">今天犯的错 & 改进方案（最多5条）</p>
|
||
<div id="evening-list"></div>
|
||
<button class="btn-add edit-only" onclick="addEvening()">
|
||
<svg class="icon-sm"><use href="#icon-plus"/></svg> 增加一条
|
||
</button>
|
||
</div>
|
||
<div class="card card-study">
|
||
<div class="card-head">
|
||
<svg class="icon-h2"><use href="#icon-book-open"/></svg>
|
||
<h3>勤学打卡</h3>
|
||
</div>
|
||
<p class="card-desc">今日修行清单</p>
|
||
<div id="study-list"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── 每周评分面板 ── -->
|
||
<section class="panel" id="panel-weekly">
|
||
<div class="panel-header">
|
||
<h2>每周评分</h2>
|
||
</div>
|
||
<div class="week-nav">
|
||
<button class="btn-nav" onclick="changeWeek(-1)">
|
||
<svg class="icon-nav"><use href="#icon-chevron-left"/></svg> 上周
|
||
</button>
|
||
<span id="week-label">--</span>
|
||
<button class="btn-nav" onclick="changeWeek(1)">
|
||
下周 <svg class="icon-nav"><use href="#icon-chevron-right"/></svg>
|
||
</button>
|
||
</div>
|
||
<div class="weekly-overview">
|
||
<div class="score-circle">
|
||
<svg viewBox="0 0 120 120" class="score-svg">
|
||
<circle cx="60" cy="60" r="50" fill="none" stroke="#E5E7EB" stroke-width="8"/>
|
||
<circle cx="60" cy="60" r="50" fill="none" stroke="#4A6CF7" stroke-width="8"
|
||
stroke-dasharray="314" stroke-dashoffset="314" stroke-linecap="round"
|
||
class="score-ring" transform="rotate(-90,60,60)"/>
|
||
</svg>
|
||
<div class="score-inner">
|
||
<span class="score-num" id="weekly-score">--</span>
|
||
<span class="score-unit">分</span>
|
||
</div>
|
||
</div>
|
||
<div class="score-meta">
|
||
<span class="score-text" id="score-text">选择一周查看评分</span>
|
||
<div class="score-stats" id="score-stats"></div>
|
||
</div>
|
||
</div>
|
||
<div id="week-days-grid" class="week-days-grid"></div>
|
||
</section>
|
||
|
||
<!-- ── 历史记录面板 ── -->
|
||
<section class="panel" id="panel-history">
|
||
<div class="panel-header">
|
||
<h2>历史记录</h2>
|
||
</div>
|
||
<div id="history-grid" class="history-grid"></div>
|
||
</section>
|
||
|
||
</main>
|
||
</div>
|
||
|
||
<script src="{{ url_for('static', filename='app.js') }}"></script>
|
||
</body>
|
||
</html>
|