Hugging Face's logo

Spaces:
Krishna324
/
WhatRepo
Sleeping

App Files Community
WhatRepo
File size: 6,009 Bytes
86a637a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<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>