-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
389 lines (370 loc) · 27.3 KB
/
Copy pathindex.html
File metadata and controls
389 lines (370 loc) · 27.3 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
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
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rivian R2 — Build, Compare & Cost Over Time</title>
<meta name="description" content="An interactive Rivian R2 configurator: build your trim, compare Standard/Premium/Performance side by side, and model the true cost of ownership over time.">
<meta property="og:type" content="website">
<meta property="og:title" content="Rivian R2 — Build, Compare & Cost Over Time">
<meta property="og:description" content="Build your Rivian R2 trim, compare trims side by side, and model true cost of ownership over time.">
<meta property="og:url" content="https://r2-configurator.vercel.app/">
<meta property="og:image" content="https://r2-configurator.vercel.app/og.jpg">
<meta property="og:image:secure_url" content="https://r2-configurator.vercel.app/og.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Blueprint illustration of the Rivian R2 — Build. Compare. Decide.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Rivian R2 — Build, Compare & Cost Over Time">
<meta name="twitter:description" content="Build your Rivian R2 trim, compare trims side by side, and model true cost of ownership over time.">
<meta name="twitter:image" content="https://r2-configurator.vercel.app/og.jpg">
<link rel="icon" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiByeD0iMTQiIGZpbGw9IiNmNGNmMTciLz48dGV4dCB4PSIzMiIgeT0iNDYiIGZvbnQtZmFtaWx5PSJBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZiIgZm9udC1zaXplPSIzNiIgZm9udC13ZWlnaHQ9ImJvbGQiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZpbGw9IiMxYTE3MDAiPlIyPC90ZXh0Pjwvc3ZnPg==">
<link rel="stylesheet" href="styles.css">
<!-- Vercel Web Analytics: first-party path (more resistant to blockers than the external CDN);
the window.va shim queues events fired before the script loads, so custom events work later. -->
<script>
window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); };
</script>
<script defer src="/_vercel/insights/script.js"></script>
</head>
<body>
<div class="wrap">
<header class="top">
<div>
<h1>Rivian <span class="y">R2</span> — Build, Compare & True Cost</h1>
<div class="sub">Build an R2, compare trims, and estimate all-in ownership cost for <b>your state</b>.</div>
</div>
<!-- vehicle switch: rendered by app.js only when ≥2 live (non-draft) vehicles are loaded -->
<div id="vehicleToggle" class="vehtoggle" role="tablist" aria-label="Vehicle" hidden></div>
</header>
<div class="tabbar">
<div class="tabs">
<div class="tab active" data-tab="build"><span class="tabnum">① </span>Build</div>
<div class="tab" data-tab="compare"><span class="tabnum">② </span>Compare<span class="tabext"> trims</span></div>
<div class="tab" data-tab="cost2"><span class="tabnum">③ </span>Cost<span class="tabext"> over time</span></div>
</div>
<!-- secondary links pinned far-right, inline with the tabs (Changelog view wired in #5) -->
<div class="tabaux">
<button type="button" class="tablink" id="navChangelog">Changelog</button>
<!-- community links live behind a flyout so the bar stays lean as more are added -->
<div class="tabflyout">
<button type="button" class="tablink" id="navCommunity" aria-haspopup="true" aria-expanded="false">Community ▾</button>
<div class="tabmore-menu" id="navCommunityMenu" role="menu" hidden>
<a class="tabmore-item" role="menuitem" href="https://www.reddit.com/r/RivianR2/" target="_blank" rel="noopener"><svg class="menuicon" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M248,104a32,32,0,0,0-52.94-24.19c-16.75-8.9-36.76-14.28-57.66-15.53l5.19-31.17,17.72,2.72a24,24,0,1,0,2.87-15.74l-26-4a8,8,0,0,0-9.11,6.59L121.2,64.16c-21.84.94-42.82,6.38-60.26,15.65a32,32,0,0,0-42.59,47.74A59,59,0,0,0,16,144c0,21.93,12,42.35,33.91,57.49C70.88,216,98.61,224,128,224s57.12-8,78.09-22.51C228,186.35,240,165.93,240,144a59,59,0,0,0-2.35-16.45A32.16,32.16,0,0,0,248,104ZM72,128a16,16,0,1,1,16,16A16,16,0,0,1,72,128Zm91.75,55.07a76.18,76.18,0,0,1-71.5,0,8,8,0,1,1,7.5-14.14,60.18,60.18,0,0,0,56.5,0,8,8,0,1,1,7.5,14.14ZM168,144a16,16,0,1,1,16-16A16,16,0,0,1,168,144Z"/></svg>r/RivianR2 ↗</a>
<a class="tabmore-item" role="menuitem" href="https://www.reddit.com/r/Rivian/" target="_blank" rel="noopener"><svg class="menuicon" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M248,104a32,32,0,0,0-52.94-24.19c-16.75-8.9-36.76-14.28-57.66-15.53l5.19-31.17,17.72,2.72a24,24,0,1,0,2.87-15.74l-26-4a8,8,0,0,0-9.11,6.59L121.2,64.16c-21.84.94-42.82,6.38-60.26,15.65a32,32,0,0,0-42.59,47.74A59,59,0,0,0,16,144c0,21.93,12,42.35,33.91,57.49C70.88,216,98.61,224,128,224s57.12-8,78.09-22.51C228,186.35,240,165.93,240,144a59,59,0,0,0-2.35-16.45A32.16,32.16,0,0,0,248,104ZM72,128a16,16,0,1,1,16,16A16,16,0,0,1,72,128Zm91.75,55.07a76.18,76.18,0,0,1-71.5,0,8,8,0,1,1,7.5-14.14,60.18,60.18,0,0,0,56.5,0,8,8,0,1,1,7.5,14.14ZM168,144a16,16,0,1,1,16-16A16,16,0,0,1,168,144Z"/></svg>r/Rivian ↗</a>
</div>
</div>
<a class="tablink" href="https://rivian.com/configurations/builder/r2" target="_blank" rel="noopener">Open Rivian configurator ↗</a>
</div>
<!-- phones only: the aux links collapse behind this ⋯ overflow menu -->
<div class="tabmore">
<button type="button" class="tabmore-btn" id="navMore" aria-haspopup="true" aria-expanded="false" aria-label="More links">⋯</button>
<div class="tabmore-menu" id="navMoreMenu" role="menu" hidden>
<button type="button" class="tabmore-item" id="navChangelogM" role="menuitem">Changelog</button>
<a class="tabmore-item" role="menuitem" href="https://www.reddit.com/r/RivianR2/" target="_blank" rel="noopener">r/RivianR2 ↗</a>
<a class="tabmore-item" role="menuitem" href="https://www.reddit.com/r/Rivian/" target="_blank" rel="noopener">r/Rivian ↗</a>
<a class="tabmore-item" role="menuitem" href="https://rivian.com/configurations/builder/r2" target="_blank" rel="noopener">Open Rivian configurator ↗</a>
</div>
</div>
</div>
<!-- ============ BUILD ============ -->
<div class="view active" id="view-build">
<div class="grid">
<div class="panel">
<div class="h2row">
<h2>Build your R2</h2>
<button class="reset" id="resetBuild" title="Clear options back to this trim's defaults">↺ Reset options</button>
</div>
<div class="trimrow" id="trimRow"></div>
<div class="hero" id="heroWrap">
<div class="heroview" id="heroView">
<button type="button" data-view="ext" class="on">Exterior</button>
<button type="button" data-view="int">Interior</button>
</div>
<img id="heroImg" alt="Rivian R2 render" loading="lazy">
<div class="ph" id="heroPh" style="display:none">Live Rivian render loads here (needs internet)</div>
<div class="cap" id="heroCap"></div>
</div>
<div id="launchBanner"></div>
<div id="treeBranches"></div>
<div class="buildgear" id="buildGearPanel">
<div class="h2row">
<h2>Gear & accessories <span class="gearsum" id="buildGearSum"></span></h2>
<button class="reset" id="clearBuildGear" title="Remove all added gear">↺ Clear gear</button>
</div>
<div id="buildGearBody"></div>
</div>
</div>
<div class="sticky">
<div class="panel">
<div class="pricelbl">Configured vehicle price</div>
<div class="bigprice">$<span id="cfgPrice">44,990</span></div>
<div class="spec" id="specChips"></div>
<div style="margin-top:14px" id="sumLines"></div>
<button class="btn" id="toCost">See cost over time <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></button>
<button class="btn alt" id="toCompare">Compare all trims <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg></button>
<div class="note">Vehicle options only. Taxes, fees, financing, and running costs are added in Cost. <a href="https://rivian.com/configurations/builder/r2" target="_blank" rel="noopener">Verify on Rivian ↗</a></div>
</div>
</div>
</div>
</div>
<!-- ============ COMPARE ============ -->
<div class="view" id="view-compare">
<div class="panel compare-intro" style="margin-bottom:16px">
<h2>Standard vs Premium vs Performance</h2>
<p style="margin:0;color:var(--muted);font-size:13.5px">Configure each trim side by side.</p>
</div>
<div class="cmp compare-cards" id="cmpCards"></div>
<div class="panel compare-matrix-panel" style="margin-top:16px">
<div class="h2row">
<h2>Side-by-side comparison</h2>
<div style="display:flex;align-items:center;gap:14px">
<button class="reset" id="resetCompare" title="Reset every column's paint, interior, drive and add-ons to default">↺ Reset columns</button>
</div>
</div>
<div id="cmpMatrix"></div>
</div>
<div class="panel" id="gearPanel" style="margin-top:16px">
<div class="h2row">
<h2>Gear & accessories <span class="gearsum" id="gearSum"></span></h2>
<div style="display:flex;align-items:center;gap:10px">
<button class="reset" id="clearGear" title="Remove all added gear">↺ Clear gear</button>
</div>
</div>
<div id="gearBody"></div>
</div>
<div class="verdict">
<div class="big" id="verdictBig"></div>
<p id="verdictP"></p>
</div>
</div>
<!-- ============ COST OVER TIME (new) ============ -->
<div class="view" id="view-cost2">
<div class="coststicky" id="coststicky" aria-hidden="true">
<div class="coststicky-inner">
<div class="cs-fig cs-fig--primary">
<span id="cs_pay_lbl">Monthly payment</span>
<b id="cs_pay">—</b>
<small id="cs_pay_sub"></small>
</div>
<div class="cs-figs">
<div class="cs-fig"><span id="cs_otd_lbl">Out-the-door</span><b id="cs_otd">—</b></div>
<div class="cs-fig"><span>True cost · <b id="cs_years_top">6</b> yr</span><b id="cs_true">—</b></div>
<div class="cs-fig"><span>Effective</span><b id="cs_permo">—</b></div>
</div>
<div class="cs-horizon">
<span class="cs-horizon-lbl">Horizon</span>
<div class="cs-step" role="group" aria-label="Ownership horizon in years">
<button type="button" id="cs_years_dec" class="cs-stepbtn" aria-label="Fewer years">−</button>
<span class="cs-step-val"><b id="cs_years_l">6</b> yrs</span>
<button type="button" id="cs_years_inc" class="cs-stepbtn" aria-label="More years">+</button>
</div>
</div>
</div>
</div>
<div class="loaded" id="loadedCard"></div>
<div class="grid grid2">
<div class="igstack">
<div class="panel igroup">
<h2>The basics</h2>
<p class="sechelp" style="margin-top:-4px">Where you'll register, how much you drive, and how long you'll keep it — these shape every group below.</p>
<div class="calcgrid">
<div class="field" style="grid-column:1/-1"><label>State <span class="hint">sets tax, EV fee, registration, insurance, electricity, gas & property-tax defaults</span></label><select id="i2_state"></select></div>
</div>
<div class="statesets" id="i2_stateSets"></div>
<div class="calcgrid">
<div class="field"><label>Miles driven / year <span class="hint">drives charging, fuel & resale</span></label><input type="number" id="i2_miles" value="13000"></div>
<div class="field" style="grid-column:1/-1"><label>Ownership horizon: <b id="o2_years_l">6</b> yrs <span class="hint">US avg ~8 · drag to model longer holds</span></label><input type="range" id="i2_years" min="1" max="12" value="6"></div>
</div>
<p class="sechelp" id="i2_stateNote" style="margin-bottom:0">Insurance, property tax, electricity, and gas use editable state averages. Upfront <b>tax is an estimate</b>; rules vary by state and trade-in. Incentives change often; check <a href="https://afdc.energy.gov/laws/state" target="_blank" rel="noopener">AFDC ↗</a>, <a href="https://plugstar.com" target="_blank" rel="noopener">PlugStar ↗</a>, and your DMV or energy office.</p>
</div>
<div class="panel igroup">
<h2>The purchase <span class="igtag t-up">up-front</span></h2>
<p class="sechelp" style="margin-top:-4px">Vehicle price is taxed and financeable. Gear is separate, untaxed upfront cash unless you choose to finance it. Trade-in reduces the purchase total and the taxable price. If you still owe on it, enter the payoff — only your equity (value − payoff) counts toward what you pay.</p>
<div class="calcgrid">
<div class="field"><label>Configured vehicle price <span class="hint">incl. factory add-ons</span></label><input type="number" id="i2_price" value="57990"></div>
<div class="field"><label>Gear & accessories <span class="hint">upfront, untaxed</span></label><input type="number" id="i2_gear" value="0"></div>
</div>
<div class="miniswitch" id="tradeRow2"><span>I have a trade-in — credit its value (minus any loan payoff) toward this R2</span><button class="tgl" id="tradeSw" aria-label="I have a trade-in"></button></div>
<div class="calcgrid" id="tradeFields2" style="margin-top:12px;display:none">
<div class="field"><label>Trade-in value</label><input type="number" id="i2_trade" value="0"></div>
<div class="field"><label>Amount still owed <span class="hint">payoff, if any</span></label><input type="number" id="i2_owed" value="0"></div>
</div>
</div>
<div class="panel igroup">
<h2>How you'll pay <span class="igtag t-fin">financing</span></h2>
<div class="seg" id="paySeg2">
<button data-pay="finance" class="on">Finance<small>Loan + interest</small></button>
<button data-pay="cash">Cash<small>Pay up front</small></button>
<button data-pay="lease">Lease<small>Return at end</small></button>
</div>
<div class="calcgrid" id="financeFields2" style="margin-top:12px">
<div class="field"><label>Down payment</label><input type="number" id="i2_down" value="15000"></div>
<div class="field"><label>APR %</label><input type="number" id="i2_apr" value="5.79" step="0.1"></div>
<div class="field"><label>Loan term (months)</label><input type="number" id="i2_term" value="60"></div>
<div class="field"><label>Purchase year <span class="hint">deduction ends 2028</span></label><input type="number" id="i2_year" value="2027"></div>
</div>
<div class="miniswitch" id="finGearRow"><span>Finance the gear too — roll <b id="finGearAmt">$0</b> into the loan instead of paying it upfront</span><button class="tgl" id="finGearSw" aria-label="Finance the gear"></button></div>
<div class="calcgrid" id="leaseFields2" style="margin-top:12px;display:none">
<div class="field"><label>Lease payment / mo <span class="hint">est.</span></label><input type="number" id="i2_lease" value="829"></div>
<div class="field"><label>Due at signing</label><input type="number" id="i2_leasedown" value="4895"></div>
<div class="field"><label>Lease term (months)</label><input type="number" id="i2_leaseterm" value="36"></div>
</div>
<div id="dedWrap2">
<h3 class="dedh">Loan-interest deduction (2025–2028)</h3>
<p class="sechelp">Temporary federal deduction for interest on a <b>new</b> US-assembled auto loan. R2 qualifies; income limits the benefit.</p>
<div class="calcgrid">
<div class="field"><label>Filing status</label><select id="i2_filing"><option value="200000">Married filing jointly</option><option value="100000">Single / other</option></select></div>
<div class="field"><label>Household income (MAGI)</label><input type="number" id="i2_magi" value="100000"></div>
<div class="field"><label>Marginal federal rate %</label><input type="number" id="i2_rate" value="22"></div>
</div>
<div class="dedbox" id="dedBox2"></div>
</div>
</div>
<div class="panel igroup">
<h2>Charging & energy <span class="igtag t-run">running cost</span></h2>
<div class="calcgrid">
<div class="field"><label>Home electricity ¢/kWh <span class="hint">state avg default</span></label><input type="number" id="i2_kwh" value="16.3" step="0.1"></div>
<div class="field"><label>Public charging ¢/kWh <span class="hint">DCFC average</span></label><input type="number" id="i2_public" value="45" step="1"></div>
<div class="field"><label>% miles on home charging</label><input type="number" id="i2_home" value="90"></div>
<div class="field"><label>Efficiency mi/kWh <span class="hint">from the wall · EPA 3.77</span></label><input type="number" id="i2_eff" value="3.5" step="0.1"></div>
<div class="field"><label>Charger install / labor <span class="hint">hardware is in gear</span></label><input type="number" id="i2_install" value="700"></div>
</div>
<div class="vsgas">
<div class="vgh">Compare against gas <span class="hint">fuel only — feeds the fuel-savings chart</span></div>
<div class="calcgrid">
<div class="field"><label>Comparable gas SUV mpg</label><input type="number" id="i2_mpg" value="28"></div>
<div class="field"><label>Gas $/gal <span class="hint">state avg default</span></label><input type="number" id="i2_gas" value="3.50" step="0.01"></div>
</div>
</div>
</div>
<div class="panel igroup">
<h2>Ownership costs <span class="igtag t-run">running cost</span></h2>
<div class="calcgrid">
<div class="field"><label>Insurance / year <span class="hint">est. · state avg default</span></label><input type="number" id="i2_ins" value="2300"></div>
<div class="field"><label>Maintenance + tires / year</label><input type="number" id="i2_maint" value="450"></div>
<div class="field" id="i2_proptaxRow"><label>Property tax /$100 <span class="hint">your county · 0 if none</span></label><input type="number" id="i2_proptax" value="0.8721" step="0.0001"></div>
<div class="field"><label>Cost escalation %/yr <span class="hint">0 = today's dollars · try 3</span></label><input type="number" id="i2_esc" value="0" step="0.5"></div>
</div>
</div>
<div class="panel igroup">
<h2>What comes back <span class="igtag t-back">recovered later</span></h2>
<p class="sechelp" style="margin-top:-4px">Money that returns to you: resale when you sell, rebates after purchase.</p>
<div class="calcgrid">
<div class="field"><label>Resale retained at end % <span class="hint">at ~12k mi/yr — higher mileage lowers the effective %</span></label><input type="number" id="i2_resale" value="50"></div>
<div class="field"><label>EV incentives / rebates <span class="hint">state/utility, received after purchase</span></label><input type="number" id="i2_rebate" value="0"></div>
</div>
</div>
</div>
<div class="sticky">
<div class="res">
<div class="row"><div class="lbl"><span id="r2_otd_lbl">Out-the-door</span> <small id="r2_otd_sub">cash to drive away, day one</small></div><div class="val hero2" id="r2_otd">—</div></div>
<div class="row pay"><div class="lbl">Monthly payment <small id="r2_pay_sub">to the bank · 60-mo</small></div><div class="val" id="r2_pay">—</div></div>
<div class="row"><div class="lbl">True cost over <b id="r2_years">6</b> yrs <small>net of resale</small></div><div class="val hero2" id="r2_true">—</div></div>
<div class="row"><div class="lbl">Effective cost <small>true cost ÷ months you own it</small></div><div class="val" id="r2_permo">—</div></div>
</div>
<div class="panel">
<h2>Where the money goes <span class="hint" id="r2_horizonlbl"></span></h2>
<div class="bar" id="costBar2"></div>
<div class="bd" id="bd2"></div>
<div class="bdhint" id="r2_resaleNote"></div>
<div class="exprow">
<button class="expbtn" id="exportScen"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3H4a2 2 0 0 0-2 2v16.286a.71.71 0 0 0 1.212.502l2.202-2.202A2 2 0 0 1 6.828 19H20a2 2 0 0 0 2-2v-4"/><path d="M16 3h6v6"/><path d="m16 9 6-6"/></svg>Export scenario to chat</button>
<button class="expbtn" id="copyShare"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>Copy share link</button>
<span class="expok" id="exportOk">Scenario copied — paste into any AI chat</span>
<span class="expok" id="shareOk">Link copied — paste to share</span>
</div>
<div class="bdhint">This link includes the income & tax details you entered.</div>
</div>
<div class="panel kpis" id="kpiPanel">
<h2>At a glance</h2>
<div class="kpigrid" id="kpiGrid"></div>
</div>
</div>
</div>
<div class="panel" id="costModelSection" style="margin-top:16px">
<div class="h2row">
<h2>How the money runs over time</h2>
<span class="gearsum" id="modelHorizon"></span>
</div>
<p class="sechelp" style="margin-top:0">Each view updates as you change payment type, term, mileage, or ownership horizon.</p>
<div class="charts">
<div class="chartcard">
<div class="charthd"><h3>Cumulative cost over time</h3><span class="chartsub" id="cumSub"></span></div>
<div class="chartbox" id="chartCum"></div>
<div class="chartcap" id="cumCap"></div>
</div>
<div class="chartcard">
<div class="charthd"><h3>Annual cost by year</h3><span class="chartsub" id="annSub"></span></div>
<div class="chartbox" id="chartAnnual"></div>
<div class="chartcap" id="annCap"></div>
</div>
<div class="chartcard" id="loanCardWrap">
<div class="charthd"><h3>Loan payoff & equity</h3><span class="chartsub" id="loanSub"></span></div>
<div class="chartbox" id="chartLoan"></div>
<div class="chartcap" id="loanCap"></div>
</div>
<div class="chartcard">
<div class="charthd"><h3>Depreciation & underwater</h3><span class="chartsub" id="depSub"></span></div>
<div class="chartbox" id="chartDep"></div>
<div class="chartcap" id="depCap"></div>
</div>
<div class="chartcard">
<div class="charthd"><h3>Fuel: EV vs gas</h3><span class="chartsub" id="gasSub"></span></div>
<div class="chartbox" id="chartGas"></div>
<div class="chartcap" id="gasCap"></div>
</div>
</div>
<div class="yearbdwrap">
<div class="charthd"><h3>Year-by-year breakdown</h3><span class="chartsub" id="yearBdSub"></span></div>
<div class="yearbd" id="yearBd"></div>
<p class="chartcap">Annual cash flow by category — how each cost lands year to year: financing drops off after payoff, insurance & maintenance drift, and resale & rebates hit a single year. <b>Net cash</b> is your out-of-pocket each year (negative when resale lands); its Total lands on your true cost, before any loan-interest deduction.</p>
</div>
</div>
<div class="panel" style="margin-top:16px">
<div class="h2row">
<h2>Compare scenarios</h2>
<div style="display:flex;gap:8px">
<button class="scbtn" id="saveScen2">＋ Save current setup</button>
<button class="reset" id="clearScen2" hidden>Clear all</button>
</div>
</div>
<p class="sechelp" style="margin-top:0">Save setups to compare true cost side by side. With two or more saved, their cumulative curves overlay below.</p>
<div class="chartcard" id="scenChartCard" style="display:none;margin-bottom:14px">
<div class="charthd"><h3>Scenarios: cumulative cost</h3><span class="chartsub" id="scenSub"></span></div>
<div class="chartbox" id="chartScen"></div>
<div class="chartcap" id="scenCap"></div>
</div>
<div id="scenWrap2"></div>
</div>
<details>
<summary>How this model works — assumptions & method</summary>
<div class="srcsec">
<h4>What's modeled month by month</h4>
<p>The model runs an amortization schedule month by month, adding financing, insurance, electricity, registration + EV fee, property tax on the <span class="k">depreciating</span> value, maintenance, gear, and charger install. It credits the 2025–28 loan-interest deduction when eligible, returns any rebates you enter, and subtracts resale at the end. The result is your <span class="k">true cost</span>. Costs are in <span class="k">today's dollars</span> — set the escalation input above 0 to inflate insurance, maintenance, and electricity year over year.</p>
</div>
<div class="srcsec">
<h4>The value curve</h4>
<p>Depreciation is a two-phase curve: a steeper first year (typical for new EVs, ~18% by month 12), then a gentler slide to your <span class="k">resale-retained %</span> endpoint, so the chart and resale credit agree. The endpoint assumes ~12,000 mi/yr; driving more shifts it down (capped at 5 points, always shown on the chart), driving less shifts it up. The crossover marks when vehicle value rises above the loan balance.</p>
</div>
<div class="srcsec">
<h4>Charging & fuel</h4>
<p>Electricity blends your home rate (state average by default — override with your utility's rate) with the public-charging rate for the miles you don't charge at home. Efficiency is measured <span class="k">from the wall</span>, so home-charging losses (~10%) are already folded in; EPA's 3.77 mi/kWh is a wall figure and the 3.5 default is a conservative real-world one. The gas comparison is <span class="k">fuel only</span> — it doesn't model a gas vehicle's price, insurance, or depreciation.</p>
</div>
<div class="srcsec">
<h4>Taxes, fees & the deduction</h4>
<p>For purchases, trade-in value reduces the vehicle total and the taxable price: price + destination - trade, vehicle only. State defaults set tax, title, registration, EV fees, and property tax; edit them for your county. The deduction phases out above $100k single / $200k joint MAGI and is gone at $150k / $250k. <span class="k">Not tax or financial advice.</span></p>
</div>
</details>
</div>
<!-- ============ CHANGELOG (secondary view; content rendered in #5) ============ -->
<div class="view" id="view-changelog"></div>
</div>
<script src="data/vehicle-r2.js"></script>
<script src="data/vehicle-r1s.js"></script>
<script src="data/states.js"></script>
<script src="data/changelog.js"></script>
<script src="app.js"></script>
</body>
</html>