Hugging Face's logo

Spaces:
stakmodsco
/
rank-decode-website
Running

App Files Community
stakmodsco commited on
Commit
31a12c0
·
verified ·
1 Parent(s): 783e40c

instead of keyword/niche. Use input a keyword or website URL - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1004 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Rank Decode Website
3
- emoji: 📊
4
- colorFrom: gray
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: rank-decode-website
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: purple
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,1004 @@
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>RankDecode - SEO Strategy Analyzer</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
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
13
+ }
14
+ .keyword-tag {
15
+ transition: all 0.3s ease;
16
+ }
17
+ .keyword-tag:hover {
18
+ transform: translateY(-2px);
19
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
20
+ }
21
+ .seo-score {
22
+ position: relative;
23
+ width: 120px;
24
+ height: 120px;
25
+ }
26
+ .seo-score-circle {
27
+ transform: rotate(-90deg);
28
+ transform-origin: 50% 50%;
29
+ transition: stroke-dashoffset 0.6s ease;
30
+ }
31
+ .tab-content {
32
+ display: none;
33
+ }
34
+ .tab-content.active {
35
+ display: block;
36
+ animation: fadeIn 0.5s ease;
37
+ }
38
+ @keyframes fadeIn {
39
+ from { opacity: 0; }
40
+ to { opacity: 1; }
41
+ }
42
+ .compare-card {
43
+ transition: all 0.3s ease;
44
+ }
45
+ .compare-card:hover {
46
+ transform: translateY(-5px);
47
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
48
+ }
49
+ </style>
50
+ </head>
51
+ <body class="bg-gray-50">
52
+ <!-- Header -->
53
+ <header class="gradient-bg text-white shadow-lg">
54
+ <div class="container mx-auto px-4 py-6">
55
+ <div class="flex justify-between items-center">
56
+ <div class="flex items-center space-x-2">
57
+ <i class="fas fa-chart-line text-2xl"></i>
58
+ <h1 class="text-2xl font-bold">RankDecode</h1>
59
+ </div>
60
+ <nav class="hidden md:flex space-x-6">
61
+ <a href="#" class="hover:text-gray-200 font-medium">Home</a>
62
+ <a href="#" class="hover:text-gray-200 font-medium">Features</a>
63
+ <a href="#" class="hover:text-gray-200 font-medium">Pricing</a>
64
+ <a href="#" class="hover:text-gray-200 font-medium">Blog</a>
65
+ </nav>
66
+ <button class="md:hidden text-xl">
67
+ <i class="fas fa-bars"></i>
68
+ </button>
69
+ </div>
70
+ </div>
71
+ </header>
72
+
73
+ <!-- Main Content -->
74
+ <main class="container mx-auto px-4 py-8">
75
+ <!-- Search Section -->
76
+ <section class="mb-12">
77
+ <div class="bg-white rounded-xl shadow-md p-6">
78
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Website SEO Analyzer</h2>
79
+ <p class="text-gray-600 mb-6">Enter a keyword to analyze top-ranking sites or a URL to analyze a specific website.</p>
80
+
81
+ <div class="flex flex-col md:flex-row gap-4">
82
+ <div class="flex-1">
83
+ <label for="keyword" class="block text-sm font-medium text-gray-700 mb-1">Keyword or Website URL</label>
84
+ <input type="text" id="keyword" placeholder="e.g. best running shoes or https://example.com" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-transparent">
85
+ </div>
86
+ <div class="flex-1">
87
+ <label for="location" class="block text-sm font-medium text-gray-700 mb-1">Location</label>
88
+ <select id="location" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-transparent">
89
+ <option value="us">United States</option>
90
+ <option value="uk">United Kingdom</option>
91
+ <option value="ca">Canada</option>
92
+ <option value="au">Australia</option>
93
+ <option value="in">India</option>
94
+ </select>
95
+ </div>
96
+ <div class="flex items-end">
97
+ <button id="analyzeBtn" class="w-full md:w-auto px-6 py-3 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition duration-300 flex items-center justify-center">
98
+ <i class="fas fa-search mr-2"></i> Analyze
99
+ </button>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </section>
104
+
105
+ <!-- Analysis Dashboard -->
106
+ <section id="dashboard" class="hidden">
107
+ <div class="flex justify-between items-center mb-6">
108
+ <h2 class="text-2xl font-bold text-gray-800">SEO Analysis Dashboard</h2>
109
+ <div class="flex space-x-3">
110
+ <button id="exportCsv" class="px-4 py-2 bg-white border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 flex items-center">
111
+ <i class="fas fa-file-csv mr-2"></i> CSV
112
+ </button>
113
+ <button id="exportPdf" class="px-4 py-2 bg-white border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 flex items-center">
114
+ <i class="fas fa-file-pdf mr-2"></i> PDF
115
+ </button>
116
+ <button id="compareBtn" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 flex items-center">
117
+ <i class="fas fa-exchange-alt mr-2"></i> Compare
118
+ </button>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Website Info -->
123
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6">
124
+ <div class="flex flex-col md:flex-row gap-6">
125
+ <div class="flex-shrink-0">
126
+ <div class="w-20 h-20 rounded-lg bg-gray-100 flex items-center justify-center overflow-hidden">
127
+ <img id="siteFavicon" src="https://www.google.com/s2/favicons?domain=example.com" alt="Favicon" class="w-12 h-12">
128
+ </div>
129
+ </div>
130
+ <div class="flex-1">
131
+ <div class="flex flex-col md:flex-row md:justify-between md:items-start">
132
+ <div>
133
+ <h3 id="siteTitle" class="text-xl font-bold text-gray-800">Website Title</h3>
134
+ <a id="siteUrl" href="#" target="_blank" class="text-purple-600 hover:underline">example.com</a>
135
+ </div>
136
+ <div class="mt-4 md:mt-0 flex items-center">
137
+ <div class="seo-score mr-4">
138
+ <svg viewBox="0 0 36 36" class="w-full h-full">
139
+ <path d="M18 2.0845
140
+ a 15.9155 15.9155 0 0 1 0 31.831
141
+ a 15.9155 15.9155 0 0 1 0 -31.831"
142
+ fill="none"
143
+ stroke="#e6e6e6"
144
+ stroke-width="3"
145
+ stroke-dasharray="100, 100"
146
+ />
147
+ <path id="seoScoreCircle" class="seo-score-circle"
148
+ d="M18 2.0845
149
+ a 15.9155 15.9155 0 0 1 0 31.831
150
+ a 15.9155 15.9155 0 0 1 0 -31.831"
151
+ fill="none"
152
+ stroke="#4f46e5"
153
+ stroke-width="3"
154
+ stroke-dasharray="75, 100"
155
+ />
156
+ </svg>
157
+ <div class="absolute inset-0 flex flex-col items-center justify-center">
158
+ <span id="seoScoreValue" class="text-2xl font-bold text-gray-800">75</span>
159
+ <span class="text-xs text-gray-500">SEO Score</span>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ <div class="mt-4">
165
+ <div class="flex flex-wrap gap-2">
166
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm font-medium rounded-full">High Authority</span>
167
+ <span class="px-3 py-1 bg-green-100 text-green-800 text-sm font-medium rounded-full">Mobile Friendly</span>
168
+ <span class="px-3 py-1 bg-yellow-100 text-yellow-800 text-sm font-medium rounded-full">Fast Loading</span>
169
+ <span class="px-3 py-1 bg-purple-100 text-purple-800 text-sm font-medium rounded-full">SSL Secure</span>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Tabs Navigation -->
177
+ <div class="flex overflow-x-auto mb-6 bg-white rounded-lg shadow-sm">
178
+ <button class="tab-btn px-6 py-3 font-medium text-purple-600 border-b-2 border-purple-600" data-tab="overview">Overview</button>
179
+ <button class="tab-btn px-6 py-3 font-medium text-gray-500 hover:text-gray-700" data-tab="keywords">Keywords</button>
180
+ <button class="tab-btn px-6 py-3 font-medium text-gray-500 hover:text-gray-700" data-tab="content">Content</button>
181
+ <button class="tab-btn px-6 py-3 font-medium text-gray-500 hover:text-gray-700" data-tab="backlinks">Backlinks</button>
182
+ <button class="tab-btn px-6 py-3 font-medium text-gray-500 hover:text-gray-700" data-tab="technical">Technical</button>
183
+ <button class="tab-btn px-6 py-3 font-medium text-gray-500 hover:text-gray-700" data-tab="insights">Actionable Insights</button>
184
+ </div>
185
+
186
+ <!-- Tab Contents -->
187
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6">
188
+ <!-- Overview Tab -->
189
+ <div id="overview" class="tab-content active">
190
+ <h3 class="text-lg font-bold text-gray-800 mb-4">SEO Overview</h3>
191
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
192
+ <div class="bg-gray-50 p-4 rounded-lg">
193
+ <div class="flex items-center justify-between">
194
+ <div>
195
+ <p class="text-sm text-gray-500">Domain Authority</p>
196
+ <p class="text-2xl font-bold text-gray-800">78</p>
197
+ </div>
198
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
199
+ <i class="fas fa-globe"></i>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ <div class="bg-gray-50 p-4 rounded-lg">
204
+ <div class="flex items-center justify-between">
205
+ <div>
206
+ <p class="text-sm text-gray-500">Page Authority</p>
207
+ <p class="text-2xl font-bold text-gray-800">65</p>
208
+ </div>
209
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
210
+ <i class="fas fa-file-alt"></i>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ <div class="bg-gray-50 p-4 rounded-lg">
215
+ <div class="flex items-center justify-between">
216
+ <div>
217
+ <p class="text-sm text-gray-500">Backlinks</p>
218
+ <p class="text-2xl font-bold text-gray-800">1,245</p>
219
+ </div>
220
+ <div class="p-3 rounded-full bg-purple-100 text-purple-600">
221
+ <i class="fas fa-link"></i>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ <div class="bg-gray-50 p-4 rounded-lg">
226
+ <div class="flex items-center justify-between">
227
+ <div>
228
+ <p class="text-sm text-gray-500">Organic Traffic</p>
229
+ <p class="text-2xl font-bold text-gray-800">45.2K</p>
230
+ </div>
231
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
232
+ <i class="fas fa-users"></i>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
239
+ <div class="bg-gray-50 p-4 rounded-lg">
240
+ <h4 class="font-medium text-gray-800 mb-3">Traffic Sources</h4>
241
+ <canvas id="trafficSourcesChart" height="250"></canvas>
242
+ </div>
243
+ <div class="bg-gray-50 p-4 rounded-lg">
244
+ <h4 class="font-medium text-gray-800 mb-3">Keyword Positions</h4>
245
+ <canvas id="keywordPositionsChart" height="250"></canvas>
246
+ </div>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- Keywords Tab -->
251
+ <div id="keywords" class="tab-content">
252
+ <h3 class="text-lg font-bold text-gray-800 mb-4">Keyword Analysis</h3>
253
+
254
+ <div class="mb-6">
255
+ <h4 class="font-medium text-gray-800 mb-3">Primary Keywords</h4>
256
+ <div class="flex flex-wrap gap-2 mb-4">
257
+ <span class="keyword-tag px-3 py-1 bg-purple-600 text-white text-sm font-medium rounded-full">best running shoes</span>
258
+ <span class="keyword-tag px-3 py-1 bg-purple-500 text-white text-sm font-medium rounded-full">top running shoes 2023</span>
259
+ <span class="keyword-tag px-3 py-1 bg-purple-400 text-white text-sm font-medium rounded-full">running shoes for men</span>
260
+ </div>
261
+ </div>
262
+
263
+ <div class="mb-6">
264
+ <h4 class="font-medium text-gray-800 mb-3">Secondary Keywords</h4>
265
+ <div class="flex flex-wrap gap-2">
266
+ <span class="keyword-tag px-3 py-1 bg-blue-100 text-blue-800 text-sm font-medium rounded-full">best cushioned running shoes</span>
267
+ <span class="keyword-tag px-3 py-1 bg-blue-100 text-blue-800 text-sm font-medium rounded-full">lightweight running shoes</span>
268
+ <span class="keyword-tag px-3 py-1 bg-blue-100 text-blue-800 text-sm font-medium rounded-full">running shoes for flat feet</span>
269
+ <span class="keyword-tag px-3 py-1 bg-blue-100 text-blue-800 text-sm font-medium rounded-full">best trail running shoes</span>
270
+ <span class="keyword-tag px-3 py-1 bg-blue-100 text-blue-800 text-sm font-medium rounded-full">running shoes for women</span>
271
+ </div>
272
+ </div>
273
+
274
+ <div class="bg-gray-50 p-4 rounded-lg">
275
+ <h4 class="font-medium text-gray-800 mb-3">Keyword Frequency & Positions</h4>
276
+ <div class="overflow-x-auto">
277
+ <table class="min-w-full divide-y divide-gray-200">
278
+ <thead class="bg-gray-100">
279
+ <tr>
280
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Keyword</th>
281
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Position</th>
282
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Volume</th>
283
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Difficulty</th>
284
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CPC</th>
285
+ </tr>
286
+ </thead>
287
+ <tbody class="bg-white divide-y divide-gray-200">
288
+ <tr>
289
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">best running shoes</td>
290
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3</td>
291
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">22,000</td>
292
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Hard</td>
293
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$2.45</td>
294
+ </tr>
295
+ <tr>
296
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">top running shoes 2023</td>
297
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5</td>
298
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12,500</td>
299
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Medium</td>
300
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$3.10</td>
301
+ </tr>
302
+ <tr>
303
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">running shoes for men</td>
304
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8</td>
305
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">18,300</td>
306
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Hard</td>
307
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$2.75</td>
308
+ </tr>
309
+ </tbody>
310
+ </table>
311
+ </div>
312
+ </div>
313
+ </div>
314
+
315
+ <!-- Content Tab -->
316
+ <div id="content" class="tab-content">
317
+ <h3 class="text-lg font-bold text-gray-800 mb-4">Content Analysis</h3>
318
+
319
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
320
+ <div class="bg-gray-50 p-4 rounded-lg">
321
+ <h4 class="font-medium text-gray-800 mb-3">Content Metrics</h4>
322
+ <div class="space-y-4">
323
+ <div>
324
+ <div class="flex justify-between mb-1">
325
+ <span class="text-sm font-medium text-gray-700">Word Count</span>
326
+ <span class="text-sm font-medium text-gray-700">2,450</span>
327
+ </div>
328
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
329
+ <div class="bg-blue-600 h-2.5 rounded-full" style="width: 85%"></div>
330
+ </div>
331
+ <p class="text-xs text-gray-500 mt-1">Above average for this niche (avg: 1,800 words)</p>
332
+ </div>
333
+ <div>
334
+ <div class="flex justify-between mb-1">
335
+ <span class="text-sm font-medium text-gray-700">Readability</span>
336
+ <span class="text-sm font-medium text-gray-700">Easy</span>
337
+ </div>
338
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
339
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 90%"></div>
340
+ </div>
341
+ <p class="text-xs text-gray-500 mt-1">Flesch-Kincaid Grade Level: 6.2</p>
342
+ </div>
343
+ <div>
344
+ <div class="flex justify-between mb-1">
345
+ <span class="text-sm font-medium text-gray-700">Keyword Density</span>
346
+ <span class="text-sm font-medium text-gray-700">1.8%</span>
347
+ </div>
348
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
349
+ <div class="bg-purple-600 h-2.5 rounded-full" style="width: 65%"></div>
350
+ </div>
351
+ <p class="text-xs text-gray-500 mt-1">Optimal range (1-2%)</p>
352
+ </div>
353
+ </div>
354
+ </div>
355
+
356
+ <div class="bg-gray-50 p-4 rounded-lg">
357
+ <h4 class="font-medium text-gray-800 mb-3">Content Structure</h4>
358
+ <div class="space-y-3">
359
+ <div class="flex items-center">
360
+ <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3">
361
+ <i class="fas fa-check"></i>
362
+ </div>
363
+ <span class="text-sm text-gray-700">H1 tag contains primary keyword</span>
364
+ </div>
365
+ <div class="flex items-center">
366
+ <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3">
367
+ <i class="fas fa-check"></i>
368
+ </div>
369
+ <span class="text-sm text-gray-700">Multiple H2 tags with related keywords</span>
370
+ </div>
371
+ <div class="flex items-center">
372
+ <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3">
373
+ <i class="fas fa-check"></i>
374
+ </div>
375
+ <span class="text-sm text-gray-700">Bullet points and numbered lists used</span>
376
+ </div>
377
+ <div class="flex items-center">
378
+ <div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mr-3">
379
+ <i class="fas fa-exclamation"></i>
380
+ </div>
381
+ <span class="text-sm text-gray-700">Could add more internal links (currently 3)</span>
382
+ </div>
383
+ <div class="flex items-center">
384
+ <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3">
385
+ <i class="fas fa-check"></i>
386
+ </div>
387
+ <span class="text-sm text-gray-700">Images have alt text with keywords</span>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ </div>
392
+
393
+ <div class="bg-gray-50 p-4 rounded-lg">
394
+ <h4 class="font-medium text-gray-800 mb-3">Meta Tags Analysis</h4>
395
+ <div class="space-y-4">
396
+ <div>
397
+ <p class="text-sm font-medium text-gray-700 mb-1">Title Tag</p>
398
+ <p class="text-sm text-gray-600 bg-white p-3 rounded border border-gray-200">Best Running Shoes 2023 - Top Picks & Reviews | ExampleSite</p>
399
+ <p class="text-xs text-gray-500 mt-1">Length: 58 characters (optimal: 50-60)</p>
400
+ </div>
401
+ <div>
402
+ <p class="text-sm font-medium text-gray-700 mb-1">Meta Description</p>
403
+ <p class="text-sm text-gray-600 bg-white p-3 rounded border border-gray-200">Discover the best running shoes for 2023 with our expert reviews. We've tested top brands like Nike, Adidas, and Brooks to help you find your perfect pair.</p>
404
+ <p class="text-xs text-gray-500 mt-1">Length: 158 characters (optimal: 120-160)</p>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </div>
409
+
410
+ <!-- Backlinks Tab -->
411
+ <div id="backlinks" class="tab-content">
412
+ <h3 class="text-lg font-bold text-gray-800 mb-4">Backlink Profile</h3>
413
+
414
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
415
+ <div class="bg-gray-50 p-4 rounded-lg">
416
+ <h4 class="font-medium text-gray-800 mb-3">Total Backlinks</h4>
417
+ <p class="text-3xl font-bold text-gray-800">1,245</p>
418
+ <p class="text-sm text-gray-500 mt-1">+12% from last month</p>
419
+ </div>
420
+ <div class="bg-gray-50 p-4 rounded-lg">
421
+ <h4 class="font-medium text-gray-800 mb-3">Referring Domains</h4>
422
+ <p class="text-3xl font-bold text-gray-800">328</p>
423
+ <p class="text-sm text-gray-500 mt-1">+8% from last month</p>
424
+ </div>
425
+ <div class="bg-gray-50 p-4 rounded-lg">
426
+ <h4 class="font-medium text-gray-800 mb-3">Domain Rating</h4>
427
+ <p class="text-3xl font-bold text-gray-800">78</p>
428
+ <p class="text-sm text-gray-500 mt-1">Top 5% of websites</p>
429
+ </div>
430
+ </div>
431
+
432
+ <div class="bg-gray-50 p-4 rounded-lg mb-6">
433
+ <h4 class="font-medium text-gray-800 mb-3">Backlink Types</h4>
434
+ <canvas id="backlinkTypesChart" height="200"></canvas>
435
+ </div>
436
+
437
+ <div class="bg-gray-50 p-4 rounded-lg">
438
+ <h4 class="font-medium text-gray-800 mb-3">Top Referring Domains</h4>
439
+ <div class="overflow-x-auto">
440
+ <table class="min-w-full divide-y divide-gray-200">
441
+ <thead class="bg-gray-100">
442
+ <tr>
443
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Domain</th>
444
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Authority</th>
445
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Links</th>
446
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
447
+ </tr>
448
+ </thead>
449
+ <tbody class="bg-white divide-y divide-gray-200">
450
+ <tr>
451
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">runnersworld.com</td>
452
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">92</td>
453
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5</td>
454
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Editorial</td>
455
+ </tr>
456
+ <tr>
457
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">healthline.com</td>
458
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">90</td>
459
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3</td>
460
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Editorial</td>
461
+ </tr>
462
+ <tr>
463
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">medium.com</td>
464
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">86</td>
465
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12</td>
466
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Guest Post</td>
467
+ </tr>
468
+ </tbody>
469
+ </table>
470
+ </div>
471
+ </div>
472
+ </div>
473
+
474
+ <!-- Technical Tab -->
475
+ <div id="technical" class="tab-content">
476
+ <h3 class="text-lg font-bold text-gray-800 mb-4">Technical SEO Analysis</h3>
477
+
478
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
479
+ <div class="bg-gray-50 p-4 rounded-lg">
480
+ <h4 class="font-medium text-gray-800 mb-3">Performance</h4>
481
+ <div class="space-y-4">
482
+ <div>
483
+ <div class="flex justify-between mb-1">
484
+ <span class="text-sm font-medium text-gray-700">Page Speed (Mobile)</span>
485
+ <span class="text-sm font-medium text-gray-700">78/100</span>
486
+ </div>
487
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
488
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 78%"></div>
489
+ </div>
490
+ <p class="text-xs text-gray-500 mt-1">Faster than 65% of pages</p>
491
+ </div>
492
+ <div>
493
+ <div class="flex justify-between mb-1">
494
+ <span class="text-sm font-medium text-gray-700">Page Speed (Desktop)</span>
495
+ <span class="text-sm font-medium text-gray-700">92/100</span>
496
+ </div>
497
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
498
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 92%"></div>
499
+ </div>
500
+ <p class="text-xs text-gray-500 mt-1">Faster than 88% of pages</p>
501
+ </div>
502
+ <div>
503
+ <div class="flex justify-between mb-1">
504
+ <span class="text-sm font-medium text-gray-700">Time to First Byte</span>
505
+ <span class="text-sm font-medium text-gray-700">0.8s</span>
506
+ </div>
507
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
508
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 85%"></div>
509
+ </div>
510
+ <p class="text-xs text-gray-500 mt-1">Good (under 1s is optimal)</p>
511
+ </div>
512
+ </div>
513
+ </div>
514
+
515
+ <div class="bg-gray-50 p-4 rounded-lg">
516
+ <h4 class="font-medium text-gray-800 mb-3">Mobile Usability</h4>
517
+ <div class="space-y-3">
518
+ <div class="flex items-center">
519
+ <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3">
520
+ <i class="fas fa-check"></i>
521
+ </div>
522
+ <span class="text-sm text-gray-700">Mobile-friendly design</span>
523
+ </div>
524
+ <div class="flex items-center">
525
+ <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3">
526
+ <i class="fas fa-check"></i>
527
+ </div>
528
+ <span class="text-sm text-gray-700">Responsive layout</span>
529
+ </div>
530
+ <div class="flex items-center">
531
+ <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3">
532
+ <i class="fas fa-check"></i>
533
+ </div>
534
+ <span class="text-sm text-gray-700">Proper viewport configuration</span>
535
+ </div>
536
+ <div class="flex items-center">
537
+ <div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mr-3">
538
+ <i class="fas fa-exclamation"></i>
539
+ </div>
540
+ <span class="text-sm text-gray-700">Some tap targets too close</span>
541
+ </div>
542
+ <div class="flex items-center">
543
+ <div class="p-2 rounded-full bg-green-100 text-green-600 mr-3">
544
+ <i class="fas fa-check"></i>
545
+ </div>
546
+ <span class="text-sm text-gray-700">Font sizes legible</span>
547
+ </div>
548
+ </div>
549
+ </div>
550
+ </div>
551
+
552
+ <div class="bg-gray-50 p-4 rounded-lg">
553
+ <h4 class="font-medium text-gray-800 mb-3">Indexability & Crawlability</h4>
554
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
555
+ <div class="bg-white p-3 rounded border border-gray-200">
556
+ <p class="text-sm font-medium text-gray-700 mb-1">Indexed Pages</p>
557
+ <p class="text-xl font-bold text-gray-800">1,024</p>
558
+ </div>
559
+ <div class="bg-white p-3 rounded border border-gray-200">
560
+ <p class="text-sm font-medium text-gray-700 mb-1">Blocked by Robots.txt</p>
561
+ <p class="text-xl font-bold text-gray-800">12</p>
562
+ </div>
563
+ <div class="bg-white p-3 rounded border border-gray-200">
564
+ <p class="text-sm font-medium text-gray-700 mb-1">Noindex Pages</p>
565
+ <p class="text-xl font-bold text-gray-800">8</p>
566
+ </div>
567
+ </div>
568
+ </div>
569
+ </div>
570
+
571
+ <!-- Insights Tab -->
572
+ <div id="insights" class="tab-content">
573
+ <h3 class="text-lg font-bold text-gray-800 mb-4">Actionable SEO Insights</h3>
574
+
575
+ <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6">
576
+ <div class="flex">
577
+ <div class="flex-shrink-0">
578
+ <i class="fas fa-lightbulb text-blue-500 text-xl"></i>
579
+ </div>
580
+ <div class="ml-3">
581
+ <h4 class="text-sm font-medium text-blue-800">Key Opportunity</h4>
582
+ <div class="mt-2 text-sm text-blue-700">
583
+ <p>This page ranks for several high-volume keywords but could improve its position by adding more long-tail variations like "best running shoes for flat feet women" and "best cushioned running shoes for heavy runners".</p>
584
+ </div>
585
+ </div>
586
+ </div>
587
+ </div>
588
+
589
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
590
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
591
+ <h4 class="font-medium text-gray-800 mb-3 flex items-center">
592
+ <span class="w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-2">
593
+ <i class="fas fa-check text-xs"></i>
594
+ </span>
595
+ What They're Doing Well
596
+ </h4>
597
+ <ul class="space-y-3">
598
+ <li class="flex items-start">
599
+ <span class="text-green-500 mr-2">✓</span>
600
+ <span class="text-sm text-gray-700">Comprehensive content covering all aspects of running shoes (2,450 words)</span>
601
+ </li>
602
+ <li class="flex items-start">
603
+ <span class="text-green-500 mr-2">✓</span>
604
+ <span class="text-sm text-gray-700">Strong backlink profile with links from authoritative domains</span>
605
+ </li>
606
+ <li class="flex items-start">
607
+ <span class="text-green-500 mr-2">���</span>
608
+ <span class="text-sm text-gray-700">Excellent content structure with clear headings and sections</span>
609
+ </li>
610
+ <li class="flex items-start">
611
+ <span class="text-green-500 mr-2">✓</span>
612
+ <span class="text-sm text-gray-700">Optimized meta tags with primary keywords</span>
613
+ </li>
614
+ </ul>
615
+ </div>
616
+
617
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
618
+ <h4 class="font-medium text-gray-800 mb-3 flex items-center">
619
+ <span class="w-6 h-6 rounded-full bg-yellow-100 text-yellow-600 flex items-center justify-center mr-2">
620
+ <i class="fas fa-exclamation text-xs"></i>
621
+ </span>
622
+ Areas for Improvement
623
+ </h4>
624
+ <ul class="space-y-3">
625
+ <li class="flex items-start">
626
+ <span class="text-yellow-500 mr-2">•</span>
627
+ <span class="text-sm text-gray-700">Add more internal links to related content on the site</span>
628
+ </li>
629
+ <li class="flex items-start">
630
+ <span class="text-yellow-500 mr-2">•</span>
631
+ <span class="text-sm text-gray-700">Include more long-tail keyword variations in content</span>
632
+ </li>
633
+ <li class="flex items-start">
634
+ <span class="text-yellow-500 mr-2">•</span>
635
+ <span class="text-sm text-gray-700">Improve mobile page speed (currently 78/100)</span>
636
+ </li>
637
+ <li class="flex items-start">
638
+ <span class="text-yellow-500 mr-2">•</span>
639
+ <span class="text-sm text-gray-700">Add schema markup for product reviews</span>
640
+ </li>
641
+ </ul>
642
+ </div>
643
+ </div>
644
+
645
+ <div class="bg-white border border-gray-200 rounded-lg p-4">
646
+ <h4 class="font-medium text-gray-800 mb-3">Recommended Actions</h4>
647
+ <div class="space-y-4">
648
+ <div class="flex items-start">
649
+ <div class="flex-shrink-0 mt-1">
650
+ <span class="w-6 h-6 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center">
651
+ <span class="text-xs font-bold">1</span>
652
+ </span>
653
+ </div>
654
+ <div class="ml-3">
655
+ <p class="text-sm font-medium text-gray-800">Expand Content with Long-Tail Keywords</p>
656
+ <p class="text-sm text-gray-600 mt-1">Add sections targeting "best running shoes for [specific need]" variations to capture more search traffic.</p>
657
+ </div>
658
+ </div>
659
+ <div class="flex items-start">
660
+ <div class="flex-shrink-0 mt-1">
661
+ <span class="w-6 h-6 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center">
662
+ <span class="text-xs font-bold">2</span>
663
+ </span>
664
+ </div>
665
+ <div class="ml-3">
666
+ <p class="text-sm font-medium text-gray-800">Improve Internal Linking</p>
667
+ <p class="text-sm text-gray-600 mt-1">Add 5-7 more internal links to related articles like "How to Choose Running Shoes" and "Running Shoe Maintenance".</p>
668
+ </div>
669
+ </div>
670
+ <div class="flex items-start">
671
+ <div class="flex-shrink-0 mt-1">
672
+ <span class="w-6 h-6 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center">
673
+ <span class="text-xs font-bold">3</span>
674
+ </span>
675
+ </div>
676
+ <div class="ml-3">
677
+ <p class="text-sm font-medium text-gray-800">Optimize Images</p>
678
+ <p class="text-sm text-gray-600 mt-1">Compress product images to improve page speed without sacrificing quality.</p>
679
+ </div>
680
+ </div>
681
+ <div class="flex items-start">
682
+ <div class="flex-shrink-0 mt-1">
683
+ <span class="w-6 h-6 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center">
684
+ <span class="text-xs font-bold">4</span>
685
+ </span>
686
+ </div>
687
+ <div class="ml-3">
688
+ <p class="text-sm font-medium text-gray-800">Add Schema Markup</p>
689
+ <p class="text-sm text-gray-600 mt-1">Implement Product and Review schema to potentially earn rich snippets in search results.</p>
690
+ </div>
691
+ </div>
692
+ </div>
693
+ </div>
694
+ </div>
695
+ </div>
696
+ </section>
697
+
698
+ <!-- Comparison Modal -->
699
+ <div id="compareModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
700
+ <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-2/3 shadow-lg rounded-md bg-white">
701
+ <div class="flex justify-between items-center mb-4">
702
+ <h3 class="text-xl font-bold text-gray-800">Compare Websites</h3>
703
+ <button id="closeCompareModal" class="text-gray-500 hover:text-gray-700">
704
+ <i class="fas fa-times"></i>
705
+ </button>
706
+ </div>
707
+
708
+ <div class="mb-6">
709
+ <div class="flex flex-col md:flex-row gap-4 mb-4">
710
+ <div class="flex-1">
711
+ <label class="block text-sm font-medium text-gray-700 mb-1">Website 1</label>
712
+ <input type="text" placeholder="Enter URL" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-transparent">
713
+ </div>
714
+ <div class="flex-1">
715
+ <label class="block text-sm font-medium text-gray-700 mb-1">Website 2</label>
716
+ <input type="text" placeholder="Enter URL" class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-transparent">
717
+ </div>
718
+ </div>
719
+ <button id="runComparison" class="w-full md:w-auto px-6 py-2 bg-purple-600 text-white font-medium rounded-lg hover:bg-purple-700 transition duration-300">
720
+ Compare Now
721
+ </button>
722
+ </div>
723
+
724
+ <div id="comparisonResults" class="hidden">
725
+ <h4 class="font-medium text-gray-800 mb-3">Comparison Results</h4>
726
+
727
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
728
+ <div class="compare-card bg-white border border-gray-200 rounded-lg p-4">
729
+ <div class="flex items-center mb-3">
730
+ <div class="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center overflow-hidden mr-3">
731
+ <img src="https://www.google.com/s2/favicons?domain=example1.com" alt="Favicon" class="w-6 h-6">
732
+ </div>
733
+ <div>
734
+ <h5 class="font-medium text-gray-800">ExampleSite1.com</h5>
735
+ <p class="text-xs text-gray-500">DA: 78 | Backlinks: 1,245</p>
736
+ </div>
737
+ </div>
738
+ <div class="space-y-2">
739
+ <div class="flex justify-between">
740
+ <span class="text-sm text-gray-700">Content Length</span>
741
+ <span class="text-sm font-medium text-gray-800">2,450 words</span>
742
+ </div>
743
+ <div class="flex justify-between">
744
+ <span class="text-sm text-gray-700">Readability</span>
745
+ <span class="text-sm font-medium text-gray-800">Easy (6.2)</span>
746
+ </div>
747
+ <div class="flex justify-between">
748
+ <span class="text-sm text-gray-700">Mobile Speed</span>
749
+ <span class="text-sm font-medium text-gray-800">78/100</span>
750
+ </div>
751
+ <div class="flex justify-between">
752
+ <span class="text-sm text-gray-700">Keyword Positions</span>
753
+ <span class="text-sm font-medium text-gray-800">3-8</span>
754
+ </div>
755
+ </div>
756
+ </div>
757
+
758
+ <div class="compare-card bg-white border border-gray-200 rounded-lg p-4">
759
+ <div class="flex items-center mb-3">
760
+ <div class="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center overflow-hidden mr-3">
761
+ <img src="https://www.google.com/s2/favicons?domain=example2.com" alt="Favicon" class="w-6 h-6">
762
+ </div>
763
+ <div>
764
+ <h5 class="font-medium text-gray-800">ExampleSite2.com</h5>
765
+ <p class="text-xs text-gray-500">DA: 65 | Backlinks: 892</p>
766
+ </div>
767
+ </div>
768
+ <div class="space-y-2">
769
+ <div class="flex justify-between">
770
+ <span class="text-sm text-gray-700">Content Length</span>
771
+ <span class="text-sm font-medium text-gray-800">1,780 words</span>
772
+ </div>
773
+ <div class="flex justify-between">
774
+ <span class="text-sm text-gray-700">Readability</span>
775
+ <span class="text-sm font-medium text-gray-800">Moderate (7.8)</span>
776
+ </div>
777
+ <div class="flex justify-between">
778
+ <span class="text-sm text-gray-700">Mobile Speed</span>
779
+ <span class="text-sm font-medium text-gray-800">85/100</span>
780
+ </div>
781
+ <div class="flex justify-between">
782
+ <span class="text-sm text-gray-700">Keyword Positions</span>
783
+ <span class="text-sm font-medium text-gray-800">5-12</span>
784
+ </div>
785
+ </div>
786
+ </div>
787
+ </div>
788
+
789
+ <div class="bg-gray-50 p-4 rounded-lg">
790
+ <h4 class="font-medium text-gray-800 mb-3">Key Differences</h4>
791
+ <ul class="space-y-3">
792
+ <li class="flex items-start">
793
+ <span class="text-purple-500 mr-2">•</span>
794
+ <span class="text-sm text-gray-700"><strong>ExampleSite1.com</strong> has more comprehensive content (2,450 vs 1,780 words) but <strong>ExampleSite2.com</strong> loads faster on mobile (85 vs 78).</span>
795
+ </li>
796
+ <li class="flex items-start">
797
+ <span class="text-purple-500 mr-2">•</span>
798
+ <span class="text-sm text-gray-700"><strong>ExampleSite1.com</strong> ranks higher for primary keywords but has fewer internal links than <strong>ExampleSite2.com</strong>.</span>
799
+ </li>
800
+ <li class="flex items-start">
801
+ <span class="text-purple-500 mr-2">•</span>
802
+ <span class="text-sm text-gray-700">Both sites could improve by adding more long-tail keyword variations and schema markup.</span>
803
+ </li>
804
+ </ul>
805
+ </div>
806
+ </div>
807
+ </div>
808
+ </div>
809
+ </main>
810
+
811
+ <!-- Footer -->
812
+ <footer class="bg-gray-800 text-white py-8">
813
+ <div class="container mx-auto px-4">
814
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
815
+ <div>
816
+ <h3 class="text-lg font-bold mb-4">RankDecode</h3>
817
+ <p class="text-gray-400 text-sm">Uncover the SEO strategies behind top-ranking websites and improve your own search visibility.</p>
818
+ </div>
819
+ <div>
820
+ <h4 class="text-md font-semibold mb-4">Features</h4>
821
+ <ul class="space-y-2 text-sm text-gray-400">
822
+ <li><a href="#" class="hover:text-white">Keyword Analysis</a></li>
823
+ <li><a href="#" class="hover:text-white">Content Insights</a></li>
824
+ <li><a href="#" class="hover:text-white">Backlink Profiler</a></li>
825
+ <li><a href="#" class="hover:text-white">Technical Audit</a></li>
826
+ </ul>
827
+ </div>
828
+ <div>
829
+ <h4 class="text-md font-semibold mb-4">Resources</h4>
830
+ <ul class="space-y-2 text-sm text-gray-400">
831
+ <li><a href="#" class="hover:text-white">Blog</a></li>
832
+ <li><a href="#" class="hover:text-white">Guides</a></li>
833
+ <li><a href="#" class="hover:text-white">Case Studies</a></li>
834
+ <li><a href="#" class="hover:text-white">Webinars</a></li>
835
+ </ul>
836
+ </div>
837
+ <div>
838
+ <h4 class="text-md font-semibold mb-4">Contact</h4>
839
+ <ul class="space-y-2 text-sm text-gray-400">
840
+ <li class="flex items-center"><i class="fas fa-envelope mr-2"></i> support@rankdecode.com</li>
841
+ <li class="flex items-center"><i class="fas fa-phone mr-2"></i> (123) 456-7890</li>
842
+ <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2"></i> San Francisco, CA</li>
843
+ </ul>
844
+ </div>
845
+ </div>
846
+ <div class="border-t border-gray-700 mt-8 pt-8 text-sm text-gray-400 text-center">
847
+ <p>© 2023 RankDecode. All rights reserved.</p>
848
+ </div>
849
+ </div>
850
+ </footer>
851
+
852
+ <script>
853
+ // Tab functionality
854
+ const tabButtons = document.querySelectorAll('.tab-btn');
855
+ const tabContents = document.querySelectorAll('.tab-content');
856
+
857
+ tabButtons.forEach(button => {
858
+ button.addEventListener('click', () => {
859
+ const tabId = button.getAttribute('data-tab');
860
+
861
+ // Update active tab button
862
+ tabButtons.forEach(btn => {
863
+ btn.classList.remove('text-purple-600', 'border-purple-600');
864
+ btn.classList.add('text-gray-500', 'hover:text-gray-700');
865
+ });
866
+ button.classList.add('text-purple-600', 'border-purple-600');
867
+ button.classList.remove('text-gray-500', 'hover:text-gray-700');
868
+
869
+ // Show active tab content
870
+ tabContents.forEach(content => {
871
+ content.classList.remove('active');
872
+ });
873
+ document.getElementById(tabId).classList.add('active');
874
+ });
875
+ });
876
+
877
+ // Show dashboard when analyze button is clicked
878
+ document.getElementById('analyzeBtn').addEventListener('click', () => {
879
+ document.getElementById('dashboard').classList.remove('hidden');
880
+
881
+ // Update sample data
882
+ document.getElementById('siteTitle').textContent = 'Top Running Shoes 2023 - Expert Reviews & Buying Guide';
883
+ document.getElementById('siteUrl').textContent = 'runningexperts.com/best-running-shoes';
884
+ document.getElementById('siteUrl').href = 'https://runningexperts.com/best-running-shoes';
885
+ document.getElementById('siteFavicon').src = 'https://www.google.com/s2/favicons?domain=runningexperts.com';
886
+ document.getElementById('seoScoreValue').textContent = '82';
887
+ document.getElementById('seoScoreCircle').setAttribute('stroke-dasharray', '82, 100');
888
+
889
+ // Scroll to dashboard
890
+ document.getElementById('dashboard').scrollIntoView({ behavior: 'smooth' });
891
+ });
892
+
893
+ // Comparison modal functionality
894
+ document.getElementById('compareBtn').addEventListener('click', () => {
895
+ document.getElementById('compareModal').classList.remove('hidden');
896
+ });
897
+
898
+ document.getElementById('closeCompareModal').addEventListener('click', () => {
899
+ document.getElementById('compareModal').classList.add('hidden');
900
+ });
901
+
902
+ document.getElementById('runComparison').addEventListener('click', () => {
903
+ document.getElementById('comparisonResults').classList.remove('hidden');
904
+ });
905
+
906
+ // Export buttons
907
+ document.getElementById('exportCsv').addEventListener('click', () => {
908
+ alert('CSV export functionality would be implemented here');
909
+ });
910
+
911
+ document.getElementById('exportPdf').addEventListener('click', () => {
912
+ alert('PDF export functionality would be implemented here');
913
+ });
914
+
915
+ // Initialize charts
916
+ document.addEventListener('DOMContentLoaded', function() {
917
+ // Traffic Sources Chart
918
+ const trafficCtx = document.getElementById('trafficSourcesChart').getContext('2d');
919
+ const trafficChart = new Chart(trafficCtx, {
920
+ type: 'doughnut',
921
+ data: {
922
+ labels: ['Organic Search', 'Direct', 'Referral', 'Social', 'Paid'],
923
+ datasets: [{
924
+ data: [65, 15, 12, 5, 3],
925
+ backgroundColor: [
926
+ '#4f46e5',
927
+ '#10b981',
928
+ '#3b82f6',
929
+ '#f59e0b',
930
+ '#ef4444'
931
+ ],
932
+ borderWidth: 0
933
+ }]
934
+ },
935
+ options: {
936
+ responsive: true,
937
+ plugins: {
938
+ legend: {
939
+ position: 'right',
940
+ }
941
+ },
942
+ cutout: '70%'
943
+ }
944
+ });
945
+
946
+ // Keyword Positions Chart
947
+ const keywordCtx = document.getElementById('keywordPositionsChart').getContext('2d');
948
+ const keywordChart = new Chart(keywordCtx, {
949
+ type: 'bar',
950
+ data: {
951
+ labels: ['1-3', '4-10', '11-20', '21-50', '51+'],
952
+ datasets: [{
953
+ label: 'Keywords',
954
+ data: [12, 28, 45, 60, 15],
955
+ backgroundColor: '#4f46e5',
956
+ borderRadius: 6
957
+ }]
958
+ },
959
+ options: {
960
+ responsive: true,
961
+ plugins: {
962
+ legend: {
963
+ display: false
964
+ }
965
+ },
966
+ scales: {
967
+ y: {
968
+ beginAtZero: true
969
+ }
970
+ }
971
+ }
972
+ });
973
+
974
+ // Backlink Types Chart
975
+ const backlinkCtx = document.getElementById('backlinkTypesChart').getContext('2d');
976
+ const backlinkChart = new Chart(backlinkCtx, {
977
+ type: 'pie',
978
+ data: {
979
+ labels: ['Editorial', 'Guest Posts', 'Forums', 'Blog Comments', 'Directories'],
980
+ datasets: [{
981
+ data: [45, 30, 12, 8, 5],
982
+ backgroundColor: [
983
+ '#4f46e5',
984
+ '#8b5cf6',
985
+ '#a855f7',
986
+ '#d946ef',
987
+ '#ec4899'
988
+ ],
989
+ borderWidth: 0
990
+ }]
991
+ },
992
+ options: {
993
+ responsive: true,
994
+ plugins: {
995
+ legend: {
996
+ position: 'right',
997
+ }
998
+ }
999
+ }
1000
+ });
1001
+ });
1002
+ </script>
1003
+ <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=stakmodsco/rank-decode-website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1004
+ </html>