immae1/.var.www.html.pihole.index.js

## .var.www.html.pihole.index.js
// on page load, search for & display a random gif matching your search term using the Giphy API and add them to the pihole blockpage
// thanks to the nealrs (github)
// immae1 2017

var x = "Pi-hole: A black hole for Internet advertisements."

document.addEventListener('DOMContentLoaded', function () {
        items = ["funny cats","dejay","nerd","beer"]; // tag array
        var item = items[Math.floor(Math.random()*items.length)];

        request = new XMLHttpRequest;
        request.open('GET', 'http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag='+item, true);

        request.onload = function() {
                if (request.status >= 200 && request.status < 400){
                        data = JSON.parse(request.responseText).data.image_url;
                        console.log(data);
                        document.getElementById("giphyme").innerHTML = '<center><img src = "'+data+'"  title="GIF via Giphy" width=70%></center>';
                } else {
                        console.log('reached giphy, but API returned an error');
                 }
        };

        request.onerror = function() {
                console.log('connection error');
        };

        request.send();
});


## .var.www.html.pihole.index.php
<!-- snip: this is not the full index.php! -->

<!DOCTYPE html>
<head>
        <meta charset='UTF-8'/>
        <title>Website Blocked</title>
        <link rel='stylesheet' href='http://pi.hole/pihole/blockingpage.css'/>
        <link rel='shortcut icon' href='http://pi.hole/admin/img/favicon.png' type='image/png'/>
        <meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no'/>
        <meta name='robots' content='noindex,nofollow'/>
        <script src="index.js"></script>
</head>
<body id="body">
<header>
        <h1><a href='/'>Website Blocked</a></h1>
</header>
<main>
<div>
        <span id="giphyme"></span>
<!-- snap: this is not the full index.php"!-->
	// on page load, search for & display a random gif matching your search term using the Giphy API and add them to the pihole blockpage
	// thanks to the nealrs (github)
	// immae1 2017

	var x = "Pi-hole: A black hole for Internet advertisements."

	document.addEventListener('DOMContentLoaded', function () {
	items = ["funny cats","dejay","nerd","beer"]; // tag array
	var item = items[Math.floor(Math.random()*items.length)];

	request = new XMLHttpRequest;
	request.open('GET', 'http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag='+item, true);

	request.onload = function() {
	if (request.status >= 200 && request.status < 400){
	data = JSON.parse(request.responseText).data.image_url;
	console.log(data);
	document.getElementById("giphyme").innerHTML = '<center><img src = "'+data+'" title="GIF via Giphy" width=70%></center>';
	} else {
	console.log('reached giphy, but API returned an error');
	}
	};

	request.onerror = function() {
	console.log('connection error');
	};

	request.send();
	});
	<!-- snip: this is not the full index.php! -->

	<!DOCTYPE html>
	<head>
	<meta charset='UTF-8'/>
	<title>Website Blocked</title>
	<link rel='stylesheet' href='http://pi.hole/pihole/blockingpage.css'/>
	<link rel='shortcut icon' href='http://pi.hole/admin/img/favicon.png' type='image/png'/>
	<meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no'/>
	<meta name='robots' content='noindex,nofollow'/>
	<script src="index.js"></script>
	</head>
	<body id="body">
	<header>
	<h1><a href='/'>Website Blocked</a></h1>
	</header>
	<main>
	<div>
	<span id="giphyme"></span>
	<!-- snap: this is not the full index.php"!-->