-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpreview.html
More file actions
127 lines (122 loc) · 6.13 KB
/
Copy pathpreview.html
File metadata and controls
127 lines (122 loc) · 6.13 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="popup/popup.css" />
<title>ShopSpy — Design Preview</title>
<style>
/* Preview-only chrome: center the popup on a neutral backdrop */
html, body { height: 100%; }
body { margin: 0 auto; box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); border-radius: 16px; overflow: hidden; }
.preview-wrap { min-height: 100vh; display: grid; place-items: center; background: #05070a; padding: 30px; }
</style>
</head>
<body>
<header class="app-header">
<div class="brand">
<span class="logo-tile" aria-hidden="true">
<svg viewBox="0 0 32 32" width="22" height="22" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="13.5" cy="13.5" r="8" stroke="#fff" stroke-width="2.4" />
<path d="M19.8 19.8 26.5 26.5" stroke="#fff" stroke-width="2.7" stroke-linecap="round" />
<path d="M10.4 16v-1.8M13.5 16v-4M16.6 16v-6.2" stroke="#fff" stroke-width="2" stroke-linecap="round" />
</svg>
</span>
<div class="brand-text">
<h1>Shop<span class="grad">Spy</span></h1>
<p class="tagline">Store Intelligence</p>
</div>
</div>
<button class="refresh-btn" title="Re-scan" aria-label="Refresh">
<svg class="refresh-icon" viewBox="0 0 24 24" width="17" height="17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 11a8 8 0 1 0-.6 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
<path d="M20 4v6h-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</header>
<section class="detect-banner yes">
<span class="status-dot"></span>
<span>Shopify store detected</span>
</section>
<section class="score-hero">
<div class="score-ring" style="background: conic-gradient(#34d399 288deg, var(--border-strong) 288deg)">
<div class="score-num"><span>8</span><small>/10</small></div>
</div>
<div class="score-meta">
<div class="score-band">Established</div>
<div class="score-label muted">Store Maturity</div>
</div>
</section>
<nav class="tabs">
<button class="tab active">Identity</button>
<button class="tab">Catalog</button>
<button class="tab">Apps</button>
<button class="tab">SEO</button>
<button class="tab">Social</button>
<button class="tab">Score</button>
</nav>
<div class="tab-panels">
<!-- Catalog panel shown as the richest example -->
<section class="panel active">
<div class="stat-grid">
<div class="stat"><div class="num">1,284</div><div class="cap">Products</div></div>
<div class="stat"><div class="num">37</div><div class="cap">Collections</div></div>
<div class="stat"><div class="num">3.4</div><div class="cap">Avg variants / product</div></div>
<div class="stat"><div class="num">6%</div><div class="cap">Out of stock</div></div>
</div>
<div class="card">
<div class="card-title">Pricing</div>
<div class="row"><span class="k">Price min</span><span class="v">USD 12.00</span></div>
<div class="row"><span class="k">Price max</span><span class="v">USD 240.00</span></div>
<div class="row"><span class="k">Price avg</span><span class="v">USD 68.40</span></div>
<div class="row"><span class="k">Price tier</span><span class="v"><span class="badge tier-Mid">Mid</span></span></div>
</div>
<div class="card">
<div class="card-title">App Stack</div>
<div class="app-cat"><h4>Email Marketing</h4><div class="chips"><span class="chip on"><span class="dot"></span>Klaviyo</span></div></div>
<div class="app-cat"><h4>Reviews</h4><div class="chips"><span class="chip on"><span class="dot"></span>Judge.me</span></div></div>
<div class="app-cat"><h4>Subscriptions</h4><div class="chips"><span class="chip on"><span class="dot"></span>Recharge</span></div></div>
<div class="app-cat"><h4>Loyalty</h4><div class="chips"><span class="chip on"><span class="dot"></span>Smile.io</span></div></div>
</div>
<div class="card">
<div class="card-title">Maturity Breakdown</div>
<div style="padding:6px 4px">
<div class="factor">
<div class="factor-head"><span>Product catalog</span><span class="fp">2/2</span></div>
<div class="bar"><span style="width:100%"></span></div>
<div class="factor-detail">1,284 products</div>
</div>
<div class="factor">
<div class="factor-head"><span>App stack depth</span><span class="fp">2/2</span></div>
<div class="bar"><span style="width:100%"></span></div>
<div class="factor-detail">5 categories, 6 apps</div>
</div>
<div class="factor">
<div class="factor-head"><span>Social presence</span><span class="fp">1/1</span></div>
<div class="bar"><span style="width:100%"></span></div>
<div class="factor-detail">4 networks</div>
</div>
<div class="factor">
<div class="factor-head"><span>Free shipping</span><span class="fp">0/1</span></div>
<div class="bar"><span style="width:0%"></span></div>
<div class="factor-detail">none</div>
</div>
</div>
</div>
<div class="card">
<div class="card-title">Social & Brand</div>
<div class="chips">
<span class="chip on"><span class="dot"></span>Instagram</span>
<span class="chip on"><span class="dot"></span>TikTok</span>
<span class="chip on"><span class="dot"></span>YouTube</span>
<span class="chip">Pinterest</span>
</div>
</div>
</section>
</div>
<footer class="app-footer">
<span id="footerText">glossier.com</span>
<button class="link-btn">Export JSON</button>
</footer>
</body>
</html>