Nervously/codebase-refactor-ai-wizard
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Upload Code | Codebase Refactor AI</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <style>10 .dropzone {11 border: 2px dashed #4b5563;12 transition: all 0.3s ease;13 }14 .dropzone.active {15 border-color: #6366f1;16 background-color: rgba(99, 102, 241, 0.05);17 }18 </style>19</head>20<body class="bg-gray-900 text-gray-100 min-h-screen">21 <div class="container mx-auto px-4 py-12">22 <header class="mb-12">23 <h1 class="text-3xl font-bold mb-2">Upload Your Codebase</h1>24 <p class="text-gray-400">Upload files directly or as a zip archive for analysis</p>25 </header>26 27 <div class="max-w-3xl mx-auto">28 <!-- File Dropzone -->29 <div class="dropzone rounded-lg p-8 mb-8 text-center cursor-pointer">30 <div class="flex flex-col items-center justify-center py-12">31 <i data-feather="upload" class="w-12 h-12 text-indigo-400 mb-4"></i>32 <h3 class="text-xl font-medium mb-2">Drag & drop files here</h3>33 <p class="text-gray-400 mb-4">or</p>34 <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded">35 Select Files36 </button>37 </div>38 <input type="file" id="file-upload" class="hidden" multiple>39 </div>40 41 <!-- File List -->42 <div class="bg-gray-800 rounded-lg border border-gray-700 overflow-hidden">43 <div class="p-4 border-b border-gray-700">44 <h3 class="font-medium">Selected Files (0)</h3>45 </div>46 <div id="file-list" class="divide-y divide-gray-700">47 <div class="p-4 text-center text-gray-500">48 No files selected yet49 </div>50 </div>51 </div>52 53 <!-- Analysis Options -->54 <div class="mt-8 bg-gray-800 rounded-lg border border-gray-700 p-6">55 <h3 class="font-medium mb-4">Analysis Options</h3>56 <div class="space-y-4">57 <div class="flex items-center">58 <input type="checkbox" id="deep-analysis" class="rounded text-indigo-600">59 <label for="deep-analysis" class="ml-2 text-gray-300">Deep Analysis (slower but more thorough)</label>60 </div>61 <div class="flex items-center">62 <input type="checkbox" id="include-comments" class="rounded text-indigo-600" checked>63 <label for="include-comments" class="ml-2 text-gray-300">Include code comments in analysis</label>64 </div>65 </div>66 </div>67 68 <!-- Submit Button -->69 <div class="mt-8">70 <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-lg">71 Analyze Codebase72 </button>73 </div>74 </div>75 </div>76 77 <script>78 feather.replace();79 80 // Dropzone functionality81 const dropzone = document.querySelector('.dropzone');82 const fileInput = document.getElementById('file-upload');83 const fileList = document.getElementById('file-list');84 85 dropzone.addEventListener('click', () => fileInput.click());86 87 dropzone.addEventListener('dragover', (e) => {88 e.preventDefault();89 dropzone.classList.add('active');90 });91 92 dropzone.addEventListener('dragleave', () => {93 dropzone.classList.remove('active');94 });95 96 dropzone.addEventListener('drop', (e) => {97 e.preventDefault();98 dropzone.classList.remove('active');99 handleFiles(e.dataTransfer.files);100 });101 102 fileInput.addEventListener('change', () => {103 handleFiles(fileInput.files);104 });105 106 function handleFiles(files) {107 if (files.length === 0) return;108 109 fileList.innerHTML = '';110 111 Array.from(files).forEach(file => {112 const fileItem = document.createElement('div');113 fileItem.className = 'p-4 flex items-center justify-between';114 115 fileItem.innerHTML = `116 <div class="flex items-center">117 <i data-feather="file" class="w-4 h-4 mr-2 text-blue-400"></i>118 <span>${file.name}</span>119 </div>120 <div class="text-sm text-gray-400">121 ${(file.size / 1024).toFixed(1)} KB122 </div>123 `;124 125 fileList.appendChild(fileItem);126 });127 128 feather.replace();129 }130 </script>131</body>132</html>