Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>WHATREPO</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Syne:wght@400;600;700;800&display=swap" rel="stylesheet" /> | |
| </head> | |
| <body> | |
| <!-- ═══ HEADER ═══ --> | |
| <header id="header"> | |
| <div class="logo"> | |
| <div class="logo-mark"> | |
| <svg width="28" height="28" viewBox="0 0 28 28" fill="none"> | |
| <rect x="1" y="1" width="11" height="11" rx="2.5" fill="var(--accent)" /> | |
| <rect x="16" y="1" width="11" height="11" rx="2.5" fill="var(--accent)" opacity="0.4"/> | |
| <rect x="1" y="16" width="11" height="11" rx="2.5" fill="var(--accent)" opacity="0.4"/> | |
| <rect x="16" y="16" width="11" height="11" rx="2.5" fill="var(--accent)"/> | |
| </svg> | |
| </div> | |
| <span class="logo-text">WHATREPO</span> | |
| </div> | |
| <div class="header-right"> | |
| <div class="status-pill" id="statusPill"> | |
| <span class="status-dot" id="statusDot"></span> | |
| <span class="status-label" id="statusLabel">idle</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- ═══ WARNING BANNER ═══ --> | |
| <div id="warningBanner" class="warning-banner hidden"> | |
| <span class="warn-icon">⚠</span> | |
| <span>Repository too large to fully analyse — accuracy may be limited</span> | |
| <button id="dismissWarning" aria-label="Dismiss">✕</button> | |
| </div> | |
| <!-- ═══ MAIN ═══ --> | |
| <main id="mainSection"> | |
| <!-- PAGE 1: Landing --> | |
| <section id="landingPage" class="page active"> | |
| <div class="noise-overlay"></div> | |
| <div class="grid-bg"></div> | |
| <div class="glow-orb orb-1"></div> | |
| <div class="glow-orb orb-2"></div> | |
| <div class="landing-inner"> | |
| <div class="hero-eyebrow"> | |
| <span class="eyebrow-dot"></span> | |
| <span>GitHub Intelligence</span> | |
| </div> | |
| <h1 class="hero-title"> | |
| <span class="title-line">Understand</span> | |
| <span class="title-line accent-line">Any Repo.</span> | |
| <span class="title-line">Instantly.</span> | |
| </h1> | |
| <p class="hero-sub">Paste a GitHub URL and talk to the codebase like a senior developer who's read everything.</p> | |
| <div class="input-card"> | |
| <div class="input-wrap"> | |
| <span class="input-icon"> | |
| <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> | |
| <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" fill="currentColor"/> | |
| </svg> | |
| </span> | |
| <input | |
| type="text" | |
| id="repoInput" | |
| placeholder="https://github.com/owner/repository" | |
| autocomplete="off" | |
| spellcheck="false" | |
| /> | |
| </div> | |
| <button id="analyseBtn" class="analyse-btn"> | |
| <span>Analyse</span> | |
| <svg class="btn-arrow-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"> | |
| <path d="M3 8H13M13 8L9 4M13 8L9 12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="landing-hints"> | |
| <span class="hint-chip">🔍 Architecture overview</span> | |
| <span class="hint-chip">📦 Dependencies</span> | |
| <span class="hint-chip">🛠 How to contribute</span> | |
| <span class="hint-chip">⚡ Key patterns</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- PAGE 2: Processing --> | |
| <section id="processingPage" class="page"> | |
| <div class="processing-inner"> | |
| <div class="processing-header"> | |
| <div class="proc-spinner"> | |
| <svg class="spinner-ring" viewBox="0 0 50 50"> | |
| <circle cx="25" cy="25" r="20" fill="none" stroke="var(--accent)" stroke-width="2.5" stroke-dasharray="80 45" stroke-linecap="round"/> | |
| </svg> | |
| </div> | |
| <div class="proc-meta"> | |
| <span class="proc-title">Analysing Repository</span> | |
| <span class="proc-subtitle" id="procSubtitle">Connecting to GitHub…</span> | |
| </div> | |
| </div> | |
| <div id="stepsContainer" class="steps-container"></div> | |
| </div> | |
| </section> | |
| <!-- PAGE 3: Chat --> | |
| <section id="chatPage" class="page"> | |
| <div id="chatMessages" class="chat-messages"></div> | |
| </section> | |
| </main> | |
| <!-- ═══ FOOTER ═══ --> | |
| <footer id="footer" class="hidden"> | |
| <div class="chat-input-card"> | |
| <textarea | |
| id="chatInput" | |
| placeholder="Ask anything about this repository…" | |
| rows="1" | |
| autocomplete="on" | |
| spellcheck="false" | |
| ></textarea> | |
| <button id="sendBtn" class="send-btn" aria-label="Send"> | |
| <svg width="18" height="18" viewBox="0 0 18 18" fill="none"> | |
| <path d="M16 2L2 7.5L8 9.5M16 2L10.5 16L8 9.5M16 2L8 9.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="footer-hint">Press <kbd>Enter</kbd> to send · <kbd>Shift+Enter</kbd> for new line</div> | |
| </footer> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> | |