-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
373 lines (316 loc) · 21.6 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Mezcel, mezcel@hotmail.com">
<meta name="description" content="Electron Express Vulgate Rosary"/>
<meta name="subject" content="religion and spirituality">
<meta name="url" content="https://github.com/mezcel/electron-container">
<link rel="icon" href="myAssets/img/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="myAssets/img/favicon.ico" type="image/x-icon" />
<script>
// i need this for node for some reasion with stand alone electron
window.$ = window.jQuery = require('jquery');
</script>
<!-- dom style -->
<link rel="stylesheet" href="./myAssets/css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="./myAssets/css/liturgical-colors.min.css" />
<link rel="stylesheet" href="./myAssets/css/myStyle.css" />
<!-- application framework -->
<script src="./myAssets/js/jquery-1.11.3.min.js"></script>
<script src="./myAssets/js/jquery.mobile-1.4.5.min.js"></script>
<!-- my dom Application data and instructions -->
<script src="./myAssets/js/myScript.js"></script>
<script src="./myAssets/js/pfm-calculation.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="./myAssets/js/myMessengerScript.js"></script>
</head>
<body id="entireBody" class="ui-page-theme-a ui-content">
<!-- splash page / mane registration -->
<div data-role="page" id="splashpage" data-theme="d">
<div style="text-align: center" data-role="header"><h3>Welcome Login</h3></div>
<div data-role="main" class="ui-content">
<input id="myName" value="" type="text" placeholder="enter a user name" style="text-align: center">
<br>
<a id="btnUsrInput" data-role="button" class="ui-btn ui-corner-all" href="#coverpage" data-transition="flip"><h3>Enter</h3></a>
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<center><font size='2' color='lightgray'>Scripture Rosary hosted on NodeJs</font></center>
</div>
</div>
<!-- cover page -->
<a data-role="page" id="coverpage" href="#rosary" data-transition="fade" class="coverImg" style="text-decoration:none" >
<p class="ui-bar coverpageInfo" style="text-decoration:none">Scripture Rosary with NAB and Vulgate Translations</p>
<p class="ui-bar coverpageInfo" style="text-decoration:none; position: absolute; bottom: 0;">by Mezcel</p>
</a>
<!-- main rosary ui page -->
<div data-role="page" id="rosary" class="mySwipeClass">
<!-- header top bar -->
<div data-role="header" data-position="fixed" >
<!-- App Header -->
<a id="btnHomePanel" href="#homePanel" class="ui-btn ui-corner-all ui-icon-gear ui-btn-icon-left">Settings</a>
<h1 id="appHeaderTitle">
<em id="mystery">Express JQM Rosary</em> <sub class="mysteryTranslationIndicator"></sub>
<center><img class="headerIcon" src="myAssets/img/favicon.ico"></center>
</h1>
<a id="btnInfoPanel" href="#infoPanel" class="ui-btn ui-corner-all ui-icon-star ui-btn-icon-left">Content</a>
</div>
<!-- Right Panel - Mysteries and Scriptures -->
<div data-role="panel" id="infoPanel" data-position="right">
<h4>Mysteries</h4>
<div id="collapsibleMystery" data-role="collapsible-set">
<div data-role="collapsible">
<h4>Joyful Mysteries</h4>
<ul data-role="listview">
<li><a href="#myDialogPopUp" data-rel="popup" data-position-to="window" data-transition="fade" onclick="fillMysteryInfoContent(1, 7)">- Annunciation</a></li>
<li><a href="#myDialogPopUp" data-rel="popup" data-position-to="window" data-transition="fade" onclick="fillMysteryInfoContent(2, 21)">- Visitation</a></li>
<li><a href="#myDialogPopUp" data-rel="popup" data-position-to="window" data-transition="fade" onclick="fillMysteryInfoContent(3, 35)">- Nativity</a></li>
<li><a href="#myDialogPopUp" data-rel="popup" data-position-to="window" data-transition="fade" onclick="fillMysteryInfoContent(4, 49)">- Presentation</a></li>
<li><a href="#myDialogPopUp" data-rel="popup" data-position-to="window" data-transition="fade" onclick="fillMysteryInfoContent(5, 63)">- Finding Jesus</a></li>
</ul>
</div>
<div data-role="collapsible">
<h4>Luminous Mysteries</h4>
<ul data-role="listview">
<li><a href="#myDialogPopUp" data-rel="popup" data-position-to="window" data-transition="fade" onclick="fillMysteryInfoContent(6, 86)">- Baptism of Jesus</a></li>
<li><a href="#myDialogPopUp" data-rel="popup" data-position-to="window" data-transition="fade" onclick="fillMysteryInfoContent(7, 100)">- Wedding at Cana</a></li>
<li><a href="#myDialogPopUp" data-rel="popup" data-position-to="window" data-transition="fade" onclick="fillMysteryInfoContent(8, 114)">- Kingdom of God</a></li>
<li><a href="#myDialogPopUp" data-rel="popup" data-position-to="window" data-transition="fade" onclick="fillMysteryInfoContent(9, 128)">- Transfiguration</a></li>
<li><a href="#myDialogPopUp" data-rel="popup" data-position-to="window" data-transition="fade" onclick="fillMysteryInfoContent(10, 142)">- Institution of the Eucharist</a></li>
</ul>
</div>
<div data-role="collapsible">
<h4>Sorrowful Mysteries</h4>
<ul data-role="listview">
<li><a href="#myDialogPopUp" data-rel="popup" data-position-to="window" data-transition="fade" onclick="fillMysteryInfoContent(11, 165)">- Agony in the Garden</a></li>
<li><a href="#myDialogPopUp" data-rel="popup" data-position-to="window" data-transition="fade" onclick="fillMysteryInfoContent(12, 179)">- Scourging at the Pillar</a></li>
<li><a href="#myDialogPopUp" data-rel="popup" data-position-to="window" data-transition="fade" onclick="fillMysteryInfoContent(13, 193)">- Crowning with Thorns</a></li>
<li><a href="#myDialogPopUp" data-rel="popup" data-position-to="window" data-transition="fade" onclick="fillMysteryInfoContent(14, 207)">- Carrying of the Cross</a></li>
<li><a href="#myDialogPopUp" data-rel="popup" data-position-to="window" data-transition="fade" onclick="fillMysteryInfoContent(15, 221)">- Crucifixion and Death</a></li>
</ul>
</div>
<div data-role="collapsible">
<h4>Glorious Mysteries</h4>
<ul data-role="listview">
<li><a href="#myDialogPopUp" data-rel="popup" data-position-to="window" data-transition="fade" onclick="fillMysteryInfoContent(16, 244)">- Resurrection</a></li>
<li><a href="#myDialogPopUp" data-rel="popup" data-position-to="window" data-transition="fade" onclick="fillMysteryInfoContent(17, 258)">- Ascension</a></li>
<li><a href="#myDialogPopUp" data-rel="popup" data-position-to="window" data-transition="fade" onclick="fillMysteryInfoContent(18, 272)">- The Holy Spirit</a></li>
<li><a href="#myDialogPopUp" data-rel="popup" data-position-to="window" data-transition="fade" onclick="fillMysteryInfoContent(19, 286)">- Assumption of Mary</a></li>
<li><a href="#myDialogPopUp" data-rel="popup" data-position-to="window" data-transition="fade" onclick="fillMysteryInfoContent(20, 300)">- Coronation</a></li>
</ul>
</div>
</div>
<h4>Sacred Scriptures</h4>
<div id="collapsibleRefferences" data-role="collapsible-set">
<div data-role="collapsible">
<h4>Refference</h4>
<!-- JSON bible list -->
<ul data-role="listview" id="bible-list" data-divider-theme="b"></ul>
</div>
<div data-role="collapsible">
<h4>Prayers</h4>
<!-- JSON prayer list -->
<ul data-role="listview" id="prayer-list" data-divider-theme="b"></ul>
</div>
<div data-role="collapsible">
<h4>Catechism</h4>
<ul data-role="listview">
<li data-theme="b" class="ui-bar">Doctrine Refferences</li>
<li><a href="#refferencesPage" class="ui-btn ui-icon-info ui-btn-icon-right" data-rel="page" data-position-to="window" data-transition="fade" onclick="fillAppInfoContent2(0)">- Drafting</a></li>
<li><a href="#refferencesPage" class="ui-btn ui-icon-info ui-btn-icon-right" data-rel="page" data-position-to="window" data-transition="fade" onclick="fillAppInfoContent2(1)">- Saint Mary</a></li>
<li><a href="#refferencesPage" class="ui-btn ui-icon-info ui-btn-icon-right" data-rel="page" data-position-to="window" data-transition="fade" onclick="fillAppInfoContent2(8)">- QBVM</a></li>
</ul>
</div>
<div data-role="collapsible">
<h4>Bible</h4>
<ul data-role="listview">
<li data-theme="b" class="ui-bar">Versions</li>
<li><a href="#refferencesPage" class="ui-btn ui-icon-info ui-btn-icon-right" data-rel="page" data-position-to="window" data-transition="fade" onclick="fillAppInfoContent2(6)">- NAB</a></li>
<li><a href="#refferencesPage" class="ui-btn ui-icon-info ui-btn-icon-right" data-rel="page" data-position-to="window" data-transition="fade" onclick="fillAppInfoContent2(7)">- Vulgate</a></li>
</ul>
</div>
</div>
</div>
<!-- Left Panel - About and Audio Option -->
<div data-role="panel" id="homePanel" data-position="left">
<b>About:</b>
<div id="collapsibleAbout" data-role="collapsible">
<h4>Development Model</h4>
<ul data-role="listview">
<li><a href="#myDialogPopUp" class="ui-btn ui-icon-info ui-btn-icon-right" data-rel="popup" data-position-to="window" data-transition="fade" onclick="fillAppInfoContent(2)">- Objective</a></li>
<li><a id= "btnGithub" href="#myDialogPopUp" class="ui-btn ui-icon-info ui-btn-icon-right" data-rel="popup" data-position-to="window" data-transition="fade" onclick="fillAppInfoContent(5)">- Source Code</a></li>
<li><a id="btnShortcuts" href="#myDialogPopUp" class="ui-btn ui-corner-all ui-icon-grid ui-btn-icon-right" data-rel="popup" data-position-to="window" data-transition="fade" onclick="fillAppInfoContent(9)">- Shortcut Table</a></li>
</ul>
</div>
<b>Settings:</b>
<div id="collapsibleSettings" data-role="collapsible-set">
<!-- audio -->
<div data-role="collapsible">
<h4>Audio</h4>
<hr>
<audio id="audioAveMaria" class="audioStyle" controls loop>
<source src="myAssets/audio/JOHN_MICHEL_CELLO-BACH_AVE_MARIA.ogg" type="audio/mpeg">
</audio>
<hr>
<font size='1' color='gray'><i>"Ave Maria"</i>, by Charles Gounod, was based off of Johann Sebastian Bach's Prelude No.1 in C Major, Well-Tempered Clavier Book I (BWV 846). Performed by John Michel.</font>
</div>
<!-- color themes -->
<div data-role="collapsible">
<h4>Colors</h4>
<form id="darklight">
<fieldset data-role="controlgroup" data-type="horizontal" id="theme-setting">
<input type="checkbox" name="theme" id="daynightSwitch" data-role="flipswitch" data-on-text="day" data-off-text="night" checked> day/night
</fieldset>
</form>
Liturgical Colors:
<div id="liturgicalColors" data-role="controlgroup">
<fieldset data-role="controlgroup" data-mini="true">
<input type="radio" name="rdoLiturgicalColors" id="feastRed" value="liturgical1" />
<label for="feastRed">Feast Days</label> <!-- red -->
<input type="radio" name="rdoLiturgicalColors" id="marianBlue" value="liturgical2" />
<label for="marianBlue">Marian Blue</label> <!-- blue -->
<input type="radio" name="rdoLiturgicalColors" id="adventPurple" value="liturgical3" />
<label for="adventPurple">Advent / Lent</label> <!-- purple -->
<input type="radio" name="rdoLiturgicalColors" id="ordinaryGreen" value="liturgical4" />
<label for="ordinaryGreen">Ordinary Time</label> <!-- green -->
<input type="radio" name="rdoLiturgicalColors" id="easterGold" value="liturgical5" />
<label for="easterGold">Easter / Christmas</label> <!-- gold -->
</fieldset>
</div>
</div>
<!-- nab or vulgate -->
<div data-role="collapsible">
<h4>Translation</h4>
<form id="language">
<fieldset data-role="controlgroup" data-mini="true" data-iconpos="right">
<legend>Toggle Language</legend>
<input type="radio" name="rdoTranslation" id="nabTranslation" value="translation1" checked="checked">
<label for="nabTranslation">English - NAB</label>
<input type="radio" name="rdoTranslation" id="vulgateTranslation" value="translation2" >
<label for="vulgateTranslation">Latin - Vulgate</label>
<input type="radio" name="rdoTranslation" id="otherTranslation" value="translation3" disabled="disabled">
<label for="otherTranslation">other (n/a)</label>
</fieldset>
</form>
</div>
<!-- compact minimalism -->
<div data-role="collapsible">
<h4 id="btnCompactCollapse">Compact</h4>
Rosary Text Display
<div id="minimalStates" data-role="controlgroup">
<fieldset data-role="controlgroup" data-mini="true">
<input type="radio" name="rdoMinimalism" id="hideHeading" value="minimal1" />
<label for="hideHeading">hide label heading</label> <!-- hide just the text headings -->
<input type="radio" name="rdoMinimalism" id="hideProgressbar" value="minimal2" />
<label for="hideProgressbar">hide progress bars</label> <!-- hide just progress bars -->
<input type="radio" name="rdoMinimalism" id="hideAll" value="minimal3" />
<label for="hideAll">hide all</label> <!-- show only text and direction arrows -->
<input type="radio" name="rdoMinimalism" id="hideNone" value="minimal4" />
<label for="hideNone">show all</label> <!-- default ui -->
</fieldset>
</div>
</div>
<div data-role="controlgroup">
<a id="btnLiturgicalSeason" href="#refferencesPage" class="ui-btn ui-corner-all ui-icon-calendar ui-btn-icon-right" data-rel="page" data-position-to="window" data-transition="fade" onclick="fillAppInfoContent(10); liturgicalSeasonToday()">Feast Countdown</a>
<a id="btnDailyMass" href="#dailyMassPage" class="ui-btn ui-corner-all ui-icon-cloud ui-btn-icon-right" data-rel="page" data-position-to="window" data-transition="flip" onclick="scrapeUsccb()">Mass Readings</a>
<a id="btnOpenMessenger" href="#messagingPage" data-transition="flip" class="ui-btn ui-corner-all ui-shadow ui-icon-comment ui-btn-icon-right">Messenger</a>
</div>
</div>
</div>
<!-- Information Popup Dialog -->
<div data-role="popup" id="myDialogPopUp" class="ui-content" data-overlay-theme="b" data-position="fixed">
<a id="btnClosePopup" href="#rosary" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-left ui-shadow ui-btn-up-a" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" title="Close"></a>
<span id="infoHeader" style="text-align: center" data-role="header"></span>
<h4 id="infoSubHeader" class="ui-content"></h4>
<div id="infoBody" class="ui-content" style="overflow-y:auto"></div>
<span id="infoFooter" style="text-align: center" data-role="footer"></span>
</div>
<!-- Main Rosary - Center View -->
<div data-role="main" class="ui-content" data-position="fixed">
<!-- App Main View -->
<div id="rosaryBeadText">
<div class="myUiBody ui-body ui-body-a ui-corner-all ui-shadow" style="text-align: center;">
<i id="decade" ></i>
</div>
<!-- Decade Name for each bead -->
<h5 id="lblscripture" >Scripture:</h5>
<div id="scripture" class="ui-content ui-shadow ui-mini"></div>
<!-- Scripture Readings for each bead -->
<h5 id="lblmessage" >Message:</h5>
<div id="message" class="ui-content ui-shadow ui-mini"></div>
<!-- Custom Message for each bead -->
<h5 id="lblprayer">Prayer:</h5>
<div id="prayer" class="ui-content ui-overlay-shadow ui-mini">...</div>
<!-- Prayer Readings for each bead -->
</div>
</div>
<!-- footer bottom bar - progress graph -->
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div class="ui-grid-a">
<div class="ui-block-a"><button style="width:98.5%" onclick="beadRev()">Bead Reverse</button></div>
<div class="ui-block-b"><button style="width:98.5%" onclick="beadFwd()">Bead Forward</button></div>
</div>
<span id="beadMarker" class="ui-bar" style="text-align: center">0 / 0</span>
<div class="progressBar" data-role="decadeProgress"></div><!-- decade progress bar -->
<div class="progressBar" data-role="rosaryProgress"></div><!-- rosary progress bar -->
</div>
</div>
<!-- group messaging page -->
<div data-role="page" id="messagingPage">
<div data-role="header" class="msgPageHeader" style="text-align: center" data-position="fixed" data-tap-toggle="false">
Messenger
<div data-role="navbar" data-mini="true">
<ul>
<li><a id="btnCloseMessenger" href="#rosary" data-transition="fade" data-icon="arrow-l" title="Exit Messenger"></a></li>
<li><a href="#" onClick='sendmyMessageInfo();' data-icon="info" title="my position progress"></a></li>
</ul>
</div>
</div>
<div role="main" id="myMessageContainer" class="msgLog "></div>
<div data-role="footer" class="msgPageFooter" data-position="fixed" data-tap-toggle="false">
<div id="divAllUsers" style="overflow-y:auto;"></div>
<input id="myMessage" value="" type="text" placeholder="Enter a message ...">
<div data-role="navbar" data-mini="true">
<ul>
<li> <a onClick='$(window).scrollTop(0);' data-icon="arrow-u" title="scroll to top"></a> </li>
<li> <a href="#topAnchor" id="btnEnterMsg" onClick='sendmyMessage();' data-icon="comment" title="send message"></a> </li>
</ul>
</div>
</div>
</div>
<!-- daily mass readings page -->
<div data-role="page" id="dailyMassPage">
<div data-role="header" class="msgPageHeader" style="text-align: center" data-position="fixed" data-tap-toggle="false">
Daily Mass Readings
<div data-role="navbar" data-mini="true">
<ul>
<li><a id="btnCloseMassPage" href="#rosary" data-transition="fade" data-icon="arrow-l"></a></li>
<li><a href="http://www.usccb.org/bible/readings" data-icon="info" target="_blank"></a></li>
</ul>
</div>
</div>
<div role="main" id="usccbOrg" class="ui-content"></div>
</div>
<!-- refferences Page -->
<div data-role="page" id="refferencesPage">
<div data-role="header" class="msgPageHeader" class="ui-content" style="text-align: center" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar" data-mini="true">
<ul>
<li><a id="btnCloseRefferencePage" href="#rosary" data-transition="fade" data-icon="arrow-l"></a></li>
<li><a href="#" data-icon="info" target="_blank"></a></li>
</ul>
</div>
</div>
<div role="main" class="ui-content">
<!-- populated by list buttons on right panel -->
<h3 id="reffHeader" style="text-align: center"></h3>
<h4 id="reffSubHeader"></h4>
<div id="reffBody"></div>
<div data-role="bibleContent"></div>
<div data-role="prayerContent"></div>
<p id="reffFooter" style="text-align: center"></p>
</div>
</div>
</body>
</html>