vibespot 1.2.0 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +54 -5
- package/assets/blog-rules.md +251 -0
- package/assets/email-rules.md +390 -0
- package/assets/humanify-guide.md +300 -101
- package/assets/plan-templates/blog-content-hub.md +18 -9
- package/assets/plan-templates/email-announcement.md +41 -0
- package/assets/plan-templates/email-event-invite.md +43 -0
- package/assets/plan-templates/email-newsletter.md +41 -0
- package/assets/plan-templates/email-re-engagement.md +42 -0
- package/assets/plan-templates/email-welcome.md +41 -0
- package/dist/index.js +1460 -387
- package/dist/index.js.map +1 -1
- package/package.json +5 -5
- package/starters/06-blog-content-hub.json +75 -0
- package/starters/06-email-welcome.json +60 -0
- package/starters/07-email-announcement.json +60 -0
- package/starters/08-email-newsletter.json +52 -0
- package/ui/chat.js +777 -63
- package/ui/code-editor.js +49 -7
- package/ui/dashboard.js +379 -93
- package/ui/docs/docs.css +29 -0
- package/ui/docs/index.html +416 -119
- package/ui/docs/screenshots/asset-type-cards.png +0 -0
- package/ui/docs/screenshots/brand-kit-preview.png +0 -0
- package/ui/docs/screenshots/content-type-dropdown.png +0 -0
- package/ui/docs/screenshots/deploy-progress.png +0 -0
- package/ui/docs/screenshots/editor-full-layout.png +0 -0
- package/ui/docs/screenshots/email-client-preview.png +0 -0
- package/ui/docs/screenshots/inline-wysiwyg-editing.png +0 -0
- package/ui/docs/screenshots/module-overview-slideout.png +0 -0
- package/ui/docs/screenshots/multi-page-tree.png +0 -0
- package/ui/docs/screenshots/onboarding-walkthrough.png +0 -0
- package/ui/docs/screenshots/pipeline-progress.png +0 -0
- package/ui/docs/screenshots/project-overview-table.png +0 -0
- package/ui/docs/screenshots/split-pane-view.png +0 -0
- package/ui/docs/screenshots/visual-controls-toolbar.png +0 -0
- package/ui/docs/screenshots/workspace-tabs.png +0 -0
- package/ui/email-preview.js +109 -0
- package/ui/field-editor.js +72 -1
- package/ui/icons.js +120 -0
- package/ui/index.html +877 -629
- package/ui/inline-edit.js +710 -0
- package/ui/plan.js +0 -0
- package/ui/preview.js +101 -198
- package/ui/section-controls.js +628 -0
- package/ui/settings.js +58 -16
- package/ui/setup.js +750 -140
- package/ui/styles.css +3430 -952
- package/ui/upload-panel.js +47 -20
package/ui/index.html
CHANGED
|
@@ -14,741 +14,989 @@
|
|
|
14
14
|
<body>
|
|
15
15
|
|
|
16
16
|
<!-- ============================================================ -->
|
|
17
|
-
<!--
|
|
17
|
+
<!-- RESPONSIVE GATE — shown when viewport < 768px -->
|
|
18
18
|
<!-- ============================================================ -->
|
|
19
|
-
<
|
|
20
|
-
<div class="
|
|
21
|
-
<
|
|
22
|
-
|
|
19
|
+
<div class="responsive-gate" id="responsive-gate" role="dialog" aria-labelledby="responsive-gate-title">
|
|
20
|
+
<div class="responsive-gate__card">
|
|
21
|
+
<div class="responsive-gate__icon" aria-hidden="true">
|
|
22
|
+
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
|
23
|
+
</div>
|
|
24
|
+
<h1 class="responsive-gate__title" id="responsive-gate-title">vibeSpot is built for desktop</h1>
|
|
25
|
+
<p class="responsive-gate__body">The chat & live preview workspace needs more room than a phone screen. Open vibeSpot on a tablet (768 px+) or desktop to start building.</p>
|
|
26
|
+
<p class="responsive-gate__hint">Tip: rotate your device to landscape, or visit on a larger screen.</p>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<!-- ============================================================ -->
|
|
31
|
+
<!-- PROJECT RAIL — persistent thin sidebar (context-aware) -->
|
|
32
|
+
<!-- Project Home: footer-only (center owns project browser) -->
|
|
33
|
+
<!-- Editor: session context (back, current project, switcher) -->
|
|
34
|
+
<!-- ============================================================ -->
|
|
35
|
+
<aside class="project-rail" id="project-rail" data-mode="project-home" aria-label="Projects">
|
|
36
|
+
<!-- Editor session context (visible only in editor mode) -->
|
|
37
|
+
<div class="project-rail__session" id="project-rail-session">
|
|
38
|
+
<button class="project-rail__back" id="project-rail-back" type="button" title="Back to projects" aria-label="Back to projects">
|
|
39
|
+
<svg class="icon icon--md" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
|
|
40
|
+
</button>
|
|
41
|
+
<button class="project-rail__current" id="project-rail-current" type="button" title="Current project" aria-haspopup="menu" aria-expanded="false">
|
|
42
|
+
<span class="project-rail__current-bubble" id="project-rail-current-bubble">P</span>
|
|
43
|
+
</button>
|
|
44
|
+
<span class="project-rail__current-name" id="project-rail-current-name" aria-hidden="true"></span>
|
|
23
45
|
</div>
|
|
24
|
-
|
|
25
|
-
|
|
46
|
+
|
|
47
|
+
<!-- Footer (both modes) -->
|
|
26
48
|
<div class="project-rail__footer">
|
|
27
|
-
<a class="project-rail__settings-btn" href="https://buymeacoffee.com/vibespot" target="_blank" title="Buy me a coffee">
|
|
28
|
-
<svg
|
|
29
|
-
<span class="project-rail__settings-label">Coffee</span>
|
|
49
|
+
<a class="project-rail__settings-btn" href="https://buymeacoffee.com/vibespot" target="_blank" rel="noopener" title="Buy me a coffee">
|
|
50
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 8h1a4 4 0 0 1 0 8h-1"/><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V8z"/><line x1="6" y1="2" x2="6" y2="4"/><line x1="10" y1="2" x2="10" y2="4"/><line x1="14" y1="2" x2="14" y2="4"/></svg>
|
|
30
51
|
</a>
|
|
31
|
-
<a class="project-rail__settings-btn" href="/docs/" target="_blank" title="Documentation">
|
|
32
|
-
<svg
|
|
33
|
-
<span class="project-rail__settings-label">Docs</span>
|
|
52
|
+
<a class="project-rail__settings-btn" href="/docs/" target="_blank" rel="noopener" title="Documentation">
|
|
53
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 3h6a3 3 0 0 1 3 3v15a2 2 0 0 0-2-2H4z"/><path d="M20 3h-6a3 3 0 0 0-3 3v15a2 2 0 0 1 2-2h7z"/></svg>
|
|
34
54
|
</a>
|
|
35
|
-
<button class="project-rail__settings-btn" id="btn-setup-settings">
|
|
36
|
-
<svg
|
|
37
|
-
<span class="project-rail__settings-label">Settings</span>
|
|
55
|
+
<button class="project-rail__settings-btn" id="btn-setup-settings" type="button" title="Settings" aria-label="Settings">
|
|
56
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
|
38
57
|
</button>
|
|
39
58
|
</div>
|
|
40
59
|
</aside>
|
|
41
60
|
|
|
61
|
+
<!-- Project switcher popover (Editor mode) — anchored to current bubble -->
|
|
62
|
+
<div class="project-switcher" id="project-switcher" role="menu" aria-labelledby="project-rail-current" hidden>
|
|
63
|
+
<div class="project-switcher__header">
|
|
64
|
+
<span class="project-switcher__title">Switch project</span>
|
|
65
|
+
<button class="project-switcher__add" id="project-switcher-add" type="button" title="New project" aria-label="New project">+</button>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="project-switcher__list" id="project-switcher-list" role="none"></div>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
42
70
|
<!-- Tooltip element (positioned via JS) -->
|
|
43
|
-
<div class="project-rail__tooltip" id="project-rail-tooltip"></div>
|
|
71
|
+
<div class="project-rail__tooltip" id="project-rail-tooltip" role="tooltip"></div>
|
|
44
72
|
|
|
45
|
-
<div class="app-body" id="app-body">
|
|
73
|
+
<div class="app-body" id="app-body" data-mode="project-home">
|
|
46
74
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
<svg class="theme-toggle__icon--dark" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
|
|
61
|
-
<svg class="theme-toggle__icon--light" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
|
|
62
|
-
</button>
|
|
63
|
-
</div>
|
|
64
|
-
</div>
|
|
65
|
-
<div class="setup" id="setup-screen">
|
|
66
|
-
<div class="setup__main">
|
|
67
|
-
<div class="setup__container">
|
|
68
|
-
<div class="setup__symbol">✦</div>
|
|
69
|
-
<h1 class="setup__title">vibeSpot</h1>
|
|
70
|
-
<p class="setup__subtitle">Build HubSpot landing pages with AI</p>
|
|
71
|
-
|
|
72
|
-
<!-- Environment info (populated by JS) -->
|
|
73
|
-
<div class="setup__alerts" id="setup-alerts"></div>
|
|
74
|
-
|
|
75
|
-
<!-- Walkthrough (shown on first run when environment is not configured) -->
|
|
76
|
-
<div class="walkthrough hidden" id="walkthrough">
|
|
77
|
-
<div class="walkthrough__progress" id="walkthrough-progress"></div>
|
|
78
|
-
<div class="walkthrough__content" id="walkthrough-content"></div>
|
|
75
|
+
<!-- ============================================================ -->
|
|
76
|
+
<!-- UNIFIED TOPBAR — content varies by data-mode on .app-body -->
|
|
77
|
+
<!-- ============================================================ -->
|
|
78
|
+
<header class="topbar" id="topbar" role="banner">
|
|
79
|
+
<div class="topbar__left">
|
|
80
|
+
<button class="topbar__back-btn topbar__mode topbar__mode--editor" id="editor-back" type="button" title="Back to projects" aria-label="Back to projects">
|
|
81
|
+
<svg class="icon icon--md" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
|
|
82
|
+
</button>
|
|
83
|
+
<div class="topbar__brand">
|
|
84
|
+
<div class="topbar__logo-icon" aria-hidden="true">
|
|
85
|
+
<svg viewBox="0 0 512 512" width="18" height="18"><path d="M256 76 Q280 220 436 256 Q280 292 256 436 Q232 292 76 256 Q232 220 256 76 Z" fill="currentColor"/></svg>
|
|
86
|
+
</div>
|
|
87
|
+
<span class="topbar__brand-name">vibeSpot</span>
|
|
79
88
|
</div>
|
|
89
|
+
<span class="topbar__project-pill topbar__mode topbar__mode--editor" id="theme-name" aria-label="Project name"></span>
|
|
90
|
+
</div>
|
|
80
91
|
|
|
81
|
-
|
|
82
|
-
|
|
92
|
+
<!-- Workspace tab navigation (Editor mode only) -->
|
|
93
|
+
<nav class="workspace-tabs topbar__mode topbar__mode--editor" id="workspace-tabs" role="tablist" aria-label="Workspace">
|
|
94
|
+
<button class="workspace-tab active" data-ws-tab="pages" role="tab" aria-selected="true" aria-controls="ws-panel-pages" id="ws-tab-pages" type="button">
|
|
95
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
|
|
96
|
+
<span>Pages</span>
|
|
97
|
+
</button>
|
|
98
|
+
<button class="workspace-tab" data-ws-tab="brand" role="tab" aria-selected="false" aria-controls="ws-panel-brand" id="ws-tab-brand" type="button" title="Brand assets and Brand Kit (HubSpot Brand Kit)">
|
|
99
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
|
|
100
|
+
<span>Brand</span>
|
|
101
|
+
</button>
|
|
102
|
+
<button class="workspace-tab" data-ws-tab="library" role="tab" aria-selected="false" aria-controls="ws-panel-library" id="ws-tab-library" type="button" title="Reusable HubSpot modules across pages (Module Library)">
|
|
103
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
|
|
104
|
+
<span>Library</span>
|
|
105
|
+
</button>
|
|
106
|
+
<button class="workspace-tab" data-ws-tab="marketplace" role="tab" aria-selected="false" aria-controls="ws-panel-marketplace" id="ws-tab-marketplace" type="button">
|
|
107
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 9l1-5h16l1 5"/><path d="M5 9v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9"/><path d="M9 22V12h6v10"/></svg>
|
|
108
|
+
<span>Marketplace</span>
|
|
109
|
+
</button>
|
|
110
|
+
<button class="workspace-tab" data-ws-tab="settings" role="tab" aria-selected="false" aria-controls="ws-panel-settings" id="ws-tab-settings" type="button">
|
|
111
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
|
112
|
+
<span>Settings</span>
|
|
113
|
+
</button>
|
|
114
|
+
</nav>
|
|
83
115
|
|
|
84
|
-
|
|
85
|
-
|
|
116
|
+
<div class="topbar__right">
|
|
117
|
+
<!-- HubSpot portal indicator (visible in both Project Home and Editor) -->
|
|
118
|
+
<a class="portal-indicator portal-indicator--disconnected" id="topbar-portal-indicator" href="#" title="HubSpot portal connection" aria-label="HubSpot portal connection">
|
|
119
|
+
<svg class="portal-indicator__icon icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
120
|
+
<circle cx="12" cy="12" r="3"/>
|
|
121
|
+
<circle cx="12" cy="3" r="1.5"/>
|
|
122
|
+
<circle cx="12" cy="21" r="1.5"/>
|
|
123
|
+
<circle cx="3" cy="12" r="1.5"/>
|
|
124
|
+
<circle cx="21" cy="12" r="1.5"/>
|
|
125
|
+
<line x1="12" y1="6" x2="12" y2="9"/>
|
|
126
|
+
<line x1="12" y1="15" x2="12" y2="18"/>
|
|
127
|
+
<line x1="6" y1="12" x2="9" y2="12"/>
|
|
128
|
+
<line x1="15" y1="12" x2="18" y2="12"/>
|
|
129
|
+
</svg>
|
|
130
|
+
<span class="portal-indicator__dot" id="topbar-portal-dot" aria-hidden="true"></span>
|
|
131
|
+
<span class="portal-indicator__label" id="topbar-portal-label">Not connected</span>
|
|
132
|
+
</a>
|
|
133
|
+
<!-- Project Home: Feedback as labeled pill -->
|
|
134
|
+
<button class="btn btn--ghost btn--sm topbar__mode topbar__mode--project-home" id="feedback-btn" type="button" title="Submit feedback" onclick="vibeFeedback()">
|
|
135
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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>
|
|
136
|
+
Feedback
|
|
137
|
+
</button>
|
|
138
|
+
<!-- Editor: Feedback as icon-only -->
|
|
139
|
+
<button class="topbar__icon-btn topbar__mode topbar__mode--editor" id="feedback-btn-editor" type="button" title="Submit feedback" aria-label="Submit feedback" onclick="vibeFeedback()">
|
|
140
|
+
<svg class="icon icon--md" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><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>
|
|
141
|
+
</button>
|
|
142
|
+
<!-- Theme toggle (both modes) — cycles dark → light → hubspot -->
|
|
143
|
+
<button class="topbar__icon-btn theme-toggle" type="button" title="Toggle theme" aria-label="Toggle theme" onclick="toggleTheme()">
|
|
144
|
+
<svg class="theme-toggle__icon--dark icon icon--md" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
|
|
145
|
+
<svg class="theme-toggle__icon--light icon icon--md" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
|
|
146
|
+
<svg class="theme-toggle__icon--hubspot icon icon--md" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><circle cx="12" cy="3" r="1.5"/><circle cx="12" cy="21" r="1.5"/><circle cx="3" cy="12" r="1.5"/><circle cx="21" cy="12" r="1.5"/><line x1="12" y1="6" x2="12" y2="9"/><line x1="12" y1="15" x2="12" y2="18"/><line x1="6" y1="12" x2="9" y2="12"/><line x1="15" y1="12" x2="18" y2="12"/></svg>
|
|
147
|
+
</button>
|
|
148
|
+
<!-- Editor-only: undo/redo, history, email preview, deploy -->
|
|
149
|
+
<div class="topbar__group topbar__mode topbar__mode--editor" role="group" aria-label="History controls">
|
|
150
|
+
<button class="topbar__icon-btn" id="btn-undo" type="button" title="Undo (Ctrl+Z)" aria-label="Undo (Ctrl+Z)" disabled>
|
|
151
|
+
<svg class="icon icon--md" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-15-6.7L3 13"/></svg>
|
|
152
|
+
</button>
|
|
153
|
+
<button class="topbar__icon-btn" id="btn-redo" type="button" title="Redo (Ctrl+Shift+Z)" aria-label="Redo (Ctrl+Shift+Z)" disabled>
|
|
154
|
+
<svg class="icon icon--md" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 15-6.7L21 13"/></svg>
|
|
155
|
+
</button>
|
|
156
|
+
<button class="topbar__icon-btn topbar__icon-btn--with-label" id="btn-history" type="button" title="Version history (timeline of all changes)" aria-label="Version history">
|
|
157
|
+
<svg class="icon icon--md" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
|
158
|
+
<span class="topbar__icon-btn-label">History</span>
|
|
159
|
+
</button>
|
|
160
|
+
</div>
|
|
161
|
+
<button class="topbar__icon-btn topbar__mode topbar__mode--editor hidden" id="btn-email-preview" type="button" title="Email client preview (Gmail, Outlook, Apple Mail)" aria-label="Email client preview">
|
|
162
|
+
<svg class="icon icon--md" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="22 4 12 13 2 4"/></svg>
|
|
163
|
+
</button>
|
|
164
|
+
<button class="btn btn--primary topbar__mode topbar__mode--editor" id="btn-upload" type="button" title="Deploy theme to HubSpot">
|
|
165
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>
|
|
166
|
+
Deploy
|
|
167
|
+
</button>
|
|
168
|
+
</div>
|
|
169
|
+
</header>
|
|
86
170
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
171
|
+
<!-- ============================================================ -->
|
|
172
|
+
<!-- MODE 1: PROJECT HOME — project creation + recent projects -->
|
|
173
|
+
<!-- ============================================================ -->
|
|
174
|
+
<main class="project-home setup" id="project-home" role="main" aria-label="Project Home">
|
|
175
|
+
<div class="setup__main" id="setup-screen">
|
|
176
|
+
<div class="setup__container">
|
|
177
|
+
<p class="setup__greeting" id="setup-greeting">
|
|
178
|
+
<span class="setup__greeting-wave" aria-hidden="true"><svg class="vs-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 11V6a1 1 0 0 0-2 0"/><path d="M16 8V4a1 1 0 0 0-2 0v1"/><path d="M14 8V5a1 1 0 0 0-2 0v5"/><path d="M12 13V8.5a1 1 0 0 0-2 0V14"/><path d="M20 15.5c0 3.59-2.91 6.5-6.5 6.5H12c-3.31 0-6-2.69-6-6V9a1 1 0 0 1 2 0v4"/><path d="M18 11a1 1 0 0 1 2 0v3.5"/></svg></span>
|
|
179
|
+
<span class="setup__greeting-text" id="setup-greeting-text">Welcome</span>
|
|
180
|
+
</p>
|
|
181
|
+
<h1 class="setup__title">What would you like to create today?</h1>
|
|
95
182
|
|
|
96
|
-
|
|
97
|
-
<div class="setup__prompt-card" id="setup-prompt-card">
|
|
98
|
-
<textarea
|
|
99
|
-
class="setup__prompt-input"
|
|
100
|
-
id="setup-prompt-input"
|
|
101
|
-
rows="3"
|
|
102
|
-
placeholder="Describe the landing page you want to build..."
|
|
103
|
-
></textarea>
|
|
104
|
-
<div class="setup__prompt-row">
|
|
105
|
-
<span class="setup__prompt-hint" id="setup-prompt-hint">Press <span id="setup-prompt-shortcut">⌘↵</span> or click Build to start</span>
|
|
106
|
-
<button class="btn btn--primary setup__prompt-submit" id="setup-prompt-submit" disabled>
|
|
107
|
-
<span class="setup__prompt-submit-icon">▲</span>
|
|
108
|
-
<span>Build</span>
|
|
109
|
-
</button>
|
|
110
|
-
</div>
|
|
111
|
-
</div>
|
|
183
|
+
<div class="setup__alerts" id="setup-alerts" role="status" aria-live="polite"></div>
|
|
112
184
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
<
|
|
116
|
-
<span class="setup__secondary-icon">★</span>
|
|
117
|
-
<span class="setup__secondary-label">Start from Template</span>
|
|
118
|
-
<span class="setup__secondary-meta">Browse pre-built starters</span>
|
|
119
|
-
</button>
|
|
185
|
+
<div class="walkthrough hidden" id="walkthrough" aria-label="First-run walkthrough">
|
|
186
|
+
<div class="walkthrough__progress" id="walkthrough-progress"></div>
|
|
187
|
+
<div class="walkthrough__content" id="walkthrough-content"></div>
|
|
120
188
|
</div>
|
|
121
189
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
<span class="
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
<span class="
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
<span class="
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
<span class="
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
<
|
|
154
|
-
<
|
|
155
|
-
<
|
|
156
|
-
|
|
190
|
+
<div class="setup__settings-link hidden" id="setup-settings-link"></div>
|
|
191
|
+
|
|
192
|
+
<div class="setup__options" id="setup-options">
|
|
193
|
+
|
|
194
|
+
<!-- Asset type cards: pick what to create first; clicking opens a scoped describe prompt or the template grid -->
|
|
195
|
+
<div class="setup__type-cards" id="setup-type-cards" role="list" aria-label="Choose an asset type">
|
|
196
|
+
<button class="setup__type-card" type="button" role="listitem" data-asset-type="landing-page" data-prompt-placeholder="Describe the landing page you want to build..." data-prompt-eyebrow="Landing Page" aria-label="Create a landing page">
|
|
197
|
+
<span class="setup__type-card-icon" aria-hidden="true"><svg class="vs-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg></span>
|
|
198
|
+
<span class="setup__type-card-label">Landing Page</span>
|
|
199
|
+
<span class="setup__type-card-desc">Convert visitors with a focused page</span>
|
|
200
|
+
</button>
|
|
201
|
+
<button class="setup__type-card" type="button" role="listitem" data-asset-type="email" data-prompt-placeholder="Describe the email you want to create..." data-prompt-eyebrow="Email" aria-label="Create an email">
|
|
202
|
+
<span class="setup__type-card-icon" aria-hidden="true"><svg class="vs-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="22 4 12 13 2 4"/></svg></span>
|
|
203
|
+
<span class="setup__type-card-label">Email</span>
|
|
204
|
+
<span class="setup__type-card-desc">Marketing or transactional email</span>
|
|
205
|
+
</button>
|
|
206
|
+
<button class="setup__type-card" type="button" role="listitem" data-asset-type="website" data-prompt-placeholder="Describe the website you want to build..." data-prompt-eyebrow="Website" aria-label="Create a website">
|
|
207
|
+
<span class="setup__type-card-icon" aria-hidden="true"><svg class="vs-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg></span>
|
|
208
|
+
<span class="setup__type-card-label">Website</span>
|
|
209
|
+
<span class="setup__type-card-desc">Multi-page site</span>
|
|
210
|
+
</button>
|
|
211
|
+
<button class="setup__type-card" type="button" role="listitem" data-asset-type="blog-post" data-prompt-placeholder="Describe the blog post you want to write..." data-prompt-eyebrow="Blog Post" aria-label="Create a blog post">
|
|
212
|
+
<span class="setup__type-card-icon" aria-hidden="true"><svg class="vs-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></span>
|
|
213
|
+
<span class="setup__type-card-label">Blog Post</span>
|
|
214
|
+
<span class="setup__type-card-desc">Long-form article</span>
|
|
215
|
+
</button>
|
|
216
|
+
<button class="setup__type-card setup__type-card--template" type="button" role="listitem" data-asset-type="template" data-action="starter" aria-label="Start from a pre-built template">
|
|
217
|
+
<span class="setup__type-card-icon" aria-hidden="true"><svg class="vs-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="13.5" cy="6.5" r="1.5"/><circle cx="17.5" cy="10.5" r="1.5"/><circle cx="8.5" cy="7.5" r="1.5"/><circle cx="6.5" cy="12" r="1.5"/><path d="M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10c.55 0 1-.45 1-1v-1.5c0-.83.67-1.5 1.5-1.5H16a4 4 0 0 0 4-4c0-4.42-3.58-8-8-8z"/></svg></span>
|
|
218
|
+
<span class="setup__type-card-label">From Template</span>
|
|
219
|
+
<span class="setup__type-card-desc">Browse pre-built starters</span>
|
|
220
|
+
</button>
|
|
221
|
+
<button class="setup__type-card setup__type-card--import" type="button" role="listitem" data-asset-type="import" aria-label="Import an existing design">
|
|
222
|
+
<span class="setup__type-card-icon" aria-hidden="true"><svg class="vs-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg></span>
|
|
223
|
+
<span class="setup__type-card-label">Import</span>
|
|
224
|
+
<span class="setup__type-card-desc">Bring in an existing design</span>
|
|
225
|
+
</button>
|
|
157
226
|
</div>
|
|
158
|
-
</div>
|
|
159
227
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
<div class="
|
|
168
|
-
<button class="
|
|
169
|
-
<span class="
|
|
170
|
-
<span>
|
|
171
|
-
|
|
172
|
-
<button class="setup__action-btn" data-action="download">
|
|
173
|
-
<span class="setup__action-icon">↓</span>
|
|
174
|
-
<span>From HubSpot</span>
|
|
228
|
+
<!-- Import source picker (hidden until Import card click) -->
|
|
229
|
+
<div class="setup__import-sources hidden" id="setup-import-sources" role="group" aria-label="Choose import source">
|
|
230
|
+
<button class="setup__prompt-back" id="setup-import-back" type="button" aria-label="Back to asset types">
|
|
231
|
+
<span aria-hidden="true"><svg class="vs-icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg></span>
|
|
232
|
+
<span>Back</span>
|
|
233
|
+
</button>
|
|
234
|
+
<h2 class="setup__import-heading">Where would you like to import from?</h2>
|
|
235
|
+
<div class="setup__import-grid">
|
|
236
|
+
<button class="setup__import-btn" type="button" data-action="download">
|
|
237
|
+
<span class="setup__import-btn-icon" aria-hidden="true"><svg class="vs-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></span>
|
|
238
|
+
<span class="setup__import-btn-label">HubSpot</span>
|
|
239
|
+
<span class="setup__import-btn-desc">Download an existing HubSpot theme</span>
|
|
175
240
|
</button>
|
|
176
|
-
<button class="
|
|
177
|
-
<span class="
|
|
178
|
-
<span>
|
|
241
|
+
<button class="setup__import-btn" type="button" data-action="figma">
|
|
242
|
+
<span class="setup__import-btn-icon" aria-hidden="true"><svg class="vs-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.7 10.3a2.41 2.41 0 0 0 0 3.41l7.59 7.59a2.41 2.41 0 0 0 3.41 0l7.59-7.59a2.41 2.41 0 0 0 0-3.41L13.7 2.71a2.41 2.41 0 0 0-3.41 0z"/></svg></span>
|
|
243
|
+
<span class="setup__import-btn-label">Figma</span>
|
|
244
|
+
<span class="setup__import-btn-desc">Extract design from a Figma URL</span>
|
|
179
245
|
<span class="setup__action-badge">Beta</span>
|
|
180
246
|
</button>
|
|
181
|
-
<button class="
|
|
182
|
-
<span class="
|
|
183
|
-
<span>
|
|
247
|
+
<button class="setup__import-btn" type="button" data-action="convert">
|
|
248
|
+
<span class="setup__import-btn-icon" aria-hidden="true"><svg class="vs-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg></span>
|
|
249
|
+
<span class="setup__import-btn-label">React</span>
|
|
250
|
+
<span class="setup__import-btn-desc">Convert a React project to HubSpot</span>
|
|
184
251
|
<span class="setup__action-badge">Beta</span>
|
|
185
252
|
</button>
|
|
186
253
|
</div>
|
|
187
254
|
</div>
|
|
188
|
-
</div>
|
|
189
|
-
|
|
190
|
-
<div class="setup__panel hidden" id="panel-new">
|
|
191
|
-
<div class="setup__row">
|
|
192
|
-
<input type="text" class="setup__input setup__input--wide" id="new-theme-name" placeholder="my-landing-page" />
|
|
193
|
-
<button class="btn btn--primary" id="btn-create-theme">Create</button>
|
|
194
|
-
</div>
|
|
195
|
-
</div>
|
|
196
255
|
|
|
197
|
-
|
|
198
|
-
<
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
<div
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
256
|
+
<!-- Returning users: rich recent project cards (page count + recency) -->
|
|
257
|
+
<section class="setup__recent hidden" id="setup-recent" aria-label="Recent projects">
|
|
258
|
+
<header class="setup__recent-header">
|
|
259
|
+
<h2 class="setup__recent-title">Continue where you left off</h2>
|
|
260
|
+
<button type="button" class="setup__recent-all hidden" id="setup-recent-all">View all</button>
|
|
261
|
+
</header>
|
|
262
|
+
<div class="setup__recent-list recent-grid" id="setup-recent-list" role="list"></div>
|
|
263
|
+
</section>
|
|
264
|
+
|
|
265
|
+
<!-- Scoped describe prompt: hidden until user picks an asset type card -->
|
|
266
|
+
<div class="setup__prompt-card hidden" id="setup-prompt-card" data-asset-type="">
|
|
267
|
+
<div class="setup__prompt-header" id="setup-prompt-header">
|
|
268
|
+
<button class="setup__prompt-back" id="setup-prompt-back" type="button" aria-label="Back to asset types">
|
|
269
|
+
<span aria-hidden="true"><svg class="vs-icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg></span>
|
|
270
|
+
<span>Back</span>
|
|
271
|
+
</button>
|
|
272
|
+
<span class="setup__prompt-eyebrow" id="setup-prompt-eyebrow">Landing Page</span>
|
|
273
|
+
</div>
|
|
274
|
+
<label class="visually-hidden" for="setup-prompt-input">Describe what you want to create</label>
|
|
275
|
+
<textarea
|
|
276
|
+
class="setup__prompt-input"
|
|
277
|
+
id="setup-prompt-input"
|
|
278
|
+
rows="3"
|
|
279
|
+
placeholder="Describe the landing page you want to build..."
|
|
280
|
+
aria-label="Describe what you want to create"
|
|
281
|
+
></textarea>
|
|
282
|
+
<div class="setup__prompt-row">
|
|
283
|
+
<span class="setup__prompt-hint" id="setup-prompt-hint">Press <span id="setup-prompt-shortcut">⌘↵</span> or click Build to start</span>
|
|
284
|
+
<button class="btn btn--primary setup__prompt-submit" id="setup-prompt-submit" type="button" disabled>
|
|
285
|
+
<span class="setup__prompt-submit-icon" aria-hidden="true"><svg class="vs-icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg></span>
|
|
286
|
+
<span>Build</span>
|
|
287
|
+
</button>
|
|
288
|
+
</div>
|
|
215
289
|
</div>
|
|
216
|
-
</div>
|
|
217
290
|
|
|
218
|
-
|
|
219
|
-
<div
|
|
220
|
-
<
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
291
|
+
<!-- Starter template panel -->
|
|
292
|
+
<div class="setup__panel" id="panel-starter">
|
|
293
|
+
<div class="starter-grid" id="starter-grid">
|
|
294
|
+
<button class="starter-card" type="button" data-starter-id="saas-landing">
|
|
295
|
+
<span class="starter-card__name">SaaS Landing Page</span>
|
|
296
|
+
<span class="starter-card__desc">Modern SaaS landing page with hero, features, pricing, and CTA</span>
|
|
297
|
+
<span class="starter-card__meta">4 modules</span>
|
|
298
|
+
</button>
|
|
299
|
+
<button class="starter-card" type="button" data-starter-id="portfolio">
|
|
300
|
+
<span class="starter-card__name">Portfolio</span>
|
|
301
|
+
<span class="starter-card__desc">Creative portfolio with project gallery, about section, and contact form</span>
|
|
302
|
+
<span class="starter-card__meta">4 modules</span>
|
|
303
|
+
</button>
|
|
304
|
+
<button class="starter-card" type="button" data-starter-id="restaurant">
|
|
305
|
+
<span class="starter-card__name">Restaurant</span>
|
|
306
|
+
<span class="starter-card__desc">Restaurant landing page with menu, reservations, and location info</span>
|
|
307
|
+
<span class="starter-card__meta">4 modules</span>
|
|
308
|
+
</button>
|
|
309
|
+
<button class="starter-card" type="button" data-starter-id="event">
|
|
310
|
+
<span class="starter-card__name">Event / Conference</span>
|
|
311
|
+
<span class="starter-card__desc">Event landing page with speakers, schedule, and registration</span>
|
|
312
|
+
<span class="starter-card__meta">4 modules</span>
|
|
313
|
+
</button>
|
|
314
|
+
<button class="starter-card" type="button" data-starter-id="coming-soon">
|
|
315
|
+
<span class="starter-card__name">Coming Soon</span>
|
|
316
|
+
<span class="starter-card__desc">Pre-launch page with signup form and feature preview</span>
|
|
317
|
+
<span class="starter-card__meta">3 modules</span>
|
|
318
|
+
</button>
|
|
224
319
|
</div>
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
320
|
+
<div class="starter-create hidden" id="starter-create">
|
|
321
|
+
<p class="starter-create__label" id="starter-create-label"></p>
|
|
322
|
+
<div class="setup__row">
|
|
323
|
+
<label class="visually-hidden" for="starter-theme-name">Theme name</label>
|
|
324
|
+
<input type="text" class="setup__input setup__input--wide" id="starter-theme-name" placeholder="my-landing-page" aria-label="Theme name" />
|
|
325
|
+
<button class="btn btn--primary" id="btn-create-from-starter" type="button">Create</button>
|
|
326
|
+
</div>
|
|
230
327
|
</div>
|
|
231
|
-
<p class="setup__hint">Paste a Figma design URL to extract structure, text, and assets</p>
|
|
232
|
-
<div class="figma-progress hidden" id="figma-progress"></div>
|
|
233
328
|
</div>
|
|
234
|
-
|
|
235
|
-
<div
|
|
329
|
+
|
|
330
|
+
<div class="setup__panel hidden" id="panel-new">
|
|
236
331
|
<div class="setup__row">
|
|
237
|
-
<
|
|
238
|
-
<
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
<input type="checkbox" id="figma-use-assets" checked />
|
|
242
|
-
<span class="figma-toggle__label">Import images as assets</span>
|
|
243
|
-
<span class="figma-toggle__hint" id="figma-image-hint">Images uploaded to HubSpot, no manual replacement needed</span>
|
|
244
|
-
</label>
|
|
332
|
+
<label class="visually-hidden" for="new-theme-name">Theme name</label>
|
|
333
|
+
<input type="text" class="setup__input setup__input--wide" id="new-theme-name" placeholder="my-landing-page" aria-label="Theme name" />
|
|
334
|
+
<button class="btn btn--primary" id="btn-create-theme" type="button">Create</button>
|
|
335
|
+
</div>
|
|
245
336
|
</div>
|
|
246
|
-
</div>
|
|
247
337
|
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
<
|
|
251
|
-
<button class="btn btn--primary" id="import-btn">Import</button>
|
|
338
|
+
<div class="setup__panel hidden" id="panel-continue">
|
|
339
|
+
<div id="continue-projects"></div>
|
|
340
|
+
<p class="setup__hint setup__hint--empty hidden" id="continue-empty">No themes yet — create one above!</p>
|
|
252
341
|
</div>
|
|
253
|
-
<p class="setup__hint">Convert a React or Lovable project to a HubSpot theme</p>
|
|
254
|
-
</div>
|
|
255
|
-
</div>
|
|
256
|
-
|
|
257
|
-
<div class="setup__loading hidden" id="setup-loading">
|
|
258
|
-
<div class="setup__spinner"></div>
|
|
259
|
-
<span id="setup-loading-text">Setting up...</span>
|
|
260
|
-
</div>
|
|
261
|
-
|
|
262
|
-
<div class="setup__error hidden" id="setup-error"></div>
|
|
263
|
-
</div>
|
|
264
|
-
</div>
|
|
265
|
-
</div>
|
|
266
|
-
|
|
267
|
-
<!-- ============================================================ -->
|
|
268
|
-
<!-- DASHBOARD — project overview with templates & brand assets -->
|
|
269
|
-
<!-- ============================================================ -->
|
|
270
|
-
<div class="dashboard hidden" id="dashboard-screen">
|
|
271
|
-
<header class="topbar">
|
|
272
|
-
<div class="topbar__left">
|
|
273
|
-
<button class="topbar__back-btn" id="dashboard-back" title="Back to projects">
|
|
274
|
-
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
|
|
275
|
-
</button>
|
|
276
|
-
<div class="topbar__brand">
|
|
277
|
-
<div class="topbar__logo-icon"><svg viewBox="0 0 512 512" width="18" height="18"><path d="M256 76 Q280 220 436 256 Q280 292 256 436 Q232 292 76 256 Q232 220 256 76 Z" fill="currentColor"/></svg></div>
|
|
278
|
-
<span class="topbar__brand-name">vibeSpot</span>
|
|
279
|
-
</div>
|
|
280
|
-
<span class="topbar__project-pill" id="dashboard-theme-name"></span>
|
|
281
|
-
</div>
|
|
282
|
-
<div class="topbar__right">
|
|
283
|
-
<button class="topbar__icon-btn" title="Submit feedback" onclick="vibeFeedback()">
|
|
284
|
-
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><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>
|
|
285
|
-
</button>
|
|
286
|
-
<button class="topbar__icon-btn theme-toggle" title="Toggle light/dark mode" onclick="toggleTheme()">
|
|
287
|
-
<svg class="theme-toggle__icon--dark" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
|
|
288
|
-
<svg class="theme-toggle__icon--light" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
|
|
289
|
-
</button>
|
|
290
|
-
<button class="topbar__icon-btn" id="dashboard-settings-btn" title="Settings">
|
|
291
|
-
<svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M7.5 1.5h3l.4 2.1a5.5 5.5 0 0 1 1.3.7l2-.8 1.5 2.6-1.6 1.3a5.5 5.5 0 0 1 0 1.5l1.6 1.3-1.5 2.6-2-.8a5.5 5.5 0 0 1-1.3.7l-.4 2.1h-3l-.4-2.1a5.5 5.5 0 0 1-1.3-.7l-2 .8-1.5-2.6 1.6-1.3a5.5 5.5 0 0 1 0-1.5L2.3 6.1l1.5-2.6 2 .8a5.5 5.5 0 0 1 1.3-.7L7.5 1.5Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><circle cx="9" cy="9" r="2" stroke="currentColor" stroke-width="1.5"/></svg>
|
|
292
|
-
</button>
|
|
293
|
-
<button class="btn btn--primary" id="dashboard-deploy-btn" title="Deploy entire theme to HubSpot">
|
|
294
|
-
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:4px;vertical-align:-2px"><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>
|
|
295
|
-
Deploy
|
|
296
|
-
</button>
|
|
297
|
-
</div>
|
|
298
|
-
</header>
|
|
299
|
-
|
|
300
|
-
<div class="dashboard__body">
|
|
301
|
-
<div class="dashboard__container">
|
|
302
|
-
|
|
303
|
-
<h1 class="dashboard__theme-heading" id="dashboard-theme-heading"></h1>
|
|
304
|
-
|
|
305
|
-
<div class="dashboard__theme-path" id="dashboard-theme-path">
|
|
306
|
-
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="flex-shrink:0"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
|
|
307
|
-
<span class="dashboard__theme-path-text" id="dashboard-theme-path-text"></span>
|
|
308
|
-
<button class="dashboard__download-btn" id="dashboard-download-zip" title="Download theme as ZIP">
|
|
309
|
-
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
|
310
|
-
<span>Download ZIP</span>
|
|
311
|
-
</button>
|
|
312
|
-
</div>
|
|
313
|
-
|
|
314
|
-
<!-- Import Analysis -->
|
|
315
|
-
<section class="dashboard__section dashboard__section--inverse hidden" id="dashboard-inverse-section">
|
|
316
|
-
<div class="dashboard__section-header">
|
|
317
|
-
<h2 class="dashboard__section-title">Import Analysis</h2>
|
|
318
|
-
<span class="dashboard__section-hint" id="inverse-status">Analyzing theme...</span>
|
|
319
|
-
<button class="btn btn--sm btn--outline hidden" id="btn-inverse-apply-tokens" title="Seed shared CSS from inferred tokens">Apply Tokens</button>
|
|
320
|
-
</div>
|
|
321
|
-
<div class="inverse-summary" id="inverse-summary"></div>
|
|
322
|
-
</section>
|
|
323
342
|
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
<span class="dashboard__section-hint">Optional — injected into AI prompts</span>
|
|
329
|
-
</div>
|
|
330
|
-
<div class="dashboard__brand-assets" id="dashboard-brand-assets">
|
|
331
|
-
<div class="brand-asset-toggle" id="brand-toggle-humanify">
|
|
332
|
-
<label class="brand-asset-toggle__switch">
|
|
333
|
-
<input type="checkbox" id="humanify-checkbox" checked>
|
|
334
|
-
<span class="brand-asset-toggle__slider"></span>
|
|
335
|
-
</label>
|
|
336
|
-
<span class="brand-asset-toggle__label">Humanify</span>
|
|
337
|
-
<span class="brand-asset-toggle__tooltip" data-tooltip="Strips AI-sounding copy: removes em dashes, banned words like 'delve' and 'leverage', cliché openers, and forced enthusiasm. Makes your landing page read like a human wrote it.">?</span>
|
|
338
|
-
</div>
|
|
339
|
-
<div class="brand-asset-card" data-asset="styleguide">
|
|
340
|
-
<div class="brand-asset-card__base">
|
|
341
|
-
<span class="brand-asset-card__icon" id="brand-icon-styleguide">+</span>
|
|
342
|
-
<span class="brand-asset-card__label">styleguide</span>
|
|
343
|
+
<div class="setup__panel hidden" id="panel-download">
|
|
344
|
+
<div class="setup__panel-account hidden" id="dl-account">
|
|
345
|
+
<span id="dl-account-name"></span>
|
|
346
|
+
<button class="btn-link" id="dl-account-change" type="button">Change</button>
|
|
343
347
|
</div>
|
|
344
|
-
<div
|
|
345
|
-
|
|
346
|
-
<
|
|
348
|
+
<div id="dl-account-switch" class="hidden" style="margin:0 0 12px"></div>
|
|
349
|
+
<div class="setup__row hidden" id="dl-input-row">
|
|
350
|
+
<label class="visually-hidden" for="dl-theme-name">Theme folder name</label>
|
|
351
|
+
<input type="text" class="setup__input setup__input--wide" id="dl-theme-name" placeholder="Enter theme folder name on HubSpot" aria-label="Theme folder name" />
|
|
352
|
+
<button class="btn btn--primary" id="btn-fetch-theme" type="button">Download</button>
|
|
347
353
|
</div>
|
|
348
|
-
<
|
|
349
|
-
|
|
350
|
-
<
|
|
354
|
+
<p class="setup__hint hidden" id="dl-hint">Enter the exact folder name of your theme in the HubSpot Design Manager</p>
|
|
355
|
+
<div class="hidden" id="dl-no-account">
|
|
356
|
+
<p class="setup__hint">Connect a HubSpot account in <a href="#" id="dl-open-settings">Settings</a> to download themes.</p>
|
|
351
357
|
</div>
|
|
352
358
|
</div>
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
<
|
|
359
|
+
|
|
360
|
+
<div class="setup__panel hidden" id="panel-figma">
|
|
361
|
+
<div id="figma-token-prompt" class="hidden">
|
|
362
|
+
<p class="setup__hint">A Figma Personal Access Token is required. <a href="#" id="figma-open-settings">Add one in Settings</a> or enter it below:</p>
|
|
363
|
+
<div class="setup__row">
|
|
364
|
+
<label class="visually-hidden" for="figma-inline-token">Figma access token</label>
|
|
365
|
+
<input type="password" class="setup__input setup__input--wide" id="figma-inline-token" placeholder="figd_..." aria-label="Figma access token" />
|
|
366
|
+
<button class="btn btn--primary" id="figma-save-token" type="button">Save</button>
|
|
367
|
+
</div>
|
|
357
368
|
</div>
|
|
358
|
-
<div
|
|
359
|
-
<
|
|
360
|
-
|
|
369
|
+
<div id="figma-url-section">
|
|
370
|
+
<div class="setup__row">
|
|
371
|
+
<label class="visually-hidden" for="figma-url">Figma design URL</label>
|
|
372
|
+
<input type="text" class="setup__input setup__input--wide" id="figma-url" placeholder="https://www.figma.com/design/..." aria-label="Figma design URL" />
|
|
373
|
+
<button class="btn btn--primary" id="figma-extract-btn" type="button">Extract</button>
|
|
374
|
+
</div>
|
|
375
|
+
<p class="setup__hint">Paste a Figma design URL to extract structure, text, and assets</p>
|
|
376
|
+
<div class="figma-progress hidden" id="figma-progress"></div>
|
|
361
377
|
</div>
|
|
362
|
-
<div
|
|
363
|
-
|
|
364
|
-
<
|
|
378
|
+
<div id="figma-summary" class="hidden"></div>
|
|
379
|
+
<div id="figma-generate" class="hidden">
|
|
380
|
+
<div class="setup__row">
|
|
381
|
+
<label class="visually-hidden" for="figma-theme-name">Theme name</label>
|
|
382
|
+
<input type="text" class="setup__input setup__input--wide" id="figma-theme-name" placeholder="my-landing-page" aria-label="Theme name" />
|
|
383
|
+
<button class="btn btn--primary" id="figma-generate-btn" type="button">Generate Page</button>
|
|
384
|
+
</div>
|
|
385
|
+
<label class="figma-toggle" id="figma-image-toggle">
|
|
386
|
+
<input type="checkbox" id="figma-use-assets" checked />
|
|
387
|
+
<span class="figma-toggle__label">Import images as assets</span>
|
|
388
|
+
<span class="figma-toggle__hint" id="figma-image-hint">Images uploaded to HubSpot, no manual replacement needed</span>
|
|
389
|
+
</label>
|
|
365
390
|
</div>
|
|
366
391
|
</div>
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
<
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
<label class="brand-asset-card__btn" title="Upload .md/.txt file"><input type="file" accept=".md,.txt" hidden>Upload</label>
|
|
374
|
-
<button class="brand-asset-card__btn" data-action="extract" title="AI-extract from page content">Extract</button>
|
|
375
|
-
</div>
|
|
376
|
-
<div class="brand-asset-card__manage hidden">
|
|
377
|
-
<button class="brand-asset-card__btn" data-action="view" title="View">View</button>
|
|
378
|
-
<button class="brand-asset-card__btn brand-asset-card__btn--danger" data-action="delete" title="Remove">Delete</button>
|
|
392
|
+
|
|
393
|
+
<div class="setup__panel hidden" id="panel-convert">
|
|
394
|
+
<div class="setup__row">
|
|
395
|
+
<label class="visually-hidden" for="import-url">Repository or Lovable URL</label>
|
|
396
|
+
<input type="text" class="setup__input setup__input--wide" id="import-url" placeholder="https://github.com/user/repo or Lovable URL" aria-label="Repository or Lovable URL" />
|
|
397
|
+
<button class="btn btn--primary" id="import-btn" type="button">Import</button>
|
|
379
398
|
</div>
|
|
399
|
+
<p class="setup__hint">Convert a React or Lovable project to a HubSpot theme</p>
|
|
380
400
|
</div>
|
|
381
|
-
<button class="btn btn--sm btn--outline" id="btn-extract-all" title="AI-extract all brand assets from this theme">Extract All</button>
|
|
382
|
-
<button class="btn btn--sm btn--outline" id="btn-import-reference" title="Import design from another HubSpot theme or local folder">Import Reference</button>
|
|
383
|
-
</div>
|
|
384
|
-
</section>
|
|
385
|
-
|
|
386
|
-
<!-- Page Type Selector -->
|
|
387
|
-
<section class="dashboard__section">
|
|
388
|
-
<div class="dashboard__section-header">
|
|
389
|
-
<h2 class="dashboard__section-title">Create New Page</h2>
|
|
390
|
-
</div>
|
|
391
|
-
<div class="dashboard__page-types" id="dashboard-page-types">
|
|
392
|
-
<button class="page-type-card" data-type="landing_page">
|
|
393
|
-
<div class="page-type-card__icon">
|
|
394
|
-
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
|
|
395
|
-
</div>
|
|
396
|
-
<span class="page-type-card__label">Landing Page</span>
|
|
397
|
-
<span class="page-type-card__desc">Single-page, conversion-focused</span>
|
|
398
|
-
</button>
|
|
399
|
-
<button class="page-type-card" data-type="blog_post">
|
|
400
|
-
<div class="page-type-card__icon">
|
|
401
|
-
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4h16v16H4z" rx="2"/><path d="M8 8h8"/><path d="M8 12h8"/><path d="M8 16h4"/></svg>
|
|
402
|
-
</div>
|
|
403
|
-
<span class="page-type-card__label">Blog Post</span>
|
|
404
|
-
<span class="page-type-card__desc">Article with blog features</span>
|
|
405
|
-
</button>
|
|
406
|
-
<button class="page-type-card" data-type="website_page">
|
|
407
|
-
<div class="page-type-card__icon">
|
|
408
|
-
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
|
409
|
-
</div>
|
|
410
|
-
<span class="page-type-card__label">Website Page</span>
|
|
411
|
-
<span class="page-type-card__desc">With navigation & menu</span>
|
|
412
|
-
</button>
|
|
413
|
-
<button class="page-type-card" data-type="module_only">
|
|
414
|
-
<div class="page-type-card__icon">
|
|
415
|
-
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
|
|
416
|
-
</div>
|
|
417
|
-
<span class="page-type-card__label">Section Only</span>
|
|
418
|
-
<span class="page-type-card__desc">Standalone section, no template</span>
|
|
419
|
-
</button>
|
|
420
|
-
</div>
|
|
421
|
-
</section>
|
|
422
|
-
|
|
423
|
-
<!-- Template List -->
|
|
424
|
-
<section class="dashboard__section">
|
|
425
|
-
<div class="dashboard__section-header">
|
|
426
|
-
<h2 class="dashboard__section-title">Templates</h2>
|
|
427
|
-
<span class="dashboard__template-count" id="dashboard-template-count">0</span>
|
|
428
|
-
</div>
|
|
429
|
-
<div class="dashboard__template-list" id="dashboard-template-list">
|
|
430
|
-
<p class="dashboard__empty-state">No templates yet. Choose a page type above to get started.</p>
|
|
431
401
|
</div>
|
|
432
|
-
</section>
|
|
433
402
|
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
<h2 class="dashboard__section-title">Section Library</h2>
|
|
438
|
-
</div>
|
|
439
|
-
<div class="dashboard__module-library" id="dashboard-module-library">
|
|
440
|
-
<p class="dashboard__empty-state">Sections will appear here as you build pages.</p>
|
|
403
|
+
<div class="setup__loading hidden" id="setup-loading" role="status" aria-live="polite">
|
|
404
|
+
<div class="setup__spinner" aria-hidden="true"></div>
|
|
405
|
+
<span id="setup-loading-text">Setting up...</span>
|
|
441
406
|
</div>
|
|
442
|
-
<div class="dashboard__module-preview hidden" id="dashboard-module-preview">
|
|
443
|
-
<div class="dashboard__module-preview-header">
|
|
444
|
-
<span class="dashboard__module-preview-name" id="dashboard-preview-name"></span>
|
|
445
|
-
<span class="dashboard__module-preview-used" id="dashboard-preview-used"></span>
|
|
446
|
-
<button class="btn btn--danger btn--sm dashboard__module-preview-delete" id="dashboard-preview-delete">Delete section</button>
|
|
447
|
-
<button class="dashboard__module-preview-close" id="dashboard-preview-close">×</button>
|
|
448
|
-
</div>
|
|
449
|
-
<iframe class="dashboard__module-preview-frame" id="dashboard-preview-frame" sandbox="allow-scripts allow-same-origin"></iframe>
|
|
450
|
-
</div>
|
|
451
|
-
</section>
|
|
452
407
|
|
|
453
|
-
|
|
454
|
-
</div>
|
|
455
|
-
</div>
|
|
456
|
-
|
|
457
|
-
<!-- ============================================================ -->
|
|
458
|
-
<!-- MAIN APP — shown after a session is active -->
|
|
459
|
-
<!-- ============================================================ -->
|
|
460
|
-
<div class="app hidden" id="app-screen">
|
|
461
|
-
<header class="topbar">
|
|
462
|
-
<div class="topbar__left">
|
|
463
|
-
<button class="topbar__back-btn" id="app-back" title="Back to theme overview">
|
|
464
|
-
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
|
|
465
|
-
</button>
|
|
466
|
-
<span class="topbar__project-pill" id="theme-name"></span>
|
|
467
|
-
</div>
|
|
468
|
-
<div class="topbar__center">
|
|
469
|
-
<div class="responsive-toggle" id="responsive-toggle">
|
|
470
|
-
<button class="responsive-btn active" data-width="100%" title="Desktop">
|
|
471
|
-
<svg width="18" height="14" viewBox="0 0 18 14" fill="none"><rect x="1" y="1" width="16" height="10" rx="1" stroke="currentColor" stroke-width="1.5"/><line x1="6" y1="13" x2="12" y2="13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
|
472
|
-
</button>
|
|
473
|
-
<button class="responsive-btn" data-width="768px" title="Tablet">
|
|
474
|
-
<svg width="14" height="18" viewBox="0 0 14 18" fill="none"><rect x="1" y="1" width="12" height="16" rx="1.5" stroke="currentColor" stroke-width="1.5"/><circle cx="7" cy="15" r="0.75" fill="currentColor"/></svg>
|
|
475
|
-
</button>
|
|
476
|
-
<button class="responsive-btn" data-width="375px" title="Mobile">
|
|
477
|
-
<svg width="10" height="18" viewBox="0 0 10 18" fill="none"><rect x="1" y="1" width="8" height="16" rx="1.5" stroke="currentColor" stroke-width="1.5"/><circle cx="5" cy="15" r="0.75" fill="currentColor"/></svg>
|
|
478
|
-
</button>
|
|
408
|
+
<div class="setup__error hidden" id="setup-error" role="alert"></div>
|
|
479
409
|
</div>
|
|
480
|
-
<button class="select-mode-toggle" id="select-mode-toggle" title="Select an element in the preview to reference it in chat" aria-pressed="false">
|
|
481
|
-
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3l7 17 2-7 7-2z"/></svg>
|
|
482
|
-
<span>Select</span>
|
|
483
|
-
</button>
|
|
484
410
|
</div>
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
411
|
+
</main>
|
|
412
|
+
|
|
413
|
+
<!-- ============================================================ -->
|
|
414
|
+
<!-- MODE 2: EDITOR — workspace tabs (Pages/Brand/Library/etc.) -->
|
|
415
|
+
<!-- ============================================================ -->
|
|
416
|
+
<div class="editor dashboard hidden" id="editor" role="region" aria-label="Project editor">
|
|
417
|
+
<div class="dashboard__body">
|
|
418
|
+
|
|
419
|
+
<!-- ================ PAGES TAB ================ -->
|
|
420
|
+
<section class="workspace-panel workspace-panel--pages active" id="ws-panel-pages" data-ws-panel="pages" role="tabpanel" aria-labelledby="ws-tab-pages">
|
|
421
|
+
<div class="layout">
|
|
422
|
+
<aside class="panel panel--left" id="panel-left" aria-label="Pages and chat">
|
|
423
|
+
|
|
424
|
+
<!-- Page tree (replaces module-bar; module management lives here) -->
|
|
425
|
+
<div class="page-tree" id="page-tree">
|
|
426
|
+
<div class="page-tree__header">
|
|
427
|
+
<span class="page-tree__title">Pages</span>
|
|
428
|
+
<button class="page-tree__modules-toggle" id="btn-toggle-modules" type="button" title="Toggle module list" aria-label="Toggle module list">
|
|
429
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
|
|
430
|
+
<span class="page-tree__modules-count" id="page-tree-module-count">0</span>
|
|
431
|
+
</button>
|
|
432
|
+
<button class="page-tree__add" id="btn-add-page" type="button" title="Add page" aria-label="Add page">
|
|
433
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
|
434
|
+
</button>
|
|
435
|
+
</div>
|
|
436
|
+
<div class="page-tree__list" id="page-tabs-list" role="tree"></div>
|
|
437
|
+
<div class="page-tree__add-inline hidden" id="page-tree-add-inline" role="group" aria-label="Create a new page">
|
|
438
|
+
<label class="visually-hidden" for="page-tree-type">Page type</label>
|
|
439
|
+
<select class="page-tree__type-select" id="page-tree-type" aria-label="Page type">
|
|
440
|
+
<option value="landing_page">Landing Page</option>
|
|
441
|
+
<option value="website_page">Website Page</option>
|
|
442
|
+
<option value="blog_post">Blog Post</option>
|
|
443
|
+
<option value="email">Email</option>
|
|
444
|
+
<option value="module_only">Module Only</option>
|
|
445
|
+
</select>
|
|
446
|
+
<label class="visually-hidden" for="page-tree-name">Page name</label>
|
|
447
|
+
<input class="page-tree__name-input" id="page-tree-name" placeholder="Page name..." aria-label="Page name" />
|
|
448
|
+
<button class="page-tree__create-btn" id="page-tree-create" type="button">Create</button>
|
|
449
|
+
</div>
|
|
450
|
+
</div>
|
|
505
451
|
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
452
|
+
<!-- Module editor slideout (kept for in-page module editing; opened from page tree) -->
|
|
453
|
+
<div class="module-slideout hidden" id="module-slideout" role="dialog" aria-label="Module editor">
|
|
454
|
+
<div class="module-slideout__view" id="module-list-view">
|
|
455
|
+
<div class="module-slideout__header">
|
|
456
|
+
<span class="module-slideout__title">Modules</span>
|
|
457
|
+
<span class="module-slideout__count" id="slideout-module-count">0</span>
|
|
458
|
+
<button class="module-slideout__add" id="btn-add-module" type="button" title="Add module from library" aria-label="Add module from library">+</button>
|
|
459
|
+
<button class="module-slideout__close" id="module-slideout-close" type="button" aria-label="Close module editor">×</button>
|
|
460
|
+
</div>
|
|
461
|
+
<div class="module-library-dropdown hidden" id="module-library-dropdown" role="listbox"></div>
|
|
462
|
+
<div class="module-slideout__items" id="module-items"></div>
|
|
463
|
+
</div>
|
|
464
|
+
<div class="module-slideout__view hidden" id="module-editor-view">
|
|
465
|
+
<div class="module-slideout__header">
|
|
466
|
+
<button class="module-slideout__back" id="field-editor-back" type="button" aria-label="Back to module list">←</button>
|
|
467
|
+
<span class="module-slideout__title" id="field-editor-title">Fields</span>
|
|
468
|
+
<div class="field-editor__tabs" role="tablist" aria-label="Module editor view">
|
|
469
|
+
<button class="field-editor__tab active" id="field-editor-tab-fields" data-tab="fields" role="tab" aria-selected="true" type="button">Fields</button>
|
|
470
|
+
<button class="field-editor__tab" id="field-editor-tab-code" data-tab="code" role="tab" aria-selected="false" type="button">
|
|
471
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
|
|
472
|
+
Code
|
|
473
|
+
</button>
|
|
474
|
+
</div>
|
|
475
|
+
<button class="module-slideout__close" id="field-editor-close" type="button" aria-label="Close field editor">×</button>
|
|
476
|
+
</div>
|
|
477
|
+
<div class="field-editor__content" id="field-editor-content"></div>
|
|
478
|
+
<div class="field-editor__code hidden" id="field-editor-code"></div>
|
|
479
|
+
</div>
|
|
480
|
+
</div>
|
|
515
481
|
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
482
|
+
<!-- Chat panel (below page tree) -->
|
|
483
|
+
<div class="chat" role="region" aria-label="Chat">
|
|
484
|
+
<div class="chat__header" id="chat-header">
|
|
485
|
+
<span class="chat__header-title" id="chat-header-title">Chat</span>
|
|
486
|
+
<span class="chat__header-context" id="chat-header-context"></span>
|
|
487
|
+
</div>
|
|
488
|
+
<div class="chat__messages" id="chat-messages" role="log" aria-live="polite">
|
|
489
|
+
<div class="chat__welcome" id="chat-welcome">
|
|
490
|
+
<p>How would you like to start?</p>
|
|
491
|
+
|
|
492
|
+
<div class="chat__starters chat__starters--rich" id="conversation-starters">
|
|
493
|
+
<button class="starter-btn starter-btn--rich" type="button" data-action="describe">
|
|
494
|
+
<span class="starter-btn__label">Describe your page</span>
|
|
495
|
+
<span class="starter-btn__desc">Tell the AI what you want to build</span>
|
|
496
|
+
</button>
|
|
497
|
+
<button class="starter-btn starter-btn--rich" type="button" data-action="figma">
|
|
498
|
+
<span class="starter-btn__label">Upload a Figma design</span>
|
|
499
|
+
<span class="starter-btn__desc">Attach a Figma export and let AI rebuild it</span>
|
|
500
|
+
</button>
|
|
501
|
+
<button class="starter-btn starter-btn--rich" type="button" data-action="hubspot-import">
|
|
502
|
+
<span class="starter-btn__label">Import from HubSpot</span>
|
|
503
|
+
<span class="starter-btn__desc">Pull an existing HubSpot page in to remix</span>
|
|
504
|
+
</button>
|
|
505
|
+
</div>
|
|
506
|
+
</div>
|
|
507
|
+
</div>
|
|
508
|
+
<div class="history-timeline hidden" id="history-timeline" role="toolbar" aria-label="Version history">
|
|
509
|
+
<button class="history-timeline__nav" id="history-timeline-undo" type="button" title="Undo (Ctrl+Z)" aria-label="Undo">
|
|
510
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
|
|
511
|
+
</button>
|
|
512
|
+
<div class="history-timeline__track" id="history-timeline-track"></div>
|
|
513
|
+
<button class="history-timeline__nav" id="history-timeline-redo" type="button" title="Redo (Ctrl+Shift+Z)" aria-label="Redo">
|
|
514
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
|
|
515
|
+
</button>
|
|
516
|
+
<div class="history-timeline__tooltip hidden" id="history-timeline-tooltip" role="tooltip"></div>
|
|
517
|
+
</div>
|
|
518
|
+
<div class="chat__input-area">
|
|
519
|
+
<div class="chat__suggestions hidden" id="chat-suggestions" aria-label="Suggested next steps"></div>
|
|
520
|
+
<div class="chat__file-chips" id="file-chips"></div>
|
|
521
|
+
<div class="chat__input-wrapper">
|
|
522
|
+
<label class="visually-hidden" for="chat-input">Chat message</label>
|
|
523
|
+
<textarea class="chat__input" id="chat-input" placeholder="Describe your landing page..." rows="3" aria-label="Chat message"></textarea>
|
|
524
|
+
<div class="chat__input-footer">
|
|
525
|
+
<button class="plan-toggle plan-toggle--chip" id="plan-mode-toggle" type="button" title="Plan mode — deliberate before generating" aria-pressed="false">
|
|
526
|
+
<span class="plan-toggle__indicator" aria-hidden="true">
|
|
527
|
+
<svg class="plan-toggle__icon icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="15" y2="17"/></svg>
|
|
528
|
+
</span>
|
|
529
|
+
<span class="plan-toggle__label">Plan</span>
|
|
530
|
+
<span class="plan-toggle__state">Off</span>
|
|
531
|
+
</button>
|
|
532
|
+
<div class="chat__input-actions">
|
|
533
|
+
<button class="chat__input-icon" id="btn-attach-file" type="button" title="Attach files (images, PDFs, docs)" aria-label="Attach files">
|
|
534
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>
|
|
535
|
+
</button>
|
|
536
|
+
<input type="file" id="file-input" multiple accept="image/png,image/jpeg,image/svg+xml,image/webp,image/gif,application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,text/markdown,text/plain,.md,.markdown,.txt" style="display:none" aria-hidden="true">
|
|
537
|
+
<button class="chat__input-icon" id="btn-starter-templates" type="button" title="Templates" aria-label="Templates">
|
|
538
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
|
|
539
|
+
</button>
|
|
540
|
+
<button class="chat__send" id="chat-send" type="button" title="Send (Enter)" aria-label="Send message">
|
|
541
|
+
<svg class="icon icon--md" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M3 12L21 4L13 22L11 14L3 12Z"/></svg>
|
|
542
|
+
</button>
|
|
543
|
+
</div>
|
|
544
|
+
</div>
|
|
545
|
+
</div>
|
|
546
|
+
<div class="chat__drop-overlay hidden" id="drop-overlay" aria-hidden="true">
|
|
547
|
+
<div class="chat__drop-overlay-content">
|
|
548
|
+
<svg class="icon icon--md" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
|
549
|
+
<span>Drop files here</span>
|
|
550
|
+
</div>
|
|
551
|
+
</div>
|
|
552
|
+
</div>
|
|
553
|
+
</div>
|
|
554
|
+
</aside>
|
|
536
555
|
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
<
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
<p>Describe what you want or pick a template to get started.</p>
|
|
545
|
-
|
|
546
|
-
<div class="chat__section-label">Templates</div>
|
|
547
|
-
<div class="chat__starters chat__starters--rich" id="starter-templates">
|
|
548
|
-
<button class="starter-btn starter-btn--rich" data-prompt="Create a modern SaaS landing page with a hero section featuring a gradient background, a features grid with icons, a testimonials carousel, a pricing table with 3 tiers, and a CTA section.">
|
|
549
|
-
<span class="starter-btn__label">SaaS Landing Page</span>
|
|
550
|
-
<span class="starter-btn__desc">Hero, features, testimonials, pricing & CTA</span>
|
|
556
|
+
<div class="resize-handle" id="resize-handle" role="separator" aria-orientation="vertical" aria-label="Resize panels"></div>
|
|
557
|
+
|
|
558
|
+
<main class="panel panel--right" id="panel-right" aria-label="Preview">
|
|
559
|
+
<div class="view-toggle" id="view-toggle" role="tablist" aria-label="Right pane view">
|
|
560
|
+
<button class="view-toggle__btn active" data-view="preview" type="button" role="tab" aria-selected="true">
|
|
561
|
+
<svg class="view-toggle__icon icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
|
562
|
+
<span>Preview</span>
|
|
551
563
|
</button>
|
|
552
|
-
<button class="
|
|
553
|
-
<
|
|
554
|
-
<span
|
|
564
|
+
<button class="view-toggle__btn" data-view="split" type="button" role="tab" aria-selected="false">
|
|
565
|
+
<svg class="view-toggle__icon icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="12" y1="3" x2="12" y2="21"/></svg>
|
|
566
|
+
<span>Split</span>
|
|
555
567
|
</button>
|
|
556
|
-
<button class="
|
|
557
|
-
<
|
|
558
|
-
<span
|
|
568
|
+
<button class="view-toggle__btn view-toggle__btn--code" data-view="code" type="button" role="tab" aria-selected="false" title="Edit raw HubL, CSS, JSON & JS">
|
|
569
|
+
<svg class="view-toggle__icon icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
|
|
570
|
+
<span>Code</span>
|
|
559
571
|
</button>
|
|
560
|
-
<
|
|
561
|
-
|
|
562
|
-
<
|
|
572
|
+
<div class="view-toggle__spacer"></div>
|
|
573
|
+
<button class="view-toggle__btn view-toggle__btn--plan" id="plan-sidebar-toggle" type="button" title="Toggle plan sidebar" aria-pressed="false">
|
|
574
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="15" y1="3" x2="15" y2="21"/></svg>
|
|
575
|
+
Plan
|
|
563
576
|
</button>
|
|
564
577
|
</div>
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
578
|
+
|
|
579
|
+
<div class="right-split">
|
|
580
|
+
<div class="preview" id="preview-container">
|
|
581
|
+
<div class="browser-chrome" id="browser-chrome">
|
|
582
|
+
<div class="browser-chrome__bar">
|
|
583
|
+
<div class="browser-chrome__dots" aria-hidden="true">
|
|
584
|
+
<span class="browser-chrome__dot"></span>
|
|
585
|
+
<span class="browser-chrome__dot"></span>
|
|
586
|
+
<span class="browser-chrome__dot"></span>
|
|
587
|
+
</div>
|
|
588
|
+
<button class="hubl-badge hubl-badge--valid" id="hubl-badge" type="button" data-state="valid" title="HubL syntax check across all generated modules" aria-label="HubL validity">
|
|
589
|
+
<svg class="hubl-badge__icon icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
|
|
590
|
+
<span class="hubl-badge__label">Valid HubL</span>
|
|
591
|
+
<span class="hubl-badge__count hidden" id="hubl-badge-count"></span>
|
|
592
|
+
</button>
|
|
593
|
+
<div class="browser-chrome__url" id="browser-url">vibespot.app</div>
|
|
594
|
+
<!-- Responsive toggle (moved from topbar center per VIB-184 spec) -->
|
|
595
|
+
<div class="responsive-toggle" id="responsive-toggle" role="group" aria-label="Responsive preview">
|
|
596
|
+
<button class="responsive-btn active" type="button" data-width="100%" title="Desktop" aria-label="Desktop preview" aria-pressed="true">
|
|
597
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
|
|
598
|
+
</button>
|
|
599
|
+
<button class="responsive-btn" type="button" data-width="768px" title="Tablet" aria-label="Tablet preview" aria-pressed="false">
|
|
600
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="2" width="16" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
|
|
601
|
+
</button>
|
|
602
|
+
<button class="responsive-btn" type="button" data-width="375px" title="Mobile" aria-label="Mobile preview" aria-pressed="false">
|
|
603
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6" y="2" width="12" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
|
|
604
|
+
</button>
|
|
605
|
+
</div>
|
|
606
|
+
<button class="interact-mode-toggle" id="interact-mode-toggle" type="button" title="Click to edit text, images & links — or click a module to reference it in chat" aria-pressed="false" aria-label="Interact / select mode">
|
|
607
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3l7 17 2-7 7-2z"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
|
608
|
+
<span>Interact</span>
|
|
609
|
+
</button>
|
|
610
|
+
</div>
|
|
611
|
+
<iframe id="preview-frame" class="browser-chrome__frame" sandbox="allow-scripts allow-same-origin" title="Live preview"></iframe>
|
|
612
|
+
<div class="preview-empty-state" id="preview-empty-state" aria-hidden="false">
|
|
613
|
+
<div class="preview-empty-state__inner">
|
|
614
|
+
<div class="preview-empty-state__logo" aria-hidden="true">
|
|
615
|
+
<svg viewBox="0 0 512 512" width="64" height="64"><path d="M256 76 Q280 220 436 256 Q280 292 256 436 Q232 292 76 256 Q232 220 256 76 Z" fill="currentColor"/></svg>
|
|
616
|
+
</div>
|
|
617
|
+
<h2 class="preview-empty-state__title">Your page will appear here as you build it</h2>
|
|
618
|
+
<p class="preview-empty-state__hint">Start by describing your page in the chat ←</p>
|
|
619
|
+
</div>
|
|
620
|
+
</div>
|
|
621
|
+
</div>
|
|
622
|
+
</div>
|
|
623
|
+
|
|
624
|
+
<!-- Plan sidebar (deliberation phase — coexists with preview) -->
|
|
625
|
+
<aside class="plan-sidebar hidden" id="plan-pane" aria-label="Plan">
|
|
626
|
+
<div class="plan-sidebar__resize" id="plan-sidebar-resize" role="separator" aria-orientation="vertical" aria-label="Resize plan panel"></div>
|
|
627
|
+
<button class="plan-sidebar__close" id="plan-sidebar-close" type="button" aria-label="Close plan sidebar">×</button>
|
|
628
|
+
<div class="plan-pane__scroll">
|
|
629
|
+
<div class="plan-pane__header">
|
|
630
|
+
<h2 class="plan-pane__title">Plan</h2>
|
|
631
|
+
<div class="plan-pane__header-actions">
|
|
632
|
+
<button class="plan-pane__icon-btn" id="plan-edit-toggle" type="button" title="Edit plan" aria-label="Edit plan">
|
|
633
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
|
634
|
+
<span>Edit</span>
|
|
635
|
+
</button>
|
|
636
|
+
</div>
|
|
637
|
+
</div>
|
|
638
|
+
<div class="plan-pane__content" id="plan-content">
|
|
639
|
+
<div class="plan-pane__empty">
|
|
640
|
+
<p>No plan yet.</p>
|
|
641
|
+
<p class="plan-pane__empty-hint">Toggle plan mode in the chat (icon next to send) and describe what you want to build. The assistant will ask clarifying questions and draft a plan here.</p>
|
|
642
|
+
</div>
|
|
643
|
+
</div>
|
|
644
|
+
<label class="visually-hidden" for="plan-editor">Plan markdown</label>
|
|
645
|
+
<textarea class="plan-pane__editor hidden" id="plan-editor" spellcheck="false" aria-label="Plan markdown"></textarea>
|
|
646
|
+
</div>
|
|
647
|
+
<div class="plan-pane__footer">
|
|
648
|
+
<button class="btn btn--secondary plan-pane__discard" id="plan-discard-btn" type="button">Discard & start over</button>
|
|
649
|
+
<div class="plan-pane__footer-spacer"></div>
|
|
650
|
+
<button class="btn btn--secondary hidden" id="plan-edit-cancel" type="button">Cancel</button>
|
|
651
|
+
<button class="btn btn--primary hidden" id="plan-edit-save" type="button">Save</button>
|
|
652
|
+
<button class="btn btn--primary plan-pane__approve" id="plan-approve-btn" type="button">Approve plan</button>
|
|
653
|
+
</div>
|
|
654
|
+
</aside>
|
|
602
655
|
</div>
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
656
|
+
|
|
657
|
+
<div class="code-view hidden" id="code-view" role="region" aria-label="Code editor">
|
|
658
|
+
<div class="code-view__sidebar">
|
|
659
|
+
<div class="code-view__sidebar-header">Files</div>
|
|
660
|
+
<div class="code-view__file-list" id="code-file-list" role="tree"></div>
|
|
661
|
+
</div>
|
|
662
|
+
<div class="code-view__editor">
|
|
663
|
+
<div class="code-view__editor-header">
|
|
664
|
+
<span class="code-view__filename" id="code-filename">Select a file</span>
|
|
665
|
+
<div class="code-view__editor-actions">
|
|
666
|
+
<span class="code-view__dirty-dot hidden" id="code-dirty-dot" title="Unsaved changes" aria-label="Unsaved changes"></span>
|
|
667
|
+
<button class="btn btn--sm btn--accent" id="code-save-btn" type="button" disabled>Save</button>
|
|
668
|
+
</div>
|
|
669
|
+
</div>
|
|
670
|
+
<div class="code-view__editor-area" id="code-editor-area"></div>
|
|
671
|
+
</div>
|
|
608
672
|
</div>
|
|
609
|
-
|
|
673
|
+
|
|
674
|
+
<!-- History bottom panel -->
|
|
675
|
+
<div class="history-bottom hidden" id="history-panel" role="region" aria-label="Version history">
|
|
676
|
+
<div class="history-bottom__header">
|
|
677
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
|
678
|
+
<h3>Version History</h3>
|
|
679
|
+
<div class="history-bottom__spacer"></div>
|
|
680
|
+
<button class="history-bottom__toggle" id="history-panel-collapse" type="button" title="Collapse" aria-label="Collapse history panel">
|
|
681
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
|
|
682
|
+
</button>
|
|
683
|
+
<button class="history-bottom__close" id="history-panel-close" type="button" title="Close" aria-label="Close history panel">×</button>
|
|
684
|
+
</div>
|
|
685
|
+
<div class="history-bottom__body" id="history-bottom-body">
|
|
686
|
+
<div class="history-panel__list" id="history-list"></div>
|
|
687
|
+
</div>
|
|
688
|
+
</div>
|
|
689
|
+
</main>
|
|
610
690
|
</div>
|
|
611
|
-
</
|
|
612
|
-
</aside>
|
|
691
|
+
</section>
|
|
613
692
|
|
|
614
|
-
|
|
693
|
+
<!-- ================ BRAND TAB ================ -->
|
|
694
|
+
<section class="workspace-panel" id="ws-panel-brand" data-ws-panel="brand" role="tabpanel" aria-labelledby="ws-tab-brand">
|
|
695
|
+
<div class="dashboard__container">
|
|
615
696
|
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
697
|
+
<!-- Import Analysis (visible when an imported theme has been analyzed) -->
|
|
698
|
+
<section class="dashboard__section dashboard__section--inverse hidden" id="dashboard-inverse-section">
|
|
699
|
+
<div class="dashboard__section-header">
|
|
700
|
+
<h2 class="dashboard__section-title">Import Analysis</h2>
|
|
701
|
+
<span class="dashboard__section-hint" id="inverse-status">Analyzing theme...</span>
|
|
702
|
+
<button class="btn btn--sm btn--outline hidden" id="btn-inverse-apply-tokens" type="button" title="Seed shared CSS from inferred tokens">Apply Tokens</button>
|
|
703
|
+
</div>
|
|
704
|
+
<div class="inverse-summary" id="inverse-summary"></div>
|
|
705
|
+
</section>
|
|
706
|
+
|
|
707
|
+
<!-- Brand Assets -->
|
|
708
|
+
<section class="dashboard__section">
|
|
709
|
+
<div class="dashboard__section-header">
|
|
710
|
+
<h2 class="dashboard__section-title">Brand Assets</h2>
|
|
711
|
+
<span class="dashboard__section-hint">Optional — injected into AI prompts</span>
|
|
712
|
+
</div>
|
|
713
|
+
<div class="dashboard__brand-assets" id="dashboard-brand-assets">
|
|
714
|
+
<div class="brand-asset-toggle" id="brand-toggle-humanify">
|
|
715
|
+
<label class="brand-asset-toggle__switch">
|
|
716
|
+
<input type="checkbox" id="humanify-checkbox" checked aria-label="Humanify generated copy">
|
|
717
|
+
<span class="brand-asset-toggle__slider"></span>
|
|
718
|
+
</label>
|
|
719
|
+
<span class="brand-asset-toggle__label">Humanify</span>
|
|
720
|
+
<span class="brand-asset-toggle__tooltip" data-tooltip="Strips AI-sounding copy: removes em dashes, banned words like 'delve' and 'leverage', cliché openers, and forced enthusiasm. Makes your landing page read like a human wrote it.">?</span>
|
|
721
|
+
</div>
|
|
722
|
+
<div class="brand-asset-card" data-asset="styleguide">
|
|
723
|
+
<div class="brand-asset-card__base">
|
|
724
|
+
<span class="brand-asset-card__icon" id="brand-icon-styleguide" aria-hidden="true">+</span>
|
|
725
|
+
<span class="brand-asset-card__label">styleguide</span>
|
|
726
|
+
</div>
|
|
727
|
+
<div class="brand-asset-card__actions">
|
|
728
|
+
<label class="brand-asset-card__btn" title="Upload .md/.txt file"><input type="file" accept=".md,.txt" hidden aria-label="Upload styleguide file">Upload</label>
|
|
729
|
+
<button class="brand-asset-card__btn" type="button" data-action="extract" title="AI-extract from theme">Extract</button>
|
|
730
|
+
</div>
|
|
731
|
+
<div class="brand-asset-card__manage hidden">
|
|
732
|
+
<button class="brand-asset-card__btn" type="button" data-action="view" title="View">View</button>
|
|
733
|
+
<button class="brand-asset-card__btn brand-asset-card__btn--danger" type="button" data-action="delete" title="Remove">Delete</button>
|
|
734
|
+
</div>
|
|
735
|
+
</div>
|
|
736
|
+
<div class="brand-asset-card" data-asset="brandvoice">
|
|
737
|
+
<div class="brand-asset-card__base">
|
|
738
|
+
<span class="brand-asset-card__icon" id="brand-icon-brandvoice" aria-hidden="true">+</span>
|
|
739
|
+
<span class="brand-asset-card__label">brand voice</span>
|
|
740
|
+
</div>
|
|
741
|
+
<div class="brand-asset-card__actions">
|
|
742
|
+
<label class="brand-asset-card__btn" title="Upload .md/.txt file"><input type="file" accept=".md,.txt" hidden aria-label="Upload brand voice file">Upload</label>
|
|
743
|
+
<button class="brand-asset-card__btn" type="button" data-action="extract" title="AI-extract from page copy">Extract</button>
|
|
744
|
+
</div>
|
|
745
|
+
<div class="brand-asset-card__manage hidden">
|
|
746
|
+
<button class="brand-asset-card__btn" type="button" data-action="view" title="View">View</button>
|
|
747
|
+
<button class="brand-asset-card__btn brand-asset-card__btn--danger" type="button" data-action="delete" title="Remove">Delete</button>
|
|
748
|
+
</div>
|
|
749
|
+
</div>
|
|
750
|
+
<div class="brand-asset-card" data-asset="themeContext">
|
|
751
|
+
<div class="brand-asset-card__base">
|
|
752
|
+
<span class="brand-asset-card__icon" id="brand-icon-themeContext" aria-hidden="true">+</span>
|
|
753
|
+
<span class="brand-asset-card__label">product context</span>
|
|
754
|
+
</div>
|
|
755
|
+
<div class="brand-asset-card__actions">
|
|
756
|
+
<label class="brand-asset-card__btn" title="Upload .md/.txt file"><input type="file" accept=".md,.txt" hidden aria-label="Upload product context file">Upload</label>
|
|
757
|
+
<button class="brand-asset-card__btn" type="button" data-action="extract" title="AI-extract from page content">Extract</button>
|
|
758
|
+
</div>
|
|
759
|
+
<div class="brand-asset-card__manage hidden">
|
|
760
|
+
<button class="brand-asset-card__btn" type="button" data-action="view" title="View">View</button>
|
|
761
|
+
<button class="brand-asset-card__btn brand-asset-card__btn--danger" type="button" data-action="delete" title="Remove">Delete</button>
|
|
762
|
+
</div>
|
|
763
|
+
</div>
|
|
764
|
+
<button class="btn btn--sm btn--outline" id="btn-extract-all" type="button" title="AI-extract all brand assets from this theme">Extract All</button>
|
|
765
|
+
<button class="btn btn--sm btn--outline" id="btn-import-reference" type="button" title="Import design from another HubSpot theme or local folder">Import Reference</button>
|
|
766
|
+
</div>
|
|
767
|
+
</section>
|
|
622
768
|
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
<span class="
|
|
628
|
-
<span class="browser-chrome__dot"></span>
|
|
629
|
-
<span class="browser-chrome__dot"></span>
|
|
769
|
+
<!-- Brand Kit -->
|
|
770
|
+
<section class="dashboard__section">
|
|
771
|
+
<div class="dashboard__section-header">
|
|
772
|
+
<h2 class="dashboard__section-title">Brand Kit</h2>
|
|
773
|
+
<span class="dashboard__section-hint">Colors, fonts, and logo enforced in generated modules</span>
|
|
630
774
|
</div>
|
|
631
|
-
<div class="
|
|
632
|
-
|
|
633
|
-
|
|
775
|
+
<div class="brand-kit" id="dashboard-brand-kit">
|
|
776
|
+
<div class="brand-preview" id="brand-preview" aria-label="Live brand preview">
|
|
777
|
+
<div class="brand-preview__logo">
|
|
778
|
+
<img class="brand-preview__logo-img" id="brand-preview-logo" alt="Logo preview" hidden>
|
|
779
|
+
<span class="brand-preview__logo-placeholder" id="brand-preview-logo-placeholder">No logo</span>
|
|
780
|
+
</div>
|
|
781
|
+
<div class="brand-preview__type">
|
|
782
|
+
<div class="brand-preview__heading" id="brand-preview-heading">The quick brown fox</div>
|
|
783
|
+
<div class="brand-preview__body" id="brand-preview-body">Pack my box with five dozen liquor jugs.</div>
|
|
784
|
+
</div>
|
|
785
|
+
<div class="brand-preview__swatches" aria-label="Color swatches">
|
|
786
|
+
<div class="brand-preview__swatch" id="brand-preview-swatch-primary" title="Primary">
|
|
787
|
+
<span class="brand-preview__swatch-name">Primary</span>
|
|
788
|
+
</div>
|
|
789
|
+
<div class="brand-preview__swatch" id="brand-preview-swatch-secondary" title="Secondary">
|
|
790
|
+
<span class="brand-preview__swatch-name">Secondary</span>
|
|
791
|
+
</div>
|
|
792
|
+
<div class="brand-preview__swatch" id="brand-preview-swatch-accent" title="Accent">
|
|
793
|
+
<span class="brand-preview__swatch-name">Accent</span>
|
|
794
|
+
</div>
|
|
795
|
+
</div>
|
|
796
|
+
</div>
|
|
797
|
+
|
|
798
|
+
<div class="brand-kit__group" aria-labelledby="brand-kit-group-colors">
|
|
799
|
+
<div class="brand-kit__group-title" id="brand-kit-group-colors">Colors</div>
|
|
800
|
+
<div class="brand-kit__row">
|
|
801
|
+
<label class="brand-kit__label" for="bk-color-primary">Primary</label>
|
|
802
|
+
<input type="color" class="brand-kit__color" id="bk-color-primary" value="#e8613a" aria-label="Primary color">
|
|
803
|
+
<input type="text" class="brand-kit__hex" id="bk-hex-primary" placeholder="#e8613a" maxlength="7" aria-label="Primary color hex">
|
|
804
|
+
</div>
|
|
805
|
+
<div class="brand-kit__row">
|
|
806
|
+
<label class="brand-kit__label" for="bk-color-secondary">Secondary</label>
|
|
807
|
+
<input type="color" class="brand-kit__color" id="bk-color-secondary" value="#1a1a2e" aria-label="Secondary color">
|
|
808
|
+
<input type="text" class="brand-kit__hex" id="bk-hex-secondary" placeholder="#1a1a2e" maxlength="7" aria-label="Secondary color hex">
|
|
809
|
+
</div>
|
|
810
|
+
<div class="brand-kit__row">
|
|
811
|
+
<label class="brand-kit__label" for="bk-color-accent">Accent</label>
|
|
812
|
+
<input type="color" class="brand-kit__color" id="bk-color-accent" value="#f4a261" aria-label="Accent color">
|
|
813
|
+
<input type="text" class="brand-kit__hex" id="bk-hex-accent" placeholder="#f4a261" maxlength="7" aria-label="Accent color hex">
|
|
814
|
+
</div>
|
|
815
|
+
</div>
|
|
816
|
+
|
|
817
|
+
<div class="brand-kit__group" aria-labelledby="brand-kit-group-fonts">
|
|
818
|
+
<div class="brand-kit__group-title" id="brand-kit-group-fonts">Fonts</div>
|
|
819
|
+
<div class="brand-kit__row">
|
|
820
|
+
<label class="brand-kit__label" for="bk-font-heading">Heading</label>
|
|
821
|
+
<select class="brand-kit__select" id="bk-font-heading" aria-label="Heading font">
|
|
822
|
+
<option value="">— not set —</option>
|
|
823
|
+
</select>
|
|
824
|
+
</div>
|
|
825
|
+
<div class="brand-kit__row">
|
|
826
|
+
<label class="brand-kit__label" for="bk-font-body">Body</label>
|
|
827
|
+
<select class="brand-kit__select" id="bk-font-body" aria-label="Body font">
|
|
828
|
+
<option value="">— not set —</option>
|
|
829
|
+
</select>
|
|
830
|
+
</div>
|
|
831
|
+
</div>
|
|
832
|
+
|
|
833
|
+
<div class="brand-kit__group" aria-labelledby="brand-kit-group-logo">
|
|
834
|
+
<div class="brand-kit__group-title" id="brand-kit-group-logo">Logo</div>
|
|
835
|
+
<div class="brand-kit__row">
|
|
836
|
+
<label class="brand-kit__label" for="bk-logo-url">URL</label>
|
|
837
|
+
<input type="text" class="brand-kit__input brand-kit__input--wide" id="bk-logo-url" placeholder="https://example.com/logo.png" aria-label="Logo URL">
|
|
838
|
+
</div>
|
|
839
|
+
</div>
|
|
840
|
+
|
|
841
|
+
<div class="brand-kit__actions">
|
|
842
|
+
<button class="btn btn--sm btn--primary" id="bk-save" type="button">Save Brand Kit</button>
|
|
843
|
+
<button class="btn btn--sm btn--outline brand-kit__btn--danger" id="bk-clear" type="button">Clear</button>
|
|
844
|
+
</div>
|
|
845
|
+
</div>
|
|
846
|
+
</section>
|
|
847
|
+
|
|
634
848
|
</div>
|
|
635
|
-
</
|
|
849
|
+
</section>
|
|
636
850
|
|
|
637
|
-
<!--
|
|
638
|
-
<
|
|
639
|
-
<div class="
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
<div class="
|
|
643
|
-
<
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
851
|
+
<!-- ================ LIBRARY TAB ================ -->
|
|
852
|
+
<section class="workspace-panel" id="ws-panel-library" data-ws-panel="library" role="tabpanel" aria-labelledby="ws-tab-library">
|
|
853
|
+
<div class="dashboard__container">
|
|
854
|
+
|
|
855
|
+
<section class="dashboard__section" id="library-project-assets">
|
|
856
|
+
<div class="dashboard__section-header">
|
|
857
|
+
<h2 class="dashboard__section-title">Project Assets</h2>
|
|
858
|
+
<span class="dashboard__section-hint">Pages, emails, and content in this project</span>
|
|
859
|
+
<div class="dashboard__section-actions">
|
|
860
|
+
<button class="btn btn--sm btn--ghost" id="library-add-page" type="button">+ Page</button>
|
|
861
|
+
<button class="btn btn--sm btn--ghost" id="library-add-email" type="button">+ Email</button>
|
|
862
|
+
</div>
|
|
647
863
|
</div>
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
<div class="plan-pane__empty">
|
|
651
|
-
<p>No plan yet.</p>
|
|
652
|
-
<p class="plan-pane__empty-hint">Toggle plan mode in the chat (icon next to send) and describe what you want to build. The assistant will ask clarifying questions and draft a plan here.</p>
|
|
864
|
+
<div id="library-assets-list">
|
|
865
|
+
<p class="dashboard__empty-state">Assets will appear here as you create pages and emails.</p>
|
|
653
866
|
</div>
|
|
654
|
-
</
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
867
|
+
</section>
|
|
868
|
+
|
|
869
|
+
<section class="dashboard__section">
|
|
870
|
+
<div class="dashboard__section-header">
|
|
871
|
+
<h2 class="dashboard__section-title">Module Library</h2>
|
|
872
|
+
<span class="dashboard__section-hint">Reusable HubSpot modules across all pages</span>
|
|
873
|
+
</div>
|
|
874
|
+
<div class="dashboard__module-library module-library-grid" id="dashboard-module-library">
|
|
875
|
+
<p class="dashboard__empty-state">Modules will appear here as you build pages.</p>
|
|
876
|
+
</div>
|
|
877
|
+
<div class="dashboard__module-preview hidden" id="dashboard-module-preview">
|
|
878
|
+
<div class="dashboard__module-preview-header">
|
|
879
|
+
<span class="dashboard__module-preview-name" id="dashboard-preview-name"></span>
|
|
880
|
+
<span class="dashboard__module-preview-used" id="dashboard-preview-used"></span>
|
|
881
|
+
<button class="btn btn--danger btn--sm dashboard__module-preview-delete" id="dashboard-preview-delete" type="button">Delete module</button>
|
|
882
|
+
<button class="dashboard__module-preview-close" id="dashboard-preview-close" type="button" aria-label="Close preview">×</button>
|
|
883
|
+
</div>
|
|
884
|
+
<iframe class="dashboard__module-preview-frame" id="dashboard-preview-frame" sandbox="allow-scripts allow-same-origin" title="Module preview"></iframe>
|
|
885
|
+
</div>
|
|
886
|
+
</section>
|
|
887
|
+
|
|
663
888
|
</div>
|
|
664
|
-
</
|
|
889
|
+
</section>
|
|
890
|
+
|
|
891
|
+
<!-- ================ MARKETPLACE TAB ================ -->
|
|
892
|
+
<section class="workspace-panel" id="ws-panel-marketplace" data-ws-panel="marketplace" role="tabpanel" aria-labelledby="ws-tab-marketplace">
|
|
893
|
+
<div class="dashboard__container">
|
|
894
|
+
|
|
895
|
+
<section class="dashboard__section">
|
|
896
|
+
<div class="dashboard__section-header">
|
|
897
|
+
<h2 class="dashboard__section-title">Marketplace</h2>
|
|
898
|
+
<span class="dashboard__section-hint">Validate and publish your theme</span>
|
|
899
|
+
</div>
|
|
900
|
+
<div class="dashboard__marketplace-content" id="dashboard-marketplace-content">
|
|
901
|
+
<p class="dashboard__empty-state">Run a marketplace validation check to see if your theme is ready for publication.</p>
|
|
902
|
+
<button class="btn btn--primary btn--sm" id="btn-marketplace" type="button">
|
|
903
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
|
|
904
|
+
Run Validation
|
|
905
|
+
</button>
|
|
906
|
+
</div>
|
|
907
|
+
</section>
|
|
665
908
|
|
|
666
|
-
<div class="code-view hidden" id="code-view">
|
|
667
|
-
<div class="code-view__sidebar">
|
|
668
|
-
<div class="code-view__sidebar-header">Files</div>
|
|
669
|
-
<div class="code-view__file-list" id="code-file-list"></div>
|
|
670
909
|
</div>
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
910
|
+
</section>
|
|
911
|
+
|
|
912
|
+
<!-- ================ SETTINGS TAB (formerly modal overlay) ================ -->
|
|
913
|
+
<section class="workspace-panel workspace-panel--settings" id="ws-panel-settings" data-ws-panel="settings" role="tabpanel" aria-labelledby="ws-tab-settings">
|
|
914
|
+
<div class="dashboard__container">
|
|
915
|
+
|
|
916
|
+
<header class="settings__header">
|
|
917
|
+
<h2 class="settings__title">Settings</h2>
|
|
918
|
+
</header>
|
|
919
|
+
<nav class="settings__tabs" id="settings-tabs" role="tablist" aria-label="Settings categories">
|
|
920
|
+
<button class="settings__tab active" data-tab="ai" type="button" role="tab" aria-selected="true">AI</button>
|
|
921
|
+
<button class="settings__tab" data-tab="hubspot" type="button" role="tab" aria-selected="false">HubSpot</button>
|
|
922
|
+
<button class="settings__tab" data-tab="figma" type="button" role="tab" aria-selected="false">Figma</button>
|
|
923
|
+
<button class="settings__tab" data-tab="github" type="button" role="tab" aria-selected="false">GitHub</button>
|
|
924
|
+
<button class="settings__tab" data-tab="vibespot" type="button" role="tab" aria-selected="false">vibeSpot</button>
|
|
925
|
+
</nav>
|
|
926
|
+
<div class="settings__body" id="settings-body" role="tabpanel">
|
|
927
|
+
<div class="settings__loading">
|
|
928
|
+
<div class="settings__spinner-lg" aria-hidden="true"></div>
|
|
929
|
+
<span>Loading environment...</span>
|
|
677
930
|
</div>
|
|
678
931
|
</div>
|
|
679
|
-
<div class="code-view__editor-area" id="code-editor-area"></div>
|
|
680
|
-
</div>
|
|
681
|
-
</div>
|
|
682
932
|
|
|
683
|
-
<aside class="history-panel hidden" id="history-panel">
|
|
684
|
-
<div class="history-panel__header">
|
|
685
|
-
<h3>Version History</h3>
|
|
686
|
-
<button class="history-panel__close" id="history-panel-close">×</button>
|
|
687
933
|
</div>
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
</
|
|
691
|
-
</div
|
|
934
|
+
</section>
|
|
935
|
+
|
|
936
|
+
</div><!-- /.dashboard__body -->
|
|
937
|
+
</div><!-- /#editor -->
|
|
692
938
|
|
|
693
|
-
<!--
|
|
694
|
-
|
|
939
|
+
<!-- ============================================================ -->
|
|
940
|
+
<!-- EDITOR-WIDE OVERLAYS (upload panel, email preview, statusbar) -->
|
|
941
|
+
<!-- ============================================================ -->
|
|
942
|
+
|
|
943
|
+
<div class="upload-panel hidden" id="upload-panel" role="region" aria-label="Upload status">
|
|
695
944
|
<div class="upload-panel__header">
|
|
696
945
|
<span class="upload-panel__title" id="upload-status-text">Upload</span>
|
|
697
946
|
<div class="upload-panel__actions" id="upload-actions"></div>
|
|
698
|
-
<button class="upload-panel__toggle" id="upload-panel-toggle" title="Toggle log">
|
|
699
|
-
<svg
|
|
947
|
+
<button class="upload-panel__toggle" id="upload-panel-toggle" type="button" title="Toggle log" aria-label="Toggle upload log">
|
|
948
|
+
<svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 15 12 9 18 15"/></svg>
|
|
700
949
|
</button>
|
|
701
950
|
</div>
|
|
702
951
|
<pre class="upload-panel__log" id="upload-log"></pre>
|
|
703
952
|
</div>
|
|
704
953
|
|
|
705
|
-
<
|
|
706
|
-
<
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
<button class="settings__close" id="settings-close">×</button>
|
|
720
|
-
</div>
|
|
721
|
-
<div class="settings__tabs" id="settings-tabs">
|
|
722
|
-
<button class="settings__tab active" data-tab="ai">AI</button>
|
|
723
|
-
<button class="settings__tab" data-tab="hubspot">HubSpot</button>
|
|
724
|
-
<button class="settings__tab" data-tab="figma">Figma</button>
|
|
725
|
-
<button class="settings__tab" data-tab="github">GitHub</button>
|
|
726
|
-
<button class="settings__tab" data-tab="vibespot">vibeSpot</button>
|
|
727
|
-
</div>
|
|
728
|
-
<div class="settings__body" id="settings-body">
|
|
729
|
-
<!-- Populated dynamically by settings.js -->
|
|
730
|
-
<div class="settings__loading">
|
|
731
|
-
<div class="settings__spinner-lg"></div>
|
|
732
|
-
<span>Loading environment...</span>
|
|
954
|
+
<div class="email-preview-overlay hidden" id="email-preview-overlay" role="dialog" aria-modal="true" aria-label="Email client preview">
|
|
955
|
+
<div class="email-preview-panel">
|
|
956
|
+
<div class="email-preview-panel__header">
|
|
957
|
+
<h3>Email Client Preview</h3>
|
|
958
|
+
<div class="email-preview-panel__tabs" id="email-preview-tabs" role="tablist" aria-label="Email clients">
|
|
959
|
+
<button class="email-preview-tab active" type="button" data-client="gmail" role="tab" aria-selected="true">Gmail</button>
|
|
960
|
+
<button class="email-preview-tab" type="button" data-client="outlook" role="tab" aria-selected="false">Outlook Desktop</button>
|
|
961
|
+
<button class="email-preview-tab" type="button" data-client="apple-mail" role="tab" aria-selected="false">Apple Mail</button>
|
|
962
|
+
</div>
|
|
963
|
+
<button class="email-preview-panel__close" id="email-preview-close" type="button" aria-label="Close email preview">×</button>
|
|
964
|
+
</div>
|
|
965
|
+
<div class="email-preview-panel__notes" id="email-preview-notes"></div>
|
|
966
|
+
<div class="email-preview-panel__body">
|
|
967
|
+
<iframe class="email-preview-panel__frame" id="email-preview-frame" sandbox="allow-scripts allow-same-origin" title="Email client preview"></iframe>
|
|
733
968
|
</div>
|
|
734
969
|
</div>
|
|
735
970
|
</div>
|
|
736
|
-
</div>
|
|
737
971
|
|
|
738
|
-
|
|
972
|
+
<footer class="statusbar" role="contentinfo">
|
|
973
|
+
<span id="status-text" class="statusbar__state">Ready</span>
|
|
974
|
+
<div class="statusbar__info">
|
|
975
|
+
<span id="status-engine" class="statusbar__item statusbar__item--engine" data-label="Engine"></span>
|
|
976
|
+
<span id="status-hs-account" class="statusbar__item statusbar__item--portal" data-label="Portal"></span>
|
|
977
|
+
<span id="status-theme" class="statusbar__item statusbar__item--theme" data-label="Theme"></span>
|
|
978
|
+
<span id="status-last-saved" class="statusbar__item statusbar__item--saved" data-label="Last saved" title=""></span>
|
|
979
|
+
</div>
|
|
980
|
+
</footer>
|
|
981
|
+
|
|
982
|
+
</div><!-- /.app-body -->
|
|
739
983
|
|
|
740
984
|
<script src="/vendor/marked.umd.js"></script>
|
|
741
985
|
<script src="/vendor/codemirror-bundle.global.js"></script>
|
|
986
|
+
<script src="/icons.js"></script>
|
|
742
987
|
<script src="/dialog.js"></script>
|
|
743
|
-
<script src="/setup.js?v=
|
|
988
|
+
<script src="/setup.js?v=111"></script>
|
|
744
989
|
<script src="/dashboard.js"></script>
|
|
745
990
|
<script src="/settings.js"></script>
|
|
746
991
|
<script src="/upload-panel.js"></script>
|
|
747
992
|
<script src="/marketplace.js"></script>
|
|
748
|
-
<script src="/chat.js?v=
|
|
993
|
+
<script src="/chat.js?v=109"></script>
|
|
749
994
|
<script src="/plan.js"></script>
|
|
750
995
|
<script src="/preview.js"></script>
|
|
996
|
+
<script src="/inline-edit.js"></script>
|
|
751
997
|
<script src="/field-editor.js"></script>
|
|
752
998
|
<script src="/code-editor.js"></script>
|
|
999
|
+
<script src="/email-preview.js"></script>
|
|
1000
|
+
<script src="/section-controls.js"></script>
|
|
753
1001
|
</body>
|
|
754
1002
|
</html>
|