Commit 5e029c7b authored by PhoeniX's avatar PhoeniX

Base UI

Settings page
Working captcha
Working photo/password change
parent c2d5a6dd
File added
File added
img/audio.png

864 Bytes

img/back.png

325 Bytes

img/fav.png

730 Bytes

img/groups.png

858 Bytes

img/news.png

703 Bytes

img/ok.png

515 Bytes

img/photos.png

808 Bytes

img/videos.png

517 Bytes

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" type="text/css" href="/interface.css">
<script type="text/javascript" src="/js/vk.js"></script>
<script type="text/javascript" src="/js/interface.js"></script>
<script type="text/javascript" src="/js/blocks.js"></script>
</head>
<body style="background: #4578b1 url(/img/loader-main.gif) center center no-repeat">
</body>
</html>
\ No newline at end of file
html, body {
margin: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
input[type=checkbox].switch {
display:none;
}
input[type=checkbox].switch + label:before {
float:right;
width:50px;
height:27px;
content: "";
margin-top: -4px;
border-radius: 13px;
background: #bfc5c7 url("/img/switch.png") left center no-repeat;
transition: opacity .3s, background .3s;
}
input[type=checkbox].switch + label {
transition: opacity .3s;
}
input[type=checkbox].switch:checked + label:before {
background: #4bd865 url("/img/switch.png") right center no-repeat;
}
input[type=checkbox].switch:disabled + label {
opacity: 0.4;
background-color: #fff !important;
}
input[type=checkbox].switch:disabled + label:before {
opacity: 0.4;
}
div.sidebar {
position:fixed;
top:0;
left:0;
height:100%;
width:-moz-calc(100% - 50px);
max-width: 270px;
background-color:#384555;
overflow-y: auto;
overflow-x: hidden;
margin-right: 14px;
}
div.sidebar input.searchbox {
background:#4b5765;
margin: 11px auto;
display: block;
padding: 5px;
width: -moz-calc(100% - 22px);
height: 32px;
border-radius: 5px;
border: none;
color: #a7afbc;
font-size: 16px;
text-align: left;
padding-left: -moz-calc((100% - 92px)/2);
transition: padding-left .5s;
}
div.sidebar input.searchbox:focus {
padding-left:5px;
}
div.sidebar .menu {
list-style-type: none;
margin: 0;
padding: 0;
}
div.sidebar .menu .button {
border: none;
color: #e1ebf4;
width: 270px;
border-radius: 0;
padding: 0;
line-height: 48px;
text-align: left;
margin: 0;
height: 48px;
}
div.sidebar .menu .button:before {
width: 100%;
height: 1px;
margin-top: -1px;
position: absolute;
content: "";
background: #4a5767;
}
div.sidebar .menu .button.active {
background: #2e3a46;
}
div.sidebar .menu .button:first-child:before,
div.sidebar .menu .button.active:before,
div.sidebar .menu .button.active + .button:before
{
background: transparent;
}
div.sidebar .menu .button div.img {
float: left;
margin: 4px 4px 4px 4px;
height: 40px;
width: 40px;
}
div.sidebar .menu .button span {
font-size: 16px;
vertical-align: middle;
}
body div.center {
position: fixed;
top:0;
left:0;
height:100%;
width:100%;
background-color:white;
transition: left .5s;
box-shadow: 0 0 14px rgba(0,0,0,.3);
}
body div.center div.locker {
width: 100%;
height: 100%;
opacity: 0;
background: transparent;
position: absolute;
top: 0;
left: 0;
z-index: 10000;
}
body div.center div.head {
width: 100%;
height: 54px;
background-color:#4578b1;
transition: background-color .5s;
position: absolute;
z-index: 1000;
}
body div.center div.head div.sidebarButton,
body div.center div.head div.backButton,
body div.center div.head div.okButton {
width: 54px;
height: 54px;
background: transparent url("/img/sidebar.png") center center no-repeat;
margin: 0;
padding: 0;
float: left;
transition: width .3s;
}
body div.center div.head div.backButton {
width: 0;
background-image: url("/img/back.png");
}
body div.center div.head div.okButton {
background-image: url("/img/ok.png");
float: right;
}
body div.center div.head.pushed div.sidebarButton {
width: 0;
}
body div.center div.head.pushed div.backButton {
width: 54px;
}
body div.center div.head div.title {
color: white;
text-align: center;
line-height: 54px;
margin: 0 54px;
font-size: 24px;
}
body div.center div.content {
overflow-y: auto;
background: #f0eff4;
position: absolute;
left: 0;
top: 54px;
height: -moz-calc(100% - 54px);
width: 100%;
z-index: 999;
}
\ No newline at end of file
var Blocks = {
"load": function(list,callback){
var l = function(){
if (list.length == 0) return callback();
var s = document.createElement('script');
s.src = '/js/blocks/' + list.shift() + '.js';
s.onload = l;
s.async = true;
s.type = 'text/javascript';
document.head.appendChild(s);
}, scripts = document.head.getElementsByTagName('script');
for (var i = 0; i < scripts.length; i++) {
var s = scripts[i];
if (s.src.indexOf('/js/blocks/') == 0) s.remove();
}
l();
},
"init": function(callback){
Blocks.load(['page'],callback);
}
};
\ No newline at end of file
Blocks.page = (function(){
var cache = {}, startload = function(block){
block.style.background = '#fff url("/img/load-block.gif") center center no-repeat';
}, endload = function(block){
block.style.background = '#fff';
}, format_block = function(block,user){
endload(block);
block.appendChild(document.createElement('pre')).innerHTML = JSON.stringify(user,null,'\t');
};
return function(params){
var vk_params = {
"fields": "sex,bdate,city,country,online,online_mobile,"+
"lists,has_mobile,contacts,connections,site,"+
"education,universities,schools,can_post,"+
"can_see_all_posts,can_see_audio,"+
"can_write_private_message,status,last_seen,"+
"common_count,relation,relatives,counters,screen_name"
};
if (params.uid) vk_params['user_ids'] = params.uid;
var block = document.createElement('div');
startload(block);
if (!params.uid && cache[0]) format_block(block,cache[0]);
else if (params.uid && cache[params.uid]) format_block(block,cache[params.uid]);
else VK.api.call('users.get',vk_params,function(r){
var user = r.response[0];
cache[user.uid] = user;
if (!params.uid) cache[0] = user;
format_block(block,user);
});
return block;
};
})();
\ No newline at end of file
This diff is collapsed.
Interface.modules.push((function(){
var audio = {
"init": function() {
var button = audio.button = document.createElement('div');
button.className = 'button';
var icon = document.createElement('div');
icon.style.background = 'url("/img/audio.png") center center no-repeat';
icon.className = 'img';
var name = document.createElement('span');
name.innerHTML = 'Аудиозаписи';
button.appendChild(icon);
button.appendChild(name);
},
"content": function(){
return document.createTextNode('audio');
},
"title": function(){
return document.createTextNode('Аудиозаписи');
}
};
return audio;
})());
\ No newline at end of file
Interface.modules.push((function(){
var fav = {
"init": function() {
var button = fav.button = document.createElement('div');
button.className = 'button';
var icon = document.createElement('div');
icon.style.background = 'url("/img/fav.png") center center no-repeat';
icon.className = 'img';
var name = document.createElement('span');
name.innerHTML = 'Закладки';
button.appendChild(icon);
button.appendChild(name);
},
"content": function(){
return document.createTextNode('fav');
},
"title": function(){
return document.createTextNode('Закладки');
}
};
return fav;
})());
\ No newline at end of file
Interface.modules.push((function(){
var friends = {
"init": function() {
var button = friends.button = document.createElement('div');
button.className = 'button';
var icon = document.createElement('div');
icon.style.background = 'url("/img/friends.png") center center no-repeat';
icon.className = 'img';
var name = document.createElement('span');
name.innerHTML = 'Друзья';
button.appendChild(icon);
button.appendChild(name);
},
"content": function(){
return document.createTextNode('friends');
},
"title": function(){
return document.createTextNode('Друзья');
}
};
return friends;
})());
\ No newline at end of file
Interface.modules.push((function(){
var groups = {
"init": function() {
var button = groups.button = document.createElement('div');
button.className = 'button';
var icon = document.createElement('div');
icon.style.background = 'url("/img/groups.png") center center no-repeat';
icon.className = 'img';
var name = document.createElement('span');
name.innerHTML = 'Группы';
button.appendChild(icon);
button.appendChild(name);
},
"content": function(){
return document.createTextNode('groups');
},
"title": function(){
return document.createTextNode('Группы');
}
};
return groups;
})());
\ No newline at end of file
Interface.modules.push((function(){
var messages = {
"init": function() {
var button = messages.button = document.createElement('div');
button.className = 'button';
var icon = document.createElement('div');
icon.style.background = 'url("/img/messages.png") center center no-repeat';
icon.className = 'img';
var name = document.createElement('span');
name.innerHTML = 'Сообщения';
button.appendChild(icon);
button.appendChild(name);
},
"content": function(){
return document.createTextNode('messages');
},
"title": function(){
return document.createTextNode('Сообщения');
}
};
return messages;
})());
\ No newline at end of file
Interface.modules.push((function(){
var opened = 'news', modules = {
"news": "Новости",
"recommendations": "Рекоммендации",
"search": "Поиск",
"friends": "Друзья",
"pages": "Сообщества"
}, news = {
"init": function() {
var button = news.button = document.createElement('div');
button.className = 'button';
var icon = document.createElement('div');
icon.style.background = 'url("/img/news.png") center center no-repeat';
icon.className = 'img';
var name = document.createElement('span');
name.innerHTML = 'Новости';
button.appendChild(icon);
button.appendChild(name);
},
"default": true,
"content": function(){
return document.createTextNode(opened);
},
"title": function(){
var selector = document.createElement('div');
selector.innerHTML = modules[opened];
var indicator = selector.appendChild(document.createElement('img'));
indicator.src = '/img/submenu-open.png';
indicator.style.verticalAlign = 'middle';
var menu = document.createElement('div');
menu.style.position = 'absolute';
menu.style.width = '100%';
menu.style.top = Interface.head.offsetHeight+'px';
menu.style.left = 0;
menu.style.overflow = 'hidden';
menu.style.height = '0px';
menu.style.transition = 'height .3s';
menu.style.background = '#eee';
menu.style.boxShadow = 'inset 0 0 1px #333';
menu.style.color = '#333';
menu.style.visibility = 'hidden';
menu.style.color = 'black';
menu.style.lineHeight = '44px';
menu.style.fontSize = '16px';
Interface.addObserver('openSidebar',function(){
menu.style.height = '0px';
setTimeout(function(){menu.style.visibility = 'hidden';}, 300);
indicator.src = '/img/submenu-open.png';
});
selector.appendChild(menu);
var menushow = false, h = 0, d = menu;
for (var m in modules) {
var mb = document.createElement('div');
mb.innerHTML = modules[m];
(function(mb,m){
mb.addEventListener('click',function(){
menu.style.height = '0px';
indicator.src = '/img/submenu-open.png';
opened = m;
setTimeout(function(){menu.style.visibility = 'hidden';Interface.present(news);}, 300);
});
})(mb,m);
menu.appendChild(mb); h += 44;
d = menu.appendChild(document.createElement('hr')); h++;
d.style.height = '1px';
d.style.margin = 0;
d.style.backgroundColor = '#ddd';
d.style.borderColor = 'transparent';
}
d.remove(); h--;
selector.addEventListener('click',function(){
if ((menushow = !menushow)) {
menu.style.visibility = null;
menu.style.height = h + 'px';
indicator.src = '/img/submenu-close.png';
} else {
menu.style.height = '0px';
indicator.src = '/img/submenu-open.png';
setTimeout(function(){menu.style.visibility = 'hidden';}, 300);
}
});
return selector;
}
};
return news;
})());
\ No newline at end of file
Interface.modules.push((function(){
var titlenode, page = {
"init": function() {
var button = page.button = document.createElement('div');
button.className = 'button';
var avatar = document.createElement('div');
avatar.style.background = '#7b8390 url("/img/loader-circle.gif") center center no-repeat';
avatar.style.borderRadius = '50%';
avatar.className = 'img';
var name = document.createElement('span');
name.innerHTML = 'Моя страница';
VK.api.call('users.get',{fields: "photo_50"}, function(r){
var u = r.response.pop();
avatar.style.background = 'url("' +u.photo_50+ '") center center no-repeat';
avatar.style.backgroundSize = 'cover';
name.innerHTML = u.first_name + ' ' + u.last_name;
if (titlenode) titlenode.innerHTML = name.innerHTML;
else titlenode = document.createTextNode(name.innerHTML);
page.title = function(){
return document.createTextNode(u.first_name + ' ' + u.last_name);
};
});
Interface.addObserver('photoChanged',function(){
VK.api.call('users.get',{"fields":"photo_50"},function(r){
var u = r.response.pop();
avatar.style.background = 'url("' +u.photo_50+ '") center center no-repeat';
});
});
button.appendChild(avatar);
button.appendChild(name);
},
"content": function(){
return Blocks.page({});
},
"title": function(){
return titlenode ? titlenode : titlenode = document.createTextNode('Моя страница');
}
};
return page;
})());
\ No newline at end of file
Interface.modules.push((function(){
var photos = {
"init": function() {
var button = photos.button = document.createElement('div');
button.className = 'button';
var icon = document.createElement('div');
icon.style.background = 'url("/img/photos.png") center center no-repeat';
icon.className = 'img';
var name = document.createElement('span');
name.innerHTML = 'Фотографии';
button.appendChild(icon);
button.appendChild(name);
},
"content": function(){
return document.createTextNode('photos');
},
"title": function(){
return document.createTextNode('Фотографии');
},
"headColor": "black"
};
return photos;
})());
\ No newline at end of file
Interface.modules.push((function(){
var replies = {
"init": function() {
var button = replies.button = document.createElement('div');
button.className = 'button';
var icon = document.createElement('div');
icon.style.background = 'url("/img/replies.png") center center no-repeat';
icon.className = 'img';
var name = document.createElement('span');
name.innerHTML = 'Ответы';
button.appendChild(icon);
button.appendChild(name);
},
"content": function(){
return document.createTextNode('replies');
},
"title": function(){
return document.createTextNode('Ответы');
}
};
return replies;
})());
\ No newline at end of file
This diff is collapsed.
Interface.modules.push((function(){
var videos = {
"init": function() {
var button = videos.button = document.createElement('div');
button.className = 'button';
var icon = document.createElement('div');
icon.style.background = 'url("/img/videos.png") center center no-repeat';
icon.className = 'img';
var name = document.createElement('span');
name.innerHTML = 'Видеозаписи';
button.appendChild(icon);
button.appendChild(name);
},
"content": function(){
return document.createTextNode('videos');
},
"title": function(){
return document.createTextNode('Видеозаписи');
}
};
return videos;
})());
\ No newline at end of file
VK = {
"init": function(token){
VK.api.token = token;
window.navigator.mozSetMessageHandler('push-register', function(e) {
if (localStorage.getItem('pushEnabled') == 'true') VK.registerPush();
});
window.navigator.mozSetMessageHandler('push', function(e) {
console.log('Recieved push', e);
});
},
"api": {
"call": function(method, params, callback){
var params_str = [];
params['access_token'] = VK.api.token;
for (var i in params) params_str.push(encodeURIComponent(i)+'='+encodeURIComponent(params[i]));
var url = 'https://api.vk.com/method/'+encodeURIComponent(method)+'?'+params_str.join('&'), xhr = new XMLHttpRequest({mozAnon: true, mozSystem: true});
xhr.open('GET',url,true);
xhr.responseType = 'json';
xhr.onreadystatechange = function(){
if ((xhr.readyState == 4) && (xhr.status == 200)) {
if(xhr.response.error && (xhr.response.error.error_code == 5)) {
localStorage.removeItem('vk_token');
window.onload();
return;
}
if(xhr.response.error && (xhr.response.error.error_code == 6)) {
setTimeout(function(){
VK.api.call(method, params, callback);
},1000);
return;
}
if(xhr.response.error && (xhr.response.error.error_code == 14) && (!params.captcha_sid)) {
VK.api.captcha(xhr.response.error.captcha_img,xhr.response.error.captcha_sid,method,params,callback);
return;
}
callback(xhr.response);
}
};
xhr.send();
},
"upload": function(dest, blob, callback, prog_callback){
var xhr = new XMLHttpRequest({mozAnon: true, mozSystem: true});
xhr.open('POST',dest,true);
xhr.responseType = 'json';
xhr.onreadystatechange = function(){
if ((xhr.readyState == 4) && (xhr.status == 200)) {
callback(xhr.response);
}
};
xhr.upload.onprogress = prog_callback;
var formData = new FormData();
formData.append("photo", blob, "photo.jpg");
xhr.send(formData);
},
"captcha": function(img, sid, method, params, callback) {
var captcha = document.createElement('div');
captcha.style.background = '#4578b1';
var image = document.createElement('div');
image.style.background = 'url("'+img+'") center center no-repeat';
image.style.height = '90px';
image.style.backgroundSize = 'contain';
image.style.margin = '10px 0';
captcha.appendChild(image);
var key = document.createElement('input');
key.style.padding = '10px';
key.style.background = '#fff';
key.style.border = 'none';
key.style.width = '100%';
key.style.fontSize = '16px';
key.style.borderRadius = 0;