Skip to content

Commit d0b4272

Browse files
CodyKoInABoxCodyKoInABox
authored
Create index.html
1 parent 7ec750f commit d0b4272

File tree

1 file changed

+357
-0
lines changed

1 file changed

+357
-0
lines changed

‎index.html‎

Lines changed: 357 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,357 @@
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>SpiceCode CLI - Making your code spicier</title>
7+
<style>
8+
:root {
9+
--sand-light: #f8e3c5;
10+
--sand: #e6b86b;
11+
--sand-dark: #c69645;
12+
--spice-orange: #ff4500;
13+
--spice-red: #d32f2f;
14+
--dark-bg: #1a0e0c;
15+
--text-light: #f8e3c5;
16+
}
17+
18+
body {
19+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
20+
background: linear-gradient(135deg, var(--dark-bg) 0%, #30180e 100%);
21+
color: var(--text-light);
22+
margin: 0;
23+
padding: 0;
24+
line-height: 1.6;
25+
}
26+
27+
.container {
28+
max-width: 1100px;
29+
margin: 0 auto;
30+
padding: 0 20px;
31+
}
32+
33+
header {
34+
background: linear-gradient(135deg, var(--spice-red) 0%, var(--spice-orange) 100%);
35+
color: white;
36+
padding: 1rem 0;
37+
text-align: center;
38+
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
39+
}
40+
41+
.logo-container {
42+
display: flex;
43+
align-items: center;
44+
justify-content: center;
45+
margin-bottom: 1rem;
46+
}
47+
48+
.logo {
49+
width: 100px;
50+
height: auto;
51+
margin-right: 20px;
52+
}
53+
54+
.title {
55+
font-size: 2.5rem;
56+
margin: 0;
57+
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
58+
}
59+
60+
.slogan {
61+
font-size: 1.2rem;
62+
font-style: italic;
63+
margin-top: 0.5rem;
64+
}
65+
66+
.hero {
67+
background: linear-gradient(rgba(26, 14, 12, 0.7), rgba(26, 14, 12, 0.9)), url('/img/artwork');
68+
background-size: cover;
69+
background-position: center;
70+
text-align: center;
71+
padding: 5rem 0;
72+
margin: 2rem 0;
73+
border-radius: 8px;
74+
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
75+
}
76+
77+
.hero img {
78+
max-width: 100%;
79+
height: auto;
80+
border-radius: 8px;
81+
box-shadow: 0 6px 18px rgba(0,0,0,0.5);
82+
}
83+
84+
.hero h2 {
85+
font-size: 2rem;
86+
margin-bottom: 1.5rem;
87+
color: var(--sand-light);
88+
}
89+
90+
.install-box {
91+
background-color: rgba(0,0,0,0.5);
92+
border-left: 4px solid var(--spice-orange);
93+
padding: 1.5rem;
94+
margin: 2rem auto;
95+
max-width: 500px;
96+
border-radius: 4px;
97+
font-family: 'Courier New', monospace;
98+
}
99+
100+
.install-box h3 {
101+
margin-top: 0;
102+
color: var(--sand);
103+
}
104+
105+
.install-command {
106+
background-color: #111;
107+
padding: 0.8rem 1.2rem;
108+
border-radius: 4px;
109+
font-weight: bold;
110+
color: var(--spice-orange);
111+
display: inline-block;
112+
margin: 0.5rem 0;
113+
}
114+
115+
main {
116+
padding: 2rem 0;
117+
}
118+
119+
section {
120+
margin-bottom: 3rem;
121+
}
122+
123+
h2 {
124+
color: var(--sand);
125+
border-bottom: 2px solid var(--spice-orange);
126+
padding-bottom: 0.5rem;
127+
margin-top: 2rem;
128+
}
129+
130+
.code-block {
131+
background-color: #1a0e0c;
132+
border-left: 4px solid var(--spice-orange);
133+
padding: 1rem;
134+
margin: 1rem 0;
135+
border-radius: 4px;
136+
font-family: 'Courier New', monospace;
137+
overflow-x: auto;
138+
}
139+
140+
ul {
141+
list-style-type: none;
142+
padding-left: 1rem;
143+
}
144+
145+
ul li {
146+
margin-bottom: 0.5rem;
147+
position: relative;
148+
padding-left: 1.5rem;
149+
}
150+
151+
ul li:before {
152+
content: "🌶️";
153+
position: absolute;
154+
left: 0;
155+
color: var(--spice-orange);
156+
}
157+
158+
.team {
159+
display: flex;
160+
flex-wrap: wrap;
161+
justify-content: space-between;
162+
gap: 1.5rem;
163+
margin-top: 2rem;
164+
}
165+
166+
.team-member {
167+
background-color: rgba(0,0,0,0.3);
168+
border-radius: 8px;
169+
padding: 1.5rem;
170+
flex: 1 1 300px;
171+
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
172+
transition: transform 0.3s ease;
173+
}
174+
175+
.team-member:hover {
176+
transform: translateY(-5px);
177+
}
178+
179+
.team-member h3 {
180+
color: var(--sand);
181+
margin-top: 0;
182+
}
183+
184+
.github-link {
185+
display: inline-block;
186+
margin-top: 0.5rem;
187+
color: var(--spice-orange);
188+
text-decoration: none;
189+
font-weight: bold;
190+
transition: color 0.2s ease;
191+
}
192+
193+
.github-link:hover {
194+
color: var(--spice-red);
195+
}
196+
197+
footer {
198+
background-color: rgba(0,0,0,0.5);
199+
text-align: center;
200+
padding: 2rem 0;
201+
margin-top: 3rem;
202+
}
203+
204+
.official-link {
205+
display: inline-block;
206+
margin: 1rem 0;
207+
padding: 0.8rem 1.5rem;
208+
background: linear-gradient(135deg, var(--spice-red) 0%, var(--spice-orange) 100%);
209+
color: white;
210+
text-decoration: none;
211+
font-weight: bold;
212+
border-radius: 4px;
213+
transition: transform 0.2s ease;
214+
}
215+
216+
.official-link:hover {
217+
transform: translateY(-3px);
218+
}
219+
220+
@media (max-width: 768px) {
221+
.title {
222+
font-size: 2rem;
223+
}
224+
225+
.hero {
226+
padding: 3rem 0;
227+
}
228+
229+
.team {
230+
flex-direction: column;
231+
}
232+
}
233+
</style>
234+
</head>
235+
<body>
236+
<header>
237+
<div class="container">
238+
<div class="logo-container">
239+
<img src="/img/logo" alt="SpiceCode Logo" class="logo">
240+
<h1 class="title">SpiceCode CLI</h1>
241+
</div>
242+
<p class="slogan">🌶️ Making your code spicier 😈🔥🥵</p>
243+
</div>
244+
</header>
245+
246+
<div class="container">
247+
<div class="hero">
248+
<h2>The best CLI tool to analyze and improve your code!</h2>
249+
<p>Where the spice runs free.</p>
250+
<img src="/img/artwork" alt="SpiceCode Artwork">
251+
252+
<div class="install-box">
253+
<h3>Download our tool via PIP</h3>
254+
<div class="install-command">pip install spicecode</div>
255+
</div>
256+
</div>
257+
258+
<main>
259+
<section id="documentation">
260+
<h2>Documentation</h2>
261+
262+
<h3>Installing via PIP</h3>
263+
<ul>
264+
<li>Make sure you have Python installed on your system</li>
265+
<li>Open the terminal</li>
266+
<li>Install SpiceCode via PIP with:</li>
267+
</ul>
268+
<div class="code-block">pip install spicecode</div>
269+
270+
<h3>Using SpiceCode</h3>
271+
<ul>
272+
<li>After installing via PIP, you can run these three commands: <em>(replace file with the filename)</em></li>
273+
</ul>
274+
<div class="code-block">spice hello</div>
275+
<div class="code-block">spice translate</div>
276+
<div class="code-block">spice analyze FILE</div>
277+
278+
<h4>EXAMPLE:</h4>
279+
<div class="code-block">spice analyze code.js</div>
280+
281+
<h3>Supported Programming Languages for Analysis:</h3>
282+
<ul>
283+
<li>Python <strong>(.py)</strong></li>
284+
<li>JavaScript <strong>(.js)</strong></li>
285+
<li>Ruby <strong>(.rb)</strong></li>
286+
<li>Go <strong>(.go)</strong></li>
287+
<li>Many more <strong>coming soon!</strong></li>
288+
</ul>
289+
<p><strong>All lexers and parsers are built by us. We don't use external libraries/packages to parse your code.</strong></p>
290+
<p>You can <strong>visit our page on the pypi registry</strong>: <a href="https://pypi.org/project/spicecode/" class="github-link">https://pypi.org/project/spicecode/</a></p>
291+
292+
<h3>For Development</h3>
293+
<ul>
294+
<li>Clone the repo to your machine</li>
295+
<li>Go to the cloned spicecode folder</li>
296+
<li>Create a python virtual environment (venv):</li>
297+
</ul>
298+
<div class="code-block">python -m venv venv</div>
299+
300+
<ul>
301+
<li>Activate your virtual environment:</li>
302+
<li><strong>Windows</strong></li>
303+
</ul>
304+
<div class="code-block">./venv/Scripts/activate</div>
305+
306+
<ul>
307+
<li><strong>Linux</strong></li>
308+
</ul>
309+
<div class="code-block">source ./venv/bin/activate</div>
310+
311+
<ul>
312+
<li>Install all packages from requirements.txt:</li>
313+
</ul>
314+
<div class="code-block">pip install -r requirements.txt</div>
315+
316+
<ul>
317+
<li>Install (build) the spicecode package locally:</li>
318+
</ul>
319+
<div class="code-block">pip install -e .</div>
320+
321+
<ul>
322+
<li>Have fun!</li>
323+
</ul>
324+
<div class="code-block">spice version</div>
325+
<div class="code-block">spice hello</div>
326+
<div class="code-block">spice translate</div>
327+
<div class="code-block">spice analyze</div>
328+
</section>
329+
330+
<section id="team">
331+
<h2>Our Team</h2>
332+
<div class="team">
333+
<div class="team-member">
334+
<h3>Maruan Biasi</h3>
335+
<a href="https://github.com/CodyKoInABox" class="github-link">GitHub Profile</a>
336+
</div>
337+
338+
<div class="team-member">
339+
<h3>Icaro Botelho</h3>
340+
<a href="https://github.com/icrcode" class="github-link">GitHub Profile</a>
341+
</div>
342+
343+
<div class="team-member">
344+
<h3>Gustavo Martins</h3>
345+
<a href="https://github.com/gtins" class="github-link">GitHub Profile</a>
346+
</div>
347+
</div>
348+
</section>
349+
</main>
350+
351+
<footer>
352+
<a href="https://github.com/SpiceCodeCLI" class="official-link">Visit our GitHub</a>
353+
<p>&copy; 2025 SpiceCode CLI. All rights reserved.</p>
354+
</footer>
355+
</div>
356+
</body>
357+
</html>

0 commit comments

Comments
 (0)