Paperly/index.html at main · SIDDHANTCOOKIE/Paperly · GitHub

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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Paperly — Research Papers, Understood</title>
  <meta name="description" content="Upload a research paper. Get a clear explanation and a runnable notebook." />
  <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=Inter:wght@300;400;500;600;700;800&display=swap"
    rel="stylesheet">
  <link rel="icon" type="image/svg+xml" href="/paperly-icon.svg" />
  <link rel="stylesheet" href="/src/style.css" />
</head>

<body>
  <canvas id="gridCanvas"></canvas>

  <div id="app">
    <!-- Nav -->
    <nav class="nav" id="navbar">
      <a href="#" class="logo">
        <svg width="20" height="20" viewBox="0 0 32 32" fill="none">
          <rect x="4" y="5" width="17" height="22" rx="2.5" stroke="#fff" stroke-width="2" fill="none" opacity=".25" />
          <rect x="11" y="3" width="17" height="22" rx="2.5" stroke="#fff" stroke-width="2" fill="#000" />
          <line x1="15" y1="10" x2="24" y2="10" stroke="#fff" stroke-width="1.5" stroke-linecap="round" opacity=".5" />
          <line x1="15" y1="14" x2="22" y2="14" stroke="#fff" stroke-width="1.5" stroke-linecap="round" opacity=".3" />
          <line x1="15" y1="18" x2="20" y2="18" stroke="#fff" stroke-width="1.5" stroke-linecap="round" opacity=".15" />
        </svg>
        Paperly
      </a>
      <div class="nav-r">
        <a href="#features" class="nav-a">Features</a>
        <a href="#steps" class="nav-a">How it works</a>
        <a href="https://github.com/SIDDHANTCOOKIE/paperly" target="_blank" rel="noopener noreferrer" class="nav-gh">
          <svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor"><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-.27s1.36.09 2 .27c1.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.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
          <span id="gh-stars"></span>
        </a>
        <button class="nav-sponsor" id="sponsorBtn">Sponsor Project</button>
      </div>
    </nav>

    <!-- Landing Page Content -->
    <div id="landingContent">
      <!-- Hero -->
      <section class="hero">
        <h1 class="h1">Research papers,<br /><span class="accent">understood.</span></h1>
        <p class="sub">Upload a paper. Get a clear summary, a plain-English explanation,<br class="hide-m" /> and a
          runnable notebook — in minutes.</p>

        <div class="sponsor-cta">
          <span class="premium-badge hidden" id="premiumBadge"></span>
        </div>

        <div class="card" id="uploadArea">
          <div class="tabs">
            <button class="tab on" id="fileTabBtn">Upload PDF</button>
            <button class="tab" id="urlTabBtn">Paste link</button>
          </div>
          <div id="fileUploadPanel" class="panel">
            <div class="drop" id="dropzone">
              <div class="drop-icon">
                <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
                  <path d="M14 20V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                  <path d="M8 12l6-6 6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" />
                </svg>
              </div>
              <p class="drop-t">Drop your paper here or <span>browse</span></p>
              <p class="drop-h">PDF up to 20 MB</p>
              <input type="file" id="fileInput" accept=".pdf" hidden />
            </div>
          </div>
          <div id="urlUploadPanel" class="panel hidden">
            <div class="url-row">
              <input type="url" id="paperUrlInput" class="url-in" placeholder="https://arxiv.org/pdf/2301.xxxxx.pdf" />
              <button class="btn" id="fetchUrlBtn">Analyze</button>
            </div>
          </div>
          <div class="file-bar hidden" id="filePreview">
            <div class="file-meta">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z" stroke="currentColor"
                  stroke-width="2" />
                <path d="M14 2v6h6" stroke="currentColor" stroke-width="2" />
              </svg>
              <span id="fileName"></span>
              <span class="fsize" id="fileSize"></span>
            </div>
            <button class="btn" id="analyzeBtn">Analyze →</button>
          </div>
        </div>

        <!-- Resume last session -->
        <div class="resume-card hidden" id="resumeCard">
          <div class="resume-info">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z" stroke="currentColor"
                stroke-width="2" />
              <path d="M14 2v6h6" stroke="currentColor" stroke-width="2" />
            </svg>
            <span class="resume-title" id="resumeTitle"></span>
          </div>
          <button class="btn resume-btn" id="resumeBtn">Continue →</button>
        </div>

        <!-- Pipeline -->
        <div class="pipe hidden" id="pipelineSection">
          <div class="pipe-row">
            <div class="dot-step" id="stepParse">
              <div class="ds"></div>Parse
            </div>
            <div class="pipe-line"></div>
            <div class="dot-step" id="stepExtract">
              <div class="ds"></div>Extract
            </div>
            <div class="pipe-line"></div>
            <div class="dot-step" id="stepExplain">
              <div class="ds"></div>Explain
            </div>
            <div class="pipe-line"></div>
            <div class="dot-step" id="stepNotebook">
              <div class="ds"></div>Notebook
            </div>
          </div>
          <p class="pipe-msg" id="pipelineStatusText">Parsing…</p>
        </div>

        <!-- Summary & Explanation results (non-dashboard) -->
        <div class="results hidden" id="resultsSection">
          <div class="res-tabs">
            <button class="rtab on" data-result="summary">Summary</button>
            <button class="rtab" data-result="explanation">Explanation</button>
            <button class="rtab" data-result="notebook" id="notebookTabBtn">Notebook</button>
            <button class="rtab new-paper-btn" id="newPaperBtn">+ New Paper</button>
          </div>
          <div class="rpanel" id="summaryPanel">
            <div class="result-content" id="summaryContent"></div>
          </div>
          <div class="rpanel hidden" id="explanationPanel">
            <div class="result-content" id="explanationContent"></div>
          </div>
        </div>
      </section>

      <!-- Features -->
      <section class="feat-section" id="features">
        <h2 class="h2">What you get</h2>
        <div class="fgrid">
          <div class="f"><span class="fn">01</span>
            <h3>Section detection</h3>
            <p>Automatically maps abstract, methodology, experiments, and results.</p>
          </div>
          <div class="f"><span class="fn">02</span>
            <h3>Idea separation</h3>
            <p>Theory vs. experiments, assumptions, algorithms — all catalogued.</p>
          </div>
          <div class="f"><span class="fn">03</span>
            <h3>Simple explanations</h3>
            <p>Every equation and method explained with intuition and analogies.</p>
          </div>
          <div class="f"><span class="fn">04</span>
            <h3>Runnable notebook</h3>
            <p>Clean Python code in a Colab notebook. Runs top-to-bottom, no setup.</p>
          </div>
          <div class="f"><span class="fn">05</span>
            <h3>Experiment reproduction</h3>
            <p>Key results replicated with plots. Conceptual papers get simulations.</p>
          </div>
          <div class="f"><span class="fn">06</span>
            <h3>Interactive exploration</h3>
            <p>Change parameters, rerun, ask "what if" — learn by doing.</p>
          </div>
        </div>
      </section>

      <!-- Steps -->
      <section class="steps-section" id="steps">
        <h2 class="h2">How it works</h2>
        <div class="slist">
          <div class="s"><span class="sn">1</span>
            <div>
              <h3>Upload</h3>
              <p>Drop a PDF or paste a link.</p>
            </div>
          </div>
          <div class="s"><span class="sn">2</span>
            <div>
              <h3>Extract</h3>
              <p>Problem, methods, and assumptions identified.</p>
            </div>
          </div>
          <div class="s"><span class="sn">3</span>
            <div>
              <h3>Explain</h3>
              <p>Plain-English walkthrough of every concept.</p>
            </div>
          </div>
          <div class="s"><span class="sn">4</span>
            <div>
              <h3>Generate</h3>
              <p>A complete Colab notebook, ready to run.</p>
            </div>
          </div>
          <div class="s"><span class="sn">5</span>
            <div>
              <h3>Reproduce</h3>
              <p>Key experiments replicated with plots.</p>
            </div>
          </div>
          <div class="s"><span class="sn">6</span>
            <div>
              <h3>Explore</h3>
              <p>Tweak, rerun, and truly understand the paper.</p>
            </div>
          </div>
        </div>
      </section>

      <footer class="foot">
        <span>Paperly</span>
        <span class="foot-r">From paper to understanding.</span>
      </footer>
    </div>

    <!-- ═══════════ NOTEBOOK DASHBOARD (full page) ═══════════ -->
    <div id="dashboardView" class="dashboard hidden">

      <!-- Dashboard: Task List -->
      <div id="taskListView" class="dash-content">
        <div class="dash-header">
          <div class="dash-header-l">
            <h1 class="dash-title" id="dashTitle">Paper Title</h1>
            <div class="dash-meta" id="dashMeta"></div>
            <p class="dash-desc" id="dashDesc"></p>
          </div>
          <div class="dash-header-r">
            <button class="dbtn-outline new-paper-btn" id="dashNewPaperBtn">
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                <path d="M8 2v12M2 8h12" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
              </svg>
              New Paper
            </button>
            <button class="dbtn-outline" id="dashBackBtn">
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                <path d="M10 2L4 8l6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
              </svg>
              Back
            </button>
            <button class="dbtn-outline" id="dashDlBtn">
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                <path d="M8 2v10M4 8l4 4 4-4M2 14h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
              </svg>
              .ipynb
            </button>
          </div>
        </div>

        <div class="track-header">
          <h2 class="track-title">Implementation Track</h2>
          <span class="track-badge" id="trackBadge">0 Tasks</span>
        </div>

        <div class="task-list" id="taskList"></div>
      </div>

      <!-- Dashboard: Task Detail (split view) -->
      <div id="taskDetailView" class="dash-content hidden">
        <div class="detail-topbar">
          <button class="detail-back" id="detailBackBtn">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
              <path d="M10 2L4 8l6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round" />
            </svg>
          </button>
          <span class="detail-name" id="detailName">Task</span>
          <div class="detail-actions">
            <button class="dbtn-run" id="detailRunBtn">
              <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
                <path d="M4 2l10 6-10 6V2z" fill="currentColor" />
              </svg>
              Run
            </button>
          </div>
        </div>

        <div class="detail-split">
          <!-- Left: Description (always visible) -->
          <div class="detail-left">
            <div class="detail-desc" id="detailDesc"></div>
          </div>
          <!-- Right: Code Editor (top) + Output (bottom) -->
          <div class="detail-right">
            <div class="editor-header">
              <span class="editor-lang">Python</span>
              <span class="py-status" id="pyStatus"></span>
            </div>
            <textarea class="editor-code" id="detailCodeEditor" spellcheck="false"></textarea>
            <div class="output-area" id="detailOutputArea">
              <span class="out-empty">Run the code to see output here</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script type="module" src="/src/main.js"></script>
</body>

</html>