-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
143 lines (127 loc) · 12.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ScriptureHub</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="./styles/style.css">
<script src="./scripts/index.js" defer></script>
</head>
<body>
<nav class="navbar">
<ul class="vertical">
<li class="nav-item">
<input id="search" placeholder="John 3:16";
type="text" autofocus>
</li>
<!-- <li class="nav-item">
<p id="translation">New King James Version<br>(NKJV)</p>
</li> -->
<br>
<li class="nav-item">
<a href="./index.html" class="nav-link">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 10.25V20C3 20.5523 3.44771 21 4 21H8.42857C8.98086 21 9.42857 20.5523 9.42857 20V13.2857H14.5714V20C14.5714 20.5523 15.0191 21 15.5714 21H20C20.5523 21 21 20.5523 21 20V10.25C21 9.93524 20.8518 9.63885 20.6 9.45L12 3L3.4 9.45C3.14819 9.63885 3 9.93524 3 10.25Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="link-text">Home</span>
</a>
</li>
<li class="nav-item" id="settings">
<div href="./index.html" class="nav-link">
<svg viewBox="0 0 490.175 490.175" class="fill-svg" xmlns="http://www.w3.org/2000/svg">
<path d="M346.275,380.538c-1.4,3.5-5.4,5.1-8.8,3.7l-22.6-9.4c-4-1.7-8.6-0.3-11,3.3 c-10.2,15.3-23.2,28.3-38.5,38.5c-3.6,2.4-5,7-3.3,11l9.3,22.6c1.4,3.4-0.2,7.4-3.7,8.8l-24.6,10.3c-3.4,1.4-7.4-0.2-8.8-3.7 l-9.4-22.6c-1.7-4-5.9-6.3-10.1-5.4c-18,3.6-36.3,3.6-54.4,0c-4.2-0.8-8.5,1.4-10.1,5.4l-9.4,22.6c-1.4,3.4-5.4,5.1-8.8,3.7 l-24.6-10.2c-1.7-0.7-3-2-3.7-3.7s-0.7-3.5,0-5.2l9.4-22.6c1.7-4,0.3-8.6-3.3-11c-15.3-10.2-28.3-23.2-38.5-38.5 c-2.4-3.6-7-5-11-3.3l-22.6,9.4c-3.5,1.4-7.4-0.2-8.8-3.7l-10.2-24.6c-1.4-3.4,0.2-7.4,3.7-8.8l22.6-9.4c4-1.7,6.3-5.9,5.4-10.1 c-3.6-18-3.6-36.3,0-54.4c0.8-4.2-1.4-8.5-5.4-10.1l-22.6-9.4c-1.7-0.7-3-2-3.7-3.7s-0.7-3.5,0-5.2l10.2-24.6c0.7-1.7,2-3,3.7-3.7 s3.5-0.7,5.2,0l22.6,9.4c4,1.7,8.6,0.3,11-3.3c10.2-15.3,23.2-28.3,38.5-38.5c3.6-2.4,5-7,3.3-11l-9.4-22.6 c-0.7-1.7-0.7-3.5,0-5.2s2-3,3.7-3.7l24.6-10.2c3.4-1.4,7.4,0.2,8.8,3.7l9.4,22.6c1.9,4.6,7.2,6.8,11.8,4.9 c4.6-1.9,6.8-7.2,4.9-11.8l-9.4-22.6c-5.3-12.7-19.8-18.7-32.5-13.5l-24.6,10.2c-6.1,2.5-10.9,7.3-13.5,13.5 c-2.5,6.1-2.5,12.9,0,19.1l6.6,15.9c-12.6,9.3-23.7,20.4-33.1,33.1l-15.9-6.6c-6.1-2.5-12.9-2.5-19.1,0 c-6.1,2.5-10.9,7.3-13.5,13.5l-10.2,24.6c-2.5,6.1-2.5,12.9,0,19.1c2.5,6.1,7.3,10.9,13.5,13.5l15.9,6.6 c-2.4,15.6-2.4,31.2,0,46.8l-15.9,6.6c-12.7,5.3-18.7,19.8-13.5,32.5l10.2,24.3c5.2,12.7,19.8,18.7,32.5,13.5l15.9-6.6 c9.3,12.6,20.4,23.7,33.1,33.1l-6.6,15.9c-2.5,6.1-2.5,12.9,0,19.1c2.5,6.1,7.3,10.9,13.5,13.5l24.6,10.2 c12.7,5.2,27.3-0.8,32.5-13.5l6.6-15.9c15.6,2.4,31.2,2.4,46.8,0l6.6,15.9c4,9.6,13.3,15.4,23,15.4c3.2,0,6.4-0.6,9.5-1.9 l24.6-10.2c12.7-5.3,18.7-19.8,13.5-32.5l-6.6-15.9c12.6-9.3,23.7-20.4,33.1-33.1l15.9,6.6c12.7,5.3,27.3-0.8,32.5-13.5l10.2-24.6 c2.5-6.1,2.5-12.9,0-19.1c-2.5-6.1-7.3-10.9-13.5-13.5l-22.6-9.4c-4.6-1.9-9.9,0.3-11.8,4.9s0.3,9.9,4.9,11.8l22.6,9.4 c1.7,0.7,3,2,3.7,3.7s0.7,3.5,0,5.2L346.275,380.538z"/>
<path d="M187.075,238.538c5,0,9-4.1,9-9.1s-4.1-9-9.1-9c0,0,0,0-0.1,0c-21.4,0.2-41.4,8.6-56.4,23.8 c-15,15.2-23.2,35.4-23,56.7c0.2,21.4,8.6,41.4,23.8,56.4c15.1,14.9,35,23,56.1,23c0.2,0,0.4,0,0.6,0c21.4-0.2,41.4-8.6,56.4-23.8 c15-15.2,23.2-35.4,23-56.7c0-5-4.1-9-9.1-9c0,0,0,0-0.1,0c-5,0-9,4.1-9,9.1c0.1,16.5-6.2,32.1-17.8,43.9s-27.1,18.3-43.6,18.4 c-0.2,0-0.3,0-0.5,0c-16.3,0-31.8-6.3-43.4-17.8c-11.8-11.6-18.3-27.1-18.4-43.6s6.2-32.1,17.8-43.9 C155.075,245.238,170.575,238.638,187.075,238.538z"/>
<path d="M469.575,176.938c11.3,0,20.6-9.2,20.6-20.6v-19.3c0-11.3-9.2-20.6-20.6-20.6h-10.5 c-2.7-10-6.6-19.6-11.8-28.5l7.5-7.5c8-8,8-21.1,0-29.1l-13.7-13.7c-3.9-3.9-9.1-6-14.5-6c-5.5,0-10.7,2.1-14.5,6l-7.5,7.5 c-9-5.2-18.5-9.2-28.5-11.8v-10.6c0-11.3-9.2-20.6-20.6-20.6h-19.4c-11.3,0-20.6,9.2-20.6,20.6v10.6c-10,2.7-19.6,6.6-28.5,11.8 l-7.5-7.5c-3.9-3.9-9.1-6-14.5-6c-5.5,0-10.7,2.1-14.5,6l-13.7,13.7c-8,8-8,21.1,0,29.1l7.5,7.5c-5.2,9-9.2,18.5-11.8,28.5h-10.6 c-11.3,0-20.6,9.2-20.6,20.6v19.4c0,11.3,9.2,20.6,20.6,20.6h10.6c2.7,10,6.6,19.6,11.8,28.5l-7.5,7.5c-8,8-8,21.1,0,29.1 l13.7,13.7c3.9,3.9,9.1,6,14.5,6c5.5,0,10.7-2.1,14.5-6l7.5-7.5c9,5.2,18.5,9.2,28.5,11.8v10.6c0,11.3,9.2,20.6,20.6,20.6h19.4 c11.3,0,20.6-9.2,20.6-20.6v-10.7c10-2.7,19.6-6.6,28.5-11.8l7.5,7.5c3.9,3.9,9.1,6,14.5,6c5.5,0,10.7-2.1,14.5-6l13.7-13.7 c8-8,8-21.1,0-29.1l-7.5-7.5c5.2-9,9.2-18.5,11.8-28.5L469.575,176.938L469.575,176.938z M442.975,166.138 c-2.5,12.8-7.5,24.8-14.8,35.7c-2.4,3.6-1.9,8.4,1.1,11.4l12.6,12.6c1,1,1,2.5,0,3.5l-13.7,13.7c-0.6,0.6-1.3,0.7-1.7,0.7 c-0.5,0-1.1-0.1-1.7-0.7l-12.6-12.6c-3.1-3.1-7.9-3.5-11.4-1.1c-10.9,7.3-22.9,12.2-35.7,14.8c-4.2,0.8-7.3,4.6-7.3,8.9v17.8 c0,1.3-1.1,2.4-2.4,2.4h-19.4c-1.3,0-2.4-1.1-2.4-2.4v-17.8c0-4.3-3.1-8-7.3-8.9c-12.8-2.5-24.8-7.5-35.7-14.8 c-1.5-1-3.3-1.5-5-1.5c-2.3,0-4.7,0.9-6.4,2.7l-12.6,12.6c-0.6,0.6-1.3,0.7-1.7,0.7c-0.5,0-1.1-0.1-1.7-0.7l-13.7-13.7 c-1-1-1-2.5,0-3.5l12.6-12.6c3.1-3.1,3.5-7.9,1.1-11.4c-7.3-10.9-12.2-22.9-14.8-35.7c-0.8-4.2-4.6-7.3-8.9-7.3h-17.8 c-1.3,0-2.4-1.1-2.4-2.4v-19.5c0-1.3,1.1-2.4,2.4-2.4h17.8c4.3,0,8-3.1,8.9-7.3c2.5-12.8,7.5-24.8,14.8-35.7 c2.4-3.6,1.9-8.4-1.1-11.4l-12.6-12.6c-0.6-0.6-0.7-1.3-0.7-1.7c0-0.5,0.1-1.1,0.7-1.7l13.6-13.8c0.6-0.6,1.3-0.7,1.7-0.7 c0.5,0,1.1,0.1,1.7,0.7l12.6,12.6c3.1,3.1,7.9,3.5,11.4,1.1c10.9-7.3,22.9-12.2,35.7-14.8c4.2-0.8,7.3-4.6,7.3-8.9v-17.7 c0-1.3,1.1-2.4,2.4-2.4h19.4c1.3,0,2.4,1.1,2.4,2.4v17.8c0,4.3,3.1,8,7.3,8.9c12.8,2.5,24.8,7.5,35.7,14.8 c3.6,2.4,8.4,1.9,11.4-1.1l12.6-12.6c0.6-0.6,1.3-0.7,1.7-0.7c0.5,0,1.1,0.1,1.7,0.7l13.7,13.7c1,1,1,2.5,0,3.5l-12.6,12.6 c-3.1,3.1-3.5,7.9-1.1,11.4c7.3,10.9,12.2,22.9,14.8,35.7c0.8,4.2,4.6,7.3,8.9,7.3h17.8c1.3,0,2.4,1.1,2.4,2.4v19.4 c0,1.3-1.1,2.4-2.4,2.4h-17.8C447.475,158.838,443.775,161.838,442.975,166.138z"/>
<path d="M345.675,88.538c-32.1,0-58.1,26.1-58.1,58.1c0,32.1,26.1,58.1,58.1,58.1 c32.1,0,58.1-26.1,58.1-58.1S377.675,88.538,345.675,88.538z M345.675,186.638c-22.1,0-40-17.9-40-40s17.9-40,40-40s40,17.9,40,40 S367.675,186.638,345.675,186.638z"/>
</svg>
<span class="link-text">Settings</span>
</div>
</li>
<!-- <li class="nav-item">
<input type="color" name="color-picker" id="color-picker">
<span class="link-text">Accent</span>
</li> -->
<li class="nav-item" id="theme-icon" onclick="switchColorTheme()">
<div>
<svg viewBox="0 0 256 256" fill="var(--accent-color)" style="stroke-width: .2rem;" xmlns="http://www.w3.org/2000/svg">
<path d="M159.86914,142.92188a12.0001,12.0001,0,0,1,23.90332,2.15429,56.11389,56.11389,0,0,1-45.60351,50.001,12.00028,12.00028,0,0,1-4.33692-23.60547A32.037,32.037,0,0,0,159.86914,142.92188ZM224,140a96,96,0,0,1-192,0c0-23.88574,10.10547-51.23047,30.03613-81.27637a11.99921,11.99921,0,0,1,16.65625-3.35058l28.43213,18.9541,28.86377-60.61426a11.99981,11.99981,0,0,1,19.3125-3.333c14.90234,14.877,31.92774,32.9375,45.21484,54.09766C216.31787,89.64355,224,114.34766,224,140Zm-24,0c0-39.25488-22.65723-71.53711-49.75586-100.40039L122.83447,97.15918a12.00062,12.00062,0,0,1-17.49072,4.8252L75.62109,82.16992C62.59375,104.02832,56,123.44336,56,140a72,72,0,0,0,144,0Z"/>
</svg>
<span class="link-text">Theme</span>
</div>
</li>
</ul>
<ul class="horizontal">
<li class="nav-item" id="interlinear-icon" onclick="changeRightContent('interlinear')">
<svg viewBox="0 0 24 24" fill="none" style="stroke-width: 1.6;" xmlns="http://www.w3.org/2000/svg">
<path d="M18.3,18.3c0,0-0.1,0-0.1,0H18c-0.1,0-0.2,0-0.2,0c0,0-0.1,0-0.1-0.1c0,0-0.1-0.1-0.2-0.3c-0.1-0.1-0.2-0.3-0.2-0.6 L13.5,7.1C13.3,6.5,13,6,12.8,5.6c-0.3-0.4-0.6-0.7-0.9-1c-0.3-0.2-0.7-0.4-1.1-0.5C10.2,4,9.5,4,8.7,4.1C8.3,4.2,8,4.3,7.7,4.3 L7.4,4.5v2.7l0.7-0.2c0.2-0.1,0.4-0.1,0.7-0.2c0.4-0.1,0.8-0.1,1,0c0.1,0,0.2,0.1,0.3,0.2c0.1,0.1,0.2,0.2,0.3,0.4 c0.1,0.2,0.2,0.5,0.3,0.8L11,9.2L6,20.9h3.3l3.1-7.5l0.1-0.2l1.9,5.2c0.2,0.4,0.3,0.8,0.5,1.1c0.2,0.3,0.4,0.6,0.6,0.8 c0.2,0.2,0.5,0.4,0.8,0.5c0.3,0.1,0.6,0.2,1,0.2c0.4,0,0.8,0,1.2-0.1l0.4-0.1v-2.6L18.3,18.3z"/>
</svg>
<span class="link-text">Interlinear</span>
</li>
<li class="nav-item" id="commentary-icon" onclick="changeRightContent('commentary')">
<svg viewBox="0 0 512 512" class="fill-svg" fill="none" xmlns="http://www.w3.org/2000/svg">
<path xmlns="http://www.w3.org/2000/svg" d="M512,349.984c0-19.53-12.578-36.024-30-42.237V152.353l30-12.369L256,37.27L0,139.984l256,102.715l196-78.3v143.348 c-17.422,6.213-30,22.707-30,42.237c0,17.88,10.56,33.228,25.701,40.481l-24.924,74.773l28.447,9.492L467,427.401l15.776,47.329 l28.447-9.492l-24.924-74.773C501.44,383.213,512,367.865,512,349.984z" data-original="#000000"/>
<path xmlns="http://www.w3.org/2000/svg" d="M256,275.028L121,220.82v39.164c0,42.759,58.037,75,135,75s135-32.241,135-75V220.82L256,275.028z" data-original="#000000"/>
</svg>
<span class="link-text">Commentary</span>
</li>
<li class="nav-item" id="context-icon" onclick="changeRightContent('context')">
<svg version="1.1" class="fill-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 491.561 491.561" xml:space="preserve">
<path d="M430.101,0c-11.311,0-20.48,9.169-20.48,20.48v20.49H81.941V20.48C81.941,9.169,72.771,0,61.461,0
s-20.48,9.169-20.48,20.48v40.97v81.92v40.95c0,11.311,9.169,20.48,20.48,20.48s20.48-9.169,20.48-20.48v-20.47h20.48v307.19
c0,18.246,22.06,27.383,34.962,14.482l46.958-46.958l46.958,46.958c7.998,7.998,20.965,7.998,28.963,0l46.958-46.958
l46.958,46.958c12.902,12.902,34.962,3.764,34.962-14.482V163.85h20.48v20.47c0,11.311,9.169,20.48,20.48,20.48
s20.48-9.169,20.48-20.48v-40.95V61.45V20.48C450.581,9.169,441.411,0,430.101,0z M348.181,421.597l-26.478-26.478
c-7.998-7.998-20.965-7.998-28.963,0l-46.958,46.958l-46.958-46.958c-7.998-7.998-20.965-7.998-28.963,0l-26.478,26.478V163.85
h204.8V421.597z M368.864,122.89c-0.068-0.001-0.135-0.01-0.203-0.01h-245.76c-0.069,0-0.135,0.01-0.203,0.01H81.941V81.93
h327.68v40.96H368.864z"/>
<path d="M204.821,245.76h81.92c11.311,0,20.48-9.169,20.48-20.48s-9.169-20.48-20.48-20.48h-81.92
c-11.311,0-20.48,9.169-20.48,20.48S193.51,245.76,204.821,245.76z"/>
<path d="M204.821,327.68h81.92c11.311,0,20.48-9.169,20.48-20.48s-9.169-20.48-20.48-20.48h-81.92
c-11.311,0-20.48,9.169-20.48,20.48S193.51,327.68,204.821,327.68z"/>
</svg>
<span class="link-text">Context</span>
</li>
</ul>
</nav>
<main id="main">
<div class="item first" id="verseList">
</div>
<section class="item second" id="interlinear">
</section>
</main>
<dialog id="settings-dialog">
<form method="dialog">
<!-- <menu id="dialog-menu">
<button id="close-dialog">x</button>
</menu> -->
<div class="row">
<div>
<p><label>Copy Settings
</label></p>
<div id="settings-box" class="column"></div>
</div>
<div>
<div id="color-picker-div">
<span class="link-text">Accent</span>
<input type="color" name="color-picker" id="color-picker">
</div>
<p><label>Primary Translation:
<select id="translation-select">
</select>
</label></p>
</div>
</div>
<!-- <div id="translation-box"></div> -->
<menu id="dialog-menu">
<button id="cancel-button" value="cancel">Cancel</button>
<button id="confirm-button" value="default">Confirm</button>
<!-- <button id="confirmBtn" value="default">✅</button>
<button value="cancel">❌</button> -->
</menu>
</form>
</dialog>
</body>
</html>