|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
|
<title>GenSuite - AI Toolkit</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
background-color: #030712; |
|
|
background-image: radial-gradient(ellipse at 50% 50%, #1f2937 0%, #030712 70%); |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: #1f2937; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #4b5563; |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #6b7280; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.horizontal-scrollbar::-webkit-scrollbar { |
|
|
height: 8px; |
|
|
background-color: transparent; |
|
|
} |
|
|
|
|
|
.horizontal-scrollbar::-webkit-scrollbar-track { |
|
|
background: rgba(17, 24, 39, 0.5); |
|
|
border-radius: 4px; |
|
|
margin: 4px; |
|
|
} |
|
|
|
|
|
.horizontal-scrollbar::-webkit-scrollbar-thumb { |
|
|
background: #4b5563; |
|
|
border-radius: 4px; |
|
|
border: 2px solid transparent; |
|
|
background-clip: content-box; |
|
|
} |
|
|
|
|
|
.horizontal-scrollbar::-webkit-scrollbar-thumb:hover { |
|
|
background: #6b7280; |
|
|
background-clip: content-box; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } |
|
|
|
|
|
@keyframes fadeInDown { |
|
|
from { opacity: 0; transform: translateY(-10px); } |
|
|
to { opacity: 1; transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
@keyframes text-glow { |
|
|
0%, 100% { |
|
|
text-shadow: |
|
|
0 0 5px rgba(45, 212, 191, 0.3), |
|
|
0 0 10px rgba(45, 212, 191, 0.4), |
|
|
0 0 20px rgba(45, 212, 191, 0.5), |
|
|
0 0 40px rgba(13, 148, 136, 0.6); |
|
|
} |
|
|
50% { |
|
|
text-shadow: |
|
|
0 0 10px rgba(94, 234, 212, 0.4), |
|
|
0 0 20px rgba(94, 234, 212, 0.5), |
|
|
0 0 40px rgba(45, 212, 191, 0.7), |
|
|
0 0 80px rgba(13, 148, 136, 0.8); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes fade-in-scale { |
|
|
from { opacity: 0; transform: scale(0.95); } |
|
|
to { opacity: 1; transform: scale(1); } |
|
|
} |
|
|
|
|
|
@keyframes blink { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0; } |
|
|
} |
|
|
|
|
|
@keyframes pulse-bar-1 { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1); } } |
|
|
|
|
|
@keyframes pulse-bar-2 { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.2); } } |
|
|
|
|
|
@keyframes pulse-bar-3 { 0%, 100% { transform: scaleY(0.7); } 50% { transform: scaleY(1); } } |
|
|
|
|
|
@keyframes pulse-bar-4 { 0%, 100% { transform: scaleY(0.9); } 50% { transform: scaleY(0.4); } } |
|
|
|
|
|
@keyframes pulse-bar-5 { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(0.8); } } |
|
|
|
|
|
@keyframes aurora-1 { |
|
|
0%, 100% { transform: translate(0, 0) scale(1); } |
|
|
50% { transform: translate(40px, 60px) scale(1.2); } |
|
|
} |
|
|
|
|
|
@keyframes aurora-2 { |
|
|
0%, 100% { transform: translate(0, 0) scale(1); } |
|
|
50% { transform: translate(-50px, -30px) scale(1.1); } |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@keyframes shimmer { |
|
|
100% { |
|
|
transform: translateX(100%); |
|
|
} |
|
|
} |
|
|
|
|
|
.animate-shimmer { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.animate-shimmer::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
transform: translateX(-100%); |
|
|
background-image: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0.05) 20%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0)); |
|
|
animation: shimmer 2s infinite; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.blinking-cursor { animation: blink 1s step-end infinite; font-weight: bold; display: inline-block; margin-left: 2px; } |
|
|
|
|
|
.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; } |
|
|
|
|
|
.animate-fade-in-down { animation: fadeInDown 0.3s ease-out forwards; } |
|
|
|
|
|
.animate-text-glow { animation: text-glow 4s ease-in-out infinite; } |
|
|
|
|
|
.animate-fade-in-scale { animation: fade-in-scale 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } |
|
|
|
|
|
|
|
|
|
|
|
.aurora-background::before, .aurora-background::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
z-index: -1; |
|
|
width: 400px; |
|
|
height: 400px; |
|
|
border-radius: 50%; |
|
|
filter: blur(100px); |
|
|
opacity: 0.15; |
|
|
} |
|
|
|
|
|
.aurora-background::before { |
|
|
background-color: #2dd4bf; |
|
|
top: -10%; |
|
|
left: -10%; |
|
|
animation: aurora-1 12s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
.aurora-background::after { |
|
|
background-color: #6366f1; |
|
|
bottom: -10%; |
|
|
right: -10%; |
|
|
animation: aurora-2 14s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.text-gradient-teal { background-image: linear-gradient(to right, #5eead4, #2dd4bf); -webkit-background-clip: text; background-clip: text; color: transparent; } |
|
|
|
|
|
.text-gradient-indigo { background-image: linear-gradient(to right, #38bdf8, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; } |
|
|
|
|
|
.text-gradient-rose { background-image: linear-gradient(to right, #f472b6, #e879f9); -webkit-background-clip: text; background-clip: text; color: transparent; } |
|
|
|
|
|
.text-gradient-amber { background-image: linear-gradient(to right, #fcd34d, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; } |
|
|
|
|
|
.text-gradient-purple { background-image: linear-gradient(to right, #a78bfa, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; } |
|
|
|
|
|
.text-gradient-gray { background-image: linear-gradient(to right, #d1d5db, #9ca3af); -webkit-background-clip: text; background-clip: text; color: transparent; } |
|
|
|
|
|
</style> |
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script> |
|
|
<link rel="stylesheet" href="/index.css"> |
|
|
<script type="importmap"> |
|
|
{ |
|
|
"imports": { |
|
|
"react/": "https://aistudiocdn.com/react@^19.1.1/", |
|
|
"react": "https://aistudiocdn.com/react@^19.1.1", |
|
|
"react-dom/": "https://aistudiocdn.com/react-dom@^19.1.1/", |
|
|
"@google/genai": "https://aistudiocdn.com/@google/genai@^1.20.0" |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<script type="module" crossorigin src="/assets/index-C3cMGClh.js"></script> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-white"> |
|
|
<div id="root"></div> |
|
|
</body> |
|
|
</html> |
