forked from LogicalOutcomes/konote
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdemo.html
More file actions
172 lines (162 loc) · 5.49 KB
/
Copy pathdemo.html
File metadata and controls
172 lines (162 loc) · 5.49 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>KoNote Demo Reports</title>
<style>
:root {
--kn-primary: #3176aa;
--kn-primary-dark: #245d8a;
--kn-bg: #f8f9fa;
--kn-card-bg: #ffffff;
--kn-border: #dee2e6;
--kn-text: #212529;
--kn-text-secondary: #555;
--kn-muted: #6c757d;
--kn-radius: 8px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: var(--kn-bg);
color: var(--kn-text);
line-height: 1.5;
}
.header {
background: linear-gradient(135deg, var(--kn-primary) 0%, var(--kn-primary-dark) 100%);
color: white;
padding: 2rem 2rem 1.5rem;
text-align: center;
}
.header h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: 0.25rem; }
.header p { opacity: 0.85; font-size: 0.95rem; }
.container {
max-width: 900px;
margin: 0 auto;
padding: 2rem 1.5rem;
}
.category {
margin-bottom: 2rem;
}
.category h2 {
font-size: 1.1rem;
color: var(--kn-primary-dark);
padding-bottom: 0.4rem;
border-bottom: 2px solid var(--kn-primary);
margin-bottom: 1rem;
}
.card-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.card {
background: var(--kn-card-bg);
border: 1px solid var(--kn-border);
border-radius: var(--kn-radius);
padding: 1.25rem;
text-decoration: none;
color: var(--kn-text);
transition: border-color 0.15s, box-shadow 0.15s;
display: flex;
flex-direction: column;
}
.card:hover {
border-color: var(--kn-primary);
box-shadow: 0 2px 8px rgba(49, 118, 170, 0.15);
}
.card h3 {
font-size: 1rem;
font-weight: 600;
color: var(--kn-primary);
margin-bottom: 0.4rem;
}
.card p {
font-size: 0.85rem;
color: var(--kn-text-secondary);
flex: 1;
}
.card .tag {
display: inline-block;
margin-top: 0.75rem;
padding: 0.15rem 0.5rem;
border-radius: 10px;
font-size: 0.7rem;
font-weight: 500;
align-self: flex-start;
}
.tag-funder { background: #e3f2fd; color: #1565c0; }
.tag-agency { background: #e8f5e9; color: #2e7d32; }
.tag-wireframe { background: #f3e5f5; color: #6a1b9a; }
.tag-cids { background: #fff3e0; color: #e65100; }
.footer {
text-align: center;
padding: 1.5rem;
color: var(--kn-muted);
font-size: 0.8rem;
border-top: 1px solid var(--kn-border);
margin-top: 1rem;
}
@media (max-width: 600px) {
.card-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="header">
<h1>KoNote Demo Reports</h1>
<p>Open this page before a presentation. All demo materials in one place.</p>
</div>
<div class="container">
<div class="category">
<h2>Funder Portfolio View</h2>
<div class="card-grid">
<a class="card" href="preview_funder_portfolio_dashboard.html">
<h3>Funder Portfolio Dashboard</h3>
<p>United Way looking across 32 agencies and 87 programs. Shows how CIDS enables cross-agency outcome aggregation. The "why CIDS matters" demo.</p>
<span class="tag tag-funder">Funder view</span>
</a>
<a class="card" href="preview_multi_program_report.html">
<h3>Multi-Program Outcome Report</h3>
<p>Agency-level report covering 3 programs with metrics, demographics, CIDS alignment, and achievement summaries. What an agency submits to a funder.</p>
<span class="tag tag-agency">Agency report</span>
</a>
</div>
</div>
<div class="category">
<h2>Single Program Reports</h2>
<div class="card-grid">
<a class="card" href="tasks/wireframes/funder-outcome-dashboard.html">
<h3>Program Outcome Dashboard</h3>
<p>CIDS Full Tier export for one program: theory of change, headline outcomes, counterfactual, impact risks, stakeholders, and evaluator attestation.</p>
<span class="tag tag-cids">CIDS Full Tier</span>
</a>
<a class="card" href="preview_funder_outcome_report.html">
<h3>Program Outcome Report (PDF-style)</h3>
<p>Single-program funder report with service stats, metrics table, demographics, narrative, and CIDS alignment. Print-ready format.</p>
<span class="tag tag-agency">Agency report</span>
</a>
</div>
</div>
<div class="category">
<h2>Configuration & Standards</h2>
<div class="card-grid">
<a class="card" href="tasks/wireframes/evaluation-framework-editor.html">
<h3>Evaluation Framework Editor</h3>
<p>Where agencies define their program's evaluation framework: indicators, measurement tools, targets, and CIDS code mappings.</p>
<span class="tag tag-wireframe">Wireframe</span>
</a>
<a class="card" href="tasks/wireframes/common-approach-working-document.html">
<h3>CIDS Implementation Working Document</h3>
<p>Technical overview of how KoNote implements the Common Impact Data Standard. For conversations with Common Approach.</p>
<span class="tag tag-cids">CIDS reference</span>
</a>
</div>
</div>
</div>
<div class="footer">
KoNote Demo Materials · Not for distribution · <a href="https://www.konote.ca" style="color: var(--kn-muted);">www.konote.ca</a>
</div>
</body>
</html>