Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>FlashCode AI – Free & Fast AI Code Builder</title> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <meta name="description" content="FlashCode AI is a free and blazing fast AI-powered code builder. Generate, refine, and deploy code in seconds." /> | |
| <style> | |
| :root { | |
| --bg: #030712; | |
| --bg-elevated: rgba(15,23,42,0.8); | |
| --bg-elevated-solid: #020617; | |
| --accent: #38bdf8; | |
| --accent-soft: rgba(56,189,248,0.2); | |
| --accent-2: #22c55e; | |
| --accent-3: #a855f7; | |
| --text: #e5e7eb; | |
| --muted: #9ca3af; | |
| --border-subtle: rgba(148,163,184,0.3); | |
| --radius-xl: 24px; | |
| --shadow-soft: 0 24px 60px rgba(15,23,42,0.8); | |
| --transition-fast: 180ms ease-out; | |
| --nav-height: 72px; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html, body { | |
| height: 100%; | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif; | |
| background: radial-gradient(circle at top left, #0f172a 0, #020617 45%, #000 100%); | |
| color: var(--text); | |
| -webkit-font-smoothing: antialiased; | |
| text-rendering: optimizeLegibility; | |
| overflow-x: hidden; | |
| } | |
| img { | |
| max-width: 100%; | |
| display: block; | |
| } | |
| a { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| button { | |
| font-family: inherit; | |
| } | |
| /* Utilities */ | |
| .container { | |
| max-width: 1120px; | |
| margin: 0 auto; | |
| padding: 0 16px; | |
| } | |
| .pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 4px 12px; | |
| border-radius: 999px; | |
| border: 1px solid rgba(148,163,184,0.5); | |
| background: rgba(15,23,42,0.85); | |
| backdrop-filter: blur(18px); | |
| font-size: 12px; | |
| color: var(--muted); | |
| } | |
| .pill-dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 999px; | |
| background: radial-gradient(circle at 30% 30%, #f9fafb, #22c55e); | |
| box-shadow: 0 0 12px rgba(34,197,94,0.9); | |
| } | |
| .badge-free { | |
| padding: 3px 8px; | |
| font-size: 11px; | |
| border-radius: 999px; | |
| background: rgba(34,197,94,0.12); | |
| color: #bbf7d0; | |
| border: 1px solid rgba(34,197,94,0.3); | |
| } | |
| /* Background effects */ | |
| .bg-orbit { | |
| position: fixed; | |
| inset: -200px -200px auto; | |
| pointer-events: none; | |
| z-index: -1; | |
| background: | |
| radial-gradient(circle at 10% 0, rgba(56,189,248,0.25), transparent 55%), | |
| radial-gradient(circle at 80% 0, rgba(168,85,247,0.35), transparent 60%), | |
| radial-gradient(circle at 50% 100%, rgba(34,197,94,0.25), transparent 60%); | |
| opacity: 0.9; | |
| } | |
| .grid-overlay { | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| background-image: | |
| linear-gradient(rgba(15,23,42,0.45) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(15,23,42,0.45) 1px, transparent 1px); | |
| background-size: 60px 60px; | |
| opacity: 0.25; | |
| mask-image: radial-gradient(circle at center, black 0, transparent 70%); | |
| -webkit-mask-image: radial-gradient(circle at center, black 0, transparent 70%); | |
| z-index: -1; | |
| } | |
| /* Navigation */ | |
| .nav-wrapper { | |
| position: sticky; | |
| top: 0; | |
| z-index: 40; | |
| backdrop-filter: blur(18px); | |
| background: linear-gradient(to bottom, rgba(15,23,42,0.92), rgba(15,23,42,0.7), transparent); | |
| border-bottom: 1px solid rgba(15,23,42,0.8); | |
| } | |
| nav { | |
| height: var(--nav-height); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| } | |
| .nav-left { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .logo-mark { | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 12px; | |
| background: conic-gradient(from 210deg, #22c55e, #38bdf8, #a855f7, #22c55e); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 0 32px rgba(56,189,248,0.55); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .logo-mark-inner { | |
| width: 22px; | |
| height: 22px; | |
| border-radius: 9px; | |
| background: radial-gradient(circle at 30% 30%, #0f172a, #020617); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: #e5e7eb; | |
| font-size: 13px; | |
| font-weight: 700; | |
| letter-spacing: 0.05em; | |
| } | |
| .logo-text { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| .logo-title { | |
| font-weight: 600; | |
| font-size: 16px; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| } | |
| .logo-subtitle { | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.12em; | |
| color: var(--muted); | |
| } | |
| .nav-links { | |
| display: flex; | |
| align-items: center; | |
| gap: 18px; | |
| font-size: 14px; | |
| color: var(--muted); | |
| } | |
| .nav-links a { | |
| position: relative; | |
| padding: 4px 0; | |
| transition: color var(--transition-fast); | |
| } | |
| .nav-links a::after { | |
| content: ""; | |
| position: absolute; | |
| left: 0; | |
| bottom: -3px; | |
| width: 0; | |
| height: 2px; | |
| border-radius: 999px; | |
| background: linear-gradient(90deg, #38bdf8, #22c55e); | |
| transition: width var(--transition-fast); | |
| } | |
| .nav-links a:hover { | |
| color: #e5e7eb; | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .nav-cta { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .nav-cta button { | |
| border-radius: 999px; | |
| border: none; | |
| cursor: pointer; | |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast); | |
| } | |
| .btn-ghost { | |
| padding: 8px 14px; | |
| font-size: 13px; | |
| background: transparent; | |
| color: var(--muted); | |
| } | |
| .btn-ghost:hover { | |
| color: #e5e7eb; | |
| transform: translateY(-1px); | |
| } | |
| .btn-primary { | |
| padding: 9px 18px; | |
| background: linear-gradient(135deg, #38bdf8, #22c55e); | |
| color: #0b1120; | |
| font-weight: 600; | |
| font-size: 13px; | |
| box-shadow: 0 12px 30px rgba(56,189,248,0.45); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-1px) translateZ(0); | |
| box-shadow: 0 18px 40px rgba(56,189,248,0.7); | |
| } | |
| .btn-primary span.icon { | |
| width: 18px; | |
| height: 18px; | |
| border-radius: 999px; | |
| background: rgba(15,23,42,0.9); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: #e5e7eb; | |
| font-size: 11px; | |
| } | |
| .burger { | |
| display: none; | |
| width: 34px; | |
| height: 34px; | |
| border-radius: 999px; | |
| border: 1px solid rgba(148,163,184,0.5); | |
| background: rgba(15,23,42,0.85); | |
| cursor: pointer; | |
| align-items: center; | |
| justify-content: center; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .burger span { | |
| display: block; | |
| width: 16px; | |
| height: 2px; | |
| border-radius: 999px; | |
| background: #e5e7eb; | |
| transition: transform 160ms ease, opacity 160ms ease; | |
| } | |
| .burger.open span:nth-child(1) { | |
| transform: translateY(3px) rotate(45deg); | |
| } | |
| .burger.open span:nth-child(2) { | |
| transform: translateY(-3px) rotate(-45deg); | |
| } | |
| /* Mobile nav dropdown */ | |
| .mobile-nav { | |
| display: none; | |
| border-top: 1px solid rgba(30,64,175,0.5); | |
| background: radial-gradient(circle at top, rgba(15,23,42,0.98), rgba(15,23,42,0.96)); | |
| backdrop-filter: blur(14px); | |
| padding: 10px 0 14px; | |
| } | |
| .mobile-nav a { | |
| display: block; | |
| padding: 8px 4px; | |
| font-size: 14px; | |
| color: var(--muted); | |
| } | |
| .mobile-nav a:hover { | |
| color: #e5e7eb; | |
| } | |
| .mobile-nav .btn-primary { | |
| width: 100%; | |
| justify-content: center; | |
| margin-top: 6px; | |
| } | |
| /* Hero */ | |
| main { | |
| padding: 24px 0 64px; | |
| } | |
| .hero { | |
| padding: 12px 0 64px; | |
| display: grid; | |
| grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); | |
| gap: 40px; | |
| align-items: center; | |
| } | |
| .hero-left { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 22px; | |
| } | |
| .hero-heading { | |
| font-size: clamp(32px, 4vw, 44px); | |
| line-height: 1.05; | |
| letter-spacing: -0.03em; | |
| } | |
| .hero-heading span.gradient { | |
| background: linear-gradient(120deg, #38bdf8, #22c55e, #a855f7); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .hero-subtitle { | |
| color: var(--muted); | |
| font-size: 15px; | |
| line-height: 1.6; | |
| max-width: 480px; | |
| } | |
| .hero-subtitle strong { | |
| color: #e5e7eb; | |
| font-weight: 500; | |
| } | |
| .hero-cta-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .btn-secondary { | |
| padding: 9px 16px; | |
| border-radius: 999px; | |
| border: 1px solid rgba(148,163,184,0.6); | |
| background: rgba(15,23,42,0.9); | |
| color: var(--muted); | |
| font-size: 13px; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| cursor: pointer; | |
| transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); | |
| } | |
| .btn-secondary:hover { | |
| color: #e5e7eb; | |
| border-color: rgba(148,163,184,1); | |
| background: rgba(15,23,42,1); | |
| transform: translateY(-1px); | |
| box-shadow: 0 14px 30px rgba(15,23,42,0.65); | |
| } | |
| .btn-secondary .play-icon { | |
| width: 22px; | |
| height: 22px; | |
| border-radius: 999px; | |
| background: radial-gradient(circle at 30% 30%, #0f172a, #020617); | |
| border: 1px solid rgba(148,163,184,0.6); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--muted); | |
| font-size: 11px; | |
| } | |
| .hero-meta { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 20px; | |
| align-items: center; | |
| margin-top: 8px; | |
| } | |
| .hero-meta-count { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 6px; | |
| font-size: 13px; | |
| color: var(--muted); | |
| } | |
| .hero-meta-count span.num { | |
| color: #e5e7eb; | |
| font-size: 18px; | |
| font-weight: 600; | |
| } | |
| .hero-meta-count span.dot { | |
| width: 4px; | |
| height: 4px; | |
| border-radius: 999px; | |
| background: rgba(148,163,184,0.6); | |
| margin: 0 6px; | |
| } | |
| .hero-meta-badges { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| font-size: 11px; | |
| color: var(--muted); | |
| } | |
| .hero-meta-badges span { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| padding: 4px 8px; | |
| border-radius: 999px; | |
| border: 1px solid rgba(148,163,184,0.4); | |
| background: rgba(15,23,42,0.8); | |
| } | |
| /* Hero right: playground */ | |
| .hero-right { | |
| position: relative; | |
| } | |
| .hero-card { | |
| position: relative; | |
| border-radius: var(--radius-xl); | |
| border: 1px solid rgba(148,163,184,0.4); | |
| background: radial-gradient(circle at top left, rgba(15,23,42,0.95), rgba(15,23,42,0.9)); | |
| backdrop-filter: blur(18px); | |
| box-shadow: var(--shadow-soft); | |
| padding: 16px 16px 14px; | |
| overflow: hidden; | |
| } | |
| .hero-card::before { | |
| content: ""; | |
| position: absolute; | |
| inset: -60%; | |
| background: conic-gradient(from 220deg, rgba(56,189,248,0.08), rgba(129,140,248,0.1), rgba(22,163,74,0.08), transparent 70%); | |
| opacity: 0.8; | |
| filter: blur(40px); | |
| pointer-events: none; | |
| mix-blend-mode: screen; | |
| } | |
| .hero-card-inner { | |
| position: relative; | |
| border-radius: 18px; | |
| border: 1px solid rgba(30,64,175,0.7); | |
| background: radial-gradient(circle at 0 0, rgba(15,23,42,0.96), rgba(2,6,23,0.98)); | |
| overflow: hidden; | |
| } | |
| .hero-card-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 8px 10px 8px 12px; | |
| border-bottom: 1px solid rgba(30,64,175,0.7); | |
| background: linear-gradient(to right, rgba(15,23,42,0.95), rgba(15,23,42,0.9)); | |
| } | |
| .window-dots { | |
| display: flex; | |
| gap: 6px; | |
| } | |
| .window-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 999px; | |
| background: #1f2937; | |
| } | |
| .window-dot.red { background: #f97373; } | |
| .window-dot.yellow { background: #fbbf24; } | |
| .window-dot.green { background: #22c55e; } | |
| .hero-card-title { | |
| font-size: 12px; | |
| color: var(--muted); | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .hero-card-title span.status { | |
| padding: 2px 6px; | |
| border-radius: 999px; | |
| border: 1px solid rgba(34,197,94,0.4); | |
| background: rgba(22,163,74,0.25); | |
| color: #bbf7d0; | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| } | |
| .hero-card-tabs { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 7px 10px; | |
| border-bottom: 1px solid rgba(15,23,42,0.9); | |
| background: radial-gradient(circle at 0 0, rgba(15,23,42,0.92), rgba(15,23,42,0.9)); | |
| } | |
| .hero-tab { | |
| font-size: 11px; | |
| padding: 4px 9px; | |
| border-radius: 999px; | |
| border: 1px solid transparent; | |
| color: var(--muted); | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); | |
| } | |
| .hero-tab.active { | |
| background: radial-gradient(circle at 30% 0, rgba(56,189,248,0.15), rgba(56,189,248,0.03)); | |
| border-color: rgba(56,189,248,0.6); | |
| color: #e5e7eb; | |
| transform: translateY(-1px); | |
| } | |
| .hero-tab span.dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 999px; | |
| background: rgba(148,163,184,0.7); | |
| } | |
| .hero-tab.active span.dot { | |
| background: var(--accent); | |
| box-shadow: 0 0 6px rgba(56,189,248,0.9); | |
| } | |
| .hero-card-body { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); | |
| min-height: 240px; | |
| border-top: 1px solid rgba(15,23,42,0.9); | |
| } | |
| .hero-prompt { | |
| padding: 10px 12px; | |
| border-right: 1px solid rgba(15,23,42,0.9); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .prompt-label { | |
| font-size: 11px; | |
| color: var(--muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.15em; | |
| } | |
| .prompt-input-wrap { | |
| position: relative; | |
| border-radius: 12px; | |
| border: 1px solid rgba(51,65,85,0.9); | |
| background: radial-gradient(circle at 0 0, rgba(15,23,42,0.98), rgba(15,23,42,0.98)); | |
| overflow: hidden; | |
| } | |
| .prompt-textarea { | |
| width: 100%; | |
| border: none; | |
| outline: none; | |
| background: transparent; | |
| color: var(--text); | |
| font-size: 12px; | |
| line-height: 1.5; | |
| padding: 9px 10px 32px; | |
| resize: none; | |
| min-height: 82px; | |
| } | |
| .prompt-footer { | |
| position: absolute; | |
| inset-inline: 7px; | |
| bottom: 6px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-size: 11px; | |
| color: var(--muted); | |
| } | |
| .prompt-shortcuts { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .kbd { | |
| padding: 1px 5px; | |
| border-radius: 6px; | |
| border: 1px solid rgba(51,65,85,0.9); | |
| background: rgba(15,23,42,0.9); | |
| font-size: 10px; | |
| } | |
| .hero-run-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 10px; | |
| margin-top: 6px; | |
| } | |
| .hero-run-row small { | |
| font-size: 11px; | |
| color: var(--muted); | |
| } | |
| .badge-speed { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 3px 8px; | |
| border-radius: 999px; | |
| border: 1px solid rgba(56,189,248,0.6); | |
| background: rgba(8,47,73,0.6); | |
| color: #e0f2fe; | |
| font-size: 10px; | |
| } | |
| .badge-speed span.spark { | |
| width: 14px; | |
| height: 14px; | |
| border-radius: 999px; | |
| background: radial-gradient(circle at 30% 30%, #e0f2fe, #0369a1); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 9px; | |
| } | |
| .run-button { | |
| margin-left: auto; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 7px; | |
| padding: 6px 12px; | |
| border-radius: 999px; | |
| border: none; | |
| cursor: pointer; | |
| background: linear-gradient(120deg, #38bdf8, #22c55e); | |
| color: #0b1120; | |
| font-size: 12px; | |
| font-weight: 600; | |
| box-shadow: 0 10px 24px rgba(56,189,248,0.6); | |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast); | |
| } | |
| .run-button:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 16px 32px rgba(56,189,248,0.75); | |
| filter: brightness(1.04); | |
| } | |
| .run-button span.icon { | |
| width: 18px; | |
| height: 18px; | |
| border-radius: 999px; | |
| background: rgba(15,23,42,0.92); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 11px; | |
| color: #e5e7eb; | |
| } | |
| .hero-output { | |
| padding: 10px 10px 10px 10px; | |
| display: flex; | |
| flex-direction: column; | |
| border-left: 1px solid rgba(15,23,42,0.9); | |
| background: radial-gradient(circle at 100% 0, rgba(8,47,73,0.5), rgba(15,23,42,0.98)); | |
| } | |
| .output-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| font-size: 11px; | |
| color: var(--muted); | |
| margin-bottom: 4px; | |
| } | |
| .output-header span.status-badge { | |
| padding: 3px 8px; | |
| border-radius: 999px; | |
| background: rgba(15,23,42,0.9); | |
| border: 1px solid rgba(148,163,184,0.5); | |
| font-size: 10px; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .output-header span.status-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 999px; | |
| background: #22c55e; | |
| box-shadow: 0 0 8px rgba(34,197,94,0.9); | |
| } | |
| .output-console { | |
| flex: 1; | |
| border-radius: 12px; | |
| border: 1px solid rgba(15,23,42,0.9); | |
| background: radial-gradient(circle at 0 0, #020617, #020617); | |
| padding: 8px; | |
| font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; | |
| font-size: 11px; | |
| color: #e5e7eb; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .output-console pre { | |
| margin: 0; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| .caret { | |
| display: inline-block; | |
| width: 8px; | |
| height: 14px; | |
| background: linear-gradient(180deg, #e5e7eb, #bae6fd); | |
| margin-left: 2px; | |
| border-radius: 2px; | |
| animation: pulseCaret 1s infinite alternate; | |
| } | |
| @keyframes pulseCaret { | |
| from { opacity: 0.2; transform: translateY(0); } | |
| to { opacity: 1; transform: translateY(-0.5px); } | |
| } | |
| .output-stats { | |
| margin-top: 6px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-size: 10px; | |
| color: var(--muted); | |
| } | |
| .output-stats span.time { | |
| color: #a5b4fc; | |
| } | |
| .output-stats span.tokens { | |
| color: #22c55e; | |
| } | |
| .output-stats span.speed { | |
| color: #38bdf8; | |
| } | |
| /* Ad blocks */ | |
| .ad-tag { | |
| font-size: 9px; | |
| letter-spacing: 0.16em; | |
| text-transform: uppercase; | |
| color: rgba(148,163,184,0.8); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .ad-tag::before { | |
| content: "Ad"; | |
| padding: 2px 6px; | |
| border-radius: 999px; | |
| border: 1px solid rgba(148,163,184,0.7); | |
| color: #e5e7eb; | |
| font-size: 8px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.16em; | |
| } | |
| .hero-ad-banner { | |
| margin-top: 12px; | |
| border-radius: 16px; | |
| border: 1px dashed rgba(148,163,184,0.5); | |
| background: radial-gradient(circle at 0 0, rgba(30,64,175,0.7), rgba(15,23,42,0.95)); | |
| padding: 8px 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 10px; | |
| } | |
| .hero-ad-banner-main { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .hero-ad-icon { | |
| width: 26px; | |
| height: 26px; | |
| border-radius: 999px; | |
| background: radial-gradient(circle at 30% 30%, #1d4ed8, #0f172a); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: #e5e7eb; | |
| font-size: 14px; | |
| box-shadow: 0 0 18px rgba(59,130,246,0.7); | |
| } | |
| .hero-ad-text { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1px; | |
| } | |
| .hero-ad-text strong { | |
| font-size: 12px; | |
| } | |
| .hero-ad-text span { | |
| font-size: 11px; | |
| color: #cbd5f5; | |
| } | |
| .hero-ad-cta { | |
| padding: 5px 10px; | |
| border-radius: 999px; | |
| border: 1px solid rgba(191,219,254,0.8); | |
| background: rgba(15,23,42,0.2); | |
| color: #dbeafe; | |
| font-size: 10px; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 5px; | |
| cursor: pointer; | |
| white-space: nowrap; | |
| transition: background var(--transition-fast), transform var(--transition-fast); | |
| } | |
| .hero-ad-cta:hover { | |
| background: rgba(30,64,175,0.7); | |
| transform: translateY(-1px); | |
| } | |
| .mid-page-ad { | |
| margin: 40px 0 10px; | |
| border-radius: 20px; | |
| border: 1px dashed rgba(148,163,184,0.45); | |
| background: radial-gradient(circle at 100% 0, rgba(56,189,248,0.24), rgba(15,23,42,0.98)); | |
| padding: 14px 16px; | |
| display: grid; | |
| grid-template-columns: minmax(0, 3.2fr) minmax(0, 2.5fr); | |
| gap: 16px; | |
| align-items: center; | |
| } | |
| .mid-ad-title { | |
| font-size: 14px; | |
| font-weight: 500; | |
| margin-bottom: 4px; | |
| } | |
| .mid-ad-copy { | |
| font-size: 12px; | |
| color: #e5e7eb; | |
| max-width: 420px; | |
| } | |
| .mid-ad-copy span.highlight { | |
| color: #a5b4fc; | |
| } | |
| .mid-ad-logos { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| margin-top: 8px; | |
| } | |
| .mid-ad-logo-pill { | |
| padding: 4px 9px; | |
| border-radius: 999px; | |
| border: 1px solid rgba(148,163,184,0.6); | |
| font-size: 10px; | |
| color: #e5e7eb; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| background: rgba(15,23,42,0.9); | |
| } | |
| .mid-ad-logo-pill span.dot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 999px; | |
| background: radial-gradient(circle at 30% 30%, #e5e7eb, #60a5fa); | |
| } | |
| .mid-ad-right { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| align-items: flex-start; | |
| } | |
| .mid-ad-save { | |
| font-size: 11px; | |
| color: #bbf7d0; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .mid-ad-save span.badge { | |
| padding: 2px 7px; | |
| border-radius: 999px; | |
| border: 1px solid rgba(74,222,128,0.7); | |
| background: rgba(22,163,74,0.25); | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.12em; | |
| } | |
| .mid-ad-button { | |
| padding: 6px 12px; | |
| border-radius: 999px; | |
| border: 1px solid rgba(56,189,248,0.8); | |
| background: linear-gradient(135deg, rgba(30,64,175,0.9), rgba(15,23,42,0.95)); | |
| color: #e5e7eb; | |
| font-size: 11px; | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| box-shadow: 0 12px 26px rgba(15,23,42,0.9); | |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); | |
| } | |
| .mid-ad-button:hover { | |
| transform: translateY(-1px); | |
| box-shadow: 0 18px 32px rgba(15,23,42,0.95); | |
| background: linear-gradient(135deg, rgba(37,99,235,0.95), rgba(15,23,42,1)); | |
| } | |
| .sidebar-ad { | |
| margin-top: 10px; | |
| border-radius: 14px; | |
| border: 1px dashed rgba(148,163,184,0.5); | |
| padding: 8px 10px; | |
| background: radial-gradient(circle at 100% 0, rgba(129,140,248,0.22), rgba(15,23,42,0.98)); | |
| font-size: 10px; | |
| color: #e5e7eb; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 5px; | |
| } | |
| .sidebar-ad-title { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .sidebar-ad-title strong { | |
| font-size: 11px; | |
| } | |
| .sidebar-ad-body span { | |
| display: block; | |
| color: #c7d2fe; | |
| } | |
| .sidebar-ad-cta { | |
| margin-top: 2px; | |
| padding: 3px 7px; | |
| border-radius: 999px; | |
| border: 1px solid rgba(191,219,254,0.8); | |
| background: rgba(15,23,42,0.2); | |
| color: #e5e7eb; | |
| font-size: 10px; | |
| width: max-content; | |
| cursor: pointer; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| transition: background var(--transition-fast), transform var(--transition-fast); | |
| } | |
| .sidebar-ad-cta:hover { | |
| background: rgba(30,64,175,0.9); | |
| transform: translateY(-1px); | |
| } | |
| /* Features */ | |
| .section { | |
| padding: 24px 0; | |
| } | |
| .section-header { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| margin-bottom: 20px; | |
| } | |
| .section-kicker { | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.18em; | |
| color: var(--muted); | |
| } | |
| .section-title { | |
| font-size: 20px; | |
| letter-spacing: -0.02em; | |
| } | |
| .section-subtitle { | |
| font-size: 14px; | |
| color: var(--muted); | |
| max-width: 520px; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 18px; | |
| } | |
| .feature-card { | |
| position: relative; | |
| border-radius: 18px; | |
| border: 1px solid rgba(31,41,55,0.9); | |
| background: radial-gradient(circle at 0 0, rgba(15,23,42,0.96), rgba(15,23,42,0.97)); | |
| padding: 14px 14px 12px; | |
| box-shadow: 0 18px 40px rgba(15,23,42,0.9); | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-3px); | |
| border-color: rgba(56,189,248,0.6); | |
| box-shadow: 0 22px 46px rgba(15,23,42,0.98); | |
| background: radial-gradient(circle at 0 0, rgba(8,47,73,0.8), rgba(15,23,42,0.98)); | |
| } | |
| .feature-icon { | |
| width: 26px; | |
| height: 26px; | |
| border-radius: 999px; | |
| background: radial-gradient(circle at 30% 30%, #e5e7eb, #0f172a); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 14px; | |
| color: #0f172a; | |
| margin-bottom: 4px; | |
| box-shadow: 0 0 18px rgba(148,163,184,0.6); | |
| } | |
| .feature-title { | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| .feature-desc { | |
| font-size: 12px; | |
| color: var(--muted); | |
| } | |
| .feature-meta { | |
| margin-top: auto; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| font-size: 11px; | |
| color: var(--muted); | |
| } | |
| .feature-meta span.label { | |
| padding: 2px 7px; | |
| border-radius: 999px; | |
| border: 1px solid rgba(148,163,184,0.7); | |
| background: rgba(15,23,42,0.9); | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.12em; | |
| } | |
| /* Steps / How it works */ | |
| .steps-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0,1fr)); | |
| gap: 18px; | |
| } | |
| .step-card { | |
| border-radius: 16px; | |
| border: 1px solid rgba(31,41,55,0.9); | |
| background: radial-gradient(circle at 100% 0, rgba(56,189,248,0.2), rgba(15,23,42,0.98)); | |
| padding: 14px 14px 12px; | |
| box-shadow: 0 20px 42px rgba(15,23,42,0.95); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); | |
| } | |
| .step-card:hover { | |
| transform: translateY(-3px); | |
| border-color: rgba(129,140,248,0.8); | |
| box-shadow: 0 24px 52px rgba(15,23,42,1); | |
| } | |
| .step-index { | |
| width: 22px; | |
| height: 22px; | |
| border-radius: 999px; | |
| background: rgba(15,23,42,0.9); | |
| border: 1px solid rgba(148,163,184,0.8); | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 11px; | |
| color: #e5e7eb; | |
| margin-bottom: 2px; | |
| } | |
| .step-title { | |
| font-size: 13px; | |
| font-weight: 500; | |
| } | |
| .step-desc { | |
| font-size: 12px; | |
| color: var(--muted); | |
| } | |
| .step-note { | |
| margin-top: auto; | |
| font-size: 11px; | |
| color: #a5b4fc; | |
| } | |
| /* Bottom CTA and footer */ | |
| .cta-strip { | |
| margin-top: 30px; | |
| border-radius: 20px; | |
| border: 1px solid rgba(56,189,248,0.65); | |
| background: radial-gradient(circle at 0 0, rgba(56,189,248,0.3), rgba(15,23,42,0.98)); | |
| padding: 14px 14px 14px; | |
| display: grid; | |
| grid-template-columns: minmax(0, 3fr) minmax(0, 2.2fr); | |
| gap: 16px; | |
| align-items: center; | |
| box-shadow: 0 22px 48px rgba(8,47,73,0.9); | |
| } | |
| .cta-primary-text { | |
| font-size: 16px; | |
| font-weight: 600; | |
| letter-spacing: -0.02em; | |
| margin-bottom: 6px; | |
| } | |
| .cta-secondary-text { | |
| font-size: 13px; | |
| color: #e5e7eb; | |
| } | |
| .cta-secondary-text span { | |
| color: #bbf7d0; | |
| } | |
| .cta-actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 10px; | |
| justify-content: flex-end; | |
| } | |
| .cta-note { | |
| font-size: 10px; | |
| color: var(--muted); | |
| max-width: 220px; | |
| text-align: right; | |
| } | |
| footer { | |
| padding: 18px 0 28px; | |
| border-top: 1px solid rgba(15,23,42,0.95); | |
| margin-top: 40px; | |
| font-size: 11px; | |
| color: var(--muted); | |
| } | |
| .footer-inner { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| } | |
| .footer-links { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 16px; | |
| } | |
| .footer-links a { | |
| color: var(--muted); | |
| font-size: 11px; | |
| } | |
| .footer-links a:hover { | |
| color: #e5e7eb; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 900px) { | |
| .hero { | |
| grid-template-columns: minmax(0,1fr); | |
| padding-bottom: 32px; | |
| } | |
| .hero-right { | |
| order: -1; | |
| } | |
| .hero-card-body { | |
| grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); | |
| } | |
| .features-grid { | |
| grid-template-columns: repeat(2, minmax(0,1fr)); | |
| } | |
| .steps-grid { | |
| grid-template-columns: repeat(2, minmax(0,1fr)); | |
| } | |
| .cta-strip { | |
| grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); | |
| } | |
| .mid-page-ad { | |
| grid-template-columns: minmax(0,1.4fr) minmax(0,1.1fr); | |
| } | |
| } | |
| @media (max-width: 720px) { | |
| .nav-links { | |
| display: none; | |
| } | |
| .nav-cta { | |
| display: none; | |
| } | |
| .burger { | |
| display: inline-flex; | |
| } | |
| .mobile-nav.open { | |
| display: block; | |
| } | |
| .hero-card-body { | |
| grid-template-columns: minmax(0,1fr); | |
| min-height: 0; | |
| } | |
| .hero-output { | |
| border-left: none; | |
| border-top: 1px solid rgba(15,23,42,0.9); | |
| } | |
| .hero-prompt { | |
| border-right: none; | |
| } | |
| .hero-ad-banner { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .mid-page-ad { | |
| grid-template-columns: minmax(0,1fr); | |
| } | |
| .steps-grid, .features-grid { | |
| grid-template-columns: minmax(0,1fr); | |
| } | |
| .cta-strip { | |
| grid-template-columns: minmax(0,1fr); | |
| text-align: left; | |
| } | |
| .cta-actions { | |
| justify-content: flex-start; | |
| } | |
| .cta-note { | |
| text-align: left; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .hero-heading { | |
| font-size: 30px; | |
| } | |
| .hero-card { | |
| padding: 12px; | |
| } | |
| .feature-card, .step-card { | |
| padding: 12px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="bg-orbit"></div> | |
| <div class="grid-overlay"></div> | |
| <header class="nav-wrapper"> | |
| <div class="container"> | |
| <nav> | |
| <div class="nav-left"> | |
| <div class="logo-mark"> | |
| <div class="logo-mark-inner">FC</div> | |
| </div> | |
| <div class="logo-text"> | |
| <div class="logo-title">FlashCode AI</div> | |
| <div class="logo-subtitle">Free & Fast Code Builder</div> | |
| </div> | |
| </div> | |
| <div class="nav-links"> | |
| <a href="#features">Features</a> | |
| <a href="#how-it-works">How it works</a> | |
| <a href="#pricing">Pricing</a> | |
| <a href="#faq">FAQ</a> | |
| </div> | |
| <div class="nav-cta"> | |
| <button class="btn-ghost" type="button">Log in</button> | |
| <button class="btn-primary" type="button" id="nav-start"> | |
| Start building | |
| <span class="icon">⚡</span> | |
| </button> | |
| </div> | |
| <button class="burger" type="button" id="burger"> | |
| <span></span> | |
| <span></span> | |
| </button> | |
| </nav> | |
| <div class="mobile-nav" id="mobile-nav"> | |
| <div class="container" style="padding-inline:0;"> | |
| <a href="#features">Features</a> | |
| <a href="#how-it-works">How it works</a> | |
| <a href="#pricing">Pricing</a> | |
| <a href="#faq">FAQ</a> | |
| <button class="btn-primary" type="button" id="mobile-start"> | |
| Start building free | |
| <span class="icon">⚡</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main> | |
| <section class="container hero" id="top"> | |
| <div class="hero-left"> | |
| <div class="pill"> | |
| <div class="pill-dot"></div> | |
| <span>Code that ships in seconds · <strong style="color:#e5e7eb;">No credit card</strong></span> | |
| <span class="badge-free">Forever free</span> | |
| </div> | |
| <h1 class="hero-heading"> | |
| The free, <span class="gradient">blazing fast</span> AI code builder. | |
| </h1> | |
| <p class="hero-subtitle"> | |
| FlashCode AI turns plain language into production‑ready code in under a second. | |
| Generate components, fix bugs, and scaffold apps with a | |
| <strong>single prompt</strong>. | |
| </p> | |
| <div class="hero-cta-row"> | |
| <button class="btn-primary" type="button" id="hero-start"> | |
| Start building in 5 seconds | |
| <span class="icon">⚡</span> | |
| </button> | |
| <button class="btn-secondary" type="button"> | |
| <span class="play-icon">▶</span> | |
| Watch 40‑second demo | |
| </button> | |
| </div> | |
| <div class="hero-meta"> | |
| <div class="hero-meta-count"> | |
| <span class="num" id="session-count">32,481</span> | |
| <span class="dot"></span> | |
| <span>code sessions this week</span> | |
| </div> | |
| <div class="hero-meta-badges"> | |
| <span><span style="width:8px;height:8px;border-radius:999px;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,0.9);"></span> <strong style="color:#e5e7eb;">Free</strong> forever tier</span> | |
| <span>Avg. response <strong style="color:#e5e7eb;">0.42s</strong></span> | |
| </div> | |
| </div> | |
| <div class="hero-ad-banner"> | |
| <div class="hero-ad-banner-main"> | |
| <div class="hero-ad-icon">💎</div> | |
| <div class="hero-ad-text"> | |
| <strong>Upgrade your stack with NovaCloud</strong> | |
| <span>Deploy every FlashCode project to edge hosting in one click. 100GB bandwidth free.</span> | |
| </div> | |
| </div> | |
| <button class="hero-ad-cta" type="button"> | |
| <span class="ad-tag">Sponsored</span> | |
| Try NovaCloud | |
| <span style="font-size:11px;">↗</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="hero-right"> | |
| <div class="hero-card"> | |
| <div class="hero-card-inner"> | |
| <div class="hero-card-header"> | |
| <div class="window-dots"> | |
| <span class="window-dot red"></span> | |
| <span class="window-dot yellow"></span> | |
| <span class="window-dot green"></span> | |
| </div> | |
| <div class="hero-card-title"> | |
| flashcode-session.js | |
| <span class="status">LIVE</span> | |
| </div> | |
| </div> | |
| <div class="hero-card-tabs"> | |
| <button class="hero-tab active" type="button" data-tab="frontend"> | |
| <span class="dot"></span> Frontend | |
| </button> | |
| <button class="hero-tab" type="button" data-tab="backend"> | |
| <span class="dot"></span> Backend | |
| </button> | |
| <button class="hero-tab" type="button" data-tab="fix"> | |
| <span class="dot"></span> Bug Fix | |
| </button> | |
| </div> | |
| <div class="hero-card-body"> | |
| <div class="hero-prompt"> | |
| <div class="prompt-label">Prompt</div> | |
| <div class="prompt-input-wrap"> | |
| <textarea class="prompt-textarea" id="prompt-input" spellcheck="false">Create a responsive Tailwind navbar with a logo on the left and a "Deploy" button on the right.</textarea> | |
| <div class="prompt-footer"> | |
| <div class="prompt-shortcuts"> | |
| <span class="kbd">⌘</span><span>+ Enter to run</span> | |
| </div> | |
| <span style="font-variant-numeric: tabular-nums;">Tokens: <span id="token-count">37</span></span> | |
| </div> | |
| </div> | |
| <div class="hero-run-row"> | |
| <span class="badge-speed"> | |
| <span class="spark">⚡</span> | |
| Under 500ms average | |
| </span> | |
| <small>Ultra‑low latency in 190+ regions.</small> | |
| <button class="run-button" type="button" id="run-button"> | |
| Build code | |
| <span class="icon">↵</span> | |
| </button> | |
| </div> | |
| <div class="sidebar-ad"> | |
| <div class="sidebar-ad-title"> | |
| <strong>Boost your PR reviews</strong> | |
| <span class="ad-tag">Sponsored</span> | |
| </div> | |
| <div class="sidebar-ad-body"> | |
| <span>Ship clean code faster with MergeLens – AI summaries for every pull request.</span> | |
| </div> | |
| <button class="sidebar-ad-cta" type="button"> | |
| Add to GitHub | |
| <span style="font-size:11px;">↗</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="hero-output"> | |
| <div class="output-header"> | |
| <span>Output preview</span> | |
| <span class="status-badge" id="output-status"> | |
| <span class="status-dot"></span> | |
| Ready in ~0.4s | |
| </span> | |
| </div> | |
| <div class="output-console" id="output-console"> | |
| <pre id="output-text"> | |
| // Your Tailwind navbar is ready 🔧 | |
| <nav class="w-full border-b bg-slate-950/70 backdrop-blur"> | |
| <div class="mx-auto flex max-w-6xl items-center justify-between px-4 py-3"> | |
| <a href="/" class="flex items-center gap-2"> | |
| <span class="flex h-7 w-7 items-center justify-center rounded-xl bg-gradient-to-tr from-sky-500 to-emerald-400 text-xs font-semibold text-slate-950 shadow-lg"> | |
| FC | |
| </span> | |
| <span class="text-sm font-semibold tracking-wide text-slate-100">FlashCode</span> | |
| </a> | |
| <button class="rounded-full bg-sky-500 px-4 py-1.5 text-xs font-semibold text-slate-950 shadow-md transition hover:bg-sky-400"> | |
| Deploy | |
| </button> | |
| </div> | |
| </nav><span class="caret"></span></pre> | |
| </div> | |
| <div class="output-stats"> | |
| <span class="time" id="time-stat">0.41s</span> | |
| <span class="tokens" id="tokens-stat">104 tokens</span> | |
| <span class="speed" id="speed-stat">238 LOC / sec</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="section container" id="features"> | |
| <div class="section-header"> | |
| <div class="section-kicker">Why FlashCode</div> | |
| <h2 class="section-title">Faster than typing it yourself, and still free.</h2> | |
| <p class="section-subtitle"> | |
| FlashCode AI is designed for developers who care about speed. We strip away the noise, | |
| keep your workflow local‑first, and never lock you in. | |
| </p> | |
| </div> | |
| <div class="features-grid"> | |
| <article class="feature-card"> | |
| <div class="feature-icon">⚡</div> | |
| <h3 class="feature-title">Real‑time code streaming</h3> | |
| <p class="feature-desc"> | |
| Watch code appear as you type. Edits and suggestions stream token‑by‑token so you never wait on a spinner again. | |
| </p> | |
| <div class="feature-meta"> | |
| <span class="label">Latency</span> | |
| <span>Median <strong style="color:#e5e7eb;">< 450ms</strong></span> | |
| </div> | |
| </article> | |
| <article class="feature-card"> | |
| <div class="feature-icon">🧠</div> | |
| <h3 class="feature-title">Understands your stack</h3> | |
| <p class="feature-desc"> | |
| Tailored prompts for React, Next.js, Node, Rust, Python and more. FlashCode reads your file and infers context automatically. | |
| </p> | |
| <div class="feature-meta"> | |
| <span class="label">Languages</span> | |
| <span>20+ runtimes supported</span> | |
| </div> | |
| </article> | |
| <article class="feature-card"> | |
| <div class="feature-icon">🛡️</div> | |
| <h3 class="feature-title">Private by default</h3> | |
| <p class="feature-desc"> | |
| We don’t train on your code. Your sessions stay encrypted, and logs auto‑expire on free tier within 7 days. | |
| </p> | |
| <div class="feature-meta"> | |
| <span class="label">Security</span> | |
| <span>SOC2‑ready infra</span> | |
| </div> | |
| </article> | |
| </div> | |
| <div class="mid-page-ad"> | |
| <div> | |
| <div class="ad-tag">Sponsored</div> | |
| <h3 class="mid-ad-title">Scale your AI features with VectorForge.</h3> | |
| <p class="mid-ad-copy"> | |
| Production‑grade vector search for every FlashCode project. Ship <span class="highlight">semantic search</span>, | |
| recommendations and RAG in a single afternoon. | |
| </p> | |
| <div class="mid-ad-logos"> | |
| <span class="mid-ad-logo-pill"> | |
| <span class="dot"></span> | |
| Backed by ComputeFoundry | |
| </span> | |
| <span class="mid-ad-logo-pill"> | |
| <span class="dot" style="background:radial-gradient(circle at 30% 30%,#e5e7eb,#22c55e);"></span> | |
| $200 free credits | |
| </span> | |
| </div> | |
| </div> | |
| <div class="mid-ad-right"> | |
| <div class="mid-ad-save"> | |
| <span class="badge">For FlashCode users</span> | |
| Save up to 60% vs DIY infra. | |
| </div> | |
| <button class="mid-ad-button" type="button"> | |
| Claim your credits | |
| <span style="font-size:11px;">↗</span> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="section container" id="how-it-works"> | |
| <div class="section-header"> | |
| <div class="section-kicker">Workflow</div> | |
| <h2 class="section-title">From idea to running code in three steps.</h2> | |
| <p class="section-subtitle"> | |
| No need to change editors, IDEs, or hosting. FlashCode plugs into your existing setup | |
| and stays out of your way. | |
| </p> | |
| </div> | |
| <div class="steps-grid"> | |
| <article class="step-card"> | |
| <span class="step-index">1</span> | |
| <h3 class="step-title">Describe what you want</h3> | |
| <p class="step-desc"> | |
| Type your feature in plain English – “auth‑ready Next.js layout with a sidebar and dark mode toggle”. | |
| </p> | |
| <p class="step-note">FlashCode auto‑detects frameworks & style systems from your repo.</p> | |
| </article> | |
| <article class="step-card"> | |
| <span class="step-index">2</span> | |
| <h3 class="step-title">Generate and tweak</h3> | |
| <p class="step-desc"> | |
| We stream code into a diff view, highlight impact, and let you refine with follow‑up prompts. | |
| </p> | |
| <p class="step-note">Inline comments explain key changes in human language.</p> | |
| </article> | |
| <article class="step-card"> | |
| <span class="step-index">3</span> | |
| <h3 class="step-title">Commit with confidence</h3> | |
| <p class="step-desc"> | |
| Apply changes to your local branch or export to a gist. No lock‑in, no magic config files. | |
| </p> | |
| <p class="step-note">Stay in control – you approve every line that ships.</p> | |
| </article> | |
| </div> | |
| </section> | |
| <section class="section container" id="pricing"> | |
| <div class="section-header"> | |
| <div class="section-kicker">Pricing</div> | |
| <h2 class="section-title">Free for individuals. Simple for teams.</h2> | |
| <p class="section-subtitle"> | |
| Start with the free plan and upgrade only if you need higher limits or team‑wide usage. | |
| </p> | |
| </div> | |
| <div class="features-grid"> | |
| <article class="feature-card"> | |
| <div class="feature-icon">💚</div> | |
| <h3 class="feature-title">Hacker · Free</h3> | |
| <p class="feature-desc"> | |
| Ideal for solo devs and side projects. Generous daily limit, full access to the web app, and all major languages. | |
| </p> | |
| <div class="feature-meta"> | |
| <span class="label">Price</span> | |
| <span><strong style="color:#bbf7d0;">$0</strong> · no card</span> | |
| </div> | |
| </article> | |
| <article class="feature-card"> | |
| <div class="feature-icon">🤝</div> | |
| <h3 class="feature-title">Team · Pro</h3> | |
| <p class="feature-desc"> | |
| Shared history, higher limits, SSO, usage analytics and workspace prompts fine‑tuned to your codebase. | |
| </p> | |
| <div class="feature-meta"> | |
| <span class="label">Price</span> | |
| <span>From <strong style="color:#e5e7eb;">$19</strong> / seat</span> | |
| </div> | |
| </article> | |
| <article class="feature-card"> | |
| <div class="feature-icon">🏢</div> | |
| <h3 class="feature-title">Enterprise</h3> | |
| <p class="feature-desc"> | |
| Dedicated regions, on‑prem options, custom SLAs, and compliance support for regulated industries. | |
| </p> | |
| <div class="feature-meta"> | |
| <span class="label">Contact</span> | |
| <span>Custom quote</span> | |
| </div> | |
| </article> | |
| </div> | |
| </section> | |
| <section class="section container" id="faq"> | |
| <div class="section-header"> | |
| <div class="section-kicker">FAQ</div> | |
| <h2 class="section-title">Answers before you sign up.</h2> | |
| <p class="section-subtitle"> | |
| If it’s not covered here, reach out. We respond to most developer questions in under a day. | |
| </p> | |
| </div> | |
| <div class="steps-grid"> | |
| <article class="step-card"> | |
| <span class="step-index">Q</span> | |
| <h3 class="step-title">Is FlashCode really free?</h3> | |
| <p class="step-desc"> | |
| Yes. The Hacker plan is free forever with fair daily limits. We only ask for feedback occasionally to keep improving. | |
| </p> | |
| <p class="step-note">Upgrade anytime for higher limits or team features.</p> | |
| </article> | |
| <article class="step-card"> | |
| <span class="step-index">Q</span> | |
| <h3 class="step-title">Do you train on my private code?</h3> | |
| <p class="step-desc"> | |
| No. Your prompts and code are encrypted in transit and at rest, and are never used to train shared models. | |
| </p> | |
| <p class="step-note">Enterprise plans support fully isolated deployments.</p> | |
| </article> | |
| <article class="step-card"> | |
| <span class="step-index">Q</span> | |
| <h3 class="step-title">Which editors do you support?</h3> | |
| <p class="step-desc"> | |
| Our web builder works in any browser. Native plugins for VS Code, JetBrains, and Neovim are in open beta. | |
| </p> | |
| <p class="step-note">Join the beta waitlist after sign‑up.</p> | |
| </article> | |
| </div> | |
| </section> | |
| <section class="container"> | |
| <div class="cta-strip"> | |
| <div> | |
| <div class="cta-primary-text">Build your next feature in under a minute.</div> | |
| <div class="cta-secondary-text"> | |
| FlashCode AI is <span>free to start</span>, fast enough for production, and private by default. | |
| </div> | |
| </div> | |
| <div class="cta-actions"> | |
| <button class="btn-primary" type="button" id="bottom-start"> | |
| Launch FlashCode | |
| <span class="icon">⚡</span> | |
| </button> | |
| <button class="btn-secondary" type="button"> | |
| View changelog | |
| </button> | |
| <p class="cta-note"> | |
| No credit card. Free plan includes 200 code generations per month with full access to new features. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer> | |
| <div class="container footer-inner"> | |
| <span>© <span id="year"></span> FlashCode AI. Built for developers who hate waiting.</span> | |
| <div class="footer-links"> | |
| <a href="#top">Back to top</a> | |
| <a href="#">Status</a> | |
| <a href="#">Security</a> | |
| <a href="#">Terms</a> | |
| <a href="#">Privacy</a> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| const burger = document.getElementById('burger'); | |
| const mobileNav = document.getElementById('mobile-nav'); | |
| burger.addEventListener('click', () => { | |
| burger.classList.toggle('open'); | |
| mobileNav.classList.toggle('open'); | |
| }); | |
| document.querySelectorAll('#nav-start,#mobile-start,#hero-start,#bottom-start').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const promptInput = document.getElementById('prompt-input'); | |
| if (promptInput) { | |
| promptInput.focus(); | |
| promptInput.scrollIntoView({ behavior: 'smooth', block: 'center' }); | |
| } else { | |
| window.location.hash = '#top'; | |
| } | |
| }); | |
| }); | |
| const yearEl = document.getElementById('year'); | |
| if (yearEl) yearEl.textContent = new Date().getFullYear(); | |
| const sessionCountEl = document.getElementById('session-count'); | |
| if (sessionCountEl) { | |
| let base = 32481; | |
| setInterval(() => { | |
| const jitter = Math.floor(Math.random() * 3); | |
| base += jitter; | |
| sessionCountEl.textContent = base.toLocaleString('en-US'); | |
| }, 1800); | |
| } | |
| const promptInput = document.getElementById('prompt-input'); | |
| const tokenCountEl = document.getElementById('token-count'); | |
| if (promptInput && tokenCountEl) { | |
| const updateTokens = () => { | |
| const text = promptInput.value.trim(); | |
| const tokens = text ? text.split(/\s+/).length : 0; | |
| tokenCountEl.textContent = tokens; | |
| }; | |
| promptInput.addEventListener('input', updateTokens); | |
| updateTokens(); | |
| } | |
| const runButton = document.getElementById('run-button'); | |
| const outputConsole = document.getElementById('output-console'); | |
| const outputText = document.getElementById('output-text'); | |
| const outputStatus = document.getElementById('output-status'); | |
| const timeStat = document.getElementById('time-stat'); | |
| const tokensStat = document.getElementById('tokens-stat'); | |
| const speedStat = document.getElementById('speed-stat'); | |
| const snippets = { | |
| frontend: { | |
| prompt: 'Create a responsive Tailwind navbar with a logo on the left and a "Deploy" button on the right.', | |
| code: `// Generated React + Tailwind header component 🚀 | |
| export function AppHeader() { | |
| return ( | |
| <header className="border-b border-slate-800 bg-slate-950/70 backdrop-blur"> | |
| <div className="mx-auto flex max-w-5xl items-center justify-between px-4 py-3"> | |
| <a href="/" className="flex items-center gap-2"> | |
| <span className="flex h-8 w-8 items-center justify-center rounded-2xl bg-gradient-to-tr from-sky-500 via-emerald-400 to-violet-500 text-xs font-semibold text-slate-950 shadow-lg"> | |
| FC | |
| </span> | |
| <span className="text-sm font-semibold tracking-wide text-slate-100"> | |
| FlashCode | |
| </span> | |
| </a> | |
| <nav className="hidden items-center gap-6 text-xs text-slate-300 sm:flex"> | |
| <a href="#features" className="hover:text-white">Features</a> | |
| <a href="#how-it-works" className="hover:text-white">Workflow</a> | |
| <a href="#pricing" className="hover:text-white">Pricing</a> | |
| </nav> | |
| <button className="inline-flex items-center gap-1.5 rounded-full bg-sky-500 px-4 py-1.5 text-xs font-semibold text-slate-950 shadow-md shadow-sky-500/40 transition hover:bg-sky-400"> | |
| <span>Deploy</span> | |
| <span className="text-[11px]">⚡</span> | |
| </button> | |
| </div> | |
| </header> | |
| ); | |
| }`, | |
| time: '0.42s', | |
| tokens: '118 tokens', | |
| speed: '244 LOC / sec' | |
| }, | |
| backend: { | |
| prompt: 'Generate an Express.js endpoint that returns the latest 10 build logs as JSON.', | |
| code: `// Minimal Express.js endpoint for latest build logs ⚙️ | |
| import express from "express"; | |
| const app = express(); | |
| // In-memory demo data — swap with your DB client. | |
| let logs = [ | |
| { id: "bld_01", status: "success", durationMs: 384, createdAt: new Date().toISOString() }, | |
| { id: "bld_02", status: "failed", durationMs: 1021, createdAt: new Date().toISOString() }, | |
| // ... | |
| ]; | |
| // GET /api/builds/latest | |
| app.get("/api/builds/latest", (req, res) => { | |
| const limit = Number(req.query.limit ?? 10); | |
| const latest = logs | |
| .slice() | |
| .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)) | |
| .slice(0, limit); | |
| res.json({ | |
| count: latest.length, | |
| builds: latest, | |
| }); | |
| }); | |
| // Start server | |
| const port = process.env.PORT ?? 3000; | |
| app.listen(port, () => { | |
| console.log(\`FlashCode build API listening on :\${port}\`); | |
| });`, | |
| time: '0.39s', | |
| tokens: '152 tokens', | |
| speed: '267 LOC / sec' | |
| }, | |
| fix: { | |
| prompt: 'Fix this React useEffect that runs on every render instead of only once.', | |
| code: `// Fixed: run effect only once on mount ✅ | |
| import { useEffect } from "react"; | |
| export function FlashCounter({ start = 0 }) { | |
| useEffect(() => { | |
| let frame; | |
| let count = start; | |
| const tick = () => { | |
| count += 1; | |
| console.log("Tick:", count); | |
| frame = requestAnimationFrame(tick); | |
| }; | |
| // Start once on mount | |
| frame = requestAnimationFrame(tick); | |
| // Cleanup on unmount | |
| return () => { | |
| if (frame) cancelAnimationFrame(frame); | |
| }; | |
| }, [start]); // ✅ Only re-run if "start" changes | |
| return null; | |
| }`, | |
| time: '0.34s', | |
| tokens: '96 tokens', | |
| speed: '221 LOC / sec' | |
| } | |
| }; | |
| const tabs = document.querySelectorAll('.hero-tab'); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| tabs.forEach(t => t.classList.remove('active')); | |
| tab.classList.add('active'); | |
| const key = tab.getAttribute('data-tab'); | |
| const data = snippets[key]; | |
| if (!data || !promptInput || !outputText) return; | |
| promptInput.value = data.prompt; | |
| outputText.innerHTML = data.code.replace(/</g, '<').replace(/>/g, '>') + '<span class="caret"></span>'; | |
| if (tokenCountEl) { | |
| const tokens = data.prompt.split(/\s+/).length; | |
| tokenCountEl.textContent = tokens; | |
| } | |
| if (timeStat) timeStat.textContent = data.time; | |
| if (tokensStat) tokensStat.textContent = data.tokens; | |
| if (speedStat) speedStat.textContent = data.speed; | |
| if (outputStatus) { | |
| outputStatus.innerHTML = '<span class="status-dot"></span>Ready in ~' + data.time; | |
| } | |
| }); | |
| }); | |
| if (runButton && promptInput && outputText) { | |
| const run = () => { | |
| if (runButton.disabled) return; | |
| runButton.disabled = true; | |
| const originalLabel = runButton.innerHTML; | |
| runButton.innerHTML = '<span class="icon">⚡</span>Building...'; | |
| if (outputStatus) { | |
| outputStatus.innerHTML = '<span class="status-dot" style="background:#facc15;box-shadow:0 0 8px rgba(250,204,21,0.9);"></span>Generating...'; | |
| } | |
| const text = promptInput.value.trim(); | |
| const pseudoTokens = text ? text.split(/\s+/).length : 0; | |
| const simulatedTime = Math.max(0.24, Math.min(0.85, 0.15 + pseudoTokens * 0.012)); | |
| const timeDisplay = simulatedTime.toFixed(2) + 's'; | |
| if (timeStat) timeStat.textContent = timeDisplay; | |
| if (tokensStat) tokensStat.textContent = pseudoTokens + ' tokens'; | |
| if (speedStat) speedStat.textContent = (180 + Math.floor(Math.random() * 160)) + ' LOC / sec'; | |
| if (outputText && outputConsole) { | |
| const baseCode = `// FlashCode result for: | |
| // "${text || 'your latest prompt'}" | |
| `; | |
| outputText.textContent = baseCode; | |
| } | |
| let progress = 0; | |
| const interval = 22; | |
| const totalSteps = Math.ceil((simulatedTime * 1000) / interval); | |
| const lines = [ | |
| 'function flashCode() {', | |
| ' console.log("⚡ Blazing fast AI code builder.");', | |
| ' return "Production-ready in milliseconds";', | |
| '}', | |
| '', | |
| 'export default flashCode;' | |
| ]; | |
| const joined = lines.join('\n'); | |
| const charsPerStep = joined.length / totalSteps; | |
| const streamInterval = setInterval(() => { | |
| progress += charsPerStep; | |
| const slice = joined.slice(0, progress); | |
| outputText.textContent = `// FlashCode result for: | |
| // "${text || 'your latest prompt'}" | |
| ${slice}`; | |
| if (progress >= joined.length) { | |
| clearInterval(streamInterval); | |
| outputText.innerHTML = outputText.textContent.replace(/</g, '<').replace(/>/g, '>') + '<span class="caret"></span>'; | |
| if (outputStatus) { | |
| outputStatus.innerHTML = '<span class="status-dot"></span>Ready in ~' + timeDisplay; | |
| } | |
| runButton.disabled = false; | |
| runButton.innerHTML = originalLabel; | |
| } | |
| }, interval); | |
| }; | |
| runButton.addEventListener('click', run); | |
| promptInput.addEventListener('keydown', (e) => { | |
| if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { | |
| e.preventDefault(); | |
| run(); | |
| } | |
| }); | |
| } | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |