@scanbim-labs/scanbim-mcp 1.0.5

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.
@@ -0,0 +1,644 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ScanBIM 3D — QR-Linked Model Viewer</title>
7
+ <meta name="description" content="Share 3D models instantly with QR codes. View IFC, OBJ, GLTF, and FBX files anywhere — no software required. Built for AEC professionals.">
8
+ <meta name="theme-color" content="#f97316">
9
+ <link rel="manifest" href="/manifest.json">
10
+ <link rel="apple-touch-icon" href="/icon-192.png">
11
+ <meta property="og:title" content="ScanBIM 3D — QR-Linked Model Viewer">
12
+ <meta property="og:description" content="Share 3D models instantly with QR codes. No software required.">
13
+ <meta property="og:type" content="website">
14
+ <meta property="og:url" content="https://scanbim.app">
15
+ <link rel="preconnect" href="https://fonts.googleapis.com">
16
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
17
+ <style>
18
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
19
+ :root {
20
+ --bg: #0d1117; --card: #161b22; --card-hover: #1c2333;
21
+ --bdr: #21262d; --acc: #f97316; --ach: #ea6c09;
22
+ --blue: #3b82f6; --grn: #22c55e; --cyan: #22d3ee;
23
+ --txt: #f0f6fc; --muted: #8b949e; --dim: #484f58;
24
+ }
25
+ html { scroll-behavior: smooth; }
26
+ body {
27
+ font-family: 'Inter', system-ui, -apple-system, sans-serif;
28
+ background: var(--bg); color: var(--txt); line-height: 1.6;
29
+ overflow-x: hidden;
30
+ }
31
+ a { color: var(--acc); text-decoration: none; transition: color .2s; }
32
+ a:hover { color: var(--ach); }
33
+
34
+ /* ── SCROLL REVEAL ── */
35
+ .reveal {
36
+ opacity: 0; transform: translateY(24px);
37
+ transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
38
+ }
39
+ .reveal.visible { opacity: 1; transform: translateY(0); }
40
+ .reveal-delay-1 { transition-delay: .1s; }
41
+ .reveal-delay-2 { transition-delay: .2s; }
42
+ .reveal-delay-3 { transition-delay: .3s; }
43
+ .reveal-delay-4 { transition-delay: .4s; }
44
+ .reveal-delay-5 { transition-delay: .5s; }
45
+
46
+ /* ── NAV ── */
47
+ nav {
48
+ position: fixed; top: 0; left: 0; right: 0; z-index: 100;
49
+ background: rgba(13,17,23,.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
50
+ border-bottom: 1px solid rgba(249,115,22,.1);
51
+ padding: 0 32px; height: 64px;
52
+ display: flex; align-items: center; justify-content: space-between;
53
+ transition: background .3s, box-shadow .3s;
54
+ }
55
+ nav.scrolled { background: rgba(13,17,23,.95); box-shadow: 0 4px 24px rgba(0,0,0,.4); }
56
+ .nav-brand { display: flex; align-items: center; gap: 12px; }
57
+ .nav-logo {
58
+ width: 36px; height: 36px; background: var(--acc); border-radius: 10px;
59
+ display: flex; align-items: center; justify-content: center;
60
+ box-shadow: 0 2px 8px rgba(249,115,22,.3);
61
+ transition: transform .2s, box-shadow .2s;
62
+ }
63
+ .nav-logo:hover { transform: scale(1.05); box-shadow: 0 4px 16px rgba(249,115,22,.4); }
64
+ .nav-name { font-size: 20px; font-weight: 700; letter-spacing: -.5px; }
65
+ .nav-name span { color: var(--acc); }
66
+ .nav-links { display: flex; align-items: center; gap: 32px; }
67
+ .nav-links a {
68
+ color: var(--muted); font-size: 14px; font-weight: 500;
69
+ transition: color .2s; position: relative;
70
+ }
71
+ .nav-links a:not(.nav-cta):hover { color: var(--txt); }
72
+ .nav-links a:not(.nav-cta)::after {
73
+ content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
74
+ height: 2px; background: var(--acc); border-radius: 1px;
75
+ transform: scaleX(0); transition: transform .25s ease; transform-origin: center;
76
+ }
77
+ .nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }
78
+ .nav-cta {
79
+ background: var(--acc); color: #fff !important; padding: 9px 22px; border-radius: 8px;
80
+ font-weight: 600; font-size: 14px; transition: all .2s;
81
+ box-shadow: 0 2px 8px rgba(249,115,22,.25);
82
+ }
83
+ .nav-cta:hover { background: var(--ach); color: #fff !important; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(249,115,22,.35); }
84
+ .nav-hamburger {
85
+ display: none; background: none; border: none; color: var(--txt);
86
+ font-size: 24px; cursor: pointer;
87
+ }
88
+
89
+ /* ── HERO ── */
90
+ .hero {
91
+ min-height: 100vh; display: flex; align-items: center; justify-content: center;
92
+ text-align: center; padding: 140px 24px 100px;
93
+ position: relative; overflow: hidden;
94
+ }
95
+ .hero-bg {
96
+ position: absolute; inset: 0; z-index: 0;
97
+ background:
98
+ radial-gradient(ellipse 80% 60% at 50% -20%, rgba(249,115,22,.15) 0%, transparent 60%),
99
+ radial-gradient(ellipse 60% 50% at 80% 50%, rgba(59,130,246,.08) 0%, transparent 50%),
100
+ var(--bg);
101
+ }
102
+ /* Animated grid */
103
+ .hero-grid {
104
+ position: absolute; inset: 0; z-index: 0;
105
+ background-image:
106
+ linear-gradient(rgba(249,115,22,.04) 1px, transparent 1px),
107
+ linear-gradient(90deg, rgba(249,115,22,.04) 1px, transparent 1px);
108
+ background-size: 60px 60px;
109
+ mask-image: radial-gradient(ellipse 70% 50% at 50% 40%, black 20%, transparent 70%);
110
+ -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 40%, black 20%, transparent 70%);
111
+ animation: gridFloat 20s linear infinite;
112
+ }
113
+ @keyframes gridFloat { from { background-position: 0 0; } to { background-position: 60px 60px; } }
114
+ /* Floating orbs */
115
+ .hero-orb {
116
+ position: absolute; border-radius: 50%; filter: blur(60px); z-index: 0; opacity: .4;
117
+ animation: orbFloat 8s ease-in-out infinite alternate;
118
+ }
119
+ .hero-orb-1 { width: 400px; height: 400px; background: rgba(249,115,22,.12); top: -100px; left: 10%; animation-duration: 10s; }
120
+ .hero-orb-2 { width: 300px; height: 300px; background: rgba(59,130,246,.1); bottom: -50px; right: 5%; animation-duration: 12s; animation-delay: -4s; }
121
+ .hero-orb-3 { width: 200px; height: 200px; background: rgba(34,211,238,.08); top: 30%; right: 20%; animation-duration: 9s; animation-delay: -2s; }
122
+ @keyframes orbFloat {
123
+ 0% { transform: translate(0, 0) scale(1); }
124
+ 100% { transform: translate(30px, -20px) scale(1.1); }
125
+ }
126
+ .hero::after {
127
+ content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
128
+ background: linear-gradient(90deg, transparent, rgba(249,115,22,.3), transparent);
129
+ z-index: 1;
130
+ }
131
+ .hero-content { max-width: 820px; position: relative; z-index: 1; }
132
+ .hero-badge {
133
+ display: inline-flex; align-items: center; gap: 8px;
134
+ padding: 7px 18px; border-radius: 99px; font-size: 13px; font-weight: 600;
135
+ background: rgba(249,115,22,.08); border: 1px solid rgba(249,115,22,.2);
136
+ color: var(--acc); margin-bottom: 32px; letter-spacing: .3px;
137
+ backdrop-filter: blur(8px);
138
+ }
139
+ .hero-badge .dot {
140
+ width: 7px; height: 7px; border-radius: 50%; background: var(--grn);
141
+ animation: pulse 2s infinite; box-shadow: 0 0 8px rgba(34,197,94,.4);
142
+ }
143
+ @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
144
+ .hero h1 {
145
+ font-size: clamp(38px, 6vw, 68px); font-weight: 900; line-height: 1.08;
146
+ letter-spacing: -2px; margin-bottom: 24px;
147
+ }
148
+ .hero h1 .accent { color: var(--acc); }
149
+ .hero p {
150
+ font-size: clamp(16px, 2vw, 20px); color: var(--muted); max-width: 600px;
151
+ margin: 0 auto 44px; line-height: 1.7;
152
+ }
153
+ .hero-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
154
+ .btn-primary {
155
+ background: var(--acc); color: #fff; padding: 15px 36px; border-radius: 12px;
156
+ font-weight: 700; font-size: 16px; border: none; cursor: pointer;
157
+ transition: all .25s; display: inline-flex; align-items: center; gap: 8px;
158
+ box-shadow: 0 4px 16px rgba(249,115,22,.3);
159
+ }
160
+ .btn-primary:hover { background: var(--ach); transform: translateY(-2px); color: #fff; box-shadow: 0 8px 32px rgba(249,115,22,.4); }
161
+ .btn-secondary {
162
+ background: rgba(255,255,255,.04); color: var(--txt); padding: 15px 36px; border-radius: 12px;
163
+ font-weight: 600; font-size: 16px; border: 1px solid var(--bdr); cursor: pointer;
164
+ transition: all .25s; display: inline-flex; align-items: center; gap: 8px;
165
+ backdrop-filter: blur(8px);
166
+ }
167
+ .btn-secondary:hover { border-color: var(--muted); background: rgba(255,255,255,.06); color: var(--txt); transform: translateY(-1px); }
168
+
169
+ /* ── FORMAT STRIP ── */
170
+ .formats {
171
+ display: flex; justify-content: center; gap: 12px; margin-top: 56px;
172
+ flex-wrap: wrap;
173
+ }
174
+ .format-chip {
175
+ padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 600;
176
+ background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
177
+ color: var(--dim); letter-spacing: .6px; transition: all .2s;
178
+ }
179
+ .format-chip:hover { border-color: rgba(249,115,22,.2); color: var(--muted); }
180
+
181
+ /* ── SECTION ── */
182
+ section { padding: 120px 24px; }
183
+ .section-header { text-align: center; max-width: 640px; margin: 0 auto 72px; }
184
+ .section-header h2 {
185
+ font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -1.2px;
186
+ margin-bottom: 16px; line-height: 1.15;
187
+ }
188
+ .section-header p { color: var(--muted); font-size: 17px; line-height: 1.7; }
189
+
190
+ /* ── FEATURES ── */
191
+ .features-grid {
192
+ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
193
+ gap: 20px; max-width: 1100px; margin: 0 auto;
194
+ }
195
+ .feature-card {
196
+ background: var(--card); border: 1px solid var(--bdr); border-radius: 16px;
197
+ padding: 36px; transition: all .35s cubic-bezier(.16,1,.3,1);
198
+ position: relative; overflow: hidden;
199
+ }
200
+ .feature-card::before {
201
+ content: ''; position: absolute; inset: 0; opacity: 0;
202
+ background: linear-gradient(135deg, rgba(249,115,22,.04) 0%, transparent 60%);
203
+ transition: opacity .35s;
204
+ }
205
+ .feature-card:hover { border-color: rgba(249,115,22,.25); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
206
+ .feature-card:hover::before { opacity: 1; }
207
+ .feature-icon {
208
+ width: 52px; height: 52px; border-radius: 14px; display: flex;
209
+ align-items: center; justify-content: center;
210
+ margin-bottom: 20px; position: relative;
211
+ }
212
+ .feature-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; position: relative; }
213
+ .feature-card p { color: var(--muted); font-size: 14px; line-height: 1.75; position: relative; }
214
+
215
+ /* ── HOW IT WORKS ── */
216
+ .how-section { background: var(--card); position: relative; }
217
+ .how-section::before, .how-section::after {
218
+ content: ''; position: absolute; left: 0; right: 0; height: 1px;
219
+ background: linear-gradient(90deg, transparent, rgba(249,115,22,.15), transparent);
220
+ }
221
+ .how-section::before { top: 0; }
222
+ .how-section::after { bottom: 0; }
223
+ .steps {
224
+ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
225
+ gap: 40px; max-width: 960px; margin: 0 auto; position: relative;
226
+ }
227
+ .step { text-align: center; position: relative; }
228
+ .step-num {
229
+ width: 60px; height: 60px; border-radius: 50%; display: flex;
230
+ align-items: center; justify-content: center; font-size: 24px; font-weight: 800;
231
+ background: rgba(249,115,22,.1); border: 2px solid rgba(249,115,22,.25);
232
+ color: var(--acc); margin: 0 auto 20px;
233
+ box-shadow: 0 0 24px rgba(249,115,22,.1);
234
+ transition: all .3s;
235
+ }
236
+ .step:hover .step-num { transform: scale(1.1); box-shadow: 0 0 32px rgba(249,115,22,.2); border-color: rgba(249,115,22,.4); }
237
+ .step h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
238
+ .step p { color: var(--muted); font-size: 14px; line-height: 1.7; }
239
+
240
+ /* ── PRICING ── */
241
+ .pricing-grid {
242
+ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
243
+ gap: 20px; max-width: 1100px; margin: 0 auto;
244
+ }
245
+ .pricing-card {
246
+ background: var(--card); border: 1px solid var(--bdr); border-radius: 16px;
247
+ padding: 40px 32px; text-align: center; transition: all .35s; position: relative;
248
+ }
249
+ .pricing-card:hover { border-color: rgba(249,115,22,.2); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.3); }
250
+ .pricing-card.featured {
251
+ border: 2px solid var(--acc);
252
+ background: linear-gradient(180deg, rgba(249,115,22,.04) 0%, var(--card) 40%);
253
+ }
254
+ .pricing-badge {
255
+ position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
256
+ background: var(--acc); color: #fff; font-size: 11px; font-weight: 700;
257
+ padding: 5px 16px; border-radius: 99px; text-transform: uppercase; letter-spacing: .5px;
258
+ box-shadow: 0 4px 12px rgba(249,115,22,.3);
259
+ }
260
+ .pricing-tier { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--dim); margin-bottom: 16px; }
261
+ .pricing-card.featured .pricing-tier { color: var(--acc); }
262
+ .pricing-card.enterprise .pricing-tier { color: var(--grn); }
263
+ .pricing-price { font-size: 52px; font-weight: 800; margin-bottom: 4px; letter-spacing: -2px; }
264
+ .pricing-price span { font-size: 16px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
265
+ .pricing-period { font-size: 12px; color: var(--dim); margin-bottom: 28px; }
266
+ .pricing-features { list-style: none; text-align: left; margin-bottom: 32px; }
267
+ .pricing-features li {
268
+ font-size: 13px; color: var(--muted); padding: 8px 0;
269
+ border-bottom: 1px solid rgba(33,38,45,.5); display: flex; align-items: flex-start; gap: 10px;
270
+ }
271
+ .pricing-features li:last-child { border-bottom: none; }
272
+ .pricing-features li::before { content: '\2713'; color: var(--grn); font-weight: 700; flex-shrink: 0; font-size: 14px; }
273
+ .pricing-btn {
274
+ display: block; width: 100%; padding: 13px; border-radius: 10px;
275
+ font-weight: 700; font-size: 14px; border: none; cursor: pointer; transition: all .25s;
276
+ text-align: center; text-decoration: none;
277
+ }
278
+ .pricing-btn.free { background: rgba(255,255,255,.04); color: var(--txt); border: 1px solid var(--bdr); }
279
+ .pricing-btn.free:hover { border-color: var(--muted); background: rgba(255,255,255,.06); }
280
+ .pricing-btn.pro { background: var(--acc); color: #fff; box-shadow: 0 4px 16px rgba(249,115,22,.25); }
281
+ .pricing-btn.pro:hover { background: var(--ach); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(249,115,22,.35); }
282
+ .pricing-btn.ent { background: var(--grn); color: #0d1117; box-shadow: 0 4px 16px rgba(34,197,94,.2); }
283
+ .pricing-btn.ent:hover { background: #1db954; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(34,197,94,.3); }
284
+
285
+ /* ── TOGGLE ── */
286
+ .toggle-wrap { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 48px; }
287
+ .toggle-label { font-size: 14px; font-weight: 500; transition: color .2s; }
288
+ .toggle-btn {
289
+ position: relative; width: 52px; height: 28px; border-radius: 99px;
290
+ border: none; cursor: pointer; background: var(--acc); padding: 0;
291
+ transition: background .2s; box-shadow: 0 2px 8px rgba(249,115,22,.2);
292
+ }
293
+ .toggle-knob {
294
+ position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
295
+ border-radius: 50%; background: #fff; transition: transform .3s cubic-bezier(.16,1,.3,1);
296
+ transform: translateX(24px); box-shadow: 0 1px 4px rgba(0,0,0,.2);
297
+ }
298
+
299
+ /* ── CTA ── */
300
+ .cta-section {
301
+ text-align: center; padding: 100px 24px;
302
+ position: relative; overflow: hidden;
303
+ }
304
+ .cta-section::before {
305
+ content: ''; position: absolute; inset: 0;
306
+ background: radial-gradient(ellipse 60% 60% at 50% 100%, rgba(249,115,22,.1) 0%, transparent 60%);
307
+ }
308
+ .cta-section h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; margin-bottom: 16px; letter-spacing: -1.2px; position: relative; }
309
+ .cta-section p { color: var(--muted); font-size: 17px; margin-bottom: 36px; position: relative; }
310
+
311
+ /* ── FOOTER ── */
312
+ footer {
313
+ border-top: 1px solid var(--bdr); padding: 48px 24px 40px;
314
+ text-align: center; color: var(--dim); font-size: 13px;
315
+ background: linear-gradient(180deg, var(--bg) 0%, rgba(10,14,23,.95) 100%);
316
+ }
317
+ footer a { color: var(--muted); transition: color .2s; }
318
+ footer a:hover { color: var(--txt); }
319
+ .footer-links { display: flex; justify-content: center; gap: 28px; margin-bottom: 20px; flex-wrap: wrap; }
320
+
321
+ /* ── MOBILE ── */
322
+ @media (max-width: 768px) {
323
+ nav { padding: 0 20px; height: 60px; }
324
+ .nav-links { display: none; }
325
+ .nav-hamburger { display: block; }
326
+ .nav-links.open {
327
+ display: flex; flex-direction: column; position: absolute;
328
+ top: 60px; left: 0; right: 0; background: rgba(22,27,34,.98);
329
+ border-bottom: 1px solid var(--bdr); padding: 20px 24px; gap: 16px;
330
+ backdrop-filter: blur(12px);
331
+ }
332
+ .nav-links.open a::after { display: none; }
333
+ .hero { padding: 120px 20px 80px; min-height: auto; }
334
+ .formats { gap: 8px; }
335
+ section { padding: 80px 20px; }
336
+ .features-grid { grid-template-columns: 1fr; }
337
+ .pricing-grid { grid-template-columns: 1fr; }
338
+ .steps { gap: 32px; }
339
+ }
340
+
341
+ /* Fallback: ensure reveals become visible even if observer fails */
342
+ @media (prefers-reduced-motion: reduce) {
343
+ .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
344
+ }
345
+ .reveal.force-visible { opacity: 1 !important; transform: translateY(0) !important; transition: none !important; }
346
+ .cta-section { overflow: visible; }
347
+ </style>
348
+ </head>
349
+ <body>
350
+
351
+ <!-- NAV -->
352
+ <nav id="mainNav">
353
+ <div class="nav-brand">
354
+ <div class="nav-logo"><svg viewBox="0 0 28 28" width="22" height="22" fill="none" xmlns="http://www.w3.org/2000/svg"><g stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3L25 9v10L14 25 3 19V9z"/><path d="M14 3v11"/><path d="M14 14l11-5"/><path d="M14 14L3 9"/><path d="M14 14v11" opacity=".45"/></g><circle cx="14" cy="3" r="1.6" fill="#fff"/><circle cx="25" cy="9" r="1.6" fill="#fff"/><circle cx="3" cy="9" r="1.6" fill="#fff"/><circle cx="14" cy="14" r="1.8" fill="#fff"/><circle cx="25" cy="19" r="1.3" fill="#fff" opacity=".6"/><circle cx="3" cy="19" r="1.3" fill="#fff" opacity=".6"/><circle cx="14" cy="25" r="1.3" fill="#fff" opacity=".6"/></svg></div>
355
+ <div class="nav-name">Scan<span>BIM</span> 3D</div>
356
+ </div>
357
+ <div class="nav-links" id="navLinks">
358
+ <a href="#features">Features</a>
359
+ <a href="#how-it-works">How It Works</a>
360
+ <a href="#pricing">Pricing</a>
361
+ <a href='/privacy'>Privacy</a>
362
+ <a class='nav-cta' href='/viewer'>Launch App</a>
363
+ </div>
364
+ <button class="nav-hamburger" onclick="document.getElementById('navLinks').classList.toggle('open')">&#9776;</button>
365
+ </nav>
366
+
367
+ <!-- HERO -->
368
+ <section class="hero">
369
+ <div class="hero-bg"></div>
370
+ <div class="hero-grid"></div>
371
+ <div class="hero-orb hero-orb-1"></div>
372
+ <div class="hero-orb hero-orb-2"></div>
373
+ <div class="hero-orb hero-orb-3"></div>
374
+ <div class="hero-content">
375
+ <div class="hero-badge reveal"><span class="dot"></span> v1.0 &mdash; Now Live</div>
376
+ <h1 class="reveal reveal-delay-1">Share 3D Models Instantly<br>with <span class="accent">QR Codes</span></h1>
377
+ <p class="reveal reveal-delay-2">Upload IFC, OBJ, GLTF, or FBX files and generate a scannable QR link in seconds. No installs, no plugins &mdash; just open and view on any device.</p>
378
+ <div class="hero-buttons reveal reveal-delay-3">
379
+ <a class='btn-primary' href='/viewer'>Launch Viewer &#8594;</a>
380
+ <a href="#features" class="btn-secondary">See Features</a>
381
+ </div>
382
+ <div class="formats reveal reveal-delay-4">
383
+ <span class="format-chip">.IFC</span>
384
+ <span class="format-chip">.OBJ</span>
385
+ <span class="format-chip">.GLTF / .GLB</span>
386
+ <span class="format-chip">.FBX</span>
387
+ <span class="format-chip">.STL</span>
388
+ </div>
389
+ </div>
390
+ </section>
391
+
392
+ <!-- FEATURES -->
393
+ <section id="features">
394
+ <div class="section-header reveal">
395
+ <h2>Built for the Field</h2>
396
+ <p>Everything AEC professionals need to share, review, and annotate 3D models &mdash; right from a browser.</p>
397
+ </div>
398
+ <div class="features-grid">
399
+ <div class="feature-card reveal">
400
+ <div class="feature-icon" style="background:rgba(249,115,22,.1);">
401
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f97316" stroke-width="1.8" stroke-linecap="round"><rect x="2" y="2" width="8" height="8" rx="1"/><rect x="14" y="2" width="8" height="8" rx="1"/><rect x="2" y="14" width="8" height="8" rx="1"/><circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="1.5" fill="#f97316" stroke="none"/><circle cx="18" cy="6" r="1.5" fill="#f97316" stroke="none"/><circle cx="6" cy="18" r="1.5" fill="#f97316" stroke="none"/></svg>
402
+ </div>
403
+ <h3>QR Code Sharing</h3>
404
+ <p>Generate a QR code for any model. Share it on-site, in emails, or printed on plans. Recipients scan and view instantly.</p>
405
+ </div>
406
+ <div class="feature-card reveal reveal-delay-1">
407
+ <div class="feature-icon" style="background:rgba(59,130,246,.1);">
408
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
409
+ </div>
410
+ <h3>Viewpoint Bundles</h3>
411
+ <p>Save camera angles, section cuts, and annotations as named viewpoints. Share a curated walkthrough of your model.</p>
412
+ </div>
413
+ <div class="feature-card reveal reveal-delay-2">
414
+ <div class="feature-icon" style="background:rgba(34,197,94,.1);">
415
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><path d="M9 15l2 2 4-4"/></svg>
416
+ </div>
417
+ <h3>BCF Export</h3>
418
+ <p>Create BCF-format issues directly from your 3D view. Compatible with BIM coordination workflows you already use.</p>
419
+ </div>
420
+ <div class="feature-card reveal">
421
+ <div class="feature-icon" style="background:rgba(34,211,238,.1);">
422
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#22d3ee" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
423
+ </div>
424
+ <h3>Multi-Format Support</h3>
425
+ <p>Load IFC, OBJ, GLTF, GLB, FBX, and STL files. Drag and drop or browse &mdash; the viewer handles the rest.</p>
426
+ </div>
427
+ <div class="feature-card reveal reveal-delay-1">
428
+ <div class="feature-icon" style="background:rgba(251,191,36,.1);">
429
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"/></svg>
430
+ </div>
431
+ <h3>Cloud Storage</h3>
432
+ <p>Models stored securely in the cloud. Access your files from any device, anytime. Free tier includes 3 projects.</p>
433
+ </div>
434
+ <div class="feature-card reveal reveal-delay-2">
435
+ <div class="feature-icon" style="background:rgba(167,139,250,.1);">
436
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
437
+ </div>
438
+ <h3>No Install Required</h3>
439
+ <p>Runs entirely in your browser. Works on desktop, tablet, and phone. Share with anyone &mdash; they don't need an account to view.</p>
440
+ </div>
441
+ </div>
442
+ </section>
443
+
444
+ <!-- HOW IT WORKS -->
445
+ <section id="how-it-works" class="how-section">
446
+ <div class="section-header reveal">
447
+ <h2>How It Works</h2>
448
+ <p>From upload to shared link in under 30 seconds.</p>
449
+ </div>
450
+ <div class="steps">
451
+ <div class="step reveal">
452
+ <div class="step-num">1</div>
453
+ <h3>Upload Your Model</h3>
454
+ <p>Drag and drop an IFC, OBJ, GLTF, FBX, or STL file into the viewer.</p>
455
+ </div>
456
+ <div class="step reveal reveal-delay-1">
457
+ <div class="step-num">2</div>
458
+ <h3>Set Your View</h3>
459
+ <p>Orbit, zoom, and save viewpoints with annotations and section planes.</p>
460
+ </div>
461
+ <div class="step reveal reveal-delay-2">
462
+ <div class="step-num">3</div>
463
+ <h3>Share via QR</h3>
464
+ <p>Generate a QR code or link. Anyone with the link can view your model instantly.</p>
465
+ </div>
466
+ </div>
467
+ </section>
468
+
469
+ <!-- PRICING -->
470
+ <section id="pricing">
471
+ <div class="section-header reveal">
472
+ <h2>Simple, Transparent Pricing</h2>
473
+ <p>Open IFC, GLTF, OBJ, STL, PLY, E57, and LAS files for free. Unlock Revit, Navisworks, DWG, and FBX with Pro and Enterprise.</p>
474
+ </div>
475
+
476
+ <!-- Billing Toggle -->
477
+ <div class="toggle-wrap reveal">
478
+ <span id="toggle-monthly-label" class="toggle-label" style="color:var(--muted);">Monthly</span>
479
+ <button id="billing-toggle" onclick="toggleBilling()" class="toggle-btn">
480
+ <span id="toggle-knob" class="toggle-knob"></span>
481
+ </button>
482
+ <span id="toggle-annual-label" class="toggle-label" style="color:var(--txt);">Annual <span style="color:var(--grn);font-size:11px;font-weight:700;">Save 20%</span></span>
483
+ </div>
484
+
485
+ <div class="pricing-grid">
486
+ <!-- Free -->
487
+ <div class="pricing-card reveal">
488
+ <div class="pricing-tier">Free</div>
489
+ <div class="pricing-price">$0</div>
490
+ <div class="pricing-period">forever &mdash; no credit card</div>
491
+ <ul class="pricing-features">
492
+ <li>3 projects</li>
493
+ <li>100MB cloud storage</li>
494
+ <li>IFC, GLTF/GLB, OBJ, STL, PLY, E57, LAS</li>
495
+ <li>Basic section planes</li>
496
+ <li>QR code sharing</li>
497
+ <li>Web viewer on any device</li>
498
+ </ul>
499
+ <a class='pricing-btn free' href='/viewer'>Get Started Free</a>
500
+ </div>
501
+ <!-- Pro -->
502
+ <div class="pricing-card featured reveal reveal-delay-1">
503
+ <div class="pricing-badge">Most Popular</div>
504
+ <div class="pricing-tier">Pro</div>
505
+ <div class="pricing-price" id="pro-price">$49<span>/mo</span></div>
506
+ <div class="pricing-period" id="pro-period">per user, billed annually &mdash; 14-day free trial</div>
507
+ <ul class="pricing-features">
508
+ <li>Unlimited projects</li>
509
+ <li>10GB cloud storage</li>
510
+ <li>Everything in Free + FBX support</li>
511
+ <li>VR viewer on Meta Quest 2/3/3S</li>
512
+ <li>Full section planes with flip</li>
513
+ <li>Measurement tools (desktop + VR)</li>
514
+ <li>BCF export/import</li>
515
+ <li>Voice annotations (VR speech-to-text)</li>
516
+ <li>5-user real-time collaboration</li>
517
+ <li>Point clouds up to 50M points</li>
518
+ <li>Saved viewpoints with cloud sync</li>
519
+ </ul>
520
+ <a href="#" class="pricing-btn pro" id="pro-subscribe-btn">Start 14-Day Free Trial</a>
521
+ </div>
522
+ <!-- Enterprise -->
523
+ <div class="pricing-card enterprise reveal reveal-delay-2">
524
+ <div class="pricing-tier">Enterprise</div>
525
+ <div class="pricing-price" id="ent-price">$149<span>/mo</span></div>
526
+ <div class="pricing-period" id="ent-period">per user, billed annually &mdash; 14-day free trial</div>
527
+ <ul class="pricing-features">
528
+ <li>Everything in Pro, plus:</li>
529
+ <li>Revit (.rvt), Navisworks (.nwd), DWG import</li>
530
+ <li>Unlimited cloud storage</li>
531
+ <li>AI Spatial Assistant</li>
532
+ <li>AR Passthrough (Quest 3 mixed reality)</li>
533
+ <li>Point clouds up to 500M+ points</li>
534
+ <li>20-user real-time collaboration</li>
535
+ <li>Autodesk ACC / BIM 360 integration</li>
536
+ <li>Procore &amp; Revizto integration</li>
537
+ <li>SSO/SAML &amp; admin dashboard</li>
538
+ <li>Custom branding &amp; API access</li>
539
+ <li>Priority support &amp; dedicated CSM</li>
540
+ </ul>
541
+ <a href="#" class="pricing-btn ent" id="ent-subscribe-btn">Start 14-Day Free Trial</a>
542
+ </div>
543
+ </div>
544
+ </section>
545
+
546
+ <script>
547
+ // ── STRIPE PAYMENT LINKS ──────────────────────────────────────
548
+ var STRIPE_LINKS = {
549
+ pro_monthly: 'https://buy.stripe.com/aFafZh2ne0QE2JI3vk63K00',
550
+ pro_annual: 'https://buy.stripe.com/14AdR96DufLybge7LA63K01',
551
+ ent_monthly: 'https://buy.stripe.com/8x2eVdbXOeHu6ZYe9Y63K02',
552
+ ent_annual: 'https://buy.stripe.com/dRmfZh7HyeHu2JI3vk63K03'
553
+ };
554
+ var PRICING = {
555
+ pro_monthly: 59, pro_annual: 49,
556
+ ent_monthly: 179, ent_annual: 149
557
+ };
558
+ var billingAnnual = true;
559
+
560
+ function toggleBilling() {
561
+ billingAnnual = !billingAnnual;
562
+ var knob = document.getElementById('toggle-knob');
563
+ var monthlyLabel = document.getElementById('toggle-monthly-label');
564
+ var annualLabel = document.getElementById('toggle-annual-label');
565
+ var proPrice = document.getElementById('pro-price');
566
+ var properiod = document.getElementById('pro-period');
567
+ var entPrice = document.getElementById('ent-price');
568
+ var entPeriod = document.getElementById('ent-period');
569
+ var proBtn = document.getElementById('pro-subscribe-btn');
570
+ var entBtn = document.getElementById('ent-subscribe-btn');
571
+ if (billingAnnual) {
572
+ knob.style.transform = 'translateX(24px)';
573
+ monthlyLabel.style.color = 'var(--muted)';
574
+ annualLabel.querySelector('span') && (annualLabel.querySelector('span').style.display = 'inline');
575
+ annualLabel.style.color = 'var(--txt)';
576
+ proPrice.innerHTML = '$' + PRICING.pro_annual + '<span>/mo</span>';
577
+ properiod.textContent = 'per user, billed annually \u2014 14-day free trial';
578
+ entPrice.innerHTML = '$' + PRICING.ent_annual + '<span>/mo</span>';
579
+ entPeriod.textContent = 'per user, billed annually \u2014 14-day free trial';
580
+ proBtn.href = STRIPE_LINKS.pro_annual;
581
+ entBtn.href = STRIPE_LINKS.ent_annual;
582
+ } else {
583
+ knob.style.transform = 'translateX(0)';
584
+ monthlyLabel.style.color = 'var(--txt)';
585
+ annualLabel.style.color = 'var(--muted)';
586
+ proPrice.innerHTML = '$' + PRICING.pro_monthly + '<span>/mo</span>';
587
+ properiod.textContent = 'per user, billed monthly \u2014 14-day free trial';
588
+ entPrice.innerHTML = '$' + PRICING.ent_monthly + '<span>/mo</span>';
589
+ entPeriod.textContent = 'per user, billed monthly \u2014 14-day free trial';
590
+ proBtn.href = STRIPE_LINKS.pro_monthly;
591
+ entBtn.href = STRIPE_LINKS.ent_monthly;
592
+ }
593
+ }
594
+ document.getElementById('pro-subscribe-btn').href = STRIPE_LINKS.pro_annual;
595
+ document.getElementById('ent-subscribe-btn').href = STRIPE_LINKS.ent_annual;
596
+
597
+ // ── SCROLL REVEAL ──
598
+ var observer = new IntersectionObserver(function(entries) {
599
+ entries.forEach(function(entry) {
600
+ if (entry.isIntersecting) {
601
+ entry.target.classList.add('visible');
602
+ }
603
+ });
604
+ }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
605
+ document.querySelectorAll('.reveal').forEach(function(el) { observer.observe(el); });
606
+
607
+ // ── NAV SCROLL EFFECT ──
608
+ window.addEventListener('scroll', function() {
609
+ document.getElementById('mainNav').classList.toggle('scrolled', window.scrollY > 40);
610
+ });
611
+
612
+ // Fallback: force all reveals visible after 3 seconds if observer didn't fire
613
+ setTimeout(function() {
614
+ document.querySelectorAll('.reveal').forEach(function(el) {
615
+ if (!el.classList.contains('visible')) {
616
+ el.classList.add('visible'); el.classList.add('force-visible');
617
+ }
618
+ });
619
+ }, 3000);
620
+ </script>
621
+
622
+ <!-- CTA -->
623
+ <section class="cta-section">
624
+ <h2 class="reveal">Ready to Share Your Models?</h2>
625
+ <p class="reveal reveal-delay-1">Start free with all open-source formats. No credit card required.</p>
626
+ <a class='btn-primary reveal reveal-delay-2' href='/viewer' style='font-size:18px;padding:17px 44px;'>Open ScanBIM 3D &#8594;</a>
627
+ </section>
628
+
629
+ <!-- FOOTER -->
630
+ <footer>
631
+ <div class="footer-links">
632
+ <a href='/privacy'>Privacy Policy</a>
633
+ <a href='/terms'>Terms of Service</a>
634
+ <a href="/cdn-cgi/l/email-protection#a4d7d1d4d4cbd6d0e4d7c7c5cac6cdc98ac5d4d4">Contact</a>
635
+ <a href="https://www.linkedin.com/in/ianmartinvdc/" target="_blank" rel="noopener">LinkedIn</a>
636
+ <a href="https://scanbimlabs.io" target="_blank" rel="noopener">ScanBIM Labs</a>
637
+ </div>
638
+ <p>&copy; 2026 ScanBIM 3D. All rights reserved.</p>
639
+ </footer>
640
+
641
+ <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="responsive.js"></script>
642
+ <script src="ai-features.js"></script>
643
+ </body>
644
+ </html>