Skip to content

Instantly share code, notes, and snippets.

@Maasik

Maasik/index.html

Forked from anonymous/index.html
Created November 11, 2016 16:50
Show Gist options
  • Save Maasik/6405ca93df171671f534baccb44859ef to your computer and use it in GitHub Desktop.
Save Maasik/6405ca93df171671f534baccb44859ef to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Elections 2016</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body{
margin: 0;
}
#wrap{
position: relative;
margin: 0px auto;
width: 1280px;
height: 720px;
}
.cover{
padding: 20px 80px;
position: absolute;
width: 1280px;
height: 720px;
top: 0;
left: 0;
z-index: 10;
}
h1{
font-size: 42px;
text-transform: uppercase;
text-align: center;
color: #fff;
font-family: "Helvetica Neue", Helvetica, sans-serif;
margin: 0 0 25px 0;
}
.blur{
background-color: gray;
opacity: .8;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.title{
background: url('title-bg.png') top left no-repeat;
}
.avatar img{
display: block;
border-radius: 50%;
width: 350px;
height: 350px;
margin: 0 auto;
}
.hilary, .trump{
display: inline-block;
width: 45%;
background: url(blur.png) top left no-repeat;
padding: 15px 0;
}
.trump{
margin-left: 9%;
}
.meta img{
display: block;
width: 60px;
height: 60px;
margin: 20px auto;
}
.votes{
text-align: center;
color: #fff;
font-weight: 30px;
display: block;
width: 100%;
}
.ct, .ch{
width: 100%;
display: block;
color: #fff;
font-size: 40px;
text-align: center;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.v{
text-align: center;
font-weight: bold;
font-size: 16px;
text-align: center;
margin-top: 10px;
font-family: Verdana, Geneva, sans-serif;
color: #fff;
}
</style>
</head>
<body>
<div id="wrap">
<div class="cover">
<div class="title">
<h1>who will win the us <br> presidential elections 2016?</h1>
</div>
<div>
<div class="hilary">
<div class="avatar">
<img src="hillary.jpg" alt="">
</div>
<div class="meta">
<img src="tup.png" alt="" class="icon">
<div class="ch">411251</div>
<div class="v">VOTES</div>
</div>
</div>
<div class="trump">
<div class="avatar">
<img src="trump.jpg" alt="">
</div>
<div class="meta">
<img src="h.png" alt="" class="icon">
<div class="ct">398221</div>
<div class="v">VOTES</div>
</div>
</div>
</div>
</div>
<video src="loop.mp4" autoplay="true" loop="true"></video>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.6/lodash.min.js"></script>
<script>
"use strict";
var tc = 251,
hc = 221,
th = $('.ct'),
hh = $('.ch');
var hint,
tint;
function hilary(){
hint = setInterval(function(){
hc += 1;
// console.log(hc);
hh.text(hc);
clearInterval(hint);
hilary();
}, _.random(1, 15) * 1000);
}
function trump(){
tint = setInterval(function(){
// console.log(tc);
tc += 1;
th.text(hc);
clearInterval(tint);
trump();
}, _.random(1, 15) * 1000);
}
// trump();
// hilary();
setInterval(function(){
$.getJSON('https://graph.facebook.com/v2.8/?ids={post_id_goes_here}&fields=reactions.type(LIKE).limit(0).summary(total_count).as(reactions_like),reactions.type(LOVE).limit(0).summary(total_count).as(reactions_love)&access_token={application_access_token_goes_here},function(res){
th.text(9251 + res['{post_id_goes_here}'].reactions_love.summary.total_count);
hh.text(9221 + res['{post_id_goes_here}'].reactions_like.summary.total_count);
setInterval(function(){
th.text(parseInt(th.text()) + 1);
}, _.random(5, 25) * 1000);
setInterval(function(){
hh.text(parseInt(hh.text()) + 1);
}, _.random(5, 25) * 1000);
console.log(res);
});
}, 10000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment