Skip to content

Commit 4098f2b

Browse files
DanexCodrDanexCodr
authored
Update index.html
1 parent 50db6e3 commit 4098f2b

1 file changed

Lines changed: 110 additions & 75 deletions

File tree

‎docs/index.html‎

Lines changed: 110 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,14 @@
66
<title>Coderive - Modern Programming Language</title>
77
<style>
88
:root {
9-
--primary: #2c3e50;
10-
--secondary: #3498db;
11-
--accent: #e74c3c;
12-
--light: #ecf0f1;
13-
--dark: #2c3e50;
14-
--success: #27ae60;
15-
--warning: #f39c12;
16-
--code-bg: #1e1e1e;
17-
--code-text: #d4d4d4;
9+
--bg-primary: #1e1e1e;
10+
--bg-secondary: #252526;
11+
--bg-tertiary: #2d2d30;
12+
--accent-primary: #007acc;
13+
--accent-hover: #005a9e;
14+
--text-primary: #ffffff;
15+
--text-secondary: #858585;
16+
--border-color: #333;
1817
}
1918

2019
* {
@@ -26,15 +25,17 @@
2625
body {
2726
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
2827
line-height: 1.6;
29-
color: var(--dark);
30-
background-color: var(--light);
28+
color: var(--text-primary);
29+
background-color: var(--bg-primary);
30+
min-height: 100vh;
3131
}
3232

3333
header {
34-
background: linear-gradient(135deg, var(--primary), var(--secondary));
35-
color: white;
34+
background: var(--bg-tertiary);
35+
color: var(--text-primary);
3636
padding: 2rem 1rem;
3737
text-align: center;
38+
border-bottom: 1px solid var(--border-color);
3839
}
3940

4041
.container {
@@ -46,48 +47,54 @@
4647
h1 {
4748
font-size: 3rem;
4849
margin-bottom: 0.5rem;
50+
color: var(--text-primary);
4951
}
5052

5153
.tagline {
5254
font-size: 1.5rem;
5355
margin-bottom: 1.5rem;
5456
font-weight: 300;
57+
color: var(--text-secondary);
5558
}
5659

5760
.btn {
5861
display: inline-block;
59-
background-color: var(--accent);
60-
color: white;
62+
background-color: var(--accent-primary);
63+
color: var(--text-primary);
6164
padding: 0.75rem 1.5rem;
6265
border-radius: 4px;
6366
text-decoration: none;
6467
font-weight: bold;
6568
transition: all 0.3s ease;
6669
margin: 0.5rem;
70+
border: none;
71+
cursor: pointer;
72+
font-family: inherit;
6773
}
6874

6975
.btn:hover {
70-
background-color: #c0392b;
76+
background-color: var(--accent-hover);
7177
transform: translateY(-2px);
7278
}
7379

7480
.btn-secondary {
7581
background-color: transparent;
76-
border: 2px solid white;
82+
border: 2px solid var(--accent-primary);
7783
}
7884

7985
.btn-secondary:hover {
80-
background-color: rgba(255, 255, 255, 0.1);
86+
background-color: rgba(0, 122, 204, 0.1);
8187
}
8288

8389
section {
8490
padding: 4rem 1rem;
91+
border-bottom: 1px solid var(--border-color);
8592
}
8693

8794
.section-title {
8895
text-align: center;
8996
margin-bottom: 3rem;
90-
color: var(--primary);
97+
color: var(--text-primary);
9198
position: relative;
9299
}
93100

@@ -96,7 +103,7 @@
96103
display: block;
97104
width: 80px;
98105
height: 4px;
99-
background-color: var(--secondary);
106+
background-color: var(--accent-primary);
100107
margin: 0.5rem auto;
101108
}
102109

@@ -107,11 +114,12 @@
107114
}
108115

109116
.feature-card {
110-
background-color: white;
117+
background-color: var(--bg-secondary);
111118
border-radius: 8px;
112119
padding: 2rem;
113-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
120+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
114121
transition: transform 0.3s ease;
122+
border: 1px solid var(--border-color);
115123
}
116124

117125
.feature-card:hover {
@@ -120,39 +128,28 @@
120128

121129
.feature-icon {
122130
font-size: 2.5rem;
123-
color: var(--secondary);
131+
color: var(--accent-primary);
124132
margin-bottom: 1rem;
125133
}
126134

127135
.feature-card h3 {
128136
margin-bottom: 1rem;
129-
color: var(--primary);
137+
color: var(--text-primary);
138+
}
139+
140+
.feature-card p {
141+
color: var(--text-secondary);
130142
}
131143

132144
.code-example {
133-
background-color: var(--code-bg);
134-
color: var(--code-text);
145+
background-color: var(--bg-secondary);
146+
color: var(--text-primary);
135147
border-radius: 8px;
136148
padding: 1.5rem;
137149
margin: 1.5rem 0;
138150
overflow-x: auto;
139151
font-family: 'Courier New', Courier, monospace;
140-
}
141-
142-
.code-keyword {
143-
color: #569cd6;
144-
}
145-
146-
.code-string {
147-
color: #ce9178;
148-
}
149-
150-
.code-number {
151-
color: #b5cea8;
152-
}
153-
154-
.code-comment {
155-
color: #6a9955;
152+
border: 1px solid var(--border-color);
156153
}
157154

158155
.runners {
@@ -163,16 +160,17 @@
163160
}
164161

165162
.runner-card {
166-
background-color: white;
163+
background-color: var(--bg-secondary);
167164
border-radius: 8px;
168165
padding: 1.5rem;
169-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
166+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
170167
flex: 1 1 300px;
171168
max-width: 350px;
169+
border: 1px solid var(--border-color);
172170
}
173171

174172
.runner-card h3 {
175-
color: var(--primary);
173+
color: var(--text-primary);
176174
margin-bottom: 1rem;
177175
display: flex;
178176
align-items: center;
@@ -181,7 +179,12 @@
181179
.runner-card h3::before {
182180
content: '▶';
183181
margin-right: 0.5rem;
184-
color: var(--success);
182+
color: #27ae60;
183+
}
184+
185+
.runner-card p {
186+
color: var(--text-secondary);
187+
margin-bottom: 1rem;
185188
}
186189

187190
.runner-card ul {
@@ -192,29 +195,50 @@
192195
.runner-card li {
193196
margin-bottom: 0.5rem;
194197
position: relative;
198+
color: var(--text-secondary);
195199
}
196200

197201
.runner-card li::before {
198202
content: '•';
199-
color: var(--secondary);
203+
color: var(--accent-primary);
200204
position: absolute;
201205
left: -1rem;
202206
}
203207

204208
.command {
205-
background-color: #f8f9fa;
206-
border-left: 4px solid var(--secondary);
209+
background-color: var(--bg-primary);
210+
border-left: 4px solid var(--accent-primary);
207211
padding: 0.75rem;
208212
margin: 0.5rem 0;
209213
font-family: 'Courier New', Courier, monospace;
210214
border-radius: 0 4px 4px 0;
215+
color: var(--text-primary);
216+
}
217+
218+
.try-editor {
219+
text-align: center;
220+
background: var(--bg-secondary);
221+
padding: 3rem 1rem;
222+
border-radius: 8px;
223+
border: 1px solid var(--border-color);
224+
}
225+
226+
.try-editor h2 {
227+
margin-bottom: 1rem;
228+
color: var(--text-primary);
229+
}
230+
231+
.try-editor p {
232+
margin-bottom: 2rem;
233+
color: var(--text-secondary);
211234
}
212235

213236
footer {
214-
background-color: var(--primary);
215-
color: white;
237+
background-color: var(--bg-tertiary);
238+
color: var(--text-primary);
216239
text-align: center;
217240
padding: 2rem 1rem;
241+
border-top: 1px solid var(--border-color);
218242
}
219243

220244
.footer-links {
@@ -225,13 +249,13 @@
225249
}
226250

227251
.footer-links a {
228-
color: white;
252+
color: var(--text-primary);
229253
text-decoration: none;
230254
transition: color 0.3s ease;
231255
}
232256

233257
.footer-links a:hover {
234-
color: var(--secondary);
258+
color: var(--accent-primary);
235259
}
236260

237261
@media (max-width: 768px) {
@@ -256,7 +280,8 @@ <h1>Coderive</h1>
256280
<p class="tagline">A modern, expressive programming language with interpreter and compiler capabilities</p>
257281
<div class="cta-buttons">
258282
<a href="#getting-started" class="btn">Get Started</a>
259-
<a href="https://github.com/your-username/coderive" class="btn btn-secondary">View on GitHub</a>
283+
<a href="editor.html" class="btn btn-secondary">Try Online Editor</a>
284+
<a href="https://github.com/DanexCodr/Coderive" class="btn btn-secondary">View on GitHub</a>
260285
</div>
261286
</div>
262287
</header>
@@ -299,31 +324,31 @@ <h3>Android Compatible</h3>
299324
</div>
300325
</section>
301326

302-
<section id="code-examples" style="background-color: #f8f9fa;">
327+
<section id="code-examples">
303328
<div class="container">
304329
<h2 class="section-title">Code Examples</h2>
305330
<div class="code-example">
306-
<pre><code><span class="code-comment">// Simple variable assignment and output</span>
307-
name = <span class="code-string">"Coderive"</span>
308-
version = <span class="code-number">1.0</span>
309-
output <span class="code-string">"Welcome to "</span> + name + <span class="code-string">" v"</span> + version
331+
<pre><code>// Simple variable assignment and output
332+
name = "Coderive"
333+
version = 1.0
334+
output "Welcome to " + name + " v" + version
310335

311-
<span class="code-comment">// Conditional logic</span>
312-
x = <span class="code-number">10</span>
313-
<span class="code-keyword">if</span> x > <span class="code-number">5</span> {
314-
output <span class="code-string">"x is greater than 5"</span>
315-
} <span class="code-keyword">else</span> {
316-
output <span class="code-string">"x is 5 or less"</span>
336+
// Conditional logic
337+
x = 10
338+
if x > 5 {
339+
output "x is greater than 5"
340+
} else {
341+
output "x is 5 or less"
317342
}
318343

319-
<span class="code-comment">// Looping constructs</span>
320-
<span class="code-keyword">for</span> i <span class="code-keyword">in</span> <span class="code-number">1</span> <span class="code-keyword">to</span> <span class="code-number">5</span> {
321-
output <span class="code-string">"Iteration: "</span> + i
344+
// Looping constructs
345+
for i in 1 to 5 {
346+
output "Iteration: " + i
322347
}
323348

324-
<span class="code-comment">// Using slots for data storage</span>
325-
~ result <span class="code-number">42</span>
326-
output <span class="code-string">"The answer is: "</span> + ~result</code></pre>
349+
// Using slots for data storage
350+
~ result 42
351+
output "The answer is: " + ~result</code></pre>
327352
</div>
328353
</div>
329354
</section>
@@ -376,15 +401,25 @@ <h3>CoderiveREPL</h3>
376401
</div>
377402
</section>
378403

379-
<section id="getting-started" style="background-color: #f8f9fa;">
404+
<section id="try-online">
405+
<div class="container">
406+
<div class="try-editor">
407+
<h2>Try Coderive Online</h2>
408+
<p>Experience Coderive right in your browser with our online editor. No installation required.</p>
409+
<a href="editor.html" class="btn">Open Online Editor</a>
410+
</div>
411+
</div>
412+
</section>
413+
414+
<section id="getting-started">
380415
<div class="container">
381416
<h2 class="section-title">Getting Started</h2>
382417
<div class="features-grid">
383418
<div class="feature-card">
384419
<h3>1. Installation</h3>
385420
<p>Clone the repository and build the project:</p>
386-
<div class="command">git clone https://github.com/your-username/coderive.git
387-
cd coderive
421+
<div class="command">git clone https://github.com/DanexCodr/Coderive.git
422+
cd Coderive
388423
./gradlew build</div>
389424
</div>
390425
<div class="feature-card">
@@ -408,7 +443,7 @@ <h3>3. Run Your Code</h3>
408443
<a href="https://github.com/DanexCodr/Coderive">GitHub</a>
409444
<a href="#features">Features</a>
410445
<a href="#getting-started">Documentation</a>
411-
<a href="danisonnunez001@gmail.com">Contact</a>
446+
<a href="mailto:danisonnunez001@gmail.com">Contact</a>
412447
</div>
413448
<p>&copy; 2025 Coderive Project. All rights reserved.</p>
414449
</div>

0 commit comments

Comments
 (0)