Spaces:
Running
Running
#ADD The ability Python PDF and HTML files as well as.Ininifil as part of the accepted converted to PD ankle gets the the unit if we make it look more like the Star Trek replicator blacks and Blues and hues and yellows I Star Trek theme herediscription i would lie fallowed please: "# Futuristic Drag-and-Drop User Interface Inspired by the Star Trek Replicator: Comprehensive Design and Implementation Report
52ec77f verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TrekPDF Replicator</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <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> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen"> | |
| <custom-header></custom-header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- File Upload Section --> | |
| <div class="bg-gray-800 rounded-xl p-6 border-2 border-lime-500 shadow-lg"> | |
| <h2 class="text-2xl font-bold mb-6 text-lime-400 flex items-center"> | |
| <i data-feather="upload" class="mr-2"></i>Replicator Input Bay | |
| </h2> | |
| <div id="drop-zone" class="border-2 border-dashed border-lime-400 rounded-lg p-8 text-center cursor-pointer hover:bg-gray-700 transition-all"> | |
| <i data-feather="hard-drive" class="w-12 h-12 mx-auto text-lime-400 mb-4"></i> | |
| <p class="mb-2">Drag & drop files here or click to browse</p> | |
| <p class="text-sm text-gray-400">Supports: TXT, DOC, DOCX, MD, PNG, JPG, JPEG, GIF, PDF, HTML, PY, INI (up to 30 files)</p> | |
| </div> | |
| <div id="file-list" class="mt-6 max-h-60 overflow-y-auto"> | |
| <!-- Files will be listed here --> | |
| </div> | |
| <div class="mt-6"> | |
| <label class="flex items-center mb-4"> | |
| <input type="checkbox" id="sort-toggle" class="form-checkbox h-5 w-5 text-lime-500"> | |
| <span class="ml-2">Intelligently sort document order</span> | |
| </label> | |
| <button id="process-btn" class="w-full bg-lime-500 hover:bg-lime-600 text-gray-900 font-bold py-3 px-4 rounded-lg transition-all flex items-center justify-center"> | |
| <i data-feather="zap" class="mr-2"></i>Initiate Replication Sequence | |
| </button> | |
| </div> | |
| </div> | |
| <!-- PDF Processing Section --> | |
| <div class="bg-gray-800 rounded-xl p-6 border-2 border-fuchsia-500 shadow-lg"> | |
| <h2 class="text-2xl font-bold mb-6 text-fuchsia-400 flex items-center"> | |
| <i data-feather="file-text" class="mr-2"></i>PDF Decomposition Matrix | |
| </h2> | |
| <div id="pdf-drop-zone" class="border-2 border-dashed border-fuchsia-400 rounded-lg p-8 text-center cursor-pointer hover:bg-gray-700 transition-all"> | |
| <i data-feather="file" class="w-12 h-12 mx-auto text-fuchsia-400 mb-4"></i> | |
| <p class="mb-2">Drag & drop PDF files here or click to browse</p> | |
| <p class="text-sm text-gray-400">Convert PDF to MD or JSON format</p> | |
| </div> | |
| <div class="mt-6"> | |
| <label class="block mb-2">Output Format:</label> | |
| <div class="flex space-x-4 mb-6"> | |
| <label class="flex items-center"> | |
| <input type="radio" name="output-format" value="md" class="form-radio text-fuchsia-500" checked> | |
| <span class="ml-2">Markdown (.md)</span> | |
| </label> | |
| <label class="flex items-center"> | |
| <input type="radio" name="output-format" value="json" class="form-radio text-fuchsia-500"> | |
| <span class="ml-2">JSON (.json)</span> | |
| </label> | |
| </div> | |
| <button id="pdf-process-btn" class="w-full bg-fuchsia-500 hover:bg-fuchsia-600 text-gray-900 font-bold py-3 px-4 rounded-lg transition-all flex items-center justify-center"> | |
| <i data-feather="cpu" class="mr-2"></i>Activate Decomposition Sequence | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Transporter Animation Section --> | |
| <div id="transporter-section" class="mt-12 bg-gray-800 rounded-xl p-6 border-2 border-blue-400 shadow-lg hidden"> | |
| <h2 class="text-2xl font-bold mb-6 text-blue-400 text-center">Transporter Active</h2> | |
| <div id="transporter-animation" class="flex justify-center items-center h-64"> | |
| <div class="relative"> | |
| <div class="transporter-ring"></div> | |
| <div class="transporter-core"></div> | |
| <div class="transporter-beam"></div> | |
| </div> | |
| </div> | |
| <p id="transporter-status" class="text-center mt-4 text-lg">Initializing transport sequence...</p> | |
| </div> | |
| <!-- Completed Files Section --> | |
| <div id="completed-section" class="mt-12 bg-gray-800 rounded-xl p-6 border-2 border-yellow-400 shadow-lg hidden"> | |
| <h2 class="text-2xl font-bold mb-6 text-yellow-400 flex items-center justify-center"> | |
| <i data-feather="gift" class="mr-2"></i>Replicated Documents | |
| </h2> | |
| <div id="completed-files" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Completed files will appear here --> | |
| </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> | |