Spaces:
Running
Running
File size: 15,765 Bytes
da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 47d80d9 12fcb74 47d80d9 12fcb74 47d80d9 da07a44 47d80d9 12fcb74 47d80d9 12fcb74 47d80d9 da07a44 47d80d9 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 da07a44 12fcb74 9a9a400 12fcb74 9a9a400 12fcb74 da07a44 2ce99ee |
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 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 |
<!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>
<!-- 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>
|