Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Axis | AI-Powered Code Intelligence</title> | |
| <meta | |
| name="description" | |
| content="Axis is an AI-powered platform for intelligent code translation, reasoning, and synthesis across programming languages." | |
| /> | |
| <!-- Open Graph --> | |
| <meta property="og:title" content="Axis | AI-Powered Code Intelligence" /> | |
| <meta | |
| property="og:description" | |
| content="Axis is an AI-powered platform for intelligent code translation, reasoning, and synthesis across programming languages." | |
| /> | |
| <meta | |
| property="og:image" | |
| content="https://axis.jessejesse.com/og-preview.png" | |
| /> | |
| <meta property="og:url" content="https://axis.jessejesse.com" /> | |
| <meta property="og:type" content="website" /> | |
| <!-- Twitter --> | |
| <meta name="twitter:card" content="summary_large_image" /> | |
| <meta name="twitter:title" content="Axis | AI-Powered Code Intelligence" /> | |
| <meta | |
| name="twitter:description" | |
| content="Axis is an AI-powered platform for intelligent code translation, reasoning, and synthesis across programming languages." | |
| /> | |
| <meta | |
| name="twitter:image" | |
| content="https://axis.jessejesse.com/og-preview.png" | |
| /> | |
| <!-- PrismJS Theme (Tomorrow Night) --> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" /> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| cyan: { 400: '#22d3ee', 500: '#06b6d4' }, | |
| pink: { 500: '#ec4899' }, | |
| purple: { 600: '#9333ea' }, | |
| neutral: { 900: '#171717', 950: '#0a0a0a' } | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;900&family=JetBrains+Mono:wght@400;500&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #050505; | |
| color: #e5e7eb; | |
| overflow-x: hidden; | |
| } | |
| /* Grid Background */ | |
| .grid-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| background-size: 50px 50px; | |
| background-image: | |
| linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px), | |
| linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| /* Glowing Orbs */ | |
| .glow-orb { | |
| position: fixed; | |
| border-radius: 50%; | |
| filter: blur(100px); | |
| z-index: 0; | |
| opacity: 0.4; | |
| } | |
| .glow-orb-1 { | |
| top: -10%; | |
| left: -10%; | |
| width: 50vw; | |
| height: 50vw; | |
| background: radial-gradient(circle, rgba(34, 211, 238, 0.3), transparent 70%); | |
| animation: float 10s infinite ease-in-out; | |
| } | |
| .glow-orb-2 { | |
| bottom: -10%; | |
| right: -10%; | |
| width: 40vw; | |
| height: 40vw; | |
| background: radial-gradient(circle, rgba(236, 72, 153, 0.2), transparent 70%); | |
| animation: float 15s infinite ease-in-out reverse; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translate(0, 0); } | |
| 50% { transform: translate(30px, -30px); } | |
| } | |
| /* Glass Button */ | |
| .glass-button { | |
| background: rgba(255, 255, 255, 0.03); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| color: #fff; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 0.5rem; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .glass-button:hover:not(:disabled) { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-color: rgba(34, 211, 238, 0.5); | |
| box-shadow: 0 0 20px rgba(34, 211, 238, 0.2); | |
| transform: translateY(-1px); | |
| } | |
| .glass-button:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| /* Apply Button Specifics */ | |
| .apply-button { | |
| background: rgba(34, 211, 238, 0.1); | |
| border-color: rgba(34, 211, 238, 0.3); | |
| } | |
| .apply-button:hover:not(:disabled) { | |
| background: rgba(34, 211, 238, 0.2); | |
| box-shadow: 0 0 30px rgba(34, 211, 238, 0.3); | |
| } | |
| /* Title Glow */ | |
| .title-glow { | |
| text-shadow: 0 0 40px rgba(34, 211, 238, 0.3); | |
| } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #333; | |
| border-radius: 3px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| /* Confetti */ | |
| .confetti { | |
| position: fixed; | |
| background: #fff; | |
| animation: pop 2.5s cubic-bezier(0.23, 1, 0.32, 1) forwards; | |
| pointer-events: none; | |
| z-index: 9999; | |
| will-change: transform, opacity; | |
| } | |
| @keyframes pop { | |
| 0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; } | |
| 100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.2) rotate(1080deg); opacity: 0; } | |
| } | |
| /* Fade Animation for Docs */ | |
| .fade-in-up { | |
| animation: fadeInUp 0.6s ease-out forwards; | |
| } | |
| @keyframes fadeInUp { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Code Block */ | |
| .code-font { | |
| font-family: 'JetBrains Mono', monospace; | |
| } | |
| /* Prism Overrides for transparency */ | |
| pre[class*="language-"] { | |
| margin: 0 ; | |
| padding: 1rem ; | |
| background: transparent ; | |
| text-shadow: none ; | |
| border: none ; | |
| box-shadow: none ; | |
| white-space: pre ; | |
| overflow: hidden ; | |
| } | |
| code[class*="language-"] { | |
| font-family: 'JetBrains Mono', monospace ; | |
| font-size: 0.875rem ; /* text-sm */ | |
| line-height: 1.625rem ; /* leading-relaxed matching shared styles */ | |
| background: transparent ; | |
| white-space: pre ; | |
| display: block ; | |
| } | |
| </style> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "@google/genai": "https://esm.sh/@google/genai@^1.39.0", | |
| "react-dom/client": "https://esm.sh/react-dom@^19.2.4/client", | |
| "react": "https://esm.sh/react@^19.2.4", | |
| "lucide-react": "https://esm.sh/lucide-react@^0.563.0", | |
| "react-dom/": "https://esm.sh/react-dom@^19.2.4/", | |
| "react/": "https://esm.sh/react@^19.2.4/", | |
| "path": "https://esm.sh/path@^0.12.7", | |
| "@vitejs/plugin-react": "https://esm.sh/@vitejs/plugin-react@^5.1.2", | |
| "vite": "https://esm.sh/vite@^7.3.1", | |
| "url": "https://esm.sh/url@^0.11.4" | |
| } | |
| } | |
| </script> | |
| <link rel="stylesheet" href="/index.css"> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script type="module" src="/index.tsx"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js" data-autoloader-path="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/"></script> | |
| </body> | |
| </html> |