Skip to content

Commit 51baaf7

Browse files
Ashjha75Ashjha75
committed
feat: Update index.html layout and add help.html for user guidance
1 parent e6f8606 commit 51baaf7

File tree

2 files changed

+225
-8
lines changed

2 files changed

+225
-8
lines changed

‎help.html‎

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
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>How to Use CodeToContext</title>
7+
<!-- Font Awesome for Icons -->
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9+
<!-- Re-using the main stylesheet for consistency -->
10+
<link rel="stylesheet" href="style.css">
11+
12+
<style>
13+
/* Styles specific to the help page */
14+
body {
15+
overflow-y: auto; /* Allow scrolling on this page */
16+
}
17+
.help-container {
18+
max-width: 900px;
19+
margin: 40px auto;
20+
padding: 40px;
21+
background: var(--bg-sidebar);
22+
border: 1px solid var(--border-color);
23+
border-radius: 8px;
24+
}
25+
26+
/* Glowing header animation */
27+
h1, h2 {
28+
color: var(--color-primary);
29+
border-bottom: 1px solid var(--border-color);
30+
padding-bottom: 10px;
31+
margin-bottom: 20px;
32+
animation: headerGlow 2s ease-in-out infinite;
33+
text-shadow: 0 0 10px rgba(52, 168, 83, 0.5);
34+
}
35+
36+
@keyframes headerGlow {
37+
0%, 100% {
38+
text-shadow:
39+
0 0 5px rgba(142, 236, 167, 0.3),
40+
0 0 10px rgba(52, 168, 83, 0.3),
41+
0 0 15px rgba(24, 121, 50, 0.3);
42+
}
43+
50% {
44+
text-shadow:
45+
0 0 10px rgba(52, 168, 83, 0.8),
46+
0 0 20px rgba(52, 168, 83, 0.8),
47+
0 0 30px rgba(52, 168, 83, 0.6),
48+
0 0 40px rgba(52, 168, 83, 0.4);
49+
}
50+
}
51+
52+
h1 { font-size: 2.5rem; }
53+
h2 { font-size: 1.8rem; margin-top: 40px; }
54+
p, li {
55+
color: var(--text-primary);
56+
line-height: 1.7;
57+
font-size: 1.1rem;
58+
}
59+
ul, ol {
60+
padding-left: 20px;
61+
margin-bottom: 20px;
62+
}
63+
strong {
64+
color: var(--color-accent);
65+
}
66+
67+
/* Visual Guide Styles */
68+
.visual-guide {
69+
position: relative;
70+
display: flex;
71+
gap: 20px;
72+
background: var(--color-dark);
73+
padding: 20px;
74+
border-radius: 8px;
75+
margin-top: 30px;
76+
}
77+
.mock-sidebar, .mock-editor {
78+
background: var(--bg-sidebar);
79+
border: 1px solid var(--border-color);
80+
padding: 10px;
81+
border-radius: 5px;
82+
font-family: 'Courier New', monospace;
83+
font-size: 12px;
84+
white-space: pre;
85+
color: var(--text-secondary);
86+
}
87+
.mock-sidebar { flex: 0 0 40%; }
88+
.mock-editor { flex: 1; }
89+
.mock-sidebar .highlight { color: var(--color-accent); font-weight: bold; }
90+
91+
.annotation {
92+
position: absolute;
93+
background: #2a6a3d;
94+
color: white;
95+
padding: 5px 10px;
96+
border-radius: 4px;
97+
font-size: 12px;
98+
font-weight: bold;
99+
border: 1px solid #77d48c;
100+
}
101+
.annotation::after {
102+
content: '';
103+
position: absolute;
104+
width: 40px;
105+
height: 2px;
106+
background: #77d48c;
107+
}
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+
121+
.back-button {
122+
display: inline-block;
123+
margin-top: 40px;
124+
padding: 12px 24px;
125+
background: var(--color-accent);
126+
color: var(--color-dark);
127+
text-decoration: none;
128+
font-weight: bold;
129+
border-radius: 5px;
130+
transition: var(--transition);
131+
}
132+
.back-button:hover {
133+
background: var(--color-accent-dark);
134+
transform: translateY(-2px);
135+
}
136+
137+
@media (max-width: 1200px) {
138+
.annotation { display: none; } /* Hide annotations on smaller screens for clarity */
139+
}
140+
</style>
141+
</head>
142+
<body>
143+
144+
<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>
147+
148+
<!-- Visual Guide -->
149+
<div class="visual-guide">
150+
<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>
160+
</div>
161+
<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;
175+
</div>
176+
177+
<div class="annotation" id="anno-tree">Interactive File Tree</div>
178+
<div class="annotation" id="anno-tokens">Track Token Usage</div>
179+
<div class="annotation" id="anno-structure">Shows File Relationships</div>
180+
<div class="annotation" id="anno-output">LLM-Ready Format</div>
181+
</div>
182+
183+
<h2>Features</h2>
184+
<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>
190+
</ul>
191+
192+
<h2>How to Use</h2>
193+
<ol>
194+
<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>
198+
</ol>
199+
200+
<a href="./index.html" class="back-button">
201+
<i class="fas fa-arrow-left"></i> Back to the App
202+
</a>
203+
</div>
204+
205+
</body>
206+
</html>

‎index.html‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
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">
67
<title>CodeToContext - Codebase to Prompt Converter</title>
7-
8+
89
<!-- Favicon -->
910
<link rel="icon" type="image/x-icon" href="logo.ico">
1011
<link rel="shortcut icon" type="image/x-icon" href="logo.ico">
1112
<link rel="apple-touch-icon" href="logo.png">
12-
13+
1314
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
14-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
15+
<link rel="stylesheet"
16+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
1517
<link rel="stylesheet" href="style.css">
1618
</head>
19+
1720
<body>
1821
<div class="app-container">
1922
<!-- HEADER -->
@@ -27,11 +30,18 @@
2730
<span>CodeToContext</span>
2831
</div>
2932
</div>
30-
<div class="header-right">
31-
<a href="https://github.com/Ashjha75/CocdeToContext" target="_blank" class="btn-icon" title="GitHub">
32-
<i class="fa-brands fa-github"></i>
33-
</a>
34-
</div>
33+
<div class="header-right">
34+
<div class="sidebar-select">
35+
<button class="btn-generate" id="docsbutton" onclick="window.location.href='help.html'">
36+
<span class="material-symbols-outlined">description</span>
37+
Docs
38+
</button>
39+
</div>
40+
41+
<a href="https://github.com/Ashjha75/CocdeToContext" target="_blank" class="btn-icon" title="GitHub">
42+
<i class="fa-brands fa-github"></i>
43+
</a>
44+
</div>
3545

3646
</header>
3747

@@ -167,4 +177,5 @@ <h3>EXPLORER</h3>
167177

168178
<script src="index.js"></script>
169179
</body>
180+
170181
</html>

0 commit comments

Comments
 (0)