-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
483 lines (429 loc) · 36.4 KB
/
index.html
File metadata and controls
483 lines (429 loc) · 36.4 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
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
<!DOCTYPE html>
<html>
<head>
<title>Boston Transportation Cost</title>
<meta charset="utf-8">
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="https://patterns.boston.gov/css/public.css">
<!--<![endif]-->
<!--[if lt IE 10]>
<link media="all" rel="stylesheet" href="https://patterns.boston.gov/css/ie.css">
<![endif]-->
<!-- <link rel="stylesheet" href="styles.css?v=123"> -->
<link rel="stylesheet" href="styles.css?v=6">
</head>
<body>
<input type="checkbox" id="s-tr" class="s-tr" aria-hidden="true">
<div id="header-placeholder"></div>
<main id="main-content">
<div class="main">
<div class="container">
<section class="main-content" id="content" role="main">
<div class="b b--fw" style="background:#fb4d42;">
<div class="b-c b-c--xsmv" style="padding: 2rem 0;">
<strong style="background:#091f2f;color:#fff;padding:.5rem .5rem;border-radius:.5rem;margin-right:.5rem;">
BETA
</strong>
<span style="color:#091f2f;">
<strong>
Student demo project — not an official City of Boston website.
<a href="our_team.html" style="color:#091f2f;text-decoration:underline;">Learn more</a>
</strong>
</span>
</div>
</div>
<article class="node-16494266 node clearfix node-topic-page modstate-published" bos_context_type="Topic Page">
<div class="b b--fw">
<div class="hros hros--t">
<img src="images/car.jpg.webp" alt="hero image" class="hros--img">
<div class="hros-c">
<div class="hros-i hros-i--l">
<span></span>guide<span></span>
</div>
<h1 class="hros-t hros-t--l">
Do You Really Need a Car in Boston?
</h1>
<div class="hros-i hros-i--l hros-st--w">
Last updated:
<time datetime="2025-12-30T17:10:34Z">1/16/26</time>
</div>
</div>
</div>
</div>
<div class="intro-content nav-fill-margin">
<div class="topic-intro-text-container">
<div class="intro-text-top">
<div class="topic-intro-text-content">
<div class="intro-text">
<div class="intro-text supporting-text squiggle-border-bottom field field-name-field-intro-text field-type-text-long">
<p>Compare the cost of owning a car in the City of Boston.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="paragraphs-items paragraphs-items-field-components paragraphs-items-full paragraphs-items-field-components-full">
<div class="entity entity-paragraphs-item paragraphs-item-text component-section entity entity-paragraphs-item component-section component-section b--fw" bos_context_type="Text" about="" typeof="">
<div class="b-c">
<div class="paragraphs-items paragraphs-items-field-text-blocks paragraphs-items-field-text-blocks-full paragraphs-items-full">
<div class="entity entity-paragraphs-item paragraphs-item-text-one-column component-section squiggle-border-bottom, p-t400 entity entity-paragraphs-item component-section" bos_context_type="Text One Column" about="" typeof="">
<div>
<div style="margin-top: 0px; margin-bottom: 0px;">
<p class="intro-lead">Living in Boston, having a car can be either a helpful convenience or a significant expense. This page helps you understand the real cost of living with a car versus without one, based on how you actually travel day to day. You can explore example lifestyles such as students, families, and frequent commuters to see how transportation costs differ. You can also use the interactive calculator to estimate your own costs using your address and travel habits. The goal is to help you make a decision that fits your lifestyle, budget, and daily needs.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="subnav-anchor" id="apply-online" data-text="Apply Online" aria-hidden="true" title="This is an anchor"></div>
<div class="entity entity-paragraphs-item paragraphs-item-text component-section entity entity-paragraphs-item component-section component-section b--fw" bos_context_type="Text" about="" typeof="">
<section class="b b--fw" id="calculator">
<div class="b-c">
<div class="sh">
<h2 class="sh-title">Transportation Cost Calculator</h2>
</div>
<div class="calc-shell">
<!-- Multi-screen calculator -->
<div id="calcStepper">
<!-- Screen 1 — Basics -->
<div class="calc-screen active" data-screen="1" id="screen-basics">
<h3 class="h3">First, let's establish your travel habits and needs!</h3>
<p class="t--subinfo m-b300">Please use the stepper below to input your details. Choosing a lifestyle will fill in typical numbers automatically, which you can adjust.</p>
<div class="lifestyle-buttons" style="display: flex; gap: 0.75rem; margin-bottom: 1.5rem; flex-wrap: wrap;">
<button class="btn lifestyle-btn" data-lifestyle="student" type="button" style="flex: 1 1 calc(50% - 0.375rem);">👨🎓 Student/Professional</button>
<button class="btn lifestyle-btn" data-lifestyle="couple" type="button" style="flex: 1 1 calc(50% - 0.375rem);">👫 Couple (no kids)</button>
<button class="btn lifestyle-btn" data-lifestyle="family" type="button" style="flex: 1 1 calc(50% - 0.375rem);">👨👩👧👦 Family with kids</button>
<button class="btn lifestyle-btn" data-lifestyle="frequent" type="button" style="flex: 1 1 calc(50% - 0.375rem);">🚴 Frequent Trip-Goers</button>
</div>
<label class="calc-row">
<span class="calc-labels">
<span class="calc-name">Your city</span>
</span>
<select id="city" class="txt">
<option value="boston" selected>Boston</option>
</select>
</label>
<label class="calc-row">
<span class="calc-labels">
<span class="calc-name">Commuting per week</span>
<span class="calc-sub">Work, school, etc.</span>
</span>
<input id="commuteDays" class="txt" type="number" min="0" step="1" value="5">
</label>
<label class="calc-row">
<span class="calc-labels">
<span class="calc-name">Typical non-commute trips per week</span>
<span class="calc-sub">Groceries, gym, errands</span>
</span>
<input id="nonCommuteTrips" class="txt" type="number" min="0" step="1" value="3">
</label>
<label class="calc-row">
<span class="calc-labels">
<span class="calc-name">Day trips (highway) per year</span>
<span class="calc-sub">Examples: Salem, Concord, Cape Ann</span>
</span>
<input id="dayTripsHighway" class="txt" type="number" min="0" step="1" value="2">
</label>
<label class="calc-row">
<span class="calc-labels">
<span class="calc-name">Out-of-town / multi-day trips per year</span>
<span class="calc-sub">Examples: Cape Cod, New Hampshire, Vermont</span>
</span>
<input id="multiDayTrips" class="txt" type="number" min="0" step="1" value="1">
</label>
<!-- Removed car ownership question for linear navigation -->
<div class="m-t300">
<button class="btn" id="toStep2">Next</button>
</div>
</div>
<!-- Screen 2 — Car option -->
<div class="calc-screen" data-screen="2" id="screen-car" hidden>
<h3 class="h3">Car ownership costs</h3>
<form id="carOwnershipForm">
<div class="calc-section">
<div class="parking-option" id="carOwnershipOption">
<div class="option-body">
<div>
<div class="option-title">Do you currently own a car?</div>
</div>
<div class="option-control">
<label>
<input type="radio" name="carOwnership" id="ownCarYes" value="yes">
Yes
</label>
<label>
<input type="radio" name="carOwnership" id="ownCarNo" value="no">
No
</label>
</div>
</div>
</div>
<div class="parking-option" id="fuelCostSection" style="display:none;">
<div class="option-body">
<div>
<div class="option-title">Average fuel/electricity cost per month (USD)</div>
<div class="option-sub">Enter your typical monthly average.</div>
</div>
<div class="option-control">
<input id="fuelMonthly" class="txt" type="number" min="0" step="1">
</div>
</div>
</div>
<div class="parking-option" id="afdcSection" style="display:none;">
<div class="option-body">
<div>
<div class="option-title">Estimated annual fuel/electricity cost (USD)</div>
<div class="option-sub">Use the <a href='https://www.afdc.energy.gov/calc' target='_blank' id='afdcLink'>AFDC calculator</a> to estimate annual fuel or charging costs for a car you might buy.</div>
<div class="option-sub" id="afdcMileageHelper" style="margin-top:0.25em;"></div>
<div style="display: flex; justify-content: center; margin: 20px 0;">
<iframe src="https://afdc.energy.gov/widget/calc/" style="height: 349px; width: 250px; border: none;" scrolling="no" frameborder="0"></iframe>
</div>
</div>
<div class="option-control">
<input id="afdcAnnual" class="txt" type="number" min="0" step="100">
</div>
</div>
</div>
</div>
</form>
<div class="calc-section">
<h4>Boston fixed costs</h4>
<fieldset class="calc-row" id="parkingChoiceFieldset">
<legend class="calc-name">What would you rely on for parking?</legend>
<div class="parking-option" data-value="offstreet">
<label>
<input type="radio" name="parkingChoice" id="parkingOffstreet" value="offstreet" checked>
<div class="option-body">
<div>
<div class="option-title">Off-street parking (garage or private lot)</div>
<div class="option-sub">Monthly cost varies by location.</div>
</div>
<div class="option-control">
<label class="calc-row">
<span class="calc-labels">
<span class="calc-name">Monthly parking cost (USD)</span>
</span>
<input id="parkingMonthly" class="txt" type="number" min="0" step="50" value="250">
</label>
</div>
</div>
</label>
</div>
<div class="parking-option" data-value="permit">
<label>
<input type="radio" name="parkingChoice" id="parkingPermit" value="permit">
<div class="option-body">
<div>
<div class="option-title">Resident street parking permit</div>
<div class="option-sub">Free for eligible Boston residents; availability varies by neighborhood.</div>
</div>
<div class="option-control">
<label class="calc-row">
<span class="calc-labels">
<span class="calc-name">Resident permit annual (USD)</span>
</span>
<input id="residentPermitAnnual" class="txt" type="number" min="0" step="100" value="0" readonly>
</label>
</div>
</div>
</label>
</div>
</fieldset>
<label class="calc-row">
<span class="calc-labels">
<span class="calc-name">Annual insurance premium (USD)</span>
<span class="calc-sub">Your estimated yearly auto insurance cost</span>
</span>
<input id="insuranceAnnual" class="txt" type="number" min="0" step="100" value="1200">
</label>
<label class="calc-row">
<span class="calc-labels">
<span class="calc-name">Annual excise tax (USD)</span>
<span class="calc-sub">From City of Boston bill / estimate</span>
</span>
<input id="exciseTax" class="txt" type="number" min="0" step="1" value="0">
</label>
<label class="calc-row">
<span class="calc-labels">
<span class="calc-name">Annual registration & inspection total (USD)</span>
</span>
<input id="regInspect" class="txt" type="number" min="0" step="1" value="100">
</label>
<fieldset class="calc-row">
<legend class="calc-name">Ownership cost</legend>
<label><input type="radio" name="ownership" value="loan" checked> Loan / Lease</label>
<label><input type="radio" name="ownership" value="paid"> Paid-off / Cash</label>
<div id="loanFields">
<label class="calc-row">
<span class="calc-labels">
<span class="calc-name">Monthly payment (USD)</span>
</span>
<input id="loanMonthly" class="txt" type="number" min="0" step="1" value="300">
</label>
<label class="calc-row">
<span class="calc-labels">
<span class="calc-name">Months per year paying</span>
</span>
<input id="loanMonthsPerYear" class="txt" type="number" min="1" max="12" step="1" value="12">
</label>
</div>
<div id="paidFields" hidden>
<!-- Depreciation input removed -->
</div>
</fieldset>
<div class="m-t300">
<button class="btn" id="backFromCar">Back</button>
<button class="btn" id="toComparisonFromCar">Next</button>
</div>
<div id="carSummary" class="m-t300">
<div>Annual Variable (AFDC): <strong id="carVar">$0.00</strong></div>
<div>Annual Fixed: <strong id="carFixedCalc">$0.00</strong></div>
<div>Total Car Annual: <strong id="carAnnualTotal">$0.00</strong></div>
<div>Monthly: <strong id="carMonthlyTotal">$0.00</strong></div>
</div>
</div>
</div>
<!-- Screen 3 — No-car option -->
<div class="calc-screen" data-screen="3" id="screen-nocar" hidden>
<h3 class="h3">Car-Free Transportation Mix</h3>
<div class="calc-section">
<h4>MBTA</h4>
<label class="calc-row">
<span class="calc-labels">
<span class="calc-name">Your monthly MBTA cost (USD)</span>
<span class="calc-sub">Enter your actual or estimated monthly spending on MBTA (subway, bus, commuter rail, ferry, etc.)</span>
</span>
<input id="mbtaMonthlyDirect" class="txt" type="number" min="0" step="1" value="0">
</label>
</div>
<div class="calc-section">
<h4>Regional bus (outside Boston)</h4>
<label class="calc-row">
<span class="calc-labels">
<span class="calc-name">Your monthly Regional bus cost (USD)</span>
<span class="calc-sub">Enter your actual or estimated monthly spending on regional buses (e.g., MBTA express, MWRTA, LRTA, etc.)</span>
</span>
<input id="regionalBusMonthlyDirect" class="txt" type="number" min="0" step="1" value="0">
</label>
</div>
<div class="calc-section">
<h4>Rideshare</h4>
<label class="calc-row">
<span class="calc-labels">
<span class="calc-name">Your monthly Rideshare cost (USD)</span>
<span class="calc-sub">Enter your actual or estimated monthly spending on rideshare (Uber, Lyft, etc.)</span>
</span>
<input id="rideshareMonthlyDirect" class="txt" type="number" min="0" step="1" value="0">
</label>
</div>
<div class="calc-section">
<h4>Rental cars</h4>
<label class="calc-row">
<span class="calc-labels">
<span class="calc-name">Your ANNUAL rental car cost (USD)</span>
<span class="calc-sub">Enter your actual or estimated ANNUAL spending on rental cars (Zipcar, Hertz, Enterprise, etc.)</span>
</span>
<input id="rentalCarAnnualDirect" class="txt" type="number" min="0" step="10" value="0">
</label>
</div>
<div class="m-t300">
<button class="btn" id="backFromNoCar">Back</button>
<button class="btn" id="toComparisonFromNoCar">Next to Comparison</button>
</div>
<div id="noCarSummary" class="m-t300">
<div>MBTA annual: <strong id="mbtaAnnual">$0.00</strong></div>
<div>Regional buses: <strong id="regionalAnnual">$0.00</strong></div>
<div>Rideshare annual: <strong id="rideshareAnnual">$0.00</strong></div>
<div>Rental annual: <strong id="rentalAnnual">$0.00</strong></div>
<div>Total No-Car annual: <strong id="noCarAnnual">$0.00</strong></div>
</div>
</div>
<!-- Screen 3 — Results & break-even -->
<div class="calc-screen" data-screen="3" id="screen-results" hidden>
<h3 class="h3">Your final results</h3>
<div class="calc-section results-hero">
<div class="results-grid">
<div class="result-card" id="carResult" role="group" aria-labelledby="carResultLabel">
<div class="result-title" id="carResultLabel">Annual cost for car</div>
<div class="result-amount" id="outCarAnnual">—</div>
<div class="result-sub">Monthly <span class="result-sub-amount" id="outCarMonthly">—</span></div>
</div>
<div class="result-card" id="noCarResult" role="group" aria-labelledby="noCarResultLabel">
<div class="result-title" id="noCarResultLabel">Annual cost without a car</div>
<div class="result-amount" id="outNoCarAnnual">—</div>
<div class="result-sub">Monthly <span class="result-sub-amount" id="outNoCarMonthly">—</span></div>
</div>
</div>
<div class="result-diff" aria-live="polite">
<div class="diff-label">Without a car, you save</div>
<div class="diff-amount" id="outDifference">—</div>
</div>
</div>
<div class="calc-section m-t300 smallest-drivers">
<h4 class="small-heading">Biggest drivers</h4>
<ol id="biggestDrivers" class="small-list"></ol>
</div>
<div class="m-t300">
<button class="btn" id="backFromResults">Back</button>
<button class="btn" id="startOver">Start over</button>
</div>
</div>
</div> <!-- calcStepper -->
<p class="m-t300">
Assumptions for calculations can be found
<a href="assumptions.html">here.</a>
</p>
</div>
</div>
</section>
<div class="subnav-anchor" aria-hidden="true" title="This is an anchor"></div>
<div class="entity entity-paragraphs-item paragraphs-item-text component-section entity entity-paragraphs-item component-section component-section b--fw" bos_context_type="Text" about="" typeof="">
<section class="b b--fw" id="calculator">
<div class="b-c">
<div class="sh">
<h2 class="sh-title">Need help deciding? Ask our AI Agent!</h2>
</div>
<div class="calc-shell">
<!-- Multi-screen calculator -->
<div id="calcStepper">
<h3 class="h3 m-t400 m-b400"></h3>
<iframe src="https://boston-agent--artahseenjahan.replit.app" style="width: 100%; height: 800px; border: none;"></iframe>
<strong class="m-t300"><em>DISCLAIMER: AI-generated content may not always reflect the most current information or policies. Please verify any critical information independently.</em></strong>
</div>
</div>
</div>
</div>
<div class="paragraphs-items paragraphs-items-full">
<div class="component-section">
<div class="field field-label-hidden field-type-text-long field__items field-items">
</div>
</div>
</div>
</div>
</div>
</div>
</article>
</section>
</div>
</div>
<!-- <template id="accordion-template">
<div class="b-collapsible m-b300">
<button class="b-collapsible__header" type="button" aria-expanded="false">
<span class="acc-head">
<img class="acc-icon" alt="">
<span class="acc-title"></span>
</span>
</button>
<div class="b-collapsible__content" hidden>
<div class="acc-body"></div>
</div>
</div>
</template> -->
</main>
<div id="footer-placeholder"></div>
<script type="text/javascript" src="main.js"></script>
<script src="https://patterns.boston.gov/scripts/all.js"></script>
</body>
</html>