«Космическая» форма входа + мини профиль для uCoz

13 ноя0 комм

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

«Космическая» форма входа + мини профиль для 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$)?>&nbsp;&nbsp;+$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

Файл

Размер

Ссылка

img.zip

10,54 Kb

Скачать с сервера

комментариев

Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.