adityacse/m-cle-ai-localization-engine
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 Content - M-CLE</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script>11 tailwind.config = {12 darkMode: 'class',13 theme: {14 extend: {15 colors: {16 primary: {17 50: '#f0f9ff',18 100: '#e0f2fe',19 200: '#bae6fd',20 300: '#7dd3fc',21 400: '#38bdf8',22 500: '#0ea5e9',23 600: '#0284c7',24 700: '#0369a1',25 800: '#075985',26 900: '#0c4a6e',27 },28 secondary: {29 50: '#f5f3ff',30 100: '#ede9fe',31 200: '#ddd6fe',32 300: '#c4b5fd',33 400: '#a78bfa',34 500: '#8b5cf6',35 600: '#7c3aed',36 700: '#6d28d9',37 800: '#5b21b6',38 900: '#4c1d95',39 }40 }41 }42 }43 }44 </script>45 <style>46 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');47 body {48 font-family: 'Inter', sans-serif;49 background-color: #0f172a;50 color: #f1f5f9;51 }52 .upload-area {53 border: 2px dashed #475569;54 transition: all 0.3s ease;55 }56 .upload-area:hover, .upload-area.dragover {57 border-color: #0ea5e9;58 background-color: rgba(14, 165, 233, 0.05);59 }60 .card-gradient {61 background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.9));62 backdrop-filter: blur(10px);63 border: 1px solid rgba(148, 163, 184, 0.1);64 }65 .progress-bar {66 height: 6px;67 background-color: #1e293b;68 border-radius: 3px;69 overflow: hidden;70 }71 .progress-fill {72 height: 100%;73 background: linear-gradient(90deg, #0ea5e9, #8b5cf6);74 border-radius: 3px;75 transition: width 0.4s ease;76 }77 </style>78</head>79<body class="bg-slate-900 text-slate-100">80 <!-- Navigation -->81 <nav class="fixed w-full z-50 bg-slate-900/80 backdrop-blur-sm border-b border-slate-800">82 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">83 <div class="flex items-center justify-between h-16">84 <div class="flex items-center">85 <div class="flex-shrink-0 flex items-center">86 <div class="feature-icon w-8 h-8 rounded-lg flex items-center justify-center bg-gradient-to-r from-primary-500 to-secondary-500">87 <i data-feather="globe" class="text-white w-5 h-5"></i>88 </div>89 <span class="ml-2 text-xl font-bold">M-CLE<span class="text-primary-400">.</span></span>90 </div>91 <div class="hidden md:block">92 <div class="ml-10 flex items-baseline space-x-4">93 <a href="index.html" class="text-slate-300 hover:bg-slate-800 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>94 <a href="#" class="bg-slate-800 text-white px-3 py-2 rounded-md text-sm font-medium">Upload</a>95 <a href="dashboard.html" class="text-slate-300 hover:bg-slate-800 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>96 <a href="glossary.html" class="text-slate-300 hover:bg-slate-800 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Glossary</a>97 </div>98 </div>99 </div>100 <div class="hidden md:block">101 <div class="ml-4 flex items-center md:ml-6">102 <button id="theme-toggle" class="p-1 rounded-full text-slate-400 hover:text-white focus:outline-none">103 <i data-feather="moon" class="w-5 h-5"></i>104 </button>105 <button class="ml-4 bg-primary-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-primary-700 transition">Sign In</button>106 </div>107 </div>108 <div class="-mr-2 flex md:hidden">109 <button class="inline-flex items-center justify-center p-2 rounded-md text-slate-400 hover:text-white hover:bg-slate-700 focus:outline-none">110 <i data-feather="menu" class="block h-6 w-6"></i>111 </button>112 </div>113 </div>114 </div>115 </nav>116 117 <!-- Main Content -->118 <div class="pt-20 pb-12">119 <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">120 <div class="text-center mb-12">121 <h1 class="text-3xl font-extrabold text-white sm:text-4xl">122 Upload Content for Localization123 </h1>124 <p class="mt-3 max-w-2xl mx-auto text-xl text-slate-400">125 Drag and drop your files or browse to upload. We support PDF, DOCX, PPT, MP3, MP4 and more.126 </p>127 </div>128 129 <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">130 <!-- Upload Area -->131 <div class="lg:col-span-2">132 <div class="card-gradient rounded-xl p-6">133 <div id="upload-area" class="upload-area rounded-lg p-8 text-center cursor-pointer">134 <i data-feather="upload" class="w-12 h-12 text-slate-400 mx-auto"></i>135 <p class="mt-4 text-lg font-medium text-slate-200">Drag & drop files here</p>136 <p class="mt-1 text-slate-400">or</p>137 <button class="mt-4 bg-primary-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-primary-700 transition">138 Browse Files139 </button>140 <input type="file" id="file-input" class="hidden" multiple>141 <p class="mt-4 text-sm text-slate-500">Supports PDF, DOCX, PPT, MP3, MP4 and more</p>142 </div>143 144 <!-- File List -->145 <div id="file-list" class="mt-6 space-y-4 hidden">146 <div class="flex justify-between items-center pb-2 border-b border-slate-800">147 <h3 class="text-lg font-medium text-slate-200">Selected Files</h3>148 <button id="clear-all" class="text-sm text-slate-400 hover:text-slate-200">149 Clear All150 </button>151 </div>152 <div id="files-container" class="space-y-3"></div>153 </div>154 155 <!-- Progress Section -->156 <div id="progress-section" class="mt-6 hidden">157 <h3 class="text-lg font-medium text-slate-200 mb-3">Upload Progress</h3>158 <div class="space-y-4">159 <div class="flex justify-between text-sm">160 <span id="progress-text">Uploading files...</span>161 <span id="progress-percent">0%</span>162 </div>163 <div class="progress-bar">164 <div id="progress-fill" class="progress-fill w-0"></div>165 </div>166 </div>167 </div>168 </div>169 </div>170 171 <!-- Configuration Panel -->172 <div>173 <div class="card-gradient rounded-xl p-6 sticky top-24">174 <h2 class="text-xl font-bold text-white mb-6">Localization Settings</h2>175 176 <div class="space-y-6">177 <!-- Source Language -->178 <div>179 <label class="block text-sm font-medium text-slate-300 mb-2">Source Language</label>180 <select class="w-full bg-slate-800 border border-slate-700 rounded-md py-2 px-3 text-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500">181 <option>English</option>182 <option>Hindi</option>183 <option>Bengali</option>184 <option>Telugu</option>185 <option>Marathi</option>186 <option>Tamil</option>187 </select>188 </div>189 190 <!-- Target Languages -->191 <div>192 <label class="block text-sm font-medium text-slate-300 mb-2">Target Languages</label>193 <div class="space-y-2 max-h-40 overflow-y-auto p-2 bg-slate-800/50 rounded-md">194 <label class="flex items-center">195 <input type="checkbox" class="rounded text-primary-500 focus:ring-primary-500">196 <span class="ml-2 text-slate-300">Hindi</span>197 </label>198 <label class="flex items-center">199 <input type="checkbox" class="rounded text-primary-500 focus:ring-primary-500" checked>200 <span class="ml-2 text-slate-300">Bengali</span>201 </label>202 <label class="flex items-center">203 <input type="checkbox" class="rounded text-primary-500 focus:ring-primary-500" checked>204 <span class="ml-2 text-slate-300">Telugu</span>205 </label>206 <label class="flex items-center">207 <input type="checkbox" class="rounded text-primary-500 focus:ring-primary-500">208 <span class="ml-2 text-slate-300">Marathi</span>209 </label>210 <label class="flex items-center">211 <input type="checkbox" class="rounded text-primary-500 focus:ring-primary-500">212 <span class="ml-2 text-slate-300">Tamil</span>213 </label>214 <label class="flex items-center">215 <input type="checkbox" class="rounded text-primary-500 focus:ring-primary-500">216 <span class="ml-2 text-slate-300">Urdu</span>217 </label>218 </div>219 </div>220 221 <!-- Domain -->222 <div>223 <label class="block text-sm font-medium text-slate-300 mb-2">Domain</label>224 <select class="w-full bg-slate-800 border border-slate-700 rounded-md py-2 px-3 text-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500">225 <option>Healthcare</option>226 <option>Agriculture</option>227 <option>Manufacturing</option>228 <option>IT & Software</option>229 <option>Finance</option>230 <option>Education</option>231 </select>232 </div>233 234 <!-- Job Title -->235 <div>236 <label class="block text-sm font-medium text-slate-300 mb-2">Job Title</label>237 <input type="text" placeholder="Enter job title" class="w-full bg-slate-800 border border-slate-700 rounded-md py-2 px-3 text-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-500">238 </div>239 240 <!-- Submit Button -->241 <button id="submit-btn" class="w-full bg-gradient-to-r from-primary-500 to-secondary-500 text-white py-3 px-4 rounded-md font-medium hover:from-primary-600 hover:to-secondary-600 transition disabled:opacity-50 disabled:cursor-not-allowed">242 Start Localization243 </button>244 </div>245 </div>246 </div>247 </div>248 </div>249 </div>250 251 <script>252 // Initialize Feather Icons253 feather.replace();254 255 // DOM Elements256 const uploadArea = document.getElementById('upload-area');257 const fileInput = document.getElementById('file-input');258 const fileList = document.getElementById('file-list');259 const filesContainer = document.getElementById('files-container');260 const clearAllBtn = document.getElementById('clear-all');261 const progressSection = document.getElementById('progress-section');262 const progressFill = document.getElementById('progress-fill');263 const progressText = document.getElementById('progress-text');264 const progressPercent = document.getElementById('progress-percent');265 const submitBtn = document.getElementById('submit-btn');266 267 // Event Listeners268 uploadArea.addEventListener('click', () => fileInput.click());269 fileInput.addEventListener('change', handleFileSelect);270 clearAllBtn.addEventListener('click', clearAllFiles);271 submitBtn.addEventListener('click', startLocalization);272 273 // Drag and Drop Events274 ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {275 uploadArea.addEventListener(eventName, preventDefaults, false);276 });277 278 function preventDefaults(e) {279 e.preventDefault();280 e.stopPropagation();281 }282 283 ['dragenter', 'dragover'].forEach(eventName => {284 uploadArea.addEventListener(eventName, highlight, false);285 });286 287 ['dragleave', 'drop'].forEach(eventName => {288 uploadArea.addEventListener(eventName, unhighlight, false);289 });290 291 function highlight() {292 uploadArea.classList.add('dragover');293 }294 295 function unhighlight() {296 uploadArea.classList.remove('dragover');297 }298 299 uploadArea.addEventListener('drop', handleDrop, false);300 301 function handleDrop(e) {302 const dt = e.dataTransfer;303 const files = dt.files;304 handleFiles(files);305 }306 307 function handleFileSelect(e) {308 const files = e.target.files;309 handleFiles(files);310 }311 312 function handleFiles(files) {313 if (files.length > 0) {314 fileList.classList.remove('hidden');315 for (let i = 0; i < files.length; i++) {316 addFileToList(files[i]);317 }318 }319 }320 321 function addFileToList(file) {322 const fileItem = document.createElement('div');323 fileItem.className = 'flex items-center justify-between p-3 bg-slate-800/50 rounded-lg';324 fileItem.innerHTML = `325 <div class="flex items-center">326 <div class="feature-icon w-10 h-10 rounded-lg flex items-center justify-center">327 <i data-feather="file" class="text-white w-5 h-5"></i>328 </div>329 <div class="ml-3">330 <p class="text-sm font-medium text-slate-200 truncate max-w-xs">${file.name}</p>331 <p class="text-xs text-slate-400">${formatFileSize(file.size)}</p>332 </div>333 </div>334 <button class="text-slate-400 hover:text-slate-200">335 <i data-feather="x" class="w-5 h-5"></i>336 </button>337 `;338 filesContainer.appendChild(fileItem);339 feather.replace();340 }341 342 function formatFileSize(bytes) {343 if (bytes === 0) return '0 Bytes';344 const k = 1024;345 const sizes = ['Bytes', 'KB', 'MB', 'GB'];346 const i = Math.floor(Math.log(bytes) / Math.log(k));347 return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];348 }349 350 function clearAllFiles() {351 filesContainer.innerHTML = '';352 fileList.classList.add('hidden');353 fileInput.value = '';354 }355 356 function startLocalization() {357 // Show progress section358 progressSection.classList.remove('hidden');359 360 // Simulate upload progress361 let progress = 0;362 const interval = setInterval(() => {363 progress += Math.random() * 10;364 if (progress >= 100) {365 progress = 100;366 clearInterval(interval);367 progressText.textContent = 'Upload complete! Starting processing...';368 setTimeout(() => {369 window.location.href = 'dashboard.html';370 }, 1500);371 }372 progressFill.style.width = `${progress}%`;373 progressPercent.textContent = `${Math.round(progress)}%`;374 }, 300);375 }376 377 // Theme toggle378 const themeToggle = document.getElementById('theme-toggle');379 const themeIcon = themeToggle.querySelector('i');380 381 themeToggle.addEventListener('click', () => {382 document.documentElement.classList.toggle('dark');383 if (document.documentElement.classList.contains('dark')) {384 themeIcon.setAttribute('data-feather', 'sun');385 } else {386 themeIcon.setAttribute('data-feather', 'moon');387 }388 feather.replace();389 });390 </script>391</body>392</html>393