{"id":3549,"date":"2026-03-23T16:12:44","date_gmt":"2026-03-23T16:12:44","guid":{"rendered":"https:\/\/loteraise.com\/spin-the-wheel\/"},"modified":"2026-04-20T10:56:43","modified_gmt":"2026-04-20T10:56:43","slug":"spin-the-wheel","status":"publish","type":"page","link":"https:\/\/loteraise.com\/en\/spin-the-wheel\/","title":{"rendered":"spin the wheel"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3549\" class=\"elementor elementor-3549 elementor-3361\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0a15334 e-flex e-con-boxed e-con e-parent\" data-id=\"0a15334\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-30ee0df elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"30ee0df\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"loteraise-presentatie\"><div class=\"gold-bg\"><\/div><style>#loteraise-presentatie{\r\nposition:relative;\r\nwidth:100vw;\r\nmin-height:100vh;\r\nmargin-left:calc(50% - 50vw);\r\nfont-family:Arial,Helvetica,sans-serif;\r\ncolor:#fff;\r\noverflow:hidden;\r\n}\r\n\r\n.gold-bg{\r\nposition:fixed;\r\ninset:0;\r\nz-index:-1;\r\nbackground:\r\nradial-gradient(circle at 30% 20%, #fff6bf 0%, transparent 40%),\r\nradial-gradient(circle at 80% 10%, #ffe27a 0%, transparent 45%),\r\nlinear-gradient(135deg,#fff4b3 0%,#ffd700 25%,#f4c430 50%,#d4af37 75%,#b8860b 100%);\r\n}\r\n\r\n.wrap{\r\ndisplay:grid;\r\ngrid-template-columns:360px 1fr;\r\nmin-height:100vh;\r\n}\r\n\r\n.presenting .wrap{\r\ngrid-template-columns:1fr;\r\n}\r\n\r\n.sidebar{\r\nbackground:rgba(10,15,30,0.92);\r\npadding:24px;\r\noverflow:auto;\r\n}\r\n\r\n.presenting .sidebar{\r\ndisplay:none;\r\n}\r\n\r\ntextarea{\r\nwidth:100%;\r\nmin-height:220px;\r\nbackground:#020617;\r\ncolor:#fff;\r\nborder-radius:10px;\r\npadding:12px;\r\nborder:1px solid rgba(255,255,255,0.2);\r\n}\r\n\r\n.controls{\r\ndisplay:grid;\r\ngrid-template-columns:1fr 1fr;\r\ngap:10px;\r\nmargin-top:12px;\r\n}\r\n\r\nbutton{\r\nborder:0;\r\npadding:12px;\r\nborder-radius:10px;\r\nfont-weight:700;\r\ncursor:pointer;\r\n}\r\n\r\n.btn-blue{background:#2563eb;color:#fff;}\r\n.btn-dark{background:#334155;color:#fff;}\r\n.btn-red{background:#dc2626;color:#fff;}\r\n\r\n.main{\r\ndisplay:flex;\r\nalign-items:center;\r\njustify-content:center;\r\nmin-height:100vh;\r\nposition:relative;\r\n}\r\n\r\n.wheel-stage{\r\nposition:relative;\r\nwidth:min(78vh,78vw,820px);\r\nheight:min(78vh,78vw,820px);\r\n}\r\n\r\n.wheel{\r\nwidth:100%;\r\nheight:100%;\r\nborder-radius:50%;\r\nborder:18px solid #fff;\r\nbackground:conic-gradient(\r\n#f59e0b 0deg 30deg,\r\n#22c55e 30deg 60deg,\r\n#3b82f6 60deg 90deg,\r\n#ef4444 90deg 120deg,\r\n#a855f7 120deg 150deg,\r\n#14b8a6 150deg 180deg,\r\n#fbbf24 180deg 210deg,\r\n#84cc16 210deg 240deg,\r\n#06b6d4 240deg 270deg,\r\n#f97316 270deg 300deg,\r\n#10b981 300deg 330deg,\r\n#e11d48 330deg 360deg\r\n);\r\nbox-shadow:0 0 0 14px rgba(255,255,255,0.25),0 30px 80px rgba(0,0,0,0.4);\r\ntransition:transform 5s cubic-bezier(.12,.82,.16,1);\r\ncursor:pointer;\r\ntouch-action:manipulation;\r\n-webkit-tap-highlight-color:transparent;\r\n}\r\n\r\n.pointer{\r\nposition:absolute;\r\ntop:-10px;\r\nleft:50%;\r\ntransform:translateX(-50%);\r\nborder-left:25px solid transparent;\r\nborder-right:25px solid transparent;\r\nborder-bottom:60px solid #fff;\r\npointer-events:none;\r\n}\r\n\r\n.winner-card{\r\nposition:absolute;\r\ntop:40px;\r\nleft:50%;\r\ntransform:translateX(-50%);\r\ntext-align:center;\r\nz-index:5;\r\npointer-events:none;\r\n}\r\n\r\n.winner-name{\r\nfont-size:clamp(36px,5vw,90px);\r\nfont-weight:900;\r\ntext-shadow:0 8px 30px rgba(0,0,0,.7);\r\nopacity:0;\r\ntransition:0.4s;\r\n}\r\n\r\n.winner-name.show{\r\nopacity:1;\r\n}\r\n\r\n.confetti{\r\nposition:fixed;\r\ntop:-20px;\r\nwidth:12px;\r\nheight:20px;\r\nz-index:9999;\r\npointer-events:none;\r\nanimation:fall linear forwards;\r\n}\r\n\r\n@keyframes fall{\r\n0%{transform:translateY(-10vh) rotate(0deg);}\r\n100%{transform:translateY(110vh) rotate(720deg);}\r\n}\r\n\r\n<\/style><div class=\"wrap\"><aside class=\"sidebar\"><h1>Loterij Presentatie<\/h1><p>Plak Naam ; Prijs<\/p><textarea id=\"dataInput\"><\/textarea><div class=\"controls\"><button id=\"loadBtn\" class=\"btn-blue\">Lijst laden<\/button><button id=\"presentBtn\" class=\"btn-dark\">Presentatiemodus<\/button><button id=\"editBtn\" class=\"btn-blue\">Bewerken<\/button><button id=\"resetBtn\" class=\"btn-red\">Reset<\/button><\/div><div id=\"status\">Nog niets geladen<\/div><\/aside><main class=\"main\"><div class=\"wheel-stage\"><div class=\"pointer\"><\/div><div class=\"wheel\" id=\"wheel\" role=\"button\" tabindex=\"0\" aria-label=\"Draai rad\"><\/div><\/div><div class=\"winner-card\"><div class=\"winner-name\" id=\"winnerName\"><\/div><\/div><\/main><\/div><script>(function(){\r\n\r\nconst root=document.getElementById(\"loteraise-presentatie\")\r\n\r\nconst state={\r\nitems:[],\r\nindex:0,\r\nrotation:0,\r\nspinning:false,\r\naudioCtx:null\r\n}\r\n\r\nconst dataInput=root.querySelector(\"#dataInput\")\r\nconst wheel=root.querySelector(\"#wheel\")\r\nconst winnerName=root.querySelector(\"#winnerName\")\r\nconst status=root.querySelector(\"#status\")\r\nconst loadBtn=root.querySelector(\"#loadBtn\")\r\nconst presentBtn=root.querySelector(\"#presentBtn\")\r\nconst editBtn=root.querySelector(\"#editBtn\")\r\nconst resetBtn=root.querySelector(\"#resetBtn\")\r\n\r\nfunction parse(line){\r\nlet p=line.split(\";\")\r\nif(p.length<2)p=line.split(\"\\t\")\r\nif(p.length<2)return null\r\nreturn{naam:p[0].trim(),prijs:p.slice(1).join(\" \").trim()}\r\n}\r\n\r\nfunction load(){\r\nlet rows=[]\r\ndataInput.value.split(\"\\n\").forEach(l=>{\r\nlet r=parse(l)\r\nif(r)rows.push(r)\r\n})\r\nstate.items=rows\r\nstate.index=0\r\nstatus.textContent=rows.length+\" winnaars geladen\"\r\n}\r\n\r\nfunction audio(){\r\nif(!state.audioCtx){\r\nstate.audioCtx=new(window.AudioContext||window.webkitAudioContext)()\r\n}\r\nreturn state.audioCtx\r\n}\r\n\r\nfunction rattle(sec){\r\n\r\nlet ctx=audio()\r\n\r\nif(ctx.state===\"suspended\"){\r\nctx.resume()\r\n}\r\n\r\nlet t=ctx.currentTime\r\nlet end=t+sec\r\n\r\nlet interval=0.03\r\nlet freq=200\r\n\r\nwhile(t<end){\r\n\r\nlet o=ctx.createOscillator()\r\nlet g=ctx.createGain()\r\n\r\no.type=\"square\"\r\no.frequency.setValueAtTime(freq,t)\r\n\r\ng.gain.setValueAtTime(0.001,t)\r\ng.gain.exponentialRampToValueAtTime(0.05,t+0.005)\r\ng.gain.exponentialRampToValueAtTime(0.001,t+0.04)\r\n\r\no.connect(g).connect(ctx.destination)\r\n\r\no.start(t)\r\no.stop(t+0.05)\r\n\r\nt+=interval\r\n\r\ninterval=Math.min(0.22,interval*1.07)\r\nfreq=Math.max(70,freq*0.985)\r\n}\r\n\r\n}\r\n\r\nfunction confetti(){\r\n\r\nlet colors=[\"#fff\",\"#ffd700\",\"#22c55e\",\"#3b82f6\",\"#ef4444\"]\r\n\r\nfor(let i=0;i<140;i++){\r\n\r\nlet d=document.createElement(\"div\")\r\nd.className=\"confetti\"\r\n\r\nd.style.left=Math.random()*100+\"vw\"\r\nd.style.background=colors[Math.floor(Math.random()*colors.length)]\r\nd.style.animationDuration=2+Math.random()*3+\"s\"\r\n\r\ndocument.body.appendChild(d)\r\n\r\nsetTimeout(()=>d.remove(),5000)\r\n\r\n}\r\n\r\n}\r\n\r\nfunction next(){\r\n\r\nif(state.spinning)return\r\nif(!state.items.length){\r\nstatus.textContent=\"Laad eerst een lijst met winnaars\"\r\nreturn\r\n}\r\n\r\nif(state.index>=state.items.length){\r\nstatus.textContent=\"Alle winnaars zijn al getoond\"\r\nreturn\r\n}\r\n\r\nstate.spinning=true\r\nwinnerName.classList.remove(\"show\")\r\n\r\nstate.rotation+=360*(6+Math.random()*3)\r\nwheel.style.transform=\"rotate(\"+state.rotation+\"deg)\"\r\n\r\nrattle(5)\r\n\r\nsetTimeout(()=>{\r\n\r\nlet w=state.items[state.index]\r\nwinnerName.textContent=w.naam+\" - \"+w.prijs\r\nwinnerName.classList.add(\"show\")\r\n\r\nconfetti()\r\n\r\nstate.index++\r\nstate.spinning=false\r\n\r\nif(state.index<state.items.length){\r\nstatus.textContent=state.index+\" van \"+state.items.length+\" winnaars getoond\"\r\n}else{\r\nstatus.textContent=\"Klaar. Alle winnaars zijn getoond\"\r\n}\r\n\r\n},5000)\r\n\r\n}\r\n\r\nfunction spinFromTap(e){\r\ne.preventDefault()\r\nnext()\r\n}\r\n\r\nloadBtn.onclick=load\r\npresentBtn.onclick=()=>root.classList.add(\"presenting\")\r\neditBtn.onclick=()=>root.classList.remove(\"presenting\")\r\nresetBtn.onclick=()=>location.reload()\r\n\r\nwheel.addEventListener(\"click\",spinFromTap)\r\nwheel.addEventListener(\"touchstart\",spinFromTap,{passive:false})\r\nwheel.addEventListener(\"pointerdown\",spinFromTap)\r\n\r\nwheel.addEventListener(\"keydown\",e=>{\r\nif(e.key===\"Enter\"||e.key===\" \"){\r\ne.preventDefault()\r\nnext()\r\n}\r\n})\r\n\r\ndocument.addEventListener(\"keydown\",e=>{\r\nif(e.key===\"Enter\"||e.key===\" \"||e.key===\"ArrowRight\"){\r\nif(document.activeElement===dataInput)return\r\ne.preventDefault()\r\nnext()\r\n}\r\n})\r\n\r\n})()\r\n\r\n<\/script><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Loterij Presentatie Plak Naam ; Prijs Lijst ladenPresentatiemodusBewerkenResetNog niets geladen<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3549","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/loteraise.com\/en\/wp-json\/wp\/v2\/pages\/3549","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loteraise.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/loteraise.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/loteraise.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/loteraise.com\/en\/wp-json\/wp\/v2\/comments?post=3549"}],"version-history":[{"count":1,"href":"https:\/\/loteraise.com\/en\/wp-json\/wp\/v2\/pages\/3549\/revisions"}],"predecessor-version":[{"id":3550,"href":"https:\/\/loteraise.com\/en\/wp-json\/wp\/v2\/pages\/3549\/revisions\/3550"}],"wp:attachment":[{"href":"https:\/\/loteraise.com\/en\/wp-json\/wp\/v2\/media?parent=3549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}