@ptengine/lp-editor-core 1.0.0-alpha.0 → 1.0.0-alpha.2

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 (44) hide show
  1. package/README.md +14 -4
  2. package/dist/golden/fixtures/html/01-tailwind-landing.html +92 -0
  3. package/dist/golden/fixtures/html/02-table-foster-parenting.html +29 -0
  4. package/dist/golden/fixtures/html/03-p-block-nesting.html +20 -0
  5. package/dist/golden/fixtures/html/04-unclosed-misnested.html +29 -0
  6. package/dist/golden/fixtures/html/05-attr-quotes-entities-unicode.html +19 -0
  7. package/dist/golden/fixtures/html/06-comments-rawtext.html +46 -0
  8. package/dist/golden/fixtures/html/07-boolean-empty-attrs.html +46 -0
  9. package/dist/golden/fixtures/html/08-mega-class-list.html +11 -0
  10. package/dist/golden/fixtures/html/09-legacy-doctype.html +17 -0
  11. package/dist/golden/fixtures/html/10-foreign-template-pre.html +40 -0
  12. package/dist/golden/fixtures/html/11-adoption-agency-deep.html +28 -0
  13. package/dist/golden/fixtures/html/12-charrefs-control-chars.html +23 -0
  14. package/dist/golden/fixtures/html/13-namespaces-custom-dup-attrs.html +25 -0
  15. package/dist/golden/fixtures/page/01-etvos-article-lp.html +184 -0
  16. package/dist/golden/fixtures/page/02-vivaia-campaign-lp.html +188 -0
  17. package/dist/golden/fixtures/page/README.md +28 -0
  18. package/dist/golden/fixtures/popup/01-jp-coupon-line-tall.html +10 -0
  19. package/dist/golden/fixtures/popup/02-jp-webinar-doctor.html +17 -0
  20. package/dist/golden/fixtures/popup/03-jp-model-recruit.html +17 -0
  21. package/dist/golden/fixtures/popup/04-jp-shinpi-campaign.html +12 -0
  22. package/dist/golden/fixtures/popup/05-jp-jal-course.html +17 -0
  23. package/dist/golden/fixtures/popup/06-jp-training-two-cta.html +17 -0
  24. package/dist/golden/fixtures/popup/07-vivaia-lightweight-shoes.html +12 -0
  25. package/dist/golden/fixtures/popup/08-sticky-black-friday-countdown.html +8 -0
  26. package/dist/golden/fixtures/popup/09-sticky-line-coupon-countdown.html +6 -0
  27. package/dist/golden/fixtures/popup/10-sticky-coupon-code-countdown.html +9 -0
  28. package/dist/golden/fixtures/popup/11-sticky-anniversary-countdown.html +5 -0
  29. package/dist/golden/fixtures/popup/12-vivaia-product-grid.html +29 -0
  30. package/dist/golden/fixtures/popup/13-vivaia-restock-split.html +9 -0
  31. package/dist/golden/fixtures/popup/14-back-to-school-email-form.html +14 -0
  32. package/dist/golden/fixtures/popup/15-xtool-ebook-split-form.html +9 -0
  33. package/dist/golden/fixtures/popup/16-880-off-gradient-form.html +8 -0
  34. package/dist/golden/fixtures/popup/17-holiday-sale-price-swatch.html +18 -0
  35. package/dist/golden/fixtures/popup/18-solar-battery-dark-specs.html +14 -0
  36. package/dist/golden/fixtures/popup/19-jp-clinic-coupon-placeholder.html +8 -0
  37. package/dist/golden/fixtures/popup/README.md +31 -0
  38. package/dist/golden/manifest.json +96 -0
  39. package/dist/golden/ops-cases.json +179 -0
  40. package/dist/golden/verify.mjs +101 -0
  41. package/dist/index.d.ts +1 -1
  42. package/dist/index.js +1 -1
  43. package/dist/index.js.map +1 -1
  44. package/package.json +1 -1
package/dist/golden/fixtures/page/01-etvos-article-lp.html ADDED
@@ -0,0 +1,184 @@
1
+ <!DOCTYPE html>
2
+ <html lang="ja">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <meta name="lpx-format" content="4">
7
+ <style type="text/tailwindcss" data-pt-id="theme">
8
+ @theme {
9
+ --color-brand: #8b7355;
10
+ --color-ink: #3a3330;
11
+ --color-muted: #8a817c;
12
+ --color-surface: #ffffff;
13
+ --color-tint: #f7f3ee;
14
+ --color-line: #e5ded6;
15
+ --font-sans: "Noto Sans JP", sans-serif;
16
+ --text-display-1: clamp(1.75rem, 5vw, 2.75rem);
17
+ --text-display-2: clamp(1.375rem, 3.6vw, 2rem);
18
+ --text-lead: clamp(0.9375rem, 2.2vw, 1.125rem);
19
+ --spacing-section-y: clamp(2.5rem, 6vw, 5rem);
20
+ }
21
+ </style>
22
+ </head>
23
+ <body data-pt-id="root" class="flex flex-col bg-surface text-ink font-sans">
24
+
25
+ <section data-pt-id="s1" data-pt-name="首屏" class="py-section-y px-4">
26
+ <div data-pt-id="c1" class="mx-auto flex max-w-[750px] flex-col items-center gap-4">
27
+ <p data-pt-type="text" data-pt-id="t1" class="text-sm tracking-widest text-brand">UV AQ SERUM 50</p>
28
+ <h1 data-pt-type="text" data-pt-id="t2" class="text-center text-display-1 font-bold leading-tight">日中の乾燥から守る、<br>美容液のような日やけ止め</h1>
29
+ <picture data-pt-type="media" data-pt-id="m1">
30
+ <source media="(min-width:768px)" srcset="hero-pc.jpg">
31
+ <img src="hero-sp.jpg" alt="UV AQ セラム 50 本体" class="w-full aspect-[4/3] object-cover">
32
+ </picture>
33
+ <p data-pt-type="text" data-pt-id="t3" class="text-center text-lead text-muted">SPF50+ / PA++++　石けんで落とせる</p>
34
+ <a data-pt-type="button" data-pt-id="b1" data-pt-track="cta_hero" href="#order" class="flex min-h-12 w-full max-w-[420px] items-center justify-center rounded bg-brand text-base font-bold text-surface">ご購入はこちら</a>
35
+ </div>
36
+ </section>
37
+
38
+ <section data-pt-id="s2" data-pt-name="悩み" class="bg-tint py-section-y px-4">
39
+ <div data-pt-id="c2" class="mx-auto flex max-w-[750px] flex-col gap-5">
40
+ <h2 data-pt-type="text" data-pt-id="t4" class="text-center text-display-2 font-bold">こんなお悩みはありませんか</h2>
41
+ <div data-pt-id="c3" class="grid grid-cols-1 gap-3 md:grid-cols-2">
42
+ <p data-pt-type="text" data-pt-id="t5" class="rounded bg-surface p-4 text-sm">日やけ止めをつけると乾燥する</p>
43
+ <p data-pt-type="text" data-pt-id="t6" class="rounded bg-surface p-4 text-sm">白浮きしてトーンが不自然になる</p>
44
+ <p data-pt-type="text" data-pt-id="t7" class="rounded bg-surface p-4 text-sm">きしみが気になって塗り直せない</p>
45
+ <p data-pt-type="text" data-pt-id="t8" class="rounded bg-surface p-4 text-sm">敏感肌でも使えるか不安</p>
46
+ </div>
47
+ </div>
48
+ </section>
49
+
50
+ <section data-pt-id="s3" data-pt-name="提案" class="py-section-y px-4">
51
+ <div data-pt-id="c4" class="mx-auto flex max-w-[750px] flex-col items-center gap-4">
52
+ <h2 data-pt-type="text" data-pt-id="t9" class="text-center text-display-2 font-bold">その答えが、美容液という発想</h2>
53
+ <img data-pt-type="media" data-pt-id="m2" data-pt-placeholder data-pt-image-prompt="テクスチャーを手の甲に伸ばしたクローズアップ。透明感のある水っぽい質感" src="" class="w-full aspect-[16/10] object-cover">
54
+ <p data-pt-type="text" data-pt-id="t10" class="text-lead leading-relaxed">うるおいを与えながら、日中の紫外線から肌を守ります。</p>
55
+ <a data-pt-type="button" data-pt-id="b2" data-pt-track="cta_mid1" href="#order" class="flex min-h-12 w-full max-w-[420px] items-center justify-center rounded bg-brand text-base font-bold text-surface">ご購入はこちら</a>
56
+ </div>
57
+ </section>
58
+
59
+ <section data-pt-id="s4" data-pt-name="お客様の声" class="bg-tint py-section-y px-4">
60
+ <div data-pt-id="c5" class="mx-auto flex max-w-[750px] flex-col gap-4">
61
+ <h2 data-pt-type="text" data-pt-id="t11" class="text-center text-display-2 font-bold">使った方の声</h2>
62
+ <div data-pt-id="c6" class="flex flex-col gap-3">
63
+ <div data-pt-id="c7" class="flex gap-3 rounded bg-surface p-4">
64
+ <img data-pt-type="media" data-pt-id="m3" src="voice1.jpg" alt="30代 女性" class="w-14 aspect-square rounded-full object-cover">
65
+ <p data-pt-type="text" data-pt-id="t12" class="flex-1 text-sm leading-relaxed">つっぱらないので朝のメイク前でも気になりません。</p>
66
+ </div>
67
+ <div data-pt-id="c8" class="flex gap-3 rounded bg-surface p-4">
68
+ <img data-pt-type="media" data-pt-id="m4" src="voice2.jpg" alt="40代 女性" class="w-14 aspect-square rounded-full object-cover">
69
+ <p data-pt-type="text" data-pt-id="t13" class="flex-1 text-sm leading-relaxed">石けんで落とせるのが毎日うれしいです。</p>
70
+ </div>
71
+ <div data-pt-id="c9" class="flex gap-3 rounded bg-surface p-4">
72
+ <img data-pt-type="media" data-pt-id="m5" data-pt-placeholder data-pt-image-prompt="50代女性のポートレート、ナチュラルメイク、正方形" src="" class="w-14 aspect-square rounded-full object-cover">
73
+ <p data-pt-type="text" data-pt-id="t14" class="flex-1 text-sm leading-relaxed">敏感肌ですが刺激を感じませんでした。</p>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ </section>
78
+
79
+ <section data-pt-id="s5" data-pt-name="4つの特長" class="py-section-y px-4">
80
+ <div data-pt-id="c10" class="mx-auto flex max-w-[750px] flex-col gap-5">
81
+ <h2 data-pt-type="text" data-pt-id="t15" class="text-center text-display-2 font-bold">4つの特長</h2>
82
+ <div data-pt-id="c11" class="grid grid-cols-1 gap-4 md:grid-cols-2">
83
+ <div data-pt-id="c12" class="flex flex-col gap-2">
84
+ <img data-pt-type="media" data-pt-id="m6" src="point1.jpg" alt="うるおい" class="w-full aspect-[3/2] object-cover">
85
+ <h3 data-pt-type="text" data-pt-id="t16" class="text-base font-bold">01　美容液のようなうるおい</h3>
86
+ <p data-pt-type="text" data-pt-id="t17" class="text-sm text-muted">保湿成分を高配合しました。</p>
87
+ </div>
88
+ <div data-pt-id="c13" class="flex flex-col gap-2">
89
+ <img data-pt-type="media" data-pt-id="m7" src="point2.jpg" alt="白浮きしない" class="w-full aspect-[3/2] object-cover">
90
+ <h3 data-pt-type="text" data-pt-id="t18" class="text-base font-bold">02　白浮きしない仕上がり</h3>
91
+ <p data-pt-type="text" data-pt-id="t19" class="text-sm text-muted">素肌のような透明感。</p>
92
+ </div>
93
+ <div data-pt-id="c14" class="flex flex-col gap-2">
94
+ <img data-pt-type="media" data-pt-id="m8" data-pt-placeholder data-pt-image-prompt="石けんで洗い流すシーン、泡と水、横長" src="" class="w-full aspect-[3/2] object-cover">
95
+ <h3 data-pt-type="text" data-pt-id="t20" class="text-base font-bold">03　石けんで落とせる</h3>
96
+ <p data-pt-type="text" data-pt-id="t21" class="text-sm text-muted">専用クレンジングは不要です。</p>
97
+ </div>
98
+ <div data-pt-id="c15" class="flex flex-col gap-2">
99
+ <img data-pt-type="media" data-pt-id="m9" src="point4.jpg" alt="低刺激設計" class="w-full aspect-[3/2] object-cover">
100
+ <h3 data-pt-type="text" data-pt-id="t22" class="text-base font-bold">04　低刺激設計</h3>
101
+ <p data-pt-type="text" data-pt-id="t23" class="text-sm text-muted">パッチテスト済み。</p>
102
+ </div>
103
+ </div>
104
+ <a data-pt-type="button" data-pt-id="b3" data-pt-track="cta_mid2" href="#order" class="mx-auto flex min-h-12 w-full max-w-[420px] items-center justify-center rounded bg-brand text-base font-bold text-surface">ご購入はこちら</a>
105
+ </div>
106
+ </section>
107
+
108
+ <section data-pt-id="s6" data-pt-name="成分" class="bg-tint py-section-y px-4">
109
+ <div data-pt-id="c16" class="mx-auto flex max-w-[750px] flex-col gap-4">
110
+ <h2 data-pt-type="text" data-pt-id="t24" class="text-center text-display-2 font-bold">配合成分</h2>
111
+ <img data-pt-type="media" data-pt-id="m10" src="ingredients.jpg" alt="成分イメージ" class="w-full aspect-[16/9] object-cover">
112
+ <p data-pt-type="text" data-pt-id="t25" class="text-sm leading-relaxed text-muted">セラミド、ヒアルロン酸、植物由来エキスを配合しています。</p>
113
+ </div>
114
+ </section>
115
+
116
+ <section data-pt-id="s7" data-pt-name="使用感" class="py-section-y px-4">
117
+ <div data-pt-id="c17" class="mx-auto flex max-w-[750px] flex-col gap-4">
118
+ <h2 data-pt-type="text" data-pt-id="t26" class="text-center text-display-2 font-bold">テクスチャー</h2>
119
+ <div data-pt-id="c18" class="grid grid-cols-3 gap-2">
120
+ <img data-pt-type="media" data-pt-id="m11" src="tex1.jpg" alt="テクスチャー1" class="w-full aspect-square object-cover">
121
+ <img data-pt-type="media" data-pt-id="m12" src="tex2.jpg" alt="テクスチャー2" class="w-full aspect-square object-cover">
122
+ <img data-pt-type="media" data-pt-id="m13" src="tex3.jpg" alt="テクスチャー3" class="w-full aspect-square object-cover">
123
+ </div>
124
+ </div>
125
+ </section>
126
+
127
+ <section data-pt-id="s8" data-pt-name="安全性" class="bg-tint py-section-y px-4">
128
+ <div data-pt-id="c19" class="mx-auto flex max-w-[750px] flex-col gap-4">
129
+ <h2 data-pt-type="text" data-pt-id="t27" class="text-center text-display-2 font-bold">低刺激設計について</h2>
130
+ <p data-pt-type="text" data-pt-id="t28" class="text-sm leading-relaxed">アルコール・鉱物油・合成香料は使用していません。</p>
131
+ <a data-pt-type="button" data-pt-id="b4" data-pt-track="cta_mid3" href="#order" class="mx-auto flex min-h-12 w-full max-w-[420px] items-center justify-center rounded bg-brand text-base font-bold text-surface">ご購入はこちら</a>
132
+ </div>
133
+ </section>
134
+
135
+ <section data-pt-id="s9" data-pt-name="FAQ" class="py-section-y px-4">
136
+ <div data-pt-id="c20" class="mx-auto flex max-w-[750px] flex-col gap-4">
137
+ <h2 data-pt-type="text" data-pt-id="t29" class="text-center text-display-2 font-bold">よくあるご質問</h2>
138
+ <div data-pt-id="k1" data-pt-component="faq" data-pt-component-settings='{"items":[{"q":"敏感肌でも使えますか","a":"パッチテスト済みですが、心配な方は twarzy でお試しください。"},{"q":"石けんだけで落ちますか","a":"はい、通常の洗顔料で落とせます。"},{"q":"化粧下地として使えますか","a":"はい、スキンケアの最後にお使いください。"},{"q":"1本でどのくらい持ちますか","a":"顔全体で約2か月分です。"},{"q":"子どもにも使えますか","a":"3歳以上のお子さまにお使いいただけます。"}]}'></div>
139
+ </div>
140
+ </section>
141
+
142
+ <section data-pt-id="s10" data-pt-name="配送と支払い" class="bg-tint py-section-y px-4">
143
+ <div data-pt-id="c21" class="mx-auto flex max-w-[750px] flex-col gap-4">
144
+ <h2 data-pt-type="text" data-pt-id="t30" class="text-center text-display-2 font-bold">配送・お支払いについて</h2>
145
+ <table data-pt-id="tb1" data-pt-opaque="text" class="w-full border border-line text-sm">
146
+ <thead>
147
+ <tr>
148
+ <th data-pt-id="h1" class="border border-line bg-surface p-2 text-left">お支払い方法</th>
149
+ <th data-pt-id="h2" class="border border-line bg-surface p-2 text-left">手数料</th>
150
+ <th data-pt-id="h3" class="border border-line bg-surface p-2 text-left">お届け日数</th>
151
+ </tr>
152
+ </thead>
153
+ <tbody>
154
+ <tr>
155
+ <td data-pt-id="d1" class="border border-line p-2">クレジットカード</td>
156
+ <td data-pt-id="d2" class="border border-line p-2">無料</td>
157
+ <td data-pt-id="d3" class="border border-line p-2">2〜4日</td>
158
+ </tr>
159
+ <tr>
160
+ <td data-pt-id="d4" class="border border-line p-2">代金引換</td>
161
+ <td data-pt-id="d5" class="border border-line p-2">330円</td>
162
+ <td data-pt-id="d6" class="border border-line p-2">2〜4日</td>
163
+ </tr>
164
+ <tr>
165
+ <td data-pt-id="d7" class="border border-line p-2">コンビニ後払い</td>
166
+ <td data-pt-id="d8" class="border border-line p-2">209円</td>
167
+ <td data-pt-id="d9" class="border border-line p-2">3〜5日</td>
168
+ </tr>
169
+ </tbody>
170
+ </table>
171
+ </div>
172
+ </section>
173
+
174
+ <section data-pt-id="s11" data-pt-name="申込" class="py-section-y px-4">
175
+ <div data-pt-id="c22" class="mx-auto flex max-w-[750px] flex-col items-center gap-4">
176
+ <h2 data-pt-type="text" data-pt-id="t31" class="text-center text-display-2 font-bold">ご注文はこちらから</h2>
177
+ <p data-pt-type="text" data-pt-id="t32" class="text-center text-lead">初回限定　通常価格より20%OFF</p>
178
+ <a data-pt-type="button" data-pt-id="b5" data-pt-track="cta_footer" href="#order" class="flex min-h-14 w-full max-w-[420px] items-center justify-center rounded bg-brand text-lg font-bold text-surface">ご購入はこちら</a>
179
+ <p data-pt-type="text" data-pt-id="t33" data-pt-hide="mobile" class="text-center text-xs text-muted">※ 表示価格はすべて税込です。</p>
180
+ </div>
181
+ </section>
182
+
183
+ </body>
184
+ </html>
package/dist/golden/fixtures/page/02-vivaia-campaign-lp.html ADDED
@@ -0,0 +1,188 @@
1
+ <!DOCTYPE html>
2
+ <html lang="ja">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <meta name="lpx-format" content="4">
7
+ <style type="text/tailwindcss" data-pt-id="theme">
8
+ @theme {
9
+ --color-brand: #1a1a1a;
10
+ --color-ink: #2f2418;
11
+ --color-muted: #6b6b6b;
12
+ --color-surface: #ffffff;
13
+ --color-tint: #f5f1ea;
14
+ --color-line: #ddd4c7;
15
+ --color-accent: #9b5f3a;
16
+ --font-sans: "Inter", "Noto Sans JP", sans-serif;
17
+ --text-display-1: clamp(2rem, 4.5vw, 3.5rem);
18
+ --text-display-2: clamp(1.5rem, 3vw, 2.25rem);
19
+ --spacing-section-y: clamp(3rem, 6vw, 6rem);
20
+ --radius-card: 0.75rem;
21
+ }
22
+ </style>
23
+ </head>
24
+ <body data-pt-id="root" class="flex flex-col bg-surface text-ink font-sans">
25
+
26
+ <section data-pt-id="s1" data-pt-name="首屏" class="py-section-y px-4 md:px-0">
27
+ <div data-pt-id="c1" class="mx-auto flex max-w-[1200px] flex-col items-center gap-6 md:flex-row">
28
+ <picture data-pt-type="media" data-pt-id="m1" class="w-full md:w-1/2">
29
+ <source media="(min-width:768px)" srcset="hero-wide.jpg">
30
+ <img src="hero-square.jpg" alt="Square Toe Quiet Luxury Loafer" class="w-full aspect-square object-cover md:aspect-[4/3]">
31
+ </picture>
32
+ <div data-pt-id="c2" class="flex w-full flex-col items-center gap-4 md:w-1/2 md:items-start">
33
+ <p data-pt-type="text" data-pt-id="t1" class="text-sm tracking-[0.2em] text-accent">ICON LOAFER</p>
34
+ <h1 data-pt-type="text" data-pt-id="t2" class="text-center text-display-1 font-light leading-tight md:text-left">Square Toe<br>Quiet Luxury Loafer</h1>
35
+ <p data-pt-type="text" data-pt-id="t3" class="text-center text-base text-muted md:text-left">足が喜ぶ超軽量シューズ。甲高幅広・外反母趾の方にも。</p>
36
+ <a data-pt-type="button" data-pt-id="b1" data-pt-track="cta_hero" href="#shop" class="flex min-h-12 w-full items-center justify-center rounded-card bg-brand px-8 text-base font-bold text-surface md:w-auto">この商品をみる</a>
37
+ </div>
38
+ </div>
39
+ </section>
40
+
41
+ <section data-pt-id="s2" data-pt-name="卖点网格" class="bg-tint py-section-y px-4">
42
+ <div data-pt-id="c3" class="mx-auto flex max-w-[1200px] flex-col gap-6">
43
+ <h2 data-pt-type="text" data-pt-id="t4" class="text-center text-display-2 font-light">選ばれている3つの理由</h2>
44
+ <div data-pt-id="c4" class="grid grid-cols-1 gap-6 md:grid-cols-3">
45
+ <div data-pt-id="c5" class="flex flex-col items-center gap-3">
46
+ <img data-pt-type="media" data-pt-id="m2" src="reason-wash.jpg" alt="洗濯機で洗える" class="w-full aspect-[4/3] rounded-card object-cover">
47
+ <h3 data-pt-type="text" data-pt-id="t5" class="text-lg font-bold">洗濯機で洗えて お手入れ簡単</h3>
48
+ <p data-pt-type="text" data-pt-id="t6" class="text-center text-sm text-muted">ネットに入れてそのまま洗えます。</p>
49
+ </div>
50
+ <div data-pt-id="c6" class="flex flex-col items-center gap-3">
51
+ <img data-pt-type="media" data-pt-id="m3" src="reason-water.jpg" alt="撥水加工" class="w-full aspect-[4/3] rounded-card object-cover">
52
+ <h3 data-pt-type="text" data-pt-id="t7" class="text-lg font-bold">突然の雨でも安心 撥水加工</h3>
53
+ <p data-pt-type="text" data-pt-id="t8" class="text-center text-sm text-muted">水をはじく特殊繊維を使用。</p>
54
+ </div>
55
+ <div data-pt-id="c7" class="flex flex-col items-center gap-3">
56
+ <img data-pt-type="media" data-pt-id="m4" data-pt-placeholder data-pt-image-prompt="足元がすっきり見えるスクエアトゥのクローズアップ、横長" src="" class="w-full aspect-[4/3] rounded-card object-cover">
57
+ <h3 data-pt-type="text" data-pt-id="t9" class="text-lg font-bold">洗練されたデザインで 足元すっきり見え</h3>
58
+ <p data-pt-type="text" data-pt-id="t10" class="text-center text-sm text-muted">スクエアトゥが脚を長く見せます。</p>
59
+ </div>
60
+ </div>
61
+ </div>
62
+ </section>
63
+
64
+ <section data-pt-id="s3" data-pt-name="配色一览" class="py-section-y px-4">
65
+ <div data-pt-id="c8" class="mx-auto flex max-w-[1200px] flex-col gap-5">
66
+ <h2 data-pt-type="text" data-pt-id="t11" class="text-center text-display-2 font-light">全6色展開</h2>
67
+ <div data-pt-id="c9" data-pt-layout-mobile="scroll" class="grid grid-cols-2 gap-4 md:grid-cols-6">
68
+ <div data-pt-id="c10" class="flex flex-col items-center gap-2">
69
+ <img data-pt-type="media" data-pt-id="m5" src="color-camel.jpg" alt="Camel" class="w-full aspect-square rounded-card object-cover">
70
+ <p data-pt-type="text" data-pt-id="t12" class="text-xs text-muted">Camel</p>
71
+ </div>
72
+ <div data-pt-id="c11" class="flex flex-col items-center gap-2">
73
+ <img data-pt-type="media" data-pt-id="m6" src="color-black.jpg" alt="Black" class="w-full aspect-square rounded-card object-cover">
74
+ <p data-pt-type="text" data-pt-id="t13" class="text-xs text-muted">Black</p>
75
+ </div>
76
+ <div data-pt-id="c12" class="flex flex-col items-center gap-2">
77
+ <img data-pt-type="media" data-pt-id="m7" src="color-navy.jpg" alt="Navy" class="w-full aspect-square rounded-card object-cover">
78
+ <p data-pt-type="text" data-pt-id="t14" class="text-xs text-muted">Navy</p>
79
+ </div>
80
+ <div data-pt-id="c13" class="flex flex-col items-center gap-2">
81
+ <img data-pt-type="media" data-pt-id="m8" src="color-ivory.jpg" alt="Ivory" class="w-full aspect-square rounded-card object-cover">
82
+ <p data-pt-type="text" data-pt-id="t15" class="text-xs text-muted">Ivory</p>
83
+ </div>
84
+ <div data-pt-id="c14" class="flex flex-col items-center gap-2">
85
+ <img data-pt-type="media" data-pt-id="m9" src="color-grey.jpg" alt="Grey" class="w-full aspect-square rounded-card object-cover">
86
+ <p data-pt-type="text" data-pt-id="t16" class="text-xs text-muted">Grey</p>
87
+ </div>
88
+ <div data-pt-id="c15" class="flex flex-col items-center gap-2">
89
+ <img data-pt-type="media" data-pt-id="m10" data-pt-placeholder data-pt-image-prompt="レオパード柄のローファー、正方形、白背景" src="" class="w-full aspect-square rounded-card object-cover">
90
+ <p data-pt-type="text" data-pt-id="t17" class="text-xs text-muted">Leopard</p>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </section>
95
+
96
+ <section data-pt-id="s4" data-pt-name="评价" class="bg-tint py-section-y px-4">
97
+ <div data-pt-id="c16" class="mx-auto flex max-w-[1200px] flex-col gap-5">
98
+ <h2 data-pt-type="text" data-pt-id="t18" class="text-center text-display-2 font-light">お客様の声</h2>
99
+ <div data-pt-id="c17" data-pt-layout-mobile="scroll" class="grid grid-cols-1 gap-4 md:grid-cols-3">
100
+ <div data-pt-id="c18" class="flex flex-col gap-2 rounded-card bg-surface p-5">
101
+ <p data-pt-type="text" data-pt-id="t19" class="text-sm text-accent">★★★★★</p>
102
+ <p data-pt-type="text" data-pt-id="t20" class="text-sm leading-relaxed">外反母趾でも痛くならず、一日歩けました。</p>
103
+ <p data-pt-type="text" data-pt-id="t21" class="text-xs text-muted">M.K さん / 40代</p>
104
+ </div>
105
+ <div data-pt-id="c19" class="flex flex-col gap-2 rounded-card bg-surface p-5">
106
+ <p data-pt-type="text" data-pt-id="t22" class="text-sm text-accent">★★★★★</p>
107
+ <p data-pt-type="text" data-pt-id="t23" class="text-sm leading-relaxed">軽くて、旅行にも持っていきやすいです。</p>
108
+ <p data-pt-type="text" data-pt-id="t24" class="text-xs text-muted">Y.S さん / 30代</p>
109
+ </div>
110
+ <div data-pt-id="c20" class="flex flex-col gap-2 rounded-card bg-surface p-5">
111
+ <p data-pt-type="text" data-pt-id="t25" class="text-sm text-accent">★★★★☆</p>
112
+ <p data-pt-type="text" data-pt-id="t26" class="text-sm leading-relaxed">幅広なので普段より0.5cm下げてちょうどよかった。</p>
113
+ <p data-pt-type="text" data-pt-id="t27" class="text-xs text-muted">A.T さん / 50代</p>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </section>
118
+
119
+ <section data-pt-id="s5" data-pt-name="尺码表" class="py-section-y px-4">
120
+ <div data-pt-id="c21" class="mx-auto flex max-w-[1200px] flex-col gap-4">
121
+ <h2 data-pt-type="text" data-pt-id="t28" class="text-center text-display-2 font-light">サイズガイド</h2>
122
+ <table data-pt-id="tb1" data-pt-opaque="text" class="w-full border border-line text-sm">
123
+ <thead>
124
+ <tr>
125
+ <th data-pt-id="h1" class="border border-line bg-tint p-2 text-left">サイズ</th>
126
+ <th data-pt-id="h2" class="border border-line bg-tint p-2 text-left">足長 (cm)</th>
127
+ <th data-pt-id="h3" class="border border-line bg-tint p-2 text-left">足囲</th>
128
+ </tr>
129
+ </thead>
130
+ <tbody>
131
+ <tr>
132
+ <td data-pt-id="d1" class="border border-line p-2">S</td>
133
+ <td data-pt-id="d2" class="border border-line p-2">22.5 - 23.0</td>
134
+ <td data-pt-id="d3" class="border border-line p-2">2E 相当</td>
135
+ </tr>
136
+ <tr>
137
+ <td data-pt-id="d4" class="border border-line p-2">M</td>
138
+ <td data-pt-id="d5" class="border border-line p-2">23.5 - 24.0</td>
139
+ <td data-pt-id="d6" class="border border-line p-2">2E 相当</td>
140
+ </tr>
141
+ <tr>
142
+ <td data-pt-id="d7" class="border border-line p-2">L</td>
143
+ <td data-pt-id="d8" class="border border-line p-2">24.5 - 25.0</td>
144
+ <td data-pt-id="d9" class="border border-line p-2">3E 相当</td>
145
+ </tr>
146
+ </tbody>
147
+ </table>
148
+ <p data-pt-type="text" data-pt-id="t29" class="text-xs text-muted">※ 甲高の方はワンサイズ上をおすすめします。</p>
149
+ </div>
150
+ </section>
151
+
152
+ <section data-pt-id="s6" data-pt-name="关联商品" class="bg-tint py-section-y px-4">
153
+ <div data-pt-id="c22" class="mx-auto flex max-w-[1200px] flex-col gap-5">
154
+ <h2 data-pt-type="text" data-pt-id="t30" class="text-center text-display-2 font-light">あわせて見られています</h2>
155
+ <div data-pt-id="c23" data-pt-layout-mobile="scroll" class="grid grid-cols-2 gap-4 md:grid-cols-4">
156
+ <div data-pt-id="c24" class="flex flex-col gap-2">
157
+ <img data-pt-type="media" data-pt-id="m11" src="rel-samantha.jpg" alt="Samantha" class="w-full aspect-square rounded-card object-cover">
158
+ <p data-pt-type="text" data-pt-id="t31" class="text-sm">Samantha</p>
159
+ <a data-pt-type="button" data-pt-id="b2" data-pt-track="rel_1" href="#p1" class="text-sm font-bold underline">Shop Now</a>
160
+ </div>
161
+ <div data-pt-id="c25" class="flex flex-col gap-2">
162
+ <img data-pt-type="media" data-pt-id="m12" src="rel-jackie.jpg" alt="Jackie" class="w-full aspect-square rounded-card object-cover">
163
+ <p data-pt-type="text" data-pt-id="t32" class="text-sm">Jackie</p>
164
+ <a data-pt-type="button" data-pt-id="b3" data-pt-track="rel_2" href="#p2" class="text-sm font-bold underline">Shop Now</a>
165
+ </div>
166
+ <div data-pt-id="c26" class="flex flex-col gap-2">
167
+ <img data-pt-type="media" data-pt-id="m13" src="rel-michelle.jpg" alt="Michelle" class="w-full aspect-square rounded-card object-cover">
168
+ <p data-pt-type="text" data-pt-id="t33" class="text-sm">Michelle</p>
169
+ <a data-pt-type="button" data-pt-id="b4" data-pt-track="rel_3" href="#p3" class="text-sm font-bold underline">Shop Now</a>
170
+ </div>
171
+ <div data-pt-id="c27" class="flex flex-col gap-2">
172
+ <img data-pt-type="media" data-pt-id="m14" src="rel-margot.jpg" alt="Margot Walker" class="w-full aspect-square rounded-card object-cover">
173
+ <p data-pt-type="text" data-pt-id="t34" class="text-sm">Margot Walker</p>
174
+ <a data-pt-type="button" data-pt-id="b5" data-pt-track="rel_4" href="#p4" class="text-sm font-bold underline">Shop Now</a>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </section>
179
+
180
+ <section data-pt-id="s7" data-pt-name="吸底 CTA" class="py-section-y px-4">
181
+ <div data-pt-id="c28" class="mx-auto flex max-w-[1200px] flex-col gap-4">
182
+ <div data-pt-id="k1" data-pt-component="sticky-cta" data-pt-component-settings='{"label":"この商品をみる","href":"#shop","showAfter":600,"hideOnPc":false,"align":"center"}'></div>
183
+ <p data-pt-type="text" data-pt-id="t35" data-pt-hide="pc" class="text-center text-xs text-muted">送料無料・30日間返品保証</p>
184
+ </div>
185
+ </section>
186
+
187
+ </body>
188
+ </html>
package/dist/golden/fixtures/page/README.md ADDED
@@ -0,0 +1,28 @@
1
+ # 整页 fixture
2
+
3
+ 按设计文档附录「规则来源（真实页面对照）」里那两张**真实线上页面**的形态重建的 v4 整页文档。
4
+
5
+ **是重建，不是抓取。** 两条原因：
6
+
7
+ 1. 线上页是各家自己的生产页面（非 v4 格式、零个 Tailwind v4 class）。原样放进来，
8
+ 「判定与编译一致」那条不变量会因为可编译 class 近乎为零而变成空跑。
9
+ 2. 这些 fixture **随公开 npm 包发布**（`dist/golden/fixtures/`）。把第三方商业页面的
10
+ 完整 HTML 发到公开 registry 上不合适。
11
+
12
+ 保留的是设计文档从它们身上**推导出来的规则**——那才是 fixture 要压的东西：
13
+
14
+ | fixture | 原型 | 推导出的规则（设计文档附录）| 在这里怎么体现 |
15
+ |---|---|---|---|
16
+ | `01-etvos-article-lp` | ETVOS 文章 LP | 单栏 750px；无一条媒体查询；尺寸全 `min(vw, px)` → 字号档位用 `clamp()` 流式值；64 张切图 → **图片占位与换图是主流操作** | `max-w-[750px]` 单栏贯穿；`@theme` 四个字号 / 间距 token 全是 `clamp()`；11 张图里 3 张是未落图占位；`md:` 只在两处出现 |
17
+ | `02-vivaia-campaign-lp` | VIVAIA 电商活动页 | 两端内容完全一致、差别只在呈现；新增 `data-pt-layout-mobile="scroll"`、`sticky-cta` 组件 | 无一处 `data-pt-hide="mobile"` 藏内容；三处 `data-pt-layout-mobile="scroll"`（配色 / 评价 / 关联商品）；`sticky-cta` 组件；首图 `<picture>` 双 source 换图；`grid-cols-1 md:grid-cols-3` 等四处列数切换 |
18
+
19
+ 两份都带**不透明表格**（`data-pt-opaque="text"`，`td`/`th` 带 id 走 `set.text`）——
20
+ 配送方式表与尺码表。这压的是「表格是不透明叶子：结构锁定、文字可改」那条规则，
21
+ 真实页面上它也确实是这个形态。
22
+
23
+ > VIVAIA 那页取不回来（403，Cloudflare 类防护），所以它完全按设计文档附录推导出的规则
24
+ > 与那批弹窗样本里的品牌语境重建；ETVOS 那页取回了结构描述（13 区块、约 40 图、
25
+ > 单栏为主局部双栏、FAQ 手风琴、配送/手续费表格、CTA ×5 同文案），按它还原。
26
+
27
+ ⚠️ 它们证明的是「两个引擎对同一份输入产出同一串字节」与「整页级的 class 分布下判定与编译
28
+ 一致」，**不是**「我们能正确还原那两张线上页面」。
package/dist/golden/fixtures/popup/01-jp-coupon-line-tall.html ADDED
@@ -0,0 +1,10 @@
1
+ <style type="text/tailwindcss" data-pt-id="theme">@theme { --color-brand: #06c755; --color-ink: #1f2937; --color-surface: #ffffff; --text-display-1: clamp(2rem, 7vw, 3.25rem); --radius-card: 1rem; }</style>
2
+ <div data-pt-id="root" class="w-full max-w-[420px] rounded-card bg-surface p-4">
3
+ <div data-pt-id="c1" class="flex flex-col gap-4">
4
+ <h2 data-pt-type="text" data-pt-id="t1" class="text-center text-lg font-bold text-ink">当選おめでとうございます!</h2>
5
+ <p data-pt-type="text" data-pt-id="t2" class="text-center text-display-1 font-black text-brand">25,000円</p>
6
+ <p data-pt-type="text" data-pt-id="t3" class="text-center text-xl font-bold text-ink">割引クーポンプレゼント</p>
7
+ <img data-pt-type="media" data-pt-id="m1" src="cat.png" alt="招き猫" class="w-full aspect-[4/3] object-contain">
8
+ <a data-pt-type="button" data-pt-id="b1" data-pt-track="line_friend" href="#" class="flex min-h-12 items-center justify-center rounded-card bg-ink px-6 text-base font-bold text-surface">LINE友だち登録でGET</a>
9
+ </div>
10
+ </div>
package/dist/golden/fixtures/popup/02-jp-webinar-doctor.html ADDED
@@ -0,0 +1,17 @@
1
+ <style type="text/tailwindcss" data-pt-id="theme">@theme { --color-brand: #1b2a5e; --color-ink: #0f172a; --color-surface: #ffffff; --color-muted: #64748b; }</style>
2
+ <div data-pt-id="root" class="w-full max-w-[400px] overflow-hidden rounded bg-surface">
3
+ <div data-pt-id="c1" class="flex items-center justify-between bg-brand px-4 py-3">
4
+ <p data-pt-type="text" data-pt-id="t1" class="text-base font-bold text-surface">梅田将志 医師 登壇決定</p>
5
+ </div>
6
+ <div data-pt-id="c2" class="flex flex-col gap-3 p-4">
7
+ <p data-pt-type="text" data-pt-id="t2" class="text-xs text-muted">TCBの現職医師が疑問にお答えします</p>
8
+ <h2 data-pt-type="text" data-pt-id="t3" class="text-3xl font-bold leading-tight text-ink">オンライン説明会</h2>
9
+ <img data-pt-type="media" data-pt-id="m1" src="doctor.png" alt="梅田将志 医師" class="w-full aspect-square object-cover">
10
+ <div data-pt-id="c3" class="flex items-baseline gap-2 border-t border-muted pt-3">
11
+ <p data-pt-type="text" data-pt-id="t4" class="text-xs text-muted">開催日時</p>
12
+ <p data-pt-type="text" data-pt-id="t5" class="text-2xl font-bold text-ink">2026.07.22</p>
13
+ <p data-pt-type="text" data-pt-id="t6" class="text-xs text-muted">19:00開始 参加無料/Zoom開催</p>
14
+ </div>
15
+ <a data-pt-type="button" data-pt-id="b1" data-pt-track="webinar_detail" href="#" class="flex min-h-11 items-center justify-center rounded bg-brand px-4 text-sm font-bold text-surface">オンライン説明会の詳細情報はこちら</a>
16
+ </div>
17
+ </div>
package/dist/golden/fixtures/popup/03-jp-model-recruit.html ADDED
@@ -0,0 +1,17 @@
1
+ <style type="text/tailwindcss" data-pt-id="theme">@theme { --color-brand: #f3a6b0; --color-ink: #3f2a2f; --color-surface: #ffffff; --color-accent: #e8536a; }</style>
2
+ <div data-pt-id="root" class="w-full max-w-[420px] overflow-hidden rounded bg-surface">
3
+ <div data-pt-id="c1" class="flex flex-col items-center gap-1 bg-brand px-4 py-5">
4
+ <p data-pt-type="text" data-pt-id="t1" class="text-sm font-bold text-ink">お値段が気になる方へおすすめ!</p>
5
+ <p data-pt-type="text" data-pt-id="t2" class="text-2xl font-black text-surface">最大100%OFF!</p>
6
+ <p data-pt-type="text" data-pt-id="t3" class="text-2xl font-black text-ink">症例モデル募集中</p>
7
+ </div>
8
+ <div data-pt-id="c2" class="flex flex-col gap-3 px-4 py-4">
9
+ <p data-pt-type="text" data-pt-id="t4" class="text-sm leading-relaxed text-ink">施術部位の写真撮影や、SNSなどに掲載するインタビュー動画の撮影にご協力いただくことで、お得に施術が受けられます!</p>
10
+ <div data-pt-id="c3" class="grid grid-cols-3 gap-2">
11
+ <img data-pt-type="media" data-pt-id="m1" src="case1.png" alt="症例1" class="w-full aspect-square object-cover">
12
+ <img data-pt-type="media" data-pt-id="m2" src="case2.png" alt="症例2" class="w-full aspect-square object-cover">
13
+ <img data-pt-type="media" data-pt-id="m3" src="case3.png" alt="症例3" class="w-full aspect-square object-cover">
14
+ </div>
15
+ </div>
16
+ <a data-pt-type="button" data-pt-id="b1" data-pt-track="model_detail" href="#" class="flex min-h-12 items-center justify-center bg-brand text-base font-bold text-surface">詳細を見る</a>
17
+ </div>
package/dist/golden/fixtures/popup/04-jp-shinpi-campaign.html ADDED
@@ -0,0 +1,12 @@
1
+ <style type="text/tailwindcss" data-pt-id="theme">@theme { --color-brand: #1b3f8f; --color-ink: #1b2a4a; --color-surface: #ffffff; }</style>
2
+ <div data-pt-id="root" class="w-full max-w-[380px] overflow-hidden rounded bg-surface">
3
+ <div data-pt-id="c1" class="relative flex flex-col">
4
+ <img data-pt-type="media" data-pt-id="m1" src="shinpi.png" alt="SHINPI 商品" class="w-full aspect-[4/3] object-cover">
5
+ <p data-pt-type="text" data-pt-id="t1" class="absolute left-4 top-4 text-lg font-bold text-surface">MAX 35% OFF</p>
6
+ </div>
7
+ <div data-pt-id="c2" class="flex flex-col items-center gap-2 px-6 py-5">
8
+ <h2 data-pt-type="text" data-pt-id="t2" class="text-center text-base leading-relaxed text-brand">SHINPIが提案する<br>7日間の集中リカバリーケア</h2>
9
+ <p data-pt-type="text" data-pt-id="t3" class="text-xs text-ink underline">10月12日(月)23:59まで</p>
10
+ </div>
11
+ <a data-pt-type="button" data-pt-id="b1" data-pt-track="campaign" href="#" class="flex min-h-12 items-center justify-center bg-brand text-sm font-bold text-surface">キャンペーン特設ページはこちら</a>
12
+ </div>
package/dist/golden/fixtures/popup/05-jp-jal-course.html ADDED
@@ -0,0 +1,17 @@
1
+ <style type="text/tailwindcss" data-pt-id="theme">@theme { --color-brand: #d32f2f; --color-ink: #212121; --color-surface: #ffffff; --color-line: #e0e0e0; }</style>
2
+ <div data-pt-id="root" class="w-full max-w-[420px] overflow-hidden rounded bg-surface">
3
+ <div data-pt-id="c1" class="flex gap-3 p-4">
4
+ <img data-pt-type="media" data-pt-id="m1" src="staff.png" alt="客室乗務員" class="w-1/3 aspect-[3/4] object-cover">
5
+ <div data-pt-id="c2" class="flex flex-1 flex-col gap-2">
6
+ <p data-pt-type="text" data-pt-id="t1" class="text-2xs text-ink">#企業研究 #自己分析 #本物体験 #面接練習 #現役JAL社員講師</p>
7
+ <h2 data-pt-type="text" data-pt-id="t2" class="text-2xl font-black text-ink">短期集中講座 4日間</h2>
8
+ <p data-pt-type="text" data-pt-id="t3" class="text-xs text-ink">客室乗務員コース 東京 大阪 名古屋 鹿児島</p>
9
+ <p data-pt-type="text" data-pt-id="t4" class="text-xs text-ink">グランドスタッフコース 東京 札幌</p>
10
+ </div>
11
+ </div>
12
+ <div data-pt-id="c3" class="flex flex-col items-center gap-2 border-t border-line px-4 py-4">
13
+ <p data-pt-type="text" data-pt-id="t5" class="text-base font-bold text-ink">選考シーズン前の"ラストチャンス"</p>
14
+ <p data-pt-type="text" data-pt-id="t6" class="text-sm text-ink underline">春休みに効率よく就活対策を!</p>
15
+ <a data-pt-type="button" data-pt-id="b1" data-pt-track="course_list" href="#" class="flex min-h-12 w-full items-center justify-center rounded-full bg-brand text-base font-bold text-surface">受付中の講座一覧はこちら</a>
16
+ </div>
17
+ </div>
package/dist/golden/fixtures/popup/06-jp-training-two-cta.html ADDED
@@ -0,0 +1,17 @@
1
+ <style type="text/tailwindcss" data-pt-id="theme">@theme { --color-brand: #c8102e; --color-ink: #1a1a1a; --color-surface: #f7f4ee; --color-line: #c9a227; }</style>
2
+ <div data-pt-id="root" class="w-full max-w-[720px] bg-surface p-8">
3
+ <div data-pt-id="c1" class="flex flex-col gap-5">
4
+ <p data-pt-type="text" data-pt-id="t1" class="text-sm font-bold text-line">新入社員の育成にお悩みの方、必見!</p>
5
+ <h2 data-pt-type="text" data-pt-id="t2" class="text-3xl font-bold leading-snug text-ink">来年度の新入社員研修は既にお考えでしょうか?</h2>
6
+ <div data-pt-id="c2" class="flex flex-col items-center gap-4 md:flex-row">
7
+ <img data-pt-type="media" data-pt-id="m1" src="training.png" alt="研修風景" class="w-full aspect-[4/3] object-cover md:w-1/3">
8
+ <div data-pt-id="c3" class="flex flex-1 flex-col items-center gap-3">
9
+ <p data-pt-type="text" data-pt-id="t3" class="text-center text-sm text-ink">まだ間に合います!<br>あなたの職場に合わせた研修を!</p>
10
+ <div data-pt-id="c4" class="flex w-full flex-col gap-3 md:flex-row">
11
+ <a data-pt-type="button" data-pt-id="b1" data-pt-track="training_detail" href="#" class="flex min-h-12 flex-1 items-center justify-center border border-brand bg-surface px-4 text-sm font-bold text-brand">研修詳細を見る</a>
12
+ <a data-pt-type="button" data-pt-id="b2" data-pt-track="training_consult" href="#" class="flex min-h-12 flex-1 items-center justify-center bg-brand px-4 text-sm font-bold text-surface">まずは無料相談</a>
13
+ </div>
14
+ </div>
15
+ </div>
16
+ </div>
17
+ </div>
package/dist/golden/fixtures/popup/07-vivaia-lightweight-shoes.html ADDED
@@ -0,0 +1,12 @@
1
+ <style type="text/tailwindcss" data-pt-id="theme">@theme { --color-brand: #111111; --color-ink: #3b2f22; --color-surface: #ffffff; --color-muted: #6b6b6b; }</style>
2
+ <div data-pt-id="root" class="w-full max-w-[560px] bg-surface">
3
+ <div data-pt-id="c1" class="flex flex-col gap-4">
4
+ <p data-pt-type="text" data-pt-id="t1" class="px-4 pt-4 text-xs leading-relaxed text-muted">お気に入りは見つかりましたか?<br>今、あなたにおすすめの大人気シューズをぜひチェックして!</p>
5
+ <img data-pt-type="media" data-pt-id="m1" src="shoes-hero.png" alt="超軽量シューズ" class="w-full aspect-[16/11] object-cover">
6
+ <div data-pt-id="c2" class="flex flex-col items-center gap-2 px-6 pb-5">
7
+ <h2 data-pt-type="text" data-pt-id="t2" class="text-2xl font-bold text-ink">足が喜ぶ超軽量シューズ</h2>
8
+ <p data-pt-type="text" data-pt-id="t3" class="text-center text-xs text-muted">甲高幅広・外反母趾・足底筋膜炎でお悩みのお客様からも続々と喜びの声が届いています!</p>
9
+ <a data-pt-type="button" data-pt-id="b1" data-pt-track="shop_product" href="#" class="flex min-h-12 w-full items-center justify-center bg-brand text-base font-bold text-surface">この商品をみる</a>
10
+ </div>
11
+ </div>
12
+ </div>
package/dist/golden/fixtures/popup/08-sticky-black-friday-countdown.html ADDED
@@ -0,0 +1,8 @@
1
+ <style type="text/tailwindcss" data-pt-id="theme">@theme { --color-brand: #e8123c; --color-ink: #0a0a0a; --color-surface: #ffffff; }</style>
2
+ <div data-pt-id="root" class="flex w-full items-center justify-between gap-4 bg-brand px-6 py-3">
3
+ <div data-pt-id="c1" class="flex items-center gap-3">
4
+ <p data-pt-type="text" data-pt-id="t1" class="text-3xl font-black tracking-tight text-ink">BLACK FRIDAY</p>
5
+ <p data-pt-type="text" data-pt-id="t2" class="rounded bg-ink px-2 py-1 text-xs font-bold text-surface">Deals</p>
6
+ </div>
7
+ <div data-pt-id="k1" data-pt-component="countdown" data-pt-component-settings='{"style":"flip","units":["hours","minutes","seconds"],"endAt":"2026-11-28T23:59:59+09:00"}'></div>
8
+ </div>
package/dist/golden/fixtures/popup/09-sticky-line-coupon-countdown.html ADDED
@@ -0,0 +1,6 @@
1
+ <style type="text/tailwindcss" data-pt-id="theme">@theme { --color-brand: #06c755; --color-ink: #1a1a1a; --color-surface: #f6f6f4; }</style>
2
+ <div data-pt-id="root" class="relative flex w-full flex-col items-center gap-1 bg-surface px-6 py-3">
3
+ <p data-pt-type="text" data-pt-id="t1" class="text-base font-bold text-ink">LINE@友だち限定キャンペーン本日<span class="text-brand">最終日</span></p>
4
+ <p data-pt-type="text" data-pt-id="t2" class="text-xs text-ink underline">全アクセサリー対象1,500円OFFクーポン配布中</p>
5
+ <div data-pt-id="k1" data-pt-component="countdown" data-pt-component-settings='{"style":"plain","units":["hours","minutes","seconds","millis"],"endAt":"2026-10-01T23:59:59+09:00"}'></div>
6
+ </div>
package/dist/golden/fixtures/popup/10-sticky-coupon-code-countdown.html ADDED
@@ -0,0 +1,9 @@
1
+ <style type="text/tailwindcss" data-pt-id="theme">@theme { --color-brand: #7a5230; --color-ink: #3a2c1a; --color-surface: #f5ead7; }</style>
2
+ <div data-pt-id="root" class="flex w-full items-center justify-center gap-6 bg-surface px-6 py-3">
3
+ <div data-pt-id="c1" class="flex flex-col">
4
+ <p data-pt-type="text" data-pt-id="t1" class="text-base font-bold text-ink">2点以上お買い上げで10%OFF</p>
5
+ <p data-pt-type="text" data-pt-id="t2" class="text-2xs text-ink">5周年キャンペーン終了まで残り</p>
6
+ </div>
7
+ <div data-pt-id="k1" data-pt-component="countdown" data-pt-component-settings='{"style":"flip","units":["days","hours","minutes","seconds"],"endAt":"2026-09-30T23:59:59+09:00"}'></div>
8
+ <a data-pt-type="button" data-pt-id="b1" data-pt-track="copy_coupon" href="#" class="flex min-h-10 items-center gap-2 rounded bg-brand px-4 text-sm font-bold text-surface">クーポンコード: VIVAIA5TH</a>
9
+ </div>
package/dist/golden/fixtures/popup/11-sticky-anniversary-countdown.html ADDED
@@ -0,0 +1,5 @@
1
+ <style type="text/tailwindcss" data-pt-id="theme">@theme { --color-brand: #5c4326; --color-ink: #2f2413; --color-surface: #f7eede; }</style>
2
+ <div data-pt-id="root" class="flex w-full items-center justify-center gap-4 bg-surface px-6 py-2">
3
+ <p data-pt-type="text" data-pt-id="t1" class="text-sm font-bold text-ink">【まとめ買い2点で10%OFF】6周年特別オーファーが終了まであと</p>
4
+ <div data-pt-id="k1" data-pt-component="countdown" data-pt-component-settings='{"style":"flip","units":["days","hours","minutes","seconds"],"endAt":"2026-12-31T23:59:59+09:00"}'></div>
5
+ </div>
package/dist/golden/fixtures/popup/12-vivaia-product-grid.html ADDED
@@ -0,0 +1,29 @@
1
+ <style type="text/tailwindcss" data-pt-id="theme">@theme { --color-brand: #6b4a2b; --color-ink: #2f2418; --color-surface: #ffffff; --color-line: #d8c3a5; }</style>
2
+ <div data-pt-id="root" class="w-full max-w-[420px] rounded bg-surface p-4">
3
+ <div data-pt-id="c1" class="flex flex-col gap-3">
4
+ <h2 data-pt-type="text" data-pt-id="t1" class="text-center text-lg font-bold text-brand">人気商品4品を厳選</h2>
5
+ <p data-pt-type="text" data-pt-id="t2" class="text-center text-base font-bold text-ink">類似オススメ商品はこちら</p>
6
+ <div data-pt-id="c2" data-pt-layout-mobile="scroll" class="grid grid-cols-2 gap-3">
7
+ <div data-pt-id="c3" class="flex flex-col items-center gap-1 rounded border border-line p-2">
8
+ <img data-pt-type="media" data-pt-id="m1" src="samantha.png" alt="Samantha" class="w-full aspect-square object-cover">
9
+ <p data-pt-type="text" data-pt-id="t3" class="text-xs text-ink">Samantha</p>
10
+ <a data-pt-type="button" data-pt-id="b1" data-pt-track="shop_1" href="#" class="text-xs font-bold text-ink underline">Shop Now</a>
11
+ </div>
12
+ <div data-pt-id="c4" class="flex flex-col items-center gap-1 rounded border border-line p-2">
13
+ <img data-pt-type="media" data-pt-id="m2" src="jackie.png" alt="Jackie" class="w-full aspect-square object-cover">
14
+ <p data-pt-type="text" data-pt-id="t4" class="text-xs text-ink">Jackie</p>
15
+ <a data-pt-type="button" data-pt-id="b2" data-pt-track="shop_2" href="#" class="text-xs font-bold text-ink underline">Shop Now</a>
16
+ </div>
17
+ <div data-pt-id="c5" class="flex flex-col items-center gap-1 rounded border border-line p-2">
18
+ <img data-pt-type="media" data-pt-id="m3" src="michelle.png" alt="Michelle" class="w-full aspect-square object-cover">
19
+ <p data-pt-type="text" data-pt-id="t5" class="text-xs text-ink">Michelle</p>
20
+ <a data-pt-type="button" data-pt-id="b3" data-pt-track="shop_3" href="#" class="text-xs font-bold text-ink underline">Shop Now</a>
21
+ </div>
22
+ <div data-pt-id="c6" class="flex flex-col items-center gap-1 rounded border border-line p-2">
23
+ <img data-pt-type="media" data-pt-id="m4" src="margot.png" alt="Margot Walker" class="w-full aspect-square object-cover">
24
+ <p data-pt-type="text" data-pt-id="t6" class="text-xs text-ink">Margot Walker</p>
25
+ <a data-pt-type="button" data-pt-id="b4" data-pt-track="shop_4" href="#" class="text-xs font-bold text-ink underline">Shop Now</a>
26
+ </div>
27
+ </div>
28
+ </div>
29
+ </div>