|
|
<!DOCTYPE html> |
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
|
|
|
<app-navbar></app-navbar> |
|
|
|
|
|
|
|
|
<div class="flex flex-1 overflow-hidden relative"> |
|
|
|
|
|
|
|
|
<app-sidebar id="sidebar"></app-sidebar> |
|
|
|
|
|
|
|
|
<div id="sidebar-overlay" class="fixed inset-0 bg-black/50 z-40 hidden transition-opacity lg:hidden"></div> |
|
|
|
|
|
|
|
|
<main class="flex-1 flex flex-col overflow-hidden bg-slate-900 relative" id="viewer-container"> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="flex-1 overflow-auto relative bg-slate-900/50 p-4" id="viewer-content"> |
|
|
|
|
|
<div class="template-viewer flex flex-col items-center gap-8 pb-20" id="template-view"> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<app-footer></app-footer> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/sidebar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
|
|
|
<script> |
|
|
|
|
|
window.addEventListener('message', (e) => { |
|
|
if (e.data.type === 'DATA_UPDATED') { |
|
|
state.data = [e.data.data]; |
|
|
showData(0); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
|
|
|
|
|
|
<script src="script.js"></script> |
|
|
<script>feather.replace();</script> |
|
|
</body> |
|
|
</html> |
|
|
|
