add logging-in/registering dialog via remodal.js
This commit is contained in:
printempw
parent
fb640d3d87
commit
046b895eac
@ -2,7 +2,7 @@
|
||||
* @Author: prpr
|
||||
* @Date: 2016-01-21 07:57:38
|
||||
* @Last Modified by: prpr
|
||||
* @Last Modified time: 2016-01-21 12:49:17
|
||||
* @Last Modified time: 2016-01-21 18:20:11
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
@ -227,3 +227,27 @@ body {
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
.pure-form {
|
||||
margin: 10px auto;
|
||||
width: 40%;
|
||||
}
|
||||
.pure-input {
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
}
|
||||
#keep-label {
|
||||
float: left;
|
||||
}
|
||||
#login-button {
|
||||
float: right;
|
||||
margin: .5em 0;
|
||||
}
|
||||
#register-button {
|
||||
margin: .5em 0;
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
#msg {
|
||||
width: 40%;
|
||||
margin: 3.5em auto 0;
|
||||
}
|
||||
|
||||
@ -1,94 +0,0 @@
|
||||
function checkForm(type, uname, passwd, passwd2) {
|
||||
if (type == "login") {
|
||||
if (uname === "") {
|
||||
showMsg("alert-warning", "Empty Username!");
|
||||
$("#uname").focus();
|
||||
return false;
|
||||
} else if (passwd === ""){
|
||||
showMsg("alert-warning", "Empty Password!");
|
||||
$("#passwd").focus();
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
} else if (type == "register") {
|
||||
if (uname === "") {
|
||||
showMsg("alert-warning", "Empty Username!");
|
||||
$("#uname").focus();
|
||||
return false;
|
||||
} else if (passwd === ""){
|
||||
showMsg("alert-warning", "Empty Password!");
|
||||
$("#passwd").focus();
|
||||
return false;
|
||||
} else if (passwd2 === ""){
|
||||
showMsg("alert-warning", "Empty Comfirming Password!");
|
||||
$("#cpasswd").focus();
|
||||
return false;
|
||||
} else if (passwd != passwd2){
|
||||
showMsg("alert-warning", "Non-equal password comfirming!");
|
||||
$("#cpasswd").focus();
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Login Button Click Event
|
||||
$("body").on("click", "#login", function(){
|
||||
var uname = $("#uname").val();
|
||||
var passwd = $("#passwd").val();
|
||||
if (checkForm("login", uname, passwd)) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "ajax.php?action=login",
|
||||
dataType: "json",
|
||||
data: {"uname":uname,"passwd":passwd},
|
||||
beforeSend: function() {
|
||||
showMsg("alert-info", "Logging in...");
|
||||
},
|
||||
success: function(json) {
|
||||
if (json.errno == 0) {
|
||||
docCookies.setItem("uname", uname, '/');
|
||||
docCookies.setItem("token", json.token, '/');
|
||||
if ($("#keep").prop("checked")) {
|
||||
docCookies.setItem("uname", uname, 604800, '/');
|
||||
// 设置长效 token （7天）
|
||||
docCookies.setItem("token", json.token, 604800, '/');
|
||||
}
|
||||
showMsg("alert-success", "Logging succeed!");
|
||||
window.setTimeout("window.location = './user/index.php'", 1000);
|
||||
} else {
|
||||
showMsg("alert-danger", json.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Register Button Click Event
|
||||
$("body").on("click", "#register", function(){
|
||||
var uname = $("#uname").val();
|
||||
var passwd = $("#passwd").val();
|
||||
if (checkForm("register", uname, passwd, $("#cpasswd").val())) {
|
||||
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "ajax.php?action=register",
|
||||
dataType: "json",
|
||||
data: {"uname":uname, "passwd":passwd},
|
||||
beforeSend: function() {
|
||||
showMsg("alert-info", "Registering...");
|
||||
},
|
||||
success: function(json) {
|
||||
if (json.errno == 0) {
|
||||
showMsg("alert-success", json.msg);
|
||||
window.setTimeout("window.location = './index.php?action=login&msg=Successfully Registered, please log in.'", 1000);
|
||||
} else {
|
||||
showMsg("alert-danger", json.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}});
|
||||
|
||||
|
||||
110
assets/js/index.utils.js
Normal file
110
assets/js/index.utils.js
Normal file
@ -0,0 +1,110 @@
|
||||
/*
|
||||
* @Author: prpr
|
||||
* @Date: 2016-01-21 13:55:44
|
||||
* @Last Modified by: prpr
|
||||
* @Last Modified time: 2016-01-21 18:18:37
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
function showMsg(type, msg) {
|
||||
$("[id=msg]").removeClass().addClass("alert").addClass(type).html(msg);
|
||||
}
|
||||
|
||||
// Login Button Click Event
|
||||
$("body").on("click", "#login-button", function(){
|
||||
var uname = $("#uname").val();
|
||||
var passwd = $("#passwd").val();
|
||||
if (checkForm("login", uname, passwd)) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "ajax.php?action=login",
|
||||
dataType: "json",
|
||||
data: {"uname":uname,"passwd":passwd},
|
||||
beforeSend: function() {
|
||||
showMsg("alert-info", "Logging in...");
|
||||
},
|
||||
success: function(json) {
|
||||
if (json.errno == 0) {
|
||||
docCookies.setItem("uname", uname, '/');
|
||||
docCookies.setItem("token", json.token, '/');
|
||||
if ($("#keep").prop("checked")) {
|
||||
docCookies.setItem("uname", uname, 604800, '/');
|
||||
// 设置长效 token （7天）
|
||||
docCookies.setItem("token", json.token, 604800, '/');
|
||||
}
|
||||
showMsg("alert-success", "Logging succeed!");
|
||||
window.setTimeout("window.location = './user/index.php'", 1000);
|
||||
} else {
|
||||
showMsg("alert-danger", json.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Register Button Click Event
|
||||
$("body").on("click", "#register-button", function(){
|
||||
var uname = $("#reg-uname").val();
|
||||
var passwd = $("#reg-passwd").val();
|
||||
if (checkForm("register", uname, passwd, $("#reg-passwd2").val())) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "ajax.php?action=register",
|
||||
dataType: "json",
|
||||
data: {"uname":uname, "passwd":passwd},
|
||||
beforeSend: function() {
|
||||
showMsg("alert-info", "Registering...");
|
||||
},
|
||||
success: function(json) {
|
||||
if (json.errno == 0) {
|
||||
showMsg("alert-success", json.msg);
|
||||
window.setTimeout("window.location = './index.php?action=login&msg=Successfully Registered, please log in.'", 1000);
|
||||
} else {
|
||||
showMsg("alert-danger", json.msg);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function checkForm(type, uname, passwd, passwd2) {
|
||||
switch(type) {
|
||||
case "login":
|
||||
if (uname === "") {
|
||||
showMsg("alert-warning", "Empty Username!");
|
||||
$("#uname").focus();
|
||||
return false;
|
||||
} else if (passwd === ""){
|
||||
showMsg("alert-warning", "Empty Password!");
|
||||
$("#passwd").focus();
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
break;
|
||||
case "register":
|
||||
if (uname === "") {
|
||||
showMsg("alert-warning", "Empty Username!");
|
||||
$("#uname").focus();
|
||||
return false;
|
||||
} else if (passwd === ""){
|
||||
showMsg("alert-warning", "Empty Password!");
|
||||
$("#passwd").focus();
|
||||
return false;
|
||||
} else if (passwd2 === ""){
|
||||
showMsg("alert-warning", "Empty Comfirming Password!");
|
||||
$("#cpasswd").focus();
|
||||
return false;
|
||||
} else if (passwd != passwd2){
|
||||
showMsg("alert-warning", "Non-equal password comfirming!");
|
||||
$("#cpasswd").focus();
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
// Auto login
|
||||
// null
|
||||
|
||||
$('body').css('height', document.documentElement.clientHeight);
|
||||
|
||||
function showMsg(type, msg) {
|
||||
$("#msg").removeClass().addClass("alert").addClass(type).html(msg);
|
||||
}
|
||||
|
||||
$("body").on("click", "#login-reg", function(){
|
||||
if ($("#login-reg").html() == 'Register') {
|
||||
$(".login-container").fadeOut(500);
|
||||
window.setTimeout("$('#login-reg').html('Login');changeForm(1)", 500);
|
||||
$(".login-container").fadeIn(500);
|
||||
} else {
|
||||
$(".login-container").fadeOut(500);
|
||||
window.setTimeout("$('#login-reg').html('Register');changeForm(0)", 500);
|
||||
$(".login-container").fadeIn(500);
|
||||
}
|
||||
});
|
||||
|
||||
function changeForm(code){
|
||||
$("#msg").addClass("hide");
|
||||
if (code == 1) {
|
||||
$(".login-title").html('Register');
|
||||
$("#confirm-passwd").show();
|
||||
$(".login-group").html('<button id="register" type="button" class="btn btn-default">Register</button>');
|
||||
window.history.pushState(null, null, "./index.php?action=register");
|
||||
document.title = "Register - Blessing Skin Server 0.1";
|
||||
} else {
|
||||
$(".login-title").html('Login');
|
||||
$("#confirm-passwd").hide();
|
||||
$(".login-group").html('<div class="checkbox-wrapper"><input id="keep" type="checkbox" class="checkbox"><label for="keep" class="checkbox-label"></label><span> Remember me</span></div><button id="login" type="button" class="btn btn-default">Log in</button>');
|
||||
window.history.pushState(null, null, "./index.php?action=login");
|
||||
document.title = "Login - Blessing Skin Server 0.1";
|
||||
}
|
||||
}
|
||||
8
assets/js/user.utils.js
Normal file
8
assets/js/user.utils.js
Normal file
@ -0,0 +1,8 @@
|
||||
/*
|
||||
* @Author: prpr
|
||||
* @Date: 2016-01-21 13:56:40
|
||||
* @Last Modified by: prpr
|
||||
* @Last Modified time: 2016-01-21 13:56:42
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
39
index.php
39
index.php
@ -7,6 +7,8 @@
|
||||
<link rel="stylesheet" href="./libs/pure/pure-min.css">
|
||||
<link rel="stylesheet" href="./libs/pure/grids-responsive-min.css">
|
||||
<link rel="stylesheet" href="./assets/css/style.css">
|
||||
<link rel="stylesheet" href="./libs/remodal/remodal.css">
|
||||
<link rel="stylesheet" href="./libs/remodal/remodal-default-theme.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -18,7 +20,7 @@
|
||||
<a href="#" class="pure-menu-link">Home</a>
|
||||
</li>
|
||||
<li class="pure-menu-item">
|
||||
<a href="#" class="pure-button pure-button-primary">Sign In</a>
|
||||
<a id="login" href="#login-modal" class="pure-button pure-button-primary">Sign In</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="home-menu-blur">
|
||||
@ -36,7 +38,7 @@
|
||||
Just a simple open-source Minecraft skin server
|
||||
</p>
|
||||
<p>
|
||||
<a href="http://purecss.io" class="pure-button pure-button-primary">Sign Up</a>
|
||||
<a id="register" href="#register-modal" class="pure-button pure-button-primary">Sign Up</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -45,5 +47,38 @@
|
||||
© <a class="copy" href="https://prinzeugen.net">Blessing Studio</a> 2016
|
||||
</div>
|
||||
|
||||
<div class="remodal" data-remodal-id="login-modal">
|
||||
<button data-remodal-action="close" class="remodal-close"></button>
|
||||
<h1 id="login-title">Sign In</h1>
|
||||
<form class="pure-form">
|
||||
<input class="pure-input" id="uname" type="text" placeholder="Username">
|
||||
<input class="pure-input" id="passwd" type="password" placeholder="Password">
|
||||
<br />
|
||||
<label for="keep" id="keep-label">
|
||||
<input id="keep" type="checkbox"> Remember me
|
||||
</label>
|
||||
<button id="login-button" class="pure-button pure-button-primary">Sign In</button>
|
||||
</form>
|
||||
<div id="msg" class="alert"></div>
|
||||
</div>
|
||||
|
||||
<div class="remodal" data-remodal-id="register-modal">
|
||||
<button data-remodal-action="close" class="remodal-close"></button>
|
||||
<h1 id="register-title">Sign Up</h1>
|
||||
<form class="pure-form">
|
||||
<input class="pure-input" id="reg-uname" type="text" placeholder="Username">
|
||||
<input class="pure-input" id="reg-passwd" type="password" placeholder="Password">
|
||||
<input class="pure-input" id="reg-passwd2" type="password" placeholder="Comfirm Password">
|
||||
<br />
|
||||
<button id="register-button" class="pure-button pure-button-primary">Sign Up</button>
|
||||
</form>
|
||||
<div id="msg" class="alert"></div>
|
||||
</div>
|
||||
|
||||
<script src="./libs/jquery/jquery-2.1.1.min.js"></script>
|
||||
<script src="./libs/cookie.js"></script>
|
||||
<script src="./libs/remodal/remodal.min.js"></script>
|
||||
<script src="./assets/js/index.utils.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
118
index2.php
118
index2.php
@ -1,118 +0,0 @@
|
||||
<?php
|
||||
/**
|
||||
* @Author: printempw
|
||||
* @Date: 2016-01-09 21:11:53
|
||||
* @Last Modified by: prpr
|
||||
* @Last Modified time: 2016-01-17 14:26:29
|
||||
*/
|
||||
session_start();
|
||||
function __autoload($classname) {
|
||||
$dir = dirname(__FILE__);
|
||||
$filename = "$dir/includes/". $classname .".class.php";
|
||||
include_once($filename);
|
||||
}
|
||||
|
||||
if (getValue('uname', $_COOKIE) && getValue('token', $_COOKIE)) {
|
||||
$user = new user($_COOKIE['uname']);
|
||||
if ($_COOKIE['token'] == $user -> getToken()) {
|
||||
$_SESSION['uname'] = $_COOKIE['uname'];
|
||||
$_SESSION['token'] = $user -> getToken();
|
||||
}
|
||||
}
|
||||
|
||||
function getValue($key, $array) {
|
||||
if (array_key_exists($key, $array)) {
|
||||
return $array[$key];
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function echoScript($script) {
|
||||
echo "<script>".$script."</script>";
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Index - Blessing Skin Server 0.1</title>
|
||||
<link rel="stylesheet" href="./libs/bootstrap/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="./assets/css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<a style="font-family:Minecraft;" class="navbar-brand" href="./index.php">Blessing Skin Server</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse">
|
||||
<!-- <ul class="nav navbar-nav">
|
||||
<li><a href="#">Link</a></li>
|
||||
</ul> -->
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li><a id="login-reg" href="javascript:;"><?php
|
||||
if (getValue('action', $_GET) == "register") {
|
||||
echo "Login";
|
||||
} else {
|
||||
echo "Register";
|
||||
}
|
||||
?></a></li>
|
||||
</ul>
|
||||
</div><!-- /.navbar-collapse -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</nav>
|
||||
</header>
|
||||
<div class="main">
|
||||
<img class="l" src="./assets/images/skin.png" />
|
||||
<div class="login-container r">
|
||||
<h2 class="login-title">Log in</h2>
|
||||
<div id="login-form">
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
|
||||
<input name="username" id="uname" type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
|
||||
<input name="password" id="passwd" type="password" class="form-control" placeholder="Password">
|
||||
</div>
|
||||
<div id="confirm-passwd" style="display:none;" class="input-group">
|
||||
<span class="input-group-addon"><span class="glyphicon glyphicon-ok"></span></span>
|
||||
<input name="comfirm-passwd" id="cpasswd" type="password" class="form-control" placeholder="Confirm Password">
|
||||
</div>
|
||||
<div class="login-group">
|
||||
<div class="checkbox-wrapper">
|
||||
<input id="keep" type="checkbox" class="checkbox">
|
||||
<label for="keep" class="checkbox-label"></label><span> Remember me</span>
|
||||
</div>
|
||||
<button id="login" type="button" class="btn btn-default">Log in</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="msg-container">
|
||||
<div id="msg" class="alert hide" role="alert" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<p>© <a class="copy" href="https://prinzeugen.net">Blessing Studio</a> 2015</p>
|
||||
</footer>
|
||||
</body>
|
||||
<script type="text/javascript" src="./libs/jquery/jquery-1.9.1.min.js"></script>
|
||||
<script type="text/javascript" src="./libs/cookie.js"></script>
|
||||
<script type="text/javascript" src="./assets/js/login_utils.js"></script>
|
||||
<?php
|
||||
if (getValue('action', $_GET) == "register") {
|
||||
echoScript("changeForm(1);");
|
||||
}
|
||||
if ($msg = getValue('msg', $_GET)) {
|
||||
echoScript("showMsg('alert-warning','".$msg."');");
|
||||
}
|
||||
|
||||
if (getValue('uname', $_SESSION)) {
|
||||
echoScript("$('.login-title').html('Welcome');");
|
||||
echoScript("$('#login-form').html('<a href=\"./user/index.php\">User Center</a>');");
|
||||
echoScript("$('.navbar-right').html('<li><a href=\"javascript:;\">Welcome,".$_SESSION['uname']."!</a><li>');");
|
||||
}
|
||||
?>
|
||||
<script type="text/javascript" src="./assets/js/ajax.js"></script>
|
||||
</html>
|
||||
5
libs/jquery/jquery-1.9.1.min.js
vendored
5
libs/jquery/jquery-1.9.1.min.js
vendored
File diff suppressed because one or more lines are too long
224
libs/ply/ply.css
224
libs/ply/ply.css
@ -1,224 +0,0 @@
|
||||
/* Global loading */
|
||||
.ply-global-loading {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
padding: 30px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: -100px 0 0 -60px;
|
||||
z-index: 100000;
|
||||
position: fixed;
|
||||
border-radius: 10%;
|
||||
background-color: rgba(255,255,255,.5);
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.ply-loading-spinner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: .9;
|
||||
background: #fff;
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,.6);
|
||||
}
|
||||
|
||||
.ply-loading-spinner::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #333;
|
||||
max-height: 0;
|
||||
-webkit-animation: loading 3s normal infinite;
|
||||
animation: loading 3s normal infinite;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% { max-height: 0; }
|
||||
50% { max-height: 100%; top: 0; }
|
||||
100% { max-height: 0; top: 120%; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes loading {
|
||||
0% { max-height: 0; }
|
||||
50% { max-height: 100%; top: 0; }
|
||||
100% { max-height: 0; top: 120%; }
|
||||
}
|
||||
|
||||
|
||||
/* Layer */
|
||||
.ply-layer {
|
||||
color: #333;
|
||||
min-width: 280px;
|
||||
box-shadow: 0 0 3px rgba(0,0,0,.3);
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
font-size: 16px;
|
||||
font-family: "Arial", Helvetica;
|
||||
}
|
||||
.ply-layer.alert .ply-content,
|
||||
.ply-layer.confirm .ply-content {
|
||||
padding: 20px 0 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ply-layer.base .ply-footer,
|
||||
.ply-layer.alert .ply-footer,
|
||||
.ply-layer.confirm .ply-footer,
|
||||
.ply-layer.prompt .ply-footer {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ply-inside {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.ply-header {
|
||||
margin: -20px -20px 20px;
|
||||
padding: 10px 20px;
|
||||
font-size: 18px;
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 2px 2px 0 0;
|
||||
}
|
||||
|
||||
.ply-content {
|
||||
}
|
||||
|
||||
.ply-footer {
|
||||
}
|
||||
.ply-footer .ply-ctrl {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.ply-footer .ply-ctrl:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Controls */
|
||||
.ply-x {
|
||||
top: 12px;
|
||||
right: 5px;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
font-size: 20px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.ply-ok,
|
||||
.ply-cancel {
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
padding: 5px 20px;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.2);
|
||||
background-color: #39C082;
|
||||
border-radius: 3px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.ply-ok {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.ply-cancel {
|
||||
background-color: #b2b2b2;
|
||||
}
|
||||
.ply-ok:focus,
|
||||
.ply-cancel:focus {
|
||||
box-shadow: 0 0 1px 2px rgba(255, 180, 0, .6);
|
||||
border: 2px solid rgb(255, 210, 102)\9;
|
||||
}
|
||||
|
||||
.ply-ok::-moz-focus-inner,
|
||||
.ply-cancel::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Forms */
|
||||
.ply-input {
|
||||
width: 100%;
|
||||
border: 2px solid #ccc;
|
||||
outline: 0;
|
||||
padding: 5px 10px;
|
||||
margin-top: 15px;
|
||||
font-size: 16px;
|
||||
font-family: "Arial", Helvetica;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.ply-input:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ply-input:focus {
|
||||
border-color: #39C082;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Global modifiers */
|
||||
.ply-invalid .ply-input {
|
||||
border-color: #c00;
|
||||
}
|
||||
|
||||
.ply-loading:before {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ply-loading .ply-ok {
|
||||
color: rgba(255,255,255,.7);
|
||||
-webkit-animation: ply-ok-loading 1s linear infinite;
|
||||
-moz-animation: ply-ok-loading 1s linear infinite;
|
||||
animation: ply-ok-loading 1s linear infinite;
|
||||
-webkit-background-size: 30px 30px;
|
||||
-moz-background-size: 30px 30px;
|
||||
background-size: 30px 30px;
|
||||
background-image: -webkit-gradient(linear, left top, right bottom,
|
||||
color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
|
||||
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
|
||||
color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
|
||||
to(transparent));
|
||||
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
|
||||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
|
||||
transparent 75%, transparent);
|
||||
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
|
||||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
|
||||
transparent 75%, transparent);
|
||||
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
|
||||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
|
||||
transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
|
||||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
|
||||
transparent 75%, transparent);
|
||||
background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
|
||||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
|
||||
transparent 75%, transparent);
|
||||
}
|
||||
|
||||
@-webkit-keyframes ply-ok-loading {
|
||||
to { background-position: 60px; }
|
||||
}
|
||||
|
||||
@-moz-keyframes ply-ok-loading {
|
||||
to { background-position: 60px; }
|
||||
}
|
||||
|
||||
@keyframes ply-ok-loading {
|
||||
to { background-position: 60px; }
|
||||
}
|
||||
2
libs/ply/ply.min.js
vendored
2
libs/ply/ply.min.js
vendored
File diff suppressed because one or more lines are too long
118
libs/pure/pure-min.css
vendored
118
libs/pure/pure-min.css
vendored
File diff suppressed because one or more lines are too long
312
libs/remodal/remodal-default-theme.css
Normal file
312
libs/remodal/remodal-default-theme.css
Normal file
@ -0,0 +1,312 @@
|
||||
/*
|
||||
* Remodal - v1.0.6
|
||||
* Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
|
||||
* http://vodkabears.github.io/remodal/
|
||||
*
|
||||
* Made by Ilya Makarov
|
||||
* Under MIT License
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
Remodal's default mobile first theme
|
||||
========================================================================== */
|
||||
|
||||
/* Default theme styles for the background */
|
||||
|
||||
.remodal-bg.remodal-is-opening,
|
||||
.remodal-bg.remodal-is-opened {
|
||||
-webkit-filter: blur(3px);
|
||||
filter: blur(3px);
|
||||
}
|
||||
|
||||
/* Default theme styles of the overlay */
|
||||
|
||||
.remodal-overlay {
|
||||
background: rgba(43, 46, 56, 0.9);
|
||||
}
|
||||
|
||||
.remodal-overlay.remodal-is-opening,
|
||||
.remodal-overlay.remodal-is-closing {
|
||||
-webkit-animation-duration: 0.3s;
|
||||
animation-duration: 0.3s;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.remodal-overlay.remodal-is-opening {
|
||||
-webkit-animation-name: remodal-overlay-opening-keyframes;
|
||||
animation-name: remodal-overlay-opening-keyframes;
|
||||
}
|
||||
|
||||
.remodal-overlay.remodal-is-closing {
|
||||
-webkit-animation-name: remodal-overlay-closing-keyframes;
|
||||
animation-name: remodal-overlay-closing-keyframes;
|
||||
}
|
||||
|
||||
/* Default theme styles of the wrapper */
|
||||
|
||||
.remodal-wrapper {
|
||||
padding: 10px 10px 0;
|
||||
}
|
||||
|
||||
/* Default theme styles of the modal dialog */
|
||||
|
||||
.remodal {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
padding: 35px;
|
||||
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
|
||||
color: #2b2e38;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.remodal.remodal-is-opening,
|
||||
.remodal.remodal-is-closing {
|
||||
-webkit-animation-duration: 0.3s;
|
||||
animation-duration: 0.3s;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.remodal.remodal-is-opening {
|
||||
-webkit-animation-name: remodal-opening-keyframes;
|
||||
animation-name: remodal-opening-keyframes;
|
||||
}
|
||||
|
||||
.remodal.remodal-is-closing {
|
||||
-webkit-animation-name: remodal-closing-keyframes;
|
||||
animation-name: remodal-closing-keyframes;
|
||||
}
|
||||
|
||||
/* Vertical align of the modal dialog */
|
||||
|
||||
.remodal,
|
||||
.remodal-wrapper:after {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Close button */
|
||||
|
||||
.remodal-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: block;
|
||||
overflow: visible;
|
||||
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
cursor: pointer;
|
||||
-webkit-transition: color 0.2s;
|
||||
transition: color 0.2s;
|
||||
text-decoration: none;
|
||||
|
||||
color: #95979c;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.remodal-close:hover,
|
||||
.remodal-close:focus {
|
||||
color: #2b2e38;
|
||||
}
|
||||
|
||||
.remodal-close:before {
|
||||
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
|
||||
font-size: 25px;
|
||||
line-height: 35px;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: block;
|
||||
|
||||
width: 35px;
|
||||
|
||||
content: "\00d7";
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Dialog buttons */
|
||||
|
||||
.remodal-confirm,
|
||||
.remodal-cancel {
|
||||
font: inherit;
|
||||
|
||||
display: inline-block;
|
||||
overflow: visible;
|
||||
|
||||
min-width: 110px;
|
||||
margin: 0;
|
||||
padding: 12px 0;
|
||||
|
||||
cursor: pointer;
|
||||
-webkit-transition: background 0.2s;
|
||||
transition: background 0.2s;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.remodal-confirm {
|
||||
color: #fff;
|
||||
background: #81c784;
|
||||
}
|
||||
|
||||
.remodal-confirm:hover,
|
||||
.remodal-confirm:focus {
|
||||
background: #66bb6a;
|
||||
}
|
||||
|
||||
.remodal-cancel {
|
||||
color: #fff;
|
||||
background: #e57373;
|
||||
}
|
||||
|
||||
.remodal-cancel:hover,
|
||||
.remodal-cancel:focus {
|
||||
background: #ef5350;
|
||||
}
|
||||
|
||||
/* Remove inner padding and border in Firefox 4+ for the button tag. */
|
||||
|
||||
.remodal-confirm::-moz-focus-inner,
|
||||
.remodal-cancel::-moz-focus-inner,
|
||||
.remodal-close::-moz-focus-inner {
|
||||
padding: 0;
|
||||
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Keyframes
|
||||
========================================================================== */
|
||||
|
||||
@-webkit-keyframes remodal-opening-keyframes {
|
||||
from {
|
||||
-webkit-transform: scale(1.05);
|
||||
transform: scale(1.05);
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes remodal-opening-keyframes {
|
||||
from {
|
||||
-webkit-transform: scale(1.05);
|
||||
transform: scale(1.05);
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes remodal-closing-keyframes {
|
||||
from {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
-webkit-transform: scale(0.95);
|
||||
transform: scale(0.95);
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes remodal-closing-keyframes {
|
||||
from {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
-webkit-transform: scale(0.95);
|
||||
transform: scale(0.95);
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes remodal-overlay-opening-keyframes {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes remodal-overlay-opening-keyframes {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes remodal-overlay-closing-keyframes {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes remodal-overlay-closing-keyframes {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Media queries
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (min-width: 641px) {
|
||||
.remodal {
|
||||
max-width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
/* IE8
|
||||
========================================================================== */
|
||||
|
||||
.lt-ie9 .remodal-overlay {
|
||||
background: #2b2e38;
|
||||
}
|
||||
|
||||
.lt-ie9 .remodal {
|
||||
width: 700px;
|
||||
}
|
||||
94
libs/remodal/remodal.css
Normal file
94
libs/remodal/remodal.css
Normal file
@ -0,0 +1,94 @@
|
||||
/*
|
||||
* Remodal - v1.0.6
|
||||
* Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
|
||||
* http://vodkabears.github.io/remodal/
|
||||
*
|
||||
* Made by Ilya Makarov
|
||||
* Under MIT License
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
Remodal's necessary styles
|
||||
========================================================================== */
|
||||
|
||||
/* Hide scroll bar */
|
||||
|
||||
html.remodal-is-locked {
|
||||
overflow: hidden;
|
||||
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
/* Anti FOUC */
|
||||
|
||||
.remodal,
|
||||
[data-remodal-id] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Necessary styles of the overlay */
|
||||
|
||||
.remodal-overlay {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
top: -5000px;
|
||||
right: -5000px;
|
||||
bottom: -5000px;
|
||||
left: -5000px;
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Necessary styles of the wrapper */
|
||||
|
||||
.remodal-wrapper {
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
display: none;
|
||||
overflow: auto;
|
||||
|
||||
text-align: center;
|
||||
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.remodal-wrapper:after {
|
||||
display: inline-block;
|
||||
|
||||
height: 100%;
|
||||
margin-left: -0.05em;
|
||||
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Fix iPad, iPhone glitches */
|
||||
|
||||
.remodal-overlay,
|
||||
.remodal-wrapper {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
/* Necessary styles of the modal dialog */
|
||||
|
||||
.remodal {
|
||||
position: relative;
|
||||
|
||||
outline: none;
|
||||
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-moz-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.remodal-is-initialized {
|
||||
/* Disable Anti-FOUC */
|
||||
display: inline-block;
|
||||
}
|
||||
10
libs/remodal/remodal.min.js
vendored
Normal file
10
libs/remodal/remodal.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user