-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
376 lines (326 loc) · 21.4 KB
/
index.html
File metadata and controls
376 lines (326 loc) · 21.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="./images/favicon3.ico">
<link rel="manifest" href="./manifest6.json">
<meta name="theme-color" content="#8b5cf6">
<link rel="apple-touch-icon" href="./images/icon-192-paritta.png">
<link href="./css/css.css" rel="stylesheet">
<link href="./css/vi.css" rel="stylesheet">
<title>Paritta Chanting</title>
<script src="./js/jquery-1.10.2.min.js"></script>
<script src="./js/prdpd_i2h.js"></script>
<script src="./js/eprdpd_ebts.js"></script>
<script src="./js/prdpd_deconstructor.js"></script>
<script src="./js/chart.js"></script>
</style>
</head>
<body>
<div class="container" id="main-container">
<div class="top-nav">
<button class="btn-darkmode" onclick="toggleTheme()"><i class="fas fa-moon"></i></button>
<div class="nav-controls">
<button class="btn-nav" onclick="changeSection(-1)"><i class="fas fa-angle-left"></i></button>
<select id="section-select" onchange="selectSection()"></select>
<button class="btn-nav" onclick="changeSection(1)"><i class="fas fa-angle-right"></i></button>
<div id="top-right-controls" style="display: flex; gap: 3px; align-items: center;">
<button class="btn-nav" onclick="openHelpModal()" title="Trợ giúp">
<i class="fas fa-circle-info"></i>
</button>
</div>
</div>
</div>
<div id="section-achievement-banner">
<h3>
<i class="fas fa-wreath-laurel"></i>
Sutadhara
<i class="fas fa-wreath-laurel"></i>
</h3>
<div style="font-size:12px; margin-top:5px;">Certification of Achievement in Memorizing this Sutta</div>
</div>
<div id="recitation-dashboard">
<div id="dashboard-grid" class="dashboard-grid">
</div>
<div class="dashboard-stats">
<div class="progress-bar-container">
<span style="width: 120px;">Section Progress:</span>
<div class="progress-track"><div id="bar-session" class="progress-fill" style="background-color: #3498db;"></div></div>
<span id="text-session">0%</span>
</div>
<div class="progress-bar-container">
<span style="width: 120px;">Memorized Total:</span>
<div class="progress-track"><div id="bar-total" class="progress-fill" style="background-color: #27ae60;"></div></div>
<span id="text-total">0%</span>
</div>
<div class="progress-bar-container" title="Click the pen icon to edit the target">
<span style="width: 120px;">Daily Goal: </span>
<div class="progress-track">
<div id="bar-daily" class="progress-fill" style="background-color: #e67e22;"></div>
</div>
<span id="text-daily" style="min-width: 80px; text-align: right;">
0/100 XP
</span>
</div>
</div>
</div>
<div class="section-header-wrapper">
<h2 id="section-title">Loading...</h2>
<i id="btn-section-info" class="fas fa-circle-info btn-info-icon" onclick="showSectionInfo()" title="About this Sutta"></i>
</div>
<h2 id="section-title-vn" style="font-weight: normal; font-size: 18px; margin-top: 0; opacity: 0.9;"></h2>
<div id="display-area" class="text-content"></div>
</div>
<div class="bottom-bar">
<div class="bar-main-row">
<audio id="audioPlayer" controls>Your browser doesn't support audio.</audio>
<div class="controls-cluster">
<button id="btn-dictionary" class="icon-btn" onclick="togglePaliLookup()" title="Pali Lookup"><i class="fas fa-book-open"></i></button>
<button id="btn-stats" class="icon-btn" onclick="openStatsModal()" title="Practice Statistics" style="background-color: #4834d4;">
<i class="fas fa-chart-pie"></i>
</button>
<button id="settings-btn" class="icon-btn btn-settings" onclick="toggleSettings()" title="Settings"><i class="fas fa-gear"></i></button>
<button id="btn-exit-recitation" class="icon-btn" onclick="exitRecitation()" title="Exit Recitation"><i class="fas fa-xmark"></i></button> <button id="btn-loop" class="icon-btn" onclick="toggleLoopSentence()" title="Loop current sentence">
<i class="fas fa-arrows-repeat"></i>
</button> <button id="recitation-toggle-btn" class="icon-btn btn-recitation" onclick="toggleRecitationAction()" title="Recitation"><i class="fas fa-microphone"></i></button>
<button id="btn-random" class="icon-btn" onclick="randomSection()" title="Random Training Rule">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
<circle cx="12" cy="12" r="9"></circle>
<circle cx="12" cy="12" r="2.5"></circle>
<line x1="12" y1="3" x2="12" y2="9.5"></line> <line x1="12" y1="14.5" x2="12" y2="21"></line> <line x1="3" y1="12" x2="9.5" y2="12"></line> <line x1="14.5" y1="12" x2="21" y2="12"></line> <line x1="5.64" y1="5.64" x2="10.23" y2="10.23"></line> <line x1="13.77" y1="13.77" x2="18.36" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="13.77" y2="10.23"></line>
<line x1="10.23" y1="13.77" x2="5.64" y2="18.36"></line>
</svg>
</button>
<button id="btn-english-toggle" class="icon-btn" onclick="toggleEnglish()" title="Show English translation">EN</button>
<button class="icon-btn btn-nav-recitation" onclick="navigateRecitation(-1)" title="Previous"><i class="fas fa-angles-left"></i></button>
<button class="icon-btn btn-nav-recitation" onclick="navigateRecitation(1)" title="Next"><i class="fas fa-angles-right"></i></button>
</div>
</div>
<div id="settings-panel" class="settings-panel">
<div class="settings-content">
<div class="setting-group">
<span style="font-size:13px; font-weight:600">Hide texts:</span>
<input type="range" id="difficulty" min="10" max="90" value="40" oninput="updateLabel(this.value)" style="width:80px">
<span id="difficulty-label" style="font-size:12px">40%</span>
<button class="btn-sm" onclick="hideRandomWords()" style="background:#d35400; color:white;">Hide</button>
<button class="btn-sm" onclick="resetText(true)" style="background:#7f8c8d; color:white;">Show</button>
</div>
<div class="setting-group">
<span style="font-size:13px; font-weight:600">Speed:</span>
<button id="btn-show-speed" class="btn-sm" onclick="toggleSpeedControl()" style="background:#2980b9; color:white;"><i class="far fa-clock"></i></button><span id="btn-show-speed2" style="font-size:13px; font-weight:600"> (Synchronized)</span>
<div id="speed-control-area" style="display:none; align-items:center; gap:5px;">
<input type="range" id="recitation-interval" min="1" max="10" step="0.5" value="3" oninput="updateRecitationInterval(this.value)" style="width:80px">
<span id="recitation-interval-label" style="font-size:12px">3.0s</span>
<button class="btn-sm" onclick="resetSpeedDefault()" style="background:#6a4c93; color:white;" title="Use default values">Use default</button>
</div>
</div>
</div>
</div>
</div>
<div id="simple-info-modal" class="simple-modal-overlay">
<div class="simple-modal-content">
<div class="simple-modal-header">
<h3 id="simple-modal-title">Sutta Info</h3>
<button class="btn-close-simple" onclick="closeSimpleInfoModal()"><i class="fas fa-times"></i></button>
</div>
<div id="simple-modal-body" class="simple-modal-body">
</div>
</div>
</div>
<div id="help-modal" class="help-modal-overlay" onclick="closeHelpModal(event)">
<div class="help-modal-content">
<div class="help-modal-header">
<h3>Paritta Chanting</h3>
<button class="btn-close-help" onclick="closeHelpModal(event)"><i class="fas fa-xmark"></i></button>
</div>
<div class="help-modal-body">
<p>This is a web-based app & tool designed to support practitioners in listening to, learning, and reciting the <b>Paritta Protection Suttas</b> on a daily basis. It features synchronized text & audio chanting for precise follow-along practice, includes memorization drills by hiding random words, and an interactive dashboard to track memorization progress.</p>
<h4><i class="fas fa-book-open-reader"></i> User Guide</h4>
<h4>1. Navigation & Basics</h4>
<ul>
<li><b>Theme Toggle (<i class="fas fa-moon"></i>/<i class="fas fa-sun-bright"></i>):</b> Switch between Light and Dark modes.</li>
<li><b>Section Selector:</b> Jump to a specific sutta (e.g., Maṅgalasutta, Mettasutta).</li>
<li><b>Random (<i class="far fa-dharmachakra"></i>):</b> Jump to a random sutta to test your recall.</li>
<li><b>Dictionary (<i class="fas fa-book-open"></i>):</b> Toggle to enable Pāli lookup by hovering over words. In <i>Recitation Mode</i>, it reveals the rhythmic meter (<i class="fas fa-dash"></i> for long, <i class="fas fa-dot"></i> for short) following the classical <b>Vuttodaya</b> standards. Click on the popup will also reveal the definition.</li>
<li><b>Statistics (<i class="fas fa-chart-pie"></i>):</b> Click the button to view XP charts, set your <b>Daily Goal</b> (<i class="fas fa-pen"></i>), and track your practice history by Week/Month.</li>
</ul>
<h4>2. Recitation Mode (<i class="fas fa-microphone"></i>)</h4>
<p>Click the Mic button to enter Recitation Mode. The text enlarges and syncs with the audio.</p>
<ul>
<li><b>Status:</b> Green = Auto-playing; Blue = Paused/Manual.</li>
<li><b>Navigation:</b> Use <b>«</b> and <b>»</b> to jump lines.</li>
</ul>
<h4>3. Loop Mode (Repetition)</h4>
<ul>
<li><b>Single Loop:</b> Click the Loop button (<i class="fas fa-arrows-repeat"></i>) to repeat the current sentence indefinitely.</li>
<li><b>Multi-Loop (Custom Sequence):</b>
<ul>
<li>In the Dashboard Grid (colored boxes), <b>Long Press (Hold)</b> a box to select it. It will turn Red.</li>
<li>Select multiple boxes to create a custom loop. The player will cycle through only the selected lines.</li>
<li>Long press again to deselect.</li>
</ul>
</li>
<li><b>Default Loop:</b> When not clicked upon, the Loop button will repeat the current section audio.</li>
</ul>
<h4>4. Mastery Dashboard & Progress</h4>
<p>Located above the text in Recitation Mode, this dashboard visualizes your memory retention.</p>
<ul>
<li><b>Heatmap Grid:</b> Each box represents a line of text.
<ul>
<li><b>Gray:</b> Not memorized.</li>
<li><b>Green:</b> Memorized.</li>
</ul>
</li>
<li><b>Marking Progress:</b> When a line is active, a <b>"Memorized"</b> checkbox appears below the text. Check this to mark the line as complete (100%).</li>
<li><b>Statistics:</b>
<ul>
<li><b>Section Progress:</b> Completion % of the current Sutta.</li>
<li><b>Memorized Total:</b> Completion % of all the Paritta Suttas.</li>
</ul>
</li> </ul>
<h4>5. Review & Quiz System <i class="fas fa-clipboard-check"></i></h4>
<p>To ensure solid memorization, the app features an integrated multiple-choice quiz system:</p>
<ul>
<li><b>Verifying "Memorized":</b> When you tick the <i>"Memorized"</i> checkbox next to a line, a mini-quiz appears. You must correctly select the missing word for the system to officially mark that line as memorized.</li>
<li><b>"Practicing" Button (<i class="fas fa-bullseye-arrow"></i>):</b> Click to perform a quick exercise (Fill-in-the-blanks & Translation) for that specific verse to reinforce your memory.</li>
<li><b>Comprehensive Test:</b> Once you have memorized 100% of the lines in a section, the <b>"Start Test"</b> button will appear. You must pass this random test (10 questions) to receive the Certificate of Achievement for that section.</li>
<li><b>Custom Review & Practice:</b> You can select specific cells on the progress grid (by <b>long-pressing</b> them). The system will then generate a custom quiz consisting only of the lines you selected for review.</li>
<li><b>Achievements:</b> You will receive a "Sutadhara" banner for completing a sutta, and a "Dhammadhara" Medal Modal for completing the entire text.</li>
</ul>
<h4>6. Settings (<i class="fas fa-gear"></i>)</h4>
<ul>
<li><b>Hide Texts:</b> Use the slider to hide random words (10%-90%) to test your memory. Click hidden boxes to reveal them.</li>
<li><b>Speed Control (<i class="far fa-clock"></i>):</b> Override the audio synchronization to set a fixed speed (e.g., 5 seconds per line) for practicing recitation at a steady, slower, or faster pace without audio sync.</li>
</ul>
<h4><i class="fas fa-floppy-disk"></i> Use Offline</h4>
<p>
To Use Offline, download the Apk file for Android, Zip file for PC, or ZIM file for Kiwix.
(Learn more about Kiwix: <a href="https://kiwix.org/en/" target="_blank">kiwix.org</a>).
</p>
<p>Download Link & Source Code: <a href="https://github.com/buddhanussati/paritta-chanting"><b>here</b></a></p>
<h4><i class="fas fa-scale-balanced"></i> License</h4>
<p>
Licensed under <a href="https://creativecommons.org/licenses/by-nc/4.0/legalcode" target="_blank">CC BY-NC 4.0</a>.
Free to Share and Adapt for <b>non-commercial</b> purposes.
</p>
<button class="btn-bottom-close" onclick="closeHelpModal(event)">Close</button>
</div>
</div></div>
<div id="grand-achievement-modal" class="modal-overlay">
<div class="modal-content">
<div class="medal-icon">
<i class="far fa-wreath-laurel"></i>
</div>
<div class="modal-title">Dhammadhara</div>
<p class="modal-text">
Certification of Achievement: Full Memorization of the <b>Paritta Suttas</b><br>
<span style="display: block; color: #b35900; font-weight: 600; font-style: italic; margin-top: 15px;">
"The disciples of Gotama,<br>
always well-awake,<br>
who day and night<br>
constantly recollect the teaching."
</span>
</p>
<button class="btn-close-modal" onclick="closeAchievementModal()">Sādhu! Sādhu!</button>
</div>
</div>
<div id="quiz-modal" class="modal-overlay">
<div class="modal-content quiz-content">
<div class="quiz-header">
<h3 id="quiz-title">Memory Test</h3>
<div id="quiz-progress">Question 1/2</div>
</div>
<div id="quiz-body">
<p id="quiz-instruction-text" class="quiz-instruction">Select the words below to fill in the blanks:</p>
<div id="quiz-sentence-area" class="quiz-sentence-area">
</div>
<div id="quiz-options-area" class="quiz-options-area">
</div>
</div>
<div id="quiz-feedback" class="quiz-feedback" style="display:none;"></div>
<div class="quiz-footer">
<button id="btn-quiz-cancel" class="btn-secondary" onclick="closeQuizModal()">Cancel</button>
<button id="btn-quiz-reset" class="btn-warning" onclick="resetCurrentQuestion()" style="display:none;">Reset</button>
<button id="btn-quiz-next" class="btn-primary" onclick="nextQuizQuestion()" disabled>Continue</button>
</div>
</div>
</div>
<div id="stats-modal" class="modal-overlay">
<div class="modal-content stats-content" style="max-width: 900px; width: 95%; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; padding: 0;">
<div class="quiz-header" style="padding: 15px 20px; margin: 0; flex-shrink: 0; border-bottom: 1px solid rgba(128,128,128, 0.3); display: flex; justify-content: space-between; align-items: center; background: inherit;">
<h3 style="margin: 0;">Practice Statistics</h3>
<button class="btn-close-simple" onclick="closeStatsModal()"><i class="fas fa-times"></i></button>
</div>
<div class="stats-body" style="padding: 20px; overflow-y: auto; flex-grow: 1;">
<div class="dashboard-grid" style="display: grid; grid-template-columns: 1fr; gap: 20px;">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px;">
<div class="card">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
<h4 id="breakdown-title" style="margin: 0; font-size: 16px;">Overview</h4>
<select id="report-range-select" class="form-control" style="width: auto; padding: 5px; font-size: 13px; height: 32px;" onchange="renderStatsCharts(true)">
<option value="all">All Time</option>
<option value="today">Today</option>
<option value="yesterday">Yesterday</option>
<option value="this_week" selected>This Week</option>
<option value="last_week">Last Week</option>
<option value="this_month">This Month</option>
<option value="last_month">Last Month</option>
</select>
</div>
<div style="height: 300px; display:flex; justify-content:center;">
<canvas id="sectionXPChart"></canvas>
</div>
</div>
<div class="card">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
<button class="btn btn-secondary" style="padding: 5px 10px;" onclick="changeStatsWeek(-1)"><i class="fas fa-chevron-left"></i></button>
<h4 id="weekly-report-title" style="margin: 0; font-size: 16px;">Weekly Focus</h4>
<button class="btn btn-secondary" style="padding: 5px 10px;" onclick="changeStatsWeek(1)"><i class="fas fa-chevron-right"></i></button>
</div>
<div style="height: 300px;">
<canvas id="weeklyXPChart"></canvas>
</div>
</div>
</div>
<div class="card">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
<button class="btn btn-secondary" style="padding: 5px 10px;" onclick="changeStatsMonth(-1)"><i class="fas fa-chevron-left"></i></button>
<h4 id="monthly-report-title" style="margin: 0; font-size: 16px;">Monthly Focus</h4>
<button class="btn btn-secondary" style="padding: 5px 10px;" onclick="changeStatsMonth(1)"><i class="fas fa-chevron-right"></i></button>
</div>
<div style="height: 300px;">
<canvas id="monthlyXPChart"></canvas>
</div>
</div>
<div class="card" style="margin-top: 5px;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
<button class="btn btn-secondary" style="padding: 5px 10px;" onclick="changeStatsMonth(-1)"><i class="fas fa-chevron-left"></i></button>
<h4 id="cal-month-year" style="margin: 0; font-size: 16px; text-transform: capitalize;">Month Year</h4>
<button class="btn btn-secondary" style="padding: 5px 10px;" onclick="changeStatsMonth(1)"><i class="fas fa-chevron-right"></i></button>
</div>
<div class="calendar-grid" id="calendar-grid"></div>
</div>
</div>
</div>
</div>
</div>
<div id="daily-stats-modal" class="modal-overlay" style="z-index: 10005;">
<div class="modal-content stats-content" style="max-width: 450px; width: 95%; padding: 0;">
<div class="quiz-header" style="padding: 15px 20px; margin: 0; border-bottom: 1px solid rgba(128,128,128, 0.3); display: flex; justify-content: space-between; align-items: center;">
<h3 id="daily-modal-title" style="margin: 0;">Day Details</h3>
<button class="btn-close-simple" onclick="closeDailyStatsModal()"><i class="fas fa-times"></i></button>
</div>
<div class="stats-body" style="padding: 20px;">
<div class="card">
<div style="height: 300px; display:flex; justify-content:center; position: relative;">
<canvas id="dailyXPChart"></canvas>
</div>
</div>
</div>
</div>
</div>
<script src="./js/en-paritta.js"></script>
</body>
</html>