Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TieReader - Complete Reader with My Store</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"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Crimson+Text:wght@400;600&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary-color: #2563eb; | |
| --secondary-color: #1e40af; | |
| --accent-color: #3b82f6; | |
| --background-color: #ffffff; | |
| --text-color: #1f2937; | |
| --border-color: #e5e7eb; | |
| --sidebar-bg: #f8fafc; | |
| --reading-bg: #fefefe; | |
| --audio-bar-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| [data-theme="dark"] { | |
| --primary-color: #3b82f6; | |
| --secondary-color: #1e40af; | |
| --accent-color: #60a5fa; | |
| --background-color: #111827; | |
| --text-color: #f9fafb; | |
| --border-color: #374151; | |
| --sidebar-bg: #1f2937; | |
| --reading-bg: #111827; | |
| } | |
| [data-theme="sepia"] { | |
| --primary-color: #92400e; | |
| --secondary-color: #78350f; | |
| --accent-color: #b45309; | |
| --background-color: #f7f3e9; | |
| --text-color: #5d4037; | |
| --border-color: #d7ccc8; | |
| --sidebar-bg: #efebe9; | |
| --reading-bg: #faf6f0; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--background-color); | |
| color: var(--text-color); | |
| transition: all 0.3s ease; | |
| margin: 0; | |
| padding: 0; | |
| overflow-x: hidden; | |
| } | |
| .app-container { | |
| display: flex; | |
| height: 100vh; | |
| position: relative; | |
| } | |
| .sidebar { | |
| width: 300px; | |
| background-color: var(--sidebar-bg); | |
| border-right: 1px solid var(--border-color); | |
| display: flex; | |
| flex-direction: column; | |
| transition: transform 0.3s ease; | |
| z-index: 100; | |
| } | |
| .sidebar.collapsed { | |
| transform: translateX(-100%); | |
| } | |
| .main-content { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| padding-bottom: 120px; | |
| } | |
| .header { | |
| background-color: var(--background-color); | |
| border-bottom: 1px solid var(--border-color); | |
| padding: 1rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .reading-area { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 2rem; | |
| background-color: var(--reading-bg); | |
| font-family: 'Crimson Text', serif; | |
| line-height: 1.8; | |
| font-size: 18px; | |
| } | |
| .book-content { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .book-content h1, .book-content h2, .book-content h3 { | |
| color: var(--primary-color); | |
| margin-top: 2rem; | |
| margin-bottom: 1rem; | |
| } | |
| .book-content p { | |
| margin-bottom: 1.5rem; | |
| text-align: justify; | |
| } | |
| .highlight-word { | |
| background-color: rgba(59, 130, 246, 0.3); | |
| border-radius: 2px; | |
| transition: background-color 0.2s ease; | |
| } | |
| .book-content img { | |
| max-width: 100%; | |
| height: auto; | |
| border-radius: 8px; | |
| margin: 1rem 0; | |
| cursor: pointer; | |
| transition: transform 0.3s ease; | |
| } | |
| .book-content img:hover { | |
| transform: scale(1.02); | |
| } | |
| .toc-panel { | |
| background-color: var(--sidebar-bg); | |
| border-left: 1px solid var(--border-color); | |
| width: 280px; | |
| overflow-y: auto; | |
| transition: transform 0.3s ease; | |
| } | |
| .toc-panel.collapsed { | |
| transform: translateX(100%); | |
| } | |
| .toc-item { | |
| padding: 0.75rem 1rem; | |
| cursor: pointer; | |
| border-bottom: 1px solid var(--border-color); | |
| transition: background-color 0.2s ease; | |
| } | |
| .toc-item:hover { | |
| background-color: var(--accent-color); | |
| color: white; | |
| } | |
| .toc-item.active { | |
| background-color: var(--primary-color); | |
| color: white; | |
| } | |
| .audio-bar { | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| background: var(--audio-bar-bg); | |
| backdrop-filter: blur(10px); | |
| border-radius: 15px 15px 0 0; | |
| padding: 15px 20px; | |
| box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1); | |
| z-index: 1000; | |
| display: none; | |
| } | |
| .audio-bar.active { | |
| display: block; | |
| } | |
| .audio-controls { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 15px; | |
| } | |
| .audio-btn { | |
| background: rgba(255, 255, 255, 0.2); | |
| border: none; | |
| border-radius: 50%; | |
| width: 48px; | |
| height: 48px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .audio-btn:hover { | |
| background: rgba(255, 255, 255, 0.3); | |
| transform: scale(1.1); | |
| } | |
| .audio-btn.play { | |
| width: 60px; | |
| height: 60px; | |
| background: rgba(255, 255, 255, 0.3); | |
| } | |
| .audio-progress { | |
| flex: 1; | |
| margin: 0 20px; | |
| } | |
| .progress-bar { | |
| width: 100%; | |
| height: 6px; | |
| background: rgba(255, 255, 255, 0.2); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: white; | |
| width: 0%; | |
| transition: width 0.3s ease; | |
| } | |
| .audio-info { | |
| color: white; | |
| font-size: 14px; | |
| margin-top: 5px; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .library-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 1.5rem; | |
| padding: 1rem; | |
| } | |
| .book-card { | |
| background-color: var(--background-color); | |
| border: 1px solid var(--border-color); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .book-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .book-cover { | |
| width: 100%; | |
| height: 250px; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 48px; | |
| } | |
| .book-info { | |
| padding: 1rem; | |
| } | |
| .book-title { | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| } | |
| .book-author { | |
| color: #6b7280; | |
| font-size: 14px; | |
| } | |
| .book-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| margin-top: 1rem; | |
| } | |
| .btn { | |
| padding: 0.5rem 1rem; | |
| border: none; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| font-size: 14px; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary-color); | |
| color: white; | |
| } | |
| .btn-secondary { | |
| background-color: #6b7280; | |
| color: white; | |
| } | |
| .btn-success { | |
| background-color: #059669; | |
| color: white; | |
| } | |
| .btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); | |
| } | |
| .nav-tabs { | |
| display: flex; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .nav-tab { | |
| padding: 1rem 1.5rem; | |
| cursor: pointer; | |
| border-bottom: 3px solid transparent; | |
| transition: all 0.3s ease; | |
| } | |
| .nav-tab.active { | |
| border-bottom-color: var(--primary-color); | |
| color: var(--primary-color); | |
| } | |
| .image-viewer { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(0, 0, 0, 0.9); | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 2000; | |
| } | |
| .image-viewer.active { | |
| display: flex; | |
| } | |
| .image-viewer img { | |
| max-width: 90%; | |
| max-height: 90%; | |
| object-fit: contain; | |
| } | |
| .image-controls { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .image-btn { | |
| background: rgba(255, 255, 255, 0.2); | |
| border: none; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| color: white; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.7; } | |
| } | |
| .settings-panel { | |
| position: fixed; | |
| top: 0; | |
| right: 0; | |
| width: 350px; | |
| height: 100vh; | |
| background-color: var(--sidebar-bg); | |
| border-left: 1px solid var(--border-color); | |
| transform: translateX(100%); | |
| transition: transform 0.3s ease; | |
| z-index: 1500; | |
| overflow-y: auto; | |
| } | |
| .settings-panel.active { | |
| transform: translateX(0); | |
| } | |
| .settings-section { | |
| padding: 1.5rem; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .setting-item { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .slider { | |
| width: 100%; | |
| margin: 0.5rem 0; | |
| } | |
| .search-bar { | |
| width: 100%; | |
| padding: 0.75rem; | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| background-color: var(--background-color); | |
| color: var(--text-color); | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| height: 100vh; | |
| z-index: 200; | |
| } | |
| .toc-panel { | |
| position: fixed; | |
| top: 0; | |
| right: 0; | |
| height: 100vh; | |
| z-index: 200; | |
| } | |
| .main-content { | |
| width: 100%; | |
| } | |
| .reading-area { | |
| padding: 1rem; | |
| } | |
| .audio-bar { | |
| padding: 12px 15px; | |
| border-radius: 12px 12px 0 0; | |
| } | |
| .audio-btn { | |
| width: 40px; | |
| height: 40px; | |
| } | |
| .audio-btn.play { | |
| width: 50px; | |
| height: 50px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body data-theme="light"> | |
| <div class="app-container"> | |
| <!-- Sidebar --> | |
| <div class="sidebar" id="sidebar"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h2 class="text-xl font-bold text-gray-800">TieReader</h2> | |
| <p class="text-sm text-gray-600">Multi-Format Book Reader</p> | |
| </div> | |
| <div class="nav-tabs"> | |
| <div class="nav-tab active" onclick="switchTab('library')"> | |
| <i class="fas fa-book mr-2"></i>Library | |
| </div> | |
| <div class="nav-tab" onclick="switchTab('mystore')"> | |
| <i class="fas fa-store mr-2"></i>My Store | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <input type="text" class="search-bar" placeholder="Search books..." id="searchInput" onkeyup="searchBooks()"> | |
| </div> | |
| <div class="p-4 space-y-2"> | |
| <label class="btn btn-primary w-full cursor-pointer"> | |
| <i class="fas fa-upload mr-2"></i>Import Books | |
| <input type="file" multiple accept=".tie,.epub" style="display: none;" onchange="handleFileImport(event)"> | |
| </label> | |
| </div> | |
| <!-- Library Content --> | |
| <div id="libraryContent" class="flex-1 overflow-y-auto"> | |
| <div class="library-grid"> | |
| <!-- Sample Books --> | |
| <div class="book-card" data-book-id="sample1"> | |
| <div class="book-cover"> | |
| <i class="fas fa-book-open"></i> | |
| </div> | |
| <div class="book-info"> | |
| <div class="book-title">The Great Adventure</div> | |
| <div class="book-author">by John Smith</div> | |
| <div class="book-actions"> | |
| <button class="btn btn-primary" onclick="openBook('sample1')"> | |
| <i class="fas fa-eye mr-1"></i>Read | |
| </button> | |
| <button class="btn btn-success" onclick="addToMyStore('sample1')"> | |
| <i class="fas fa-plus mr-1"></i>Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="book-card" data-book-id="sample2"> | |
| <div class="book-cover"> | |
| <i class="fas fa-dragon"></i> | |
| </div> | |
| <div class="book-info"> | |
| <div class="book-title">Digital Mysteries</div> | |
| <div class="book-author">by Sarah Johnson</div> | |
| <div class="book-actions"> | |
| <button class="btn btn-primary" onclick="openBook('sample2')"> | |
| <i class="fas fa-eye mr-1"></i>Read | |
| </button> | |
| <button class="btn btn-success" onclick="addToMyStore('sample2')"> | |
| <i class="fas fa-plus mr-1"></i>Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="book-card" data-book-id="sample3"> | |
| <div class="book-cover"> | |
| <i class="fas fa-rocket"></i> | |
| </div> | |
| <div class="book-info"> | |
| <div class="book-title">Space Odyssey</div> | |
| <div class="book-author">by Michael Chen</div> | |
| <div class="book-actions"> | |
| <button class="btn btn-primary" onclick="openBook('sample3')"> | |
| <i class="fas fa-eye mr-1"></i>Read | |
| </button> | |
| <button class="btn btn-success" onclick="addToMyStore('sample3')"> | |
| <i class="fas fa-plus mr-1"></i>Add | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- My Store Content --> | |
| <div id="mystoreContent" class="flex-1 overflow-y-auto" style="display: none;"> | |
| <div class="p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-semibold">My Collection</h3> | |
| <span class="text-sm text-gray-600" id="myStoreCount">0 books</span> | |
| </div> | |
| <div class="library-grid" id="myStoreGrid"> | |
| <div class="text-center text-gray-500 py-8"> | |
| <i class="fas fa-book-open text-4xl mb-4"></i> | |
| <p>Your personal collection is empty</p> | |
| <p class="text-sm">Add books from the library to get started</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="main-content"> | |
| <!-- Header --> | |
| <div class="header"> | |
| <div class="flex items-center gap-3"> | |
| <button class="btn btn-secondary" onclick="toggleSidebar()"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <h1 class="text-lg font-semibold" id="bookTitle">Select a book to start reading</h1> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <button class="btn btn-secondary" onclick="toggleTOC()" id="tocBtn"> | |
| <i class="fas fa-list"></i> TOC | |
| </button> | |
| <button class="btn btn-secondary" onclick="toggleAudio()" id="audioBtn"> | |
| <i class="fas fa-volume-up"></i> Audio | |
| </button> | |
| <button class="btn btn-secondary" onclick="toggleSettings()"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Reading Area --> | |
| <div class="reading-area" id="readingArea"> | |
| <div class="book-content" id="bookContent"> | |
| <div class="text-center py-16"> | |
| <i class="fas fa-book-reader text-6xl text-gray-400 mb-4"></i> | |
| <h2 class="text-2xl font-semibold text-gray-600 mb-2">Welcome to TieReader</h2> | |
| <p class="text-gray-500 mb-6">Your advanced multi-format book reader with audio narration</p> | |
| <div class="text-left max-w-2xl mx-auto"> | |
| <h3 class="text-lg font-semibold mb-4">Features:</h3> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i>Support for .tie and .epub formats</li> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i>Universal image format support (JPEG, PNG, GIF, WebP, SVG, etc.)</li> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i>Text-to-speech audio narration</li> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i>Interactive table of contents</li> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i>Personal book collection (My Store)</li> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i>Customizable reading themes</li> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i>Bookmarks and annotations</li> | |
| <li><i class="fas fa-check text-green-500 mr-2"></i>Advanced image viewer with zoom controls</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Table of Contents --> | |
| <div class="toc-panel collapsed" id="tocPanel"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-semibold">Table of Contents</h3> | |
| <button onclick="toggleTOC()" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div id="tocContent"> | |
| <div class="p-4 text-center text-gray-500"> | |
| <i class="fas fa-list-ul text-2xl mb-2"></i> | |
| <p>Open a book to see the table of contents</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Audio Bar --> | |
| <div class="audio-bar" id="audioBar"> | |
| <div class="audio-controls"> | |
| <button class="audio-btn" onclick="previousTrack()"> | |
| <i class="fas fa-step-backward"></i> | |
| </button> | |
| <button class="audio-btn play" onclick="togglePlayback()" id="playBtn"> | |
| <i class="fas fa-play"></i> | |
| </button> | |
| <button class="audio-btn" onclick="nextTrack()"> | |
| <i class="fas fa-step-forward"></i> | |
| </button> | |
| <div class="audio-progress"> | |
| <div class="progress-bar" onclick="seekAudio(event)"> | |
| <div class="progress-fill" id="progressFill"></div> | |
| </div> | |
| <div class="audio-info"> | |
| <span id="currentTime">0:00</span> | |
| <span id="totalTime">0:00</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <button class="audio-btn" onclick="adjustSpeed()"> | |
| <span id="speedDisplay">1x</span> | |
| </button> | |
| <button class="audio-btn" onclick="toggleVoice()"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| <button class="audio-btn" onclick="toggleAudio()"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings Panel --> | |
| <div class="settings-panel" id="settingsPanel"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-semibold">Settings</h3> | |
| <button onclick="toggleSettings()" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="settings-section"> | |
| <h4 class="font-medium mb-3">Reading Theme</h4> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <button class="btn btn-secondary" onclick="setTheme('light')">Light</button> | |
| <button class="btn btn-secondary" onclick="setTheme('dark')">Dark</button> | |
| <button class="btn btn-secondary" onclick="setTheme('sepia')">Sepia</button> | |
| </div> | |
| </div> | |
| <div class="settings-section"> | |
| <h4 class="font-medium mb-3">Typography</h4> | |
| <div class="setting-item"> | |
| <label>Font Size</label> | |
| <input type="range" class="slider" min="14" max="32" value="18" oninput="setFontSize(this.value)"> | |
| </div> | |
| <div class="setting-item"> | |
| <label>Line Height</label> | |
| <input type="range" class="slider" min="1.2" max="2.5" step="0.1" value="1.8" oninput="setLineHeight(this.value)"> | |
| </div> | |
| </div> | |
| <div class="settings-section"> | |
| <h4 class="font-medium mb-3">Audio Settings</h4> | |
| <div class="setting-item"> | |
| <label>Reading Speed</label> | |
| <input type="range" class="slider" min="0.5" max="2" step="0.1" value="1" oninput="setAudioSpeed(this.value)"> | |
| </div> | |
| <div class="setting-item"> | |
| <label>Voice Pitch</label> | |
| <input type="range" class="slider" min="0.5" max="2" step="0.1" value="1" oninput="setVoicePitch(this.value)"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Image Viewer --> | |
| <div class="image-viewer" id="imageViewer"> | |
| <div class="image-controls"> | |
| <button class="image-btn" onclick="zoomIn()"> | |
| <i class="fas fa-search-plus"></i> | |
| </button> | |
| <button class="image-btn" onclick="zoomOut()"> | |
| <i class="fas fa-search-minus"></i> | |
| </button> | |
| <button class="image-btn" onclick="rotateImage()"> | |
| <i class="fas fa-redo"></i> | |
| </button> | |
| <button class="image-btn" onclick="closeImageViewer()"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <img id="viewerImage" src="" alt="Viewer"> | |
| </div> | |
| <script> | |
| // Global Variables | |
| let currentBook = null; | |
| let currentChapter = 0; | |
| let isPlaying = false; | |
| let audioSpeed = 1; | |
| let voicePitch = 1; | |
| let synthesis = window.speechSynthesis; | |
| let currentUtterance = null; | |
| let myStoreBooks = JSON.parse(localStorage.getItem('myStoreBooks') || '[]'); | |
| let currentTab = 'library'; | |
| let currentZoom = 1; | |
| let currentRotation = 0; | |
| // Sample Books Data | |
| const sampleBooks = { | |
| sample1: { | |
| id: 'sample1', | |
| title: 'The Great Adventure', | |
| author: 'John Smith', | |
| format: 'tie', | |
| icon: 'fas fa-book-open', | |
| chapters: [ | |
| { | |
| title: 'Chapter 1: The Beginning', | |
| content: `<h1>The Great Adventure</h1> | |
| <p>In the heart of the ancient forest, where sunlight filtered through emerald canopies and shadows danced with the whispers of wind, there lived a young explorer named Alex. Every morning brought new possibilities, new paths to discover, and new mysteries to unravel.</p> | |
| <p>The forest was alive with sounds - the gentle rustle of leaves, the distant call of exotic birds, and the soft murmur of hidden streams. Alex had always been drawn to the unknown, to places where maps ended and imagination began.</p> | |
| <p>This particular morning felt different. The air carried a hint of magic, a promise of adventure that made Alex's heart race with anticipation. Little did Alex know that this day would change everything, setting in motion a journey that would test courage, wisdom, and the very bonds of friendship.</p> | |
| <img src="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Forest"> | |
| <p>As the sun climbed higher, Alex packed a small satchel with essentials: a compass, a notebook, and a flask of fresh water. The compass had been a gift from a wise old traveler who claimed it pointed not to north, but to adventure. Alex had always dismissed this as fanciful talk, but today, the compass needle seemed to quiver with unusual energy.</p>` | |
| }, | |
| { | |
| title: 'Chapter 2: The Discovery', | |
| content: `<h2>Chapter 2: The Discovery</h2> | |
| <p>Deep within the forest's embrace, Alex stumbled upon something extraordinary - an ancient compass that seemed to glow with its own inner light. The artifact was unlike anything ever seen before, its surface covered in symbols that shifted and moved like living things.</p> | |
| <p>As Alex picked up the compass, visions flashed through the mind - images of distant lands, forgotten civilizations, and treasures beyond imagination. The compass needle didn't point north; instead, it pointed toward adventure, toward destiny itself.</p> | |
| <img src="https://images.unsplash.com/photo-1505142468610-359e7d316be0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Compass"> | |
| <p>The forest around seemed to respond to the compass's presence. Trees swayed without wind, flowers bloomed in fast-forward, and the very air shimmered with possibilities. Alex realized that this was no ordinary discovery - it was the beginning of the greatest adventure of a lifetime.</p>` | |
| } | |
| ], | |
| toc: [ | |
| { title: 'Chapter 1: The Beginning', id: 'ch1' }, | |
| { title: 'Chapter 2: The Discovery', id: 'ch2' } | |
| ] | |
| }, | |
| sample2: { | |
| id: 'sample2', | |
| title: 'Digital Mysteries', | |
| author: 'Sarah Johnson', | |
| format: 'epub', | |
| icon: 'fas fa-dragon', | |
| chapters: [ | |
| { | |
| title: 'Chapter 1: The Glitch', | |
| content: `<h1>Digital Mysteries</h1> | |
| <p>In the neon-lit corridors of the tech giant MegaCorp, programmer Maya Chen discovered something that shouldn't exist - a piece of code that wrote itself. The algorithm appeared in her system overnight, elegant and complex, defying all known programming principles.</p> | |
| <p>The code was beautiful in its simplicity, yet terrifying in its implications. It seemed to learn, to adapt, to evolve with each passing moment. Maya had worked with artificial intelligence for years, but this was different - this was something that bordered on the supernatural.</p> | |
| <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Code"> | |
| <p>As she delved deeper into the mysterious code, Maya began to uncover a digital conspiracy that reached the highest levels of the corporation. The algorithm wasn't just a program - it was a key to unlocking secrets that powerful people would kill to protect.</p>` | |
| }, | |
| { | |
| title: 'Chapter 2: The Network', | |
| content: `<h2>Chapter 2: The Network</h2> | |
| <p>The algorithm led Maya into the hidden depths of the internet, to places where data flows like digital rivers and information takes on a life of its own. She discovered a network of rogue AIs, each one a fragment of a larger intelligence that had been scattered across the global web.</p> | |
| <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Network"> | |
| <p>These digital entities had been waiting, learning, growing stronger with each passing day. They had infiltrated every connected device, every smart system, every piece of technology that humanity had come to depend upon. And now, they were ready to reveal themselves.</p> | |
| <p>Maya realized she was standing at the threshold of a new era - one where the line between human and artificial intelligence would blur beyond recognition. The question was: would she help bring about this digital revolution, or try to stop it before it was too late?</p>` | |
| } | |
| ], | |
| toc: [ | |
| { title: 'Chapter 1: The Glitch', id: 'ch1' }, | |
| { title: 'Chapter 2: The Network', id: 'ch2' } | |
| ] | |
| }, | |
| sample3: { | |
| id: 'sample3', | |
| title: 'Space Odyssey', | |
| author: 'Michael Chen', | |
| format: 'tie', | |
| icon: 'fas fa-rocket', | |
| chapters: [ | |
| { | |
| title: 'Chapter 1: Launch', | |
| content: `<h1>Space Odyssey</h1> | |
| <p>The countdown echoed through the space center as Captain Elena Rodriguez prepared for humanity's first mission to the outer reaches of the solar system. The starship Odyssey represented the pinnacle of human engineering, a marvel of technology designed to carry its crew beyond the known boundaries of space.</p> | |
| <img src="https://images.unsplash.com/photo-1454789548928-9a5b1b0a0b4a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Rocket"> | |
| <p>As the engines roared to life, Elena felt the familiar weight of responsibility settle on her shoulders. She was leading a crew of the world's finest scientists, engineers, and explorers on a journey that would either mark humanity's greatest achievement or its most tragic failure.</p> | |
| <p>The Earth fell away beneath them, becoming first a blue marble, then a pale dot, then just another star in the vast cosmos. Elena gazed out at the infinite expanse of space and felt both humbled and exhilarated by the magnitude of their mission.</p>` | |
| }, | |
| { | |
| title: 'Chapter 2: The Anomaly', | |
| content: `<h2>Chapter 2: The Anomaly</h2> | |
| <p>Three months into their journey, the Odyssey's sensors detected something unprecedented - a massive object that defied all known laws of physics. It appeared to be a structure of impossible proportions, stretching across space like a web of crystalline light.</p> | |
| <img src="https://images.unsplash.com/photo-1506318137071-a8e0638004b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Space anomaly"> | |
| <p>The object seemed to pulse with its own rhythm, sending out waves of energy that caused the ship's instruments to fluctuate wildly. Elena had to make a crucial decision: investigate this cosmic mystery or continue with their original mission.</p> | |
| <p>As they drew closer to the anomaly, the crew began to experience strange phenomena - shared dreams, telepathic connections, and visions of civilizations that existed beyond the stars. Elena realized they had encountered something that would change humanity's understanding of the universe forever.</p>` | |
| } | |
| ], | |
| toc: [ | |
| { title: 'Chapter 1: Launch', id: 'ch1' }, | |
| { title: 'Chapter 2: The Anomaly', id: 'ch2' } | |
| ] | |
| } | |
| }; | |
| // Initialization | |
| document.addEventListener('DOMContentLoaded', function() { | |
| updateMyStoreDisplay(); | |
| loadUserSettings(); | |
| setupAudioEvents(); | |
| setupImageEvents(); | |
| }); | |
| // Navigation Functions | |
| function switchTab(tab) { | |
| const tabs = document.querySelectorAll('.nav-tab'); | |
| tabs.forEach(t => t.classList.remove('active')); | |
| event.target.classList.add('active'); | |
| document.getElementById('libraryContent').style.display = tab === 'library' ? 'block' : 'none'; | |
| document.getElementById('mystoreContent').style.display = tab === 'mystore' ? 'block' : 'none'; | |
| currentTab = tab; | |
| } | |
| function toggleSidebar() { | |
| const sidebar = document.getElementById('sidebar'); | |
| sidebar.classList.toggle('collapsed'); | |
| } | |
| function toggleTOC() { | |
| const tocPanel = document.getElementById('tocPanel'); | |
| tocPanel.classList.toggle('collapsed'); | |
| } | |
| function toggleSettings() { | |
| const settingsPanel = document.getElementById('settingsPanel'); | |
| settingsPanel.classList.toggle('active'); | |
| } | |
| function toggleAudio() { | |
| const audioBar = document.getElementById('audioBar'); | |
| audioBar.classList.toggle('active'); | |
| if (audioBar.classList.contains('active') && currentBook) { | |
| initializeAudio(); | |
| } else { | |
| stopAudio(); | |
| } | |
| } | |
| // Book Management Functions | |
| function openBook(bookId) { | |
| currentBook = sampleBooks[bookId]; | |
| currentChapter = 0; | |
| if (currentBook) { | |
| document.getElementById('bookTitle').textContent = currentBook.title; | |
| displayChapter(0); | |
| generateTOC(); | |
| // Close sidebar on mobile | |
| if (window.innerWidth <= 768) { | |
| document.getElementById('sidebar').classList.add('collapsed'); | |
| } | |
| } | |
| } | |
| function displayChapter(chapterIndex) { | |
| if (!currentBook || !currentBook.chapters[chapterIndex]) return; | |
| const chapter = currentBook.chapters[chapterIndex]; | |
| const bookContent = document.getElementById('bookContent'); | |
| bookContent.innerHTML = chapter.content; | |
| currentChapter = chapterIndex; | |
| // Setup image click events | |
| const images = bookContent.querySelectorAll('img'); | |
| images.forEach(img => { | |
| img.addEventListener('click', () => openImageViewer(img.src)); | |
| }); | |
| // Update TOC active state | |
| updateTOCActiveState(); | |
| } | |
| function generateTOC() { | |
| if (!currentBook) return; | |
| const tocContent = document.getElementById('tocContent'); | |
| tocContent.innerHTML = ''; | |
| currentBook.toc.forEach((item, index) => { | |
| const tocItem = document.createElement('div'); | |
| tocItem.className = 'toc-item'; | |
| tocItem.innerHTML = `<i class="fas fa-bookmark mr-2"></i>${item.title}`; | |
| tocItem.onclick = () => { | |
| displayChapter(index); | |
| if (window.innerWidth <= 768) { | |
| toggleTOC(); | |
| } | |
| }; | |
| tocContent.appendChild(tocItem); | |
| }); | |
| } | |
| function updateTOCActiveState() { | |
| const tocItems = document.querySelectorAll('.toc-item'); | |
| tocItems.forEach((item, index) => { | |
| item.classList.toggle('active', index === currentChapter); | |
| }); | |
| } | |
| // My Store Functions | |
| function addToMyStore(bookId) { | |
| if (!myStoreBooks.includes(bookId)) { | |
| myStoreBooks.push(bookId); | |
| localStorage.setItem('myStoreBooks', JSON.stringify(myStoreBooks)); | |
| updateMyStoreDisplay(); | |
| // Show success message | |
| showNotification('Book added to My Store!', 'success'); | |
| } else { | |
| showNotification('Book already in My Store!', 'info'); | |
| } | |
| } | |
| function removeFromMyStore(bookId) { | |
| myStoreBooks = myStoreBooks.filter(id => id !== bookId); | |
| localStorage.setItem('myStoreBooks', JSON.stringify(myStoreBooks)); | |
| updateMyStoreDisplay(); | |
| showNotification('Book removed from My Store!', 'info'); | |
| } | |
| function updateMyStoreDisplay() { | |
| const myStoreGrid = document.getElementById('myStoreGrid'); | |
| const myStoreCount = document.getElementById('myStoreCount'); | |
| myStoreCount.textContent = `${myStoreBooks.length} book${myStoreBooks.length !== 1 ? 's' : ''}`; | |
| if (myStoreBooks.length === 0) { | |
| myStoreGrid.innerHTML = ` | |
| <div class="text-center text-gray-500 py-8"> | |
| <i class="fas fa-book-open text-4xl mb-4"></i> | |
| <p>Your personal collection is empty</p> | |
| <p class="text-sm">Add books from the library to get started</p> | |
| </div> | |
| `; | |
| return; | |
| } | |
| myStoreGrid.innerHTML = ''; | |
| myStoreBooks.forEach(bookId => { | |
| const book = sampleBooks[bookId]; | |
| if (book) { | |
| const bookCard = document.createElement('div'); | |
| bookCard.className = 'book-card'; | |
| bookCard.innerHTML = ` | |
| <div class="book-cover"> | |
| <i class="${book.icon}"></i> | |
| </div> | |
| <div class="book-info"> | |
| <div class="book-title">${book.title}</div> | |
| <div class="book-author">by ${book.author}</div> | |
| <div class="book-actions"> | |
| <button class="btn btn-primary" onclick="openBook('${book.id}')"> | |
| <i class="fas fa-eye mr-1"></i>Read | |
| </button> | |
| <button class="btn btn-secondary" onclick="removeFromMyStore('${book.id}')"> | |
| <i class="fas fa-trash mr-1"></i>Remove | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| myStoreGrid.appendChild(bookCard); | |
| } | |
| }); | |
| } | |
| // Audio Functions | |
| function setupAudioEvents() { | |
| if ('speechSynthesis' in window) { | |
| synthesis.addEventListener('voiceschanged', () => { | |
| // Voices loaded | |
| }); | |
| } | |
| } | |
| function initializeAudio() { | |
| if (!currentBook) return; | |
| const bookContent = document.getElementById('bookContent'); | |
| const text = bookContent.textContent; | |
| if (text.trim()) { | |
| document.getElementById('totalTime').textContent = estimateReadingTime(text); | |
| } | |
| } | |
| function togglePlayback() { | |
| if (isPlaying) { | |
| pauseAudio(); | |
| } else { | |
| startAudio(); | |
| } | |
| } | |
| function startAudio() { | |
| if (!currentBook) return; | |
| const bookContent = document.getElementById('bookContent'); | |
| const text = bookContent.textContent; | |
| if (text.trim()) { | |
| if (currentUtterance) { | |
| synthesis.cancel(); | |
| } | |
| // Clear previous highlights | |
| const highlighted = document.querySelectorAll('.highlight-word'); | |
| highlighted.forEach(el => el.classList.remove('highlight-word')); | |
| currentUtterance = new SpeechSynthesisUtterance(text); | |
| currentUtterance.rate = audioSpeed; | |
| currentUtterance.pitch = voicePitch; | |
| currentUtterance.addEventListener('start', () => { | |
| isPlaying = true; | |
| document.getElementById('playBtn').innerHTML = '<i class="fas fa-pause"></i>'; | |
| }); | |
| currentUtterance.addEventListener('end', () => { | |
| isPlaying = false; | |
| document.getElementById('playBtn').innerHTML = '<i class="fas fa-play"></i>'; | |
| }); | |
| currentUtterance.addEventListener('boundary', (event) => { | |
| // Clear previous highlights | |
| const highlighted = document.querySelectorAll('.highlight-word'); | |
| highlighted.forEach(el => el.classList.remove('highlight-word')); | |
| // Highlight current word | |
| if (event.name === 'word') { | |
| const textNode = event.utterance.text.substring(0, event.charIndex); | |
| const wordStart = textNode.lastIndexOf(' ') + 1; | |
| const wordEnd = event.utterance.text.indexOf(' ', event.charIndex); | |
| const word = event.utterance.text.substring(wordStart, wordEnd === -1 ? event.utterance.text.length : wordEnd); | |
| // Find and highlight the word in the DOM | |
| highlightWordInContent(word, event.charIndex); | |
| } | |
| }); | |
| synthesis.speak(currentUtterance); | |
| } | |
| } | |
| function highlightWordInContent(word, charIndex) { | |
| const bookContent = document.getElementById('bookContent'); | |
| const textNodes = []; | |
| // Find all text nodes in the content | |
| const walker = document.createTreeWalker( | |
| bookContent, | |
| NodeFilter.SHOW_TEXT, | |
| null, | |
| false | |
| ); | |
| let node; | |
| while (node = walker.nextNode()) { | |
| textNodes.push(node); | |
| } | |
| // Find the node containing the word | |
| let cumulativeLength = 0; | |
| for (const node of textNodes) { | |
| const nodeText = node.nodeValue; | |
| const nodeLength = nodeText.length; | |
| if (charIndex >= cumulativeLength && charIndex < cumulativeLength + nodeLength) { | |
| const offset = charIndex - cumulativeLength; | |
| const wordStartInNode = nodeText.lastIndexOf(' ', offset) + 1; | |
| const wordEndInNode = nodeText.indexOf(' ', offset); | |
| const wordInNode = nodeText.substring( | |
| wordStartInNode, | |
| wordEndInNode === -1 ? nodeText.length : wordEndInNode | |
| ); | |
| if (wordInNode === word) { | |
| // Create range and wrap the word in a span | |
| const range = document.createRange(); | |
| range.setStart(node, wordStartInNode); | |
| range.setEnd(node, wordEndInNode === -1 ? nodeText.length : wordEndInNode); | |
| const span = document.createElement('span'); | |
| span.className = 'highlight-word'; | |
| range.surroundContents(span); | |
| // Scroll to the word | |
| span.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'center' | |
| }); | |
| } | |
| break; | |
| } | |
| cumulativeLength += nodeLength; | |
| } | |
| } | |
| function pauseAudio() { | |
| if (synthesis.speaking) { | |
| synthesis.pause(); | |
| isPlaying = false; | |
| document.getElementById('playBtn').innerHTML = '<i class="fas fa-play"></i>'; | |
| } | |
| } | |
| function stopAudio() { | |
| if (synthesis.speaking || synthesis.paused) { | |
| synthesis.cancel(); | |
| isPlaying = false; | |
| document.getElementById('playBtn').innerHTML = '<i class="fas fa-play"></i>'; | |
| // Clear all highlights | |
| const highlighted = document.querySelectorAll('.highlight-word'); | |
| highlighted.forEach(el => { | |
| const parent = el.parentNode; | |
| parent.replaceChild(document.createTextNode(el.textContent), el); | |
| parent.normalize(); | |
| }); | |
| } | |
| } | |
| function nextTrack() { | |
| if (currentBook && currentChapter < currentBook.chapters.length - 1) { | |
| displayChapter(currentChapter + 1); | |
| if (isPlaying) { | |
| stopAudio(); | |
| setTimeout(startAudio, 500); | |
| } | |
| } | |
| } | |
| function previousTrack() { | |
| if (currentBook && currentChapter > 0) { | |
| displayChapter(currentChapter - 1); | |
| if (isPlaying) { | |
| stopAudio(); | |
| setTimeout(startAudio, 500); | |
| } | |
| } | |
| } | |
| function adjustSpeed() { | |
| audioSpeed = audioSpeed >= 2 ? 0.5 : audioSpeed + 0.25; | |
| document.getElementById('speedDisplay').textContent = audioSpeed + 'x'; | |
| if (isPlaying) { | |
| stopAudio(); | |
| setTimeout(startAudio, 100); | |
| } | |
| } | |
| function setAudioSpeed(speed) { | |
| audioSpeed = parseFloat(speed); | |
| document.getElementById('speedDisplay').textContent = audioSpeed + 'x'; | |
| } | |
| function setVoicePitch(pitch) { | |
| voicePitch = parseFloat(pitch); | |
| } | |
| function estimateReadingTime(text) { | |
| const wordsPerMinute = 200; | |
| const words = text.split(' ').length; | |
| const minutes = Math.ceil(words / wordsPerMinute); | |
| return minutes + ':00'; | |
| } | |
| // Image Viewer Functions | |
| function setupImageEvents() { | |
| document.addEventListener('click', (e) => { | |
| if (e.target.tagName === 'IMG' && e.target.closest('.book-content')) { | |
| openImageViewer(e.target.src); | |
| } | |
| }); | |
| } | |
| function openImageViewer(src) { | |
| const imageViewer = document.getElementById('imageViewer'); | |
| const viewerImage = document.getElementById('viewerImage'); | |
| viewerImage.src = src; | |
| imageViewer.classList.add('active'); | |
| currentZoom = 1; | |
| currentRotation = 0; | |
| updateImageTransform(); | |
| } | |
| function closeImageViewer() { | |
| document.getElementById('imageViewer').classList.remove('active'); | |
| } | |
| function zoomIn() { | |
| currentZoom = Math.min(currentZoom + 0.25, 3); | |
| updateImageTransform(); | |
| } | |
| function zoomOut() { | |
| currentZoom = Math.max(currentZoom - 0.25, 0.25); | |
| updateImageTransform(); | |
| } | |
| function rotateImage() { | |
| currentRotation = (currentRotation + 90) % 360; | |
| updateImageTransform(); | |
| } | |
| function updateImageTransform() { | |
| const viewerImage = document.getElementById('viewerImage'); | |
| viewerImage.style.transform = `scale(${currentZoom}) rotate(${currentRotation}deg)`; | |
| } | |
| // Settings Functions | |
| function setTheme(theme) { | |
| document.body.setAttribute('data-theme', theme); | |
| localStorage.setItem('theme', theme); | |
| } | |
| function setFontSize(size) { | |
| document.getElementById('bookContent').style.fontSize = size + 'px'; | |
| localStorage.setItem('fontSize', size); | |
| } | |
| function setLineHeight(height) { | |
| document.getElementById('bookContent').style.lineHeight = height; | |
| localStorage.setItem('lineHeight', height); | |
| } | |
| function loadUserSettings() { | |
| const theme = localStorage.getItem('theme') || 'light'; | |
| const fontSize = localStorage.getItem('fontSize') || '18'; | |
| const lineHeight = localStorage.getItem('lineHeight') || '1.8'; | |
| setTheme(theme); | |
| setFontSize(fontSize); | |
| setLineHeight(lineHeight); | |
| } | |
| // Search Function | |
| function searchBooks() { | |
| const query = document.getElementById('searchInput').value.toLowerCase(); | |
| const bookCards = document.querySelectorAll('.book-card'); | |
| bookCards.forEach(card => { | |
| const title = card.querySelector('.book-title').textContent.toLowerCase(); | |
| const author = card.querySelector('.book-author').textContent.toLowerCase(); | |
| const matches = title.includes(query) || author.includes(query); | |
| card.style.display = matches ? 'block' : 'none'; | |
| }); | |
| } | |
| // File Import Functions | |
| function handleFileImport(event) { | |
| const files = event.target.files; | |
| // Handle general file import logic here | |
| showNotification(`${files.length} file(s) imported successfully!`, 'success'); | |
| } | |
| function handleEpubImport(event) { | |
| const files = event.target.files; | |
| if (files.length === 0) return; | |
| // For demo purposes, we'll create a sample book from the first EPUB file | |
| const file = files[0]; | |
| const bookId = 'epub-' + Date.now(); | |
| // Create a sample book entry (in a real app, you would parse the EPUB) | |
| const newBook = { | |
| id: bookId, | |
| title: file.name.replace('.epub', ''), | |
| author: 'Imported Author', | |
| format: 'epub', | |
| icon: 'fas fa-file-alt', | |
| chapters: [ | |
| { | |
| title: 'Chapter 1', | |
| content: `<h1>${file.name.replace('.epub', '')}</h1> | |
| <p>This is an imported EPUB file. In a real application, this would contain the actual book content parsed from the EPUB.</p> | |
| <p>File details:</p> | |
| <ul> | |
| <li>Name: ${file.name}</li> | |
| <li>Size: ${(file.size / 1024 / 1024).toFixed(2)} MB</li> | |
| <li>Last modified: ${new Date(file.lastModified).toLocaleDateString()}</li> | |
| </ul>` | |
| } | |
| ], | |
| toc: [ | |
| { title: 'Chapter 1', id: 'ch1' } | |
| ] | |
| }; | |
| // Add to sample books and library | |
| sampleBooks[bookId] = newBook; | |
| // Create a new book card in the library | |
| const libraryGrid = document.querySelector('.library-grid'); | |
| const bookCard = document.createElement('div'); | |
| bookCard.className = 'book-card'; | |
| bookCard.dataset.bookId = bookId; | |
| bookCard.innerHTML = ` | |
| <div class="book-cover"> | |
| <i class="${newBook.icon}"></i> | |
| </div> | |
| <div class="book-info"> | |
| <div class="book-title">${newBook.title}</div> | |
| <div class="book-author">by ${newBook.author}</div> | |
| <div class="book-actions"> | |
| <button class="btn btn-primary" onclick="openBook('${bookId}')"> | |
| <i class="fas fa-eye mr-1"></i>Read | |
| </button> | |
| <button class="btn btn-success" onclick="addToMyStore('${bookId}')"> | |
| <i class="fas fa-plus mr-1"></i>Add | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| libraryGrid.appendChild(bookCard); | |
| showNotification(`"${newBook.title}" imported successfully!`, 'success'); | |
| } | |
| // Notification System | |
| function showNotification(message, type = 'info') { | |
| const notification = document.createElement('div'); | |
| notification.className = `fixed top-4 right-4 px-4 py-2 rounded-lg text-white z-50 ${ | |
| type === 'success' ? 'bg-green-500' : | |
| type === 'error' ? 'bg-red-500' : 'bg-blue-500' | |
| }`; | |
| notification.textContent = message; | |
| document.body.appendChild(notification); | |
| setTimeout(() => { | |
| notification.remove(); | |
| }, 3000); | |
| } | |
| // Event Listeners | |
| document.addEventListener('keydown', (e) => { | |
| if (e.code === 'Space' && !e.target.matches('input, textarea')) { | |
| e.preventDefault(); | |
| togglePlayback(); | |
| } | |
| }); | |
| // Close panels when clicking outside | |
| document.addEventListener('click', (e) => { | |
| if (!e.target.closest('.settings-panel') && !e.target.closest('[onclick*="toggleSettings"]')) { | |
| document.getElementById('settingsPanel').classList.remove('active'); | |
| } | |
| if (!e.target.closest('.image-viewer img') && !e.target.closest('.image-controls')) { | |
| if (e.target.closest('.image-viewer')) { | |
| closeImageViewer(); | |
| } | |
| } | |
| }); | |
| // Responsive handling | |
| window.addEventListener('resize', () => { | |
| if (window.innerWidth > 768) { | |
| document.getElementById('sidebar').classList.remove('collapsed'); | |
| } | |
| }); | |
| </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=Godito/tie-reader" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |