clou-lang 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +128 -0
- package/ai/clou-ai-prompt.md +239 -0
- package/bin/clou.js +281 -0
- package/examples/calculator.clou +41 -0
- package/examples/hello-terminal.clou +22 -0
- package/examples/hello.clou +37 -0
- package/examples/hello.html +220 -0
- package/examples/multipage/about.html +319 -0
- package/examples/multipage/contact.html +308 -0
- package/examples/multipage/index.html +322 -0
- package/examples/multipage/shared.clou +19 -0
- package/examples/multipage/site.clou +102 -0
- package/examples/portfolio.clou +51 -0
- package/examples/portfolio.html +217 -0
- package/examples/quiz.clou +90 -0
- package/examples/showcase.clou +136 -0
- package/examples/showcase.html +410 -0
- package/examples/startup.clou +153 -0
- package/examples/startup.html +469 -0
- package/examples/themes-demo.clou +117 -0
- package/examples/themes-demo.html +429 -0
- package/package.json +48 -0
- package/playground/clou-browser.js +2576 -0
- package/playground/index.html +682 -0
- package/src/bundle-browser.js +62 -0
- package/src/compiler.js +761 -0
- package/src/devserver.js +154 -0
- package/src/index.js +87 -0
- package/src/lexer.js +456 -0
- package/src/parser.js +879 -0
- package/src/terminal-parser.js +358 -0
- package/src/terminal-runtime.js +310 -0
- package/src/themes.js +469 -0
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import "shared.clou"
|
|
2
|
+
|
|
3
|
+
// ── Home Page ──
|
|
4
|
+
page "Home - {brand}" at "/":
|
|
5
|
+
theme "midnight"
|
|
6
|
+
use nav()
|
|
7
|
+
|
|
8
|
+
section "hero":
|
|
9
|
+
center
|
|
10
|
+
space 30
|
|
11
|
+
heading "Welcome to {brand}":
|
|
12
|
+
huge
|
|
13
|
+
animate fade
|
|
14
|
+
text "A multi-page website built with Clou!":
|
|
15
|
+
big
|
|
16
|
+
space 20
|
|
17
|
+
row:
|
|
18
|
+
center
|
|
19
|
+
link "Learn About Us" to "about.html"
|
|
20
|
+
link "Get In Touch" to "contact.html"
|
|
21
|
+
space 30
|
|
22
|
+
|
|
23
|
+
section "features":
|
|
24
|
+
center
|
|
25
|
+
heading "What We Do"
|
|
26
|
+
space 20
|
|
27
|
+
grid:
|
|
28
|
+
card:
|
|
29
|
+
icon "🎨"
|
|
30
|
+
heading "Design"
|
|
31
|
+
text "Beautiful websites in seconds"
|
|
32
|
+
card:
|
|
33
|
+
icon "⚡"
|
|
34
|
+
heading "Speed"
|
|
35
|
+
text "Lightning fast development"
|
|
36
|
+
card:
|
|
37
|
+
icon "🌍"
|
|
38
|
+
heading "Global"
|
|
39
|
+
text "Works everywhere"
|
|
40
|
+
|
|
41
|
+
use site-footer()
|
|
42
|
+
|
|
43
|
+
// ── About Page ──
|
|
44
|
+
page "About - {brand}" at "/about":
|
|
45
|
+
theme "midnight"
|
|
46
|
+
use nav()
|
|
47
|
+
|
|
48
|
+
section "about":
|
|
49
|
+
center
|
|
50
|
+
space 30
|
|
51
|
+
heading "About Us":
|
|
52
|
+
huge
|
|
53
|
+
animate fade
|
|
54
|
+
space 20
|
|
55
|
+
card:
|
|
56
|
+
padding 40
|
|
57
|
+
text "We are a small team building the simplest programming language in the world."
|
|
58
|
+
text "Our mission: make web development accessible to everyone — especially kids."
|
|
59
|
+
space 20
|
|
60
|
+
heading "Our Team"
|
|
61
|
+
space 10
|
|
62
|
+
grid:
|
|
63
|
+
card:
|
|
64
|
+
icon "👩💻"
|
|
65
|
+
heading "Sarah"
|
|
66
|
+
text "Lead Developer"
|
|
67
|
+
card:
|
|
68
|
+
icon "👨🎨"
|
|
69
|
+
heading "Marcus"
|
|
70
|
+
text "Designer"
|
|
71
|
+
card:
|
|
72
|
+
icon "👩🔬"
|
|
73
|
+
heading "Aisha"
|
|
74
|
+
text "CTO"
|
|
75
|
+
|
|
76
|
+
use site-footer()
|
|
77
|
+
|
|
78
|
+
// ── Contact Page ──
|
|
79
|
+
page "Contact - {brand}" at "/contact":
|
|
80
|
+
theme "midnight"
|
|
81
|
+
use nav()
|
|
82
|
+
|
|
83
|
+
section "contact":
|
|
84
|
+
center
|
|
85
|
+
space 30
|
|
86
|
+
heading "Contact Us":
|
|
87
|
+
huge
|
|
88
|
+
animate fade
|
|
89
|
+
space 20
|
|
90
|
+
card:
|
|
91
|
+
center
|
|
92
|
+
padding 40
|
|
93
|
+
text "We'd love to hear from you!"
|
|
94
|
+
space 20
|
|
95
|
+
input "Your name"
|
|
96
|
+
input "Your email"
|
|
97
|
+
input "Your message"
|
|
98
|
+
space 10
|
|
99
|
+
button "Send Message":
|
|
100
|
+
show message "Thanks for reaching out! We'll get back to you soon."
|
|
101
|
+
|
|
102
|
+
use site-footer()
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
page "My Portfolio":
|
|
2
|
+
|
|
3
|
+
box:
|
|
4
|
+
center
|
|
5
|
+
heading "Hi, I'm Alex!"
|
|
6
|
+
text "I'm a young developer who loves making cool stuff."
|
|
7
|
+
rounded
|
|
8
|
+
shadow
|
|
9
|
+
background color #ffffff
|
|
10
|
+
padding 40
|
|
11
|
+
|
|
12
|
+
line
|
|
13
|
+
|
|
14
|
+
box:
|
|
15
|
+
heading "My Projects"
|
|
16
|
+
|
|
17
|
+
box:
|
|
18
|
+
text "Project 1 - A cool game"
|
|
19
|
+
rounded
|
|
20
|
+
shadow
|
|
21
|
+
background color #e8f4fd
|
|
22
|
+
padding 20
|
|
23
|
+
|
|
24
|
+
box:
|
|
25
|
+
text "Project 2 - A fun website"
|
|
26
|
+
rounded
|
|
27
|
+
shadow
|
|
28
|
+
background color #fde8f4
|
|
29
|
+
padding 20
|
|
30
|
+
|
|
31
|
+
box:
|
|
32
|
+
text "Project 3 - An awesome app"
|
|
33
|
+
rounded
|
|
34
|
+
shadow
|
|
35
|
+
background color #e8fde8
|
|
36
|
+
padding 20
|
|
37
|
+
|
|
38
|
+
line
|
|
39
|
+
|
|
40
|
+
box:
|
|
41
|
+
center
|
|
42
|
+
heading "Contact Me"
|
|
43
|
+
input "Your name"
|
|
44
|
+
input "Your message"
|
|
45
|
+
button "Send Message":
|
|
46
|
+
show message "Thanks for reaching out!"
|
|
47
|
+
|
|
48
|
+
style:
|
|
49
|
+
background color #1a1a2e
|
|
50
|
+
text color #ffffff
|
|
51
|
+
button color #e94560
|
|
@@ -0,0 +1,217 @@
|
|
|
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>My Portfolio</title>
|
|
7
|
+
<style>
|
|
8
|
+
/* Clou - Generated Stylesheet */
|
|
9
|
+
* {
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 0;
|
|
12
|
+
box-sizing: border-box;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
body {
|
|
16
|
+
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
|
|
17
|
+
line-height: 1.6;
|
|
18
|
+
min-height: 100vh;
|
|
19
|
+
background-color: #1a1a2e;
|
|
20
|
+
color: #ffffff;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.clou-page {
|
|
24
|
+
padding: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.clou-box {
|
|
28
|
+
padding: 20px;
|
|
29
|
+
margin: 10px 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.clou-row {
|
|
33
|
+
display: flex;
|
|
34
|
+
flex-wrap: wrap;
|
|
35
|
+
gap: 16px;
|
|
36
|
+
align-items: center;
|
|
37
|
+
margin: 10px 0;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.clou-section {
|
|
41
|
+
padding: 60px 20px;
|
|
42
|
+
max-width: 1200px;
|
|
43
|
+
margin: 0 auto;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.clou-grid {
|
|
47
|
+
display: grid;
|
|
48
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
49
|
+
gap: 24px;
|
|
50
|
+
margin: 10px 0;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.clou-card {
|
|
54
|
+
background: rgba(255,255,255,0.1);
|
|
55
|
+
backdrop-filter: blur(10px);
|
|
56
|
+
border-radius: 16px;
|
|
57
|
+
padding: 24px;
|
|
58
|
+
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
|
|
59
|
+
transition: transform 0.3s, box-shadow 0.3s;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.clou-card:hover {
|
|
63
|
+
transform: translateY(-4px);
|
|
64
|
+
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
h1 {
|
|
68
|
+
font-size: 2.5em;
|
|
69
|
+
margin: 16px 0 8px 0;
|
|
70
|
+
font-weight: 700;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
h2 {
|
|
74
|
+
font-size: 1.5em;
|
|
75
|
+
margin: 16px 0 8px 0;
|
|
76
|
+
font-weight: 600;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
p {
|
|
80
|
+
margin: 8px 0;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
img {
|
|
84
|
+
max-width: 100%;
|
|
85
|
+
height: auto;
|
|
86
|
+
border-radius: 8px;
|
|
87
|
+
margin: 10px 0;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
button, .clou-button {
|
|
91
|
+
padding: 12px 28px;
|
|
92
|
+
font-size: 16px;
|
|
93
|
+
font-weight: 600;
|
|
94
|
+
border: none;
|
|
95
|
+
border-radius: 8px;
|
|
96
|
+
background-color: #e94560;
|
|
97
|
+
color: white;
|
|
98
|
+
cursor: pointer;
|
|
99
|
+
transition: transform 0.15s, opacity 0.2s, box-shadow 0.2s;
|
|
100
|
+
margin: 8px 4px;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
button:hover, .clou-button:hover {
|
|
104
|
+
opacity: 0.9;
|
|
105
|
+
transform: scale(1.03);
|
|
106
|
+
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
button:active, .clou-button:active {
|
|
110
|
+
transform: scale(0.97);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
a {
|
|
114
|
+
color: inherit;
|
|
115
|
+
text-decoration: none;
|
|
116
|
+
border-bottom: 1px solid transparent;
|
|
117
|
+
transition: border-color 0.2s, opacity 0.2s;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
a:hover {
|
|
121
|
+
opacity: 0.8;
|
|
122
|
+
border-bottom-color: currentColor;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
input, textarea, .clou-input {
|
|
126
|
+
padding: 12px 16px;
|
|
127
|
+
font-size: 16px;
|
|
128
|
+
border: 2px solid rgba(255,255,255,0.2);
|
|
129
|
+
border-radius: 8px;
|
|
130
|
+
outline: none;
|
|
131
|
+
background: rgba(255,255,255,0.1);
|
|
132
|
+
color: inherit;
|
|
133
|
+
transition: border-color 0.2s, box-shadow 0.2s;
|
|
134
|
+
width: 100%;
|
|
135
|
+
max-width: 400px;
|
|
136
|
+
margin: 8px 0;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
input:focus, textarea:focus {
|
|
140
|
+
border-color: #e94560;
|
|
141
|
+
box-shadow: 0 0 0 3px #e9456033;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
input::placeholder, textarea::placeholder {
|
|
145
|
+
color: inherit;
|
|
146
|
+
opacity: 0.5;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
ul, ol {
|
|
150
|
+
padding-left: 24px;
|
|
151
|
+
margin: 8px 0;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
li {
|
|
155
|
+
margin: 4px 0;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
hr {
|
|
159
|
+
border: none;
|
|
160
|
+
border-top: 1px solid rgba(128,128,128,0.2);
|
|
161
|
+
margin: 32px 0;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
video {
|
|
165
|
+
max-width: 100%;
|
|
166
|
+
border-radius: 8px;
|
|
167
|
+
margin: 10px 0;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.clou-icon {
|
|
171
|
+
font-size: 2em;
|
|
172
|
+
margin: 8px 0;
|
|
173
|
+
display: inline-block;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.clou-footer {
|
|
177
|
+
padding: 40px 20px;
|
|
178
|
+
margin-top: 40px;
|
|
179
|
+
text-align: center;
|
|
180
|
+
opacity: 0.7;
|
|
181
|
+
border-top: 1px solid rgba(128,128,128,0.2);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
</style>
|
|
185
|
+
</head>
|
|
186
|
+
<body>
|
|
187
|
+
<div class="clou-box" style="text-align: center; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); background-color: #ffffff; padding: 40px">
|
|
188
|
+
<h2>Hi, I'm Alex!</h2>
|
|
189
|
+
<p>I'm a young developer who loves making cool stuff.</p>
|
|
190
|
+
</div>
|
|
191
|
+
<hr>
|
|
192
|
+
<div class="clou-box">
|
|
193
|
+
<h2>My Projects</h2>
|
|
194
|
+
<div class="clou-box" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); background-color: #e8f4fd; padding: 20px">
|
|
195
|
+
<p>Project 1 - A cool game</p>
|
|
196
|
+
</div>
|
|
197
|
+
<div class="clou-box" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); background-color: #fde8f4; padding: 20px">
|
|
198
|
+
<p>Project 2 - A fun website</p>
|
|
199
|
+
</div>
|
|
200
|
+
<div class="clou-box" style="border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); background-color: #e8fde8; padding: 20px">
|
|
201
|
+
<p>Project 3 - An awesome app</p>
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
<hr>
|
|
205
|
+
<div class="clou-box" style="text-align: center">
|
|
206
|
+
<h2>Contact Me</h2>
|
|
207
|
+
<input id="clou-1" type="text" placeholder="Your name">
|
|
208
|
+
<input id="clou-2" type="text" placeholder="Your message">
|
|
209
|
+
<button id="clou-3">Send Message</button>
|
|
210
|
+
</div>
|
|
211
|
+
<script>
|
|
212
|
+
document.getElementById('clou-3').addEventListener('click', function() {
|
|
213
|
+
alert("Thanks for reaching out!");
|
|
214
|
+
});
|
|
215
|
+
</script>
|
|
216
|
+
</body>
|
|
217
|
+
</html>
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
// Clou Quiz Game - Shows off functions, conditions, and variables
|
|
2
|
+
|
|
3
|
+
app "Clou Quiz":
|
|
4
|
+
clear
|
|
5
|
+
print color cyan "╔═══════════════════════════════════╗"
|
|
6
|
+
print color cyan "║ CLOU QUIZ GAME ║"
|
|
7
|
+
print color cyan "║ Test your knowledge! ║"
|
|
8
|
+
print color cyan "╚═══════════════════════════════════╝"
|
|
9
|
+
print ""
|
|
10
|
+
|
|
11
|
+
set score to "0"
|
|
12
|
+
set total to "5"
|
|
13
|
+
|
|
14
|
+
// Question 1
|
|
15
|
+
print color yellow "Question 1/5:"
|
|
16
|
+
print "What is the capital of France?"
|
|
17
|
+
print color gray " a) London b) Paris c) Berlin"
|
|
18
|
+
ask "Your answer:" save as answer
|
|
19
|
+
if answer is "b":
|
|
20
|
+
print color green "Correct!"
|
|
21
|
+
add 1 to score
|
|
22
|
+
else:
|
|
23
|
+
print color red "Wrong! It's Paris."
|
|
24
|
+
print ""
|
|
25
|
+
|
|
26
|
+
// Question 2
|
|
27
|
+
print color yellow "Question 2/5:"
|
|
28
|
+
print "What is 7 x 8?"
|
|
29
|
+
print color gray " a) 54 b) 56 c) 58"
|
|
30
|
+
ask "Your answer:" save as answer
|
|
31
|
+
if answer is "b":
|
|
32
|
+
print color green "Correct!"
|
|
33
|
+
add 1 to score
|
|
34
|
+
else:
|
|
35
|
+
print color red "Wrong! It's 56."
|
|
36
|
+
print ""
|
|
37
|
+
|
|
38
|
+
// Question 3
|
|
39
|
+
print color yellow "Question 3/5:"
|
|
40
|
+
print "Which planet is closest to the Sun?"
|
|
41
|
+
print color gray " a) Venus b) Earth c) Mercury"
|
|
42
|
+
ask "Your answer:" save as answer
|
|
43
|
+
if answer is "c":
|
|
44
|
+
print color green "Correct!"
|
|
45
|
+
add 1 to score
|
|
46
|
+
else:
|
|
47
|
+
print color red "Wrong! It's Mercury."
|
|
48
|
+
print ""
|
|
49
|
+
|
|
50
|
+
// Question 4
|
|
51
|
+
print color yellow "Question 4/5:"
|
|
52
|
+
print "What programming language is Clou written in?"
|
|
53
|
+
print color gray " a) Python b) JavaScript c) Rust"
|
|
54
|
+
ask "Your answer:" save as answer
|
|
55
|
+
if answer is "b":
|
|
56
|
+
print color green "Correct!"
|
|
57
|
+
add 1 to score
|
|
58
|
+
else:
|
|
59
|
+
print color red "Wrong! It's JavaScript."
|
|
60
|
+
print ""
|
|
61
|
+
|
|
62
|
+
// Question 5
|
|
63
|
+
print color yellow "Question 5/5:"
|
|
64
|
+
print "What year was the World Wide Web invented?"
|
|
65
|
+
print color gray " a) 1989 b) 1995 c) 2000"
|
|
66
|
+
ask "Your answer:" save as answer
|
|
67
|
+
if answer is "a":
|
|
68
|
+
print color green "Correct!"
|
|
69
|
+
add 1 to score
|
|
70
|
+
else:
|
|
71
|
+
print color red "Wrong! It was 1989."
|
|
72
|
+
print ""
|
|
73
|
+
|
|
74
|
+
// Results
|
|
75
|
+
print "═══════════════════════════════════"
|
|
76
|
+
print color cyan "RESULTS:"
|
|
77
|
+
print color yellow "You got {score} out of {total} correct!"
|
|
78
|
+
print ""
|
|
79
|
+
|
|
80
|
+
if score is "5":
|
|
81
|
+
print color green "PERFECT SCORE! You're a genius!"
|
|
82
|
+
if score greater than 3:
|
|
83
|
+
print color green "Great job! Very impressive!"
|
|
84
|
+
if score is "3":
|
|
85
|
+
print color yellow "Not bad! Keep learning!"
|
|
86
|
+
if score less than 3:
|
|
87
|
+
print color red "Better luck next time!"
|
|
88
|
+
|
|
89
|
+
print ""
|
|
90
|
+
print color cyan "Thanks for playing!"
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
page "Clou - The Simplest Programming Language":
|
|
2
|
+
|
|
3
|
+
navbar "Clou":
|
|
4
|
+
link "Features" to "#features"
|
|
5
|
+
link "Examples" to "#examples"
|
|
6
|
+
link "Get Started" to "#start"
|
|
7
|
+
|
|
8
|
+
// Hero Section
|
|
9
|
+
section "hero":
|
|
10
|
+
center
|
|
11
|
+
space 40
|
|
12
|
+
icon "🚀"
|
|
13
|
+
heading "Build Websites in Seconds":
|
|
14
|
+
huge
|
|
15
|
+
animate fade
|
|
16
|
+
space 10
|
|
17
|
+
text "The programming language so simple, even kids can code.":
|
|
18
|
+
big
|
|
19
|
+
animate slide
|
|
20
|
+
space 20
|
|
21
|
+
row:
|
|
22
|
+
center
|
|
23
|
+
button "Get Started":
|
|
24
|
+
open "demo"
|
|
25
|
+
button "See Examples":
|
|
26
|
+
go to "#examples"
|
|
27
|
+
space 40
|
|
28
|
+
|
|
29
|
+
// Features Section
|
|
30
|
+
section "features":
|
|
31
|
+
center
|
|
32
|
+
heading "Why Clou?":
|
|
33
|
+
huge
|
|
34
|
+
animate fade
|
|
35
|
+
space 20
|
|
36
|
+
grid:
|
|
37
|
+
card:
|
|
38
|
+
icon "⚡"
|
|
39
|
+
heading "Super Simple"
|
|
40
|
+
text "No brackets, no semicolons, no confusion. Just write what you want."
|
|
41
|
+
animate slide
|
|
42
|
+
|
|
43
|
+
card:
|
|
44
|
+
icon "🎨"
|
|
45
|
+
heading "Beautiful by Default"
|
|
46
|
+
text "Every website looks great out of the box. Styling is just one word."
|
|
47
|
+
animate slide
|
|
48
|
+
|
|
49
|
+
card:
|
|
50
|
+
icon "🤖"
|
|
51
|
+
heading "AI-Friendly"
|
|
52
|
+
text "So readable that AI can generate perfect websites instantly."
|
|
53
|
+
animate slide
|
|
54
|
+
|
|
55
|
+
card:
|
|
56
|
+
icon "🌐"
|
|
57
|
+
heading "Real Websites"
|
|
58
|
+
text "Compiles to clean HTML, CSS & JavaScript. Works everywhere."
|
|
59
|
+
animate slide
|
|
60
|
+
|
|
61
|
+
card:
|
|
62
|
+
icon "📱"
|
|
63
|
+
heading "Responsive"
|
|
64
|
+
text "Mobile-friendly from the start. No extra work needed."
|
|
65
|
+
animate slide
|
|
66
|
+
|
|
67
|
+
card:
|
|
68
|
+
icon "🎯"
|
|
69
|
+
heading "Kids Can Code"
|
|
70
|
+
text "Designed for beginners. Build your first website in 5 minutes."
|
|
71
|
+
animate slide
|
|
72
|
+
|
|
73
|
+
// Code Example Section
|
|
74
|
+
section "examples":
|
|
75
|
+
center
|
|
76
|
+
heading "Look How Easy It Is":
|
|
77
|
+
huge
|
|
78
|
+
animate fade
|
|
79
|
+
space 20
|
|
80
|
+
card:
|
|
81
|
+
background color #0d1117
|
|
82
|
+
padding 32
|
|
83
|
+
text "page 'My Site':":
|
|
84
|
+
color #79c0ff
|
|
85
|
+
text " heading 'Hello World'":
|
|
86
|
+
color #a5d6ff
|
|
87
|
+
text " text 'Made with Clou!'":
|
|
88
|
+
color #a5d6ff
|
|
89
|
+
text " button 'Click me':":
|
|
90
|
+
color #79c0ff
|
|
91
|
+
text " show message 'Hi!'":
|
|
92
|
+
color #ffa657
|
|
93
|
+
|
|
94
|
+
space 20
|
|
95
|
+
|
|
96
|
+
// Call to Action
|
|
97
|
+
section "start":
|
|
98
|
+
center
|
|
99
|
+
card:
|
|
100
|
+
gradient #4A90D9 to #e94560
|
|
101
|
+
padding 60
|
|
102
|
+
heading "Ready to Start?":
|
|
103
|
+
huge
|
|
104
|
+
animate bounce
|
|
105
|
+
space 10
|
|
106
|
+
text "Build your first Clou website right now."
|
|
107
|
+
space 20
|
|
108
|
+
button "Try Clou Now":
|
|
109
|
+
show message "Welcome to Clou! Start coding at: clou run mysite.clou"
|
|
110
|
+
|
|
111
|
+
// Modal
|
|
112
|
+
modal "demo":
|
|
113
|
+
heading "Quick Demo"
|
|
114
|
+
space 10
|
|
115
|
+
text "1. Create a file called mysite.clou"
|
|
116
|
+
text "2. Write your Clou code"
|
|
117
|
+
text "3. Run: clou run mysite.clou"
|
|
118
|
+
text "4. Your website opens in the browser!"
|
|
119
|
+
space 20
|
|
120
|
+
button "Got it!":
|
|
121
|
+
close "demo"
|
|
122
|
+
|
|
123
|
+
// Footer
|
|
124
|
+
footer:
|
|
125
|
+
text "Clou Language v0.1 - Made with love"
|
|
126
|
+
space 10
|
|
127
|
+
row:
|
|
128
|
+
center
|
|
129
|
+
link "GitHub" to "https://github.com"
|
|
130
|
+
link "Docs" to "#"
|
|
131
|
+
link "Community" to "#"
|
|
132
|
+
|
|
133
|
+
style:
|
|
134
|
+
background color #0f0f23
|
|
135
|
+
text color #ffffff
|
|
136
|
+
button color #4A90D9
|