copilotplus/index.html at main · mohitagrawal/copilotplus · GitHub

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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Copilot+ — Advanced Insights for Copilot Money</title>
<meta name="description" content="The missing analytics layer for Copilot Money. Interactive Sankey diagrams, YoY trends, and deep category breakdowns — 100% client-side, your data never leaves your browser.">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📊</text></svg>">
<link rel="stylesheet" href="style.css">
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/d3-sankey@0.12.3/dist/d3-sankey.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
</head>
<body>

<!-- ════════════════ UPLOAD VIEW ════════════════ -->
<div id="uploadView" class="view active">
  <div class="landing">

    <!-- ── Hero Section ── -->
    <section class="l-hero">
      <div class="l-hero-content">
        <div class="l-eyebrow">
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 1v6H2l6 8V9h6L8 1z" fill="currentColor"/></svg>
          The missing analytics layer for Copilot Money
        </div>
        <h1 class="l-title">Copilot<span>+</span></h1>
        <p class="l-subtitle">Copilot Money tracks your spending. Copilot+ lets you <em>understand</em> it — with interactive Sankey diagrams, year-over-year trend analysis, and deep category breakdowns.</p>

        <div class="l-upload-zone" id="dropZone">
          <div class="upload-zone-inner">
            <div class="l-upload-icon">
              <svg width="36" height="36" viewBox="0 0 36 36" fill="none"><path d="M18 6v16m-6-6l6-6 6 6" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 22v6a2 2 0 002 2h20a2 2 0 002-2v-6" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"/></svg>
            </div>
            <div class="l-upload-label">Drop your Copilot Money CSV export</div>
            <label class="l-upload-btn">
              Choose File
              <input type="file" id="fileInput" accept=".csv" hidden>
            </label>
          </div>
        </div>
        <div class="upload-error" id="uploadError"></div>
        <button class="l-demo-btn" id="demoBtn">or try with sample data</button>
      </div>

      <!-- Decorative Sankey preview -->
      <div class="l-hero-visual">
        <svg class="l-sankey-preview" viewBox="0 0 400 360" fill="none" aria-hidden="true">
          <path d="M40,30 C180,30 160,40 280,40" stroke="#b08d57" stroke-width="48" stroke-opacity="0.15"/>
          <path d="M40,80 C180,80 160,100 280,100" stroke="#7ab08d" stroke-width="32" stroke-opacity="0.15"/>
          <path d="M40,120 C180,120 160,150 280,150" stroke="#5e9cc7" stroke-width="24" stroke-opacity="0.15"/>
          <path d="M40,155 C180,155 160,195 280,195" stroke="#c7855e" stroke-width="22" stroke-opacity="0.15"/>
          <path d="M40,185 C180,185 160,230 280,230" stroke="#8b7ec8" stroke-width="16" stroke-opacity="0.15"/>
          <path d="M40,205 C180,205 160,260 280,260" stroke="#c75e8a" stroke-width="12" stroke-opacity="0.15"/>
          <path d="M40,220 C180,220 160,285 280,285" stroke="#6b8fa3" stroke-width="10" stroke-opacity="0.15"/>
          <path d="M40,235 C180,235 160,310 280,310" stroke="#8ec75e" stroke-width="8" stroke-opacity="0.15"/>
          <!-- Animated highlight -->
          <path class="l-sankey-glow" d="M40,80 C180,80 160,100 280,100" stroke="#7ab08d" stroke-width="32" stroke-opacity="0"/>
          <rect x="24" y="10" width="12" height="240" rx="4" fill="#e07a3a" opacity="0.6"/>
          <rect x="284" y="24" width="10" height="32" rx="3" fill="#b08d57" opacity="0.5"/>
          <rect x="284" y="88" width="10" height="24" rx="3" fill="#7ab08d" opacity="0.5"/>
          <rect x="284" y="142" width="10" height="18" rx="3" fill="#5e9cc7" opacity="0.5"/>
          <rect x="284" y="188" width="10" height="16" rx="3" fill="#c7855e" opacity="0.5"/>
          <rect x="284" y="224" width="10" height="14" rx="3" fill="#8b7ec8" opacity="0.5"/>
          <rect x="284" y="254" width="10" height="12" rx="3" fill="#c75e8a" opacity="0.5"/>
          <rect x="284" y="280" width="10" height="10" rx="3" fill="#6b8fa3" opacity="0.5"/>
          <rect x="284" y="306" width="10" height="8" rx="3" fill="#8ec75e" opacity="0.5"/>
          <!-- Labels -->
          <text x="302" y="45" fill="#5c5549" font-size="11" font-family="DM Sans">Housing</text>
          <text x="302" y="105" fill="#5c5549" font-size="11" font-family="DM Sans">Childcare</text>
          <text x="302" y="155" fill="#5c5549" font-size="11" font-family="DM Sans">Travel</text>
          <text x="302" y="200" fill="#5c5549" font-size="11" font-family="DM Sans">Food</text>
          <text x="302" y="235" fill="#5c5549" font-size="11" font-family="DM Sans">Random</text>
          <text x="302" y="264" fill="#5c5549" font-size="10" font-family="DM Sans">Shopping</text>
          <text x="302" y="289" fill="#5c5549" font-size="10" font-family="DM Sans">Transport</text>
          <text x="302" y="314" fill="#5c5549" font-size="10" font-family="DM Sans">Wellness</text>
        </svg>
      </div>
    </section>

    <!-- ── Privacy Section ── -->
    <section class="l-privacy">
      <div class="l-privacy-inner">
        <div class="l-privacy-icon">
          <svg width="28" height="28" viewBox="0 0 24 24" fill="none"><path d="M12 2L3 7v5c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-9-5z" stroke="currentColor" stroke-width="1.8"/><path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </div>
        <h2 class="l-privacy-title">Your financial data never leaves your browser.</h2>
        <p class="l-privacy-text">Copilot+ runs entirely client-side. Your CSV is parsed in JavaScript on your machine — nothing is uploaded, stored, or transmitted to any server. No cookies. No analytics. No tracking pixels.</p>
        <div class="l-trust-row">
          <div class="l-trust-item">
            <div class="l-trust-icon">
              <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><rect x="2" y="2" width="16" height="16" rx="3" stroke="currentColor" stroke-width="1.5"/><path d="M6 10h8M10 6v8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
            </div>
            <div>
              <strong>Zero backend</strong>
              <span>No servers, databases, or APIs. Pure HTML, CSS, JS.</span>
            </div>
          </div>
          <div class="l-trust-item">
            <div class="l-trust-icon">
              <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="1.5"/><path d="M10 6v4l3 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
            </div>
            <div>
              <strong>Ephemeral</strong>
              <span>Close the tab, your data is gone. Nothing persists.</span>
            </div>
          </div>
          <div class="l-trust-item">
            <div class="l-trust-icon">
              <svg width="18" height="18" viewBox="0 0 20 20" fill="none"><path d="M3 10a7 7 0 0114 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><path d="M7 14l3-4 3 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </div>
            <div>
              <strong>Open source</strong>
              <span>Read every line. <a href="https://github.com/mohitagrawal/copilotplus" target="_blank" rel="noopener">View on GitHub</a></span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- ── Features Section ── -->
    <section class="l-features">
      <div class="l-section-label">What you get</div>
      <div class="l-features-grid">
        <div class="l-feature">
          <div class="l-feature-icon-wrap"><svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M3 3v18h18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M7 16l4-6 4 3 5-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <h3>Sankey Money Flow</h3>
          <p>See exactly where your money goes — from total spend through categories into every subcategory. Click any flow to drill into individual transactions.</p>
        </div>
        <div class="l-feature">
          <div class="l-feature-icon-wrap"><svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M3 12h4l3-9 4 18 3-9h4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
          <h3>Year-over-Year Trends</h3>
          <p>Compare spending across years. Spot which categories are growing, which are shrinking, and monthly patterns overlaid across years.</p>
        </div>
        <div class="l-feature">
          <div class="l-feature-icon-wrap"><svg width="22" height="22" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/><path d="M12 3a9 9 0 015.7 15.7L12 12V3z" fill="currentColor" opacity="0.15"/></svg></div>
          <h3>Category Deep Dives</h3>
          <p>Donut charts, ranked lists, and subcategory bar breakdowns. Switch between any year to compare how your spending evolves.</p>
        </div>
        <div class="l-feature">
          <div class="l-feature-icon-wrap"><svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" stroke-width="2"/><path d="M3 10h18M9 4v16" stroke="currentColor" stroke-width="2"/></svg></div>
          <h3>Transaction Detail</h3>
          <p>Click any category or Sankey flow to see every transaction behind the number — date, merchant, and amount.</p>
        </div>
      </div>
    </section>

    <!-- ── How it works ── -->
    <section class="l-how">
      <div class="l-section-label">How it works</div>
      <div class="l-steps">
        <div class="l-step">
          <div class="l-step-num">1</div>
          <strong>Export from Copilot Money</strong>
          <p>Settings → Export your transactions</p>
        </div>
        <div class="l-step-divider"></div>
        <div class="l-step">
          <div class="l-step-num">2</div>
          <strong>Drop it here</strong>
          <p>Drag your CSV onto this page</p>
        </div>
        <div class="l-step-divider"></div>
        <div class="l-step">
          <div class="l-step-num">3</div>
          <strong>Explore your data</strong>
          <p>Dashboards render instantly</p>
        </div>
      </div>
    </section>

    <!-- ── Footer ── -->
    <footer class="l-footer">
      <div class="l-footer-inner">
        <span class="l-footer-brand">Made with ❤️ in <a href="https://claude.ai/claude-code" target="_blank" rel="noopener">Claude Code</a></span>
        <span class="l-footer-links">
          <a href="https://github.com/mohitagrawal/copilotplus" target="_blank" rel="noopener">GitHub</a>
        </span>
      </div>
      <div class="l-footer-disclaimer">Not affiliated with or endorsed by Copilot Money. This is an independent, open-source project.</div>
    </footer>
  </div>
</div>

<!-- ════════════════ DASHBOARD VIEW ════════════════ -->
<div id="dashView" class="view">
  <div class="container">
    <!-- Nav -->
    <nav id="mainNav">
      <a href="#" class="logo" onclick="showView('dashView');return false;">Copilot<span>+</span></a>
      <ul class="nav-links">
        <li><a href="#" class="active" data-tab="overview">Overview</a></li>
        <li><a href="#" data-tab="sankey">Sankey</a></li>
        <li><a href="#" data-tab="trends">Trends</a></li>
      </ul>
      <button class="new-upload-btn" id="newUploadBtn">↑ New File</button>
    </nav>

    <!-- ──── OVERVIEW TAB ──── -->
    <div id="tab-overview" class="tab-content active">
      <div class="page-header">
        <h1>Overview <span class="year-accent" id="ovTitleYear"></span></h1>
        <div class="year-selector" id="ovYearSelector"></div>
      </div>
      <div class="summary-grid" id="ovSummaryGrid"></div>
      <div class="panel">
        <div class="panel-header">
          <div class="section-title">Monthly Spending</div>
          <a href="#" class="quick-link" onclick="switchTab('sankey');return false;">View Sankey →</a>
        </div>
        <div class="chart-wrap-md"><canvas id="ovMonthlyChart"></canvas></div>
      </div>
      <div class="grid-2">
        <div class="panel">
          <div class="section-title" style="margin-bottom:1rem">Category Split</div>
          <div class="chart-wrap-md"><canvas id="ovDonutChart"></canvas></div>
        </div>
        <div class="panel">
          <div class="section-title" style="margin-bottom:0.6rem">By Category</div>
          <ul class="cat-list" id="ovCatList"></ul>
        </div>
      </div>
      <div class="panel">
        <div class="section-title" style="margin-bottom:1rem">Subcategory Breakdown</div>
        <div id="ovSubcatSection"></div>
      </div>
    </div>

    <!-- ──── SANKEY TAB ──── -->
    <div id="tab-sankey" class="tab-content">
      <div class="page-header">
        <h1>Money Flow <span class="year-accent" id="skTitleYear"></span></h1>
        <div style="display:flex;flex-direction:column;gap:0.5rem;align-items:flex-end">
          <div class="year-selector" id="skYearSelector"></div>
          <div class="year-selector" id="skMonthSelector"></div>
        </div>
      </div>
      <div class="panel">
        <div class="legend-row" id="skLegend"></div>
        <div class="sankey-container" id="skSankeyWrap"></div>
        <div class="sankey-hint"><span>Hover</span> to highlight flows · <span>Click</span> to see transactions</div>
      </div>
    </div>

    <!-- ──── TRENDS TAB ──── -->
    <div id="tab-trends" class="tab-content">
      <div class="page-header">
        <h1>Year-over-Year Trends</h1>
      </div>
      <div class="insight-cards" id="trInsights"></div>
      <div class="panel">
        <div class="section-title">Annual Spend</div>
        <div class="chart-wrap-lg"><canvas id="trAnnualChart"></canvas></div>
      </div>
      <div class="panel">
        <div class="section-title">Category Comparison by Year</div>
        <div style="overflow-x:auto"><table class="yoy-table" id="trYoyTable"></table></div>
      </div>
      <div class="panel-header" style="margin-bottom:1.2rem">
        <div class="section-title">Category Trends</div>
        <div class="trend-toggle" id="trendToggle">
          <button class="trend-toggle-btn active" data-mode="yearly">Yearly</button>
          <button class="trend-toggle-btn" data-mode="total">All-Time Total</button>
        </div>
      </div>
      <div class="cat-grid" id="trCatGrid"></div>
      <div class="panel">
        <div class="section-title">Monthly Patterns (Recent Years)</div>
        <div class="chart-wrap-lg"><canvas id="trMonthlyOverlay"></canvas></div>
      </div>
    </div>
  </div>
</div>

<!-- ════════════════ TOOLTIP ════════════════ -->
<div class="sankey-tooltip" id="tooltip">
  <div class="tt-label" id="ttLabel"></div>
  <div class="tt-value" id="ttValue"></div>
  <div class="tt-detail" id="ttDetail"></div>
</div>

<!-- ════════════════ MODAL ════════════════ -->
<div class="modal-overlay" id="modalOverlay">
  <div class="modal">
    <div class="modal-head">
      <div>
        <h3 id="modalTitle">Transactions</h3>
        <div class="modal-total" id="modalTotal"></div>
      </div>
      <button class="modal-close" id="modalClose">✕</button>
    </div>
    <div class="modal-body" id="modalBody"></div>
  </div>
</div>

<script src="app.js"></script>

<!-- Vercel Analytics -->
<script>
  window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
</script>
<script defer src="/_vercel/insights/script.js"></script>

<!-- Vercel Speed Insights -->
<script>
  window.si = window.si || function () { (window.siq = window.siq || []).push(arguments); };
</script>
<script defer src="/_vercel/speed-insights/script.js"></script>
</body>
</html>