-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
126 lines (117 loc) · 6.18 KB
/
index.html
File metadata and controls
126 lines (117 loc) · 6.18 KB
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
<!DOCTYPE html>
<html>
<head>
<title> ParserPro </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="media/ParserPro.png">
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./styles/main.css">
<link href="./styles/prism.css" rel="stylesheet"/>
</head>
<body>
<div id="pageContainer">
<div class="top-bar">
<div id="tabContainer" class="tab-bar"></div>
<div class="button-group">
<button id="toggleParseButton" data-mode="parse">▶</button>
<button id="infoButton"> ⓘ </button>
</div>
</div>
<div id="content">
<div id="codeInputContainer">
<form id="codeForm">
<textarea id="codeInput" name="codeInput" required placeholder="Enter your code here..."
style="text-align: left; vertical-align: top;"></textarea>
</form>
<div id = "grabBar"></div>
</div>
<div id="welcomeOverlay" class="welcome-overlay">
<div class="welcome-content">
<div class="welcome-header">
<h1>ParserPro</h1>
<p>AI-Powered Code Analysis</p>
</div>
<div class="welcome-sections">
<div class="left-column">
<div class="welcome-section">
<h2>Start</h2>
<div class="welcome-actions">
<button class="welcome-action" id="welcomeNewTab">
<span class="action-icon">🗎</span>
<a class="action-text">Get Started...</a>
</button>
<button class="welcome-action" id="welcomeGetStarted">
<span class="action-icon">ⓘ</span>
<a class="action-text" href="https://github.com/Carson-Lam/ParserPro#readme">Learn More...</a>
</button>
</div>
</div>
<div class="welcome-section">
<h2>How to Use</h2>
<ol class="welcome-steps">
<li>Write or paste your code in the editor</li>
<li>Click parse <strong> ▶ </strong> to analyze</li>
<li>Highlight any code section and press <kbd>Enter</kbd> / <strong> ⏎ </strong> on mobile</li>
<li>Navigate between analysis tabs to explore results</li>
<li>Go back <strong> ◀ </strong> to resume editing!</li>
</ol>
</div>
</div>
<div class="welcome-section">
<h2>Features</h2>
<div class="welcome-feature-list">
<div class="welcome-feature">
<div class="feature-content">
<h3>Code Explanation</h3>
<p>Evaluate your highlighted code in context & break it down line-by-line</p>
</div>
</div>
<div class="welcome-feature">
<div class="feature-content">
<h3>Algorithm Visualization</h3>
<p>If your highlighted code has a sorting algorithm, visualize it step by step</p>
</div>
</div>
<div class="welcome-feature">
<div class="feature-content">
<h3>Complexity Analysis</h3>
<p>Understand your code's time and space complexity & receive optimization suggestions</p>
</div>
</div>
<div class="welcome-feature">
<div class="feature-content">
<h3>Cached memory</h3>
<p>ParserPro remembers your previous highlights and queries as you evaluate </p>
</div>
</div>
</div>
</div>
</div>
<div id="welcomeFootnote">
More to come...
</div>
</div>
<div class="welcome-footer">
<p>Made by <a href="https://www.linkedin.com/in/lam-carson/">Carson Lam</a></p>
<p>|</p>
<p>Powered by <a href="https://console.groq.com/docs/overview">Groqcloud</a></p>
<p>|</p>
<a href="https://wikigrapher.vercel.app/">WikiGrapher</a>
</div>
</div>
<div id="frameOutput">
<iframe id="frameExplanation" src="explanation.html" frameborder="0"
style="width:100%; height:100%;"></iframe>
</div>
</div>
</div>
<button id="mobileAnalyzeBtn" aria-label="Analyze code">⏎</button>
<!--Script-->
<script src="./scripts/handler.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous">
</script>
<script src="./scripts/prism.js"></script>
</body>
</html>