codeapp-js 0.2.2 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AI/codeapp.agent.md +105 -0
- package/AI/skills/connections/SKILL.md +47 -0
- package/AI/skills/dataverse/SKILL.md +99 -0
- package/AI/skills/environment-variables/SKILL.md +89 -0
- package/AI/skills/frontend-design/SKILL.md +34 -0
- package/AI/skills/jira/SKILL.md +81 -0
- package/AI/skills/office365-groups/SKILL.md +61 -0
- package/AI/skills/office365-outlook/SKILL.md +52 -0
- package/AI/skills/office365-users/SKILL.md +78 -0
- package/AI/skills/sharepoint/SKILL.md +77 -0
- package/AI/skills/sql/SKILL.md +85 -0
- package/AI/skills/start/SKILL.md +46 -0
- package/AI/skills/teams/SKILL.md +55 -0
- package/codeApp/.power/schemas/appschemas/dataSourcesInfo.ts +6275 -0
- package/codeApp/.power/schemas/jira/jira.Schema.json +6903 -0
- package/codeApp/.power/schemas/keyvault/keyvault.Schema.json +1600 -0
- package/{examples/combined demo/.power/schemas/office365groups/office365groups.Schema.json → codeApp/.power/schemas/office365groups/office365groups.Schema.json} +2203 -2203
- package/codeApp/.power/schemas/teams/teams.Schema.json +11112 -0
- package/codeApp/dist/codeapp.js +103 -1043
- package/codeApp/dist/connectors/azureKeyvault.js +459 -0
- package/codeApp/dist/connectors/jira.js +1247 -0
- package/codeApp/dist/connectors/office365groups.js +642 -0
- package/codeApp/dist/connectors/office365users.js +513 -0
- package/codeApp/dist/connectors/outlook.js +1393 -0
- package/{examples/kanban/dist → codeApp/dist/connectors}/sharepoint.js +466 -339
- package/codeApp/dist/connectors/sql.js +149 -0
- package/codeApp/dist/connectors/teams.js +280 -0
- package/codeApp/dist/index.js +1 -1
- package/codeApp/dist/power-apps-data.js +725 -176
- package/codeApp/src/generated/index.ts +12 -0
- package/codeApp/src/generated/models/AzureKeyVaultModel.ts +107 -0
- package/codeApp/src/generated/models/JiraModel.ts +501 -0
- package/codeApp/src/generated/services/AzureKeyVaultService.ts +257 -0
- package/codeApp/src/generated/services/JiraService.ts +1124 -0
- package/examples/{kanban → apps/kanban}/dist/dataverse.js +94 -94
- package/examples/{kanban → apps/kanban}/dist/index.css +605 -605
- package/examples/{kanban → apps/kanban}/dist/index.html +21 -21
- package/examples/{kanban → apps/kanban}/dist/index.js +860 -860
- package/examples/{kanban → apps/kanban}/dist/office365groups.js +97 -97
- package/examples/apps/kanban/dist/office365users.js +451 -0
- package/examples/{kanban → apps/kanban}/dist/outlook.js +162 -162
- package/examples/{planning Poker/dist/power-apps-data.js → apps/kanban/dist/power-apps-data.js} +2953 -2953
- package/{dev files/sharepoint.js → examples/apps/kanban/dist/sharepoint.js} +195 -99
- package/examples/{kanban → apps/kanban}/power.config.json +35 -35
- package/examples/{planning Poker → apps/planning Poker}/additional files/customizations (tables).xml +6428 -6428
- package/examples/{planning Poker → apps/planning Poker}/additional files/dataverse-tables.json +165 -165
- package/examples/{planning Poker → apps/planning Poker}/additional files/readme.md +122 -122
- package/examples/{planning Poker → apps/planning Poker}/dist/dataverse.js +78 -78
- package/examples/{planning Poker → apps/planning Poker}/dist/index.html +198 -198
- package/examples/{planning Poker → apps/planning Poker}/dist/index.js +954 -954
- package/examples/{kanban/dist/power-apps-data.js → apps/planning Poker/dist/power-apps-data.js } +2953 -2953
- package/examples/{planning Poker → apps/planning Poker}/dist/styles.css +815 -815
- package/examples/{planning Poker → apps/planning Poker}/power.config.json +50 -50
- package/examples/{solution explorer → apps/solution explorer}/dist/codeapp.js +1098 -1098
- package/examples/{solution explorer → apps/solution explorer}/dist/index.html +80 -80
- package/examples/{solution explorer → apps/solution explorer}/dist/index.js +735 -735
- package/examples/{solution explorer → apps/solution explorer}/dist/styles.css +571 -571
- package/examples/{solution explorer → apps/solution explorer}/power.config.json +150 -150
- package/examples/{todo → apps/todo}/dist/dataverse.js +64 -64
- package/examples/{todo → apps/todo}/dist/index.html +75 -75
- package/examples/{todo → apps/todo}/dist/index.js +8 -8
- package/examples/{todo → apps/todo}/dist/power-apps-data.js +2953 -2953
- package/examples/{todo → apps/todo}/dist/renderer.js +375 -375
- package/examples/{todo → apps/todo}/dist/styles.css +691 -691
- package/examples/{todo → apps/todo}/power.config.json +34 -34
- package/examples/combined demo/.power/schemas/appschemas/dataSourcesInfo.ts +6275 -7830
- package/examples/combined demo/.power/schemas/jira/jira.Schema.json +6903 -0
- package/examples/combined demo/.power/schemas/keyvault/keyvault.Schema.json +1600 -0
- package/examples/combined demo/.power/schemas/teams/teams.Schema.json +11112 -0
- package/examples/combined demo/dist/codeapp.js +394 -1098
- package/examples/combined demo/dist/index.html +29 -511
- package/examples/combined demo/dist/index.js +490 -470
- package/examples/combined demo/dist/office365users.js +513 -0
- package/examples/combined demo/dist/outlook.js +1393 -0
- package/examples/combined demo/dist/power-apps-data.js +3079 -3006
- package/examples/combined demo/dist/styles.css +483 -0
- package/examples/combined demo/power.config.json +33 -42
- package/examples/combined demo/src/generated/index.ts +12 -14
- package/examples/combined demo/src/generated/models/AzureKeyVaultModel.ts +107 -0
- package/examples/combined demo/src/generated/models/JiraModel.ts +501 -0
- package/examples/combined demo/src/generated/services/AzureKeyVaultService.ts +257 -0
- package/examples/combined demo/src/generated/services/JiraService.ts +1124 -0
- package/examples/dataverse Demo/dist/codeapp.js +394 -1085
- package/examples/{outlook Demo2/OutlookDemo_1_0_0_1.zip → dataverse Demo/dist/icon-512.png} +0 -0
- package/examples/dataverse Demo/dist/index.html +146 -54
- package/examples/dataverse Demo/dist/index.js +693 -83
- package/examples/dataverse Demo/dist/power-apps-data.js +3079 -2911
- package/examples/dataverse Demo/dist/styles.css +528 -0
- package/examples/dataverse Demo/power.config.json +41 -35
- package/examples/dataverse Demo/readme.md +79 -79
- package/examples/groups Demo/dist/codeapp.js +394 -1085
- package/examples/groups Demo/dist/icon-512.png +0 -0
- package/examples/groups Demo/dist/index.html +21 -25
- package/examples/groups Demo/dist/index.js +304 -113
- package/examples/groups Demo/dist/office365groups.js +642 -0
- package/examples/groups Demo/dist/power-apps-data.js +3079 -2911
- package/examples/groups Demo/dist/styles.css +509 -0
- package/examples/groups Demo/power.config.json +25 -25
- package/examples/myProfile/dist/codeapp.js +398 -0
- package/examples/myProfile/dist/index.html +21 -184
- package/examples/myProfile/dist/index.js +324 -141
- package/examples/myProfile/dist/office365users.js +517 -169
- package/examples/myProfile/dist/power-apps-data.js +3080 -2953
- package/examples/myProfile/dist/styles.css +458 -0
- package/examples/myProfile/power.config.json +24 -23
- package/examples/outlook Demo/dist/codeapp.js +394 -1085
- package/examples/outlook Demo/dist/index.html +150 -35
- package/examples/outlook Demo/dist/index.js +516 -170
- package/examples/outlook Demo/dist/outlook.js +1393 -121
- package/examples/outlook Demo/dist/power-apps-data.js +3079 -2911
- package/examples/outlook Demo/dist/styles.css +408 -84
- package/examples/outlook Demo/power.config.json +24 -23
- package/examples/outlook Demo/readme.md +92 -82
- package/examples/sharePoint Demo/dist/codeapp.js +394 -1085
- package/examples/sharePoint Demo/dist/icon-512.png +0 -0
- package/examples/sharePoint Demo/dist/index.html +22 -255
- package/examples/sharePoint Demo/dist/index.js +899 -262
- package/examples/sharePoint Demo/dist/power-apps-data.js +3079 -2911
- package/examples/sharePoint Demo/dist/sharepoint.js +466 -0
- package/examples/sharePoint Demo/dist/styles.css +587 -0
- package/examples/sharePoint Demo/power.config.json +23 -22
- package/package.json +1 -1
- package/readme.md +479 -61
- package/.github/instructions/wyattdave.instructions.md +0 -39
- package/.vscode/settings.json +0 -6
- package/dev files/dataverse.js +0 -105
- package/dev files/office365groups.js +0 -65
- package/dev files/office365users.js +0 -169
- package/dev files/outlook.js +0 -330
- package/examples/combined demo/.power/schemas/office365/office365.Schema.json +0 -21098
- package/examples/combined demo/.power/schemas/office365users/office365users.Schema.json +0 -2094
- package/examples/kanban/agent/decision-log.md +0 -9
- package/examples/kanban/agent/mockup-01-editorial-glass.html +0 -159
- package/examples/kanban/agent/mockup-02-dark-rail.html +0 -147
- package/examples/kanban/agent/mockup-03-paper-grid.html +0 -114
- package/examples/kanban/agent/mockup-04-neon-minimal.html +0 -141
- package/examples/kanban/agent/mockup-05-mono-architect.html +0 -119
- package/examples/kanban/dist/environmentVar.js +0 -55
- package/examples/kanban/dist/office365users.js +0 -169
- package/examples/kanban/src/generated/index.ts +0 -14
- package/examples/outlook Demo2/agent/decision-log.md +0 -7
- package/examples/outlook Demo2/dist/codeapp.js +0 -1334
- package/examples/outlook Demo2/dist/index.html +0 -98
- package/examples/outlook Demo2/dist/index.js +0 -346
- package/examples/outlook Demo2/dist/styles.css +0 -639
- package/examples/outlook Demo2/power.config.json +0 -23
- package/examples/planning Poker/.vscode/settings.json +0 -5
- package/examples/sharePoint Demo/agent/decision-log.md +0 -17
- package/examples/solution explorer/agent/decision-log.md +0 -27
- package/examples/solution explorer/agent/mockup-01-swiss-grid.html +0 -452
- package/examples/solution explorer/agent/mockup-02-dark-glass.html +0 -496
- package/examples/solution explorer/agent/mockup-03-paper-console.html +0 -510
- package/examples/solution explorer/agent/mockup-04-neon-noir.html +0 -546
- package/examples/solution explorer/agent/mockup-05-zen-garden.html +0 -534
- package/examples/solution explorer/dist/power-apps-data.js +0 -3007
- package/scripts/build-power-sdk.mjs +0 -69
- /package/{examples/kanban → codeApp}/src/generated/models/Office365GroupsModel.ts +0 -0
- /package/{examples/kanban → codeApp}/src/generated/models/Office365OutlookModel.ts +0 -0
- /package/{examples/kanban → codeApp}/src/generated/models/Office365UsersModel.ts +0 -0
- /package/{examples/kanban → codeApp}/src/generated/services/Office365GroupsService.ts +0 -0
- /package/{examples/kanban → codeApp}/src/generated/services/Office365OutlookService.ts +0 -0
- /package/{examples/kanban → codeApp}/src/generated/services/Office365UsersService.ts +0 -0
- /package/{dev files → examples/apps/kanban/dist}/environmentVar.js +0 -0
- /package/examples/{outlook Demo2 → apps/kanban}/src/generated/index.ts +0 -0
- /package/examples/{outlook Demo2 → apps/kanban}/src/generated/models/Office365GroupsModel.ts +0 -0
- /package/examples/{outlook Demo2 → apps/kanban}/src/generated/models/Office365OutlookModel.ts +0 -0
- /package/examples/{outlook Demo2 → apps/kanban}/src/generated/models/Office365UsersModel.ts +0 -0
- /package/examples/{outlook Demo2 → apps/kanban}/src/generated/services/Office365GroupsService.ts +0 -0
- /package/examples/{outlook Demo2 → apps/kanban}/src/generated/services/Office365OutlookService.ts +0 -0
- /package/examples/{outlook Demo2 → apps/kanban}/src/generated/services/Office365UsersService.ts +0 -0
- /package/examples/{planning Poker → apps/planning Poker}/additional files/AgilePoker_1_0_0_1.zip +0 -0
- /package/examples/{planning Poker → apps/planning Poker}/additional files/PokerTables_1_0_0_1.zip +0 -0
- /package/examples/{outlook Demo2 → apps/solution explorer}/dist/icon-512.png +0 -0
- /package/examples/{outlook Demo2 → apps/solution explorer}/dist/power-apps-data.js +0 -0
- /package/examples/{todo → apps/todo}/dist/icon192.png +0 -0
- /package/examples/{solution explorer → combined demo}/dist/icon-512.png +0 -0
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
# Agent Decision Log
|
|
2
|
-
|
|
3
|
-
Keep this file short. Record only durable decisions, constraints, and follow-ups that should survive a new session.
|
|
4
|
-
|
|
5
|
-
- Built a local-storage kanban board in dist with drag-and-drop across backlog, ready, inprogress, complete, and rejected.
|
|
6
|
-
- Added 5 distinct visual mockups in agent/ for concept selection before further refinement.
|
|
7
|
-
- User selected the Paper Grid mockup as the live app visual direction.
|
|
8
|
-
- Kanban tasks now persist in Dataverse task records; board-specific metadata is stored in the task category field.
|
|
9
|
-
- Microsoft 365 profile photo 404s are treated as external missing-photo noise unless the app explicitly renders user photos.
|
|
@@ -1,159 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
<!DOCTYPE html>
|
|
3
|
-
<html lang="en">
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>Mockup 01 — Editorial Glass</title>
|
|
8
|
-
<style>
|
|
9
|
-
:root {
|
|
10
|
-
--bg: #f3f0ea;
|
|
11
|
-
--panel: rgba(255,255,255,0.72);
|
|
12
|
-
--line: rgba(23,30,44,0.12);
|
|
13
|
-
--text: #1a2233;
|
|
14
|
-
--muted: #667085;
|
|
15
|
-
--accent: #2b59ff;
|
|
16
|
-
--accent-soft: rgba(43,89,255,0.12);
|
|
17
|
-
--shadow: 0 22px 50px rgba(26,34,51,0.12);
|
|
18
|
-
}
|
|
19
|
-
* { box-sizing: border-box; }
|
|
20
|
-
body {
|
|
21
|
-
margin: 0;
|
|
22
|
-
min-height: 100vh;
|
|
23
|
-
font-family: Georgia, "Times New Roman", serif;
|
|
24
|
-
color: var(--text);
|
|
25
|
-
background:
|
|
26
|
-
radial-gradient(circle at top left, rgba(43,89,255,0.12), transparent 30%),
|
|
27
|
-
radial-gradient(circle at bottom right, rgba(16,185,129,0.14), transparent 24%),
|
|
28
|
-
var(--bg);
|
|
29
|
-
padding: 32px;
|
|
30
|
-
}
|
|
31
|
-
.frame {
|
|
32
|
-
max-width: 1460px;
|
|
33
|
-
margin: 0 auto;
|
|
34
|
-
border: 1px solid var(--line);
|
|
35
|
-
background: rgba(255,255,255,0.46);
|
|
36
|
-
backdrop-filter: blur(16px);
|
|
37
|
-
box-shadow: var(--shadow);
|
|
38
|
-
border-radius: 28px;
|
|
39
|
-
overflow: hidden;
|
|
40
|
-
}
|
|
41
|
-
.hero {
|
|
42
|
-
display: grid;
|
|
43
|
-
grid-template-columns: 1.5fr 1fr;
|
|
44
|
-
gap: 24px;
|
|
45
|
-
padding: 36px;
|
|
46
|
-
border-bottom: 1px solid var(--line);
|
|
47
|
-
}
|
|
48
|
-
.hero h1 {
|
|
49
|
-
font-size: 4rem;
|
|
50
|
-
line-height: 0.92;
|
|
51
|
-
margin: 0 0 14px;
|
|
52
|
-
font-weight: 600;
|
|
53
|
-
letter-spacing: -0.05em;
|
|
54
|
-
}
|
|
55
|
-
.hero p {
|
|
56
|
-
margin: 0;
|
|
57
|
-
max-width: 620px;
|
|
58
|
-
color: var(--muted);
|
|
59
|
-
font-family: "Trebuchet MS", sans-serif;
|
|
60
|
-
font-size: 1rem;
|
|
61
|
-
line-height: 1.7;
|
|
62
|
-
}
|
|
63
|
-
.stats {
|
|
64
|
-
display: grid;
|
|
65
|
-
grid-template-columns: repeat(2, 1fr);
|
|
66
|
-
gap: 14px;
|
|
67
|
-
}
|
|
68
|
-
.stat {
|
|
69
|
-
background: var(--panel);
|
|
70
|
-
border: 1px solid var(--line);
|
|
71
|
-
border-radius: 20px;
|
|
72
|
-
padding: 18px;
|
|
73
|
-
}
|
|
74
|
-
.stat b {
|
|
75
|
-
display: block;
|
|
76
|
-
font-size: 2rem;
|
|
77
|
-
margin-bottom: 6px;
|
|
78
|
-
}
|
|
79
|
-
.board {
|
|
80
|
-
display: grid;
|
|
81
|
-
grid-template-columns: repeat(5, minmax(220px, 1fr));
|
|
82
|
-
gap: 18px;
|
|
83
|
-
padding: 24px;
|
|
84
|
-
}
|
|
85
|
-
.lane {
|
|
86
|
-
min-height: 520px;
|
|
87
|
-
background: var(--panel);
|
|
88
|
-
border: 1px solid var(--line);
|
|
89
|
-
border-radius: 22px;
|
|
90
|
-
padding: 16px;
|
|
91
|
-
}
|
|
92
|
-
.lane h2 {
|
|
93
|
-
margin: 0 0 14px;
|
|
94
|
-
font-size: 0.84rem;
|
|
95
|
-
letter-spacing: 0.18em;
|
|
96
|
-
text-transform: uppercase;
|
|
97
|
-
font-family: "Trebuchet MS", sans-serif;
|
|
98
|
-
}
|
|
99
|
-
.card {
|
|
100
|
-
background: white;
|
|
101
|
-
border: 1px solid var(--line);
|
|
102
|
-
border-radius: 18px;
|
|
103
|
-
padding: 16px;
|
|
104
|
-
margin-bottom: 14px;
|
|
105
|
-
}
|
|
106
|
-
.eyebrow {
|
|
107
|
-
display: inline-block;
|
|
108
|
-
padding: 6px 10px;
|
|
109
|
-
border-radius: 999px;
|
|
110
|
-
background: var(--accent-soft);
|
|
111
|
-
color: var(--accent);
|
|
112
|
-
font-size: 0.72rem;
|
|
113
|
-
letter-spacing: 0.08em;
|
|
114
|
-
text-transform: uppercase;
|
|
115
|
-
font-family: "Trebuchet MS", sans-serif;
|
|
116
|
-
margin-bottom: 10px;
|
|
117
|
-
}
|
|
118
|
-
.card h3 {
|
|
119
|
-
margin: 0 0 8px;
|
|
120
|
-
font-size: 1.1rem;
|
|
121
|
-
}
|
|
122
|
-
.meta {
|
|
123
|
-
display: flex;
|
|
124
|
-
flex-wrap: wrap;
|
|
125
|
-
gap: 8px;
|
|
126
|
-
color: var(--muted);
|
|
127
|
-
font-family: "Trebuchet MS", sans-serif;
|
|
128
|
-
font-size: 0.8rem;
|
|
129
|
-
}
|
|
130
|
-
</style>
|
|
131
|
-
</head>
|
|
132
|
-
<body>
|
|
133
|
-
<div class="frame">
|
|
134
|
-
<section class="hero">
|
|
135
|
-
<div>
|
|
136
|
-
<h1>Work, arranged with calm precision.</h1>
|
|
137
|
-
<p>An editorial board with translucent lanes, soft contrast, and serif-led hierarchy. The mood is premium, quiet, and highly legible.</p>
|
|
138
|
-
</div>
|
|
139
|
-
<div class="stats">
|
|
140
|
-
<div class="stat"><b>18</b><span>Open tasks</span></div>
|
|
141
|
-
<div class="stat"><b>7</b><span>In progress</span></div>
|
|
142
|
-
<div class="stat"><b>92%</b><span>Weekly focus score</span></div>
|
|
143
|
-
<div class="stat"><b>4</b><span>Blocked items</span></div>
|
|
144
|
-
</div>
|
|
145
|
-
</section>
|
|
146
|
-
<section class="board">
|
|
147
|
-
<div class="lane">
|
|
148
|
-
<h2>Backlog</h2>
|
|
149
|
-
<div class="card"><div class="eyebrow">Research</div><h3>Audit account handoff flow</h3><div class="meta"><span>P1</span><span>Due Thu</span><span>Owner: Alex</span></div></div>
|
|
150
|
-
<div class="card"><div class="eyebrow">Ops</div><h3>Define monthly review agenda</h3><div class="meta"><span>P3</span><span>3 subtasks</span></div></div>
|
|
151
|
-
</div>
|
|
152
|
-
<div class="lane"><h2>Ready</h2><div class="card"><div class="eyebrow">Design</div><h3>Prepare dashboard empty state</h3><div class="meta"><span>P2</span><span>8 pts</span></div></div></div>
|
|
153
|
-
<div class="lane"><h2>In Progress</h2><div class="card"><div class="eyebrow">Build</div><h3>Implement drag and drop sorting</h3><div class="meta"><span>P1</span><span>Today</span><span>UI</span></div></div></div>
|
|
154
|
-
<div class="lane"><h2>Complete</h2><div class="card"><div class="eyebrow">Done</div><h3>Ship weekly status summary</h3><div class="meta"><span>Approved</span></div></div></div>
|
|
155
|
-
<div class="lane"><h2>Rejected</h2><div class="card"><div class="eyebrow">Archive</div><h3>Remove time estimate field</h3><div class="meta"><span>No value</span></div></div></div>
|
|
156
|
-
</section>
|
|
157
|
-
</div>
|
|
158
|
-
</body>
|
|
159
|
-
</html>
|
|
@@ -1,147 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
<!DOCTYPE html>
|
|
3
|
-
<html lang="en">
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>Mockup 02 — Dark Rail</title>
|
|
8
|
-
<style>
|
|
9
|
-
:root {
|
|
10
|
-
--bg: #0d1117;
|
|
11
|
-
--panel: #121923;
|
|
12
|
-
--card: #18212d;
|
|
13
|
-
--line: rgba(201,210,224,0.1);
|
|
14
|
-
--text: #f5f7fb;
|
|
15
|
-
--muted: #8ea0b7;
|
|
16
|
-
--cyan: #59d9ff;
|
|
17
|
-
--lime: #b7ff72;
|
|
18
|
-
--rose: #ff7f9f;
|
|
19
|
-
}
|
|
20
|
-
* { box-sizing: border-box; }
|
|
21
|
-
body {
|
|
22
|
-
margin: 0;
|
|
23
|
-
min-height: 100vh;
|
|
24
|
-
font-family: "Segoe UI", sans-serif;
|
|
25
|
-
background:
|
|
26
|
-
linear-gradient(180deg, rgba(89,217,255,0.06), transparent 22%),
|
|
27
|
-
linear-gradient(90deg, rgba(183,255,114,0.05), transparent 30%),
|
|
28
|
-
var(--bg);
|
|
29
|
-
color: var(--text);
|
|
30
|
-
padding: 24px;
|
|
31
|
-
}
|
|
32
|
-
.shell {
|
|
33
|
-
max-width: 1500px;
|
|
34
|
-
margin: 0 auto;
|
|
35
|
-
border: 1px solid var(--line);
|
|
36
|
-
border-radius: 28px;
|
|
37
|
-
overflow: hidden;
|
|
38
|
-
background: rgba(9,13,19,0.68);
|
|
39
|
-
}
|
|
40
|
-
.header {
|
|
41
|
-
display: flex;
|
|
42
|
-
justify-content: space-between;
|
|
43
|
-
align-items: end;
|
|
44
|
-
gap: 16px;
|
|
45
|
-
padding: 28px;
|
|
46
|
-
border-bottom: 1px solid var(--line);
|
|
47
|
-
}
|
|
48
|
-
.header h1 {
|
|
49
|
-
margin: 0;
|
|
50
|
-
font-size: 2.9rem;
|
|
51
|
-
letter-spacing: -0.04em;
|
|
52
|
-
}
|
|
53
|
-
.chips {
|
|
54
|
-
display: flex;
|
|
55
|
-
gap: 10px;
|
|
56
|
-
flex-wrap: wrap;
|
|
57
|
-
}
|
|
58
|
-
.chip {
|
|
59
|
-
padding: 10px 14px;
|
|
60
|
-
border-radius: 999px;
|
|
61
|
-
border: 1px solid var(--line);
|
|
62
|
-
color: var(--muted);
|
|
63
|
-
background: rgba(255,255,255,0.02);
|
|
64
|
-
}
|
|
65
|
-
.board {
|
|
66
|
-
display: grid;
|
|
67
|
-
grid-template-columns: repeat(5, minmax(220px, 1fr));
|
|
68
|
-
gap: 16px;
|
|
69
|
-
padding: 20px;
|
|
70
|
-
}
|
|
71
|
-
.lane {
|
|
72
|
-
background: var(--panel);
|
|
73
|
-
border: 1px solid var(--line);
|
|
74
|
-
border-radius: 20px;
|
|
75
|
-
min-height: 560px;
|
|
76
|
-
padding: 14px;
|
|
77
|
-
position: relative;
|
|
78
|
-
overflow: hidden;
|
|
79
|
-
}
|
|
80
|
-
.lane::before {
|
|
81
|
-
content: "";
|
|
82
|
-
position: absolute;
|
|
83
|
-
inset: 0 auto 0 0;
|
|
84
|
-
width: 4px;
|
|
85
|
-
background: linear-gradient(180deg, var(--cyan), transparent 80%);
|
|
86
|
-
}
|
|
87
|
-
.lane h2 {
|
|
88
|
-
margin: 0 0 14px;
|
|
89
|
-
font-size: 0.82rem;
|
|
90
|
-
letter-spacing: 0.16em;
|
|
91
|
-
text-transform: uppercase;
|
|
92
|
-
color: var(--muted);
|
|
93
|
-
}
|
|
94
|
-
.card {
|
|
95
|
-
background: var(--card);
|
|
96
|
-
border: 1px solid var(--line);
|
|
97
|
-
border-radius: 18px;
|
|
98
|
-
padding: 16px;
|
|
99
|
-
margin-bottom: 14px;
|
|
100
|
-
box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
|
|
101
|
-
}
|
|
102
|
-
.card h3 { margin: 0 0 8px; font-size: 1rem; }
|
|
103
|
-
.meter {
|
|
104
|
-
height: 6px;
|
|
105
|
-
border-radius: 999px;
|
|
106
|
-
background: rgba(255,255,255,0.06);
|
|
107
|
-
overflow: hidden;
|
|
108
|
-
margin: 12px 0;
|
|
109
|
-
}
|
|
110
|
-
.meter span {
|
|
111
|
-
display: block;
|
|
112
|
-
height: 100%;
|
|
113
|
-
width: 64%;
|
|
114
|
-
background: linear-gradient(90deg, var(--cyan), var(--lime));
|
|
115
|
-
}
|
|
116
|
-
.meta {
|
|
117
|
-
display: flex;
|
|
118
|
-
justify-content: space-between;
|
|
119
|
-
gap: 10px;
|
|
120
|
-
color: var(--muted);
|
|
121
|
-
font-size: 0.78rem;
|
|
122
|
-
}
|
|
123
|
-
</style>
|
|
124
|
-
</head>
|
|
125
|
-
<body>
|
|
126
|
-
<div class="shell">
|
|
127
|
-
<div class="header">
|
|
128
|
-
<div>
|
|
129
|
-
<h1>Dark Rail</h1>
|
|
130
|
-
<div class="chips">
|
|
131
|
-
<div class="chip">Precision workflow</div>
|
|
132
|
-
<div class="chip">Keyboard-friendly</div>
|
|
133
|
-
<div class="chip">Low-glare focus</div>
|
|
134
|
-
</div>
|
|
135
|
-
</div>
|
|
136
|
-
<div class="chip">Minimal / technical / contrast-led</div>
|
|
137
|
-
</div>
|
|
138
|
-
<section class="board">
|
|
139
|
-
<div class="lane"><h2>Backlog</h2><div class="card"><h3>Refactor reporting filters</h3><div class="meter"><span></span></div><div class="meta"><span>P1</span><span>12 pts</span></div></div></div>
|
|
140
|
-
<div class="lane"><h2>Ready</h2><div class="card"><h3>Finalize launch checklist</h3><div class="meter"><span style="width:42%"></span></div><div class="meta"><span>P2</span><span>Tomorrow</span></div></div></div>
|
|
141
|
-
<div class="lane"><h2>In Progress</h2><div class="card"><h3>Build workload insights panel</h3><div class="meter"><span style="width:76%"></span></div><div class="meta"><span>Owner: Sam</span><span>4 subtasks</span></div></div></div>
|
|
142
|
-
<div class="lane"><h2>Complete</h2><div class="card"><h3>Publish sprint review notes</h3><div class="meter"><span style="width:100%"></span></div><div class="meta"><span>Done</span><span>Approved</span></div></div></div>
|
|
143
|
-
<div class="lane"><h2>Rejected</h2><div class="card"><h3>Add duplicate analytics tab</h3><div class="meter"><span style="width:10%; background: var(--rose);"></span></div><div class="meta"><span>Declined</span><span>Low impact</span></div></div></div>
|
|
144
|
-
</section>
|
|
145
|
-
</div>
|
|
146
|
-
</body>
|
|
147
|
-
</html>
|
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
<!DOCTYPE html>
|
|
3
|
-
<html lang="en">
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>Mockup 03 — Paper Grid</title>
|
|
8
|
-
<style>
|
|
9
|
-
:root {
|
|
10
|
-
--bg: #faf7f2;
|
|
11
|
-
--text: #231f20;
|
|
12
|
-
--muted: #726a6b;
|
|
13
|
-
--line: #d9d1c4;
|
|
14
|
-
--card: #fffdf8;
|
|
15
|
-
--yellow: #ffdc78;
|
|
16
|
-
--sage: #bfd3c1;
|
|
17
|
-
--ink: #2f4f4f;
|
|
18
|
-
--clay: #d89a7e;
|
|
19
|
-
}
|
|
20
|
-
* { box-sizing: border-box; }
|
|
21
|
-
body {
|
|
22
|
-
margin: 0;
|
|
23
|
-
min-height: 100vh;
|
|
24
|
-
font-family: "Palatino Linotype", serif;
|
|
25
|
-
color: var(--text);
|
|
26
|
-
background:
|
|
27
|
-
linear-gradient(var(--line) 1px, transparent 1px),
|
|
28
|
-
linear-gradient(90deg, var(--line) 1px, transparent 1px),
|
|
29
|
-
var(--bg);
|
|
30
|
-
background-size: 26px 26px;
|
|
31
|
-
padding: 28px;
|
|
32
|
-
}
|
|
33
|
-
.top {
|
|
34
|
-
max-width: 1480px;
|
|
35
|
-
margin: 0 auto 20px;
|
|
36
|
-
display: flex;
|
|
37
|
-
justify-content: space-between;
|
|
38
|
-
align-items: end;
|
|
39
|
-
gap: 18px;
|
|
40
|
-
}
|
|
41
|
-
.title h1 {
|
|
42
|
-
margin: 0 0 8px;
|
|
43
|
-
font-size: 3.4rem;
|
|
44
|
-
letter-spacing: -0.05em;
|
|
45
|
-
}
|
|
46
|
-
.title p {
|
|
47
|
-
margin: 0;
|
|
48
|
-
color: var(--muted);
|
|
49
|
-
font-family: "Segoe UI", sans-serif;
|
|
50
|
-
}
|
|
51
|
-
.note {
|
|
52
|
-
background: var(--yellow);
|
|
53
|
-
padding: 14px 18px;
|
|
54
|
-
border: 1px solid rgba(35,31,32,0.12);
|
|
55
|
-
box-shadow: 6px 6px 0 rgba(35,31,32,0.08);
|
|
56
|
-
transform: rotate(-2deg);
|
|
57
|
-
}
|
|
58
|
-
.board {
|
|
59
|
-
max-width: 1480px;
|
|
60
|
-
margin: 0 auto;
|
|
61
|
-
display: grid;
|
|
62
|
-
grid-template-columns: repeat(5, minmax(220px, 1fr));
|
|
63
|
-
gap: 16px;
|
|
64
|
-
}
|
|
65
|
-
.lane {
|
|
66
|
-
background: rgba(255,253,248,0.88);
|
|
67
|
-
border: 1px solid var(--line);
|
|
68
|
-
min-height: 540px;
|
|
69
|
-
padding: 14px;
|
|
70
|
-
}
|
|
71
|
-
.lane h2 {
|
|
72
|
-
margin: 0 0 14px;
|
|
73
|
-
font-size: 0.82rem;
|
|
74
|
-
letter-spacing: 0.14em;
|
|
75
|
-
text-transform: uppercase;
|
|
76
|
-
font-family: "Segoe UI", sans-serif;
|
|
77
|
-
}
|
|
78
|
-
.card {
|
|
79
|
-
background: var(--card);
|
|
80
|
-
border: 1px solid var(--line);
|
|
81
|
-
padding: 14px;
|
|
82
|
-
margin-bottom: 12px;
|
|
83
|
-
border-left: 6px solid var(--ink);
|
|
84
|
-
}
|
|
85
|
-
.card.sage { border-left-color: var(--sage); }
|
|
86
|
-
.card.clay { border-left-color: var(--clay); }
|
|
87
|
-
.card h3 { margin: 0 0 8px; font-size: 1.02rem; }
|
|
88
|
-
.meta {
|
|
89
|
-
color: var(--muted);
|
|
90
|
-
font-family: "Segoe UI", sans-serif;
|
|
91
|
-
font-size: 0.8rem;
|
|
92
|
-
display: flex;
|
|
93
|
-
gap: 10px;
|
|
94
|
-
flex-wrap: wrap;
|
|
95
|
-
}
|
|
96
|
-
</style>
|
|
97
|
-
</head>
|
|
98
|
-
<body>
|
|
99
|
-
<div class="top">
|
|
100
|
-
<div class="title">
|
|
101
|
-
<h1>Paper Grid</h1>
|
|
102
|
-
<p>Warm, tactile, and notebook-like. Minimal, but less corporate.</p>
|
|
103
|
-
</div>
|
|
104
|
-
<div class="note">Best for calm personal planning.</div>
|
|
105
|
-
</div>
|
|
106
|
-
<section class="board">
|
|
107
|
-
<div class="lane"><h2>Backlog</h2><div class="card"><h3>Prepare Q3 capacity notes</h3><div class="meta"><span>P2</span><span>Notes</span></div></div></div>
|
|
108
|
-
<div class="lane"><h2>Ready</h2><div class="card sage"><h3>Clarify reporting metric owners</h3><div class="meta"><span>Ready</span><span>2 blockers cleared</span></div></div></div>
|
|
109
|
-
<div class="lane"><h2>In Progress</h2><div class="card clay"><h3>Review support trend themes</h3><div class="meta"><span>Today</span><span>4/6 done</span></div></div></div>
|
|
110
|
-
<div class="lane"><h2>Complete</h2><div class="card sage"><h3>Publish roadmap note</h3><div class="meta"><span>Complete</span></div></div></div>
|
|
111
|
-
<div class="lane"><h2>Rejected</h2><div class="card"><h3>Re-open retired intake form</h3><div class="meta"><span>Archived</span></div></div></div>
|
|
112
|
-
</section>
|
|
113
|
-
</body>
|
|
114
|
-
</html>
|
|
@@ -1,141 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
<!DOCTYPE html>
|
|
3
|
-
<html lang="en">
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>Mockup 04 — Neon Minimal</title>
|
|
8
|
-
<style>
|
|
9
|
-
:root {
|
|
10
|
-
--bg: #f6f8fb;
|
|
11
|
-
--text: #111827;
|
|
12
|
-
--muted: #667085;
|
|
13
|
-
--line: #dde3ec;
|
|
14
|
-
--card: #ffffff;
|
|
15
|
-
--electric: #7856ff;
|
|
16
|
-
--mint: #28d8a1;
|
|
17
|
-
--amber: #ffb648;
|
|
18
|
-
--rose: #ff6a88;
|
|
19
|
-
}
|
|
20
|
-
* { box-sizing: border-box; }
|
|
21
|
-
body {
|
|
22
|
-
margin: 0;
|
|
23
|
-
min-height: 100vh;
|
|
24
|
-
font-family: "Segoe UI", sans-serif;
|
|
25
|
-
background:
|
|
26
|
-
radial-gradient(circle at 10% 10%, rgba(120,86,255,0.12), transparent 24%),
|
|
27
|
-
radial-gradient(circle at 80% 20%, rgba(40,216,161,0.12), transparent 24%),
|
|
28
|
-
radial-gradient(circle at 60% 90%, rgba(255,106,136,0.10), transparent 18%),
|
|
29
|
-
var(--bg);
|
|
30
|
-
color: var(--text);
|
|
31
|
-
padding: 24px;
|
|
32
|
-
}
|
|
33
|
-
.wrap {
|
|
34
|
-
max-width: 1480px;
|
|
35
|
-
margin: 0 auto;
|
|
36
|
-
}
|
|
37
|
-
.header {
|
|
38
|
-
display: grid;
|
|
39
|
-
grid-template-columns: 1.2fr 1fr;
|
|
40
|
-
gap: 20px;
|
|
41
|
-
margin-bottom: 18px;
|
|
42
|
-
}
|
|
43
|
-
.headline, .focus {
|
|
44
|
-
background: rgba(255,255,255,0.74);
|
|
45
|
-
border: 1px solid var(--line);
|
|
46
|
-
border-radius: 24px;
|
|
47
|
-
padding: 24px;
|
|
48
|
-
backdrop-filter: blur(10px);
|
|
49
|
-
}
|
|
50
|
-
.headline h1 {
|
|
51
|
-
margin: 0 0 10px;
|
|
52
|
-
font-size: 3rem;
|
|
53
|
-
line-height: 0.95;
|
|
54
|
-
letter-spacing: -0.05em;
|
|
55
|
-
}
|
|
56
|
-
.focus-grid {
|
|
57
|
-
display: grid;
|
|
58
|
-
grid-template-columns: repeat(3, 1fr);
|
|
59
|
-
gap: 10px;
|
|
60
|
-
}
|
|
61
|
-
.focus-grid div {
|
|
62
|
-
background: white;
|
|
63
|
-
border-radius: 18px;
|
|
64
|
-
padding: 16px;
|
|
65
|
-
border: 1px solid var(--line);
|
|
66
|
-
}
|
|
67
|
-
.focus-grid b { font-size: 1.7rem; display: block; }
|
|
68
|
-
.board {
|
|
69
|
-
display: grid;
|
|
70
|
-
grid-template-columns: repeat(5, minmax(220px, 1fr));
|
|
71
|
-
gap: 16px;
|
|
72
|
-
}
|
|
73
|
-
.lane {
|
|
74
|
-
background: rgba(255,255,255,0.7);
|
|
75
|
-
border: 1px solid var(--line);
|
|
76
|
-
border-radius: 22px;
|
|
77
|
-
min-height: 540px;
|
|
78
|
-
padding: 14px;
|
|
79
|
-
backdrop-filter: blur(10px);
|
|
80
|
-
}
|
|
81
|
-
.lane h2 {
|
|
82
|
-
margin: 0 0 12px;
|
|
83
|
-
font-size: 0.82rem;
|
|
84
|
-
text-transform: uppercase;
|
|
85
|
-
letter-spacing: 0.14em;
|
|
86
|
-
color: var(--muted);
|
|
87
|
-
}
|
|
88
|
-
.card {
|
|
89
|
-
background: var(--card);
|
|
90
|
-
border: 1px solid var(--line);
|
|
91
|
-
border-radius: 18px;
|
|
92
|
-
padding: 16px;
|
|
93
|
-
margin-bottom: 12px;
|
|
94
|
-
box-shadow: 0 14px 28px rgba(17,24,39,0.05);
|
|
95
|
-
}
|
|
96
|
-
.tag {
|
|
97
|
-
display: inline-block;
|
|
98
|
-
padding: 6px 10px;
|
|
99
|
-
border-radius: 999px;
|
|
100
|
-
font-size: 0.72rem;
|
|
101
|
-
font-weight: 600;
|
|
102
|
-
margin-bottom: 10px;
|
|
103
|
-
}
|
|
104
|
-
.purple { background: rgba(120,86,255,0.12); color: var(--electric); }
|
|
105
|
-
.green { background: rgba(40,216,161,0.12); color: #0f9b73; }
|
|
106
|
-
.orange { background: rgba(255,182,72,0.16); color: #b96900; }
|
|
107
|
-
.pink { background: rgba(255,106,136,0.12); color: #d52d61; }
|
|
108
|
-
.meta {
|
|
109
|
-
display: flex;
|
|
110
|
-
gap: 8px;
|
|
111
|
-
flex-wrap: wrap;
|
|
112
|
-
color: var(--muted);
|
|
113
|
-
font-size: 0.8rem;
|
|
114
|
-
}
|
|
115
|
-
</style>
|
|
116
|
-
</head>
|
|
117
|
-
<body>
|
|
118
|
-
<div class="wrap">
|
|
119
|
-
<div class="header">
|
|
120
|
-
<div class="headline">
|
|
121
|
-
<h1>Neon Minimal</h1>
|
|
122
|
-
<p>Soft glass cards with controlled electric accents. Clean, energetic, and product-like.</p>
|
|
123
|
-
</div>
|
|
124
|
-
<div class="focus">
|
|
125
|
-
<div class="focus-grid">
|
|
126
|
-
<div><b>14</b><span>Open</span></div>
|
|
127
|
-
<div><b>5</b><span>Active</span></div>
|
|
128
|
-
<div><b>2</b><span>Blocked</span></div>
|
|
129
|
-
</div>
|
|
130
|
-
</div>
|
|
131
|
-
</div>
|
|
132
|
-
<div class="board">
|
|
133
|
-
<div class="lane"><h2>Backlog</h2><div class="card"><div class="tag purple">Strategy</div><strong>Draft next quarter objectives</strong><div class="meta"><span>P1</span><span>Fri</span></div></div></div>
|
|
134
|
-
<div class="lane"><h2>Ready</h2><div class="card"><div class="tag green">Ready</div><strong>Polish status digest layout</strong><div class="meta"><span>6 pts</span><span>Owner: Priya</span></div></div></div>
|
|
135
|
-
<div class="lane"><h2>In Progress</h2><div class="card"><div class="tag orange">Building</div><strong>Create weekly workload chart</strong><div class="meta"><span>3/5 subtasks</span></div></div></div>
|
|
136
|
-
<div class="lane"><h2>Complete</h2><div class="card"><div class="tag green">Done</div><strong>Send retro summary</strong><div class="meta"><span>Approved</span></div></div></div>
|
|
137
|
-
<div class="lane"><h2>Rejected</h2><div class="card"><div class="tag pink">Stopped</div><strong>Duplicate dashboard card</strong><div class="meta"><span>No longer needed</span></div></div></div>
|
|
138
|
-
</div>
|
|
139
|
-
</div>
|
|
140
|
-
</body>
|
|
141
|
-
</html>
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
<!DOCTYPE html>
|
|
3
|
-
<html lang="en">
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>Mockup 05 — Mono Architect</title>
|
|
8
|
-
<style>
|
|
9
|
-
:root {
|
|
10
|
-
--bg: #fcfcfa;
|
|
11
|
-
--text: #101010;
|
|
12
|
-
--muted: #6f6f6a;
|
|
13
|
-
--line: #d9d9d1;
|
|
14
|
-
--card: #ffffff;
|
|
15
|
-
--black: #171717;
|
|
16
|
-
}
|
|
17
|
-
* { box-sizing: border-box; }
|
|
18
|
-
body {
|
|
19
|
-
margin: 0;
|
|
20
|
-
min-height: 100vh;
|
|
21
|
-
font-family: Consolas, "Courier New", monospace;
|
|
22
|
-
color: var(--text);
|
|
23
|
-
background: var(--bg);
|
|
24
|
-
padding: 20px;
|
|
25
|
-
}
|
|
26
|
-
.layout {
|
|
27
|
-
max-width: 1480px;
|
|
28
|
-
margin: 0 auto;
|
|
29
|
-
border: 2px solid var(--black);
|
|
30
|
-
background: white;
|
|
31
|
-
}
|
|
32
|
-
.top {
|
|
33
|
-
padding: 24px;
|
|
34
|
-
border-bottom: 2px solid var(--black);
|
|
35
|
-
display: flex;
|
|
36
|
-
justify-content: space-between;
|
|
37
|
-
gap: 16px;
|
|
38
|
-
align-items: end;
|
|
39
|
-
}
|
|
40
|
-
.top h1 {
|
|
41
|
-
margin: 0;
|
|
42
|
-
font-size: 2.6rem;
|
|
43
|
-
letter-spacing: -0.06em;
|
|
44
|
-
}
|
|
45
|
-
.top p {
|
|
46
|
-
margin: 8px 0 0;
|
|
47
|
-
color: var(--muted);
|
|
48
|
-
max-width: 680px;
|
|
49
|
-
line-height: 1.6;
|
|
50
|
-
}
|
|
51
|
-
.legend {
|
|
52
|
-
min-width: 280px;
|
|
53
|
-
display: grid;
|
|
54
|
-
grid-template-columns: repeat(2, 1fr);
|
|
55
|
-
gap: 8px;
|
|
56
|
-
}
|
|
57
|
-
.legend div {
|
|
58
|
-
border: 1px solid var(--black);
|
|
59
|
-
padding: 12px;
|
|
60
|
-
}
|
|
61
|
-
.board {
|
|
62
|
-
display: grid;
|
|
63
|
-
grid-template-columns: repeat(5, minmax(220px, 1fr));
|
|
64
|
-
}
|
|
65
|
-
.lane {
|
|
66
|
-
min-height: 580px;
|
|
67
|
-
border-right: 1px solid var(--black);
|
|
68
|
-
padding: 14px;
|
|
69
|
-
}
|
|
70
|
-
.lane:last-child { border-right: 0; }
|
|
71
|
-
.lane h2 {
|
|
72
|
-
margin: 0 0 16px;
|
|
73
|
-
font-size: 0.84rem;
|
|
74
|
-
text-transform: uppercase;
|
|
75
|
-
letter-spacing: 0.14em;
|
|
76
|
-
}
|
|
77
|
-
.card {
|
|
78
|
-
border: 1px solid var(--black);
|
|
79
|
-
background: var(--card);
|
|
80
|
-
padding: 14px;
|
|
81
|
-
margin-bottom: 12px;
|
|
82
|
-
}
|
|
83
|
-
.card h3 {
|
|
84
|
-
margin: 0 0 8px;
|
|
85
|
-
font-size: 0.98rem;
|
|
86
|
-
line-height: 1.4;
|
|
87
|
-
}
|
|
88
|
-
.meta {
|
|
89
|
-
color: var(--muted);
|
|
90
|
-
font-size: 0.76rem;
|
|
91
|
-
display: grid;
|
|
92
|
-
gap: 4px;
|
|
93
|
-
}
|
|
94
|
-
</style>
|
|
95
|
-
</head>
|
|
96
|
-
<body>
|
|
97
|
-
<div class="layout">
|
|
98
|
-
<div class="top">
|
|
99
|
-
<div>
|
|
100
|
-
<h1>Mono Architect</h1>
|
|
101
|
-
<p>Strict grid, monochrome logic, and almost tool-like utility. Minimalism pushed toward a system diagram aesthetic.</p>
|
|
102
|
-
</div>
|
|
103
|
-
<div class="legend">
|
|
104
|
-
<div>FOCUS / HIGH</div>
|
|
105
|
-
<div>DUE / TODAY</div>
|
|
106
|
-
<div>OWNER / SELF</div>
|
|
107
|
-
<div>MODE / DEEP</div>
|
|
108
|
-
</div>
|
|
109
|
-
</div>
|
|
110
|
-
<div class="board">
|
|
111
|
-
<div class="lane"><h2>Backlog</h2><div class="card"><h3>[01] Update weekly intake logic</h3><div class="meta"><span>P1</span><span>est: 2h</span></div></div></div>
|
|
112
|
-
<div class="lane"><h2>Ready</h2><div class="card"><h3>[02] Prepare stakeholder notes</h3><div class="meta"><span>P2</span><span>due: Wed</span></div></div></div>
|
|
113
|
-
<div class="lane"><h2>Inprogress</h2><div class="card"><h3>[03] Build work tracker interactions</h3><div class="meta"><span>active</span><span>2 subtasks left</span></div></div></div>
|
|
114
|
-
<div class="lane"><h2>Complete</h2><div class="card"><h3>[04] Publish planning summary</h3><div class="meta"><span>done</span></div></div></div>
|
|
115
|
-
<div class="lane"><h2>Rejected</h2><div class="card"><h3>[05] Add duplicate report mode</h3><div class="meta"><span>rejected</span></div></div></div>
|
|
116
|
-
</div>
|
|
117
|
-
</div>
|
|
118
|
-
</body>
|
|
119
|
-
</html>
|