-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
163 lines (134 loc) · 7.67 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Daily Patristics</title>
<link rel="stylesheet" href="styles.css">
<script src="backend.js" defer></script>
<script src="frontend.js" defer></script>
</head>
<body>
<header>
<div id="logo"></div>
<a id="title" href="index.html">Daily Patristics</a>
<div id="subtitle"><em>Breviary sermons for the liturgical year</em></div>
</header>
<div id="header-border"></div>
<button id="appearance-mini" >Appearance options, for comfortable reading</button>
<div id="appearance-menu">
<button id="appearance-menu-title">ⓧ</button>
<div class="menu-group">
<div class="menu-group-title">Colours</div>
<div class="menu-items-container tripartite">
<button class="appearance-menu-item" id="light-theme">Dark on light</button>
<button class="appearance-menu-item" id="dark-theme">Light on dark</button>
<button class="appearance-menu-item" id="contrast-theme">High contrast</button>
</div>
</div>
<div class="menu-group">
<div class="menu-group-title">Typeface</div>
<div class="menu-items-container bipartite">
<button class="appearance-menu-item" id="serif-typeface">Serif</button>
<button class="appearance-menu-item" id="sans-typeface">Sans-serif</button>
</div>
</div>
<div class="menu-group">
<div class="menu-group-title">Font size</div>
<div class="menu-items-container bipartite">
<button class="appearance-menu-item" id="standard-size">Standard</button>
<button class="appearance-menu-item" id="large-size">Large</button>
</div>
</div>
</div>
<div id="appearance-widget" onclick="showPopUpMenu()">
<span style="font-size: 30px; line-height: 30px;">?</span><!--placeholder - needs an icon e.g. gear-->
</div>
<div id="pop-up-appearance-menu">
<div id="close-pop-up" onclick="hidePopUpMenu()">X</div>
<div id="appearance-menu-title">Appearance options, for comfortable reading</div>
<div class="menu-group">
<div class="menu-group-title no-border">Colours</div>
<div class="menu-items-container tripartite">
<div class="appearance-menu-item" id="light-theme" onclick="changeTheme('light')">Dark on light</div>
<div class="appearance-menu-item" id="dark-theme" onclick="changeTheme('dark')">Light on dark</div>
<div class="appearance-menu-item" id="contrast-theme" onclick="changeTheme('contrast')">High contrast</div>
</div>
</div>
<div class="menu-group">
<div class="menu-group-title">Typeface</div>
<div class="menu-items-container bipartite">
<div class="appearance-menu-item" id="serif-typeface" onclick="serif()">Serif</div>
<div class="appearance-menu-item" id="sans-typeface" onclick="sans()">Sans-serif</div>
</div>
</div>
<div class="menu-group">
<div class="menu-group-title">Font size</div>
<div class="menu-items-container bipartite">
<div class="appearance-menu-item" id="standard-size" onclick="normalSize()">Standard</div>
<div class="appearance-menu-item" id="large-size" onclick="largeSize()">Large</div>
</div>
</div>
</div>
<main id="main">
<section id="request">
<h1>Read a patristic sermon or homily</h1>
<h2>Select a liturgical day from the proper of the time or the proper of the saints.</h2>
<p>Hit ‘find texts’ to return the breviary homilies and sermons appointed for your chosen liturgical day, in English. You can also choose to show texts for the dead, or those of a particular common or the little office. Searches for saints’ days will also return any associated legend or historical lesson.</p>
<!--this form is the initial plan to get something that works fine.
In the future a cleaner, more flexible, more easily operable system would be nice.-->
<form action="javascript:void(0)" id="request-form">
<label for="temporale">Choose from the <em>temporal</em> cycle:</label>
<select name="temporale" id="temporale">
<optgroup label="Advent">
<option value="advent-1">Advent I</option>
<option value="advent-2">Advent II</option>
<option value="advent-3">Advent III</option>
<option value="advent-ember-wed">Ember Wednesday in Advent</option>
<option value="advent-ember-fri">Ember Friday in Advent</option>
<option value="advent-ember-sat">Ember Saturday in Advent</option>
<option value="advent-4">Advent IV</option>
</optgroup>
<optgroup label="Christmas and Epiphany">
<option value="christmas-eve">Christmas Eve</option>
<option value="christmas-day">Christmas Day</option>
<option value="stephen">St. Stephen, Protomartyr</option>
<option value="john-ap-ev">St. John, Apostle and Evangelist</option>
<option value="holy-innocents">The Holy Innocents</option>
<option value="sunday-in-christmas">Sunday in the Christmas Octave</option>
<option value="thomas-bp-m">St. Thomas, Bishop and Martyr</option>
<option value="christmas-octave-6">Sixth Day in the Christmas Octave</option>
<option value="sylvester-p-c">St. Sylvester, Pope and Confessor</option>
<option value="circumcision">The Circumcision</option>
</optgroup>
<!--millions of <option>s here-->
</select>
<button class="generate" id="generate-temporale" onclick="getResults('temporale')">Find texts</button>
<p class="note">The temporal cycle also includes certain saints, such as those in the Christmas octave.</p>
<label for="sanctorale">Choose from the <em>sanctoral</em> cycle:</label>
<select name="sanctorale" id="sanctorale">
<!--millions of <option>s here-->
</select>
<button class="generate" id="generate-sanctorale" onclick="getResults('sanctorale')">Find texts</button>
<br>
<label for="other">Choose from the <em>commons and votives</em>:</label>
<select name="other" id="other">
<option value="defunctorum-">Office of the dead</option>
<option value="bvm-">Saturday office of the BVM</option>
<option value="com1-">Vigil of a saint or saints</option>
<!--13 more <option>s here-->
</select>
<button class="generate" id="generate-other" onclick="getResults('other')">Find texts</button>
<br>
</form>
</section>
<section id="result">
<!--Scroll up button will be generated here
Then for each text found will be generated:
An <h1> with the sermon/homily title
a <p> stating the source of the text
<p>s with the text itself
-->
</section>
</main>
</body>
</html>