Skip to content

Instantly share code, notes, and snippets.

@cleac

cleac/login_mdl.html

Last active January 28, 2016 23:22
Show Gist options
  • Save cleac/5ac996949d9efa5ea971 to your computer and use it in GitHub Desktop.
Save cleac/5ac996949d9efa5ea971 to your computer and use it in GitHub Desktop.
Download ZIP
The test login page
Raw
login_mdl.html
<!DOCTYPE html>
<html>
<head>
<title>Test login page</title>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<style type="text/css">
body {
font-family: "Roboto";
}
#background-fill {
position: absolute;
overflow: auto;
background-color: #009ca4;
z-index:0;
height:33vh;
width:100%;
flex-shrink:0;
}
#background-fill > div {
text-align:center;
margin-top:5vh;
}
form {
padding: auto;
padding-left: 15px;
padding-right: 15px
}
</style>
<script type="text/javascript">
function submitPhone () {
document.forms["use_phone"].submit();
}
</script>
</head>
<body>
<div class="mdl-layout__container has-scrolling-header">
<div class="mdl-layout mdl-js-layout has-scrolling-header">
<header class="mdl-layout__header mdl-layout__header--scroll">
<div class="mdl-layout__header-row">
</div>
</header>
<div id="background-fill">
<div>
<h3 style="color:#FFF; margin: auto;">Sign in to use the service</h3>
</div>
</div>
<main class="mdl-layout__content" style="overflow:auto;">
<div class="mdl-grid" style="margin:20vh 13vw">
<div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--5-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--middle">
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Authorise via login and password</h1>
</div>
<div class="mdl-card__media" style="background:#fff">
<form id="login_by_email" action="login">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label input_carded">
<input class="mdl-textfield__input" type="text">
<label class="mdl-textfield__label">Login</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="password">
<label class="mdl-textfield__label">Password</label>
</div>
</form>
</div>
<div class="mdl-card__actions">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--accent"><b>LOG IN</b></button>
</div>
</div>
<div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
<div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--5-col mdl-cell--12-col-tablet mdl-cell--12-col-phone mdl-cell--middle">
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Authorise via phone</h1>
</div>
<div class="mdl-card__media" style="background:#fff">
<form id="use_phone" action="insert_code">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="phone" name="phone">
<label class="mdl-textfield__label">Phone</label>
</div>
</form>
</div>
<div class="mdl-card__actions">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--accent" onclick="submitPhone()"><b>GET CODE</b></button>
</div>
</div>
</div>
</main>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment