Add estimates package modals, magical animations and pricing links
- estimates: per-package detail modals with min/max breakdown and specs, opening with a wand-flick spiral spring and sparkle trail, closing with a perimeter sparkle burst - home: pricing teaser section linking to estimates; contact form pre-fills a message when arriving from a package "Enquire" link - mascot: Star Trek-style teleport-in (delay, sparkle charge, bottom-up materialise with near-white energy wash and rising sparkle beam) - buttons: wand-sparkle swipe speed and density now scale with button width - themed scrollbars site-wide with stable gutter to stop modal scroll shift Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Fraxle
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
206daaef5d
commit
9303dc7f4d
+518
@@ -324,6 +324,175 @@
|
||||
color: rgba(255,255,255,0.4);
|
||||
}
|
||||
|
||||
/* Enquire button on each package */
|
||||
.pricing-enquire {
|
||||
margin-top: 18px;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
font-size: 0.85rem;
|
||||
padding: 12px 18px;
|
||||
}
|
||||
.bench-enquire { margin-top: 22px; }
|
||||
.ward-enquire { margin-top: 20px; }
|
||||
|
||||
/* "See full details" trigger */
|
||||
.pkg-details-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--gold);
|
||||
font-family: var(--font-head);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
margin-top: 16px;
|
||||
padding: 6px 0;
|
||||
transition: gap var(--transition), color var(--transition);
|
||||
}
|
||||
.pkg-details-btn:hover { gap: 11px; color: var(--white); }
|
||||
.pricing-card, .ward-card, .bench-card { cursor: pointer; }
|
||||
|
||||
/* Package detail modal */
|
||||
.pkg-modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(10,6,30,0.78);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.25s ease, visibility 0.25s ease;
|
||||
}
|
||||
.pkg-modal-overlay.open { opacity: 1; visibility: visible; }
|
||||
.pkg-modal {
|
||||
background: linear-gradient(160deg, #2D1F6E 0%, #1E1550 100%);
|
||||
border: 1px solid rgba(251,191,36,0.25);
|
||||
border-radius: var(--radius);
|
||||
max-width: 560px;
|
||||
width: 100%;
|
||||
max-height: 88vh;
|
||||
overflow-y: auto;
|
||||
padding: 40px;
|
||||
position: relative;
|
||||
box-shadow: 0 24px 70px rgba(0,0,0,0.5);
|
||||
transform-origin: 50% 50%;
|
||||
will-change: transform;
|
||||
}
|
||||
/* The spiral open animation is driven in JS (see below). For users who
|
||||
prefer reduced motion, fall back to a gentle fade/scale instead. */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.pkg-modal { transform: none !important; transition: none !important; }
|
||||
}
|
||||
.pkg-sparkle {
|
||||
position: fixed;
|
||||
z-index: 1100;
|
||||
pointer-events: none;
|
||||
line-height: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
text-shadow: 0 0 6px rgba(255,255,255,0.4);
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
.pkg-modal-close {
|
||||
position: absolute;
|
||||
top: 18px; right: 18px;
|
||||
width: 38px; height: 38px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(255,255,255,0.18);
|
||||
background: rgba(255,255,255,0.06);
|
||||
color: rgba(255,255,255,0.8);
|
||||
font-size: 1.3rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
.pkg-modal-close:hover { background: rgba(255,255,255,0.14); color: var(--white); }
|
||||
.pkg-modal-emoji { font-size: 2.4rem; line-height: 1; margin-bottom: 10px; }
|
||||
.pkg-modal-name {
|
||||
font-family: var(--font-head);
|
||||
font-size: 1.6rem;
|
||||
font-weight: 800;
|
||||
color: var(--white);
|
||||
margin-bottom: 4px;
|
||||
padding-right: 36px;
|
||||
}
|
||||
.pkg-modal-price {
|
||||
font-family: var(--font-head);
|
||||
font-size: 1.3rem;
|
||||
font-weight: 800;
|
||||
color: var(--gold);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.pkg-modal-price span { font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.45); }
|
||||
.pkg-modal-lead {
|
||||
color: rgba(255,255,255,0.62);
|
||||
font-size: 0.93rem;
|
||||
line-height: 1.65;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.pkg-modal-divider {
|
||||
border: none;
|
||||
border-top: 1px solid rgba(255,255,255,0.12);
|
||||
margin: 22px 0;
|
||||
}
|
||||
.pkg-range {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
.pkg-range-col {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 14px;
|
||||
padding: 16px 18px;
|
||||
}
|
||||
.pkg-range-col h4 {
|
||||
font-family: var(--font-head);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gold);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.pkg-range-col .amt {
|
||||
font-family: var(--font-head);
|
||||
font-size: 1.15rem;
|
||||
font-weight: 800;
|
||||
color: var(--white);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.pkg-range-col p { font-size: 0.84rem; color: rgba(255,255,255,0.72); line-height: 1.5; }
|
||||
.pkg-specs { display: flex; flex-direction: column; }
|
||||
.pkg-spec {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
font-size: 0.9rem;
|
||||
padding: 11px 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
.pkg-spec:last-child { border-bottom: none; }
|
||||
.pkg-spec .k { color: rgba(255,255,255,0.5); display: flex; align-items: center; gap: 9px; }
|
||||
.pkg-spec .k i { color: var(--gold); width: 16px; text-align: center; }
|
||||
.pkg-spec .v { color: var(--white); font-weight: 600; text-align: right; }
|
||||
.pkg-modal-enquire { margin-top: 26px; }
|
||||
html.modal-open { overflow: hidden; }
|
||||
@media (max-width: 520px) {
|
||||
.pkg-range { grid-template-columns: 1fr; }
|
||||
.pkg-modal { padding: 30px 22px; }
|
||||
}
|
||||
|
||||
/* CTA strip */
|
||||
.pricing-cta {
|
||||
background: linear-gradient(145deg, var(--purple-deep) 0%, #2D1860 100%);
|
||||
@@ -430,6 +599,9 @@
|
||||
<li>WordPress website</li>
|
||||
</ul>
|
||||
<p class="pricing-tagline">Perfect for businesses taking their first steps into the digital realm.</p>
|
||||
<a href="index.php?package=first-spark#contact" class="btn btn-accent pricing-enquire">
|
||||
<i class="fas fa-envelope"></i> Enquire about this
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- The Enchanted Workshop -->
|
||||
@@ -448,6 +620,9 @@
|
||||
<li>Search engine optimisation</li>
|
||||
</ul>
|
||||
<p class="pricing-tagline">For businesses ready to expand their reach and establish a stronger online presence.</p>
|
||||
<a href="index.php?package=enchanted-workshop#contact" class="btn btn-accent pricing-enquire">
|
||||
<i class="fas fa-envelope"></i> Enquire about this
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- The Arcane Forge - Most Popular -->
|
||||
@@ -466,6 +641,9 @@
|
||||
<li>Training and support</li>
|
||||
</ul>
|
||||
<p class="pricing-tagline">When a standard website simply won't contain your ambitions.</p>
|
||||
<a href="index.php?package=arcane-forge#contact" class="btn btn-accent pricing-enquire">
|
||||
<i class="fas fa-envelope"></i> Enquire about this
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -486,6 +664,9 @@
|
||||
<li>Store management training</li>
|
||||
</ul>
|
||||
<p class="pricing-tagline">Everything needed to open your digital marketplace.</p>
|
||||
<a href="index.php?package=merchants-portal#contact" class="btn btn-accent pricing-enquire">
|
||||
<i class="fas fa-envelope"></i> Enquire about this
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- The Grand Emporium -->
|
||||
@@ -505,6 +686,9 @@
|
||||
<li>Launch support</li>
|
||||
</ul>
|
||||
<p class="pricing-tagline">For businesses seeking a digital flagship rather than a simple online shop.</p>
|
||||
<a href="index.php?package=grand-emporium#contact" class="btn btn-accent pricing-enquire">
|
||||
<i class="fas fa-envelope"></i> Enquire about this
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -524,6 +708,9 @@
|
||||
<div class="bench-name">The Wizard's Bench</div>
|
||||
<div class="bench-rate">£40 <span>/ hour</span></div>
|
||||
<p class="bench-desc">Technical support billed by the hour. Minimum one hour applies. Remote support available - no call-out charge for remote sessions.</p>
|
||||
<a href="index.php?package=wizards-bench#contact" class="btn btn-accent bench-enquire">
|
||||
<i class="fas fa-envelope"></i> Book some support
|
||||
</a>
|
||||
</div>
|
||||
<div class="bench-right">
|
||||
<p class="pricing-includes-label">Services include</p>
|
||||
@@ -560,6 +747,9 @@
|
||||
<li>Security monitoring</li>
|
||||
<li>Monthly backups</li>
|
||||
</ul>
|
||||
<a href="index.php?package=minor-ward#contact" class="btn btn-accent ward-enquire">
|
||||
<i class="fas fa-envelope"></i> Enquire about this
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Greater Ward -->
|
||||
@@ -574,6 +764,9 @@
|
||||
<li>Priority email support</li>
|
||||
<li>Performance monitoring</li>
|
||||
</ul>
|
||||
<a href="index.php?package=greater-ward#contact" class="btn btn-accent ward-enquire">
|
||||
<i class="fas fa-envelope"></i> Enquire about this
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Merchant's Ward -->
|
||||
@@ -589,6 +782,9 @@
|
||||
<li>Priority response times</li>
|
||||
<li>Monthly support allowance</li>
|
||||
</ul>
|
||||
<a href="index.php?package=merchants-ward#contact" class="btn btn-accent ward-enquire">
|
||||
<i class="fas fa-envelope"></i> Enquire about this
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -616,5 +812,327 @@
|
||||
</footer>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
<script>
|
||||
/* ===== Package detail modals ===== */
|
||||
(function () {
|
||||
var DETAILS = {
|
||||
'first-spark': {
|
||||
emoji: '🌱', name: 'The First Spark', price: 'From £250',
|
||||
lead: 'A clean, professional first website to get your business online quickly and affordably.',
|
||||
low: { amt: '£250', desc: 'A tidy 1–3 page, template-based site with your branding, a contact form and one round of revisions.' },
|
||||
high: { amt: '~£450', desc: 'Up to 5 pages with light customisation, basic SEO setup and a second round of revisions.' },
|
||||
specs: [
|
||||
{ i: 'fa-file-lines', k: 'Pages', v: 'Up to 5' },
|
||||
{ i: 'fa-rotate', k: 'Revisions', v: '2 rounds' },
|
||||
{ i: 'fa-clock', k: 'Typical turnaround', v: '1–2 weeks' },
|
||||
{ i: 'fa-wand-magic-sparkles', k: 'Platform', v: 'WordPress' }
|
||||
]
|
||||
},
|
||||
'enchanted-workshop': {
|
||||
emoji: '✨', name: 'The Enchanted Workshop', price: '£750 – £1,500',
|
||||
lead: 'A custom-designed site for businesses ready to stand out and grow their audience.',
|
||||
low: { amt: '£750', desc: '5–7 pages with a custom design, a blog or news section and social media links.' },
|
||||
high: { amt: '£1,500', desc: 'Up to 10 pages with photo galleries, analytics and full search-engine optimisation.' },
|
||||
specs: [
|
||||
{ i: 'fa-file-lines', k: 'Pages', v: '5 – 10' },
|
||||
{ i: 'fa-rotate', k: 'Revisions', v: '3 rounds' },
|
||||
{ i: 'fa-clock', k: 'Typical turnaround', v: '2–4 weeks' },
|
||||
{ i: 'fa-wand-magic-sparkles', k: 'Platform', v: 'WordPress' }
|
||||
]
|
||||
},
|
||||
'arcane-forge': {
|
||||
emoji: '🔮', name: 'The Arcane Forge', price: '£1,500 – £3,000',
|
||||
lead: 'Advanced layouts and bespoke functionality for businesses with bigger ambitions.',
|
||||
low: { amt: '£1,500', desc: '8–10 pages with advanced layouts, enhanced forms and a tailored design.' },
|
||||
high: { amt: '£3,000', desc: '12+ pages with custom functionality, third-party integrations, performance tuning and training.' },
|
||||
specs: [
|
||||
{ i: 'fa-file-lines', k: 'Pages', v: '10+' },
|
||||
{ i: 'fa-rotate', k: 'Revisions', v: 'Unlimited in scope' },
|
||||
{ i: 'fa-clock', k: 'Typical turnaround', v: '3–5 weeks' },
|
||||
{ i: 'fa-plug', k: 'Integrations', v: 'Included' }
|
||||
]
|
||||
},
|
||||
'merchants-portal': {
|
||||
emoji: '🛒', name: "The Merchant's Portal", price: '£3,000 – £5,000',
|
||||
lead: 'Everything you need to open a fully working online shop.',
|
||||
low: { amt: '£3,000', desc: 'Shopify or WooCommerce setup with up to ~50 products, payment gateways and shipping.' },
|
||||
high: { amt: '£5,000', desc: 'Up to ~200 products with a custom store design, customer accounts and store-management training.' },
|
||||
specs: [
|
||||
{ i: 'fa-box', k: 'Products', v: 'Up to ~200' },
|
||||
{ i: 'fa-credit-card', k: 'Payments', v: 'Gateways configured' },
|
||||
{ i: 'fa-clock', k: 'Typical turnaround', v: '4–6 weeks' },
|
||||
{ i: 'fa-store', k: 'Platform', v: 'Shopify / WooCommerce' }
|
||||
]
|
||||
},
|
||||
'grand-emporium': {
|
||||
emoji: '⚡', name: 'The Grand Emporium', price: '£5,000 – £7,500+',
|
||||
lead: 'A digital flagship for established and high-volume retailers.',
|
||||
low: { amt: '£5,000', desc: 'Multi-category store with subscription products and advanced customer accounts.' },
|
||||
high: { amt: '£7,500+', desc: 'Automation and workflows, marketing integrations, bespoke functionality and full launch support.' },
|
||||
specs: [
|
||||
{ i: 'fa-box', k: 'Products', v: 'Unlimited' },
|
||||
{ i: 'fa-robot', k: 'Automation', v: 'Workflows & marketing' },
|
||||
{ i: 'fa-clock', k: 'Typical turnaround', v: '6–10 weeks' },
|
||||
{ i: 'fa-rocket', k: 'Launch support', v: 'Included' }
|
||||
]
|
||||
},
|
||||
'wizards-bench': {
|
||||
emoji: '🛠️', name: "The Wizard's Bench", price: '£40 <span>/ hour</span>',
|
||||
lead: 'Pay-as-you-go technical support for websites, email and office tech. Minimum one hour; remote sessions carry no call-out charge.',
|
||||
specs: [
|
||||
{ i: 'fa-bolt', k: 'What an hour covers', v: 'Fixes, updates, email & DNS tweaks' },
|
||||
{ i: 'fa-hourglass-half', k: 'Minimum', v: '1 hour' },
|
||||
{ i: 'fa-house-laptop', k: 'Remote', v: 'No call-out charge' },
|
||||
{ i: 'fa-location-dot', k: 'On-site', v: 'Oxfordshire area' },
|
||||
{ i: 'fa-file-invoice', k: 'Larger jobs', v: 'Quoted upfront' }
|
||||
]
|
||||
},
|
||||
'minor-ward': {
|
||||
emoji: '🛡️', name: 'Minor Ward', price: '£10 <span>/ month</span>',
|
||||
lead: 'Essential upkeep to keep a simple WordPress site safe and current.',
|
||||
specs: [
|
||||
{ i: 'fa-arrows-rotate', k: 'Updates', v: 'WordPress core & plugins' },
|
||||
{ i: 'fa-shield-halved', k: 'Security', v: 'Monitoring' },
|
||||
{ i: 'fa-database', k: 'Backups', v: 'Monthly' },
|
||||
{ i: 'fa-headset', k: 'Support time', v: 'Billed at bench rate' },
|
||||
{ i: 'fa-circle-check', k: 'Best for', v: 'Brochure sites' }
|
||||
]
|
||||
},
|
||||
'greater-ward': {
|
||||
emoji: '🛡️', name: 'Greater Ward', price: '£25 <span>/ month</span>',
|
||||
lead: 'Everything in Minor Ward, plus proactive checks and priority support for active business sites.',
|
||||
specs: [
|
||||
{ i: 'fa-stethoscope', k: 'Health checks', v: 'Monthly' },
|
||||
{ i: 'fa-bolt', k: 'Support', v: 'Priority email' },
|
||||
{ i: 'fa-gauge-high', k: 'Performance', v: 'Monitored' },
|
||||
{ i: 'fa-clock', k: 'Support allowance', v: '~30 mins / month' },
|
||||
{ i: 'fa-circle-check', k: 'Best for', v: 'Active business sites' }
|
||||
]
|
||||
},
|
||||
'merchants-ward': {
|
||||
emoji: '🛡️', name: "Merchant's Ward", price: '£50 <span>/ month</span>',
|
||||
lead: 'Everything in Greater Ward, plus ecommerce-grade monitoring and maintenance for online stores.',
|
||||
specs: [
|
||||
{ i: 'fa-cart-shopping', k: 'Ecommerce', v: 'Store monitoring' },
|
||||
{ i: 'fa-screwdriver-wrench', k: 'Maintenance', v: 'Store upkeep' },
|
||||
{ i: 'fa-bolt', k: 'Response', v: 'Priority' },
|
||||
{ i: 'fa-clock', k: 'Support allowance', v: '~1 hour / month' },
|
||||
{ i: 'fa-circle-check', k: 'Best for', v: 'Online stores' }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
// Build the modal shell once
|
||||
var overlay = document.createElement('div');
|
||||
overlay.className = 'pkg-modal-overlay';
|
||||
overlay.innerHTML =
|
||||
'<div class="pkg-modal" role="dialog" aria-modal="true" aria-labelledby="pkgModalName">' +
|
||||
'<button class="pkg-modal-close" type="button" aria-label="Close">×</button>' +
|
||||
'<div class="pkg-modal-emoji"></div>' +
|
||||
'<div class="pkg-modal-name" id="pkgModalName"></div>' +
|
||||
'<div class="pkg-modal-price"></div>' +
|
||||
'<p class="pkg-modal-lead"></p>' +
|
||||
'<div class="pkg-modal-body"></div>' +
|
||||
'<a class="btn btn-accent pricing-enquire pkg-modal-enquire"><i class="fas fa-envelope"></i> Enquire about this</a>' +
|
||||
'</div>';
|
||||
document.body.appendChild(overlay);
|
||||
|
||||
var modalBox = overlay.querySelector('.pkg-modal');
|
||||
var elEmoji = overlay.querySelector('.pkg-modal-emoji');
|
||||
var elName = overlay.querySelector('.pkg-modal-name');
|
||||
var elPrice = overlay.querySelector('.pkg-modal-price');
|
||||
var elLead = overlay.querySelector('.pkg-modal-lead');
|
||||
var elBody = overlay.querySelector('.pkg-modal-body');
|
||||
var elEnquire = overlay.querySelector('.pkg-modal-enquire');
|
||||
var elClose = overlay.querySelector('.pkg-modal-close');
|
||||
var lastFocus = null;
|
||||
|
||||
var REDUCED = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
var SPARKLE_CHARS = ['✦', '✧', '✶', '✩', '✨'];
|
||||
var SPARKLE_COLORS = ['rgba(255,255,255,1)', 'rgba(251,191,36,1)', 'rgba(253,224,120,1)', 'rgba(249,115,22,0.95)'];
|
||||
|
||||
function dropSparkle(x, y) {
|
||||
var sp = document.createElement('span');
|
||||
sp.className = 'pkg-sparkle';
|
||||
var size = (0.5 + Math.random() * 0.9).toFixed(2);
|
||||
var col = SPARKLE_COLORS[Math.floor(Math.random() * SPARKLE_COLORS.length)];
|
||||
sp.textContent = SPARKLE_CHARS[Math.floor(Math.random() * SPARKLE_CHARS.length)];
|
||||
sp.style.left = x + 'px';
|
||||
sp.style.top = y + 'px';
|
||||
sp.style.fontSize = size + 'rem';
|
||||
sp.style.color = col;
|
||||
document.body.appendChild(sp);
|
||||
// Pop outward in a random direction and fade — reads as sparkles bursting off the box edge.
|
||||
var da = Math.random() * Math.PI * 2;
|
||||
var dd = 8 + Math.random() * 22;
|
||||
var ddx = (Math.cos(da) * dd).toFixed(0);
|
||||
var ddy = (Math.sin(da) * dd).toFixed(0);
|
||||
sp.animate([
|
||||
{ opacity: 1, transform: 'translate(-50%, -50%) scale(' + size + ') rotate(0deg)' },
|
||||
{ opacity: 0, transform: 'translate(calc(-50% + ' + ddx + 'px), calc(-50% + ' + ddy + 'px)) scale(' + (size * 0.25).toFixed(2) + ') rotate(120deg)' }
|
||||
], { duration: 460 + Math.random() * 300, easing: 'ease-out' }).onfinish = function () { sp.remove(); };
|
||||
}
|
||||
|
||||
// Scatter sparkles around the perimeter of the box as it expands and travels.
|
||||
function edgeSparkles(box, duration) {
|
||||
var start = null;
|
||||
function frame(ts) {
|
||||
if (!start) start = ts;
|
||||
var p = Math.min((ts - start) / duration, 1);
|
||||
var r = box.getBoundingClientRect(); // live rect reflects the running transform
|
||||
for (var i = 0; i < 2; i++) {
|
||||
var side = Math.random(), x, y;
|
||||
if (side < 0.25) { x = r.left + Math.random() * r.width; y = r.top; }
|
||||
else if (side < 0.5) { x = r.left + Math.random() * r.width; y = r.bottom; }
|
||||
else if (side < 0.75) { x = r.left; y = r.top + Math.random() * r.height; }
|
||||
else { x = r.right; y = r.top + Math.random() * r.height; }
|
||||
dropSparkle(x, y);
|
||||
}
|
||||
if (p < 1) requestAnimationFrame(frame);
|
||||
}
|
||||
requestAnimationFrame(frame);
|
||||
}
|
||||
|
||||
function openModal(slug, ox, oy) {
|
||||
var d = DETAILS[slug];
|
||||
if (!d) return;
|
||||
|
||||
elEmoji.textContent = d.emoji;
|
||||
elName.textContent = d.name;
|
||||
elPrice.innerHTML = d.price;
|
||||
elLead.textContent = d.lead;
|
||||
|
||||
var html = '';
|
||||
if (d.low && d.high) {
|
||||
html += '<div class="pkg-range">' +
|
||||
'<div class="pkg-range-col"><h4>Lower end</h4><div class="amt">' + d.low.amt + '</div><p>' + d.low.desc + '</p></div>' +
|
||||
'<div class="pkg-range-col"><h4>Upper end</h4><div class="amt">' + d.high.amt + '</div><p>' + d.high.desc + '</p></div>' +
|
||||
'</div>';
|
||||
}
|
||||
html += '<hr class="pkg-modal-divider"><div class="pkg-specs">';
|
||||
d.specs.forEach(function (s) {
|
||||
html += '<div class="pkg-spec"><span class="k"><i class="fas ' + s.i + '"></i> ' + s.k + '</span><span class="v">' + s.v + '</span></div>';
|
||||
});
|
||||
html += '</div>';
|
||||
elBody.innerHTML = html;
|
||||
|
||||
elEnquire.setAttribute('href', 'index.php?package=' + slug + '#contact');
|
||||
|
||||
lastFocus = document.activeElement;
|
||||
overlay.classList.add('open');
|
||||
document.documentElement.classList.add('modal-open');
|
||||
modalBox.scrollTop = 0;
|
||||
|
||||
if (!REDUCED) {
|
||||
// Measure the modal's resting centre, then glide in along a spiral path from the click point.
|
||||
var rect = modalBox.getBoundingClientRect();
|
||||
var cx = rect.left + rect.width / 2;
|
||||
var cy = rect.top + rect.height / 2;
|
||||
if (typeof ox !== 'number') { ox = cx; oy = cy; }
|
||||
var tx = ox - cx, ty = oy - cy; // click offset from the modal's resting centre
|
||||
var dist = Math.hypot(tx, ty);
|
||||
var startAng = Math.atan2(ty, tx); // angle of the click point around the centre
|
||||
var maxR = Math.max(55, Math.min(dist * 0.5, 120)); // capped flourish radius — same feel anywhere
|
||||
var turns = 1.25; // spins of the flourish — the "flick" of the wand
|
||||
var duration = 1000;
|
||||
|
||||
// A wand-flick spring: the box starts as a dot at the click, springs out into a
|
||||
// tight, controlled spiral, and glides into the centre as it grows.
|
||||
// - base glides straight from the wand tip to the centre (no giant orbit)
|
||||
// - a capped spiral flourish blooms out (sin envelope) then tightens to nothing
|
||||
// - amplitude is clamped, so edge clicks and centre clicks look the same
|
||||
var STEPS = 44, frames = [];
|
||||
for (var i = 0; i <= STEPS; i++) {
|
||||
var t = i / STEPS;
|
||||
var g = Math.pow(t, 1.4); // growth + travel-to-centre progress
|
||||
var baseX = tx * (1 - g); // glide from wand tip -> centre
|
||||
var baseY = ty * (1 - g);
|
||||
var amp = maxR * Math.sin(Math.PI * Math.pow(t, 0.7)); // 0 -> bloom -> 0
|
||||
var ang = startAng + turns * 2 * Math.PI * t;
|
||||
var px = baseX + Math.cos(ang) * amp;
|
||||
var py = baseY + Math.sin(ang) * amp;
|
||||
var sc = 0.05 + 0.95 * g;
|
||||
frames.push({
|
||||
transform: 'translate(' + px.toFixed(1) + 'px,' + py.toFixed(1) + 'px) scale(' + sc.toFixed(3) + ')',
|
||||
opacity: t < 0.08 ? (t / 0.08).toFixed(2) : 1
|
||||
});
|
||||
}
|
||||
modalBox.animate(frames, { duration: duration, easing: 'linear' });
|
||||
|
||||
edgeSparkles(modalBox, duration);
|
||||
}
|
||||
|
||||
elClose.focus();
|
||||
}
|
||||
|
||||
// Scatter sparkles evenly around the outline of a rectangle (a quick burst).
|
||||
function perimeterBurst(r, n) {
|
||||
var per = 2 * (r.width + r.height);
|
||||
for (var i = 0; i < n; i++) {
|
||||
var d = (i / n) * per + (Math.random() - 0.5) * (per / n);
|
||||
var x, y;
|
||||
if (d < r.width) { x = r.left + d; y = r.top; }
|
||||
else if (d < r.width + r.height) { x = r.right; y = r.top + (d - r.width); }
|
||||
else if (d < 2 * r.width + r.height){ x = r.right - (d - r.width - r.height); y = r.bottom; }
|
||||
else { x = r.left; y = r.bottom - (d - 2 * r.width - r.height); }
|
||||
dropSparkle(x, y);
|
||||
}
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
if (!REDUCED && overlay.classList.contains('open')) {
|
||||
perimeterBurst(modalBox.getBoundingClientRect(), 48); // leave sparkles tracing the box shape
|
||||
}
|
||||
overlay.classList.remove('open');
|
||||
document.documentElement.classList.remove('modal-open');
|
||||
if (lastFocus && lastFocus.focus) lastFocus.focus();
|
||||
}
|
||||
|
||||
elClose.addEventListener('click', closeModal);
|
||||
overlay.addEventListener('click', function (e) {
|
||||
if (e.target === overlay) closeModal();
|
||||
});
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape' && overlay.classList.contains('open')) closeModal();
|
||||
});
|
||||
|
||||
// Resolve a click origin: real pointer coords, or the element's centre for keyboard activation
|
||||
function clickPoint(e, el) {
|
||||
if (e && e.clientX) return [e.clientX, e.clientY];
|
||||
var r = el.getBoundingClientRect();
|
||||
return [r.left + r.width / 2, r.top + r.height / 2];
|
||||
}
|
||||
|
||||
// Wire up every card from its enquire link's package slug
|
||||
document.querySelectorAll('a.pricing-enquire, a.bench-enquire, a.ward-enquire').forEach(function (link) {
|
||||
var query = ((link.getAttribute('href') || '').split('?')[1] || '').split('#')[0];
|
||||
var slug = new URLSearchParams(query).get('package');
|
||||
if (!slug || !DETAILS[slug]) return;
|
||||
|
||||
// Insert a "See full details" trigger just before the enquire button
|
||||
var btn = document.createElement('button');
|
||||
btn.type = 'button';
|
||||
btn.className = 'pkg-details-btn';
|
||||
btn.innerHTML = '<i class="fas fa-circle-info"></i> See full details';
|
||||
btn.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
var pt = clickPoint(e, btn);
|
||||
openModal(slug, pt[0], pt[1]);
|
||||
});
|
||||
link.parentNode.insertBefore(btn, link);
|
||||
|
||||
// Clicking anywhere on the card (except links/buttons) opens it too
|
||||
var card = link.closest('.pricing-card, .bench-card, .ward-card');
|
||||
if (card) {
|
||||
card.addEventListener('click', function (e) {
|
||||
if (e.target.closest('a, button')) return;
|
||||
var pt = clickPoint(e, card);
|
||||
openModal(slug, pt[0], pt[1]);
|
||||
});
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user