Hugging Face's logo

Spaces:
vikasrij
/
askanalytics2
Running

App Files Community
vikasrij commited on
Commit
fd44b34
·
verified ·
1 Parent(s): 3042949

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1344 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Askanalytics2
3
- emoji: 📚
4
- colorFrom: gray
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: askanalytics2
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1344 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Data Insights Explorer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
12
+
13
+ body {
14
+ font-family: 'Poppins', sans-serif;
15
+ background-color: #f5f7fa;
16
+ color: #2d3748;
17
+ }
18
+
19
+ .data-window {
20
+ transition: all 0.3s ease;
21
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
22
+ }
23
+
24
+ .data-window:hover {
25
+ transform: translateY(-2px);
26
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
27
+ }
28
+
29
+ .prompt-card {
30
+ transition: all 0.2s ease;
31
+ }
32
+
33
+ .prompt-card:hover {
34
+ transform: scale(1.03);
35
+ }
36
+
37
+ .gradient-bg {
38
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
39
+ }
40
+
41
+ .window-tabs {
42
+ border-bottom: 2px solid #e2e8f0;
43
+ }
44
+
45
+ .window-tab {
46
+ transition: all 0.2s ease;
47
+ }
48
+
49
+ .window-tab.active {
50
+ border-bottom: 3px solid #667eea;
51
+ color: #667eea;
52
+ font-weight: 500;
53
+ }
54
+
55
+ .window-tab:hover:not(.active) {
56
+ border-bottom: 3px solid #a0aec0;
57
+ color: #4a5568;
58
+ }
59
+
60
+ .typewriter {
61
+ overflow: hidden;
62
+ border-right: 2px solid #667eea;
63
+ white-space: nowrap;
64
+ margin: 0 auto;
65
+ letter-spacing: 1px;
66
+ animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
67
+ }
68
+
69
+ @keyframes typing {
70
+ from { width: 0 }
71
+ to { width: 100% }
72
+ }
73
+
74
+ @keyframes blink-caret {
75
+ from, to { border-color: transparent }
76
+ 50% { border-color: #667eea }
77
+ }
78
+
79
+ .pulse {
80
+ animation: pulse 2s infinite;
81
+ }
82
+
83
+ @keyframes pulse {
84
+ 0% { transform: scale(1); }
85
+ 50% { transform: scale(1.05); }
86
+ 100% { transform: scale(1); }
87
+ }
88
+
89
+ .slide-fade-enter-active {
90
+ transition: all 0.3s ease-out;
91
+ }
92
+
93
+ .slide-fade-leave-active {
94
+ transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
95
+ }
96
+
97
+ .slide-fade-enter-from,
98
+ .slide-fade-leave-to {
99
+ transform: translateX(20px);
100
+ opacity: 0;
101
+ }
102
+
103
+ .modal-overlay {
104
+ background-color: rgba(0, 0, 0, 0.5);
105
+ }
106
+
107
+ .modal-container {
108
+ max-height: 90vh;
109
+ }
110
+ </style>
111
+ </head>
112
+ <body class="min-h-screen">
113
+ <div class="flex flex-col h-screen">
114
+ <!-- Header -->
115
+ <header class="gradient-bg text-white p-4 shadow-lg">
116
+ <div class="container mx-auto flex justify-between items-center">
117
+ <div class="flex items-center space-x-3">
118
+ <i class="fas fa-chart-network text-3xl"></i>
119
+ <h1 class="text-2xl font-bold">Data Insights Explorer</h1>
120
+ </div>
121
+ <div class="flex items-center space-x-4">
122
+ <div class="relative group">
123
+ <button id="clientSwitcher" class="flex items-center space-x-2 bg-white/20 px-3 py-1 rounded-full hover:bg-white/30 transition">
124
+ <i class="fas fa-building"></i>
125
+ <span id="currentClientName">Select Client</span>
126
+ <i class="fas fa-chevron-down text-xs"></i>
127
+ </button>
128
+ <div id="clientDropdown" class="hidden absolute right-0 mt-2 w-64 bg-white rounded-md shadow-lg z-50">
129
+ <div class="p-3 border-b">
130
+ <div class="flex justify-between items-center">
131
+ <h3 class="font-medium text-gray-700">Clients & Properties</h3>
132
+ <button onclick="showAddClientModal()" class="text-indigo-600 hover:text-indigo-800 text-sm flex items-center">
133
+ <i class="fas fa-plus mr-1"></i> Add
134
+ </button>
135
+ </div>
136
+ </div>
137
+ <div id="clientList" class="max-h-60 overflow-y-auto">
138
+ <!-- Client list will be populated here -->
139
+ </div>
140
+ </div>
141
+ </div>
142
+ <div class="flex items-center space-x-2 bg-white/20 px-3 py-1 rounded-full">
143
+ <i class="fas fa-user-circle"></i>
144
+ <span>Account</span>
145
+ </div>
146
+ <button class="bg-white text-indigo-700 px-4 py-2 rounded-full font-medium hover:bg-indigo-50 transition">
147
+ <i class="fas fa-sign-out-alt mr-2"></i>Logout
148
+ </button>
149
+ </div>
150
+ </div>
151
+ </header>
152
+
153
+ <!-- Main Content -->
154
+ <main class="flex-1 container mx-auto p-4 grid grid-cols-1 lg:grid-cols-4 gap-6">
155
+ <!-- Left Sidebar - Quick Prompts -->
156
+ <div class="lg:col-span-1 space-y-4">
157
+ <div class="bg-white rounded-xl p-4 shadow-md">
158
+ <h2 class="text-lg font-semibold mb-3 text-indigo-700 flex items-center">
159
+ <i class="fas fa-bolt mr-2"></i> Quick Insights
160
+ </h2>
161
+ <p class="text-sm text-gray-600 mb-4">Click any prompt to get instant analysis</p>
162
+
163
+ <div class="grid grid-cols-1 gap-3">
164
+ <div class="prompt-card bg-indigo-50 p-3 rounded-lg cursor-pointer hover:bg-indigo-100" onclick="runPrompt('summary')">
165
+ <div class="flex items-center">
166
+ <div class="bg-indigo-100 p-2 rounded-full mr-3">
167
+ <i class="fas fa-chart-pie text-indigo-600"></i>
168
+ </div>
169
+ <div>
170
+ <h3 class="font-medium">Performance Summary</h3>
171
+ <p class="text-xs text-gray-600">Get an overview of key metrics</p>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="prompt-card bg-green-50 p-3 rounded-lg cursor-pointer hover:bg-green-100" onclick="runPrompt('traffic')">
177
+ <div class="flex items-center">
178
+ <div class="bg-green-100 p-2 rounded-full mr-3">
179
+ <i class="fas fa-users text-green-600"></i>
180
+ </div>
181
+ <div>
182
+ <h3 class="font-medium">Traffic Sources</h3>
183
+ <p class="text-xs text-gray-600">Analyze where visitors come from</p>
184
+ </div>
185
+ </div>
186
+ </div>
187
+
188
+ <div class="prompt-card bg-yellow-50 p-3 rounded-lg cursor-pointer hover:bg-yellow-100" onclick="runPrompt('keywords')">
189
+ <div class="flex items-center">
190
+ <div class="bg-yellow-100 p-2 rounded-full mr-3">
191
+ <i class="fas fa-key text-yellow-600"></i>
192
+ </div>
193
+ <div>
194
+ <h3 class="font-medium">Top Keywords</h3>
195
+ <p class="text-xs text-gray-600">See what's driving search traffic</p>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <div class="prompt-card bg-red-50 p-3 rounded-lg cursor-pointer hover:bg-red-100" onclick="runPrompt('issues')">
201
+ <div class="flex items-center">
202
+ <div class="bg-red-100 p-2 rounded-full mr-3">
203
+ <i class="fas fa-exclamation-triangle text-red-600"></i>
204
+ </div>
205
+ <div>
206
+ <h3 class="font-medium">Critical Issues</h3>
207
+ <p class="text-xs text-gray-600">Identify urgent problems</p>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <div class="prompt-card bg-purple-50 p-3 rounded-lg cursor-pointer hover:bg-purple-100" onclick="runPrompt('comparison')">
213
+ <div class="flex items-center">
214
+ <div class="bg-purple-100 p-2 rounded-full mr-3">
215
+ <i class="fas fa-balance-scale text-purple-600"></i>
216
+ </div>
217
+ <div>
218
+ <h3 class="font-medium">Period Comparison</h3>
219
+ <p class="text-xs text-gray-600">Compare performance over time</p>
220
+ </div>
221
+ </div>
222
+ </div>
223
+
224
+ <div class="prompt-card bg-blue-50 p-3 rounded-lg cursor-pointer hover:bg-blue-100" onclick="runPrompt('recommendations')">
225
+ <div class="flex items-center">
226
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
227
+ <i class="fas fa-lightbulb text-blue-600"></i>
228
+ </div>
229
+ <div>
230
+ <h3 class="font-medium">Optimization Tips</h3>
231
+ <p class="text-xs text-gray-600">Get actionable recommendations</p>
232
+ </div>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <div class="bg-white rounded-xl p-4 shadow-md">
239
+ <h2 class="text-lg font-semibold mb-3 text-indigo-700 flex items-center">
240
+ <i class="fas fa-history mr-2"></i> Recent Queries
241
+ </h2>
242
+ <div class="space-y-2">
243
+ <div class="text-sm p-2 hover:bg-gray-50 rounded cursor-pointer" onclick="runPrompt('traffic last week')">
244
+ <div class="flex justify-between">
245
+ <span>Traffic last week</span>
246
+ <span class="text-gray-400">2h ago</span>
247
+ </div>
248
+ </div>
249
+ <div class="text-sm p-2 hover:bg-gray-50 rounded cursor-pointer" onclick="runPrompt('top pages')">
250
+ <div class="flex justify-between">
251
+ <span>Top performing pages</span>
252
+ <span class="text-gray-400">1d ago</span>
253
+ </div>
254
+ </div>
255
+ <div class="text-sm p-2 hover:bg-gray-50 rounded cursor-pointer" onclick="runPrompt('bounce rate')">
256
+ <div class="flex justify-between">
257
+ <span>Bounce rate analysis</span>
258
+ <span class="text-gray-400">3d ago</span>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <!-- Main Content Area -->
266
+ <div class="lg:col-span-3 space-y-6">
267
+ <!-- Client Info Bar -->
268
+ <div id="clientInfoBar" class="bg-white rounded-xl p-4 shadow-md hidden">
269
+ <div class="flex justify-between items-center">
270
+ <div>
271
+ <h2 class="font-bold text-lg" id="activeClientTitle">Client Name</h2>
272
+ <p class="text-sm text-gray-600" id="activeClientProperties">Properties: 0</p>
273
+ </div>
274
+ <div class="flex space-x-3">
275
+ <button onclick="showEditClientModal()" class="text-indigo-600 hover:text-indigo-800 flex items-center text-sm">
276
+ <i class="fas fa-edit mr-1"></i> Edit
277
+ </button>
278
+ <button onclick="showAddPropertyModal()" class="bg-indigo-600 text-white px-3 py-1 rounded-full text-sm hover:bg-indigo-700 flex items-center">
279
+ <i class="fas fa-plus mr-1"></i> Add Property
280
+ </button>
281
+ </div>
282
+ </div>
283
+ </div>
284
+
285
+ <!-- Query Input -->
286
+ <div class="bg-white rounded-xl p-4 shadow-md">
287
+ <div class="flex items-center space-x-3">
288
+ <div class="flex-1 relative">
289
+ <input type="text" id="queryInput" placeholder="Ask about your analytics data (e.g. 'Show traffic trends for the past month')"
290
+ class="w-full p-4 pr-12 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
291
+ <button onclick="submitQuery()" class="absolute right-3 top-1/2 transform -translate-y-1/2 bg-indigo-600 text-white p-2 rounded-full hover:bg-indigo-700 transition">
292
+ <i class="fas fa-paper-plane"></i>
293
+ </button>
294
+ </div>
295
+ <button onclick="voiceInput()" class="bg-indigo-100 text-indigo-700 p-3 rounded-full hover:bg-indigo-200 transition">
296
+ <i class="fas fa-microphone"></i>
297
+ </button>
298
+ </div>
299
+ <div class="mt-2 flex flex-wrap gap-2">
300
+ <span class="text-xs text-gray-500">Try:</span>
301
+ <span class="text-xs text-indigo-600 hover:underline cursor-pointer" onclick="runPrompt('compare mobile vs desktop conversions')">compare mobile vs desktop conversions</span>
302
+ <span class="text-xs text-indigo-600 hover:underline cursor-pointer" onclick="runPrompt('show top exit pages')">show top exit pages</span>
303
+ <span class="text-xs text-indigo-600 hover:underline cursor-pointer" onclick="runPrompt('analyze click-through rates')">analyze click-through rates</span>
304
+ </div>
305
+ </div>
306
+
307
+ <!-- Data Windows Container -->
308
+ <div id="windowsContainer" class="space-y-6">
309
+ <!-- Welcome Window -->
310
+ <div class="data-window bg-white rounded-xl overflow-hidden">
311
+ <div class="window-tabs flex border-b border-gray-200">
312
+ <div class="window-tab active px-4 py-3 font-medium">Welcome</div>
313
+ </div>
314
+ <div class="p-6">
315
+ <div class="flex items-center mb-6">
316
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
317
+ <i class="fas fa-robot text-indigo-600 text-2xl"></i>
318
+ </div>
319
+ <div>
320
+ <h2 class="text-xl font-bold text-gray-800">Hello there! 👋</h2>
321
+ <p class="text-gray-600">I'm your Data Insights Assistant, ready to help you explore your Google Analytics and Search Console data.</p>
322
+ </div>
323
+ </div>
324
+
325
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
326
+ <div class="bg-indigo-50 p-4 rounded-lg">
327
+ <h3 class="font-semibold text-indigo-700 mb-2 flex items-center">
328
+ <i class="fas fa-question-circle mr-2"></i> How to use
329
+ </h3>
330
+ <ul class="text-sm space-y-2 text-gray-700">
331
+ <li class="flex items-start">
332
+ <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
333
+ <span>Click any quick insight button to get started</span>
334
+ </li>
335
+ <li class="flex items-start">
336
+ <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
337
+ <span>Type your question in natural language</span>
338
+ </li>
339
+ <li class="flex items-start">
340
+ <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
341
+ <span>Explore multiple data views simultaneously</span>
342
+ </li>
343
+ </ul>
344
+ </div>
345
+
346
+ <div class="bg-green-50 p-4 rounded-lg">
347
+ <h3 class="font-semibold text-green-700 mb-2 flex items-center">
348
+ <i class="fas fa-lightbulb mr-2"></i> Try asking
349
+ </h3>
350
+ <ul class="text-sm space-y-2 text-gray-700">
351
+ <li class="flex items-start">
352
+ <i class="fas fa-arrow-right text-green-500 mt-1 mr-2"></i>
353
+ <span class="cursor-pointer hover:underline" onclick="runPrompt('show me traffic sources for last month')">"Show me traffic sources for last month"</span>
354
+ </li>
355
+ <li class="flex items-start">
356
+ <i class="fas fa-arrow-right text-green-500 mt-1 mr-2"></i>
357
+ <span class="cursor-pointer hover:underline" onclick="runPrompt('compare mobile vs desktop performance')">"Compare mobile vs desktop performance"</span>
358
+ </li>
359
+ <li class="flex items-start">
360
+ <i class="fas fa-arrow-right text-green-500 mt-1 mr-2"></i>
361
+ <span class="cursor-pointer hover:underline" onclick="runPrompt('what are my top performing pages')">"What are my top performing pages?"</span>
362
+ </li>
363
+ </ul>
364
+ </div>
365
+ </div>
366
+
367
+ <div class="mt-6 bg-gradient-to-r from-indigo-50 to-blue-50 p-4 rounded-lg border border-indigo-100">
368
+ <div class="flex items-center">
369
+ <div class="bg-indigo-100 p-2 rounded-full mr-3">
370
+ <i class="fas fa-star text-indigo-600"></i>
371
+ </div>
372
+ <h3 class="font-semibold">Pro Tip</h3>
373
+ </div>
374
+ <p class="mt-2 text-sm text-gray-700">You can ask follow-up questions on any result by clicking the "Ask More" button that appears in each data window. This maintains context for deeper analysis.</p>
375
+ </div>
376
+ </div>
377
+ </div>
378
+
379
+ <!-- Sample Data Window (hidden by default) -->
380
+ <div id="sampleWindow" class="data-window bg-white rounded-xl overflow-hidden hidden">
381
+ <div class="window-tabs flex border-b border-gray-200">
382
+ <div class="window-tab active px-4 py-3 font-medium">Analysis</div>
383
+ <div class="window-tab px-4 py-3 font-medium">Data</div>
384
+ <div class="window-tab px-4 py-3 font-medium">Details</div>
385
+ <div class="flex-1 flex justify-end items-center pr-3">
386
+ <button class="text-gray-400 hover:text-gray-600 p-1">
387
+ <i class="fas fa-expand"></i>
388
+ </button>
389
+ <button class="text-gray-400 hover:text-gray-600 p-1 ml-1">
390
+ <i class="fas fa-times"></i>
391
+ </button>
392
+ </div>
393
+ </div>
394
+ <div class="p-6">
395
+ <div class="flex justify-between items-start mb-4">
396
+ <div>
397
+ <h3 class="font-semibold text-lg" id="windowTitle">Sample Analysis</h3>
398
+ <p class="text-sm text-gray-500" id="windowSubtitle">Generated just now</p>
399
+ </div>
400
+ <button class="bg-indigo-50 text-indigo-600 px-3 py-1 rounded-full text-sm hover:bg-indigo-100 flex items-center">
401
+ <i class="fas fa-comment-dots mr-1"></i> Ask More
402
+ </button>
403
+ </div>
404
+
405
+ <div class="window-content">
406
+ <!-- Content will be dynamically inserted here -->
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ </main>
413
+ </div>
414
+
415
+ <!-- Add Client Modal -->
416
+ <div id="addClientModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
417
+ <div class="modal-overlay absolute inset-0 bg-black opacity-50"></div>
418
+ <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
419
+ <div class="modal-content py-4 text-left px-6">
420
+ <div class="flex justify-between items-center pb-3">
421
+ <p class="text-2xl font-bold">Add New Client</p>
422
+ <button onclick="hideModal('addClientModal')" class="modal-close cursor-pointer z-50">
423
+ <i class="fas fa-times"></i>
424
+ </button>
425
+ </div>
426
+ <div class="space-y-4">
427
+ <div>
428
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="clientName">
429
+ Client Name
430
+ </label>
431
+ <input type="text" id="clientName" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
432
+ </div>
433
+ <div>
434
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="clientIndustry">
435
+ Industry
436
+ </label>
437
+ <input type="text" id="clientIndustry" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
438
+ </div>
439
+ <div>
440
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="clientNotes">
441
+ Notes
442
+ </label>
443
+ <textarea id="clientNotes" rows="3" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></textarea>
444
+ </div>
445
+ </div>
446
+ <div class="flex justify-end pt-4">
447
+ <button onclick="hideModal('addClientModal')" class="px-4 py-2 text-gray-600 rounded mr-2 hover:bg-gray-100">
448
+ Cancel
449
+ </button>
450
+ <button onclick="addNewClient()" class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">
451
+ Save Client
452
+ </button>
453
+ </div>
454
+ </div>
455
+ </div>
456
+ </div>
457
+
458
+ <!-- Edit Client Modal -->
459
+ <div id="editClientModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
460
+ <div class="modal-overlay absolute inset-0 bg-black opacity-50"></div>
461
+ <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
462
+ <div class="modal-content py-4 text-left px-6">
463
+ <div class="flex justify-between items-center pb-3">
464
+ <p class="text-2xl font-bold">Edit Client</p>
465
+ <button onclick="hideModal('editClientModal')" class="modal-close cursor-pointer z-50">
466
+ <i class="fas fa-times"></i>
467
+ </button>
468
+ </div>
469
+ <div class="space-y-4">
470
+ <div>
471
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="editClientName">
472
+ Client Name
473
+ </label>
474
+ <input type="text" id="editClientName" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
475
+ </div>
476
+ <div>
477
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="editClientIndustry">
478
+ Industry
479
+ </label>
480
+ <input type="text" id="editClientIndustry" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
481
+ </div>
482
+ <div>
483
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="editClientNotes">
484
+ Notes
485
+ </label>
486
+ <textarea id="editClientNotes" rows="3" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></textarea>
487
+ </div>
488
+ </div>
489
+ <div class="flex justify-end pt-4">
490
+ <button onclick="hideModal('editClientModal')" class="px-4 py-2 text-gray-600 rounded mr-2 hover:bg-gray-100">
491
+ Cancel
492
+ </button>
493
+ <button onclick="updateClient()" class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">
494
+ Save Changes
495
+ </button>
496
+ </div>
497
+ </div>
498
+ </div>
499
+ </div>
500
+
501
+ <!-- Add Property Modal -->
502
+ <div id="addPropertyModal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
503
+ <div class="modal-overlay absolute inset-0 bg-black opacity-50"></div>
504
+ <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">
505
+ <div class="modal-content py-4 text-left px-6">
506
+ <div class="flex justify-between items-center pb-3">
507
+ <p class="text-2xl font-bold">Add New Property</p>
508
+ <button onclick="hideModal('addPropertyModal')" class="modal-close cursor-pointer z-50">
509
+ <i class="fas fa-times"></i>
510
+ </button>
511
+ </div>
512
+ <div class="space-y-4">
513
+ <div>
514
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="propertyName">
515
+ Property Name
516
+ </label>
517
+ <input type="text" id="propertyName" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
518
+ </div>
519
+ <div>
520
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="propertyUrl">
521
+ Website URL
522
+ </label>
523
+ <input type="url" id="propertyUrl" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
524
+ </div>
525
+ <div>
526
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="propertyType">
527
+ Property Type
528
+ </label>
529
+ <select id="propertyType" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
530
+ <option value="website">Website</option>
531
+ <option value="mobile-app">Mobile App</option>
532
+ <option value="ecommerce">E-commerce</option>
533
+ <option value="blog">Blog</option>
534
+ <option value="saas">SaaS Platform</option>
535
+ </select>
536
+ </div>
537
+ <div class="grid grid-cols-2 gap-4">
538
+ <div>
539
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="gaPropertyId">
540
+ GA Property ID
541
+ </label>
542
+ <input type="text" id="gaPropertyId" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
543
+ </div>
544
+ <div>
545
+ <label class="block text-gray-700 text-sm font-bold mb-2" for="gscPropertyId">
546
+ GSC Property ID
547
+ </label>
548
+ <input type="text" id="gscPropertyId" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
549
+ </div>
550
+ </div>
551
+ </div>
552
+ <div class="flex justify-end pt-4">
553
+ <button onclick="hideModal('addPropertyModal')" class="px-4 py-2 text-gray-600 rounded mr-2 hover:bg-gray-100">
554
+ Cancel
555
+ </button>
556
+ <button onclick="addNewProperty()" class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">
557
+ Add Property
558
+ </button>
559
+ </div>
560
+ </div>
561
+ </div>
562
+ </div>
563
+
564
+ <script>
565
+ // Client and property management
566
+ let clients = [
567
+ {
568
+ id: 'client1',
569
+ name: 'Acme Corp',
570
+ industry: 'E-commerce',
571
+ notes: 'Primary client, focus on conversion optimization',
572
+ properties: [
573
+ {
574
+ id: 'prop1',
575
+ name: 'Main Website',
576
+ url: 'https://acme.com',
577
+ type: 'ecommerce',
578
+ gaId: 'UA-12345678-1',
579
+ gscId: 'https://acme.com'
580
+ },
581
+ {
582
+ id: 'prop2',
583
+ name: 'Blog',
584
+ url: 'https://blog.acme.com',
585
+ type: 'blog',
586
+ gaId: 'UA-12345678-2',
587
+ gscId: 'https://blog.acme.com'
588
+ }
589
+ ]
590
+ },
591
+ {
592
+ id: 'client2',
593
+ name: 'TechStart',
594
+ industry: 'SaaS',
595
+ notes: 'Early stage startup, tracking growth metrics',
596
+ properties: [
597
+ {
598
+ id: 'prop3',
599
+ name: 'Web App',
600
+ url: 'https://app.techstart.com',
601
+ type: 'saas',
602
+ gaId: 'UA-87654321-1',
603
+ gscId: 'https://app.techstart.com'
604
+ }
605
+ ]
606
+ }
607
+ ];
608
+
609
+ let currentClientId = null;
610
+ let currentPropertyId = null;
611
+
612
+ // Initialize the app
613
+ document.addEventListener('DOMContentLoaded', function() {
614
+ // Set up event listeners for window tabs
615
+ document.querySelectorAll('.window-tab').forEach(tab => {
616
+ tab.addEventListener('click', function() {
617
+ const parentWindow = this.closest('.data-window');
618
+ parentWindow.querySelectorAll('.window-tab').forEach(t => t.classList.remove('active'));
619
+ this.classList.add('active');
620
+ });
621
+ });
622
+
623
+ // Client switcher dropdown
624
+ document.getElementById('clientSwitcher').addEventListener('click', function(e) {
625
+ e.stopPropagation();
626
+ const dropdown = document.getElementById('clientDropdown');
627
+ dropdown.classList.toggle('hidden');
628
+ });
629
+
630
+ // Close dropdown when clicking outside
631
+ document.addEventListener('click', function() {
632
+ document.getElementById('clientDropdown').classList.add('hidden');
633
+ });
634
+
635
+ // Initialize client list
636
+ renderClientList();
637
+
638
+ // Select first client by default
639
+ if (clients.length > 0) {
640
+ selectClient(clients[0].id);
641
+ }
642
+ });
643
+
644
+ // Render client list in dropdown
645
+ function renderClientList() {
646
+ const clientList = document.getElementById('clientList');
647
+ clientList.innerHTML = '';
648
+
649
+ if (clients.length === 0) {
650
+ clientList.innerHTML = '<div class="p-3 text-center text-gray-500">No clients added yet</div>';
651
+ return;
652
+ }
653
+
654
+ clients.forEach(client => {
655
+ const clientItem = document.createElement('div');
656
+ clientItem.className = 'border-b border-gray-200 last:border-b-0';
657
+
658
+ clientItem.innerHTML = `
659
+ <div class="p-3 hover:bg-gray-50 cursor-pointer" onclick="selectClient('${client.id}')">
660
+ <div class="flex justify-between items-center">
661
+ <div>
662
+ <h4 class="font-medium">${client.name}</h4>
663
+ <p class="text-xs text-gray-500">${client.industry} • ${client.properties.length} properties</p>
664
+ </div>
665
+ <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
666
+ </div>
667
+ </div>
668
+ <div id="properties-${client.id}" class="hidden bg-gray-50 pl-4">
669
+ ${client.properties.map(prop => `
670
+ <div class="p-2 hover:bg-gray-100 cursor-pointer flex items-center" onclick="selectProperty('${client.id}', '${prop.id}')">
671
+ <i class="fas fa-globe mr-2 text-gray-500 text-sm"></i>
672
+ <span>${prop.name}</span>
673
+ ${currentPropertyId === prop.id ? '<i class="fas fa-check ml-2 text-indigo-600 text-xs"></i>' : ''}
674
+ </div>
675
+ `).join('')}
676
+ <div class="p-2 hover:bg-gray-100 cursor-pointer text-indigo-600 text-sm flex items-center" onclick="showAddPropertyModal('${client.id}')">
677
+ <i class="fas fa-plus mr-2"></i>
678
+ <span>Add Property</span>
679
+ </div>
680
+ </div>
681
+ `;
682
+
683
+ clientList.appendChild(clientItem);
684
+ });
685
+ }
686
+
687
+ // Select a client
688
+ function selectClient(clientId) {
689
+ currentClientId = clientId;
690
+ const client = clients.find(c => c.id === clientId);
691
+
692
+ // Update UI
693
+ document.getElementById('currentClientName').textContent = client.name;
694
+ document.getElementById('clientInfoBar').classList.remove('hidden');
695
+ document.getElementById('activeClientTitle').textContent = client.name;
696
+ document.getElementById('activeClientProperties').textContent = `Properties: ${client.properties.length}`;
697
+
698
+ // Show properties for this client in dropdown
699
+ const propertyContainer = document.getElementById(`properties-${clientId}`);
700
+ propertyContainer.classList.toggle('hidden');
701
+
702
+ // Auto-select first property if none selected
703
+ if (client.properties.length > 0 && !currentPropertyId) {
704
+ selectProperty(clientId, client.properties[0].id);
705
+ }
706
+
707
+ // Close dropdown
708
+ document.getElementById('clientDropdown').classList.add('hidden');
709
+
710
+ // Update edit modal fields
711
+ document.getElementById('editClientName').value = client.name;
712
+ document.getElementById('editClientIndustry').value = client.industry;
713
+ document.getElementById('editClientNotes').value = client.notes;
714
+ }
715
+
716
+ // Select a property
717
+ function selectProperty(clientId, propertyId) {
718
+ currentPropertyId = propertyId;
719
+
720
+ // Update UI to show selected property
721
+ document.querySelectorAll('[id^="properties-"]').forEach(el => {
722
+ el.querySelectorAll('.fa-check').forEach(icon => {
723
+ icon.classList.add('hidden');
724
+ });
725
+ });
726
+
727
+ const checkIcon = document.querySelector(`[onclick="selectProperty('${clientId}', '${propertyId}')"] .fa-check`);
728
+ if (checkIcon) {
729
+ checkIcon.classList.remove('hidden');
730
+ }
731
+
732
+ // In a real app, you would load data for this property
733
+ console.log(`Selected property ${propertyId} for client ${clientId}`);
734
+ }
735
+
736
+ // Show add client modal
737
+ function showAddClientModal() {
738
+ document.getElementById('addClientModal').classList.remove('hidden');
739
+ document.getElementById('clientName').focus();
740
+ }
741
+
742
+ // Show edit client modal
743
+ function showEditClientModal() {
744
+ if (!currentClientId) return;
745
+
746
+ const client = clients.find(c => c.id === currentClientId);
747
+ if (!client) return;
748
+
749
+ document.getElementById('editClientName').value = client.name;
750
+ document.getElementById('editClientIndustry').value = client.industry;
751
+ document.getElementById('editClientNotes').value = client.notes;
752
+
753
+ document.getElementById('editClientModal').classList.remove('hidden');
754
+ }
755
+
756
+ // Show add property modal
757
+ function showAddPropertyModal(clientId) {
758
+ if (clientId) {
759
+ // If called from a specific client's "Add Property" button
760
+ currentClientId = clientId;
761
+ }
762
+
763
+ if (!currentClientId) {
764
+ alert('Please select a client first');
765
+ return;
766
+ }
767
+
768
+ // Clear form
769
+ document.getElementById('propertyName').value = '';
770
+ document.getElementById('propertyUrl').value = '';
771
+ document.getElementById('propertyType').value = 'website';
772
+ document.getElementById('gaPropertyId').value = '';
773
+ document.getElementById('gscPropertyId').value = '';
774
+
775
+ document.getElementById('addPropertyModal').classList.remove('hidden');
776
+ document.getElementById('propertyName').focus();
777
+ }
778
+
779
+ // Hide any modal
780
+ function hideModal(modalId) {
781
+ document.getElementById(modalId).classList.add('hidden');
782
+ }
783
+
784
+ // Add new client
785
+ function addNewClient() {
786
+ const name = document.getElementById('clientName').value.trim();
787
+ const industry = document.getElementById('clientIndustry').value.trim();
788
+ const notes = document.getElementById('clientNotes').value.trim();
789
+
790
+ if (!name) {
791
+ alert('Client name is required');
792
+ return;
793
+ }
794
+
795
+ const newClient = {
796
+ id: 'client' + Date.now(),
797
+ name,
798
+ industry,
799
+ notes,
800
+ properties: []
801
+ };
802
+
803
+ clients.push(newClient);
804
+ renderClientList();
805
+ selectClient(newClient.id);
806
+ hideModal('addClientModal');
807
+ }
808
+
809
+ // Update client
810
+ function updateClient() {
811
+ if (!currentClientId) return;
812
+
813
+ const name = document.getElementById('editClientName').value.trim();
814
+ const industry = document.getElementById('editClientIndustry').value.trim();
815
+ const notes = document.getElementById('editClientNotes').value.trim();
816
+
817
+ if (!name) {
818
+ alert('Client name is required');
819
+ return;
820
+ }
821
+
822
+ const clientIndex = clients.findIndex(c => c.id === currentClientId);
823
+ if (clientIndex !== -1) {
824
+ clients[clientIndex].name = name;
825
+ clients[clientIndex].industry = industry;
826
+ clients[clientIndex].notes = notes;
827
+
828
+ // Update UI
829
+ document.getElementById('currentClientName').textContent = name;
830
+ document.getElementById('activeClientTitle').textContent = name;
831
+ renderClientList();
832
+ hideModal('editClientModal');
833
+ }
834
+ }
835
+
836
+ // Add new property
837
+ function addNewProperty() {
838
+ if (!currentClientId) return;
839
+
840
+ const name = document.getElementById('propertyName').value.trim();
841
+ const url = document.getElementById('propertyUrl').value.trim();
842
+ const type = document.getElementById('propertyType').value;
843
+ const gaId = document.getElementById('gaPropertyId').value.trim();
844
+ const gscId = document.getElementById('gscPropertyId').value.trim();
845
+
846
+ if (!name || !url) {
847
+ alert('Property name and URL are required');
848
+ return;
849
+ }
850
+
851
+ const newProperty = {
852
+ id: 'prop' + Date.now(),
853
+ name,
854
+ url,
855
+ type,
856
+ gaId,
857
+ gscId
858
+ };
859
+
860
+ const clientIndex = clients.findIndex(c => c.id === currentClientId);
861
+ if (clientIndex !== -1) {
862
+ clients[clientIndex].properties.push(newProperty);
863
+
864
+ // Update UI
865
+ document.getElementById('activeClientProperties').textContent = `Properties: ${clients[clientIndex].properties.length}`;
866
+ renderClientList();
867
+ selectProperty(currentClientId, newProperty.id);
868
+ hideModal('addPropertyModal');
869
+ }
870
+ }
871
+
872
+ // Sample data for demonstration
873
+ const sampleData = {
874
+ summary: {
875
+ title: "Website Performance Summary",
876
+ subtitle: "Last 30 days compared to previous period",
877
+ content: `
878
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
879
+ <div class="bg-blue-50 p-4 rounded-lg">
880
+ <div class="flex justify-between items-start">
881
+ <div>
882
+ <p class="text-sm text-blue-700">Users</p>
883
+ <p class="text-2xl font-bold">12,453 <span class="text-sm font-normal text-green-600">(+8.2%)</span></p>
884
+ </div>
885
+ <div class="bg-blue-100 p-2 rounded-full">
886
+ <i class="fas fa-users text-blue-600"></i>
887
+ </div>
888
+ </div>
889
+ </div>
890
+ <div class="bg-purple-50 p-4 rounded-lg">
891
+ <div class="flex justify-between items-start">
892
+ <div>
893
+ <p class="text-sm text-purple-700">Avg. Session</p>
894
+ <p class="text-2xl font-bold">2:45 <span class="text-sm font-normal text-red-600">(-0.5%)</span></p>
895
+ </div>
896
+ <div class="bg-purple-100 p-2 rounded-full">
897
+ <i class="fas fa-clock text-purple-600"></i>
898
+ </div>
899
+ </div>
900
+ </div>
901
+ <div class="bg-green-50 p-4 rounded-lg">
902
+ <div class="flex justify-between items-start">
903
+ <div>
904
+ <p class="text-sm text-green-700">Conversion</p>
905
+ <p class="text-2xl font-bold">3.2% <span class="text-sm font-normal text-green-600">(+1.1%)</span></p>
906
+ </div>
907
+ <div class="bg-green-100 p-2 rounded-full">
908
+ <i class="fas fa-percentage text-green-600"></i>
909
+ </div>
910
+ </div>
911
+ </div>
912
+ </div>
913
+
914
+ <div class="mb-6">
915
+ <canvas id="summaryChart" height="200"></canvas>
916
+ </div>
917
+
918
+ <div class="bg-indigo-50 p-4 rounded-lg">
919
+ <h4 class="font-medium text-indigo-700 mb-2">Key Insights</h4>
920
+ <ul class="list-disc pl-5 space-y-1 text-sm text-gray-700">
921
+ <li>Mobile traffic increased by 12% while desktop remained stable</li>
922
+ <li>Blog posts about "SEO tips" drove 22% of new users</li>
923
+ <li>Bounce rate improved by 1.8 percentage points</li>
924
+ <li>Conversion rates peaked on Tuesdays and Thursdays</li>
925
+ </ul>
926
+ </div>
927
+ `
928
+ },
929
+ traffic: {
930
+ title: "Traffic Sources Analysis",
931
+ subtitle: "Breakdown by channel for the last 30 days",
932
+ content: `
933
+ <div class="mb-6">
934
+ <canvas id="trafficChart" height="200"></canvas>
935
+ </div>
936
+
937
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
938
+ <div>
939
+ <h4 class="font-medium text-gray-700 mb-2">Top Sources</h4>
940
+ <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
941
+ <table class="min-w-full divide-y divide-gray-200">
942
+ <thead class="bg-gray-50">
943
+ <tr>
944
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Source</th>
945
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Users</th>
946
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">% Change</th>
947
+ </tr>
948
+ </thead>
949
+ <tbody class="divide-y divide-gray-200">
950
+ <tr>
951
+ <td class="px-4 py-2 text-sm">Organic Search</td>
952
+ <td class="px-4 py-2 text-sm">6,542</td>
953
+ <td class="px-4 py-2 text-sm text-green-600">+12%</td>
954
+ </tr>
955
+ <tr>
956
+ <td class="px-4 py-2 text-sm">Direct</td>
957
+ <td class="px-4 py-2 text-sm">3,210</td>
958
+ <td class="px-4 py-2 text-sm text-red-600">-2%</td>
959
+ </tr>
960
+ <tr>
961
+ <td class="px-4 py-2 text-sm">Social</td>
962
+ <td class="px-4 py-2 text-sm">1,876</td>
963
+ <td class="px-4 py-2 text-sm text-green-600">+24%</td>
964
+ </tr>
965
+ <tr>
966
+ <td class="px-4 py-2 text-sm">Referral</td>
967
+ <td class="px-4 py-2 text-sm">825</td>
968
+ <td class="px-4 py-2 text-sm text-green-600">+8%</td>
969
+ </tr>
970
+ </tbody>
971
+ </table>
972
+ </div>
973
+ </div>
974
+ <div>
975
+ <h4 class="font-medium text-gray-700 mb-2">Recommendations</h4>
976
+ <div class="space-y-3">
977
+ <div class="flex items-start">
978
+ <div class="bg-blue-100 p-1 rounded-full mr-3 mt-1">
979
+ <i class="fas fa-bullseye text-blue-600 text-xs"></i>
980
+ </div>
981
+ <div>
982
+ <p class="text-sm font-medium">Double down on social</p>
983
+ <p class="text-xs text-gray-600">Your social traffic is growing rapidly. Consider increasing your social media ad budget.</p>
984
+ </div>
985
+ </div>
986
+ <div class="flex items-start">
987
+ <div class="bg-green-100 p-1 rounded-full mr-3 mt-1">
988
+ <i class="fas fa-search text-green-600 text-xs"></i>
989
+ </div>
990
+ <div>
991
+ <p class="text-sm font-medium">Optimize for search</p>
992
+ <p class="text-xs text-gray-600">Create more content targeting long-tail keywords in your niche.</p>
993
+ </div>
994
+ </div>
995
+ <div class="flex items-start">
996
+ <div class="bg-purple-100 p-1 rounded-full mr-3 mt-1">
997
+ <i class="fas fa-link text-purple-600 text-xs"></i>
998
+ </div>
999
+ <div>
1000
+ <p class="text-sm font-medium">Build partnerships</p>
1001
+ <p class="text-xs text-gray-600">Reach out to industry websites for guest posting and backlink opportunities.</p>
1002
+ </div>
1003
+ </div>
1004
+ </div>
1005
+ </div>
1006
+ </div>
1007
+ `
1008
+ },
1009
+ keywords: {
1010
+ title: "Top Performing Keywords",
1011
+ subtitle: "From Google Search Console - Last 30 days",
1012
+ content: `
1013
+ <div class="mb-6">
1014
+ <div class="flex justify-between items-center mb-3">
1015
+ <h4 class="font-medium text-gray-700">Keyword Performance</h4>
1016
+ <div class="flex space-x-2">
1017
+ <button class="bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full text-xs">Impressions</button>
1018
+ <button class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs">Clicks</button>
1019
+ <button class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs">CTR</button>
1020
+ <button class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs">Position</button>
1021
+ </div>
1022
+ </div>
1023
+ <canvas id="keywordsChart" height="200"></canvas>
1024
+ </div>
1025
+
1026
+ <div class="grid grid-cols-1 gap-4">
1027
+ <div>
1028
+ <h4 class="font-medium text-gray-700 mb-2">Top 10 Keywords by Clicks</h4>
1029
+ <div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
1030
+ <table class="min-w-full divide-y divide-gray-200">
1031
+ <thead class="bg-gray-50">
1032
+ <tr>
1033
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Keyword</th>
1034
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Clicks</th>
1035
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Impressions</th>
1036
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">CTR</th>
1037
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Position</th>
1038
+ </tr>
1039
+ </thead>
1040
+ <tbody class="divide-y divide-gray-200">
1041
+ <tr>
1042
+ <td class="px-4 py-2 text-sm">seo best practices</td>
1043
+ <td class="px-4 py-2 text-sm">1,245</td>
1044
+ <td class="px-4 py-2 text-sm">8,762</td>
1045
+ <td class="px-4 py-2 text-sm">14.2%</td>
1046
+ <td class="px-4 py-2 text-sm">3.2</td>
1047
+ </tr>
1048
+ <tr>
1049
+ <td class="px-4 py-2 text-sm">content marketing</td>
1050
+ <td class="px-4 py-2 text-sm">876</td>
1051
+ <td class="px-4 py-2 text-sm">5,432</td>
1052
+ <td class="px-4 py-2 text-sm">16.1%</td>
1053
+ <td class="px-4 py-2 text-sm">4.5</td>
1054
+ </tr>
1055
+ <tr>
1056
+ <td class="px-4 py-2 text-sm">google analytics</td>
1057
+ <td class="px-4 py-2 text-sm">765</td>
1058
+ <td class="px-4 py-2 text-sm">9,123</td>
1059
+ <td class="px-4 py-2 text-sm">8.4%</td>
1060
+ <td class="px-4 py-2 text-sm">7.8</td>
1061
+ </tr>
1062
+ <tr>
1063
+ <td class="px-4 py-2 text-sm">website optimization</td>
1064
+ <td class="px-4 py-2 text-sm">543</td>
1065
+ <td class="px-4 py-2 text-sm">3,210</td>
1066
+ <td class="px-4 py-2 text-sm">16.9%</td>
1067
+ <td class="px-4 py-2 text-sm">5.1</td>
1068
+ </tr>
1069
+ </tbody>
1070
+ </table>
1071
+ </div>
1072
+ </div>
1073
+ </div>
1074
+
1075
+ <div class="mt-6 bg-yellow-50 p-4 rounded-lg border border-yellow-200">
1076
+ <div class="flex items-center">
1077
+ <div class="bg-yellow-100 p-2 rounded-full mr-3">
1078
+ <i class="fas fa-lightbulb text-yellow-600"></i>
1079
+ </div>
1080
+ <h4 class="font-medium">Optimization Opportunity</h4>
1081
+ </div>
1082
+ <p class="mt-2 text-sm text-gray-700">The keyword "google analytics" has high impressions but relatively low CTR. Consider updating your meta description to be more compelling and ensure the page fully answers search intent.</p>
1083
+ </div>
1084
+ `
1085
+ }
1086
+ };
1087
+
1088
+ // Run a predefined prompt
1089
+ function runPrompt(promptType) {
1090
+ if (!currentClientId || !currentPropertyId) {
1091
+ alert('Please select a client and property first');
1092
+ return;
1093
+ }
1094
+
1095
+ // In a real app, this would call your LLM API with client/property context
1096
+ // For demo, we'll use sample data
1097
+ const data = sampleData[promptType] || {
1098
+ title: "Analysis: " + promptType,
1099
+ subtitle: "For " + getCurrentPropertyName(),
1100
+ content: `<div class="typewriter">Analyzing ${getCurrentPropertyName()} data about "${promptType}". This would show real insights from your Google Analytics and Search Console data in a production environment.</div>`
1101
+ };
1102
+
1103
+ createDataWindow(data);
1104
+
1105
+ // Scroll to the new window
1106
+ setTimeout(() => {
1107
+ document.querySelector('#windowsContainer').lastElementChild.scrollIntoView({
1108
+ behavior: 'smooth'
1109
+ });
1110
+ }, 100);
1111
+ }
1112
+
1113
+ // Get current property name
1114
+ function getCurrentPropertyName() {
1115
+ if (!currentClientId || !currentPropertyId) return 'selected property';
1116
+
1117
+ const client = clients.find(c => c.id === currentClientId);
1118
+ if (!client) return 'selected property';
1119
+
1120
+ const property = client.properties.find(p => p.id === currentPropertyId);
1121
+ return property ? property.name : 'selected property';
1122
+ }
1123
+
1124
+ // Submit a custom query
1125
+ function submitQuery() {
1126
+ const query = document.getElementById('queryInput').value.trim();
1127
+ if (!query) return;
1128
+
1129
+ if (!currentClientId || !currentPropertyId) {
1130
+ alert('Please select a client and property first');
1131
+ return;
1132
+ }
1133
+
1134
+ // Clear input
1135
+ document.getElementById('queryInput').value = '';
1136
+
1137
+ // Create a window with loading state
1138
+ const loadingWindow = {
1139
+ title: "Analyzing: " + query,
1140
+ subtitle: "For " + getCurrentPropertyName(),
1141
+ content: `<div class="flex items-center justify-center py-8">
1142
+ <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500"></div>
1143
+ </div>`
1144
+ };
1145
+
1146
+ const windowElement = createDataWindow(loadingWindow);
1147
+
1148
+ // Simulate API call delay
1149
+ setTimeout(() => {
1150
+ // In a real app, you'd get actual data from your LLM API
1151
+ const response = {
1152
+ title: "Analysis: " + query,
1153
+ subtitle: "For " + getCurrentPropertyName(),
1154
+ content: `<div class="mb-4">
1155
+ <p>Here's the analysis for: <strong>"${query}"</strong></p>
1156
+ <p class="text-sm text-gray-500">Client: ${getCurrentClientName()} • Property: ${getCurrentPropertyName()}</p>
1157
+ </div>
1158
+ <div class="bg-indigo-50 p-4 rounded-lg">
1159
+ <p class="text-sm">In a production environment, this would show real data visualizations and insights from your Google Analytics and Search Console data based on your specific question.</p>
1160
+ </div>
1161
+ <div class="mt-4">
1162
+ <canvas id="dynamicChart" height="200"></canvas>
1163
+ </div>
1164
+ <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
1165
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
1166
+ <h4 class="font-medium mb-2">Key Findings</h4>
1167
+ <ul class="list-disc pl-5 space-y-1 text-sm">
1168
+ <li>This would show actual findings from your data</li>
1169
+ <li>Each insight would be relevant to your query</li>
1170
+ <li>The LLM would generate actionable recommendations</li>
1171
+ </ul>
1172
+ </div>
1173
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
1174
+ <h4 class="font-medium mb-2">Recommendations</h4>
1175
+ <ul class="list-disc pl-5 space-y-1 text-sm">
1176
+ <li>Specific actions based on your data</li>
1177
+ <li>Prioritized by potential impact</li>
1178
+ <li>Tailored to your business goals</li>
1179
+ </ul>
1180
+ </div>
1181
+ </div>`
1182
+ };
1183
+
1184
+ // Update the window with actual content
1185
+ updateWindowContent(windowElement, response);
1186
+
1187
+ // Create charts (demo only)
1188
+ setTimeout(() => {
1189
+ createDemoChart('dynamicChart', 'line');
1190
+ }, 100);
1191
+ }, 1500);
1192
+ }
1193
+
1194
+ // Get current client name
1195
+ function getCurrentClientName() {
1196
+ if (!currentClientId) return 'selected client';
1197
+
1198
+ const client = clients.find(c => c.id === currentClientId);
1199
+ return client ? client.name : 'selected client';
1200
+ }
1201
+
1202
+ // Create a new data window
1203
+ function createDataWindow(data) {
1204
+ const template = document.getElementById('sampleWindow');
1205
+ const clone = template.cloneNode(true);
1206
+ clone.id = '';
1207
+ clone.classList.remove('hidden');
1208
+
1209
+ // Set title and subtitle
1210
+ clone.querySelector('#windowTitle').textContent = data.title;
1211
+ clone.querySelector('#windowSubtitle').textContent = data.subtitle;
1212
+
1213
+ // Set content
1214
+ const contentContainer = clone.querySelector('.window-content');
1215
+ contentContainer.innerHTML = data.content;
1216
+
1217
+ // Add to container
1218
+ document.getElementById('windowsContainer').appendChild(clone);
1219
+
1220
+ // Create charts if they exist in the content
1221
+ if (data.content.includes('summaryChart')) {
1222
+ createDemoChart('summaryChart', 'bar');
1223
+ }
1224
+ if (data.content.includes('trafficChart')) {
1225
+ createDemoChart('trafficChart', 'doughnut');
1226
+ }
1227
+ if (data.content.includes('keywordsChart')) {
1228
+ createDemoChart('keywordsChart', 'bar');
1229
+ }
1230
+
1231
+ return clone;
1232
+ }
1233
+
1234
+ // Update window content
1235
+ function updateWindowContent(windowElement, data) {
1236
+ windowElement.querySelector('#windowTitle').textContent = data.title;
1237
+ windowElement.querySelector('#windowSubtitle').textContent = data.subtitle;
1238
+ windowElement.querySelector('.window-content').innerHTML = data.content;
1239
+ }
1240
+
1241
+ // Create demo charts
1242
+ function createDemoChart(chartId, type) {
1243
+ const ctx = document.getElementById(chartId).getContext('2d');
1244
+
1245
+ let config = {};
1246
+
1247
+ if (type === 'bar') {
1248
+ config = {
1249
+ type: 'bar',
1250
+ data: {
1251
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
1252
+ datasets: [{
1253
+ label: 'Current Period',
1254
+ data: [1200, 1900, 1700, 2100, 2300, 2500],
1255
+ backgroundColor: 'rgba(99, 102, 241, 0.6)',
1256
+ borderColor: 'rgba(99, 102, 241, 1)',
1257
+ borderWidth: 1
1258
+ }, {
1259
+ label: 'Previous Period',
1260
+ data: [1000, 1700, 1500, 1900, 2000, 2200],
1261
+ backgroundColor: 'rgba(203, 213, 225, 0.6)',
1262
+ borderColor: 'rgba(203, 213, 225, 1)',
1263
+ borderWidth: 1
1264
+ }]
1265
+ },
1266
+ options: {
1267
+ responsive: true,
1268
+ plugins: {
1269
+ legend: {
1270
+ position: 'top',
1271
+ },
1272
+ tooltip: {
1273
+ mode: 'index',
1274
+ intersect: false,
1275
+ }
1276
+ },
1277
+ scales: {
1278
+ y: {
1279
+ beginAtZero: true
1280
+ }
1281
+ }
1282
+ }
1283
+ };
1284
+ } else if (type === 'doughnut') {
1285
+ config = {
1286
+ type: 'doughnut',
1287
+ data: {
1288
+ labels: ['Organic Search', 'Direct', 'Social', 'Referral', 'Email'],
1289
+ datasets: [{
1290
+ data: [45, 25, 15, 10, 5],
1291
+ backgroundColor: [
1292
+ 'rgba(99, 102, 241, 0.7)',
1293
+ 'rgba(167, 139, 250, 0.7)',
1294
+ 'rgba(74, 222, 128, 0.7)',
1295
+ 'rgba(248, 113, 113, 0.7)',
1296
+ 'rgba(251, 191, 36, 0.7)'
1297
+ ],
1298
+ borderWidth: 1
1299
+ }]
1300
+ },
1301
+ options: {
1302
+ responsive: true,
1303
+ plugins: {
1304
+ legend: {
1305
+ position: 'right',
1306
+ }
1307
+ }
1308
+ }
1309
+ };
1310
+ } else if (type === 'line') {
1311
+ config = {
1312
+ type: 'line',
1313
+ data: {
1314
+ labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
1315
+ datasets: [{
1316
+ label: 'Performance Metric',
1317
+ data: [65, 59, 80, 81],
1318
+ fill: false,
1319
+ backgroundColor: 'rgba(99, 102, 241, 0.6)',
1320
+ borderColor: 'rgba(99, 102, 241, 1)',
1321
+ tension: 0.1
1322
+ }]
1323
+ },
1324
+ options: {
1325
+ responsive: true,
1326
+ scales: {
1327
+ y: {
1328
+ beginAtZero: false
1329
+ }
1330
+ }
1331
+ }
1332
+ };
1333
+ }
1334
+
1335
+ new Chart(ctx, config);
1336
+ }
1337
+
1338
+ // Voice input function
1339
+ function voiceInput() {
1340
+ alert("In a real implementation, this would activate the browser's speech recognition API to capture your voice query.");
1341
+ }
1342
+ </script>
1343
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=vikasrij/askanalytics2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1344
+ </html>