<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Ankhbot Poll Overlay v1.0</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="block">
<div id="header">
<h1>This new poll overlay from Ankhbot looks ... ?</h1>
<div id="stats">
<div id="costs"><span>Costs: </span>10<span> Brainbugs</span></div>
<div id="multivote"><span>Multivote: </span>Yes <span>(Max 3 Votes)</span></div>
<div id="votes"><span>Total Votes: </span>999</div>
<div id="timer"><span>Time Left: </span>01:50:37</div>
</div>
</div>
<div id="content">
<div id="optionContainer">
<ul>
<li id="0" class="option">
<div class="optionName">Amazing <span>(!vote 0)</span>
<div id="_0" class="percentage">50%</div>
</div>
<div class="optionBar">
<span class="bgBar"> </span>
<span id="__0" class="progressBar" style="width:50%;"> </span>
</div>
</li>
<li id="1" class="option">
<div class="optionName">Okay <span>(!vote 0)</span>
<div class="percentage">0%</div>
</div>
<div class="optionBar">
<span class="bgBar"> </span>
<span class="progressBar" style="width:0%;"> </span>
</div>
</li>
<li id="2" class="option">
<div class="optionName">Bad <span>(!vote 0)</span>
<div class="percentage">25%</div>
</div>
<div class="optionBar">
<span class="bgBar"> </span>
<span class="progressBar" style="width:25%;"> </span>
</li>
<li id="3" class="option">
<div class="optionName">Never show it again <span>(!vote 0)</span>
<div class="percentage">25%</div>
</div>
<div class="optionBar">
<span class="bgBar"> </span>
<span class="progressBar" style="width:25%;"> </span>
</li>
<li id="3" class="option">
<div class="optionName">Never show it again <span>(!vote 0)</span>
<div class="percentage">25%</div>
</div>
<div class="optionBar">
<span class="bgBar"> </span>
<span class="progressBar" style="width:25%;"> </span>
</li>
<li id="3" class="option">
<div class="optionName">Never show it again <span>(!vote 0)</span>
<div class="percentage">25%</div>
</div>
<div class="optionBar">
<span class="bgBar"> </span>
<span class="progressBar" style="width:25%;"> </span>
</li>
</ul>
</div>
<div id="entryContainer">
<ul>
<li class="entry">wellbrained <span>2</span></li>
</ul>
</div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/wellbrained/ankhbot-poll-overlay-v10-jLOypG */
* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
ul, li {
list-style-type: none;
padding: 0;
margin: 0;
}
#container {
position: relative;
left: -750;
width: 40%;
height: auto;
font-family: "Segoe UI", sans-serif;
font-size: 12pt;
color: #fff;
}
#header {
background-color: #1e1e1e;
width: 100%;
border-radius: 3px;
position: relative;
left: 0;
padding: 10px;
margin: 0;
}
h1 {
font-size: 16pt;
color: #fff;
margin: 0;
}
#costs, #votes, #timer, #multivote {
font-size: 12pt;
font-weight: bold;
color: #e67e22;
display: inline;
padding-right: 15px;
text-transform: uppercase;
}
#stats span {
font-weight: normal;
color: #fff;
font-size: 10pt;
}
#content {
width: 100%;
position: relative;
top: 10px;
}
#optionContainer, #entryContainer {
display: inline-block;
border-radius: 3px;
position: relative;
float: left;
}
#optionContainer {
width: 66%;
margin-right: 1%;
background-color: none;
}
#optionContainer li {
background-color: rgba(30,30,30,1);
padding: 10px;
margin-bottom: 3px;
border-radius: 3px;
position: relative;
left: -750px;
opacity: 0;
font-size: 12pt;
}
.percentage {
float: right;
margin-right: 5px;
}
.optionBar {
text-align: center;
margin: 5px 5px -20px 0;
}
.progressBar, .bgBar {
display: block;
}
.progressBar {
position: relative;
top: -22px;
background-color: #e67e22;
border-radius: 3px;
}
.bgBar {
background-color: #555;
border: 1px solid #1e1e1e;
border-radius: 3px;
width: 100%;
text-align: center;
}
#entryContainer {
background-color: #1e1e1e;
padding: 10px;
width: 33%;
}
#entryContainer li {
width: 100%;
padding: 3px 10px;
font-size: 12pt;
color: #fff;
border-radius: 3px;
background-color: #e67e22;
}
#entryContainer li span {
float: right;
padding-right: 10px;
}
/*Downloaded from https://www.codeseek.co/wellbrained/ankhbot-poll-overlay-v10-jLOypG */
var tl = new TimelineLite();
tl.fromTo("#header", 2, {left: -1000}, {left: 0});
$("#optionContainer li").each(function(index, element) {
tl.to(element, 1.3, { left: 0 , opacity: 1 }, "-=.6");
});
tl.fromTo("#entryContainer", 2, {opacity: 0}, {opacity: 1});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
jQuery
v3.2.1
