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
window.onload = function(){
var vk_token = localStorage.getItem('vk_token');
if (!vk_token) {
while (document.body.childNodes.length) document.body.firstChild.remove();
var f = document.createElement('iframe');
f.setAttribute('mozbrowser',true);
f.setAttribute('remote',true);
f.style.border = 'none';
f.style.width = '100%';
f.style.height = '100%';
var
returl = 'https://oauth.vk.com/blank.html',
authurl = 'https://oauth.vk.com/authorize?client_id=4374753&scope='+encodeURIComponent(VK.permissions)+'&redirect_uri='+encodeURIComponent(returl)+'&display=mobile&v=5.21&response_type=token&revoke=1';
f.addEventListener('mozbrowserlocationchange',function(e){
if (e.detail.indexOf("https://m.vk.com/settings") == 0) return true;
if (e.detail.indexOf("https://oauth.vk.com/") != 0) {
this.src = authurl;
return false;
}
if (e.detail.indexOf("https://oauth.vk.com/blank.html") == 0) {
f.remove();
var url = e.detail.split('#')[1].split('&'), params = {};
for (var i = 0; i < url.length; i++) {
params[url[i].split('=')[0]] = url[i].split('=')[1];
}
if(params.access_token) {
localStorage.setItem('vk_token',params.access_token);
}
window.onload();
}
});
document.body.appendChild(f);
f.src = authurl;
return;
}
VK.init(vk_token);
Blocks.init(function(){
Interface.load(
['page','news','replies','messages','friends','groups','photos','videos','audio','fav','settings'],
Interface.init
);
});
};
Interface = {
"init": function(){
while (document.body.childNodes.length) document.body.firstChild.remove();
var side = Interface.side = document.createElement('div'), center = Interface.center = document.createElement('div');
side.className = 'sidebar';
document.body.appendChild(side);
var sb = document.createElement('input');
sb.className = 'searchbox';
sb.placeholder = '🔍 Поиск';
side.appendChild(sb);
var menu = document.createElement('div');
menu.className = 'menu';
side.appendChild(menu);
center.className = 'center';
var head = Interface.head = document.createElement('div');
head.className = 'head';
var sb = Interface.sidebarButton = document.createElement('div');
sb.className = 'sidebarButton';
sb.onclick = Interface.openSidebar;
head.appendChild(Interface.sidebarButton);
var bb = Interface.backButton = document.createElement('div');
bb.className = 'backButton';
bb.onclick = Interface.pop;
head.appendChild(Interface.backButton);
var title = Interface.title = document.createElement('div');
title.className = 'title';
head.appendChild(Interface.title);
center.appendChild(head);
var content = Interface.content = document.createElement('div');
content.className = 'content';
center.appendChild(content);
document.body.appendChild(center);
for (var i = 0; i < Interface.modules.length; i++) {
var m = Interface.modules[i];
m.init();
if (m.default) Interface.present(m);
menu.appendChild(m.button);
(function(m){
m.button.addEventListener('click',function(){
Interface.present(m);
});
})(m);
}
center.addEventListener('touchstart',Interface.centerPan);
},
"openSidebar": function(){
var locker = Interface.center.getElementsByClassName('locker');
if (locker.length == 0) {
locker = document.createElement('div');
locker.className = 'locker';
locker.onclick = function(){
Interface.closeSidebar();
return false;
};
locker.addEventListener('touchstart',Interface.centerPan);
Interface.center.appendChild(locker);
}
Interface.center.style.left = Interface.side.offsetWidth+'px';
Interface.callObserver('openSidebar');
},
"closeSidebar": function(){
var locker = Interface.center.getElementsByClassName('locker');
Interface.center.style.left = null;
if (locker.length > 0) {
locker = locker[0];
locker.removeEventListener('touchstart',Interface.centerPan);
setTimeout(function(){locker.remove();},500);
}
Interface.callObserver('closeSidebar');
},
"present": function(module){
while(Interface.side.getElementsByClassName('active').length>0)
Interface.side.getElementsByClassName('active')[0].classList.remove('active');
module.button.classList.add('active');
Interface.head.style.backgroundColor = module['headColor'] ? module.headColor : null;
while(Interface.title.childNodes.length) Interface.title.firstChild.remove();
Interface.title.appendChild(module.title());
while(Interface.content.childNodes.length) Interface.content.firstChild.remove();
var pushed = Interface.center.getElementsByClassName('content');
for(var i = 0; i < pushed.length; i++){
if (pushed[i] != Interface.content) pushed[i].remove();
}
Interface.head.classList.remove('pushed');
Interface.content.appendChild(module.content());
Interface.closeSidebar();
},
"centerPan": function(e){
if (e.touches.length > 1) return;
if (Interface.side.disabled) return;
var t = e.touches[0];
if ((t.pageX < 50) || (this != Interface.center)) {
var
origin = t.pageX - Interface.center.offsetLeft,
current = t.pageX,
identifier = t.identifier,
move = function(e){
var t = e.touches.identifiedTouch(identifier);
current = t.pageX;
Interface.center.style.left = Math.max(0,Math.min(Interface.side.offsetWidth, current - origin));
e.preventDefault();
},
end = function(e){
document.body.removeEventListener('touchmove',move);
document.body.removeEventListener('touchend',end);
if ((current - origin) > 135) {
Interface.openSidebar();
} else {
Interface.closeSidebar();
}
Interface.center.style.transition = null;
};
Interface.center.style.transition = 'none';
document.body.addEventListener('touchmove',move);
document.body.addEventListener('touchend',end);
}
},
"push": function(module, block){
if(!module.children) module.children = [];
module.children.push(block);
block.className = 'content';
block.style.left = Interface.center.offsetWidth + 'px';
block.style.transition = 'left .3s';
block.style.boxShadow = '0 0 14px rgba(0,0,0,.3)';
Interface.center.appendChild(block);
Interface.side.disabled = true;
block.addEventListener('touchstart',function(e){
if (e.touches.length > 1) return;
var t = e.touches[0];
if (t.pageX > 50) return;
var
origin = t.pageX - block.offsetLeft,
current = t.pageX,
identifier = t.identifier,
move = function(e){
var t = e.touches.identifiedTouch(identifier);
current = t.pageX;
block.style.left = Math.max(0,Math.min(Interface.center.offsetWidth, current - origin));
e.preventDefault();
},
end = function(e){
document.body.removeEventListener('touchmove',move);
document.body.removeEventListener('touchend',end);
if ((current - origin) > 135) {
Interface.pop();
} else {
block.style.transition = 'left .3s';
block.style.left = '0px';
setTimeout(function(){
block.style.transition = null;
}, 300);
}
};
document.body.addEventListener('touchmove',move);
document.body.addEventListener('touchend',end);
});
setTimeout(function(){
Interface.head.classList.add('pushed');
block.style.left = '0px';
setTimeout(function(){
block.style.transition = null;
}, 300);
},1);
},
"modal": function(caption, content, callback){
var od = Interface.side.disabled;
Interface.side.disabled = true;
var center = document.createElement('div');
center.className = 'center';
center.style.zIndex = 10002;
var head = document.createElement('div');
head.className = 'head';
var ob = document.createElement('div');
ob.className = 'okButton';
ob.onclick = callback;
head.appendChild(ob);
var title = document.createElement('div');
title.innerHTML = caption;
title.className = 'title';
head.appendChild(title);
center.appendChild(head);
content.className = 'content';
center.appendChild(content);
center.style.top = '100%';
center.style.transition = 'top .2s';
setTimeout(function(){center.style.top = null;}, 1);
document.body.appendChild(center);
return {"close":function(){
Interface.side.disabled = od;
center.style.top = '100%';
setTimeout(function(){center.remove();}, 200);
}};
},
"pop": function(){
var pushed = Interface.center.getElementsByClassName('content'), last = pushed[pushed.length-1];
last.style.transition = 'left .3s';
last.style.left = Interface.center.offsetWidth + 'px';
setTimeout(function(){
last.remove();
},300);
if (pushed.length == 2) {
Interface.side.disabled = false;
Interface.head.classList.remove('pushed');
}
},
"load": function(list,callback){
var l = function(){
if (list.length == 0) return callback();
var s = document.createElement('script');
s.src = '/js/interface/' + 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/interface/') == 0) s.remove();
}
Interface.observers = {};
Interface.modules = [];
l();
},