| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>eRead - EPUB Reader</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| 'book-primary': '#2a528a', |
| 'book-light': '#f5f7fa', |
| 'book-dark': '#1a365d', |
| }, |
| fontFamily: { |
| 'serif-custom': ['Georgia', 'serif'], |
| 'sans-reader': ['Inter', 'sans-serif'] |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: #f5f7fa; |
| transition: background-color 0.3s ease; |
| } |
| |
| .page-content { |
| font-family: 'serif-custom'; |
| font-size: 1.1rem; |
| line-height: 1.7; |
| } |
| |
| .book-shadow { |
| box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); |
| } |
| |
| .reading-area { |
| background-color: #faf8f0; |
| min-height: calc(100vh - 80px); |
| } |
| |
| .dark-mode .reading-area { |
| background-color: #1e293b; |
| color: #f8fafc; |
| backdrop-filter: blur(20px); |
| } |
| |
| .dark-mode .text-controls button, |
| .night-mode .text-controls button { |
| color: #e2e8f0; |
| } |
| |
| .dark-mode .text-controls button:hover, |
| .night-mode .text-controls button:hover { |
| background-color: rgba(255, 255, 255, 0.1); |
| } |
| |
| .dark-mode .page-content { |
| color: #e2e8f0; |
| } |
| |
| .sepia-mode .reading-area { |
| background-color: #f0e6d2; |
| color: #3a3229; |
| } |
| |
| .night-mode .reading-area { |
| background-color: #0d0d0d; |
| color: #e0e0e0; |
| } |
| |
| .night-mode .page-content { |
| color: #f0f0f0; |
| } |
| |
| .book-list-item:hover { |
| background-color: rgba(42, 82, 138, 0.05); |
| } |
| |
| .book-page { |
| opacity: 0; |
| transform: translateY(20px); |
| transition: opacity 0.5s ease, transform 0.5s ease; |
| } |
| |
| .book-page.active { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| |
| .progress-thumb { |
| transition: transform 0.2s ease; |
| } |
| |
| .progress-thumb:active { |
| transform: scale(1.2); |
| } |
| |
| .rotate-book { |
| transition: transform 0.4s ease; |
| } |
| |
| .rotate-book:hover { |
| transform: rotate(180deg); |
| } |
| |
| .sidebar { |
| transform: translateX(-100%); |
| transition: transform 0.3s ease; |
| } |
| |
| .sidebar.open { |
| transform: translateX(0); |
| } |
| |
| .overlay { |
| background: rgba(0, 0, 0, 0.5); |
| opacity: 0; |
| pointer-events: none; |
| transition: opacity 0.3s ease; |
| } |
| |
| .overlay.active { |
| opacity: 1; |
| pointer-events: all; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100"> |
| <div class="flex flex-col min-h-screen"> |
| |
| <nav class="bg-white/80 backdrop-blur-md text-gray-900 py-3 px-4 flex justify-between items-center rounded-b-xl shadow-sm border-b border-gray-200/50"> |
| <div class="flex items-center"> |
| <button id="sidebar-toggle" class="text-white mr-4 focus:outline-none"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| <h1 class="text-2xl font-bold">eRead</h1> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| <div class="flex items-center"> |
| <button id="font-size-down" class="text-white p-2 focus:outline-none"> |
| <i class="fas fa-font text-lg"></i> |
| <span class="text-sm">-</span> |
| </button> |
| <button id="font-size-up" class="text-white p-2 focus:outline-none"> |
| <i class="fas fa-font text-lg"></i> |
| <span class="text-sm">+</span> |
| </button> |
| </div> |
| |
| <div class="relative"> |
| <button id="theme-toggle" class="p-2 rounded-full bg-gray-100/70 backdrop-blur-sm focus:outline-none"> |
| <i class="fas fa-moon text-gray-700"></i> |
| </button> |
| </div> |
| |
| <button id="fullscreen-toggle" class="p-2 focus:outline-none"> |
| <i class="fas fa-expand text-white"></i> |
| </button> |
| </div> |
| </nav> |
| |
| <div class="flex flex-1 overflow-hidden"> |
| |
| <div id="sidebar" class="sidebar bg-white/90 backdrop-blur-lg w-64 md:w-80 fixed top-0 left-0 bottom-0 z-40 border-r border-gray-200/30"> |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
| <h2 class="text-xl font-bold text-book-primary">Your Library</h2> |
| <button id="sidebar-close" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times text-lg"></i> |
| </button> |
| </div> |
| |
| <div class="p-4"> |
| <input type="file" id="file-upload" class="hidden" accept=".epub"> |
| <label for="file-upload" class="w-full bg-book-primary hover:bg-book-dark text-white py-2 px-4 rounded flex items-center justify-center cursor-pointer transition"> |
| <i class="fas fa-plus mr-2"></i> |
| Add New Book |
| </label> |
| |
| <h3 class="mt-6 mb-2 font-semibold text-gray-600">Recent Books</h3> |
| <div class="space-y-2"> |
| <div class="book-list-item flex items-center p-3 rounded-lg cursor-pointer border border-gray-200"> |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-20"></div> |
| <div class="ml-3"> |
| <p class="font-medium">The Great Gatsby</p> |
| <p class="text-sm text-gray-500">F. Scott Fitzgerald</p> |
| </div> |
| </div> |
| |
| <div class="book-list-item flex items-center p-3 rounded-lg cursor-pointer border border-gray-200"> |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-20"></div> |
| <div class="ml-3"> |
| <p class="font-medium">Pride and Prejudice</p> |
| <p class="text-sm text-gray-500">Jane Austen</p> |
| </div> |
| </div> |
| </div> |
| |
| <h3 class="mt-6 mb-2 font-semibold text-gray-600">Collections</h3> |
| <div class="space-y-1"> |
| <div class="flex items-center p-2 pl-4 rounded hover:bg-gray-100 cursor-pointer"> |
| <i class="fas fa-book text-book-primary mr-3"></i> |
| <span>Fiction</span> |
| </div> |
| <div class="flex items-center p-2 pl-4 rounded hover:bg-gray-100 cursor-pointer"> |
| <i class="fas fa-book text-book-primary mr-3"></i> |
| <span>Non-fiction</span> |
| </div> |
| <div class="flex items-center p-2 pl-4 rounded hover:bg-gray-100 cursor-pointer"> |
| <i class="fas fa-book text-book-primary mr-3"></i> |
| <span>Classics</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="overlay" class="overlay fixed inset-0 z-30 bg-black bg-opacity-50"></div> |
| |
| |
| <main class="flex-1 flex flex-col"> |
| <div class="reading-area flex-1 py-6 px-4 md:px-10 bg-white/70 backdrop-blur-sm"> |
| |
| <div class="text-center mb-6"> |
| <h2 class="text-2xl font-bold">Pride and Prejudice</h2> |
| <p class="text-gray-600 dark:text-gray-300">Chapter 3</p> |
| <p class="text-sm text-gray-500 mt-1">Jane Austen</p> |
| </div> |
| |
| |
| <div class="max-w-2xl mx-auto bg-white/90 backdrop-blur-sm rounded-2xl overflow-hidden shadow-sm border border-gray-200/30"> |
| <div class="book-page active p-6 md:p-10"> |
| <div class="page-content"> |
| <p>It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.</p> |
| |
| <p>However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters.</p> |
| |
| <p>"My dear Mr. Bennet," said his lady to him one day, "have you heard that Netherfield Park is let at last?"</p> |
| |
| <p>Mr. Bennet replied that he had not.</p> |
| |
| <p>"But it is," returned she; "for Mrs. Long has just been here, and she told me all about it."</p> |
| |
| <p>Mr. Bennet made no answer.</p> |
| |
| <p>"Do you not want to know who has taken it?" cried his wife impatiently.</p> |
| |
| <p>"You want to tell me, and I have no objection to hearing it."</p> |
| |
| <p>This was invitation enough.</p> |
| </div> |
| </div> |
| |
| <div class="book-page p-6 md:p-10"> |
| <div class="page-content"> |
| <p>"Why, my dear, you must know, Mrs. Long says that Netherfield is taken by a young man of large fortune from the north of England; that he came down on Monday in a chaise and four to see the place, and was so much delighted with it that he agreed with Mr. Morris immediately; that he is to take possession before Michaelmas, and some of his servants are to be in the house by the end of next week."</p> |
| |
| <p>"What is his name?"</p> |
| |
| <p>"Bingley."</p> |
| |
| <p>"Is he married or single?"</p> |
| |
| <p>"Oh! Single, my dear, to be sure! A single man of large fortune; four or five thousand a year. What a fine thing for our girls!"</p> |
| |
| <p>"How so? How can it affect them?"</p> |
| |
| <p>"My dear Mr. Bennet," replied his wife, "how can you be so tiresome! You must know that I am thinking of his marrying one of them."</p> |
| |
| <p>"Is that his design in settling here?"</p> |
| </div> |
| </div> |
| |
| <div class="book-page p-6 md:p-10"> |
| <div class="page-content"> |
| <p>"Design! Nonsense, how can you talk so! But it is very likely that he may fall in love with one of them, and therefore you must visit him as soon as he comes."</p> |
| |
| <p>"I see no occasion for that. You and the girls may go, or you may send them by themselves, which perhaps will be still better, for as you are as handsome as any of them, Mr. Bingley might like you the best of the party."</p> |
| |
| <p>"My dear, you flatter me. I certainly have had my share of beauty, but I do not pretend to be anything extraordinary now. When a woman has five grown-up daughters, she ought to give over thinking of her own beauty."</p> |
| |
| <p>"In such cases, a woman has not often much beauty to think of."</p> |
| |
| <p>"But, my dear, you must indeed go and see Mr. Bingley when he comes into the neighbourhood."</p> |
| |
| <p>"It is more than I engage for, I assure you."</p> |
| |
| <p>"But consider your daughters. Only think what an establishment it would be for one of them. Sir William and Lady Lucas are determined to go, merely on that account, for in general, you know, they visit no newcomers. Indeed you must go, for it will be impossible for us to visit him if you do not."</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="max-w-2xl mx-auto mt-6"> |
| <div class="flex items-center"> |
| <span class="text-sm text-gray-500 mr-2">10%</span> |
| <div class="flex-1 h-2 bg-gray-200 rounded-full relative"> |
| <div class="absolute top-0 left-0 h-full bg-book-primary rounded-full" style="width: 10%"></div> |
| <div class="progress-thumb absolute top-1/2 transform -translate-y-1/2 h-4 w-4 bg-book-primary rounded-full cursor-pointer shadow-md" style="left: 10%"></div> |
| </div> |
| <span class="text-sm text-gray-500 ml-2">100%</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white/80 backdrop-blur-md py-4 px-6 border-t border-gray-200/30 shadow-sm rounded-t-xl"> |
| <div class="max-w-2xl mx-auto flex justify-between items-center"> |
| <button id="prev-page" class="text-gray-700 hover:text-gray-900 p-3 rounded-full hover:bg-gray-100/50 backdrop-blur-sm"> |
| <i class="fas fa-chevron-left"></i> |
| </button> |
| |
| <div class="text-controls flex items-center space-x-3"> |
| <button id="sepia-mode" class="text-gray-600 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none"> |
| <i class="fas fa-book-open"></i> |
| </button> |
| |
| <button id="night-mode" class="text-gray-600 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none"> |
| <i class="fas fa-moon"></i> |
| </button> |
| |
| <button id="day-mode" class="text-gray-600 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none"> |
| <i class="fas fa-sun"></i> |
| </button> |
| |
| <button class="rotate-book text-gray-600 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"> |
| <i class="fas fa-rotate"></i> |
| </button> |
| </div> |
| |
| <button id="next-page" class="text-book-primary dark:text-gray-300 hover:text-book-dark p-3 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"> |
| <i class="fas fa-chevron-right"></i> |
| </button> |
| </div> |
| </div> |
| </main> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const sidebar = document.getElementById('sidebar'); |
| const sidebarToggle = document.getElementById('sidebar-toggle'); |
| const sidebarClose = document.getElementById('sidebar-close'); |
| const overlay = document.getElementById('overlay'); |
| const prevPageBtn = document.getElementById('prev-page'); |
| const nextPageBtn = document.getElementById('next-page'); |
| const bookPages = document.querySelectorAll('.book-page'); |
| const themeToggle = document.getElementById('theme-toggle'); |
| const sepiaModeBtn = document.getElementById('sepia-mode'); |
| const nightModeBtn = document.getElementById('night-mode'); |
| const dayModeBtn = document.getElementById('day-mode'); |
| const fontUpBtn = document.getElementById('font-size-up'); |
| const fontDownBtn = document.getElementById('font-size-down'); |
| const fullscreenBtn = document.getElementById('fullscreen-toggle'); |
| const body = document.body; |
| |
| |
| let currentPage = 0; |
| |
| |
| setActivePage(currentPage); |
| updateReadingMode('day'); |
| |
| |
| sidebarToggle.addEventListener('click', () => { |
| sidebar.classList.add('open'); |
| overlay.classList.add('active'); |
| }); |
| |
| sidebarClose.addEventListener('click', closeSidebar); |
| overlay.addEventListener('click', closeSidebar); |
| |
| function closeSidebar() { |
| sidebar.classList.remove('open'); |
| overlay.classList.remove('active'); |
| } |
| |
| prevPageBtn.addEventListener('click', () => { |
| if (currentPage > 0) { |
| currentPage--; |
| setActivePage(currentPage); |
| } |
| }); |
| |
| nextPageBtn.addEventListener('click', () => { |
| if (currentPage < bookPages.length - 1) { |
| currentPage++; |
| setActivePage(currentPage); |
| } |
| }); |
| |
| themeToggle.addEventListener('click', () => { |
| if (body.classList.contains('dark-mode')) { |
| body.classList.remove('dark-mode'); |
| themeToggle.innerHTML = '<i class="fas fa-moon text-white"></i>'; |
| } else { |
| body.classList.add('dark-mode'); |
| themeToggle.innerHTML = '<i class="fas fa-sun text-white"></i>'; |
| } |
| }); |
| |
| sepiaModeBtn.addEventListener('click', () => updateReadingMode('sepia')); |
| nightModeBtn.addEventListener('click', () => updateReadingMode('night')); |
| dayModeBtn.addEventListener('click', () => updateReadingMode('day')); |
| |
| fontUpBtn.addEventListener('click', () => adjustFontSize(0.1)); |
| fontDownBtn.addEventListener('click', () => adjustFontSize(-0.1)); |
| |
| fullscreenBtn.addEventListener('click', toggleFullscreen); |
| |
| document.addEventListener('keydown', (e) => { |
| if (e.key === 'ArrowLeft') { |
| prevPageBtn.click(); |
| } else if (e.key === 'ArrowRight') { |
| nextPageBtn.click(); |
| } |
| }); |
| |
| |
| function setActivePage(pageIndex) { |
| bookPages.forEach((page, index) => { |
| page.classList.toggle('active', index === pageIndex); |
| }); |
| |
| |
| const progressPercentage = (pageIndex / (bookPages.length - 1)) * 100; |
| document.querySelector('.progress-thumb').style.left = `${progressPercentage}%`; |
| document.querySelector('.bg-book-primary').style.width = `${progressPercentage}%`; |
| } |
| |
| function updateReadingMode(mode) { |
| body.classList.remove('sepia-mode', 'night-mode', 'dark-mode'); |
| |
| if (mode === 'sepia') { |
| body.classList.add('sepia-mode'); |
| } else if (mode === 'night') { |
| body.classList.add('night-mode'); |
| } else if (mode === 'dark') { |
| body.classList.add('dark-mode'); |
| } |
| } |
| |
| function adjustFontSize(change) { |
| const pageContent = document.querySelector('.page-content'); |
| const computedStyle = window.getComputedStyle(pageContent); |
| const currentSize = parseFloat(computedStyle.fontSize); |
| const newSize = currentSize + change; |
| |
| |
| if (newSize >= 0.8 && newSize <= 2) { |
| pageContent.style.fontSize = `${newSize}rem`; |
| } |
| } |
| |
| function toggleFullscreen() { |
| if (!document.fullscreenElement) { |
| document.documentElement.requestFullscreen().catch(err => { |
| console.error(`Error attempting to enable fullscreen: ${err.message}`); |
| }); |
| } else { |
| if (document.exitFullscreen) { |
| document.exitFullscreen(); |
| } |
| } |
| } |
| </script> |
| <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=ioniacob/ereader" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
