mirror of https://github.com/fspc/workstand.git
Drew Larson
9 years ago
4 changed files with 62 additions and 23 deletions
@ -1,31 +1,68 @@ |
|||||
{% extends 'base.html' %} |
{% extends 'base.html' %} |
||||
|
|
||||
|
{% load staticfiles compress %} |
||||
|
|
||||
|
{% block styles %} |
||||
|
{{ block.super }} |
||||
|
{% compress css %} |
||||
|
<link href="{% static 'vendor/material-design-lite/src/icon-toggle/_icon-toggle.scss' %}" rel="stylesheet" type="text/x-scss"> |
||||
|
{% endcompress %} |
||||
|
{% endblock %} |
||||
|
|
||||
|
{% block scripts %} |
||||
|
{{ block.super }} |
||||
|
<script> |
||||
|
var passwordToggle = document.getElementById('icon-toggle-1'); |
||||
|
passwordToggle.addEventListener('change', function () { |
||||
|
toggle(); |
||||
|
}); |
||||
|
|
||||
|
var passwordField = document.getElementById('password'); |
||||
|
|
||||
|
var toggle = function () { |
||||
|
if (passwordToggle.checked) { |
||||
|
passwordField.type = 'password'; |
||||
|
passwordToggle.nextElementSibling.textContent = 'visibility_off' |
||||
|
} |
||||
|
else { |
||||
|
passwordField.type = 'text'; |
||||
|
passwordToggle.nextElementSibling.textContent = 'visibility' |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
{% endblock %} |
||||
|
|
||||
|
|
||||
|
|
||||
{% block content %} |
{% block content %} |
||||
<div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col mdl-shadow--2dp"> |
<div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col mdl-shadow--2dp"> |
||||
<h2 class="mdl-card__title-text">Welcome</h2> |
<h2 class="mdl-card__title-text">Welcome</h2> |
||||
<form action="#"> |
<form method="post"> |
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> |
{% if form.non_field_errors %} |
||||
<input class="mdl-textfield__input" type="text" id="sample3"> |
<div> |
||||
<label class="mdl-textfield__label" for="sample3">Text...</label> |
<span class="error">{{ form.non_field_errors }}</span> |
||||
</div> |
</div> |
||||
</form> |
{% endif %} |
||||
<!-- Numeric Textfield with Floating Label --> |
{% csrf_token %} |
||||
<form action="#"> |
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> |
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> |
||||
<input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4"> |
<input class="mdl-textfield__input" type="text" id="username" name="username"> |
||||
<label class="mdl-textfield__label" for="sample4">Number...</label> |
<label class="mdl-textfield__label" for="username">Email address</label> |
||||
<span class="mdl-textfield__error">Input is not a number!</span> |
|
||||
</div> |
</div> |
||||
</form> |
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> |
||||
<div class="mdl-card__actions mdl-card--border"> |
<input class="mdl-textfield__input" type="password" id="password" name="password"> |
||||
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> |
<label class="mdl-textfield__label" for="password">Password</label> |
||||
Get Started |
|
||||
</a> |
|
||||
</div> |
</div> |
||||
<div class="mdl-card__menu"> |
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1"> |
||||
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"> |
<input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" checked> |
||||
<i class="material-icons">share</i> |
<i class="mdl-icon-toggle__label material-icons">visibility_off</i> |
||||
|
</label> |
||||
|
<div> |
||||
|
<button type="submit" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> |
||||
|
Login |
||||
</button> |
</button> |
||||
|
<a href="{% url 'signup' %}">Become a Member</a> |
||||
</div> |
</div> |
||||
|
</form> |
||||
|
|
||||
</div> |
</div> |
||||
{% endblock %} |
{% endblock %} |
Loading…
Reference in new issue