Skip to content

Instantly share code, notes, and snippets.

@tmf

tmf/index.html

Created January 21, 2018 21:39
Show Gist options
  • Save tmf/733fe15e0113ab3280321ec046768f20 to your computer and use it in GitHub Desktop.
Save tmf/733fe15e0113ab3280321ec046768f20 to your computer and use it in GitHub Desktop.
Download ZIP
GPT refresh demo // source http://jsbin.com/tuveroq
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>GPT refresh demo</title>
<link href="http://web-components.kubernetes.doodle-test.com/styles.dev.css" rel="stylesheet"/>
<script async="async" src="https://www.googletagservices.com/tag/js/gpt.js"></script>
<style id="jsbin-css">
#leaderboard {
width: 320px;
height: 100px;
}
#rectangle {
width: 320px;
height: 250px;
}
#leaderboard, #rectangle {
display: flex;
justify-content: center;
align-items: center;
color: #c5cdd3;
background: #e2e6e9;
margin: auto;
}
.actions {
display: flex;
justify-content: center;
margin-bottom: 1em;
flex-wrap: wrap;
}
.actions button {
margin: 8px;
}
p {
text-align: center;
}
/* web-component patches */
.Page {
display: flex;
min-height: calc(100vh);
flex-direction: column;
}
.Pattern {
flex-grow: 1;
}
.Card {
max-width: 864px;
margin: auto;
}
</style>
</head>
<body>
<div class="Viewport">
<div class="Page">
<div class="Pattern">
<header class="Header">
<section class="Section Section--transparent">
<div class="Section-TextConstraint">
<nav class="Header-nav">
<ul class="Header-left">
<li class="Header-entry">
<a class="Link Link--white" href="/" target="_self" title="Doodle">
<svg class="Icon DoodleLogo" width="22px" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 18">
<g fill="currentColor">
<path d="M25.753 11.33c0-1.797-.784-3.387-2.696-3.387-1.911 0-2.695 1.59-2.695 3.387 0 1.774.784 3.363 2.695 3.363 1.912 0 2.696-1.59 2.696-3.363m-9.676 0c0-3.986 3.018-6.29 6.98-6.29 3.963 0 6.981 2.304 6.981 6.29 0 3.962-3.018 6.266-6.98 6.266-3.963 0-6.981-2.304-6.981-6.266M40.309 11.33c0-1.797-.784-3.387-2.695-3.387-1.913 0-2.696 1.59-2.696 3.387 0 1.774.783 3.363 2.696 3.363 1.911 0 2.695-1.59 2.695-3.363m-9.676 0c0-3.986 3.018-6.29 6.98-6.29 3.963 0 6.98 2.304 6.98 6.29 0 3.962-3.017 6.266-6.98 6.266-3.962 0-6.98-2.304-6.98-6.266M4.285 4.012h1.658c3.134 0 5 1.659 5 4.861 0 3.203-1.866 4.86-5 4.86H4.285v-9.72zm11.08 4.792c0-6.22-3.916-7.97-9.515-7.97H0v16.08h5.85c5.6 0 9.516-1.751 9.516-7.972l-.001-.069v-.069zM60.655.04H64.8v17.28h-4.146zM52.169 14.693c-1.912 0-2.696-1.59-2.696-3.363 0-1.797.784-3.387 2.696-3.387 1.912 0 2.695 1.59 2.695 3.387 0 1.774-.783 3.363-2.695 3.363zM55.003.041v5.447a8.745 8.745 0 0 0-2.834-.448c-3.962 0-6.98 2.304-6.98 6.29 0 3.962 3.018 6.266 6.98 6.266 1.019 0 2.1-.431 2.834-.894v.617h4.147V.041h-4.147zM70.557 10.176c.285-1.271 1.086-2.233 2.572-2.233s2.288.962 2.573 2.233h-5.145zm4.384-4.859a7.402 7.402 0 0 0-2.08-.277l-.088.002-.096-.002c-3.962 0-6.98 2.304-6.98 6.29 0 3.962 3.018 6.266 6.98 6.266.125 0 .248-.002.37-.007.122.005.245.007.368.007 1.544 0 3.065-.23 4.4-.76V13.91a7.768 7.768 0 0 1-3.663.922c-.53 0-1.007-.046-1.428-.141-1.19-.268-1.927-.94-2.097-2.164h8.931c.029-.17.053-.342.07-.52.02-.22.03-.445.03-.677 0-3.183-1.924-5.292-4.717-6.013z"></path>
</g>
</svg>
</a>
</li>
</ul>
<ul class="Header-right"></ul>
</nav>
<h1 class="u-titleL">GPT refresh demo</h1>
</div>
</section>
</header>
<section class="Section Section--transparent">
<div class="Section-TextConstraint">
<article class="Card">
<div class="Card-content">
<div class="actions">
<button id="refresh-1" class="Button Button--white" type="button">
<span class="Button-contentWrapper">Refresh leaderboard</span>
</button>
<button id="refresh-2" class="Button Button--white" type="button">
<span class="Button-contentWrapper">Refresh rectangle</span>
</button>
<button id="refresh-3" class="Button Button--white" type="button">
<span class="Button-contentWrapper">Refresh both</span>
</button>
<button id="console" class="Button Button--white" type="button">
<span class="Button-contentWrapper">Console</span>
</button>
</div>
<div id="leaderboard">
<svg class="Icon LoadingIcon" width="22px" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" stroke-width="4" stroke-dasharray="45 45" stroke="currentColor" fill="none"></circle>
</svg>
</div>
<p>Some content</p>
<div id="rectangle">
<svg class="Icon LoadingIcon" width="22px" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" stroke-width="4" stroke-dasharray="45 45" stroke="currentColor" fill="none"></circle>
</svg>
</div>
</div>
</article>
<p></p>
</div>
</section>
</div>
<footer class="Footer">
<aside class="Footer-bar">
<nav class="Footer-section Footer-section--left">
<a class="Link Link--white" href="https://doodle.com/terms-of-service" target="_blank">Terms and Conditions</a>
<a class="Link Link--white" href="https://doodle.com/imprint" target="_blank">Imprint</a>
<a class="Link Link--white" href="https://doodle.com/privacy-policy" target="_blank">Privacy</a>
</nav>
<section class="Footer-section Footer-section--center" aria-hidden="true">
<svg class="Icon DoodleLogo" width="22px" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 18">
<g fill="currentColor">
<path d="M25.753 11.33c0-1.797-.784-3.387-2.696-3.387-1.911 0-2.695 1.59-2.695 3.387 0 1.774.784 3.363 2.695 3.363 1.912 0 2.696-1.59 2.696-3.363m-9.676 0c0-3.986 3.018-6.29 6.98-6.29 3.963 0 6.981 2.304 6.981 6.29 0 3.962-3.018 6.266-6.98 6.266-3.963 0-6.981-2.304-6.981-6.266M40.309 11.33c0-1.797-.784-3.387-2.695-3.387-1.913 0-2.696 1.59-2.696 3.387 0 1.774.783 3.363 2.696 3.363 1.911 0 2.695-1.59 2.695-3.363m-9.676 0c0-3.986 3.018-6.29 6.98-6.29 3.963 0 6.98 2.304 6.98 6.29 0 3.962-3.017 6.266-6.98 6.266-3.962 0-6.98-2.304-6.98-6.266M4.285 4.012h1.658c3.134 0 5 1.659 5 4.861 0 3.203-1.866 4.86-5 4.86H4.285v-9.72zm11.08 4.792c0-6.22-3.916-7.97-9.515-7.97H0v16.08h5.85c5.6 0 9.516-1.751 9.516-7.972l-.001-.069v-.069zM60.655.04H64.8v17.28h-4.146zM52.169 14.693c-1.912 0-2.696-1.59-2.696-3.363 0-1.797.784-3.387 2.696-3.387 1.912 0 2.695 1.59 2.695 3.387 0 1.774-.783 3.363-2.695 3.363zM55.003.041v5.447a8.745 8.745 0 0 0-2.834-.448c-3.962 0-6.98 2.304-6.98 6.29 0 3.962 3.018 6.266 6.98 6.266 1.019 0 2.1-.431 2.834-.894v.617h4.147V.041h-4.147zM70.557 10.176c.285-1.271 1.086-2.233 2.572-2.233s2.288.962 2.573 2.233h-5.145zm4.384-4.859a7.402 7.402 0 0 0-2.08-.277l-.088.002-.096-.002c-3.962 0-6.98 2.304-6.98 6.29 0 3.962 3.018 6.266 6.98 6.266.125 0 .248-.002.37-.007.122.005.245.007.368.007 1.544 0 3.065-.23 4.4-.76V13.91a7.768 7.768 0 0 1-3.663.922c-.53 0-1.007-.046-1.428-.141-1.19-.268-1.927-.94-2.097-2.164h8.931c.029-.17.053-.342.07-.52.02-.22.03-.445.03-.677 0-3.183-1.924-5.292-4.717-6.013z"></path>
</g>
</svg>
</section>
<section class="Footer-section Footer-section--right">
<a class="Link Link--white" href="https://facebook.com/DoodleAG" target="_blank" title="Facebook">
<svg class="Icon" width="22px" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M13.49 21.256v-8.783h2.95l.44-3.424h-3.39V6.864c0-.991.276-1.667 1.697-1.667H17V2.135A24.232 24.232 0 0 0 14.359 2c-2.614 0-4.403 1.595-4.403 4.525v2.524H7v3.424h2.956v8.783h3.535z" fill="currentColor"></path>
</svg>
</a>
<a class="Link Link--white" href="https://twitter.com/doodletweet" target="_blank" title="Twitter">
<svg class="Icon" width="22px" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M23.455 4.26a10.451 10.451 0 0 1-2.413 2.504c.02.143.031.357.031.642 0 1.629-.305 3.237-.916 4.825a15.53 15.53 0 0 1-2.58 4.383c-1.11 1.333-2.556 2.412-4.338 3.237-1.781.825-3.73 1.237-5.848 1.237-2.627 0-5.09-.723-7.391-2.168.733.06 1.12.091 1.16.091 2.2 0 4.185-.692 5.956-2.077a4.687 4.687 0 0 1-2.795-.962 4.682 4.682 0 0 1-1.695-2.397 4.1 4.1 0 0 0 .917.092 4.44 4.44 0 0 0 1.282-.184 4.766 4.766 0 0 1-2.779-1.634c-.733-.865-1.1-1.878-1.1-3.038v-.062c.713.367 1.436.56 2.17.58C1.69 8.353.976 7.02.976 5.33c0-.835.214-1.65.642-2.443a14.053 14.053 0 0 0 4.413 3.573 12.96 12.96 0 0 0 5.512 1.466 6.404 6.404 0 0 1-.122-1.1c0-1.323.468-2.458 1.405-3.405.937-.947 2.067-1.42 3.39-1.42 1.385 0 2.565.52 3.543 1.558 1.018-.204 2.026-.601 3.023-1.192-.346 1.181-1.038 2.077-2.076 2.688a10.432 10.432 0 0 0 2.748-.794z"
fill="currentColor"></path>
</svg>
</a>
</section>
</aside>
</footer>
</div>
</div>
<script id="jsbin-javascript">
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
var leaderboardSlot, rectangleSlot;
googletag.cmd.push(function() {
googletag.pubads().enableSingleRequest();
googletag.pubads().disableInitialLoad();
googletag.pubads().setTargeting('adpreview', 'doodle-gpt-demo-2');
googletag.enableServices();
leaderboardSlot = googletag
.defineSlot(
'/46753895/int-doodle.com/outside-full-top/poll',
[320, 100],
'leaderboard'
)
.addService(googletag.pubads());
rectangleSlot = googletag
.defineSlot(
'/46753895/int-doodle.com/inside-full-pos1/poll',
[320, 250],
'rectangle'
)
.addService(googletag.pubads());
googletag.display('leaderboard');
googletag.display('rectangle');
googletag.pubads().refresh([leaderboardSlot, rectangleSlot]);
});
document
.getElementById('refresh-1')
.addEventListener('click', function() {
googletag.cmd.push(function() {
googletag.pubads().refresh([leaderboardSlot]);
});
});
document
.getElementById('refresh-2')
.addEventListener('click', function() {
googletag.cmd.push(function() {
googletag.pubads().refresh([rectangleSlot]);
});
});
document
.getElementById('refresh-3')
.addEventListener('click', function() {
googletag.cmd.push(function() {
googletag.pubads().refresh([rectangleSlot, leaderboardSlot]);
});
});
document
.getElementById('console')
.addEventListener('click', function() {
googletag.cmd.push(function() {
googletag.openConsole();
});
});
</script>
<script id="jsbin-source-css" type="text/css">#leaderboard {
width: 320px;
height: 100px;
}
#rectangle {
width: 320px;
height: 250px;
}
#leaderboard, #rectangle {
display: flex;
justify-content: center;
align-items: center;
color: #c5cdd3;
background: #e2e6e9;
margin: auto;
}
.actions {
display: flex;
justify-content: center;
margin-bottom: 1em;
flex-wrap: wrap;
}
.actions button {
margin: 8px;
}
p {
text-align: center;
}
/* web-component patches */
.Page {
display: flex;
min-height: calc(100vh);
flex-direction: column;
}
.Pattern {
flex-grow: 1;
}
.Card {
max-width: 864px;
margin: auto;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
var leaderboardSlot, rectangleSlot;
googletag.cmd.push(function() {
googletag.pubads().enableSingleRequest();
googletag.pubads().disableInitialLoad();
googletag.pubads().setTargeting('adpreview', 'doodle-gpt-demo-2');
googletag.enableServices();
leaderboardSlot = googletag
.defineSlot(
'/46753895/int-doodle.com/outside-full-top/poll',
[320, 100],
'leaderboard'
)
.addService(googletag.pubads());
rectangleSlot = googletag
.defineSlot(
'/46753895/int-doodle.com/inside-full-pos1/poll',
[320, 250],
'rectangle'
)
.addService(googletag.pubads());
googletag.display('leaderboard');
googletag.display('rectangle');
googletag.pubads().refresh([leaderboardSlot, rectangleSlot]);
});
document
.getElementById('refresh-1')
.addEventListener('click', function() {
googletag.cmd.push(function() {
googletag.pubads().refresh([leaderboardSlot]);
});
});
document
.getElementById('refresh-2')
.addEventListener('click', function() {
googletag.cmd.push(function() {
googletag.pubads().refresh([rectangleSlot]);
});
});
document
.getElementById('refresh-3')
.addEventListener('click', function() {
googletag.cmd.push(function() {
googletag.pubads().refresh([rectangleSlot, leaderboardSlot]);
});
});
document
.getElementById('console')
.addEventListener('click', function() {
googletag.cmd.push(function() {
googletag.openConsole();
});
});
</script></body>
</html>
Raw
jsbin.tuveroq.css
#leaderboard {
width: 320px;
height: 100px;
}
#rectangle {
width: 320px;
height: 250px;
}
#leaderboard, #rectangle {
display: flex;
justify-content: center;
align-items: center;
color: #c5cdd3;
background: #e2e6e9;
margin: auto;
}
.actions {
display: flex;
justify-content: center;
margin-bottom: 1em;
flex-wrap: wrap;
}
.actions button {
margin: 8px;
}
p {
text-align: center;
}
/* web-component patches */
.Page {
display: flex;
min-height: calc(100vh);
flex-direction: column;
}
.Pattern {
flex-grow: 1;
}
.Card {
max-width: 864px;
margin: auto;
}
Raw
jsbin.tuveroq.js
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
var leaderboardSlot, rectangleSlot;
googletag.cmd.push(function() {
googletag.pubads().enableSingleRequest();
googletag.pubads().disableInitialLoad();
googletag.pubads().setTargeting('adpreview', 'doodle-gpt-demo-2');
googletag.enableServices();
leaderboardSlot = googletag
.defineSlot(
'/46753895/int-doodle.com/outside-full-top/poll',
[320, 100],
'leaderboard'
)
.addService(googletag.pubads());
rectangleSlot = googletag
.defineSlot(
'/46753895/int-doodle.com/inside-full-pos1/poll',
[320, 250],
'rectangle'
)
.addService(googletag.pubads());
googletag.display('leaderboard');
googletag.display('rectangle');
googletag.pubads().refresh([leaderboardSlot, rectangleSlot]);
});
document
.getElementById('refresh-1')
.addEventListener('click', function() {
googletag.cmd.push(function() {
googletag.pubads().refresh([leaderboardSlot]);
});
});
document
.getElementById('refresh-2')
.addEventListener('click', function() {
googletag.cmd.push(function() {
googletag.pubads().refresh([rectangleSlot]);
});
});
document
.getElementById('refresh-3')
.addEventListener('click', function() {
googletag.cmd.push(function() {
googletag.pubads().refresh([rectangleSlot, leaderboardSlot]);
});
});
document
.getElementById('console')
.addEventListener('click', function() {
googletag.cmd.push(function() {
googletag.openConsole();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment