<!DOCTYPE html>
<html>
<body onLoad='' background='http://img2.findthebest.com/sites/default/files/2307/media/images/t2/Light_Sky_Blue_429603_i0.png'>
<div id='meter_container'>
<div id='stick'></div>
<div id='onoff'>OFF</div>
<div id='scale' style=''>
<div id='one' class='scalee' style='left:0;background-color:#FFCCCC'></div>
<div id='two' class='scalee' style='left:100px;background-color:#FF9999'></div>
<div id='three' class='scalee' style='left:200px;background-color:#FF6666'></div>
<div id='four' class='scalee' style='left:300px;background-color:#FF3333'></div>
<div id='five' class='scalee' style='left:400px;background-color:#FF0000'></div>
</div>
<input type='text' id='name'>
</div>
<img src='http://image.spreadshirt.com/image-server/v1/designs/10494533,width=178,height=178/I-Love-Gays.png' id='head' style=''>
<canvas id='graph' style='border:1px solid;background-color:yellow' width='400' height='180'></canvas>
<style>
#meter_container
{
width:500px;
height:210px;
position:absolute;
top:0;left:0;bottom:0;right:0;
border:1px solid;
margin:auto;
transition:opacity 0.4s;
}
#stick
{
width:1px;
height:200px;
position:absolute;
left:50%;
border:2px solid;
background-color:black;
-webkit-transform-origin: bottom left;
transition:0.2s;
border-radius:50% 50% 0 0;
}
#scale
{
width:500px;
height:10px;
position:relative;
left:0;
z-index:-1;
}
.scalee
{
width:100px;
height:10px;
position:absolute;
text-align:center;
font-size:85%;
font-family: Century Gothic, sans-serif;
transition:height 0.4s;
}
#name
{
width:500px;
height:20px;
position:absolute;
border:1px solid;
left:0;
top:-30px;
text-align:center;
font-family: Century Gothic, sans-serif;
}
#head
{
width:200px;
height:200px;
position:absolute;
right:0;left:0;margin:auto;
}
#state
{
width:100px;
height:50px;
position:absolute;
right:0;left:0;margin:auto;
top:-100px;
font-size:120%;
font-family: Century Gothic, sans-serif;
}
#onoff
{
width:80px;
height:20px;
background-color:red;
box-shadow:1px 1px 5px #888888;
text-align:center;
font-size:105%;
font-color:white;
font-family: Tahoma, Geneva, sans-serif;
color:white;
border-color:black;
padding:5px;
cursor:pointer;
border-radius:20px;
vertical-align:middle;
transition:background-color 2s;
position:absolute;
top:-80px;
left:210px;
}
#onoff:active
{
background-color:#FF66FF;
}
</style>
<script>
var started = false;
var go = false;
var index = 0;
var obj;
var objt;
var objtt;
var amt;
var c = 0;
function start()
{
var n = document.getElementById('name').value;
var amount = Math.floor(Math.random() * (90 - (-90) + 1)) + (-90);
var stick = document.getElementById('stick');
if(n == 'Janci' || n == 'janci' || n == 'Janči' || n == 'janči')
amount = 90;
if(n == 'Drew')
amount = -90;
amt = amount;
setupg(10,10);
stick.style.webkitTransform = 'rotate('+amount+'deg)';
obj=setInterval(function dynamic()
{
var slightmove = Math.floor(Math.random() * (1 - (10) + 1)) + (10);
stick.style.webkitTransform = 'rotate('+(amount+slightmove)+'deg)';
setTimeout(function back()
{
stick.style.webkitTransform = 'rotate('+(amount-slightmove)+'deg)';
},200);
},400);
}
function randomize(min,max)
{
return Math.floor(Math.random() * (max - (min) + 1)) + (min);
}
document.getElementById('onoff').onmousedown = function(e)
{
objt = setTimeout(function enough(){
if(!started)
{
start();
started = true;
document.getElementById('one').style.height = 210+'px';
setTimeout(function go(){document.getElementById('two').style.height = 210+'px'},100);;
setTimeout(function go(){document.getElementById('three').style.height = 210+'px'},200);;
setTimeout(function go(){document.getElementById('four').style.height = 210+'px'},300);;
setTimeout(function go(){document.getElementById('five').style.height = 210+'px'},400);;
document.getElementById('one').innerHTML = 'Hetero';
document.getElementById('two').innerHTML = 'Sometimes thinks about men';
document.getElementById('three').innerHTML = 'Touches men too usually';
document.getElementById('four').innerHTML = 'Kisses men';
document.getElementById('five').innerHTML = "Gay'o fella";
document.getElementById('onoff').innerHTML = 'ON';
document.getElementById('onoff').style.backgroundColor = '#FF66FF';
return;
}
},2000);
}
document.getElementById('onoff').onmouseup = function(e)
{
clearInterval(objt);
}
function setupg(bot,gap)
{
var g = document.getElementById('graph');
var ctx = g.getContext('2d');
var boat = g.height - bot;
var up = (90 - amt) - bot;
ctx.strokeStyle = '#ff0000';
ctx.lineWidth = 2;
ctx.fillText('Graph beta',20,20);
ctx.fillRect(g.width-5,up-5,5,5);
ctx.beginPath();
ctx.moveTo(0,boat);
ctx.lineTo(gap/2,up);
ctx.lineTo(gap,boat);
ctx.lineTo(g.width,boat);
ctx.stroke();
objtt = setInterval(function move()
{
c = c + 10;
g.width = g.width;
ctx.strokeStyle = '#ff0000';
ctx.fillText('Graph beta',20,20);
ctx.fillRect(g.width-5,up-5,5,5);
ctx.lineWidth = 2;
ctx.moveTo(0,boat);
ctx.lineTo(c,boat);
ctx.lineTo(gap/2+c,up);
ctx.lineTo((gap)+c,boat);
ctx.lineTo(g.width,boat);
ctx.stroke();
if(c >= g.width+1)
{
clearInterval(objtt);
c=0;
setupg(10,10);
}
},100);
}
</script>
</body>
</html>
Comments