@marketrix.ai/widget 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +600 -0
- package/dist/components/BrowserTools.d.ts +11 -0
- package/dist/components/BrowserTools.d.ts.map +1 -0
- package/dist/components/MarketrixWidget.d.ts +8 -0
- package/dist/components/MarketrixWidget.d.ts.map +1 -0
- package/dist/components/chat/ChatWindow.d.ts +26 -0
- package/dist/components/chat/ChatWindow.d.ts.map +1 -0
- package/dist/components/chat/MessageContent.d.ts +12 -0
- package/dist/components/chat/MessageContent.d.ts.map +1 -0
- package/dist/components/chat/MessageItem.d.ts +21 -0
- package/dist/components/chat/MessageItem.d.ts.map +1 -0
- package/dist/components/chat/MessageList.d.ts +16 -0
- package/dist/components/chat/MessageList.d.ts.map +1 -0
- package/dist/components/chat/ProgressLine.d.ts +13 -0
- package/dist/components/chat/ProgressLine.d.ts.map +1 -0
- package/dist/components/chat/SuggestedActions.d.ts +20 -0
- package/dist/components/chat/SuggestedActions.d.ts.map +1 -0
- package/dist/components/chat/TaskStatusIcon.d.ts +8 -0
- package/dist/components/chat/TaskStatusIcon.d.ts.map +1 -0
- package/dist/components/chat/ThinkingIndicator.d.ts +10 -0
- package/dist/components/chat/ThinkingIndicator.d.ts.map +1 -0
- package/dist/components/chat/VideoStreamDisplay.d.ts +8 -0
- package/dist/components/chat/VideoStreamDisplay.d.ts.map +1 -0
- package/dist/components/chat/WelcomeMessage.d.ts +30 -0
- package/dist/components/chat/WelcomeMessage.d.ts.map +1 -0
- package/dist/components/debug/DebugPanel.d.ts +17 -0
- package/dist/components/debug/DebugPanel.d.ts.map +1 -0
- package/dist/components/dev/DomTestPanel.d.ts +8 -0
- package/dist/components/dev/DomTestPanel.d.ts.map +1 -0
- package/dist/components/input/MessageInput.d.ts +15 -0
- package/dist/components/input/MessageInput.d.ts.map +1 -0
- package/dist/components/input/ModeSelector.d.ts +13 -0
- package/dist/components/input/ModeSelector.d.ts.map +1 -0
- package/dist/components/layout/WidgetButton.d.ts +12 -0
- package/dist/components/layout/WidgetButton.d.ts.map +1 -0
- package/dist/components/ui/DiagnosticModal.d.ts +16 -0
- package/dist/components/ui/DiagnosticModal.d.ts.map +1 -0
- package/dist/components/ui/ErrorDisplay.d.ts +9 -0
- package/dist/components/ui/ErrorDisplay.d.ts.map +1 -0
- package/dist/components/ui/ScreenAccessModal.d.ts +10 -0
- package/dist/components/ui/ScreenAccessModal.d.ts.map +1 -0
- package/dist/components/ui/WidgetSettingsLoader.d.ts +13 -0
- package/dist/components/ui/WidgetSettingsLoader.d.ts.map +1 -0
- package/dist/constants/config.d.ts +26 -0
- package/dist/constants/config.d.ts.map +1 -0
- package/dist/context/WidgetContext.d.ts +34 -0
- package/dist/context/WidgetContext.d.ts.map +1 -0
- package/dist/debug.d.ts +23 -0
- package/dist/debug.d.ts.map +1 -0
- package/dist/debug.js +22790 -0
- package/dist/debug.js.map +1 -0
- package/dist/hooks/usePageLifecycle.d.ts +12 -0
- package/dist/hooks/usePageLifecycle.d.ts.map +1 -0
- package/dist/hooks/useTaskState.d.ts +6 -0
- package/dist/hooks/useTaskState.d.ts.map +1 -0
- package/dist/hooks/useWidget.d.ts +67 -0
- package/dist/hooks/useWidget.d.ts.map +1 -0
- package/dist/index.d.ts +29 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.html +1464 -0
- package/dist/index.mjs +14660 -0
- package/dist/index.mjs.map +1 -0
- package/dist/sdk/index.d.ts +6330 -0
- package/dist/sdk/index.d.ts.map +1 -0
- package/dist/sdk/routes.d.ts +17972 -0
- package/dist/sdk/routes.d.ts.map +1 -0
- package/dist/sdk/schema.d.ts +9345 -0
- package/dist/sdk/schema.d.ts.map +1 -0
- package/dist/services/ApiService.d.ts +53 -0
- package/dist/services/ApiService.d.ts.map +1 -0
- package/dist/services/ChatService.d.ts +46 -0
- package/dist/services/ChatService.d.ts.map +1 -0
- package/dist/services/ConfigManager.d.ts +21 -0
- package/dist/services/ConfigManager.d.ts.map +1 -0
- package/dist/services/DevTestService.d.ts +172 -0
- package/dist/services/DevTestService.d.ts.map +1 -0
- package/dist/services/DomService.d.ts +145 -0
- package/dist/services/DomService.d.ts.map +1 -0
- package/dist/services/IntegrationService.d.ts +18 -0
- package/dist/services/IntegrationService.d.ts.map +1 -0
- package/dist/services/ScreenShareService.d.ts +25 -0
- package/dist/services/ScreenShareService.d.ts.map +1 -0
- package/dist/services/SessionManager.d.ts +68 -0
- package/dist/services/SessionManager.d.ts.map +1 -0
- package/dist/services/ShowModeService.d.ts +33 -0
- package/dist/services/ShowModeService.d.ts.map +1 -0
- package/dist/services/ToolService.d.ts +89 -0
- package/dist/services/ToolService.d.ts.map +1 -0
- package/dist/services/ValidationService.d.ts +34 -0
- package/dist/services/ValidationService.d.ts.map +1 -0
- package/dist/services/WebSocketClient.d.ts +53 -0
- package/dist/services/WebSocketClient.d.ts.map +1 -0
- package/dist/types/browserTools.d.ts +98 -0
- package/dist/types/browserTools.d.ts.map +1 -0
- package/dist/types/index.d.ts +128 -0
- package/dist/types/index.d.ts.map +1 -0
- package/dist/types/toolMessages.d.ts +78 -0
- package/dist/types/toolMessages.d.ts.map +1 -0
- package/dist/utils/apiUtils.d.ts +55 -0
- package/dist/utils/apiUtils.d.ts.map +1 -0
- package/dist/utils/bootstrap.d.ts +74 -0
- package/dist/utils/bootstrap.d.ts.map +1 -0
- package/dist/utils/chat.d.ts +97 -0
- package/dist/utils/chat.d.ts.map +1 -0
- package/dist/utils/cleanupUtils.d.ts +24 -0
- package/dist/utils/cleanupUtils.d.ts.map +1 -0
- package/dist/utils/common.d.ts +55 -0
- package/dist/utils/common.d.ts.map +1 -0
- package/dist/utils/config.d.ts +58 -0
- package/dist/utils/config.d.ts.map +1 -0
- package/dist/utils/devTools.d.ts +71 -0
- package/dist/utils/devTools.d.ts.map +1 -0
- package/dist/utils/dom.d.ts +66 -0
- package/dist/utils/dom.d.ts.map +1 -0
- package/dist/utils/format.d.ts +36 -0
- package/dist/utils/format.d.ts.map +1 -0
- package/dist/utils/persistence.d.ts +15 -0
- package/dist/utils/persistence.d.ts.map +1 -0
- package/dist/utils/stateUtils.d.ts +20 -0
- package/dist/utils/stateUtils.d.ts.map +1 -0
- package/dist/utils/validation.d.ts +130 -0
- package/dist/utils/validation.d.ts.map +1 -0
- package/dist/utils/widgetPositioning.d.ts +3 -0
- package/dist/utils/widgetPositioning.d.ts.map +1 -0
- package/package.json +87 -0
package/dist/index.html
ADDED
|
@@ -0,0 +1,1464 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Marketrix In-App Support Widget Demo</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
9
|
+
<link
|
|
10
|
+
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
|
|
11
|
+
rel="stylesheet"
|
|
12
|
+
/>
|
|
13
|
+
<style>
|
|
14
|
+
body {
|
|
15
|
+
font-family:
|
|
16
|
+
'Inter',
|
|
17
|
+
-apple-system,
|
|
18
|
+
BlinkMacSystemFont,
|
|
19
|
+
'Segoe UI',
|
|
20
|
+
Roboto,
|
|
21
|
+
sans-serif;
|
|
22
|
+
margin: 0;
|
|
23
|
+
padding: 20px;
|
|
24
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
25
|
+
min-height: 100vh;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.demo-container {
|
|
29
|
+
max-width: 1024px;
|
|
30
|
+
margin: 0 auto;
|
|
31
|
+
background: white;
|
|
32
|
+
border-radius: 12px;
|
|
33
|
+
padding: 40px;
|
|
34
|
+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
h1 {
|
|
38
|
+
color: #333;
|
|
39
|
+
text-align: center;
|
|
40
|
+
margin-bottom: 30px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.demo-content {
|
|
44
|
+
line-height: 1.6;
|
|
45
|
+
color: #666;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.demo-content h2 {
|
|
49
|
+
color: #333;
|
|
50
|
+
margin-top: 30px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.demo-content p {
|
|
54
|
+
margin-bottom: 15px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.demo-content ul {
|
|
58
|
+
margin-bottom: 20px;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.demo-content li {
|
|
62
|
+
margin-bottom: 8px;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.code-block {
|
|
66
|
+
background: #f5f5f5;
|
|
67
|
+
border: 1px solid #ddd;
|
|
68
|
+
border-radius: 6px;
|
|
69
|
+
padding: 15px;
|
|
70
|
+
margin: 20px 0;
|
|
71
|
+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
72
|
+
font-size: 14px;
|
|
73
|
+
overflow-x: auto;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.highlight {
|
|
77
|
+
background: #fff3cd;
|
|
78
|
+
border: 1px solid #ffeaa7;
|
|
79
|
+
border-radius: 4px;
|
|
80
|
+
padding: 10px;
|
|
81
|
+
margin: 15px 0;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* Demo Styles */
|
|
85
|
+
.demo-section {
|
|
86
|
+
margin: 30px 0;
|
|
87
|
+
padding: 20px;
|
|
88
|
+
border-radius: 8px;
|
|
89
|
+
background: #f8f9fa;
|
|
90
|
+
transition: all 0.3s ease;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.demo-section:hover {
|
|
94
|
+
background: #e3f2fd;
|
|
95
|
+
transform: translateY(-2px);
|
|
96
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/* Navigation Demo */
|
|
100
|
+
.nav-demo {
|
|
101
|
+
display: flex;
|
|
102
|
+
gap: 10px;
|
|
103
|
+
flex-wrap: wrap;
|
|
104
|
+
margin-top: 15px;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.demo-button {
|
|
108
|
+
padding: 10px 20px;
|
|
109
|
+
border: none;
|
|
110
|
+
border-radius: 6px;
|
|
111
|
+
background: #f1f3f4;
|
|
112
|
+
color: #333;
|
|
113
|
+
cursor: pointer;
|
|
114
|
+
font-size: 14px;
|
|
115
|
+
font-weight: 500;
|
|
116
|
+
transition: all 0.3s ease;
|
|
117
|
+
position: relative;
|
|
118
|
+
overflow: hidden;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.demo-button:hover {
|
|
122
|
+
background: #e8f0fe;
|
|
123
|
+
transform: translateY(-2px);
|
|
124
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.demo-button.primary {
|
|
128
|
+
background: #1976d2;
|
|
129
|
+
color: white;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.demo-button.primary:hover {
|
|
133
|
+
background: #1565c0;
|
|
134
|
+
box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.demo-button.success {
|
|
138
|
+
background: #2e7d32;
|
|
139
|
+
color: white;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.demo-button.success:hover {
|
|
143
|
+
background: #1b5e20;
|
|
144
|
+
box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.demo-button.warning {
|
|
148
|
+
background: #f57c00;
|
|
149
|
+
color: white;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.demo-button.warning:hover {
|
|
153
|
+
background: #ef6c00;
|
|
154
|
+
box-shadow: 0 4px 12px rgba(245, 124, 0, 0.3);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* Product Form Styles */
|
|
158
|
+
.product-form-container {
|
|
159
|
+
background: white;
|
|
160
|
+
border-radius: 12px;
|
|
161
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
162
|
+
margin-top: 20px;
|
|
163
|
+
border: 1px solid #e5e7eb;
|
|
164
|
+
overflow: hidden;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.product-form-header {
|
|
168
|
+
background: linear-gradient(135deg, #10b981, #059669);
|
|
169
|
+
color: white;
|
|
170
|
+
padding: 20px;
|
|
171
|
+
display: flex;
|
|
172
|
+
justify-content: space-between;
|
|
173
|
+
align-items: center;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.product-form-header h3 {
|
|
177
|
+
margin: 0;
|
|
178
|
+
font-size: 20px;
|
|
179
|
+
font-weight: 600;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.close-form-btn {
|
|
183
|
+
background: none;
|
|
184
|
+
border: none;
|
|
185
|
+
color: white;
|
|
186
|
+
font-size: 24px;
|
|
187
|
+
cursor: pointer;
|
|
188
|
+
padding: 4px;
|
|
189
|
+
border-radius: 4px;
|
|
190
|
+
transition: background-color 0.2s;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.close-form-btn:hover {
|
|
194
|
+
background: rgba(255, 255, 255, 0.2);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.product-form {
|
|
198
|
+
padding: 30px;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.form-section {
|
|
202
|
+
margin-bottom: 30px;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.form-section h4 {
|
|
206
|
+
color: #374151;
|
|
207
|
+
font-size: 16px;
|
|
208
|
+
font-weight: 600;
|
|
209
|
+
margin-bottom: 16px;
|
|
210
|
+
padding-bottom: 8px;
|
|
211
|
+
border-bottom: 2px solid #e5e7eb;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.form-row {
|
|
215
|
+
display: grid;
|
|
216
|
+
grid-template-columns: 1fr 1fr;
|
|
217
|
+
gap: 20px;
|
|
218
|
+
margin-bottom: 20px;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.form-group {
|
|
222
|
+
display: flex;
|
|
223
|
+
flex-direction: column;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.form-group label {
|
|
227
|
+
font-weight: 500;
|
|
228
|
+
color: #374151;
|
|
229
|
+
margin-bottom: 6px;
|
|
230
|
+
font-size: 14px;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.form-group input,
|
|
234
|
+
.form-group select,
|
|
235
|
+
.form-group textarea {
|
|
236
|
+
padding: 12px;
|
|
237
|
+
border: 1px solid #d1d5db;
|
|
238
|
+
border-radius: 6px;
|
|
239
|
+
font-size: 14px;
|
|
240
|
+
transition:
|
|
241
|
+
border-color 0.2s,
|
|
242
|
+
box-shadow 0.2s;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.form-group input:focus,
|
|
246
|
+
.form-group select:focus,
|
|
247
|
+
.form-group textarea:focus {
|
|
248
|
+
outline: none;
|
|
249
|
+
border-color: #3b82f6;
|
|
250
|
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.file-upload-area {
|
|
254
|
+
border: 2px dashed #d1d5db;
|
|
255
|
+
border-radius: 8px;
|
|
256
|
+
padding: 40px 20px;
|
|
257
|
+
text-align: center;
|
|
258
|
+
transition: border-color 0.2s;
|
|
259
|
+
cursor: pointer;
|
|
260
|
+
position: relative;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.file-upload-area:hover {
|
|
264
|
+
border-color: #3b82f6;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.file-upload-area input[type='file'] {
|
|
268
|
+
position: absolute;
|
|
269
|
+
top: 0;
|
|
270
|
+
left: 0;
|
|
271
|
+
width: 100%;
|
|
272
|
+
height: 100%;
|
|
273
|
+
opacity: 0;
|
|
274
|
+
cursor: pointer;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.file-upload-text span {
|
|
278
|
+
font-size: 32px;
|
|
279
|
+
display: block;
|
|
280
|
+
margin-bottom: 8px;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.file-upload-text p {
|
|
284
|
+
margin: 0 0 4px 0;
|
|
285
|
+
color: #374151;
|
|
286
|
+
font-weight: 500;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.file-upload-text small {
|
|
290
|
+
color: #6b7280;
|
|
291
|
+
font-size: 12px;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.form-actions {
|
|
295
|
+
display: flex;
|
|
296
|
+
gap: 12px;
|
|
297
|
+
justify-content: flex-end;
|
|
298
|
+
padding-top: 20px;
|
|
299
|
+
border-top: 1px solid #e5e7eb;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.btn-secondary {
|
|
303
|
+
padding: 12px 24px;
|
|
304
|
+
background: white;
|
|
305
|
+
color: #374151;
|
|
306
|
+
border: 1px solid #d1d5db;
|
|
307
|
+
border-radius: 6px;
|
|
308
|
+
font-weight: 500;
|
|
309
|
+
cursor: pointer;
|
|
310
|
+
transition: all 0.2s;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.btn-secondary:hover {
|
|
314
|
+
background: #f9fafb;
|
|
315
|
+
border-color: #9ca3af;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.btn-primary {
|
|
319
|
+
padding: 12px 24px;
|
|
320
|
+
background: #3b82f6;
|
|
321
|
+
color: white;
|
|
322
|
+
border: 1px solid #3b82f6;
|
|
323
|
+
border-radius: 6px;
|
|
324
|
+
font-weight: 500;
|
|
325
|
+
cursor: pointer;
|
|
326
|
+
transition: all 0.2s;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.btn-primary:hover {
|
|
330
|
+
background: #2563eb;
|
|
331
|
+
border-color: #2563eb;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
@media (max-width: 768px) {
|
|
335
|
+
.form-row {
|
|
336
|
+
grid-template-columns: 1fr;
|
|
337
|
+
gap: 16px;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
.product-form {
|
|
341
|
+
padding: 20px;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
.form-actions {
|
|
345
|
+
flex-direction: column;
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
/* Login Form Styles */
|
|
350
|
+
.login-form-container {
|
|
351
|
+
background: white;
|
|
352
|
+
border-radius: 12px;
|
|
353
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
354
|
+
margin-top: 20px;
|
|
355
|
+
border: 1px solid #e5e7eb;
|
|
356
|
+
overflow: hidden;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
.login-form-header {
|
|
360
|
+
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
|
|
361
|
+
color: white;
|
|
362
|
+
padding: 20px;
|
|
363
|
+
display: flex;
|
|
364
|
+
justify-content: space-between;
|
|
365
|
+
align-items: center;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
.login-form-header h3 {
|
|
369
|
+
margin: 0;
|
|
370
|
+
font-size: 18px;
|
|
371
|
+
font-weight: 600;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.login-form {
|
|
375
|
+
padding: 20px;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.form-options {
|
|
379
|
+
display: flex;
|
|
380
|
+
justify-content: space-between;
|
|
381
|
+
align-items: center;
|
|
382
|
+
margin-top: 16px;
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
.checkbox-label {
|
|
386
|
+
display: flex;
|
|
387
|
+
align-items: center;
|
|
388
|
+
cursor: pointer;
|
|
389
|
+
font-size: 14px;
|
|
390
|
+
color: #374151;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
.checkbox-label input[type='checkbox'] {
|
|
394
|
+
margin-right: 8px;
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
.forgot-password {
|
|
398
|
+
color: #3b82f6;
|
|
399
|
+
text-decoration: none;
|
|
400
|
+
font-size: 14px;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
.forgot-password:hover {
|
|
404
|
+
text-decoration: underline;
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
.login-form select {
|
|
408
|
+
width: 100%;
|
|
409
|
+
padding: 12px;
|
|
410
|
+
border: 1px solid #d1d5db;
|
|
411
|
+
border-radius: 8px;
|
|
412
|
+
font-size: 14px;
|
|
413
|
+
background-color: white;
|
|
414
|
+
transition:
|
|
415
|
+
border-color 0.2s,
|
|
416
|
+
box-shadow 0.2s;
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
.login-form select:focus {
|
|
420
|
+
outline: none;
|
|
421
|
+
border-color: #3b82f6;
|
|
422
|
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
.login-form textarea {
|
|
426
|
+
width: 100%;
|
|
427
|
+
padding: 12px;
|
|
428
|
+
border: 1px solid #d1d5db;
|
|
429
|
+
border-radius: 8px;
|
|
430
|
+
font-size: 14px;
|
|
431
|
+
font-family: inherit;
|
|
432
|
+
resize: vertical;
|
|
433
|
+
min-height: 80px;
|
|
434
|
+
transition:
|
|
435
|
+
border-color 0.2s,
|
|
436
|
+
box-shadow 0.2s;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
.login-form textarea:focus {
|
|
440
|
+
outline: none;
|
|
441
|
+
border-color: #3b82f6;
|
|
442
|
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
.input-hint {
|
|
446
|
+
font-size: 12px;
|
|
447
|
+
color: #6b7280;
|
|
448
|
+
margin-top: 4px;
|
|
449
|
+
font-style: italic;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
/* Success Message Styles */
|
|
453
|
+
.success-content {
|
|
454
|
+
display: flex;
|
|
455
|
+
align-items: flex-start;
|
|
456
|
+
gap: 12px;
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
.success-icon {
|
|
460
|
+
font-size: 24px;
|
|
461
|
+
flex-shrink: 0;
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
.success-text h4 {
|
|
465
|
+
margin: 0 0 8px 0;
|
|
466
|
+
color: #10b981;
|
|
467
|
+
font-size: 16px;
|
|
468
|
+
font-weight: 600;
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
.success-text p {
|
|
472
|
+
margin: 0 0 4px 0;
|
|
473
|
+
color: #374151;
|
|
474
|
+
font-size: 14px;
|
|
475
|
+
}
|
|
476
|
+
|
|
477
|
+
.success-text small {
|
|
478
|
+
color: #6b7280;
|
|
479
|
+
font-size: 12px;
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
@keyframes successSlideIn {
|
|
483
|
+
from {
|
|
484
|
+
opacity: 0;
|
|
485
|
+
transform: translateX(100%);
|
|
486
|
+
}
|
|
487
|
+
to {
|
|
488
|
+
opacity: 1;
|
|
489
|
+
transform: translateX(0);
|
|
490
|
+
}
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
/* Metrics Grid */
|
|
494
|
+
.metrics-grid {
|
|
495
|
+
display: grid;
|
|
496
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
497
|
+
gap: 20px;
|
|
498
|
+
margin-top: 15px;
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
.metric-card {
|
|
502
|
+
background: white;
|
|
503
|
+
padding: 20px;
|
|
504
|
+
border-radius: 8px;
|
|
505
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
506
|
+
text-align: center;
|
|
507
|
+
transition: all 0.3s ease;
|
|
508
|
+
cursor: pointer;
|
|
509
|
+
border: 2px solid transparent;
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
.metric-card:hover {
|
|
513
|
+
transform: translateY(-4px);
|
|
514
|
+
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
515
|
+
border-color: #4caf50;
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
.metric-icon {
|
|
519
|
+
font-size: 24px;
|
|
520
|
+
margin-bottom: 10px;
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
.metric-value {
|
|
524
|
+
font-size: 28px;
|
|
525
|
+
font-weight: bold;
|
|
526
|
+
color: #333;
|
|
527
|
+
margin-bottom: 5px;
|
|
528
|
+
}
|
|
529
|
+
|
|
530
|
+
.metric-label {
|
|
531
|
+
color: #666;
|
|
532
|
+
font-size: 14px;
|
|
533
|
+
margin-bottom: 8px;
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
.metric-change {
|
|
537
|
+
font-size: 12px;
|
|
538
|
+
font-weight: 600;
|
|
539
|
+
padding: 4px 8px;
|
|
540
|
+
border-radius: 12px;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
.metric-change.positive {
|
|
544
|
+
background: #e8f5e8;
|
|
545
|
+
color: #2e7d32;
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
.metric-change.negative {
|
|
549
|
+
background: #ffebee;
|
|
550
|
+
color: #c62828;
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
/* Product Actions */
|
|
554
|
+
.product-actions {
|
|
555
|
+
display: flex;
|
|
556
|
+
gap: 15px;
|
|
557
|
+
flex-wrap: wrap;
|
|
558
|
+
margin-top: 15px;
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
/* Workflow Steps */
|
|
562
|
+
.workflow-steps {
|
|
563
|
+
display: flex;
|
|
564
|
+
gap: 20px;
|
|
565
|
+
margin-top: 15px;
|
|
566
|
+
overflow-x: auto;
|
|
567
|
+
padding: 10px 0;
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
.workflow-step {
|
|
571
|
+
min-width: 150px;
|
|
572
|
+
padding: 20px;
|
|
573
|
+
border-radius: 8px;
|
|
574
|
+
text-align: center;
|
|
575
|
+
transition: all 0.3s ease;
|
|
576
|
+
cursor: pointer;
|
|
577
|
+
border: 2px solid transparent;
|
|
578
|
+
}
|
|
579
|
+
|
|
580
|
+
.workflow-step:hover {
|
|
581
|
+
transform: translateY(-3px);
|
|
582
|
+
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
.workflow-step.completed {
|
|
586
|
+
background: #e8f5e8;
|
|
587
|
+
border-color: #4caf50;
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
.workflow-step.completed:hover {
|
|
591
|
+
background: #c8e6c9;
|
|
592
|
+
border-color: #2e7d32;
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
.workflow-step.active {
|
|
596
|
+
background: #fff3e0;
|
|
597
|
+
border-color: #ff9800;
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
.workflow-step.active:hover {
|
|
601
|
+
background: #ffe0b2;
|
|
602
|
+
border-color: #f57c00;
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
.workflow-step.pending {
|
|
606
|
+
background: #f5f5f5;
|
|
607
|
+
border-color: #ccc;
|
|
608
|
+
}
|
|
609
|
+
|
|
610
|
+
.workflow-step.pending:hover {
|
|
611
|
+
background: #eeeeee;
|
|
612
|
+
border-color: #999;
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
.step-number {
|
|
616
|
+
width: 30px;
|
|
617
|
+
height: 30px;
|
|
618
|
+
border-radius: 50%;
|
|
619
|
+
background: #1976d2;
|
|
620
|
+
color: white;
|
|
621
|
+
display: flex;
|
|
622
|
+
align-items: center;
|
|
623
|
+
justify-content: center;
|
|
624
|
+
margin: 0 auto 10px;
|
|
625
|
+
font-weight: bold;
|
|
626
|
+
}
|
|
627
|
+
|
|
628
|
+
.step-title {
|
|
629
|
+
font-weight: 600;
|
|
630
|
+
margin-bottom: 5px;
|
|
631
|
+
color: #333;
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
.step-status {
|
|
635
|
+
font-size: 12px;
|
|
636
|
+
color: #666;
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
/* Insights Grid */
|
|
640
|
+
.insights-grid {
|
|
641
|
+
display: grid;
|
|
642
|
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
643
|
+
gap: 20px;
|
|
644
|
+
margin-top: 15px;
|
|
645
|
+
}
|
|
646
|
+
|
|
647
|
+
.insight-card {
|
|
648
|
+
background: white;
|
|
649
|
+
padding: 20px;
|
|
650
|
+
border-radius: 8px;
|
|
651
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
652
|
+
transition: all 0.3s ease;
|
|
653
|
+
cursor: pointer;
|
|
654
|
+
border: 2px solid transparent;
|
|
655
|
+
}
|
|
656
|
+
|
|
657
|
+
.insight-card:hover {
|
|
658
|
+
transform: translateY(-3px);
|
|
659
|
+
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
660
|
+
border-color: #9c27b0;
|
|
661
|
+
}
|
|
662
|
+
|
|
663
|
+
.insight-card h3 {
|
|
664
|
+
margin: 0 0 15px 0;
|
|
665
|
+
color: #333;
|
|
666
|
+
font-size: 16px;
|
|
667
|
+
}
|
|
668
|
+
|
|
669
|
+
.segment {
|
|
670
|
+
display: flex;
|
|
671
|
+
justify-content: space-between;
|
|
672
|
+
margin-bottom: 8px;
|
|
673
|
+
padding: 5px 0;
|
|
674
|
+
border-bottom: 1px solid #eee;
|
|
675
|
+
}
|
|
676
|
+
|
|
677
|
+
.segment-label {
|
|
678
|
+
color: #666;
|
|
679
|
+
font-size: 14px;
|
|
680
|
+
}
|
|
681
|
+
|
|
682
|
+
.segment-value {
|
|
683
|
+
font-weight: 600;
|
|
684
|
+
color: #333;
|
|
685
|
+
}
|
|
686
|
+
|
|
687
|
+
.ticket-stats {
|
|
688
|
+
display: flex;
|
|
689
|
+
justify-content: space-around;
|
|
690
|
+
text-align: center;
|
|
691
|
+
}
|
|
692
|
+
|
|
693
|
+
.stat {
|
|
694
|
+
display: flex;
|
|
695
|
+
flex-direction: column;
|
|
696
|
+
gap: 5px;
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
.stat-number {
|
|
700
|
+
font-size: 24px;
|
|
701
|
+
font-weight: bold;
|
|
702
|
+
color: #1976d2;
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
.stat-label {
|
|
706
|
+
font-size: 12px;
|
|
707
|
+
color: #666;
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
/* Marketing Tools */
|
|
711
|
+
.marketing-tools {
|
|
712
|
+
display: grid;
|
|
713
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
714
|
+
gap: 20px;
|
|
715
|
+
margin-top: 15px;
|
|
716
|
+
}
|
|
717
|
+
|
|
718
|
+
.tool-card {
|
|
719
|
+
background: white;
|
|
720
|
+
padding: 20px;
|
|
721
|
+
border-radius: 8px;
|
|
722
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
723
|
+
text-align: center;
|
|
724
|
+
transition: all 0.3s ease;
|
|
725
|
+
cursor: pointer;
|
|
726
|
+
border: 2px solid transparent;
|
|
727
|
+
}
|
|
728
|
+
|
|
729
|
+
.tool-card:hover {
|
|
730
|
+
transform: translateY(-4px);
|
|
731
|
+
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
732
|
+
border-color: #ff5722;
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
.tool-icon {
|
|
736
|
+
font-size: 32px;
|
|
737
|
+
margin-bottom: 10px;
|
|
738
|
+
}
|
|
739
|
+
|
|
740
|
+
.tool-title {
|
|
741
|
+
font-weight: 600;
|
|
742
|
+
margin-bottom: 8px;
|
|
743
|
+
color: #333;
|
|
744
|
+
}
|
|
745
|
+
|
|
746
|
+
.tool-description {
|
|
747
|
+
font-size: 12px;
|
|
748
|
+
color: #666;
|
|
749
|
+
margin-bottom: 15px;
|
|
750
|
+
line-height: 1.4;
|
|
751
|
+
}
|
|
752
|
+
|
|
753
|
+
.tool-button {
|
|
754
|
+
background: #ff5722;
|
|
755
|
+
color: white;
|
|
756
|
+
border: none;
|
|
757
|
+
padding: 8px 16px;
|
|
758
|
+
border-radius: 4px;
|
|
759
|
+
cursor: pointer;
|
|
760
|
+
font-size: 12px;
|
|
761
|
+
font-weight: 500;
|
|
762
|
+
transition: all 0.3s ease;
|
|
763
|
+
}
|
|
764
|
+
|
|
765
|
+
.tool-button:hover {
|
|
766
|
+
background: #e64a19;
|
|
767
|
+
transform: translateY(-1px);
|
|
768
|
+
}
|
|
769
|
+
|
|
770
|
+
/* Mouse tracking highlight */
|
|
771
|
+
.demo-section:hover,
|
|
772
|
+
.demo-button:hover,
|
|
773
|
+
.metric-card:hover,
|
|
774
|
+
.workflow-step:hover,
|
|
775
|
+
.insight-card:hover,
|
|
776
|
+
.tool-card:hover {
|
|
777
|
+
position: relative;
|
|
778
|
+
overflow: visible;
|
|
779
|
+
}
|
|
780
|
+
|
|
781
|
+
/* Mouse cursor effects */
|
|
782
|
+
.demo-section,
|
|
783
|
+
.demo-button,
|
|
784
|
+
.metric-card,
|
|
785
|
+
.workflow-step,
|
|
786
|
+
.insight-card,
|
|
787
|
+
.tool-card {
|
|
788
|
+
cursor: pointer;
|
|
789
|
+
transition: all 0.3s ease;
|
|
790
|
+
}
|
|
791
|
+
|
|
792
|
+
.demo-section:hover,
|
|
793
|
+
.demo-button:hover,
|
|
794
|
+
.metric-card:hover,
|
|
795
|
+
.workflow-step:hover,
|
|
796
|
+
.insight-card:hover,
|
|
797
|
+
.tool-card:hover {
|
|
798
|
+
filter: brightness(1.05);
|
|
799
|
+
}
|
|
800
|
+
|
|
801
|
+
/* Responsive Design */
|
|
802
|
+
@media (max-width: 768px) {
|
|
803
|
+
.nav-demo {
|
|
804
|
+
flex-direction: column;
|
|
805
|
+
}
|
|
806
|
+
|
|
807
|
+
.metrics-grid {
|
|
808
|
+
grid-template-columns: 1fr;
|
|
809
|
+
}
|
|
810
|
+
|
|
811
|
+
.workflow-steps {
|
|
812
|
+
flex-direction: column;
|
|
813
|
+
}
|
|
814
|
+
|
|
815
|
+
.marketing-tools {
|
|
816
|
+
grid-template-columns: 1fr;
|
|
817
|
+
}
|
|
818
|
+
}
|
|
819
|
+
|
|
820
|
+
/* Step Guide Animations */
|
|
821
|
+
@keyframes spotlightFadeIn {
|
|
822
|
+
from {
|
|
823
|
+
opacity: 0;
|
|
824
|
+
}
|
|
825
|
+
to {
|
|
826
|
+
opacity: 1;
|
|
827
|
+
}
|
|
828
|
+
}
|
|
829
|
+
|
|
830
|
+
@keyframes stepPulse {
|
|
831
|
+
0% {
|
|
832
|
+
box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
|
|
833
|
+
transform: scale(1);
|
|
834
|
+
}
|
|
835
|
+
50% {
|
|
836
|
+
box-shadow: 0 0 30px rgba(59, 130, 246, 0.8);
|
|
837
|
+
transform: scale(1.02);
|
|
838
|
+
}
|
|
839
|
+
100% {
|
|
840
|
+
box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
|
|
841
|
+
transform: scale(1);
|
|
842
|
+
}
|
|
843
|
+
}
|
|
844
|
+
|
|
845
|
+
/* Tour spotlight and description animations */
|
|
846
|
+
@keyframes spotlightFadeIn {
|
|
847
|
+
from {
|
|
848
|
+
opacity: 0;
|
|
849
|
+
}
|
|
850
|
+
to {
|
|
851
|
+
opacity: 1;
|
|
852
|
+
}
|
|
853
|
+
}
|
|
854
|
+
|
|
855
|
+
@keyframes descriptionSlideIn {
|
|
856
|
+
from {
|
|
857
|
+
opacity: 0;
|
|
858
|
+
transform: translateY(20px) scale(0.95);
|
|
859
|
+
}
|
|
860
|
+
to {
|
|
861
|
+
opacity: 1;
|
|
862
|
+
transform: translateY(0) scale(1);
|
|
863
|
+
}
|
|
864
|
+
}
|
|
865
|
+
|
|
866
|
+
/* Tour highlight styles */
|
|
867
|
+
.tour-highlight {
|
|
868
|
+
position: relative;
|
|
869
|
+
z-index: 10001;
|
|
870
|
+
box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
|
|
871
|
+
border: 2px solid #3b82f6;
|
|
872
|
+
border-radius: 4px;
|
|
873
|
+
animation: tourHighlightPulse 2s infinite;
|
|
874
|
+
}
|
|
875
|
+
|
|
876
|
+
@keyframes tourHighlightPulse {
|
|
877
|
+
0% {
|
|
878
|
+
box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
|
|
879
|
+
transform: scale(1);
|
|
880
|
+
}
|
|
881
|
+
50% {
|
|
882
|
+
box-shadow: 0 0 30px rgba(59, 130, 246, 1);
|
|
883
|
+
transform: scale(1.02);
|
|
884
|
+
}
|
|
885
|
+
100% {
|
|
886
|
+
box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
|
|
887
|
+
transform: scale(1);
|
|
888
|
+
}
|
|
889
|
+
}
|
|
890
|
+
</style>
|
|
891
|
+
</head>
|
|
892
|
+
<body>
|
|
893
|
+
<div class="demo-container">
|
|
894
|
+
<h1>đ Marketrix Integration Demo</h1>
|
|
895
|
+
|
|
896
|
+
<div class="demo-content">
|
|
897
|
+
<p>
|
|
898
|
+
Hover over any element to see it highlighted, and the Marketrix AI assistant will provide
|
|
899
|
+
contextual help about that feature.
|
|
900
|
+
</p>
|
|
901
|
+
|
|
902
|
+
<div class="highlight">
|
|
903
|
+
<strong>Interactive Demo:</strong> Try hovering over different elements below - the AI
|
|
904
|
+
assistant will ask relevant questions about the highlighted areas and provide helpful
|
|
905
|
+
guidance!
|
|
906
|
+
</div>
|
|
907
|
+
|
|
908
|
+
<!-- Navigation Bar -->
|
|
909
|
+
<div class="demo-section" data-demo-area="navigation">
|
|
910
|
+
<h2>đ Dashboard Navigation</h2>
|
|
911
|
+
<div class="nav-demo">
|
|
912
|
+
<button
|
|
913
|
+
class="demo-button primary"
|
|
914
|
+
data-demo-element="dashboard"
|
|
915
|
+
data-demo-description="Main dashboard overview with key metrics and performance indicators"
|
|
916
|
+
>
|
|
917
|
+
đ Dashboard
|
|
918
|
+
</button>
|
|
919
|
+
<button
|
|
920
|
+
class="demo-button"
|
|
921
|
+
data-demo-element="products"
|
|
922
|
+
data-demo-description="Product catalog management - add, edit, and organize your inventory"
|
|
923
|
+
>
|
|
924
|
+
đĻ Products
|
|
925
|
+
</button>
|
|
926
|
+
<!-- <button class="demo-button" data-demo-element="orders" data-demo-description="Order management system to track and fulfill customer orders">
|
|
927
|
+
đ Orders
|
|
928
|
+
</button>
|
|
929
|
+
<button class="demo-button" data-demo-element="customers" data-demo-description="Customer relationship management and user profiles">
|
|
930
|
+
đĨ Customers
|
|
931
|
+
</button>
|
|
932
|
+
<button class="demo-button" data-demo-element="analytics" data-demo-description="Advanced analytics and reporting tools for business insights">
|
|
933
|
+
đ Analytics
|
|
934
|
+
</button> -->
|
|
935
|
+
<button
|
|
936
|
+
class="demo-button"
|
|
937
|
+
data-demo-element="settings"
|
|
938
|
+
data-demo-description="System configuration and account settings management"
|
|
939
|
+
>
|
|
940
|
+
âī¸ Settings
|
|
941
|
+
</button>
|
|
942
|
+
<div id="login-button-container">
|
|
943
|
+
<button
|
|
944
|
+
class="demo-button"
|
|
945
|
+
data-demo-element="login-button"
|
|
946
|
+
data-demo-description="User authentication and account access"
|
|
947
|
+
onclick="showLoginForm()"
|
|
948
|
+
id="login-button"
|
|
949
|
+
>
|
|
950
|
+
đ Login
|
|
951
|
+
</button>
|
|
952
|
+
</div>
|
|
953
|
+
</div>
|
|
954
|
+
</div>
|
|
955
|
+
|
|
956
|
+
<!-- Key Metrics Cards -->
|
|
957
|
+
<div class="demo-section" data-demo-area="metrics">
|
|
958
|
+
<h2>đ Key Performance Metrics</h2>
|
|
959
|
+
<div class="metrics-grid">
|
|
960
|
+
<div
|
|
961
|
+
class="metric-card"
|
|
962
|
+
data-demo-element="revenue"
|
|
963
|
+
data-demo-description="Total revenue generated this month with growth percentage"
|
|
964
|
+
>
|
|
965
|
+
<div class="metric-icon">đ°</div>
|
|
966
|
+
<div class="metric-value">$24,563</div>
|
|
967
|
+
<div class="metric-label">Monthly Revenue</div>
|
|
968
|
+
<div class="metric-change positive">+12.5%</div>
|
|
969
|
+
</div>
|
|
970
|
+
<div
|
|
971
|
+
class="metric-card"
|
|
972
|
+
data-demo-element="orders-count"
|
|
973
|
+
data-demo-description="Number of orders processed and their status breakdown"
|
|
974
|
+
>
|
|
975
|
+
<div class="metric-icon">đ</div>
|
|
976
|
+
<div class="metric-value">342</div>
|
|
977
|
+
<div class="metric-label">Total Orders</div>
|
|
978
|
+
<div class="metric-change positive">+8.3%</div>
|
|
979
|
+
</div>
|
|
980
|
+
<div
|
|
981
|
+
class="metric-card"
|
|
982
|
+
data-demo-element="customers-count"
|
|
983
|
+
data-demo-description="Active customer base and new registrations this period"
|
|
984
|
+
>
|
|
985
|
+
<div class="metric-icon">đ¤</div>
|
|
986
|
+
<div class="metric-value">1,247</div>
|
|
987
|
+
<div class="metric-label">Active Customers</div>
|
|
988
|
+
<div class="metric-change positive">+15.2%</div>
|
|
989
|
+
</div>
|
|
990
|
+
<div
|
|
991
|
+
class="metric-card"
|
|
992
|
+
data-demo-element="conversion"
|
|
993
|
+
data-demo-description="Conversion rate from visitors to paying customers"
|
|
994
|
+
>
|
|
995
|
+
<div class="metric-icon">đ¯</div>
|
|
996
|
+
<div class="metric-value">3.8%</div>
|
|
997
|
+
<div class="metric-label">Conversion Rate</div>
|
|
998
|
+
<div class="metric-change negative">-2.1%</div>
|
|
999
|
+
</div>
|
|
1000
|
+
</div>
|
|
1001
|
+
</div>
|
|
1002
|
+
|
|
1003
|
+
<!-- Product Management -->
|
|
1004
|
+
<div class="demo-section" data-demo-area="product-management">
|
|
1005
|
+
<h2>đĻ Product Management</h2>
|
|
1006
|
+
<div class="product-actions">
|
|
1007
|
+
<button
|
|
1008
|
+
class="demo-button success"
|
|
1009
|
+
data-demo-element="add-product"
|
|
1010
|
+
data-demo-description="Add new products to your inventory with details, pricing, and images"
|
|
1011
|
+
>
|
|
1012
|
+
â Add New Product
|
|
1013
|
+
</button>
|
|
1014
|
+
<button
|
|
1015
|
+
class="demo-button"
|
|
1016
|
+
data-demo-element="bulk-import"
|
|
1017
|
+
data-demo-description="Import multiple products at once using CSV or Excel files"
|
|
1018
|
+
>
|
|
1019
|
+
đ¤ Bulk Import
|
|
1020
|
+
</button>
|
|
1021
|
+
<button
|
|
1022
|
+
class="demo-button"
|
|
1023
|
+
data-demo-element="categories"
|
|
1024
|
+
data-demo-description="Organize products into categories and subcategories for better navigation"
|
|
1025
|
+
>
|
|
1026
|
+
đˇī¸ Manage Categories
|
|
1027
|
+
</button>
|
|
1028
|
+
<button
|
|
1029
|
+
class="demo-button warning"
|
|
1030
|
+
data-demo-element="inventory"
|
|
1031
|
+
data-demo-description="Monitor stock levels and set up low inventory alerts"
|
|
1032
|
+
>
|
|
1033
|
+
đ Inventory Status
|
|
1034
|
+
</button>
|
|
1035
|
+
</div>
|
|
1036
|
+
|
|
1037
|
+
<!-- Product Form Simulation (Hidden by default) -->
|
|
1038
|
+
<!-- <div id="product-form-simulation" class="product-form-container" style="display: none;" data-demo-element="product-form">
|
|
1039
|
+
<div class="product-form-header">
|
|
1040
|
+
<h3>â Add New Product</h3>
|
|
1041
|
+
<button class="close-form-btn" onclick="document.getElementById('product-form-simulation').style.display='none'">Ã</button>
|
|
1042
|
+
</div>
|
|
1043
|
+
<form class="product-form">
|
|
1044
|
+
<div class="form-section">
|
|
1045
|
+
<h4>Basic Information</h4>
|
|
1046
|
+
<div class="form-row">
|
|
1047
|
+
<div class="form-group">
|
|
1048
|
+
<label for="product-name">Product Name *</label>
|
|
1049
|
+
<input type="text" id="product-name" placeholder="Enter product name" required>
|
|
1050
|
+
</div>
|
|
1051
|
+
<div class="form-group">
|
|
1052
|
+
<label for="product-sku">SKU</label>
|
|
1053
|
+
<input type="text" id="product-sku" placeholder="Product SKU">
|
|
1054
|
+
</div>
|
|
1055
|
+
</div>
|
|
1056
|
+
<div class="form-group">
|
|
1057
|
+
<label for="product-description">Description</label>
|
|
1058
|
+
<textarea id="product-description" rows="3" placeholder="Enter product description"></textarea>
|
|
1059
|
+
</div>
|
|
1060
|
+
<div class="form-row">
|
|
1061
|
+
<div class="form-group">
|
|
1062
|
+
<label for="product-category">Category</label>
|
|
1063
|
+
<select id="product-category">
|
|
1064
|
+
<option value="">Select category</option>
|
|
1065
|
+
<option value="electronics">Electronics</option>
|
|
1066
|
+
<option value="clothing">Clothing</option>
|
|
1067
|
+
<option value="home">Home & Garden</option>
|
|
1068
|
+
<option value="sports">Sports</option>
|
|
1069
|
+
</select>
|
|
1070
|
+
</div>
|
|
1071
|
+
<div class="form-group">
|
|
1072
|
+
<label for="product-brand">Brand</label>
|
|
1073
|
+
<input type="text" id="product-brand" placeholder="Brand name">
|
|
1074
|
+
</div>
|
|
1075
|
+
</div>
|
|
1076
|
+
</div>
|
|
1077
|
+
|
|
1078
|
+
<div class="form-section">
|
|
1079
|
+
<h4>Pricing & Inventory</h4>
|
|
1080
|
+
<div class="form-row">
|
|
1081
|
+
<div class="form-group">
|
|
1082
|
+
<label for="product-price">Price *</label>
|
|
1083
|
+
<input type="number" id="product-price" step="0.01" placeholder="0.00" required>
|
|
1084
|
+
</div>
|
|
1085
|
+
<div class="form-group">
|
|
1086
|
+
<label for="product-sale-price">Sale Price</label>
|
|
1087
|
+
<input type="number" id="product-sale-price" step="0.01" placeholder="0.00">
|
|
1088
|
+
</div>
|
|
1089
|
+
</div>
|
|
1090
|
+
<div class="form-row">
|
|
1091
|
+
<div class="form-group">
|
|
1092
|
+
<label for="product-stock">Stock Quantity</label>
|
|
1093
|
+
<input type="number" id="product-stock" placeholder="0">
|
|
1094
|
+
</div>
|
|
1095
|
+
<div class="form-group">
|
|
1096
|
+
<label for="product-weight">Weight (kg)</label>
|
|
1097
|
+
<input type="number" id="product-weight" step="0.1" placeholder="0.0">
|
|
1098
|
+
</div>
|
|
1099
|
+
</div>
|
|
1100
|
+
</div>
|
|
1101
|
+
|
|
1102
|
+
<div class="form-section">
|
|
1103
|
+
<h4>Media & SEO</h4>
|
|
1104
|
+
<div class="form-group">
|
|
1105
|
+
<label for="product-images">Product Images</label>
|
|
1106
|
+
<div class="file-upload-area">
|
|
1107
|
+
<input type="file" id="product-images" multiple accept="image/*">
|
|
1108
|
+
<div class="file-upload-text">
|
|
1109
|
+
<span>đˇ</span>
|
|
1110
|
+
<p>Click to upload images or drag and drop</p>
|
|
1111
|
+
<small>PNG, JPG up to 10MB each</small>
|
|
1112
|
+
</div>
|
|
1113
|
+
</div>
|
|
1114
|
+
</div>
|
|
1115
|
+
<div class="form-row">
|
|
1116
|
+
<div class="form-group">
|
|
1117
|
+
<label for="product-meta-title">Meta Title</label>
|
|
1118
|
+
<input type="text" id="product-meta-title" placeholder="SEO title">
|
|
1119
|
+
</div>
|
|
1120
|
+
<div class="form-group">
|
|
1121
|
+
<label for="product-slug">URL Slug</label>
|
|
1122
|
+
<input type="text" id="product-slug" placeholder="product-url-slug">
|
|
1123
|
+
</div>
|
|
1124
|
+
</div>
|
|
1125
|
+
<div class="form-group">
|
|
1126
|
+
<label for="product-meta-description">Meta Description</label>
|
|
1127
|
+
<textarea id="product-meta-description" rows="2" placeholder="SEO description"></textarea>
|
|
1128
|
+
</div>
|
|
1129
|
+
</div>
|
|
1130
|
+
|
|
1131
|
+
<div class="form-actions">
|
|
1132
|
+
<button type="button" class="btn-secondary" onclick="document.getElementById('product-form-simulation').style.display='none'">Cancel</button>
|
|
1133
|
+
<button type="submit" class="btn-primary">Save Product</button>
|
|
1134
|
+
</div>
|
|
1135
|
+
</form>
|
|
1136
|
+
</div> -->
|
|
1137
|
+
|
|
1138
|
+
<!-- Login Form Simulation (Visible for tour testing) -->
|
|
1139
|
+
<div
|
|
1140
|
+
class="login-form-container"
|
|
1141
|
+
id="login-form-simulation"
|
|
1142
|
+
data-demo-element="login-form"
|
|
1143
|
+
style="display: none;"
|
|
1144
|
+
>
|
|
1145
|
+
<div class="login-form-header">
|
|
1146
|
+
<h3>đ User Login</h3>
|
|
1147
|
+
<button
|
|
1148
|
+
class="close-form-btn"
|
|
1149
|
+
onclick="document.getElementById('login-form-simulation').style.display='none'"
|
|
1150
|
+
>
|
|
1151
|
+
Ã
|
|
1152
|
+
</button>
|
|
1153
|
+
</div>
|
|
1154
|
+
<form class="login-form" onsubmit="handleLoginSubmit(event)">
|
|
1155
|
+
<div class="form-section">
|
|
1156
|
+
<h4>Account Credentials</h4>
|
|
1157
|
+
<div class="form-group">
|
|
1158
|
+
<label for="login-email">Username/Email *</label>
|
|
1159
|
+
<input
|
|
1160
|
+
type="email"
|
|
1161
|
+
id="login-email"
|
|
1162
|
+
data-demo-element="login-email"
|
|
1163
|
+
placeholder="Enter your username or email (e.g., john.doe@example.com)"
|
|
1164
|
+
required
|
|
1165
|
+
/>
|
|
1166
|
+
<div class="input-hint">Enter your registered email address or username</div>
|
|
1167
|
+
</div>
|
|
1168
|
+
<div class="form-group">
|
|
1169
|
+
<label for="login-password">Password *</label>
|
|
1170
|
+
<input
|
|
1171
|
+
type="password"
|
|
1172
|
+
id="login-password"
|
|
1173
|
+
data-demo-element="login-password"
|
|
1174
|
+
placeholder="Enter your password"
|
|
1175
|
+
required
|
|
1176
|
+
/>
|
|
1177
|
+
<div class="input-hint">Password should be at least 8 characters long</div>
|
|
1178
|
+
</div>
|
|
1179
|
+
<div class="form-options">
|
|
1180
|
+
<label class="checkbox-label">
|
|
1181
|
+
<input type="checkbox" id="remember-me" />
|
|
1182
|
+
<span class="checkmark"></span>
|
|
1183
|
+
Remember me
|
|
1184
|
+
</label>
|
|
1185
|
+
<a href="#" class="forgot-password">Forgot password?</a>
|
|
1186
|
+
</div>
|
|
1187
|
+
</div>
|
|
1188
|
+
<div class="form-actions">
|
|
1189
|
+
<button
|
|
1190
|
+
type="button"
|
|
1191
|
+
class="btn-secondary"
|
|
1192
|
+
onclick="document.getElementById('login-form-simulation').style.display='none'"
|
|
1193
|
+
>
|
|
1194
|
+
Cancel
|
|
1195
|
+
</button>
|
|
1196
|
+
<button type="submit" class="btn-primary" data-demo-element="login-submit">
|
|
1197
|
+
Sign In
|
|
1198
|
+
</button>
|
|
1199
|
+
</div>
|
|
1200
|
+
</form>
|
|
1201
|
+
</div>
|
|
1202
|
+
</div>
|
|
1203
|
+
|
|
1204
|
+
<!-- Order Processing -->
|
|
1205
|
+
<div class="demo-section" data-demo-area="order-processing">
|
|
1206
|
+
<h2>đ Order Processing Workflow</h2>
|
|
1207
|
+
<div class="workflow-steps">
|
|
1208
|
+
<div
|
|
1209
|
+
class="workflow-step completed"
|
|
1210
|
+
data-demo-element="order-received"
|
|
1211
|
+
data-demo-description="New orders received from customers through various channels"
|
|
1212
|
+
>
|
|
1213
|
+
<div class="step-number">1</div>
|
|
1214
|
+
<div class="step-title">Order Received</div>
|
|
1215
|
+
<div class="step-status">â
Completed</div>
|
|
1216
|
+
</div>
|
|
1217
|
+
<div
|
|
1218
|
+
class="workflow-step active"
|
|
1219
|
+
data-demo-element="payment-processing"
|
|
1220
|
+
data-demo-description="Payment verification and processing through secure gateways"
|
|
1221
|
+
>
|
|
1222
|
+
<div class="step-number">2</div>
|
|
1223
|
+
<div class="step-title">Payment Processing</div>
|
|
1224
|
+
<div class="step-status">đ In Progress</div>
|
|
1225
|
+
</div>
|
|
1226
|
+
<div
|
|
1227
|
+
class="workflow-step pending"
|
|
1228
|
+
data-demo-element="fulfillment"
|
|
1229
|
+
data-demo-description="Order fulfillment including picking, packing, and shipping"
|
|
1230
|
+
>
|
|
1231
|
+
<div class="step-number">3</div>
|
|
1232
|
+
<div class="step-title">Fulfillment</div>
|
|
1233
|
+
<div class="step-status">âŗ Pending</div>
|
|
1234
|
+
</div>
|
|
1235
|
+
<div
|
|
1236
|
+
class="workflow-step pending"
|
|
1237
|
+
data-demo-element="delivery"
|
|
1238
|
+
data-demo-description="Shipping and delivery tracking with customer notifications"
|
|
1239
|
+
>
|
|
1240
|
+
<div class="step-number">4</div>
|
|
1241
|
+
<div class="step-title">Delivery</div>
|
|
1242
|
+
<div class="step-status">âŗ Pending</div>
|
|
1243
|
+
</div>
|
|
1244
|
+
</div>
|
|
1245
|
+
</div>
|
|
1246
|
+
|
|
1247
|
+
<!-- Customer Insights -->
|
|
1248
|
+
<div class="demo-section" data-demo-area="customer-insights">
|
|
1249
|
+
<h2>đĨ Customer Insights</h2>
|
|
1250
|
+
<div class="insights-grid">
|
|
1251
|
+
<div
|
|
1252
|
+
class="insight-card"
|
|
1253
|
+
data-demo-element="customer-segments"
|
|
1254
|
+
data-demo-description="Customer segmentation based on behavior, purchase history, and demographics"
|
|
1255
|
+
>
|
|
1256
|
+
<h3>Customer Segments</h3>
|
|
1257
|
+
<div class="segment">
|
|
1258
|
+
<span class="segment-label">VIP Customers</span>
|
|
1259
|
+
<span class="segment-value">23%</span>
|
|
1260
|
+
</div>
|
|
1261
|
+
<div class="segment">
|
|
1262
|
+
<span class="segment-label">Regular Buyers</span>
|
|
1263
|
+
<span class="segment-value">45%</span>
|
|
1264
|
+
</div>
|
|
1265
|
+
<div class="segment">
|
|
1266
|
+
<span class="segment-label">New Customers</span>
|
|
1267
|
+
<span class="segment-value">32%</span>
|
|
1268
|
+
</div>
|
|
1269
|
+
</div>
|
|
1270
|
+
<div
|
|
1271
|
+
class="insight-card"
|
|
1272
|
+
data-demo-element="support-tickets"
|
|
1273
|
+
data-demo-description="Customer support ticket management and resolution tracking"
|
|
1274
|
+
>
|
|
1275
|
+
<h3>Support Tickets</h3>
|
|
1276
|
+
<div class="ticket-stats">
|
|
1277
|
+
<div class="stat">
|
|
1278
|
+
<span class="stat-number">12</span>
|
|
1279
|
+
<span class="stat-label">Open</span>
|
|
1280
|
+
</div>
|
|
1281
|
+
<div class="stat">
|
|
1282
|
+
<span class="stat-number">45</span>
|
|
1283
|
+
<span class="stat-label">Resolved</span>
|
|
1284
|
+
</div>
|
|
1285
|
+
<div class="stat">
|
|
1286
|
+
<span class="stat-number">2.3h</span>
|
|
1287
|
+
<span class="stat-label">Avg Response</span>
|
|
1288
|
+
</div>
|
|
1289
|
+
</div>
|
|
1290
|
+
</div>
|
|
1291
|
+
</div>
|
|
1292
|
+
</div>
|
|
1293
|
+
|
|
1294
|
+
<!-- Marketing Tools -->
|
|
1295
|
+
<div class="demo-section" data-demo-area="marketing">
|
|
1296
|
+
<h2>đĸ Marketing & Promotions</h2>
|
|
1297
|
+
<div class="marketing-tools">
|
|
1298
|
+
<div
|
|
1299
|
+
class="tool-card"
|
|
1300
|
+
data-demo-element="email-campaigns"
|
|
1301
|
+
data-demo-description="Create and manage email marketing campaigns with templates and automation"
|
|
1302
|
+
>
|
|
1303
|
+
<div class="tool-icon">đ§</div>
|
|
1304
|
+
<div class="tool-title">Email Campaigns</div>
|
|
1305
|
+
<div class="tool-description">Send targeted emails to customer segments</div>
|
|
1306
|
+
<button class="tool-button">Launch Campaign</button>
|
|
1307
|
+
</div>
|
|
1308
|
+
<div
|
|
1309
|
+
class="tool-card"
|
|
1310
|
+
data-demo-element="discount-codes"
|
|
1311
|
+
data-demo-description="Generate and manage discount codes and promotional offers"
|
|
1312
|
+
>
|
|
1313
|
+
<div class="tool-icon">đĢ</div>
|
|
1314
|
+
<div class="tool-title">Discount Codes</div>
|
|
1315
|
+
<div class="tool-description">Create promotional codes and offers</div>
|
|
1316
|
+
<button class="tool-button">Create Code</button>
|
|
1317
|
+
</div>
|
|
1318
|
+
<div
|
|
1319
|
+
class="tool-card"
|
|
1320
|
+
data-demo-element="social-media"
|
|
1321
|
+
data-demo-description="Manage social media presence and integrate with marketing campaigns"
|
|
1322
|
+
>
|
|
1323
|
+
<div class="tool-icon">đą</div>
|
|
1324
|
+
<div class="tool-title">Social Media</div>
|
|
1325
|
+
<div class="tool-description">Connect with customers on social platforms</div>
|
|
1326
|
+
<button class="tool-button">Manage Posts</button>
|
|
1327
|
+
</div>
|
|
1328
|
+
</div>
|
|
1329
|
+
</div>
|
|
1330
|
+
|
|
1331
|
+
<div class="highlight">
|
|
1332
|
+
<strong>Try It Out:</strong> Hover over any button, card, or section above to see the
|
|
1333
|
+
Marketrix AI assistant provide contextual help and ask relevant questions about that
|
|
1334
|
+
feature!
|
|
1335
|
+
</div>
|
|
1336
|
+
|
|
1337
|
+
<!-- Test iPhone Notifications -->
|
|
1338
|
+
<div class="demo-section" data-demo-area="notification-test">
|
|
1339
|
+
<h2>đą iPhone-Style Notifications</h2>
|
|
1340
|
+
<p>Test the iPhone-style notification system that appears in the center of the screen:</p>
|
|
1341
|
+
<div class="nav-demo">
|
|
1342
|
+
<button
|
|
1343
|
+
class="demo-button success"
|
|
1344
|
+
onclick="showIPhoneNotification('Success! đ', 'This is a success notification with iPhone styling!', 'success')"
|
|
1345
|
+
>
|
|
1346
|
+
â
Test Success
|
|
1347
|
+
</button>
|
|
1348
|
+
<button
|
|
1349
|
+
class="demo-button"
|
|
1350
|
+
onclick="showIPhoneNotification('Info âšī¸', 'This is an informational notification.', 'info')"
|
|
1351
|
+
>
|
|
1352
|
+
âšī¸ Test Info
|
|
1353
|
+
</button>
|
|
1354
|
+
<button
|
|
1355
|
+
class="demo-button warning"
|
|
1356
|
+
onclick="showIPhoneNotification('Warning â ī¸', 'This is a warning notification.', 'warning')"
|
|
1357
|
+
>
|
|
1358
|
+
â ī¸ Test Warning
|
|
1359
|
+
</button>
|
|
1360
|
+
<button
|
|
1361
|
+
class="demo-button"
|
|
1362
|
+
onclick="showIPhoneNotification('Error â', 'This is an error notification.', 'error')"
|
|
1363
|
+
>
|
|
1364
|
+
â Test Error
|
|
1365
|
+
</button>
|
|
1366
|
+
<button class="demo-button primary" onclick="testIPhoneNotifications()">
|
|
1367
|
+
đŦ Test All Types
|
|
1368
|
+
</button>
|
|
1369
|
+
</div>
|
|
1370
|
+
</div>
|
|
1371
|
+
|
|
1372
|
+
|
|
1373
|
+
<!-- Test Responsive Spotlight -->
|
|
1374
|
+
<div class="demo-section" data-demo-area="spotlight-test">
|
|
1375
|
+
<h2>đ¯ Responsive Spotlight Test</h2>
|
|
1376
|
+
<p>Test the responsive spotlight system that follows elements when the screen resizes:</p>
|
|
1377
|
+
<div class="nav-demo">
|
|
1378
|
+
<button
|
|
1379
|
+
class="demo-button primary"
|
|
1380
|
+
id="test-spotlight-btn"
|
|
1381
|
+
data-demo-element="test-spotlight"
|
|
1382
|
+
data-demo-description="This button will be highlighted with a responsive spotlight that follows it when you resize the screen"
|
|
1383
|
+
>
|
|
1384
|
+
đ¯ Test Responsive Spotlight
|
|
1385
|
+
</button>
|
|
1386
|
+
<button class="demo-button success" onclick="testResponsiveSpotlight()">
|
|
1387
|
+
đ Start Spotlight Demo
|
|
1388
|
+
</button>
|
|
1389
|
+
<button class="demo-button warning" onclick="stopSpotlightDemo()">âšī¸ Stop Demo</button>
|
|
1390
|
+
<button class="demo-button" onclick="updateTextPosition()">
|
|
1391
|
+
đ Update Text Position
|
|
1392
|
+
</button>
|
|
1393
|
+
</div>
|
|
1394
|
+
<div class="highlight">
|
|
1395
|
+
<strong>Instructions:</strong> Click "Start Spotlight Demo" then try resizing your
|
|
1396
|
+
browser window or scrolling. The spotlight and border should follow the highlighted
|
|
1397
|
+
element smoothly!
|
|
1398
|
+
</div>
|
|
1399
|
+
</div>
|
|
1400
|
+
</div>
|
|
1401
|
+
</div>
|
|
1402
|
+
|
|
1403
|
+
<!-- Login Demo Scripts -->
|
|
1404
|
+
<script>
|
|
1405
|
+
function showLoginForm() {
|
|
1406
|
+
const loginForm = document.getElementById('login-form-simulation');
|
|
1407
|
+
if (loginForm) {
|
|
1408
|
+
loginForm.style.display = 'block';
|
|
1409
|
+
}
|
|
1410
|
+
}
|
|
1411
|
+
|
|
1412
|
+
function handleLoginSubmit(event) {
|
|
1413
|
+
event.preventDefault();
|
|
1414
|
+
const emailInput = document.getElementById('login-email');
|
|
1415
|
+
const email = emailInput ? emailInput.value : '';
|
|
1416
|
+
|
|
1417
|
+
// Close the modal
|
|
1418
|
+
const loginForm = document.getElementById('login-form-simulation');
|
|
1419
|
+
if (loginForm) {
|
|
1420
|
+
loginForm.style.display = 'none';
|
|
1421
|
+
}
|
|
1422
|
+
|
|
1423
|
+
// Show logged in message
|
|
1424
|
+
const loginButtonContainer = document.getElementById('login-button-container');
|
|
1425
|
+
const loginButton = document.getElementById('login-button');
|
|
1426
|
+
|
|
1427
|
+
if (loginButtonContainer && loginButton) {
|
|
1428
|
+
loginButton.style.display = 'none';
|
|
1429
|
+
const loggedInMessage = document.createElement('div');
|
|
1430
|
+
loggedInMessage.className = 'demo-button';
|
|
1431
|
+
loggedInMessage.style.background = '#2e7d32';
|
|
1432
|
+
loggedInMessage.style.color = 'white';
|
|
1433
|
+
loggedInMessage.textContent = `â Logged in as ${email || 'user'}`;
|
|
1434
|
+
loggedInMessage.id = 'logged-in-message';
|
|
1435
|
+
loginButtonContainer.appendChild(loggedInMessage);
|
|
1436
|
+
}
|
|
1437
|
+
|
|
1438
|
+
// Reset form
|
|
1439
|
+
if (event.target) {
|
|
1440
|
+
event.target.reset();
|
|
1441
|
+
}
|
|
1442
|
+
}
|
|
1443
|
+
</script>
|
|
1444
|
+
|
|
1445
|
+
<!-- Widget Script (Demo Mode) -->
|
|
1446
|
+
<script type="module">
|
|
1447
|
+
const params = new URLSearchParams(window.location.search);
|
|
1448
|
+
|
|
1449
|
+
const script = Object.assign(document.createElement('script'), {
|
|
1450
|
+
type: 'module',
|
|
1451
|
+
src: './meet.js'
|
|
1452
|
+
});
|
|
1453
|
+
|
|
1454
|
+
script.setAttribute('mtx-id', params.get('mtx-id') ?? '');
|
|
1455
|
+
script.setAttribute('mtx-key', params.get('mtx-key') ?? '');
|
|
1456
|
+
script.setAttribute('mtx-app', params.get('mtx-app') ?? '1');
|
|
1457
|
+
script.setAttribute('mtx-agent', params.get('mtx-agent') ?? '1');
|
|
1458
|
+
script.setAttribute('mtx-api-host', params.get('mtx-api-host') ?? 'https://api.marketrix.co');
|
|
1459
|
+
script.setAttribute('mtx-ai-host', params.get('mtx-ai-host') ?? 'https://agent.marketrix.co');
|
|
1460
|
+
|
|
1461
|
+
document.body.appendChild(script);
|
|
1462
|
+
</script>
|
|
1463
|
+
</body>
|
|
1464
|
+
</html>
|