webtools-cli 1.0.0__py3-none-any.whl
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- webtools/__init__.py +4 -0
- webtools/__main__.py +5 -0
- webtools/cli.py +15 -0
- webtools/core.py +2596 -0
- webtools/web/Web_Tools.png +0 -0
- webtools/web/index.html +1102 -0
- webtools/web/script.js +1805 -0
- webtools/web/style.css +71 -0
- webtools_cli-1.0.0.dist-info/METADATA +110 -0
- webtools_cli-1.0.0.dist-info/RECORD +14 -0
- webtools_cli-1.0.0.dist-info/WHEEL +5 -0
- webtools_cli-1.0.0.dist-info/entry_points.txt +2 -0
- webtools_cli-1.0.0.dist-info/licenses/LICENSE +21 -0
- webtools_cli-1.0.0.dist-info/top_level.txt +1 -0
webtools/web/index.html
ADDED
|
@@ -0,0 +1,1102 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" class="dark">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>Web Tools</title>
|
|
8
|
+
<link rel="icon" type="image/png" href="/favicon.png">
|
|
9
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
10
|
+
<script src="https://cdn.jsdelivr.net/npm/motion@10.15.5/dist/motion.js"></script>
|
|
11
|
+
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
|
12
|
+
<script src="https://d3js.org/d3.v7.min.js"></script>
|
|
13
|
+
<link rel="stylesheet" href="style.css">
|
|
14
|
+
<script src="script.js" defer></script>
|
|
15
|
+
</head>
|
|
16
|
+
|
|
17
|
+
<body
|
|
18
|
+
class="bg-gray-950 dark:bg-gray-950 text-slate-200 min-h-screen selection:bg-indigo-500/30 transition-colors duration-300">
|
|
19
|
+
<div style="position: fixed; inset: 0; z-index: -1; pointer-events: none;">
|
|
20
|
+
<canvas id="flickering-grid"
|
|
21
|
+
style="width: 100%; height: 100%; mask-image: radial-gradient(circle at center, white, transparent 90%); -webkit-mask-image: radial-gradient(circle at center, white, transparent 90%); opacity: 0.4;"></canvas>
|
|
22
|
+
</div>
|
|
23
|
+
<div class="container mx-auto px-4 py-8 max-w-7xl flex flex-col items-center">
|
|
24
|
+
<header id="main-header" class="text-left mb-8 transform opacity-0 translate-y-[-20px] w-full">
|
|
25
|
+
<div class="flex justify-between items-center mb-4 w-full">
|
|
26
|
+
<div class="flex items-center gap-2">
|
|
27
|
+
<div class="inline-flex items-center justify-center p-1.5 rounded-xl">
|
|
28
|
+
<img src="/favicon.png" alt="Web Tools" class="w-8 h-8">
|
|
29
|
+
</div>
|
|
30
|
+
<div>
|
|
31
|
+
<h1
|
|
32
|
+
class="text-lg md:text-xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-white via-indigo-200 to-indigo-400 tracking-tight text-left">
|
|
33
|
+
Web Tools
|
|
34
|
+
</h1>
|
|
35
|
+
<p class="text-[10px] text-slate-400 font-light leading-tight">Extract HTML, CSS, JS, Images &
|
|
36
|
+
Videos</p>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
<div class="flex gap-2">
|
|
40
|
+
<button onclick="toggleHistory()" title="HISTORY"
|
|
41
|
+
class="p-2 rounded-full text-slate-400 hover:text-indigo-400 hover:bg-slate-800/50 transition-all relative group">
|
|
42
|
+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
43
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
44
|
+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
45
|
+
</svg>
|
|
46
|
+
<span
|
|
47
|
+
class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-slate-800 text-slate-300 text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">History</span>
|
|
48
|
+
</button>
|
|
49
|
+
<button onclick="toggleImageMode()" id="btn-image-mode" title="IMAGE FORENSICS"
|
|
50
|
+
class="p-2 rounded-full text-slate-400 hover:text-indigo-400 hover:bg-slate-800/50 transition-all relative group">
|
|
51
|
+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
52
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
53
|
+
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2-2v12a2 2 0 002 2z">
|
|
54
|
+
</path>
|
|
55
|
+
</svg>
|
|
56
|
+
<span
|
|
57
|
+
class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-slate-800 text-slate-300 text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">Image
|
|
58
|
+
Forensics</span>
|
|
59
|
+
</button>
|
|
60
|
+
</div>
|
|
61
|
+
</header>
|
|
62
|
+
<div id="main-grid"
|
|
63
|
+
class="w-full grid grid-cols-1 gap-8 items-start mb-10 transition-all duration-700 ease-in-out">
|
|
64
|
+
<!-- Error Notification -->
|
|
65
|
+
<div id="error"
|
|
66
|
+
class="hidden mx-auto bg-red-500/10 border border-red-500/40 text-red-400 p-4 rounded-xl shadow-lg flex items-center gap-3 backdrop-blur-md max-w-3xl w-full">
|
|
67
|
+
<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
68
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
69
|
+
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
70
|
+
</svg>
|
|
71
|
+
<span id="errorMsg" class="font-medium">Error occurred</span>
|
|
72
|
+
</div>
|
|
73
|
+
<div id="input-section"
|
|
74
|
+
class="w-full max-w-3xl mx-auto glass-dark rounded-3xl p-2 shadow-2xl transform opacity-0 scale-95 transition-all duration-700">
|
|
75
|
+
<div id="input-inner-container"
|
|
76
|
+
class="bg-black/40 rounded-2xl p-4 md:p-6 border border-white/5 relative overflow-hidden">
|
|
77
|
+
<!-- WEBSCRAPER MODE -->
|
|
78
|
+
<div id="mode-scraper" class="transition-all duration-300">
|
|
79
|
+
<div class="flex flex-row gap-2 md:gap-3 mb-2">
|
|
80
|
+
<div class="flex-1 relative group">
|
|
81
|
+
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
|
82
|
+
<svg class="w-5 h-5 text-slate-500 group-focus-within:text-indigo-400 transition-colors"
|
|
83
|
+
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
84
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
85
|
+
d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1">
|
|
86
|
+
</path>
|
|
87
|
+
</svg>
|
|
88
|
+
</div>
|
|
89
|
+
<input type="url" id="urlInput" placeholder="Enter website URL..."
|
|
90
|
+
class="w-full bg-gray-900/80 text-white placeholder-slate-500 border border-slate-700 rounded-xl py-3 pl-12 pr-4 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 transition-all text-base shadow-inner"
|
|
91
|
+
value="">
|
|
92
|
+
</div>
|
|
93
|
+
<button onclick="scrapeWebsite()" id="scrapeBtn"
|
|
94
|
+
class="scrape-btn-custom relative overflow-hidden text-white font-bold px-4 md:px-6 py-2.5 flex items-center justify-center gap-2 whitespace-nowrap">
|
|
95
|
+
<svg id="scrape-icon" class="w-5 h-5 md:w-4 md:h-4 relative z-10" fill="none"
|
|
96
|
+
stroke="currentColor" viewBox="0 0 24 24">
|
|
97
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
98
|
+
d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
|
99
|
+
</svg>
|
|
100
|
+
<span id="scrape-text"
|
|
101
|
+
class="relative z-10 text-sm tracking-wide hidden md:inline">Scrape</span>
|
|
102
|
+
</button>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="flex flex-wrap gap-4 mt-3 px-1 text-sm text-slate-400">
|
|
105
|
+
<label
|
|
106
|
+
class="flex items-center gap-2 cursor-pointer hover:text-slate-200 transition-colors">
|
|
107
|
+
<div class="relative flex items-center">
|
|
108
|
+
<input type="checkbox" id="fetchImages"
|
|
109
|
+
class="peer h-4 w-4 cursor-pointer appearance-none rounded border border-slate-600 bg-slate-800 transition-all checked:border-indigo-500 checked:bg-indigo-500">
|
|
110
|
+
<svg class="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity"
|
|
111
|
+
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
112
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
|
|
113
|
+
d="M5 13l4 4L19 7"></path>
|
|
114
|
+
</svg>
|
|
115
|
+
</div>
|
|
116
|
+
<svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor"
|
|
117
|
+
viewBox="0 0 24 24">
|
|
118
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
119
|
+
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z">
|
|
120
|
+
</path>
|
|
121
|
+
</svg>
|
|
122
|
+
<span class="hidden md:inline">Images</span>
|
|
123
|
+
</label>
|
|
124
|
+
<label
|
|
125
|
+
class="flex items-center gap-2 cursor-pointer hover:text-slate-200 transition-colors">
|
|
126
|
+
<div class="relative flex items-center">
|
|
127
|
+
<input type="checkbox" id="fetchVideos"
|
|
128
|
+
class="peer h-4 w-4 cursor-pointer appearance-none rounded border border-slate-600 bg-slate-800 transition-all checked:border-indigo-500 checked:bg-indigo-500">
|
|
129
|
+
<svg class="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity"
|
|
130
|
+
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
131
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
|
|
132
|
+
d="M5 13l4 4L19 7"></path>
|
|
133
|
+
</svg>
|
|
134
|
+
</div>
|
|
135
|
+
<svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor"
|
|
136
|
+
viewBox="0 0 24 24">
|
|
137
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
138
|
+
d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z">
|
|
139
|
+
</path>
|
|
140
|
+
</svg>
|
|
141
|
+
<span class="hidden md:inline">Videos</span>
|
|
142
|
+
</label>
|
|
143
|
+
<label
|
|
144
|
+
class="flex items-center gap-2 cursor-pointer hover:text-slate-200 transition-colors">
|
|
145
|
+
<div class="relative flex items-center">
|
|
146
|
+
<input type="checkbox" id="useProxy"
|
|
147
|
+
class="peer h-4 w-4 cursor-pointer appearance-none rounded border border-slate-600 bg-slate-800 transition-all checked:border-green-500 checked:bg-green-500">
|
|
148
|
+
<svg class="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity"
|
|
149
|
+
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
150
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
|
|
151
|
+
d="M5 13l4 4L19 7"></path>
|
|
152
|
+
</svg>
|
|
153
|
+
</div>
|
|
154
|
+
<svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor"
|
|
155
|
+
viewBox="0 0 24 24">
|
|
156
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
157
|
+
d="M12 11c0 3.517-1.009 6.799-2.753 9.571m-3.44-2.04l.054-.09A13.916 13.916 0 008 11a4 4 0 118 0c0 1.017-.07 2.019-.203 3m-2.118 6.844A21.88 21.88 0 0015.171 17m3.839 1.132c.645-2.266.99-4.659.99-7.132A8 8 0 008 4.07M3 15.364c.64-1.319 1-2.8 1-4.364 0-1.457.39-2.823 1.07-4">
|
|
158
|
+
</path>
|
|
159
|
+
</svg>
|
|
160
|
+
<span class="text-green-400 hidden md:inline">Smart Proxy</span>
|
|
161
|
+
</label>
|
|
162
|
+
<label
|
|
163
|
+
class="flex items-center gap-2 cursor-pointer hover:text-slate-200 transition-colors">
|
|
164
|
+
<div class="relative flex items-center">
|
|
165
|
+
<input type="checkbox" id="fetchFonts"
|
|
166
|
+
class="peer h-4 w-4 cursor-pointer appearance-none rounded border border-slate-600 bg-slate-800 transition-all checked:border-indigo-500 checked:bg-indigo-500">
|
|
167
|
+
<svg class="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity"
|
|
168
|
+
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
169
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
|
|
170
|
+
d="M5 13l4 4L19 7"></path>
|
|
171
|
+
</svg>
|
|
172
|
+
</div>
|
|
173
|
+
<svg class="w-4 h-4 text-slate-500" fill="none" stroke="currentColor"
|
|
174
|
+
viewBox="0 0 24 24">
|
|
175
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
176
|
+
d="M12 4v16m8-8H4">
|
|
177
|
+
</path>
|
|
178
|
+
</svg>
|
|
179
|
+
<span class="hidden md:inline">Fonts</span>
|
|
180
|
+
</label>
|
|
181
|
+
<label
|
|
182
|
+
class="flex items-center gap-3 cursor-pointer hover:text-slate-200 transition-colors">
|
|
183
|
+
<span class="text-xs text-slate-500 whitespace-nowrap">Depth: <span id="depthValue"
|
|
184
|
+
class="text-indigo-400 font-bold">2</span></span>
|
|
185
|
+
<input type="range" id="crawlDepth" min="1" max="3" value="2" step="1"
|
|
186
|
+
oninput="document.getElementById('depthValue').textContent = this.value"
|
|
187
|
+
class="w-16 h-1 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-indigo-500">
|
|
188
|
+
</label>
|
|
189
|
+
<label
|
|
190
|
+
class="flex items-center gap-2 cursor-pointer hover:text-slate-200 transition-colors">
|
|
191
|
+
<div class="relative flex items-center">
|
|
192
|
+
<input type="checkbox" id="bulkMode" onchange="toggleBulkMode()"
|
|
193
|
+
class="peer h-4 w-4 cursor-pointer appearance-none rounded border border-slate-600 bg-slate-800 transition-all checked:border-pink-500 checked:bg-pink-500">
|
|
194
|
+
</div>
|
|
195
|
+
<svg class="w-4 h-4 text-pink-400" fill="none" stroke="currentColor"
|
|
196
|
+
viewBox="0 0 24 24">
|
|
197
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
198
|
+
d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10">
|
|
199
|
+
</path>
|
|
200
|
+
</svg>
|
|
201
|
+
<span class="text-pink-400 font-medium hidden md:inline">Bulk</span>
|
|
202
|
+
</label>
|
|
203
|
+
</div>
|
|
204
|
+
<div id="bulk-input-container" class="hidden mt-3">
|
|
205
|
+
<textarea id="bulkUrls" rows="5" placeholder="Enter multiple URLs (one per line)..."
|
|
206
|
+
class="w-full bg-gray-900/80 text-white placeholder-slate-500 border border-slate-700 rounded-xl p-4 focus:outline-none focus:ring-2 focus:ring-pink-500/50 focus:border-pink-500 transition-all text-sm font-mono"></textarea>
|
|
207
|
+
<p class="text-xs text-slate-500 mt-2 text-right">Batch scraping will download a ZIP
|
|
208
|
+
file.
|
|
209
|
+
</p>
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
<!-- IMAGE ANALYSIS MODE -->
|
|
213
|
+
<div id="mode-image"
|
|
214
|
+
class="hidden flex flex-col gap-4 animate-in fade-in slide-in-from-right-8 duration-300">
|
|
215
|
+
<div class="border-2 border-dashed border-slate-700/50 rounded-2xl p-4 text-center hover:border-indigo-500/50 hover:bg-slate-800/30 transition-all cursor-pointer relative group min-h-[200px] flex items-center justify-center"
|
|
216
|
+
id="drop-zone" onclick="document.getElementById('imageInput').click()">
|
|
217
|
+
<input type="file" id="imageInput" class="hidden" accept="image/*"
|
|
218
|
+
onchange="handleImageUpload(this)">
|
|
219
|
+
<div id="drop-content" class="transition-all duration-300 group-hover:scale-105">
|
|
220
|
+
<div
|
|
221
|
+
class="w-12 h-12 bg-slate-800 rounded-full flex items-center justify-center mx-auto mb-2 border border-slate-700 shadow-lg">
|
|
222
|
+
<svg class="w-6 h-6 text-indigo-400" fill="none" stroke="currentColor"
|
|
223
|
+
viewBox="0 0 24 24">
|
|
224
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
225
|
+
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2-2v12a2 2 0 002 2z">
|
|
226
|
+
</path>
|
|
227
|
+
</svg>
|
|
228
|
+
</div>
|
|
229
|
+
<h3 class="text-white font-semibold text-base mb-0.5">Drop image here</h3>
|
|
230
|
+
<p class="text-slate-400 text-xs">or click to browse files</p>
|
|
231
|
+
</div>
|
|
232
|
+
<div id="image-preview-container"
|
|
233
|
+
class="hidden absolute inset-0 bg-slate-900 z-10 rounded-2xl overflow-hidden flex items-center justify-center">
|
|
234
|
+
<img id="image-preview" class="max-h-[80%] max-w-[80%] object-contain p-2 rounded-lg">
|
|
235
|
+
<button onclick="event.stopPropagation(); clearImage()"
|
|
236
|
+
class="absolute top-2 right-2 bg-black/50 hover:bg-red-500 text-white p-1.5 rounded-full backdrop-blur-md transition-all">
|
|
237
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
238
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
239
|
+
d="M6 18L18 6M6 6l12 12"></path>
|
|
240
|
+
</svg>
|
|
241
|
+
</button>
|
|
242
|
+
</div>
|
|
243
|
+
</div>
|
|
244
|
+
<div id="url-separator" class="relative flex py-2 items-center transition-all duration-300">
|
|
245
|
+
<div class="flex-grow border-t border-slate-700/50"></div>
|
|
246
|
+
<span
|
|
247
|
+
class="flex-shrink-0 mx-4 text-slate-500 text-xs font-bold uppercase tracking-widest">OR
|
|
248
|
+
USE URL</span>
|
|
249
|
+
<div class="flex-grow border-t border-slate-700/50"></div>
|
|
250
|
+
</div>
|
|
251
|
+
<div id="url-input-container" class="flex gap-2 relative transition-all duration-300">
|
|
252
|
+
<div class="flex-1 relative">
|
|
253
|
+
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
|
254
|
+
<svg class="w-5 h-5 text-slate-500" fill="none" stroke="currentColor"
|
|
255
|
+
viewBox="0 0 24 24">
|
|
256
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
257
|
+
d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1">
|
|
258
|
+
</path>
|
|
259
|
+
</svg>
|
|
260
|
+
</div>
|
|
261
|
+
<input type="url" id="imageUrlInput" placeholder="Paste direct image link..."
|
|
262
|
+
class="w-full bg-gray-900/80 text-white placeholder-slate-500 border border-slate-700 rounded-xl py-3 pl-12 pr-4 focus:outline-none focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 transition-all shadow-inner">
|
|
263
|
+
</div>
|
|
264
|
+
<button id="analyzeImageBtn" onclick="analyzeImage()"
|
|
265
|
+
class="scrape-btn-custom relative overflow-hidden text-white font-bold px-6 py-2.5 flex items-center gap-2 whitespace-nowrap transform active:scale-95 transition-all hidden">
|
|
266
|
+
<svg class="w-5 h-5 relative z-10" fill="none" stroke="currentColor"
|
|
267
|
+
viewBox="0 0 24 24">
|
|
268
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
269
|
+
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2">
|
|
270
|
+
</path>
|
|
271
|
+
</svg>
|
|
272
|
+
<span class="relative z-10">Analyze</span>
|
|
273
|
+
</button>
|
|
274
|
+
</div>
|
|
275
|
+
</div>
|
|
276
|
+
</div>
|
|
277
|
+
</div>
|
|
278
|
+
<div id="history-section" class="w-full hidden opacity-0 translate-y-4 transition-all duration-500">
|
|
279
|
+
<div class="glass-dark rounded-2xl p-6 border border-white/5 h-full">
|
|
280
|
+
<h3
|
|
281
|
+
class="text-lg font-semibold text-slate-400 mb-4 uppercase tracking-wider flex items-center gap-2">
|
|
282
|
+
<svg class="w-5 h-5 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
283
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
284
|
+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
285
|
+
</svg>
|
|
286
|
+
HISTORY
|
|
287
|
+
</h3>
|
|
288
|
+
<div id="history-list" class="flex flex-wrap gap-2">
|
|
289
|
+
<span class="text-slate-600 italic text-sm">No recent history</span>
|
|
290
|
+
</div>
|
|
291
|
+
</div>
|
|
292
|
+
</div>
|
|
293
|
+
</div>
|
|
294
|
+
</div>
|
|
295
|
+
<div id="results"
|
|
296
|
+
class="w-full max-w-5xl mx-auto hidden animate-in fade-in slide-in-from-bottom-4 duration-500 px-4">
|
|
297
|
+
<div
|
|
298
|
+
class="rounded-xl p-2 md:p-3 mb-6 flex flex-wrap items-center justify-between gap-2 md:gap-4 bg-transparent border border-purple-500 shadow-[0_0_15px_rgba(168,85,247,0.3)]">
|
|
299
|
+
<div class="flex items-center gap-2 md:gap-4 overflow-x-auto no-scrollbar">
|
|
300
|
+
<div class="text-center px-2 md:px-4 border-r border-slate-700">
|
|
301
|
+
<div class="text-base md:text-xl font-bold text-white" id="stat-html">0 KB</div>
|
|
302
|
+
<div class="text-[10px] text-slate-400 uppercase">HTML</div>
|
|
303
|
+
</div>
|
|
304
|
+
<div class="text-center px-2 md:px-4 border-r border-slate-700">
|
|
305
|
+
<div class="text-base md:text-xl font-bold text-purple-400" id="stat-css">0 KB</div>
|
|
306
|
+
<div class="text-[10px] text-slate-400 uppercase">CSS</div>
|
|
307
|
+
</div>
|
|
308
|
+
<div class="text-center px-2 md:px-4 border-r border-slate-700">
|
|
309
|
+
<div class="text-base md:text-xl font-bold text-yellow-400" id="stat-js">0 KB</div>
|
|
310
|
+
<div class="text-[10px] text-slate-400 uppercase">JS</div>
|
|
311
|
+
</div>
|
|
312
|
+
<div class="text-center px-2 md:px-4 border-r border-slate-700">
|
|
313
|
+
<div class="text-base md:text-xl font-bold text-pink-400" id="stat-img">0</div>
|
|
314
|
+
<div class="text-[10px] text-slate-400 uppercase">Images</div>
|
|
315
|
+
</div>
|
|
316
|
+
<div class="text-center px-2 md:px-4">
|
|
317
|
+
<div class="text-base md:text-xl font-bold text-red-400" id="stat-vid">0</div>
|
|
318
|
+
<div class="text-[10px] text-slate-400 uppercase">Videos</div>
|
|
319
|
+
</div>
|
|
320
|
+
</div>
|
|
321
|
+
<div class="flex gap-2 ml-auto md:ml-0">
|
|
322
|
+
<button onclick="downloadZip()"
|
|
323
|
+
class="px-3 py-1.5 md:px-4 md:py-2 bg-transparent border border-cyan-500 text-cyan-400 hover:bg-cyan-500/10 rounded-lg text-xs md:text-sm font-semibold transition-all flex items-center gap-2 shadow-[0_0_10px_rgba(6,182,212,0.3)]">
|
|
324
|
+
<svg class="w-3 h-3 md:w-4 md:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
325
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
326
|
+
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
|
|
327
|
+
</svg>
|
|
328
|
+
<span class="hidden sm:inline">Zip</span>
|
|
329
|
+
</button>
|
|
330
|
+
<button onclick="clearFiles()"
|
|
331
|
+
class="px-3 py-1.5 md:px-4 md:py-2 bg-red-500/10 hover:bg-red-500/20 text-red-400 border border-red-500/30 rounded-lg text-xs md:text-sm font-semibold transition-all">
|
|
332
|
+
Clear
|
|
333
|
+
</button>
|
|
334
|
+
</div>
|
|
335
|
+
</div>
|
|
336
|
+
<div class="flex flex-wrap gap-1 mb-4 border-b border-slate-700">
|
|
337
|
+
<button onclick="switchTab('preview')" id="tab-preview"
|
|
338
|
+
class="tab-btn tab-active flex items-center gap-2 px-4 md:px-6 py-3 text-sm font-semibold text-slate-300 hover:text-white transition-all whitespace-nowrap">
|
|
339
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
340
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
341
|
+
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
342
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
343
|
+
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
|
|
344
|
+
</path>
|
|
345
|
+
</svg>
|
|
346
|
+
<span class="hidden md:inline">Live Preview</span>
|
|
347
|
+
</button>
|
|
348
|
+
<button onclick="switchTab('files')" id="tab-files"
|
|
349
|
+
class="tab-btn flex items-center gap-2 px-3 md:px-4 py-2 text-sm font-semibold text-slate-300 hover:text-white transition-all whitespace-nowrap">
|
|
350
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
351
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
352
|
+
d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z">
|
|
353
|
+
</path>
|
|
354
|
+
</svg>
|
|
355
|
+
<span class="hidden md:inline">Files</span>
|
|
356
|
+
</button>
|
|
357
|
+
<button onclick="switchTab('code')" id="tab-code"
|
|
358
|
+
class="tab-btn flex items-center gap-2 px-3 md:px-4 py-2 text-sm font-semibold text-slate-300 hover:text-white transition-all whitespace-nowrap">
|
|
359
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
360
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
361
|
+
d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
|
|
362
|
+
</svg>
|
|
363
|
+
<span class="hidden md:inline">Code Editor</span>
|
|
364
|
+
</button>
|
|
365
|
+
<button onclick="switchTab('images')" id="tab-images"
|
|
366
|
+
class="tab-btn flex items-center gap-2 px-3 md:px-4 py-2 text-sm font-semibold text-slate-300 hover:text-white transition-all whitespace-nowrap">
|
|
367
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
368
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
369
|
+
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z">
|
|
370
|
+
</path>
|
|
371
|
+
</svg>
|
|
372
|
+
<span class="hidden md:inline">Images</span>
|
|
373
|
+
</button>
|
|
374
|
+
<button onclick="switchTab('videos')" id="tab-videos"
|
|
375
|
+
class="tab-btn flex items-center gap-2 px-3 md:px-4 py-2 text-sm font-semibold text-slate-300 hover:text-white transition-all whitespace-nowrap">
|
|
376
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
377
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
378
|
+
d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z">
|
|
379
|
+
</path>
|
|
380
|
+
</svg>
|
|
381
|
+
<span class="hidden md:inline">Videos</span>
|
|
382
|
+
</button>
|
|
383
|
+
<button onclick="switchTab('seo')" id="tab-seo"
|
|
384
|
+
class="tab-btn flex items-center gap-2 px-3 md:px-4 py-2 text-sm font-semibold text-slate-300 hover:text-white transition-all whitespace-nowrap">
|
|
385
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
386
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
387
|
+
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z">
|
|
388
|
+
</path>
|
|
389
|
+
</svg>
|
|
390
|
+
<span class="hidden md:inline">Intelligence</span>
|
|
391
|
+
</button>
|
|
392
|
+
</div>
|
|
393
|
+
<div id="main-content-container"
|
|
394
|
+
class="glass-dark rounded-2xl p-3 border border-white/5 transition-all duration-300 tab-gradient-border">
|
|
395
|
+
<div id="content-preview" class="tab-content">
|
|
396
|
+
<div class="flex items-center justify-between mb-4">
|
|
397
|
+
<h3 class="text-lg font-semibold text-white">Live Preview</h3>
|
|
398
|
+
<div class="flex gap-2">
|
|
399
|
+
<button onclick="setPreviewSize('mobile')"
|
|
400
|
+
class="p-2 rounded bg-transparent border border-[#00ff41] text-[#00ff41] hover:bg-[#00ff41]/10 text-xs flex items-center gap-2 transition-colors">
|
|
401
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
402
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
403
|
+
d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z">
|
|
404
|
+
</path>
|
|
405
|
+
</svg>
|
|
406
|
+
Mobile
|
|
407
|
+
</button>
|
|
408
|
+
<button onclick="setPreviewSize('desktop')"
|
|
409
|
+
class="p-2 rounded bg-transparent border border-[#00ff41] text-[#00ff41] hover:bg-[#00ff41]/10 text-xs flex items-center gap-2 transition-colors">
|
|
410
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
411
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
412
|
+
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
|
|
413
|
+
</path>
|
|
414
|
+
</svg>
|
|
415
|
+
Desktop
|
|
416
|
+
</button>
|
|
417
|
+
</div>
|
|
418
|
+
</div>
|
|
419
|
+
<iframe id="preview-frame"
|
|
420
|
+
class="preview-frame rounded-xl border border-slate-700 shadow-2xl transition-all duration-300"
|
|
421
|
+
srcdoc="<html><body style='display:flex;align-items:center;justify-content:center;height:100vh;margin:0;background:#0f172a;font-family:system-ui;'><div style='text-align:center;color:#64748b;'><svg width='64' height='64' fill='none' stroke='currentColor' viewBox='0 0 24 24' style='margin:0 auto 16px;opacity:0.5;'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M21 12a9 9 0 11-18 0 9 9 0 0118 0z'/><path stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9 10h.01M15 10h.01M9.5 15.5a3.5 3.5 0 007 0'/></svg><p style='margin:0;font-size:14px;'>Enter a URL and click Scrape to preview</p></div></body></html>"></iframe>
|
|
422
|
+
</div>
|
|
423
|
+
<div id="content-files" class="tab-content hidden">
|
|
424
|
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
425
|
+
<div
|
|
426
|
+
class="bg-slate-800/50 rounded-xl p-5 border border-slate-700 hover:border-blue-500/50 transition-all group">
|
|
427
|
+
<div class="flex items-center justify-between mb-4">
|
|
428
|
+
<div
|
|
429
|
+
class="w-12 h-12 bg-blue-500/10 text-blue-400 rounded-xl flex items-center justify-center text-xl font-bold">
|
|
430
|
+
</></div>
|
|
431
|
+
<span class="text-xs text-slate-500 font-mono" id="size-html">0 KB</span>
|
|
432
|
+
</div>
|
|
433
|
+
<h3 class="text-lg font-bold text-white mb-1">index.html</h3>
|
|
434
|
+
<p class="text-slate-400 text-xs mb-4">Structure & Content</p>
|
|
435
|
+
<div class="flex gap-2">
|
|
436
|
+
<a href="/download/index.html" target="_blank"
|
|
437
|
+
class="flex-1 text-center px-3 py-2 bg-blue-500/10 text-blue-400 rounded-lg text-sm hover:bg-blue-500 hover:text-white transition-all">View</a>
|
|
438
|
+
<button onclick="editFile('index.html')"
|
|
439
|
+
class="px-3 py-2 bg-slate-700 text-slate-300 rounded-lg text-sm hover:bg-slate-600">Edit</button>
|
|
440
|
+
</div>
|
|
441
|
+
</div>
|
|
442
|
+
<div
|
|
443
|
+
class="bg-slate-800/50 rounded-xl p-5 border border-slate-700 hover:border-purple-500/50 transition-all group">
|
|
444
|
+
<div class="flex items-center justify-between mb-4">
|
|
445
|
+
<div
|
|
446
|
+
class="w-12 h-12 bg-purple-500/10 text-purple-400 rounded-xl flex items-center justify-center text-xl font-bold">
|
|
447
|
+
#</div>
|
|
448
|
+
<span class="text-xs text-slate-500 font-mono" id="size-css">0 KB</span>
|
|
449
|
+
</div>
|
|
450
|
+
<h3 class="text-lg font-bold text-white mb-1">style.css</h3>
|
|
451
|
+
<p class="text-slate-400 text-xs mb-4">Styles & Design</p>
|
|
452
|
+
<div class="flex gap-2">
|
|
453
|
+
<a href="/download/style.css" target="_blank"
|
|
454
|
+
class="flex-1 text-center px-3 py-2 bg-purple-500/10 text-purple-400 rounded-lg text-sm hover:bg-purple-500 hover:text-white transition-all">View</a>
|
|
455
|
+
<button onclick="editFile('style.css')"
|
|
456
|
+
class="px-3 py-2 bg-slate-700 text-slate-300 rounded-lg text-sm hover:bg-slate-600">Edit</button>
|
|
457
|
+
</div>
|
|
458
|
+
</div>
|
|
459
|
+
<div
|
|
460
|
+
class="bg-slate-800/50 rounded-xl p-5 border border-slate-700 hover:border-yellow-500/50 transition-all group">
|
|
461
|
+
<div class="flex items-center justify-between mb-4">
|
|
462
|
+
<div
|
|
463
|
+
class="w-12 h-12 bg-yellow-500/10 text-yellow-400 rounded-xl flex items-center justify-center text-xl font-bold">
|
|
464
|
+
JS</div>
|
|
465
|
+
<span class="text-xs text-slate-500 font-mono" id="size-js">0 KB</span>
|
|
466
|
+
</div>
|
|
467
|
+
<h3 class="text-lg font-bold text-white mb-1">script.js</h3>
|
|
468
|
+
<p class="text-slate-400 text-xs mb-4">Interactivity</p>
|
|
469
|
+
<div class="flex gap-2">
|
|
470
|
+
<a href="/download/script.js" target="_blank"
|
|
471
|
+
class="flex-1 text-center px-3 py-2 bg-yellow-500/10 text-yellow-400 rounded-lg text-sm hover:bg-yellow-500 hover:text-white transition-all">View</a>
|
|
472
|
+
<button onclick="editFile('script.js')"
|
|
473
|
+
class="px-3 py-2 bg-slate-700 text-slate-300 rounded-lg text-sm hover:bg-slate-600">Edit</button>
|
|
474
|
+
</div>
|
|
475
|
+
</div>
|
|
476
|
+
</div>
|
|
477
|
+
</div>
|
|
478
|
+
<div id="content-code" class="tab-content hidden">
|
|
479
|
+
<div class="flex items-center justify-between mb-4">
|
|
480
|
+
<h3 class="text-lg font-semibold text-white">Code Editor</h3>
|
|
481
|
+
<select id="editor-filename" onchange="loadEditorContent()"
|
|
482
|
+
class="bg-slate-800 border border-slate-700 text-white rounded-lg px-3 py-2 text-sm">
|
|
483
|
+
<option value="index.html">index.html</option>
|
|
484
|
+
<option value="style.css">style.css</option>
|
|
485
|
+
<option value="script.js">script.js</option>
|
|
486
|
+
</select>
|
|
487
|
+
</div>
|
|
488
|
+
<textarea id="code-editor"
|
|
489
|
+
class="w-full h-[400px] code-editor rounded-xl p-4 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-indigo-500/50"
|
|
490
|
+
spellcheck="false" onkeydown="handleTab(event)"></textarea>
|
|
491
|
+
<div class="flex justify-end gap-2 mt-4">
|
|
492
|
+
<button onclick="formatCode()"
|
|
493
|
+
class="px-4 py-2 bg-slate-700 text-white rounded-lg text-sm hover:bg-slate-600">Format</button>
|
|
494
|
+
<button onclick="saveCode()"
|
|
495
|
+
class="px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm hover:bg-indigo-500">Save
|
|
496
|
+
Changes</button>
|
|
497
|
+
</div>
|
|
498
|
+
</div>
|
|
499
|
+
<div id="content-images" class="tab-content hidden">
|
|
500
|
+
<div id="images-grid" class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
501
|
+
<div class="col-span-full text-center text-slate-500 py-12">
|
|
502
|
+
<svg class="w-12 h-12 mx-auto mb-3 opacity-50" fill="none" stroke="currentColor"
|
|
503
|
+
viewBox="0 0 24 24">
|
|
504
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
505
|
+
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z">
|
|
506
|
+
</path>
|
|
507
|
+
</svg>
|
|
508
|
+
<p>No images extracted yet. Check "Images" option.</p>
|
|
509
|
+
</div>
|
|
510
|
+
</div>
|
|
511
|
+
</div>
|
|
512
|
+
<div id="content-videos" class="tab-content hidden">
|
|
513
|
+
<div id="videos-grid" class="grid grid-cols-2 md:grid-cols-4 gap-3">
|
|
514
|
+
<div class="col-span-full text-center text-slate-500 py-12">
|
|
515
|
+
<svg class="w-12 h-12 mx-auto mb-3 opacity-50" fill="none" stroke="currentColor"
|
|
516
|
+
viewBox="0 0 24 24">
|
|
517
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
518
|
+
d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z">
|
|
519
|
+
</path>
|
|
520
|
+
</svg>
|
|
521
|
+
<p>No videos extracted yet. Check "Videos" option.</p>
|
|
522
|
+
</div>
|
|
523
|
+
</div>
|
|
524
|
+
</div>
|
|
525
|
+
<div id="content-seo" class="tab-content hidden animate-in fade-in slide-in-from-right-4 duration-300">
|
|
526
|
+
<div class="lg:columns-2 gap-4 space-y-4">
|
|
527
|
+
<!-- Top Row: SEO Score & Report -->
|
|
528
|
+
<div
|
|
529
|
+
class="p-4 rounded-2xl flex flex-col items-center justify-center text-center bg-transparent border border-yellow-500 shadow-[0_0_15px_rgba(234,179,8,0.2)] break-inside-avoid mb-4">
|
|
530
|
+
<div class="relative w-24 h-24 mb-3">
|
|
531
|
+
<svg class="w-full h-full transform -rotate-90">
|
|
532
|
+
<circle cx="48" cy="48" r="40" stroke="currentColor" stroke-width="8" fill="none"
|
|
533
|
+
class="text-slate-700" />
|
|
534
|
+
<circle id="seo-score-circle" cx="48" cy="48" r="40" stroke="currentColor"
|
|
535
|
+
stroke-width="8" fill="none" class="text-green-500 transition-all duration-1000"
|
|
536
|
+
stroke-dasharray="251" stroke-dashoffset="251" />
|
|
537
|
+
</svg>
|
|
538
|
+
<div class="absolute inset-0 flex items-center justify-center flex-col">
|
|
539
|
+
<span id="seo-score-text" class="text-3xl font-bold text-white">0</span>
|
|
540
|
+
<span class="text-[10px] text-slate-400">SCORE</span>
|
|
541
|
+
</div>
|
|
542
|
+
</div>
|
|
543
|
+
<h3 class="text-base font-semibold text-white mb-0.5">SEO Health</h3>
|
|
544
|
+
<p class="text-slate-400 text-xs">Based on meta tags & structure</p>
|
|
545
|
+
</div>
|
|
546
|
+
<div
|
|
547
|
+
class="p-4 rounded-2xl bg-transparent border border-yellow-500 shadow-[0_0_15px_rgba(234,179,8,0.2)]">
|
|
548
|
+
<h3 class="text-base font-semibold text-white mb-3 flex items-center gap-2">
|
|
549
|
+
<svg class="w-4 h-4 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
550
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
551
|
+
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
|
|
552
|
+
</path>
|
|
553
|
+
</svg>
|
|
554
|
+
Analysis Report
|
|
555
|
+
</h3>
|
|
556
|
+
<div id="seo-report-list" class="space-y-2 overflow-y-auto max-h-[160px] pr-2 custom-scrollbar">
|
|
557
|
+
</div>
|
|
558
|
+
</div>
|
|
559
|
+
<div
|
|
560
|
+
class="col-span-full p-4 rounded-2xl bg-transparent border border-yellow-500 shadow-[0_0_15px_rgba(234,179,8,0.2)]">
|
|
561
|
+
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
|
|
562
|
+
<div class="p-2.5 bg-slate-800/50 rounded-lg">
|
|
563
|
+
<span class="block text-slate-500 text-[10px] mb-0.5">Meta Title</span>
|
|
564
|
+
<span id="seo-title" class="text-white font-medium truncate block" title="">-</span>
|
|
565
|
+
</div>
|
|
566
|
+
<div class="p-2.5 bg-slate-800/50 rounded-lg relative group">
|
|
567
|
+
<div class="flex justify-between items-center mb-0.5">
|
|
568
|
+
<span class="block text-slate-500 text-[10px]">Meta Description</span>
|
|
569
|
+
<button onclick="translatePrompt('seo-desc')"
|
|
570
|
+
class="opacity-0 group-hover:opacity-100 transition-opacity text-indigo-400 hover:text-indigo-300">
|
|
571
|
+
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
572
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
573
|
+
d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129">
|
|
574
|
+
</path>
|
|
575
|
+
</svg>
|
|
576
|
+
</button>
|
|
577
|
+
</div>
|
|
578
|
+
<span id="seo-desc" class="text-white font-medium truncate block" title="">-</span>
|
|
579
|
+
</div>
|
|
580
|
+
<div class="p-2.5 bg-slate-800/50 rounded-lg">
|
|
581
|
+
<span class="block text-slate-500 text-[10px] mb-0.5">H1 Tag</span>
|
|
582
|
+
<span id="seo-h1" class="text-white font-medium truncate block">-</span>
|
|
583
|
+
</div>
|
|
584
|
+
<div class="p-2.5 bg-slate-800/50 rounded-lg">
|
|
585
|
+
<span class="block text-slate-500 text-[10px] mb-0.5">Internal Links</span>
|
|
586
|
+
<span id="seo-links" class="text-white font-medium">-</span>
|
|
587
|
+
</div>
|
|
588
|
+
</div>
|
|
589
|
+
</div>
|
|
590
|
+
<!-- Scraped Table -->
|
|
591
|
+
<div class="glass-dark rounded-2xl p-5 border border-white/5 shadow-xl break-inside-avoid mb-4">
|
|
592
|
+
<div class="flex items-center justify-between mb-4">
|
|
593
|
+
<h3 class="text-lg font-bold text-white flex items-center gap-2">
|
|
594
|
+
<svg class="w-5 h-5 text-indigo-400" fill="none" stroke="currentColor"
|
|
595
|
+
viewBox="0 0 24 24">
|
|
596
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
597
|
+
d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z">
|
|
598
|
+
</path>
|
|
599
|
+
</svg>
|
|
600
|
+
Scraped Data Table
|
|
601
|
+
</h3>
|
|
602
|
+
<div class="flex items-center gap-2">
|
|
603
|
+
<span
|
|
604
|
+
class="text-[10px] text-slate-500 uppercase tracking-widest bg-slate-800/50 px-2 py-1 rounded">Auto-Categorized</span>
|
|
605
|
+
</div>
|
|
606
|
+
</div>
|
|
607
|
+
<div class="overflow-x-auto rounded-xl border border-white/10 bg-black/20 no-scrollbar">
|
|
608
|
+
<table class="w-full text-left text-sm">
|
|
609
|
+
<thead
|
|
610
|
+
class="bg-indigo-500/10 text-indigo-400 font-bold uppercase text-[10px] tracking-widest border-b border-white/5">
|
|
611
|
+
<tr>
|
|
612
|
+
<th class="px-4 py-3">Category</th>
|
|
613
|
+
<th class="px-4 py-3">Value / Detail</th>
|
|
614
|
+
<th class="px-4 py-3 text-right">Action</th>
|
|
615
|
+
</tr>
|
|
616
|
+
</thead>
|
|
617
|
+
<tbody id="intel-table-body" class="divide-y divide-white/5 text-slate-300">
|
|
618
|
+
<tr>
|
|
619
|
+
<td colspan="3" class="px-4 py-8 text-center text-slate-500 italic">No data
|
|
620
|
+
analyzed yet.</td>
|
|
621
|
+
</tr>
|
|
622
|
+
</tbody>
|
|
623
|
+
</table>
|
|
624
|
+
</div>
|
|
625
|
+
</div>
|
|
626
|
+
|
|
627
|
+
<!-- Site Map -->
|
|
628
|
+
<div
|
|
629
|
+
class="p-4 md:p-6 rounded-2xl bg-slate-800/30 border border-cyan-500/30 shadow-[0_0_15px_rgba(6,182,212,0.1)] self-start break-inside-avoid mb-4">
|
|
630
|
+
<h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
|
631
|
+
<svg class="w-5 h-5 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
632
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
633
|
+
d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z">
|
|
634
|
+
</path>
|
|
635
|
+
</svg>
|
|
636
|
+
Site Map (Deep Crawl)
|
|
637
|
+
</h3>
|
|
638
|
+
<div id="structure-tree" class="tree-view text-slate-300 overflow-x-auto text-xs h-fit">
|
|
639
|
+
<p class="text-slate-500 italic">Run a scrape with Crawl Depth > 1 to see structure.</p>
|
|
640
|
+
</div>
|
|
641
|
+
</div>
|
|
642
|
+
<!-- Contact Info -->
|
|
643
|
+
<div
|
|
644
|
+
class="p-5 rounded-2xl bg-slate-800/20 border border-orange-500/30 shadow-[0_0_15px_rgba(249,115,22,0.1)] self-start break-inside-avoid mb-4">
|
|
645
|
+
<div class="flex items-center justify-between mb-4">
|
|
646
|
+
<div class="flex items-center gap-2">
|
|
647
|
+
<svg class="w-5 h-5 text-orange-400" fill="none" stroke="currentColor"
|
|
648
|
+
viewBox="0 0 24 24">
|
|
649
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
650
|
+
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
|
|
651
|
+
</path>
|
|
652
|
+
</svg>
|
|
653
|
+
<h3 class="text-lg font-semibold text-white">Contact Info</h3>
|
|
654
|
+
</div>
|
|
655
|
+
<div class="flex gap-2">
|
|
656
|
+
<button onclick="exportData('emails', 'csv')"
|
|
657
|
+
class="text-[10px] px-2 py-1 bg-orange-500/10 text-orange-400 border border-orange-500/30 rounded hover:bg-orange-500/20 transition-all">CSV</button>
|
|
658
|
+
<button onclick="exportData('emails', 'json')"
|
|
659
|
+
class="text-[10px] px-2 py-1 bg-orange-500/10 text-orange-400 border border-orange-500/30 rounded hover:bg-orange-500/20 transition-all">JSON</button>
|
|
660
|
+
</div>
|
|
661
|
+
</div>
|
|
662
|
+
<div class="space-y-4" id="intel-contacts">
|
|
663
|
+
<p class="text-slate-500 italic text-sm">No contact info found.</p>
|
|
664
|
+
</div>
|
|
665
|
+
<div class="mt-4 pt-4 border-t border-white/5">
|
|
666
|
+
<h4
|
|
667
|
+
class="text-xs font-bold text-slate-500 uppercase tracking-widest mb-3 flex items-center gap-2">
|
|
668
|
+
<svg class="w-4 h-4 text-orange-400" fill="none" stroke="currentColor"
|
|
669
|
+
viewBox="0 0 24 24">
|
|
670
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
671
|
+
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
|
|
672
|
+
</path>
|
|
673
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
674
|
+
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
675
|
+
</svg>
|
|
676
|
+
Physical Locations
|
|
677
|
+
</h4>
|
|
678
|
+
<div id="intel-locations" class="space-y-3">
|
|
679
|
+
<p class="text-slate-500 italic text-sm">No locations detected.</p>
|
|
680
|
+
</div>
|
|
681
|
+
</div>
|
|
682
|
+
</div>
|
|
683
|
+
|
|
684
|
+
<!-- Tech Stack & Socials -->
|
|
685
|
+
<div class="space-y-4 break-inside-avoid mb-4">
|
|
686
|
+
<div
|
|
687
|
+
class="p-5 rounded-2xl bg-slate-800/20 border border-emerald-500/30 shadow-[0_0_15px_rgba(16,185,129,0.1)]">
|
|
688
|
+
<h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
|
689
|
+
<svg class="w-5 h-5 text-emerald-400" fill="none" stroke="currentColor"
|
|
690
|
+
viewBox="0 0 24 24">
|
|
691
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
692
|
+
d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z">
|
|
693
|
+
</path>
|
|
694
|
+
</svg>
|
|
695
|
+
Tech Stack
|
|
696
|
+
</h3>
|
|
697
|
+
<div class="flex flex-wrap gap-2" id="intel-stack">
|
|
698
|
+
<p class="text-slate-500 italic text-sm">No technologies detected.</p>
|
|
699
|
+
</div>
|
|
700
|
+
</div>
|
|
701
|
+
<div
|
|
702
|
+
class="p-5 rounded-2xl bg-slate-800/20 border border-blue-500/30 shadow-[0_0_15px_rgba(59,130,246,0.1)]">
|
|
703
|
+
<h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
|
704
|
+
<svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor"
|
|
705
|
+
viewBox="0 0 24 24">
|
|
706
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
707
|
+
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z">
|
|
708
|
+
</path>
|
|
709
|
+
</svg>
|
|
710
|
+
Social Profiles
|
|
711
|
+
</h3>
|
|
712
|
+
<div class="grid grid-cols-2 gap-3" id="intel-socials">
|
|
713
|
+
<p class="text-slate-500 italic text-sm col-span-full">No social profiles found.</p>
|
|
714
|
+
</div>
|
|
715
|
+
</div>
|
|
716
|
+
</div>
|
|
717
|
+
|
|
718
|
+
<!-- AI Analysis -->
|
|
719
|
+
<div
|
|
720
|
+
class="p-4 rounded-2xl bg-slate-800/10 border border-white/5 shadow-xl break-inside-avoid mb-4">
|
|
721
|
+
<h3 class="text-lg font-semibold text-white mb-6 flex items-center gap-2 relative z-10">
|
|
722
|
+
<svg class="w-6 h-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
723
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
724
|
+
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z">
|
|
725
|
+
</path>
|
|
726
|
+
</svg>
|
|
727
|
+
AI Intelligence
|
|
728
|
+
</h3>
|
|
729
|
+
<div class="space-y-6 relative z-10">
|
|
730
|
+
<div class="grid grid-cols-2 gap-4">
|
|
731
|
+
<div class="bg-black/20 p-4 rounded-xl border border-white/5">
|
|
732
|
+
<div class="flex justify-between items-center mb-2">
|
|
733
|
+
<h4 class="text-xs uppercase text-slate-500">Sentiment</h4>
|
|
734
|
+
<span id="ai-sentiment-label"
|
|
735
|
+
class="text-[10px] font-bold px-2 py-0.5 rounded bg-slate-800">Neutral</span>
|
|
736
|
+
</div>
|
|
737
|
+
<div id="ai-sentiment-score" class="text-2xl font-bold text-white mb-2">--</div>
|
|
738
|
+
<div class="h-1.5 w-full bg-slate-800 rounded-full overflow-hidden relative">
|
|
739
|
+
<div id="ai-sentiment-bar"
|
|
740
|
+
class="h-full absolute top-0 transition-all duration-1000 ease-out bg-indigo-500"
|
|
741
|
+
style="width: 0%; left: 50%;"></div>
|
|
742
|
+
</div>
|
|
743
|
+
</div>
|
|
744
|
+
<div class="bg-black/20 p-4 rounded-xl border border-white/5">
|
|
745
|
+
<div class="flex justify-between items-center mb-2">
|
|
746
|
+
<h4 class="text-xs uppercase text-slate-500">Readability</h4>
|
|
747
|
+
<span id="ai-readability-label"
|
|
748
|
+
class="text-[10px] font-bold px-2 py-0.5 rounded bg-slate-800">N/A</span>
|
|
749
|
+
</div>
|
|
750
|
+
<div id="ai-readability-score" class="text-2xl font-bold text-white mb-2">--
|
|
751
|
+
</div>
|
|
752
|
+
<div class="h-1.5 w-full bg-slate-800 rounded-full overflow-hidden">
|
|
753
|
+
<div id="ai-readability-bar"
|
|
754
|
+
class="h-full w-0 transition-all duration-1000 bg-indigo-500"></div>
|
|
755
|
+
</div>
|
|
756
|
+
</div>
|
|
757
|
+
</div>
|
|
758
|
+
<div>
|
|
759
|
+
<h4 class="text-xs uppercase text-slate-500 mb-2 font-medium">Content Summary &
|
|
760
|
+
Keywords</h4>
|
|
761
|
+
<div id="ai-summary"
|
|
762
|
+
class="text-slate-300 text-sm italic leading-relaxed bg-black/20 p-4 rounded-xl border border-white/5 mb-3 h-fit">
|
|
763
|
+
--</div>
|
|
764
|
+
<div id="ai-keywords" class="flex flex-wrap gap-2">
|
|
765
|
+
<!-- Populated via JS -->
|
|
766
|
+
</div>
|
|
767
|
+
</div>
|
|
768
|
+
</div>
|
|
769
|
+
</div>
|
|
770
|
+
|
|
771
|
+
<!-- Link Health -->
|
|
772
|
+
<div
|
|
773
|
+
class="p-4 rounded-2xl bg-slate-900/50 border border-red-500/30 shadow-[0_0_20px_rgba(239,68,68,0.1)] self-start break-inside-avoid mb-4">
|
|
774
|
+
<h3 class="text-lg font-semibold text-white mb-6 flex items-center gap-2">
|
|
775
|
+
<svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
776
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
777
|
+
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
|
|
778
|
+
</path>
|
|
779
|
+
</svg>
|
|
780
|
+
Site Health (404s)
|
|
781
|
+
</h3>
|
|
782
|
+
<div class="grid grid-cols-2 gap-4 mb-6">
|
|
783
|
+
<div class="bg-green-900/20 p-3 rounded-xl border border-green-500/30 text-center">
|
|
784
|
+
<div id="health-total-ok" class="text-xl font-bold text-green-400">0</div>
|
|
785
|
+
<div class="text-[10px] text-slate-500 uppercase">Working</div>
|
|
786
|
+
</div>
|
|
787
|
+
<div class="bg-red-900/20 p-3 rounded-xl border border-red-500/30 text-center">
|
|
788
|
+
<div id="health-total-broken" class="text-xl font-bold text-red-400">0</div>
|
|
789
|
+
<div class="text-[10px] text-slate-500 uppercase">Broken</div>
|
|
790
|
+
</div>
|
|
791
|
+
</div>
|
|
792
|
+
<div id="health-broken-list"
|
|
793
|
+
class="space-y-2 max-h-[150px] overflow-y-auto no-scrollbar custom-scrollbar pr-2">
|
|
794
|
+
<p class="text-slate-500 italic text-xs text-center py-4">No broken links detected.</p>
|
|
795
|
+
</div>
|
|
796
|
+
</div>
|
|
797
|
+
|
|
798
|
+
<!-- Design System Analysis (Merged) -->
|
|
799
|
+
<div
|
|
800
|
+
class="col-span-full p-4 rounded-2xl bg-slate-800/20 border border-white/5 shadow-xl break-inside-avoid mb-4">
|
|
801
|
+
<h3 class="text-xl font-bold text-white mb-6 flex items-center gap-2">
|
|
802
|
+
<svg class="w-6 h-6 text-pink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
803
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
804
|
+
d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01">
|
|
805
|
+
</path>
|
|
806
|
+
</svg>
|
|
807
|
+
Design System Analysis
|
|
808
|
+
</h3>
|
|
809
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
810
|
+
<div>
|
|
811
|
+
<h4 class="text-xs font-bold text-slate-500 uppercase tracking-widest mb-4">Color
|
|
812
|
+
Palette
|
|
813
|
+
</h4>
|
|
814
|
+
<div id="design-colors" class="grid grid-cols-4 sm:grid-cols-6 gap-3">
|
|
815
|
+
<p class="text-slate-500 italic text-sm col-span-full">No colors detected yet.
|
|
816
|
+
</p>
|
|
817
|
+
</div>
|
|
818
|
+
</div>
|
|
819
|
+
<div>
|
|
820
|
+
<h4 class="text-xs font-bold text-slate-500 uppercase tracking-widest mb-4">
|
|
821
|
+
Typography
|
|
822
|
+
</h4>
|
|
823
|
+
<div id="design-fonts" class="space-y-3">
|
|
824
|
+
<p class="text-slate-500 italic text-sm">No fonts detected yet.</p>
|
|
825
|
+
</div>
|
|
826
|
+
</div>
|
|
827
|
+
</div>
|
|
828
|
+
</div>
|
|
829
|
+
</div>
|
|
830
|
+
</div>
|
|
831
|
+
</div>
|
|
832
|
+
</div>
|
|
833
|
+
</div>
|
|
834
|
+
<div id="image-results"
|
|
835
|
+
class="w-full max-w-6xl mx-auto hidden animate-in fade-in slide-in-from-bottom-4 duration-500 px-4 mt-4">
|
|
836
|
+
<div class="glass-dark rounded-xl p-4 border border-white/5 shadow-xl relative overflow-hidden">
|
|
837
|
+
<div class="absolute inset-0 bg-gradient-to-br from-indigo-500/5 to-purple-500/5 pointer-events-none"></div>
|
|
838
|
+
<h2
|
|
839
|
+
class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-indigo-400 mb-4 flex items-center gap-2 relative z-10">
|
|
840
|
+
<svg class="w-6 h-6 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
841
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
842
|
+
d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z">
|
|
843
|
+
</path>
|
|
844
|
+
</svg>
|
|
845
|
+
Image Intelligence Report
|
|
846
|
+
</h2>
|
|
847
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 relative z-10">
|
|
848
|
+
<!-- Image Preview -->
|
|
849
|
+
<div class="col-span-full md:col-span-1">
|
|
850
|
+
<div
|
|
851
|
+
class="rounded-xl overflow-hidden border border-slate-700/50 shadow-lg bg-black/40 h-full flex items-center justify-center min-h-[250px]">
|
|
852
|
+
<img id="result-image-preview" class="w-full h-auto object-contain max-h-[350px]">
|
|
853
|
+
</div>
|
|
854
|
+
</div>
|
|
855
|
+
<!-- Quick Stats -->
|
|
856
|
+
<div class="col-span-full md:col-span-1 space-y-3">
|
|
857
|
+
<div
|
|
858
|
+
class="p-4 bg-slate-800/40 rounded-xl border border-slate-700/50 hover:border-indigo-500/30 transition-colors">
|
|
859
|
+
<h4
|
|
860
|
+
class="text-xs uppercase text-indigo-400 font-bold tracking-wider mb-2 flex items-center gap-2">
|
|
861
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
862
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
863
|
+
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
|
|
864
|
+
</path>
|
|
865
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
866
|
+
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
867
|
+
</svg>
|
|
868
|
+
Location Data
|
|
869
|
+
</h4>
|
|
870
|
+
<div id="result-location" class="text-slate-300 text-sm">
|
|
871
|
+
<span class="italic text-slate-600">No GPS data found.</span>
|
|
872
|
+
</div>
|
|
873
|
+
</div>
|
|
874
|
+
<div
|
|
875
|
+
class="p-4 bg-slate-800/40 rounded-xl border border-slate-700/50 hover:border-indigo-500/30 transition-colors">
|
|
876
|
+
<h4
|
|
877
|
+
class="text-xs uppercase text-indigo-400 font-bold tracking-wider mb-2 flex items-center gap-2">
|
|
878
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
879
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
880
|
+
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z">
|
|
881
|
+
</path>
|
|
882
|
+
</svg>
|
|
883
|
+
AI Trust Score
|
|
884
|
+
</h4>
|
|
885
|
+
<div class="flex items-center gap-3">
|
|
886
|
+
<div id="result-ai-score-ring" class="relative w-10 h-10 flex items-center justify-center">
|
|
887
|
+
<svg class="w-full h-full -rotate-90">
|
|
888
|
+
<circle cx="20" cy="20" r="18" stroke="currentColor" stroke-width="3"
|
|
889
|
+
fill="transparent" class="text-slate-700"></circle>
|
|
890
|
+
<circle id="result-ai-score-circle" cx="20" cy="20" r="18" stroke="currentColor"
|
|
891
|
+
stroke-width="3" fill="transparent" class="text-indigo-500"
|
|
892
|
+
stroke-dasharray="113" stroke-dashoffset="113"></circle>
|
|
893
|
+
</svg>
|
|
894
|
+
<span id="result-ai-score-text"
|
|
895
|
+
class="absolute text-[10px] font-bold text-white">--</span>
|
|
896
|
+
</div>
|
|
897
|
+
<div>
|
|
898
|
+
<p id="result-ai-label" class="text-white font-bold text-sm">Analyzing...</p>
|
|
899
|
+
<p class="text-slate-500 text-[10px] uppercase tracking-tighter">Likelihood of Real</p>
|
|
900
|
+
</div>
|
|
901
|
+
</div>
|
|
902
|
+
</div>
|
|
903
|
+
<div
|
|
904
|
+
class="p-4 bg-slate-800/40 rounded-xl border border-slate-700/50 hover:border-indigo-500/30 transition-colors">
|
|
905
|
+
<h4
|
|
906
|
+
class="text-xs uppercase text-indigo-400 font-bold tracking-wider mb-2 flex items-center gap-2">
|
|
907
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
908
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
909
|
+
d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z">
|
|
910
|
+
</path>
|
|
911
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
912
|
+
d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
913
|
+
</svg>
|
|
914
|
+
Core Info
|
|
915
|
+
</h4>
|
|
916
|
+
<div id="result-camera" class="text-slate-300 text-sm space-y-1">
|
|
917
|
+
Unknown
|
|
918
|
+
</div>
|
|
919
|
+
</div>
|
|
920
|
+
</div>
|
|
921
|
+
<!-- Full Metadata -->
|
|
922
|
+
<div class="col-span-full">
|
|
923
|
+
<h3 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
|
924
|
+
<svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
925
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
926
|
+
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
|
|
927
|
+
</path>
|
|
928
|
+
</svg>
|
|
929
|
+
Detailed Metadata
|
|
930
|
+
</h3>
|
|
931
|
+
<div class="overflow-hidden rounded-xl border border-slate-700/50 shadow-inner">
|
|
932
|
+
<table class="w-full text-sm text-left text-slate-400">
|
|
933
|
+
<thead class="text-xs text-slate-300 uppercase bg-slate-800/80">
|
|
934
|
+
<tr>
|
|
935
|
+
<th class="px-4 py-2 border-b border-slate-700">Tag</th>
|
|
936
|
+
<th class="px-4 py-2 border-b border-slate-700">Value</th>
|
|
937
|
+
</tr>
|
|
938
|
+
</thead>
|
|
939
|
+
<tbody id="result-metadata-body" class="bg-black/20 divide-y divide-slate-800">
|
|
940
|
+
<!-- Populated via JS -->
|
|
941
|
+
</tbody>
|
|
942
|
+
</table>
|
|
943
|
+
</div>
|
|
944
|
+
</div>
|
|
945
|
+
<!-- Forensics Analysis -->
|
|
946
|
+
<div class="col-span-full mt-2 pt-4 border-t border-slate-700/50">
|
|
947
|
+
<div class="flex items-center justify-between mb-4">
|
|
948
|
+
<h3 class="text-lg font-semibold text-white flex items-center gap-2">
|
|
949
|
+
<svg class="w-5 h-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
950
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
951
|
+
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
|
|
952
|
+
</path>
|
|
953
|
+
</svg>
|
|
954
|
+
Forensics Analysis
|
|
955
|
+
</h3>
|
|
956
|
+
<button onclick="runELA()" id="btn-ela"
|
|
957
|
+
class="px-4 py-2 bg-red-500/10 text-red-400 border border-red-500/50 rounded-lg hover:bg-red-500 hover:text-white transition-all text-sm font-medium flex items-center gap-2">
|
|
958
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
959
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
960
|
+
d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z">
|
|
961
|
+
</path>
|
|
962
|
+
</svg>
|
|
963
|
+
Run ELA
|
|
964
|
+
</button>
|
|
965
|
+
</div>
|
|
966
|
+
<div id="ela-result-container" class="hidden">
|
|
967
|
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
968
|
+
<div class="bg-black/40 rounded-xl p-4 border border-slate-700/50 text-center">
|
|
969
|
+
<p class="text-xs text-slate-500 mb-2 uppercase tracking-wider">Original</p>
|
|
970
|
+
<img id="ela-original-preview" class="max-h-[300px] mx-auto object-contain rounded-lg">
|
|
971
|
+
</div>
|
|
972
|
+
<div
|
|
973
|
+
class="bg-black/40 rounded-xl p-4 border border-slate-700/50 text-center relative group">
|
|
974
|
+
<p class="text-xs text-red-400 mb-2 uppercase tracking-wider">Error Level Analysis</p>
|
|
975
|
+
<img id="ela-result-img" class="max-h-[300px] mx-auto object-contain rounded-lg">
|
|
976
|
+
<div id="ela-loading"
|
|
977
|
+
class="absolute inset-0 bg-black/80 flex items-center justify-center hidden rounded-xl">
|
|
978
|
+
<div
|
|
979
|
+
class="w-8 h-8 border-2 border-red-500 border-t-transparent rounded-full animate-spin">
|
|
980
|
+
</div>
|
|
981
|
+
</div>
|
|
982
|
+
</div>
|
|
983
|
+
</div>
|
|
984
|
+
<p class="text-xs text-slate-400 mt-3 italic">
|
|
985
|
+
<span class="text-red-400 font-bold">Note:</span> Brighter areas in the ELA image indicate
|
|
986
|
+
higher error levels (potential manipulation). Uniform darkness suggests consistent
|
|
987
|
+
compression.
|
|
988
|
+
</p>
|
|
989
|
+
</div>
|
|
990
|
+
<!-- AI Detection -->
|
|
991
|
+
<div class="mt-6 pt-4 border-t border-slate-700/50">
|
|
992
|
+
<div class="flex items-center justify-between mb-4">
|
|
993
|
+
<h3 class="text-lg font-semibold text-white flex items-center gap-2">
|
|
994
|
+
<svg class="w-5 h-5 text-indigo-400" fill="none" stroke="currentColor"
|
|
995
|
+
viewBox="0 0 24 24">
|
|
996
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
997
|
+
d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z">
|
|
998
|
+
</path>
|
|
999
|
+
</svg>
|
|
1000
|
+
AI-Based Detection (Beta)
|
|
1001
|
+
</h3>
|
|
1002
|
+
<button onclick="runAIDetection()" id="btn-ai"
|
|
1003
|
+
class="px-4 py-2 bg-indigo-500/10 text-indigo-400 border border-indigo-500/50 rounded-lg hover:bg-indigo-500 hover:text-white transition-all text-sm font-medium flex items-center gap-2">
|
|
1004
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
1005
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
1006
|
+
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
1007
|
+
</svg>
|
|
1008
|
+
Run AI Check
|
|
1009
|
+
</button>
|
|
1010
|
+
</div>
|
|
1011
|
+
<div id="ai-result-container"
|
|
1012
|
+
class="hidden bg-slate-800/50 rounded-xl p-6 border border-slate-700/50">
|
|
1013
|
+
<div class="flex flex-col md:flex-row gap-6 items-center">
|
|
1014
|
+
<div class="w-full md:w-1/2">
|
|
1015
|
+
<div class="flex justify-between items-end mb-2">
|
|
1016
|
+
<span class="text-sm text-slate-400 font-medium">Likelihood of
|
|
1017
|
+
Manipulation</span>
|
|
1018
|
+
<span id="ai-score-val" class="text-2xl font-bold text-white">0%</span>
|
|
1019
|
+
</div>
|
|
1020
|
+
<div class="w-full bg-slate-700 rounded-full h-4 overflow-hidden">
|
|
1021
|
+
<div id="ai-score-bar"
|
|
1022
|
+
class="bg-indigo-500 h-4 rounded-full transition-all duration-1000"
|
|
1023
|
+
style="width: 0%"></div>
|
|
1024
|
+
</div>
|
|
1025
|
+
</div>
|
|
1026
|
+
<div class="w-full md:w-1/2 text-center md:text-left">
|
|
1027
|
+
<div class="bg-black/20 rounded-lg p-4 border border-slate-700/30">
|
|
1028
|
+
<p class="text-xs text-slate-500 uppercase tracking-wider mb-1">Analysis Result
|
|
1029
|
+
</p>
|
|
1030
|
+
<p id="ai-label" class="text-xl font-bold text-white">--</p>
|
|
1031
|
+
<p id="ai-details" class="text-xs text-slate-400 mt-2">Frequency Domain Analysis
|
|
1032
|
+
</p>
|
|
1033
|
+
</div>
|
|
1034
|
+
</div>
|
|
1035
|
+
</div>
|
|
1036
|
+
<div id="ai-loading" class="hidden mt-4 text-center text-sm text-indigo-400 animate-pulse">
|
|
1037
|
+
Analyzing frequency spectrum...
|
|
1038
|
+
</div>
|
|
1039
|
+
</div>
|
|
1040
|
+
</div>
|
|
1041
|
+
</div>
|
|
1042
|
+
</div>
|
|
1043
|
+
</div>
|
|
1044
|
+
</div>
|
|
1045
|
+
</div>
|
|
1046
|
+
<div id="image-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/90 backdrop-blur-sm"
|
|
1047
|
+
onclick="if(event.target === this) wsp_closeModal()">
|
|
1048
|
+
<button onclick="wsp_closeModal()"
|
|
1049
|
+
class="absolute top-4 right-4 p-2 bg-white/10 hover:bg-white/20 text-white rounded-full transition-all z-10">
|
|
1050
|
+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
1051
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
1052
|
+
</svg>
|
|
1053
|
+
</button>
|
|
1054
|
+
<button onclick="prevImage()"
|
|
1055
|
+
class="absolute left-4 top-1/2 -translate-y-1/2 p-3 bg-white/10 hover:bg-white/20 text-white rounded-full transition-all z-10">
|
|
1056
|
+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
1057
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
|
1058
|
+
</svg>
|
|
1059
|
+
</button>
|
|
1060
|
+
<button onclick="nextImage()"
|
|
1061
|
+
class="absolute right-4 top-1/2 -translate-y-1/2 p-3 bg-white/10 hover:bg-white/20 text-white rounded-full transition-all z-10">
|
|
1062
|
+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
1063
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
1064
|
+
</svg>
|
|
1065
|
+
</button>
|
|
1066
|
+
<div class="flex flex-col items-center gap-4">
|
|
1067
|
+
<img id="modal-image" src="" class="max-w-[90vw] max-h-[80vh] object-contain rounded-lg shadow-2xl"
|
|
1068
|
+
alt="Preview">
|
|
1069
|
+
<div class="flex items-center gap-4 text-white/70 text-sm">
|
|
1070
|
+
<span id="modal-counter">1 / 1</span>
|
|
1071
|
+
<a id="modal-download" href="" download
|
|
1072
|
+
class="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-all flex items-center gap-2">
|
|
1073
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
1074
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
1075
|
+
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
|
|
1076
|
+
</svg>
|
|
1077
|
+
Download
|
|
1078
|
+
</a>
|
|
1079
|
+
</div>
|
|
1080
|
+
</div>
|
|
1081
|
+
</div>
|
|
1082
|
+
<dialog id="video-modal"
|
|
1083
|
+
class="backdrop:bg-black/90 bg-transparent p-0 overflow-hidden w-full h-full max-w-full max-h-full m-0 bg-transparent focus:outline-none"
|
|
1084
|
+
onclick="closeVideoModal()">
|
|
1085
|
+
<div class="w-full h-full flex items-center justify-center relative pointer-events-none p-4">
|
|
1086
|
+
<video id="modal-video" controls autoplay
|
|
1087
|
+
class="max-w-full max-h-[85vh] object-contain rounded-lg shadow-2xl pointer-events-auto transition-all duration-300 scale-95 opacity-0 select-none bg-black"
|
|
1088
|
+
onclick="event.stopPropagation()">
|
|
1089
|
+
Your browser does not support the video tag.
|
|
1090
|
+
</video>
|
|
1091
|
+
<button onclick="closeVideoModal()"
|
|
1092
|
+
class="absolute top-4 right-4 p-2 bg-black/50 hover:bg-black/80 text-white rounded-full pointer-events-auto transition-colors z-50 backdrop-blur-sm">
|
|
1093
|
+
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
1094
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
|
|
1095
|
+
</path>
|
|
1096
|
+
</svg>
|
|
1097
|
+
</button>
|
|
1098
|
+
</div>
|
|
1099
|
+
</dialog>
|
|
1100
|
+
</body>
|
|
1101
|
+
|
|
1102
|
+
</html>
|