Spaces:
Running
Running
| <html lang="th" data-theme="light"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> | |
| <meta name="description" content="ระบบจัดการเอกสาร PDF Professional พร้อมระบบปรับแต่ง Layout"> | |
| <title>PDF Layout Wizard</title> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Libraries --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script> | |
| <script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.4.4/qrcode.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <!-- Custom CSS --> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="bg-slate-900 text-slate-800 font-sans antialiased overflow-hidden transition-colors duration-300"> | |
| <div class="flex flex-col h-screen w-screen"> | |
| <!-- Web Component: Navbar --> | |
| <app-navbar></app-navbar> | |
| <!-- Main Content --> | |
| <div class="flex flex-1 overflow-hidden relative"> | |
| <!-- Web Component: Sidebar --> | |
| <app-sidebar id="sidebar"></app-sidebar> | |
| <!-- Sidebar Overlay for Mobile --> | |
| <div id="sidebar-overlay" class="fixed inset-0 bg-black/50 z-40 hidden transition-opacity lg:hidden"></div> | |
| <!-- Viewer Container --> | |
| <main class="flex-1 flex flex-col overflow-hidden bg-slate-900 relative" id="viewer-container"> | |
| <!-- Tabs --> | |
| <div class="bg-slate-800 border-b border-slate-700 px-4 pt-2 flex gap-4"> | |
| <button class="tab-btn active px-4 py-2 rounded-t-lg text-sm font-medium text-slate-400 hover:text-white transition-colors flex items-center gap-2" data-tab="template"> | |
| <i data-feather="file-text" class="w-4 h-4"></i> Template | |
| </button> | |
| <button class="tab-btn px-4 py-2 rounded-t-lg text-sm font-medium text-slate-400 hover:text-white transition-colors flex items-center gap-2" data-tab="pdf"> | |
| <i data-feather="book-open" class="w-4 h-4"></i> PDF Viewer | |
| </button> | |
| </div> | |
| <!-- Viewer Content --> | |
| <div class="flex-1 overflow-auto relative bg-slate-900/50 p-4" id="viewer-content"> | |
| <!-- Template View --> | |
| <div class="template-viewer flex flex-col items-center gap-8 pb-20" id="template-view"> | |
| <!-- Page 1 --> | |
| <div id="page1" class="page bg-white shadow-2xl relative overflow-hidden origin-top transition-transform duration-200" data-page="1"> | |
| <img id="bg1" loading="lazy" class="absolute inset-0 w-full h-full object-cover pointer-events-none z-0" src="" alt="BG 1"> | |
| <img id="photo" loading="lazy" class="field absolute border border-slate-200 z-10 rounded object-cover bg-slate-100" style="top:46px;left:725px;width:110px;height:138px;" src="https://via.placeholder.com/110x138?text=Photo" draggable="true" data-field-type="image" alt="Photo"> | |
| <img id="qr1" loading="lazy" class="field absolute z-10 bg-white" style="top:977px;left:762.5px;width:69px;height:69px;" src="" draggable="true" data-field-type="image" alt="QR 1"> | |
| <!-- Dynamic Text Fields --> | |
| <div id="f1" class="field absolute whitespace-nowrap z-20 font-sans font-bold cursor-default select-none border border-transparent" style="top:80px;left:230px;font-size:16px;" draggable="true" data-field-type="text">f1</div> | |
| <div id="f2" class="field absolute whitespace-nowrap z-20 font-sans font-bold cursor-default select-none border border-transparent" style="top:110px;left:230px;font-size:16px;" draggable="true" data-field-type="text">f2</div> | |
| <div id="f3" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:150px;left:230px;font-size:14px;" draggable="true" data-field-type="text">f3</div> | |
| <div id="f4" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:180px;left:230px;font-size:14px;" draggable="true" data-field-type="text">f4</div> | |
| <div id="f5" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:180px;left:580px;font-size:14px;" draggable="true" data-field-type="text">f5</div> | |
| <div id="f6" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:210px;left:580px;font-size:14px;" draggable="true" data-field-type="text">f6</div> | |
| <div id="f7" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:240px;left:230px;font-size:14px;" draggable="true" data-field-type="text">f7</div> | |
| <div id="f8" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:240px;left:580px;font-size:14px;" draggable="true" data-field-type="text">f8</div> | |
| <div id="f9" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:270px;left:230px;font-size:14px;" draggable="true" data-field-type="text">f9</div> | |
| <div id="f10" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:300px;left:230px;font-size:14px;" draggable="true" data-field-type="text">f10</div> | |
| </div> | |
| <!-- Page 2 --> | |
| <div id="page2" class="page bg-white shadow-2xl relative overflow-hidden origin-top transition-transform duration-200" data-page="2"> | |
| <img id="bg2" loading="lazy" class="absolute inset-0 w-full h-full object-cover pointer-events-none z-0" src="" alt="BG 2"> | |
| <img id="qr2" loading="lazy" class="field absolute z-10 bg-white" style="top:925px;left:120px;width:90px;height:90px;" src="" draggable="true" data-field-type="image" alt="QR 2"> | |
| <div id="f12" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:60px;left:200px;font-size:19px;" draggable="true" data-field-type="text">f12</div> | |
| <div id="f13" class="field absolute whitespace-nowrap z-20 font-sans font-normal cursor-default select-none border border-transparent" style="top:100px;left:200px;font-size:19px;" draggable="true" data-field-type="text">f13</div> | |
| <div id="f14" class="field absolute whitespace-nowrap z-20 font-sans font-light cursor-default select-none border border-transparent" style="top:140px;left:200px;font-size:19px;" draggable="true" data-field-type="text">f14</div> | |
| <div id="f15" class="field absolute whitespace-nowrap z-20 font-sans font-light cursor-default select-none border border-transparent" style="top:180px;left:200px;font-size:19px;" draggable="true" data-field-type="text">f15</div> | |
| <div id="f16" class="field absolute whitespace-nowrap z-20 font-sans font-light cursor-default select-none border border-transparent" style="top:180px;left:550px;font-size:19px;" draggable="true" data-field-type="text">f16</div> | |
| <div id="f17" class="field absolute whitespace-nowrap z-20 font-sans font-light cursor-default select-none border border-transparent" style="top:220px;left:200px;font-size:19px;" draggable="true" data-field-type="text">f17</div> | |
| <div id="f18" class="field absolute whitespace-nowrap z-20 font-sans font-light cursor-default select-none border border-transparent" style="top:220px;left:550px;font-size:19px;" draggable="true" data-field-type="text">f18</div> | |
| </div> | |
| </div> | |
| <!-- PDF View --> | |
| <div class="pdf-viewer hidden flex-col items-center gap-6 pb-20" id="pdf-view"> | |
| <div id="pdf-content" class="flex flex-col items-center"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- HUD Controls --> | |
| <div class="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-slate-800/90 backdrop-blur-md px-6 py-3 rounded-full flex items-center gap-4 text-white shadow-lg z-50 border border-slate-700"> | |
| <span class="text-sm flex items-center gap-2"> | |
| Page <input type="number" id="current-pg" value="1" min="1" class="w-12 bg-slate-700 border-none rounded text-center text-sm focus:ring-2 focus:ring-blue-500"> / <span id="total-pg">2</span> | |
| </span> | |
| <div class="h-4 w-px bg-slate-600"></div> | |
| <button id="zoom-out" class="hover:text-blue-400 transition-colors"><i data-feather="minus"></i></button> | |
| <span id="zoom-text" class="text-sm font-mono w-12 text-center">100%</span> | |
| <button id="zoom-in" class="hover:text-blue-400 transition-colors"><i data-feather="plus"></i></button> | |
| </div> | |
| <!-- Web Component: Footer --> | |
| <app-footer></app-footer> | |
| </div> | |
| <!-- Toast Notification --> | |
| <div id="toast" class="fixed top-20 left-1/2 transform -translate-x-1/2 -translate-y-24 bg-slate-800 text-white px-6 py-3 rounded-lg shadow-xl z-[1000] transition-all duration-300 border-l-4 border-transparent flex items-center gap-3 max-w-[90%] pointer-events-none opacity-0"> | |
| <i data-feather="info" class="text-blue-400"></i> | |
| <span id="toast-message" class="text-sm font-medium">Notification</span> | |
| </div> | |
| <!-- Debug Console --> | |
| <div id="debug-console" class="fixed bottom-0 left-0 right-0 h-40 bg-black/90 text-green-400 font-mono text-xs p-2 overflow-y-auto z-[9999] hidden border-t border-green-800"></div> | |
| <!-- History Modal --> | |
| <div id="history-modal" class="fixed inset-0 bg-black/70 backdrop-blur-sm z-[200] hidden flex items-center justify-center"> | |
| <div class="bg-white dark:bg-slate-800 w-full max-w-lg rounded-xl shadow-2xl overflow-hidden transform transition-all scale-100"> | |
| <div class="px-6 py-4 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center bg-slate-50 dark:bg-slate-900"> | |
| <h3 class="text-lg font-bold text-slate-800 dark:text-white flex items-center gap-2"><i data-feather="clock"></i> ประวัติไฟล์</h3> | |
| <button class="close-modal text-slate-400 hover:text-red-500 transition-colors"><i data-feather="x"></i></button> | |
| </div> | |
| <div id="history-list" class="max-h-[60vh] overflow-y-auto p-2"> | |
| <!-- History items injected here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- QR Code Modal --> | |
| <div id="qr-modal" class="fixed inset-0 bg-black/70 backdrop-blur-sm z-[200] hidden flex items-center justify-center"> | |
| <div class="bg-white dark:bg-slate-800 w-full max-w-md rounded-xl shadow-2xl overflow-hidden p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-lg font-bold text-slate-800 dark:text-white flex items-center gap-2"><i data-feather="grid"></i> ตั้งค่า QR Code</h3> | |
| <button class="close-modal text-slate-400 hover:text-red-500 transition-colors"><i data-feather="x"></i></button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-xs font-bold text-slate-500 uppercase mb-1">URL สำหรับ QR Code</label> | |
| <input type="text" id="qr-url" class="w-full px-4 py-2 rounded-lg bg-slate-100 dark:bg-slate-700 border-none focus:ring-2 focus:ring-blue-500 text-slate-800 dark:text-white" placeholder="https://..."> | |
| </div> | |
| <div class="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-3 text-sm text-blue-800 dark:text-blue-200"> | |
| <strong>ขนาด QR Code:</strong> 15mm × 13.58mm<br> | |
| <span class="text-xs opacity-75">ตำแหน่ง: X=15.15mm, Y=292.45mm</span> | |
| </div> | |
| <div class="flex justify-center bg-white dark:bg-slate-900 p-4 rounded-lg border border-slate-200 dark:border-slate-700"> | |
| <canvas id="qr-preview-canvas" width="150" height="136"></canvas> | |
| </div> | |
| <div class="flex gap-3 pt-2"> | |
| <button id="btn-qr-cancel" class="flex-1 px-4 py-2 rounded-lg border border-slate-300 dark:border-slate-600 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700 font-medium transition-colors">ยกเลิก</button> | |
| <button id="btn-qr-apply" class="flex-1 px-4 py-2 rounded-lg bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-bold hover:shadow-lg hover:scale-[1.02] transition-all flex justify-center items-center gap-2"> | |
| <i data-feather="download"></i> เพิ่ม QR และดาวน์โหลด | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Loading Overlay --> | |
| <div id="loading-overlay" class="fixed inset-0 bg-black/80 z-[300] hidden flex-col items-center justify-center"> | |
| <div class="w-12 h-12 border-4 border-blue-500/30 border-t-blue-500 rounded-full animate-spin mb-4"></div> | |
| <div id="loading-text" class="text-white font-medium animate-pulse">กำลังประมวลผล...</div> | |
| </div> | |
| <!-- Components Scripts --> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/sidebar.js"></script> | |
| <script src="components/footer.js"></script> | |
| <!-- Navigation Links --> | |
| <script> | |
| // Listen for data updates from dashboard | |
| window.addEventListener('message', (e) => { | |
| if (e.data.type === 'DATA_UPDATED') { | |
| state.data = [e.data.data]; | |
| showData(0); | |
| } | |
| }); | |
| </script> | |
| <!-- Main Logic --> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| </body> | |
| </html> | |