+ Math.round(n).toLocaleString('en-US'); } // Everything the capacity section renders, in one derivation. The nested figure is // drawn in the finest pitch's pixel grid, so the coordinate space is the hardware's. cap() { const L = this.linesNow(), ship = this.state.res; const fin = this.face('p6'); const cols = fin.cols, rows = fin.rows; // The stack is every line the finest pitch can hold, so each coarser pitch's ceiling // is a rule drawn across it. Lines past the requested count stay visible but faint — // that is the headroom the customer is not using yet. const nP10 = this.maxLinesAt('p10'); const nP8 = this.maxLinesAt('p8'); const drawn = this.maxLinesAt('p6'); const cp = Math.floor(rows / drawn); const cell = cp * this.CHAR_W_RATIO; const chars = Math.max(1, Math.floor(cols / cell)); // Drawn as one generated SVG, the same way the preview face is: a hole used as SVG // text content renders no glyphs, so every string here is a real text node. const fs = Math.max(2.4, cp * 0.4).toFixed(2), ls = (cp * 0.032).toFixed(2); let art = ''; for (let i = 0; i < drawn; i++) { // A line that only exists at a finer pitch is outlined, not filled — the spill // past each ceiling is the argument of this figure. const only = i < nP10 ? '' : i < nP8 ? 'P8 ONLY' : 'P6 ONLY'; const spare = i >= L; const msg = this.MSG[i % this.MSG.length].slice(0, chars); const y = i * cp + cp * 0.82; art += "" + msg + ""; if (only) art += "" + only + ""; } // Each pitch's ceiling, drawn across the stack. The pitch being bought gets the heavy // rule; the others are grey rather than a hairline no one can see on this surface. [['p10', nP10, 'P10 STOPS HERE'], ['p8', nP8, 'P8 STOPS HERE'], ['p6', drawn, 'P6 FILLS THE FACE']].forEach(r => { const key = r[0], n = r[1], label = r[2], active = key === ship; if (!active && n >= drawn) return; const sw = cp * (active ? 0.09 : 0.05); const y = Math.min(n * cp, rows - sw); const col = active ? '%23111111' : '%236B6B6B'; art += "" + "" + label + ""; }); const figUri = ""; const inStr = v => (Math.round(v * 100) / 100).toFixed(2) + '\u2033'; const bands = this.PITCHES.map(k => { const b = this.band(k, L); return { name: b.name + (k === ship ? ' \u00b7 the pitch you are buying' : ''), lines: b.short ? 'won\u2019t fit' : b.lines + (b.lines === 1 ? ' line' : ' lines'), chars: b.short ? 'ceiling is ' + b.ceiling + (b.ceiling === 1 ? ' line' : ' lines') + ' on this face' : b.chars + ' characters a line', charIn: inStr(b.charIn), style: 'padding:16px;border-radius:10px;background:' + (k === ship ? '#FFFFFF' : 'transparent') + ';border:' + (k === ship ? '2px solid #111111' : '1px solid #E5E5E7') + ';' }; }); const caption = 'At ' + L + (L === 1 ? ' line' : ' lines') + ': ' + this.PITCHES.map(k => { const b = this.band(k, L); return b.name + (b.short ? ' cannot fit ' + L + ' lines \u2014 its ceiling is ' + b.ceiling + (b.ceiling === 1 ? ' line' : ' lines') + ' of ' + b.chars + ' characters at ' + inStr(b.charIn) : ' fits ' + b.ceiling + (b.ceiling === 1 ? ' line' : ' lines') + ' of ' + b.chars + ' characters at ' + inStr(b.charIn)); }).join('. ') + '.'; const art = this.faceArt(); return { L: L, cols: cols, rows: rows, aspect: this.face().mm.w.toFixed(0) + ' / ' + this.face().mm.h.toFixed(0), uri: art.uri, texture: art.texture, specLine: this.specLine(), figUri: figUri, bands: bands, caption: caption }; } // Scale inset: the sign silhouette beside a 6 ft figure at one shared scale. A 6 ft // person is 1829 mm. The figure is 96px, unless the sign is tall enough that the inset // would dominate the panel — then both shrink together, so the scale stays shared. scaleInset() { const mm = this.face().mm, base = 96, cap = 180; const adj = Math.min(1, cap / Math.max(1, mm.h / (1829 / base))); const figH = base * adj, mmPx = 1829 / figH; return { figH: figH, signH: mm.h / mmPx, signW: mm.w / mmPx }; } // Derived, per product — replaces the old "Up close at P8" caption. specLine() { const f = this.face(); const n = v => (Math.round(v * 10) / 10).toFixed(1).replace(/\.0$/, ''); return n(f.in.h) + '\u2033 \u00d7 ' + n(f.in.w) + '\u2033 \u00b7 ' + (this.H * this.W) + ' modules \u00b7 ' + this.state.res.toUpperCase() + ' \u00b7 ' + f.rows + ' \u00d7 ' + f.cols + ' pixels'; } calc() { const s = this.state, C = this.C; const m = this.H * this.W; const a = (this.H * C.MOD) * (this.W * C.MOD); const faces = s.sides === 2 ? 2 : 1; const dRaw = faces === 2 ? (a * C.FIRST + a * C.SECOND * (1 - C.PROMO)) : (a * C.SINGLE / C.CC); const kit = s.mount === 'brackets' ? Math.max(m * 150, 2500) : s.mount === 'pole' ? Math.max(m * 275, 6500) : 0; const base = (dRaw + kit) * C.CC; // The resolution upgrade is included while the promotion is live and becomes a // paid line item once it ends. offer-config.js is the single switch, and // paypal-api.php reads the same file, so the two prices cannot drift apart. const pitchValue = Math.round(m * faces * C.PITCH[s.res] / 10) * 10; const O = window.LSC_OFFER || {}; const chargeUp = O.chargeUpgrade === true || O.live === false; const pitch = chargeUp ? pitchValue : 0; const total = base + pitch; return { m, a, faces, base, kit, pitch, pitchValue, chargeUp, total, compareAt: chargeUp ? total : base + pitchValue, monthly: total * 0.0225 }; } deltaFor(over) { const keep = this.state; this.state = Object.assign({}, keep, over); const withIt = this.calc().total; this.state = Object.assign({}, keep, over, over.mount ? { mount: 'display' } : { sides: 1 }); const without = this.calc().total; this.state = keep; return Math.max(0, withIt - without); } noop = () => {}; ddStyle(sel) { return this.optStyle(sel) + 'width:100%;box-sizing:border-box;'; } // An option the face cannot physically hold stays visible but inert — seeing that // 6 lines exists and is out of reach on this size is the point. ddStyleOff() { return 'text-align:left;cursor:not-allowed;border-radius:10px;background:#F5F5F7;min-width:0;font-family:inherit;' + 'padding:11px 13px;border:1px solid #EDEDEF;font-weight:400;color:#A0A0A5;width:100%;box-sizing:border-box;'; } optStyle(sel) { // Border width stays constant so a selected option is not a different size // from its neighbours — the ring does the highlighting. // One ring, one colour: selection is the only strong border in the section. // Padding compensates for the extra border pixel so the box never resizes. return 'text-align:left;cursor:pointer;border-radius:10px;background:#fff;min-width:0;font-family:inherit;' + (sel ? 'padding:10px 12px;border:2px solid #111111;font-weight:600;color:var(--ink);' : 'padding:11px 13px;border:1px solid #E5E5E7;font-weight:400;color:var(--text-body);'); } renderVals() { const s = this.state, c = this.calc(), R = this.RES[s.res]; const g = this.GALLERY[s.img] || this.GALLERY[0]; const mountLabel = { display: 'display only', brackets: 'with the retrofit bracket kit', pole: 'with a full pole kit' }[s.mount]; const sizeStr = this.H + 'x' + this.W; const cap = this.cap(); const baseArea = (this.H * this.C.MOD) * (this.W * this.C.MOD); const relPrices = this.RELATED.map(([h, w]) => { const a = (h * this.C.MOD) * (w * this.C.MOD); const p = a * this.C.SINGLE; const diff = p - (this.H * this.C.MOD) * (this.W * this.C.MOD) * this.C.SINGLE; return { name: h + 'x' + w + ' LED Sign', href: 'led-sign-' + h + 'x' + w, ft: (h * 1.05).toFixed(1) + 'ft × ' + (w * 1.05).toFixed(1) + 'ft · ' + Math.round(a) + ' sq ft', price: 'from ' + this.money(p), priceNote: 'single-sided, sign only', delta: diff === 0 ? 'Same investment as the 4x8 LED sign' : (diff < 0 ? 'Reduces your investment by ' + this.money(-diff) + ' \u2014 ' + Math.abs(Math.round(a - baseArea)) + ' sq ft less display' : 'Increases your investment by ' + this.money(diff) + ' \u2014 ' + Math.abs(Math.round(a - baseArea)) + ' sq ft more display'), thumbSrc: 'images/diagrams/front-' + h + 'x' + w + '.png', thumbAlt: 'Front view diagram of the ' + h + 'x' + w + ' LED sign, with cabinet dimensions', deltaStyle: 'font-size:var(--fs-caption);margin-top:3px;font-weight:600;color:' + (diff === 0 ? 'var(--text-muted)' : diff < 0 ? '#067d62' : '#8a5a12') + ';' }; }); return { h1: '4x8 Outdoor LED Sign — 4ft × 8ft full-color programmable display', priceStr: this.money(c.total), monthlyStr: this.money(c.monthly), priceNote: (c.faces === 2 ? 'Double-sided' : 'Single-sided') + ' ' + R.name + ' ' + s.res.toUpperCase() + ', ' + mountLabel + (c.pitchValue ? (c.chargeUp ? ' · ' + s.res.toUpperCase() + ' upgrade ' + this.money(c.pitchValue) : ' · ' + s.res.toUpperCase() + ' upgrade included free during the event, a ' + this.money(c.pitchValue) + ' value') : ' · our lowest-cost pitch') + (c.kit ? ' · ' + this.money(c.kit) + ' of that is the mounting kit' : ''), pxLabel: R.px + ' per side (' + s.res.toUpperCase() + ')', nits: R.nits, viewDist: R.view, heroImgCss: 'url("' + g.img + '")', heroFit: /projects\//.test(g.img) ? 'cover' : 'contain', heroBg: /projects\//.test(g.img) ? '#0b0e14' : '#fff', heroNote: g.note, heroAlt: '4x8 outdoor LED sign — ' + g.note, thumbs: this.GALLERY.map((p, i) => ({ onSel: this.pickImg(i), sel: s.img === i, a11y: 'View ' + p.note, style: 'width:100%;aspect-ratio:1 / 1;border:' + (s.img === i ? '2px solid #131921' : '1px solid #e3e6e6') + ';border-radius:9px;padding:0;cursor:pointer;background-color:' + (/projects\//.test(p.img) ? '#0b0e14' : '#fff') + ';background-image:url("' + p.img + '");background-size:' + (/projects\//.test(p.img) ? 'cover' : 'contain') + ';background-repeat:no-repeat;background-position:center;' })), pickResCard: null, resCardP10: this.resCard('p10'), resCardP8: this.resCard('p8'), resCardP6: this.resCard('p6'), chooseP10: this.chooseRes('p10'), chooseP8: this.chooseRes('p8'), chooseP6: this.chooseRes('p6'), resOpts: ['p10', 'p8', 'p6'].map(k => { const up = Math.round(c.m * c.faces * this.C.PITCH[k] / 10) * 10; return { onSel: this.pick('res', k), sel: s.res === k, name: this.RES[k].name, sub: this.RES[k].sub + (up ? (c.chargeUp ? ' · ' + this.money(up) : ' · free during the event (' + this.money(up) + ' value)') : ' · base price'), style: this.optStyle(s.res === k) }; }), sideOpts: [ { v: 1, name: 'Single-sided', sub: 'one face' }, { v: 2, name: 'Double-sided', sub: '40% off the second face \u00b7 adds ' + this.money(this.deltaFor({ sides: 2 })) } ].map(o => ({ onSel: this.pick('sides', o.v), sel: s.sides === o.v, name: o.name, sub: o.sub, style: this.optStyle(s.sides === o.v) })), mountOpts: [ { v: 'display', name: 'Display only', sub: 'You already have a cabinet, pole or wall' }, { v: 'brackets', name: 'Retrofit kit', sub: '+' + this.money(this.deltaFor({ mount: 'brackets' }) + (s.mount === 'brackets' ? 0 : 0)) + ' · steel frame to hang it' }, { v: 'pole', name: 'Pole kit', sub: '+' + this.money(this.deltaFor({ mount: 'pole' })) + ' · new pole, start from dirt' } ].map(o => ({ onSel: this.pick('mount', o.v), sel: s.mount === o.v, name: o.name, sub: o.sub, style: this.optStyle(s.mount === o.v) })), mountExplain: s.mount === 'brackets' ? 'Retrofit kit: a steel support frame we fabricate to your sign size, so the display hangs on your existing wall or pole. Includes all frame hardware and installation drawings.' : s.mount === 'pole' ? 'Pole kit: a new steel pole sized for this display, plus the support frame. You prepare the foundation and we supply everything above it.' : 'Display only: the sign ships with L brackets and bolts to fasten it to a cabinet, pole or wall you already have.', // ── Capacity section ────────────────────────────────────────────────── // Monotonic, capped on-screen size: a bigger product always renders bigger, // up to the rail. Exact size lives in the scale inset instead. capPanelStyle: 'border-radius:18px;padding:16px;background:#F5F5F7;margin:0 auto 16px;max-width:min(100%,' + (this.W * this.PX_PER_MODULE_MAX) + 'px);', capFaceStyle: this.geomOk() ? 'aspect-ratio:' + cap.aspect + ';border-radius:6px;background:#0a0d11 url("data:image/svg+xml,' + cap.uri + '") center/100% 100% no-repeat;' : 'aspect-ratio:' + cap.aspect + ';background:#EDEEF0;border:1px solid #E5E5E7;border-radius:6px;', capSpecLine: this.geomOk() ? cap.specLine : 'Size data unavailable for this product.', capScaleFigStyle: 'flex:0 0 auto;height:' + Math.round(this.scaleInset().figH) + 'px;width:' + Math.round(this.scaleInset().figH * 0.27) + 'px;', capScaleSignStyle: 'flex:0 0 auto;height:' + Math.round(this.scaleInset().signH) + 'px;width:' + Math.round(this.scaleInset().signW) + 'px;border:1px solid #111111;border-radius:2px;', capLinesFew: this.maxLines() <= 8, capLinesMany: this.maxLines() > 8, capLinesLabel: cap.L + (cap.L === 1 ? ' line' : ' lines'), capLinesRange: '1 to ' + this.maxLines() + ' lines on this face', capLinesUp: this.stepLines(1), capLinesDown: this.stepLines(-1), capLineOpts: (this.maxLines() > 8 ? [] : this.lineOpts()).map(n => ({ onSel: this.setCalc('calcLines', n), sel: cap.L === n, name: n + (n === 1 ? ' line' : ' lines'), style: 'height:34px;padding:0 7px;border-radius:8px;border:2px solid ' + (cap.L === n ? '#111111' : '#DDDDDD') + ';background:#FFFFFF;font:' + (cap.L === n ? '700' : '700') + ' 13px/1 \'Helvetica Neue\', Helvetica, Arial, sans-serif;color:#111111;cursor:pointer;' })), capFigStyle: 'aspect-ratio:' + cap.cols + ' / ' + cap.rows + ';border-radius:6px;background:#F5F5F7 url("data:image/svg+xml,' + cap.figUri + '") center/100% 100% no-repeat;', capBands: cap.bands, capAria: cap.caption, capTexture: cap.texture, capTextureNote: cap.texture ? 'At this size the dots are under two screen pixels, so the grid renders as a density texture.' : '', builderHref: 'builder-diy?h=' + this.H + '&w=' + this.W + '&res=' + s.res + '&faces=' + c.faces + '&mount=' + s.mount, included: [ { text: 'Free freight to your address in the continental US, with lift-gate and pallet-jack service' }, { text: 'Free software forever — no subscription, no per-message fee, no communication charge' }, { text: 'Engineered permit drawings, mounting hardware, and a spare power supply and control card in the crate' }, { text: '5-year full parts coverage, then lifetime system support with 40% module trade-in credits' }, { text: 'Automatic brightness sensor, IP65 all-aluminum cabinet, front-service modules' } ], related: relPrices, openOrder: this.openOrder, closeOrder: this.closeOrder, scrimClose: this.scrimClose, stop: this.stop, orderOpen: !!s.orderOpen, orderPaid: !!s.orderPaid, orderForm: !s.orderPaid, orderErr: s.orderErr, orderSummary: (c.faces === 2 ? 'Double-sided' : 'Single-sided') + ' · ' + R.name + ' ' + s.res.toUpperCase() + ' · ' + mountLabel, payAmountStr: (s.payMode === 'deposit' && !this.DEPOSIT) ? '\u2014' : this.money(this.payAmount()), payFeeStr: (s.payMode === 'deposit' && !this.DEPOSIT) ? '\u2014' : '+' + this.money(this.payFee()), payChargedStr: (s.payMode === 'deposit' && !this.DEPOSIT) ? '\u2014' : this.money(this.payCharged()), payOpts: [ { v: 'full', name: 'Pay in full', sub: this.money(c.total) }, { v: 'deposit', name: 'Reserve it', sub: (this.DEPOSIT ? this.money(this.DEPOSIT) + ' refundable deposit' : 'Refundable deposit') } ].map(o => ({ onSel: this.setPayMode(o.v), sel: s.payMode === o.v, name: o.name, sub: o.sub, style: this.optStyle(s.payMode === o.v) })), fName: s.name, fCompany: s.company, fEmail: s.email, fPhone: s.phone, fZip: s.zip, setName: this.setField('name'), setCompany: this.setField('company'), setEmail: this.setField('email'), setPhone: this.setField('phone'), setZip: this.setField('zip'), inputStyle: 'width:100%;font-size:var(--fs-body);padding:11px 12px;border:1px solid #888c8c;border-radius:8px;background:#fff;', ppReady: this.infoOk(), needInfo: !this.infoOk(), faqs: [ { q: 'How much is a 4x8 LED sign?', a: 'A single-sided 4x8 LED sign starts at ' + this.money((this.H * 1.05) * (this.W * 1.05) * 393) + ' display-only at event pricing, and a double-sided 4x8 LED sign at ' + this.money(((this.H * 1.05) * (this.W * 1.05)) * (400 + 380 * 0.6) * 1.03) + ' — the second face adds ' + this.money(this.deltaFor({ sides: 2 })) + '. Mounting kits, installation, permits and the electrical run are separate; the selector above shows each combination.' }, { q: 'What are the real dimensions of a 4x8 LED sign?', a: 'Exactly 50.4 inches by 100.8 inches — 4.2 ft × 8.4 ft. The name comes from the 4 × 8 grid of 12.6-inch modules. It is slightly larger than a nominal 4-by-8, which matters if you are dropping it into an existing cabinet: send us the opening size and we will confirm the fit before you order.' }, { q: 'Single or double-sided?', a: 'If traffic passes your property in both directions, two faces reach everyone, and the second face is 40% off — it adds ' + this.money(this.deltaFor({ sides: 2 })) + '. If the sign faces a wall, a corner or one approach, single-sided is plenty. Double-sided doubles the weight to about 640 lbs, so an older cabinet or pole may need a structural check.' }, { q: 'How far away can people read a 4x8 LED sign?', a: 'With 13-inch characters, about 390 feet — the rule of thumb is roughly 30 feet of readable distance per inch of character height. A 4x8 LED sign handles most 35–45 mph roads. For 55 mph with a long approach, a taller sign lets you run bigger text.' }, { q: 'What does it need for power?', a: 'A single-sided 4x8 LED sign draws about 28 amps at 110V, or 14 amps at 220V. Most sites need a dedicated circuit; double-sided doubles the draw. Electrical service and any panel upgrade are quoted separately by your electrician.' }, { q: 'How long until it is up?', a: 'Ship-direct is typically 6–8 weeks from order to delivery. Turnkey runs 6–12 weeks because production does not start until your permit is approved. If you have a hard date — a grand opening or a season — tell us and we will tell you honestly whether it is achievable.' } ] }; } }