-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
185 lines (184 loc) · 7.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>MyBooks App</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="normalize.css" />
<link rel="stylesheet" href="styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<header id="masthead">
<div
class="
container
d-flex
justify-content-space-between
align-items-center
gap-sm
"
>
<a href="/" title="MyBooksApp" class="logo">
<h1 class="d-none">MyBooks App</h1>
<img
class="user-select-none pe-none"
src="https://i.imgur.com/tFS5gHo.png"
alt="MyBooks App Logo"
/>
</a>
<div id="vitals" class="d-flex gap-sm"></div>
</div>
</header>
<main class="container relative">
<div id="books">
<div id="reminder">
<h2>Frequently Asked Questions</h2>
<div class="bullet d-flex flex-column">
<span class="q">Is this free?</span>
<span class="a">It ain't much, but at least it's free!</span>
</div>
<div class="bullet d-flex flex-column">
<span class="q">Do I need to create an account?</span>
<span class="a"
>No. Any books added while not logged in will get saved in your
browser's local storage. However, to avoid losing your collection
in case of a browser's storage reset, it is best to create an
account.</span
>
</div>
<div class="bullet d-flex flex-column">
<span class="q"
>I already added books and I want to register now. Will I have to
re-add them?</span
>
<span class="a"
>No. Any books added while not logged in will link to your newly
created account.</span
>
</div>
<div class="bullet d-flex flex-column">
<span class="q">Is my progress getting saved while logged in?</span>
<span class="a"
>It wouldn't be wise to bombard database every time you make a
change in your collection. Therefore, any change you make while
logged in, is getting locally saved. Then, logging out will send
the local save and update the database. So be sure to logout once
in a while!</span
>
</div>
<div class="bullet d-flex flex-column">
<span class="q">Why the book I added has no thumbnail cover?</span>
<span class="a"
>The thumbnail covers as well as some other meta-info are getting
fetched from Google's book database. At first, application uses
the book's ISBN to search for the book. If no book cover is found,
application is trying again to search for the book using its
title. If book cover is still not found, the application will
fallback to a default placeholder cover.</span
>
</div>
<div class="bullet d-flex flex-column">
<span class="q"
>How can I change the image of my profile avatar?</span
>
<span class="a"
>So far, if you created an account using a Gmail email, your
profile avatar will be set to your Gmail's profile image. If you
registered using anything else but Gmail, you can not change your
avatar image. Future updates will include an option to update your
avatar's image.</span
>
</div>
<div class="bullet d-flex flex-column">
<span class="q">What are Rankings?</span>
<span class="a"
>Rankings is a gamification page that displays all registered
users as well as their collection and read count.</span
>
</div>
<div class="bullet d-flex flex-column">
<span class="q">I found a bug. How can I contact you?</span>
<span class="a"
>You can contact the creator of this application by email at
<a href="mailto:giorgos.cho@hotmail.com" title="email"
>giorgos.cho@hotmail.com</a
>.</span
>
</div>
<div class="bullet d-flex flex-column">
<span class="q"
>I really liked this application. Can I buy you a coffee?</span
>
<span class="a"
>If you found this application helpful and want to show your
appreciation, you can donate via paypal to the email
<a href="mailto:giorgos.cho@hotmail.com" title="email"
>giorgos.cho@hotmail.com</a
>
or literally buy me a coffee (email me to find out where to ship
it).</span
>
</div>
</div>
</div>
</main>
<div id="add">
<div class="container relative">
<div class="addWrapper">
<div
class="
btnWrapper
d-flex
justify-content-space-between
align-items-center
"
>
<h2>Add new book</h2>
<button class="btn user-select-none">+</button>
</div>
<div class="formWrapper">
<form
id="newbook"
class="d-flex flex-column gap-md"
action="javascript:void(0);"
onsubmit="addBookToLibrary()"
>
<div class="inputWrapper d-flex relative">
<input type="number" name="isbn" id="isbn" required />
<label for="isbn">ISBN 13</label>
</div>
<div class="inputWrapper d-flex relative">
<input type="text" name="title" id="title" required />
<label for="title">Title</label>
</div>
<div class="inputWrapper d-flex relative">
<input type="text" name="author" id="author" required />
<label for="author">Author</label>
</div>
<input class="d-none" type="checkbox" name="read" id="read" />
<label class="checkboxWrapper" for="read">
<span>Did you read it?</span>
<span class="check"></span>
</label>
<button type="submit">Add Book</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/9.12.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.12.1/firebase-auth-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.12.1/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.12.1/firebase-storage-compat.js"></script>
<script src="general.js"></script>
<script src="authentication.js"></script>
<script src="vitals.js"></script>
<script src="library.js"></script>
</body>
</html>