<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>Sandblast Cinema</title>
<style>
:root{
--bg:#03050d;--bg2:#071126;--panel:#0a1026;--glass:rgba(7,12,30,.91);
--cyan:#18d9ff;--blue:#557cff;--violet:#8c56ff;--magenta:#df46ff;
--text:#f7f9ff;--muted:#aeb9d7;--line:rgba(50,207,255,.32);
--line2:rgba(160,92,255,.46);--ok:#72f5c1;--danger:#ff4778;
--shadow:0 28px 80px rgba(0,0,0,.74),0 0 55px rgba(85,92,255,.22)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:
radial-gradient(circle at 10% 5%,rgba(24,217,255,.18),transparent 27%),
radial-gradient(circle at 88% 8%,rgba(223,70,255,.17),transparent 26%),
linear-gradient(150deg,#03040c 0,#071126 48%,#040611 100%);
color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.45;background-image:
radial-gradient(circle at 12% 28%,#fff 0 1px,transparent 1.5px),
radial-gradient(circle at 64% 17%,#9ed9ff 0 1px,transparent 1.6px),
radial-gradient(circle at 86% 33%,#fff 0 1px,transparent 1.5px),
radial-gradient(circle at 33% 70%,#d5a7ff 0 1px,transparent 1.5px);
background-size:210px 180px,270px 230px,320px 280px,240px 260px}
button{font:inherit}.wrap{width:min(98vw,1220px);margin:18px auto;padding:0 14px}
.shell{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:28px;padding:18px;background:
radial-gradient(circle at 14% 8%,rgba(24,166,255,.12),transparent 28%),
radial-gradient(circle at 88% 18%,rgba(214,57,255,.1),transparent 24%),
linear-gradient(145deg,rgba(4,7,18,.98),rgba(8,15,36,.96) 54%,rgba(3,5,14,.99));
box-shadow:var(--shadow)}
.shell:before{content:"";position:absolute;inset:-20%;pointer-events:none;background:
conic-gradient(from 150deg at 70% 35%,transparent 0 30%,rgba(24,216,255,.12) 36%,rgba(119,72,255,.18) 43%,rgba(225,60,255,.11) 49%,transparent 58%);filter:blur(30px)}
.head,.stage,.status,.railhead,.controls{position:relative;z-index:1}
.head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:50px;height:50px;border-radius:17px;display:grid;place-items:center;font-weight:950;letter-spacing:.06em;border:1px solid rgba(49,214,255,.55);background:radial-gradient(circle at 50% 10%,rgba(105,220,255,.27),rgba(112,68,255,.22),rgba(5,8,22,.58));box-shadow:0 0 30px rgba(39,213,255,.16),0 0 32px rgba(208,52,255,.13)}
.kicker{color:#7ee8ff;font-size:10px;font-weight:950;letter-spacing:.18em;text-transform:uppercase}
h1{margin:4px 0 0;font-size:clamp(24px,3.3vw,40px);line-height:1;background:linear-gradient(90deg,#fff 0,#8feaff 36%,#7080ff 68%,#f06cff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.headcopy{max-width:410px;color:var(--muted);font-size:13px;line-height:1.45;text-align:right}
.stage{display:grid;grid-template-columns:minmax(0,2.25fr) minmax(290px,.95fr);gap:16px}
.playerpanel,.rail{border:1px solid var(--line);border-radius:23px;background:linear-gradient(180deg,rgba(8,14,34,.93),rgba(4,7,18,.78));box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.playerpanel{padding:13px}.screen{position:relative;aspect-ratio:16/9;border-radius:17px;overflow:hidden;background:#000;border:1px solid rgba(59,205,255,.4)}
.screen video,.screen iframe{width:100%;height:100%;display:block;background:#000}.screen video{object-fit:contain}.screen iframe{border:0}.screen [hidden]{display:none!important}
.screen:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 22%,transparent 76%,rgba(24,217,255,.035))}
.live{position:absolute;left:12px;top:12px;z-index:4;display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;border:1px solid rgba(114,245,193,.48);background:rgba(3,12,23,.84);color:#dffef2;font-size:10px;font-weight:950;letter-spacing:.11em}
.live:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 14px rgba(114,245,193,.9)}
.controls{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:9px;align-items:center;margin-top:12px}
.btn{min-height:42px;border-radius:13px;border:1px solid rgba(72,185,255,.36);background:rgba(7,14,34,.82);color:#eef5ff;padding:0 14px;cursor:pointer;font-weight:850}
.btn:hover,.card:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn.primary{background:linear-gradient(135deg,#1aa8ff,#7958ff 58%,#d746ff);border-color:rgba(110,236,255,.78);box-shadow:0 10px 28px rgba(69,95,255,.28)}
.now{min-width:0;padding:0 4px}.now small{display:block;color:#69e3ff;font-size:9px;font-weight:950;letter-spacing:.15em;text-transform:uppercase}.now b{display:block;margin-top:3px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.counter{color:#bcc7e6;font-size:12px;font-weight:800}
.status{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:11px;padding:11px 12px;border:1px solid rgba(69,196,255,.22);border-radius:14px;background:linear-gradient(135deg,rgba(14,31,65,.67),rgba(26,15,56,.58));font-size:12px;color:#c6d3ef}.status strong{color:#fff}
.rail{padding:12px;min-width:0}.railhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;padding:10px 11px;border-radius:13px;border:1px solid rgba(75,192,255,.2);background:rgba(9,17,41,.66)}
.railtitle{font-size:11px;font-weight:950;letter-spacing:.16em;text-transform:uppercase;color:#7fe7ff}.railcount{font-size:11px;color:#9eacd0}
.grid{display:grid;gap:9px;max-height:560px;overflow:auto;padding-right:3px}
.card{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;align-items:center;padding:9px;border-radius:14px;border:1px solid rgba(74,114,199,.33);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));cursor:pointer;transition:.18s ease;text-align:left;color:inherit}
.card.active{border-color:rgba(59,220,255,.86);background:linear-gradient(135deg,rgba(33,129,255,.28),rgba(119,72,255,.2),rgba(220,58,255,.14));box-shadow:0 0 24px rgba(66,112,255,.2)}
.thumb{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid rgba(61,199,255,.25);background:linear-gradient(135deg,rgba(24,217,255,.18),rgba(140,86,255,.18),rgba(223,70,255,.13))}
.thumb:before{content:"▶";position:absolute;inset:0;display:grid;place-items:center;font-size:18px;text-shadow:0 2px 12px #000}
.num{position:absolute;left:6px;top:6px;padding:3px 6px;border-radius:999px;background:rgba(0,0,0,.64);font-size:9px;font-weight:900;color:#fff}
.meta{min-width:0}.meta small{display:block;color:#77e7ff;font-size:9px;font-weight:950;letter-spacing:.13em;text-transform:uppercase}.meta b{display:block;margin-top:4px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meta span{display:block;margin-top:3px;color:#aeb9d7;font-size:11px;line-height:1.3}
footer{position:relative;z-index:1;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;color:#94a4c9;font-size:11px}
::-webkit-scrollbar{width:7px}::-webkit-scrollbar-thumb{border-radius:999px;background:linear-gradient(var(--cyan),var(--violet),var(--magenta))}
@media(max-width:900px){.stage{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}.headcopy{text-align:left}}
@media(max-width:640px){.wrap{width:100%;margin:0;padding:0}.shell{border-radius:0;padding:10px}.head{align-items:flex-start}.headcopy{font-size:12px}.controls{grid-template-columns:1fr 1fr}.now{grid-column:1/-1;grid-row:1}.counter{text-align:right}.grid{grid-template-columns:1fr}.card{grid-template-columns:92px minmax(0,1fr)}.status{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
</style>
</head>
<body>
<div class="wrap">
<section class="shell" id="widget">
<header class="head">
<div class="brand"><div class="logo">SB</div><div><div class="kicker">Sandblast Media</div><h1>Sandblast Cinema</h1></div></div>
<div class="headcopy">Classic crime, suspense, adventure, and action—curated into a focused Sandblast viewing lane.</div>
</header>
<div class="stage">
<section class="playerpanel">
<div class="screen">
<span class="live" id="signal">CLASSIC SIGNAL</span>
<video id="player" controls playsinline preload="metadata"></video>
<iframe id="embedPlayer" title="Displayto commercial player" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen referrerpolicy="strict-origin-when-cross-origin" hidden></iframe>
</div>
<div class="controls">
<button class="btn" id="prev" type="button">← Previous</button>
<button class="btn primary" id="next" type="button">Next Movie →</button>
<div class="now"><small>Now Playing</small><b id="title">Loading Sandblast Cinema…</b></div>
<div class="counter" id="counter">1 / 9</div>
</div>
<div class="status">
<div><strong id="genre">Classic Cinema</strong><br><span id="description">Select any title in the movie lane.</span></div>
<div id="duration">—</div>
</div>
</section>
<aside class="rail" aria-label="Sandblast Cinema movie lane">
<div class="railhead"><div class="railtitle">Movie Lane</div><div class="railcount" id="railcount">9 titles</div></div>
<div class="grid" id="grid"></div>
</aside>
</div>
<footer><span>Sandblast Cinema · Independent programming</span><span>Movies advance automatically · Hosted features use their embedded player</span></footer>
</section>
</div>
<script>
(()=>{"use strict";
const films=[
["Displayto","Career / Portfolio","A focused career platform commercial encouraging people to turn their projects, skills, and experience into visible proof for employers and professional networks.","https://screenapp.io/app/v/PWy6fin-fC?embed=true",36,"embed"],
["The Saint Louis Bank Robbery","Crime / Heist","A tightly wound crime drama following a bank robbery plan as pressure, suspicion, and consequences begin to close in.","https://dn710802.ca.archive.org/0/items/Saint_Louis_Bank_Robbery/Saint_Louis_Bank_Robbery.mp4",5340],
["Operation Condor","Action / Adventure","A high-energy international adventure driven by dangerous treasure hunting, martial arts action, and relentless pursuit.","https://ia801005.us.archive.org/24/items/operation-condor-operation-condor-ii-the-armour-of-the-gods/1.%20Operation%20Condor.mp4",6420],
["The Man Who Walked Alone","Comedy / Romance","A chance encounter on the road develops into a lively classic story shaped by mistaken impressions, mystery, and romance.","https://dn710800.ca.archive.org/0/items/Man_Who_Walked_Alone_1945/Man_Who_Walked_Alone.mp4",4260],
["Only the Valiant","Western / Adventure","A hard-edged cavalry western centered on command, sacrifice, survival, and a dangerous frontier mission.","https://dn720005.ca.archive.org/0/items/OnlytheValaint/OnlytheValaint.mp4",6300],
["The Joe Louis Story","Biography / Sports","The life and career of heavyweight champion Joe Louis unfold through triumph, pressure, and determination.","https://dn720401.ca.archive.org/0/items/the-joe-louis-story-4-k/TheJoeLouisStory4K.mp4",5280],
["Woman on the Run","Crime / Film Noir","A woman searches the shadowed streets of San Francisco after her missing husband witnesses a murder.","https://ia801003.us.archive.org/15/items/woman-on-the-run-1950-colorized-movie-720p-hd/woman%20on%20the%20run-1950-colorized%20movie-720p-hd.mp4",4620],
["Kansas City Confidential","Crime / Film Noir","An ex-con is pulled into a ruthless armored-car robbery conspiracy where hidden identities, betrayal, and revenge collide.","https://dn710708.ca.archive.org/0/items/kansascityconfidencial/kansascityconfidencial.mp4",5940],
["Gulliver's Travels","Animation / Fantasy","A classic animated fantasy adventure following Gulliver into a miniature kingdom divided by conflict and transformed by his unexpected arrival.","https://dn711000.ca.archive.org/0/items/gullivers_travels1939/gullivers_travels1939.mp4",4560]
];
const $=s=>document.querySelector(s),player=$("#player"),embed=$("#embedPlayer"),grid=$("#grid"),title=$("#title"),genre=$("#genre"),desc=$("#description"),dur=$("#duration"),counter=$("#counter"),signal=$("#signal");
let index=0,changing=false;
const fmt=s=>{s=Math.max(0,Math.round(s||0));const h=Math.floor(s/3600),m=Math.floor(s%3600/60);return h?`${h}h ${m}m`:s<60?`${s} sec`:`${m} min`};
function render(){
grid.innerHTML=films.map((f,i)=>`<button class="card${i===index?" active":""}" data-i="${i}" type="button" aria-label="Play ${f[0]}"><span class="thumb"><span class="num">${String(i+1).padStart(2,"0")}</span></span><span class="meta"><small>${f[1]}</small><b>${f[0]}</b><span>${fmt(f[4])}</span></span></button>`).join("");
grid.querySelectorAll(".card").forEach(b=>b.onclick=()=>load(+b.dataset.i,true));
}
function load(i,play){
index=(i+films.length)%films.length;const f=films[index],hosted=f[5]==="embed";changing=true;
title.textContent=f[0];genre.textContent=f[1];desc.textContent=f[2];dur.textContent=fmt(f[4]);counter.textContent=`${index+1} / ${films.length}`;signal.textContent=hosted?"SPONSORED FEATURE":`CLASSIC ${index+1} OF ${films.length}`;render();
if(hosted){
player.pause();player.hidden=true;embed.hidden=false;if(embed.src!==f[3])embed.src=f[3];changing=false;return;
}
embed.hidden=true;embed.src="about:blank";player.hidden=false;player.src=f[3];player.load();
player.addEventListener("loadedmetadata",()=>{changing=false;if(play)player.play().catch(()=>{})},{once:true});
}
function advance(){if(changing)return;load(index+1,true)}
$("#prev").onclick=()=>load(index-1,true);
$("#next").onclick=()=>load(index+1,true);
player.addEventListener("ended",advance);
player.addEventListener("error",()=>setTimeout(advance,350));
player.addEventListener("timeupdate",()=>{if(!changing&&Number.isFinite(player.duration)&&player.duration>0&&player.duration-player.currentTime<.45)advance()});
$("#railcount").textContent=`${films.length} titles`;
load(0,false);
})();
</script>
</body>
</html>
<script
src="https://links.acbncanada.com/js/external-tracking.js"
data-tracking-id="tk_c62e9b13ff584b64b107263b02a39092">
</script>
