Skip to content

Commit eb966c4

Browse files
Ashjha75Ashjha75
committed
feat: Enhance help page layout and improve number formatting for large values
1 parent b721150 commit eb966c4

File tree

2 files changed

+320
-109
lines changed

2 files changed

+320
-109
lines changed

‎help.html‎

Lines changed: 144 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,24 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>How to Use CodeToContext</title>
7-
<!-- Font Awesome for Icons -->
7+
<title>Help @CodeToContext</title>
8+
<link rel="icon" type="image/x-icon" href="logo.ico">
9+
<link rel="shortcut icon" type="image/x-icon" href="logo.ico">
10+
<link rel="apple-touch-icon" href="logo.png">
811
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
912
<!-- Re-using the main stylesheet for consistency -->
1013
<link rel="stylesheet" href="style.css">
1114

1215
<style>
1316
/* Styles specific to the help page */
1417
body {
15-
overflow-y: auto; /* Allow scrolling on this page */
18+
overflow-y: auto;
19+
/* Allow scrolling on this page */
1620
}
21+
1722
.help-container {
1823
max-width: 900px;
1924
margin: 40px auto;
@@ -22,48 +27,63 @@
2227
border: 1px solid var(--border-color);
2328
border-radius: 8px;
2429
}
25-
30+
2631
/* Glowing header animation */
27-
h1, h2 {
32+
h1,
33+
h2 {
2834
color: var(--color-primary);
2935
border-bottom: 1px solid var(--border-color);
3036
padding-bottom: 10px;
3137
margin-bottom: 20px;
3238
animation: headerGlow 2s ease-in-out infinite;
3339
text-shadow: 0 0 10px rgba(52, 168, 83, 0.5);
3440
}
35-
41+
3642
@keyframes headerGlow {
37-
0%, 100% {
38-
text-shadow:
43+
44+
0%,
45+
100% {
46+
text-shadow:
3947
0 0 5px rgba(142, 236, 167, 0.3),
4048
0 0 10px rgba(52, 168, 83, 0.3),
4149
0 0 15px rgba(24, 121, 50, 0.3);
4250
}
51+
4352
50% {
44-
text-shadow:
53+
text-shadow:
4554
0 0 10px rgba(52, 168, 83, 0.8),
4655
0 0 20px rgba(52, 168, 83, 0.8),
4756
0 0 30px rgba(52, 168, 83, 0.6),
4857
0 0 40px rgba(52, 168, 83, 0.4);
4958
}
5059
}
51-
52-
h1 { font-size: 2.5rem; }
53-
h2 { font-size: 1.8rem; margin-top: 40px; }
54-
p, li {
60+
61+
h1 {
62+
font-size: 2.5rem;
63+
}
64+
65+
h2 {
66+
font-size: 1.8rem;
67+
margin-top: 40px;
68+
}
69+
70+
p,
71+
li {
5572
color: var(--text-primary);
5673
line-height: 1.7;
5774
font-size: 1.1rem;
5875
}
59-
ul, ol {
76+
77+
ul,
78+
ol {
6079
padding-left: 20px;
6180
margin-bottom: 20px;
6281
}
82+
6383
strong {
6484
color: var(--color-accent);
6585
}
66-
86+
6787
/* Visual Guide Styles */
6888
.visual-guide {
6989
position: relative;
@@ -74,7 +94,9 @@
7494
border-radius: 8px;
7595
margin-top: 30px;
7696
}
77-
.mock-sidebar, .mock-editor {
97+
98+
.mock-sidebar,
99+
.mock-editor {
78100
background: var(--bg-sidebar);
79101
border: 1px solid var(--border-color);
80102
padding: 10px;
@@ -84,10 +106,20 @@
84106
white-space: pre;
85107
color: var(--text-secondary);
86108
}
87-
.mock-sidebar { flex: 0 0 40%; }
88-
.mock-editor { flex: 1; }
89-
.mock-sidebar .highlight { color: var(--color-accent); font-weight: bold; }
90-
109+
110+
.mock-sidebar {
111+
flex: 0 0 40%;
112+
}
113+
114+
.mock-editor {
115+
flex: 1;
116+
}
117+
118+
.mock-sidebar .highlight {
119+
color: var(--color-accent);
120+
font-weight: bold;
121+
}
122+
91123
.annotation {
92124
position: absolute;
93125
background: #2a6a3d;
@@ -98,26 +130,55 @@
98130
font-weight: bold;
99131
border: 1px solid #77d48c;
100132
}
133+
101134
.annotation::after {
102135
content: '';
103136
position: absolute;
104137
width: 40px;
105138
height: 2px;
106139
background: #77d48c;
107140
}
108-
109-
#anno-tree { top: 30px; left: -100px; }
110-
#anno-tree::after { top: 50%; right: -40px; }
111-
112-
#anno-tokens { bottom: 4.7rem; left: -120px; }
113-
#anno-tokens::after { top: 50%; right: -40px; }
114-
115-
#anno-structure { top: 30px; right: -150px; }
116-
#anno-structure::after { top: 50%; left: -40px; }
117-
118-
#anno-output { bottom: 80px; right: -130px; }
119-
#anno-output::after { top: 50%; left: -40px; }
120-
141+
142+
#anno-tree {
143+
top: 30px;
144+
left: -100px;
145+
}
146+
147+
#anno-tree::after {
148+
top: 50%;
149+
right: -40px;
150+
}
151+
152+
#anno-tokens {
153+
bottom: 4.7rem;
154+
left: -120px;
155+
}
156+
157+
#anno-tokens::after {
158+
top: 50%;
159+
right: -40px;
160+
}
161+
162+
#anno-structure {
163+
top: 30px;
164+
right: -150px;
165+
}
166+
167+
#anno-structure::after {
168+
top: 50%;
169+
left: -40px;
170+
}
171+
172+
#anno-output {
173+
bottom: 80px;
174+
right: -130px;
175+
}
176+
177+
#anno-output::after {
178+
top: 50%;
179+
left: -40px;
180+
}
181+
121182
.back-button {
122183
display: inline-block;
123184
margin-top: 40px;
@@ -129,49 +190,56 @@
129190
border-radius: 5px;
130191
transition: var(--transition);
131192
}
193+
132194
.back-button:hover {
133195
background: var(--color-accent-dark);
134196
transform: translateY(-2px);
135197
}
136-
198+
137199
@media (max-width: 1200px) {
138-
.annotation { display: none; } /* Hide annotations on smaller screens for clarity */
200+
.annotation {
201+
display: none;
202+
}
203+
204+
/* Hide annotations on smaller screens for clarity */
139205
}
140206
</style>
141207
</head>
208+
142209
<body>
143210

144211
<div class="help-container">
145-
<h1>How to Use CodeToContext</h1>
146-
<p>This guide explains how to use the tool to convert your local codebase into a single, structured, and AI-ready prompt.</p>
212+
<h1>CodeToContext Docs</h1>
213+
<p>This guide explains how to use the tool to convert your local codebase into a single, structured, and
214+
AI-ready prompt.</p>
147215

148216
<!-- Visual Guide -->
149217
<div class="visual-guide">
150218
<div class="mock-sidebar">
151-
<i class="fas fa-folder"></i> my-project
152-
<i class="fas fa-file-alt"></i> .gitignore
153-
<i class="fas fa-file-alt"></i> package.json
154-
<i class="fas fa-folder"></i> src
155-
<i class="fas fa-file-alt"></i> index.html
156-
<i class="fas fa-file-alt"></i> style.css
157-
<i class="fas fa-file-alt"></i> script.js
158-
159-
<span class="highlight " >Selected: 3 | Tokens: 5,897</span>
219+
<i class="fas fa-folder"></i> my-project
220+
<i class="fas fa-file-alt"></i> .gitignore
221+
<i class="fas fa-file-alt"></i> package.json
222+
<i class="fas fa-folder"></i> src
223+
<i class="fas fa-file-alt"></i> index.html
224+
<i class="fas fa-file-alt"></i> style.css
225+
<i class="fas fa-file-alt"></i> script.js
226+
227+
<span class="highlight ">Selected: 3 | Tokens: 5,897</span>
160228
</div>
161229
<div class="mock-editor">
162-
&lt;folder-structure&gt;
163-
└── my-project
164-
├── .gitignore
165-
├── package.json
166-
└── src
167-
├── index.html
168-
├── style.css
169-
└── script.js
170-
&lt;/folder-structure&gt;
171-
172-
&lt;document path="my-project/src/script.js"&gt;
173-
// JavaScript content here...
174-
&lt;/document&gt;
230+
&lt;folder-structure&gt;
231+
└── my-project
232+
├── .gitignore
233+
├── package.json
234+
└── src
235+
├── index.html
236+
├── style.css
237+
└── script.js
238+
&lt;/folder-structure&gt;
239+
240+
&lt;document path="my-project/src/script.js"&gt;
241+
// JavaScript content here...
242+
&lt;/document&gt;
175243
</div>
176244

177245
<div class="annotation" id="anno-tree">Interactive File Tree</div>
@@ -182,19 +250,27 @@ <h1>How to Use CodeToContext</h1>
182250

183251
<h2>Features</h2>
184252
<ul>
185-
<li><strong>Structure-Aware Output:</strong> Generates a clean `<folder-structure>` diagram so the AI understands your project's layout before reading the code.</li>
186-
<li><strong>100% Private:</strong> All files are processed locally in your browser. Your code never touches a server.</li>
187-
<li><strong>Interactive File Tree:</strong> Easily expand, collapse, and select the exact files and folders you need.</li>
188-
<li><strong>Smart File Filtering:</strong> Automatically respects common ignore patterns (like <code>.git</code> and <code>node_modules</code>), saving you time.</li>
189-
<li><strong>Instant Token Analysis:</strong> Provides a real-time token count and a human-readable pronunciation to help you manage context window limits.</li>
253+
<li><strong>Structure-Aware Output:</strong> Generates a clean `<folder-structure>` diagram so the AI
254+
understands your project's layout before reading the code.</li>
255+
<li><strong>100% Private:</strong> All files are processed locally in your browser. Your code never touches
256+
a server.</li>
257+
<li><strong>Interactive File Tree:</strong> Easily expand, collapse, and select the exact files and folders
258+
you need.</li>
259+
<li><strong>Smart File Filtering:</strong> Automatically respects common ignore patterns (like
260+
<code>.git</code> and <code>node_modules</code>), saving you time.</li>
261+
<li><strong>Instant Token Analysis:</strong> Provides a real-time token count and a human-readable
262+
pronunciation to help you manage context window limits.</li>
190263
</ul>
191264

192265
<h2>How to Use</h2>
193266
<ol>
194267
<li><strong>Open the App:</strong> The application is ready to use as soon as the page loads.</li>
195-
<li><strong>Select Your Folder:</strong> Click the <strong>"Select Directory"</strong> button to choose the project folder you want to analyze.</li>
196-
<li><strong>Refine Your Selection:</strong> Use the checkboxes in the sidebar to include or exclude specific files and directories from your prompt.</li>
197-
<li><strong>Copy or Download:</strong> Use the action buttons in the top-right of the editor to copy the complete prompt to your clipboard or download the generated file.</li>
268+
<li><strong>Select Your Folder:</strong> Click the <strong>"Select Directory"</strong> button to choose the
269+
project folder you want to analyze.</li>
270+
<li><strong>Refine Your Selection:</strong> Use the checkboxes in the sidebar to include or exclude specific
271+
files and directories from your prompt.</li>
272+
<li><strong>Copy or Download:</strong> Use the action buttons in the top-right of the editor to copy the
273+
complete prompt to your clipboard or download the generated file.</li>
198274
</ol>
199275

200276
<a href="./index.html" class="back-button">
@@ -203,4 +279,5 @@ <h2>How to Use</h2>
203279
</div>
204280

205281
</body>
282+
206283
</html>

0 commit comments

Comments
 (0)