| <!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> |
