Promote version 9d89cba to main

Promoted commit 9d89cba4b3a4f5b1220451d131ad4ad5b52d4eb5 to main branch

index.html

@@ -1638,7 +1638,105 @@
           </button>
         </div>
       </div>
-</section>
+
+      <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">
@@ -1879,11 +1977,19 @@
       burger.classList.toggle('open');
       mobileNav.classList.toggle('open');
     });
+
     document.querySelectorAll('#nav-start,#mobile-start,#hero-start,#bottom-start').forEach(btn => {
       btn.addEventListener('click', () => {
-        window.location.hash = '#top';
+        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();
 
@@ -1896,7 +2002,223 @@
         sessionCountEl.textContent = base.toLocaleString('en-US');
       }, 1800);
     }
-</script>
+
+    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, '&lt;').replace(/>/g, '&gt;') + '<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, '&lt;').replace(/>/g, '&gt;') + '<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>