connect with database that store books that imported - Follow Up Deployment

index.html

@@ -501,7 +501,7 @@
                 <input type="text" class="search-bar" placeholder="Search books..." id="searchInput" onkeyup="searchBooks()">
             </div>
 
-            <div class="p-4">
+            <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)">
@@ -1322,13 +1322,76 @@
             });
         }
 
-        // File Import Function
+        // File Import Functions
         function handleFileImport(event) {
             const files = event.target.files;
-            // Handle file import logic here
+            // 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');