ocr-build001 / frontend /index.html
dev-models's picture
initial commit
0d9f6c2
<!DOCTYPE html>
<html lang="en" class="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lumina AI OCR</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
50: '#eef2ff',
100: '#e0e7ff',
200: '#c7d2fe',
300: '#a5b4fc',
400: '#818cf8',
500: '#6366f1', // Indigo-500
600: '#4f46e5', // Indigo-600
700: '#4338ca', // Indigo-700
800: '#3730a3',
900: '#312e81',
},
dark: {
800: '#1e293b',
900: '#0f172a',
950: '#020617',
}
},
animation: {
'fade-in': 'fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
'slide-up': 'slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1)',
'scan': 'scan 2.5s ease-in-out infinite',
'pulse-glow': 'pulseGlow 2s infinite',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0', transform: 'scale(0.98)' },
'100%': { opacity: '1', transform: 'scale(1)' },
},
slideUp: {
'0%': { transform: 'translateY(20px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
scan: {
'0%, 100%': { top: '0%' },
'50%': { top: '100%' },
},
pulseGlow: {
'0%, 100%': { opacity: '0.6', transform: 'scale(1)' },
'50%': { opacity: '1', transform: 'scale(1.05)' },
}
}
},
},
}
</script>
<style>
/* Custom scrollbar for text areas */
.scrollbar-thin::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background-color: #cbd5e1;
border-radius: 20px;
}
.dark .scrollbar-thin::-webkit-scrollbar-thumb {
background-color: #475569;
}
/* Scanning line glow */
.scan-line {
background: linear-gradient(to right, transparent, #6366f1, transparent);
box-shadow: 0 0 15px #6366f1, 0 0 30px #818cf8;
}
</style>
<link rel="stylesheet" href="/index.css">
<script type="importmap">
{
"imports": {
"react/": "https://esm.sh/react@^19.2.3/",
"react": "https://esm.sh/react@^19.2.3",
"react-dom/": "https://esm.sh/react-dom@^19.2.3/",
"lucide-react": "https://esm.sh/lucide-react@^0.562.0",
"axios": "https://esm.sh/axios@^1.13.2"
}
}
</script>
<script type="module" crossorigin src="/assets/index-CPxYcdRp.js"></script>
</head>
<body class="bg-gray-50 text-slate-900 dark:bg-dark-950 dark:text-slate-100 transition-colors duration-300 min-h-screen font-sans selection:bg-primary-200 selection:text-primary-900">
<div id="root"></div>
</body>
</html>