dsh-design-studio 0.10.0 → 0.12.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/README.en.md +4 -3
- package/README.md +6 -5
- package/assets/demo.gif +0 -0
- package/assets/hero-sm.jpg +0 -0
- package/cordis.patch.yml +5 -0
- package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/_shots/menu.jpg +0 -0
- package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/app.css +64 -0
- package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/cart.html +120 -0
- package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/design.json +56 -0
- package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/menu.html +200 -0
- package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/order.html +135 -0
- package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/tokens.css +43 -0
- package/gallery-seed/d/orderg-x__autumn-sale/08e9e40834f9/_shots/email.jpg +0 -0
- package/gallery-seed/d/orderg-x__autumn-sale/08e9e40834f9/design.json +20 -0
- package/gallery-seed/d/orderg-x__autumn-sale/08e9e40834f9/email.html +268 -0
- package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/_shots/courses.jpg +0 -0
- package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/courses.html +364 -0
- package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/design.json +49 -0
- package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/lesson.html +196 -0
- package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/tokens.css +55 -0
- package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/ui.css +255 -0
- package/gallery-seed/d/orderg-x__moon-fair/08e9e40834f9/_shots/poster.jpg +0 -0
- package/gallery-seed/d/orderg-x__moon-fair/08e9e40834f9/design.json +21 -0
- package/gallery-seed/d/orderg-x__moon-fair/08e9e40834f9/poster.html +165 -0
- package/gallery-seed/d/orderg-x__moon-fair/08e9e40834f9/tokens.css +35 -0
- package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/_shots/home.jpg +0 -0
- package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/app.css +155 -0
- package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/booking.html +232 -0
- package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/design.json +57 -0
- package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/health.html +221 -0
- package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/home.html +225 -0
- package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/tokens.css +54 -0
- package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/_shots/overview.jpg +0 -0
- package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/app.css +79 -0
- package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/design.json +51 -0
- package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/entries.html +161 -0
- package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/icons.svg +30 -0
- package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/overview.html +181 -0
- package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/tokens.css +50 -0
- package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/_shots/home.jpg +0 -0
- package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/book.html +279 -0
- package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/design.json +21 -0
- package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/home.html +348 -0
- package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/style.css +297 -0
- package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/tokens.css +49 -0
- package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/01-cover.html +133 -0
- package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/02-highlights.html +67 -0
- package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/03-growth.html +89 -0
- package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/04-milestones.html +92 -0
- package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/05-next.html +99 -0
- package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/06-thanks.html +61 -0
- package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/_shots/01-cover.jpg +0 -0
- package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/deck.css +67 -0
- package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/design.json +25 -0
- package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/tokens.css +30 -0
- package/gallery-seed/index.json +1 -0
- package/gallery-seed/thumbs/orderg-x__alley-noodles.webp +0 -0
- package/gallery-seed/thumbs/orderg-x__autumn-sale.webp +0 -0
- package/gallery-seed/thumbs/orderg-x__little-painter.webp +0 -0
- package/gallery-seed/thumbs/orderg-x__moon-fair.webp +0 -0
- package/gallery-seed/thumbs/orderg-x__paw-diary.webp +0 -0
- package/gallery-seed/thumbs/orderg-x__pocket-ledger.webp +0 -0
- package/gallery-seed/thumbs/orderg-x__time-bookshop.webp +0 -0
- package/gallery-seed/thumbs/orderg-x__year-review.webp +0 -0
- package/lib/browser.js +23 -9
- package/lib/bundle.js +12 -3
- package/lib/client.js +3253 -483
- package/lib/core.js +231 -7
- package/lib/draft-page.js +763 -0
- package/lib/draft.js +151 -0
- package/lib/gallery/css.js +230 -0
- package/lib/gallery/html.js +313 -0
- package/lib/gallery/index.js +22 -0
- package/lib/gallery/market-routes.js +306 -0
- package/lib/gallery/market.js +623 -0
- package/lib/gallery/pack.js +311 -0
- package/lib/gallery/policy.js +1560 -0
- package/lib/gallery/qrfind.js +181 -0
- package/lib/gallery/render.js +148 -0
- package/lib/gallery/routes.js +360 -0
- package/lib/gallery/tar.js +118 -0
- package/lib/gallery/use.js +125 -0
- package/lib/gallery/zip.js +212 -0
- package/lib/handoff.js +190 -36
- package/lib/history.js +3 -1
- package/lib/index.js +123 -22
- package/lib/inspire.js +142 -0
- package/lib/offline.js +17 -0
- package/lib/picker.js +260 -1
- package/lib/serve.js +264 -11
- package/lib/tweaks.js +58 -24
- package/lib/works.js +238 -0
- package/locale/en.json +2 -1
- package/locale/offline/en.json +6 -0
- package/locale/offline/zh.json +6 -0
- package/locale/zh.json +2 -1
- package/package.json +9 -2
- package/skills/ui-design/SKILL.md +9 -0
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="zh">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
6
|
+
<meta name="dsh-design" content="tablet">
|
|
7
|
+
<title>上课 · 小画家</title>
|
|
8
|
+
<link rel="stylesheet" href="tokens.css">
|
|
9
|
+
<link rel="stylesheet" href="ui.css">
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
<div class="status" aria-hidden="true">
|
|
13
|
+
<span>9:41 11月7日 周六</span>
|
|
14
|
+
<span class="status-r">
|
|
15
|
+
<svg viewBox="0 0 17 12"><path d="M8.5 11.2 6.4 9.1a3 3 0 0 1 4.2 0z" fill="currentColor"/><path d="M3.6 6.4a7 7 0 0 1 9.8 0M1 3.8a10.6 10.6 0 0 1 15 0" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>
|
|
16
|
+
86%
|
|
17
|
+
<svg viewBox="0 0 27 12"><rect x=".7" y=".7" width="22.6" height="10.6" rx="3" fill="none" stroke="currentColor" stroke-opacity=".45" stroke-width="1.2"/><rect x="2.4" y="2.4" width="16.8" height="7.2" rx="1.6" fill="currentColor"/><path d="M25 4.2v3.6c.8-.3 1.3-1 1.3-1.8S25.8 4.5 25 4.2z" fill="currentColor" fill-opacity=".45"/></svg>
|
|
18
|
+
</span>
|
|
19
|
+
</div>
|
|
20
|
+
<div class="lesson">
|
|
21
|
+
<header class="bar">
|
|
22
|
+
<a class="btn btn-ghost" href="courses.html"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="m14.5 18-6-6 6-6"/></svg>课程</a>
|
|
23
|
+
<div class="bar-t">
|
|
24
|
+
<p>水彩 · 秋天的银杏 · 第 4 课</p>
|
|
25
|
+
<h1>叶子的渐变</h1>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="bar-r">
|
|
28
|
+
<span class="timer"><svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>已画 12 分钟</span>
|
|
29
|
+
<button class="btn btn-ghost" type="button"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 12.5V6.8a1.6 1.6 0 0 1 3.2 0v4.7"/><path d="M11.2 11V5.2a1.6 1.6 0 0 1 3.2 0V11"/><path d="M14.4 11.2V7.4a1.6 1.6 0 0 1 3.2 0v6.4a6.7 6.7 0 0 1-6.7 6.7c-2.1 0-3.6-.8-4.9-2.3l-2.6-3.1a1.5 1.5 0 0 1 2.3-2L8 15.6"/></svg>举手提问</button>
|
|
30
|
+
</div>
|
|
31
|
+
</header>
|
|
32
|
+
|
|
33
|
+
<div class="stage">
|
|
34
|
+
<section class="card board" aria-label="画布">
|
|
35
|
+
<div class="paper">
|
|
36
|
+
<svg viewBox="0 0 400 820" preserveAspectRatio="xMidYMid slice" role="img" aria-label="朵朵正在画的银杏叶水彩画">
|
|
37
|
+
<defs>
|
|
38
|
+
<filter id="wc" x="-15%" y="-15%" width="130%" height="130%"><feTurbulence type="fractalNoise" baseFrequency=".04" numOctaves="2" seed="7"/><feDisplacementMap in="SourceGraphic" scale="7"/></filter>
|
|
39
|
+
<linearGradient id="gkA" x1="0" y1="1" x2="0" y2="0"><stop offset="0" stop-color="#F6DA6B"/><stop offset=".55" stop-color="#F1BE4E"/><stop offset="1" stop-color="#EE9B3B"/></linearGradient>
|
|
40
|
+
<linearGradient id="gkB" x1="0" y1="1" x2=".3" y2="0"><stop offset="0" stop-color="#F7DE7A"/><stop offset=".6" stop-color="#F3C557"/><stop offset="1" stop-color="#E98F35"/></linearGradient>
|
|
41
|
+
<radialGradient id="wet" cx=".86" cy=".12" r=".62"><stop offset="0" stop-color="#EE9B3B" stop-opacity=".95"/><stop offset=".5" stop-color="#F1B04A" stop-opacity=".55"/><stop offset="1" stop-color="#F6DA6B" stop-opacity="0"/></radialGradient>
|
|
42
|
+
<radialGradient id="glow" cx=".5" cy=".5" r=".5"><stop offset="0" stop-color="#FBE7A6" stop-opacity=".9"/><stop offset="1" stop-color="#FBE7A6" stop-opacity="0"/></radialGradient>
|
|
43
|
+
<radialGradient id="wash" cx=".5" cy=".5" r=".5"><stop offset="0" stop-color="#D8EBD2" stop-opacity=".9"/><stop offset="1" stop-color="#D8EBD2" stop-opacity="0"/></radialGradient>
|
|
44
|
+
</defs>
|
|
45
|
+
<circle cx="96" cy="132" r="120" fill="url(#glow)"/>
|
|
46
|
+
<ellipse cx="200" cy="770" rx="260" ry="110" fill="url(#wash)"/>
|
|
47
|
+
<g filter="url(#wc)"><circle cx="96" cy="132" r="44" fill="#F6D262"/></g>
|
|
48
|
+
<g stroke="#EBBE45" stroke-width="7" stroke-linecap="round" fill="none">
|
|
49
|
+
<path d="M96 56V34M96 230v-20M24 132H8M188 132h-18M44 80 32 68M148 184l12 12M44 184l-12 12M148 80l14-14"/>
|
|
50
|
+
</g>
|
|
51
|
+
<path d="M80 126q5-6 10 0M104 126q5-6 10 0" stroke="#8A5A2B" stroke-width="3.2" fill="none" stroke-linecap="round"/>
|
|
52
|
+
<path d="M84 144q12 12 24 0" stroke="#8A5A2B" stroke-width="3.2" fill="none" stroke-linecap="round"/>
|
|
53
|
+
<path d="M412 252C356 260 300 284 236 340" stroke="#8A5E3B" stroke-width="10" fill="none" stroke-linecap="round"/>
|
|
54
|
+
<path d="M326 266c-4-18 4-34 16-46M276 298c10 10 14 22 12 36" stroke="#8A5E3B" stroke-width="6" fill="none" stroke-linecap="round"/>
|
|
55
|
+
<g filter="url(#wc)">
|
|
56
|
+
<g transform="translate(244 340) rotate(172) scale(2)"><path d="M0 0Q1.5 8-1 15" stroke="#8A5E3B" stroke-width="2.4" fill="none" stroke-linecap="round"/><path d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="url(#gkA)" /><path d="M0-3-13-33M0-3-5-39M0-3 5-39M0-3 13-33" stroke="#fff" stroke-opacity=".35" stroke-width="1.2" fill="none" stroke-linecap="round"/></g>
|
|
57
|
+
<g transform="translate(342 222) rotate(200) scale(1.5)"><path d="M0 0Q1.5 8-1 15" stroke="#8A5E3B" stroke-width="2.4" fill="none" stroke-linecap="round"/><path d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="url(#gkB)" /><path d="M0-3-13-33M0-3-5-39M0-3 5-39M0-3 13-33" stroke="#fff" stroke-opacity=".35" stroke-width="1.2" fill="none" stroke-linecap="round"/></g>
|
|
58
|
+
<g transform="translate(288 334) rotate(148) scale(1.5)"><path d="M0 0Q1.5 8-1 15" stroke="#8A5E3B" stroke-width="2.4" fill="none" stroke-linecap="round"/><path d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="url(#gkA)" /><path d="M0-3-13-33M0-3-5-39M0-3 5-39M0-3 13-33" stroke="#fff" stroke-opacity=".35" stroke-width="1.2" fill="none" stroke-linecap="round"/></g>
|
|
59
|
+
</g>
|
|
60
|
+
<g transform="translate(368 258)">
|
|
61
|
+
<ellipse cx="0" cy="-14" rx="17" ry="14" fill="#6FAE7E"/>
|
|
62
|
+
<circle cx="-12" cy="-24" r="9" fill="#6FAE7E"/>
|
|
63
|
+
<path d="M-20 -25l-9 3 9 3z" fill="#E9B949"/>
|
|
64
|
+
<circle cx="-14" cy="-26" r="2" fill="#1F2A22"/>
|
|
65
|
+
<path d="M6 -12q-6 6-14 0" stroke="#4E9A5F" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
66
|
+
</g>
|
|
67
|
+
<g filter="url(#wc)">
|
|
68
|
+
<g transform="translate(168 600) rotate(-22) scale(3)"><path d="M0 0Q1.5 8-1 15" stroke="#B07D2A" stroke-width="2.4" fill="none" stroke-linecap="round"/><path d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="#F6DA6B" /><path d="M0-3-13-33M0-3-5-39M0-3 5-39M0-3 13-33" stroke="#fff" stroke-opacity=".35" stroke-width="1.2" fill="none" stroke-linecap="round"/></g>
|
|
69
|
+
<path transform="translate(168 600) rotate(-22) scale(3)" d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="url(#wet)"/>
|
|
70
|
+
</g>
|
|
71
|
+
<g filter="url(#wc)" opacity=".95">
|
|
72
|
+
<g transform="translate(70 452) rotate(40) scale(1.1)"><path d="M0 0Q1.5 8-1 15" stroke="#B07D2A" stroke-width="2.4" fill="none" stroke-linecap="round"/><path d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="url(#gkA)" /><path d="M0-3-13-33M0-3-5-39M0-3 5-39M0-3 13-33" stroke="#fff" stroke-opacity=".35" stroke-width="1.2" fill="none" stroke-linecap="round"/></g>
|
|
73
|
+
<g transform="translate(340 470) rotate(-52) scale(1)"><path d="M0 0Q1.5 8-1 15" stroke="#B07D2A" stroke-width="2.4" fill="none" stroke-linecap="round"/><path d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="url(#gkB)" /><path d="M0-3-13-33M0-3-5-39M0-3 5-39M0-3 13-33" stroke="#fff" stroke-opacity=".35" stroke-width="1.2" fill="none" stroke-linecap="round"/></g>
|
|
74
|
+
<g transform="translate(326 690) rotate(24) scale(0.9)"><path d="M0 0Q1.5 8-1 15" stroke="#B07D2A" stroke-width="2.4" fill="none" stroke-linecap="round"/><path d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="url(#gkA)" /><path d="M0-3-13-33M0-3-5-39M0-3 5-39M0-3 13-33" stroke="#fff" stroke-opacity=".35" stroke-width="1.2" fill="none" stroke-linecap="round"/></g>
|
|
75
|
+
</g>
|
|
76
|
+
<g transform="translate(246 534) rotate(-38)">
|
|
77
|
+
<rect x="-5" y="0" width="10" height="150" rx="5" fill="#D9B48A"/>
|
|
78
|
+
<rect x="-6.5" y="-26" width="13" height="30" rx="3" fill="#B9C2BD"/>
|
|
79
|
+
<path d="M-6.5 -26c0-14 3-26 6.5-36 3.5 10 6.5 22 6.5 36z" fill="#EE9B3B"/>
|
|
80
|
+
</g>
|
|
81
|
+
<path d="M-10 748q60-26 110-6t110-4 110 2 110-10v100H-10z" fill="#CFE6C9"/>
|
|
82
|
+
<g stroke="#6FAE7E" stroke-width="4" stroke-linecap="round" fill="none">
|
|
83
|
+
<path d="M150 740l-3-16M162 739l5-18M300 741l-4-18M312 740l4-20M370 736l-2-14"/>
|
|
84
|
+
</g>
|
|
85
|
+
<g filter="url(#wc)">
|
|
86
|
+
<g transform="translate(150 760) rotate(-70) scale(1)"><path d="M0 0Q1.5 8-1 15" stroke="#B07D2A" stroke-width="2.4" fill="none" stroke-linecap="round"/><path d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="url(#gkA)" /><path d="M0-3-13-33M0-3-5-39M0-3 5-39M0-3 13-33" stroke="#fff" stroke-opacity=".35" stroke-width="1.2" fill="none" stroke-linecap="round"/></g>
|
|
87
|
+
<g transform="translate(214 766) rotate(64) scale(1.1)"><path d="M0 0Q1.5 8-1 15" stroke="#B07D2A" stroke-width="2.4" fill="none" stroke-linecap="round"/><path d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="url(#gkB)" /><path d="M0-3-13-33M0-3-5-39M0-3 5-39M0-3 13-33" stroke="#fff" stroke-opacity=".35" stroke-width="1.2" fill="none" stroke-linecap="round"/></g>
|
|
88
|
+
<g transform="translate(262 756) rotate(-20) scale(0.9)"><path d="M0 0Q1.5 8-1 15" stroke="#B07D2A" stroke-width="2.4" fill="none" stroke-linecap="round"/><path d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="url(#gkA)" /><path d="M0-3-13-33M0-3-5-39M0-3 5-39M0-3 13-33" stroke="#fff" stroke-opacity=".35" stroke-width="1.2" fill="none" stroke-linecap="round"/></g>
|
|
89
|
+
</g>
|
|
90
|
+
<g transform="translate(64 752)">
|
|
91
|
+
<path d="M-34 0-31-14-25-5-20-22-13-8-5-27 1-10 9-25 14-8 22-19 26-2z" fill="#9A6B44"/>
|
|
92
|
+
<ellipse cx="0" cy="-6" rx="30" ry="15" fill="#9A6B44"/>
|
|
93
|
+
<path d="M16-14q20 2 28 12-14 9-30 4z" fill="#E9C48A"/>
|
|
94
|
+
<circle cx="44" cy="-2" r="3.4" fill="#1F2A22"/>
|
|
95
|
+
<circle cx="30" cy="-8" r="2.2" fill="#1F2A22"/>
|
|
96
|
+
<path d="M-14 8v6M8 8v6" stroke="#6E4A2C" stroke-width="4" stroke-linecap="round"/>
|
|
97
|
+
</g>
|
|
98
|
+
<text x="282" y="806" transform="rotate(-5 282 806)" font-size="24" font-weight="600" fill="#3D7F4C">朵朵 11.7</text>
|
|
99
|
+
</svg>
|
|
100
|
+
<figure class="peek" style="margin:0">
|
|
101
|
+
<svg viewBox="0 0 120 150" aria-hidden="true"><rect width="120" height="150" fill="#FFFEFA"/><circle cx="30" cy="34" r="14" fill="#F6D262"/><path d="M124 40C106 44 90 52 72 70" stroke="#8A5E3B" stroke-width="3.4" fill="none" stroke-linecap="round"/><g transform="translate(74 72) rotate(172) scale(0.6)"><path d="M0 0Q1.5 8-1 15" stroke="#8A5E3B" stroke-width="2.4" fill="none" stroke-linecap="round"/><path d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="#EFAE45" /><path d="M0-3-13-33M0-3-5-39M0-3 5-39M0-3 13-33" stroke="#fff" stroke-opacity=".35" stroke-width="1.2" fill="none" stroke-linecap="round"/></g><g transform="translate(100 50) rotate(196) scale(0.5)"><path d="M0 0Q1.5 8-1 15" stroke="#8A5E3B" stroke-width="2.4" fill="none" stroke-linecap="round"/><path d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="#F1BE4E" /><path d="M0-3-13-33M0-3-5-39M0-3 5-39M0-3 13-33" stroke="#fff" stroke-opacity=".35" stroke-width="1.2" fill="none" stroke-linecap="round"/></g><g transform="translate(52 108) rotate(-22) scale(0.9)"><path d="M0 0Q1.5 8-1 15" stroke="#B07D2A" stroke-width="2.4" fill="none" stroke-linecap="round"/><path d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="#EE9B3B" /><path d="M0-3-13-33M0-3-5-39M0-3 5-39M0-3 13-33" stroke="#fff" stroke-opacity=".35" stroke-width="1.2" fill="none" stroke-linecap="round"/></g><path d="M0 134q30-8 60-2t60-2v20H0z" fill="#CFE6C9"/></svg>
|
|
102
|
+
<span>老师的范画</span>
|
|
103
|
+
</figure>
|
|
104
|
+
<span class="pill pill-green zoom"><svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>已自动保存</span>
|
|
105
|
+
</div>
|
|
106
|
+
<div class="tools" role="toolbar" aria-label="画笔工具">
|
|
107
|
+
<button class="tool on" type="button" aria-pressed="true"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.5 3.5 12 12"/><path d="M12.6 11.4c-1.2-1.2-3.4-1.1-4.7.2C6.4 13.1 6.8 16.6 3.5 19.5c3.6.8 7.4-.1 9-1.8 1.3-1.3 1.4-3.5.1-4.7z"/></svg>水彩笔</button>
|
|
108
|
+
<button class="tool" type="button"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 4.5 19.5 9.5 10 19H5v-5z"/><path d="m12.5 6.5 5 5"/><path d="M5 14l5 5"/></svg>蜡笔</button>
|
|
109
|
+
<button class="tool" type="button"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.5 19.5 4 15a1.6 1.6 0 0 1 0-2.3l8.6-8.6a1.6 1.6 0 0 1 2.3 0L20 9.2a1.6 1.6 0 0 1 0 2.3l-8 8z"/><path d="m9 9.5 5.5 5.5M11.5 19.5H20"/></svg>橡皮</button>
|
|
110
|
+
<span class="tools-sep"></span>
|
|
111
|
+
<button class="tool" type="button"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 5.5 4.5 10 9 14.5"/><path d="M5 10h9.5a5 5 0 0 1 0 10H12"/></svg>撤销</button>
|
|
112
|
+
<span class="tools-gap"></span>
|
|
113
|
+
<button class="size" type="button" aria-label="细笔"><i style="width:8px;height:8px"></i></button>
|
|
114
|
+
<button class="size on" type="button" aria-label="中笔" aria-pressed="true"><i style="width:14px;height:14px"></i></button>
|
|
115
|
+
<button class="size" type="button" aria-label="粗笔"><i style="width:20px;height:20px"></i></button>
|
|
116
|
+
</div>
|
|
117
|
+
</section>
|
|
118
|
+
|
|
119
|
+
<aside class="side">
|
|
120
|
+
<a class="demo-v" href="lesson.html" aria-label="看苗苗老师的示范">
|
|
121
|
+
<svg viewBox="0 0 300 168" aria-hidden="true">
|
|
122
|
+
<rect width="300" height="168" fill="#E2EFDF"/>
|
|
123
|
+
<circle cx="250" cy="34" r="56" fill="#F3F7F2" opacity=".7"/>
|
|
124
|
+
<rect x="176" y="22" width="96" height="124" rx="4" fill="#FFFEFA"/>
|
|
125
|
+
<path d="M224 146v22M190 168l12-22M258 168l-12-22" stroke="#9A6B44" stroke-width="4" stroke-linecap="round"/>
|
|
126
|
+
<g transform="translate(210 92) rotate(168) scale(0.75)"><path d="M0 0Q1.5 8-1 15" stroke="#8A5E3B" stroke-width="2.4" fill="none" stroke-linecap="round"/><path d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="#EFAE45" /><path d="M0-3-13-33M0-3-5-39M0-3 5-39M0-3 13-33" stroke="#fff" stroke-opacity=".35" stroke-width="1.2" fill="none" stroke-linecap="round"/></g><g transform="translate(240 70) rotate(192) scale(0.62)"><path d="M0 0Q1.5 8-1 15" stroke="#8A5E3B" stroke-width="2.4" fill="none" stroke-linecap="round"/><path d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="#F1BE4E" /><path d="M0-3-13-33M0-3-5-39M0-3 5-39M0-3 13-33" stroke="#fff" stroke-opacity=".35" stroke-width="1.2" fill="none" stroke-linecap="round"/></g><g transform="translate(226 128) rotate(-18) scale(0.9)"><path d="M0 0Q1.5 8-1 15" stroke="#B07D2A" stroke-width="2.4" fill="none" stroke-linecap="round"/><path d="M0 0C-4-8-22-20-28-34C-20-46-8-48-2-42L0-34L2-42C8-48 20-46 28-34C22-20 4-8 0 0Z" fill="#EE9B3B" /><path d="M0-3-13-33M0-3-5-39M0-3 5-39M0-3 13-33" stroke="#fff" stroke-opacity=".35" stroke-width="1.2" fill="none" stroke-linecap="round"/></g>
|
|
127
|
+
<g transform="translate(-20 0)">
|
|
128
|
+
<path d="M28 168q6-46 64-48 58 2 64 48z" fill="#FFFFFF"/>
|
|
129
|
+
<path d="M58 168q2-34 34-40 32 6 34 40z" fill="#6FAE7E"/>
|
|
130
|
+
<rect x="84" y="102" width="16" height="22" rx="7" fill="#EDC7A5"/>
|
|
131
|
+
<path d="M62 88q-4-40 30-42 34 2 30 42-4 12-8 14V82q-22-2-36-16-4 10-8 22v14q-6-4-8-14z" fill="#3B2A20"/>
|
|
132
|
+
<ellipse cx="92" cy="84" rx="22" ry="24" fill="#F3D2B3"/>
|
|
133
|
+
<path d="M70 76q4-26 22-28 20 2 22 26-14-4-24-16-8 12-20 18z" fill="#3B2A20"/>
|
|
134
|
+
<path d="M81 85q4-4 8 0M96 85q4-4 8 0" stroke="#3B2A20" stroke-width="2.2" fill="none" stroke-linecap="round"/>
|
|
135
|
+
<path d="M86 96q6 6 12 0" stroke="#A0523C" stroke-width="2.2" fill="none" stroke-linecap="round"/>
|
|
136
|
+
<circle cx="79" cy="93" r="3.4" fill="#F2A99A" opacity=".7"/><circle cx="106" cy="93" r="3.4" fill="#F2A99A" opacity=".7"/>
|
|
137
|
+
<path d="M138 146l34-40" stroke="#D9B48A" stroke-width="5" stroke-linecap="round"/>
|
|
138
|
+
<path d="M172 106l7-12-2 13z" fill="#EE9B3B"/>
|
|
139
|
+
<circle cx="140" cy="146" r="9" fill="#F3D2B3"/>
|
|
140
|
+
</g>
|
|
141
|
+
</svg>
|
|
142
|
+
<span class="play"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4.5v15l12.5-7.5z"/></svg></span>
|
|
143
|
+
<span class="cap">苗苗老师示范<span>02:18</span></span>
|
|
144
|
+
</a>
|
|
145
|
+
|
|
146
|
+
<section class="card steps">
|
|
147
|
+
<div class="card-h"><h2>跟着做</h2><span class="pill pill-green">第 3 步 / 共 3 步</span></div>
|
|
148
|
+
<ol>
|
|
149
|
+
<li class="step done"><span class="n">1</span><div class="step-b"><h3>画出叶子的样子</h3></div><svg class="ic ok" viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg></li>
|
|
150
|
+
<li class="step done"><span class="n">2</span><div class="step-b"><h3>铺一层浅浅的柠檬黄</h3></div><svg class="ic ok" viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg></li>
|
|
151
|
+
<li class="step now">
|
|
152
|
+
<span class="n">3</span>
|
|
153
|
+
<div class="step-b">
|
|
154
|
+
<h3>趁湿点上橘黄</h3>
|
|
155
|
+
<p>笔尖蘸一点橘黄，点在叶子的边上。颜色会自己慢慢晕开，像阳光照进来。</p>
|
|
156
|
+
<div class="blend">
|
|
157
|
+
<svg viewBox="0 0 196 36" aria-hidden="true"><defs><linearGradient id="bl" x1="0" x2="1"><stop offset="0" stop-color="#F6DA6B"/><stop offset="1" stop-color="#EE9B3B"/></linearGradient></defs><circle cx="18" cy="18" r="14" fill="#F6DA6B"/><path d="M40 18h10" stroke="#56665A" stroke-width="2" stroke-linecap="round"/><path d="M46 13l5 5-5 5" stroke="#56665A" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><circle cx="74" cy="18" r="14" fill="#EE9B3B"/><path d="M96 18h10" stroke="#56665A" stroke-width="2" stroke-linecap="round"/><path d="M102 13l5 5-5 5" stroke="#56665A" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><rect x="120" y="4" width="76" height="28" rx="14" fill="url(#bl)"/></svg>
|
|
158
|
+
</div>
|
|
159
|
+
<p class="tip"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2.8v2.4M12 18.8v2.4M2.8 12h2.4M18.8 12h2.4M5.5 5.5l1.7 1.7M16.8 16.8l1.7 1.7M5.5 18.5l1.7-1.7M16.8 7.2l1.7-1.7"/></svg>纸还亮亮的时候点最好看</p>
|
|
160
|
+
<button class="listen" type="button"><i><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M4.5 9.5h3l4.5-4v13l-4.5-4h-3z"/><path d="M15.5 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11"/></svg></i><span>听老师讲</span><span class="wave" aria-hidden="true"><b style="height:8px"></b><b style="height:14px"></b><b style="height:10px"></b><b style="height:18px"></b><b style="height:12px"></b><b style="height:16px"></b><b style="height:8px"></b><b style="height:12px"></b><b style="height:6px"></b><b style="height:10px"></b></span><time>0:24</time></button>
|
|
161
|
+
</div>
|
|
162
|
+
</li>
|
|
163
|
+
</ol>
|
|
164
|
+
</section>
|
|
165
|
+
|
|
166
|
+
<section class="card palette" aria-label="颜色盘">
|
|
167
|
+
<div class="card-h"><h2>颜色盘</h2><span class="legend"><i></i>这一课推荐</span></div>
|
|
168
|
+
<div class="sw-grid">
|
|
169
|
+
<button class="sw" type="button"><i style="background:#F6DA6B"></i><span class="rec" aria-label="推荐"></span>柠檬黄</button>
|
|
170
|
+
<button class="sw on" type="button" aria-pressed="true"><i style="background:#EE9B3B"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg></i><span class="rec" aria-label="推荐"></span>橘黄</button>
|
|
171
|
+
<button class="sw" type="button"><i style="background:#C9962A"></i>土黄</button>
|
|
172
|
+
<button class="sw" type="button"><i style="background:#9A6B44"></i><span class="rec" aria-label="推荐"></span>赭石</button>
|
|
173
|
+
<button class="sw" type="button"><i style="background:#A9D3A6"></i>嫩绿</button>
|
|
174
|
+
<button class="sw" type="button"><i style="background:#4E9A5F"></i>草绿</button>
|
|
175
|
+
<button class="sw" type="button"><i style="background:#8EC5E0"></i>天蓝</button>
|
|
176
|
+
<button class="sw" type="button"><i style="background:#5C7FB8"></i>群青</button>
|
|
177
|
+
</div>
|
|
178
|
+
<div class="water">
|
|
179
|
+
<span class="water-k"><svg class="ic ic-sm" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3.5c3.2 4.1 5.8 7.2 5.8 10.2a5.8 5.8 0 0 1-11.6 0c0-3 2.6-6.1 5.8-10.2z"/></svg>笔上的水</span>
|
|
180
|
+
<span class="drops">
|
|
181
|
+
<button type="button" aria-label="水少"><i style="width:10px;height:10px"></i></button>
|
|
182
|
+
<button class="on" type="button" aria-label="水适中" aria-pressed="true"><i></i></button>
|
|
183
|
+
<button type="button" aria-label="水多"><i style="width:18px;height:18px"></i></button>
|
|
184
|
+
</span>
|
|
185
|
+
</div>
|
|
186
|
+
</section>
|
|
187
|
+
|
|
188
|
+
<div class="finish">
|
|
189
|
+
<a class="btn btn-primary" href="courses.html"><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>我画好了</a>
|
|
190
|
+
<p><svg class="ic" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 19.5C4.6 11 9.5 5.2 19.8 4.2 20.2 14 14.6 19.6 5 19.5z" fill="#C9962A" stroke="none"/><path d="M5.5 19 13 11.5" stroke="#FFF7DF" stroke-width="1.8" stroke-linecap="round"/></svg>画完能收到 3 片小叶子</p>
|
|
191
|
+
</div>
|
|
192
|
+
</aside>
|
|
193
|
+
</div>
|
|
194
|
+
</div>
|
|
195
|
+
</body>
|
|
196
|
+
</html>
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--bg: #F3F7F2;
|
|
3
|
+
--surface: #FFFFFF;
|
|
4
|
+
--surface-2: #EDF4EB;
|
|
5
|
+
--tint: #E2EFDF;
|
|
6
|
+
--sky: #E3F1EE;
|
|
7
|
+
--text: #1F2A22;
|
|
8
|
+
--muted: #56665A;
|
|
9
|
+
--line: #DCE6DA;
|
|
10
|
+
--primary: #2F7D4F;
|
|
11
|
+
--primary-press: #276B43;
|
|
12
|
+
--primary-soft: #DCEEDF;
|
|
13
|
+
--on: #FFFFFF;
|
|
14
|
+
--accent: #C9962A;
|
|
15
|
+
--accent-soft: #F8EDCF;
|
|
16
|
+
--accent-ink: #7A5710;
|
|
17
|
+
--leaf: #6FAE7E;
|
|
18
|
+
--leaf-deep: #4E9A5F;
|
|
19
|
+
--leaf-light: #B9DDB4;
|
|
20
|
+
--sun: #F2C94C;
|
|
21
|
+
--wood: #9A6B44;
|
|
22
|
+
|
|
23
|
+
--font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
|
|
24
|
+
--w-head: 600;
|
|
25
|
+
|
|
26
|
+
--fs-xs: 12px;
|
|
27
|
+
--fs-sm: 13px;
|
|
28
|
+
--fs-md: 15px;
|
|
29
|
+
--fs-lg: 18px;
|
|
30
|
+
--fs-xl: 24px;
|
|
31
|
+
--fs-2xl: 32px;
|
|
32
|
+
|
|
33
|
+
--s-1: 4px;
|
|
34
|
+
--s-2: 8px;
|
|
35
|
+
--s-3: 12px;
|
|
36
|
+
--s-4: 16px;
|
|
37
|
+
--s-5: 24px;
|
|
38
|
+
--s-6: 32px;
|
|
39
|
+
--s-7: 48px;
|
|
40
|
+
|
|
41
|
+
--r-sm: 10px;
|
|
42
|
+
--r-md: 14px;
|
|
43
|
+
--r-lg: 20px;
|
|
44
|
+
--r-full: 999px;
|
|
45
|
+
|
|
46
|
+
--shadow: 0 6px 18px rgba(47, 125, 79, .10);
|
|
47
|
+
--shadow-sm: 0 1px 3px rgba(47, 125, 79, .08);
|
|
48
|
+
|
|
49
|
+
--ease: cubic-bezier(.2, .8, .2, 1);
|
|
50
|
+
--dur: 200ms;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@media (prefers-reduced-motion: reduce) {
|
|
54
|
+
:root { --dur: 0ms; }
|
|
55
|
+
}
|
|
@@ -0,0 +1,255 @@
|
|
|
1
|
+
* { box-sizing: border-box; }
|
|
2
|
+
html { -webkit-text-size-adjust: 100%; }
|
|
3
|
+
body {
|
|
4
|
+
margin: 0;
|
|
5
|
+
background: var(--bg);
|
|
6
|
+
color: var(--text);
|
|
7
|
+
font-family: var(--font);
|
|
8
|
+
font-size: var(--fs-md);
|
|
9
|
+
line-height: 1.6;
|
|
10
|
+
-webkit-font-smoothing: antialiased;
|
|
11
|
+
position: relative;
|
|
12
|
+
}
|
|
13
|
+
a { color: inherit; text-decoration: none; }
|
|
14
|
+
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
|
|
15
|
+
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
|
|
16
|
+
ol, ul { list-style: none; }
|
|
17
|
+
svg { display: block; }
|
|
18
|
+
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
|
|
19
|
+
|
|
20
|
+
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
|
|
21
|
+
.ic-sm { width: 16px; height: 16px; }
|
|
22
|
+
|
|
23
|
+
.status {
|
|
24
|
+
position: absolute; top: 0; left: 0; right: 0; z-index: 3;
|
|
25
|
+
height: 24px; padding: 0 24px;
|
|
26
|
+
display: flex; align-items: center; justify-content: space-between;
|
|
27
|
+
font-size: var(--fs-sm); font-weight: 600; line-height: 1;
|
|
28
|
+
pointer-events: none;
|
|
29
|
+
}
|
|
30
|
+
.status-r { display: flex; align-items: center; gap: 6px; }
|
|
31
|
+
.status-r svg { height: 12px; width: auto; }
|
|
32
|
+
|
|
33
|
+
.btn {
|
|
34
|
+
display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
|
|
35
|
+
min-height: 44px; padding: 0 var(--s-4);
|
|
36
|
+
border-radius: var(--r-full);
|
|
37
|
+
font-size: var(--fs-md); font-weight: 600; white-space: nowrap;
|
|
38
|
+
transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
|
|
39
|
+
}
|
|
40
|
+
.btn:active { transform: scale(.97); }
|
|
41
|
+
.btn-primary { background: var(--primary); color: var(--on); box-shadow: 0 4px 12px rgba(47, 125, 79, .22); }
|
|
42
|
+
.btn-primary:hover { background: var(--primary-press); }
|
|
43
|
+
.btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
|
|
44
|
+
.btn-ghost:hover { border-color: var(--leaf-light); }
|
|
45
|
+
.btn-round { width: 44px; padding: 0; }
|
|
46
|
+
|
|
47
|
+
.card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); }
|
|
48
|
+
.card-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
|
|
49
|
+
.card-h h2 { font-size: var(--fs-lg); font-weight: var(--w-head); line-height: 1.3; }
|
|
50
|
+
|
|
51
|
+
.pill {
|
|
52
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
53
|
+
height: 28px; padding: 0 var(--s-3);
|
|
54
|
+
border-radius: var(--r-full);
|
|
55
|
+
font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
|
|
56
|
+
}
|
|
57
|
+
.pill-green { background: var(--primary-soft); color: var(--primary-press); }
|
|
58
|
+
.pill-sun { background: var(--accent-soft); color: var(--accent-ink); }
|
|
59
|
+
.muted { color: var(--muted); }
|
|
60
|
+
|
|
61
|
+
.stars { display: inline-flex; gap: 2px; }
|
|
62
|
+
.stars svg { width: 14px; height: 14px; fill: var(--line); }
|
|
63
|
+
.stars .on { fill: var(--accent); }
|
|
64
|
+
|
|
65
|
+
.shell { display: grid; grid-template-columns: 96px minmax(0, 1fr); min-height: 100vh; }
|
|
66
|
+
|
|
67
|
+
.rail {
|
|
68
|
+
position: sticky; top: 0; align-self: start;
|
|
69
|
+
height: 100vh;
|
|
70
|
+
display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
|
|
71
|
+
padding: 40px 0 32px;
|
|
72
|
+
background: var(--surface);
|
|
73
|
+
border-right: 1px solid var(--line);
|
|
74
|
+
}
|
|
75
|
+
.rail-logo {
|
|
76
|
+
width: 52px; height: 52px; margin-bottom: var(--s-4);
|
|
77
|
+
display: grid; place-items: center;
|
|
78
|
+
border-radius: 16px; background: var(--primary); color: var(--on);
|
|
79
|
+
}
|
|
80
|
+
.rail-logo svg { width: 30px; height: 30px; }
|
|
81
|
+
.rail-item {
|
|
82
|
+
width: 72px; min-height: 64px;
|
|
83
|
+
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
|
|
84
|
+
border-radius: var(--r-md);
|
|
85
|
+
font-size: var(--fs-xs); font-weight: 500; color: var(--muted); line-height: 1.2;
|
|
86
|
+
transition: background-color var(--dur) var(--ease);
|
|
87
|
+
}
|
|
88
|
+
.rail-item:hover { background: var(--surface-2); }
|
|
89
|
+
.rail-item.on { background: var(--primary-soft); color: var(--primary-press); font-weight: 600; }
|
|
90
|
+
.rail-gap { flex: 1; }
|
|
91
|
+
|
|
92
|
+
.main { min-width: 0; padding: 48px 32px 40px; }
|
|
93
|
+
|
|
94
|
+
.hello { display: flex; align-items: center; gap: var(--s-4); }
|
|
95
|
+
.avatar { width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px var(--surface), var(--shadow-sm); }
|
|
96
|
+
.hello-t { flex: 1; min-width: 0; }
|
|
97
|
+
.hello h1 { font-size: var(--fs-xl); font-weight: var(--w-head); line-height: 1.3; }
|
|
98
|
+
.hello p { font-size: var(--fs-sm); color: var(--muted); }
|
|
99
|
+
.hello-r { display: flex; align-items: center; gap: var(--s-3); }
|
|
100
|
+
.leaf-count { height: 44px; padding: 0 var(--s-4) 0 var(--s-3); font-size: var(--fs-sm); }
|
|
101
|
+
.leaf-count svg { width: 20px; height: 20px; }
|
|
102
|
+
|
|
103
|
+
.week { margin-top: var(--s-5); display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: var(--s-4); padding: var(--s-5); }
|
|
104
|
+
.week-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-4); }
|
|
105
|
+
.week-deco { width: 120px; height: 76px; margin: -8px 8px -12px 0; flex-shrink: 0; }
|
|
106
|
+
.week-l { position: relative; }
|
|
107
|
+
.week-k { font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
|
|
108
|
+
.week-num { margin-top: 2px; display: flex; align-items: baseline; gap: var(--s-2); }
|
|
109
|
+
.week-num b { font-size: var(--fs-2xl); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
|
|
110
|
+
.week-num span { font-size: var(--fs-md); color: var(--muted); }
|
|
111
|
+
.days { margin-top: var(--s-4); display: flex; gap: var(--s-2); }
|
|
112
|
+
.day { width: 40px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); }
|
|
113
|
+
.day i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); }
|
|
114
|
+
.day i svg { width: 18px; height: 18px; }
|
|
115
|
+
.day.done i { background: var(--primary); color: var(--on); }
|
|
116
|
+
.day.today { color: var(--text); font-weight: 600; }
|
|
117
|
+
.day.today i { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent-ink); }
|
|
118
|
+
.day.plan i { background: var(--surface); box-shadow: inset 0 0 0 2px var(--line); }
|
|
119
|
+
.week-goal { margin-top: var(--s-4); display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--muted); }
|
|
120
|
+
.week-goal svg { color: var(--accent); }
|
|
121
|
+
.week-goal svg { width: 20px; height: 20px; }
|
|
122
|
+
.week-goal b { color: var(--text); font-weight: 600; }
|
|
123
|
+
|
|
124
|
+
.next { background: var(--surface-2); border-radius: var(--r-md); padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
|
|
125
|
+
.next-k { font-size: var(--fs-xs); color: var(--primary-press); font-weight: 600; display: flex; align-items: center; gap: 6px; }
|
|
126
|
+
.next-row { display: flex; gap: var(--s-3); align-items: center; }
|
|
127
|
+
.next-row svg.thumb { width: 56px; height: 56px; border-radius: var(--r-sm); flex-shrink: 0; }
|
|
128
|
+
.next-row h3 { font-size: var(--fs-md); font-weight: var(--w-head); line-height: 1.35; }
|
|
129
|
+
.next-row p { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
|
|
130
|
+
.next .btn { width: 100%; }
|
|
131
|
+
|
|
132
|
+
.chips { margin-top: var(--s-6); display: flex; gap: var(--s-2); flex-wrap: wrap; }
|
|
133
|
+
.chip {
|
|
134
|
+
min-height: 44px; padding: 0 var(--s-4);
|
|
135
|
+
display: inline-flex; align-items: center; gap: 6px;
|
|
136
|
+
border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line);
|
|
137
|
+
font-size: var(--fs-md); font-weight: 500; white-space: nowrap;
|
|
138
|
+
}
|
|
139
|
+
.chip small { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
|
|
140
|
+
.chip.on { background: var(--text); border-color: var(--text); color: var(--on); }
|
|
141
|
+
.chip.on small { color: #C9D6CC; }
|
|
142
|
+
|
|
143
|
+
.group { margin-top: var(--s-6); }
|
|
144
|
+
.group-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-3); }
|
|
145
|
+
.group-h h2 { font-size: var(--fs-lg); font-weight: var(--w-head); line-height: 1.3; display: flex; align-items: center; gap: var(--s-2); }
|
|
146
|
+
.group-h h2 span { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
|
|
147
|
+
.more { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; gap: 2px; font-size: var(--fs-sm); font-weight: 500; color: var(--primary-press); }
|
|
148
|
+
.more svg { width: 16px; height: 16px; }
|
|
149
|
+
|
|
150
|
+
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
|
|
151
|
+
.course { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow); overflow: hidden; transition: transform var(--dur) var(--ease); }
|
|
152
|
+
a.course:hover { transform: translateY(-2px); }
|
|
153
|
+
.art { position: relative; aspect-ratio: 208 / 136; }
|
|
154
|
+
.art > svg { width: 100%; height: 100%; }
|
|
155
|
+
.art .tag { position: absolute; left: 10px; top: 10px; }
|
|
156
|
+
.course-b { padding: var(--s-3) 14px 14px; display: flex; flex-direction: column; gap: 6px; }
|
|
157
|
+
.course-b h3 { font-size: var(--fs-md); font-weight: var(--w-head); line-height: 1.35; }
|
|
158
|
+
.course-meta { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); }
|
|
159
|
+
.course-meta svg { width: 14px; height: 14px; }
|
|
160
|
+
.course-f { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: 2px; }
|
|
161
|
+
.lv { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); }
|
|
162
|
+
.prog { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--primary-press); font-weight: 600; white-space: nowrap; }
|
|
163
|
+
.prog i { width: 36px; height: 6px; border-radius: 3px; background: var(--primary-soft); overflow: hidden; display: block; }
|
|
164
|
+
.prog i b { display: block; height: 100%; border-radius: 3px; background: var(--primary); }
|
|
165
|
+
|
|
166
|
+
.lesson { min-height: 100vh; padding: 40px 24px 28px; display: flex; flex-direction: column; gap: var(--s-4); }
|
|
167
|
+
.bar { display: flex; align-items: center; gap: var(--s-3); }
|
|
168
|
+
.bar-t { flex: 1; min-width: 0; }
|
|
169
|
+
.bar-t p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; }
|
|
170
|
+
.bar-t h1 { font-size: var(--fs-xl); font-weight: var(--w-head); line-height: 1.3; }
|
|
171
|
+
.bar-r { display: flex; align-items: center; gap: var(--s-2); }
|
|
172
|
+
.timer { display: inline-flex; align-items: center; gap: 6px; margin-right: var(--s-2); font-size: var(--fs-sm); color: var(--muted); font-weight: 500; white-space: nowrap; }
|
|
173
|
+
|
|
174
|
+
.stage { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
|
|
175
|
+
|
|
176
|
+
.board { display: flex; flex-direction: column; padding: var(--s-3); gap: var(--s-3); }
|
|
177
|
+
.paper { position: relative; flex: 1; min-height: 520px; border-radius: var(--r-md); background: #FFFEFA; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
|
|
178
|
+
.paper > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
|
|
179
|
+
.peek { margin: 0; position: absolute; top: 12px; right: 12px; width: 96px; padding: 6px; border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--shadow); }
|
|
180
|
+
.peek svg { width: 100%; height: auto; border-radius: 6px; }
|
|
181
|
+
.peek span { display: block; margin-top: 4px; text-align: center; font-size: var(--fs-xs); color: var(--muted); font-weight: 500; line-height: 1.4; }
|
|
182
|
+
.zoom { position: absolute; left: 12px; bottom: 12px; }
|
|
183
|
+
|
|
184
|
+
.tools { display: flex; align-items: center; gap: var(--s-1); padding: 0 var(--s-1); }
|
|
185
|
+
.tool {
|
|
186
|
+
width: 56px; min-height: 56px; flex-shrink: 0;
|
|
187
|
+
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
|
|
188
|
+
border-radius: var(--r-sm); font-size: var(--fs-xs); color: var(--muted); font-weight: 500; line-height: 1.3;
|
|
189
|
+
}
|
|
190
|
+
.tool:hover { background: var(--surface-2); }
|
|
191
|
+
.tool.on { background: var(--primary-soft); color: var(--primary-press); font-weight: 600; }
|
|
192
|
+
.tools-sep { width: 1px; height: 32px; background: var(--line); margin: 0 var(--s-2); }
|
|
193
|
+
.tools-gap { flex: 1; }
|
|
194
|
+
.size { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; }
|
|
195
|
+
.size i { display: block; border-radius: 50%; background: var(--muted); }
|
|
196
|
+
.size.on { box-shadow: inset 0 0 0 2px var(--primary); }
|
|
197
|
+
.size.on i { background: var(--primary); }
|
|
198
|
+
|
|
199
|
+
.side { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
|
|
200
|
+
|
|
201
|
+
.demo-v { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
|
|
202
|
+
.demo-v > svg { width: 100%; height: auto; }
|
|
203
|
+
.demo-v .play { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--primary); display: grid; place-items: center; box-shadow: var(--shadow); }
|
|
204
|
+
.demo-v .play svg { width: 22px; height: 22px; fill: currentColor; stroke: none; margin-left: 3px; }
|
|
205
|
+
.demo-v .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 10px; display: flex; justify-content: space-between; align-items: flex-end; color: var(--on); font-size: var(--fs-sm); font-weight: 600; background: linear-gradient(transparent, rgba(22, 48, 31, .72)); }
|
|
206
|
+
.demo-v .cap span { font-weight: 500; font-variant-numeric: tabular-nums; }
|
|
207
|
+
|
|
208
|
+
.steps { padding: 20px; flex: 1; display: flex; flex-direction: column; }
|
|
209
|
+
.steps ol { margin-top: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
|
|
210
|
+
.step { display: flex; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); }
|
|
211
|
+
.step .n { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 700; line-height: 1; }
|
|
212
|
+
.step h3 { font-size: var(--fs-md); font-weight: var(--w-head); line-height: 1.4; padding-top: 2px; }
|
|
213
|
+
.step p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
|
|
214
|
+
.step-b { flex: 1; min-width: 0; }
|
|
215
|
+
.step.done .n { background: var(--primary-soft); color: var(--primary-press); }
|
|
216
|
+
.step.done h3 { color: var(--muted); font-weight: 500; }
|
|
217
|
+
.step.done .ok { color: var(--primary); margin-top: 3px; }
|
|
218
|
+
.step.now { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--leaf-light); }
|
|
219
|
+
.step.now .n { background: var(--primary); color: var(--on); }
|
|
220
|
+
.step.now p { color: var(--text); margin-top: 4px; }
|
|
221
|
+
.blend { margin-top: var(--s-3); display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--muted); }
|
|
222
|
+
.blend svg { width: 100%; max-width: 196px; height: auto; }
|
|
223
|
+
.tip { margin-top: var(--s-3); display: flex; gap: var(--s-2); align-items: flex-start; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-ink) !important; font-size: var(--fs-sm); line-height: 1.55; }
|
|
224
|
+
.tip svg { width: 18px; height: 18px; margin-top: 1px; }
|
|
225
|
+
|
|
226
|
+
.palette { padding: 20px; }
|
|
227
|
+
.sw-grid { margin-top: var(--s-3); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2) var(--s-1); }
|
|
228
|
+
.sw { min-height: 64px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.3; }
|
|
229
|
+
.sw i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(31, 42, 34, .08); color: var(--on); }
|
|
230
|
+
.sw.on { color: var(--text); font-weight: 600; }
|
|
231
|
+
.sw.on i { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--text); }
|
|
232
|
+
.sw i svg { width: 18px; height: 18px; }
|
|
233
|
+
.water { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: var(--muted); }
|
|
234
|
+
.water-k { display: flex; align-items: center; gap: 6px; color: var(--text); font-weight: 500; flex: 1; }
|
|
235
|
+
.water-k svg { color: #4F93AE; }
|
|
236
|
+
.drops { display: flex; gap: 4px; }
|
|
237
|
+
.drops button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
|
|
238
|
+
.drops i { width: 14px; height: 14px; border-radius: 50%; background: var(--line); display: block; }
|
|
239
|
+
.drops .on i { background: #7DB6CC; }
|
|
240
|
+
|
|
241
|
+
.finish { display: flex; flex-direction: column; gap: var(--s-2); }
|
|
242
|
+
.finish .btn-primary { min-height: 56px; border-radius: var(--r-md); font-size: var(--fs-lg); }
|
|
243
|
+
.finish p { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); }
|
|
244
|
+
.finish p svg { width: 18px; height: 18px; }
|
|
245
|
+
|
|
246
|
+
.listen { margin-top: var(--s-3); width: 100%; white-space: nowrap; min-height: 44px; display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-3) 0 6px; border-radius: var(--r-full); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--fs-sm); font-weight: 500; }
|
|
247
|
+
.listen > i { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--on); display: grid; place-items: center; flex-shrink: 0; }
|
|
248
|
+
.listen > i svg { width: 16px; height: 16px; }
|
|
249
|
+
.wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 20px; }
|
|
250
|
+
.wave b { width: 3px; border-radius: 2px; background: var(--leaf-light); }
|
|
251
|
+
.listen time { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
|
|
252
|
+
.legend { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); }
|
|
253
|
+
.legend i, .sw .rec { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: block; }
|
|
254
|
+
.sw { position: relative; }
|
|
255
|
+
.sw .rec { position: absolute; top: 0; left: calc(50% + 14px); box-shadow: 0 0 0 2px var(--surface); }
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
{
|
|
2
|
+
"format": 1,
|
|
3
|
+
"type": "template",
|
|
4
|
+
"title": { "zh": "月满市集", "en": "Moon Fair" },
|
|
5
|
+
"description": {
|
|
6
|
+
"zh": "中秋夜市的国潮竖版海报：中国红大色块、满月与桂花枝、竖排粗宋体标题、金色细线和印章",
|
|
7
|
+
"en": "A Guochao-style Mid-Autumn night market poster: big Chinese-red block, full moon with osmanthus, vertical bold Song title, fine gold lines and a seal"
|
|
8
|
+
},
|
|
9
|
+
"kind": "poster",
|
|
10
|
+
"size": "1080x1350",
|
|
11
|
+
"screens": [
|
|
12
|
+
{ "file": "poster.html", "title": { "zh": "海报", "en": "Poster" } }
|
|
13
|
+
],
|
|
14
|
+
"style": "guochao",
|
|
15
|
+
"categories": ["event"],
|
|
16
|
+
"tags": ["cover"],
|
|
17
|
+
"lang": "zh",
|
|
18
|
+
"license": "CC0-1.0",
|
|
19
|
+
"author": { "login": "orderg-x", "id": 271418316 },
|
|
20
|
+
"ai": { "generated": true, "tool": "dsh-design-studio@0.11.0" }
|
|
21
|
+
}
|