From 897516ef22cdeb4d4d37cfcd1c082641fece911f Mon Sep 17 00:00:00 2001 From: Honey Date: Sun, 21 Jun 2026 13:15:23 +0200 Subject: [PATCH] Redesigned progress tower as building with floors, windows and roof Co-Authored-By: Claude Sonnet 4.6 --- public/index.html | 20 ++++- public/styles.css | 187 +++++++++++++++++++++++++++++++++------------- 2 files changed, 154 insertions(+), 53 deletions(-) diff --git a/public/index.html b/public/index.html index 084256e..6bf0ad3 100644 --- a/public/index.html +++ b/public/index.html @@ -11,9 +11,27 @@
0%
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
0/0
diff --git a/public/styles.css b/public/styles.css index fa3e882..c0dd322 100644 --- a/public/styles.css +++ b/public/styles.css @@ -16,9 +16,9 @@ html { --subtask-bg: rgba(255, 255, 255, 0.14); --subtask-border: rgba(255, 255, 255, 0.12); - --text-primary: #1e293b; - --text-secondary: #475569; - --text-muted: #64748b; + --text-primary: #0f172a; + --text-secondary: #334155; + --text-muted: #475569; --accent: #6366f1; --accent-hover: #4f46e5; @@ -46,7 +46,7 @@ html { body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; min-height: 100vh; - padding: 16px 16px 16px 64px; + padding: 16px; color: var(--text-primary); background: linear-gradient( @@ -69,19 +69,13 @@ body { /* ─── Progress Tower ─── */ .progress-tower { position: fixed; - left: 12px; + left: 46px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; - gap: 10px; z-index: 9000; - padding: 16px 10px; - background: rgba(255, 255, 255, 0.82); - border-radius: 24px; - border: 1px solid rgba(255, 255, 255, 0.6); - box-shadow: 0 4px 20px rgba(60, 60, 120, 0.15); transition: opacity 0.3s; } @@ -91,19 +85,86 @@ body { } .tower-percentage { - font-size: 0.92em; + font-size: 1.3em; font-weight: 800; color: var(--accent); letter-spacing: -0.5px; + margin-bottom: 6px; } -.tower-bar { - width: 26px; - height: 220px; - background: rgba(0, 0, 0, 0.07); - border-radius: 13px; - overflow: hidden; +/* Tower roof */ +.tower-roof { + width: 0; + height: 0; + border-left: 40px solid transparent; + border-right: 40px solid transparent; + border-bottom: 28px solid rgba(255, 255, 255, 0.75); + margin-bottom: -1px; + filter: drop-shadow(0 -2px 4px rgba(60, 60, 120, 0.1)); +} + +.tower-body { position: relative; + width: 68px; + height: 550px; + background: rgba(255, 255, 255, 0.35); + border: 2px solid rgba(255, 255, 255, 0.6); + border-radius: 3px 3px 6px 6px; + overflow: hidden; + box-shadow: 0 4px 20px rgba(60, 60, 120, 0.12); +} + +/* Floors grid overlaying the fill */ +.tower-floors { + position: absolute; + top: 0; left: 0; right: 0; bottom: 0; + z-index: 2; + display: flex; + flex-direction: column; + pointer-events: none; +} + +.tower-floor { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + border-bottom: 2px solid rgba(255, 255, 255, 0.45); +} + +.tower-floor:last-child { + border-bottom: none; +} + +.tower-window { + width: 22px; + height: 24px; + background: rgba(255, 255, 255, 0.2); + border: 1.5px solid rgba(255, 255, 255, 0.55); + border-radius: 2px 2px 0 0; + position: relative; +} + +/* Cross divider */ +.tower-window::before { + content: ''; + position: absolute; + top: 0; bottom: 0; + left: 50%; + width: 1.5px; + background: rgba(255, 255, 255, 0.55); + transform: translateX(-50%); +} + +.tower-window::after { + content: ''; + position: absolute; + left: 0; right: 0; + top: 50%; + height: 1.5px; + background: rgba(255, 255, 255, 0.55); + transform: translateY(-50%); } .tower-fill { @@ -112,16 +173,37 @@ body { left: 0; width: 100%; height: 0%; - background: linear-gradient(to top, var(--accent), #a78bfa, var(--green)); - border-radius: 13px; + background: linear-gradient( + to top, + var(--accent) 0%, + #818cf8 30%, + #a78bfa 50%, + #7dd3fc 70%, + var(--green) 100% + ); + z-index: 1; transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.3); +} + +/* Base / foundation */ +.tower-base { + width: 80px; + height: 12px; + background: rgba(255, 255, 255, 0.75); + border-radius: 0 0 6px 6px; + border: 2px solid rgba(255, 255, 255, 0.6); + border-top: none; + box-shadow: 0 4px 10px rgba(60, 60, 120, 0.1); + margin-top: -1px; } .tower-count { - font-size: 0.75em; - font-weight: 600; + font-size: 0.88em; + font-weight: 700; color: var(--text-muted); white-space: nowrap; + margin-top: 8px; } .tower-count span { @@ -135,16 +217,16 @@ body { } .greeting-banner .greeting-text { - font-size: 1.15em; - font-weight: 600; + font-size: 1.2em; + font-weight: 700; color: var(--text-primary); - text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4); } .greeting-banner .greeting-sub { - font-size: 0.82em; + font-size: 0.85em; color: var(--text-secondary); margin-top: 2px; + font-weight: 500; } /* ─── Header ─── */ @@ -162,7 +244,6 @@ h1 { color: var(--text-primary); font-weight: 700; letter-spacing: -0.3px; - text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5); } .header-actions { @@ -631,7 +712,7 @@ button { .task-title { font-size: 0.95em; - font-weight: 600; + font-weight: 700; color: var(--text-primary); flex: 1; min-width: 0; @@ -651,20 +732,21 @@ button { padding: 2px 8px; border-radius: 10px; font-size: 0.7em; - font-weight: 600; + font-weight: 700; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.3px; } -.task-size-badge.small { background: var(--sky-soft); color: #0369a1; } -.task-size-badge.medium { background: var(--amber-soft); color: #b45309; } -.task-size-badge.large { background: var(--rose-soft); color: #be123c; } +.task-size-badge.small { background: rgba(2, 132, 199, 0.22); color: #0c4a6e; } +.task-size-badge.medium { background: rgba(245, 158, 11, 0.25); color: #92400e; } +.task-size-badge.large { background: rgba(225, 29, 72, 0.2); color: #9f1239; } .task-description { color: var(--text-secondary); margin-bottom: 8px; - font-size: 0.82em; + font-size: 0.84em; + font-weight: 500; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; @@ -688,16 +770,16 @@ button { padding: 2px 8px; border-radius: 10px; font-size: 0.72em; - font-weight: 600; + font-weight: 700; white-space: nowrap; } -.due-badge.due-ok { background: var(--green-soft); color: #047857; } -.due-badge.due-soon { background: var(--amber-soft); color: #b45309; } -.due-badge.due-overdue { background: var(--rose-soft); color: #be123c; } +.due-badge.due-ok { background: rgba(5, 150, 105, 0.25); color: #064e3b; } +.due-badge.due-soon { background: rgba(245, 158, 11, 0.28); color: #92400e; } +.due-badge.due-overdue { background: rgba(225, 29, 72, 0.25); color: #9f1239; } .due-badge.due-done { - background: rgba(148, 163, 184, 0.12); + background: rgba(148, 163, 184, 0.2); color: var(--text-muted); text-decoration: line-through; } @@ -727,8 +809,8 @@ button { .progress-text { font-size: 0.78em; - font-weight: 600; - color: var(--text-muted); + font-weight: 700; + color: var(--text-secondary); min-width: 32px; text-align: right; } @@ -840,7 +922,7 @@ button { } .subtask-title { - font-weight: 600; + font-weight: 700; color: var(--text-primary); font-size: 0.92em; flex: 1; @@ -1023,7 +1105,7 @@ button { /* ─── Responsive ─── */ @media (max-width: 640px) { - body { padding: 12px 12px 12px 50px; } + body { padding: 12px; } h1 { font-size: 1.2em; } header { @@ -1034,17 +1116,18 @@ button { .header-actions { justify-content: space-between; } .view-toggle { margin-left: auto; } .form-row-2 { grid-template-columns: 1fr; } - .progress-tower { - left: 6px; - padding: 10px 6px; - border-radius: 18px; + .progress-tower { left: 8px; } + .tower-body { width: 46px; height: 340px; } + .tower-roof { + border-left-width: 26px; + border-right-width: 26px; + border-bottom-width: 18px; } - .tower-bar { - width: 18px; - height: 140px; - } - .tower-percentage { font-size: 0.75em; } - .tower-count { font-size: 0.6em; } + .tower-base { width: 54px; height: 8px; } + .tower-window { width: 14px; height: 14px; } + .tower-floor { gap: 0; } + .tower-percentage { font-size: 0.9em; } + .tower-count { font-size: 0.65em; } .subtask { backdrop-filter: none; -webkit-backdrop-filter: none;