Uploaded code

2025-09-27 17:45:52 +01:00
commit b73af5bf11
61 changed files with 10500 additions and 0 deletions
--- a/horizontal-layout.js
+++ b/horizontal-layout.js
@@ -0,0 +1,122 @@
+// Horizontal bar layout for file results
+
+// Replace the entire displayUploadedFiles function with this:
+function displayUploadedFiles(results) {
+    console.log('📁 Displaying file results:', results);
+    
+    result.innerHTML = '';
+    
+    const header = document.createElement('div');
+    header.innerHTML = '<h3>📁 Files Uploaded</h3>';
+    result.appendChild(header);
+    
+    results.forEach((fileResult, index) => {
+        const fileContainer = document.createElement('div');
+        fileContainer.style.cssText = `
+            margin-bottom: 15px;
+            padding: 15px;
+            border: 2px solid #4CAF50;
+            border-radius: 8px;
+            background-color: #f0f8f0;
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            flex-wrap: wrap;
+        `;
+        
+        // Left: File info
+        const fileInfo = document.createElement('div');
+        fileInfo.style.cssText = `
+            flex: 1;
+            min-width: 180px;
+        `;
+        
+        const fileName = document.createElement('div');
+        fileName.innerHTML = `<strong>📄 ${fileResult.file.name}</strong>`;
+        fileName.style.marginBottom = '5px';
+        fileInfo.appendChild(fileName);
+        
+        const fileSize = document.createElement('div');
+        fileSize.innerHTML = `📊 ${(fileResult.originalSize / 1024).toFixed(1)} KB`;
+        fileSize.style.cssText = `
+            font-size: 14px;
+            color: #666;
+        `;
+        fileInfo.appendChild(fileSize);
+        
+        fileContainer.appendChild(fileInfo);
+        
+        // Middle: Action buttons
+        const buttonContainer = document.createElement('div');
+        buttonContainer.style.cssText = `
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+        `;
+        
+        // Share button
+        const shareButton = document.createElement('button');
+        shareButton.textContent = '🔗 Copy';
+        shareButton.className = 'share-button';
+        shareButton.style.cssText = `padding: 6px 10px; font-size: 13px;`;
+        shareButton.addEventListener('click', () => {
+            navigator.clipboard.writeText(fileResult.url).then(() => {
+                shareButton.textContent = '✅ Copied!';
+                setTimeout(() => {
+                    shareButton.textContent = '🔗 Copy';
+                }, 2000);
+            });
+        });
+        buttonContainer.appendChild(shareButton);
+        
+        // View button
+        const viewButton = document.createElement('button');
+        viewButton.textContent = '👁️ View';
+        viewButton.className = 'view-button';
+        viewButton.style.cssText = `padding: 6px 10px; font-size: 13px;`;
+        viewButton.addEventListener('click', () => {
+            window.open(fileResult.url, '_blank');
+        });
+        buttonContainer.appendChild(viewButton);
+        
+        // QR Code button
+        const qrButton = document.createElement('button');
+        qrButton.textContent = '📱 QR';
+        qrButton.className = 'qr-button';
+        qrButton.style.cssText = `
+            background-color: #9C27B0;
+            color: white;
+            padding: 6px 10px;
+            font-size: 13px;
+        `;
+        qrButton.addEventListener('click', () => {
+            showQRCode(fileResult.url, fileResult.file.name);
+        });
+        buttonContainer.appendChild(qrButton);
+        
+        fileContainer.appendChild(buttonContainer);
+        
+        // Right: Image thumbnail (if it's an image)
+        if (isImageFile(fileResult.file)) {
+            const thumbnail = document.createElement('img');
+            thumbnail.src = fileResult.url;
+            thumbnail.alt = fileResult.file.name;
+            thumbnail.style.cssText = `
+                width: 60px;
+                height: 60px;
+                object-fit: cover;
+                border-radius: 6px;
+                border: 1px solid #ddd;
+                flex-shrink: 0;
+            `;
+            
+            thumbnail.onerror = () => {
+                thumbnail.style.display = 'none';
+            };
+            
+            fileContainer.appendChild(thumbnail);
+        }
+        
+        result.appendChild(fileContainer);
+    });
+}