Hugging Face's logo

Spaces:
vikasrij
/
ranking-dashboard
Running

App Files Community
vikasrij commited on
Commit
e77562f
·
verified ·
1 Parent(s): d5081b0

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1138 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ranking Dashboard
3
- emoji: 🐢
4
- colorFrom: red
5
- colorTo: gray
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: ranking-dashboard
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: green
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,1138 @@
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>Search Console Insights Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ .keyword-bubble {
13
+ transition: all 0.3s ease;
14
+ }
15
+ .keyword-bubble:hover {
16
+ transform: scale(1.05);
17
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
18
+ }
19
+ .heatmap-cell {
20
+ transition: all 0.2s ease;
21
+ }
22
+ .heatmap-cell:hover {
23
+ transform: scale(1.1);
24
+ z-index: 10;
25
+ }
26
+ .scrollbar-thin::-webkit-scrollbar {
27
+ width: 6px;
28
+ height: 6px;
29
+ }
30
+ .scrollbar-thin::-webkit-scrollbar-thumb {
31
+ background-color: rgba(156, 163, 175, 0.5);
32
+ border-radius: 3px;
33
+ }
34
+ .animate-pulse {
35
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
36
+ }
37
+ @keyframes pulse {
38
+ 0%, 100% {
39
+ opacity: 1;
40
+ }
41
+ 50% {
42
+ opacity: 0.5;
43
+ }
44
+ }
45
+ .gradient-mask {
46
+ mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
47
+ }
48
+ .progress-ring__circle {
49
+ transition: stroke-dashoffset 0.35s;
50
+ transform: rotate(-90deg);
51
+ transform-origin: 50% 50%;
52
+ }
53
+ .tooltip {
54
+ position: relative;
55
+ display: inline-block;
56
+ }
57
+ .tooltip .tooltip-text {
58
+ visibility: hidden;
59
+ width: 200px;
60
+ background-color: #1F2937;
61
+ color: #fff;
62
+ text-align: center;
63
+ border-radius: 6px;
64
+ padding: 8px;
65
+ position: absolute;
66
+ z-index: 1;
67
+ bottom: 125%;
68
+ left: 50%;
69
+ margin-left: -100px;
70
+ opacity: 0;
71
+ transition: opacity 0.3s;
72
+ font-size: 12px;
73
+ font-weight: normal;
74
+ }
75
+ .tooltip:hover .tooltip-text {
76
+ visibility: visible;
77
+ opacity: 1;
78
+ }
79
+ .loading-bar {
80
+ position: relative;
81
+ overflow: hidden;
82
+ height: 4px;
83
+ }
84
+ .loading-bar::before {
85
+ content: '';
86
+ position: absolute;
87
+ left: 0;
88
+ top: 0;
89
+ height: 100%;
90
+ width: 100%;
91
+ background-color: #3B82F6;
92
+ animation: loading 2s linear infinite;
93
+ }
94
+ @keyframes loading {
95
+ 0% {
96
+ transform: translateX(-100%);
97
+ }
98
+ 100% {
99
+ transform: translateX(100%);
100
+ }
101
+ }
102
+ </style>
103
+ </head>
104
+ <body class="bg-gray-50 font-sans">
105
+ <div class="min-h-screen">
106
+ <!-- Header with data freshness indicator -->
107
+ <header class="bg-white shadow-sm sticky top-0 z-10">
108
+ <div class="max-w-7xl mx-auto px-4 py-3 sm:px-6 lg:px-8 flex justify-between items-center">
109
+ <div class="flex items-center space-x-4">
110
+ <div class="flex items-center">
111
+ <i class="fab fa-google text-blue-500 text-2xl mr-3"></i>
112
+ <h1 class="text-xl font-bold text-gray-800">Search Console Insights</h1>
113
+ </div>
114
+ <div class="flex items-center text-sm bg-blue-50 text-blue-700 px-3 py-1 rounded-full">
115
+ <i class="fas fa-clock mr-1.5"></i>
116
+ <span>Data updated: <span class="font-medium">2 hours ago</span></span>
117
+ <div class="tooltip ml-1">
118
+ <i class="fas fa-info-circle"></i>
119
+ <span class="tooltip-text">Google Search Console data typically has a 2-3 day delay. Last API sync was completed at 10:42 AM today.</span>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ <div class="flex items-center space-x-3">
124
+ <div class="relative">
125
+ <button id="customizeBtn" class="px-3 py-1.5 bg-white border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition flex items-center text-sm">
126
+ <i class="fas fa-sliders-h mr-2"></i> Customize
127
+ </button>
128
+ <div id="customizeDropdown" class="hidden absolute right-0 mt-2 w-56 bg-white rounded-md shadow-lg z-10 border border-gray-200">
129
+ <div class="p-3 border-b border-gray-200">
130
+ <h3 class="text-sm font-medium text-gray-900">Dashboard Settings</h3>
131
+ </div>
132
+ <div class="p-2">
133
+ <div class="flex items-center justify-between py-2">
134
+ <span class="text-sm text-gray-700">Threshold for "Opportunities"</span>
135
+ <select class="text-xs border border-gray-300 rounded px-2 py-1">
136
+ <option>Positions 11-20</option>
137
+ <option>Positions 8-20</option>
138
+ <option>Positions 11-30</option>
139
+ </select>
140
+ </div>
141
+ <div class="flex items-center justify-between py-2">
142
+ <span class="text-sm text-gray-700">Low CTR threshold</span>
143
+ <select class="text-xs border border-gray-300 rounded px-2 py-1">
144
+ <option>&lt; 5%</option>
145
+ <option>&lt; 3%</option>
146
+ <option>&lt; 8%</option>
147
+ </select>
148
+ </div>
149
+ <div class="flex items-center justify-between py-2">
150
+ <span class="text-sm text-gray-700">Date range</span>
151
+ <select class="text-xs border border-gray-300 rounded px-2 py-1">
152
+ <option>Last 90 days</option>
153
+ <option>Last 30 days</option>
154
+ <option>Last 7 days</option>
155
+ <option>Custom...</option>
156
+ </select>
157
+ </div>
158
+ </div>
159
+ <div class="p-3 border-t border-gray-200 bg-gray-50">
160
+ <button class="text-xs text-blue-600 font-medium">Save as New View</button>
161
+ <button class="text-xs text-gray-600 ml-4">Reset Defaults</button>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ <div class="relative">
166
+ <button id="dataCollectionBtn" class="px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition flex items-center text-sm">
167
+ <i class="fas fa-sync-alt mr-2"></i> Refresh
168
+ </button>
169
+ <div id="dataCollectionDropdown" class="hidden absolute right-0 mt-2 w-64 bg-white rounded-md shadow-lg z-10 border border-gray-200">
170
+ <div class="p-3 border-b border-gray-200">
171
+ <h3 class="text-sm font-medium text-gray-900">Data Collection</h3>
172
+ </div>
173
+ <div class="p-3">
174
+ <button class="w-full flex items-center justify-between py-2 px-2 text-sm text-left text-gray-700 hover:bg-gray-50 rounded">
175
+ <span>
176
+ <i class="fas fa-sync-alt text-blue-500 mr-2"></i>
177
+ Refresh Latest Data
178
+ </span>
179
+ <span class="text-xs text-gray-500">~30 sec</span>
180
+ </button>
181
+ <button class="w-full flex items-center justify-between py-2 px-2 text-sm text-left text-gray-700 hover:bg-gray-50 rounded">
182
+ <span>
183
+ <i class="fas fa-history text-purple-500 mr-2"></i>
184
+ Backfill Historical Data
185
+ </span>
186
+ <span class="text-xs text-gray-500">~5 min</span>
187
+ </button>
188
+ <button class="w-full flex items-center justify-between py-2 px-2 text-sm text-left text-gray-700 hover:bg-gray-50 rounded">
189
+ <span>
190
+ <i class="fas fa-calendar-alt text-green-500 mr-2"></i>
191
+ Set Date Range...
192
+ </span>
193
+ </button>
194
+ </div>
195
+ <div class="p-3 border-t border-gray-200 bg-gray-50 text-xs text-gray-600">
196
+ <p>Next auto-refresh: 12:00 PM</p>
197
+ <div class="flex items-center mt-1">
198
+ <i class="fas fa-circle-info text-blue-500 mr-1"></i>
199
+ <span>Google data delay: 2-3 days</span>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ <button class="px-3 py-1.5 bg-white border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition flex items-center text-sm">
205
+ <i class="fas fa-download mr-2"></i> Export
206
+ </button>
207
+ </div>
208
+ </div>
209
+ <div id="loadingBar" class="loading-bar hidden">
210
+ <div class="loading-bar"></div>
211
+ </div>
212
+ </header>
213
+
214
+ <!-- Main Content -->
215
+ <main class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8 space-y-6">
216
+ <!-- Quick Insights Bar -->
217
+ <div class="bg-white rounded-xl shadow p-5">
218
+ <div class="flex justify-between items-center mb-4">
219
+ <h2 class="text-lg font-semibold text-gray-800">Quick Insights</h2>
220
+ <div class="flex items-center space-x-2">
221
+ <div class="tooltip">
222
+ <i class="fas fa-info-circle text-gray-400"></i>
223
+ <span class="tooltip-text">Insights are calculated based on your current thresholds. Change in Customize settings.</span>
224
+ </div>
225
+ <span class="text-xs text-gray-500">Showing: Last 90 days</span>
226
+ </div>
227
+ </div>
228
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
229
+ <div class="bg-gradient-to-r from-blue-50 to-blue-100 p-4 rounded-lg border border-blue-100">
230
+ <div class="flex items-center justify-between">
231
+ <div>
232
+ <div class="flex items-center">
233
+ <p class="text-xs font-medium text-blue-800 uppercase tracking-wider">Opportunities</p>
234
+ <div class="tooltip ml-1">
235
+ <i class="fas fa-info-circle text-blue-300"></i>
236
+ <span class="tooltip-text">Keywords in positions 11-20 that are close to moving to page 1 (positions 1-10)</span>
237
+ </div>
238
+ </div>
239
+ <p class="mt-1 text-xl font-bold text-blue-900">24</p>
240
+ <p class="text-xs text-blue-700">Keywords near ranking breakthroughs</p>
241
+ </div>
242
+ <div class="w-12 h-12 rounded-full bg-blue-200 flex items-center justify-center">
243
+ <i class="fas fa-bolt text-blue-600"></i>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ <div class="bg-gradient-to-r from-green-50 to-green-100 p-4 rounded-lg border border-green-100">
248
+ <div class="flex items-center justify-between">
249
+ <div>
250
+ <div class="flex items-center">
251
+ <p class="text-xs font-medium text-green-800 uppercase tracking-wider">Improving</p>
252
+ <div class="tooltip ml-1">
253
+ <i class="fas fa-info-circle text-green-300"></i>
254
+ <span class="tooltip-text">Keywords that have improved by at least 3 positions in the last 30 days</span>
255
+ </div>
256
+ </div>
257
+ <p class="mt-1 text-xl font-bold text-green-900">142</p>
258
+ <p class="text-xs text-green-700">Keywords gaining positions</p>
259
+ </div>
260
+ <div class="w-12 h-12 rounded-full bg-green-200 flex items-center justify-center">
261
+ <i class="fas fa-arrow-trend-up text-green-600"></i>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ <div class="bg-gradient-to-r from-yellow-50 to-yellow-100 p-4 rounded-lg border border-yellow-100">
266
+ <div class="flex items-center justify-between">
267
+ <div>
268
+ <div class="flex items-center">
269
+ <p class="text-xs font-medium text-yellow-800 uppercase tracking-wider">Declining</p>
270
+ <div class="tooltip ml-1">
271
+ <i class="fas fa-info-circle text-yellow-300"></i>
272
+ <span class="tooltip-text">Keywords that have dropped by at least 3 positions in the last 30 days</span>
273
+ </div>
274
+ </div>
275
+ <p class="mt-1 text-xl font-bold text-yellow-900">38</p>
276
+ <p class="text-xs text-yellow-700">Keywords losing positions</p>
277
+ </div>
278
+ <div class="w-12 h-12 rounded-full bg-yellow-200 flex items-center justify-center">
279
+ <i class="fas fa-arrow-trend-down text-yellow-600"></i>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ <div class="bg-gradient-to-r from-purple-50 to-purple-100 p-4 rounded-lg border border-purple-100">
284
+ <div class="flex items-center justify-between">
285
+ <div>
286
+ <div class="flex items-center">
287
+ <p class="text-xs font-medium text-purple-800 uppercase tracking-wider">High Potential</p>
288
+ <div class="tooltip ml-1">
289
+ <i class="fas fa-info-circle text-purple-300"></i>
290
+ <span class="tooltip-text">Keywords with high impressions (&gt;1000) but CTR below 5%</span>
291
+ </div>
292
+ </div>
293
+ <p class="mt-1 text-xl font-bold text-purple-900">56</p>
294
+ <p class="text-xs text-purple-700">High-impression, low-CTR keywords</p>
295
+ </div>
296
+ <div class="w-12 h-12 rounded-full bg-purple-200 flex items-center justify-center">
297
+ <i class="fas fa-star text-purple-600"></i>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+
304
+ <!-- Main Dashboard Grid -->
305
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
306
+ <!-- Left Column -->
307
+ <div class="lg:col-span-2 space-y-6">
308
+ <!-- Position Distribution Heatmap -->
309
+ <div class="bg-white rounded-xl shadow overflow-hidden">
310
+ <div class="px-5 py-4 border-b border-gray-200 flex justify-between items-center">
311
+ <h2 class="text-lg font-semibold text-gray-800">Position Distribution Heatmap</h2>
312
+ <div class="flex items-center space-x-2">
313
+ <span class="text-xs text-gray-500">Last 90 days</span>
314
+ <button class="text-blue-600 text-xs font-medium">View All</button>
315
+ </div>
316
+ </div>
317
+ <div class="p-5">
318
+ <div class="flex justify-between mb-2">
319
+ <div class="text-xs text-gray-500">Keyword Position</div>
320
+ <div class="text-xs text-gray-500">Keyword Count</div>
321
+ </div>
322
+ <div class="grid grid-cols-10 gap-1">
323
+ <!-- Generate heatmap cells for positions 1-10 -->
324
+ <div class="heatmap-cell bg-green-100 text-green-800 text-xs font-medium p-2 rounded text-center" title="Position 1: 42 keywords">
325
+ <div>1</div>
326
+ <div class="font-bold">42</div>
327
+ </div>
328
+ <div class="heatmap-cell bg-green-200 text-green-800 text-xs font-medium p-2 rounded text-center" title="Position 2: 38 keywords">
329
+ <div>2</div>
330
+ <div class="font-bold">38</div>
331
+ </div>
332
+ <div class="heatmap-cell bg-green-300 text-green-800 text-xs font-medium p-2 rounded text-center" title="Position 3: 35 keywords">
333
+ <div>3</div>
334
+ <div class="font-bold">35</div>
335
+ </div>
336
+ <div class="heatmap-cell bg-blue-100 text-blue-800 text-xs font-medium p-2 rounded text-center" title="Position 4: 28 keywords">
337
+ <div>4</div>
338
+ <div class="font-bold">28</div>
339
+ </div>
340
+ <div class="heatmap-cell bg-blue-200 text-blue-800 text-xs font-medium p-2 rounded text-center" title="Position 5: 25 keywords">
341
+ <div>5</div>
342
+ <div class="font-bold">25</div>
343
+ </div>
344
+ <div class="heatmap-cell bg-blue-300 text-blue-800 text-xs font-medium p-2 rounded text-center" title="Position 6: 22 keywords">
345
+ <div>6</div>
346
+ <div class="font-bold">22</div>
347
+ </div>
348
+ <div class="heatmap-cell bg-yellow-100 text-yellow-800 text-xs font-medium p-2 rounded text-center" title="Position 7: 20 keywords">
349
+ <div>7</div>
350
+ <div class="font-bold">20</div>
351
+ </div>
352
+ <div class="heatmap-cell bg-yellow-200 text-yellow-800 text-xs font-medium p-2 rounded text-center" title="Position 8: 18 keywords">
353
+ <div>8</div>
354
+ <div class="font-bold">18</div>
355
+ </div>
356
+ <div class="heatmap-cell bg-yellow-300 text-yellow-800 text-xs font-medium p-2 rounded text-center" title="Position 9: 15 keywords">
357
+ <div>9</div>
358
+ <div class="font-bold">15</div>
359
+ </div>
360
+ <div class="heatmap-cell bg-orange-100 text-orange-800 text-xs font-medium p-2 rounded text-center" title="Position 10: 12 keywords">
361
+ <div>10</div>
362
+ <div class="font-bold">12</div>
363
+ </div>
364
+ </div>
365
+ <div class="mt-3 flex justify-between text-xs text-gray-500">
366
+ <span>Top performers</span>
367
+ <span>Needs attention</span>
368
+ </div>
369
+ </div>
370
+ </div>
371
+
372
+ <!-- Keyword Bubble Chart -->
373
+ <div class="bg-white rounded-xl shadow overflow-hidden">
374
+ <div class="px-5 py-4 border-b border-gray-200 flex justify-between items-center">
375
+ <h2 class="text-lg font-semibold text-gray-800">Keyword Impact Map</h2>
376
+ <div class="flex items-center space-x-3">
377
+ <div class="flex items-center text-sm">
378
+ <span class="mr-2 text-gray-500">Size:</span>
379
+ <select class="text-sm border-0 bg-transparent focus:ring-0">
380
+ <option>Impressions</option>
381
+ <option>Clicks</option>
382
+ <option>CTR</option>
383
+ </select>
384
+ </div>
385
+ <button class="text-blue-600 text-sm font-medium">Analyze</button>
386
+ </div>
387
+ </div>
388
+ <div class="p-5">
389
+ <div class="relative h-64 overflow-hidden">
390
+ <!-- Keyword bubbles positioned by rank (x-axis) and trend (y-axis) -->
391
+ <div class="absolute keyword-bubble bg-green-100 text-green-800 text-xs font-medium p-3 rounded-full shadow-md" style="left: 10%; top: 20%; width: 80px; height: 80px;">
392
+ <div class="absolute top-1 right-1 bg-white rounded-full w-5 h-5 flex items-center justify-center text-green-600">
393
+ <i class="fas fa-arrow-up text-xs"></i>
394
+ </div>
395
+ <div class="h-full flex flex-col items-center justify-center">
396
+ <div class="font-bold">SEO tools</div>
397
+ <div>Pos: 4.2</div>
398
+ </div>
399
+ </div>
400
+ <div class="absolute keyword-bubble bg-blue-100 text-blue-800 text-xs font-medium p-3 rounded-full shadow-md" style="left: 30%; top: 40%; width: 60px; height: 60px;">
401
+ <div class="absolute top-1 right-1 bg-white rounded-full w-5 h-5 flex items-center justify-center text-blue-600">
402
+ <i class="fas fa-minus text-xs"></i>
403
+ </div>
404
+ <div class="h-full flex flex-col items-center justify-center">
405
+ <div class="font-bold">Keywords</div>
406
+ <div>Pos: 8.5</div>
407
+ </div>
408
+ </div>
409
+ <div class="absolute keyword-bubble bg-red-100 text-red-800 text-xs font-medium p-3 rounded-full shadow-md" style="left: 70%; top: 60%; width: 100px; height: 100px;">
410
+ <div class="absolute top-1 right-1 bg-white rounded-full w-5 h-5 flex items-center justify-center text-red-600">
411
+ <i class="fas fa-arrow-down text-xs"></i>
412
+ </div>
413
+ <div class="h-full flex flex-col items-center justify-center">
414
+ <div class="font-bold">Content marketing</div>
415
+ <div>Pos: 12.8</div>
416
+ </div>
417
+ </div>
418
+ <div class="absolute keyword-bubble bg-purple-100 text-purple-800 text-xs font-medium p-3 rounded-full shadow-md" style="left: 50%; top: 30%; width: 120px; height: 120px;">
419
+ <div class="absolute top-1 right-1 bg-white rounded-full w-5 h-5 flex items-center justify-center text-purple-600">
420
+ <i class="fas fa-arrow-up text-xs"></i>
421
+ </div>
422
+ <div class="h-full flex flex-col items-center justify-center">
423
+ <div class="font-bold">Google ranking</div>
424
+ <div>Pos: 6.3</div>
425
+ </div>
426
+ </div>
427
+ <!-- Axes -->
428
+ <div class="absolute bottom-0 left-0 right-0 h-px bg-gray-300"></div>
429
+ <div class="absolute left-0 top-0 bottom-0 w-px bg-gray-300"></div>
430
+ <!-- Axis labels -->
431
+ <div class="absolute -bottom-6 left-0 text-xs text-gray-500">Higher Ranking →</div>
432
+ <div class="absolute top-0 -left-8 transform -rotate-90 origin-left text-xs text-gray-500">↑ Better Trend</div>
433
+ </div>
434
+ <div class="mt-4 grid grid-cols-3 gap-3 text-xs">
435
+ <div class="flex items-center">
436
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-1.5"></div>
437
+ <span>Improving</span>
438
+ </div>
439
+ <div class="flex items-center">
440
+ <div class="w-3 h-3 rounded-full bg-blue-500 mr-1.5"></div>
441
+ <span>Stable</span>
442
+ </div>
443
+ <div class="flex items-center">
444
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-1.5"></div>
445
+ <span>Declining</span>
446
+ </div>
447
+ </div>
448
+ </div>
449
+ </div>
450
+
451
+ <!-- Actionable Opportunities -->
452
+ <div class="bg-white rounded-xl shadow overflow-hidden">
453
+ <div class="px-5 py-4 border-b border-gray-200 flex justify-between items-center">
454
+ <h2 class="text-lg font-semibold text-gray-800">Actionable Opportunities</h2>
455
+ <button class="text-blue-600 text-sm font-medium">Create Task Board</button>
456
+ </div>
457
+ <div class="divide-y divide-gray-200">
458
+ <!-- Opportunity 1 -->
459
+ <div class="p-4 hover:bg-gray-50 transition">
460
+ <div class="flex items-start">
461
+ <div class="flex-shrink-0 mt-1">
462
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
463
+ <i class="fas fa-bullseye"></i>
464
+ </div>
465
+ </div>
466
+ <div class="ml-3 flex-1">
467
+ <div class="flex items-center justify-between">
468
+ <h3 class="text-sm font-medium text-gray-900">Keywords near ranking breakthroughs</h3>
469
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
470
+ 24 keywords
471
+ </span>
472
+ </div>
473
+ <p class="text-sm text-gray-500 mt-1">These keywords are on the cusp of moving to page 1 (positions 11-20). Optimizing these could yield significant traffic gains.</p>
474
+ <div class="mt-2 flex space-x-3">
475
+ <button class="inline-flex items-center px-2.5 py-1 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none">
476
+ View Keywords
477
+ </button>
478
+ <button class="inline-flex items-center px-2.5 py-1 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none">
479
+ Create Optimization Task
480
+ </button>
481
+ <button class="inline-flex items-center px-2.5 py-1 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none">
482
+ <i class="fas fa-chart-line mr-1"></i> Benchmark
483
+ </button>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ <!-- Opportunity 2 -->
489
+ <div class="p-4 hover:bg-gray-50 transition">
490
+ <div class="flex items-start">
491
+ <div class="flex-shrink-0 mt-1">
492
+ <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
493
+ <i class="fas fa-magnifying-glass"></i>
494
+ </div>
495
+ </div>
496
+ <div class="ml-3 flex-1">
497
+ <div class="flex items-center justify-between">
498
+ <h3 class="text-sm font-medium text-gray-900">High-impression, low-CTR keywords</h3>
499
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
500
+ 56 keywords
501
+ </span>
502
+ </div>
503
+ <p class="text-sm text-gray-500 mt-1">These keywords get many impressions but few clicks. Improving meta titles and descriptions could boost CTR.</p>
504
+ <div class="mt-2 flex space-x-3">
505
+ <button class="inline-flex items-center px-2.5 py-1 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none">
506
+ View Keywords
507
+ </button>
508
+ <button class="inline-flex items-center px-2.5 py-1 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none">
509
+ Update Meta Tags
510
+ </button>
511
+ <button class="inline-flex items-center px-2.5 py-1 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none">
512
+ <i class="fas fa-users mr-1"></i> Competitor Analysis
513
+ </button>
514
+ </div>
515
+ </div>
516
+ </div>
517
+ </div>
518
+ <!-- Opportunity 3 -->
519
+ <div class="p-4 hover:bg-gray-50 transition">
520
+ <div class="flex items-start">
521
+ <div class="flex-shrink-0 mt-1">
522
+ <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600">
523
+ <i class="fas fa-triangle-exclamation"></i>
524
+ </div>
525
+ </div>
526
+ <div class="ml-3 flex-1">
527
+ <div class="flex items-center justify-between">
528
+ <h3 class="text-sm font-medium text-gray-900">Declining rankings needing attention</h3>
529
+ <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
530
+ 38 keywords
531
+ </span>
532
+ </div>
533
+ <p class="text-sm text-gray-500 mt-1">These previously well-ranking keywords are losing positions. Investigate content quality and backlinks.</p>
534
+ <div class="mt-2 flex space-x-3">
535
+ <button class="inline-flex items-center px-2.5 py-1 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none">
536
+ View Keywords
537
+ </button>
538
+ <button class="inline-flex items-center px-2.5 py-1 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-yellow-600 hover:bg-yellow-700 focus:outline-none">
539
+ Audit Content
540
+ </button>
541
+ <button class="inline-flex items-center px-2.5 py-1 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none">
542
+ <i class="fas fa-history mr-1"></i> Historical Data
543
+ </button>
544
+ </div>
545
+ </div>
546
+ </div>
547
+ </div>
548
+ </div>
549
+ </div>
550
+ </div>
551
+
552
+ <!-- Right Column -->
553
+ <div class="space-y-6">
554
+ <!-- Performance Trends -->
555
+ <div class="bg-white rounded-xl shadow overflow-hidden">
556
+ <div class="px-5 py-4 border-b border-gray-200">
557
+ <h2 class="text-lg font-semibold text-gray-800">Performance Trends</h2>
558
+ </div>
559
+ <div class="p-5">
560
+ <div class="flex items-center justify-between mb-4">
561
+ <div>
562
+ <p class="text-xs text-gray-500">Avg. Position</p>
563
+ <p class="text-xl font-bold text-gray-900">14.3</p>
564
+ <p class="text-xs text-green-600 flex items-center">
565
+ <i class="fas fa-arrow-up mr-1"></i> 1.2 improvement
566
+ </p>
567
+ </div>
568
+ <div class="relative w-16 h-16">
569
+ <svg class="w-full h-full" viewBox="0 0 36 36">
570
+ <circle class="text-gray-200" stroke-width="4" fill="none" cx="18" cy="18" r="16" />
571
+ <circle class="text-green-500" stroke-width="4" stroke-dasharray="100, 100" stroke-dashoffset="30" stroke-linecap="round" fill="none" cx="18" cy="18" r="16" />
572
+ </svg>
573
+ <div class="absolute inset-0 flex items-center justify-center text-sm font-bold text-green-600">30%</div>
574
+ </div>
575
+ </div>
576
+ <div class="h-40">
577
+ <canvas id="trendChart"></canvas>
578
+ </div>
579
+ <div class="mt-4 grid grid-cols-3 gap-2 text-xs">
580
+ <div class="flex items-center">
581
+ <div class="w-2 h-2 rounded-full bg-blue-500 mr-1.5"></div>
582
+ <span>Top 3</span>
583
+ </div>
584
+ <div class="flex items-center">
585
+ <div class="w-2 h-2 rounded-full bg-green-500 mr-1.5"></div>
586
+ <span>Top 10</span>
587
+ </div>
588
+ <div class="flex items-center">
589
+ <div class="w-2 h-2 rounded-full bg-gray-500 mr-1.5"></div>
590
+ <span>All</span>
591
+ </div>
592
+ </div>
593
+ </div>
594
+ </div>
595
+
596
+ <!-- Top Performing Keywords -->
597
+ <div class="bg-white rounded-xl shadow overflow-hidden">
598
+ <div class="px-5 py-4 border-b border-gray-200 flex justify-between items-center">
599
+ <h2 class="text-lg font-semibold text-gray-800">Top Performing Keywords</h2>
600
+ <div class="flex items-center space-x-2">
601
+ <input type="text" placeholder="Filter keywords..." class="text-xs border border-gray-300 rounded px-2 py-1 w-32">
602
+ <button class="text-blue-600 text-sm font-medium">See All</button>
603
+ </div>
604
+ </div>
605
+ <div class="divide-y divide-gray-200 max-h-96 overflow-y-auto scrollbar-thin">
606
+ <!-- Keyword 1 -->
607
+ <div class="p-4 hover:bg-gray-50 transition cursor-pointer group">
608
+ <div class="flex items-center justify-between">
609
+ <div>
610
+ <p class="text-sm font-medium text-gray-900 group-hover:text-blue-600">best seo tools</p>
611
+ <p class="text-xs text-gray-500">Position: 4.2</p>
612
+ </div>
613
+ <div class="flex items-center">
614
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full flex items-center">
615
+ <i class="fas fa-arrow-up mr-1 text-xs"></i> +3.1
616
+ </span>
617
+ </div>
618
+ </div>
619
+ <div class="mt-2 flex items-center justify-between text-xs">
620
+ <div class="flex items-center text-gray-500">
621
+ <i class="fas fa-eye mr-1"></i>
622
+ <span>12.4K</span>
623
+ </div>
624
+ <div class="flex items-center text-gray-500">
625
+ <i class="fas fa-mouse-pointer mr-1"></i>
626
+ <span>1.2K</span>
627
+ </div>
628
+ <div class="flex items-center text-gray-500">
629
+ <i class="fas fa-percent mr-1"></i>
630
+ <span>9.7%</span>
631
+ <div class="tooltip ml-1">
632
+ <i class="fas fa-info-circle"></i>
633
+ <span class="tooltip-text">Industry average CTR for position 4.2: 12.1%</span>
634
+ </div>
635
+ </div>
636
+ </div>
637
+ <div class="mt-2 flex space-x-2">
638
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">Product</span>
639
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">High Priority</span>
640
+ </div>
641
+ </div>
642
+ <!-- Keyword 2 -->
643
+ <div class="p-4 hover:bg-gray-50 transition cursor-pointer group">
644
+ <div class="flex items-center justify-between">
645
+ <div>
646
+ <p class="text-sm font-medium text-gray-900 group-hover:text-blue-600">google ranking factors</p>
647
+ <p class="text-xs text-gray-500">Position: 5.8</p>
648
+ </div>
649
+ <div class="flex items-center">
650
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full flex items-center">
651
+ <i class="fas fa-arrow-up mr-1 text-xs"></i> +1.5
652
+ </span>
653
+ </div>
654
+ </div>
655
+ <div class="mt-2 flex items-center justify-between text-xs">
656
+ <div class="flex items-center text-gray-500">
657
+ <i class="fas fa-eye mr-1"></i>
658
+ <span>9.8K</span>
659
+ </div>
660
+ <div class="flex items-center text-gray-500">
661
+ <i class="fas fa-mouse-pointer mr-1"></i>
662
+ <span>850</span>
663
+ </div>
664
+ <div class="flex items-center text-gray-500">
665
+ <i class="fas fa-percent mr-1"></i>
666
+ <span>8.7%</span>
667
+ <div class="tooltip ml-1">
668
+ <i class="fas fa-info-circle"></i>
669
+ <span class="tooltip-text">Industry average CTR for position 5.8: 9.2%</span>
670
+ </div>
671
+ </div>
672
+ </div>
673
+ <div class="mt-2 flex space-x-2">
674
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">Informational</span>
675
+ </div>
676
+ </div>
677
+ <!-- Keyword 3 -->
678
+ <div class="p-4 hover:bg-gray-50 transition cursor-pointer group">
679
+ <div class="flex items-center justify-between">
680
+ <div>
681
+ <p class="text-sm font-medium text-gray-900 group-hover:text-blue-600">content marketing</p>
682
+ <p class="text-xs text-gray-500">Position: 7.3</p>
683
+ </div>
684
+ <div class="flex items-center">
685
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full flex items-center">
686
+ <i class="fas fa-minus mr-1 text-xs"></i> 0.0
687
+ </span>
688
+ </div>
689
+ </div>
690
+ <div class="mt-2 flex items-center justify-between text-xs">
691
+ <div class="flex items-center text-gray-500">
692
+ <i class="fas fa-eye mr-1"></i>
693
+ <span>8.2K</span>
694
+ </div>
695
+ <div class="flex items-center text-gray-500">
696
+ <i class="fas fa-mouse-pointer mr-1"></i>
697
+ <span>720</span>
698
+ </div>
699
+ <div class="flex items-center text-gray-500">
700
+ <i class="fas fa-percent mr-1"></i>
701
+ <span>8.8%</span>
702
+ <div class="tooltip ml-1">
703
+ <i class="fas fa-info-circle"></i>
704
+ <span class="tooltip-text">Industry average CTR for position 7.3: 6.9%</span>
705
+ </div>
706
+ </div>
707
+ </div>
708
+ <div class="mt-2 flex space-x-2">
709
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">Commercial</span>
710
+ </div>
711
+ </div>
712
+ <!-- Keyword 4 -->
713
+ <div class="p-4 hover:bg-gray-50 transition cursor-pointer group">
714
+ <div class="flex items-center justify-between">
715
+ <div>
716
+ <p class="text-sm font-medium text-gray-900 group-hover:text-blue-600">local seo services</p>
717
+ <p class="text-xs text-gray-500">Position: 3.5</p>
718
+ </div>
719
+ <div class="flex items-center">
720
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-0.5 rounded-full flex items-center">
721
+ <i class="fas fa-arrow-up mr-1 text-xs"></i> +2.7
722
+ </span>
723
+ </div>
724
+ </div>
725
+ <div class="mt-2 flex items-center justify-between text-xs">
726
+ <div class="flex items-center text-gray-500">
727
+ <i class="fas fa-eye mr-1"></i>
728
+ <span>7.5K</span>
729
+ </div>
730
+ <div class="flex items-center text-gray-500">
731
+ <i class="fas fa-mouse-pointer mr-1"></i>
732
+ <span>920</span>
733
+ </div>
734
+ <div class="flex items-center text-gray-500">
735
+ <i class="fas fa-percent mr-1"></i>
736
+ <span>12.3%</span>
737
+ <div class="tooltip ml-1">
738
+ <i class="fas fa-info-circle"></i>
739
+ <span class="tooltip-text">Industry average CTR for position 3.5: 14.1%</span>
740
+ </div>
741
+ </div>
742
+ </div>
743
+ <div class="mt-2 flex space-x-2">
744
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">Service</span>
745
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">High Priority</span>
746
+ </div>
747
+ </div>
748
+ <!-- Keyword 5 -->
749
+ <div class="p-4 hover:bg-gray-50 transition cursor-pointer group">
750
+ <div class="flex items-center justify-between">
751
+ <div>
752
+ <p class="text-sm font-medium text-gray-900 group-hover:text-blue-600">technical seo audit</p>
753
+ <p class="text-xs text-gray-500">Position: 9.1</p>
754
+ </div>
755
+ <div class="flex items-center">
756
+ <span class="text-xs bg-red-100 text-red-800 px-2 py-0.5 rounded-full flex items-center">
757
+ <i class="fas fa-arrow-down mr-1 text-xs"></i> -1.2
758
+ </span>
759
+ </div>
760
+ </div>
761
+ <div class="mt-2 flex items-center justify-between text-xs">
762
+ <div class="flex items-center text-gray-500">
763
+ <i class="fas fa-eye mr-1"></i>
764
+ <span>6.8K</span>
765
+ </div>
766
+ <div class="flex items-center text-gray-500">
767
+ <i class="fas fa-mouse-pointer mr-1"></i>
768
+ <span>510</span>
769
+ </div>
770
+ <div class="flex items-center text-gray-500">
771
+ <i class="fas fa-percent mr-1"></i>
772
+ <span>7.5%</span>
773
+ <div class="tooltip ml-1">
774
+ <i class="fas fa-info-circle"></i>
775
+ <span class="tooltip-text">Industry average CTR for position 9.1: 5.8%</span>
776
+ </div>
777
+ </div>
778
+ </div>
779
+ <div class="mt-2 flex space-x-2">
780
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">Informational</span>
781
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">Needs Review</span>
782
+ </div>
783
+ </div>
784
+ </div>
785
+ </div>
786
+
787
+ <!-- Keyword Groups -->
788
+ <div class="bg-white rounded-xl shadow overflow-hidden">
789
+ <div class="px-5 py-4 border-b border-gray-200 flex justify-between items-center">
790
+ <h2 class="text-lg font-semibold text-gray-800">Keyword Groups</h2>
791
+ <div class="flex items-center space-x-2">
792
+ <button class="text-blue-600 text-sm font-medium">+ New Group</button>
793
+ <button class="text-gray-600 text-sm font-medium">
794
+ <i class="fas fa-ellipsis-v"></i>
795
+ </button>
796
+ </div>
797
+ </div>
798
+ <div class="p-5">
799
+ <div class="space-y-3">
800
+ <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg group">
801
+ <div class="flex items-center">
802
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
803
+ <i class="fas fa-tag"></i>
804
+ </div>
805
+ <div>
806
+ <p class="text-sm font-medium">Brand Terms</p>
807
+ <p class="text-xs text-gray-500">32 keywords</p>
808
+ </div>
809
+ </div>
810
+ <div class="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition">
811
+ <button class="text-blue-500 text-xs">
812
+ <i class="fas fa-pencil-alt"></i>
813
+ </button>
814
+ <button class="text-gray-500 text-xs">
815
+ <i class="fas fa-chart-line"></i>
816
+ </button>
817
+ </div>
818
+ </div>
819
+ <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg group">
820
+ <div class="flex items-center">
821
+ <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-3">
822
+ <i class="fas fa-tag"></i>
823
+ </div>
824
+ <div>
825
+ <p class="text-sm font-medium">Product Terms</p>
826
+ <p class="text-xs text-gray-500">128 keywords</p>
827
+ </div>
828
+ </div>
829
+ <div class="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition">
830
+ <button class="text-blue-500 text-xs">
831
+ <i class="fas fa-pencil-alt"></i>
832
+ </button>
833
+ <button class="text-gray-500 text-xs">
834
+ <i class="fas fa-chart-line"></i>
835
+ </button>
836
+ </div>
837
+ </div>
838
+ <div class="flex items-center justify-between p-3 bg-purple-50 rounded-lg group">
839
+ <div class="flex items-center">
840
+ <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
841
+ <i class="fas fa-tag"></i>
842
+ </div>
843
+ <div>
844
+ <p class="text-sm font-medium">Informational</p>
845
+ <p class="text-xs text-gray-500">84 keywords</p>
846
+ </div>
847
+ </div>
848
+ <div class="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition">
849
+ <button class="text-blue-500 text-xs">
850
+ <i class="fas fa-pencil-alt"></i>
851
+ </button>
852
+ <button class="text-gray-500 text-xs">
853
+ <i class="fas fa-chart-line"></i>
854
+ </button>
855
+ </div>
856
+ </div>
857
+ <div class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg group">
858
+ <div class="flex items-center">
859
+ <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 mr-3">
860
+ <i class="fas fa-tag"></i>
861
+ </div>
862
+ <div>
863
+ <p class="text-sm font-medium">Commercial</p>
864
+ <p class="text-xs text-gray-500">56 keywords</p>
865
+ </div>
866
+ </div>
867
+ <div class="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition">
868
+ <button class="text-blue-500 text-xs">
869
+ <i class="fas fa-pencil-alt"></i>
870
+ </button>
871
+ <button class="text-gray-500 text-xs">
872
+ <i class="fas fa-chart-line"></i>
873
+ </button>
874
+ </div>
875
+ </div>
876
+ </div>
877
+ <div class="mt-4">
878
+ <button class="w-full flex items-center justify-center py-2 px-4 border border-dashed border-gray-300 rounded-md text-sm text-gray-600 hover:bg-gray-50">
879
+ <i class="fas fa-plus mr-2"></i>
880
+ Create Custom Group
881
+ </button>
882
+ </div>
883
+ </div>
884
+ </div>
885
+
886
+ <!-- SEO Tasks -->
887
+ <div class="bg-white rounded-xl shadow overflow-hidden">
888
+ <div class="px-5 py-4 border-b border-gray-200 flex justify-between items-center">
889
+ <h2 class="text-lg font-semibold text-gray-800">SEO Tasks</h2>
890
+ <button class="text-blue-600 text-sm font-medium">+ New Task</button>
891
+ </div>
892
+ <div class="p-5">
893
+ <div class="space-y-4">
894
+ <div class="flex items-start">
895
+ <div class="flex-shrink-0 mt-1">
896
+ <input type="checkbox" class="h-4 w-4 text-blue-600 rounded border-gray-300">
897
+ </div>
898
+ <div class="ml-3">
899
+ <p class="text-sm font-medium text-gray-900">Optimize meta tags for "best seo tools"</p>
900
+ <p class="text-xs text-gray-500 mt-1">Due: Tomorrow • Assigned to: You</p>
901
+ <div class="mt-1 flex items-center space-x-2">
902
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">Content</span>
903
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">High Priority</span>
904
+ </div>
905
+ </div>
906
+ </div>
907
+ <div class="flex items-start">
908
+ <div class="flex-shrink-0 mt-1">
909
+ <input type="checkbox" class="h-4 w-4 text-blue-600 rounded border-gray-300">
910
+ </div>
911
+ <div class="ml-3">
912
+ <p class="text-sm font-medium text-gray-900">Create content for "technical seo audit"</p>
913
+ <p class="text-xs text-gray-500 mt-1">Due: Next week • Assigned to: Sarah</p>
914
+ <div class="mt-1 flex items-center space-x-2">
915
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">Content</span>
916
+ </div>
917
+ </div>
918
+ </div>
919
+ <div class="flex items-start">
920
+ <div class="flex-shrink-0 mt-1">
921
+ <input type="checkbox" class="h-4 w-4 text-blue-600 rounded border-gray-300" checked>
922
+ </div>
923
+ <div class="ml-3 opacity-60">
924
+ <p class="text-sm font-medium text-gray-900 line-through">Backlink audit for declining keywords</p>
925
+ <p class="text-xs text-gray-500 mt-1">Completed: Today</p>
926
+ <div class="mt-1 flex items-center space-x-2">
927
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">Backlinks</span>
928
+ </div>
929
+ </div>
930
+ </div>
931
+ </div>
932
+ <div class="mt-4 text-center">
933
+ <button class="text-blue-600 text-sm font-medium">View All Tasks</button>
934
+ </div>
935
+ </div>
936
+ </div>
937
+ </div>
938
+ </div>
939
+ </main>
940
+ </div>
941
+
942
+ <!-- Onboarding Tour Modal -->
943
+ <div id="onboardingModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
944
+ <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
945
+ <div class="p-6">
946
+ <h3 class="text-lg font-medium text-gray-900 mb-4">Welcome to Search Console Insights</h3>
947
+ <p class="text-sm text-gray-500 mb-6">Let's take a quick tour of your new SEO dashboard to help you get started.</p>
948
+
949
+ <div class="mb-6">
950
+ <div class="flex items-start mb-4">
951
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
952
+ <i class="fas fa-lightbulb"></i>
953
+ </div>
954
+ <div>
955
+ <h4 class="text-sm font-medium text-gray-900">Quick Insights</h4>
956
+ <p class="text-xs text-gray-500 mt-1">Get an instant overview of your most important SEO opportunities and issues.</p>
957
+ </div>
958
+ </div>
959
+ <div class="flex items-start mb-4">
960
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-3">
961
+ <i class="fas fa-chart-line"></i>
962
+ </div>
963
+ <div>
964
+ <h4 class="text-sm font-medium text-gray-900">Performance Trends</h4>
965
+ <p class="text-xs text-gray-500 mt-1">Track how your rankings and traffic are changing over time.</p>
966
+ </div>
967
+ </div>
968
+ <div class="flex items-start">
969
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
970
+ <i class="fas fa-tasks"></i>
971
+ </div>
972
+ <div>
973
+ <h4 class="text-sm font-medium text-gray-900">Actionable Tasks</h4>
974
+ <p class="text-xs text-gray-500 mt-1">Turn insights into action with our built-in task management system.</p>
975
+ </div>
976
+ </div>
977
+ </div>
978
+
979
+ <div class="flex justify-between">
980
+ <button id="skipTourBtn" class="px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
981
+ Skip Tour
982
+ </button>
983
+ <button id="nextTourBtn" class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
984
+ Next
985
+ </button>
986
+ </div>
987
+ </div>
988
+ </div>
989
+ </div>
990
+
991
+ <script>
992
+ // Initialize trend chart
993
+ const trendCtx = document.getElementById('trendChart').getContext('2d');
994
+ const trendChart = new Chart(trendCtx, {
995
+ type: 'line',
996
+ data: {
997
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
998
+ datasets: [
999
+ {
1000
+ label: 'Top 3',
1001
+ data: [4.2, 3.8, 3.5, 3.2, 3.0, 2.8, 2.7],
1002
+ borderColor: '#3B82F6',
1003
+ backgroundColor: 'rgba(59, 130, 246, 0.05)',
1004
+ borderWidth: 2,
1005
+ tension: 0.3,
1006
+ fill: true
1007
+ },
1008
+ {
1009
+ label: 'Top 10',
1010
+ data: [8.5, 8.2, 7.8, 7.5, 7.2, 6.9, 6.7],
1011
+ borderColor: '#10B981',
1012
+ backgroundColor: 'rgba(16, 185, 129, 0.05)',
1013
+ borderWidth: 2,
1014
+ tension: 0.3,
1015
+ fill: true
1016
+ },
1017
+ {
1018
+ label: 'All',
1019
+ data: [15.8, 15.5, 15.2, 14.9, 14.7, 14.5, 14.3],
1020
+ borderColor: '#6B7280',
1021
+ backgroundColor: 'rgba(107, 114, 128, 0.05)',
1022
+ borderWidth: 2,
1023
+ tension: 0.3,
1024
+ fill: true
1025
+ }
1026
+ ]
1027
+ },
1028
+ options: {
1029
+ responsive: true,
1030
+ maintainAspectRatio: false,
1031
+ plugins: {
1032
+ legend: {
1033
+ display: false
1034
+ },
1035
+ tooltip: {
1036
+ mode: 'index',
1037
+ intersect: false
1038
+ }
1039
+ },
1040
+ scales: {
1041
+ y: {
1042
+ reverse: true,
1043
+ beginAtZero: false,
1044
+ ticks: {
1045
+ stepSize: 5
1046
+ }
1047
+ }
1048
+ },
1049
+ interaction: {
1050
+ mode: 'nearest',
1051
+ axis: 'x',
1052
+ intersect: false
1053
+ }
1054
+ }
1055
+ });
1056
+
1057
+ // Toggle customize dropdown
1058
+ document.getElementById('customizeBtn').addEventListener('click', function(e) {
1059
+ e.stopPropagation();
1060
+ document.getElementById('customizeDropdown').classList.toggle('hidden');
1061
+ document.getElementById('dataCollectionDropdown').classList.add('hidden');
1062
+ });
1063
+
1064
+ // Toggle data collection dropdown
1065
+ document.getElementById('dataCollectionBtn').addEventListener('click', function(e) {
1066
+ e.stopPropagation();
1067
+ document.getElementById('dataCollectionDropdown').classList.toggle('hidden');
1068
+ document.getElementById('customizeDropdown').classList.add('hidden');
1069
+ });
1070
+
1071
+ // Close dropdowns when clicking outside
1072
+ document.addEventListener('click', function() {
1073
+ document.getElementById('customizeDropdown').classList.add('hidden');
1074
+ document.getElementById('dataCollectionDropdown').classList.add('hidden');
1075
+ });
1076
+
1077
+ // Simulate loading state for refresh button
1078
+ document.querySelector('button:has(.fa-sync-alt)').addEventListener('click', function() {
1079
+ const btn = this;
1080
+ const icon = btn.querySelector('i');
1081
+ const loadingBar = document.getElementById('loadingBar');
1082
+
1083
+ btn.disabled = true;
1084
+ icon.classList.add('animate-spin');
1085
+ loadingBar.classList.remove('hidden');
1086
+
1087
+ setTimeout(function() {
1088
+ btn.disabled = false;
1089
+ icon.classList.remove('animate-spin');
1090
+ loadingBar.classList.add('hidden');
1091
+
1092
+ // Show notification
1093
+ const notification = document.createElement('div');
1094
+ notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-md shadow-lg flex items-center';
1095
+ notification.innerHTML = `
1096
+ <i class="fas fa-check-circle mr-2"></i>
1097
+ <span>Data refreshed successfully</span>
1098
+ `;
1099
+ document.body.appendChild(notification);
1100
+
1101
+ setTimeout(() => {
1102
+ notification.classList.add('opacity-0', 'transition-opacity', 'duration-300');
1103
+ setTimeout(() => notification.remove(), 300);
1104
+ }, 3000);
1105
+ }, 1500);
1106
+ });
1107
+
1108
+ // Bubble chart interaction
1109
+ document.querySelectorAll('.keyword-bubble').forEach(bubble => {
1110
+ bubble.addEventListener('click', function() {
1111
+ // In a real app, you would show detailed info for this keyword
1112
+ console.log('Selected keyword:', this.querySelector('div.font-bold').textContent);
1113
+ });
1114
+ });
1115
+
1116
+ // Show onboarding tour for new users
1117
+ document.addEventListener('DOMContentLoaded', function() {
1118
+ // Check if user has seen tour before
1119
+ if (!localStorage.getItem('seenTour')) {
1120
+ document.getElementById('onboardingModal').classList.remove('hidden');
1121
+ }
1122
+ });
1123
+
1124
+ // Skip tour button
1125
+ document.getElementById('skipTourBtn').addEventListener('click', function() {
1126
+ document.getElementById('onboardingModal').classList.add('hidden');
1127
+ localStorage.setItem('seenTour', 'true');
1128
+ });
1129
+
1130
+ // Next tour button
1131
+ document.getElementById('nextTourBtn').addEventListener('click', function() {
1132
+ document.getElementById('onboardingModal').classList.add('hidden');
1133
+ localStorage.setItem('seenTour', 'true');
1134
+ // In a real app, you would advance to the next step of the tour
1135
+ });
1136
+ </script>
1137
+ <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/ranking-dashboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1138
+ </html>