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,41 @@
|
|
|
1
|
+
// Clou Calculator - A terminal app with math and logic
|
|
2
|
+
|
|
3
|
+
app "Clou Calculator":
|
|
4
|
+
clear
|
|
5
|
+
print color cyan "╔═══════════════════════════════╗"
|
|
6
|
+
print color cyan "║ CLOU CALCULATOR ║"
|
|
7
|
+
print color cyan "╚═══════════════════════════════╝"
|
|
8
|
+
print ""
|
|
9
|
+
|
|
10
|
+
set running to "yes"
|
|
11
|
+
|
|
12
|
+
while running is "yes":
|
|
13
|
+
ask "Enter first number:" save as a
|
|
14
|
+
ask "Enter second number:" save as b
|
|
15
|
+
print ""
|
|
16
|
+
|
|
17
|
+
// Do all operations
|
|
18
|
+
set result to "{a}"
|
|
19
|
+
add "{b}" to result
|
|
20
|
+
print color green " {a} + {b} = {result}"
|
|
21
|
+
|
|
22
|
+
set result to "{a}"
|
|
23
|
+
subtract "{b}" to result
|
|
24
|
+
print color yellow " {a} - {b} = {result}"
|
|
25
|
+
|
|
26
|
+
set result to "{a}"
|
|
27
|
+
multiply "{b}" by result
|
|
28
|
+
print color blue " {a} x {b} = {result}"
|
|
29
|
+
|
|
30
|
+
if b is not "0":
|
|
31
|
+
set result to "{a}"
|
|
32
|
+
divide "{b}" by result
|
|
33
|
+
print color magenta " {a} / {b} = {result}"
|
|
34
|
+
else:
|
|
35
|
+
print color red " Can't divide by zero!"
|
|
36
|
+
|
|
37
|
+
print ""
|
|
38
|
+
ask "Another calculation? (yes/no)" save as running
|
|
39
|
+
|
|
40
|
+
print ""
|
|
41
|
+
print color cyan "Thanks for using Clou Calculator!"
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
// My first Clou terminal app!
|
|
2
|
+
|
|
3
|
+
app "Hello Terminal":
|
|
4
|
+
print color cyan "╔══════════════════════════════╗"
|
|
5
|
+
print color cyan "║ Welcome to Clou Terminal! ║"
|
|
6
|
+
print color cyan "╚══════════════════════════════╝"
|
|
7
|
+
print ""
|
|
8
|
+
|
|
9
|
+
ask "What is your name?" save as name
|
|
10
|
+
print ""
|
|
11
|
+
print color green "Hello {name}! Nice to meet you!"
|
|
12
|
+
print ""
|
|
13
|
+
|
|
14
|
+
ask "How old are you?" save as age
|
|
15
|
+
print color yellow "{name}, you are {age} years old!"
|
|
16
|
+
|
|
17
|
+
set future to "{age}"
|
|
18
|
+
add 10 to future
|
|
19
|
+
print color magenta "In 10 years you'll be {future}!"
|
|
20
|
+
print ""
|
|
21
|
+
|
|
22
|
+
print color cyan "Thanks for trying Clou! Goodbye {name}!"
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
page "My First Clou Website":
|
|
2
|
+
|
|
3
|
+
title "Welcome to Clou!"
|
|
4
|
+
|
|
5
|
+
box:
|
|
6
|
+
heading "Hello World"
|
|
7
|
+
text "This is my first website made with Clou."
|
|
8
|
+
text "It's so easy, anyone can do it!"
|
|
9
|
+
|
|
10
|
+
line
|
|
11
|
+
|
|
12
|
+
box:
|
|
13
|
+
heading "About Me"
|
|
14
|
+
text "I love coding with Clou because it's simple and fun."
|
|
15
|
+
image "https://picsum.photos/600/300"
|
|
16
|
+
|
|
17
|
+
line
|
|
18
|
+
|
|
19
|
+
row:
|
|
20
|
+
button "Say Hello":
|
|
21
|
+
show message "Hello from Clou!"
|
|
22
|
+
|
|
23
|
+
button "Visit Google":
|
|
24
|
+
go to "https://google.com"
|
|
25
|
+
|
|
26
|
+
link "Learn More" to "https://github.com"
|
|
27
|
+
|
|
28
|
+
list:
|
|
29
|
+
text "Easy to learn"
|
|
30
|
+
text "Fun to use"
|
|
31
|
+
text "Makes real websites"
|
|
32
|
+
|
|
33
|
+
style:
|
|
34
|
+
background color #f0f4f8
|
|
35
|
+
text color #333333
|
|
36
|
+
button color #4A90D9
|
|
37
|
+
center
|
|
@@ -0,0 +1,220 @@
|
|
|
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 First Clou Website</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: #f0f4f8;
|
|
20
|
+
color: #333333;
|
|
21
|
+
text-align: center;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.clou-page {
|
|
25
|
+
padding: 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.clou-box {
|
|
29
|
+
padding: 20px;
|
|
30
|
+
margin: 10px 0;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.clou-row {
|
|
34
|
+
display: flex;
|
|
35
|
+
flex-wrap: wrap;
|
|
36
|
+
gap: 16px;
|
|
37
|
+
align-items: center;
|
|
38
|
+
margin: 10px 0;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.clou-section {
|
|
42
|
+
padding: 60px 20px;
|
|
43
|
+
max-width: 1200px;
|
|
44
|
+
margin: 0 auto;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.clou-grid {
|
|
48
|
+
display: grid;
|
|
49
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
50
|
+
gap: 24px;
|
|
51
|
+
margin: 10px 0;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.clou-card {
|
|
55
|
+
background: rgba(255,255,255,0.1);
|
|
56
|
+
backdrop-filter: blur(10px);
|
|
57
|
+
border-radius: 16px;
|
|
58
|
+
padding: 24px;
|
|
59
|
+
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
|
|
60
|
+
transition: transform 0.3s, box-shadow 0.3s;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.clou-card:hover {
|
|
64
|
+
transform: translateY(-4px);
|
|
65
|
+
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
h1 {
|
|
69
|
+
font-size: 2.5em;
|
|
70
|
+
margin: 16px 0 8px 0;
|
|
71
|
+
font-weight: 700;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
h2 {
|
|
75
|
+
font-size: 1.5em;
|
|
76
|
+
margin: 16px 0 8px 0;
|
|
77
|
+
font-weight: 600;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
p {
|
|
81
|
+
margin: 8px 0;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
img {
|
|
85
|
+
max-width: 100%;
|
|
86
|
+
height: auto;
|
|
87
|
+
border-radius: 8px;
|
|
88
|
+
margin: 10px 0;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
button, .clou-button {
|
|
92
|
+
padding: 12px 28px;
|
|
93
|
+
font-size: 16px;
|
|
94
|
+
font-weight: 600;
|
|
95
|
+
border: none;
|
|
96
|
+
border-radius: 8px;
|
|
97
|
+
background-color: #4A90D9;
|
|
98
|
+
color: white;
|
|
99
|
+
cursor: pointer;
|
|
100
|
+
transition: transform 0.15s, opacity 0.2s, box-shadow 0.2s;
|
|
101
|
+
margin: 8px 4px;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
button:hover, .clou-button:hover {
|
|
105
|
+
opacity: 0.9;
|
|
106
|
+
transform: scale(1.03);
|
|
107
|
+
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
button:active, .clou-button:active {
|
|
111
|
+
transform: scale(0.97);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
a {
|
|
115
|
+
color: inherit;
|
|
116
|
+
text-decoration: none;
|
|
117
|
+
border-bottom: 1px solid transparent;
|
|
118
|
+
transition: border-color 0.2s, opacity 0.2s;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
a:hover {
|
|
122
|
+
opacity: 0.8;
|
|
123
|
+
border-bottom-color: currentColor;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
input, textarea, .clou-input {
|
|
127
|
+
padding: 12px 16px;
|
|
128
|
+
font-size: 16px;
|
|
129
|
+
border: 2px solid rgba(255,255,255,0.2);
|
|
130
|
+
border-radius: 8px;
|
|
131
|
+
outline: none;
|
|
132
|
+
background: rgba(255,255,255,0.1);
|
|
133
|
+
color: inherit;
|
|
134
|
+
transition: border-color 0.2s, box-shadow 0.2s;
|
|
135
|
+
width: 100%;
|
|
136
|
+
max-width: 400px;
|
|
137
|
+
margin: 8px 0;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
input:focus, textarea:focus {
|
|
141
|
+
border-color: #4A90D9;
|
|
142
|
+
box-shadow: 0 0 0 3px #4A90D933;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
input::placeholder, textarea::placeholder {
|
|
146
|
+
color: inherit;
|
|
147
|
+
opacity: 0.5;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
ul, ol {
|
|
151
|
+
padding-left: 24px;
|
|
152
|
+
margin: 8px 0;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
li {
|
|
156
|
+
margin: 4px 0;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
hr {
|
|
160
|
+
border: none;
|
|
161
|
+
border-top: 1px solid rgba(128,128,128,0.2);
|
|
162
|
+
margin: 32px 0;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
video {
|
|
166
|
+
max-width: 100%;
|
|
167
|
+
border-radius: 8px;
|
|
168
|
+
margin: 10px 0;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.clou-icon {
|
|
172
|
+
font-size: 2em;
|
|
173
|
+
margin: 8px 0;
|
|
174
|
+
display: inline-block;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.clou-footer {
|
|
178
|
+
padding: 40px 20px;
|
|
179
|
+
margin-top: 40px;
|
|
180
|
+
text-align: center;
|
|
181
|
+
opacity: 0.7;
|
|
182
|
+
border-top: 1px solid rgba(128,128,128,0.2);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
</style>
|
|
186
|
+
</head>
|
|
187
|
+
<body>
|
|
188
|
+
<h1>Welcome to Clou!</h1>
|
|
189
|
+
<div class="clou-box">
|
|
190
|
+
<h2>Hello World</h2>
|
|
191
|
+
<p>This is my first website made with Clou.</p>
|
|
192
|
+
<p>It's so easy, anyone can do it!</p>
|
|
193
|
+
</div>
|
|
194
|
+
<hr>
|
|
195
|
+
<div class="clou-box">
|
|
196
|
+
<h2>About Me</h2>
|
|
197
|
+
<p>I love coding with Clou because it's simple and fun.</p>
|
|
198
|
+
<img src="https://picsum.photos/600/300" alt="image">
|
|
199
|
+
</div>
|
|
200
|
+
<hr>
|
|
201
|
+
<div class="clou-row">
|
|
202
|
+
<button id="clou-1">Say Hello</button>
|
|
203
|
+
<button id="clou-2">Visit Google</button>
|
|
204
|
+
<a href="https://github.com">Learn More</a>
|
|
205
|
+
</div>
|
|
206
|
+
<ul>
|
|
207
|
+
<li>Easy to learn</li>
|
|
208
|
+
<li>Fun to use</li>
|
|
209
|
+
<li>Makes real websites</li>
|
|
210
|
+
</ul>
|
|
211
|
+
<script>
|
|
212
|
+
document.getElementById('clou-1').addEventListener('click', function() {
|
|
213
|
+
alert("Hello from Clou!");
|
|
214
|
+
});
|
|
215
|
+
document.getElementById('clou-2').addEventListener('click', function() {
|
|
216
|
+
window.location.href = "https://google.com";
|
|
217
|
+
});
|
|
218
|
+
</script>
|
|
219
|
+
</body>
|
|
220
|
+
</html>
|
|
@@ -0,0 +1,319 @@
|
|
|
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>About - Clou Site</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
|
+
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.clou-page {
|
|
23
|
+
padding: 0;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.clou-box {
|
|
27
|
+
padding: 20px;
|
|
28
|
+
margin: 10px 0;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.clou-row {
|
|
32
|
+
display: flex;
|
|
33
|
+
flex-wrap: wrap;
|
|
34
|
+
gap: 16px;
|
|
35
|
+
align-items: center;
|
|
36
|
+
margin: 10px 0;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.clou-section {
|
|
40
|
+
padding: 60px 20px;
|
|
41
|
+
max-width: 1200px;
|
|
42
|
+
margin: 0 auto;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.clou-grid {
|
|
46
|
+
display: grid;
|
|
47
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
48
|
+
gap: 24px;
|
|
49
|
+
margin: 10px 0;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.clou-card {
|
|
53
|
+
background: rgba(255,255,255,0.1);
|
|
54
|
+
backdrop-filter: blur(10px);
|
|
55
|
+
border-radius: 16px;
|
|
56
|
+
padding: 24px;
|
|
57
|
+
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
|
|
58
|
+
transition: transform 0.3s, box-shadow 0.3s;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.clou-card:hover {
|
|
62
|
+
transform: translateY(-4px);
|
|
63
|
+
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
h1 {
|
|
67
|
+
font-size: 2.5em;
|
|
68
|
+
margin: 16px 0 8px 0;
|
|
69
|
+
font-weight: 700;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
h2 {
|
|
73
|
+
font-size: 1.5em;
|
|
74
|
+
margin: 16px 0 8px 0;
|
|
75
|
+
font-weight: 600;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
p {
|
|
79
|
+
margin: 8px 0;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
img {
|
|
83
|
+
max-width: 100%;
|
|
84
|
+
height: auto;
|
|
85
|
+
border-radius: 8px;
|
|
86
|
+
margin: 10px 0;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
button, .clou-button {
|
|
90
|
+
padding: 12px 28px;
|
|
91
|
+
font-size: 16px;
|
|
92
|
+
font-weight: 600;
|
|
93
|
+
border: none;
|
|
94
|
+
border-radius: 8px;
|
|
95
|
+
background-color: #4A90D9;
|
|
96
|
+
color: white;
|
|
97
|
+
cursor: pointer;
|
|
98
|
+
transition: transform 0.15s, opacity 0.2s, box-shadow 0.2s;
|
|
99
|
+
margin: 8px 4px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
button:hover, .clou-button:hover {
|
|
103
|
+
opacity: 0.9;
|
|
104
|
+
transform: scale(1.03);
|
|
105
|
+
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
button:active, .clou-button:active {
|
|
109
|
+
transform: scale(0.97);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
a {
|
|
113
|
+
color: inherit;
|
|
114
|
+
text-decoration: none;
|
|
115
|
+
border-bottom: 1px solid transparent;
|
|
116
|
+
transition: border-color 0.2s, opacity 0.2s;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
a:hover {
|
|
120
|
+
opacity: 0.8;
|
|
121
|
+
border-bottom-color: currentColor;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
input, textarea, .clou-input {
|
|
125
|
+
padding: 12px 16px;
|
|
126
|
+
font-size: 16px;
|
|
127
|
+
border: 2px solid rgba(255,255,255,0.2);
|
|
128
|
+
border-radius: 8px;
|
|
129
|
+
outline: none;
|
|
130
|
+
background: rgba(255,255,255,0.1);
|
|
131
|
+
color: inherit;
|
|
132
|
+
transition: border-color 0.2s, box-shadow 0.2s;
|
|
133
|
+
width: 100%;
|
|
134
|
+
max-width: 400px;
|
|
135
|
+
margin: 8px 0;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
input:focus, textarea:focus {
|
|
139
|
+
border-color: #4A90D9;
|
|
140
|
+
box-shadow: 0 0 0 3px #4A90D933;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
input::placeholder, textarea::placeholder {
|
|
144
|
+
color: inherit;
|
|
145
|
+
opacity: 0.5;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
ul, ol {
|
|
149
|
+
padding-left: 24px;
|
|
150
|
+
margin: 8px 0;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
li {
|
|
154
|
+
margin: 4px 0;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
hr {
|
|
158
|
+
border: none;
|
|
159
|
+
border-top: 1px solid rgba(128,128,128,0.2);
|
|
160
|
+
margin: 32px 0;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
video {
|
|
164
|
+
max-width: 100%;
|
|
165
|
+
border-radius: 8px;
|
|
166
|
+
margin: 10px 0;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.clou-icon {
|
|
170
|
+
font-size: 2em;
|
|
171
|
+
margin: 8px 0;
|
|
172
|
+
display: inline-block;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.clou-footer {
|
|
176
|
+
padding: 40px 20px;
|
|
177
|
+
margin-top: 40px;
|
|
178
|
+
text-align: center;
|
|
179
|
+
opacity: 0.7;
|
|
180
|
+
border-top: 1px solid rgba(128,128,128,0.2);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.clou-navbar {
|
|
184
|
+
display: flex;
|
|
185
|
+
align-items: center;
|
|
186
|
+
justify-content: space-between;
|
|
187
|
+
padding: 16px 32px;
|
|
188
|
+
background: rgba(0,0,0,0.2);
|
|
189
|
+
backdrop-filter: blur(12px);
|
|
190
|
+
position: sticky;
|
|
191
|
+
top: 0;
|
|
192
|
+
z-index: 1000;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.clou-navbar-brand {
|
|
196
|
+
font-size: 1.4em;
|
|
197
|
+
font-weight: 700;
|
|
198
|
+
letter-spacing: -0.5px;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.clou-navbar-links {
|
|
202
|
+
display: flex;
|
|
203
|
+
gap: 24px;
|
|
204
|
+
align-items: center;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.clou-navbar-links a {
|
|
208
|
+
opacity: 0.8;
|
|
209
|
+
transition: opacity 0.2s;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.clou-navbar-links a:hover {
|
|
213
|
+
opacity: 1;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
@keyframes clou-fade {
|
|
217
|
+
from { opacity: 0; }
|
|
218
|
+
to { opacity: 1; }
|
|
219
|
+
}
|
|
220
|
+
.clou-animate-fade { animation: clou-fade 0.6s ease both; }
|
|
221
|
+
|
|
222
|
+
/* Theme: Midnight */
|
|
223
|
+
body {
|
|
224
|
+
background: #0f0f23;
|
|
225
|
+
color: #e0e0e0;
|
|
226
|
+
font-family: 'Segoe UI', system-ui, sans-serif;
|
|
227
|
+
}
|
|
228
|
+
button, .clou-button {
|
|
229
|
+
background-color: #6C63FF;
|
|
230
|
+
}
|
|
231
|
+
button:hover, .clou-button:hover {
|
|
232
|
+
background-color: #5a52d5;
|
|
233
|
+
}
|
|
234
|
+
.clou-card {
|
|
235
|
+
background: rgba(108, 99, 255, 0.06);
|
|
236
|
+
border: 1px solid rgba(108, 99, 255, 0.15);
|
|
237
|
+
}
|
|
238
|
+
.clou-card:hover {
|
|
239
|
+
background: rgba(108, 99, 255, 0.1);
|
|
240
|
+
box-shadow: 0 8px 32px rgba(108, 99, 255, 0.2);
|
|
241
|
+
}
|
|
242
|
+
.clou-navbar {
|
|
243
|
+
background: rgba(15, 15, 35, 0.95);
|
|
244
|
+
backdrop-filter: blur(12px);
|
|
245
|
+
}
|
|
246
|
+
input, textarea, .clou-input {
|
|
247
|
+
background: rgba(108, 99, 255, 0.08);
|
|
248
|
+
border: 1px solid rgba(108, 99, 255, 0.25);
|
|
249
|
+
color: #e0e0e0;
|
|
250
|
+
}
|
|
251
|
+
input:focus, textarea:focus {
|
|
252
|
+
border-color: #6C63FF;
|
|
253
|
+
box-shadow: 0 0 0 3px #6C63FF33;
|
|
254
|
+
}
|
|
255
|
+
h1, h2 {
|
|
256
|
+
color: #8b83ff;
|
|
257
|
+
}
|
|
258
|
+
a {
|
|
259
|
+
color: #8b83ff;
|
|
260
|
+
}
|
|
261
|
+
hr {
|
|
262
|
+
border-top-color: rgba(108, 99, 255, 0.2);
|
|
263
|
+
}
|
|
264
|
+
.clou-footer {
|
|
265
|
+
border-top-color: rgba(108, 99, 255, 0.2);
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
</style>
|
|
269
|
+
</head>
|
|
270
|
+
<body>
|
|
271
|
+
|
|
272
|
+
<nav class="clou-navbar">
|
|
273
|
+
<div class="clou-navbar-brand">Clou Site</div>
|
|
274
|
+
<div class="clou-navbar-links">
|
|
275
|
+
<a href="index.html">Home</a>
|
|
276
|
+
<a href="about.html">About</a>
|
|
277
|
+
<a href="contact.html">Contact</a>
|
|
278
|
+
</div>
|
|
279
|
+
</nav>
|
|
280
|
+
<section class="clou-section" id="about" style="text-align: center">
|
|
281
|
+
<div style="height: 30px"></div>
|
|
282
|
+
<h2 class="clou-animate-fade" style="font-size: 48px">About Us</h2>
|
|
283
|
+
<div style="height: 20px"></div>
|
|
284
|
+
<div class="clou-card" style="padding: 40px">
|
|
285
|
+
<p>We are a small team building the simplest programming language in the world.</p>
|
|
286
|
+
<p>Our mission: make web development accessible to everyone — especially kids.</p>
|
|
287
|
+
</div>
|
|
288
|
+
<div style="height: 20px"></div>
|
|
289
|
+
<h2>Our Team</h2>
|
|
290
|
+
<div style="height: 10px"></div>
|
|
291
|
+
<div class="clou-grid">
|
|
292
|
+
<div class="clou-card">
|
|
293
|
+
<span class="clou-icon">👩💻</span>
|
|
294
|
+
<h2>Sarah</h2>
|
|
295
|
+
<p>Lead Developer</p>
|
|
296
|
+
</div>
|
|
297
|
+
<div class="clou-card">
|
|
298
|
+
<span class="clou-icon">👨🎨</span>
|
|
299
|
+
<h2>Marcus</h2>
|
|
300
|
+
<p>Designer</p>
|
|
301
|
+
</div>
|
|
302
|
+
<div class="clou-card">
|
|
303
|
+
<span class="clou-icon">👩🔬</span>
|
|
304
|
+
<h2>Aisha</h2>
|
|
305
|
+
<p>CTO</p>
|
|
306
|
+
</div>
|
|
307
|
+
</div>
|
|
308
|
+
</section>
|
|
309
|
+
<footer class="clou-footer">
|
|
310
|
+
<p>© 2026 Clou Site — Built with Clou</p>
|
|
311
|
+
<div class="clou-row" style="text-align: center">
|
|
312
|
+
<a href="index.html">Home</a>
|
|
313
|
+
<a href="about.html">About</a>
|
|
314
|
+
<a href="contact.html">Contact</a>
|
|
315
|
+
</div>
|
|
316
|
+
</footer>
|
|
317
|
+
|
|
318
|
+
</body>
|
|
319
|
+
</html>
|