@gemboss/website-ui 0.5.0 → 0.7.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/AGENTS.md +44 -4
- package/CHANGELOG.md +116 -0
- package/README.md +8 -8
- package/bin/lib/check.mjs +47 -0
- package/css/base.css +12 -0
- package/css/components.css +8 -0
- package/css/footer.css +181 -0
- package/css/forms.css +154 -0
- package/css/ratings.css +78 -0
- package/css/tokens.css +21 -0
- package/demo/assets/avatar-sample.svg +1 -0
- package/demo/footer.html +339 -0
- package/demo/forms.html +505 -0
- package/demo/index.html +2 -0
- package/docs/components.md +197 -7
- package/docs/markup-contract.md +123 -6
- package/docs/theming.md +12 -5
- package/js/website.js +21 -4
- package/js/website.mjs +27 -3
- package/package.json +1 -1
- package/skill/SKILL.md +8 -0
- package/system.json +12 -1
- package/templates/footer.html +119 -16
- package/templates/page.html +16 -11
- package/templates/sections/form.html +42 -0
- package/templates/sections/testimonials.html +58 -0
- package/website.css +457 -1
- package/website.min.css +1 -1
package/demo/forms.html
ADDED
|
@@ -0,0 +1,505 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<title>Forms and ratings · GemBoss</title>
|
|
7
|
+
<meta name="description" content="The kit's fields in every state, the footer newsletter, a testimonial wall and the rating badge, with sample content.">
|
|
8
|
+
<script>try{var t=localStorage.getItem('gw-theme');if(t==='light'||t==='dark')document.documentElement.setAttribute('data-theme',t)}catch(e){}</script>
|
|
9
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
10
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
11
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650;700&display=swap">
|
|
12
|
+
<link rel="stylesheet" href="../website.css">
|
|
13
|
+
<style>
|
|
14
|
+
/* site CSS for the specimen board only (AGENTS.md section 8): own prefix, tokens only */
|
|
15
|
+
.demo-specimen + .demo-specimen { margin-top: 48px; }
|
|
16
|
+
.demo-specimen > h3 { margin-bottom: 16px; font-size: 20px; }
|
|
17
|
+
.demo-mt { margin-top: 16px; }
|
|
18
|
+
.demo-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
|
|
19
|
+
@media (min-width: 768px) { .demo-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; } }
|
|
20
|
+
.demo-stack { display: grid; align-content: start; gap: 24px; }
|
|
21
|
+
.demo-stars { display: flex; flex-wrap: wrap; gap: 16px 32px; margin: 0; padding: 0; list-style: none; }
|
|
22
|
+
.demo-stars li { display: flex; align-items: center; gap: 8px; color: var(--gw-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
|
|
23
|
+
.demo-status:empty { margin: 0; }
|
|
24
|
+
</style>
|
|
25
|
+
</head>
|
|
26
|
+
<body class="gw-page">
|
|
27
|
+
<a class="gw-skip" href="#main">Skip to content</a>
|
|
28
|
+
|
|
29
|
+
<div class="gw-announce" role="region" aria-label="Announcement">GemBoss is built by the team behind GemPages. <a href="https://feedback.gemboss.ai/changelog" rel="noopener">What's new on the changelog</a></div>
|
|
30
|
+
<header class="gw-header" data-gw-header>
|
|
31
|
+
<div class="gw-wrap gw-header__bar">
|
|
32
|
+
<a class="gw-brand" href="https://gemboss.ai/"><svg class="gw-brand__mark" viewBox="0 0 100 116" aria-hidden="true"><polygon points="26,14 74,14 66,50 34,50" style="fill:var(--gw-accent)"/><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="9" stroke-linejoin="round"/><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.6" stroke-linejoin="round"/></svg><span class="gw-brand__name">GemBoss</span></a>
|
|
33
|
+
<nav class="gw-nav" aria-label="Main">
|
|
34
|
+
<ul class="gw-nav__list">
|
|
35
|
+
<li class="gw-nav__item">
|
|
36
|
+
<button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-product" data-gw-mega="gw-mega-product">Product</button>
|
|
37
|
+
<div class="gw-mega" id="gw-mega-product" hidden>
|
|
38
|
+
<div class="gw-wrap gw-mega__grid">
|
|
39
|
+
<div class="gw-mega__col">
|
|
40
|
+
<p class="gw-mega__heading">Build</p>
|
|
41
|
+
<a class="gw-mega__link" href="https://gemboss.ai/funnel"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h18l-7 8v6l-4 2v-8z"/></svg></span><span><b>Funnel builder</b><i>Angles, advertorials, offers</i></span></a>
|
|
42
|
+
<a class="gw-mega__link" href="https://gemboss.ai/ai-store-builder"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l1.5-5h15L21 9"/><path d="M4 9v11h16V9"/><path d="M9 20v-6h6v6"/></svg></span><span><b>Storefront builder</b><i>Headless, on your Shopify</i></span></a>
|
|
43
|
+
<a class="gw-mega__link" href="https://gemboss.ai/gempages"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg></span><span><b>Page builder</b><i>Ask, watch, publish</i></span></a>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="gw-mega__col">
|
|
46
|
+
<p class="gw-mega__heading">Grow</p>
|
|
47
|
+
<a class="gw-mega__link" href="https://gemboss.ai/gemx"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4v16M20 4v16M4 9h16M4 15h16"/></svg></span><span><b>Tests & personalization</b><i>You promote the winner</i></span></a>
|
|
48
|
+
<a class="gw-mega__link" href="https://gemboss.ai/gemoffers"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12l-8 8-9-9V3h8z"/><circle cx="7.5" cy="7.5" r="1.5"/></svg></span><span><b>Offers & upsells</b><i>Bundles, gifts, bumps</i></span></a>
|
|
49
|
+
<a class="gw-mega__link" href="https://gemboss.ai/data"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v18h18"/><path d="M7 15l4-4 3 3 5-6"/></svg></span><span><b>Analytics & data</b><i>First-party, yours</i></span></a>
|
|
50
|
+
</div>
|
|
51
|
+
<div class="gw-mega__col">
|
|
52
|
+
<p class="gw-mega__heading">Connect</p>
|
|
53
|
+
<a class="gw-mega__link" href="https://gemboss.ai/integrations"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3v6M15 3v6M6 9h12v3a6 6 0 0 1-12 0z"/><path d="M12 18v3"/></svg></span><span><b>Integrations</b><i>Klaviyo, Meta, Google</i></span></a>
|
|
54
|
+
<a class="gw-mega__link" href="https://gemboss.ai/mcp"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="m8 9-4 3 4 3"/><path d="m16 9 4 3-4 3"/><path d="m14 5-4 14"/></svg></span><span><b>MCP & agents</b><i>Claude and Codex</i></span></a>
|
|
55
|
+
<a class="gw-mega__link" href="https://gemboss.ai/agent-ready"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="8" width="14" height="11" rx="3"/><path d="M12 4v4"/><circle cx="9.5" cy="13.5" r="1"/><circle cx="14.5" cy="13.5" r="1"/></svg></span><span><b>Agent-ready storefront</b><i>Ready for AI shoppers</i></span></a>
|
|
56
|
+
</div>
|
|
57
|
+
<a class="gw-mega__feature" href="https://gemboss.ai/engine"><b>How the engine works</b><i>Six stages, one loop. Nothing ships without you.</i><span class="gw-link gw-link--arrow">See the engine</span></a>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
</li>
|
|
61
|
+
<li class="gw-nav__item">
|
|
62
|
+
<button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-usecases" data-gw-mega="gw-mega-usecases">Use cases</button>
|
|
63
|
+
<div class="gw-mega" id="gw-mega-usecases" hidden>
|
|
64
|
+
<div class="gw-wrap gw-mega__grid">
|
|
65
|
+
<div class="gw-mega__col">
|
|
66
|
+
<p class="gw-mega__heading">Adaptive funnels</p>
|
|
67
|
+
<a class="gw-mega__link" href="https://gemboss.ai/meta-ads"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 11v2a1 1 0 0 0 1 1h3l5 4V6L7 10H4a1 1 0 0 0-1 1z"/><path d="M16 9a4 4 0 0 1 0 6"/></svg></span><span><b>Meta, Google & TikTok ads</b><i>A funnel for every ad angle</i></span></a>
|
|
68
|
+
<a class="gw-mega__link" href="https://gemboss.ai/klaviyo-personalized-landing-pages"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></span><span><b>Klaviyo email <span class="gw-badge gw-badge--warning">Early access</span></b><i>A page per recipient, after the click</i></span></a>
|
|
69
|
+
</div>
|
|
70
|
+
<div class="gw-mega__col">
|
|
71
|
+
<p class="gw-mega__heading">Adaptive storefront</p>
|
|
72
|
+
<a class="gw-mega__link" href="https://gemboss.ai/ai-store-builder"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l1.5-5h15L21 9"/><path d="M4 9v11h16V9"/><path d="M9 20v-6h6v6"/></svg></span><span><b>Headless storefront</b><i>Your whole Shopify store, on GemBoss</i></span></a>
|
|
73
|
+
<a class="gw-mega__link" href="https://gemboss.ai/agent-ready"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="8" width="14" height="11" rx="3"/><path d="M12 4v4"/><circle cx="9.5" cy="13.5" r="1"/><circle cx="14.5" cy="13.5" r="1"/></svg></span><span><b>AI agents & AI search</b><i>Readable by AI, shoppable by agents</i></span></a>
|
|
74
|
+
</div>
|
|
75
|
+
<a class="gw-mega__feature" href="https://gemboss.ai/meta-ads"><b>Every ad gets its own page</b><i>The page keeps the promise the ad made.</i><span class="gw-link gw-link--arrow">See the ad-to-page path</span></a>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
</li>
|
|
79
|
+
<li class="gw-nav__item"><a class="gw-nav__link" href="https://gemboss.ai/pricing">Pricing</a></li>
|
|
80
|
+
<li class="gw-nav__item">
|
|
81
|
+
<button class="gw-nav__trigger" type="button" aria-expanded="false" aria-controls="gw-mega-resources" data-gw-mega="gw-mega-resources">Resources</button>
|
|
82
|
+
<div class="gw-mega" id="gw-mega-resources" hidden>
|
|
83
|
+
<div class="gw-wrap gw-mega__grid">
|
|
84
|
+
<div class="gw-mega__col">
|
|
85
|
+
<p class="gw-mega__heading">Learn</p>
|
|
86
|
+
<a class="gw-mega__link" href="https://gemboss.ai/blog"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h11a2 2 0 0 1 2 2v14H6a2 2 0 0 1-2-2z"/><path d="M8 8h7M8 12h7"/></svg></span><span><b>Blog</b><i>Playbooks and guides</i></span></a>
|
|
87
|
+
<a class="gw-mega__link" href="https://gemboss.ai/docs"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></svg></span><span><b>Docs</b><i>Guides and MCP tools</i></span></a>
|
|
88
|
+
</div>
|
|
89
|
+
<div class="gw-mega__col">
|
|
90
|
+
<p class="gw-mega__heading">Company</p>
|
|
91
|
+
<a class="gw-mega__link" href="https://gemboss.ai/company"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg></span><span><b>About</b><i>Why we build it</i></span></a>
|
|
92
|
+
<a class="gw-mega__link" href="https://gemboss.ai/contact"><span class="gw-mega__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></span><span><b>Contact</b><i>Talk to a human</i></span></a>
|
|
93
|
+
</div>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
</li>
|
|
97
|
+
</ul>
|
|
98
|
+
</nav>
|
|
99
|
+
<div class="gw-header__actions">
|
|
100
|
+
<button class="gw-theme-toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16z" fill="currentColor"/></svg></button>
|
|
101
|
+
<a class="gw-nav__link gw-header__signin" href="https://admin.gemboss.ai/login">Sign in</a>
|
|
102
|
+
<a class="gw-btn gw-btn--secondary gw-btn--sm" href="https://gemboss.ai/contact">Book a demo</a>
|
|
103
|
+
<a class="gw-btn gw-btn--sm" href="https://admin.gemboss.ai/signup">Start free</a>
|
|
104
|
+
<button class="gw-menu-toggle" type="button" aria-expanded="false" aria-controls="gw-mobile-menu" data-gw-menu-toggle aria-label="Open menu"><svg class="gw-menu-toggle__open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg><svg class="gw-menu-toggle__close" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg></button>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
<div class="gw-mobile-menu" id="gw-mobile-menu" hidden>
|
|
108
|
+
<nav class="gw-wrap" aria-label="Main, mobile">
|
|
109
|
+
<details class="gw-mobile-menu__group">
|
|
110
|
+
<summary>Product</summary>
|
|
111
|
+
<ul class="gw-mobile-menu__list">
|
|
112
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/funnel">Funnel builder</a></li>
|
|
113
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/ai-store-builder">Storefront builder</a></li>
|
|
114
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/gemx">Tests & personalization</a></li>
|
|
115
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/gemoffers">Offers & upsells</a></li>
|
|
116
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/integrations">Integrations</a></li>
|
|
117
|
+
</ul>
|
|
118
|
+
</details>
|
|
119
|
+
<details class="gw-mobile-menu__group">
|
|
120
|
+
<summary>Use cases</summary>
|
|
121
|
+
<ul class="gw-mobile-menu__list">
|
|
122
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/meta-ads">Meta, Google & TikTok ads</a></li>
|
|
123
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/ai-store-builder">Headless storefront</a></li>
|
|
124
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/agent-ready">AI agents & AI search</a></li>
|
|
125
|
+
</ul>
|
|
126
|
+
</details>
|
|
127
|
+
<a class="gw-mobile-menu__top" href="https://gemboss.ai/pricing">Pricing</a>
|
|
128
|
+
<details class="gw-mobile-menu__group">
|
|
129
|
+
<summary>Resources</summary>
|
|
130
|
+
<ul class="gw-mobile-menu__list">
|
|
131
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/blog">Blog</a></li>
|
|
132
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/docs">Docs</a></li>
|
|
133
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/company">About</a></li>
|
|
134
|
+
<li><a class="gw-mobile-menu__link" href="https://gemboss.ai/contact">Contact</a></li>
|
|
135
|
+
</ul>
|
|
136
|
+
</details>
|
|
137
|
+
<div class="gw-mobile-menu__actions">
|
|
138
|
+
<a class="gw-btn gw-btn--block" href="https://admin.gemboss.ai/signup">Start free</a>
|
|
139
|
+
<a class="gw-btn gw-btn--secondary gw-btn--block" href="https://gemboss.ai/contact">Book a demo</a>
|
|
140
|
+
<a class="gw-mobile-menu__link" href="https://admin.gemboss.ai/login">Sign in</a>
|
|
141
|
+
</div>
|
|
142
|
+
</nav>
|
|
143
|
+
</div>
|
|
144
|
+
</header>
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
<main id="main">
|
|
148
|
+
<section class="gw-hero gw-hero--compact" aria-labelledby="forms-h">
|
|
149
|
+
<div class="gw-wrap">
|
|
150
|
+
<nav class="gw-breadcrumbs" aria-label="Breadcrumb">
|
|
151
|
+
<ol>
|
|
152
|
+
<li><a href="index.html">Website kit</a></li>
|
|
153
|
+
<li><a href="forms.html" aria-current="page">Forms and ratings</a></li>
|
|
154
|
+
</ol>
|
|
155
|
+
</nav>
|
|
156
|
+
<h1 id="forms-h"><span class="gw-dim">Ask for little.</span> Show real reviews.</h1>
|
|
157
|
+
<p class="gw-lead">Fields in every state, the footer newsletter, a testimonial wall and the rating badge. Sample content: the names, reviews and scores are placeholders, and no form sends anything.</p>
|
|
158
|
+
</div>
|
|
159
|
+
</section>
|
|
160
|
+
|
|
161
|
+
<!-- fields: every state -->
|
|
162
|
+
<section class="gw-section gw-section--soft" aria-labelledby="fields-h">
|
|
163
|
+
<div class="gw-wrap">
|
|
164
|
+
<div class="gw-section__head">
|
|
165
|
+
<p class="gw-label">Fields</p>
|
|
166
|
+
<h2 id="fields-h"><span class="gw-dim">Label above, hint below.</span> An error says how to fix it.</h2>
|
|
167
|
+
<p class="gw-lead">A specimen board: on a real page, a form keeps two or three fields.</p>
|
|
168
|
+
</div>
|
|
169
|
+
<div class="demo-specimen">
|
|
170
|
+
<h3>Text fields</h3>
|
|
171
|
+
<div class="demo-fields">
|
|
172
|
+
<div class="gw-field">
|
|
173
|
+
<label class="gw-field__label" for="d-email">Work email</label>
|
|
174
|
+
<input class="gw-input" id="d-email" name="email" type="email" autocomplete="email" aria-describedby="d-email-hint">
|
|
175
|
+
<p class="gw-field__hint" id="d-email-hint">We reply to this address.</p>
|
|
176
|
+
</div>
|
|
177
|
+
<div class="gw-field">
|
|
178
|
+
<label class="gw-field__label" for="d-url">Store URL <span class="gw-dim">(optional)</span></label>
|
|
179
|
+
<input class="gw-input" id="d-url" name="store_url" type="url" inputmode="url" placeholder="https://example.com">
|
|
180
|
+
</div>
|
|
181
|
+
<div class="gw-field">
|
|
182
|
+
<label class="gw-field__label" for="d-bad">Work email</label>
|
|
183
|
+
<input class="gw-input" id="d-bad" name="email_invalid" type="email" value="sam@" aria-invalid="true" aria-describedby="d-bad-error">
|
|
184
|
+
<p class="gw-field__error" id="d-bad-error">Enter the whole address, like name@example.com.</p>
|
|
185
|
+
</div>
|
|
186
|
+
<div class="gw-field">
|
|
187
|
+
<label class="gw-field__label" for="d-ro">Workspace</label>
|
|
188
|
+
<input class="gw-input" id="d-ro" name="workspace" type="text" value="Sample workspace" readonly aria-describedby="d-ro-hint">
|
|
189
|
+
<p class="gw-field__hint" id="d-ro-hint">Set when the workspace was made. Read-only.</p>
|
|
190
|
+
</div>
|
|
191
|
+
<div class="gw-field">
|
|
192
|
+
<label class="gw-field__label" for="d-off">Discount code</label>
|
|
193
|
+
<input class="gw-input" id="d-off" name="code" type="text" disabled aria-describedby="d-off-hint">
|
|
194
|
+
<p class="gw-field__hint" id="d-off-hint">Opens once a plan is chosen. Disabled, with its reason.</p>
|
|
195
|
+
</div>
|
|
196
|
+
<div class="gw-field">
|
|
197
|
+
<label class="gw-field__label" for="d-role">Your role</label>
|
|
198
|
+
<select class="gw-select" id="d-role" name="role">
|
|
199
|
+
<option>Founder</option>
|
|
200
|
+
<option>Agency</option>
|
|
201
|
+
<option>Developer</option>
|
|
202
|
+
<option>Something else</option>
|
|
203
|
+
</select>
|
|
204
|
+
</div>
|
|
205
|
+
<div class="gw-field">
|
|
206
|
+
<label class="gw-field__label" for="d-msg">What are you building?</label>
|
|
207
|
+
<textarea class="gw-textarea" id="d-msg" name="message" rows="3" aria-describedby="d-msg-hint"></textarea>
|
|
208
|
+
<p class="gw-field__hint" id="d-msg-hint">A sentence or two is enough.</p>
|
|
209
|
+
</div>
|
|
210
|
+
<div class="gw-field">
|
|
211
|
+
<label class="gw-field__label" for="d-role-bad">Country</label>
|
|
212
|
+
<select class="gw-select" id="d-role-bad" name="country" aria-invalid="true" aria-describedby="d-role-bad-error">
|
|
213
|
+
<option value="">Choose a country</option>
|
|
214
|
+
<option>Vietnam</option>
|
|
215
|
+
<option>United States</option>
|
|
216
|
+
</select>
|
|
217
|
+
<p class="gw-field__error" id="d-role-bad-error">Choose the country the store sells from.</p>
|
|
218
|
+
</div>
|
|
219
|
+
</div>
|
|
220
|
+
</div>
|
|
221
|
+
<div class="demo-specimen">
|
|
222
|
+
<h3>Choices</h3>
|
|
223
|
+
<div class="demo-fields">
|
|
224
|
+
<fieldset class="gw-choices">
|
|
225
|
+
<legend class="gw-field__label">Industry</legend>
|
|
226
|
+
<label class="gw-check"><input type="checkbox" name="industry" value="fashion"><span>Fashion</span><span class="gw-check__count">128</span></label>
|
|
227
|
+
<label class="gw-check"><input type="checkbox" name="industry" value="beauty" checked><span>Beauty</span><span class="gw-check__count">96</span></label>
|
|
228
|
+
<label class="gw-check"><input type="checkbox" name="industry" value="food"><span>Food and drink</span><span class="gw-check__count">54</span></label>
|
|
229
|
+
<label class="gw-check"><input type="checkbox" name="industry" value="home"><span>Home</span><span class="gw-check__count">41</span></label>
|
|
230
|
+
<label class="gw-check"><input type="checkbox" name="industry" value="pets" disabled><span>Pets</span><span class="gw-check__count">0</span></label>
|
|
231
|
+
<p class="gw-field__hint">A filter with sample counts. A choice with nothing behind it is disabled.</p>
|
|
232
|
+
</fieldset>
|
|
233
|
+
<div class="demo-stack">
|
|
234
|
+
<fieldset class="gw-choices" aria-describedby="d-orders-hint">
|
|
235
|
+
<legend class="gw-field__label">Orders a month</legend>
|
|
236
|
+
<label class="gw-radio"><input type="radio" name="orders" value="few" checked><span>Fewer than 100</span></label>
|
|
237
|
+
<label class="gw-radio"><input type="radio" name="orders" value="some"><span>100 to 1,000</span></label>
|
|
238
|
+
<label class="gw-radio"><input type="radio" name="orders" value="many"><span>More than 1,000</span></label>
|
|
239
|
+
<p class="gw-field__hint" id="d-orders-hint">An estimate is fine.</p>
|
|
240
|
+
</fieldset>
|
|
241
|
+
<div class="gw-field">
|
|
242
|
+
<label class="gw-check"><input type="checkbox" name="terms" required aria-invalid="true" aria-describedby="d-terms-error"><span>I accept the terms of service</span></label>
|
|
243
|
+
<p class="gw-field__error" id="d-terms-error">Tick the box to accept the terms.</p>
|
|
244
|
+
</div>
|
|
245
|
+
</div>
|
|
246
|
+
</div>
|
|
247
|
+
</div>
|
|
248
|
+
<div class="demo-specimen">
|
|
249
|
+
<h3>One field and its button</h3>
|
|
250
|
+
<div class="demo-fields">
|
|
251
|
+
<div class="gw-field">
|
|
252
|
+
<label class="gw-field__label" for="d-inline">Email for the checklist</label>
|
|
253
|
+
<div class="gw-form-inline">
|
|
254
|
+
<input class="gw-input" id="d-inline" name="email_inline" type="email" autocomplete="email" aria-describedby="d-inline-hint">
|
|
255
|
+
<button class="gw-btn" type="button">Send it</button>
|
|
256
|
+
</div>
|
|
257
|
+
<p class="gw-field__hint" id="d-inline-hint">One email with the checklist, nothing else.</p>
|
|
258
|
+
</div>
|
|
259
|
+
<div class="gw-field">
|
|
260
|
+
<label class="gw-field__label" for="d-inline-bad">Email for the checklist</label>
|
|
261
|
+
<div class="gw-form-inline">
|
|
262
|
+
<input class="gw-input" id="d-inline-bad" name="email_inline_bad" type="email" value="sam@example" aria-invalid="true" aria-describedby="d-inline-bad-error">
|
|
263
|
+
<button class="gw-btn gw-btn--secondary" type="button">Send it</button>
|
|
264
|
+
</div>
|
|
265
|
+
<p class="gw-field__error" id="d-inline-bad-error">Add the end of the address, like .com.</p>
|
|
266
|
+
</div>
|
|
267
|
+
</div>
|
|
268
|
+
</div>
|
|
269
|
+
<div class="demo-specimen">
|
|
270
|
+
<h3>Destructive action and an error badge</h3>
|
|
271
|
+
<div class="gw-actions">
|
|
272
|
+
<button class="gw-btn gw-btn--danger" type="button">Delete the workspace</button>
|
|
273
|
+
<button class="gw-btn gw-btn--secondary" type="button">Keep it</button>
|
|
274
|
+
<span class="gw-badge gw-badge--danger">Payment failed</span>
|
|
275
|
+
<span class="gw-badge gw-badge--success">Live</span>
|
|
276
|
+
</div>
|
|
277
|
+
<p class="gw-note demo-mt">Only on a page whose job is to destroy something, and it says what cannot be undone.</p>
|
|
278
|
+
</div>
|
|
279
|
+
<div class="demo-specimen">
|
|
280
|
+
<h3>Stars</h3>
|
|
281
|
+
<ul class="demo-stars" role="list">
|
|
282
|
+
<li><span class="gw-stars" role="img" aria-label="5 out of 5" style="--gw-stars: 5"></span><span aria-hidden="true">5</span></li>
|
|
283
|
+
<li><span class="gw-stars" role="img" aria-label="4.9 out of 5" style="--gw-stars: 4.9"></span><span aria-hidden="true">4.9</span></li>
|
|
284
|
+
<li><span class="gw-stars" role="img" aria-label="4.5 out of 5" style="--gw-stars: 4.5"></span><span aria-hidden="true">4.5</span></li>
|
|
285
|
+
<li><span class="gw-stars" role="img" aria-label="3.7 out of 5" style="--gw-stars: 3.7"></span><span aria-hidden="true">3.7</span></li>
|
|
286
|
+
<li><span class="gw-stars" role="img" aria-label="1 out of 5" style="--gw-stars: 1"></span><span aria-hidden="true">1</span></li>
|
|
287
|
+
<li><span class="gw-stars" role="img" aria-label="0 out of 5" style="--gw-stars: 0"></span><span aria-hidden="true">0</span></li>
|
|
288
|
+
</ul>
|
|
289
|
+
</div>
|
|
290
|
+
</div>
|
|
291
|
+
</section>
|
|
292
|
+
|
|
293
|
+
<!-- a short form: two fields and one choice -->
|
|
294
|
+
<section class="gw-section" aria-labelledby="contact-h">
|
|
295
|
+
<div class="gw-wrap gw-split">
|
|
296
|
+
<div>
|
|
297
|
+
<p class="gw-label">Contact</p>
|
|
298
|
+
<h2 id="contact-h"><span class="gw-dim">Questions about the kit?</span> Ask in two fields.</h2>
|
|
299
|
+
<p class="gw-lead">The short form: an email, the question, and a choice the reader makes. Send it empty to see the errors.</p>
|
|
300
|
+
</div>
|
|
301
|
+
<form class="gw-card gw-form" action="#contact-h" method="post" novalidate data-demo-form>
|
|
302
|
+
<div class="gw-field">
|
|
303
|
+
<label class="gw-field__label" for="c-email">Work email</label>
|
|
304
|
+
<input class="gw-input" id="c-email" name="email" type="email" autocomplete="email" required aria-describedby="c-email-error" data-demo-message="Enter your work email, like name@example.com.">
|
|
305
|
+
<p class="gw-field__error" id="c-email-error"></p>
|
|
306
|
+
</div>
|
|
307
|
+
<div class="gw-field">
|
|
308
|
+
<label class="gw-field__label" for="c-question">Your question</label>
|
|
309
|
+
<textarea class="gw-textarea" id="c-question" name="question" rows="3" required aria-describedby="c-question-error c-question-hint" data-demo-message="Write the question in a sentence or two."></textarea>
|
|
310
|
+
<p class="gw-field__error" id="c-question-error"></p>
|
|
311
|
+
<p class="gw-field__hint" id="c-question-hint">A sentence or two is enough.</p>
|
|
312
|
+
</div>
|
|
313
|
+
<label class="gw-check"><input type="checkbox" name="news" value="yes"><span>Also send me the kit's release notes</span></label>
|
|
314
|
+
<div class="gw-actions"><button class="gw-btn" type="submit">Send the question</button><p class="gw-note" role="status" data-demo-status></p></div>
|
|
315
|
+
</form>
|
|
316
|
+
</div>
|
|
317
|
+
</section>
|
|
318
|
+
|
|
319
|
+
<!-- testimonials: the rating badge and the wall -->
|
|
320
|
+
<section class="gw-section gw-section--soft" aria-labelledby="reviews-h">
|
|
321
|
+
<div class="gw-wrap">
|
|
322
|
+
<div class="gw-section__head">
|
|
323
|
+
<p class="gw-label">Reviews</p>
|
|
324
|
+
<h2 id="reviews-h"><span class="gw-dim">Short reviews in their own words.</span> Each one links to its source.</h2>
|
|
325
|
+
<p class="gw-lead">Sample data: the score, the count, the names, the stores and the words are placeholders. Every link goes to the Shopify App Store.</p>
|
|
326
|
+
<a class="gw-rating-badge" href="https://apps.shopify.com/">
|
|
327
|
+
<span class="gw-rating-badge__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M5 8h14l-1 12H6z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg></span>
|
|
328
|
+
<span class="gw-rating-badge__body">
|
|
329
|
+
<span class="gw-rating-badge__score"><span aria-hidden="true">4.9</span><span class="gw-stars" role="img" aria-label="4.9 out of 5" style="--gw-stars: 4.9"></span></span>
|
|
330
|
+
<span class="gw-rating-badge__count">1,234 reviews on the Shopify App Store (sample)</span>
|
|
331
|
+
</span>
|
|
332
|
+
</a>
|
|
333
|
+
</div>
|
|
334
|
+
<ul class="gw-testimonials" role="list">
|
|
335
|
+
<li>
|
|
336
|
+
<figure class="gw-card gw-testimonial">
|
|
337
|
+
<span class="gw-stars" role="img" aria-label="5 out of 5" style="--gw-stars: 5"></span>
|
|
338
|
+
<blockquote class="gw-testimonial__quote"><p>Sample review. The reviewer's own words go here, quoted exactly as they wrote them on the review page.</p></blockquote>
|
|
339
|
+
<figcaption class="gw-testimonial__by">
|
|
340
|
+
<img class="gw-testimonial__avatar" src="assets/avatar-sample.svg" alt="" width="40" height="40" loading="lazy">
|
|
341
|
+
<span><b>Sam Sample</b>Sample Store · <a href="https://apps.shopify.com/">Shopify App Store</a></span>
|
|
342
|
+
</figcaption>
|
|
343
|
+
</figure>
|
|
344
|
+
</li>
|
|
345
|
+
<li>
|
|
346
|
+
<figure class="gw-card gw-testimonial">
|
|
347
|
+
<span class="gw-stars" role="img" aria-label="4.5 out of 5" style="--gw-stars: 4.5"></span>
|
|
348
|
+
<blockquote class="gw-testimonial__quote"><p>A shorter sample. One sentence is often enough.</p></blockquote>
|
|
349
|
+
<figcaption class="gw-testimonial__by">
|
|
350
|
+
<span><b>Dee Demo</b>Demo Goods · <a href="https://apps.shopify.com/">Shopify App Store</a></span>
|
|
351
|
+
</figcaption>
|
|
352
|
+
</figure>
|
|
353
|
+
</li>
|
|
354
|
+
<li>
|
|
355
|
+
<figure class="gw-card gw-testimonial">
|
|
356
|
+
<span class="gw-stars" role="img" aria-label="4 out of 5" style="--gw-stars: 4"></span>
|
|
357
|
+
<blockquote class="gw-testimonial__quote"><p>A sample with four stars. The wall shows the score the reviewer gave, not a better one, and cuts a long review with an ellipsis rather than rewording it.</p></blockquote>
|
|
358
|
+
<figcaption class="gw-testimonial__by">
|
|
359
|
+
<img class="gw-testimonial__avatar" src="assets/avatar-sample.svg" alt="" width="40" height="40" loading="lazy">
|
|
360
|
+
<span><b>Pat Placeholder</b>Placeholder Co. · <a href="https://apps.shopify.com/">Shopify App Store</a></span>
|
|
361
|
+
</figcaption>
|
|
362
|
+
</figure>
|
|
363
|
+
</li>
|
|
364
|
+
<li>
|
|
365
|
+
<figure class="gw-card gw-testimonial">
|
|
366
|
+
<span class="gw-stars" role="img" aria-label="5 out of 5" style="--gw-stars: 5"></span>
|
|
367
|
+
<blockquote class="gw-testimonial__quote"><p>Sample review number four, two sentences long. The name and the store are written as the reviewer wrote them.</p></blockquote>
|
|
368
|
+
<figcaption class="gw-testimonial__by">
|
|
369
|
+
<span><b>Tess Test</b>Test Shop · <a href="https://apps.shopify.com/">Shopify App Store</a></span>
|
|
370
|
+
</figcaption>
|
|
371
|
+
</figure>
|
|
372
|
+
</li>
|
|
373
|
+
<li>
|
|
374
|
+
<figure class="gw-card gw-testimonial">
|
|
375
|
+
<span class="gw-stars" role="img" aria-label="3.5 out of 5" style="--gw-stars: 3.5"></span>
|
|
376
|
+
<blockquote class="gw-testimonial__quote"><p>A sample with three and a half stars, drawn as a half star.</p></blockquote>
|
|
377
|
+
<figcaption class="gw-testimonial__by">
|
|
378
|
+
<img class="gw-testimonial__avatar" src="assets/avatar-sample.svg" alt="" width="40" height="40" loading="lazy">
|
|
379
|
+
<span><b>Max Mockup</b>Mockup Market · <a href="https://apps.shopify.com/">Shopify App Store</a></span>
|
|
380
|
+
</figcaption>
|
|
381
|
+
</figure>
|
|
382
|
+
</li>
|
|
383
|
+
<li>
|
|
384
|
+
<figure class="gw-card gw-testimonial">
|
|
385
|
+
<span class="gw-stars" role="img" aria-label="5 out of 5" style="--gw-stars: 5"></span>
|
|
386
|
+
<blockquote class="gw-testimonial__quote"><p>The last sample. Six cards fill two rows of three on a wide screen and three rows of two on a tablet.</p></blockquote>
|
|
387
|
+
<figcaption class="gw-testimonial__by">
|
|
388
|
+
<span><b>Ida Example</b>Example Studio · <a href="https://apps.shopify.com/">Shopify App Store</a></span>
|
|
389
|
+
</figcaption>
|
|
390
|
+
</figure>
|
|
391
|
+
</li>
|
|
392
|
+
</ul>
|
|
393
|
+
</div>
|
|
394
|
+
</section>
|
|
395
|
+
</main>
|
|
396
|
+
|
|
397
|
+
<footer class="gw-footer">
|
|
398
|
+
<div class="gw-wrap">
|
|
399
|
+
<div class="gw-footer__grid">
|
|
400
|
+
<div class="gw-footer__brand">
|
|
401
|
+
<a class="gw-brand" href="https://gemboss.ai/"><svg class="gw-brand__mark" viewBox="0 0 100 116" aria-hidden="true"><polygon points="26,14 74,14 66,50 34,50" style="fill:var(--gw-accent)"/><path d="M26,14 74,14 96,50 50,110 4,50Z" fill="none" stroke="currentColor" stroke-width="9" stroke-linejoin="round"/><path d="M4,50H96M26,14 34,50M74,14 66,50M34,50 50,110M66,50 50,110" fill="none" stroke="currentColor" stroke-width="5.6" stroke-linejoin="round"/></svg><span class="gw-brand__name">GemBoss</span></a>
|
|
402
|
+
<p>The AI Conversion Engine for Shopify. Build a brand-true store, ship it blazing fast, and see what to change to sell more.</p>
|
|
403
|
+
<form class="gw-footer__newsletter" action="#main" method="post" novalidate data-demo-form>
|
|
404
|
+
<div class="gw-field">
|
|
405
|
+
<label class="gw-field__label" for="footer-email">Kit news by email</label>
|
|
406
|
+
<div class="gw-form-inline">
|
|
407
|
+
<input class="gw-input" id="footer-email" name="email" type="email" autocomplete="email" required aria-describedby="footer-email-error footer-email-note" data-demo-message="Enter an email address, like name@example.com.">
|
|
408
|
+
<button class="gw-btn gw-btn--secondary" type="submit">Subscribe</button>
|
|
409
|
+
</div>
|
|
410
|
+
<p class="gw-field__error" id="footer-email-error"></p>
|
|
411
|
+
<p class="gw-field__hint" id="footer-email-note">One email per kit release. Unsubscribe in one click. <a href="https://gemboss.ai/privacy">Privacy policy</a></p>
|
|
412
|
+
</div>
|
|
413
|
+
<p class="gw-note demo-status" role="status" data-demo-status></p>
|
|
414
|
+
</form>
|
|
415
|
+
</div>
|
|
416
|
+
<nav class="gw-footer__col" aria-label="Product">
|
|
417
|
+
<h2 class="gw-footer__heading">Product</h2>
|
|
418
|
+
<ul>
|
|
419
|
+
<li><a href="https://gemboss.ai/funnel">Funnel builder</a></li>
|
|
420
|
+
<li><a href="https://gemboss.ai/ai-store-builder">Storefront builder</a></li>
|
|
421
|
+
<li><a href="https://gemboss.ai/gemx">Tests & personalization</a></li>
|
|
422
|
+
<li><a href="https://gemboss.ai/gemoffers">Offers & upsells</a></li>
|
|
423
|
+
<li><a href="https://gemboss.ai/integrations">Integrations</a></li>
|
|
424
|
+
<li><a href="https://gemboss.ai/pricing">Pricing</a></li>
|
|
425
|
+
</ul>
|
|
426
|
+
</nav>
|
|
427
|
+
<nav class="gw-footer__col" aria-label="Use cases">
|
|
428
|
+
<h2 class="gw-footer__heading">Use cases</h2>
|
|
429
|
+
<ul>
|
|
430
|
+
<li><a href="https://gemboss.ai/meta-ads">Meta, Google & TikTok ads</a></li>
|
|
431
|
+
<li><a href="https://gemboss.ai/klaviyo-personalized-landing-pages">Klaviyo landing pages</a></li>
|
|
432
|
+
<li><a href="https://gemboss.ai/affiliate-landing-pages">Affiliate pages</a></li>
|
|
433
|
+
<li><a href="https://gemboss.ai/agent-ready">AI agents & AI search</a></li>
|
|
434
|
+
</ul>
|
|
435
|
+
</nav>
|
|
436
|
+
<nav class="gw-footer__col" aria-label="Resources">
|
|
437
|
+
<h2 class="gw-footer__heading">Resources</h2>
|
|
438
|
+
<ul>
|
|
439
|
+
<li><a href="https://gemboss.ai/audit">Free store audit</a></li>
|
|
440
|
+
<li><a href="https://gemboss.ai/blog">Blog</a></li>
|
|
441
|
+
<li><a href="https://gemboss.ai/docs">Docs</a></li>
|
|
442
|
+
<li><a href="https://gemboss.ai/mcp">MCP for AI agents</a></li>
|
|
443
|
+
<li><a href="https://feedback.gemboss.ai/changelog" rel="noopener">Changelog</a></li>
|
|
444
|
+
</ul>
|
|
445
|
+
</nav>
|
|
446
|
+
<nav class="gw-footer__col" aria-label="Company">
|
|
447
|
+
<h2 class="gw-footer__heading">Company</h2>
|
|
448
|
+
<ul>
|
|
449
|
+
<li><a href="https://gemboss.ai/company">About</a></li>
|
|
450
|
+
<li><a href="https://gemboss.ai/careers">Careers</a></li>
|
|
451
|
+
<li><a href="https://gemboss.ai/partners">Partners</a></li>
|
|
452
|
+
<li><a href="https://gemboss.ai/contact">Contact</a></li>
|
|
453
|
+
</ul>
|
|
454
|
+
</nav>
|
|
455
|
+
</div>
|
|
456
|
+
<div class="gw-footer__bottom">
|
|
457
|
+
<span>© 2026 GemBoss. All rights reserved.</span>
|
|
458
|
+
<ul aria-label="Legal">
|
|
459
|
+
<li><a href="https://gemboss.ai/privacy">Privacy</a></li>
|
|
460
|
+
<li><a href="https://gemboss.ai/terms">Terms</a></li>
|
|
461
|
+
</ul>
|
|
462
|
+
<ul aria-label="Social">
|
|
463
|
+
<li><a href="https://www.linkedin.com/company/gempages" rel="noopener">LinkedIn</a></li>
|
|
464
|
+
<li><a href="https://x.com/gempages" rel="noopener">X</a></li>
|
|
465
|
+
</ul>
|
|
466
|
+
</div>
|
|
467
|
+
</div>
|
|
468
|
+
</footer>
|
|
469
|
+
|
|
470
|
+
<script src="../js/website.js" defer></script>
|
|
471
|
+
<script>
|
|
472
|
+
// demo only: what a site's own code does with a form. The kit draws the states; the page decides them. On submit:
|
|
473
|
+
// each field the browser finds invalid gets aria-invalid="true" and its message, and the first one takes the focus
|
|
474
|
+
// (its error is read with it, through aria-describedby). A field fixed while typing loses the mark at once. Valid:
|
|
475
|
+
// the button waits (aria-busy), then a role="status" line says what happened. Nothing is sent.
|
|
476
|
+
(function () {
|
|
477
|
+
function controls(f) { return [].slice.call(f.querySelectorAll('[data-demo-message]')); }
|
|
478
|
+
function mark(el, bad) {
|
|
479
|
+
var err = document.getElementById(el.getAttribute('aria-describedby').split(' ')[0]);
|
|
480
|
+
if (bad) el.setAttribute('aria-invalid', 'true'); else el.removeAttribute('aria-invalid');
|
|
481
|
+
if (err) err.textContent = bad ? el.getAttribute('data-demo-message') : '';
|
|
482
|
+
}
|
|
483
|
+
document.addEventListener('submit', function (e) {
|
|
484
|
+
var f = e.target.closest('form[data-demo-form]');
|
|
485
|
+
if (!f) return;
|
|
486
|
+
e.preventDefault();
|
|
487
|
+
var bad = controls(f).filter(function (el) { var b = !el.checkValidity(); mark(el, b); return b; });
|
|
488
|
+
var status = f.querySelector('[data-demo-status]');
|
|
489
|
+
if (status) status.textContent = '';
|
|
490
|
+
if (bad.length) { bad[0].focus(); return; }
|
|
491
|
+
var btn = f.querySelector('[type="submit"]');
|
|
492
|
+
btn.setAttribute('aria-busy', 'true');
|
|
493
|
+
setTimeout(function () {
|
|
494
|
+
btn.removeAttribute('aria-busy');
|
|
495
|
+
if (status) status.textContent = 'Sent. This is a demo: nothing left the page.';
|
|
496
|
+
}, 1200);
|
|
497
|
+
});
|
|
498
|
+
document.addEventListener('input', function (e) {
|
|
499
|
+
var el = e.target;
|
|
500
|
+
if (el.matches && el.matches('[data-demo-message][aria-invalid="true"]') && el.checkValidity()) mark(el, false);
|
|
501
|
+
});
|
|
502
|
+
})();
|
|
503
|
+
</script>
|
|
504
|
+
</body>
|
|
505
|
+
</html>
|
package/demo/index.html
CHANGED
|
@@ -584,6 +584,8 @@ npx gemboss-website check --fix-list</code></pre>
|
|
|
584
584
|
</ol>
|
|
585
585
|
</article>
|
|
586
586
|
<p class="demo-mt">The whole page for a blog post, with breadcrumbs, the meta row, contents and callouts: <a href="article.html">an article</a>, and <a href="blog.html">the blog index</a> with its post list.</p>
|
|
587
|
+
<p class="demo-mt">Fields in every state, the footer newsletter, a testimonial wall and the rating badge: <a href="forms.html">forms and ratings</a>.</p>
|
|
588
|
+
<p class="demo-mt">The footer as gemboss.ai has it, with Ask AI links, columns that fold on a phone, family rows and the wordmark: <a href="footer.html">the full footer</a>.</p>
|
|
587
589
|
</div>
|
|
588
590
|
</section>
|
|
589
591
|
|