Manual changes saved

style.css

@@ -1,179 +1,296 @@
-:root {
-    --primary: #2563eb;
-    --secondary: #1e40af;
-    --accent: #3b82f6;
-    --bg: #f8fafc;
-    --surface: #ffffff;
-    --text: #1e293b;
-    --text-light: #64748b;
-    --border: #e2e8f0;
-    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
-    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
-}
-
-* {
-    font-family: 'Sarabun', sans-serif;
-}
-
-body {
-    background-color: var(--bg);
-    color: var(--text);
-    line-height: 1.6;
-}
-
-/* Custom Scrollbar */
-::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-::-webkit-scrollbar-track {
-    background: #f1f5f9;
-    border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-    background: #cbd5e1;
-    border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: #94a3b8;
-}
-
-/* Animations */
-@keyframes fade-in {
-    from { opacity: 0; transform: translateY(-10px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes slide-up {
-    from { opacity: 0; transform: translateY(20px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes pulse-soft {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.7; }
-}
-
-.animate-fade-in {
-    animation: fade-in 0.6s ease-out;
-}
-
-.animate-slide-up {
-    animation: slide-up 0.5s ease-out;
-}
-
-.animate-pulse-soft {
-    animation: pulse-soft 2s ease-in-out infinite;
-}
-
-/* Upload Zone Styles */
-.upload-zone-dragover {
-    border-color: var(--primary) !important;
-    background-color: #eff6ff !important;
-    transform: scale(1.02);
-}
-
-/* Glass Effect */
-.glass {
-    background: rgba(255, 255, 255, 0.85);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-}
-
-/* Data Card Hover Effects */
-.data-card {
-    transition: all 0.2s ease;
-    border: 1px solid var(--border);
-}
-
-.data-card:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-lg);
-    border-color: #bfdbfe;
-}
-
-/* Floating Controls Container */
-#floating-controls-container {
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-}
-
-#floating-controls-container::-webkit-scrollbar {
-    display: none;
-}
-
-/* PDF Canvas Render */
-#pdf-canvas, #preview-image {
-    max-width: 100%;
-    height: auto;
-    box-shadow: var(--shadow-xl);
-    border-radius: 8px;
-}
-
-/* Button Interactions */
-.btn-interactive {
-    transition: all 0.2s ease;
-    position: relative;
-    overflow: hidden;
-}
-
-.btn-interactive:active {
-    transform: scale(0.95);
-}
-
-.btn-interactive::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    border-radius: 50%;
-    background: rgba(255, 255, 255, 0.3);
-    transform: translate(-50%, -50%);
-    transition: width 0.3s, height 0.3s;
-}
-
-.btn-interactive:hover::after {
-    width: 200px;
-    height: 200px;
-}
-
-/* JSON Syntax Highlighting */
-.json-key { color: #93c5fd; }
-.json-string { color: #86efac; }
-.json-number { color: #fca5a5; }
-.json-boolean { color: #f9a8d4; }
-
-/* Responsive Adjustments */
-@media (max-width: 640px) {
-    .container {
-        padding-left: 1rem;
-        padding-right: 1rem;
+class FloatingControls extends HTMLElement {
+    constructor() {
+        super();
+        this.hasFile = false;
     }
     
-    #preview-container {
-        padding: 1rem;
-        min-height: 300px;
-    }
-}
-
-/* Print Styles */
-@media print {
-    .no-print {
-        display: none !important;
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    position: fixed;
+                    bottom: 24px;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    z-index: 100;
+                    width: auto;
+                    max-width: 90vw;
+                }
+                
+                .controls-container {
+                    background: rgba(255, 255, 255, 0.95);
+                    backdrop-filter: blur(20px);
+                    -webkit-backdrop-filter: blur(20px);
+                    border: 1px solid rgba(226, 232, 240, 0.8);
+                    border-radius: 16px;
+                    padding: 12px 16px;
+                    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.05);
+                    display: flex;
+                    align-items: center;
+                    gap: 8px;
+                    flex-wrap: wrap;
+                    justify-content: center;
+                    transition: all 0.3s ease;
+                }
+                
+                .controls-container.disabled {
+                    opacity: 0.5;
+                    pointer-events: none;
+                }
+                
+                .btn-group {
+                    display: flex;
+                    gap: 4px;
+                    padding: 0 8px;
+                    border-right: 1px solid #e2e8f0;
+                }
+                
+                .btn-group:last-child {
+                    border-right: none;
+                }
+                
+                button {
+                    display: flex;
+                    align-items: center;
+                    gap: 6px;
+                    padding: 8px 14px;
+                    border: none;
+                    border-radius: 10px;
+                    font-size: 0.875rem;
+                    font-weight: 500;
+                    cursor: pointer;
+                    transition: all 0.2s ease;
+                    font-family: 'Sarabun', sans-serif;
+                    white-space: nowrap;
+                }
+                
+                button:hover {
+                    transform: translateY(-1px);
+                }
+                
+                button:active {
+                    transform: translateY(0);
+                }
+                
+                .btn-primary {
+                    background: linear-gradient(135deg, #2563eb, #3b82f6);
+                    color: white;
+                    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
+                }
+                
+                .btn-primary:hover {
+                    box-shadow: 0 8px 12px -2px rgba(37, 99, 235, 0.3);
+                }
+                
+                .btn-secondary {
+                    background: #f1f5f9;
+                    color: #475569;
+                    border: 1px solid #e2e8f0;
+                }
+                
+                .btn-secondary:hover {
+                    background: #e2e8f0;
+                    color: #1e293b;
+                }
+                
+                .btn-success {
+                    background: linear-gradient(135deg, #059669, #10b981);
+                    color: white;
+                    box-shadow: 0 4px 6px -1px rgba(5, 150, 105, 0.2);
+                }
+                
+                .btn-success:hover {
+                    box-shadow: 0 8px 12px -2px rgba(5, 150, 105, 0.3);
+                }
+                
+                .btn-export {
+                    background: #fffbeb;
+                    color: #d97706;
+                    border: 1px solid #fcd34d;
+                }
+                
+                .btn-export:hover {
+                    background: #fef3c7;
+                }
+                
+                .separator {
+                    width: 1px;
+                    height: 24px;
+                    background: #e2e8f0;
+                    margin: 0 4px;
+                }
+                
+                .icon {
+                    width: 16px;
+                    height: 16px;
+                }
+                
+                @media (max-width: 640px) {
+                    .controls-container {
+                        padding: 8px 12px;
+                        gap: 4px;
+                    }
+                    
+                    button {
+                        padding: 6px 10px;
+                        font-size: 0.75rem;
+                    }
+                    
+                    button span {
+                        display: none;
+                    }
+                    
+                    .icon {
+                        width: 18px;
+                        height: 18px;
+                    }
+                }
+                
+                @keyframes slide-up {
+                    from {
+                        opacity: 0;
+                        transform: translateY(20px) translateX(-50%);
+                    }
+                    to {
+                        opacity: 1;
+                        transform: translateY(0) translateX(-50%);
+                    }
+                }
+                
+                :host {
+                    animation: slide-up 0.4s ease-out;
+                }
+            </style>
+            <div class="controls-container" id="controls-container">
+                <div class="btn-group">
+                    <button class="btn-primary" id="analyze-btn" title="วิเคราะห์โครงสร้าง PDF">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                            <polyline points="14 2 14 8 20 8"></polyline>
+                            <line x1="16" y1="13" x2="8" y2="13"></line>
+                            <line x1="16" y1="17" x2="8" y2="17"></line>
+                            <polyline points="10 9 9 9 8 9"></polyline>
+                        </svg>
+                        <span>วิเคราะห์ PDF</span>
+                    </button>
+                    <button class="btn-success" id="ocr-btn" title="OCR ภาษาไทย">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
+                            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
+                        </svg>
+                        <span>OCR ไทย</span>
+                    </button>
+                </div>
+                
+                <div class="btn-group">
+                    <button class="btn-secondary" id="copy-btn" title="คัดลอกทั้งหมด">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                        </svg>
+                        <span>คัดลอก</span>
+                    </button>
+                </div>
+                
+                <div class="btn-group">
+                    <button class="btn-export" id="export-json-btn" title="Export JSON">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <polyline points="4 17 10 11 4 5"></polyline>
+                            <line x1="12" y1="19" x2="20" y2="19"></line>
+                        </svg>
+                        <span>JSON</span>
+                    </button>
+                    <button class="btn-export" id="export-csv-btn" title="Export CSV">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                            <polyline points="14 2 14 8 20 8"></polyline>
+                            <line x1="16" y1="13" x2="8" y2="13"></line>
+                            <line x1="16" y1="17" x2="8" y2="17"></line>
+                            <polyline points="10 9 9 9 8 9"></polyline>
+                        </svg>
+                        <span>CSV</span>
+                    </button>
+                    <button class="btn-export" id="export-excel-btn" title="Export Excel">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                            <polyline points="14 2 14 8 20 8"></polyline>
+                            <path d="M8 13h8"></path>
+                            <path d="M8 17h8"></path>
+                            <path d="M9 9h6"></path>
+                        </svg>
+                        <span>Excel</span>
+                    </button>
+                    <button class="btn-export" id="export-html-btn" title="Export HTML+CSS+JS">
+                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="m13 2-2 2.5h3zm-2 2.5L9 7h3zm-2 2.5L6 9.5h3zm-2 2.5L3 12h3zm8-5L11 7h3zm-2 2.5L9 9.5h3zm-2 2.5L7 12h3z"></path>
+                            <path d="M14 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2z"></path>
+                        </svg>
+                        <span>HTML</span>
+                    </button>
+</div>
+            </div>
+`;
+        
+        this.setupEventListeners();
+        this.updateState();
     }
     
-    body {
-        background: white;
+    setupEventListeners() {
+        // Listen for events from script.js to know when file is loaded
+        document.addEventListener('file-selected', () => {
+            this.hasFile = true;
+            this.updateState();
+        });
+        
+        document.addEventListener('reset-app', () => {
+            this.hasFile = false;
+            this.updateState();
+        });
+        
+        // Button click handlers
+        this.shadowRoot.getElementById('analyze-btn').addEventListener('click', () => {
+            this.dispatchEvent(new CustomEvent('analyze-pdf', { bubbles: true, composed: true }));
+        });
+        
+        this.shadowRoot.getElementById('ocr-btn').addEventListener('click', () => {
+            this.dispatchEvent(new CustomEvent('ocr-thai', { bubbles: true, composed: true }));
+        });
+        
+        this.shadowRoot.getElementById('copy-btn').addEventListener('click', () => {
+            this.dispatchEvent(new CustomEvent('copy-all', { bubbles: true, composed: true }));
+        });
+        
+        this.shadowRoot.getElementById('export-json-btn').addEventListener('click', () => {
+            this.dispatchEvent(new CustomEvent('export-json', { bubbles: true, composed: true }));
+        });
+        
+        this.shadowRoot.getElementById('export-csv-btn').addEventListener('click', () => {
+            this.dispatchEvent(new CustomEvent('export-csv', { bubbles: true, composed: true }));
+        });
+        this.shadowRoot.getElementById('export-excel-btn').addEventListener('click', () => {
+            this.dispatchEvent(new CustomEvent('export-excel', { bubbles: true, composed: true }));
+        });
+        
+        this.shadowRoot.getElementById('export-html-btn').addEventListener('click', () => {
+            this.dispatchEvent(new CustomEvent('export-html', { bubbles: true, composed: true }));
+        });
+}
+    updateState() {
+        const container = this.shadowRoot.getElementById('controls-container');
+        if (this.hasFile) {
+            container.classList.remove('disabled');
+        } else {
+            container.classList.add('disabled');
+        }
     }
-    
-    #results-section {
-        display: block !important;
+
+    // Make the controls always visible by removing the disabled class
+    showControls() {
+        const container = this.shadowRoot.getElementById('controls-container');
+        container.classList.remove('disabled');
     }
-}
+}
+
+customElements.define('floating-controls', FloatingControls);