Spaces:

bagustyo
/

json2db

Sleeping

App Files Files Community

bagustyo commited on 20 days ago

Commit

bb825f2

verified ·

1 Parent(s): 2405660

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +197 -39

templates/index.html CHANGED Viewed

@@ -3,48 +3,206 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>778 TXT File Processor</title>
     <style>
-        body { font-family: Arial, sans-serif; margin: 40px; background: #f8f9fa; }
-        .container { max-width: 700px; margin: auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.1); }
-        h1 { color: #333; }
-        input[type="file"] { margin: 15px 0; }
-        button { padding: 12px 20px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; }
-        button:hover { background: #0056b3; }
-        .result { margin-top: 20px; padding: 15px; background: #e9f7ef; border-radius: 5px; }
     </style>
 </head>
-<body>
-<div class="container">
-    <h1>778 TXT Processor</h1>
-    <p>Upload multiple <strong>.txt</strong> files or one <strong>.zip</strong> folder containing them.</p>
-    <form action="/upload/" method="post" enctype="multipart/form-data">
-        <input type="file" name="files" multiple accept=".txt,.zip" required>
-        <br><br>
-        <button type="submit">Upload & Process</button>
-    </form>
-    <div id="result"></div>
-</div>
-<script>
-    document.querySelector('form').addEventListener('submit', async (e) => {
-        e.preventDefault();
-        const formData = new FormData(e.target);
-        const res = await fetch('/upload/', { method: 'POST', body: formData });
-        const data = await res.json();
-        document.getElementById('result').innerHTML = `
-            <div class="result">
-                <h2>✅ Processing Complete!</h2>
-                <p><strong>Uploaded:</strong> ${data.uploaded_files}</p>
-                <p><strong>Processed input files:</strong> ${data.processed_input_files}</p>
-                <p><strong>Generated FNL files:</strong> ${data.generated_fnl_files}</p>
-                <a href="/download/" download><button>📥 Download All FNL Files (ZIP)</button></a>
             </div>
-        `;
-    });
-</script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>778 TXT Processor</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+    <script>
+        tailwind.config = {
+            content: [],
+            theme: {
+                extend: {}
+            }
+        }
+    </script>
     <style>
+        .drop-zone {
+            transition: all 0.3s ease;
+        }
+        .drop-zone.dragover {
+            background-color: #eff6ff;
+            border-color: #3b82f6;
+            transform: scale(1.02);
+        }
+        .spinner {
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
     </style>
 </head>
+<body class="bg-gradient-to-br from-slate-50 to-slate-100 min-h-screen font-sans">
+    <div class="max-w-2xl mx-auto py-12 px-6">
+        <!-- Header -->
+        <div class="text-center mb-10">
+            <div class="inline-flex items-center justify-center w-16 h-16 bg-blue-600 text-white rounded-2xl mb-4 shadow-lg">
+                <i class="fa-solid fa-file-lines text-3xl"></i>
             </div>
+            <h1 class="text-4xl font-bold text-slate-800 tracking-tight">778 TXT Processor</h1>
+            <p class="text-slate-600 mt-2 text-lg">Clean • Fast • Automated</p>
+        </div>
+        <div class="bg-white rounded-3xl shadow-xl overflow-hidden">
+            <!-- Upload Section -->
+            <div class="p-8 border-b">
+                <div class="mb-6">
+                    <h2 class="text-xl font-semibold text-slate-700 flex items-center gap-2">
+                        <i class="fa-solid fa-cloud-arrow-up"></i>
+                        Upload Files
+                    </h2>
+                    <p class="text-slate-500 text-sm mt-1">
+                        Select multiple <strong>.txt</strong> files or one <strong>.zip</strong> archive containing your files
+                    </p>
+                </div>
+                <form id="uploadForm" class="space-y-6">
+                    <!-- Drag & Drop Zone -->
+                    <div id="dropZone"
+                         class="drop-zone border-2 border-dashed border-slate-300 rounded-2xl p-12 text-center cursor-pointer hover:border-blue-400 bg-slate-50">
+                        <i class="fa-solid fa-cloud-arrow-up text-5xl text-slate-400 mb-4"></i>
+                        <p class="text-lg font-medium text-slate-700">Drag & drop your files here</p>
+                        <p class="text-slate-500 text-sm mt-1">or</p>
+                        <label class="inline-block mt-4 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl cursor-pointer transition font-medium">
+                            <i class="fa-solid fa-folder-open mr-2"></i>
+                            Browse Files
+                            <input type="file" id="fileInput" name="files" multiple accept=".txt,.zip" class="hidden">
+                        </label>
+                        <p class="text-xs text-slate-400 mt-6">Supported: .txt and .zip files</p>
+                    </div>
+                    <button type="submit"
+                            id="submitBtn"
+                            class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-4 rounded-2xl flex items-center justify-center gap-3 transition shadow-md">
+                        <i class="fa-solid fa-gear"></i>
+                        Upload & Process Files
+                    </button>
+                </form>
+            </div>
+            <!-- Result Section -->
+            <div id="resultSection" class="hidden p-8">
+                <div id="loading" class="hidden text-center py-12">
+                    <div class="inline-block w-10 h-10 border-4 border-blue-200 border-t-blue-600 rounded-full spinner mb-4"></div>
+                    <p class="text-slate-600 font-medium">Processing your files...</p>
+                    <p class="text-xs text-slate-400 mt-1">Please wait</p>
+                </div>
+                <div id="successResult" class="hidden">
+                    <div class="flex items-center gap-3 mb-6">
+                        <div class="w-10 h-10 bg-emerald-100 text-emerald-600 rounded-2xl flex items-center justify-center">
+                            <i class="fa-solid fa-check text-2xl"></i>
+                        </div>
+                        <div>
+                            <h2 class="text-2xl font-semibold text-emerald-700">Processing Complete!</h2>
+                            <p class="text-slate-500">Your FNL files have been generated successfully.</p>
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-3 gap-4 mb-8">
+                        <div class="bg-slate-50 rounded-2xl p-4 text-center">
+                            <p class="text-xs text-slate-500">Uploaded</p>
+                            <p id="uploadedCount" class="text-3xl font-bold text-slate-700">0</p>
+                        </div>
+                        <div class="bg-slate-50 rounded-2xl p-4 text-center">
+                            <p class="text-xs text-slate-500">Processed</p>
+                            <p id="processedCount" class="text-3xl font-bold text-slate-700">0</p>
+                        </div>
+                        <div class="bg-slate-50 rounded-2xl p-4 text-center">
+                            <p class="text-xs text-slate-500">Generated</p>
+                            <p id="generatedCount" class="text-3xl font-bold text-emerald-600">0</p>
+                        </div>
+                    </div>
+                    <a id="downloadLink" href="/download/"
+                       class="block w-full bg-emerald-600 hover:bg-emerald-700 text-white font-semibold py-4 rounded-2xl text-center transition flex items-center justify-center gap-3 shadow-md">
+                        <i class="fa-solid fa-download"></i>
+                        Download All FNL Files (ZIP)
+                    </a>
+                </div>
+            </div>
+        </div>
+        <!-- Footer -->
+        <div class="text-center text-slate-400 text-xs mt-8">
+            FastAPI • Jinja2 • Tailwind CSS
+        </div>
+    </div>
+    <script>
+        const dropZone = document.getElementById('dropZone');
+        const fileInput = document.getElementById('fileInput');
+        const form = document.getElementById('uploadForm');
+        const submitBtn = document.getElementById('submitBtn');
+        const resultSection = document.getElementById('resultSection');
+        const loading = document.getElementById('loading');
+        const successResult = document.getElementById('successResult');
+        // Tailwind script already loaded via CDN
+        // Drag & Drop handlers
+        dropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropZone.classList.add('dragover');
+        });
+        dropZone.addEventListener('dragleave', () => {
+            dropZone.classList.remove('dragover');
+        });
+        dropZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropZone.classList.remove('dragover');
+            fileInput.files = e.dataTransfer.files;
+        });
+        dropZone.addEventListener('click', () => {
+            fileInput.click();
+        });
+        // Form submit
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            if (fileInput.files.length === 0) {
+                alert("Please select at least one file or ZIP archive.");
+                return;
+            }
+            // Show loading
+            resultSection.classList.remove('hidden');
+            loading.classList.remove('hidden');
+            successResult.classList.add('hidden');
+            submitBtn.disabled = true;
+            submitBtn.innerHTML = `<i class="fa-solid fa-spinner spinner mr-2"></i> Processing...`;
+            const formData = new FormData(form);
+            try {
+                const res = await fetch('/upload/', {
+                    method: 'POST',
+                    body: formData
+                });
+                const data = await res.json();
+                // Hide loading, show success
+                loading.classList.add('hidden');
+                successResult.classList.remove('hidden');
+                // Fill statistics
+                document.getElementById('uploadedCount').textContent = data.uploaded_files || 0;
+                document.getElementById('processedCount').textContent = data.processed_input_files || 0;
+                document.getElementById('generatedCount').textContent = data.generated_fnl_files || 0;
+            } catch (err) {
+                alert("An error occurred during processing. Please try again.");
+                console.error(err);
+            } finally {
+                submitBtn.disabled = false;
+                submitBtn.innerHTML = `<i class="fa-solid fa-gear"></i> Upload & Process Files`;
+            }
+        });
+    </script>
 </body>
 </html>