index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#101415" />
    <title>Taktik | Football analysis, made practical</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="style.css" />
    <style>
      .network-svg .edge{stroke:#65746b;stroke-width:1.2;opacity:.65}.network-svg .edge.bright{stroke:#f0a24d;stroke-width:2.4;opacity:.9}.network-svg .node circle{fill:#273a34;stroke:#a9c9ad;stroke-width:1.5}.network-svg .node:nth-of-type(4n) circle{fill:#725537;stroke:#f0a24d}.network-svg .node text{fill:#dce4db;font:500 9px 'DM Mono';text-anchor:middle}.network-svg .node .node-number{fill:#92c6a0;font-size:8px}
    </style>
  </head>
  <body class="landing-active">
    <main class="landing-page" aria-label="Taktik football analysis">
      <header class="landing-nav"><div class="brand"><span class="brand-mark">T</span><span>taktik</span></div><div><button class="landing-link" data-enter-workspace>Sign in</button><button class="landing-cta compact" data-enter-workspace>Open workspace</button></div></header>
      <section class="landing-hero"><div><p class="landing-kicker">FOOTBALL ANALYSIS WORKSPACE</p><h1>See the pattern.<br /><em>Explain the game.</em></h1><p>Turn match event data into clear tactical evidence: passing routes, press recoveries, player involvement, and shareable reports—without needing to understand a graph database.</p><div class="landing-actions"><button class="landing-cta" data-enter-workspace>Analyse a match <span>→</span></button><a href="#how-it-works" class="landing-link">How it works</a></div><div class="landing-proof"><span>Built for analysts</span><span>Coaches & scouts</span><span>Football enthusiasts</span></div></div><aside class="landing-preview"><div class="preview-top"><span class="green-dot"></span> MATCH INSIGHT</div><h2>Where did Barcelona break Alavés’ press?</h2><div class="preview-pitch"><i></i><i></i><i></i><i></i><i></i><b>Progressive route</b></div><div class="preview-insight"><strong>Right half-space overload</strong><p>12 forward passes bypassed the first line of pressure.</p></div></aside></section>
      <section class="landing-features" id="how-it-works"><article><span>01</span><h2>Bring in a match</h2><p>Load a StatsBomb event file and work from your own match data.</p></article><article><span>02</span><h2>Ask football questions</h2><p>Use plain language prompts or choose a tactical view—no technical query writing.</p></article><article><span>03</span><h2>Turn evidence into action</h2><p>Annotate the pitch, compare players, save insights, and export a report.</p></article></section>
      <section class="landing-usecases"><p class="landing-kicker">ANALYSE WHAT MATTERS</p><div><button data-landing-question="Show the passing network under high pressure">Pressing and recoveries</button><button data-landing-question="Which players created the most progressive sequences?">Progression and build-up</button><button data-landing-question="Show hold-up play in the final third">Final-third connections</button><button data-landing-question="Where did the team recover the ball?">Scouting and player involvement</button></div></section>
    </main>
    <div class="app-shell">
      <aside class="sidebar">
        <div class="brand"><span class="brand-mark">T</span><span>taktik</span></div>
          <div class="workspace-switcher"><span class="pulse-dot"></span><span>Match workspace</span><span class="chevron">⌄</span></div>
        <nav class="main-nav" aria-label="Main navigation">
          <p class="nav-label">Workspace</p>
          <button class="nav-item active"><span class="nav-icon">◈</span>Match room</button>
          <button class="nav-item"><span class="nav-icon">⌁</span>Passing map</button>
          <button class="nav-item"><span class="nav-icon">▦</span>Saved queries</button>
          <button class="nav-item"><span class="nav-icon">◎</span>Scouting watchlist</button>
          <p class="nav-label">Data</p>
          <button class="nav-item"><span class="nav-icon">↥</span>Import match</button>
          <button class="nav-item"><span class="nav-icon">◇</span>Data model</button>
        </nav>
        <div class="sidebar-bottom">
          <div class="system-card"><div class="status-line"><span class="green-dot"></span>Connecting match data…</div><span class="mono small">Waiting for match data</span></div>
          <button class="profile"><span class="avatar">NO</span><span><strong>Ninos</strong><small>Analyst workspace</small></span><span class="more">•••</span></button>
        </div>
      </aside>

      <main class="main-content">
        <header class="topbar">
          <div class="breadcrumb"><span>Workspace</span><b>/</b><strong>Match room</strong></div>
          <div class="top-actions"><button class="icon-button" title="Notifications">♧<span class="notification-dot"></span></button><button class="export-button" id="exportBtn">↥ Export view</button></div>
        </header>

        <section class="page-heading">
          <div><p class="eyebrow">MATCH ROOM / LIVE ANALYSIS</p><h1>Loading <span>vs</span> match</h1><p class="subheading">Connecting to Neo4j…</p></div>
          <div class="match-score"><div><span>HOME</span><strong>–</strong></div><div class="score-divider">—</div><div><strong>–</strong><span>AWAY</span></div><small>LOADING</small></div>
        </section>

        <section class="metric-strip">
          <div class="metric"><span>Possession</span><strong>47% <em>—</em> 53%</strong><small>Arsenal <b>·</b> Man City</small></div>
          <div class="metric"><span>Network density</span><strong>0.68 <em class="up">↗ 12%</em></strong><small>vs. season average</small></div>
          <div class="metric"><span>Progressive sequences</span><strong>24 <em class="up">↗ 5</em></strong><small>3+ connected actions</small></div>
          <div class="metric"><span>Pressure regains</span><strong>11 <em class="down">↘ 2</em></strong><small>Arsenal high press</small></div>
          <div class="metric insight-metric"><span>AI signal</span><strong>Overloads on left</strong><small><span class="green-dot"></span> Confidence 87%</small></div>
        </section>

        <section class="query-bar-section">
          <div class="query-label"><span class="spark">✦</span><span>Ask about the match</span><span class="beta">BETA</span></div>
          <div class="query-box"><span class="search-icon">⌕</span><input id="queryInput" value="Show the passing network under high pressure" aria-label="Ask about the match" /><button id="runQuery" class="run-query">Analyse <span>↵</span></button></div>
          <div class="suggestions"><button data-query="Show the passing network under high pressure">High pressure network</button><button data-query="Which players created the most progressive sequences?">Progressive sequences</button><button data-query="Show hold-up play in the final third">Final-third hold-up play</button><button data-query="Where did the team recover the ball?">Ball recoveries</button></div>
        </section>

        <section class="analysis-grid">
          <div class="panel network-panel">
            <div class="panel-header"><div><p class="eyebrow">TACTICAL VIEW / PASSING MAP</p><h2 id="resultTitle">Arsenal under high pressure</h2></div><div class="panel-tools"><button class="icon-button" title="Focus passing map">⌗</button><button class="icon-button" title="Analysis filters and annotations">•••</button></div></div>
            <div class="network-meta"><span><i class="legend-line amber"></i>Passes <b id="passCount">186</b></span><span><i class="legend-node"></i>Player <b>10</b></span><span><i class="legend-line thin"></i>Progressive <b>42</b></span><span class="network-context">Filter: <b>Final 3rd</b> ×</span></div>
            <div class="network-stage" id="networkStage"><div class="pitch-lines"></div><svg class="network-svg" viewBox="0 0 760 400" aria-label="Arsenal passing network visualization"></svg><div class="pitch-label left">ARSENAL<br /><b>IN POSSESSION</b></div><div class="pitch-label right">HIGH PRESSURE<br /><b>PHASE</b></div></div>
            <div class="network-footer"><span class="mono">Live match data</span><span>Showing <b id="edgeCount">42</b> passing connections <button class="text-button">View full map ↗</button></span></div>
          </div>

          <aside class="panel insight-panel"><div class="panel-header"><div><p class="eyebrow">TACTICAL READOUT</p><h2>What stands out</h2></div><span class="ai-badge">AI</span></div><div class="insight-lead"><span class="signal-icon">✦</span><div><strong>Left-side overloads are creating the escape route.</strong><p>Arsenal repeatedly formed a 4v3 around the left half-space before switching into the box.</p></div></div><div class="insight-list"><div class="insight-row"><span class="rank">01</span><div><strong>Martinelli ↔ Zinchenko</strong><p>Highest edge weight · 34 exchanges</p></div><b class="orange-text">+18%</b></div><div class="insight-row"><span class="rank">02</span><div><strong>Ødegaard as release valve</strong><p>7 progressive third-man actions</p></div><b class="orange-text">+12%</b></div><div class="insight-row"><span class="rank">03</span><div><strong>Rice received under pressure</strong><p>11 successful retention events</p></div><b class="orange-text">+9%</b></div></div><button class="full-width-button" id="saveInsight">♡ Save insight</button></aside>
        </section>

        <section class="lower-grid">
          <div class="panel event-panel"><div class="panel-header"><div><p class="eyebrow">EVENT STREAM</p><h2>Key sequences</h2></div><button class="filter-button">All phases⌄</button></div><div id="eventList" class="event-list"></div><button class="load-more">Load earlier events <span>↓</span></button></div>
          <div class="panel player-panel"><div class="panel-header"><div><p class="eyebrow">PLAYER LENS</p><h2>Passing involvement</h2></div><span class="mono small">ARS · 90 MIN</span></div><div class="player-list" id="playerList"></div></div>
          <div class="panel query-panel"><div class="panel-header"><div><p class="eyebrow">ANALYSIS METHOD</p><h2>Technical query</h2></div><button class="copy-button" id="copyCypher">Copy</button></div><pre id="cypherCode">MATCH (p1:Player)-[r:PASSED_TO]->(p2:Player)
WHERE r.team = 'Arsenal'
  AND r.pressure = 'high'
RETURN p1, p2, r
ORDER BY r.count DESC</pre><div class="query-foot"><span class="green-dot"></span>Schema validated <span class="mono">· 42ms</span></div></div>
        </section>
        <footer class="page-footer"><span>Data source: StatsBomb Open Data · Demo match</span><span><span class="green-dot"></span> Neo4j local graph ready <b>v0.1.0</b></span></footer>
      </main>
    </div>
    <div class="toast" id="toast">Insight saved to workspace</div>
    <script>
      const localFetch = window.fetch.bind(window);
      window.fetch = (input, init) => {
        if (typeof input === 'string' && input.startsWith('/api/')) input = `http://127.0.0.1:8000${input}`;
        return localFetch(input, init);
      };
    </script>
    <script src="app.js"></script>
  </body>
</html>