Skip to content

Commit 249ff30

Browse files
author
Nancy Zhang
committed
Change color pattern
1 parent ac76985 commit 249ff30

2 files changed

Lines changed: 17 additions & 22 deletions

File tree

‎index.html‎

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,18 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
6-
<meta name="theme-color" content="#0ea5e9" />
6+
<meta name="theme-color" content="#facc15" />
77
<meta name="apple-mobile-web-app-capable" content="yes" />
88
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
99
<link rel="manifest" href="./manifest.webmanifest" />
1010
<link rel="apple-touch-icon" href="./icons/icon-192.png" />
1111
<title>My Tasks</title>
1212
<style>
13-
/* ===== Design tokens ===== */
13+
/* ===== Design tokens (YELLOW primary) ===== */
1414
:root{
1515
--bg:#0b0f14; /* app bg */
16-
--grad:radial-gradient(1000px 400px at 20% -10%, #0ea5e955, transparent 60%),
17-
radial-gradient(1000px 400px at 120% -20%, #22c1f155, transparent 60%),
16+
--grad:radial-gradient(1000px 400px at 20% -10%, #facc1555, transparent 60%),
17+
radial-gradient(1000px 400px at 120% -20%, #fde68a55, transparent 60%),
1818
linear-gradient(180deg,#0b0f14,#0b0f14);
1919
--pane:#0f1722; /* surfaces */
2020
--pane-2:#0c1420; /* dialogs */
@@ -23,8 +23,8 @@
2323
--text:#e5e7eb; /* main text */
2424
--muted:#9aa4b2; /* subdued text */
2525
--sub:#cbd5e1; /* labels */
26-
--brand:#0ea5e9; /* primary */
27-
--brand-2:#22c1f1; /* brand top */
26+
--brand:#facc15; /* yellow-400 */
27+
--brand-2:#fde68a; /* yellow-200 */
2828
--ok:#10b981; /* success */
2929
--warn:#f59e0b; /* warning */
3030
--danger:#ef4444; /* danger */
@@ -50,7 +50,7 @@
5050

5151
.topbar{display:flex;gap:10px;align-items:center;padding:14px 12px 10px}
5252
.brandmark{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
53-
.brandmark .dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(180deg,var(--brand-2),var(--brand));box-shadow:0 0 0 4px #0b2a3a inset, 0 0 20px #22c1f166}
53+
.brandmark .dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(180deg,var(--brand-2),var(--brand));box-shadow:0 0 0 4px #3a2f0b inset, 0 0 20px #fde68a66}
5454

5555
.search{flex:1;display:flex;align-items:center;gap:10px;background:rgba(15,23,34,.7);
5656
border:1px solid var(--stroke);border-radius:999px;padding:10px 14px;box-shadow:var(--shadow-soft)}
@@ -62,11 +62,11 @@
6262
transition:transform var(--speed) ease, border-color var(--speed) ease, background var(--speed) ease}
6363
.btn:hover{border-color:#203245}
6464
.btn:active{transform:translateY(1px)}
65-
.btn.brand{border:none;background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#062836}
65+
.btn.brand{border:none;background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#2b1f06}
6666

6767
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 12px 12px}
6868
.tab{background:linear-gradient(180deg,#0f1722,#0b1220);border:1px solid var(--stroke);border-radius:12px;padding:10px;text-align:center;color:#9fb0c2;transition:all var(--speed) ease}
69-
.tab.active{color:#e9f2fb;border-color:#254667;box-shadow:0 0 0 2px #1e3a5fff inset}
69+
.tab.active{color:#fff7d6;border-color:#5a4a1b;box-shadow:0 0 0 2px #7c6a20ff inset}
7070

7171
/* ===== Main ===== */
7272
main{flex:1;overflow:auto;padding:0 12px 16px}
@@ -77,25 +77,25 @@
7777
/* ===== Task row ===== */
7878
.task{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px;border-radius:14px;border:1px solid transparent;transition:border-color var(--speed) ease, background var(--speed) ease}
7979
.task + .task{margin-top:10px}
80-
.task:hover{border-color:#1e2e44;background:rgba(30,46,68,.25)}
80+
.task:hover{border-color:#3b300d;background:rgba(59,48,13,.18)}
8181
.task.done{opacity:.55}
8282

83-
.check{width:24px;height:24px;border-radius:50%;border:2px solid #2b3f57;display:grid;place-items:center;cursor:pointer;transition:all var(--speed) ease}
83+
.check{width:24px;height:24px;border-radius:50%;border:2px solid #4b3d12;display:grid;place-items:center;cursor:pointer;transition:all var(--speed) ease}
8484
.check svg{opacity:0;transform:scale(.6);transition:all var(--speed) ease}
8585
.check.done{background:var(--ok);border-color:var(--ok)}
8686
.check.done svg{opacity:1;transform:scale(1)}
8787

8888
.title{font-weight:600}
8989
.meta{color:var(--muted);font-size:12px;margin-top:2px}
9090

91-
.tag{font-size:12px;color:#93c5fd;background:#0b3550;padding:4px 10px;border-radius:999px;margin-right:6px;border:1px solid #0f3a5e}
91+
.tag{font-size:12px;color:#fde68a;background:#3c310e;padding:4px 10px;border-radius:999px;margin-right:6px;border:1px solid #5c4a12}
9292
.due.soon{color:var(--warn)}
9393
.due.over{color:var(--danger)}
9494
.pri{font-weight:800;opacity:.85;margin-left:6px}
9595

9696
.row-actions{display:flex;gap:6px}
9797
.iconbtn{background:transparent;border:1px solid var(--stroke);border-radius:10px;padding:8px;color:#cbd5e1}
98-
.iconbtn:hover{border-color:#234361}
98+
.iconbtn:hover{border-color:#5c4a12}
9999

100100
/* ===== FAB ===== */
101101
.fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:10}
@@ -108,15 +108,15 @@
108108
.row{display:grid;gap:6px}
109109
label{color:var(--sub);font-size:12px}
110110
input[type=text], input[type=datetime-local], textarea, select{background:#0b1220;color:var(--text);border:1px solid var(--ring);border-radius:12px;padding:12px;outline:none}
111-
input:focus, textarea:focus, select:focus{border-color:#2b87c9;box-shadow:0 0 0 4px #2b87c922}
111+
input:focus, textarea:focus, select:focus{border-color:#d97706;box-shadow:0 0 0 4px #f59e0b33}
112112
textarea{min-height:84px}
113113
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
114114

115115
.toolbar{display:flex;gap:8px;flex-wrap:wrap}
116116

117117
footer{padding:10px 12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;color:var(--muted)}
118118
footer .spacer{flex:1}
119-
a{color:#7dd3fc;text-decoration:none}
119+
a{color:#fde68a;text-decoration:none}
120120

121121
/* small screens */
122122
@media (max-width:560px){
@@ -450,11 +450,6 @@
450450
if(e.target.closest('[data-act="delete"]')){ if(confirm('Delete this task?')) { await db.del(id); refresh(); } return; }
451451
if(e.target.closest('[data-act="edit"]')){ openEdit(id); return; }
452452
});
453-
if(!taskEl) return;
454-
const id = taskEl.dataset.id;
455-
if(e.target.closest('[data-act="toggle"]')){ toggleDone(id); return; }
456-
if(e.target.closest('[data-act="edit"]')){ openEdit(id); return; }
457-
});
458453

459454
btnSave.addEventListener('click', (e)=>{ e.preventDefault(); save(); });
460455
btnDelete.addEventListener('click', remove);
@@ -471,4 +466,4 @@
471466
refresh();
472467
</script>
473468
</body>
474-
</html>
469+
</html>

‎sw.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const VERSION = 'v1.0.3';
1+
const VERSION = 'v1.0.4';
22
const APP_SHELL = [
33
'./',
44
'./index.html',

0 commit comments

Comments
 (0)