home screen demo

This commit is contained in:
rlx 2011-06-04 06:42:38 +00:00
parent 5bc3e50aea
commit 4af66ae1ea

View file

@ -207,6 +207,134 @@ pandora.ui.mainMenu = function() {
title: 'About' title: 'About'
}).open(); }).open();
} else if (data.id == 'home') { } else if (data.id == 'home') {
var $screen = $('<div>')
.attr({id: 'screen'})
.css({
position: 'absolute',
width: '100%',
height: '100%',
background: 'rgb(32, 32, 32)',
opacity: 0,
zIndex: 1000
})
.appendTo(Ox.UI.$body),
$logo = $('<img>')
.attr({
src: '/static/png/logo256.png'
})
.css({
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: '160px',
width: window.innerWidth + 'px',
margin: 'auto'
})
.bind({
click: function() {
$screen.find('div').add('#screen > input').animate({opacity: 0}, 250);
$logo.animate({
width: window.innerWidth + 'px'
}, 500)
$screen.animate({opacity: 0}, 500, function() {
$screen.remove();
});
}
})
.appendTo($screen),
$input = Ox.Input({
width: 156
})
.css({
position: 'absolute',
left: 0,
top: '48px',
right: '164px',
bottom: 0,
margin: 'auto',
opacity: 0
})
.click(function(e) {
e.stopPropagation();
})
.appendTo($screen),
$findButton = Ox.Button({
title: 'Find',
width: 74
})
.css({
position: 'absolute',
left: '82px',
top: '48px',
right: 0,
bottom: 0,
margin: 'auto',
opacity: 0
})
.appendTo($screen),
$browseButton = Ox.Button({
title: 'Browse',
width: 74
})
.css({
position: 'absolute',
left: '246px',
top: '48px',
right: 0,
bottom: 0,
margin: 'auto',
opacity: 0
})
.appendTo($screen);
$signupButton = Ox.Button({
title: 'Sign Up',
width: 74
})
.css({
position: 'absolute',
left: 0,
top: '112px',
right: '246px',
bottom: 0,
margin: 'auto',
opacity: 0
})
.appendTo($screen);
$signinButton = Ox.Button({
title: 'Sign In',
width: 74
})
.css({
position: 'absolute',
left: 0,
top: '112px',
right: '82px',
bottom: 0,
margin: 'auto',
opacity: 0
})
.appendTo($screen);
$aboutButton = Ox.Button({
title: 'About',
width: 156
})
.css({
position: 'absolute',
left: '164px',
top: '112px',
right: 0,
bottom: 0,
margin: 'auto',
opacity: 0
})
.appendTo($screen);
$screen.animate({opacity: 1}, 500, function() {
$screen.find('div').add('#screen > input').animate({opacity: 1}, 250)
});
$logo.animate({width: '320px'}, 500);
/*
var $dialog = new Ox.Dialog({ var $dialog = new Ox.Dialog({
buttons: [ buttons: [
new Ox.Button({ new Ox.Button({
@ -224,6 +352,7 @@ pandora.ui.mainMenu = function() {
title: app.site.site.name, title: app.site.site.name,
width: 800 width: 800
}).open(); }).open();
*/
} else if (data.id == 'register') { } else if (data.id == 'register') {
app.$ui.accountDialog = pandora.ui.accountDialog('register').open(); app.$ui.accountDialog = pandora.ui.accountDialog('register').open();
} else if (data.id == 'loginlogout') { } else if (data.id == 'loginlogout') {