<!DOCTYPE html>
<html lang='nl'>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
h2 {
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 26px;
text-transform: uppercase;
}
body {
margin: 0;
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 16px;
}
.container {
/*noinspection CssUnknownTarget*/
background-image: url("https://myprivacy-static.dpgmedia.net/consent/resources/backgrounds/bs.webp");
width: 100vw;
height: 100vh;
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
background-color: #f5f5f5;
}
@media only screen and (max-width: 768px) {
.container {
/*noinspection CssUnknownTarget*/
background-image: url("https://myprivacy-static.dpgmedia.net/consent/resources/backgrounds/medium/bs.webp");
}
}
@media only screen and (max-width: 600px) {
.container {
/*noinspection CssUnknownTarget*/
background-image: url("https://myprivacy-static.dpgmedia.net/consent/resources/backgrounds/small/bs.webp");
}
}
.modal {
position: fixed;
background-color: rgb(255, 255, 255);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-align: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 74vh;
z-index: 999;
pointer-events: auto;
transition: all 0.5s;
visibility: hidden;
box-shadow: 0 5px 15px rgba(25, 25, 25, 0.5);
max-width: 640px;
margin: 13vh auto;
}
.modal__header {
flex: 0 10%;
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
border-bottom: #b4b4b4 solid 1px;
min-height: 40px;
horiz-align: center;
}
.modal__header__logo > img {
height: 35px;
}
.modal__header__text {
margin-top: 9px;
height: 35px;
display: flex;
justify-content: center;
align-items: center;
}
.modal__body {
flex: 0 85%;
display: flex;
flex-flow: column wrap;
justify-content: space-evenly;
align-items: center;
}
.modal__body__logo {
flex: 0 30%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
.modal__body__logo > img {
min-height: 40px;
max-height: 86px;
max-width: 300px;
}
.modal__body__text {
flex: 0 60%
}
.spinner {
margin: 64px auto;
width: 72px;
}
.spinner__circle {
position: relative;
width: 72px;
height: 72px;
overflow: hidden;
background-color: #FFB12F;
border-radius: 100%;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
animation: spin 1.5s infinite linear;
}
.spinner__circle-inner, .spinner__circle-gradient {
position: absolute;
width: 60px;
height: 60px;
transform: translate(-50%, -50%);
}
.spinner__circle-inner {
top: 50%;
left: 50%;
background-color: #fff;
border-radius: 100%;
}
.spinner__circle-gradient {
top: -24px;
left: 6px;
background-color: #FFB12F;
background-image: -moz-linear-gradient(0deg, #FFB12F 0%, #fff 50%);
background-image: -webkit-linear-gradient(0deg, #FFB12F 0%, #fff 50%);
background-image: linear-gradient(0deg, #FFB12F 0%, #fff 50%);
transform: rotate(-45deg);
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
@media (max-width: 960px) {
.modal {
height: 100vh;
width: 100vw;
margin: 0;
max-width: none;
}
.modal__body {
padding: 0 10vw;
}
}
</style>
<title>DPG Media Privacy Gate</title>
<!-- Google Tag Manager -->
<script>(function (w, d, s, l, i) {
w[l] = w[l] || []
w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-NT4WR7C');</script>
<!-- End Google Tag Manager -->
<script type="text/javascript">
window.cmpProperties = {
baseUrl: 'https://www.bndestem.nl',
cmpCname: 'https://cmp.dpgmedia.nl',
language: 'nl',
consentType: 'TCF',
}
</script>
<script type="text/javascript">
function getCookie(name) {
const value = '; ' + document.cookie;
const parts = value.split('; ' + name + '=');
if (2 === parts.length) return parts.pop().split(';').shift();
}
function redirect() {
document.getElementById('message').style.visibility = 'visible';
try{
if(window.cmpProperties.baseUrl.includes('pzc.nl') || window.cmpProperties.baseUrl.includes('story.nl')) {
setTimeout(() => window.location.href = 'https://www.bndestem.nl/privacy-gate/accept-tcf2?redirectUri=%2Fcmlink%2F1.2018507&authId=0f57fbfa-fb11-411f-8000-420abc27075a', 500);
} else {
window.location.href = 'https://www.bndestem.nl/privacy-gate/accept-tcf2?redirectUri=%2Fcmlink%2F1.2018507&authId=0f57fbfa-fb11-411f-8000-420abc27075a';
}
} catch(e) {
window.location.href = 'https://www.bndestem.nl/privacy-gate/accept-tcf2?redirectUri=%2Fcmlink%2F1.2018507&authId=0f57fbfa-fb11-411f-8000-420abc27075a';
}
}
function handleError(error) {
console.error('SourcePoint error: ' + error)
redirect();
}
const authId = getCookie('authId');
window._privacy = [];
window._privacy.push(['functional', redirect]);
window._privacy.push(['error', handleError]);
</script>
<script type="text/javascript" src="https://myprivacy-static.dpgmedia.net/consent.js"></script>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe title="gtm" src="https://www.googletagmanager.com/ns.html?id=GTM-NT4WR7C"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<div class="container">
<div id="message" class="modal">
<div class="modal__header">
<div class="modal__header__logo">
<img src="https://myprivacy-static.dpgmedia.net/consent/resources/logos/logo-dpgmedia.svg" alt="dpg media logo"/>
</div>
<div class="modal__header__text">
<span>Privacy</span>
</div>
</div>
<div class="modal__body">
<div class="modal__body__logo"><img src="https://myprivacy-static.dpgmedia.net/consent/resources/logos/logo-bndestem.svg" alt="BN DeStem"></div>
<div class="modal__body__text">
<div class="spinner">
<div class="spinner__circle">
<div class="spinner__circle-gradient"></div>
<div class="spinner__circle-inner"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>