This commit is contained in:
Nick 2025-09-07 21:31:16 +01:00
parent 31ae1e80ea
commit afe3c6cc78
3 changed files with 99 additions and 4 deletions

View File

@ -21,7 +21,7 @@
<section class="mb-4">
<div class="row g-3 align-items-stretch">
<!-- Book Cover -->
<div class="col-md-5 d-flex">
<div class="col-md-5 d-flex d-none d-md-block">
<div class="card character-card h-100 flex-fill" id="cover-card">
<responsive-image src="the-alpha-flame-discovery-cover.png"
class="card-img-top"
@ -29,7 +29,7 @@
display-width-percentage="50"></responsive-image>
<div class="card-body border-top border-3 border-dark">
<h3 class="card-title h5 mb-1">The Alpha Flame: <span class="fw-light">Discovery</span></h3>
<p class="card-text mb-0">Maggie stands outside the derelict Rubery Hill Hospital. 1983 Birmingham. A story of survival, sisters, and fire.</p>
<p class="card-text mb-0">It's 1983 Birmingham. Maggie, my fiery heroine, standing outside the derelict Rubery Hill Hospital. A story of survival, sisters, and fire.</p>
</div>
</div>
</div>
@ -239,7 +239,7 @@
<div class="col-10">
<div class="audio-player text-center">
<audio id="player">
<source src="/audio/the-alpha-flame-discovery-synopsis.mp3" type="audio/mpeg">
<source src="/audio/the-alpha-flame-discovery-catherine.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
@ -249,7 +249,7 @@
<!-- Teaser paragraph -->
<p class="card-text">
Set in 1983 Birmingham, The Alpha Flame: Discovery follows twin sisters Beth and Maggie as they uncover dark family secrets and fight to survive. Gritty and emotionally charged, it explores the bond between two women who refuse to be broken.
Set in 1983 Birmingham, The Alpha Flame: Discovery follows the lives of two young women, Beth and Maggie, as they uncover dark family secrets and fight to survive. Gritty and emotionally charged, it explores the bond between two women who refuse to be broken.
</p>
<!-- Collapse trigger -->
@ -356,6 +356,29 @@
});
</script>
<script>
document.addEventListener('click', function(e){
const a = e.target.closest('a[href^="/go/"]');
if (!a || typeof fbq !== 'function') return;
// Extract slug, retailer/format from attributes if present
const slug = a.getAttribute('href').split('/').pop();
const retailer = a.dataset.retailer || null;
const format = a.dataset.format || null;
// Event ID for matching with server-side (CAPI) event
const eventId = crypto && crypto.randomUUID ? crypto.randomUUID() : (Date.now() + '-' + Math.random());
// Attach eventId so the server can read it on the next request (optional)
a.dataset.eventId = eventId;
fbq('trackCustom', 'BuyClick', {
slug, retailer, format, page: location.pathname
}, {eventID: eventId});
});
</script>
<!-- Geo-based slug swap for /go/{retailer}-{format}-{country} + dev override -->
<script>
(function() {

View File

@ -11,6 +11,30 @@
<link rel="stylesheet" href="~/css/duotone.min.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/plyr.min.css" asp-append-version="true" />
<script>
// Load Meta Pixel ONLY if consent was given
(function () {
if (localStorage.getItem('marketingConsent') !== 'yes') return;
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n; n.loaded=!0; n.version='2.0'; n.queue=[]; t=b.createElement(e); t.async=!0;
t.src=v; s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '556474687460834');
fbq('track', 'PageView');
})();
</script>
<noscript>
<!-- harmless if present; loads only when JS disabled -->
<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=PageView&noscript=1"/>
</noscript>
<!-- End Meta Pixel -->
<style>
.plyr--audio .plyr__controls {
background-color: rgba(255,255,255,1) !important; /* or set your page colour */
@ -178,6 +202,26 @@
</div>
</footer>
<div id="cookieBanner"
class="d-none position-fixed bottom-0 start-0 end-0 bg-light border-top border-3 border-dark shadow-lg"
style="z-index: 1080;">
<div class="container py-3">
<div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-2">
<div class="me-md-3">
<strong class=text-dark>Cookies & privacy.</strong>
<span class="text-muted small">
We use necessary cookies and, with your permission, marketing cookies (e.g. Meta Pixel) to measure and improve.
</span>
</div>
<div class="d-flex gap-2">
<button id="cookieReject" type="button" class="btn btn-outline-dark btn-sm">Reject</button>
<button id="cookieAccept" type="button" class="btn btn-dark btn-sm">Accept</button>
</div>
</div>
</div>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@ -191,6 +235,34 @@
</script> *@
@RenderSection("Scripts", required: false)
<script>
(function () {
const banner = document.getElementById('cookieBanner');
const consent = localStorage.getItem('marketingConsent');
// Show banner if no decision yet
if (!consent) banner.classList.remove('d-none');
document.getElementById('cookieAccept')?.addEventListener('click', function () {
localStorage.setItem('marketingConsent', 'yes');
banner.classList.add('d-none');
// reload so the pixel loader in <head> runs
location.reload();
});
document.getElementById('cookieReject')?.addEventListener('click', function () {
localStorage.setItem('marketingConsent', 'no');
banner.classList.add('d-none');
});
// Optional: expose a simple “Manage cookies” helper you can call from a footer link
window.manageCookies = function () {
banner.classList.remove('d-none');
};
})();
</script>
<script>
window.addEventListener("load", () => {
setTimeout(() => {