refactor front-end with Pure.css
This commit is contained in:
printempw
parent
49991c7ff7
commit
c981e181be
|
|
@ -1,123 +1,229 @@
|
|||
@font-face {
|
||||
font-family: 'Minecraft';
|
||||
src: url('../fonts/minecraft.eot');
|
||||
src: url('../fonts/minecraft.eot') format('embedded-opentype'),
|
||||
url('../fonts/minecraft.woff2') format('woff2'),
|
||||
url('../fonts/minecraft.woff') format('woff'),
|
||||
url('../fonts/minecraft.ttf') format('truetype'),
|
||||
url('../fonts/minecraft.svg#minecraft') format('svg');
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: url(../images/bg_stone.png);
|
||||
background-repeat: repeat;
|
||||
}
|
||||
|
||||
.copy {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
img.l {
|
||||
width: 44%;
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.navbar-default {
|
||||
background-color: rgba(255,255,255,.9);
|
||||
border-color: transparent;
|
||||
box-shadow: rgba(0,0,0,0.1) 0 1px 2px;
|
||||
}
|
||||
|
||||
.l {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.r {
|
||||
float: right;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.login-container, .upload-container {
|
||||
margin-top: 8%;
|
||||
margin-right: 10%;
|
||||
border: #989898 1px solid;
|
||||
border-radius: 4px;
|
||||
width: 300px;
|
||||
padding: 40px 40px 40px 40px;
|
||||
background: rgba(255,255,255,.9);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin: 20px 0 20px 0;
|
||||
}
|
||||
|
||||
.login-group {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
div .keep {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#login {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#login-form {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.login-title, .upload-title {
|
||||
font-family: Minecraft;
|
||||
margin: 5px 0 30px 0;
|
||||
}
|
||||
|
||||
.checkbox-wrapper {
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: #fff;
|
||||
border: 1px solid #e5e6e7;
|
||||
margin-bottom: -3px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.checkbox:checked+label {
|
||||
background: url(../images/check.png);
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 95%;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.alert {
|
||||
margin-bottom: 0px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#canvas3d {
|
||||
margin-left: 30%;
|
||||
}
|
||||
/*
|
||||
* @Author: prpr
|
||||
* @Date: 2016-01-21 07:57:38
|
||||
* @Last Modified by: prpr
|
||||
* @Last Modified time: 2016-01-21 12:49:17
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Minecraft';
|
||||
src: url('../fonts/minecraft.eot');
|
||||
src: url('../fonts/minecraft.eot') format('embedded-opentype'),
|
||||
url('../fonts/minecraft.woff2') format('woff2'),
|
||||
url('../fonts/minecraft.woff') format('woff'),
|
||||
url('../fonts/minecraft.ttf') format('truetype'),
|
||||
url('../fonts/minecraft.svg#minecraft') format('svg');
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1.7em;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.home-menu {
|
||||
padding: 0;
|
||||
/*padding: 0.3em 0.5em 0.3em 0.5em;*/
|
||||
text-align: center;
|
||||
/*border: 1px solid transparent;*/
|
||||
box-shadow: rgba(0,0,0,0.1) 0 1px 2px;
|
||||
/* for firefox */
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.home-menu .pure-menu-heading {
|
||||
color: #5e5e5e;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
font-family: Minecraft;
|
||||
text-transform: none;
|
||||
}
|
||||
.pure-menu-heading:hover {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.home-menu .pure-menu-selected a {
|
||||
color: #5e5e5e;
|
||||
}
|
||||
|
||||
.home-menu a {
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
}
|
||||
.pure-menu-link:hover,
|
||||
.pure-menu-link:focus {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #0078e7 !important;
|
||||
}
|
||||
.pure-button {
|
||||
margin: .5em 1em;
|
||||
}
|
||||
.home-menu-blur {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -100;
|
||||
}
|
||||
.home-menu-wrp {
|
||||
height: 100%;
|
||||
background-color: rgba(255,255,255,0.4);
|
||||
}
|
||||
.home-menu-bg {
|
||||
background-image: url("http://ww4.sinaimg.cn/large/823186a6gw1enwts09sbrj21hc0u016u.jpg");
|
||||
background-position: center 0;
|
||||
background-size: auto 800px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
filter: blur(5px);
|
||||
-webkit-filter: blur(5px);
|
||||
-moz-filter: blur(5px);
|
||||
-o-filter: blur(5px);
|
||||
-ms-filter: blur(5px);
|
||||
box-shadow: rgba(0,0,0,0.1) 0 1px 2px;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-image:
|
||||
url("http://ww4.sinaimg.cn/large/823186a6gw1enwts09sbrj21hc0u016u.jpg");
|
||||
/* background-size: cover; */
|
||||
background-size: auto 800px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: fixed !important;
|
||||
}
|
||||
|
||||
.splash {
|
||||
width: 80%;
|
||||
height: 50%;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 100px; left: 0; bottom: 0; right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.splash-head {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
padding: 1em 0.5em;
|
||||
font-weight: 100;
|
||||
line-height: 1.5em;
|
||||
margin: 0.2em 0 0.5em;
|
||||
font-family: Minecraft;
|
||||
text-shadow:
|
||||
0px 4px 3px rgba(0,0,0,0.4),
|
||||
0px 8px 13px rgba(0,0,0,0.1),
|
||||
0px 18px 23px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.splash-subhead {
|
||||
letter-spacing: 0.05em;
|
||||
margin-top: 0.8em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.container .pure-button {
|
||||
color: white;
|
||||
padding: 0.8em 2.5em;
|
||||
border-radius: 5px;
|
||||
background: transparent;
|
||||
border: 1px solid #fff;
|
||||
font-size: 120%;
|
||||
transition: color 0.25s ease-in-out,
|
||||
border-color 0.25s ease-in-out,
|
||||
background-color 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
.container .pure-button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
/*.container a.pure-button-primary {
|
||||
|
||||
}*/
|
||||
|
||||
.footer {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 93%;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
color: #1f8dd6;
|
||||
}
|
||||
|
||||
/* Mobile phone */
|
||||
@media (max-width: 48em) {
|
||||
.home-menu .pure-menu-selected a {
|
||||
display: none;
|
||||
}
|
||||
/*.home-menu-bg {
|
||||
background-size: inherit;
|
||||
background-position-x: center;
|
||||
}*/
|
||||
.splash-head {
|
||||
font-size: 200%;
|
||||
}
|
||||
.splash {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
/*.splash-subhead {
|
||||
font-size: 200%;
|
||||
}*/
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 48em) {
|
||||
|
||||
body {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.home-menu {
|
||||
text-align: left;
|
||||
}
|
||||
.home-menu ul {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.splash {
|
||||
width: 80%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.splash-head {
|
||||
font-size: 250%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 78em) {
|
||||
.splash-head {
|
||||
font-size: 300%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-height: 800px) {
|
||||
.home-menu-bg,
|
||||
.container {
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
123
assets/css/style1.css
Normal file
123
assets/css/style1.css
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
@font-face {
|
||||
font-family: 'Minecraft';
|
||||
src: url('../fonts/minecraft.eot');
|
||||
src: url('../fonts/minecraft.eot') format('embedded-opentype'),
|
||||
url('../fonts/minecraft.woff2') format('woff2'),
|
||||
url('../fonts/minecraft.woff') format('woff'),
|
||||
url('../fonts/minecraft.ttf') format('truetype'),
|
||||
url('../fonts/minecraft.svg#minecraft') format('svg');
|
||||
}
|
||||
|
||||
body {
|
||||
background-image: url(../images/bg_stone.png);
|
||||
background-repeat: repeat;
|
||||
}
|
||||
|
||||
.copy {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
img.l {
|
||||
width: 44%;
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.navbar-default {
|
||||
background-color: rgba(255,255,255,.9);
|
||||
border-color: transparent;
|
||||
box-shadow: rgba(0,0,0,0.1) 0 1px 2px;
|
||||
}
|
||||
|
||||
.l {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.r {
|
||||
float: right;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.login-container, .upload-container {
|
||||
margin-top: 8%;
|
||||
margin-right: 10%;
|
||||
border: #989898 1px solid;
|
||||
border-radius: 4px;
|
||||
width: 300px;
|
||||
padding: 40px 40px 40px 40px;
|
||||
background: rgba(255,255,255,.9);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin: 20px 0 20px 0;
|
||||
}
|
||||
|
||||
.login-group {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
div .keep {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#login {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#login-form {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.login-title, .upload-title {
|
||||
font-family: Minecraft;
|
||||
margin: 5px 0 30px 0;
|
||||
}
|
||||
|
||||
.checkbox-wrapper {
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 15%;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: #fff;
|
||||
border: 1px solid #e5e6e7;
|
||||
margin-bottom: -3px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.checkbox:checked+label {
|
||||
background: url(../images/check.png);
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 95%;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.alert {
|
||||
margin-bottom: 0px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#canvas3d {
|
||||
margin-left: 30%;
|
||||
}
|
||||
167
index.php
167
index.php
|
|
@ -1,118 +1,49 @@
|
|||
<?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>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Home - Blessing Skin Server</title>
|
||||
<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">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
|
||||
<a class="pure-menu-heading" href="#">Blessing Skin Server</a>
|
||||
<ul class="pure-menu-list">
|
||||
<li class="pure-menu-item pure-menu-selected">
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="home-menu-blur">
|
||||
<div class="home-menu-wrp">
|
||||
<div class="home-menu-bg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="splash">
|
||||
<h1 class="splash-head">Blessing Skin Server</h1>
|
||||
<p class="splash-subhead">
|
||||
Just a simple open-source Minecraft skin server
|
||||
</p>
|
||||
<p>
|
||||
<a href="http://purecss.io" class="pure-button pure-button-primary">Sign Up</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
© <a class="copy" href="https://prinzeugen.net">Blessing Studio</a> 2016
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
118
index2.php
Normal file
118
index2.php
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
<?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-2.1.1.min.js
vendored
Normal file
5
libs/jquery/jquery-2.1.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
224
libs/ply/ply.css
Normal file
224
libs/ply/ply.css
Normal file
|
|
@ -0,0 +1,224 @@
|
|||
/* 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
Normal file
2
libs/ply/ply.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
7
libs/pure/grids-responsive-min.css
vendored
Normal file
7
libs/pure/grids-responsive-min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
11
libs/pure/pure-min.css
vendored
Normal file
11
libs/pure/pure-min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user