-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
611 lines (575 loc) · 35.6 KB
/
Copy pathindex.html
File metadata and controls
611 lines (575 loc) · 35.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Simple (SimpleLang) —— 前后端一体化、多端可开发的解释型编程语言。图形化搭前端、简易代码写后端，零基础也能上手。" />
<title>Simple · v3.88 · 人人都能开发的编程语言</title>
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/assets/favicon-32.png" sizes="32x32" type="image/png" />
<link rel="icon" href="/assets/favicon-16.png" sizes="16x16" type="image/png" />
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png" />
<style>
:root {
--bg: #0a0a0c;
--surface: rgba(255, 255, 255, .035);
--surface-strong: rgba(255, 255, 255, .06);
--line: rgba(255, 255, 255, .08);
--line-strong: rgba(255, 255, 255, .18);
--text: #f5f5f7;
--muted: #a1a1a6;
--dim: #6e6e73;
--accent: #c7a56b;
--accent-ink: #171309;
--accent-soft: rgba(199, 165, 107, .14);
--good: #7ec99b;
--radius: 14px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
line-height: 1.8;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
::selection { background: rgba(199, 165, 107, .28); }
/* ===== 背景光 ===== */
body::before {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
background:
radial-gradient(60% 40% at 50% 0%, rgba(199, 165, 107, .12), transparent 60%),
radial-gradient(40% 30% at 85% 20%, rgba(120, 90, 50, .08), transparent 50%),
radial-gradient(50% 30% at 10% 80%, rgba(199, 165, 107, .06), transparent 55%);
transform-origin: center top;
will-change: transform;
}
.container { width: min(1040px, 90%); margin: 0 auto; position: relative; z-index: 1; }
/* ===== 导航 ===== */
header { position: sticky; top: 0; z-index: 30; padding: 14px 0;
background: rgba(10, 10, 12, .62);
-webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
border-bottom: 1px solid var(--line);
transition: background .3s; }
header.scrolled { background: rgba(10, 10, 12, .85); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 6px 0; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 18px; letter-spacing: .5px; color: var(--text); }
.brand img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
.brand .ver { font-size: 11.5px; font-weight: 700; letter-spacing: 1px; color: var(--accent);
background: var(--accent-soft); padding: 3px 9px; border-radius: 6px; margin-left: 4px; }
.nav-links { display: flex; gap: 28px; color: var(--muted); font-size: 14px; position: relative; }
.nav-links a { transition: color .2s; position: relative; padding: 4px 0; }
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); }
.nav-links a.active::after {
content: ""; position: absolute; bottom: -4px; left: 0; right: 0; height: 1.5px;
background: var(--accent); border-radius: 2px;
}
.nav-cta { padding: 9px 22px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
font-size: 14px; font-weight: 600; transition: opacity .2s, transform .2s; }
.nav-cta:hover { opacity: .88; transform: translateY(-1px); }
/* ===== Hero ===== */
.hero { padding: 130px 0 140px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }
.hero .badge { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px;
padding: 6px 15px; border: 1px solid var(--line); border-radius: 999px; }
.hero .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.4); } }
.hero h1 { margin: 26px 0 0; max-width: 620px; font-size: clamp(42px, 6.4vw, 80px); line-height: 1.08;
font-weight: 800; letter-spacing: -.5px; }
.hero h1 .accent { color: var(--accent); }
.hero h1 .line { display: block; }
.hero .sub { margin-top: 26px; max-width: 520px; color: var(--muted); font-size: 16px; line-height: 1.85; }
.hero .sub b { color: var(--text); font-weight: 600; }
.hero .ctas { margin-top: 38px; display: flex; gap: 14px; flex-wrap: wrap; }
.btn { padding: 13px 30px; border-radius: 999px; font-size: 14.5px; font-weight: 600; transition: opacity .2s, transform .2s, border-color .2s; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { opacity: .9; transform: translateY(-1px); }
.btn.secondary { border: 1px solid var(--line-strong); color: var(--text); }
.btn.secondary:hover { border-color: rgba(255, 255, 255, .34); }
/* Hero 代码墙 */
.code-wall {
background: rgba(0, 0, 0, .4);
border: 1px solid var(--line-strong);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
transform: perspective(1000px) rotateY(-3deg) rotateX(2deg);
transition: transform .4s cubic-bezier(.22,.68,.28,1), box-shadow .4s;
will-change: transform;
}
.code-wall:hover {
box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 60px rgba(199, 165, 107, .08), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.code-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px;
background: rgba(255, 255, 255, .03); border-bottom: 1px solid var(--line); }
.code-head .dot { width: 10px; height: 10px; border-radius: 50%; }
.code-head .dot.r { background: #ff5f57; }
.code-head .dot.y { background: #febc2e; }
.code-head .dot.g { background: #28c840; }
.code-head .title { color: var(--dim); font-size: 12.5px; margin-left: 8px; font-family: "Cascadia Code", Consolas, monospace; }
.code-body { padding: 22px 20px 24px; font-family: "Cascadia Code", Consolas, monospace;
font-size: 13px; line-height: 1.85; color: #d9d4c8; overflow-x: auto; }
.code-body .ln { color: var(--dim); display: inline-block; width: 28px; text-align: right; margin-right: 14px; user-select: none; }
.kw { color: #c7a56b; } /* keyword */
.fn { color: #7ec99b; } /* function */
.str { color: #e8b87c; } /* string */
.cm { color: var(--dim); font-style: italic; } /* comment */
.var { color: #9ec6e8; } /* variable */
.num { color: #d99a8e; } /* number */
.type { color: #b6a3d9; } /* type */
/* 统计条 */
.stats { margin-top: 48px; display: flex; gap: 28px; flex-wrap: wrap; }
.stat { display: flex; align-items: baseline; gap: 8px; }
.stat .n { font-size: 28px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.stat .l { font-size: 13px; color: var(--muted); letter-spacing: .5px; }
/* ===== 板块通用 ===== */
section { padding: 110px 0; position: relative; }
section + section { border-top: 1px solid var(--line); }
.sec-head { margin-bottom: 56px; max-width: 640px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head .eyebrow { font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--accent); }
.sec-head h2 { margin: 12px 0 10px; font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.3px; }
.sec-head p { color: var(--muted); font-size: 15.5px; line-height: 1.85; }
/* 卡片 */
.glass {
position: relative;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
transition: border-color .3s, transform .3s, background .3s;
}
.glass:hover { border-color: var(--line-strong); background: var(--surface-strong); }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }
.feat { padding: 32px 28px; }
.feat .ico { font-size: 28px; margin-bottom: 14px; }
.feat h3 { font-size: 17.5px; margin-bottom: 6px; font-weight: 700; }
.feat p { color: var(--muted); font-size: 14px; line-height: 1.75; }
.feat code { background: var(--accent-soft); color: var(--accent); padding: 1px 7px; border-radius: 5px; font-size: .85em; font-family: "Cascadia Code", Consolas, monospace; }
/* 代码预览区 */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 860px) { .showcase { grid-template-columns: 1fr; } }
.showcase-card { padding: 36px 30px; }
.showcase-card .tag { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.showcase-card h3 { margin: 10px 0 8px; font-size: 20px; font-weight: 700; }
.showcase-card > p { color: var(--muted); font-size: 14.5px; line-height: 1.8; margin-bottom: 18px; }
.mini-code {
background: rgba(0, 0, 0, .38); border: 1px solid var(--line); border-radius: 10px;
padding: 16px 18px; font-family: "Cascadia Code", Consolas, monospace;
font-size: 12.5px; line-height: 1.8; color: #d9d4c8; overflow-x: auto;
}
.mini-code .ln { color: var(--dim); display: inline-block; width: 22px; text-align: right; margin-right: 10px; user-select: none; }
/* 人群 */
.people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 860px) { .people { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .people { grid-template-columns: 1fr; } }
.person { padding: 26px 24px; }
.person .em { font-size: 26px; margin-bottom: 12px; }
.person h3 { font-size: 16px; margin: 10px 0 6px; font-weight: 700; }
.person p { color: var(--muted); font-size: 13.5px; line-height: 1.7; }
/* 路线图 */
.roadmap { max-width: 680px; margin: 0 auto; }
.phase { display: grid; grid-template-columns: 60px 1fr; gap: 22px; padding: 14px 0 36px; border-top: 1px solid var(--line); }
.phase:first-of-type { border-top: none; }
.phase .node { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
font-size: 15px; font-weight: 800; flex-shrink: 0; }
.phase.now .node { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 30px rgba(199, 165, 107, .35); }
.phase.done .node { background: rgba(126, 201, 155, .18); color: var(--good); }
.phase.todo .node { background: var(--surface); color: var(--dim); border: 1px dashed var(--line-strong); }
.phase .step-tag { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.phase h3 { font-size: 18px; font-weight: 700; margin: 4px 0 4px; }
.phase p { color: var(--muted); font-size: 14.5px; line-height: 1.75; }
.phase.now::after { content: "当前阶段"; font-size: 11px; color: var(--accent); letter-spacing: 1.5px;
border: 1px solid var(--accent); padding: 2px 10px; border-radius: 999px; margin-left: 10px; vertical-align: middle; }
/* FAQ */
.faq-list { max-width: 700px; margin: 0 auto; display: grid; gap: 12px; }
details.faq { padding: 0 26px; }
details.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
gap: 16px; padding: 20px 0; font-size: 15.5px; font-weight: 600; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq[open] summary { border-bottom: 1px solid var(--line); }
details.faq summary .pl { color: var(--accent); font-size: 20px; font-weight: 400; transition: transform .3s; }
details.faq[open] summary .pl { transform: rotate(45deg); }
details.faq .a { padding: 0; color: var(--muted); font-size: 14.5px; line-height: 1.85;
display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
details.faq[open] .a { padding: 18px 0 22px; grid-template-rows: 1fr; }
details.faq .a * { overflow: hidden; }
details.faq .a code { background: var(--accent-soft); color: var(--accent); padding: 1px 7px; border-radius: 5px; font-family: "Cascadia Code", Consolas, monospace; }
/* CTA 结尾条 */
.end-cta { padding: 100px 0 60px; text-align: center; }
.end-cta h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; margin-bottom: 14px; }
.end-cta p { color: var(--muted); font-size: 15px; margin-bottom: 30px; }
/* 页脚 */
footer { padding: 80px 0 46px; border-top: 1px solid var(--line); }
.foot { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; }
@media (max-width: 860px) { .foot { grid-template-columns: 1fr 1fr; } }
.foot h4 { font-size: 13px; margin-bottom: 14px; color: var(--text); letter-spacing: .5px; }
.foot ul { list-style: none; }
.foot li, .foot p { color: var(--muted); font-size: 13.5px; margin-bottom: 8px; }
.foot a:hover { color: var(--text); }
.foot .email { color: var(--accent); }
.disclaim { margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--line);
color: var(--dim); font-size: 12px; line-height: 2; }
.disclaim b { color: var(--muted); }
/* ===== 渐显 ===== */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.22,.68,.28,1), transform .9s cubic-bezier(.22,.68,.28,1); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-slow] { opacity: 0; transform: translateY(28px); transition: opacity 1.2s cubic-bezier(.22,.68,.28,1), transform 1.2s cubic-bezier(.22,.68,.28,1); }
[data-reveal-slow].is-visible { opacity: 1; transform: none; }
.stagger-box > * { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.22,.68,.28,1), transform .8s cubic-bezier(.22,.68,.28,1); }
.stagger-box > *.is-visible { opacity: 1; transform: none; }
@media (max-width: 820px) {
.nav-links { display: none; }
.hero { padding: 90px 0 100px; }
section { padding: 70px 0; }
}
</style>
</head>
<body>
<header id="topbar">
<div class="container nav">
<div class="brand"><img src="/assets/simplelang-logo.jpg" alt="Simple" /><span>Simple</span><span class="ver">v3.88</span></div>
<nav class="nav-links" id="navLinks">
<a href="#features" data-scroll>特点</a>
<a href="#showcase" data-scroll>代码预览</a>
<a href="#people" data-scroll>人群</a>
<a href="#roadmap" data-scroll>路线图</a>
<a href="#faq" data-scroll>常见问题</a>
<a href="learn/">学习</a>
<a href="disclaimer.html">免责</a>
</nav>
<a class="nav-cta" href="download/">下载</a>
</div>
</header>
<main>
<!-- ===== Hero ===== -->
<section class="hero">
<div class="container hero-grid">
<div>
<div class="badge" data-reveal><span class="dot"></span> v3.88 · 三档发布 · Python / C++ 编译为 HTML</div>
<h1 data-reveal>让创造应用的能力<br /><span class="accent">回归每个人</span></h1>
<p class="sub" data-reveal>
Simple 是一套<b>前后端一体化</b>的解释型语言。用图形界面搭前端、用简易代码写后端，
<b>小白也能从第一行代码跑到第一个应用</b>。网页 / 安卓 / Windows 三端任选。
</p>
<div class="ctas" data-reveal>
<a class="btn primary" href="download/">下载 Simple</a>
<a class="btn secondary" href="ide/?edition=x">⚡ 网页端体验</a>
<a class="btn secondary" href="learn/">📖 学习中心</a>
<a class="btn secondary" href="https://github.com/HiCodeHC/HiCodeHC.github.io" target="_blank" rel="noopener">
<svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
GitHub
</a>
</div>
<div class="stats" data-reveal>
<div class="stat"><span class="n">v3.88</span><span class="l">当前版本</span></div>
<div class="stat"><span class="n">M / R / X</span><span class="l">三档能力</span></div>
<div class="stat"><span class="n" data-count="3">0</span><span class="l">平台（网页 · 安卓 · Windows）</span></div>
</div>
</div>
<!-- 代码墙 -->
<div class="code-wall" data-reveal-slow>
<div class="code-head">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="title">hello.hc — Simple v3.88</span>
</div>
<div class="code-body" id="heroCode">
<span class="ln">1</span><span class="cm">// Simple 的第一行代码</span><br/>
<span class="ln">2</span><span class="kw">var</span> <span class="var">title</span> = <span class="str">"你好，世界"</span><br/>
<span class="ln">3</span><span class="kw">var</span> <span class="var">msg</span> = <span class="str">"点击我试一下"</span><br/>
<span class="ln">4</span><br/>
<span class="ln">5</span><span class="cm">// 前端：图形化定位</span><br/>
<span class="ln">6</span><span class="fn">place</span> <span class="var">title</span> <span class="fn">at</span> (<span class="num">50%</span>, <span class="num">30%</span>)<br/>
<span class="ln">7</span><span class="fn">place</span> <span class="var">msg</span> <span class="fn">at</span> (<span class="num">50%</span>, <span class="num">50%</span>)<br/>
<span class="ln">8</span><br/>
<span class="ln">9</span><span class="cm">// 后端：事件驱动</span><br/>
<span class="ln">10</span><span class="fn">cf</span> <span class="var">msg</span><br/>
<span class="ln">11</span> <span class="kw">let</span> <span class="var">count</span> <span class="kw">be</span> <span class="num">0</span><br/>
<span class="ln">12</span> <span class="var">count</span> <span class="kw">add</span> <span class="num">1</span><br/>
<span class="ln">13</span> <span class="fn">say</span> <span class="str">"你已经点击了 "</span> + <span class="var">count</span> + <span class="str">" 次"</span><br/>
<span class="ln">14</span><span class="fn">stop</span><br/>
<span class="ln">15</span><br/>
<span class="ln">16</span><span class="cm">// X 版：把 Python 编译为 HTML</span><br/>
<span class="ln">17</span><span class="kw">py:</span><br/>
<span class="ln">18</span> <span class="kw">def</span> <span class="fn">fib</span>(<span class="var">n</span>):<br/>
<span class="ln">19</span> <span class="kw">return</span> <span class="var">n</span> <span class="kw">if</span> <span class="var">n</span> <span class="kw"><=</span> <span class="num">1</span> <span class="kw">else</span> <span class="var">fib</span>(<span class="var">n</span><span class="kw">-</span><span class="num">1</span>) <span class="kw">+</span> <span class="var">fib</span>(<span class="var">n</span><span class="kw">-</span><span class="num">2</span>)<br/>
<span class="ln">20</span><span class="kw">end</span>
</div>
</div>
</div>
</section>
<!-- ===== 产品特点 ===== -->
<section id="features">
<div class="container">
<div class="sec-head" data-reveal>
<div class="eyebrow">Core Features</div>
<h2>一套语言，贯通前后端</h2>
<p>Simple 的核心设计：<b>少即是多</b>——用最简单的语法，覆盖最完整的开发链路。</p>
</div>
<div class="features stagger-box">
<div class="feat glass"><div class="ico">🧩</div><h3>前后端同时开发</h3><p>同一套 SIMPLE 语法写界面与逻辑，数据天然互通，不再来回切换语言与框架。</p></div>
<div class="feat glass"><div class="ico">🎨</div><h3>图形化搭前端</h3><p><code>place 名 at (x, y)</code> 声明式定位 + 界面元素配置，所见即所得。</p></div>
<div class="feat glass"><div class="ico">💬</div><h3>简易语法写后端</h3><p><code>cf 名 … stop</code> 事件块、<code>let … be</code> 赋值、<code>say</code> 输出——自然语言般的逻辑。</p></div>
<div class="feat glass"><div class="ico">🔧</div><h3>编译 Python / C++</h3><p>R / X 版支持 <code>py:( … )end</code>、<code>cpp:( … )end</code>，把它们编译为 HTML，零外部依赖。</p></div>
<div class="feat glass"><div class="ico">📱</div><h3>一次编写 · 三端运行</h3><p>网页端在线体验、Windows 便携 .exe、Android .apk——同一个离线单文件内核。</p></div>
<div class="feat glass"><div class="ico">⚡</div><h3>解释型 · 即时反馈</h3><p>写一行跑一行，预览随改随更，不用重启、不用重新编译整个项目。</p></div>
</div>
</div>
</section>
<!-- ===== 代码预览 ===== -->
<section id="showcase">
<div class="container">
<div class="sec-head" data-reveal>
<div class="eyebrow">Live Syntax</div>
<h2>感受一下 SIMPLE 的语法</h2>
<p>左边是图形化前端定位，右边是事件驱动的后端逻辑——它们在同一个文件里。</p>
</div>
<div class="showcase">
<div class="showcase-card glass" data-reveal>
<span class="tag">Frontend</span>
<h3>声明式定位</h3>
<p>用 <code>place</code> 把变量放到屏幕上，图形化编辑器也能直接拖拽。</p>
<div class="mini-code"><span class="ln">1</span><span class="kw">var</span> <span class="var">name</span> = <span class="str">"Simple"</span><br/><span class="ln">2</span><span class="kw">var</span> <span class="var">logo</span> = <span class="str">"logo.png"</span><br/><span class="ln">3</span><br/><span class="ln">4</span><span class="fn">place</span> <span class="var">logo</span> <span class="fn">at</span> (<span class="num">10%</span>, <span class="num">20%</span>)<br/><span class="ln">5</span><span class="fn">place</span> <span class="var">name</span> <span class="fn">at</span> (<span class="num">50%</span>, <span class="num">20%</span>)</div>
</div>
<div class="showcase-card glass" data-reveal>
<span class="tag">Backend</span>
<h3>事件驱动逻辑</h3>
<p>用 <code>cf</code> 声明触发区域——点击、长按，执行其中的代码块。</p>
<div class="mini-code"><span class="ln">1</span><span class="kw">var</span> <span class="var">clicks</span> = <span class="num">0</span><br/><span class="ln">2</span><span class="kw">var</span> <span class="var">btn</span> = <span class="str">"点我"</span><br/><span class="ln">3</span><span class="fn">place</span> <span class="var">btn</span> <span class="fn">at</span> (<span class="num">50%</span>, <span class="num">60%</span>)<br/><span class="ln">4</span><br/><span class="ln">5</span><span class="fn">cf</span> <span class="var">btn</span><br/><span class="ln">6</span> <span class="var">clicks</span> <span class="kw">add</span> <span class="num">1</span><br/><span class="ln">7</span> <span class="fn">say</span> <span class="str">"已点击 "</span> + <span class="var">clicks</span><br/><span class="ln">8</span><span class="fn">stop</span></div>
</div>
</div>
</div>
</section>
<!-- ===== 适用人群 ===== -->
<section id="people">
<div class="container">
<div class="sec-head center" data-reveal>
<div class="eyebrow">Who It's For</div>
<h2>Simple 适合谁</h2>
<p>无论你是编程新人还是资深开发者，都能找到属于你的使用方式。</p>
</div>
<div class="people stagger-box">
<div class="person glass"><div class="em">🎓</div><h3>编程小白 / 学生</h3><p>零基础也能靠图形 + 简易代码起步，把课堂所学落到真实项目。</p></div>
<div class="person glass"><div class="em">💼</div><h3>职场人 / 业务</h3><p>不懂技术也想提效？快速搭建内部工具与原型，解决手头难题。</p></div>
<div class="person glass"><div class="em">👥</div><h3>独立开发者</h3><p>前端后端一人搞定，降低协作成本，更快验证想法、迭代产品。</p></div>
<div class="person glass"><div class="em">🧑💻</div><h3>资深开发者</h3><p>了解、参与一款新语言的建造成长，贡献开源，共建新开发方式。</p></div>
</div>
</div>
</section>
<!-- ===== 路线图 ===== -->
<section id="roadmap">
<div class="container">
<div class="sec-head center" data-reveal>
<div class="eyebrow">Roadmap</div>
<h2>从 v3.88 到未来</h2>
<p>v3.88 是里程碑——语言核心、三档能力、三端打包全部就位。</p>
</div>
<div class="roadmap">
<div class="phase done" data-reveal><div class="node">✓</div><div><div class="step-tag">Phase 1 · v0.x – v1.x</div><h3>语言定义与原型</h3><p>确立 SIMPLE 语法与图形化方向，从玩具原型到可运行的解释器。</p></div></div>
<div class="phase done" data-reveal><div class="node">✓</div><div><div class="step-tag">Phase 2 · v2.00</div><h3>图形化前端 + 触发区域</h3><p><code>cf</code> 事件块、图片变量、文件下载——前端不再只是纯文本。</p></div></div>
<div class="phase done" data-reveal><div class="node">✓</div><div><div class="step-tag">Phase 3 · v3.01 – v3.66</div><h3>原生 HTML + 三档发布</h3><p><code>html:( … )end</code> 原样注入 HTML；Python / C++ 编译为 HTML；首次 .apk / .exe 打包。</p></div></div>
<div class="phase now" data-reveal><div class="node">S</div><div><div class="step-tag">Phase 4 · v3.88 <span style="color:var(--accent);">Now</span></div><h3>架构重塑与开源共建</h3><p>版本号跃迁至 v3.88，官网艺术化重设计，发布规范固化，社区建设启动。</p></div></div>
<div class="phase todo" data-reveal><div class="node">H2</div><div><div class="step-tag">Phase 5 · Future</div><h3>LSP / 包管理器 / 更多</h3><p>语言服务器自动补全、包管理器、更丰富的标准库——欢迎社区贡献。</p></div></div>
</div>
</div>
</section>
<!-- ===== FAQ ===== -->
<section id="faq">
<div class="container">
<div class="sec-head center" data-reveal>
<div class="eyebrow">FAQ</div>
<h2>常见问题</h2>
<p>关于 Simple v3.88 你可能想知道的事。</p>
</div>
<div class="faq-list stagger-box">
<details class="faq glass"><summary>Simple v3.88 现在可以下载使用吗？<span class="pl">+</span></summary>
<div class="a">可以。v3.88 提供 <b>M 轻量</b> / <b>R 标准</b> / <b>X 全能</b> 三档，支持网页端在线体验、Windows 便携 .exe、Android .apk 三种形态。X 版可把 <code>py:( … )end</code>、<code>cpp:( … )end</code> 编译为 HTML，零外部依赖。下载页有全部入口。</div></details>
<details class="faq glass"><summary>完全没有编程基础，真的能上手吗？<span class="pl">+</span></summary>
<div class="a">这正是 Simple 的设计目标：图形化界面创建前端、接近自然的简易代码编写后端。学习中心有分章节教程与可下载的练习文件，跟着走一遍就能写出第一个应用。</div></details>
<details class="faq glass"><summary>Simple 是免费的吗？开源吗？<span class="pl">+</span></summary>
<div class="a">是的，Simple 以开源方式发布，代码托管在 GitHub。我们坚持开放、可自由使用与二次开发的原则。</div></details>
<details class="faq glass"><summary>M / R / X 三档有什么区别？该选哪个？<span class="pl">+</span></summary>
<div class="a"><b>M 轻量</b>：仅 SIMPLE 内核，最精简，适合纯 SIMPLE 开发。<br/><b>R 标准</b>：+ Python 编译为 HTML，适合想在 SIMPLE 里嵌入 Python 的用户。<br/><b>X 全能</b>：+ Python + C++ 编译为 HTML，最完整。<br/>不确定就从 X 开始，网页端顶栏随时可切换。</div></details>
<details class="faq glass"><summary>我可以如何参与 Simple 的成长？<span class="pl">+</span></summary>
<div class="a">欢迎通过 <a href="mailto:hicodehc@outlook.com" style="color:var(--accent);">hicodehc@outlook.com</a> 提出想法与建议，或直接在 GitHub 仓库提 Issue / Pull Request。</div></details>
</div>
</div>
</section>
<!-- ===== 结尾 CTA ===== -->
<section class="end-cta">
<div class="container" data-reveal>
<h2>从 v3.88 开始，写你的第一个 SIMPLE 程序</h2>
<p>下载、打开、写一行代码——只需 30 秒</p>
<div class="ctas" style="justify-content:center;">
<a class="btn primary" href="download/">下载 Simple</a>
<a class="btn secondary" href="ide/?edition=x">⚡ 网页端直接试</a>
</div>
</div>
</section>
</main>
<!-- ===== 页脚 ===== -->
<footer>
<div class="container">
<div class="foot">
<div>
<div class="brand" style="margin-bottom:12px;"><img src="/assets/simplelang-logo.jpg" alt="Simple" /><span>Simple</span></div>
<p style="margin-top:2px;">前后端一体化、多端可开发的编程语言。<br/>让编程回归简单。</p>
</div>
<div>
<h4>产品</h4>
<ul>
<li><a href="download/">下载 v3.88</a></li>
<li><a href="ide/?edition=x">网页端体验</a></li>
<li><a href="learn/">学习中心</a></li>
<li><a href="download/">三档对比</a></li>
</ul>
</div>
<div>
<h4>项目</h4>
<ul>
<li><a href="https://github.com/HiCodeHC/HiCodeHC.github.io" target="_blank" rel="noopener">GitHub</a></li>
<li><a href="old/">历史版本</a></li>
<li><a href="docs/RELEASING.md">发布规范</a></li>
<li><a href="disclaimer.html">免责声明</a></li>
</ul>
</div>
<div>
<h4>联系</h4>
<ul>
<li><a class="email" href="mailto:hicodehc@outlook.com">hicodehc@outlook.com</a></li>
</ul>
</div>
</div>
<div class="disclaim" data-reveal>
<b>免责声明：</b> Simple 按"现状"提供，本项目及其贡献者不对因使用本站或相关软件所造成的任何直接或间接损失承担责任。<br/>
<b>名称说明：</b>「simplelang」「hc」「SimpleLang」「HcLogo」均为本项目的内部名称与标识，<b>并非注册商标</b>。若相关名称或图形与任何第三方已合法注册的商标存在相同或近似，请通过 <a class="email" href="mailto:hicodehc@outlook.com">hicodehc@outlook.com</a> 联系我们。<br/>
<b>版权：</b> © <span id="year"></span> Simple（SimpleLang）项目团队 · 保留相关权利 · <a href="disclaimer.html" style="color:var(--accent);border-bottom:1px dashed rgba(199,165,107,.5);">阅读完整免责声明</a>。
</div>
</div>
</footer>
<script>
document.getElementById("year").textContent = new Date().getFullYear();
/* ---- 导航吸顶背景 + 滚动指示器 ---- */
const topbar = document.getElementById("topbar");
const navLinks = document.getElementById("navLinks");
const sections = document.querySelectorAll("section[id]");
const onScroll = () => {
const y = window.scrollY;
topbar.classList.toggle("scrolled", y > 30);
let current = "";
sections.forEach(s => {
if (window.scrollY >= s.offsetTop - 120) current = s.id;
});
navLinks.querySelectorAll("a[data-scroll]").forEach(a => {
a.classList.toggle("active", a.getAttribute("href") === "#" + current);
});
};
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
/* ---- 渐显动画：延迟 observe 确保布局完成，已在视口内的元素给 120ms 延迟触发 ---- */
requestAnimationFrame(() => {
const revealEls = document.querySelectorAll("[data-reveal], [data-reveal-slow]");
const alreadyInView = [];
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add("is-visible");
io.unobserve(e.target);
}
});
}, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
revealEls.forEach(el => {
const r = el.getBoundingClientRect();
if (r.top < window.innerHeight && r.bottom > 0) {
alreadyInView.push(el);
} else {
io.observe(el);
}
});
if (alreadyInView.length) {
alreadyInView.forEach((el, i) => {
setTimeout(() => { el.classList.add("is-visible"); }, 120 + i * 80);
});
}
});
/* ---- Stagger 动画 ---- */
requestAnimationFrame(() => {
document.querySelectorAll(".stagger-box").forEach(box => {
const kids = Array.prototype.slice.call(box.children);
const r = box.getBoundingClientRect();
const inView = r.top < window.innerHeight && r.bottom > 0;
const play = () => {
kids.forEach((k, i) => {
k.style.transitionDelay = (i * 80) + "ms";
k.classList.add("is-visible");
});
};
if (inView) {
setTimeout(play, 150);
} else {
const ob = new IntersectionObserver((entries, self) => {
entries.forEach(en => {
if (en.isIntersecting) { play(); self.disconnect(); }
});
}, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
ob.observe(box);
}
});
});
/* ---- Hero 代码墙 3D hover ---- */
const codeWall = document.querySelector(".code-wall");
if (codeWall) {
codeWall.addEventListener("mousemove", (e) => {
const r = codeWall.getBoundingClientRect();
const x = (e.clientX - r.left) / r.width - 0.5;
const y = (e.clientY - r.top) / r.height - 0.5;
codeWall.style.transform = `perspective(900px) rotateY(${x * 6}deg) rotateX(${-y * 6}deg)`;
});
codeWall.addEventListener("mouseleave", () => {
codeWall.style.transform = "perspective(900px) rotateY(0) rotateX(0)";
});
}
/* ---- 背景光视差 ---- */
const bg = document.body;
let ticking = false;
window.addEventListener("scroll", () => {
if (!ticking) {
requestAnimationFrame(() => {
const y = window.scrollY;
bg.style.setProperty("--parallax-y", (y * 0.15) + "px");
ticking = false;
});
ticking = true;
}
}, { passive: true });
/* ---- Stats 数字脉动：滚动到视口内时从 0 递增到目标值 ---- */
const nums = document.querySelectorAll("[data-count]");
if (nums.length) {
const animateCount = (el) => {
const target = parseInt(el.getAttribute("data-count"), 10) || 0;
const dur = 900;
const start = performance.now();
const tick = (now) => {
const p = Math.min((now - start) / dur, 1);
const eased = 1 - Math.pow(1 - p, 3);
el.textContent = Math.round(eased * target);
if (p < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
};
const nio = new IntersectionObserver((entries, self) => {
entries.forEach(e => {
if (e.isIntersecting) { animateCount(e.target); self.unobserve(e.target); }
});
}, { threshold: 0.4 });
nums.forEach(n => nio.observe(n));
}
</script>
</body>
</html>