-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
158 lines (151 loc) · 9.31 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
<!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">
<!-- CSS -->
<!-- <link type="text/css" rel="stylesheet" href="https://rus19023.github.io/myportfolio/css/styles.css" /> -->
<link type="text/css" rel="stylesheet" href="src/css/scripturechase.css" />
<link type="text/css" rel="stylesheet" href="src/css/styles.css" />
<!-- For Sharing buttons -->
<script src="https://cdn.jsdelivr.net/npm/sharer.js@latest/sharer.min.js"></script>
<title id="wdd330todoapptitle" class="title"> Scripture Chase</title>
<meta property="og:url" content="https://rus19023.github.io/scripturechase/"/>
<meta property="og:title" content="Scripture Chase WebApp Game, built by Doris Rush-Lopez. If you have a few moments, please give me feedback on any aspect of the app. Thanks!"/>
<meta property="og:description" content="Use flipcards to memorize scriptures, quiz to test on keywords, description, context, stats, leaderboard."/>
<meta property="og:site_name" content="Scripture Chase WebApp"/>
<meta property=”og:image" content="./img/do_whatever_it_takes.png"/>
<title>Home | Scripture Chase</title>
</head>
<body>
<header>
<h1 class="title">Scripture Chase | Home</h1>
<section class="col-span-1">
<div id="social-share">
<div class="col-span-4">
<button class="title bgblack">Share: </button>
<button class="sharer"
data-sharer="facebook"
data-title="Checkout my Scripture Chase App!"
data-url="https://rus19023.github.io/scripturechase/"
data-hashtags="#scripturechase #BonnieSitesDotSolutions #DorisRushLopez #BYU-Idaho">
<img class="centered icons socialicons" src="./src/img/icons/icons8-facebook-96.png" alt="share on Facebook">
</button>
<button class="sharer"
data-sharer="linkedin"
data-title="Checkout my Scripture Chase App!"
data-url="https://rus19023.github.io/scripturechase/"
data-hashtags="#scripturechase #BonnieSitesDotSolutions #DorisRushLopez #BYU-Idaho"
>
<img class="centered icons socialicons" src="./src/img/icons/icons8-linkedin-96.png" alt="">
</button>
<button class="sharer"
data-sharer="whatsapp"
data-title="Checkout my Scripture Chase App!"
data-url="https://rus19023.github.io/scripturechase/">
<img class="centered icons" src="./src/img/icons/icons8-whatsapp-96.png" alt="">
</button>
</div>
<div id="srchbar" class="todo-text">
<input id="srchinput" type="text" name="srchinput" placeholder="Search in tasks" value="" class="inputs" tabindex="1">
<button id="srchbtn" class="btns todobtn">Search</button>
</div>
</div>
</section>
</header>
<div class="container">
<h2 class="title">Click or tap one or more of the categories, then choose Flipcards or Quiz game below:</h2>
<!-- <input type="number" name="token" id="token" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" />
TODO: selection of any combination of the four main categories
TODO: add optional custom categories with their images, if any have been saved by user -->
<!-- <div id="todos"></div> -->
<form id="get-unit" method="GET" action="quiz.html">
<div id="ot2">
<input type="checkbox" class="chkbtn hide" name="ot" id="myCheckbox1" value="no" onClick="cbChange(this)"">
<label for="myCheckbox1" class="normal-text slider-label todo-bordered">
<h2 class="centered subtitle">Old Testament</h2>
<!-- <div id="slider-ot" class="sc-slider-ot"></div> -->
<img class="centerimg" src="./src/img/ot/mobile/adam_eve_altar-ot-tall.webp" alt="Image of Adam and Eve at an altar">
</label>
</div>
<div id="nt2">
<input type="checkbox" class="chkbtn hide" name="nt" id="myCheckbox2" value="no" onClick="cbChange(this)">
<label for="myCheckbox2" class="centered normal-text slider-label todo-bordered">
<h2 class="centered subtitle">New Testament</h2>
<!-- <div id="slider-nt" class="sc-slider-nt"></div> -->
<img class="centerimg" src="./src/img/nt/mobile/jesus_at_the_door.webp" alt="Image of Jesus Christ knocking at a door">
</label>
</div>
<div id="bom2">
<input type="checkbox" class="chkbtn hide" name="bom" id="myCheckbox3" value="no" onClick="cbChange(this)">
<label for="myCheckbox3" class="normal-text slider-label todo-bordered">
<h2 class="centered subtitle">Book of Mormon</h2>
<!-- <div id="slider-bom" class="sc-slider-bom"></div> -->
<img class="centerimg" src="./src/img/bom/mobile/christ_appearing_nephites.webp" alt="Image of Christ appearing to the Nephites after His Resurrection">
</label>
</input>
</div>
<div id="dc2">
<input type="checkbox" class="chkbtn hide" name="dc" id="myCheckbox4" value="no" onClick="cbChange(this)">
<label for="myCheckbox4" class="normal-text slider-label todo-bordered">
<h2 class="centered subtitle">Doctrine & Covenants</h2>
<!-- <div id="slider-dc" class="sc-slider-dc"></div> -->
<img class="centerimg" src="./src/img/dc/mobile/first_vision.webp" alt="Image of Joseph Smith's First Vision">
</label>
</div>
</form>
<!-- <option value="https://opentdb.com/api.php?amount=30&category=9&difficulty=easy">TRIVIA-EASY</option>
<option value="https://opentdb.com/api.php?amount=30&category=9&difficulty=medium">TRIVIA-MEDIUM</option>
<option value="https://opentdb.com/api.php?amount=30&category=9&difficulty=hard">TRIVIA-HARD</option> -->
</div>
<!-- <div id="highScores" class="title">
<h1 id="finalScore">High Scores</h1>
<table id="highScoresList"></table>
</div> -->
<!-- <div class="col2">
<div class="">
</div>
<div class="">
</div>
<div class="">
</div>
<div class="">
</div>
</div> -->
</div>
<ul id="reflist" class="normal-text">Question Category List displays here</ul>
<footer class="title ">
<div class="container col5">
<div class="col1">
<a href="./src/pages/highscores.html">
<img src="./src/img/icons/icons8-rating-circled-96.png" alt="rating icon" class="icon whitebg">
Stats
</a>
</div>
<div class="col1">
<a href="./src/pages/profile.html">
<img src="./src/img/icons/icons8-user-64.png" alt="profile icon" class="icon whitebg">
Profile
</a>
</div>
<div class="col1">
<a href="./src/pages/flipcards.html">
<img src="./src/img/icons/icons8-flashcards-90.png" alt="flashcards icon" class="icon whitebg">
Flipcard
</a>
</div>
<div class="col1">
<a href="./src/pages/quiz.html?quizu=quizunits">
<img src="src/img/icons/icons8-quiz-66.png" alt="quiz icon" class="icon whitebg">
Quiz
</a>
</div>
<div id="loggedinorout" class="col1"></div>
</div>
</footer>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="./src/js/main.js" type="module"></script>
</body>
</html>