Will display custom HTML if the country ISO code is in the blockedCountries
list
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
let blockedCountries = ["RU", "BY"];
async function handleRequest(request) {
let modifiedHeaders = new Headers()
modifiedHeaders.set('Content-Type', 'text/html')
modifiedHeaders.append('Pragma', 'no-cache')
let country = request.cf.country;
if (country != null && blockedCountries.includes(country)) {
return new Response(forbiddenPage, {headers: modifiedHeaders})
} else {
return fetch(request);
}
}
let forbiddenPage = `
<!DOCTYPE html>
<title>nope...</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');
html,body{
width: 100%;
height: 100%;
margin: 0;
}
*{
font-family: 'Press Start 2P', cursive;
box-sizing: border-box;
}
#app{
padding: 1rem;
background: #0057b7;
display: flex;
height: 100%;
justify-content: center;
align-items: center;
color: #ffd700;
font-size: 6rem;
flex-direction: column;
.txt {
font-size: 1.8rem;
}
}
@keyframes blink {
0% {opacity: 0}
49% {opacity: 0}
50% {opacity: 1}
100% {opacity: 1}
}
.txt {
text-align: center;
}
.blink {
animation-name: blink;
animation-duration: 1s;
animation-iteration-count: infinite;
}
</style>
<body>
<div id="app">
<div class="txt">GET THE FUCK OUT OF UKRAINE<span class="blink">_</span>
</div>
</div>
</body>
`;