| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>DocxLingua - DOCX Translation Tool</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.ckeditor.com/ckeditor5/41.1.0/decoupled-document/ckeditor.js"></script> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <custom-header></custom-header> |
| |
| <main class="container mx-auto px-4 py-12 max-w-4xl"> |
| <div class="bg-white rounded-xl shadow-lg p-8"> |
| <h1 class="text-3xl font-bold text-gray-800 mb-2">Translate Your DOCX Files</h1> |
| <p class="text-gray-600 mb-8">Upload a DOCX file and get it translated instantly</p> |
| |
| <div id="upload-section" class="mb-12"> |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center transition-all hover:border-blue-500"> |
| <i data-feather="upload" class="w-12 h-12 text-blue-500 mx-auto mb-4"></i> |
| <h3 class="text-lg font-medium text-gray-700 mb-2">Drag & drop your DOCX file here</h3> |
| <p class="text-gray-500 mb-4">or</p> |
| <input type="file" id="file-input" accept=".docx" class="hidden"> |
| <label for="file-input" class="cursor-pointer bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg inline-flex items-center transition-colors"> |
| <i data-feather="file" class="mr-2"></i> Select File |
| </label> |
| <p class="text-sm text-gray-500 mt-3">Only .docx files are accepted</p> |
| </div> |
| |
| <div id="file-info" class="hidden mt-4 p-4 bg-blue-50 rounded-lg"> |
| <div class="flex items-center"> |
| <i data-feather="file-text" class="text-blue-600 mr-3"></i> |
| <div> |
| <p id="file-name" class="font-medium text-gray-800"></p> |
| <p id="file-size" class="text-sm text-gray-600"></p> |
| </div> |
| <button id="remove-file" class="ml-auto text-red-500 hover:text-red-700"> |
| <i data-feather="x"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div id="uploading-animation" class="hidden mb-8 text-center"> |
| <div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-600 mb-4"></div> |
| <p class="text-gray-700">Uploading your file...</p> |
| </div> |
| |
| <div class="flex justify-center mb-12"> |
| <button id="translate-btn" disabled class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg flex items-center transition-colors disabled:opacity-50 disabled:cursor-not-allowed"> |
| <i data-feather="globe" class="mr-2"></i> Translate Document |
| </button> |
| </div> |
| |
| <div id="processing-animation" class="hidden mb-8 text-center"> |
| <div class="inline-flex space-x-2"> |
| <div class="w-4 h-4 bg-blue-600 rounded-full animate-bounce"></div> |
| <div class="w-4 h-4 bg-blue-600 rounded-full animate-bounce" style="animation-delay: 0.2s"></div> |
| <div class="w-4 h-4 bg-blue-600 rounded-full animate-bounce" style="animation-delay: 0.4s"></div> |
| </div> |
| <p class="text-gray-700 mt-4">Processing your translation...</p> |
| </div> |
| |
| <div id="result-section" class="hidden"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-xl font-bold text-gray-800">Translated Document</h2> |
| <button id="download-btn" class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg flex items-center transition-colors"> |
| <i data-feather="download" class="mr-2"></i> Download |
| </button> |
| </div> |
| |
| <div id="editor-container" class="border border-gray-200 rounded-lg overflow-hidden"> |
| <div id="editor" class="min-h-[500px]"></div> |
| </div> |
| </div> |
| </div> |
| </main> |
| |
| <custom-footer></custom-footer> |
| |
| <script src="components/header.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="script.js"></script> |
| <script> |
| feather.replace(); |
| </script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
