-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
227 lines (211 loc) · 13.9 KB
/
Copy pathindex.html
File metadata and controls
227 lines (211 loc) · 13.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resident Pro</title>
<meta name="theme-color" content="#1d4ed8">
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%231d4ed8'/%3E%3Ctext x='50%25' y='53%25' text-anchor='middle' dominant-baseline='middle' font-family='Arial,sans-serif' font-size='34' font-weight='700' fill='white'%3ER%3C/text%3E%3C/svg%3E">
<link rel="manifest" href="./manifest.webmanifest">
<link id="flatpickr-theme" rel="stylesheet">
<link rel="stylesheet" href="./styles.css">
<script src="./pwa-register.js" defer></script>
<script>
function applySystemTheme(isDark) {
const root = document.documentElement;
root.classList.toggle('dark', Boolean(isDark));
root.style.colorScheme = isDark ? 'dark' : 'light';
const flatpickrThemeLink = document.getElementById('flatpickr-theme');
if (flatpickrThemeLink) {
const themeHref = isDark
? './assets/vendor/flatpickr/themes/dark.css'
: './assets/vendor/flatpickr/themes/light.css';
if (flatpickrThemeLink.dataset.enabled === 'true') {
flatpickrThemeLink.href = themeHref;
} else {
flatpickrThemeLink.dataset.pendingHref = themeHref;
}
}
}
applySystemTheme(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-MLZ8LLL2RQ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { window.dataLayer.push(arguments); }
window.gtag = window.gtag || gtag;
gtag('js', new Date());
gtag('config', 'G-MLZ8LLL2RQ', {
anonymize_ip: true
});
</script>
</head>
<body>
<div class="app-shell">
<aside class="panel-shell input-shell">
<header class="app-header">
<h1 class="caps-bold-heading">Resident Pro</h1>
<div class="header-actions" role="toolbar" aria-label="Form actions">
<button id="undoButton" class="header-toolbar-btn" type="button" title="Undo" aria-label="Undo last change" disabled>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 0 1 8 8v2M3 10l6 6m-6-6 6-6"></path>
</svg>
</button>
<button id="redoButton" class="header-toolbar-btn" type="button" title="Redo" aria-label="Redo last change" disabled>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 10H11a8 8 0 0 0-8 8v2m18-10-6 6m6-6-6-6"></path>
</svg>
</button>
<button id="clearButton" class="header-toolbar-btn danger" type="button" title="Reset" aria-label="Reset form">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0 1 16.138 21H7.862a2 2 0 0 1-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v3M4 7h16"></path>
</svg>
</button>
</div>
</header>
<main id="inputContainer">
<form id="sessionForm" class="form-stack entrance-animate" autocomplete="off">
<div class="field date-field" style="--i:0">
<span class="field-heading">
<label for="dateInput" class="form-label-bold" style="margin-bottom: 0;">Date</label>
<span class="date-pills" aria-label="Quick date options">
<button type="button" class="date-pill" data-date-offset="-1">Yesterday</button>
<button type="button" class="date-pill" data-date-offset="0">Today</button>
<button type="button" class="date-pill" data-date-offset="1">Tomorrow</button>
</span>
</span>
<input id="dateInput" name="date" type="date" class="form-input-m3">
</div>
<label class="field topic-field" style="--i:1">
<span class="form-label-bold">Topic</span>
<input id="topicInput" name="topic" type="text" class="form-input-m3" placeholder="">
</label>
<div class="field" style="--i:2">
<span class="form-label-bold">Type</span>
<button id="typePickerButton" class="attendance-button action-btn empty-picker" type="button" aria-haspopup="dialog" aria-expanded="false">
<span id="typePickerValue"></span>
</button>
</div>
<div class="field" style="--i:3">
<span class="form-label-bold">Presenter</span>
<button id="presenterPickerButton" class="attendance-button action-btn empty-picker" type="button" aria-haspopup="dialog" aria-expanded="false">
<span id="presenterPickerValue"></span>
</button>
</div>
<div class="field" style="--i:4">
<span class="form-label-bold">Senior Resident</span>
<button id="seniorPickerButton" class="attendance-button action-btn empty-picker" type="button" aria-haspopup="dialog" aria-expanded="false">
<span id="seniorPickerValue"></span>
</button>
</div>
<div class="field" style="--i:5">
<span class="form-label-bold">Moderator</span>
<button id="moderatorPickerButton" class="attendance-button action-btn empty-picker" type="button" aria-haspopup="dialog" aria-expanded="false">
<span id="moderatorPickerValue"></span>
</button>
</div>
<div class="field attendance-field" style="--i:6">
<span class="form-label-bold">Resident Attendance</span>
<button id="residentAttendanceButton" class="attendance-button action-btn empty-picker" type="button" aria-haspopup="dialog" aria-expanded="false">
<span></span>
<strong id="residentAttendanceCount">0</strong>
</button>
</div>
</form>
</main>
<footer class="developer-credit">
Developed by Dr. Vaibhav Meena
<div class="shortcut-help" title="Keyboard shortcuts">
<button type="button" class="shortcut-help-btn" aria-label="Keyboard shortcuts">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M4.5 5.25A2.25 2.25 0 0 0 2.25 7.5v9A2.25 2.25 0 0 0 4.5 18.75h15A2.25 2.25 0 0 0 21.75 16.5v-9A2.25 2.25 0 0 0 19.5 5.25h-15Zm-.75 2.25c0-.414.336-.75.75-.75h15c.414 0 .75.336.75.75v9a.75.75 0 0 1-.75.75h-15a.75.75 0 0 1-.75-.75v-9Zm3.5 2a.75.75 0 0 0-.75.75v.5a.75.75 0 0 0 1.5 0v-.5a.75.75 0 0 0-.75-.75Zm3.25 0a.75.75 0 0 0-.75.75v.5a.75.75 0 0 0 1.5 0v-.5a.75.75 0 0 0-.75-.75Zm3.25 0a.75.75 0 0 0-.75.75v.5a.75.75 0 0 0 1.5 0v-.5a.75.75 0 0 0-.75-.75Zm3.25 0a.75.75 0 0 0-.75.75v.5a.75.75 0 0 0 1.5 0v-.5a.75.75 0 0 0-.75-.75ZM6.5 13a.75.75 0 0 0-.75.75v.5a.75.75 0 0 0 .75.75h11a.75.75 0 0 0 .75-.75v-.5a.75.75 0 0 0-.75-.75h-11Z"/>
</svg>
</button>
<div class="shortcut-tooltip" role="tooltip">
<p class="shortcut-tooltip-title">Keyboard shortcuts</p>
<ul>
<li><span>Ctrl + Alt + D</span><span>Copy G-Doc data</span></li>
<li><span>Ctrl + Z / Ctrl + Y</span><span>Undo / Redo</span></li>
<li><span>Ctrl + Backspace</span><span>Reset form</span></li>
<li><span>Alt + T</span><span>Focus Topic</span></li>
</ul>
</div>
</div>
<a href="mailto:vaibhav.ganesh51@gmail.com" title="Email Developer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M3 4a2 2 0 00-2 2v1.161l8.441 4.221a1.25 1.25 0 001.118 0L19 7.162V6a2 2 0 00-2-2H3z" />
<path d="M19 8.839l-7.77 3.885a2.75 2.75 0 01-2.46 0L1 8.839V14a2 2 0 002 2h14a2 2 0 002-2V8.839z" />
</svg>
</a>
<button id="mobileCopyButton" title="Copy Mobile Number" aria-label="Copy mobile number" class="shortcut-help-btn" type="button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M7 2.75A2.75 2.75 0 0 0 4.25 5.5v13A2.75 2.75 0 0 0 7 21.25h10a2.75 2.75 0 0 0 2.75-2.75v-13A2.75 2.75 0 0 0 17 2.75H7zm0 1.5h10c.69 0 1.25.56 1.25 1.25v13c0 .69-.56 1.25-1.25 1.25H7c-.69 0-1.25-.56-1.25-1.25v-13c0-.69.56-1.25 1.25-1.25zm5 13.25a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5z"/>
</svg>
</button>
<button id="upiCopyButton" title="Copy UPI ID" aria-label="Copy UPI ID" class="shortcut-help-btn" type="button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>
</button>
</footer>
</aside>
<section class="panel-shell report-shell" aria-labelledby="reportTitle">
<header class="report-header" id="liveReportHeader">
<h2 id="reportTitle" class="caps-bold-heading">Live Report</h2>
<div class="report-actions">
<a class="attendance-link-icon action-btn" href="https://wingedwit.github.io/Attendance-Pro/" target="_blank" rel="noopener noreferrer" title="Open Attendance Pro" aria-label="Open Attendance Pro in new tab">A</a>
<button id="copyDocButton" class="download-button action-btn primary" type="button" title="Copy G-Doc Data" aria-label="Copy G-Doc Data">
<svg id="copyDocIcon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v12m0 0l4-4m-4 4l-4-4M5 21h14"></path>
</svg>
</button>
</div>
</header>
<div id="outputPanel">
<article id="liveReport" aria-live="polite"></article>
</div>
</section>
<div id="toast" role="status" aria-live="polite"></div>
</div>
<div id="residentModal" class="modal-backdrop hidden" role="dialog" aria-modal="true" aria-labelledby="residentModalTitle">
<section class="modal-panel">
<header class="modal-header">
<h2 id="residentModalTitle" class="caps-bold-heading">Resident Attendance</h2>
<label class="modal-select-all">
<input id="residentSelectAll" type="checkbox">
<span>Select all</span>
</label>
</header>
<div id="residentChecklist" class="resident-checklist"></div>
<footer class="modal-footer">
<button id="residentClearButton" class="modal-action secondary" type="button">Clear</button>
<button id="residentDoneButton" class="modal-action primary" type="button">Done</button>
</footer>
</section>
</div>
<div id="pickerModal" class="modal-backdrop hidden" role="dialog" aria-modal="true" aria-labelledby="pickerModalTitle">
<section class="modal-panel">
<header class="modal-header">
<h2 id="pickerModalTitle" class="caps-bold-heading">Select</h2>
<button id="pickerModalClose" class="header-icon-button" type="button" title="Close" aria-label="Close picker">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 6l12 12M18 6 6 18"></path>
</svg>
</button>
</header>
<div id="pickerChecklist" class="picker-checklist"></div>
<footer class="modal-footer">
<button id="pickerClearButton" class="modal-action secondary" type="button">Clear</button>
<button id="pickerDoneButton" class="modal-action primary" type="button">Done</button>
</footer>
</section>
</div>
<script src="./lib/date-utils.js" defer></script>
<script src="./lib/storage-utils.js" defer></script>
<script src="./lib/resident-logic.js" defer></script>
<script src="./lib/app-config.js" defer></script>
<script src="./lib/ui-utils.js" defer></script>
<script src="./lib/report-ui.js" defer></script>
<script src="./app.js" defer></script>
</body>
</html>