276 lines
11 KiB
HTML
276 lines
11 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>
|
||
<script>window.__INITIAL_WISHES__ = {{ initial_wishes | safe }};</script>
|
||
</head>
|
||
<body>
|
||
{% include "icons.html" %}
|
||
|
||
<div id="toast" class="toast"></div>
|
||
|
||
<!-- 日历同步弹窗 -->
|
||
<div class="sync-modal-overlay" id="sync-modal-overlay" style="display:none">
|
||
<div class="sync-modal">
|
||
<div class="sync-modal-header">
|
||
<h3>📅 日历同步</h3>
|
||
<button class="sync-modal-close" onclick="closeSyncModal()">×</button>
|
||
</div>
|
||
<div class="sync-modal-loading" id="sync-loading">
|
||
<div class="sync-spinner"></div>
|
||
<p>正在从钉钉同步过去15天~未来15天日程…</p>
|
||
</div>
|
||
<div class="sync-modal-results" id="sync-results" style="display:none">
|
||
<div class="sync-summary" id="sync-summary"></div>
|
||
<div class="sync-list" id="sync-list"></div>
|
||
</div>
|
||
<div class="sync-modal-footer">
|
||
<button class="btn-wish-save" onclick="closeSyncModal()">关闭</button>
|
||
</div>
|
||
</div>
|
||
</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="wishes" onclick="switchPanel('wishes')">
|
||
<svg class="icon-sm"><use href="#icon-star"/></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>
|
||
<button class="btn-cal-sync" onclick="syncCalendar()" title="同步钉钉日历">
|
||
<svg class="icon-sm"><use href="#icon-calendar"/></svg> 日历同步
|
||
</button>
|
||
<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>
|
||
|
||
<!-- ── 心愿清单面板 ── -->
|
||
<section class="panel" id="panel-wishes">
|
||
<div class="panel-header">
|
||
<h2>心愿清单</h2>
|
||
<button class="btn-edit-toggle" id="wishes-edit-toggle" onclick="toggleWishesEdit(this)" title="编辑">
|
||
<svg class="icon-sm"><use href="#icon-pencil"/></svg>
|
||
</button>
|
||
</div>
|
||
<!-- 新增表单 -->
|
||
<div class="wish-form" id="wish-form" style="display:none">
|
||
<input type="text" id="wish-name" placeholder="心愿名称…" maxlength="50">
|
||
<div class="wish-form-row">
|
||
<select id="wish-quadrant">
|
||
<option value="重要紧急">重要紧急</option>
|
||
<option value="重要不紧急" selected>重要不紧急</option>
|
||
<option value="紧急不重要">紧急不重要</option>
|
||
<option value="不紧急不重要">不紧急不重要</option>
|
||
</select>
|
||
<input type="date" id="wish-deadline">
|
||
</div>
|
||
<div class="wish-form-actions">
|
||
<button class="btn-wish-save" onclick="addWish()">添加</button>
|
||
<button class="btn-wish-cancel" onclick="hideWishForm()">取消</button>
|
||
</div>
|
||
</div>
|
||
<button class="btn-add edit-only" id="wishes-add-btn" onclick="showWishForm()" style="margin-bottom:16px">
|
||
<svg class="icon-sm"><use href="#icon-plus"/></svg> 新增心愿
|
||
</button>
|
||
<!-- 四象限网格 -->
|
||
<div class="quad-grid">
|
||
<div class="quad-cell" data-quadrant="重要紧急" id="quad-重要紧急">
|
||
<div class="quad-title">重要 & 紧急</div>
|
||
<div class="quad-list" id="quad-list-重要紧急"></div>
|
||
</div>
|
||
<div class="quad-cell" data-quadrant="重要不紧急" id="quad-重要不紧急">
|
||
<div class="quad-title">重要 & 不紧急</div>
|
||
<div class="quad-list" id="quad-list-重要不紧急"></div>
|
||
</div>
|
||
<div class="quad-cell" data-quadrant="紧急不重要" id="quad-紧急不重要">
|
||
<div class="quad-title">紧急 & 不重要</div>
|
||
<div class="quad-list" id="quad-list-紧急不重要"></div>
|
||
</div>
|
||
<div class="quad-cell" data-quadrant="不紧急不重要" id="quad-不紧急不重要">
|
||
<div class="quad-title">不紧急 & 不重要</div>
|
||
<div class="quad-list" id="quad-list-不紧急不重要"></div>
|
||
</div>
|
||
</div>
|
||
<div class="wishes-empty" id="wishes-empty" style="display:none">暂无心愿，点击上方按钮添加</div>
|
||
</section>
|
||
|
||
</main>
|
||
</div>
|
||
|
||
<script src="{{ url_for('static', filename='app.js') }}"></script>
|
||
</body>
|
||
</html>
|