-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
243 lines (221 loc) · 12.7 KB
/
index.html
File metadata and controls
243 lines (221 loc) · 12.7 KB
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
<!DOCTYPE html>
<html>
<head>
<title>Organize Your Bookshelf | Read Rover</title>
<meta charset="UTF-8">
<meta name="description" content="Keep track of book inventory and order with the most user-friendly and visually appealing reading list tool out there">
<meta name="author" content="Andrew Deal">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="logo.png">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="toolBox">
<div class="darkBackground">
<img id="titleLogo" src="logov8.png" alt="Read Rover logo">
</div>
<div id="tabSelect">
<ul>
<li class="tab-btn">Add Books</li>
<li class="separator" aria-hidden="true" role="presentation"></li>
<li class="tab-btn">Hyperlinks</li>
<li class="separator" aria-hidden="true" role="presentation"></li>
<li class="tab-btn">Random Book Picker</li>
<li class="separator" aria-hidden="true" role="presentation"></li>
<li class="tab-btn">Loans</li>
</ul>
</div>
<!--Form that adds books-->
<div class="content" id="addBooksForm">
<form>
<label for="publisher">Publisher:</label>
<input type="text" id="publisher" name="publisher">
<label for="continuity">Continuity: </label>
<input type="text" id="continuity" name="continuity">
<br>
<label for="series">Series:</label>
<input type="text" id="series" name="series">
<select id="numberType" name="numberType">
<option value="Number">Number:</option>
<option value="Volume">Volume:</option>
<option value="Book">Book:</option>
<option value="Omnibus">Omnibus:</option>
<option value="Compendium">Compendium:</option>
<option value="Week">Week:</option>
<option value="Un-numbered">No Number</option>
</select>
<input type="number" id="number" name="number">
<br>
<label for="name">Title:</label>
<input type="text" id="name" name="name">
<label for="format">Format:</label>
<select id="format" name="format">
<option value="Single Comic">Single Comic</option>
<option value="Paperback">Paperback</option>
<option value="Hardcover">Hardcover</option>
<option value="Omnibus">Omnibus</option>
<option value="Compendium">Compendium</option>
<option value="Manga">Manga</option>
<option value="Manhwa">Manhwa</option>
<option value="Other">Other</option>
</select>
<br>
<label for="read" id="readLabel">Read?</label>
<input type="checkbox" id="read" name="read">
<label>Rating:</label>
<img src="emptyStar.png" id="star0" class="formStar" alt="rating star">
<img src="emptyStar.png" id="star1" class="formStar" alt="rating star">
<img src="emptyStar.png" id="star2" class="formStar" alt="rating star">
<img src="emptyStar.png" id="star3" class="formStar" alt="rating star">
<img src="emptyStar.png" id="star4" class="formStar" alt="rating star">
<label for="favorite" id="favoriteLabel">Favorite?</label>
<input type="checkbox" id="favorite" name="favorite">
<br>
<label for="notes">Notes:</label>
<input type="text" id="notes" name="notes">
<br>
<label for="imgLink">Image Address:</label>
<input type="text" id="imgLink" name="imgLink">
<!--<button type="button" id="imgUploadBtn">Upload</button>
<input type="file" id="imgUploadFileInput" accept=".png, .jpeg, .jpg" style="display: none;" />-->
<br>
<div class="centeringDiv">
<button type="button" id="addBookBtn1">Add before #</button>
<input type="number" id="insertNumber" name="insertNumber" min="0">
<button type="button" id="addBookBtn2">Add after #</button>
</div>
<div class="centeringDiv" style="width: 26%">
<button type="button" id="replaceBtn">Replace #</button>
<input type="number" id="replaceNumber" name="replaceNumber" min="1">
</div>
</form>
</div>
<!--Navigation links to jump around on the page-->
<div id="hyperlinkSection" class="content">
<h2>Divider Links</h2>
<nav id="navlinks">
<ul>
<!--Links will be added here using JS-->
</ul>
</nav>
</div>
<!--Random book picker-->
<div id="readRandom" class="content">
<h2>Random Book Picker</h2>
<p>You Should Read...</p>
<p id="randomBookText">[Generated Book Appears Here]</p>
<p id="readBookCheckbox"><input type="checkbox"> Include Read Books</p>
<button id="randomGenerator">Randomize</button>
</div>
<hr>
<div id="toolButtons">
<button title="Download Data"><img src="downloadIcon.png" alt="Download"></button> <!--Changing these buttons to work with files, change later?-->
<button title="Upload Data"><img src="uploadIcon.png" alt="Upload"></button>
<button title="Manual Save"><img src="saveIcon.png" alt="Save"></button>
<button title="Reset"><img src="resetIcon.png" alt="Reset"></button>
<button title="Filter"><img src="filterIcon.png" alt="Filter"></button>
<button title="Dividers"><img src="dividerIcon.png" alt="Divider"></button>
<button title="Stickers"><img src="stickerIcon.png" alt="Sticker"></button>
</div>
<input type="file" id="fileInput" accept="text/plain" style="display: none;" />
<hr id="hrAboveBottomMenu" class="hidden">
<div id="filterMenu">
<div id="topHalfFilterMenu">
<p>Filter By:</p>
<select id="filterSelector">
<option value="any">Any</option>
<option value="publisher">Publisher</option>
<option value="continuity">Continuity</option>
<option value="series">Series</option>
<option value="number">Number</option>
<option value="name">Name</option>
<option value="format">Format</option>
<option value="read">Read</option>
<option value="unread">Unread</option>
<option value="rating">Rating</option>
<option value="favorite">Favorite</option>
<option value="notes">Notes</option>
</select>
<p>Value:</p>
<input id="filterValue" type="text" title="Equal to or includes">
</div>
<div id="bottomHalfFilterMenu">
<button>Set Filter</button>
<button>Clear Filter</button>
</div>
<p id="currentFilterDisplay"></p>
</div>
<div id="dividerMenu">
<p>Add Divider Between:</p>
<input type="number" id="insertDividerAfterNumber" min="0">
<p>and</p>
<input type="number" id="insertDividerBeforeNumber" min="1">
<br>
<p>Title:</p>
<input type="text" id="dividerTitleInput">
<p>Color:</p>
<input type="color" id="dividerColorInput">
<br>
<button type="button" id="addDividerBtn">Add Divider</button>
</div>
</div>
<div id="main">
<div style="text-align: center;">
<h1>Your Collection:</h1>
</div>
<!--Where all books will be appended by JS-->
</div>
<!--Section for the modal windows to pop up-->
<div class="modal hidden" id="modalWindow">
<img src="alert.png" alt="warning">
<h1>Are you sure?</h1>
<h3>Deleted items are deleted forever!</h3>
<button class="leftModalBtn">Yes, delete it!</button>
<p style="display:inline"> </p>
<button class="rightModalBtn">Cancel</button>
</div>
<div class="modal hidden" id="modalWindow2">
<img src="alert.png" alt="warning">
<h1>You pressed the reset button!</h1>
<h3>Resetting will delete all books from your list</h3>
<button class="leftModalBtn">Do it!</button>
<p style="display:inline"> </p>
<button class="rightModalBtn">Cancel</button>
</div>
<div class="modal hidden" id="stickerModal">
<h1>Add a Sticker to a Book</h1>
<div id="imgGrid"> <!--Sticker Images-->
<img src="crossoverIconV2.png" title="Crossover Marker" alt="Blue Crossover Marker sticker">
<img src="crossoverIconV2red.png" title="Crossover Marker 2" alt="Red Crossover Marker sticker">
<img src="crossoverIconV2green.png" title="Crossover Marker 3" alt="Green Crossover Marker sticker">
<img src="crossoverIconV2white.png" title="Crossover Marker 4" alt="Black and White 6Crossover Marker sticker">
<img src="wSticker.png" title="W" alt="W sticker">
<img src="loveThis.png" title="Love This!" alt="Love This! sticker">
<img src="mid.png" title="Kinda Mid Bro" alt="Kinda Mid Bro">
<img src="sus.png" title="A lil Sus" alt="A lil Sus sticker">
<img src="alsoCollectedBelowIcon.png" title="Included Below" alt="Also collected below sticker">
<img src="alsoCollectedAboveIcon.png" title="Included Above" alt="Also collected above sticker">
<img src="thumbsUp.jpg" title="Booster Approves" alt="Booster Approves sticker">
<img src="thumbsDown.jpg" title="Disappointed Darkseid" alt="Disappointed Darkseid sticker">
<img src="mindBlown.jpg" title="No %#&@$%! Way" alt="No %#&@$%! Way sticker">
<img src="happy.png" title="The Bat-Smile" alt="The Bat-Smile sticker">
<img src="unaliving.jpg" title="Un-aliving" alt="Un-aliving sticker">
<img src="dying.png" title="💀" alt="💀 sticker">
<img src="sad.png" title="Sad Peter Parker" alt="Sad Peter Parker sticker">
<img src="Heyayayayay.jpg" title="Heyayayayay!" alt="Heyayayayay! sticker">
<img src="angry.png" title="Gamma Rage" alt="Gamma Rage sticker">
<img src="eyeBeads.jpg" title="Shocked Spider-Man" alt="Shocked Spider-Man sticker">
<img src="gotNotes.jpg" title="Got Notes" alt="Got Notes sticker">
<img src="visionCry.jpg" title="Moisture Buildup in Optical Sensors" alt="Vision sticker">
<img src="thomas.png" title="Thomas is Done" alt="Thomas is Done sticker">
</div>
<p>Currently Selected:</p> <em><p id="selectedStickerText">None</p></em>
<br>
<button id="addStickerBtn" class="leftModalBtn">Add to #</button>
<input id="stickerNumber" type="number" min="1">
<button id="closeStickerMenu" class="rightModalBtn">Close</button>
</div>
<div class="overlay hidden" id="overlay"></div>
<script src="listMaker.js"></script>
</body>
</html>