Ippo987 commited on
Commit
87cb4f4
·
verified ·
1 Parent(s): a75874b

Update templates/homepage.html

Browse files
Files changed (1) hide show
  1. templates/homepage.html +474 -474
templates/homepage.html CHANGED
@@ -1,475 +1,475 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>PaperLens</title>
7
- <link rel="stylesheet" href="/static/css/homestyle.css">
8
- <link rel="stylesheet" href="/static/css/profilepage.css">
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
10
-
11
-
12
- </head>
13
- <body>
14
- <div id="loading-overlay" class="loading-overlay">
15
- <div class="loading-container">
16
- <div class="cyclone" id="cyclone"></div>
17
- <div class="ground"></div>
18
- <div class="loading-text" id="loading-text">Loading...</div>
19
- </div>
20
- </div>
21
- <div class="paper-alert hide" id="paperAlert">
22
- <div class="paper-pin"></div>
23
- <div class="paper-clip"></div>
24
- <div class="paper-lines"></div>
25
- <div class="paper-alert-content">
26
- <div class="alert-icon">
27
- <i class="fas fa-exclamation-circle" id="alertIcon"></i>
28
- <h4 class="alert-title" id="alertTitle">Authentication Required</h4>
29
- </div>
30
- <div class="msg handwritten" id="alertMessage">You must be Logged In to continue!</div>
31
- <div class="close-btn">
32
- <i class="fas fa-times"></i>
33
- </div>
34
- </div>
35
- </div>
36
- <header>
37
- <div class="header-content">
38
- <div class="logo-container">
39
- <img src="/assets/logo.svg" style="height: 70px; width: auto;" alt="PaperLens Logo">
40
- <h1 id="appname">PaperLens</h1>
41
- </div>
42
- <nav>
43
- <a href="#interactive-book">Features</a>
44
- <a href="#architecture ">Solutions</a>
45
- <a href="#contacts">Contacts</a>
46
- <a href="#feedback">Feedback</a>
47
- <a href="/login"><button class="sign-in-btn" id="signInBtn">Sign In</button></a>
48
- <a id="userProfile" class="profile-trigger">
49
- <span id="userName">dara</span>
50
- <img src="/assets/userPhoto.png" alt="Profile Picture" class="profile-pic" id="profile-pic">
51
- <i class="fas fa-chevron-down"></i>
52
- </a>
53
- </nav>
54
- </div>
55
- </header>
56
-
57
- <div class="profile-container" id="profileContainer">
58
- <div class="profile-overlay" id="profileOverlay"></div>
59
- <div class="profile-dropdown" id="profileDropdown">
60
- <div class="profile-header">
61
- <div class="profile-cover-photo"></div>
62
- <div class="profile-avatar-container">
63
- <img src="/assets/default-user.jpg" alt="Profile Picture" id="profileAvatar">
64
- </div>
65
- <h2 id="profileHeaderName">Welcome, Dara</h2>
66
- </div>
67
-
68
- <div class="profile-tabs">
69
- <button class="tab-btn active" data-tab="personal">Personal Info</button>
70
- <button class="tab-btn" data-tab="activity">Activity</button>
71
- </div>
72
-
73
- <div class="tab-content active" id="personal-tab">
74
- <div class="profile-field">
75
- <label><i class="fas fa-user"></i> Name</label>
76
- <input type="text" id="profileName" placeholder="Enter your name" disabled>
77
- <span class="edit-icon" onclick="enableEdit('profileName')" >
78
- <img src="/assets/editicon.png" alt="Edit" class="edit-img"></span>
79
- </div>
80
-
81
- <div class="profile-field">
82
- <label><i class="fas fa-envelope"></i> Email</label>
83
- <input type="email" id="profileEmail" disabled>
84
- <div class="verification-badge" id="emailVerified">
85
- <i class="fas fa-check-circle"></i> Verified
86
- </div>
87
- </div>
88
-
89
- <div class="profile-field">
90
- <label><i class="fas fa-phone"></i> Phone No</label>
91
- <input type="text" id="profilePhone" placeholder="Enter phone number" disabled>
92
- <span class="edit-icon" onclick="enableEdit('profilePhone')">
93
- <img src="/assets/editicon.png" alt="Edit" class="edit-img"></span>
94
- </div>
95
-
96
- <div class="profile-field">
97
- <label><i class="fas fa-map-marker-alt"></i> Address</label>
98
- <input type="text" id="profileAddress" placeholder="Enter address" disabled>
99
- <span class="edit-icon" onclick="enableEdit('profileAddress')">
100
- <img src="/assets/editicon.png" alt="Edit" class="edit-img">
101
- </span>
102
- </div>
103
-
104
- <div class="profile-field">
105
- <label><i class="fas fa-briefcase"></i> Profession</label>
106
- <input type="text" id="profileProfession" placeholder="Enter profession" disabled>
107
- <span class="edit-icon" onclick="enableEdit('profileProfession')">
108
- <img src="/assets/editicon.png" alt="Edit" class="edit-img"></span>
109
- </div>
110
- </div>
111
-
112
-
113
-
114
- <div class="tab-content" id="activity-tab">
115
- <div class="activity-summary">
116
- <div class="activity-stat">
117
- <i class="fas fa-search"></i>
118
- <span class="stat-value">32</span>
119
- <span class="stat-label">Searches</span>
120
- </div>
121
- </div>
122
-
123
-
124
-
125
- <h3 class="section-title">Recent Activity</h3>
126
- <div class="timeline">
127
- <div class="timeline-item">
128
- <div class="timeline-dot"></div>
129
- <div class="timeline-content">
130
- <h4>Research on Neural Networks</h4>
131
- <p>You searched for papers on neural networks in medicine</p>
132
- <span class="timeline-date"><i class="fas fa-clock"></i> 2 days ago</span>
133
- </div>
134
- </div>
135
- <div class="timeline-item">
136
- <div class="timeline-dot"></div>
137
- <div class="timeline-content">
138
- <h4>Saved Article</h4>
139
- <p>You saved "Emerging Trends in AI Ethics"</p>
140
- <span class="timeline-date"><i class="fas fa-clock"></i> 1 week ago</span>
141
- </div>
142
- </div>
143
- <div class="timeline-item">
144
- <div class="timeline-dot"></div>
145
- <div class="timeline-content">
146
- <h4>Profile Updated</h4>
147
- <p>You updated your professional information</p>
148
- <span class="timeline-date"><i class="fas fa-clock"></i> 2 weeks ago</span>
149
- </div>
150
- </div>
151
- </div>
152
- </div>
153
-
154
- <div class="action-buttons">
155
- <button class="save-btn" id="saveBtn"><i class="fas fa-save"></i> Save Changes</button>
156
- <button class="logout-btn" id="logoutBtn"><i class="fas fa-sign-out-alt"></i> Logout</button>
157
- </div>
158
- </div>
159
- </div>
160
-
161
-
162
-
163
-
164
- <section class="hero">
165
- <div class="orb"></div>
166
- <div class="orb"></div>
167
- <div class="orb"></div>
168
- <h2> Charting Research Trajectories and
169
- Academic Linkages</h2>
170
- <div class="liquid-container">
171
- <div class="liquid-word active" id="word1">Innovative</div>
172
- <div class="liquid-word" id="word2">Dynamic</div>
173
- <div class="liquid-word" id="word3">Effortless</div>
174
- <div class="splash-container" id="splashContainer"></div>
175
- </div>
176
- <div class="search-container">
177
- <div class="searchBox">
178
- <input id="searchy" class="searchInput"type="text" name="" placeholder="Search">
179
- <div class="filter-container">
180
- <select id="year-filter" class="year-filter">
181
- <option value="">Year</option>
182
- </select>
183
- </div>
184
- <img id="searchbtn" src="/assets/searchy.png" >
185
- </div>
186
-
187
- <!-- <button id="searchbtn">Search </button> -->
188
- <button id="nextBtn" style="display: none;" >Next</button>
189
- </div>
190
- <div class="feature-selection-container">
191
- <div class="feature-selection">
192
- <div data-text="Trend Analysis" data-feature="trends" style="--r:-15;" class="glass">
193
- <img src="/assets/trenzkj.png" alt="Trend Analysis" class="glass-icon" />
194
- </div>
195
-
196
-
197
- <div data-text="Citation Network" data-feature="citations" style="--r:-15;" class="glass">
198
- <img src="/assets/icons8-hub-100.png" alt="Citation Network Analysis" class="glass-icon" />
199
- </div>
200
- <div data-text="Venue & Publisher Analysis" data-feature="venues" style="--r:-15;" class="glass">
201
- <img src="/assets/trenzkj.png" alt="Venue & Publisher Analysis" class="glass-icon" />
202
- </div>
203
- </div>
204
- <div class="selection-message" id="selectionMessage">
205
- You've selected <span id="selectedFeature">Trend Analysis</span>. Click Search to continue.
206
- </div>
207
- </div>
208
- </section>
209
-
210
- <section id="interactive-book" class="interactive-book">
211
- <h2 class="header-title">Features</h2>
212
- <div class="carousel-container" id="carousel-container">
213
- <!-- HTML Fix - Corrected slide 6 transform -->
214
- <div class="carousel" id="carousel">
215
- <div class="slide" style="transform: rotateY(0deg) translateZ(630px);">
216
- <h4 class="card-title" style="color: aqua;font-family: 'Bungee Shade';">What Is Trend Analysis?</h4>
217
- <p class="card-text" style="color:white; font:bolder">Trend Analysis via Topic Modeling in our project involves identifying and visualizing patterns in research papers for the given topic to uncover underlying themes and trends</p>
218
- <h4 style="color: aqua;font-family: 'Bungee Shade';">What Does It Answers?</h4>
219
- <p style="color: white;">Underlying themes thorugh clusters and themes and the system categorizes these topics into three distant importance.
220
- - 🔥Hot topics ,🔄Neutraltopics ,💎Gap topics.
221
- </p>
222
- </div>
223
-
224
- <div class="slide" style="transform: rotateY(60deg) translateZ(630px);">
225
- <video src="/assets/d1.mp4" autoplay loop muted playsinline>
226
- </div>
227
-
228
- <div class="slide" style="transform: rotateY(120deg) translateZ(630px);">
229
- <h4 style="color: aqua;font-family: 'Bungee Shade';">What is Citation Network</h4>
230
- <p style="color: white;">This network maps relationships between research papers based on citations,
231
- revealing influential works, clusters of related studies, and knowledge flow within a field.<br></p>
232
- <h4 style="color: aqua;font-family: 'Bungee Shade';">What Does It Answers?</h4>
233
- <ul style="color: white;">
234
- <li>Identify Main Papers</li>
235
- <li>Indentify Bridge Papers</li>
236
- <li>Filter Reference And Cited Papers</li>
237
- </ul>
238
- </div>
239
-
240
- <div class="slide" style="transform: rotateY(180deg) translateZ(630px);">
241
- <video src="/assets/d2.mp4" autoplay loop muted playsinline>
242
- </div>
243
-
244
- <div class="slide" style="transform: rotateY(240deg) translateZ(630px);">
245
- <h4 style="color: aqua;font-family: 'Bungee Shade';">What is Host/Publisher Analysis</h4>
246
- <p style="color: white;">Venue and publisher analysis identifies key players in the research landscape,
247
- such as institutions and journals, by visualizing clusters of host organizations or
248
- publication venues based on their publication patterns and influence.
249
- </p>
250
- <h4 style="color: aqua;font-family: 'Bungee Shade';">What Does It Answers?</h4>
251
- <ul style="display: flex; gap: 20px; padding: 0; color:white;">
252
- <li>Status of Open To Access papers</li>
253
- <li>Types of papers</li>
254
- <li>Host and Publication Patterns</li>
255
- </ul>
256
- </div>
257
-
258
-
259
- <div class="slide" style="transform: rotateY(300deg) translateZ(630px);">
260
- <video src="/assets/d3.mp4" autoplay loop muted playsinline>
261
- </div>
262
- </div>
263
-
264
-
265
-
266
- <div class="pagination">
267
- <div class="dot active" data-index="0"></div>
268
- <div class="dot" data-index="1"></div>
269
- <div class="dot" data-index="2"></div>
270
- <div class="dot" data-index="3"></div>
271
- <div class="dot" data-index="4"></div>
272
- <div class="dot" data-index="5"></div>
273
- <div class="dot" data-index="5"></div>
274
- </div>
275
- </div>
276
-
277
- <!-- Refined Open Book -->
278
- <div class="book-container">
279
- <div class="book">
280
- <div class="book-left">
281
- <div class="page-content">
282
- <div class="page-line"></div>
283
- <div class="page-line"></div>
284
- <div class="page-line"></div>
285
- </div>
286
- <div class="page-fold"></div>
287
- <div class="page-number page-number-left">1</div>
288
- </div>
289
-
290
- <div class="book-center"></div>
291
-
292
- <div class="page" id="page1">
293
- <div class="page-front">
294
- <div class="page-content">
295
- <div class="page-line"></div>
296
- <div class="page-line"></div>
297
- <div class="page-line"></div>
298
- </div>
299
- <div class="page-fold"></div>
300
- <div class="page-number page-number-right">2</div>
301
- </div>
302
- <div class="page-back">
303
- <div class="page-content">
304
- <div class="page-line"></div>
305
- <div class="page-line"></div>
306
- <div class="page-line"></div>
307
- </div>
308
- <div class="page-fold"></div>
309
- <div class="page-number page-number-left">3</div>
310
- </div>
311
- <div class="page-shadow"></div>
312
- </div>
313
-
314
- <div class="page" id="page2">
315
- <div class="page-front">
316
- <div class="page-content">
317
- <div class="page-line"></div>
318
- <div class="page-line"></div>
319
- <div class="page-line"></div>
320
- </div>
321
- <div class="page-fold"></div>
322
- <div class="page-number page-number-right">4</div>
323
- </div>
324
- <div class="page-back">
325
- <div class="page-content">
326
- <div class="page-line"></div>
327
- <div class="page-line"></div>
328
- <div class="page-line"></div>
329
- </div>
330
- <div class="page-fold"></div>
331
- <div class="page-number page-number-left">5</div>
332
- </div>
333
- <div class="page-shadow"></div>
334
- </div>
335
-
336
- <div class="page" id="page3">
337
- <div class="page-front">
338
- <div class="page-content">
339
- <div class="page-line"></div>
340
- <div class="page-line"></div>
341
- <div class="page-line"></div>
342
- </div>
343
- <div class="page-fold"></div>
344
- <div class="page-number page-number-right">6</div>
345
- </div>
346
- <div class="page-back">
347
- <div class="page-content">
348
- <div class="page-line"></div>
349
- <div class="page-line"></div>
350
- <div class="page-line"></div>
351
- </div>
352
- <div class="page-fold"></div>
353
- <div class="page-number page-number-left">7</div>
354
- </div>
355
- <div class="page-shadow"></div>
356
- </div>
357
-
358
- <div class="page" id="page4">
359
- <div class="page-front">
360
- <div class="page-content">
361
- <div class="page-line"></div>
362
- <div class="page-line"></div>
363
- <div class="page-line"></div>
364
- </div>
365
- <div class="page-fold"></div>
366
- <div class="page-number page-number-right">8</div>
367
- </div>
368
- <div class="page-back">
369
- <div class="page-content">
370
- <div class="page-line"></div>
371
- <div class="page-line"></div>
372
- <div class="page-line"></div>
373
- </div>
374
- <div class="page-fold"></div>
375
- <div class="page-number page-number-left">9</div>
376
- </div>
377
- <div class="page-shadow"></div>
378
- </div>
379
-
380
- <div class="page" id="page5">
381
- <div class="page-front">
382
- <div class="page-content">
383
- <div class="page-line"></div>
384
- <div class="page-line"></div>
385
- <div class="page-line"></div>
386
- </div>
387
- <div class="page-fold"></div>
388
- <div class="page-number page-number-right">10</div>
389
- </div>
390
- <div class="page-back">
391
- <div class="page-content">
392
- <div class="page-line"></div>
393
- <div class="page-line"></div>
394
- <div class="page-line"></div>
395
- </div>
396
- <div class="page-fold"></div>
397
- <div class="page-number page-number-left">11</div>
398
- </div>
399
- <div class="page-shadow"></div>
400
- </div>
401
-
402
-
403
- <div class="book-right">
404
- <div class="page-content">
405
- <div class="page-line"></div>
406
- <div class="page-line"></div>
407
- <div class="page-line"></div>
408
- </div>
409
- <div class="page-fold"></div>
410
- <div class="page-number page-number-right">12</div>
411
- </div>
412
-
413
- <div class="book-shadow"></div>
414
- </div>
415
-
416
- <div class="navigation">
417
- <button id="prevBtn">Previous</button>
418
- <button id="nextBtn2">Next</button>
419
- </div>
420
- </div>
421
- </section>
422
-
423
- <section id="architecture" class="architecture">
424
- <div class="architecture-description">
425
- <h3>Our Innovative Research Architecture</h3>
426
- <p>PaperLens architecture integrates data scraping from Semantic API and OpenAlex, followed by robust data cleaning, to enable three key features ,Trend Analysis, Citation Networks, and Host/venue insights through interactive, user-friendly dashboards.</p>
427
-
428
- <div class="architecture-features">
429
- <div class="architecture-feature">
430
- <h4 style="text-align: center;">Dynamic Data Collection</h4>
431
- <p>Continuously harvests research papers from IEEE, ArXiv, PMC, JSTOR, and PLOS databases by using semantic scholar and openAlex api's to ensure comprehensive coverage across disciplines. Say no to manual data loading.</p>
432
- </div>
433
- <div class="architecture-feature">
434
- <h4 style="text-align: center;">Integrated Solution</h4>
435
- <p>PaperLens integrates advanced science mapping features like trend analysis and citation networks into an intuitive platform, bridging gaps left by traditional tools that often require complex configurations or lack interactivity.</p>
436
- </div>
437
- <div class="architecture-feature">
438
- <h4 style="text-align: center;">Ease Of Use </h4>
439
- <p>Designed for simplicity, our tool allows users to type and search effortlessly, eliminating the need to learn heavy concepts, unlike many existing science mapping tools that demand extensive expertise for basic tasks.</p>
440
- </div>
441
- </div>
442
- </div>
443
- <div class="container">
444
- <h2 style="margin-top: 30px;font-family: 'Bungee Shade', cursive;color:aqua">PaperLens</h2>
445
- <svg class="paths-container">
446
- </svg>
447
- <div class="center-box">
448
- <div class="settings-icon-wrapper">
449
- <img src="/assets/setting.png" alt="Settings">
450
- </div>
451
- </div>
452
- </div>
453
- </section>
454
- <section id="contacts" class="contacts">
455
- <iframe src="/contact" frameborder="1" width="100%" height="800px" style="border: 8px solid #333; border-radius: 8px; margin: 20px 0;"></iframe>
456
- </section>
457
-
458
- <section id="feedback" class="feedback">
459
- <iframe src="/feedback" frameborder="1" width="100%" height="1300px" style="border: 8px solid #333; border-radius: 8px; "></iframe>
460
- </section>
461
-
462
- <footer>
463
- <p>&copy; 2025 PaperLens. All rights reserved.</p>
464
- </footer>
465
-
466
-
467
- <script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-app-compat.js"></script>
468
- <script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-auth-compat.js"></script>
469
- <script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-firestore-compat.js"></script>
470
- <script type="module" src="/static/js/home.js"></script>
471
- <script type="module" src="/static/js/login.js"></script>
472
- <script type="module" src="/static/js/useractivity.js"></script>
473
- </body>
474
-
475
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>PaperLens</title>
7
+ <link rel="stylesheet" href="/static/css/homestyle.css">
8
+ <link rel="stylesheet" href="/static/css/profilepage.css">
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
10
+
11
+
12
+ </head>
13
+ <body>
14
+ <div id="loading-overlay" class="loading-overlay">
15
+ <div class="loading-container">
16
+ <div class="cyclone" id="cyclone"></div>
17
+ <div class="ground"></div>
18
+ <div class="loading-text" id="loading-text">Loading...</div>
19
+ </div>
20
+ </div>
21
+ <div class="paper-alert hide" id="paperAlert">
22
+ <div class="paper-pin"></div>
23
+ <div class="paper-clip"></div>
24
+ <div class="paper-lines"></div>
25
+ <div class="paper-alert-content">
26
+ <div class="alert-icon">
27
+ <i class="fas fa-exclamation-circle" id="alertIcon"></i>
28
+ <h4 class="alert-title" id="alertTitle">Authentication Required</h4>
29
+ </div>
30
+ <div class="msg handwritten" id="alertMessage">You must be Logged In to continue!</div>
31
+ <div class="close-btn">
32
+ <i class="fas fa-times"></i>
33
+ </div>
34
+ </div>
35
+ </div>
36
+ <header>
37
+ <div class="header-content">
38
+ <div class="logo-container">
39
+ <img src="/assets/logo.svg" style="height: 70px; width: auto;" alt="PaperLens Logo">
40
+ <h1 id="appname">PaperLens</h1>
41
+ </div>
42
+ <nav>
43
+ <a href="#interactive-book">Features</a>
44
+ <a href="#architecture ">Solutions</a>
45
+ <a href="#contacts">Contacts</a>
46
+ <a href="#feedback">Feedback</a>
47
+ <a href="/login"><button class="sign-in-btn" id="signInBtn">Sign In</button></a>
48
+ <a id="userProfile" class="profile-trigger">
49
+ <span id="userName">dara</span>
50
+ <img src="/assets/userPhoto.png" alt="Profile Picture" class="profile-pic" id="profile-pic">
51
+ <i class="fas fa-chevron-down"></i>
52
+ </a>
53
+ </nav>
54
+ </div>
55
+ </header>
56
+
57
+ <div class="profile-container" id="profileContainer">
58
+ <div class="profile-overlay" id="profileOverlay"></div>
59
+ <div class="profile-dropdown" id="profileDropdown">
60
+ <div class="profile-header">
61
+ <div class="profile-cover-photo"></div>
62
+ <div class="profile-avatar-container">
63
+ <img src="/assets/userPhoto.jpg" alt="Profile Picture" id="profileAvatar">
64
+ </div>
65
+ <h2 id="profileHeaderName">Welcome, Dara</h2>
66
+ </div>
67
+
68
+ <div class="profile-tabs">
69
+ <button class="tab-btn active" data-tab="personal">Personal Info</button>
70
+ <button class="tab-btn" data-tab="activity">Activity</button>
71
+ </div>
72
+
73
+ <div class="tab-content active" id="personal-tab">
74
+ <div class="profile-field">
75
+ <label><i class="fas fa-user"></i> Name</label>
76
+ <input type="text" id="profileName" placeholder="Enter your name" disabled>
77
+ <span class="edit-icon" onclick="enableEdit('profileName')" >
78
+ <img src="/assets/editicon.png" alt="Edit" class="edit-img"></span>
79
+ </div>
80
+
81
+ <div class="profile-field">
82
+ <label><i class="fas fa-envelope"></i> Email</label>
83
+ <input type="email" id="profileEmail" disabled>
84
+ <div class="verification-badge" id="emailVerified">
85
+ <i class="fas fa-check-circle"></i> Verified
86
+ </div>
87
+ </div>
88
+
89
+ <div class="profile-field">
90
+ <label><i class="fas fa-phone"></i> Phone No</label>
91
+ <input type="text" id="profilePhone" placeholder="Enter phone number" disabled>
92
+ <span class="edit-icon" onclick="enableEdit('profilePhone')">
93
+ <img src="/assets/editicon.png" alt="Edit" class="edit-img"></span>
94
+ </div>
95
+
96
+ <div class="profile-field">
97
+ <label><i class="fas fa-map-marker-alt"></i> Address</label>
98
+ <input type="text" id="profileAddress" placeholder="Enter address" disabled>
99
+ <span class="edit-icon" onclick="enableEdit('profileAddress')">
100
+ <img src="/assets/editicon.png" alt="Edit" class="edit-img">
101
+ </span>
102
+ </div>
103
+
104
+ <div class="profile-field">
105
+ <label><i class="fas fa-briefcase"></i> Profession</label>
106
+ <input type="text" id="profileProfession" placeholder="Enter profession" disabled>
107
+ <span class="edit-icon" onclick="enableEdit('profileProfession')">
108
+ <img src="/assets/editicon.png" alt="Edit" class="edit-img"></span>
109
+ </div>
110
+ </div>
111
+
112
+
113
+
114
+ <div class="tab-content" id="activity-tab">
115
+ <div class="activity-summary">
116
+ <div class="activity-stat">
117
+ <i class="fas fa-search"></i>
118
+ <span class="stat-value">32</span>
119
+ <span class="stat-label">Searches</span>
120
+ </div>
121
+ </div>
122
+
123
+
124
+
125
+ <h3 class="section-title">Recent Activity</h3>
126
+ <div class="timeline">
127
+ <div class="timeline-item">
128
+ <div class="timeline-dot"></div>
129
+ <div class="timeline-content">
130
+ <h4>Research on Neural Networks</h4>
131
+ <p>You searched for papers on neural networks in medicine</p>
132
+ <span class="timeline-date"><i class="fas fa-clock"></i> 2 days ago</span>
133
+ </div>
134
+ </div>
135
+ <div class="timeline-item">
136
+ <div class="timeline-dot"></div>
137
+ <div class="timeline-content">
138
+ <h4>Saved Article</h4>
139
+ <p>You saved "Emerging Trends in AI Ethics"</p>
140
+ <span class="timeline-date"><i class="fas fa-clock"></i> 1 week ago</span>
141
+ </div>
142
+ </div>
143
+ <div class="timeline-item">
144
+ <div class="timeline-dot"></div>
145
+ <div class="timeline-content">
146
+ <h4>Profile Updated</h4>
147
+ <p>You updated your professional information</p>
148
+ <span class="timeline-date"><i class="fas fa-clock"></i> 2 weeks ago</span>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <div class="action-buttons">
155
+ <button class="save-btn" id="saveBtn"><i class="fas fa-save"></i> Save Changes</button>
156
+ <button class="logout-btn" id="logoutBtn"><i class="fas fa-sign-out-alt"></i> Logout</button>
157
+ </div>
158
+ </div>
159
+ </div>
160
+
161
+
162
+
163
+
164
+ <section class="hero">
165
+ <div class="orb"></div>
166
+ <div class="orb"></div>
167
+ <div class="orb"></div>
168
+ <h2> Charting Research Trajectories and
169
+ Academic Linkages</h2>
170
+ <div class="liquid-container">
171
+ <div class="liquid-word active" id="word1">Innovative</div>
172
+ <div class="liquid-word" id="word2">Dynamic</div>
173
+ <div class="liquid-word" id="word3">Effortless</div>
174
+ <div class="splash-container" id="splashContainer"></div>
175
+ </div>
176
+ <div class="search-container">
177
+ <div class="searchBox">
178
+ <input id="searchy" class="searchInput"type="text" name="" placeholder="Search">
179
+ <div class="filter-container">
180
+ <select id="year-filter" class="year-filter">
181
+ <option value="">Year</option>
182
+ </select>
183
+ </div>
184
+ <img id="searchbtn" src="/assets/searchy.png" >
185
+ </div>
186
+
187
+ <!-- <button id="searchbtn">Search </button> -->
188
+ <button id="nextBtn" style="display: none;" >Next</button>
189
+ </div>
190
+ <div class="feature-selection-container">
191
+ <div class="feature-selection">
192
+ <div data-text="Trend Analysis" data-feature="trends" style="--r:-15;" class="glass">
193
+ <img src="/assets/trenzkj.png" alt="Trend Analysis" class="glass-icon" />
194
+ </div>
195
+
196
+
197
+ <div data-text="Citation Network" data-feature="citations" style="--r:-15;" class="glass">
198
+ <img src="/assets/icons8-hub-100.png" alt="Citation Network Analysis" class="glass-icon" />
199
+ </div>
200
+ <div data-text="Venue & Publisher Analysis" data-feature="venues" style="--r:-15;" class="glass">
201
+ <img src="/assets/trenzkj.png" alt="Venue & Publisher Analysis" class="glass-icon" />
202
+ </div>
203
+ </div>
204
+ <div class="selection-message" id="selectionMessage">
205
+ You've selected <span id="selectedFeature">Trend Analysis</span>. Click Search to continue.
206
+ </div>
207
+ </div>
208
+ </section>
209
+
210
+ <section id="interactive-book" class="interactive-book">
211
+ <h2 class="header-title">Features</h2>
212
+ <div class="carousel-container" id="carousel-container">
213
+ <!-- HTML Fix - Corrected slide 6 transform -->
214
+ <div class="carousel" id="carousel">
215
+ <div class="slide" style="transform: rotateY(0deg) translateZ(630px);">
216
+ <h4 class="card-title" style="color: aqua;font-family: 'Bungee Shade';">What Is Trend Analysis?</h4>
217
+ <p class="card-text" style="color:white; font:bolder">Trend Analysis via Topic Modeling in our project involves identifying and visualizing patterns in research papers for the given topic to uncover underlying themes and trends</p>
218
+ <h4 style="color: aqua;font-family: 'Bungee Shade';">What Does It Answers?</h4>
219
+ <p style="color: white;">Underlying themes thorugh clusters and themes and the system categorizes these topics into three distant importance.
220
+ - 🔥Hot topics ,🔄Neutraltopics ,💎Gap topics.
221
+ </p>
222
+ </div>
223
+
224
+ <div class="slide" style="transform: rotateY(60deg) translateZ(630px);">
225
+ <video src="/assets/d1.mp4" autoplay loop muted playsinline>
226
+ </div>
227
+
228
+ <div class="slide" style="transform: rotateY(120deg) translateZ(630px);">
229
+ <h4 style="color: aqua;font-family: 'Bungee Shade';">What is Citation Network</h4>
230
+ <p style="color: white;">This network maps relationships between research papers based on citations,
231
+ revealing influential works, clusters of related studies, and knowledge flow within a field.<br></p>
232
+ <h4 style="color: aqua;font-family: 'Bungee Shade';">What Does It Answers?</h4>
233
+ <ul style="color: white;">
234
+ <li>Identify Main Papers</li>
235
+ <li>Indentify Bridge Papers</li>
236
+ <li>Filter Reference And Cited Papers</li>
237
+ </ul>
238
+ </div>
239
+
240
+ <div class="slide" style="transform: rotateY(180deg) translateZ(630px);">
241
+ <video src="/assets/d2.mp4" autoplay loop muted playsinline>
242
+ </div>
243
+
244
+ <div class="slide" style="transform: rotateY(240deg) translateZ(630px);">
245
+ <h4 style="color: aqua;font-family: 'Bungee Shade';">What is Host/Publisher Analysis</h4>
246
+ <p style="color: white;">Venue and publisher analysis identifies key players in the research landscape,
247
+ such as institutions and journals, by visualizing clusters of host organizations or
248
+ publication venues based on their publication patterns and influence.
249
+ </p>
250
+ <h4 style="color: aqua;font-family: 'Bungee Shade';">What Does It Answers?</h4>
251
+ <ul style="display: flex; gap: 20px; padding: 0; color:white;">
252
+ <li>Status of Open To Access papers</li>
253
+ <li>Types of papers</li>
254
+ <li>Host and Publication Patterns</li>
255
+ </ul>
256
+ </div>
257
+
258
+
259
+ <div class="slide" style="transform: rotateY(300deg) translateZ(630px);">
260
+ <video src="/assets/d3.mp4" autoplay loop muted playsinline>
261
+ </div>
262
+ </div>
263
+
264
+
265
+
266
+ <div class="pagination">
267
+ <div class="dot active" data-index="0"></div>
268
+ <div class="dot" data-index="1"></div>
269
+ <div class="dot" data-index="2"></div>
270
+ <div class="dot" data-index="3"></div>
271
+ <div class="dot" data-index="4"></div>
272
+ <div class="dot" data-index="5"></div>
273
+ <div class="dot" data-index="5"></div>
274
+ </div>
275
+ </div>
276
+
277
+ <!-- Refined Open Book -->
278
+ <div class="book-container">
279
+ <div class="book">
280
+ <div class="book-left">
281
+ <div class="page-content">
282
+ <div class="page-line"></div>
283
+ <div class="page-line"></div>
284
+ <div class="page-line"></div>
285
+ </div>
286
+ <div class="page-fold"></div>
287
+ <div class="page-number page-number-left">1</div>
288
+ </div>
289
+
290
+ <div class="book-center"></div>
291
+
292
+ <div class="page" id="page1">
293
+ <div class="page-front">
294
+ <div class="page-content">
295
+ <div class="page-line"></div>
296
+ <div class="page-line"></div>
297
+ <div class="page-line"></div>
298
+ </div>
299
+ <div class="page-fold"></div>
300
+ <div class="page-number page-number-right">2</div>
301
+ </div>
302
+ <div class="page-back">
303
+ <div class="page-content">
304
+ <div class="page-line"></div>
305
+ <div class="page-line"></div>
306
+ <div class="page-line"></div>
307
+ </div>
308
+ <div class="page-fold"></div>
309
+ <div class="page-number page-number-left">3</div>
310
+ </div>
311
+ <div class="page-shadow"></div>
312
+ </div>
313
+
314
+ <div class="page" id="page2">
315
+ <div class="page-front">
316
+ <div class="page-content">
317
+ <div class="page-line"></div>
318
+ <div class="page-line"></div>
319
+ <div class="page-line"></div>
320
+ </div>
321
+ <div class="page-fold"></div>
322
+ <div class="page-number page-number-right">4</div>
323
+ </div>
324
+ <div class="page-back">
325
+ <div class="page-content">
326
+ <div class="page-line"></div>
327
+ <div class="page-line"></div>
328
+ <div class="page-line"></div>
329
+ </div>
330
+ <div class="page-fold"></div>
331
+ <div class="page-number page-number-left">5</div>
332
+ </div>
333
+ <div class="page-shadow"></div>
334
+ </div>
335
+
336
+ <div class="page" id="page3">
337
+ <div class="page-front">
338
+ <div class="page-content">
339
+ <div class="page-line"></div>
340
+ <div class="page-line"></div>
341
+ <div class="page-line"></div>
342
+ </div>
343
+ <div class="page-fold"></div>
344
+ <div class="page-number page-number-right">6</div>
345
+ </div>
346
+ <div class="page-back">
347
+ <div class="page-content">
348
+ <div class="page-line"></div>
349
+ <div class="page-line"></div>
350
+ <div class="page-line"></div>
351
+ </div>
352
+ <div class="page-fold"></div>
353
+ <div class="page-number page-number-left">7</div>
354
+ </div>
355
+ <div class="page-shadow"></div>
356
+ </div>
357
+
358
+ <div class="page" id="page4">
359
+ <div class="page-front">
360
+ <div class="page-content">
361
+ <div class="page-line"></div>
362
+ <div class="page-line"></div>
363
+ <div class="page-line"></div>
364
+ </div>
365
+ <div class="page-fold"></div>
366
+ <div class="page-number page-number-right">8</div>
367
+ </div>
368
+ <div class="page-back">
369
+ <div class="page-content">
370
+ <div class="page-line"></div>
371
+ <div class="page-line"></div>
372
+ <div class="page-line"></div>
373
+ </div>
374
+ <div class="page-fold"></div>
375
+ <div class="page-number page-number-left">9</div>
376
+ </div>
377
+ <div class="page-shadow"></div>
378
+ </div>
379
+
380
+ <div class="page" id="page5">
381
+ <div class="page-front">
382
+ <div class="page-content">
383
+ <div class="page-line"></div>
384
+ <div class="page-line"></div>
385
+ <div class="page-line"></div>
386
+ </div>
387
+ <div class="page-fold"></div>
388
+ <div class="page-number page-number-right">10</div>
389
+ </div>
390
+ <div class="page-back">
391
+ <div class="page-content">
392
+ <div class="page-line"></div>
393
+ <div class="page-line"></div>
394
+ <div class="page-line"></div>
395
+ </div>
396
+ <div class="page-fold"></div>
397
+ <div class="page-number page-number-left">11</div>
398
+ </div>
399
+ <div class="page-shadow"></div>
400
+ </div>
401
+
402
+
403
+ <div class="book-right">
404
+ <div class="page-content">
405
+ <div class="page-line"></div>
406
+ <div class="page-line"></div>
407
+ <div class="page-line"></div>
408
+ </div>
409
+ <div class="page-fold"></div>
410
+ <div class="page-number page-number-right">12</div>
411
+ </div>
412
+
413
+ <div class="book-shadow"></div>
414
+ </div>
415
+
416
+ <div class="navigation">
417
+ <button id="prevBtn">Previous</button>
418
+ <button id="nextBtn2">Next</button>
419
+ </div>
420
+ </div>
421
+ </section>
422
+
423
+ <section id="architecture" class="architecture">
424
+ <div class="architecture-description">
425
+ <h3>Our Innovative Research Architecture</h3>
426
+ <p>PaperLens architecture integrates data scraping from Semantic API and OpenAlex, followed by robust data cleaning, to enable three key features ,Trend Analysis, Citation Networks, and Host/venue insights through interactive, user-friendly dashboards.</p>
427
+
428
+ <div class="architecture-features">
429
+ <div class="architecture-feature">
430
+ <h4 style="text-align: center;">Dynamic Data Collection</h4>
431
+ <p>Continuously harvests research papers from IEEE, ArXiv, PMC, JSTOR, and PLOS databases by using semantic scholar and openAlex api's to ensure comprehensive coverage across disciplines. Say no to manual data loading.</p>
432
+ </div>
433
+ <div class="architecture-feature">
434
+ <h4 style="text-align: center;">Integrated Solution</h4>
435
+ <p>PaperLens integrates advanced science mapping features like trend analysis and citation networks into an intuitive platform, bridging gaps left by traditional tools that often require complex configurations or lack interactivity.</p>
436
+ </div>
437
+ <div class="architecture-feature">
438
+ <h4 style="text-align: center;">Ease Of Use </h4>
439
+ <p>Designed for simplicity, our tool allows users to type and search effortlessly, eliminating the need to learn heavy concepts, unlike many existing science mapping tools that demand extensive expertise for basic tasks.</p>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ <div class="container">
444
+ <h2 style="margin-top: 30px;font-family: 'Bungee Shade', cursive;color:aqua">PaperLens</h2>
445
+ <svg class="paths-container">
446
+ </svg>
447
+ <div class="center-box">
448
+ <div class="settings-icon-wrapper">
449
+ <img src="/assets/setting.png" alt="Settings">
450
+ </div>
451
+ </div>
452
+ </div>
453
+ </section>
454
+ <section id="contacts" class="contacts">
455
+ <iframe src="/contact" frameborder="1" width="100%" height="800px" style="border: 8px solid #333; border-radius: 8px; margin: 20px 0;"></iframe>
456
+ </section>
457
+
458
+ <section id="feedback" class="feedback">
459
+ <iframe src="/feedback" frameborder="1" width="100%" height="1300px" style="border: 8px solid #333; border-radius: 8px; "></iframe>
460
+ </section>
461
+
462
+ <footer>
463
+ <p>&copy; 2025 PaperLens. All rights reserved.</p>
464
+ </footer>
465
+
466
+
467
+ <script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-app-compat.js"></script>
468
+ <script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-auth-compat.js"></script>
469
+ <script src="https://www.gstatic.com/firebasejs/9.0.2/firebase-firestore-compat.js"></script>
470
+ <script type="module" src="/static/js/home.js"></script>
471
+ <script type="module" src="/static/js/login.js"></script>
472
+ <script type="module" src="/static/js/useractivity.js"></script>
473
+ </body>
474
+
475
  </html>