-
Notifications
You must be signed in to change notification settings - Fork 29
Expand file tree
/
Copy pathindex.html
More file actions
209 lines (189 loc) · 9.95 KB
/
index.html
File metadata and controls
209 lines (189 loc) · 9.95 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SEO Keyword Research Tool</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.progress-bar {
transition: width 0.5s ease-in-out;
}
.loading-spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<!-- Header -->
<div class="gradient-bg text-white py-12">
<div class="max-w-4xl mx-auto px-4 text-center">
<h1 class="text-4xl font-bold mb-4">🔍 SEO Keyword Research Tool</h1>
<p class="text-xl opacity-90">Discover high-value keyword opportunities for your website</p>
</div>
</div>
<!-- Main Content -->
<div class="max-w-4xl mx-auto px-4 py-12">
<!-- Input Form -->
<div id="input-form" class="bg-white rounded-xl shadow-lg p-8 mb-8">
<h2 class="text-2xl font-bold text-gray-800 mb-6">🚀 Start Your Analysis</h2>
<div class="space-y-6">
<!-- Website URL -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Website URL</label>
<input type="url" id="website-url"
placeholder="https://example.com"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
</div>
<!-- Business Type -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Business Type</label>
<select id="business-type" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
<option value="E-commerce">E-commerce</option>
<option value="SaaS">SaaS</option>
<option value="Service Business" selected>Service Business</option>
<option value="Blog/Content">Blog/Content</option>
<option value="Education">Education</option>
<option value="Other">Other</option>
</select>
</div>
<!-- API Keys Section -->
<div class="border-t pt-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4">🔑 API Keys</h3>
<div class="grid md:grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Firecrawl API Key</label>
<input type="password" id="firecrawl-key"
placeholder="fc-xxxxxxxxxx"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Perplexity API Key</label>
<input type="password" id="perplexity-key"
placeholder="pplx-xxxxxxxxxx"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">DataForSEO Username</label>
<input type="text" id="dataforseo-username"
placeholder="your@email.com"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">DataForSEO Password</label>
<input type="password" id="dataforseo-password"
placeholder="your_password"
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
</div>
</div>
</div>
<!-- Start Button -->
<button onclick="startAnalysis()"
class="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white font-bold py-4 px-6 rounded-lg hover:from-blue-700 hover:to-purple-700 transition duration-200 transform hover:scale-105">
🔍 Start Keyword Analysis
</button>
</div>
</div>
<!-- Progress Section -->
<div id="progress-section" class="hidden bg-white rounded-xl shadow-lg p-8 mb-8">
<div class="text-center">
<div class="loading-spinner w-12 h-12 border-4 border-blue-600 border-t-transparent rounded-full mx-auto mb-4"></div>
<h3 class="text-xl font-bold text-gray-800 mb-2">Analyzing Your Website...</h3>
<p id="progress-text" class="text-gray-600 mb-4">Starting analysis...</p>
<!-- Progress Bar -->
<div class="w-full bg-gray-200 rounded-full h-3 mb-4">
<div id="progress-bar" class="progress-bar bg-gradient-to-r from-blue-600 to-purple-600 h-3 rounded-full" style="width: 0%"></div>
</div>
<div id="progress-steps" class="text-sm text-gray-500">
<div id="step-1" class="mb-1">⏳ Crawling website content...</div>
<div id="step-2" class="mb-1 opacity-50">🧠 Generating seed keywords...</div>
<div id="step-3" class="mb-1 opacity-50">📊 Getting search volumes...</div>
<div id="step-4" class="mb-1 opacity-50">🎯 Clustering keywords...</div>
<div id="step-5" class="mb-1 opacity-50">🔍 Researching competitors...</div>
<div id="step-6" class="mb-1 opacity-50">📈 Generating report...</div>
</div>
</div>
</div>
<!-- Results Section -->
<div id="results-section" class="hidden">
<!-- Summary Cards -->
<div id="summary-cards" class="grid md:grid-cols-4 gap-4 mb-8">
<!-- Summary cards will be inserted here -->
</div>
<!-- Quick Wins -->
<div class="bg-white rounded-xl shadow-lg p-8 mb-8">
<h3 class="text-2xl font-bold text-green-600 mb-4">🚀 Quick Wins (Low Competition)</h3>
<div id="quick-wins-content">
<!-- Quick wins will be inserted here -->
</div>
</div>
<!-- High Value Targets -->
<div class="bg-white rounded-xl shadow-lg p-8 mb-8">
<h3 class="text-2xl font-bold text-purple-600 mb-4">💎 High-Value Targets</h3>
<div id="high-value-content">
<!-- High value content will be inserted here -->
</div>
</div>
<!-- Keyword Clusters -->
<div class="bg-white rounded-xl shadow-lg p-8 mb-8">
<h3 class="text-2xl font-bold text-blue-600 mb-4">📊 Top Keyword Clusters</h3>
<div id="clusters-content">
<!-- Clusters will be inserted here -->
</div>
</div>
<!-- Competitors -->
<div class="bg-white rounded-xl shadow-lg p-8 mb-8">
<h3 class="text-2xl font-bold text-red-600 mb-4">🏆 Main Competitors</h3>
<div id="competitors-content">
<!-- Competitors will be inserted here -->
</div>
</div>
<!-- Action Plan -->
<div class="bg-white rounded-xl shadow-lg p-8 mb-8">
<h3 class="text-2xl font-bold text-orange-600 mb-4">📝 Action Plan</h3>
<div id="action-plan-content">
<!-- Action plan will be inserted here -->
</div>
</div>
<!-- Raw Analysis Data -->
<div class="bg-white rounded-xl shadow-lg p-8 mb-8">
<h3 class="text-2xl font-bold text-gray-600 mb-4">🔍 Raw Analysis Data</h3>
<div id="raw-data-content">
<!-- Raw data will be inserted here -->
</div>
</div>
<!-- Analysis Complete -->
<div class="text-center">
<div class="bg-green-50 border border-green-200 rounded-lg p-6">
<h3 class="text-lg font-bold text-green-800 mb-2">✅ Analysis Complete!</h3>
<p class="text-green-700">All keyword data, competitor analysis, and detailed metrics are displayed above.</p>
</div>
</div>
</div>
<!-- Error Section -->
<div id="error-section" class="hidden bg-red-50 border border-red-200 rounded-xl p-6 mb-8">
<div class="flex items-center">
<div class="text-red-600 text-xl mr-3">❌</div>
<div>
<h3 class="text-lg font-bold text-red-800">Analysis Failed</h3>
<p id="error-message" class="text-red-700 mt-1"></p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8 mt-16">
<div class="max-w-4xl mx-auto px-4 text-center">
<p>© 2024 SEO Keyword Research Tool. Built with ❤️ for marketers.</p>
</div>
</footer>
<script src="app.js"></script>
</body>
</html>