-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
94 lines (94 loc) · 6.04 KB
/
index.html
File metadata and controls
94 lines (94 loc) · 6.04 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ORCA Wrapped</title>
<link rel="stylesheet" href="static/css/styles.css">
<link rel="stylesheet" href="static/css/colors.css">
<link rel="icon" href="images/orca.png" type="image/png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"/>
<script>
!function(t,e){var o,n,p,r;e.__SV||(window.posthog && window.posthog.__loaded)||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init rs ls bi ns us ts ss capture calculateEventProperties vs register register_once register_for_session unregister unregister_for_session gs getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey displaySurvey cancelPendingSurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException startExceptionAutocapture stopExceptionAutocapture loadToolbar get_property getSessionProperty fs ds createPersonProfile ps Qr opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing get_explicit_consent_status is_capturing clear_opt_in_out_capturing hs debug O cs getPageViewId captureTraceFeedback captureTraceMetric Kr".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
posthog.init('phc_8yYMEaN2d4Cj2zfNMkZAEFZnPebOLzZHLjYHEhvgtYU', {
api_host: 'https://us.i.posthog.com',
defaults: '2025-11-30',
person_profiles: 'identified_only',
})
</script>
</head>
<body>
<div class="content">
<div class="content-header">
<h1>ORCA Wrapped</h1>
<p>Wrapping up your year in transit.</p>
</div>
<div class="step-container">
<div class="step-header">
<h2>Step 1: Download</h2>
</div>
<div class="step-body">
<p>The following will be a lot easier on a computer:</p>
<ol id="step-one">
<li>Go to <a href="https://www.myorca.com/" target="_blank">myorca.com</a></li>
<li>If you haven't already, create an account and link your ORCA card</li>
<li>Once logged into your account, navigate to "My Cards" and find the ORCA card you'd like to wrap</li>
<li>Click "Manage Card" and then select the "Card Activity" tab</li>
<li>Select a Year from the dropdown, then scroll to the bottom of the table and select "Download CSV"</li>
</ol>
</div>
</div>
<div class="step-container">
<div class="step-header">
<h2>Step 2: Upload</h2>
</div>
<div class="step-body">
<p>Choose the CSV file that you downloaded in Step 1. Then, choose the year that you want to wrap up</p>
<div class="file-upload">
<div class="info-input">
<p>CSV File: </p>
<input type="file" id="csvFileInput" accept=".csv" />
</div>
<div class="info-input">
<p>Year:</p>
<input
type="number"
id="year-input"
name="analysis-year"
min="1900"
max="2100"
placeholder="2025"
value="2025"
/>
</div>
<div>
<button id="run-script" onclick="runScript(exampleFile=false)">Load</button>
<button class="button--secondary" id="use-example" onclick="runScript(exampleFile=true, year=2025)">Use Example File</button>
</div>
<div id="output"></div>
</div>
<script src="script.js"></script>
</div>
</div>
<div class="step-container">
<div class="step-header">
<h2>Step 3: Wrap it up!</h2>
</div>
<div id="stats-output"></div>
</div>
<div class="content-header">
<div class="dialog">
<div">
<h2 style="margin-bottom: 16px;">About</h2>
<p>Built by Moshobo. Not affiliated with ORCA, or any other transit agency.</p>
<p>Updated in March 2026</p>
<a href="https://www.flaticon.com/free-icon/sea_11883457?term=orca&page=1&position=1&origin=style&related_id=11883457" title="orca icons">Orca icons created by Nack_Thanakorn - Flaticon</a>
</div>
</div>
</div>
<div id="result-printed"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="script.js"></script>
</div>
</body>
</html>