-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfantasy.html
More file actions
341 lines (324 loc) · 16.7 KB
/
fantasy.html
File metadata and controls
341 lines (324 loc) · 16.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
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fantasy Books - Readlytic</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Fantasy Books</h1>
<ul id = "lih">
<li><a href="index.html" class="category-link">Home</a></li>
</ul>
</header>
<section>
<h2>Popular Fantasy Books</h2>
<ul>
<div>
<div style="margin-right: 25px;">
<img src="https://assets.onecompiler.app/42vcx6nqa/42vut4jnk/the%20poppy%20war.png"
alt="The Poppy War by R.F. Kuang"
<a href="#" onclick="BookBG('1');
openModal('The Poppy War',
'https://assets.onecompiler.app/42vcx6nqa/42vut4jnk/the%20poppy%20war.png',
'A dark, intense fantasy inspired by Chinese history, The Poppy War follows Rin, a war orphan who rises to attend an elite military academy and uncovers her mysterious shamanic powers. As war looms, Rin faces brutal battles and moral dilemmas, with themes of power, vengeance, and the devastating cost of conflict.',
'https://open.spotify.com/playlist/7IQsN7k64U7qZsumOGeXco?si=18c2d983661648f1',
'https://www.google.com/search?q=Books by R.F. Kuang',
'https://www.google.com/search?q=The Poppy War by R.F. Kuang',
'https://open.spotify.com/embed/playlist/7IQsN7k64U7qZsumOGeXco?utm_source=generator',
'https://www.amazon.in/Poppy-War-R-F-Kuang/dp/0008239843');
return false;">
</div>
<div style="margin-right: 25px;">
<img src="https://assets.onecompiler.app/42vcx6nqa/42vut4jnk/legends%20and%20lattes.png"
alt="Legends & Lattes by Travis Baldree"
<a href="#" onclick="BookBG('2');
openModal('Legends & Lattes',
'https://assets.onecompiler.app/42vcx6nqa/42vut4jnk/legends%20and%20lattes.png',
'A cozy fantasy about second chances, Legends & Lattes follows Viv, an orc who gives up a life of adventure to open a coffee shop. As she builds a new life in a charming town, Viv finds community, unexpected friendships, and even a little romance. This light-hearted story offers a delightful escape with themes of found family and following your dreams.',
'https://open.spotify.com/playlist/2xzy5Ssyqc7NHV50s2XpMi',
'https://www.google.com/search?q=Books by Travis Baldree',
'https://www.google.com/search?q=Legends & Lattes by Travis Baldree',
'https://open.spotify.com/embed/playlist/2xzy5Ssyqc7NHV50s2XpMi?utm_source=generator',
'https://www.amazon.in/Legends-Lattes-Travis-Baldree/dp/1035007312');
return false;">
</div>
<div>
<img src="https://assets.onecompiler.app/42vcx6nqa/42vut4jnk/the%20green%20bone%20saga.jpg"
alt="The Green Bone Saga by Fonda Lee"
<a href="#" onclick="BookBG('3');
openModal('The Green Bone Saga',
'https://assets.onecompiler.app/42vcx6nqa/42vut4jnk/the%20green%20bone%20saga.jpg',
'An epic urban fantasy trilogy beginning with Jade City, The Green Bone Saga is set in a world where jade grants powerful abilities and follows the fierce rivalry between two crime families on the island of Kekon. Fonda Lee’s saga is rich with intrigue, action, and complex characters, exploring loyalty, legacy, and the high stakes of power.',
'https://open.spotify.com/playlist/46WyCmGphRAupsgBrrS9Q7?si=uYC0juDUSxKD4MTEKnoFUw',
'https://www.google.com/search?q=Books by Fonda Lee',
'https://www.google.com/search?q=The Green Bone Saga by Fonda Lee',
'https://open.spotify.com/embed/playlist/46WyCmGphRAupsgBrrS9Q7?utm_source=generator',
'https://www.amazon.in/Jade-City-Green-Bone-Saga/dp/0316440868');
return false;">
</div>
</div>
<div>
<div style="margin-right: 10px;">
<li>
<a href="https://www.google.com/search?q=The Poppy War by R.F. Kuang"
class="category-link"
target="_blank">
The Poppy War by R.F. Kuang
</a>
</li>
</div>
<div style="margin-right: 10px;">
<li>
<a href="https://www.google.com/search?q=Legends and Lattes by Travis Baldree"
class="category-link"
target="_blank">
Legends & Lattes by Travis Baldree
</a>
</li>
</div>
<div>
<li>
<a href="https://www.google.com/search?q=The Green Bone Saga by Fonda Lee"
class="category-link"
target="_blank">
The Green Bone Saga by Fonda Lee
</a>
</li>
</div>
</div>
<div>
<div style="margin-right: 25px;">
<img src="https://assets.onecompiler.app/42vcx6nqa/42vut4jnk/uprooted.png"
alt="Uprooted by Naomi Novik"
<a href="#" onclick="BookBG('4');
openModal('Uprooted',
'https://assets.onecompiler.app/42vcx6nqa/42vut4jnk/uprooted.png',
'In this enchanting dark fantasy, Uprooted follows Agnieszka, a young woman chosen to serve a powerful, mysterious wizard known as the Dragon. Set in a world where an ominous, corrupting force known as the Wood threatens the land, Agnieszka must learn to harness her own magical abilities to protect her village and confront the dangers lurking within the Wood.',
'https://open.spotify.com/playlist/3obHFkeB9DqjzJF3fa6r5A?si=16e41a81a85c4c71',
'https://www.google.com/search?q=Books by Naomi Novik',
'https://www.google.com/search?q=Uprooted by Naomi Novik',
'https://open.spotify.com/embed/playlist/3obHFkeB9DqjzJF3fa6r5A?utm_source=generator',
'https://www.amazon.in/Uprooted-Novel-Temeraire-Naomi-Novik/dp/0804179050');
return false;">
</div>
<div style="margin-right: 25px;">
<img src="https://assets.onecompiler.app/42vcx6nqa/42vut4jnk/lords%20of%20the%20ring.png"
alt="The Lord of the Rings by J.R.R. Tolkien"
<a href="#" onclick="BookBG('5');
openModal('The Lord of the Rings',
'https://assets.onecompiler.app/42vcx6nqa/42vut4jnk/lords%20of%20the%20ring.png',
'An epic saga of good versus evil, The Lord of the Rings follows Frodo Baggins and a fellowship of diverse companions as they journey to destroy the One Ring and defeat the dark lord Sauron. Set in the richly imagined world of Middle-earth, Tolkien’s tale explores themes of friendship, sacrifice, and the resilience of the human spirit.',
'https://open.spotify.com/playlist/0Lnc6qJwr9JGflnFAjuJMg?si=ba3f1af2163849b3',
'https://www.google.com/search?q=Books by J.R.R. Tolkien',
'https://www.google.com/search?q=The Lord of the Rings by J.R.R. Tolkien',
'https://open.spotify.com/embed/playlist/0Lnc6qJwr9JGflnFAjuJMg?utm_source=generator',
'https://www.amazon.in/Lord-Rings-J-R-Tolkien/dp/0261103253');
return false;">
</div>
<div>
<img src="https://assets.onecompiler.app/42vcx6nqa/42vut4jnk/the%20first%20law%20trilogy.jpg"
alt="The First Law Trilogy by Joe Abercrombie"
<a href="#" onclick="BookBG('6');
openModal('The First Law Trilogy',
'https://assets.onecompiler.app/42vcx6nqa/42vut4jnk/the%20first%20law%20trilogy.jpg',
'A gritty, dark fantasy series, The First Law Trilogy begins with The Blade Itself and follows a diverse cast of morally ambiguous characters in a brutal, war-torn world. With themes of power, betrayal, and the costs of violence, Joe Abercrombie’s trilogy delves into the darker sides of human nature and the complexities of good versus evil.',
'https://open.spotify.com/playlist/3mqjTvUq2ZAvu5xLxYYQYH?si=a455ddf02dd04a96',
'https://www.google.com/search?q=Books by Joe Abercrombie',
'https://www.google.com/search?q=The First Law Trilogy by Joe Abercrombie',
'https://open.spotify.com/embed/playlist/3mqjTvUq2ZAvu5xLxYYQYH?utm_source=generator',
'https://www.amazon.in/First-Law-Trilogy-Joe-Abercrombie/dp/0316361194');
return false;">
</div>
</div>
<div>
<div style="margin-right: 10px;">
<li>
<a href="https://www.google.com/search?q=Uprooted by Naomi Novik"
class="category-link"
target="_blank">
Uprooted by Naomi Novik
</a>
</li>
</div>
<div style="margin-right: 10px;">
<li>
<a href="https://www.google.com/search?q=The Lord of the Rings by J.R.R. Tolkien"
class="category-link"
target="_blank">
The Lord of the Rings by J.R.R. Tolkien
</a>
</li>
</div>
<div>
<li>
<a href="https://www.google.com/search?q=The First Law Trilogy by Joe Abercrombie"
class="category-link"
target="_blank">
The First Law Trilogy by Joe Abercrombie
</a>
</li>
</div>
</div>
<div>
<div style="margin-right: 25px;">
<img src="https://assets.onecompiler.app/42vcx6nqa/42vut4jnk/priest%20of%20bones.jpeg"
alt="Priest of Bones by Peter McLean"
<a href="#" onclick="BookBG('7');
openModal('Priest of Bones',
'https://assets.onecompiler.app/42vcx6nqa/42vut4jnk/priest%20of%20bones.jpeg',
'In this gritty, dark fantasy novel, Priest of Bones follows Tomas Piety, a former soldier turned crime boss who seeks to regain control of his city after his return from war. As he navigates the dangerous underworld of the city, Tomas must reconcile his violent past with his desire for power and revenge. McLean’s tale is filled with morally complex characters, bloodshed, and themes of loyalty and survival.',
'https://open.spotify.com/playlist/5dBKo5LMokKSwDRz5b3BCF?si=65204e7835084d04',
'https://www.google.com/search?q=Books by Peter McLean',
'https://www.google.com/search?q=Priest of Bones by Peter McLean',
'https://open.spotify.com/embed/playlist/5dBKo5LMokKSwDRz5b3BCF?utm_source=generator',
'https://www.amazon.in/Priest-Bones-War-Rose-Throne/dp/0451490215');
return false;">
</div>
<div>
<img src="https://assets.onecompiler.app/42vcx6nqa/42vut4jnk/american%20gods.jpeg"
alt="American Gods by Neil Gaiman"
<a href="#" onclick="BookBG('8');
openModal('American Gods',
'https://assets.onecompiler.app/42vcx6nqa/42vut4jnk/american%20gods.jpeg',
'Blending mythology and modern America, American Gods follows Shadow Moon, a man recently released from prison who becomes entangled in a war between the old gods of mythology and the new gods of technology and media. Gaiman weaves a rich narrative exploring belief, identity, and the shifting nature of power in a world caught between the past and the present.',
'https://open.spotify.com/playlist/4HEZ7M3FMUdSMiHSDEtRie?si=2ac76de394614109',
'https://www.google.com/search?q=Books by Neil Gaiman',
'https://www.google.com/search?q=American Gods by Neil Gaiman',
'https://open.spotify.com/embed/playlist/4HEZ7M3FMUdSMiHSDEtRie?utm_source=generator',
'https://www.amazon.in/American-Gods-Neil-Gaiman/dp/0380789035');
return false;">
</div>
</div>
<div>
<div style="margin-right: 10px;">
<li>
<a href="https://www.google.com/search?q=Priest of Bones by Peter McLean"
class="category-link"
target="_blank">
Priest of Bones by Peter McLean
</a>
</li>
</div>
<div>
<li>
<a href="https://www.google.com/search?q=American Gods by Neil Gaiman"
class="category-link"
target="_blank">
American Gods by Neil Gaiman
</a>
</li>
</div>
</div>
</ul>
</section>
<div id="modal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">×</span>
<h2 id="modal-title"></h2>
<div class="modal-body">
<div>
<img id="modal-image" src="" alt="Book Image" class="modal-image">
<div class="button-container">
<!-- Spotify Button -->
<a href="#" target="_blank" id="spotify-link" class="button">
s<img src="https://assets.onecompiler.app/42vy5gdhb/42xdkqbfy/spotify%20logo%20(1).png" alt="Spotify Logo">
</a>
<!-- More from the Author Button -->
<a href="#" target="_blank" id="author-link" class="button">
a<img style="width: 120px;" src="https://assets.onecompiler.app/42vy5gdhb/42xdkqbfy/Screenshot%202024-11-07%20143109.png" alt="Author Logo">
</a>
<!-- Google Button -->
<a href="#" target="_blank" id="google-link" class="button">
g<img src="https://assets.onecompiler.app/42vy5gdhb/42xdkqbfy/Google%20logo.png" alt="Google Logo">
</a>
</div>
<div class="button-container">
<!-- Amazon Button -->
<a href="#" target="_blank" id="amazon-link" style="display: flex;
align-items: center;
padding: 5px 5px;
border: none;
border-radius: 5px;
background-color: #fff;
color: #fff;
font-size: 14px;
text-decoration: none;
transition: background-color 0.3s ease;">
g<img src="https://assets.onecompiler.app/42vy5gdhb/42xkuvscn/buy%20book.png" alt="Amazon Logo" style="height: 50px;
width: 130px;
margin-right: 8px;">
</a>
</div>
</div>
<div class="modal-details">
<iframe
id="playlist-link"
style="border-radius:12px"
src=""
width="100%"
height="352"
frameBorder="0"
allowfullscreen=""
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
loading="lazy"
class="playlist-link">
</iframe>
<p id="modal-description"></p>
</div>
<!-- Button Container -->
</div>
</div>
</div>
<script>
function openModal(title, imageUrl, description, spotifyUrl, authorUrl, googleUrl, playlistUrl, amazonUrl) {
document.getElementById('modal').style.display = 'block';
document.getElementById('modal-title').innerText = title;
document.getElementById('modal-image').src = imageUrl;
document.getElementById('modal-description').innerText = description;
// Set the URLs for the buttons
document.getElementById('spotify-link').href = spotifyUrl;
document.getElementById('author-link').href = authorUrl;
document.getElementById('google-link').href = googleUrl;
document.getElementById('playlist-link').src = playlistUrl;
document.getElementById('amazon-link').href = amazonUrl;
}
function closeModal() {
document.getElementById('modal').style.display = 'none';
}
</script>
<section id="contact">
<h2>Contact Us</h2>
<p>If you have any questions or feedback, feel free to <a href="mailto:readlytic14@gmail.com">email us</a>.</p>
</section>
<footer>
<p>© 2024 Readlytic. All rights reserved.</p>
</footer>
</body>
<script src="genre_color.js"></script>
<script>
const hexcodes = {
1 : "#C2C2C2",
2 : "#BE8035",
3 : "#57C04A",
4 : "#FFF7E0",
5 : "#CDD0D2",
6 : "#D79B7F",
7 : "#ABA08A",
8 : "#393D3C",
9 : "#65828A"
};
function BookBG(book) {
const hex = hexcodes[book];
if (hex) {
// Set the CSS variable --hex-color in the root element (:root)
document.documentElement.style.setProperty('--hex-color', hex);
console.log(document.documentElement.style.getPropertyValue('--hex-color'));
} else {
console.error("Invalid book ID");
}
}
</script>
</html>