diff --git a/static/app.js b/static/app.js index 012eb64..dbab48c 100644 --- a/static/app.js +++ b/static/app.js @@ -441,6 +441,16 @@ btn.classList.toggle('active', editing); }; + /* 切换每周打卡 Tab */ + window.switchDailyTab = function(btn) { + var tab = btn.dataset.tab; + document.querySelectorAll('.daily-tab').forEach(function(t){ t.classList.remove('active'); }); + btn.classList.add('active'); + document.querySelectorAll('.daily-card').forEach(function(c){ c.classList.remove('active'); }); + var card = document.querySelector('.daily-card[data-card="' + tab + '"]'); + if (card) card.classList.add('active'); + }; + /* ================================================================ Load & Auto Save Checkin ================================================================ */ diff --git a/static/style.css b/static/style.css index c50f94e..0166e3b 100644 --- a/static/style.css +++ b/static/style.css @@ -456,29 +456,38 @@ body { ═══════════════════════════════════════════ */ .daily-grid { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 16px; - margin-bottom: 20px; + display: block; } +.daily-card { display: none; } +.daily-card.active { display: block; } -/* 立志 — 左上 */ -.card-morning { - grid-column: 1; - grid-row: 1; +/* 每周打卡 Tab */ +.daily-tabs { + display: flex; + gap: 4px; + margin-bottom: 16px; + border-bottom: 1.5px solid var(--border); } - -/* 改过 — 左下 */ -.card-evening { - grid-column: 1; - grid-row: 2; -} - -/* 勤学 — 右列跨2行 */ -.card-study { - grid-column: 2; - grid-row: 1 / 3; +.daily-tab { + display: inline-flex; + align-items: center; + gap: 5px; + padding: 8px 16px; + border: none; + background: none; + font-size: 13px; + font-weight: 500; + color: var(--text-dim); + cursor: pointer; + border-bottom: 2px solid transparent; + margin-bottom: -1.5px; + transition: all 0.15s; + font-family: inherit; } +.daily-tab .icon-sm { opacity: 0.6; } +.daily-tab:hover { color: var(--text); } +.daily-tab.active { color: var(--primary); border-bottom-color: var(--primary); } +.daily-tab.active .icon-sm { opacity: 1; } /* ── Cards ── */ @@ -1405,7 +1414,6 @@ body { :root { --sidebar-w: 240px; } .main-content { padding: 20px 24px; } .daily-grid { grid-template-columns: 1fr; } - .card-morning, .card-evening, .card-study { grid-column: 1; grid-row: auto; } .weekly-overview { flex-direction: column; gap: 16px; text-align: center; } .week-days-grid { grid-template-columns: repeat(4, 1fr); } .history-grid { grid-template-columns: 1fr; } diff --git a/templates/index.html b/templates/index.html index 4f47a36..e3ccbba 100644 --- a/templates/index.html +++ b/templates/index.html @@ -133,8 +133,19 @@ +