mirror of
https://github.com/SapphireServer/Sapphire.git
synced 2025-04-25 14:07:46 +00:00
Mordred
GitHub
commit
b8fb48c441
10 changed files with 288 additions and 57 deletions
|
|
@ -1,18 +1,20 @@
|
|||
body{
|
||||
font-family:Verdana;
|
||||
font-size:10pt;
|
||||
line-height:14pt;
|
||||
height:100%;
|
||||
background-image:url(../../assets/img/background.png);
|
||||
background-color:#282828;
|
||||
html {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
div.contentContainer{
|
||||
body {
|
||||
font-family: Meiryo, Verdana, sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.contentContainer{
|
||||
width:50%;
|
||||
float:left;
|
||||
}
|
||||
|
||||
div.info{
|
||||
.info{
|
||||
width:320px;
|
||||
height:100%;
|
||||
margin-left:auto;
|
||||
|
|
@ -22,7 +24,7 @@ div.info{
|
|||
background-color:lightgrey;
|
||||
}
|
||||
|
||||
div.infoFooter{
|
||||
.infoFooter{
|
||||
width:400px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,141 @@
|
|||
div#TopDiv{
|
||||
padding:10px;
|
||||
.s-logo {
|
||||
padding: 25px 65px 15px 65px;
|
||||
}
|
||||
|
||||
.s-logo > img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
Consider using vh?
|
||||
*/
|
||||
.s-left-half {
|
||||
left: 0;
|
||||
background: #003d65 ; /* Old browsers */
|
||||
background: -webkit-linear-gradient(#053250 0%, #13143F 100%);
|
||||
background: -o-linear-gradient(#053250 0%, #13143F 100%);
|
||||
background: linear-gradient(#053250 0%, #13143F 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#053250', endColorstr='#13143F',GradientType=0 );
|
||||
box-shadow: inset -4px 0px 4px -3px #1a1a1ab3;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.s-right-half {
|
||||
right: 0;
|
||||
background: #232326;
|
||||
border-left: 6px solid #1a1a20;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.s-full-split {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
float: left;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.s-login-box {
|
||||
background: #1a1a20;
|
||||
position: relative;
|
||||
z-index: 15;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.s-login-box-form {
|
||||
padding: 0 35px 8px 25px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.s-login-input-wrapper {
|
||||
color: white;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.s-login-input-wrapper > input {
|
||||
background: #444;
|
||||
border: 0;
|
||||
border-bottom: 3px solid #595959;
|
||||
padding: 7px 0 7px 7px;
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
font-size: 13px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.s-login-input-wrapper > input:focus {
|
||||
border-color: #1868C2;
|
||||
}
|
||||
|
||||
.s-login-input-wrapper > input:active {
|
||||
border-color: #1868C2;
|
||||
}
|
||||
|
||||
.s-login-input-wrapper > input:hover {
|
||||
border-color: #1868C2;
|
||||
}
|
||||
|
||||
.btn.btn-default {
|
||||
border: 0;
|
||||
color: white;
|
||||
border-radius: 0;
|
||||
font-weight: normal;
|
||||
text-shadow: none;
|
||||
box-shadow: none;
|
||||
border-color: #1868C2;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
|
||||
.s-login-btn {
|
||||
width: 150px;
|
||||
background: #0e6bc9;
|
||||
right: -7px; /* ugh. refer to padding-left on input above - more bounding box issues... */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.s-login-btn:hover {
|
||||
width: 150px;
|
||||
background: #3593f2;
|
||||
}
|
||||
|
||||
.s-acc-btn {
|
||||
width: 100%;
|
||||
background: #3B3B3B;
|
||||
padding: 5px 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.s-acc-btn:hover {
|
||||
background: #6b6b6b;
|
||||
}
|
||||
|
||||
.s-error-text {
|
||||
color: #ff3333;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.s-gears {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 35%;
|
||||
max-width: 350px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.s-gears > img {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
bottom: -40px;
|
||||
}
|
||||
|
||||
img{
|
||||
|
|
@ -12,8 +148,39 @@ h2.text-center{
|
|||
color:#fff;
|
||||
}
|
||||
|
||||
h1.text-center{
|
||||
color:#FFF;
|
||||
.s-login-call{
|
||||
color: #fff;
|
||||
margin-top: 15px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.s-link-badge-wrapper {
|
||||
clear: both;
|
||||
|
||||
}
|
||||
|
||||
.s-link-badge {
|
||||
background: #fff;
|
||||
line-height: 48px;
|
||||
text-indent: 55px;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
font-size: 17px;
|
||||
margin-top: 25px;
|
||||
color: white;
|
||||
border-bottom: 3px solid #443C6B;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.s-link-badge-discord {
|
||||
background: #7082E1 url("../img/fa-discord-icon.png") 10px 7px no-repeat;
|
||||
margin-right: 60px; /* Ideally we'd just use pull-right with the last col-xs-5 but IE7 bounding box render??? */
|
||||
}
|
||||
|
||||
.s-link-badge-github {
|
||||
background: #fff url("../img/github-icon.png") 10px 7px no-repeat;
|
||||
color: #333;
|
||||
border-bottom-color: #474747;
|
||||
}
|
||||
|
||||
div.login-card{
|
||||
|
|
@ -30,11 +197,7 @@ input.input-sm{
|
|||
margin-right:auto;
|
||||
}
|
||||
|
||||
div#Conttwo.container{
|
||||
display:block;
|
||||
width:300px;
|
||||
background-color:rgba(17, 17, 17, 0.77);
|
||||
}
|
||||
|
||||
|
||||
div#Split{
|
||||
padding:2px;
|
||||
|
|
|
|||
BIN
bin/web/assets/img/fa-discord-icon.png
Normal file
BIN
bin/web/assets/img/fa-discord-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
bin/web/assets/img/github-icon.png
Normal file
BIN
bin/web/assets/img/github-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
bin/web/assets/img/graffletopia-gears.png
Normal file
BIN
bin/web/assets/img/graffletopia-gears.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 344 KiB After Width: | Height: | Size: 399 KiB |
BIN
bin/web/assets/img/sapphire_logo_resize.png
Normal file
BIN
bin/web/assets/img/sapphire_logo_resize.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
|
|
@ -4,7 +4,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Sapphire Create Account</title>
|
||||
<title>Sapphire - Account Creation</title>
|
||||
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="assets/css/styles.css">
|
||||
<link rel="stylesheet" href="assets/css/global.css">
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
var parsed = JSON.parse(response);
|
||||
window.external.Boot(parsed.sId, parsed.lobbyHost, parsed.frontierHost);
|
||||
}catch(err){
|
||||
document.getElementById("Error").innerHTML = "Create User failed.";
|
||||
document.getElementById("Error").innerHTML = "User creation failed.";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -46,25 +46,55 @@
|
|||
</head>
|
||||
|
||||
<body scroll="no">
|
||||
<div id="TopDiv"></div>
|
||||
<div class="container"><img src="assets/img/sapphire_logo.png" width="40%" height="40%"></div>
|
||||
<div class="container" id="Conttwo">
|
||||
<div></div>
|
||||
<h1 class="text-center">Create Account</h1>
|
||||
<p class="text-center">Username: </p>
|
||||
<td><input type="text" name="username" /></td>
|
||||
<div id="Split"></div>
|
||||
<p class="text-center">Password: </p>
|
||||
<td><input type="password" name="password" /></td>
|
||||
<div id="space"></div>
|
||||
<button class="btn btn-default" input id="submitButton" onclick="doLogin()">Create User</button>
|
||||
<p id="Error" class="text-center"></p>
|
||||
<div id="Split">
|
||||
<p id="CreateUser"><a href="login.html"><span style="text-decoration: underline;">Back to Login</span></a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="s-full-split s-left-half col-xs-7">
|
||||
<div class="clearfix s-link-badge-wrapper">
|
||||
<a href="https://discord.gg/KfrZCkx" target="_blank" class="s-link-badge s-link-badge-discord col-xs-5">
|
||||
Join us on Discord!
|
||||
</a>
|
||||
<a href="https://github.com/SapphireMordred/Sapphire" target="_blank" class="s-link-badge s-link-badge-github col-xs-5 pull-left">
|
||||
Our Github repository
|
||||
</a>
|
||||
</div>
|
||||
<h2>Github stuff here soon!</h2>
|
||||
</div>
|
||||
<div class="s-full-split s-right-half col-xs-5">
|
||||
<div class="s-logo">
|
||||
<img src="assets/img/sapphire_logo_resize.png">
|
||||
</div>
|
||||
<div class="s-login-box col-xs-12">
|
||||
<div class="s-login-box-form">
|
||||
<h1 class="text-center s-login-call">Account Creation</h1>
|
||||
<div class="input-control">
|
||||
<label class="s-login-input-wrapper">
|
||||
Username
|
||||
<input type="text" name="username" autofocus>
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label class="s-login-input-wrapper">
|
||||
Password
|
||||
<input type="password" name="password">
|
||||
</label>
|
||||
</div>
|
||||
<button class="btn btn-default s-login-btn pull-right" id="CreateUser" onclick="doLogin()">Create Account</button>
|
||||
<p id="Error" class="s-error-text"></p>
|
||||
</div>
|
||||
<a class="btn btn-default s-acc-btn" href="login.html">Back to Login</a>
|
||||
</div>
|
||||
<div class="s-gears">
|
||||
<img class="s-gears" src="assets/img/graffletopia-gears.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<script src="assets/js/jquery.min.js"></script>
|
||||
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
|
||||
<script> // Run only after jq and bootstrap have finished loading
|
||||
|
||||
// Work around non-HTML5 compliant IE autofocus
|
||||
$(function() {
|
||||
$('[autofocus]:not(:focus)').eq(0).focus();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -4,11 +4,11 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Sapphire login</title>
|
||||
<title>Sapphire - Login</title>
|
||||
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="assets/css/styles.css">
|
||||
<link rel="stylesheet" href="assets/css/global.css">
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
|
||||
<script>
|
||||
function doLogin(){
|
||||
var url = "sapphire-api/lobby/login";
|
||||
|
|
@ -41,30 +41,66 @@
|
|||
data = xhr.response;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body scroll="no">
|
||||
<div class="s-full-split s-left-half col-xs-7">
|
||||
<div class="clearfix s-link-badge-wrapper">
|
||||
<a href="https://discord.gg/KfrZCkx" target="_blank" class="s-link-badge s-link-badge-discord col-xs-5">
|
||||
Join us on Discord!
|
||||
</a>
|
||||
<a href="https://github.com/SapphireMordred/Sapphire" target="_blank" class="s-link-badge s-link-badge-github col-xs-5 pull-left">
|
||||
Our Github repository
|
||||
</a>
|
||||
</div>
|
||||
<h2>Github stuff here soon!</h2>
|
||||
</div>
|
||||
<div class="s-full-split s-right-half col-xs-5">
|
||||
<div class="s-logo">
|
||||
<img src="assets/img/sapphire_logo_resize.png">
|
||||
</div>
|
||||
<div class="s-login-box col-xs-12">
|
||||
<div class="s-login-box-form">
|
||||
<h1 class="text-center s-login-call">Login to Account</h1>
|
||||
<div class="input-control">
|
||||
<label class="s-login-input-wrapper">
|
||||
Username
|
||||
<input type="text" name="username" autofocus>
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label class="s-login-input-wrapper">
|
||||
Password
|
||||
<input type="password" name="password">
|
||||
</label>
|
||||
</div>
|
||||
<button class="btn btn-default s-login-btn pull-right" id="submitButton" onclick="doLogin()">Login</button>
|
||||
<p id="Error" class="s-error-text"></p>
|
||||
</div>
|
||||
<a class="btn btn-default s-acc-btn" href="createUser.html">Create Account</a>
|
||||
</div>
|
||||
<div class="s-gears">
|
||||
<img class="s-gears" src="assets/img/graffletopia-gears.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div id="TopDiv"></div>
|
||||
<div class="container"><img src="assets/img/sapphire_logo.png" width="40%" height="40%"></div>
|
||||
<div class="container" id="Conttwo">
|
||||
<div></div>
|
||||
<h1 class="text-center">Login To Account</h1>
|
||||
<p class="text-center">Username: </p>
|
||||
<td><input type="text" name="username" /></td>
|
||||
<div id="Split"></div>
|
||||
<p class="text-center">Password: </p>
|
||||
<td><input type="password" name="password" /></td>
|
||||
<div id="space"></div>
|
||||
<button class="btn btn-default" input id="submitButton" onclick="doLogin()">Login</button>
|
||||
<p id="Error" class="text-center"></p>
|
||||
<div id="Split">
|
||||
<p id="CreateUser"><a href="createUser.html"><span style="text-decoration: underline;">Create Account</span></a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container"></div>
|
||||
|
||||
<script src="assets/js/jquery.min.js"></script>
|
||||
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
|
||||
|
||||
<script> // Run only after jq and bootstrap have finished loading
|
||||
|
||||
// Work around non-HTML5 compliant IE autofocus
|
||||
$(function() {
|
||||
$('[autofocus]:not(:focus)').eq(0).focus();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 344 KiB |
Loading…
Add table
Reference in a new issue