login pages restyled and footer included

This commit is contained in:
Arvind Tiwari 2017-10-07 14:38:48 +05:30
parent 05b7b43064
commit 769396d95e
12 changed files with 259 additions and 239 deletions

View file

@ -182,7 +182,11 @@ button, input, optgroup, select, textarea {
.navbar-brand {
padding: 10px 15px;
cursor: pointer;
}
@media (max-width: 767px) {
.navbar-brand {
padding: 10px 10px;
}
}
.navbar-right {
@ -1543,7 +1547,7 @@ tech-sub-sec h2 {
}
footer {
padding: 50px 0;
padding: 50px 20px;
background-color: #f8f8f8;
}

View file

@ -1,38 +1,39 @@
{% load staticfiles i18n%}
{% load staticfiles i18n%}
{% get_current_language as LANGUAGE_CODE %}
<footer>
<div class="container">
<ul class="list-inline">
{% if request.resolver_match.url_name != "index" %}
<li>
<a href="{% url 'datacenterlight:index' %}">{% trans "Home" %}</a>
</li>
<li class="footer-menu-divider">&sdot;</li>
{% endif %}
<li>
<a class="url-init" href="{% url 'datacenterlight:index' %}#how">{% trans "Highlights" %}</a>
</li>
<li>
<a class="url-init" href="{% url 'datacenterlight:index' %}#your">{% trans "Scale out" %}</a>
</li>
<li>
<a class="url-init" href="{% url 'datacenterlight:index' %}#our">{% trans "Reliable and light" %}</a>
</li>
{% if request.resolver_match.url_name != "index" %}
<li>
<a class="url-init" href="{% url 'datacenterlight:index' %}#price">{% trans "Pricing" %}</a>
</li>
<li class="footer-menu-divider">&sdot;</li>
{% else %}
<li>
<a class="url-init" href="{% url 'datacenterlight:index' %}#price">{% trans "Order VM" %}</a>
</li>
{% endif %}
<li>
<a class="url-init" href="{% url 'datacenterlight:index' %}#contact">{% trans "Contact" %}</a>
</li>
</ul>
<p class="copyright text-muted small">Copyright &copy; ungleich GmbH {% now "Y" %}. {% trans "All Rights Reserved" %}</p>
</div>
</footer>
<footer>
<div>
<ul class="list-inline">
{% if request.resolver_match.url_name != "index" %}
<li>
<a href="{% url 'datacenterlight:index' %}">{% trans "Home" %}</a>
</li>
<li class="footer-menu-divider">&sdot;</li>
{% endif %}
<li>
<a class="url-init" href="{% url 'datacenterlight:index' %}#how">{% trans "Highlights" %}</a>
</li>
<li>
<a class="url-init" href="{% url 'datacenterlight:index' %}#your">{% trans "Scale out" %}</a>
</li>
<li>
<a class="url-init" href="{% url 'datacenterlight:index' %}#our">{% trans "Reliable and light" %}</a>
</li>
{% if request.resolver_match.url_name != "index" %}
<li>
<a class="url-init" href="{% url 'datacenterlight:index' %}#price">{% trans "Pricing" %}</a>
</li>
<li class="footer-menu-divider">&sdot;</li>
{% else %}
<li>
<a class="url-init" href="{% url 'datacenterlight:index' %}#price">{% trans "Order VM" %}</a>
</li>
{% endif %}
<li>
<a class="url-init" href="{% url 'datacenterlight:index' %}#contact">{% trans "Contact" %}</a>
</li>
</ul>
<p class="copyright text-muted small">Copyright &copy; ungleich GmbH {% now "Y" %}. {% trans "All Rights Reserved" %}</p>
</div>
</footer>

View file

@ -18,7 +18,7 @@
}
.content-dashboard{
min-height: calc(100vh - 70px);
min-height: calc(100vh - 60px);
width: 80%;
margin: 0 auto;
max-width: 1120px;
@ -66,7 +66,9 @@
width: 280px;
}
.content-dashboard {
width: 90%;
padding-left: 15px;
padding-right: 15px;
width: 100%;
}
}
.btn:focus, .btn:active:focus {
@ -296,10 +298,6 @@
max-width: 360px;
}
.btn-wide {
min-width: 100px;
}
.caps-link {
font-weight: 600;
color: #8da4c0;

View file

@ -22,6 +22,10 @@ h6 {
/*font-weight: 300;*/
}
.allcaps {
text-transform: uppercase;
}
.topnav {
font-size: 14px;
}
@ -31,6 +35,11 @@ h6 {
.navbar-brand {
padding: 10px 15px;
}
@media (max-width: 767px) {
.navbar-brand {
padding: 10px 0;
}
}
.navbar-default {
background: #fff;
@ -274,16 +283,15 @@ h6 {
/*------Auth section---------*/
.auth-container {
min-height: calc(100vh - 120px);
min-height: calc(100vh - 180px);
position: relative;
/* flex-grow: 1; */
display: flex;
flex-direction: column;
justify-content: center;
}
.auth-bg {
background: url(../img/auth-bg-sm.jpg);
background: url(../img/pattern.jpg) no-repeat center center;
position: fixed;
left: 0;
top: 0;
@ -293,7 +301,6 @@ h6 {
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
.auth-bg::before {
@ -303,7 +310,7 @@ h6 {
bottom: 0;
left: 0;
right: 0;
background: rgba(75, 75, 101, 0.55);
background: rgba(90, 116, 175, 0.7);
z-index: 1;
}
@ -313,8 +320,12 @@ h6 {
.auth-container .auth-content {
width: 100%;
margin: 0 auto;
max-width: 390px;
margin: 0 auto 15px;
max-width: 360px;
}
.auth-container .auth-content.wide {
max-width: 420px;
}
.auth-container .auth-center {
@ -351,31 +362,30 @@ h6 {
}
.auth-box {
position: relative;
background: #fff;
padding: 0;
padding-bottom: 30px;
padding: 40px 20px 20px;
box-sizing: border-box;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.09), 0 5px 5px rgba(0, 0, 0, 0.23);
/* border-radius: 4px; */
z-index: 10;
}
.auth-box .section-heading {
color: #5a5a5a;
padding-top: 30px;
padding-bottom: 5px;
font-weight: 300;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 20px;
letter-spacing: 1px;
font-size: 36px;
border-radius: 3px 3px 0px 0px;
margin: 0 auto;
margin: 0 auto 10px;
}
.auth-box .form {
padding: 20px;
width: 80%;
/* width: 90%; */
margin: 0 auto;
max-width: 320px;
}
.auth-box .form .red {
@ -383,27 +393,58 @@ h6 {
}
.auth-box .form .btn {
box-shadow: 0 0px 9px rgba(0, 0, 0, 0.19), 0 3px 5px rgba(0, 0, 0, 0.23);
letter-spacing: 3px;
font-size: 17px;
letter-spacing: 2px;
font-size: 16px;
padding: 6px 12px;
min-width: 140px;
margin-top: 15px;
text-transform: uppercase;
font-weight: 600;
}
.auth-box .form .form-control {
height: 44px;
font-size: 16px;
height: 48px;
font-size: 14px;
padding: 10px 17px;
line-height: 30px;
border-color: #aaa;
font-weight: bold;
}
.auth-box .form .form-control:focus,
.auth-box .form .form-control:active {
box-shadow: none;
border-radius: 0;
}
.auth-box .form-control::-webkit-input-placeholder {
color: #aaa;
}
.auth-box .form-control:-moz-placeholder{
/* Firefox 18- */
color: #aaa;
}
.auth-box .form-control::-moz-placeholder{
/* Firefox 19+ */
color: #aaa;
}
.auth-box .form-control:-ms-input-placeholder {
color: #aaa;
}
.auth-box .auth-footer {
text-align: center;
padding: 10px;
padding: 5px;
}
.auth-box .auth-footer .text {
.auth-box .auth-footer {
color: #777;
}
.auth-box .auth-footer .links a {
.auth-box .auth-footer a {
color: #1e94cc;
}
@ -411,20 +452,11 @@ h6 {
color: #1e94cc;
}
.auth-box.sign-up {
padding-bottom: 5px;
}
.auth-box.sign-up .form {
padding: 15px 20px 0 20px;
}
.sign-up-message {
padding: 25px 30px 25px 30px;
text-align: center;
font-size: 18px;
line-height: 30px;
/*font-family: 'Lato' !important;*/
font-weight: 300 !important;
}
@ -466,8 +498,8 @@ h6 {
}
.auth-box .form .form-control {
height: 44px;
font-size: 13px;
/* height: 44px; */
/* font-size: 13px; */
}
.auth-container .auth-title {
@ -802,10 +834,23 @@ a.unlink:hover {
}
}
.footer-light {
position: relative;
}
.footer-light footer {
background: transparent;
color: #eee;
}
.footer-light a,
.footer-light .text-muted {
color: #ccc;
}
.footer-light a:hover, .footer-light a:focus, .footer-light a:active {
color: #ddd;
}
.footer-vm p.copyright {
margin-top: 4px;
}
.visible-mobile {
display: none !important;

Binary file not shown.

After

Width:  |  Height:  |  Size: 181 KiB

View file

@ -62,11 +62,11 @@
<!-- Footer -->
{% if request.user.is_authenticated %}
<footer class="footer-vm">
<div class="container">
<p class="copyright text-muted small">Copyright &copy; ungleich GmbH {% now "Y" %}. {% trans "All Rights Reserved" %}</p>
</div>
</footer>
<footer class="footer-vm">
<div class="container">
<p class="copyright text-muted small">Copyright &copy; ungleich GmbH {% now "Y" %}. {% trans "All Rights Reserved" %}</p>
</div>
</footer>
{% else %}
<div class="footer-light">
{% include "datacenterlight/includes/_footer.html" %}

View file

@ -1,21 +1,17 @@
{% extends "hosting/base_short.html" %}
{% load staticfiles bootstrap3%}
{% load i18n %}
{% load staticfiles bootstrap3 i18n %}
{% block navbar %}
{% include 'hosting/includes/_navbar_transparent.html' %}
{% include 'hosting/includes/_navbar_transparent.html' %}
{% endblock navbar %}
{% block content %}
<div class="auth-container">
<div class="auth-bg"></div>
<div class="auth-container">
<div class="auth-bg"></div>
<div class="auth-center">
<div class="auth-title">
<h2>{% trans "Your VM hosted in Switzerland"%}</h2>
</div>
<div class="auth-content">
<div class="intro-message auth-box sign-up">
<h2 class="section-heading">{% trans "Set your new password"%}</h2>
<div class="auth-box sign-up">
<h1 class="section-heading">{% trans "Set your new password" %}</h1>
{% if messages %}
<ul class="list-unstyled msg-list">
{% for message in messages %}
@ -28,23 +24,18 @@
{% for field in form %}
{% bootstrap_field field show_label=False %}
{% endfor %}
{% buttons %}
<button type="submit" class="btn btn-block btn-success">
{% trans "Reset"%}
<div class="text-center">
<button type="submit" class="btn choice-btn">
{% trans "Reset" %}
</button>
{% endbuttons %}
</div>
</form>
<div class="auth-footer">
<div class="text">
<span>{% trans "Already have an account ?"%}</span>
</div>
<div class="links">
<a class="unlink" href="{% url 'hosting:login' %}">{% trans "Login"%}</a>
</div>
<span>{% trans "Already have an account ?" %}</span>&nbsp;
<a class="unlink" href="{% url 'hosting:login' %}">{% trans "Login" %}</a>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

View file

@ -1,49 +1,43 @@
{% extends "hosting/base_short.html" %}
{% load i18n %}
{% load staticfiles bootstrap3%}
{% load i18n staticfiles bootstrap3%}
{% block navbar %}
{% include 'hosting/includes/_navbar_transparent.html' %}
{% include 'hosting/includes/_navbar_transparent.html' %}
{% endblock navbar %}
{% block content %}
<div class="auth-container">
<div class="auth-bg"></div>
<div class="auth-center">
<div class="auth-title">
<h2>{% trans "Your VM hosted in Switzerland"%}</h2>
</div>
<div class="auth-content">
<div class="intro-message auth-box">
<h2 class="section-heading">{% trans "Login"%}</h2>
{% include 'hosting/includes/_messages.html' %}
<form action="{% url 'hosting:login' %}" method="post" class="form" novalidated>
{% csrf_token %}
{% for field in form %}
{% bootstrap_field field show_label=False type='fields'%}
{% endfor %}
<p class="red">{{form.non_field_errors|striptags}}</p>
{% buttons %}
<button type="submit" class="btn btn-block btn-success">
{% trans "Login"%}
</button>
{% endbuttons %}
<input type='hidden' name='next' value='{{request.GET.next}}'/>
</form>
<div class="auth-footer">
<div class="text">
<span>{% trans "Don't have an account yet ? "%}</span>
</div>
<div class="links">
<a class="unlink" href="{% url 'hosting:signup' %}">{% trans "Sign up"%}</a>
<span class="text"> or </span>
<a class="unlink" href="{% url 'hosting:reset_password' %}">{% trans "Forgot your password ? "%}</a>
<span class="text"> or </span><br/>
<a class="unlink" href="{% url 'hosting:resend_activation_link' %}">{% trans "Resend activation link"%}</a>
<div class="auth-container">
<div class="auth-bg"></div>
<div class="auth-center">
<div class="auth-content">
<div class="auth-box">
<h1 class="section-heading allcaps">{% trans "Log in" %}</h1>
{% include 'hosting/includes/_messages.html' %}
<form action="{% url 'hosting:login' %}" method="post" class="form" novalidated>
{% csrf_token %}
{% for field in form %}
{% bootstrap_field field show_label=False type='fields'%}
{% endfor %}
<p class="red">{{form.non_field_errors|striptags}}</p>
<div class="text-center">
<button type="submit" class="btn choice-btn">
{% trans "Log in" %}
</button>
</div>
<input type='hidden' name='next' value='{{request.GET.next}}'/>
</form>
<div class="auth-footer">
<div>
{% trans "Don't have an account yet ?" %}&nbsp;
<a class="" href="{% url 'hosting:signup' %}">{% trans "Sign up" %}</a>
</div>
<div>
or <a href="{% url 'hosting:reset_password' %}">{% trans "Forgot your password ?" %}</a><br>
or <a href="{% url 'hosting:resend_activation_link' %}">{% trans "Resend activation link" %}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

View file

@ -1,37 +1,40 @@
{% extends "hosting/base_short.html" %}
{% load staticfiles bootstrap3%}
{% load i18n %}
{% load staticfiles bootstrap3 i18n %}
{% block navbar %}
{% include 'hosting/includes/_navbar_transparent.html' %}
{% include 'hosting/includes/_navbar_transparent.html' %}
{% endblock navbar %}
{% block content %}
<div class="auth-container">
<div class="auth-bg"></div>
<div class="auth-container">
<div class="auth-bg"></div>
<div class="auth-center">
<div class="auth-title">
<h2>{% trans "Your VM hosted in Switzerland"%}</h2>
</div>
<div class="auth-content">
<div class="intro-message auth-box sign-up">
<h2 class="section-heading">{% trans "Resend activation link"%}</h2>
{% include 'hosting/includes/_messages.html' %}
<div class="auth-content wide">
<div class="auth-box sign-up">
<h1 class="section-heading">{% trans "Resend activation link" %}</h1>
{% include 'hosting/includes/_messages.html' %}
<form action="{% url 'hosting:resend_activation_link' %}" method="post" class="form" novalidate>
{% csrf_token %}
{% for field in form %}
{% bootstrap_field field show_label=False %}
{% endfor %}
{% buttons %}
<button type="submit" class="btn btn-block btn-success">
<div class="text-center">
<button type="submit" class="btn choice-btn">
{% trans "Submit"%}
</button>
{% endbuttons %}
</div>
</form>
<div class="auth-footer">
<div>
{% trans "Don't have an account yet ?" %}&nbsp;
<a class="" href="{% url 'hosting:signup' %}">{% trans "Sign up" %}</a>
</div>
<div>
or <a href="{% url 'hosting:reset_password' %}">{% trans "Forgot your password ?" %}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

View file

@ -1,44 +1,37 @@
{% extends "hosting/base_short.html" %}
{% load staticfiles bootstrap3%}
{% load i18n %}
{% load i18n staticfiles bootstrap3%}
{% block navbar %}
{% include 'hosting/includes/_navbar_transparent.html' %}
{% include 'hosting/includes/_navbar_transparent.html' %}
{% endblock navbar %}
{% block content %}
<div class="auth-container">
<div class="auth-bg"></div>
<div class="auth-center">
<div class="auth-title">
<h2>{% trans "Your VM hosted in Switzerland"%}</h2>
</div>
<div class="auth-content">
<div class="intro-message auth-box sign-up">
<h2 class="section-heading">{% trans "Reset your password"%}</h2>
{% include 'hosting/includes/_messages.html' %}
<form action="{% url 'hosting:reset_password' %}" method="post" class="form" novalidate>
{% csrf_token %}
{% for field in form %}
{% bootstrap_field field show_label=False %}
{% endfor %}
{% buttons %}
<button type="submit" class="btn btn-block btn-success">
{% trans "Reset"%}
</button>
{% endbuttons %}
</form>
<div class="auth-footer">
<div class="text">
<span>{% trans "Already have an account ?"%}</span>
</div>
<div class="links">
<a class="unlink" href="{% url 'hosting:login' %}">{% trans "Login"%}</a>
<div class="auth-container">
<div class="auth-bg"></div>
<div class="auth-center">
<div class="auth-content">
<div class="auth-box sign-up">
<h1 class="section-heading">{% trans "Password reset" %}</h1>
{% include 'hosting/includes/_messages.html' %}
<form action="{% url 'hosting:reset_password' %}" method="post" class="form" novalidate>
{% csrf_token %}
{% for field in form %}
{% bootstrap_field field show_label=False %}
{% endfor %}
<div class="text-center">
<button type="submit" class="btn choice-btn">
{% trans "Reset" %}
</button>
</div>
</form>
<div class="auth-footer">
<div>
<span>{% trans "Already have an account ?" %}</span>&nbsp;
<a href="{% url 'hosting:login' %}">{% trans "Login" %}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

View file

@ -2,41 +2,36 @@
{% load staticfiles bootstrap3 i18n %}
{% block navbar %}
{% include 'hosting/includes/_navbar_transparent.html' %}
{% include 'hosting/includes/_navbar_transparent.html' %}
{% endblock navbar %}
{% block content %}
<div class="auth-container auth-signup">
<div class="auth-bg"></div>
<div class="auth-center ">
<div class="auth-title">
<h2>{% trans "Your VM hosted in Switzerland"%}</h2>
</div>
<div class="auth-content">
<div class="intro-message auth-box sign-up">
<h2 class="section-heading">{% trans "Sign up"%}</h2>
{% include 'hosting/includes/_messages.html' %}
<form action="{% url 'hosting:signup' %}" method="post" class="form" novalidate>
{% csrf_token %}
{% for field in form %}
{% bootstrap_field field show_label=False %}
{% endfor %}
{% buttons %}
<button type="submit" class="btn btn-block btn-info">
{% trans "Sign up"%}
</button>
{% endbuttons %}
</form>
<div class="auth-footer">
<div class="text">
<span>{% trans "Already have an account ?"%}</span>
</div>
<div class="links">
<a class="unlink" href="{% url 'hosting:login' %}">{% trans "Login"%}</a>
<div class="auth-container auth-signup">
<div class="auth-bg"></div>
<div class="auth-center ">
<div class="auth-content">
<div class="auth-box sign-up">
<h1 class="section-heading allcaps">{% trans "Sign up" %}</h1>
{% include 'hosting/includes/_messages.html' %}
<form action="{% url 'hosting:signup' %}" method="post" class="form" novalidate>
{% csrf_token %}
{% for field in form %}
{% bootstrap_field field show_label=False %}
{% endfor %}
<div class="text-center">
<button type="submit" class="btn choice-btn">
{% trans "Sign up" %}
</button>
</div>
</form>
<div class="auth-footer">
<div>
<span>{% trans "Already have an account ?" %}</span>&nbsp;
<a href="{% url 'hosting:login' %}">{% trans "Login" %}</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

View file

@ -6,21 +6,17 @@
{% endblock navbar %}
{% block content %}
<div class="auth-container">
<div class="auth-bg"></div>
<div class="auth-center">
<div class="auth-title">
<h2>{% trans "Your VM hosted in Switzerland"%}</h2>
{% include 'hosting/includes/_messages.html' %}
</div>
<div class="auth-content">
<div class="auth-container">
<div class="auth-bg"></div>
<div class="auth-center">
<div class="auth-content wide">
<div class="intro-message auth-box sign-up">
<h2 class="section-heading">{{section_title}}</h2>
<h2 class="section-heading">{{section_title}}</h2>
<div class="sign-up-message">
{{message}}
{{message}}
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}