HTMLify
Epub_Viewer.html
Views: 16 | Author: deweyduck6116
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 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <meta name="Generator" content="Cocoa HTML Writer"> <meta name="CocoaVersion" content="2685.7"> <style type="text/css"> p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px} </style> </head> <body> <p class="p1"><!DOCTYPE html></p> <p class="p1"><html lang="en"></p> <p class="p1"><head></p> <p class="p1"><span class="Apple-converted-space"> </span><meta charset="UTF-8" /></p> <p class="p1"><span class="Apple-converted-space"> </span><title>EPUB Drag & Drop Viewer</title></p> <p class="p1"><span class="Apple-converted-space"> </span><script src="https://unpkg.com/epubjs/dist/epub.min.js"></script></p> <p class="p1"><span class="Apple-converted-space"> </span><style></p> <p class="p1"><span class="Apple-converted-space"> </span>body {</p> <p class="p1"><span class="Apple-converted-space"> </span>font-family: Arial, sans-serif;</p> <p class="p1"><span class="Apple-converted-space"> </span>margin: 0;</p> <p class="p1"><span class="Apple-converted-space"> </span>padding: 0;</p> <p class="p1"><span class="Apple-converted-space"> </span>}</p> <p class="p1"><span class="Apple-converted-space"> </span>#drop-zone {</p> <p class="p1"><span class="Apple-converted-space"> </span>width: 100%;</p> <p class="p1"><span class="Apple-converted-space"> </span>height: 100vh;</p> <p class="p1"><span class="Apple-converted-space"> </span>display: flex;</p> <p class="p1"><span class="Apple-converted-space"> </span>align-items: center;</p> <p class="p1"><span class="Apple-converted-space"> </span>justify-content: center;</p> <p class="p1"><span class="Apple-converted-space"> </span>border: 3px dashed #ccc;</p> <p class="p1"><span class="Apple-converted-space"> </span>box-sizing: border-box;</p> <p class="p1"><span class="Apple-converted-space"> </span>font-size: 1.5em;</p> <p class="p1"><span class="Apple-converted-space"> </span>text-align: center;</p> <p class="p1"><span class="Apple-converted-space"> </span>color: #999;</p> <p class="p1"><span class="Apple-converted-space"> </span>transition: background-color 0.3s, border-color 0.3s;</p> <p class="p1"><span class="Apple-converted-space"> </span>}</p> <p class="p1"><span class="Apple-converted-space"> </span>#drop-zone.dragover {</p> <p class="p1"><span class="Apple-converted-space"> </span>background-color: #f0f8ff;</p> <p class="p1"><span class="Apple-converted-space"> </span>border-color: #333;</p> <p class="p1"><span class="Apple-converted-space"> </span>color: #333;</p> <p class="p1"><span class="Apple-converted-space"> </span>}</p> <p class="p1"><span class="Apple-converted-space"> </span>#viewer {</p> <p class="p1"><span class="Apple-converted-space"> </span>width: 100%;</p> <p class="p1"><span class="Apple-converted-space"> </span>height: 100vh;</p> <p class="p1"><span class="Apple-converted-space"> </span>display: none; /* Hidden until file is loaded */</p> <p class="p1"><span class="Apple-converted-space"> </span>}</p> <p class="p1"><span class="Apple-converted-space"> </span></style></p> <p class="p1"></head></p> <p class="p1"><body></p> <p class="p1"><span class="Apple-converted-space"> </span><div id="drop-zone">Drag & Drop EPUB File Here</div></p> <p class="p1"><span class="Apple-converted-space"> </span><div id="viewer"></div></p> <p class="p2"><br></p> <p class="p1"><span class="Apple-converted-space"> </span><script></p> <p class="p1"><span class="Apple-converted-space"> </span>const dropZone = document.getElementById('drop-zone');</p> <p class="p1"><span class="Apple-converted-space"> </span>const viewer = document.getElementById('viewer');</p> <p class="p2"><br></p> <p class="p1"><span class="Apple-converted-space"> </span>let rendition;</p> <p class="p1"><span class="Apple-converted-space"> </span>let book;</p> <p class="p2"><br></p> <p class="p1"><span class="Apple-converted-space"> </span>// Handle drag over</p> <p class="p1"><span class="Apple-converted-space"> </span>dropZone.addEventListener('dragover', (e) => {</p> <p class="p1"><span class="Apple-converted-space"> </span>e.preventDefault();</p> <p class="p1"><span class="Apple-converted-space"> </span>dropZone.classList.add('dragover');</p> <p class="p1"><span class="Apple-converted-space"> </span>});</p> <p class="p2"><br></p> <p class="p1"><span class="Apple-converted-space"> </span>// Handle drag leave</p> <p class="p1"><span class="Apple-converted-space"> </span>dropZone.addEventListener('dragleave', () => {</p> <p class="p1"><span class="Apple-converted-space"> </span>dropZone.classList.remove('dragover');</p> <p class="p1"><span class="Apple-converted-space"> </span>});</p> <p class="p2"><br></p> <p class="p1"><span class="Apple-converted-space"> </span>// Handle drop</p> <p class="p1"><span class="Apple-converted-space"> </span>dropZone.addEventListener('drop', (e) => {</p> <p class="p1"><span class="Apple-converted-space"> </span>e.preventDefault();</p> <p class="p1"><span class="Apple-converted-space"> </span>dropZone.classList.remove('dragover');</p> <p class="p2"><br></p> <p class="p1"><span class="Apple-converted-space"> </span>const files = e.dataTransfer.files;</p> <p class="p1"><span class="Apple-converted-space"> </span>if (files.length > 0) {</p> <p class="p1"><span class="Apple-converted-space"> </span>const file = files[0];</p> <p class="p1"><span class="Apple-converted-space"> </span>if (file.name.endsWith('.epub') || file.type === 'application/epub+zip') {</p> <p class="p1"><span class="Apple-converted-space"> </span>loadEPUBFile(file);</p> <p class="p1"><span class="Apple-converted-space"> </span>} else {</p> <p class="p1"><span class="Apple-converted-space"> </span>alert('Please drop a valid EPUB file.');</p> <p class="p1"><span class="Apple-converted-space"> </span>}</p> <p class="p1"><span class="Apple-converted-space"> </span>}</p> <p class="p1"><span class="Apple-converted-space"> </span>});</p> <p class="p2"><br></p> <p class="p1"><span class="Apple-converted-space"> </span>function loadEPUBFile(file) {</p> <p class="p1"><span class="Apple-converted-space"> </span>// Show the viewer and hide the drop zone</p> <p class="p1"><span class="Apple-converted-space"> </span>dropZone.style.display = 'none';</p> <p class="p1"><span class="Apple-converted-space"> </span>viewer.style.display = 'block';</p> <p class="p2"><br></p> <p class="p1"><span class="Apple-converted-space"> </span>// Create a URL for the dropped file</p> <p class="p1"><span class="Apple-converted-space"> </span>const fileURL = URL.createObjectURL(file);</p> <p class="p2"><br></p> <p class="p1"><span class="Apple-converted-space"> </span>// Initialize EPUB.js with the file URL</p> <p class="p1"><span class="Apple-converted-space"> </span>book = ePub(fileURL);</p> <p class="p2"><br></p> <p class="p1"><span class="Apple-converted-space"> </span>// Render the book</p> <p class="p1"><span class="Apple-converted-space"> </span>rendition = book.renderTo("viewer", {</p> <p class="p1"><span class="Apple-converted-space"> </span>width: "100%",</p> <p class="p1"><span class="Apple-converted-space"> </span>height: "100%",</p> <p class="p1"><span class="Apple-converted-space"> </span>});</p> <p class="p2"><br></p> <p class="p1"><span class="Apple-converted-space"> </span>// Display the first chapter</p> <p class="p1"><span class="Apple-converted-space"> </span>rendition.display();</p> <p class="p1"><span class="Apple-converted-space"> </span>}</p> <p class="p1"><span class="Apple-converted-space"> </span></script></p> <p class="p1"></body></p> <p class="p1"></html></p> </body> </html> |