// login flip WIP
This commit is contained in:
Kevin Granger
@@ -9565,6 +9565,44 @@ textarea {
|
|||||||
.ladda-button[data-size=xl] .ladda-label {
|
.ladda-button[data-size=xl] .ladda-label {
|
||||||
font-size: 1.5em; }
|
font-size: 1.5em; }
|
||||||
|
|
||||||
|
/* line 1, admin-theme/_admin-login.sass */
|
||||||
|
.flip-container {
|
||||||
|
perspective: 1000; }
|
||||||
|
|
||||||
|
/* line 4, admin-theme/_admin-login.sass */
|
||||||
|
.flip-container:hover .flipper, .flip-container.hover .flipper {
|
||||||
|
transform: rotateY(180deg); }
|
||||||
|
|
||||||
|
/* line 8, admin-theme/_admin-login.sass */
|
||||||
|
.flip-container, .front, .back {
|
||||||
|
width: 420px;
|
||||||
|
height: 420px; }
|
||||||
|
|
||||||
|
/* line 14, admin-theme/_admin-login.sass */
|
||||||
|
.flipper {
|
||||||
|
transition: 0.6s;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
position: relative; }
|
||||||
|
|
||||||
|
/* line 19, admin-theme/_admin-login.sass */
|
||||||
|
.front, .back {
|
||||||
|
backface-visibility: hidden;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0; }
|
||||||
|
|
||||||
|
/* line 26, admin-theme/_admin-login.sass */
|
||||||
|
.front {
|
||||||
|
z-index: 2; }
|
||||||
|
|
||||||
|
/* line 29, admin-theme/_admin-login.sass */
|
||||||
|
.back {
|
||||||
|
transform: rotateY(180deg); }
|
||||||
|
|
||||||
|
/* line 32, admin-theme/_admin-login.sass */
|
||||||
|
.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
|
||||||
|
transform: rotateY(180deg); }
|
||||||
|
|
||||||
/* line 1, admin-theme/_admin-carrier-wizard.sass */
|
/* line 1, admin-theme/_admin-carrier-wizard.sass */
|
||||||
#carrier_wizard {
|
#carrier_wizard {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
@@ -106,8 +106,8 @@ fieldset > .row
|
|||||||
@import "admin-theme/ladda"
|
@import "admin-theme/ladda"
|
||||||
@import "admin-theme/ladda-theme"
|
@import "admin-theme/ladda-theme"
|
||||||
|
|
||||||
|
|
||||||
//page specific
|
//page specific
|
||||||
|
@import "admin-theme/admin-login"
|
||||||
@import "admin-theme/admin-carrier-wizard"
|
@import "admin-theme/admin-carrier-wizard"
|
||||||
@import "admin-theme/admin-modules"
|
@import "admin-theme/admin-modules"
|
||||||
@import "admin-theme/admin-dashboard"
|
@import "admin-theme/admin-dashboard"
|
||||||
|
|||||||
@@ -0,0 +1,35 @@
|
|||||||
|
.flip-container
|
||||||
|
perspective: 1000
|
||||||
|
|
||||||
|
.flip-container:hover .flipper,
|
||||||
|
.flip-container.hover .flipper
|
||||||
|
transform: rotateY(180deg)
|
||||||
|
|
||||||
|
.flip-container,
|
||||||
|
.front,
|
||||||
|
.back
|
||||||
|
width: 420px
|
||||||
|
height: 420px
|
||||||
|
|
||||||
|
.flipper
|
||||||
|
transition: 0.6s
|
||||||
|
transform-style: preserve-3d
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
.front,
|
||||||
|
.back
|
||||||
|
backface-visibility: hidden
|
||||||
|
position: absolute
|
||||||
|
top: 0
|
||||||
|
left: 0
|
||||||
|
|
||||||
|
.front
|
||||||
|
z-index: 2
|
||||||
|
|
||||||
|
.back
|
||||||
|
transform: rotateY(180deg)
|
||||||
|
|
||||||
|
.flip-container:hover .flipper,
|
||||||
|
.flip-container.hover .flipper,
|
||||||
|
.flip-container.flip .flipper
|
||||||
|
transform: rotateY(180deg)
|
||||||
@@ -31,124 +31,132 @@
|
|||||||
|
|
||||||
<div id="container">
|
<div id="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div id="login" class="col-md-4 col-md-offset-4 panel">
|
<div id="login" class="flip-container col-md-4 col-md-offset-4 panel">
|
||||||
<h1 class="text-center">
|
<div class="flipper">
|
||||||
<img width="40px" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjEycHgiIGhlaWdodD0iNzkycHgiIHZpZXdCb3g9IjAgMCA2MTIgNzkyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2MTIgNzkyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMjA0LDg2Yy0zNiwyMy00Nyw2MS00MiwxMjBsLTI3LDNDMTMxLDE0NywxNjEsOTgsMjA0LDg2eiBNMjQ1LDc4YzY0LDgsMTAwLDM1LDExNSwxMDVsLTE2OSwyMEMxODUsMTQwLDE5OSwxMDUsMjQ1LDc4eg0KCSBNMjgwLDY0YzcyLDAsMTIwLDI1LDEzNSwxMTJsLTI3LDNDMzc1LDExMiwzNDEsNzYsMjgwLDY0eiBNNDQyLDE3NEM0MjksNTQsMzE0LDE5LDI0MCw1NmMtODMtMi0xNDAsNzMtMTMzLDE1N2wtOTYsMTBsNTgsNTUwDQoJbDI2MS0yNmMtNDctNTMtMTAwLTEzMy0xMjQtMTUyYy0yNy0yMy0zMC0zMS0yMy00NWMxMi0xNCwyNC0xMiw0NSw0bDQ4LDM3bDcsMzZsMTQtMWwtMzctMjMxYy00LTI0LDEtMzUsMTktNDBjMTgtMiwyNyw3LDMxLDM0DQoJbDIzLDE0MWwxOC0yYy03LTUwLTMtNTcsMTctNjJjMTktMywyOCwxMCwzNSw2NGwxNy0xYy01LTUwLTEtNTcsMTktNjBjMjItMSwyNSwxMiwzMiw2NWwxNiwyYy00LTQwLTQtNTEsMTgtNTNjMjEsMCwyNSwxNCwzMSw1OA0KCWMxNSwxMDAsMTMsMTU0LTYsMTgzbDcyLTdsLTU4LTU1NUw0NDIsMTc0eiIvPg0KPC9zdmc+DQo="/>
|
<div class="front">
|
||||||
PRESTASHOP
|
<h1 class="text-center">
|
||||||
</h1>
|
<img width="40px" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNjEycHgiIGhlaWdodD0iNzkycHgiIHZpZXdCb3g9IjAgMCA2MTIgNzkyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2MTIgNzkyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMjA0LDg2Yy0zNiwyMy00Nyw2MS00MiwxMjBsLTI3LDNDMTMxLDE0NywxNjEsOTgsMjA0LDg2eiBNMjQ1LDc4YzY0LDgsMTAwLDM1LDExNSwxMDVsLTE2OSwyMEMxODUsMTQwLDE5OSwxMDUsMjQ1LDc4eg0KCSBNMjgwLDY0YzcyLDAsMTIwLDI1LDEzNSwxMTJsLTI3LDNDMzc1LDExMiwzNDEsNzYsMjgwLDY0eiBNNDQyLDE3NEM0MjksNTQsMzE0LDE5LDI0MCw1NmMtODMtMi0xNDAsNzMtMTMzLDE1N2wtOTYsMTBsNTgsNTUwDQoJbDI2MS0yNmMtNDctNTMtMTAwLTEzMy0xMjQtMTUyYy0yNy0yMy0zMC0zMS0yMy00NWMxMi0xNCwyNC0xMiw0NSw0bDQ4LDM3bDcsMzZsMTQtMWwtMzctMjMxYy00LTI0LDEtMzUsMTktNDBjMTgtMiwyNyw3LDMxLDM0DQoJbDIzLDE0MWwxOC0yYy03LTUwLTMtNTcsMTctNjJjMTktMywyOCwxMCwzNSw2NGwxNy0xYy01LTUwLTEtNTcsMTktNjBjMjItMSwyNSwxMiwzMiw2NWwxNiwyYy00LTQwLTQtNTEsMTgtNTNjMjEsMCwyNSwxNCwzMSw1OA0KCWMxNSwxMDAsMTMsMTU0LTYsMTgzbDcyLTdsLTU4LTU1NUw0NDIsMTc0eiIvPg0KPC9zdmc+DQo="/>
|
||||||
<h4 class="text-center">{$shop_name}</h4>
|
PRESTASHOP
|
||||||
<hr/>
|
</h1>
|
||||||
<div id="error" class="hide alert alert-danger">
|
<h4 class="text-center">{$shop_name}</h4>
|
||||||
{if isset($errors)}
|
<hr/>
|
||||||
<h4>
|
<div id="error" class="hide alert alert-danger">
|
||||||
{if $nbErrors > 1}
|
{if isset($errors)}
|
||||||
{l s='There are %d errors.' sprintf=$nbErrors}
|
<h4>
|
||||||
{else}{l s='There is %d error.' sprintf=$nbErrors}
|
{if $nbErrors > 1}
|
||||||
|
{l s='There are %d errors.' sprintf=$nbErrors}
|
||||||
|
{else}{l s='There is %d error.' sprintf=$nbErrors}
|
||||||
|
{/if}
|
||||||
|
</h4>
|
||||||
|
<ol>
|
||||||
|
{foreach from=$errors item="error"}
|
||||||
|
<li>{$error}</li>
|
||||||
|
{/foreach}
|
||||||
|
</ol>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{if isset($warningSslMessage)}
|
||||||
|
<div class="alert alert-warning">{$warningSslMessage}</div>
|
||||||
{/if}
|
{/if}
|
||||||
</h4>
|
|
||||||
<ol>
|
{if !isset($wrong_folder_name) && !isset($wrong_install_name)}
|
||||||
{foreach from=$errors item="error"}
|
<form action="#" id="login_form" method="post">
|
||||||
<li>{$error}</li>
|
<div class="form-group">
|
||||||
{/foreach}
|
<label class="control-label" for="email">{l s='Email address'}</label>
|
||||||
</ol>
|
<div class="input-group">
|
||||||
{/if}
|
<span class="input-group-addon"><i class="icon-envelope"></i></span>
|
||||||
|
<input
|
||||||
|
name="email"
|
||||||
|
type="text"
|
||||||
|
id="email"
|
||||||
|
class="form-control"
|
||||||
|
value="{if isset($email)}{$email|escape:'htmlall':'UTF-8'}{/if}"
|
||||||
|
autofocus="autofocus"
|
||||||
|
tabindex="1"
|
||||||
|
placeholder="test@example.com" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<a href="#" class="show-forgot-password pull-right" >
|
||||||
|
{l s='Lost password'}…
|
||||||
|
</a>
|
||||||
|
<label class="control-label" for="passwd">
|
||||||
|
{l s='Password'}
|
||||||
|
</label>
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-addon"><i class="icon-key"></i></span>
|
||||||
|
<input
|
||||||
|
name="passwd"
|
||||||
|
type="password"
|
||||||
|
id="passwd"
|
||||||
|
class="form-control"
|
||||||
|
value="{if isset($password)}{$password}{/if}"
|
||||||
|
tabindex="2"
|
||||||
|
placeholder="{l s='Password'}" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="checkbox">
|
||||||
|
<label for="stay_logged_in">
|
||||||
|
<input name="stay_logged_in" type="checkbox" id="stay_logged_in" value="1" tabindex="3"/>
|
||||||
|
{l s='Keep me logged in'}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr/>
|
||||||
|
<div class="form-group">
|
||||||
|
<button name="submitLogin" type="submit" tabindex="4" class="btn btn-default btn-lg btn-block ladda-button" data-style="slide-up" data-spinner-color="black" >
|
||||||
|
<span class="ladda-label">
|
||||||
|
<i class="icon-ok text-success"></i>
|
||||||
|
{l s='Log in'}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<input type="hidden" name="redirect" id="redirect" value="{$redirect}"/>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="back">
|
||||||
|
|
||||||
|
<form action="#" id="forgot_password_form" method="post" class="hide">
|
||||||
|
<div class="alert alert-info">
|
||||||
|
<h4 class="text-center">
|
||||||
|
<i class="icon-exclamation-sign"></i>
|
||||||
|
{l s='Forgot your password?'}
|
||||||
|
</h4>
|
||||||
|
<p>{l s='In order to receive your access code by email, please enter the address you provided during the registration process.'}</p>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="control-label" for="email_forgot">
|
||||||
|
{l s='Email address'}
|
||||||
|
</label>
|
||||||
|
<div class="input-group">
|
||||||
|
<span class="input-group-addon"><i class="icon-envelope"></i></span>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="email_forgot"
|
||||||
|
id="email_forgot"
|
||||||
|
class="form-control"
|
||||||
|
autofocus="autofocus"
|
||||||
|
tabindex="1"
|
||||||
|
placeholder="test@example.com" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr/>
|
||||||
|
<div class="form-group">
|
||||||
|
<button href="#" class="btn btn-default show-login-form" tabindex="3">
|
||||||
|
<i class="icon-caret-left text-danger"></i>
|
||||||
|
{l s='Back to login'}
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-default pull-right" name="submitLogin" type="submit" tabindex="2">
|
||||||
|
<i class="icon-ok text-success"></i>
|
||||||
|
{l s='Send'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{if isset($warningSslMessage)}
|
|
||||||
<div class="alert alert-warning">{$warningSslMessage}</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{if !isset($wrong_folder_name) && !isset($wrong_install_name)}
|
|
||||||
<form action="#" id="login_form" method="post">
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label" for="email">{l s='Email address'}</label>
|
|
||||||
<div class="input-group">
|
|
||||||
<span class="input-group-addon"><i class="icon-envelope"></i></span>
|
|
||||||
<input
|
|
||||||
name="email"
|
|
||||||
type="text"
|
|
||||||
id="email"
|
|
||||||
class="form-control"
|
|
||||||
value="{if isset($email)}{$email|escape:'htmlall':'UTF-8'}{/if}"
|
|
||||||
autofocus="autofocus"
|
|
||||||
tabindex="1"
|
|
||||||
placeholder="test@example.com" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<a href="#" class="show-forgot-password pull-right" >
|
|
||||||
{l s='Lost password'}…
|
|
||||||
</a>
|
|
||||||
<label class="control-label" for="passwd">
|
|
||||||
{l s='Password'}
|
|
||||||
</label>
|
|
||||||
<div class="input-group">
|
|
||||||
<span class="input-group-addon"><i class="icon-key"></i></span>
|
|
||||||
<input
|
|
||||||
name="passwd"
|
|
||||||
type="password"
|
|
||||||
id="passwd"
|
|
||||||
class="form-control"
|
|
||||||
value="{if isset($password)}{$password}{/if}"
|
|
||||||
tabindex="2"
|
|
||||||
placeholder="{l s='Password'}" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="checkbox">
|
|
||||||
<label for="stay_logged_in">
|
|
||||||
<input name="stay_logged_in" type="checkbox" id="stay_logged_in" value="1" tabindex="3"/>
|
|
||||||
{l s='Keep me logged in'}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr/>
|
|
||||||
<div class="form-group">
|
|
||||||
<button name="submitLogin" type="submit" tabindex="4" class="btn btn-default btn-lg btn-block ladda-button" data-style="slide-up" data-spinner-color="black" >
|
|
||||||
<span class="ladda-label">
|
|
||||||
<i class="icon-ok text-success"></i>
|
|
||||||
{l s='Log in'}
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<input type="hidden" name="redirect" id="redirect" value="{$redirect}"/>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<form action="#" id="forgot_password_form" method="post" class="hide">
|
|
||||||
<div class="alert alert-info">
|
|
||||||
<h4 class="text-center">
|
|
||||||
<i class="icon-exclamation-sign"></i>
|
|
||||||
{l s='Forgot your password?'}
|
|
||||||
</h4>
|
|
||||||
<p>{l s='In order to receive your access code by email, please enter the address you provided during the registration process.'}</p>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label" for="email_forgot">
|
|
||||||
{l s='Email address'}
|
|
||||||
</label>
|
|
||||||
<div class="input-group">
|
|
||||||
<span class="input-group-addon"><i class="icon-envelope"></i></span>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="email_forgot"
|
|
||||||
id="email_forgot"
|
|
||||||
class="form-control"
|
|
||||||
autofocus="autofocus"
|
|
||||||
tabindex="1"
|
|
||||||
placeholder="test@example.com" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr/>
|
|
||||||
<div class="form-group">
|
|
||||||
<button href="#" class="btn btn-default show-login-form" tabindex="3">
|
|
||||||
<i class="icon-caret-left text-danger"></i>
|
|
||||||
{l s='Back to login'}
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-default pull-right" name="submitLogin" type="submit" tabindex="2">
|
|
||||||
<i class="icon-ok text-success"></i>
|
|
||||||
{l s='Send'}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
{else}
|
{else}
|
||||||
<div class="col-lg-12">
|
<div class="col-lg-12">
|
||||||
<p>{l s='For security reasons, you cannot connect to the Back Office until after you have:'}</p>
|
<p>{l s='For security reasons, you cannot connect to the Back Office until after you have:'}</p>
|
||||||
@@ -167,6 +175,7 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-4 col-md-offset-4">
|
<div class="col-md-4 col-md-offset-4">
|
||||||
|
|||||||
@@ -74,6 +74,9 @@ function feedbackSubmit() {
|
|||||||
|
|
||||||
function displayForgotPassword() {
|
function displayForgotPassword() {
|
||||||
$('#error').hide();
|
$('#error').hide();
|
||||||
|
|
||||||
|
document.querySelector("#login").toggle("flip");
|
||||||
|
|
||||||
$('#login_form').fadeOut('fast', function () {
|
$('#login_form').fadeOut('fast', function () {
|
||||||
$("#forgot_password_form").removeClass('hide').fadeIn('fast');
|
$("#forgot_password_form").removeClass('hide').fadeIn('fast');
|
||||||
// Focus on email address forgot field
|
// Focus on email address forgot field
|
||||||
|
|||||||
Reference in New Issue
Block a user