Современно создана форма входа для сайта
uCoz на любую тематику, где по такому же принципу идет работа, только дизайн отличается. Лучше всего подойдет для сайтов с локальной авторизацией и где используется старая форма входа. Вы можете эту форму установить как на светлый по стилистике интернет ресурс, но и безусловно на темный отличное решение будет.
Для начала нам необходимо установить шрифт
FontAwesome. Подробную информацию по установке и настройке вы найдете
здесь.
Первое что мы сделаем, это зайдем в
ПУ -
Форма входа пользователей и заменим всё её содержимое вот на этот код:
Код
<?if($PAGE_ID$="login")?><div style="width:80%;"><?endif?>
<table border="0" cellspacing="1" cellpadding="0" width="100%">
<?if($ERROR$)?><td colspan="5" style="color:red;text-align:center;">$ERROR$</td><?endif?>
<tr>
<td width="35%" class="label" nowrap="nowrap"><i class="fa fa-user" aria-hidden="true"></i> Логин</td>
<td width="10%" > </td>
<td width="35%" class="label"><i class="fa fa-unlock" aria-hidden="true"></i> Пароль</td>
</tr>
<tr>
<td><input class="loginField" type="text" name="user" value="" size="20" style="width:230px" maxlength="50"/><i class="fa fa-fw fa-pencil icon--msst"></i></td>
<td> </td>
<td><input class="loginField" type="password" name="password" size="20" style="width:230px" maxlength="15"/><i class="fa fa-fw fa-pencil icon--msst"></i></td>
</tr>
</table>
<table border="0" cellspacing="1" cellpadding="0" width="100%">
<tr>
<td nowrap><input id="rem$PAGE_ID$" type="checkbox" name="rem" value="1" checked="checked"/><label for="rem$PAGE_ID$">запомнить</label> <?if($PAGE_ID$="login" && $HIDDEN_ALLOWED$)?>
<input id="hid$PAGE_ID$" type="checkbox" name="hidden" value="1" /><label for="hid$PAGE_ID$">скрытый</label><?endif?></td>
<td align="right" valign="center"><input class="loginButton" name="sbm" type="submit" value="Вход"/></td></tr>
<tr>
<td colspan="2"><div style="font-size:7pt;text-align:center;"><a href="$REMINDER_LINK$">Забыл пароль</a> | <a href="$REGISTER_LINK$">Регистрация</a></div></td></tr>
</table>
<?if($PAGE_ID$="login")?></div><?endif?>
Далее поднимаемся выше на
Страницу входа пользователей.
Находим там код:
Код
<div align="center">
$BODY$
</div>
и заменяем его на:
Код
<div align="center" class="ms-form">
$BODY$
</div>
Теперь добавляем немного
CSS анимации и стилизуем всё вот таким образом:
Код
.ms-form form .label {font-size:16px;}
.ms-form form inputtype=text,
.ms-form form inputtype=password {
background-color:transparent!important;
border-bottom:2px solid #ccc!important;
-webkit-transform: translate3d(0, 50px, 0);
transform: translate3d(0, 50px, 0);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
-webkit-transform: translate3d(0, 0, 0) scale3d(0.7, 0.7, 1);
transform: translate3d(0, 0, 0) scale3d(0.7, 0.7, 1);
}
.ms-form form inputtype=text:focus,
.ms-form form inputtype=password:focus,
.ms-form form inputtype=text:hover,
.ms-form form inputtype=password:hover {
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}
.icon--msst {
position: relative;
bottom: 16px;
font-size: 1em;
opacity: 0.9;
float: right;
color: #fff;
pointer-events: none;
}
.ms-form form inputtype=text:focus:focus + .icon--msst,
.ms-form form inputtype=password:focus + .icon--msst {
pointer-events: none;
-webkit-transform: translate3d(-238px, 0, 0) rotate3d(0, 0, 1, -90deg);
transform: translate3d(-238px, 0, 0) rotate3d(0, 0, 1, -90deg);
-webkit-transition: -webkit-transform 0.3s ;
transition: transform 0.3s;
}