dsh-design-studio 0.9.0 → 0.11.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.
Files changed (95) hide show
  1. package/README.en.md +6 -4
  2. package/README.md +6 -4
  3. package/assets/demo.gif +0 -0
  4. package/assets/hero-sm.jpg +0 -0
  5. package/cordis.patch.yml +5 -0
  6. package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/_shots/menu.jpg +0 -0
  7. package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/app.css +64 -0
  8. package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/cart.html +120 -0
  9. package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/design.json +56 -0
  10. package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/menu.html +200 -0
  11. package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/order.html +135 -0
  12. package/gallery-seed/d/orderg-x__alley-noodles/08e9e40834f9/tokens.css +43 -0
  13. package/gallery-seed/d/orderg-x__autumn-sale/08e9e40834f9/_shots/email.jpg +0 -0
  14. package/gallery-seed/d/orderg-x__autumn-sale/08e9e40834f9/design.json +20 -0
  15. package/gallery-seed/d/orderg-x__autumn-sale/08e9e40834f9/email.html +268 -0
  16. package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/_shots/courses.jpg +0 -0
  17. package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/courses.html +364 -0
  18. package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/design.json +49 -0
  19. package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/lesson.html +196 -0
  20. package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/tokens.css +55 -0
  21. package/gallery-seed/d/orderg-x__little-painter/08e9e40834f9/ui.css +255 -0
  22. package/gallery-seed/d/orderg-x__moon-fair/08e9e40834f9/_shots/poster.jpg +0 -0
  23. package/gallery-seed/d/orderg-x__moon-fair/08e9e40834f9/design.json +21 -0
  24. package/gallery-seed/d/orderg-x__moon-fair/08e9e40834f9/poster.html +165 -0
  25. package/gallery-seed/d/orderg-x__moon-fair/08e9e40834f9/tokens.css +35 -0
  26. package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/_shots/home.jpg +0 -0
  27. package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/app.css +155 -0
  28. package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/booking.html +232 -0
  29. package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/design.json +57 -0
  30. package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/health.html +221 -0
  31. package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/home.html +225 -0
  32. package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/tokens.css +54 -0
  33. package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/_shots/overview.jpg +0 -0
  34. package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/app.css +79 -0
  35. package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/design.json +51 -0
  36. package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/entries.html +161 -0
  37. package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/icons.svg +30 -0
  38. package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/overview.html +181 -0
  39. package/gallery-seed/d/orderg-x__pocket-ledger/08e9e40834f9/tokens.css +50 -0
  40. package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/_shots/home.jpg +0 -0
  41. package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/book.html +279 -0
  42. package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/design.json +21 -0
  43. package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/home.html +348 -0
  44. package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/style.css +297 -0
  45. package/gallery-seed/d/orderg-x__time-bookshop/08e9e40834f9/tokens.css +49 -0
  46. package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/01-cover.html +133 -0
  47. package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/02-highlights.html +67 -0
  48. package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/03-growth.html +89 -0
  49. package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/04-milestones.html +92 -0
  50. package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/05-next.html +99 -0
  51. package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/06-thanks.html +61 -0
  52. package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/_shots/01-cover.jpg +0 -0
  53. package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/deck.css +67 -0
  54. package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/design.json +25 -0
  55. package/gallery-seed/d/orderg-x__year-review/08e9e40834f9/tokens.css +30 -0
  56. package/gallery-seed/index.json +1 -0
  57. package/gallery-seed/thumbs/orderg-x__alley-noodles.webp +0 -0
  58. package/gallery-seed/thumbs/orderg-x__autumn-sale.webp +0 -0
  59. package/gallery-seed/thumbs/orderg-x__little-painter.webp +0 -0
  60. package/gallery-seed/thumbs/orderg-x__moon-fair.webp +0 -0
  61. package/gallery-seed/thumbs/orderg-x__paw-diary.webp +0 -0
  62. package/gallery-seed/thumbs/orderg-x__pocket-ledger.webp +0 -0
  63. package/gallery-seed/thumbs/orderg-x__time-bookshop.webp +0 -0
  64. package/gallery-seed/thumbs/orderg-x__year-review.webp +0 -0
  65. package/lib/browser.js +23 -9
  66. package/lib/bundle.js +12 -3
  67. package/lib/client.js +3106 -111
  68. package/lib/core.js +44 -11
  69. package/lib/gallery/css.js +230 -0
  70. package/lib/gallery/html.js +313 -0
  71. package/lib/gallery/index.js +22 -0
  72. package/lib/gallery/market-routes.js +306 -0
  73. package/lib/gallery/market.js +623 -0
  74. package/lib/gallery/pack.js +311 -0
  75. package/lib/gallery/policy.js +1560 -0
  76. package/lib/gallery/qrfind.js +181 -0
  77. package/lib/gallery/render.js +148 -0
  78. package/lib/gallery/routes.js +360 -0
  79. package/lib/gallery/tar.js +118 -0
  80. package/lib/gallery/use.js +125 -0
  81. package/lib/gallery/zip.js +212 -0
  82. package/lib/handoff.js +291 -29
  83. package/lib/history.js +3 -1
  84. package/lib/index.js +118 -24
  85. package/lib/inspire.js +142 -0
  86. package/lib/offline.js +17 -0
  87. package/lib/picker.js +425 -32
  88. package/lib/serve.js +88 -11
  89. package/lib/works.js +238 -0
  90. package/locale/en.json +2 -1
  91. package/locale/offline/en.json +6 -0
  92. package/locale/offline/zh.json +6 -0
  93. package/locale/zh.json +2 -1
  94. package/package.json +10 -3
  95. package/skills/ui-design/SKILL.md +9 -0
package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/design.json ADDED
@@ -0,0 +1,57 @@
1
+ {
2
+ "format": 1,
3
+ "type": "template",
4
+ "title": {
5
+ "zh": "毛孩日记",
6
+ "en": "Paw Diary"
7
+ },
8
+ "description": {
9
+ "zh": "粉黄糖果色的宠物照护 App：今日待办、健康档案、预约洗护三屏",
10
+ "en": "A candy-pink pet care app: daily to-dos, health records and grooming booking"
11
+ },
12
+ "kind": "app",
13
+ "screens": [
14
+ {
15
+ "file": "home.html",
16
+ "title": {
17
+ "zh": "首页",
18
+ "en": "Home"
19
+ }
20
+ },
21
+ {
22
+ "file": "health.html",
23
+ "title": {
24
+ "zh": "健康",
25
+ "en": "Health"
26
+ }
27
+ },
28
+ {
29
+ "file": "booking.html",
30
+ "title": {
31
+ "zh": "预约洗护",
32
+ "en": "Book grooming"
33
+ }
34
+ }
35
+ ],
36
+ "style": "cute",
37
+ "categories": [
38
+ "pets"
39
+ ],
40
+ "tags": [
41
+ "profile",
42
+ "calendar",
43
+ "booking",
44
+ "chart",
45
+ "illustration"
46
+ ],
47
+ "lang": "zh",
48
+ "license": "CC0-1.0",
49
+ "author": {
50
+ "login": "orderg-x",
51
+ "id": 271418316
52
+ },
53
+ "ai": {
54
+ "generated": true,
55
+ "tool": "dsh-design-studio@0.11.0"
56
+ }
57
+ }
package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/health.html ADDED
@@ -0,0 +1,221 @@
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="app">
7
+ <title>健康 · 毛孩日记</title>
8
+ <link rel="stylesheet" href="tokens.css">
9
+ <link rel="stylesheet" href="app.css">
10
+ <style>
11
+ .page-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-1); }
12
+ .page-top h1 { font-size: var(--fs-num); line-height: 1.2; }
13
+ .pet-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 10px 4px 4px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-sm); font-weight: 700; }
14
+ .pet-chip .avatar { width: 36px; height: 36px; box-shadow: none; }
15
+ .pet-chip .ico { width: 18px; height: 18px; color: var(--muted); stroke-width: 2.6; }
16
+
17
+ .sum { margin-top: var(--space-5); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
18
+ .sum div { padding: var(--space-3) var(--space-3) var(--space-3); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
19
+ .sum .tile { width: 32px; height: 32px; border-radius: 11px; }
20
+ .sum .tile .ico { width: 18px; height: 18px; }
21
+ .sum b { display: block; margin-top: var(--space-2); font-size: var(--fs-h3); font-weight: var(--w-head); line-height: 1.3; white-space: nowrap; }
22
+ .sum b small { font-size: var(--fs-meta); font-weight: 700; color: var(--muted); }
23
+ .sum .is-soon { background: var(--accent); box-shadow: var(--shadow-accent); }
24
+ .sum .is-soon .tile { background: var(--surface); color: var(--text); }
25
+ .sum .is-soon .meta, .sum .is-soon b small { color: var(--text); }
26
+
27
+ .chart-card { margin-top: var(--space-5); padding: var(--space-4) var(--space-4) var(--space-4); }
28
+ .chart-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
29
+ .chart-top h2 { font-size: var(--fs-h3); }
30
+ .seg { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: var(--bg); }
31
+ .seg span { min-width: 44px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: var(--fs-micro); font-weight: 700; color: var(--muted); text-align: center; line-height: 18px; }
32
+ .seg .on { background: var(--primary); color: var(--on); box-shadow: 0 2px 0 var(--pink-deep); }
33
+ .plot { margin-top: var(--space-3); width: 100%; height: auto; }
34
+ .plot text { font-family: var(--font-round); font-weight: 700; }
35
+ .tip { margin-top: var(--space-3); display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--yellow-soft); font-size: var(--fs-meta); font-weight: 600; }
36
+ .tip .ico { flex: 0 0 auto; width: 18px; height: 18px; color: var(--text); }
37
+
38
+ .list { list-style: none; margin: 0; padding: var(--space-2) var(--space-4); }
39
+ .row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
40
+ .row + .row { border-top: 2px dashed var(--line); }
41
+ .row .tile { width: 40px; height: 40px; border-radius: 13px; }
42
+ .row .tile .ico { width: 22px; height: 22px; }
43
+ .row-txt { flex: 1; min-width: 0; line-height: 1.4; }
44
+ .row-txt b { display: block; font-weight: 700; }
45
+ .price { font-weight: var(--w-head); font-variant-numeric: tabular-nums; }
46
+ .date { flex: 0 0 44px; height: 48px; border-radius: 14px; background: var(--pink-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
47
+ .date b { font-size: var(--fs-h3); font-weight: var(--w-head); }
48
+ .date span { font-size: var(--fs-micro); color: var(--text); font-weight: 700; }
49
+ </style>
50
+ </head>
51
+ <body>
52
+ <svg class="sprite" aria-hidden="true">
53
+ <symbol id="pet-corgi" viewBox="0 0 64 64">
54
+ <path d="M11 34 13.4 9.6c.3-2.4 3-3.4 4.8-1.8L31 19.5z" fill="#FFC93C"/>
55
+ <path d="M15.6 27 17 13.8 25.6 20.4z" fill="#FF9EC0"/>
56
+ <path d="M53 34 50.6 9.6c-.3-2.4-3-3.4-4.8-1.8L33 19.5z" fill="#FFC93C"/>
57
+ <path d="M48.4 27 47 13.8 38.4 20.4z" fill="#FF9EC0"/>
58
+ <ellipse cx="32" cy="38.5" rx="23" ry="19.5" fill="#FFC93C"/>
59
+ <path d="M32 21.5c-2.2 6-7.5 10-7.5 18 0 7.4 3.4 12.6 7.5 12.6s7.5-5.2 7.5-12.6c0-8-5.3-12-7.5-18z" fill="#FFFFFF"/>
60
+ <ellipse cx="32" cy="48" rx="11" ry="7.5" fill="#FFFFFF"/>
61
+ <circle cx="21.5" cy="36.5" r="3.3" fill="#3A2540"/><circle cx="22.7" cy="35.3" r="1.1" fill="#FFFFFF"/>
62
+ <circle cx="42.5" cy="36.5" r="3.3" fill="#3A2540"/><circle cx="43.7" cy="35.3" r="1.1" fill="#FFFFFF"/>
63
+ <ellipse cx="32" cy="43.2" rx="3.6" ry="2.6" fill="#3A2540"/>
64
+ <path d="M28.4 47.4q3.6 3.2 7.2 0" fill="none" stroke="#3A2540" stroke-width="1.8" stroke-linecap="round"/>
65
+ <path d="M30.2 48.6h3.6v2.2a1.8 1.8 0 0 1-3.6 0z" fill="#FF7AA8"/>
66
+ <ellipse cx="16.5" cy="44" rx="3.6" ry="2.3" fill="#FF7AA8" opacity=".6"/>
67
+ <ellipse cx="47.5" cy="44" rx="3.6" ry="2.3" fill="#FF7AA8" opacity=".6"/>
68
+ </symbol>
69
+ <symbol id="pet-cat" viewBox="0 0 64 64">
70
+ <path d="M12 33 13 10.5c.1-2.2 2.6-3.3 4.3-1.9L29 18.5z" fill="#FFB3CC"/>
71
+ <path d="M16.2 26 16.9 14.6 24 20z" fill="#FF7AA8"/>
72
+ <path d="M52 33 51 10.5c-.1-2.2-2.6-3.3-4.3-1.9L35 18.5z" fill="#FFB3CC"/>
73
+ <path d="M47.8 26 47.1 14.6 40 20z" fill="#FF7AA8"/>
74
+ <ellipse cx="32" cy="38.5" rx="23" ry="19" fill="#FFB3CC"/>
75
+ <path d="M32 21v6M25.5 22l1.6 5M38.5 22l-1.6 5" stroke="#FF7AA8" stroke-width="2.6" stroke-linecap="round"/>
76
+ <path d="M19.5 37.5q3.5-4 7 0M37.5 37.5q3.5-4 7 0" fill="none" stroke="#3A2540" stroke-width="2.3" stroke-linecap="round"/>
77
+ <ellipse cx="32" cy="46" rx="7.5" ry="5.4" fill="#FFFFFF"/>
78
+ <path d="M30 42.8h4l-2 2.2z" fill="#FF7AA8" stroke="#FF7AA8" stroke-width="1.2" stroke-linejoin="round"/>
79
+ <path d="M29 47.4q1.5 1.7 3 0q1.5 1.7 3 0" fill="none" stroke="#3A2540" stroke-width="1.5" stroke-linecap="round"/>
80
+ <ellipse cx="16.5" cy="44.5" rx="3.6" ry="2.3" fill="#FFC93C"/>
81
+ <ellipse cx="47.5" cy="44.5" rx="3.6" ry="2.3" fill="#FFC93C"/>
82
+ <path d="M9 41.5l5.5 1M9 46.5l5.5-1.2M55 41.5l-5.5 1M55 46.5l-5.5-1.2" stroke="#3A2540" stroke-opacity=".45" stroke-width="1.4" stroke-linecap="round"/>
83
+ </symbol>
84
+ <symbol id="i-home" viewBox="0 0 24 24"><path d="M4 11.2 12 4.5l8 6.7v7.8a1.8 1.8 0 0 1-1.8 1.8H5.8A1.8 1.8 0 0 1 4 19z"/><path d="M10 20.8v-4.6a2 2 0 0 1 4 0v4.6"/></symbol>
85
+ <symbol id="i-heart" viewBox="0 0 24 24"><path d="M12 20s-7.5-4.6-7.5-10.2A4.2 4.2 0 0 1 12 7.3a4.2 4.2 0 0 1 7.5 2.5C19.5 15.4 12 20 12 20z"/></symbol>
86
+ <symbol id="i-book" viewBox="0 0 24 24"><path d="M6 4.5h10.5A1.5 1.5 0 0 1 18 6v13.5H7.5A2.5 2.5 0 0 1 5 17V5.5a1 1 0 0 1 1-1z"/><path d="M5 17a2.5 2.5 0 0 1 2.5-2.5H18"/><path d="M9.5 8.5h4"/></symbol>
87
+ <symbol id="i-me" viewBox="0 0 24 24"><circle cx="12" cy="8.5" r="3.6"/><path d="M5 20c1.3-3.6 4-5.4 7-5.4s5.7 1.8 7 5.4"/></symbol>
88
+ <symbol id="i-bell" viewBox="0 0 24 24"><path d="M12 4.2a5.3 5.3 0 0 0-5.3 5.3v3.2L5 16.3h14l-1.7-3.6V9.5A5.3 5.3 0 0 0 12 4.2z"/><path d="M10 19a2 2 0 0 0 4 0"/></symbol>
89
+ <symbol id="i-check" viewBox="0 0 24 24"><path d="M5.5 12.5l4.2 4.2 8.8-9"/></symbol>
90
+ <symbol id="i-bowl" viewBox="0 0 24 24"><path d="M3.5 12.5h17a8.5 7 0 0 1-17 0z"/><circle cx="9" cy="9" r="1.6"/><circle cx="14" cy="8" r="1.6"/><circle cx="12" cy="11" r=".6"/></symbol>
91
+ <symbol id="i-walk" viewBox="0 0 24 24"><circle cx="7" cy="17" r="2.6"/><path d="M9 15 17.5 6.5"/><path d="M14 5.5h4.5V10"/></symbol>
92
+ <symbol id="i-pill" viewBox="0 0 24 24"><g transform="rotate(-45 12 12)"><rect x="3.5" y="8.25" width="17" height="7.5" rx="3.75"/><path d="M12 8.25H7.25a3.75 3.75 0 0 0 0 7.5H12z" fill="currentColor"/></g></symbol>
93
+ <symbol id="i-scale" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="5"/><path d="M8.5 10a5 5 0 0 1 7 0"/><path d="M12 10.5l1.2-1.8"/></symbol>
94
+ <symbol id="i-bath" viewBox="0 0 24 24"><path d="M3.5 12h17v1.5a5.5 5.5 0 0 1-5.5 5.5H9a5.5 5.5 0 0 1-5.5-5.5z"/><path d="M6 12V6.5a2 2 0 0 1 3.6-1.2"/><path d="M8 19.5 7 21M16 19.5l1 1.5"/></symbol>
95
+ <symbol id="i-paw" viewBox="0 0 24 24"><ellipse cx="12" cy="16" rx="5" ry="4.2"/><ellipse cx="5.6" cy="10.6" rx="2" ry="2.5"/><ellipse cx="9.4" cy="6.6" rx="2" ry="2.6"/><ellipse cx="14.6" cy="6.6" rx="2" ry="2.6"/><ellipse cx="18.4" cy="10.6" rx="2" ry="2.5"/></symbol>
96
+ <symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5.5v13M5.5 12h13"/></symbol>
97
+ <symbol id="i-right" viewBox="0 0 24 24"><path d="m9.5 6 6 6-6 6"/></symbol>
98
+ <symbol id="i-down" viewBox="0 0 24 24"><path d="m6.5 9.5 5.5 5.5 5.5-5.5"/></symbol>
99
+ <symbol id="i-syringe" viewBox="0 0 24 24"><g transform="rotate(45 12 12)"><rect x="8.5" y="7" width="7" height="10" rx="1.6"/><path d="M12 17v4.5M9 3.5h6M12 3.5V7M8.5 10.5h3M8.5 13.5h3"/></g></symbol>
100
+ <symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3.8 18.5 6v5.4c0 4.2-2.8 7.4-6.5 8.8-3.7-1.4-6.5-4.6-6.5-8.8V6z"/><path d="M9.2 12l2 2 3.8-3.8"/></symbol>
101
+ <symbol id="i-left" viewBox="0 0 24 24"><path d="m14.5 6-6 6 6 6"/></symbol>
102
+ <symbol id="i-scissors" viewBox="0 0 24 24"><circle cx="6.5" cy="7" r="2.6"/><circle cx="6.5" cy="17" r="2.6"/><path d="M8.8 8.4 19 16.5M8.8 15.6 19 7.5"/></symbol>
103
+ <symbol id="i-steth" viewBox="0 0 24 24"><path d="M6 4.5v5a4 4 0 0 0 8 0v-5"/><path d="M10 13.5v1.5a4.5 4.5 0 0 0 9 0v-2"/><circle cx="19" cy="11" r="2"/></symbol>
104
+ <symbol id="i-leaf" viewBox="0 0 24 24"><path d="M5 19c0-8 5-13.5 14-14 .5 9-5 14-12 14z"/><path d="M5 19c3-4 6-6.5 9.5-8.5"/></symbol>
105
+ <symbol id="i-pin" viewBox="0 0 24 24"><path d="M12 20.5s-6-5.6-6-10.5a6 6 0 0 1 12 0c0 4.9-6 10.5-6 10.5z"/><circle cx="12" cy="10" r="2.2"/></symbol>
106
+ <symbol id="i-star" viewBox="0 0 24 24"><path d="M12 4.5l2.3 4.7 5.2.7-3.8 3.6.9 5.1-4.6-2.4-4.6 2.4.9-5.1-3.8-3.6 5.2-.7z"/></symbol>
107
+ <symbol id="i-pen" viewBox="0 0 24 24"><path d="M5 19l1-4.5L15.5 5a2.1 2.1 0 0 1 3 3L9 17.5z"/></symbol>
108
+ </svg>
109
+
110
+ <header class="status" aria-hidden="true">
111
+ <span class="status-time">9:41</span>
112
+ <span class="status-icons">
113
+ <svg width="18" height="12" viewBox="0 0 18 12" fill="currentColor"><rect x="0" y="8" width="3" height="4" rx=".8"/><rect x="5" y="5.5" width="3" height="6.5" rx=".8"/><rect x="10" y="3" width="3" height="9" rx=".8"/><rect x="15" y="0" width="3" height="12" rx=".8"/></svg>
114
+ <svg width="16" height="12" viewBox="0 0 16 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M1.5 4.3a9.5 9.5 0 0 1 13 0"/><path d="M4 7.1a6 6 0 0 1 8 0"/><circle cx="8" cy="10" r="1.3" fill="currentColor" stroke="none"/></svg>
115
+ <svg width="27" height="12" viewBox="0 0 27 12"><rect x=".5" y=".5" width="23" height="11" rx="3.2" fill="none" stroke="currentColor" stroke-opacity=".4"/><rect x="2" y="2" width="17" height="8" rx="1.8" fill="currentColor"/><path d="M25 4v4c.8-.3 1.4-1.1 1.4-2s-.6-1.7-1.4-2z" fill="currentColor" fill-opacity=".4"/></svg>
116
+ </span>
117
+ </header>
118
+
119
+ <main class="page">
120
+ <div class="page-top">
121
+ <h1 class="head">健康档案</h1>
122
+ <a class="pet-chip" href="home.html"><span class="avatar pink"><svg viewBox="0 0 64 64" aria-hidden="true"><use href="#pet-corgi"/></svg></span>团子<svg class="ico"><use href="#i-down"/></svg></a>
123
+ </div>
124
+
125
+ <section class="sum" aria-label="健康概况">
126
+ <div><span class="tile"><svg class="ico"><use href="#i-scale"/></svg></span><b>11.6 <small>kg</small></b><span class="meta">体重</span></div>
127
+ <div><span class="tile"><svg class="ico"><use href="#i-shield"/></svg></span><b>4 / 4 <small>项</small></b><span class="meta">疫苗已打</span></div>
128
+ <div class="is-soon"><span class="tile"><svg class="ico"><use href="#i-pill"/></svg></span><b>2 <small>天后</small></b><span class="meta">体内驱虫</span></div>
129
+ </section>
130
+
131
+ <section class="card chart-card" aria-label="体重曲线">
132
+ <div class="chart-top">
133
+ <h2 class="head">体重曲线</h2>
134
+ <div class="seg"><span>3 月</span><span class="on">半年</span><span>1 年</span></div>
135
+ </div>
136
+ <svg class="plot" viewBox="0 0 300 156" role="img" aria-label="近半年体重从 12.4 kg 降到 11.6 kg">
137
+ <defs>
138
+ <linearGradient id="area" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FF7AA8" stop-opacity=".2"/><stop offset="1" stop-color="#FF7AA8" stop-opacity="0"/></linearGradient>
139
+ </defs>
140
+ <rect x="30" y="47.5" width="266" height="55" rx="10" fill="#FFF3CC"/>
141
+ <text x="290" y="96" text-anchor="end" font-size="10.4" fill="#7A5E80">理想 11–12 kg</text>
142
+ <g stroke="#F3D3DD" stroke-width="1.5" stroke-dasharray="3 5" stroke-linecap="round">
143
+ <path d="M30 20h266M30 47.5h266M30 75h266M30 102.5h266M30 130h266"/>
144
+ </g>
145
+ <g font-size="10.4" fill="#7A5E80" text-anchor="end">
146
+ <text x="22" y="23.5">12.5</text><text x="22" y="51">12</text><text x="22" y="78.5">11.5</text><text x="22" y="106">11</text><text x="22" y="133.5">10.5</text>
147
+ </g>
148
+ <path d="M44 25.5 C 60 29, 74 33, 94 36.5 S 128 50, 144 53 S 178 58.5, 194 58.5 S 228 58.5, 244 60 S 268 66, 282 69.5 L282 130 L44 130Z" fill="url(#area)"/>
149
+ <path d="M44 25.5 C 60 29, 74 33, 94 36.5 S 128 50, 144 53 S 178 58.5, 194 58.5 S 228 58.5, 244 60 S 268 66, 282 69.5" fill="none" stroke="#FF7AA8" stroke-width="4" stroke-linecap="round"/>
150
+ <g fill="#FFFFFF" stroke="#FF7AA8" stroke-width="3">
151
+ <circle cx="44" cy="25.5" r="4.5"/><circle cx="94" cy="36.5" r="4.5"/><circle cx="144" cy="53" r="4.5"/><circle cx="194" cy="58.5" r="4.5"/><circle cx="244" cy="60" r="4.5"/>
152
+ </g>
153
+ <circle cx="282" cy="69.5" r="7.5" fill="#FFC93C" stroke="#3A2540" stroke-width="3"/>
154
+ <rect x="236" y="28" width="58" height="24" rx="12" fill="#3A2540"/>
155
+ <path d="M276 51.5l6 6 6-6z" fill="#3A2540"/>
156
+ <text x="265" y="44" text-anchor="middle" font-size="10.4" fill="#FFFFFF">11.6 kg</text>
157
+ <g font-size="10.4" fill="#7A5E80" text-anchor="middle">
158
+ <text x="44" y="152">6 月</text><text x="94" y="152">7 月</text><text x="144" y="152">8 月</text><text x="194" y="152">9 月</text><text x="244" y="152">10 月</text><text x="282" y="152">11 月</text>
159
+ </g>
160
+ </svg>
161
+ <p class="tip"><svg class="ico fill"><use href="#i-star"/></svg>半年瘦了 0.8 kg，已经回到理想体重啦</p>
162
+ </section>
163
+
164
+ <div class="section-head">
165
+ <h2 class="head">疫苗与驱虫</h2>
166
+ <span class="more">全部 6 项<svg class="ico"><use href="#i-right"/></svg></span>
167
+ </div>
168
+ <ul class="card list">
169
+ <li class="row">
170
+ <span class="tile"><svg class="ico"><use href="#i-syringe"/></svg></span>
171
+ <div class="row-txt"><b>狂犬疫苗</b><span class="meta">2026.03.12 · 下次 2027.03</span></div>
172
+ <span class="chip">已完成</span>
173
+ </li>
174
+ <li class="row">
175
+ <span class="tile"><svg class="ico"><use href="#i-syringe"/></svg></span>
176
+ <div class="row-txt"><b>犬八联</b><span class="meta">2026.03.12 · 下次 2027.03</span></div>
177
+ <span class="chip">已完成</span>
178
+ </li>
179
+ <li class="row">
180
+ <span class="tile yellow"><svg class="ico"><use href="#i-pill"/></svg></span>
181
+ <div class="row-txt"><b>体内驱虫</b><span class="meta">每 3 个月 · 上次 08.09</span></div>
182
+ <span class="chip yellow">11 月 9 日</span>
183
+ </li>
184
+ <li class="row">
185
+ <span class="tile yellow"><svg class="ico"><use href="#i-shield"/></svg></span>
186
+ <div class="row-txt"><b>体外驱虫</b><span class="meta">每月一次 · 上次 10.20</span></div>
187
+ <span class="chip ghost">11 月 20 日</span>
188
+ </li>
189
+ </ul>
190
+
191
+ <div class="section-head">
192
+ <h2 class="head">就诊记录</h2>
193
+ <span class="more">添加<svg class="ico"><use href="#i-plus"/></svg></span>
194
+ </div>
195
+ <ul class="card list">
196
+ <li class="row">
197
+ <span class="date"><b>18</b><span>9 月</span></span>
198
+ <div class="row-txt"><b>皮肤过敏复诊</b><span class="meta">豆豆动物医院 · 刘医生</span></div>
199
+ <span class="price">¥168</span>
200
+ </li>
201
+ <li class="row">
202
+ <span class="date"><b>30</b><span>8 月</span></span>
203
+ <div class="row-txt"><b>耳道清洁</b><span class="meta">豆豆动物医院 · 两耳都做了</span></div>
204
+ <span class="price">¥80</span>
205
+ </li>
206
+ <li class="row">
207
+ <span class="date"><b>6</b><span>5 月</span></span>
208
+ <div class="row-txt"><b>年度体检</b><span class="meta">血常规、心肺都正常</span></div>
209
+ <span class="price">¥399</span>
210
+ </li>
211
+ </ul>
212
+ </main>
213
+
214
+ <nav class="tabbar" aria-label="主导航">
215
+ <a class="tab" href="home.html"><span class="tab-ico"><svg class="ico"><use href="#i-home"/></svg></span>首页</a>
216
+ <a class="tab is-on" href="health.html" aria-current="page"><span class="tab-ico"><svg class="ico"><use href="#i-heart"/></svg></span>健康</a>
217
+ <span class="tab"><span class="tab-ico"><svg class="ico"><use href="#i-book"/></svg></span>日记</span>
218
+ <span class="tab"><span class="tab-ico"><svg class="ico"><use href="#i-me"/></svg></span>我的</span>
219
+ </nav>
220
+ </body>
221
+ </html>
package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/home.html ADDED
@@ -0,0 +1,225 @@
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="app">
7
+ <title>首页 · 毛孩日记</title>
8
+ <link rel="stylesheet" href="tokens.css">
9
+ <link rel="stylesheet" href="app.css">
10
+ <style>
11
+ .topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-1); }
12
+ .pets { display: flex; align-items: center; gap: var(--space-2); }
13
+ .pet { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 4px 6px 4px 4px; border-radius: var(--radius-pill); font-weight: 700; color: var(--muted); }
14
+ .pet .avatar { width: 36px; height: 36px; box-shadow: none; }
15
+ .pet.on { padding-right: 16px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
16
+ .pet.add { width: 44px; justify-content: center; padding: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); color: var(--link); }
17
+ .pet.add .ico { width: 20px; height: 20px; stroke-width: 2.6; }
18
+ .round-btn { position: relative; flex: 0 0 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: var(--shadow-sm); }
19
+ .round-btn .dot { position: absolute; top: 10px; right: 11px; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--surface); }
20
+
21
+ .hero { position: relative; margin-top: var(--space-4); padding: var(--space-5) 140px var(--space-5) var(--space-5); border-radius: 28px; background: var(--primary); color: var(--on); box-shadow: var(--shadow-primary); overflow: hidden; }
22
+ .hero .kind { font-size: var(--fs-meta); font-weight: 700; }
23
+ .hero h1 { font-size: var(--fs-num); line-height: 1.15; margin-top: 2px; display: flex; align-items: center; gap: 6px; }
24
+ .hero h1 .ico { width: 20px; height: 20px; color: var(--surface); }
25
+ .hero p { margin-top: var(--space-1); font-size: var(--fs-meta); font-weight: 600; }
26
+ .hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-4); }
27
+ .hero .chip { background: var(--surface); }
28
+ .hero-pet { position: absolute; right: -4px; bottom: -8px; width: 150px; height: 150px; }
29
+
30
+ .todo-card { margin-top: var(--space-5); padding: var(--space-4) var(--space-3) var(--space-2); }
31
+ .todo-head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-1) var(--space-2) var(--space-2); }
32
+ .todo-head h2 { font-size: var(--fs-h3); }
33
+ .todos { list-style: none; margin: 0; padding: 0; }
34
+ .todo { display: flex; align-items: center; gap: var(--space-3); padding: 6px var(--space-1) 6px var(--space-2); }
35
+ .todo + .todo { border-top: 2px dashed var(--line); }
36
+ .todo .tile { width: 40px; height: 40px; border-radius: 13px; }
37
+ .todo .tile .ico { width: 22px; height: 22px; }
38
+ .todo-txt { flex: 1; min-width: 0; line-height: 1.4; }
39
+ .todo-txt b { display: block; font-weight: 700; }
40
+ .todo.done .todo-txt b { color: var(--muted); }
41
+ .check { flex: 0 0 44px; height: 44px; display: grid; place-items: center; }
42
+ .check span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2.5px var(--line); color: var(--surface); }
43
+ .check .ico { width: 16px; height: 16px; stroke-width: 3.2; }
44
+ .done .check span { background: var(--primary); box-shadow: none; color: var(--text); }
45
+ .todo.warn { margin: 6px 0 4px; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); border: 0; border-radius: var(--radius-md); background: var(--yellow-soft); }
46
+ .todo.warn .tile { background: var(--accent); color: var(--text); }
47
+ .todo.warn .chip { margin-right: 2px; }
48
+
49
+ .weight { margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); }
50
+ .weight-txt { flex: 0 0 auto; line-height: 1.3; }
51
+ .weight-txt .val { display: flex; align-items: baseline; gap: 3px; margin-top: 2px; }
52
+ .num { font-size: var(--fs-h2); font-weight: var(--w-head); letter-spacing: -.02em; }
53
+ .spark { flex: 1; min-width: 0; height: 44px; }
54
+ .weight .chip { align-self: center; }
55
+ .weight > .ico { flex: 0 0 auto; width: 20px; height: 20px; color: var(--muted); stroke-width: 2.6; }
56
+
57
+ .book { position: relative; margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); border-radius: var(--radius); background: var(--accent); box-shadow: var(--shadow-accent); overflow: hidden; }
58
+ .book-txt { flex: 1; min-width: 0; }
59
+ .book-txt b { display: block; font-size: var(--fs-h3); font-weight: var(--w-head); }
60
+ .book-txt .meta { color: var(--text); }
61
+ .book .go { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--surface); font-weight: 700; box-shadow: 0 4px 0 var(--yellow-deep); }
62
+ .book-art { flex: 0 0 64px; height: 56px; }
63
+ </style>
64
+ </head>
65
+ <body>
66
+ <svg class="sprite" aria-hidden="true">
67
+ <symbol id="pet-corgi" viewBox="0 0 64 64">
68
+ <path d="M11 34 13.4 9.6c.3-2.4 3-3.4 4.8-1.8L31 19.5z" fill="#FFC93C"/>
69
+ <path d="M15.6 27 17 13.8 25.6 20.4z" fill="#FF9EC0"/>
70
+ <path d="M53 34 50.6 9.6c-.3-2.4-3-3.4-4.8-1.8L33 19.5z" fill="#FFC93C"/>
71
+ <path d="M48.4 27 47 13.8 38.4 20.4z" fill="#FF9EC0"/>
72
+ <ellipse cx="32" cy="38.5" rx="23" ry="19.5" fill="#FFC93C"/>
73
+ <path d="M32 21.5c-2.2 6-7.5 10-7.5 18 0 7.4 3.4 12.6 7.5 12.6s7.5-5.2 7.5-12.6c0-8-5.3-12-7.5-18z" fill="#FFFFFF"/>
74
+ <ellipse cx="32" cy="48" rx="11" ry="7.5" fill="#FFFFFF"/>
75
+ <circle cx="21.5" cy="36.5" r="3.3" fill="#3A2540"/><circle cx="22.7" cy="35.3" r="1.1" fill="#FFFFFF"/>
76
+ <circle cx="42.5" cy="36.5" r="3.3" fill="#3A2540"/><circle cx="43.7" cy="35.3" r="1.1" fill="#FFFFFF"/>
77
+ <ellipse cx="32" cy="43.2" rx="3.6" ry="2.6" fill="#3A2540"/>
78
+ <path d="M28.4 47.4q3.6 3.2 7.2 0" fill="none" stroke="#3A2540" stroke-width="1.8" stroke-linecap="round"/>
79
+ <path d="M30.2 48.6h3.6v2.2a1.8 1.8 0 0 1-3.6 0z" fill="#FF7AA8"/>
80
+ <ellipse cx="16.5" cy="44" rx="3.6" ry="2.3" fill="#FF7AA8" opacity=".6"/>
81
+ <ellipse cx="47.5" cy="44" rx="3.6" ry="2.3" fill="#FF7AA8" opacity=".6"/>
82
+ </symbol>
83
+ <symbol id="pet-cat" viewBox="0 0 64 64">
84
+ <path d="M12 33 13 10.5c.1-2.2 2.6-3.3 4.3-1.9L29 18.5z" fill="#FFB3CC"/>
85
+ <path d="M16.2 26 16.9 14.6 24 20z" fill="#FF7AA8"/>
86
+ <path d="M52 33 51 10.5c-.1-2.2-2.6-3.3-4.3-1.9L35 18.5z" fill="#FFB3CC"/>
87
+ <path d="M47.8 26 47.1 14.6 40 20z" fill="#FF7AA8"/>
88
+ <ellipse cx="32" cy="38.5" rx="23" ry="19" fill="#FFB3CC"/>
89
+ <path d="M32 21v6M25.5 22l1.6 5M38.5 22l-1.6 5" stroke="#FF7AA8" stroke-width="2.6" stroke-linecap="round"/>
90
+ <path d="M19.5 37.5q3.5-4 7 0M37.5 37.5q3.5-4 7 0" fill="none" stroke="#3A2540" stroke-width="2.3" stroke-linecap="round"/>
91
+ <ellipse cx="32" cy="46" rx="7.5" ry="5.4" fill="#FFFFFF"/>
92
+ <path d="M30 42.8h4l-2 2.2z" fill="#FF7AA8" stroke="#FF7AA8" stroke-width="1.2" stroke-linejoin="round"/>
93
+ <path d="M29 47.4q1.5 1.7 3 0q1.5 1.7 3 0" fill="none" stroke="#3A2540" stroke-width="1.5" stroke-linecap="round"/>
94
+ <ellipse cx="16.5" cy="44.5" rx="3.6" ry="2.3" fill="#FFC93C"/>
95
+ <ellipse cx="47.5" cy="44.5" rx="3.6" ry="2.3" fill="#FFC93C"/>
96
+ <path d="M9 41.5l5.5 1M9 46.5l5.5-1.2M55 41.5l-5.5 1M55 46.5l-5.5-1.2" stroke="#3A2540" stroke-opacity=".45" stroke-width="1.4" stroke-linecap="round"/>
97
+ </symbol>
98
+ <symbol id="i-home" viewBox="0 0 24 24"><path d="M4 11.2 12 4.5l8 6.7v7.8a1.8 1.8 0 0 1-1.8 1.8H5.8A1.8 1.8 0 0 1 4 19z"/><path d="M10 20.8v-4.6a2 2 0 0 1 4 0v4.6"/></symbol>
99
+ <symbol id="i-heart" viewBox="0 0 24 24"><path d="M12 20s-7.5-4.6-7.5-10.2A4.2 4.2 0 0 1 12 7.3a4.2 4.2 0 0 1 7.5 2.5C19.5 15.4 12 20 12 20z"/></symbol>
100
+ <symbol id="i-book" viewBox="0 0 24 24"><path d="M6 4.5h10.5A1.5 1.5 0 0 1 18 6v13.5H7.5A2.5 2.5 0 0 1 5 17V5.5a1 1 0 0 1 1-1z"/><path d="M5 17a2.5 2.5 0 0 1 2.5-2.5H18"/><path d="M9.5 8.5h4"/></symbol>
101
+ <symbol id="i-me" viewBox="0 0 24 24"><circle cx="12" cy="8.5" r="3.6"/><path d="M5 20c1.3-3.6 4-5.4 7-5.4s5.7 1.8 7 5.4"/></symbol>
102
+ <symbol id="i-bell" viewBox="0 0 24 24"><path d="M12 4.2a5.3 5.3 0 0 0-5.3 5.3v3.2L5 16.3h14l-1.7-3.6V9.5A5.3 5.3 0 0 0 12 4.2z"/><path d="M10 19a2 2 0 0 0 4 0"/></symbol>
103
+ <symbol id="i-check" viewBox="0 0 24 24"><path d="M5.5 12.5l4.2 4.2 8.8-9"/></symbol>
104
+ <symbol id="i-bowl" viewBox="0 0 24 24"><path d="M3.5 12.5h17a8.5 7 0 0 1-17 0z"/><circle cx="9" cy="9" r="1.6"/><circle cx="14" cy="8" r="1.6"/><circle cx="12" cy="11" r=".6"/></symbol>
105
+ <symbol id="i-walk" viewBox="0 0 24 24"><circle cx="7" cy="17" r="2.6"/><path d="M9 15 17.5 6.5"/><path d="M14 5.5h4.5V10"/></symbol>
106
+ <symbol id="i-pill" viewBox="0 0 24 24"><g transform="rotate(-45 12 12)"><rect x="3.5" y="8.25" width="17" height="7.5" rx="3.75"/><path d="M12 8.25H7.25a3.75 3.75 0 0 0 0 7.5H12z" fill="currentColor"/></g></symbol>
107
+ <symbol id="i-scale" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="5"/><path d="M8.5 10a5 5 0 0 1 7 0"/><path d="M12 10.5l1.2-1.8"/></symbol>
108
+ <symbol id="i-bath" viewBox="0 0 24 24"><path d="M3.5 12h17v1.5a5.5 5.5 0 0 1-5.5 5.5H9a5.5 5.5 0 0 1-5.5-5.5z"/><path d="M6 12V6.5a2 2 0 0 1 3.6-1.2"/><path d="M8 19.5 7 21M16 19.5l1 1.5"/></symbol>
109
+ <symbol id="i-paw" viewBox="0 0 24 24"><ellipse cx="12" cy="16" rx="5" ry="4.2"/><ellipse cx="5.6" cy="10.6" rx="2" ry="2.5"/><ellipse cx="9.4" cy="6.6" rx="2" ry="2.6"/><ellipse cx="14.6" cy="6.6" rx="2" ry="2.6"/><ellipse cx="18.4" cy="10.6" rx="2" ry="2.5"/></symbol>
110
+ <symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5.5v13M5.5 12h13"/></symbol>
111
+ <symbol id="i-right" viewBox="0 0 24 24"><path d="m9.5 6 6 6-6 6"/></symbol>
112
+ <symbol id="i-down" viewBox="0 0 24 24"><path d="m6.5 9.5 5.5 5.5 5.5-5.5"/></symbol>
113
+ <symbol id="i-syringe" viewBox="0 0 24 24"><g transform="rotate(45 12 12)"><rect x="8.5" y="7" width="7" height="10" rx="1.6"/><path d="M12 17v4.5M9 3.5h6M12 3.5V7M8.5 10.5h3M8.5 13.5h3"/></g></symbol>
114
+ <symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 3.8 18.5 6v5.4c0 4.2-2.8 7.4-6.5 8.8-3.7-1.4-6.5-4.6-6.5-8.8V6z"/><path d="M9.2 12l2 2 3.8-3.8"/></symbol>
115
+ <symbol id="i-left" viewBox="0 0 24 24"><path d="m14.5 6-6 6 6 6"/></symbol>
116
+ <symbol id="i-scissors" viewBox="0 0 24 24"><circle cx="6.5" cy="7" r="2.6"/><circle cx="6.5" cy="17" r="2.6"/><path d="M8.8 8.4 19 16.5M8.8 15.6 19 7.5"/></symbol>
117
+ <symbol id="i-steth" viewBox="0 0 24 24"><path d="M6 4.5v5a4 4 0 0 0 8 0v-5"/><path d="M10 13.5v1.5a4.5 4.5 0 0 0 9 0v-2"/><circle cx="19" cy="11" r="2"/></symbol>
118
+ <symbol id="i-leaf" viewBox="0 0 24 24"><path d="M5 19c0-8 5-13.5 14-14 .5 9-5 14-12 14z"/><path d="M5 19c3-4 6-6.5 9.5-8.5"/></symbol>
119
+ <symbol id="i-pin" viewBox="0 0 24 24"><path d="M12 20.5s-6-5.6-6-10.5a6 6 0 0 1 12 0c0 4.9-6 10.5-6 10.5z"/><circle cx="12" cy="10" r="2.2"/></symbol>
120
+ <symbol id="i-star" viewBox="0 0 24 24"><path d="M12 4.5l2.3 4.7 5.2.7-3.8 3.6.9 5.1-4.6-2.4-4.6 2.4.9-5.1-3.8-3.6 5.2-.7z"/></symbol>
121
+ <symbol id="i-pen" viewBox="0 0 24 24"><path d="M5 19l1-4.5L15.5 5a2.1 2.1 0 0 1 3 3L9 17.5z"/></symbol>
122
+ </svg>
123
+
124
+ <header class="status" aria-hidden="true">
125
+ <span class="status-time">9:41</span>
126
+ <span class="status-icons">
127
+ <svg width="18" height="12" viewBox="0 0 18 12" fill="currentColor"><rect x="0" y="8" width="3" height="4" rx=".8"/><rect x="5" y="5.5" width="3" height="6.5" rx=".8"/><rect x="10" y="3" width="3" height="9" rx=".8"/><rect x="15" y="0" width="3" height="12" rx=".8"/></svg>
128
+ <svg width="16" height="12" viewBox="0 0 16 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M1.5 4.3a9.5 9.5 0 0 1 13 0"/><path d="M4 7.1a6 6 0 0 1 8 0"/><circle cx="8" cy="10" r="1.3" fill="currentColor" stroke="none"/></svg>
129
+ <svg width="27" height="12" viewBox="0 0 27 12"><rect x=".5" y=".5" width="23" height="11" rx="3.2" fill="none" stroke="currentColor" stroke-opacity=".4"/><rect x="2" y="2" width="17" height="8" rx="1.8" fill="currentColor"/><path d="M25 4v4c.8-.3 1.4-1.1 1.4-2s-.6-1.7-1.4-2z" fill="currentColor" fill-opacity=".4"/></svg>
130
+ </span>
131
+ </header>
132
+
133
+ <main class="page">
134
+ <div class="topbar">
135
+ <div class="pets">
136
+ <a class="pet on" href="home.html"><span class="avatar pink"><svg viewBox="0 0 64 64" aria-hidden="true"><use href="#pet-corgi"/></svg></span>团子</a>
137
+ <span class="pet"><span class="avatar"><svg viewBox="0 0 64 64" aria-hidden="true"><use href="#pet-cat"/></svg></span>芝麻</span>
138
+ <span class="pet add" role="button" aria-label="添加毛孩"><svg class="ico"><use href="#i-plus"/></svg></span>
139
+ </div>
140
+ <span class="round-btn" role="button" aria-label="提醒"><svg class="ico"><use href="#i-bell"/></svg><i class="dot"></i></span>
141
+ </div>
142
+
143
+ <section class="hero">
144
+ <p class="kind">柯基 · 男孩</p>
145
+ <h1 class="head">团子 <svg class="ico fill"><use href="#i-heart"/></svg></h1>
146
+ <p>3 岁 2 个月 · 来家第 1,128 天</p>
147
+ <div class="hero-chips"><span class="chip">11.6 kg</span><span class="chip">已绝育</span><span class="chip">疫苗齐全</span></div>
148
+ <svg class="hero-pet" viewBox="0 0 150 150" role="img" aria-label="团子的头像">
149
+ <path d="M124 26l3 7 7 3-7 3-3 7-3-7-7-3 7-3z" fill="#FFC93C"/>
150
+ <path d="M20 46c0-3 3.6-4.4 5.5-2.2 1.9-2.2 5.5-.8 5.5 2.2 0 3.6-5.5 6.4-5.5 6.4S20 49.6 20 46z" fill="#FFFFFF" opacity=".9"/>
151
+ <circle cx="112" cy="52" r="3" fill="#FFFFFF" opacity=".85"/>
152
+ <use href="#pet-corgi" x="12" y="24" width="130" height="130"/>
153
+ <ellipse cx="52" cy="144" rx="15" ry="9" fill="#FFFFFF"/>
154
+ <ellipse cx="102" cy="144" rx="15" ry="9" fill="#FFFFFF"/>
155
+ <path d="M46 140v5M52 139v6M58 140v5M96 140v5M102 139v6M108 140v5" stroke="#F3C4D3" stroke-width="1.8" stroke-linecap="round"/>
156
+ </svg>
157
+ </section>
158
+
159
+ <section class="card todo-card" aria-label="今日待办">
160
+ <div class="todo-head">
161
+ <h2 class="head">今日待办</h2>
162
+ <span class="chip">2 / 4 完成</span>
163
+ </div>
164
+ <ul class="todos">
165
+ <li class="todo done">
166
+ <span class="tile"><svg class="ico fill"><use href="#i-paw"/></svg></span>
167
+ <div class="todo-txt"><b>晨遛 · 小区两圈</b><span class="meta">07:30 · 走了 2.4 km</span></div>
168
+ <span class="check"><span><svg class="ico"><use href="#i-check"/></svg></span></span>
169
+ </li>
170
+ <li class="todo done">
171
+ <span class="tile"><svg class="ico"><use href="#i-bowl"/></svg></span>
172
+ <div class="todo-txt"><b>早饭 · 鸡肉冻干粮 80g</b><span class="meta">08:05 · 林夏喂的</span></div>
173
+ <span class="check"><span><svg class="ico"><use href="#i-check"/></svg></span></span>
174
+ </li>
175
+ <li class="todo">
176
+ <span class="tile"><svg class="ico"><use href="#i-bowl"/></svg></span>
177
+ <div class="todo-txt"><b>晚饭 · 80g + 半根胡萝卜</b><span class="meta">18:30 · 胡萝卜记得蒸软</span></div>
178
+ <span class="check"><span><svg class="ico"><use href="#i-check"/></svg></span></span>
179
+ </li>
180
+ <li class="todo warn">
181
+ <span class="tile"><svg class="ico"><use href="#i-pill"/></svg></span>
182
+ <div class="todo-txt"><b>驱虫提醒 · 体内驱虫</b><span class="meta">11 月 9 日 · 拌在晚饭里</span></div>
183
+ <span class="chip yellow">2 天后</span>
184
+ </li>
185
+ </ul>
186
+ </section>
187
+
188
+ <a class="card weight" href="health.html">
189
+ <div class="weight-txt">
190
+ <span class="meta">体重趋势</span>
191
+ <p class="val"><span class="num">11.6</span><span class="meta">kg</span></p>
192
+ </div>
193
+ <svg class="spark" viewBox="0 0 140 44" preserveAspectRatio="none" aria-hidden="true">
194
+ <path d="M4 10 L30 14 L56 22 L82 25 L108 25 L134 32 L134 44 L4 44Z" fill="#FFE4EC"/>
195
+ <path d="M4 10 L30 14 L56 22 L82 25 L108 25 L134 32" fill="none" stroke="#FF7AA8" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke"/>
196
+ </svg>
197
+ <span class="chip">-0.2 kg</span>
198
+ <svg class="ico"><use href="#i-right"/></svg>
199
+ </a>
200
+
201
+ <a class="book" href="booking.html">
202
+ <svg class="book-art" viewBox="0 0 64 56" aria-hidden="true">
203
+ <circle cx="18" cy="12" r="6" fill="#FFFFFF" opacity=".9"/>
204
+ <circle cx="30" cy="7" r="4" fill="#FFFFFF" opacity=".75"/>
205
+ <circle cx="40" cy="14" r="5" fill="#FFFFFF" opacity=".85"/>
206
+ <path d="M4 26h56v6a16 16 0 0 1-16 16H20A16 16 0 0 1 4 32z" fill="#FF7AA8"/>
207
+ <rect x="2" y="22" width="60" height="8" rx="4" fill="#FFFFFF"/>
208
+ <path d="M16 48l-3 6M48 48l3 6" stroke="#3A2540" stroke-width="3" stroke-linecap="round"/>
209
+ </svg>
210
+ <div class="book-txt">
211
+ <b>该洗香香啦</b>
212
+ <span class="meta">上次洗澡是 18 天前</span>
213
+ </div>
214
+ <span class="go">去预约</span>
215
+ </a>
216
+ </main>
217
+
218
+ <nav class="tabbar" aria-label="主导航">
219
+ <a class="tab is-on" href="home.html" aria-current="page"><span class="tab-ico"><svg class="ico"><use href="#i-home"/></svg></span>首页</a>
220
+ <a class="tab" href="health.html"><span class="tab-ico"><svg class="ico"><use href="#i-heart"/></svg></span>健康</a>
221
+ <span class="tab"><span class="tab-ico"><svg class="ico"><use href="#i-book"/></svg></span>日记</span>
222
+ <span class="tab"><span class="tab-ico"><svg class="ico"><use href="#i-me"/></svg></span>我的</span>
223
+ </nav>
224
+ </body>
225
+ </html>
package/gallery-seed/d/orderg-x__paw-diary/08e9e40834f9/tokens.css ADDED
@@ -0,0 +1,54 @@
1
+ :root {
2
+ /* 颜色：粉黄糖果色 */
3
+ --bg: #FFF4F6;
4
+ --surface: #FFFFFF;
5
+ --text: #3A2540;
6
+ --muted: #7A5E80;
7
+ --line: #F3D3DD;
8
+ --primary: #FF7AA8;
9
+ --accent: #FFC93C;
10
+ --on: #3A2540;
11
+ --link: #C2366F;
12
+ --pink-soft: #FFE4EC;
13
+ --pink-mid: #FFD1DF;
14
+ --pink-deep: #E8638F;
15
+ --yellow-soft: #FFF3CC;
16
+ --yellow-deep: #E9AE1E;
17
+
18
+ /* 字体：圆体 */
19
+ --font-round: "SF Pro Rounded", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
20
+ --w-head: 800;
21
+
22
+ /* 字号阶梯 */
23
+ --fs-micro: 11px;
24
+ --fs-meta: 13px;
25
+ --fs-body: 15px;
26
+ --fs-h3: 17px;
27
+ --fs-h2: 22px;
28
+ --fs-num: 30px;
29
+
30
+ /* 间距 */
31
+ --space-1: 4px;
32
+ --space-2: 8px;
33
+ --space-3: 12px;
34
+ --space-4: 16px;
35
+ --space-5: 20px;
36
+ --space-6: 24px;
37
+ --space-7: 32px;
38
+ --gutter: 20px;
39
+
40
+ /* 形状：圆角很大，底下一道厚阴影 */
41
+ --radius: 24px;
42
+ --radius-md: 18px;
43
+ --radius-sm: 14px;
44
+ --radius-pill: 999px;
45
+ --shadow: 0 6px 0 #F3C4D3;
46
+ --shadow-sm: 0 4px 0 #F3C4D3;
47
+ --shadow-primary: 0 5px 0 var(--pink-deep);
48
+ --shadow-accent: 0 5px 0 var(--yellow-deep);
49
+
50
+ /* 手机安全区 */
51
+ --status-h: 54px;
52
+ --tab-h: 49px;
53
+ --home-bar: 34px;
54
+ }