mravi/dynamicweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Login page design new styles

Browse source
This commit is contained in:
Henry Bravo 2017-05-28 00:44:36 -05:00
parent 8d8b387cc7
commit 3f0a93357f
4 changed files with 167 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

127
hosting/static/hosting/css/landing-page.css
View file

@ -82,24 +82,25 @@ h6 {
text-align: center;
color: #f8f8f8;
position: relative;
padding-bottom: 25%;
padding-top: 10%;
}
.intro-login {
background: url(../img/login-bg.jpg) no-repeat center center;
background: url(../img/intro-bg.jpg) no-repeat center center;
background-size: cover;
height: 100%;
}
.intro-signup {
background: url(../img/signup-bg.png) no-repeat center center;
background: url(../img/intro-bg.jpg) no-repeat center center;
background-size: cover;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.intro-reset-password {
background: url(../img/signup-bg.png) no-repeat center center;
background: url(../img/intro-bg.jpg) no-repeat center center;
background-size: cover;
height: 100%;
}
@ -193,7 +194,108 @@ h6 {
float: right;
margin-top: 0;
}
/*------Auth section---------*/
.auth-container{
display: flex;
align-items: center;
justify-content: center;
background: url(../img/auth-bg.jpg) no-repeat center center;
background-size: cover;
height: 100vh;
position: relative;
}
.auth-container .container{
z-index: 1000;
}
.auth-container .auth-content{
width: 80%;
margin: 0 auto;
max-width: 390px;
margin-top: 60px;
}
.auth-container .auth-title h2{
color: #fff;
font-family: 'Montserrat-Bold';
font-size: 44px;
text-align: center;
width: 425px;
margin: 0 auto;
margin-bottom: 30px;
position: relative;
}
.auth-container .auth-title h2::after{
content: "";
position: absolute;
bottom: -20px;
background: #fff;
height: 7px;
width: 70px;
left: 50%;
transform: translate(-50%, 0);
}
.auth-container::before{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(75, 75, 101, 0.55);
z-index: 1;
}
.auth-box{
background: #fff;
padding: 0;
padding-bottom: 30px;
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;
z-index: 10;
}
.auth-box .section-heading{
text-align: left;
margin-bottom: 20px;
background-color: rgba(33, 69, 113, 0.82);
color: #fff;
padding: 10px;
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 17px;
border-radius: 3px 3px 0px 0px;
}
.auth-box .form{
padding: 20px;
width: 80%;
margin: 0 auto;
}
.auth-box .form .red{
color: #ea3a3a;
}
.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;
text-transform: uppercase;
}
.auth-box .form .form-control{
height: 44px;
font-size: 16px;
}
.auth-box .auth-footer {
text-align: center;
padding: 10px;
}
.auth-box .auth-footer .text{
color: #777;
}
.auth-box .auth-footer .links a{
color: #1e94cc;
}
.auth-box .auth-footer .links a:hover{
color: #1e94cc;
}
@media (max-width: 1199px) {
ul.banner-social-buttons {
float: left;
@ -218,7 +320,17 @@ h6 {
margin-bottom: 0;
}
}
@media (max-width: 540px) {
.auth-container .auth-title h2{
font-size: 32px;
width: 90%;
margin-bottom: 50px;
}
.auth-box .form {
padding: 15px;
width: 90%;
}
}
footer {
padding: 2%;
background-color: #f8f8f8;
@ -250,4 +362,5 @@ a.unlink {
a.unlink:hover {
color: inherit;
}
}

BIN
hosting/static/hosting/img/auth-bg.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 685 KiB

42
hosting/templates/hosting/base_short.html
View file

@ -44,6 +44,7 @@
<!-- Navigation -->
{% if request.user.is_authenticated %}
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
@ -61,7 +62,7 @@
<ul class="nav navbar-nav navbar-right">
{% if request.user.is_authenticated %}
<li>
<a href="{% url 'hosting:virtual_machines' %}">
<i class="fa fa-server" aria-hidden="true"></i> {% trans "My Virtual Machines"%}
@ -89,7 +90,7 @@
<li><a href="{% url 'hosting:logout' %}"><i class="glyphicon glyphicon-lock"></i>{% trans "Logout"%} </a></li>
</ul>
</li>
{% else %}
<!--
<li>
<a href="{{ request.session.hosting_url}}#how">{% trans "How it works"%}</a>
</li>
@ -107,8 +108,7 @@
</li>
<li>
<a href="{% url 'hosting:login' %}?next={{request.current_path}}">{% trans "Login"%}</a>
</li>
{% endif %}
</li> -->
</ul>
</div>
<!-- /.navbar-collapse -->
@ -116,6 +116,7 @@
<!-- /.container -->
</nav>
{% endif %}
<!-- Header -->
<a name="about"></a>
@ -123,6 +124,7 @@
{% endblock %}
<!-- Footer -->
{% if request.user.is_authenticated %}
<footer class="navbar-fixed-bottom">
<div class="container">
<div class="row">
@ -133,20 +135,28 @@
</li>
<li class="footer-menu-divider">&sdot;</li>
<li>
<a href="{{ request.session.hosting_url}}#how">{% trans "How it works"%}</a>
<li class="footer-menu-divider">&sdot;</li>
<li>
<a href="{{ request.session.hosting_url }}#your">{% trans "Your infrastructure"%}</a></li>
<li>&sdot;</li>
<li>
<a href="{{ request.session.hosting_url }}#our">{% trans "Our inftrastructure"%}</a></li>
<li class="footer-menu-divider">&sdot;</li>
<li>
<a href="{{ request.session.hosting_url }}#services">{% trans "Pricing"%}</a>
<a href="{% url 'hosting:virtual_machines' %}">
{% trans "My Virtual Machines"%}
</a>
</li>
<li class="footer-menu-divider">&sdot;</li>
<li>
<a href="{{ request.session.hosting_url }}#contact">{% trans "Contact"%}</a>
<a href="{% url 'hosting:orders' %}">
{% trans "My Orders"%}
</a>
</li>
<li>&sdot;</li>
<li>
<li>
<a href="{% url 'hosting:key_pair' %}">
{% trans "Keys"%}
</a>
</li>
<li class="footer-menu-divider">&sdot;</li>
<li>
<a href="{% url 'hosting:notifications' %}">
{% trans "Notifications "%}
</a>
</li>
</ul>
@ -155,7 +165,7 @@
</div>
</div>
</footer>
{% endif %}
<!-- jQuery -->
<script src="{% static 'hosting/js/jquery.js' %}"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.min.js"></script>

37
hosting/templates/hosting/login.html
View file

@ -3,12 +3,15 @@
{% load staticfiles bootstrap3%}
{% block content %}
<div class="intro-auth intro-login">
<div class="auth-container">
<div class="container">
<div class="col-md-4 col-md-offset-4">
<div class="auth-title">
<h2>{% trans "Your VM hosted in Switzerland"%}</h2>
</div>
<div class="auth-content">
{% if messages %}
<ul class="list-unstyled">
<ul class="list-unstyled" style="color: #fff">
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
@ -23,31 +26,33 @@
</div>
{% endif %}
{% endblock %}
<div class="intro-message">
<div class="intro-message auth-box">
<h2 class="section-heading">{% trans "Login"%}</h2>
<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>{{form.non_field_errors|striptags}}</p>
<p class="red">{{form.non_field_errors|striptags}}</p>
{% buttons %}
<button type="submit" class="btn btn-default">
<button type="submit" class="btn btn-block btn-success">
{% trans "Login"%}
</button>
{% endbuttons %}
<input type='hidden' name='next' value='{{request.GET.next}}'/>
</form>
<span>{% trans "Don't have an account yet ? "%}<a class="unlink" href="{% url 'hosting:signup' %}">{% trans "Sign up"%}</a></span>
<br/>
<span> <a class="unlink" href="{% url 'hosting:reset_password' %}">{% trans "Forgot your password ? "%}</a></span>
<ul class="list-inline intro-social-buttons">
</ul>
<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>
</div>
</div>
</div>
</div>
</div>