Авторизация в окне в стиле Apple. 3D transform + CSS3. Хак.

2384
Доброго всем времени суток!

Представляю вашему вниманию хак авторизации (восст.пароля) в всплывающем окне.
За основу был взят Авторизация на сайте во всплывающем окне в который вставил новую форму авторизации


ДЕМО

Обязательно нажмите на Forgot (забыл пароль)!



итак смотрим в приложенном файле шаблона

в секцию <head> вашего шаблона вставляем
Код PHP:
<!--  ВСТАВЛЯЕМ ЭТОТ КОД  !-->
    <!-- Our CSS stylesheet file -->
    <link rel="stylesheet" href="/templates/_default_/assets/css/styles.css" />
    <!--[if lt IE 9]>
       <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<!--  ВСТАВЛЯЕМ ЭТОТ КОД  !-->
далее после
Код PHP:
    <link href="/templates/_default_/css/styles.css" rel="stylesheet" type="text/css" /> 
вставляем
Код PHP:
<!--  ВСТАВЛЯЕМ ЭТОТ КОД  !-->
  <link href="/templates/_default_/css/colorbox.css" rel="stylesheet" type="text/css" />
  <script src="/templates/_default_/js/jquery.colorbox-min.js" type="text/javascript"></script>
<!--  ВСТАВЛЯЕМ ЭТОТ КОД  !-->

далее как в основном посте заменяем вот это
Код PHP:
<div class="grid_9">
                    <?php if (!$inUser->id){ ?>
                        <div class="mod_user_menu">
                            <span class="register"><a href="/registration">Регистрация</a></span>
                            <span class="login"><a href="/login">Вход</a></span>
                        </div>
                    <?php } else { ?>
                        <?php cmsModule('header'); ?>
                    <?php } ?>
         </div>
на это:
Код PHP:
<!--  МЕНЯЕМ НА ЭТОТ КОД  !-->
<div class="grid_9">
                    <?php if (!$inUser->id){ ?>
                        <div class="mod_user_menu">
                            <span class="register"><a class='example7' href="/registration">Регистрация</a></span>
                            <span class="login"><a class='example1' href="/login">Вход</a></span>
                        </div>
<script>
$(document).ready(function(){
   $(".example1").colorbox({width:"500px", inline:true, href:"#inline_example1"});
});
</script>

	<div style='display:none'>
		<div id='inline_example1' style='padding:10px; background:#fff;'>
		<div id="formContainer">
			<form id="login" name="authform" method="post" action="/login">
				<a href="#" id="flipToRecover" class="flipLink">Forgot?</a>
				<input type="text" name="login" id="loginEmail" value="Login" />
				<input type="password" name="pass" id="loginPass" value="Пароль" />
             <input type="checkbox" tabindex="3" id="remember" checked="checked" value="1" name="remember">
				<input type="submit" name="login_btn" value="Вход" />
			</form>
			<form id="recover" method="post" name="prform" action="/passremind.html">
				<a href="#" id="flipToLogin" class="flipLink">Забыл?</a>
				<input type="text" name="email" id="recoverEmail" value="Email" />
				<input type="submit" name="goremind" value="Напомнить пароль" />
			</form>
		</div>
		<script src="/templates/_default_/assets/js/script.js"></script>
        
		</div>
	</div>
                    <?php } else { ?>
                        <?php cmsModule('header'); ?>
                    <?php } ?>
                </div>
<!--  МЕНЯЕМ НА ЭТОТ КОД  !-->
в css шаблона добавляем строки из файла addtostyles_css

пользуйтесь на здоровье!
P.S. в поставке есть пустые картинки (без английского текста - желающие могут сами прописать нужный текст на русском языке)
Скачать
Компонент Инвайтер - спам рассылки | Активная ссылка в шапке модуля. Хак.
Комментарии (14)
reload 18 июня 2012 в 00:00 +1
приколно)
Крот 18 июня 2012 в 00:02 0
самому понравилось... думаю для версий сайта под айфон можно покрутить или для сайта хипстеров smile
Александр 18 июня 2012 в 00:47 0
улёт, плюсую! немного переделаю под себя и будет шикарно
skotskiy 18 июня 2012 в 07:40 +1
Оригинально!!!
fgvyguyu 18 июня 2012 в 15:09 0
А сверху в левом углу в окне авторизации зачем галочка?
Patriot 18 июня 2012 в 15:20 +1
Наверное это "Запомнить меня". Если так, то нужно прикрутить надпись, юзеры не поймут для чего она.
Крот 18 июня 2012 в 19:52 0
это мне было лень ставить на место галочку "Запомнить меня")))
͡﴾͡๏̯͡๏﴿ 18 июня 2012 в 16:25 +1
Крот хорошая работа...но было бы неплохо еще и регистрацию сделать подобным образом..
Крот 18 июня 2012 в 20:00 +1
тут нужен только красивый дизайн - а прикрутить можно все что угодно
Данила 18 июня 2012 в 21:55 0
Плюсую, но есть один вопрос, почему всё на английском? Вроде у большинства, да и у создателя хака наверняка сайты на русском.
Крот 19 июня 2012 в 01:10 +1
потому что это адаптация скрипта под InstantCMS. Мне он очень глянулся, поэтому и адаптировал его... как уже писал выше, картинки не переводил, кто захочет, сделает сам любой дизайн и текст, главное идея
Данила 19 июня 2012 в 01:16 +1
всё предельно понятно )
Legioner 20 июня 2012 в 12:28 0
Класс! А картинки можно и поменять.
Rossoman 20 июня 2012 в 17:08 0
Я знаю откуда скрипт)) Тоже себе для сайта у них подбираю постоянно