<!DOCTYPE html>
<html style= "margin:0; padding:0;height:100%;" >
<head>
<meta charset= "UTF-8" >
<title>QQ Login</title>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
perspective: 800px;
-webkit-app-region: drag;
-webkit-user-select: none;
}
input[type= "submit" ],
input[type= "reset" ],
input[type= "button" ],
input[type= "text" ],
button,
textarea {
-webkit-app-region: no-drag;
}
.shadow {
box-shadow: 0 0 10px rgba(0, 0, 0, 1);
position: absolute;
width: 100%;
height: 100%;
border-radius: 4px;
}
#login-back {
position: relative;
border-radius: 3px 3px 0 0;
left: 0;
right: 0;
height: 180px;
}
#card {
left: 33px;
top: 70px;
right: 33px;
bottom: 70px;
padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; outline: 0px !important; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#ebf2f9;
position: absolute;
-webkit-transition: -webkit-transform .6s ease- in -out;
transition: transform .6s ease- in -out;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
border-radius: 4px;
}
#card.flipped {
-webkit-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
#card .front {
background: url(imgs/login-back.gif) no-repeat;
background-size: 100% 180px;
position: absolute;
transform: rotateY(0deg);
}
#card .back {
position: absolute;
background: url(imgs/login-back.gif) no-repeat;
background-size: 100% 180px;
-webkit-transform: rotateY( -180deg );
transform: rotateY( -180deg );
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index:2;
}
.sys-control-box {
float:right;
width:84px;
border-radius: 0 3px 0 0;
}
.sys-btn {
width: 28px;
height: 28px;
border: none;
outline: none;
margin: 0;
}
.sys-btn-mini {
background: url(imgs/btn_mini_normal.png) no-repeat;
}
.sys-btn-mini:hover {
background: url(imgs/btn_mini_highlight.png) no-repeat;
}
.sys-btn-mini:active {
background: url(imgs/btn_mini_down.png) no-repeat;
}
.sys-btn-close {
border-radius: 0 3px 0 0;
background: url(imgs/btn_close_normal.png) no-repeat;
}
.sys-btn-close:hover {
background: url(imgs/btn_close_highlight.png) no-repeat;
}
.sys-btn-close:active {
background: url(imgs/btn_close_down.png) no-repeat;
}
.sys-btn-set {
background: url(imgs/btn_set_normal.png) 1px 0 no-repeat;
}
.sys-btn-set:hover {
background: url(imgs/btn_set_hover.png) 1px 0 no-repeat;
}
.sys-btn-set:active {
background: url(imgs/btn_set_press.png) 1px 0 no-repeat;
}
.btn {
width: 78px;
height: 28px;
background: url(imgs/setting_btn_normal.png) no-repeat;
background-size: 100% 100%;
border: none;
outline: none;
margin: 0;
}
.btn:hover, .btn:active {
background: url(imgs/setting_btn_hover.png) no-repeat;
background-size: 100% 100%;
}
.btn:focus {
background: url(imgs/setting_btn_hover.png) no-repeat;
background-size: 100% 100%;
}
</style>
</head>
<body>
<div id= "card" >
<div id= "front" class= "front shadow" >
<div class= "sys-control-box" >
<button id= "btn-set" class= "sys-btn sys-btn-set" title= "设置" ></button><button class= "sys-btn sys-btn-mini" title= "最小化" ></button><button class= "sys-btn sys-btn-close" title= "关闭" ></button>
</div>
</div>
<div id= "back" class= "back shadow" >
<div style= "width:100%;height:100%; border-radius: 4px;background:-webkit-linear-gradient(top, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 6%, #ebf2f9 12%, #ebf2f9 90%, #cde2f2 90%, #cde2f2 100%);" >
<div class= "sys-control-box" style= "width:56px;" >
<button class= "sys-btn sys-btn-mini" title= "最小化" ></button><button class= "sys-btn sys-btn-close" title= "关闭" ></button>
</div>
<button id= "btn-ok" style= "position:absolute; right:91px; bottom:2px;" class= "btn" >确定</button>
<button id= "btn-cancel" style= "position:absolute; right:10px; bottom:2px;" class= "btn" >取消</button>
</div>
</div>
</div>
<script>
Element.prototype.hasClassName = function (a) {
return new RegExp( "(?:^|\\s+)" + a + "(?:\\s+|$)" ).test( this .className);
};
Element.prototype.addClassName = function (a) {
if (! this .hasClassName(a)) {
this .className = [ this .className, a].join( " " );
}
};
Element.prototype.removeClassName = function (b) {
if ( this .hasClassName(b)) {
var a = this .className;
this .className = a.replace( new RegExp( "(?:^|\\s+)" + b + "(?:\\s+|$)" , "g" ), " " );
}
};
Element.prototype.toggleClassName = function (a) {
this [ this .hasClassName(a) ? "removeClassName" : "addClassName" ](a);
};
//var init = function () {
// var card = document.getElementById(‘card‘);
// document.getElementById(‘front‘).addEventListener(‘click‘, function () {
// card.toggleClassName(‘flipped‘);
// }, false);
// document.getElementById(‘back‘).addEventListener(‘click‘, function () {
// card.toggleClassName(‘flipped‘);
// }, false);
//};
//window.addEventListener(‘DOMContentLoaded‘, init, false);
( function () {
const remote = require( ‘electron‘ ).remote;
function init() {
function flip() {
if (frontShow == 2) {
document.getElementById( ‘front‘ ).style.display = ‘block‘ ;
}
else {
document.getElementById( ‘back‘ ).style.display = ‘block‘ ;
}
card.toggleClassName( ‘flipped‘ );
};
var btn_minis = document.getElementsByClassName( "sys-btn-mini" );
for ( var i = 0; i < btn_minis.length; i++) {
btn_minis[i].addEventListener( "click" , function (e) {
const window = remote.getCurrentWindow();
window.minimize();
});
}
//document.getElementById("sys-btn-maxi").addEventListener("click", function (e) {
// const window = remote.getCurrentWindow();
// if (!window.isMaximized()) {
// window.maximize();
// } else {
// window.unmaximize();
// }
//});
var btn_closes = document.getElementsByClassName( "sys-btn-close" );
for ( var i = 0; i < btn_closes.length; i++) {
btn_closes[i].addEventListener( "click" , function (e) {
const window = remote.getCurrentWindow();
window.close();
});
}
var card = document.getElementById( ‘card‘ );
var frontShow = 1;
var btn_sets = document.getElementsByClassName( "sys-btn-set" );
for ( var i = 0; i < btn_sets.length; i++) {
btn_sets[i].addEventListener( ‘click‘ , function () { flip(); }, false );
}
card.addEventListener( ‘transitionend‘ , function () {
if (frontShow == 1) {
frontShow = 2;
document.getElementById( ‘front‘ ).style.display = ‘none‘ ;
}
else {
document.getElementById( ‘back‘ ).style.display = ‘none‘ ;
frontShow = 1;
}
}, false );
document.getElementById( ‘btn-ok‘ ).addEventListener( ‘click‘ , function () { flip(); }, false );
document.getElementById( ‘btn-cancel‘ ).addEventListener( ‘click‘ , function () { flip(); }, false );
};
document.onreadystatechange = function () {
if (document.readyState == "complete" ) {
init();
}
};
})();
</script>
</body>
</html>
|