Last active
August 14, 2021 06:17
-
-
Save arscan/7046646 to your computer and use it in GitHub Desktop.
Wargames Visualization
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<head> | |
<title>Github Wargames</title> | |
<link href="styles.css" media="all" rel="stylesheet" type="text/css" /> | |
<link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'> | |
<meta property="og:image" content="/img/github_wargames_screenshot.png" /> | |
<meta property="og:description" content="A visualization of all Github activity in the style of WarGames, the classic 80's coldwar movie" /> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script> | |
<script src="http://d3js.org/topojson.v1.min.js"></script> | |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> | |
<script src="streamwriter.js"></script> | |
<script src="/streamserver.v0.js"></script> | |
</head> | |
<body bgcolor="#000"> | |
<div id="container"> | |
<div id="left" class="column"> | |
<div id="leftmap" class="glowbox"> | |
<div id="leftmapoverlay"></div> | |
</div> | |
<div id="leftmiddle"> | |
<div class="smallwhite">USA</div> | |
<div class="smallwhite">EUROPE</div> | |
<div class="smallwhite">AUS/NZ</div> | |
<div class="bigred" id="usatotal">00000</div> | |
<div class="bigred" id="europetotal">00000</div> | |
<div class="bigred" id="australiatotal">00000</div> | |
</div> | |
<div id="leftbottom"> | |
<div id="leftbottom1" class="glowbox"> | |
<div id="leftbottom1overlay"></div> | |
</div> | |
<div id="leftbottom2" class="glowbox"> | |
<div class="texttitle"> | |
Listing Users | |
</div> | |
<div id="leftbottom2text"> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div id="center" class="column"> | |
<div id="centermap" class="glowbox"> | |
<div id="centermapoverlay">This is the overlay</div> | |
</div> | |
<div id="centermiddle"> | |
<div class="smallwhite">total</div> | |
<div class="smallwhite">events / min</div> | |
<div class="smallwhite">elapsed</div> | |
<div class="bigred" id="eventtotal">00000</div> | |
<div class="bigred" id="eventpermin">00000</div> | |
<div class="bigred" id="elapsedtime">00000</div> | |
</div> | |
<div id="centerbottom" class="glowbox"> | |
Welcome to a live <a href="http://github.com">Github</a> visualization in the style of the 80's cold war movie <a href="http://en.wikipedia.org/wiki/WarGames">WarGames</a>. | |
This is made with nodejs, socket.io, d3, and IRC (as the messaging infrastructure... yeah, really). Data is from <a href="http://github.com/timeline.json">github.com</a> and <a href="http://geonames.org">geonames.org</a>. | |
<br><br> | |
This is part of a larger *casual* general purpose streaming data platform I'm putting together. See | |
the <a href="http://github.com/arscan/streamed">Github repo</a> for information. | |
</div> | |
</div> | |
<div id="right" class="column"> | |
<div id="rightmap" class="glowbox"> | |
<div id="rightmapoverlay"></div> | |
</div> | |
<div id="rightmiddle"> | |
<div class="smallwhite">Identified</div> | |
<div class="smallwhite">Tweets</div> | |
<div class="smallwhite">Random</div> | |
<div class="bigred" id="identpercent">00000</div> | |
<div class="bigred" id="twitter">00000</div> | |
<div class="bigred" id="fancy2">00000</div> | |
</div> | |
<div id="rightbottom"> | |
<div id="rightbottom1" class="glowbox"> | |
<div class="texttitle"> | |
Listing Repos | |
</div> | |
<div id="rightbottom1text"> | |
</div> | |
</div> | |
<div id="rightbottom2" class="glowbox"> | |
<div class="texttitle"> | |
Listing Languages | |
</div> | |
<div id="rightbottom2text"> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div id="paused"> | |
Paused | |
</div> | |
</body> | |
<script src="scripts.js"></script> | |
<script type="text/javascript"> | |
// $.getJSON('http://cdn.api.twitter.com/1/urls/count.json?url=encodeURIComponent(document.URL)&callback=?', null, function (results) { | |
// alert("done " + results.count); | |
// }); | |
/* | |
function twitCount(data){ | |
alert(data.count); | |
} | |
*/ | |
// jsonparser1(); | |
</script> | |
<script> | |
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | |
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | |
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | |
})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); | |
ga('create', 'UA-4481396-3', 'robscanlon.com'); | |
ga('send', 'pageview'); | |
</script> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$("#centermapoverlay").streamwriter({enabled:false}); | |
$("#leftmapoverlay").streamwriter({enabled:false}); | |
$("#leftbottom1overlay").streamwriter({enabled:false}); | |
$("#rightmapoverlay").streamwriter({enabled:false}); | |
$("#rightbottom1text").streamwriter({enabled:false,charblock: 20, maxlines:7, timeout: 20}); | |
$("#rightbottom2text").streamwriter({enabled:false,maxlines:7, charblock: 20, timeout: 20}); | |
$("#leftbottom2text").streamwriter({enabled:false,maxlines:7, charblock: 20, timeout: 20}); | |
var width = 500, | |
height = 300; | |
var eventcount = 0, | |
australiacount = 0, | |
europecount=0, | |
usacount=0, | |
identyes=0; | |
var starttime = new Date(); | |
var paused = false; | |
$('#leftbottom2').mouseenter(function() { | |
paused = true; | |
$('#paused').css('display','inherit'); | |
}); | |
$('#leftbottom2').mouseleave(function() { | |
$('#paused').css('display','none'); | |
paused = false; | |
}); | |
$('#rightbottom1').mouseenter(function() { | |
paused = true; | |
$('#paused').css('display','inherit'); | |
}); | |
$('#rightbottom1').mouseleave(function() { | |
$('#paused').css('display','none'); | |
paused = false; | |
}); | |
$('#rightbottom2').mouseenter(function() { | |
paused = true; | |
$('#paused').css('display','inherit'); | |
}); | |
$('#rightbottom2').mouseleave(function() { | |
$('#paused').css('display','none'); | |
paused = false; | |
}); | |
var centerprojection = d3.geo.mercator() //d3.geo.mercator() | |
.scale(80) | |
.translate([width / 2, height / 2]) | |
.precision(.1); | |
var centerpath = d3.geo.path() | |
.projection(centerprojection); | |
var leftprojection = d3.geo.mercator() //d3.geo.mercator() | |
.scale(400) | |
.translate([1.85*width, 1.45 * height]) | |
.precision(.1); | |
var leftbotprojection = d3.geo.mercator() //d3.geo.mercator() | |
.scale(197) | |
.translate([-385,0]) | |
.precision(.1); | |
var leftpath = d3.geo.path() | |
.projection(leftprojection); | |
var leftbotpath = d3.geo.path() | |
.projection(leftbotprojection); | |
var rightprojection = d3.geo.mercator() | |
.scale(400) | |
.translate([.3*width, 1.8*height ]) | |
.precision(.1); | |
var rightpath = d3.geo.path() | |
.projection(rightprojection); | |
var svg = d3.select("#centermap").append("svg") | |
.attr("width", width) | |
.attr("height", height-12); | |
var svgleft = d3.select("#leftmap").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
var svgleftbottom = d3.select("#leftbottom1").append("svg") | |
.attr("width", 230) | |
.attr("height", 200); | |
var svgright = d3.select("#rightmap").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
d3.json("world_small.json", function(error, world) { | |
svg.insert("path") | |
.datum(topojson.feature(world, world.objects.ne_110m_coastline)) | |
.attr("class", "land") | |
.attr("d", centerpath); | |
svg.insert("path") | |
.datum(topojson.feature(world, world.objects.russia)) | |
.attr("class", "russia") | |
.attr("d", centerpath); | |
svg.insert("path") | |
.datum(topojson.feature(world, world.objects.usa)) | |
.attr("class", "usa") | |
.attr("d", centerpath); | |
}); | |
d3.json("europe_small.json", function(error, world) { | |
svgright.insert("path") | |
.datum(topojson.feature(world, world.objects.europe)) | |
.attr("class", "land") | |
.attr("d", rightpath); | |
}); | |
d3.json("wargames_usa.json", function(error, world) { | |
svgleft.insert("path") | |
.datum(topojson.feature(world, world.objects.usa)) | |
.attr("class", "usa") | |
.attr("d", leftpath); | |
}); | |
d3.json("australia_small.json", function(error, world) { | |
svgleftbottom.insert("path") | |
.datum(topojson.feature(world, world.objects.australia)) | |
.attr("class", "land") | |
.attr("d", leftbotpath); | |
}); | |
var pad = function(n, width, z) { | |
z = z || '0'; | |
n = n + ''; | |
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n; | |
} | |
var updateStats = function(){ | |
var elapsed = parseInt((new Date() - starttime)/1000); | |
$("#elapsedtime").text(pad(elapsed,5)); | |
$("#eventpermin").text(pad(parseInt(60*eventcount/elapsed),5)); | |
$("#eventtotal").text(pad(eventcount,5)); | |
$("#identpercent").text(pad(parseInt(100*identyes/eventcount),2) + "%"); | |
$("#usatotal").text(pad(usacount,5)); | |
$("#europetotal").text(pad(europecount,5)); | |
$("#australiatotal").text(pad(australiacount,5)); | |
if(Math.random()<.1){ | |
$("#fancy2").text(pad(parseInt(Math.random()*10000),5)); | |
} | |
} | |
var updateStatsLoop = function(){ | |
setTimeout(updateStatsLoop,1000); | |
updateStats(); | |
} | |
updateStatsLoop(); | |
var updateTwitterLoop = function(){ | |
setTimeout(updateTwitterLoop,100000); | |
$.getJSON('http://cdn.api.twitter.com/1/urls/count.json?url=' + encodeURIComponent(document.URL) + '&callback=?', null, function (results) { | |
$("#twitter").text(pad(results.count,5)); | |
}); | |
} | |
updateTwitterLoop(); | |
d3.select(self.frameElement).style("height", height + "px"); | |
StreamServer.onMessage(function (datain) { | |
var chunks = datain.message.split("*"); | |
eventcount++; | |
console.log(datain); | |
var data = {}; | |
if(datain.location){ | |
data.location = datain.location.name; | |
if(datain.location.lat && datain.location.lng){ | |
data.latlng = {"lat": datain.location.lat, "lng": datain.location.lng}; | |
} | |
} | |
data.actor = chunks[3].trim(); | |
data.repo = chunks[0].trim(); | |
data.type = chunks[5].trim(); | |
data.url = datain[3]; | |
setTimeout(function(){ | |
if(paused) return; | |
/* | |
$("#leftbottom2").prepend("<a href='" + data.url + "'>" + data.actor + "</a><br/>"); | |
$("#rightbottom1").prepend("<a href='" + data.url + "'>" + data.repo + "</a><br/>"); | |
$("#rightbottom2").prepend("<a href='" + data.url + "'>" + data.type + "</a><br/>"); | |
*/ | |
$("#leftbottom2text").streamwriter("write", data.actor); | |
$("#rightbottom1text").streamwriter("write", data.repo); | |
$("#rightbottom2text").streamwriter("write", data.type); | |
if(!data.latlng){ | |
// $("#centerbottom table").prepend("<tr><td><a href='" + data.url + "'>" + data.repo + "</a></td><td class='actor'><a href='http://github.com/" + data.actor + "'>" + data.actor + "</a></td><td> </td></tr>\n"); | |
} else { | |
identyes++; | |
// $("#centerbottom table").prepend("<tr><td class='hit repo'>" + data.repo + "</td><td class='actor hit'><a href='http://github.com/" + data.actor + "'>" + data.actor + "</a></td><td class='loc hit'>" + data.location + "</td></tr>\n"); | |
centercoordinates = centerprojection([data.latlng.lng,data.latlng.lat]); | |
svg.append('svg:circle') | |
.attr('cx', centercoordinates[0]) | |
.attr('cy', centercoordinates[1]) | |
.attr('r', 0) | |
.style('opacity',0) | |
.attr('class','point') | |
.transition() | |
.duration(200) | |
.attr('r',50) | |
.style('opacity',1.0) | |
.transition() | |
.ease('linear') | |
.duration(500 + Math.random()*500) | |
.attr('r',2) | |
.style('opacity',1); | |
// $("#centermapoverlay").prepend(data.location + "<br/>"); | |
$("#centermapoverlay").streamwriter("write",data.location); | |
/* USA */ | |
if(data.latlng.lat < 50 && data.latlng.lat >24 && data.latlng.lng > -125 && data.latlng.lng < -66){ | |
usacount++; | |
leftcoordinates = leftprojection([data.latlng.lng,data.latlng.lat]); | |
svgleft.append('svg:circle') | |
.attr('cx', leftcoordinates[0]) | |
.attr('cy', leftcoordinates[1]) | |
.attr('r', 0) | |
.style('opacity',0) | |
.attr('class','point') | |
.transition() | |
.duration(200) | |
.attr('r',100) | |
.style('opacity',1.0) | |
.transition() | |
.ease('linear') | |
.duration(500 + Math.random()*500) | |
.attr('r',4) | |
.style('opacity',1); | |
//$("#leftmapoverlay").prepend(data.location + "<br/>"); | |
$("#leftmapoverlay").streamwriter("write",data.location); | |
} | |
/* europe */ | |
if(data.latlng.lat < 60 && data.latlng.lat > 35 && data.latlng.lng > -9 && data.latlng.lng < 40){ | |
europecount++; | |
rightcoordinates = rightprojection([data.latlng.lng,data.latlng.lat]); | |
svgright.append('svg:circle') | |
.attr('cx', rightcoordinates[0]) | |
.attr('cy', rightcoordinates[1]) | |
.attr('r', 0) | |
.style('opacity',0) | |
.attr('class','point') | |
.transition() | |
.duration(200) | |
.attr('r',100) | |
.style('opacity',1.0) | |
.transition() | |
.ease('linear') | |
.duration(500 + Math.random()*500) | |
.attr('r',4) | |
.style('opacity',1); | |
//$("#rightmapoverlay").prepend(data.location + "<br/>"); | |
$("#rightmapoverlay").streamwriter("write",data.location); | |
} | |
/* AUS / NZ */ | |
if(data.latlng.lat < -10 && data.latlng.lat > -50 && data.latlng.lng > 115 && data.latlng.lng < 180){ | |
australiacount++; | |
leftbottomcoordinates = leftbotprojection([data.latlng.lng,data.latlng.lat]); | |
svgleftbottom.append('svg:circle') | |
.attr('cx', leftbottomcoordinates[0]) | |
.attr('cy', leftbottomcoordinates[1]) | |
.attr('r', 0) | |
.style('opacity',0) | |
.attr('class','point') | |
.transition() | |
.duration(200) | |
.attr('r',100) | |
.style('opacity',1.0) | |
.transition() | |
.ease('linear') | |
.duration(500 + Math.random()*500) | |
.attr('r',4) | |
.style('opacity',1); | |
//$("#leftbottom1overlay").prepend(data.location + "<br/>"); | |
$("#leftbottom1overlay").streamwriter("write",data.location); | |
} | |
} | |
}, Math.random()*500); | |
}); | |
// force a reload every hour | |
setTimeout(function(){location.reload(true)},3600000); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function ( $ ) { | |
$.widget( "arscan.streamwriter", { | |
options: { | |
enabled: true, | |
timeout: 50, | |
charblock: 6, | |
maxlines: 7, | |
}, | |
_currentline: {}, | |
_currentlinecount:{}, | |
_queue: {}, | |
_create: function() { | |
var self = this; | |
self._currentline[self.element[0].id] = self.element.text(); | |
self._currentlinecount[self.element[0].id] = 0; | |
self._queue[this.element[0].id] = []; | |
self.element.empty(); | |
var loop = function(){ | |
setTimeout(loop, self.options.timeout); | |
self._typewrite(); | |
} | |
if(self.options.enabled) | |
loop(); | |
}, | |
write: function(text){ | |
if(this.options.enabled){ | |
this._queue[this.element[0].id].push(text); | |
} else { | |
this._currentlinecount[this.element[0].id]++; | |
this.element.append(document.createElement("br")); | |
if(this._currentlinecount[this.element[0].id] > this.options.maxlines){ | |
this._currentlinecount[this.element[0].id]=0; | |
this.element.empty(); | |
} | |
this.element.append(document.createTextNode(text)); | |
} | |
}, | |
_typewrite: function(){ | |
if(this._currentline[this.element[0].id].length > 0){ | |
this.element.append(document.createTextNode(this._currentline[this.element[0].id].substring(0,this.options.charblock))); | |
this._currentline[this.element[0].id] = this._currentline[this.element[0].id].slice(this.options.charblock); | |
} else if (this._queue[this.element[0].id].length > 0){ | |
this._currentlinecount[this.element[0].id]++; | |
this.element.append(document.createElement("br")); | |
if(this._currentlinecount[this.element[0].id] > this.options.maxlines){ | |
this._currentlinecount[this.element[0].id]=0; | |
this.element.empty(); | |
} | |
this._currentline[this.element[0].id] = this._queue[this.element[0].id].shift(); | |
} | |
} | |
}); | |
})(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ---------*/ | |
/* font */ | |
@font-face { | |
font-family: 'Lets go Digital'; | |
src: url('lets_go_digital_regular-webfont.eot'); | |
src: url('lets_go_digital_regular-webfont.eot?#iefix') format('embedded-opentype'), | |
url('lets_go_digital_regular-webfont.woff') format('woff'), | |
url('lets_go_digital_regular-webfont.ttf') format('truetype'), | |
url('lets_go_digital_regular-webfont.svg') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
/* by Font Diner */ | |
/* http://fontdiner.com */ | |
@font-face { | |
font-family: 'featured_item'; | |
src: url('featureditem-webfont.eot'); | |
src: url('featureditem-webfont.eot?#iefix') format('embedded-opentype'), | |
url('featureditem-webfont.woff') format('woff'), | |
url('featureditem-webfont.ttf') format('truetype'), | |
url('featureditem-webfont.svg#featured_itemregular') format('svg'); | |
font-weight: normal; | |
font-style: normal; | |
} | |
/* ---------*/ | |
/* maps */ | |
.land { | |
stroke: #83F52C; | |
stroke-width: 1; | |
fill:none; | |
} | |
.russia { | |
stroke: #DD0048; | |
stroke-width: 2; | |
fill:none; | |
} | |
.usa { | |
stroke: #67C8FF; | |
stroke-width: 2; | |
fill:none; | |
} | |
.point { | |
fill: #67C8FF; | |
stroke: #67C8FF; | |
stroke-opacity: .5; | |
stroke-width: .5px; | |
} | |
/* ------------*/ | |
/* common */ | |
body { | |
font-family: 'featured_item'; | |
font-size: 18px; | |
text-transform:uppercase; | |
color: #67C8FF; | |
} | |
.glowbox { | |
border:2px solid #FFF; | |
border-radius: 5px; | |
box-shadow: 0 0 15px #999, | |
inset 0 0 10em #222; | |
box-shadow: 0 0 15px #005b8e, | |
inset 0 0 10em #002033; | |
} | |
.glowbox a{ | |
color: #67C8FF; | |
} | |
.texttitle { | |
border-bottom: 1px; | |
color: #DD0048; | |
} | |
.column { | |
float: left; | |
} | |
h1 { | |
margin: 0px; | |
padding: 0px; | |
color: #FFF; | |
size: 16px; | |
font-weight: normal; | |
margin-top: -30px; | |
text-align: center; | |
} | |
a { | |
color: inherit; | |
text-decoration: none; | |
} | |
td { | |
color: #83F52C; | |
margin: 0px; | |
padding: 0px; | |
font-size: 8px; | |
line-height:130%; | |
} | |
table { | |
width: 100%; | |
} | |
td.hit { | |
color: #67C8FF; | |
} | |
td.loc{ | |
text-align:right; | |
} | |
td.repo{ | |
} | |
td.actor{ | |
} | |
.glass { | |
} | |
.glass:after{ | |
} | |
/* ------------*/ | |
/* elements */ | |
#container{ | |
top:0;left:0;right:0;bottom:0; | |
margin: auto; | |
width: 1580px; | |
height: 600px; | |
position:absolute; | |
} | |
#center { | |
margin-top:12px; | |
padding-right:10px; | |
} | |
#centermapoverlay { | |
font-family: 'Press Start 2P'; | |
font-size: 8px; | |
line-height: 14px; | |
color: #DD0048; | |
position: absolute; | |
padding-left:20px; | |
top: 205px; | |
height:84px; | |
overflow:hidden; | |
} | |
#paused { | |
position: absolute; | |
left: 850px; | |
top: 170px; | |
font-size:40px; | |
display:none; | |
} | |
#centerbottom { | |
height: 172px; | |
width: 480px; | |
overflow: hidden; | |
color: #83F52C; | |
padding:8px; | |
margin-top:26px; | |
} | |
#centermiddle { | |
padding-top: 10px; | |
padding-bottom: 23px; | |
width: 500px; | |
} | |
#centermiddle div{ | |
float:left; | |
width:165px; | |
line-height:18px; | |
text-align:center; | |
} | |
#left { | |
width:500px; | |
padding-right:10px; | |
transform: 20px; | |
-ms-perspective: 20px; | |
-webkit-perspective: 800; | |
-moz-perspective: 20px; | |
} | |
#leftmap { | |
-webkit-transform-style: preserve-3d; | |
-webkit-transform: rotateY(10deg); | |
-moz-transform-style: preserve-3d; | |
-moz-transform: rotateY(.2deg); | |
} | |
#leftmapoverlay { | |
font-family: 'Press Start 2P'; | |
font-size: 8px; | |
line-height: 14px; | |
color: #DD0048; | |
position: absolute; | |
bottom: 20px; | |
left:20px; | |
height:84px; | |
overflow:hidden; | |
-webkit-transform-style: preserve-3d; | |
-webkit-transform: rotateY(10deg); | |
} | |
.smallwhite{ | |
color: #FFF; | |
font-size:10px; | |
} | |
.bigred{ | |
font-size:26px; | |
font-family: "Lets go Digital"; | |
color: #DD0048; | |
} | |
#leftmiddle { | |
padding-top: 10px; | |
padding-bottom: 30px; | |
-webkit-transform-style: preserve-3d; | |
-webkit-transform: rotateY(10deg); | |
text-align:center; | |
} | |
#leftmiddle div{ | |
float:left; | |
width:165px; | |
margin: auto; | |
line-height:18px; | |
} | |
#leftbottom{ | |
margin-top:23px; | |
-webkit-transform-style: preserve-3d; | |
-webkit-transform: rotateY(10deg); | |
-moz-transform-style: preserve-3d; | |
-moz-transform: rotateY(.2deg); | |
} | |
#leftbottom1{ | |
float:left; | |
width:230px; | |
height:200px; | |
} | |
#leftbottom1overlay { | |
font-family: 'Press Start 2P'; | |
font-size: 8px; | |
line-height: 14px; | |
color: #DD0048; | |
position: absolute; | |
top: 145px; | |
left:20px; | |
height:48px; | |
overflow:hidden; | |
} | |
#leftbottom2{ | |
margin-left:30px; | |
float:left; | |
width:210px; | |
height:180px; | |
padding:10px; | |
overflow:hidden; | |
} | |
#right { | |
width:500px; | |
padding-right:20px; | |
transform: 20px; | |
-ms-perspective: 20px; | |
-webkit-perspective: 800; | |
-moz-perspective: 20px; | |
} | |
#rightmap { | |
-webkit-transform-style: preserve-3d; | |
-webkit-transform: rotateY(350deg); | |
-moz-transform-style: preserve-3d; | |
-moz-transform: rotateY(-.2deg); | |
} | |
#rightmapoverlay { | |
font-family: 'Press Start 2P'; | |
font-size: 8px; | |
line-height: 14px; | |
color: #DD0048; | |
position: absolute; | |
bottom: 20px; | |
right:20px; | |
text-align:right; | |
height:84px; | |
overflow:hidden; | |
} | |
#rightmiddle { | |
padding-top: 10px; | |
padding-bottom: 24px; | |
-webkit-transform-style: preserve-3d; | |
-webkit-transform: rotateY(350deg); | |
text-align:center; | |
} | |
#rightmiddle div{ | |
float:left; | |
width:165px; | |
margin: auto; | |
line-height:18px; | |
} | |
#rightbottom{ | |
margin-top:30px; | |
-webkit-transform-style: preserve-3d; | |
-webkit-transform: rotateY(350deg); | |
-moz-transform-style: preserve-3d; | |
-moz-transform: rotateY(-.2deg); | |
} | |
#rightbottom1{ | |
float:left; | |
width:210px; | |
height:180px; | |
padding:10px; | |
overflow:hidden; | |
} | |
#rightbottom2{ | |
margin-left:30px; | |
float:left; | |
width:210px; | |
height:180px; | |
padding:10px; | |
overflow:hidden; | |
} | |
body { | |
padding:30px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment