Hugging Face's logo

Spaces:
webdevsha
/
epub-reader
Running

App Files Community
webdevsha commited on
Commit
7d5b725
·
verified ·
1 Parent(s): 5f34462

nope, no popup when we hover on the footnote/endnote numbering. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +506 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Epub Reader
3
- emoji: 🌍
4
- colorFrom: red
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: epub-reader
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,506 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Online EPUB Reader</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/epubjs@0.3.93/dist/epub.min.js"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ .footnote-popup {
13
+ position: absolute;
14
+ background: white;
15
+ border: 1px solid #ddd;
16
+ border-radius: 4px;
17
+ padding: 10px;
18
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
19
+ max-width: 300px;
20
+ z-index: 100;
21
+ display: none;
22
+ }
23
+ #viewer {
24
+ height: calc(100vh - 160px);
25
+ }
26
+ .loading-spinner {
27
+ border: 4px solid rgba(0, 0, 0, 0.1);
28
+ border-radius: 50%;
29
+ border-top: 4px solid #3498db;
30
+ width: 40px;
31
+ height: 40px;
32
+ animation: spin 1s linear infinite;
33
+ }
34
+ @keyframes spin {
35
+ 0% { transform: rotate(0deg); }
36
+ 100% { transform: rotate(360deg); }
37
+ }
38
+ .progress-bar {
39
+ width: 100%;
40
+ height: 4px;
41
+ background-color: #e5e7eb;
42
+ border-radius: 2px;
43
+ overflow: hidden;
44
+ }
45
+ .progress-fill {
46
+ height: 100%;
47
+ background-color: #3b82f6;
48
+ transition: width 0.3s ease;
49
+ }
50
+ </style>
51
+ </head>
52
+ <body class="bg-gray-50">
53
+ <div class="container mx-auto px-4 py-6">
54
+ <header class="mb-8 text-center">
55
+ <h1 class="text-3xl font-bold text-indigo-700">Online EPUB Reader</h1>
56
+ <p class="text-gray-600 mt-2">Upload and read your EPUB books in the browser</p>
57
+ </header>
58
+
59
+ <div class="max-w-2xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 mb-8">
60
+ <div class="text-center">
61
+ <div id="upload-section" class="space-y-4">
62
+ <div class="flex justify-center">
63
+ <div class="w-24 h-24 rounded-full bg-indigo-100 flex items-center justify-center">
64
+ <i class="fas fa-book-open text-4xl text-indigo-500"></i>
65
+ </div>
66
+ </div>
67
+ <h2 class="text-xl font-semibold text-gray-800">Upload Your EPUB File</h2>
68
+ <p class="text-gray-500">Supported formats: .epub</p>
69
+
70
+ <div class="mt-6">
71
+ <label for="epub-upload" class="cursor-pointer">
72
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 hover:border-indigo-400 transition-colors">
73
+ <div class="flex flex-col items-center justify-center space-y-2">
74
+ <i class="fas fa-cloud-upload-alt text-3xl text-indigo-500"></i>
75
+ <p class="text-gray-600">Drag & drop your EPUB file here or click to browse</p>
76
+ <button id="upload-btn" class="mt-4 px-6 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors">
77
+ Select EPUB File
78
+ </button>
79
+ </div>
80
+ </div>
81
+ <input id="epub-upload" type="file" accept=".epub" class="hidden">
82
+ </label>
83
+ </div>
84
+ </div>
85
+
86
+ <div id="loading-section" class="hidden py-8">
87
+ <div class="flex flex-col items-center justify-center space-y-4">
88
+ <div class="loading-spinner"></div>
89
+ <p class="text-gray-600">Loading your book...</p>
90
+ <div class="w-full max-w-xs">
91
+ <div class="progress-bar">
92
+ <div id="progress-fill" class="progress-fill" style="width: 0%"></div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+
100
+ <div id="reader-section" class="hidden bg-white rounded-xl shadow-md overflow-hidden">
101
+ <div class="flex items-center justify-between bg-gray-100 px-4 py-3 border-b">
102
+ <div id="book-title" class="font-semibold text-gray-700 truncate"></div>
103
+ <div class="flex space-x-2">
104
+ <button id="prev-btn" class="p-2 text-gray-600 hover:text-indigo-600 hover:bg-gray-200 rounded-full">
105
+ <i class="fas fa-chevron-left"></i>
106
+ </button>
107
+ <button id="next-btn" class="p-2 text-gray-600 hover:text-indigo-600 hover:bg-gray-200 rounded-full">
108
+ <i class="fas fa-chevron-right"></i>
109
+ </button>
110
+ <button id="settings-btn" class="p-2 text-gray-600 hover:text-indigo-600 hover:bg-gray-200 rounded-full">
111
+ <i class="fas fa-cog"></i>
112
+ </button>
113
+ </div>
114
+ </div>
115
+
116
+ <div id="viewer" class="w-full"></div>
117
+ <div id="footnote-popup" class="footnote-popup"></div>
118
+
119
+ <div class="bg-gray-100 px-4 py-3 border-t flex justify-between items-center">
120
+ <div id="page-info" class="text-sm text-gray-500">Page: - / -</div>
121
+ <div class="flex space-x-4">
122
+ <button id="toc-btn" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">
123
+ <i class="fas fa-list-ul mr-1"></i> Table of Contents
124
+ </button>
125
+ <button id="fullscreen-btn" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">
126
+ <i class="fas fa-expand mr-1"></i> Fullscreen
127
+ </button>
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+ <div id="toc-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
133
+ <div class="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[80vh] overflow-hidden">
134
+ <div class="border-b px-6 py-4 flex justify-between items-center">
135
+ <h3 class="text-lg font-semibold text-gray-800">Table of Contents</h3>
136
+ <button id="close-toc-btn" class="text-gray-400 hover:text-gray-600">
137
+ <i class="fas fa-times"></i>
138
+ </button>
139
+ </div>
140
+ <div id="toc-list" class="overflow-y-auto p-4" style="max-height: calc(80vh - 80px);"></div>
141
+ </div>
142
+ </div>
143
+
144
+ <div id="settings-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
145
+ <div class="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[80vh] overflow-hidden">
146
+ <div class="border-b px-6 py-4 flex justify-between items-center">
147
+ <h3 class="text-lg font-semibold text-gray-800">Reading Settings</h3>
148
+ <button id="close-settings-btn" class="text-gray-400 hover:text-gray-600">
149
+ <i class="fas fa-times"></i>
150
+ </button>
151
+ </div>
152
+ <div class="p-6 space-y-6">
153
+ <div>
154
+ <label class="block text-sm font-medium text-gray-700 mb-2">Font Size</label>
155
+ <div class="flex items-center space-x-4">
156
+ <button id="font-decrease" class="p-2 bg-gray-200 rounded-full hover:bg-gray-300">
157
+ <i class="fas fa-minus"></i>
158
+ </button>
159
+ <span id="font-size-display" class="text-lg">16px</span>
160
+ <button id="font-increase" class="p-2 bg-gray-200 rounded-full hover:bg-gray-300">
161
+ <i class="fas fa-plus"></i>
162
+ </button>
163
+ </div>
164
+ </div>
165
+ <div>
166
+ <label class="block text-sm font-medium text-gray-700 mb-2">Theme</label>
167
+ <div class="grid grid-cols-3 gap-2">
168
+ <button data-theme="light" class="p-3 border rounded-lg hover:border-indigo-400 theme-btn">
169
+ <div class="flex items-center space-x-2">
170
+ <div class="w-4 h-4 rounded-full bg-white border border-gray-300"></div>
171
+ <span>Light</span>
172
+ </div>
173
+ </button>
174
+ <button data-theme="sepia" class="p-3 border rounded-lg hover:border-indigo-400 theme-btn">
175
+ <div class="flex items-center space-x-2">
176
+ <div class="w-4 h-4 rounded-full bg-amber-100"></div>
177
+ <span>Sepia</span>
178
+ </div>
179
+ </button>
180
+ <button data-theme="dark" class="p-3 border rounded-lg hover:border-indigo-400 theme-btn">
181
+ <div class="flex items-center space-x-2">
182
+ <div class="w-4 h-4 rounded-full bg-gray-800"></div>
183
+ <span>Dark</span>
184
+ </div>
185
+ </button>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+
193
+ <script>
194
+ document.addEventListener('DOMContentLoaded', function() {
195
+ // Elements
196
+ const uploadSection = document.getElementById('upload-section');
197
+ const loadingSection = document.getElementById('loading-section');
198
+ const readerSection = document.getElementById('reader-section');
199
+ const uploadBtn = document.getElementById('upload-btn');
200
+ const epubUpload = document.getElementById('epub-upload');
201
+ const progressFill = document.getElementById('progress-fill');
202
+ const bookTitle = document.getElementById('book-title');
203
+ const tocModal = document.getElementById('toc-modal');
204
+ const tocList = document.getElementById('toc-list');
205
+ const tocBtn = document.getElementById('toc-btn');
206
+ const closeTocBtn = document.getElementById('close-toc-btn');
207
+ const settingsModal = document.getElementById('settings-modal');
208
+ const settingsBtn = document.getElementById('settings-btn');
209
+ const closeSettingsBtn = document.getElementById('close-settings-btn');
210
+ const prevBtn = document.getElementById('prev-btn');
211
+ const nextBtn = document.getElementById('next-btn');
212
+ const pageInfo = document.getElementById('page-info');
213
+ const fullscreenBtn = document.getElementById('fullscreen-btn');
214
+ const fontDecrease = document.getElementById('font-decrease');
215
+ const fontIncrease = document.getElementById('font-increase');
216
+ const fontSizeDisplay = document.getElementById('font-size-display');
217
+ const themeButtons = document.querySelectorAll('.theme-btn');
218
+
219
+ // EPUB.js variables
220
+ let book;
221
+ let rendition;
222
+ let currentSectionIndex = 0;
223
+ let spineItems = [];
224
+
225
+ // Drag and drop functionality
226
+ const dropArea = document.querySelector('.border-dashed');
227
+
228
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
229
+ dropArea.addEventListener(eventName, preventDefaults, false);
230
+ });
231
+
232
+ function preventDefaults(e) {
233
+ e.preventDefault();
234
+ e.stopPropagation();
235
+ }
236
+
237
+ ['dragenter', 'dragover'].forEach(eventName => {
238
+ dropArea.addEventListener(eventName, highlight, false);
239
+ });
240
+
241
+ ['dragleave', 'drop'].forEach(eventName => {
242
+ dropArea.addEventListener(eventName, unhighlight, false);
243
+ });
244
+
245
+ function highlight() {
246
+ dropArea.classList.add('border-indigo-400');
247
+ }
248
+
249
+ function unhighlight() {
250
+ dropArea.classList.remove('border-indigo-400');
251
+ }
252
+
253
+ dropArea.addEventListener('drop', handleDrop, false);
254
+
255
+ function handleDrop(e) {
256
+ const dt = e.dataTransfer;
257
+ const files = dt.files;
258
+
259
+ if (files.length > 0 && files[0].name.endsWith('.epub')) {
260
+ handleFile(files[0]);
261
+ }
262
+ }
263
+
264
+ // File upload handler
265
+ uploadBtn.addEventListener('click', function() {
266
+ epubUpload.click();
267
+ });
268
+
269
+ epubUpload.addEventListener('change', function(e) {
270
+ if (e.target.files.length > 0) {
271
+ handleFile(e.target.files[0]);
272
+ }
273
+ });
274
+
275
+ function handleFile(file) {
276
+ uploadSection.classList.add('hidden');
277
+ loadingSection.classList.remove('hidden');
278
+
279
+ // Simulate progress for better UX
280
+ let progress = 0;
281
+ const progressInterval = setInterval(() => {
282
+ progress += Math.random() * 10;
283
+ if (progress >= 90) clearInterval(progressInterval);
284
+ progressFill.style.width = `${Math.min(progress, 100)}%`;
285
+ }, 200);
286
+
287
+ const reader = new FileReader();
288
+
289
+ reader.onload = function(e) {
290
+ const content = e.target.result;
291
+
292
+ // Initialize EPUB.js
293
+ book = ePub(content);
294
+
295
+ book.loaded.metadata.then(function(meta) {
296
+ bookTitle.textContent = meta.title || 'Untitled Book';
297
+ });
298
+
299
+ book.loaded.spine.then(function(spine) {
300
+ spineItems = spine.spineItems;
301
+ });
302
+
303
+ book.loaded.navigation.then(function(nav) {
304
+ displayToc(nav.toc);
305
+ });
306
+
307
+ // Initialize rendition
308
+ rendition = book.renderTo("viewer", {
309
+ width: "100%",
310
+ height: "100%",
311
+ spread: "none"
312
+ });
313
+
314
+ rendition.display().then(function() {
315
+ clearInterval(progressInterval);
316
+ progressFill.style.width = '100%';
317
+
318
+ setTimeout(() => {
319
+ loadingSection.classList.add('hidden');
320
+ readerSection.classList.remove('hidden');
321
+ updatePageInfo();
322
+ }, 500);
323
+ });
324
+
325
+ // Navigation handlers
326
+ rendition.on("relocated", function(location) {
327
+ currentSectionIndex = location.start.index;
328
+ updatePageInfo();
329
+ });
330
+ };
331
+
332
+ reader.readAsArrayBuffer(file);
333
+ }
334
+
335
+ // Table of Contents
336
+ function displayToc(toc) {
337
+ tocList.innerHTML = '';
338
+
339
+ function createTocItems(items, level = 0) {
340
+ items.forEach(item => {
341
+ const itemElement = document.createElement('div');
342
+ itemElement.className = `py-2 pl-${level * 4} cursor-pointer hover:text-indigo-600`;
343
+ itemElement.textContent = item.label;
344
+
345
+ itemElement.addEventListener('click', function() {
346
+ rendition.display(item.href);
347
+ tocModal.classList.add('hidden');
348
+ });
349
+
350
+ tocList.appendChild(itemElement);
351
+
352
+ if (item.subitems && item.subitems.length > 0) {
353
+ createTocItems(item.subitems, level + 1);
354
+ }
355
+ });
356
+ }
357
+
358
+ createTocItems(toc);
359
+ }
360
+
361
+ // Navigation controls
362
+ prevBtn.addEventListener('click', function() {
363
+ rendition.prev();
364
+ });
365
+
366
+ nextBtn.addEventListener('click', function() {
367
+ rendition.next();
368
+ });
369
+
370
+ tocBtn.addEventListener('click', function() {
371
+ tocModal.classList.remove('hidden');
372
+ });
373
+
374
+ closeTocBtn.addEventListener('click', function() {
375
+ tocModal.classList.add('hidden');
376
+ });
377
+
378
+ settingsBtn.addEventListener('click', function() {
379
+ settingsModal.classList.remove('hidden');
380
+ });
381
+
382
+ closeSettingsBtn.addEventListener('click', function() {
383
+ settingsModal.classList.add('hidden');
384
+ });
385
+
386
+ // Update page info
387
+ function updatePageInfo() {
388
+ if (spineItems.length > 0) {
389
+ pageInfo.textContent = `Page: ${currentSectionIndex + 1} / ${spineItems.length}`;
390
+ }
391
+ }
392
+
393
+ // Fullscreen mode
394
+ fullscreenBtn.addEventListener('click', function() {
395
+ const viewer = document.getElementById('viewer');
396
+
397
+ if (!document.fullscreenElement) {
398
+ viewer.requestFullscreen().catch(err => {
399
+ console.error(`Error attempting to enable fullscreen: ${err.message}`);
400
+ });
401
+ fullscreenBtn.innerHTML = '<i class="fas fa-compress mr-1"></i> Exit Fullscreen';
402
+ } else {
403
+ document.exitFullscreen();
404
+ fullscreenBtn.innerHTML = '<i class="fas fa-expand mr-1"></i> Fullscreen';
405
+ }
406
+ });
407
+
408
+ // Font size controls
409
+ let fontSize = 16;
410
+
411
+ fontDecrease.addEventListener('click', function() {
412
+ if (fontSize > 12) {
413
+ fontSize -= 2;
414
+ updateFontSize();
415
+ }
416
+ });
417
+
418
+ fontIncrease.addEventListener('click', function() {
419
+ if (fontSize < 24) {
420
+ fontSize += 2;
421
+ updateFontSize();
422
+ }
423
+ });
424
+
425
+ function updateFontSize() {
426
+ if (rendition) {
427
+ rendition.themes.fontSize(`${fontSize}px`);
428
+ fontSizeDisplay.textContent = `${fontSize}px`;
429
+ }
430
+ }
431
+
432
+ // Theme controls
433
+ themeButtons.forEach(button => {
434
+ button.addEventListener('click', function() {
435
+ const theme = this.getAttribute('data-theme');
436
+ applyTheme(theme);
437
+ });
438
+ });
439
+
440
+ // Footnote hover functionality
441
+ document.addEventListener('mouseover', function(e) {
442
+ const footnoteEl = e.target.closest('a[epub:type="noteref"], .footnote, .endnote, [role="doc-noteref"]');
443
+ if (footnoteEl) {
444
+ const href = footnoteEl.getAttribute('href');
445
+ if (href) {
446
+ const id = href.substring(1); // Remove #
447
+ const footnoteContent = document.getElementById(id);
448
+ if (footnoteContent) {
449
+ const popup = document.getElementById('footnote-popup');
450
+ popup.innerHTML = footnoteContent.innerHTML;
451
+ popup.style.display = 'block';
452
+
453
+ // Position near the hovered element
454
+ const rect = footnoteEl.getBoundingClientRect();
455
+ popup.style.left = `${rect.left}px`;
456
+ popup.style.top = `${rect.bottom + window.scrollY}px`;
457
+ }
458
+ }
459
+ }
460
+ });
461
+
462
+ document.addEventListener('mouseout', function(e) {
463
+ const footnoteEl = e.target.closest('a[epub:type="noteref"], .footnote, .endnote, [role="doc-noteref"]');
464
+ if (footnoteEl) {
465
+ const popup = document.getElementById('footnote-popup');
466
+ popup.style.display = 'none';
467
+ }
468
+ });
469
+
470
+ function applyTheme(theme) {
471
+ if (!rendition) return;
472
+
473
+ switch (theme) {
474
+ case 'light':
475
+ rendition.themes.register('light', {
476
+ 'body': {
477
+ 'color': '#000000',
478
+ 'background': '#ffffff'
479
+ }
480
+ });
481
+ rendition.themes.select('light');
482
+ break;
483
+ case 'sepia':
484
+ rendition.themes.register('sepia', {
485
+ 'body': {
486
+ 'color': '#5b4636',
487
+ 'background': '#f4ecd8'
488
+ }
489
+ });
490
+ rendition.themes.select('sepia');
491
+ break;
492
+ case 'dark':
493
+ rendition.themes.register('dark', {
494
+ 'body': {
495
+ 'color': '#ffffff',
496
+ 'background': '#1a1a1a'
497
+ }
498
+ });
499
+ rendition.themes.select('dark');
500
+ break;
501
+ }
502
+ }
503
+ });
504
+ </script>
505
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=webdevsha/epub-reader" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
506
+ </html>