diff --git a/data.db b/data.db index 8104a66..4c3c4c8 100644 Binary files a/data.db and b/data.db differ diff --git a/templates/annual_summary.html b/templates/annual_summary.html index 2f51337..dced093 100644 --- a/templates/annual_summary.html +++ b/templates/annual_summary.html @@ -142,6 +142,48 @@ line-height: 1.18; } + body[data-view-mode="dual"] .summary-panel { + grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); + gap: 12px; + min-height: calc(100vh - 150px); + } + + body[data-view-mode="dual"] .summary-overview { + gap: 10px; + } + + body[data-view-mode="dual"] .metric-grid { + grid-template-columns: 1fr; + gap: 8px; + } + + body[data-view-mode="dual"] .summary-overview .stat-card { + min-height: 64px; + padding: 10px 11px; + } + + body[data-view-mode="dual"] .summary-overview .stat-card .value { + font-size: 18px; + } + + body[data-view-mode="dual"] .chart-stack { + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px; + align-items: stretch; + min-height: 100%; + } + + body[data-view-mode="dual"] .chart-box { + padding: 12px 12px 14px; + min-height: 100%; + } + + body[data-view-mode="dual"] .chart-svg, + body[data-view-mode="dual"] .expense-chart-svg { + aspect-ratio: 1560 / 620; + min-height: 360px; + } + @media (max-width: 1000px) { .summary-layout, .summary-panel, diff --git a/templates/base.html b/templates/base.html index 40a1b98..dd84b87 100644 --- a/templates/base.html +++ b/templates/base.html @@ -20,6 +20,9 @@ --page-gutter: clamp(14px, 1.8vw, 24px); --panel-pad: clamp(16px, 1.4vw, 20px); --page-frame-width: min(1520px, calc(100vw - (var(--page-gutter) * 2))); + --page-frame-width-dual: min(2560px, calc(100vw - (var(--page-gutter) * 2))); + --page-frame-width-single: min(1520px, calc(100vw - (var(--page-gutter) * 2))); + --status-widget-height: 34px; } * { @@ -48,11 +51,28 @@ padding: var(--page-gutter); } + body[data-view-mode="single"] { + --page-frame-width: var(--page-frame-width-single); + } + + body[data-view-mode="dual"] { + --page-frame-width: var(--page-frame-width-dual); + --page-gutter: clamp(4px, 0.45vw, 10px); + --panel-pad: clamp(12px, 1vw, 16px); + } + .page { width: min(100%, var(--page-frame-width)); margin: 0 auto; display: grid; gap: var(--page-gutter); + min-height: calc(100vh - (var(--page-gutter) * 2)); + align-content: start; + } + + body[data-view-mode="dual"] .page { + width: calc(100vw - (var(--page-gutter) * 2)); + max-width: none; } .page > * { @@ -436,13 +456,81 @@ border-radius: 999px; background: rgba(248, 250, 252, 0.92); box-shadow: none; - padding: 6px 10px; + min-height: var(--status-widget-height); + padding: 0 10px; display: inline-flex; align-items: center; gap: 8px; backdrop-filter: blur(6px); } + .view-mode-switch { + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + width: 80px; + height: var(--status-widget-height); + min-height: var(--status-widget-height); + border-radius: 999px; + border: 1px solid var(--line); + background: #eef2f6; + color: #1f2937; + font-size: 11px; + font-weight: 800; + letter-spacing: -0.01em; + box-shadow: none; + padding: 0; + overflow: hidden; + cursor: pointer; + transition: background-color 0.16s ease, border-color 0.16s ease; + } + + .view-mode-switch:hover { + transform: none; + background: #e7ecf2; + } + + .view-mode-switch .label { + position: absolute; + top: 50%; + left: 3px; + width: 36px; + transform: translateY(-50%); + text-align: center; + color: #ffffff; + z-index: 2; + pointer-events: none; + user-select: none; + transition: left 0.2s ease; + } + + .view-mode-switch::before { + content: ""; + position: absolute; + top: 3px; + left: 3px; + width: 36px; + height: calc(var(--status-widget-height) - 8px); + border-radius: 999px; + background: #111827; + box-shadow: 0 6px 12px rgba(15, 23, 42, 0.18); + transition: transform 0.2s ease; + z-index: 1; + } + + .view-mode-switch[data-mode="dual"]::before { + transform: translateX(38px); + } + + .view-mode-switch[data-mode="dual"] .label { + left: 41px; + } + + .view-mode-switch[data-mode="single"]::before { + transform: translateX(0); + } + .sync-status-head { display: inline-flex; align-items: center; @@ -530,6 +618,9 @@ 연도별 수익/비용 전표비교 +