«Космическая» форма входа + мини профиль для uCoz
Не так давно на нашем сайте мы публиковали неплохую альтернативу стандартной форме входа DLE.Поскольку многим пользователям она понравилась, а самые активные и внимательные помогли нам обнаружить ошибки в форме, мы решили сделать адаптацию формы входа + мини-профиль для системы uCoz.

Функционал полностью остался неизменным, единственный момент - не реализован вход через социальные сети в виду некоторых стандартных ограничений системы.
Установка
1. Перед началом, из архива закачайте на свой сайт папку img
2. В нужное место вашего шаблона вставьте:
$LOGIN_FORM$
<a href="javascript://" id="open_modal"><?if($USER_LOGGED_IN$)?>Открыть профиль<?else?>Авторизоваться<?endif?></a>
3. Далее, форму входа пользователя полностью заменяем на:
<div class="login_mal">
<div class="top_border"></div>
<div class="rocket"></div>
<input type="text" class="login" name="user" id="login_name" maxlength="50">
<input type="password" class="password" name="password" id="login_password">
<ul class="login_button">
<li class="log_in"><input type="submit" value="Войти" name="sbm"></li>
</ul>
<div class="clears"></div>
<div class="footer_login">
<div class="bottom_border"></div>
<ul>
<li class="for_pass"><a href="$REMINDER_LINK$">Забыли пароль?</a></li>
<li class="register">Нет аккаунта? <a href="$REGISTER_LINK$">Регистрация</a></li>
</ul>
</div>
<input id="rem_save" type="checkbox" name="rem" value="1" checked="checked" />
</div>
<div class="overlay"></div>
4. В нижнюю часть сайта вставляем:
<?if($USER_LOGGED_IN$)?>
<div class="login_mal profiles">
<div class="top_border_proff"></div>
<div class="you_name"><?if($USER_FULL_NAME$)?>$USER_FULL_NAME$<?else?>$USERNAME$<?endif?></div>
<div class="you_group">Группа: $USER_GROUP$</div>
<div class="ava_position"><img src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>http://s70.ucoz.net/a/02/1260.jpg<?endif?>" alt="<?if($USER_FULL_NAME$)?>$USER_FULL_NAME$<?else?>$USERNAME$<?endif?>" class="ava"><div class="online"></div></div>
<div class="border_miniprof"></div>
<div class="menu_prof">
<div><a href="/index/8-$USER_ID$">Персональная страница</a></div>
<div><a href="$PM_URL$">Личные сообщения<?if($UNREAD_PM$)?> +$UNREAD_PM$<?endif?></a></div>
<div><a href="/index/11">Изменить данные</a></div>
</div>
<div class="border_miniprof"></div>
<a href="$LOGOUT_LINK$" class="logout">выход</a>
<div class="top_border"></div>
</div>
<div class="overlay"></div>
<?endif?>
<script>
$("#open_modal").click(function() {
$(".login_mal").addClass("md-content");
$(".overlay").css({"display": "block"});
});
$(".overlay").click(function() {
$(".login_mal").removeClass("md-content");
$(this).css({"display": "none"});
});
</script>
5. И напоследок, копируем и вставляем эти значения в самый конец таблицы стилей css.
Важно! В зависимости от того, где находится ваш файл стилей, нужно изменить адреса для картинок.
/** © 2016 Artem Malcov | https://www.pandoge.com/moduli-i-skripty/kosmicheskaya-forma-vhoda-mini-profil-dlya-ucoz **/
.login_mal {
font-family: arial;
width: 340px;
height:560px;
margin:auto;
background: #fafaff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
position: fixed;
top:0;
right: 0;
bottom: 0;
left: 0;
-webkit-transform: translateY(20%);
-moz-transform: translateY(20%);
-ms-transform: translateY(20%);
transform: translateY(20%);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
z-index: 1200;
visibility: hidden;
}
.login_mal a {
text-decoration: none;
}
.login_mal a:hover {
text-decoration: underline;
}
.profiles {
height: 465px;
}
.top_border {
background: #ff6900;
height: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.top_border_proff {
background: #fcfcff;
height: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.bottom_border {
background: #a0bec6;
height: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.rocket {
background: url("../img/rocket.png") no-repeat center center;
width: 136px;
height: 110px;
margin:66px 0 0 113px;
}
.login {
width: 260px;
height: 50px;
border:0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #b2d4dc url("../img/login.png") no-repeat;
background-position:13px 12px;
margin: 65px auto 0 auto;
display: block;
padding: 0 17px 0 53px;
font-size:15px;
color: #fff;
font-weight: bold;
font-family: arial;
}
.password {
width: 260px;
height: 50px;
border:0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #3e6372 url("../img/password.png") no-repeat;
background-position:10px 12px;
margin: 20px auto 0 auto;
display: block;
padding: 0 17px 0 53px;
font-size:15px;
color: #a7b3bc;
font-weight: bold;
font-family: arial
}
.login_button {
list-style-type: none;
margin: 40px auto 0 auto;
padding: 0;
width: 260px;
}
.login_button li {
display: block;
float: left;
}
.log_in {
float: right !important;
width: 120px;
}
.log_in input {
width: 120px;
height: 50px;
background: #ff6900;
border:0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-size: 14px;
text-transform: uppercase;
color: #fff;
font-weight: 700;
}
.log_in input:hover {
background: #ec6201;
cursor: pointer;
}
.footer_login {
height: 65px;
background: #b2d4dc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin: 39px 0 0 0;
}
.footer_login ul {
list-style-type: none;
margin: 18px 0 0 0;
padding: 0 24px;
}
.for_pass {
float: left;
}
.for_pass a {
color: #3e6372;
font-size: 12px;
font-weight: 700;
}
.register {
color: #3e6372;
font-size: 12px;
font-weight: 700;
padding: 2px 0 0 0;
float: right;
}
.register a {
color: #ff6900;
text-transform: uppercase;
}
.clears {
clear:both;
}
.md-content {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1000;
background: rgba(0,0,0,0.6);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
display: none;
cursor: pointer
}
.you_name {
color: #3e6372;
font-size: 18px;
text-align: center;
font-weight: 700;
padding: 24px 0 0 0;
text-transform: uppercase;
}
.you_group {
color: #3e6372 !important;
font-size: 14px;
text-align: center;
padding: 6px 0 0 0;
font-weight: 400 !important;
}
.ava {
display: block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 110px;
height: 110px;
}
.ava_position {
margin: 23px auto 28px auto;
width: 110px;
position: relative;
}
.online {
width: 11px;
height: 11px;
background: #fad920;
border:5px solid #fafaff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: absolute;
right:-10px;
top:45px;
}
.border_miniprof {
border-top:1px solid #e1e1e5;
}
.menu_prof {
text-align: center;
padding: 10px 0;
}
.menu_prof a {
color: #3e6372;
font-size: 14px;
margin: 5px 0;
display: inline-block;
}
.logout {
width: 120px;
height: 50px;
background: #ff6900;
color: #fff;
font-size: 14px;
text-transform: uppercase;
display: block;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin: 31px auto 26px auto;
font-weight: 700;
text-align: center;
line-height: 50px;
}
.logout:hover {
background: #ec6201;
text-decoration: none !important;
color:#fff;
}
#rem_save {
display:none;
}
Установка закончена. Чтобы визуально представить результат того, что должно получиться, рекомендуем посмотреть краткую видео демонстрацию:
Дизайнер: Brad Frost