Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-04-18 23:17:20 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

start on login card styling

Browse Source
This commit is contained in:
mrjvs 2018-11-22 16:59:35 +01:00
parent 662599a941
commit 6ca84aefa3
4 changed files with 70 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
assets/css/pretendo-auth.css Normal file
View File

@ -0,0 +1,32 @@
body.flex.center {
justify-content: center;
align-items: center;
}
/* login/register card */
.card {
background-color: white;
box-shadow: 0 3px 10px 0px rgba(0, 0, 0, 0.07);
width: 35rem;
max-width: 100%;
}
.card .content {
padding: 0 3em 4em 3em;
}
.card .head {
background-color: #673ab7;
color: white;
font-size: 1em;
font-weight: normal;
padding: 1.5em 2em;
margin: 0;
}
.card .content .btnMargin {
display: block;
width: 100%;
margin: 3em 0 0 0;
}
.card .content .lowText {
text-align: right;
color: #707070;
}

14
assets/css/pretendo-common.css
View File

@ -309,7 +309,7 @@ input::placeholder, textarea::placeholder {
opacity: 1;
}
input[type="text"], textarea {
input[type="text"], input[type="password"], textarea {
display: inline-block;
width: 100%;
padding: 1em 2em;
@ -327,11 +327,21 @@ input[type="text"], textarea {
resize: none;
}
label {
font-size: 1em;
margin: 2em 0 .2em .2em;
display: block;
}
input[type="text"].hasLabel, input[type="password"].hasLabel {
margin: 0;
}
textarea {
height: 12rem;
}
input[type="text"]:focus, textarea:focus {
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
border-color: rgb(103, 61, 182);
box-shadow: 0 3px 10px 0px rgba(103, 61, 182, 0.07);
}

0
assets/js/auth.js Normal file
View File

32
views/login.hbs
View File

@ -1,6 +1,26 @@
<h1>login page</h1>
<form action="/api/v1/login" method="POST">
<input type="text" name="email">
<input type="text" name="password">
<button>submit login</button>
</form>
<!DOCTYPE html>
<html lang="en">
<head>
{{> head-common }}
<!-- page specific -->
<link rel="stylesheet" href="/assets/css/pretendo-auth.css">
<script src="/assets/js/auth.js" defer></script>
</head>
<body class="flex center">
<div class="card">
<h2 class="head">{{ locales.nav.brand }}</h2>
<div class="content">
<p class="txt-highlight">ERROR</p>
<h1 class="txt-title small">{{ locales.login_card.title }}</h1>
<form action="/api/v1/sendmessage" method="POST">
<label for="email">{{ locales.login_card.email_text }}</label>
<input type="text" class="hasLabel" id="email" name="email">
<label for="email">{{ locales.login_card.password_text }}</label>
<input type="password" class="hasLabel" id="password" name="password">
</form>
<button class="btn btnMargin">{{ locales.login_card.button_text }}</button>
<p class="lowText">ERROR <a href="#">ERROR</a></p>
</div>
</div>
</body>
</html>