Skip to content

2
2018_web_app
Commit 15177bb6 by gema
Options

custom login web

parent 0ace5380
Showing with 238 additions and 57 deletions
fuel/app/views/login.twig
...@@ -6,62 +6,47 @@ ...@@ -6,62 +6,47 @@
<!--[if !IE]><!--> <!--[if !IE]><!-->
<html><!-- <![endif]--> <html><!-- <![endif]-->
<head> <head>
<base href="{{ base_url(false) }}"> <base href="{{ base_url(false) }}">
<title> <title>
{% block title %} {% block title %}
Aplicación Producción - Seti Consultyn Inutralia
{% endblock %} {% endblock %}
</title> </title>
<link rel="shortcut icon" href="/assets/img/favicon.ico"> <link rel="shortcut icon" href="/assets/img/favicon.ico">
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="description" content=""> <meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" /> <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
{% include 'includes/includes_before.twig' %} {% include 'includes/includes_before.twig' %}
</head> </head>
<body class="gray-bg"> <body>
<div class="box-login">
<div class="middle-box text-center animated fadeInDown"> <img src="assets/img/logos/inutralia.png" class="img-responsive-custom mt40"/>
<div> <form class="m-t" method="post" action="auth/login">
<div> {{ form_csrf() }}
<div class="form-group">
<!--<h1 class="logo-name">IN+</h1>--> <p class="text-left"><i class="fa fa-user"></i> Usuario</p>
<img src="/assets/img/logos/logo_seti_50x50_black_orange.png"> <input type="text" name="username" class="form-control" placeholder="Usuario" required="">
</div>
<div class="form-group">
<p class="text-left"><i class="fa fa-unlock-alt"></i> Contraseña</p>
<input type="password" name = "password" class="form-control" placeholder="Contraseña" required="">
</div>
<div class="label label-danger">{{ get_flash("message:error") }}</div>
<button type="submit" class="btn btn-custom btn-menu-personalizado mt20" >Entrar</button>
</form>
</div> </div>
<h3>Bienvenido a Seti Consultyn</h3> {% include 'includes/includes_after.twig' %}
</body>
<p>Introduce tu usuario y contraseña.</p>
<div class="label label-danger">{{ get_flash("message:error") }}</div>
<form class="m-t" method="post" action="auth/login">
{{ form_csrf() }}
<div class="form-group">
<input type="text" name="username" class="form-control" placeholder="Usuario" required="">
</div>
<div class="form-group">
<input type="password" name = "password" class="form-control" placeholder="Contraseña" required="">
</div>
<button type="submit" class="btn btn-primary block full-width m-b">Entrar</button>
<a href="#"><small>¿Olvidaste tu contraseña?</small></a>
<a class="btn btn-sm btn-white btn-block" href="register.html">Create una cuenta</a>
</form>
<p class="m-t"> <small>Fully designed by SETI Consultyn S.L. 2015</small> </p>
</div>
</div>
{% include 'includes/includes_after.twig' %}
</body>
</html> </html>
......
public/assets/css/custom.css
...@@ -21,6 +21,22 @@ body{ ...@@ -21,6 +21,22 @@ body{
.bg-color-menus-saludables{background-color:#92bb00 } .bg-color-menus-saludables{background-color:#92bb00 }
.bg-color-trivial{background-color: #b3b3b3} .bg-color-trivial{background-color: #b3b3b3}
/*----------------------------------------------------*/
/*--------------BOTONES CORPORATIVOS------------------*/
/*-------------------------------------------------------*/
.btn-custom{
color:#fff;
width: 100%;
}
.btn-custom:hover{
opacity:0.8;
color:#fff;
width: 100%;
}
.btn-menu-personalizado{background-color:#c966cd!important; }
.btn-perfil{background-color:#87cdde; }
.btn-menus-saludables{background-color:#92bb00 }
.btn-trivial{background-color: #b3b3b3}
h1{ h1{
font-size:2.5em!important; font-size:2.5em!important;
...@@ -103,6 +119,19 @@ a:focus { ...@@ -103,6 +119,19 @@ a:focus {
} }
/*********************************************LOGIN***********************************************************************************/
/*.box-login {*/
/*position: absolute;*/
/*left: 50%;*/
/*top: 50%;*/
/*transform: translate(-50%, -50%);*/
/*width: 30%;*/
/*height: 60%;*/
/*padding: 20px;*/
/*text-align: center;*/
/*box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);*/
/*}*/
/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-MAIN MENU HORIZONTAL NAVBAR*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/ /*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-MAIN MENU HORIZONTAL NAVBAR*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/
.navbar-header{ .navbar-header{
...@@ -133,4 +162,172 @@ a:focus { ...@@ -133,4 +162,172 @@ a:focus {
display: block; display: block;
width: 100%; width: 100%;
} }
} }
\ No newline at end of file
/*-*-*-*---*-*-*--*-*-*--*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*RESPONSIVE-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*---*-*-*-*-*-*/
/***_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_vertical iphone 3, 4, 5 **_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_*/
/*@media (width: 320px) {*/
@media (min-width: 318px) and (max-width: 329px) {
}
/*v**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_vertical androids peques**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_*/
@media (min-width: 330px) and (max-width: 374px) {
}
/***_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_horizontal iphone 3, 4, 5 **_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_*/
@media (min-width: 479px) and (max-width: 569px) {
}
/***_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_vertical iphone 6 u 6plis **_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_*/
@media (min-width: 374px) and (max-width: 639px) {
}
@media (max-width:639px){
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 60%;
padding: 10px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
/**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_horizontal iphone 6 y 6plus **_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_*/
@media (min-width: 640px) and (max-width: 736px) {
/*********************************************LOGIN***********************************************************************************/
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 60%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
/***_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_ Small devices (tablets, 768px and up) **_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_*/
@media (min-width:737px) and (max-width: 991px){
/*********************************************LOGIN***********************************************************************************/
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 60%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
/***_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_ ipad 3/4 horizontal 1024x 768**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_*/
@media(min-width: 992px)and (max-width: 1199px){
/*********************************************LOGIN***********************************************************************************/
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 60%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
/***_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_ po típico 1366x768**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_**_*_ */
@media (min-width: 1199px)and (max-width: 1367px) {
/*********************************************LOGIN***********************************************************************************/
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 60%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
@media (min-width: 1368px)and (max-width: 1598px) {
/*********************************************LOGIN***********************************************************************************/
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 50%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
@media (min-width: 1599px)and (max-width: 1599px) {
/*********************************************LOGIN***********************************************************************************/
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 60%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
@media (min-width: 1600px)and (max-width: 1930px) {
/*********************************************LOGIN***********************************************************************************/
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30%;
height:45%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
@media (min-width: 1935px) {
/*********************************************LOGIN***********************************************************************************/
.box-login {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30%;
height: 40%;
padding: 20px;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment