😎 » DARYA DLE » Готовые дизайны » Панель входа DLE дизайн
419 0  

Панель входа DLE дизайн

Панель входа для DLE которая занимает все пространсво экрана. Внизу фон картинка скрывет все содержимое сайта.
По центру модальное окно.

---

----


Тег { login } ставим в самом низу перед боди.

Содержимое login.tpl

	<div data-name="© 2004-2020 club. Все права защищены" class="overlay js-overlay-campaign">
		<div class="popup js-popup-campaign">
			<div class="kabinet">
				<div class="kab-login">
					<s class="bg-logo"></s>
					<span>club для любителей кино и просмотра онлайн фильмов бесплатно самого лучшего качества в России.</span>

                    
 <div class="loginforma">                   
[not-group=5]
   <div class="logform-profil">
       <div class="logform-avatar">
			<img alt="" src="{foto}" /><br />
         	<a class="kn-vhod" href="{profile-link}">{login}</a>
            <a class="knopka" href="{logout-link}">Выход</a>			
		</div>
        <div class="logform-menu">
            <ul>
                <li><a href="{addnews-link}">Добавить новость</a></li>
				<li>[admin-link]<a href="{admin-link}" target="_blank">Админпанель</a>[/admin-link]</li>
				<li><a href="{pm-link}">Сообщения <sup>{new-pm} из {all-pm}</sup></a></li>
				<li><a href="{favorites-link}">Закладки <sup>{favorite-count}</sup></a></li>
				<li><a href="{newposts-link}">Непрочитанные новости</a></li>
			</ul>				
		</div>
   </div>  
[/not-group]
[group=5]		
		<form class="logform-pola" method="post">
			<label for="login_name"><input placeholder="{login-method}" type="text" name="login_name" id="login_name"></label>			
			<label for="login_password" class="log-form-pass"><input placeholder="Пароль" type="password" name="login_password" id="login_password"></label>	
            <button class="btn knopka" onclick="submit();" type="submit" title="Войти"> Войти</button>
			<input name="login" type="hidden" id="login" value="submit">
				<a class="right" href="{registration-link}">Регистрация</a> &nbsp; | &nbsp;
				<a href="{lostpassword-link}">Забыли пароль?</a>
		</form>
[/group]
</div>
                    
                    
                    
					<div data-name="Или" class="kablog-soc">Войти с помощью соц. сетей</div>
                    [vk]<a href="{vk_url}" target="_blank" class="soc_vk bg-log_vk">	</a>[/vk]
					[yandex]<a href="{yandex_url}" target="_blank" class="soc_ya bg-log_yand"></a>[/yandex]
					[facebook]<a href="{facebook_url}" target="_blank" class="soc_fb"></a>[/facebook]
					[google]<a href="{google_url}" target="_blank" class="soc_gp bg-log_google"></a>[/google]
					[odnoklassniki]<a href="{odnoklassniki_url}" target="_blank" class="soc_od"></a>[/odnoklassniki]
					[mailru]<a href="{mailru_url}" target="_blank" class="soc_mail bg-log_mail"></a>[/mailru]
						
				</div>
				<div class="kab-malinf">
					<s class="bg-logo"></s><br />
					<span>Kinby.club для любителей кино и просмотра онлайн фильмов бесплатно самого лучшего качества в России.</span>  
					<span>
                        <a href="" class="bg-log_inst"></a>
                        <a href="" class="bg-log_telegr"></a>
                    </span>
				</div>
			</div>

			<div class="close-popup js-close-campaign">X</div>
		</div>
	</div>


Стили панели:

   /* MODAL okno KABINET*/
.overlay {display:none; position: fixed;width: 100%;height: 100vh;top: 0;left: 0; background: url("../images/bg-pan-vhod.jpg") center top; background-size: cover; z-index: 90;}
.overlay::after {content: attr(data-name); display: inline-block; color: var(--red); position: absolute;bottom: 20px;right: 20px;z-index:99;}
.popup {display:flex; overflow: hidden; border-radius:40px;  position: absolute; width: 70%; left: 50%; top: 50%; background: #bd322d; transform: translate(-50%, -50%); z-index: 91;}
.kabinet {width:100%;text-align: center;}
.kabinet > div{width:50%; padding:40px;}
.kab-login {padding:40px 60px; background: var(--white); color:var(--grey-2);}
.kab-login span {display:block; margin:20px 0;}
.kablog-soc {position:relative; width:80%; padding-top:20px;margin: 40px auto 10px auto; border-top:1px solid var(--grey-2); }
.kablog-soc::after {content: attr(data-name); display: block; width:40px; margin-left:-20px; background: var(--white); position: absolute;top: -7px; left:50%;z-index:93;}
.kab-malinf{ color: var(--white); background: url("../images/bg-pan-vhod2.jpg") right top; background-size: cover; display: flex; flex-flow: column nowrap; height: 100%;align-items: center;justify-content: center;}
.kab-malinf > span {display:block; margin:60px 40px; font-size:17px;}
.close-popup {color: var(--white); cursor:pointer; font-size:28px; position: absolute; top:20px; right:30px; z-index: 94;}


.loginforma {font-size:16px; line-height:1; }
.loginforma input {padding:10px 10px 10px 40px; width:100%; display:block; margin: 0 0 20px 0; border-radius:25px; border: 1px solid var(--grey-3); background: var(--white); width:100%;}
.loginforma a {color: var(--grey-3);}
.loginforma label{position:relative; display:block; width:100%;}
.logform-pola label::before {content:""; display:block;width: 15px; height: 15px;background:url("../images/sprit.png") -391px -117px; position:absolute; top:11px; left:8px; z-index:10; }
.logform-pola .log-form-pass::before {background-position: -391px -187px;}
.logform-profil {display:flex; flex-flow: row wrap;justify-content: space-between;align-items: start;align-content: start;}
.logform-avatar {width:35%;}
.logform-avatar img {width:100px; height:100px; margin:0 auto 20px auto; }
.logform-avatar .kn-vhod {width:100px; margin: 0 auto; display:block; border:1px solid var(--green); border-radius:25px; padding:10px; color: var(--green); }
.logform-avatar .knopka {min-width:100px; width:100px; color: var(--white);}
.logform-menu {width:60%; text-align:left;}
.logform-menu li {margin:10px 0;}



Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023