Готовый шаблон сайта с регистрацией, юзерами и админами на Flask с базами SQL или MongoDB

Не будет преувеличением сказать, что более половины всех существующих сайтов имеют форму для авторизации или регистрации. При желании, можно модернизировать, улучшить любую форму. Достаточно знать HTML, CSS и немного JavaScript.

Сегодня хотел поделиться своей подборкой красивых форм. Они могут стать прекрасным стартом для создания ваших, оригинальных web-элементов. В эту коллекцию попали наиболее удачные на мой взгляд формы. Они просты для установки, имеют большое разнообразие «свистелок», легко впишутся в адаптивную верстку, и просто эффектно смотрятся. Представленные формы соответствуют разным стилям: плоские, объемные, и ряд других. Все же, лучше один раз увидеть, чем 100 раз услышать.

Nice dark sign in form

sign-in-2.pngКрасивая форма регистрации в красно-желтых цветах. За счет использования градиента и теней, создается ощущение объема.ДемоСкачать

Red Login Form

Nice-dark-sign-in-form.pngНеобычность этой формы заключается в круглой кнопке.ДемоСкачать

Log in/Sign up screen animation

ДемоСкачать

Login Form on HTML5

Форма авторизации в виде стопки листов бумаги.ДемоСкачать

Material Compact Login Animation

ДемоСкачать

Sign In

ДемоСкачать

Interactive Sign Up Form

Пошаговая форма регистрации. Хорошо смотрится с анимацией переходов.ДемоСкачать

Fancy Forms

ДемоСкачать

LogIn Form

ДемоСкачать

DailyUI Challenge 001

Красивая фора с полупрозрачным фоном.ДемоСкачать

Sign Up Form UI

ДемоСкачать

Login Form — Modal

ДемоСкачать

Log In Form CSS 2017

ДемоСкачать

Sign In/Up Form Transitions

ДемоСкачать

Authorization badge

ДемоСкачать

Apple Login Form

ДемоСкачать

А какая форма понравилась вам?

Автор оригинала: STÉPHANIE WALTER

  • Перевод
  • Tutorial

Здравствуй, дорогой хабрадруг! В этом туториале мы научимся создавать две формы HTML5: форма входа и форма регистрации. Эти формы будут меняться друг с другом местами с помощью псевдо-класса CSS3 :target. Мы будем использовать CSS3 и шрифт с иконками. Идея этого демо в том, чтобы показать пользователю форму входа и предоставить ему ссылку “перехода” к форме регистрации. В этом туториале я подробно расскажу о том, как создавать эффект как в Демо 1.

HTML

 

Здесь мы использовали несколько приемов HTML5. Например, элемент type=password автоматически скрывает то, что пользователь печатает и заменяет символы точками или звездочками (зависит от браузера). Элемент type=email позволяет браузеру проверить правильность формата email адреса. Кроме того, мы использовали параметр require=required; браузеры, поддерживающие данный параметр не позволят пользователю отправить форму до тех пор, пока поле не заполнено, JavaScript здесь не требуется. Параметр autocomplete=on будет автоматически заполнять некоторые поля. Мы также использовали замещающийся текст, который поможет пользователю при заполнении формы. Теперь о двух хитрых моментах. Вы наверное заметили две ссылки в начале формы. Этот ловкий прием позволит нашей формы вести себя правильно при работе с якорями (anchors). Второй момент связан с применением шрифта с иконками. Мы будем использовать data-attribute, чтобы отобразить иконки. Устанавливая параметр data-icon=”icon_character” с соответствующим символов в HTML, мы должны назначить лишь одно правило в CSS для установления стиля всех иконок. Подробнее об этом приеме можно почитать на сайте: 24 Ways: Displaying Icons with Fonts and Data- Attributes.

CSS

Для чистоты кода я пропущу базовые параметры (html, body и т.п.), но вы сможете найти их в исходных файлах. Повторяю, что я использую приемы CSS3, которые не будут работать во всех браузерах. Итак, давайте же приступим!

Стилизуем формы, используя CSS3

Во-первых, давайте назначим нашим формам базовый стиль.

#subscribe, #login{     position: absolute;     top: 0px;     width: 88%;     padding: 18px 6% 60px 6%;     margin: 0 0 35px 0;     background: rgb(247, 247, 247);     border: 1px solid rgba(147, 184, 189,0.8);     box-shadow:         0pt 2px 5px rgba(105, 108, 109,  0.7),         0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;     border-radius: 5px; } #login{     z-index: 22; } 

Мы добавили две тени к элементу: одна — с целью создать внутреннее голубое свечение, а вторая — внешняя тень. Чуть позже я объясню вам z-index. Здесь мы назначим свойства для шапки:

/**** текст ****/ #wrapper h1{     font-size: 48px;     color: rgb(6, 106, 117);     padding: 2px 0 10px 0;     font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;     font-weight: bold;     text-align: center;     padding-bottom: 30px; }   /** На донный момент только webkit поддерживает background-clip:text; **/ #wrapper h1{     background:     -webkit-repeating-linear-gradient(-45deg,         rgb(18, 83, 93) ,         rgb(18, 83, 93) 20px,         rgb(64, 111, 118) 20px,         rgb(64, 111, 118) 40px,         rgb(18, 83, 93) 40px);     -webkit-text-fill-color: transparent;     -webkit-background-clip: text; }   #wrapper h1:after{     content:' ';     display:block;     width:100%;     height:2px;     margin-top:10px;     background:         linear-gradient(left,             rgba(147,184,189,0) 0%,             rgba(147,184,189,0.8) 20%,             rgba(147,184,189,1) 53%,             rgba(147,184,189,0.8) 79%,             rgba(147,184,189,0) 100%); } 

Замечу, что сегодня только браузеры с webkit поддерживают background-clip: text, поэтому мы сделаем полосатый фон только для webkit и привяжем его к заголовку H1. Так как параметр background-clip: text работает только в Webkit браузерах, я решил работать только со свойствами webkit. Именно поэтому я разделил CSS на две части и использовал только градиент webkit. Однако вы не должны использовать лишь webkit на своих вебсайтах! Так, например, параметр -webkit-text-fill-color: transparent позволяет нам иметь прозрачный фон, но только для браузеров webkit, все другие браузеры проигнорируют это свойство. Мы также создали тонкую линию под заголовком с помощью элемента :after pseudo-class. Мы использовали градиент с 2px в высоту и уменьшили прозрачность по краям до нуля. Теперь давайте позаботимся о полях ввода и придадим им приятный вид.

/**** advanced input styling ****/ /* placeholder */ ::-webkit-input-placeholder  {     color: rgb(190, 188, 188);     font-style: italic; } input:-moz-placeholder, textarea:-moz-placeholder{     color: rgb(190, 188, 188);     font-style: italic; } input {   outline: none; } 

Во-первых, мы стилизуем поля и уберем обводку. Но будьте осторожны: обводка помогает пользователю понять, на каком поле он находится. Если же вы уберете ее, то нужно применить свойства :active и :focus.

/* все поля исключают submit и checkbox */ #wrapper input:not([type="checkbox"]){     width: 92%;     margin-top: 4px;     padding: 10px 5px 10px 32px;     border: 1px solid rgb(178, 178, 178);     box-sizing : content-box;     border-radius: 3px;     box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;     transition: all 0.2s linear; } #wrapper input:not([type="checkbox"]):active, #wrapper input:not([type="checkbox"]):focus{     border: 1px solid rgba(91, 90, 90, 0.7);     background: rgba(238, 236, 240, 0.2);     box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; } 

Здесь мы использовали псевдо класс :not, чтобы стилизовать все поля, кроме чекбоксов. Кроме того, я решил убрать обводку и добавил свойства :focus и :active. Теперь время веселиться: шрифт с иконками. Так как мы не можем использовать псевдо-классы :before и :after, мы добавим иконку в параметр label, а затем разместим в поле. Я буду использовать библиотеку fontomas. Вы можете сами сопоставить иконки с соответствующей буквой. Помните атрибут data-icon? Именно в него нужно вставить букву. Я использовал data-icon=’u’ для логина, ‘e’ для email, ‘p’ для пароля. Как только я выбрал буквы, я скачал шрифт и использовал генератор шрифтов fontsquirrel для конвертации в формат, пригодный для @font-face.

@font-face {     font-family: 'FontomasCustomRegular';     src: url('fonts/fontomas-webfont.eot');     src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),          url('fonts/fontomas-webfont.woff') format('woff'),          url('fonts/fontomas-webfont.ttf') format('truetype'),          url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');     font-weight: normal;     font-style: normal; }   /** магический трюк! **/ [data-icon]:after {     content: attr(data-icon);     font-family: 'FontomasCustomRegular';     color: rgb(106, 159, 171);     position: absolute;     left: 10px;     top: 35px;     width: 30px; } 

Вот собственно и все. Вам не требуется иметь отдельный класс для каждой иконки. Мы использовали параметр content: attr(data-icon), чтобы получить букву из атрибута data-icon. Таким образом, нам нужно лишь назначить шрифт, выбрать цвет и разместить иконку. Теперь назначим правила для кнопки отправки формы.

/*стилизуем обе кнопки*/ #wrapper p.button input{     width: 30%;     cursor: pointer;     background: rgb(61, 157, 179);     padding: 8px 5px;     font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;     color: #fff;     font-size: 24px;     border: 1px solid rgb(28, 108, 122);     margin-bottom: 10px;     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);     border-radius: 3px;     box-shadow:         0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,         0px 0px 0px 3px rgb(254, 254, 254),         0px 5px 3px 3px rgb(210, 210, 210);     transition: all 0.2s linear; } #wrapper p.button input:hover{     background: rgb(74, 179, 198); } #wrapper p.button input:active, #wrapper p.button input:focus{     background: rgb(40, 137, 154);     position: relative;     top: 1px;     border: 1px solid rgb(12, 76, 87);     box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; } p.login.button, p.signin.button{     text-align: right;     margin: 5px 0; } 

Трюк заключается в том, чтобы использовать box-shadow, чтобы создать несколько рамок. Естественно, вы можете использовать лишь одну рамку, но также можно и несколько. Мы будем использовать параметр length для создания “фейковой” второй белой рамки, 3px в ширину, без размытия. Теперь стилизуем чекбокс, здесь мы ничего необычного не сотворим:

/* стилизуем чекбокс "запомнить меня"*/ .keeplogin{     margin-top: -5px; } .keeplogin input, .keeplogin label{     display: inline-block;     font-size: 12px;     font-style: italic; } .keeplogin input#loginkeeping{     margin-right: 5px; } .keeplogin label{     width: 80%; } 

Стилизуем подвал формы, используя множественные линейные градиенты, чтобы создать полосатый градиент.

p.change_link{     position: absolute;     color: rgb(127, 124, 124);     left: 0px;     height: 20px;     width: 440px;     padding: 17px 30px 20px 30px;     font-size: 16px ;     text-align: right;     border-top: 1px solid rgb(219, 229, 232);     border-radius: 0 0  5px 5px;     background: rgb(225, 234, 235);     background: repeating-linear-gradient(-45deg,     rgb(247, 247, 247) ,     rgb(247, 247, 247) 15px,     rgb(225, 234, 235) 15px,     rgb(225, 234, 235) 30px,     rgb(247, 247, 247) 30px     ); } #wrapper p.change_link a {     display: inline-block;     font-weight: bold;     background: rgb(247, 248, 241);     padding: 2px 6px;     color: rgb(29, 162, 193);     margin-left: 10px;     text-decoration: none;     border-radius: 4px;     border: 1px solid rgb(203, 213, 214);     transition: all 0.4s  linear; } #wrapper p.change_link a:hover {     color: rgb(57, 191, 215);     background: rgb(247, 247, 247);     border: 1px solid rgb(74, 179, 198); } #wrapper p.change_link a:active{     position: relative;     top: 1px; } 

Сейчас вы видите, что у нас две приятные формы, но ведь мы хотим, чтобы отображалась только лишь одна из них. Пришло время анимации!

Создаем анимацию

Первое, что мы сделаем, мы спрячем вторую форму, назначив opacity на 0:

#register{     z-index: 21;     opacity: 0; } 

Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа. Теперь самое интересное: меняем формы местами, используя псевдо класс :target. Вам нужно понять одну вещь по поводу :target: для перемещения мы будем использовать якоря. Нормальное поведение якоря — прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами. И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр display: none. Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).

#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login{     z-index: 22;     animation-name: fadeInLeft;     animation-delay: .1s; } 

Вот, что происходит: когда мы кликаем на кнопку Присоединиться, мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием fadeInLeft. Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться. Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form. Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.

.animate{     animation-duration: 0.5s;     animation-timing-function: ease;     animation-fill-mode: both; } @keyframes fadeInLeft {     0% {         opacity: 0;         transform: translateX(-20px);     }       100% {         opacity: 1;         transform: translateX(0);     } } 

Форма, которая “исчезает”, будет иметь анимацию затемнения влево:

#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register{     animation-name: fadeOutLeftBig; }   @keyframes fadeOutLeft {     0% {         opacity: 1;         transform: translateX(0);     }       100% {         opacity: 0;         transform: translateX(-20px);     } } 

Теперь вы можете использовать другие анимации от Dan Eden’ с помощью файла animate.css: просто измените класс .animate class и названия анимаций. Вы также обнаружите несколько других анимаций в конце файла animate-custom.css file. Вот и все, друзья. Надеюсь вам понравился этот туториал!Заметим, что в некоторых браузерах параметр background-clip: text не поддерживается. В Internet Explorer 9 анимации не работают. В Internet Explorer 8 и ниже псевдо-класс :target pseudo-class не поддерживается, поэтому там этот эффект вообще работать не будет.

Демо

  1. Слайд влево и затемнение
  2. Слайд влево
  3. Масштабирование

Посмотреть демо | Скачать исходные файлыP.S. Все замечания по поводу перевода с удовольствием приму в личку. Спасибо! Бывает, приходится делать сайты на flask, у которых есть пользователи и админы. Чисто для себя решил как-то это стандартизировать и, главное, не терять время, когда такая задача появляется. Цель — в несколько команд получить рабочий сайт у которого есть:

  • Регистрация
  • Email подтверждение
  • Авторизация
  • Выход (logout)
  • Администраторы и роли администраторов
  • Административная, пользовательская и публичная часть сайта
  • Возможность юзера менять пароль
  • Восстановление пароля
  • Локализация для иностранных языков

Скриншоты

Вот что получается из коробки:

Профиль пользователя после авторизации: Админка на flask-admin: Получить такой сайт можно двумя вариантами:

I Вариант. С использованием flask-user и SQL-базы данных

Установка и запуск

Установка

cd ~ # Создаем виртуальное окружение virtualenv env # Активируем виртуальное окружение . env/bin/activate mkdir -p ~/www/my_app cd www git clone https://github.com/Alexmod/Flask-User-and-Flask-admin.git  my_app cd my_app/ # Ставим необходимые модули pip install -r requirements.txt # Инициируем базу данных python manage.py init_db # Запускаем тесты py.test tests/ # Если тесты успешно завершились, запускаем сервер python manage.py runserver 

После этих команд по адресу http://localhost:5000/ должен открыться сайт как на скриншотах. Юзер: user@example.com Пароль: Password1. Админ: admin@example.com Пароль: Password1. Я запускал и тестировал на linux с версией Python 3.4, но предполагаю, что должно «взлететь» и на любых 3.x. Ссылка на GitHub. Образец установки в консолеПодробности первого варианта

Подробности

За основу я взял модуль Flask-User и вот этот репозиторий. Что было добавлено / изменено:

  1. Добавлена локализация как темплейтов, так и флэш-сообщений. Поддержка языков: (Немецкий, Английский, Испанский, Фарси, Финский, Французский, Итальянский, Датский, Русский, Шведский, Турецкий, Китайский). Если языка нет в списке, то по умолчанию в конфиге русский язык установлен в качестве дефолтного.
    # local_settings.py BABEL_DEFAULT_LOCALE = 'ru'  

    На русский язык я сделал свою локализацию.

    app/translations/ru/LC_MESSAGES/flask_user.po

    С flash-сообщениями отлично справился Flask-Babel, а вот чтобы в темплейтах заработал перевод на русский язык строк вида:

    {%trans%}Forgot your Password?{%endtrans%} или {{ _('Sign in') }}

    Пришлось поваландаться. Добавил:

    import gettext 

    и вот такую функцию:

    def set_lang(lang):     i18n_dir = app.config['BABEL_TRANSLATION_DIRECTORIES']     gettext.install('lang', i18n_dir)     trans_file = i18n_dir + lang + '/LC_MESSAGES/flask_user'     tr = gettext.translation(trans_file, 'locale',  languages=[lang])     tr.install(True)     app.jinja_env.install_gettext_translations(tr)
  2. Удалил поля имени и фамилии при регистрации. По моему опыту это редко когда требуется, а юзеров раздражает.
  3. Все *.py файлы приведены к стандарту pep-8
  4. Вычищены модули, которые подгружаются, но не используются
  5. Роуты разбиты на 3 части: публичный, админский и пользовательский (public_view.py, members_views.py, про админку ниже)
  6. Добавлен модуль flask_bootstrap и вместе с ним изменены темплейты и показ flash-сообщений
    {% import "bootstrap/utils.html" as utils %} {{ utils.flashed_messages(dismissible=True, container=False) }}

    В файле layout.html.

  7. Добавил админку Flask-Admin (статья на хабре о ней). После нехитрых манипуляций она позволила активировать, деактивировать и удалять юзеров, дала возможность добавления ролей. Плюс работа со статическими файлами (загрузка на сервер, удаление, создание папок и т.д.). Пока без локализации. Дружить Flask-Admin и Flask-User не хотели при совместном использовании user_models.py. Пришлось для Flask-Admin создать отдельный файл models.py, и я так и не смог разобраться, почему они друг другу мешали.

II Вариант. С использованием flask-security и MongoDB

Скриншоты

Скриншоты

Вот что получается из коробки:

Установка и запуск

Установка

Надеюсь, что у вас уже установлен git, virtualenv и mongoDB.

cd ~ # Создаем виртуальное окружение virtualenv env # Активируем его . env/bin/activate # Создаем папку проекта mkdir -p ~/www/my_app cd www git clone https://github.com/Alexmod/flask-security-flask-admin-mongodb.git  my_app cd my_app # Ставим все необходимые модули pip install -r requirements.txt # Запускаем сервер python manage.py runserver 

После этих команд по адресу http://localhost:5000/ должен открыться сайт как на скриншотах. Юзер: user@example.com Пароль: Password1. Админ: admin@example.com Пароль: Password1. Я запускал на linux с версией Python 3.6, но предполагаю, что должно «взлететь» и на любых 3.x. Ссылка на GitHub для MongoDB

Деплой первого и второго варианта

Способов деплоя множество. Вот один самый простецкий. Ставим gunicorn:

pip install gunicorn 

В папке my_app создаем новый файл wsgi.py со следующим содержанием:

from app import create_app  app = create_app() 

И запускаем:

gunicorn wsgi:app

Если все пройдет без ошибок, то по адресу http://127.0.0.1:8000 будет сайт, который можно прикручивать к nginx или apache. Дальше настраиваем systemd, чтобы он стартовал автоматически, и не забываем в файле local_settings.py изменить строку:

DEBUG = True # Меняем на False

Используемые источники:

  • https://codyshop.ru/kollektsiya-iz-15-krasivyih-form-registratsii-i-avtorizatsii/
  • https://habr.com/ru/post/140816/
  • https://habr.com/ru/post/349264/

Оцените статью
Рейтинг автора
5
Материал подготовил
Андрей Измаилов
Наш эксперт
Написано статей
116