{"product_id":"matthias-atoll-map","title":"Matthias - Atoll Map","description":"\u003c!-- ======= ORBIT WAX - TRACKLIST TEMPLATE (paste \u0026 go) ======= --\u003e\n\u003cstyle\u003e\n  \/* === Tracklist met achtergrond-art, lichte overlay \u0026 custom progress === *\/\n  .tracklist{--text:#e5e7eb;--muted:#cbd5e1;--accent:#cbd5e1}\n  .tracklist.bg-art{position:relative;border-radius:14px;overflow:hidden;margin:10px 0}\n  .tracklist.bg-art::before,\n  .tracklist.bg-art::after{\n    content:\"\";position:absolute;inset:0;z-index:0;pointer-events:none; \/* laat klikken door *\/\n  }\n  .tracklist .inner{position:relative;z-index:1;padding:16px}\n\n  .tracklist-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:var(--text)}\n  .tracklist-title{font-weight:700;font-size:1.05rem}\n  .tracklist-count{color:var(--muted);font-size:.95rem;margin-left:.5rem;font-weight:500}\n  .tracklist-btn{border:1px solid var(--accent);background:rgba(255,255,255,.06);color:var(--text);padding:6px 10px;border-radius:8px;cursor:pointer}\n  .tracklist-btn[disabled]{opacity:.6;cursor:not-allowed}\n\n  .tracklist-list{list-style:none;margin:0;padding:0;border-radius:10px;overflow:hidden}\n  .tracklist-item{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;color:var(--text);background:rgba(15,23,42,.28);border-bottom:1px solid rgba(203,213,225,.08)}\n  .tracklist-item:nth-child(even){background:rgba(15,23,42,.22)}\n  .tracklist-item:hover{background:rgba(203,213,225,.12)}\n  .tracklist-item .state{width:22px;text-align:center;opacity:.9}\n  .tracklist-item.active{outline:1px solid rgba(203,213,225,.4); background:rgba(203,213,225,.18)}\n\n  \/* Voortgangsbalk *\/\n  .playerbar{display:flex;align-items:center;gap:10px;margin-top:10px;color:var(--muted);font-size:.9rem}\n  .progress{position:relative;height:6px;flex:1;background:rgba(203,213,225,.25);border-radius:999px;cursor:pointer}\n  .progress-fill{position:absolute;left:0;top:0;height:100%;width:0;border-radius:999px;background:rgba(203,213,225,.9)}\n  .progress-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}\n  .time{white-space:nowrap;min-width:80px;text-align:right}\n\n  .toast{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.6);color:#fff;padding:6px 10px;border-radius:8px;font-size:.85rem}\n  .sr-only{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}\n\n  @media (prefers-color-scheme: light){\n    .tracklist{--text:#0f172a;--muted:#334155;--accent:#94a3b8}\n    .tracklist-btn{background:rgba(255,255,255,.7)}\n    .tracklist-item{background:rgba(255,255,255,.55);border-bottom:1px solid rgba(51,65,85,.12)}\n    .tracklist-item:nth-child(even){background:rgba(255,255,255,.48)}\n    .tracklist-item.active{outline:1px solid rgba(51,65,85,.28);background:rgba(255,255,255,.72)}\n    .progress{background:rgba(51,65,85,.15)}\n    .progress-fill{background:rgba(51,65,85,.8)}\n    .progress-thumb{background:#0f172a}\n  }\n\u003c\/style\u003e\n\n\u003c!-- Container --\u003e\n\u003cdiv class=\"tracklist bg-art\" id=\"tracklist-ORBITWAX\"\u003e\n  \u003cdiv class=\"inner\"\u003e\n    \u003cdiv class=\"tracklist-header\"\u003e\n      \u003cdiv class=\"tracklist-title\"\u003eTracklist \u003cspan class=\"tracklist-count\"\u003e(–)\u003c\/span\u003e\n\u003c\/div\u003e\n      \u003cbutton class=\"tracklist-btn\" type=\"button\" data-action=\"play-all\"\u003e▶ Play All\u003c\/button\u003e\n    \u003c\/div\u003e\n\n    \u003c!-- Hier komt de lijst automatisch in --\u003e\n    \u003cul class=\"tracklist-list\" role=\"listbox\" aria-label=\"Audio previews\"\u003e\u003c\/ul\u003e\n\n    \u003c!-- Gedeelde audio player --\u003e\n    \u003caudio id=\"player-ORBITWAX\" preload=\"metadata\" crossorigin=\"anonymous\"\u003e\u003c\/audio\u003e\n\n    \u003c!-- Voortgangsbalk --\u003e\n    \u003cdiv class=\"playerbar\"\u003e\n      \u003cdiv class=\"progress\" id=\"progress-ORBITWAX\" role=\"slider\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"0\" tabindex=\"0\"\u003e\n        \u003cdiv class=\"progress-fill\"\u003e\u003c\/div\u003e\n        \u003cdiv class=\"progress-thumb\" style=\"left:0%\"\u003e\u003c\/div\u003e\n      \u003c\/div\u003e\n      \u003cdiv class=\"time\"\u003e\n\u003cspan class=\"cur\"\u003e0:00\u003c\/span\u003e \/ \u003cspan class=\"dur\"\u003e–:–\u003c\/span\u003e\n\u003c\/div\u003e\n    \u003c\/div\u003e\n\n    \u003cspan class=\"sr-only\" aria-live=\"polite\" id=\"ann-ORBITWAX\"\u003e\u003c\/span\u003e\n    \u003cdiv class=\"toast\" style=\"display:none\" id=\"toast-ORBITWAX\"\u003eCouldn’t start audio. Tap again.\u003c\/div\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cscript\u003e\n\/* ======= CONFIG: vul alleen dit blok in ======= *\/\nconst COVER_URL   = 'https:\/\/cdn.shopify.com\/s\/files\/1\/0921\/7638\/4327\/files\/Scherm_afbeelding_2026-09-10_om_21.31.56.png?v=1789068801'; \/\/ bv. https:\/\/cdn.shopify.com\/...\/cover.jpg\n\n\/\/ Optie A (snel): alleen audio-URLS plakken in volgorde (A1, A2, B1, B2, C1, ...)\n\/\/ Titels worden automatisch A1, A2, B1, B2, ...\nconst TRACK_URLS = [\n  'https:\/\/cdn.shopify.com\/s\/files\/1\/0921\/7638\/4327\/files\/1-Runes_Of_Time.mp3?v=1789068802',\n  'https:\/\/cdn.shopify.com\/s\/files\/1\/0921\/7638\/4327\/files\/2-Merchant_Scrolls.mp3?v=1789068808',\n  'https:\/\/cdn.shopify.com\/s\/files\/1\/0921\/7638\/4327\/files\/3-Moonring_Island.mp3?v=1789068816',\n  'https:\/\/cdn.shopify.com\/s\/files\/1\/0921\/7638\/4327\/files\/4-Broken_Amulet.mp3?v=1789068821'\n];\n\n\/\/ Optie B (optioneel): eigen titels opgeven. Als je dit invult, wordt dit gebruikt\n\/\/ i.p.v. de auto-labels. Voorbeeld:\n\/\/ const TRACK_TITLES = ['A1. Give Me A Second','A2. Paratoxical','B1. Sniper','B2. Flying Adder'];\nconst TRACK_TITLES = null;\n\/* ======= EINDE CONFIG ======= *\/\n\n(function(){\n  const root = document.getElementById('tracklist-ORBITWAX');\n  if(!root) return;\n\n  \/\/ Achtergrond instellen + subtiele lichte overlay\n  root.classList.add('bg-art');\n  const styleEl = document.createElement('style');\n  styleEl.textContent = `\n    #${root.id}.bg-art::before{background:url(${CSS.escape(COVER_URL)}) center\/cover no-repeat;\n      filter:grayscale(.05) contrast(1.05) saturate(1.05); transform:scale(1.02)}\n    #${root.id}.bg-art::after{background:linear-gradient(180deg, rgba(9,12,16,.40), rgba(9,12,16,.25));backdrop-filter:blur(.2px)}\n  `;\n  document.head.appendChild(styleEl);\n\n  \/\/ Helpers\n  const itemsUL = root.querySelector('.tracklist-list');\n  const btnPlayAll = root.querySelector('[data-action=\"play-all\"]');\n  const countEl = root.querySelector('.tracklist-count');\n  const player = root.querySelector('#player-ORBITWAX');\n  const announcer = root.querySelector('#ann-ORBITWAX');\n  const toast = root.querySelector('#toast-ORBITWAX');\n\n  const bar = root.querySelector('#progress-ORBITWAX');\n  const fill = bar.querySelector('.progress-fill');\n  const thumb = bar.querySelector('.progress-thumb');\n  const curEl = root.querySelector('.time .cur');\n  const durEl = root.querySelector('.time .dur');\n\n  \/\/ labels A1, A2, B1, B2, C1, ...\n  const side = i =\u003e 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'[Math.floor(i\/2)];\n  const num  = i =\u003e (i%2)+1;\n  const autoLabel = i =\u003e `${side(i)}${num(i)}`;\n\n  \/\/ Bouw de lijst\n  const items = TRACK_URLS.filter(Boolean).map((url, i) =\u003e {\n    const li = document.createElement('li');\n    li.className = 'tracklist-item';\n    li.tabIndex = 0;\n    li.dataset.src = url.trim();\n    const title = (TRACK_TITLES \u0026\u0026 TRACK_TITLES[i]) ? TRACK_TITLES[i] : `${autoLabel(i)}`;\n    li.innerHTML = `\u003cspan class=\"state\"\u003e▶\u003c\/span\u003e\u003cspan\u003e\u003cstrong\u003e${title}\u003c\/strong\u003e\u003c\/span\u003e`;\n    itemsUL.appendChild(li);\n    return li;\n  });\n\n  countEl.textContent = `(${items.length} ${items.length===1?'track':'tracks'})`;\n  if(items.length === 0){ itemsUL.innerHTML = '\u003cli class=\"tracklist-item\"\u003eNo previews yet.\u003c\/li\u003e'; return; }\n\n  \/\/ Audio control\n  let current = -1, playingAll = false, dragging = false;\n\n  function fmt(t){ if(!isFinite(t)) return '–:–'; const m = Math.floor(t\/60), s = Math.floor(t%60); return m+':' + (s\u003c10?'0'+s:s); }\n  function setActive(index){\n    items.forEach((el,i)=\u003e{ el.classList.toggle('active', i===index); el.querySelector('.state').textContent = (i===index \u0026\u0026 !player.paused) ? '⏸' : '▶'; });\n  }\n  function showToast(msg){ toast.textContent = msg; toast.style.display='block'; setTimeout(()=\u003etoast.style.display='none', 2200); }\n\n  function loadAndPlay(src, index){\n    player.pause();\n    player.removeAttribute('src');\n    player.src = src;\n    player.load();\n    const tryPlay = ()=\u003e player.play().then(()=\u003e{\n      setActive(index);\n      announcer.textContent = 'Playing ' + items[index].innerText.trim();\n    }).catch(()=\u003e showToast('Couldn’t start audio. Tap again.'));\n    if (player.readyState \u003e= 2) tryPlay();\n    else {\n      const onReady = ()=\u003e{ player.removeEventListener('canplay', onReady); tryPlay(); };\n      player.addEventListener('canplay', onReady);\n    }\n  }\n\n  function playIndex(index){\n    if(index\u003c0 || index\u003e=items.length) return;\n    const src = items[index].dataset.src;\n    if(!src) return;\n    if(index === current \u0026\u0026 !player.paused){ player.pause(); setActive(index); return; }\n    current = index;\n    loadAndPlay(src, index);\n  }\n\n  function updateProgress(){\n    const pct = player.duration ? (player.currentTime \/ player.duration) * 100 : 0;\n    fill.style.width = pct + '%'; thumb.style.left = pct + '%';\n    bar.setAttribute('aria-valuenow', Math.round(pct));\n    curEl.textContent = fmt(player.currentTime); durEl.textContent = fmt(player.duration);\n  }\n  function seekToClientX(x){\n    const r = bar.getBoundingClientRect(); let pct = (x - r.left)\/r.width; pct = Math.max(0,Math.min(1,pct));\n    if(player.duration){ player.currentTime = pct * player.duration; updateProgress(); }\n  }\n\n  \/\/ Events\n  items.forEach((el,i)=\u003e{\n    el.addEventListener('click', ()=\u003e playIndex(i));\n    el.addEventListener('keydown', e=\u003e{ if(e.key==='Enter'||e.key===' '){ e.preventDefault(); playIndex(i); }});\n  });\n\n  btnPlayAll.addEventListener('click', ()=\u003e{ playingAll=true; btnPlayAll.disabled=true; playIndex(0); });\n\n  player.addEventListener('loadedmetadata', updateProgress);\n  player.addEventListener('timeupdate', updateProgress);\n  player.addEventListener('play', ()=\u003e setActive(current));\n  player.addEventListener('pause', ()=\u003e setActive(current));\n  player.addEventListener('ended', ()=\u003e{\n    if(playingAll \u0026\u0026 current \u003c items.length-1){ playIndex(current+1); }\n    else { playingAll=false; btnPlayAll.disabled=false; setActive(current); }\n  });\n\n  \/\/ Progressbar interactie\n  bar.addEventListener('mousedown', e=\u003e{ dragging=true; seekToClientX(e.clientX); });\n  window.addEventListener('mousemove', e=\u003e{ if(dragging) seekToClientX(e.clientX); });\n  window.addEventListener('mouseup', ()=\u003e dragging=false);\n  bar.addEventListener('keydown', e=\u003e{\n    if(!player.duration) return;\n    if(e.key==='ArrowRight'){ player.currentTime = Math.min(player.duration, player.currentTime+5); updateProgress(); }\n    if(e.key==='ArrowLeft'){  player.currentTime = Math.max(0, player.currentTime-5); updateProgress(); }\n  });\n})();\n\u003c\/script\u003e\n\u003c!-- ======= \/ORBIT WAX - TRACKLIST TEMPLATE ======= --\u003e\n\n\u003cp\u003eIn a world where the sea had swallowed every shore, humanity lived upon small floating platforms, drifting like fallen leaves across an endless blue. Beneath the waves slept the ruins of the old world, silent and forgotten. One day, a young merchant sailor named Corvina found an ancient scroll showing a map to the mysterious Moonring Islands. The map also showed a turquoise stone and a silver ring. \u003c\/p\u003e\n\u003cp\u003eDriven by the promise of something beyond the endless horizon, Corvina sailed into unknown waters. Deep beneath the waves, she discovered a sunken lighthouse. At its heart lay the glowing turquoise stone. The moment her fingers touched it, the ocean trembled.\u003c\/p\u003e\n\u003cp\u003eFrom the darkness rose a magnificent turquoise sea dragon. ২ৗ্ৃ ২ৈ\u003c\/p\u003e\n\u003cp\u003e“The ocean keeps many secrets,” it whispered. “Find the Broken Amulet, and you will find what the world has lost.”  \u003c\/p\u003e\n\u003cp\u003eGuided by the dragon, Corvina descended into the ruins of an ancient city and found the Broken Amulet hidden among the shadows. When she repaired it, the sea began to retreat.\u003c\/p\u003e\n\u003cp\u003eSlowly, silently, something rose from beneath the waves. ˚₊‧꒰ა ໒꒱ ‧₊˚\u003c\/p\u003e\n\u003cp\u003eLand. \u003c\/p\u003e\n\u003cp\u003eFor the first time in centuries, Corvina stood beneath an open sky with solid earth beneath her feet.\u003c\/p\u003e\n\u003cp\u003eShe smiled as the waves whispered against the new shore.\u003c\/p\u003e\n\u003cp\u003eThe world had spent centuries searching for land.\u003c\/p\u003e\n\u003cp\u003eAnd at last, the land had found them.\u003c\/p\u003e\n\u003cp\u003e⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⠀⠀⠀⠀⠀⠀⠀⠀\u003cbr\u003e⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣤⣶⡋⠁⠀⠀⠀⠀⢀⣀⣀⡀\u003cbr\u003e⠀⠀⠀⠀⠀⠠⠒⣶⣶⣿⣿⣷⣾⣿⣿⣿⣿⣛⣋⣉⠀⠀\u003cbr\u003e⠀⠀⠀⠀⢀⣤⣞⣫⣿⣿⣿⡻⢿⣿⣿⣿⣿⣿⣦⡀⠀⠀\u003cbr\u003e⠀⠀⣶⣾⡿⠽⠿⠿⠿⠋⠈⠀⣸⣿⣿⣿⣿⣷⡈⠙⢆⠀\u003cbr\u003e⠀⠀⠉⠁⠀⠤⣤⣤⣤⣤⣶⣾⣿⣿⣿⣿⠿⣿⣷⠀⠀⠀\u003cbr\u003e⠀⠀⣠⣴⣾⣿⣿⣿⣿⣿⣿⣿⣿⡿⠟⠁⠀⢹⣿⠀⠀⠀\u003cbr\u003e⢠⣾⣿⣿⣿⣿⠟⠋⠉⠛⠋⠉⠁⣀⠀⠀⠀⠸⠃⠀⠀⠀\u003cbr\u003e⣿⣿⣿⣿⠹⣇⠀⠀⠀⠀⢀⡀⠀⢀⡙⢷⣦⣄⡀⠀⠀⠀\u003cbr\u003e⣍⢿⣿⣿⣷⣦⠤⠤⠀⠀⣠⣿⣶⣶⣿⣿⣿⣿⣿⣷⣄⡇\u003cbr\u003e⠈⠈⣿⡿⢿⣿⣿⣷⣿⣿⡿⢿⣿⣿⣁⡀⠀⠀⠉⢻⣿⣯\u003cbr\u003e⠀⠀⡟⠀⠀⠉⠛⠙⠻⢿⣦⡀⠙⠛⠯⠤⠄⠀⠀⠈⠈⣿\u003cbr\u003e⠀⠈⠀⠀⠀⠀⠀⠀⠀⠀⠈⠻⡆⠀⠀⠀⠀⠀⠀⠀⢀⠟\u003c\/p\u003e\n\u003cp\u003ewritten \u0026amp; produced by Matthias\u003cbr\u003emaster \u0026amp; lacquer by Marco Pellegrino\u003cbr\u003edistributed by OTG distribution\u003cbr\u003eartwork by Ugruvsmek\u003c\/p\u003e\n\u003cp\u003eVakum Records (VKM011)\u003cbr\u003e1x Vinyl 12\"\u003c\/p\u003e","brand":"Orbit Wax","offers":[{"title":"Default Title","offer_id":54964867498311,"sku":null,"price":16.99,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0921\/7638\/4327\/files\/Scherm_afbeelding_2026-09-10_om_21.32.27.png?v=1789068801","url":"https:\/\/orbitwax.com\/products\/matthias-atoll-map","provider":"Orbit Wax","version":"1.0","type":"link"}