initial commit

This commit is contained in:
Simon Basset 2012-10-18 09:44:25 +02:00
commit c01d2ca559
10 changed files with 150 additions and 0 deletions

47
.gitignore vendored Normal file
View file

@ -0,0 +1,47 @@
# Compiled source #
###################
*.com
*.class
*.dll
*.exe
*.o
*.so
# Packages #
############
# it's better to unpack these files and commit the raw source
# git has its own built in compression methods
*.7z
*.dmg
*.gz
*.iso
*.jar
*.rar
*.tar
*.zip
# Logs and databases #
######################
*.log
*.sql
*.sqlite
# OS generated files #
######################
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
Icon?
ehthumbs.db
Thumbs.db
# Saved #
#########
*~
# Directories #
##############
node_modules
build

0
README.md Normal file
View file

47
css/main.css Normal file
View file

@ -0,0 +1,47 @@
body, html {
margin: 0;
background: black;
}
body > div {
overflow: hidden;
}
#top {
width: 400px;
height: 220px;
}
#bottom {
width: 320px;
height: 212px;
margin: 0 auto;
}
#top.one {
background: url(../img/one.mpo);
}
#top.two {
background: url(../img/two.mpo);
}
#top.three {
background: url(../img/three.mpo);
}
#top.four {
background: url(../img/four.mpo);
}
#bottom > a {
margin: 10px;
display: inline-block;
height: 50px;
width: 50px;
background-size: 100% 100%;
}
#bottom > a[href*="one"] {
background: url(../img/one.mpo);
}
#bottom > a[href*="two"] {
background: url(../img/two.mpo);
}
#bottom > a[href*="three"] {
background: url(../img/three.mpo);
}
#bottom > a[href*="four"] {
background: url(../img/four.mpo);
}

0
img/.gitignore vendored Normal file
View file

BIN
img/four.mpo Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 KiB

BIN
img/one.mpo Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 182 KiB

BIN
img/three.mpo Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 140 KiB

BIN
img/two.mpo Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 133 KiB

19
index.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3DS</title>
<meta name="viewport" content="width=400px">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="top"></div>
<div id="bottom">
<a href='img/one.mpo'></a>
<a href='img/two.mpo'></a>
<a href='img/three.mpo'></a>
<a href='img/four.mpo'></a>
</div>
</body>
<script src='js/main.js'></script>
</html>

37
js/main.js Normal file
View file

@ -0,0 +1,37 @@
(function(){
var center = function(){
window.scrollTo(40, 220);
};
var control = function(ev) {
switch(ev.which) {
case 13: alert("A"); break; //A
case 37: alert("left"); break; //left arrow
case 38: alert("up"); break; //up arrow
case 39: alert("right"); break; //right arrow
case 40: alert("down"); break; //down arrow
}
};
var active = function(ev) {
var link = this.href;
var top = document.querySelector("#top");
if(link.indexOf('one') > -1){
top.className = 'one';
}else if(link.indexOf('two') > -1) {
top.className = 'two';
}else if(link.indexOf('three') > -1) {
top.className = 'three';
}else if(link.indexOf('four') > -1) {
top.className = 'four';
}
}
document.addEventListener('DOMContentLoaded', function(ev){
setInterval(center, 42);
//this.addEventListener("keyup", control, false);
var anchors = this.querySelectorAll("#bottom a[href$='.mpo']");
for(var i = 0, l = anchors.length; i<l; i++){
anchors[i].addEventListener('focus', active, false);
}
this.querySelector("#bottom a[href*='one']").focus();
}, false);
})()