Вы находитесь на странице: 1из 101

МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ

Федеральное государственное бюджетное образовательное учреждение


высшего образования
«КУБАНСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ»
(ФГБОУ ВО «КубГУ»)
Физико-технический факультет
Кафедра теоретической физики и компьютерных технологий

Допустить к защите
«___» _______________ 202___ г.
Зав. кафедрой ________ В.А. Исаев
«___» ____________ 202___ г.

ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТА

РАЗРАБОТКА МОБИЛЬНОГО ПРИЛОЖЕНИЯ ДЛЯ ОРГАНИЗАЦИИ


РАБОТЫ СТУДЕНЧЕСКОГО ОБЪЕДИНЕНИЯ ФИЗИКО-
ТЕХНИЧЕСКОГО ФАКУЛЬТЕТА

Работу выполнил ___________________________________ А.В. Самойленко


(подпись)

Направление подготовки 09.03.02 Информационные системы и технологии

Направленность (профиль) Информационные системы и технологии

Научный руководитель, доц.,


канд. физ.- мат. наук___________________________________ А.А. Мартынов
(подпись)

Нормоконтролер
ст.преподаватель ___________________________________________ Г.Д.Цой
(подпись)

Краснодар
2020
РЕФЕРАТ

Выпускная квалификационная работа 101 с., 18 рис., 15 источников, 12


прил.
РАЗРАБОТКА, PHP, SQLite, HTML,CSS, ANDROID – ПРИЛОЖЕНИЕ,
БАЗА ДАННЫХ, ANDROID, WEB-APPS, JS,
Объектом разработки данной выпускной квалификационной работы
является android-приложение, предназначенное для автоматизации учёта
работы активистов студенческого объединения физико– технического
факультета.
Цель работы – создать Android – приложение, для учёта работы
активистов физико – технического факультета.

Для достижения поставленной цели были выполнены следующие задачи:


- написать веб версию приложения на языке гипертекстовой разметки
HTML;
- добавить стили посредством языка каскадных стилей CSS;
- добавить скрипты для корректной работы всплывающих окон;
- добавить функции, обеспечивающие подключение к локальной базе
данных, отправку в базу данных и считывание данных из базы данных;
- собрать весь код в отдельное Android – приложение;
- произвести отладку готового кода.

В результате выполнения выпускной квалификационной работы


разработано приложение организации работы активистов студенческого
объединения физико– технического факультета и выполнена его отладка.

2
СОДЕРЖАНИЕ

Введение 6

1 Обзор существующих мобильных платформ 8

1.1 Архитектура Android 10

2 Проектирование Android – приложения «CО ФТФ» 14

2.1 Формулировка требования к Android – приложению «CО ФТФ» 14

2.2 Разработка архитектуры приложения «СО ФТФ» 15

2.3 Разработка дизайна приложения «СО ФТФ» 15


2.4 Функционал и особенности языка HTML 16
2.5 Функционал и особенности языка PHP 17
2.6 Функционал и особенности языка CSS 18
2.7 Функционал и особенности языка JavaScript 19
2.8 Разработка административной части 21
2.9 Описание процесса отладки программы 21
3 Разработка Android – приложения «СО ФТФ» 24
3.1 Навигация приложения «СО ФТФ» 24
3.2 Оптимизация HTML и CSS кода 39
3.3 Оптимизация JavaScript кода 41
3.4 Методология написания приложения 43
3.5 Backend разработка 47
3.6 Преобразование web-сайта в приложение Android 48
Заключение 50
Список использованных источников 51
Приложение А Код файла index.html 53

3
Приложение Б Код файла calendar.html 54
Приложение В Код файла contacts.html 57
Приложение Г Код файла login.html 60
Приложение Д Код файла main.html 61
Приложение Е Код файла meeting-page.html 63
Приложение Ж Код файла meeetings.html 65
Приложение З Код файла profile.html 67
Приложение И Код файла rating.html 70
Приложение К Код файла signup.html 73
Приложение Л Код файла default.js 75
Приложение М Код файла default.css 79

4
ОБОЗНАЧЕНИЯ И СОКРАЩЕНИЯ

ОС Операционная система
СО ФТФ Студенческое объединение физико – технического
факультета
ПК Персональный компьютер
ПО Программное обеспечение
JS JavaScript

ВВЕДЕНИЕ

5
Веб-технологии совершили огромный шаг в жизни интернет-
пользователей, и активное их распространение представляется необратимым
процессом. Именно поэтому надо идти в ногу со временем и оцифровывать
все данные, для упрощения работы.
Мобильные телефоны плотно проникли в нашу жизнь и в ближайшем
будущем не собираются из нее выходить и это очень хорошо, ведь вместе с
современными технологиями мобильные телефоны превратились в самые
настоящие компьютеры, притом очень компактные.
Необходимо пользоваться этим и переносить все данные на мобильные
платформы, вот именно поэтому мной было принято решение создать
мобильное приложение.
В данной выпускной квалификационной работе было решено создать
Android – приложение для студенческого объединения физико – технического
факультета, председателем которого является автор данного проекта.
Создаваться приложение будет в формате web-app, то есть изначально
оно будет создано как сайт для мобильного устройства, а позже объединено в
единый .apk файл.
Данное приложение поможет президиуму студенческого объединения
физико – технического факультета следить за работой активистов, вести учёт
их работы и иметь представление о том, какой вклад каждый из них вносит в
работу студенческого объединения.
Цель работы – создать Android – приложение, для учёта работы
активистов физико – технического факультета.
Для достижения поставленной цели были выполнены следующие задачи:
- написать веб версию приложения на языке гипертекстовой разметки
HTML;
- добавить стили посредством языка каскадных стилей CSS;
- добавить скрипты для корректной работы всплывающих окон;
- добавить функции, обеспечивающие подключение к локальной базе
данных, отправку в базу данных и считывание данных из базы данных;

6
- собрать весь код в отдельное Android – приложение;
- произвести отладку готового кода.

1 Обзор существующих мобильных платформ

7
Наличие операционной системы (ОС) — главная особенность, которая
отличает смартфон от обычного мобильного телефона. При выборе
конкретной модели мобильного телефона, планшета или иного устройства,
операционная система часто является определяющим фактором. Наиболее
распространенные операционные системы для смартфонов и платформ:
1) Windows Mobile и Windows CE — компактная операционная система
Microsoft, выпущенные с 1996 года и занимала самый большой сегмент рынка
ОС для смартфонов к 2010 году, в настоящее время проходит поэтапный отказ
от поддержки и развития;
2) Android — портативная операционная система для смартфонов,
планшетных ПК, электронные книг, цифровых плееров, часов и нетбуков на
базе ядра Linux. Первоначально разработанная Android Inc., которую затем
купил Google. Впоследствии Google инициировала создание альянса Open
Handset Alliance (OHA), который сейчас занимается поддержкой и
дальнейшим развитием платформы. Android позволяет создавать приложения
на основе Java, который управляют устройством через разработанные Google
библиотеки. Android Native Development Kit позволяет системе использовать
библиотеки и компоненты приложений, написанных на C и других языках;
3) ОС IOS (до 24 июня 2010 года — iPhone OS) — это мобильная
операционная система, разработанная и изготовленная американской
компанией Apple. Она была выпущена в 2007 году; первоначально — для
iPhone и Ipod Touch, а позже — для таких устройств, как Ipad и Apple TV. В
отличие от Windows Phone и Google Android, доступна только для устройств,
производимых Apple;
4) Windows Phone 8 — второе поколение телефонной операционной
системы от Microsoft Windows. Выход произошел 29 октября и является
прототипом интерфейса, известного как Metro (или Modern UI). Windows
Phone 8 использует новую архитектуру Windows NT, которая используется в
операционных системах Microsoft. Устройства, работающие под управлением
Windows Phone 7. Х не может выполнить обновление до Windows Phone 8, а

8
новые приложения, созданные для Windows Phone 8 не могут работать на
Windows Phone 7. Х.
В настоящее время Android развивается в геометрической прогрессии:
каждый год число пользователей этой операционной системы постоянно
растет. Согласно последнему отчету компании Canalys, ведущего аналитика
индустрии высоких технологий, операционная система Android занимает 72%
мирового рынка мобильных устройств. Конечно, этот факт привлекает
внимание многих разработчиков создавать мобильные приложения,
специально для Android. Возможно, на сегодняшний день она является самой
популярной и интересной системой.
Система Android не является закрытой системой, как iOS, в этом есть
как свои плюсы, так и свои минусы, давайте рассмотрим их.
Плюсами открытой системы является массовость. Любой бренд
смартфонов может установить на своё устройство операционную систему
Android, что даёт огромный рынок для разработчиков, абсолютное
большинство смартфонов имеет ОС Android, следовательно и потенциальных
пользователей в разы больше.
Так же к плюсам относится возможность модифицировать систему.
Можно устанавливать различные версии прошивок на своё устройство,
улучшать его как вздумается пользователю, создавать приложения для
личного пользования, безусловно это является плюсом.
Всё же без минусов тут не обошлось, главным минусом открытости
системы, на мой взгляд, является обход покупки приложений. Любой
пользователь может найти на просторах интернета apk-файл практически
любого приложения, платного или бесплатного и установить его на свой
смартфон, обходя его покупку у разработчика.
Ещё один из минусов – безопасность. Смартфоны на базе Android
защищены слабее, чем те же смартфоны на iOS, связано это с той же
открытостью системы.

9
1.1 Архитектура Android

C точки зрения программиста, Android — платформа, которая


абстрагирует разработчика от ядра, и позволяет ему создать код в Java. Android
имеет несколько полезных функций. Во-первых, это основа предлагает
большой набор API для создания различных типов приложений, а также
обеспечивает возможность повторного использования и замены компонентов,
предлагаемых приложениями платформы и сторонних производителей. Во-
вторых, наличие виртуальной машины Dalvik, отвечает за запуск приложений
на Android. Кроме того, услуги множества разработчиков графических
библиотек для 2D и 3D приложений, поддерживают мультимедийные форматы
(Ogg Vorbis, MP3, MPEG-4, H.264, PNG), API для доступа к камере, GPS,
компас, акселерометр, сенсорный экран, джойстик или клавиатура. Существует
даже специальный API для воспроизведения фоновых звуковых эффектов, что
полезно для нас в разработке игр. Не все Android-устройства имеют все эти
возможности — есть аппаратное подразделение. Конечно, у Android не
исчерпывается список возможностей упомянутых здесь. Тем не менее, для
разработки игр они являются наиболее важными. Android-архитектура
формируется из множества компонентов. Каждый компонент основан на
элементах нижнего уровня. На рис. 1 представлен обзор основных компонентов
Android. В нижней части рисунка 1 показано, что ядро Linux обеспечивает
основные драйверы для аппаратных компонентов системы. Кроме того, ядро
отвечает за память, управление процессами, сетевую поддержку и т.д. Среда
выполнения Android, построенная вокруг ядра, отвечает за разработку и
осуществление Android приложений. Каждая программа работает в своем
собственном процессе со своей собственной виртуальной машиной Dalvik.
Dalvik запускает программы в формате байткодом DEX. Java-файлы с классом
преобразованы в формат DEX с помощью специального инструмента DX,
доступном в SDK. Формат DEX занимает гораздо меньше места в памяти, 13

10
чем классический тип файлов CLASS, что достигается за счет высокой степени
сжатия, разделения на таблицы и объединения несколько CLASS-файлов.

Рисунок 1 — Обзор архитектуры

Dalvik виртуальная машина взаимодействует с библиотеками ядра,


которые предлагают базовые функциональные возможности для Java-программ.
Эти библиотеки имеют большой, но не полный перечень классов, доступных
через Java SE. До Android 2.2 (Froyo) весь код был интерпретирован. В Froyo
было введено отслеживание JIT-компилятора, который может компилировать
части байткода в машинный код на лету. Это значительно повышает
производитель- 14 ность приложений, которые требуют большего количества
вычислений. JITкомпилятор может использовать возможности процессоров,
которые специально разработаны для сложных вычислений, таких как операции

11
с плавающей запятой. Кроме того, он включал свой собственный сборщик
мусора Dalvik (Garbage Collector, GC). Он работает по принципу «уведомить и
забрать», что иногда ставит разработчиков в тупик. Тем не менее, если его
тщательно изучить, то он может быть эффективно использован в разработке
игр. Каждое приложение, работающее в экземпляре виртуальной машины
Dalvik, имеет в своем распоряжении от 16 до 24Mb RAM. Это необходимо
иметь в виду, используя картинки и звуковые ресурсы. В дополнение к
основным библиотекам, которые предлагают некоторые функциональные
возможности Java SE, есть также множество собственных библиотек в C / C ++,
которые помогают создать основу для применения структуры. Эти системные
библиотеки в основном отвечает за комплекс функций (рисование графики,
воспроизведение звука, доступ к базе данных), что не очень подходит для
виртуальной машины Dalvik. API развернул их с помощью классов Java в
рамках приложения, которое используется для написания игр. Фреймворк
связывает системные библиотеки и среды выполнения, создавая тем самым
привязку к Android. Структура управляет приложениями и предлагает сложную
среду, в которой они работают. Разработчики создают приложения для этой
структуры с набором API-интерфейсов в Java, охватывающих такие области,
как разработка пользовательского интерфейса, фоновые службы, уведомления,
управление ресурсами, доступ к периферийным устройствам и т.д. Все виды
ключевых приложений, которые поставляются с операционной системой
Android (например, клиент электронной почты), написаны с помощью API.
Приложения, интерфейс или фоновые службы могут взаимодействовать с
другими приложениями. Это соединение позволяет одному приложению
использовать другие компоненты. Простой пример — это программа, которая
делает фото-образ, а затемможет обработать его. Приложение запрашивает у
системы другой компонент приложения, который обеспечивает это действие.
Далее, 15 первое приложение может повторно использовать этот компонент
(например, от встроенной в приложение камеры или из фотогалереи). Этот
алгоритм удаляет значительную часть бремени от программиста, и позволяет

12
настроить поведение многообразия аспектов Android. Для разработки
собственного приложения необходимо изучить инструментарий комплекта для
разработки программ Android Software Development Kit (SDK).

2 Проектирование Android – приложения «CО ФТФ»

2.1 Формулировка требования к Android – приложению «CО ФТФ»

13
Android – приложение «СО ФТФ» должено иметь понятную структуру,
удобно организованную систему навигации. Информация в Android –
приложении должна легко обновляться, не требуя от менеджера специальных
знаний. Изменение или расширение функциональности Android – приложения
должно происходить быстро и с небольшими затратами.
Android – приложение «СО ФТФ» используется для решения следующих
задач:
- учёт работы членов актива студенческого объединения физико–
технического факультета;
- запись информации об активистах в базу данных;
- вывод в таблицу всех членов актива, отсортированных по количеству
баллов.
Этапы разработки Android – приложениеа «СО ФТФ»:
- формулировка требований;
- оставление технического задания;
- программирование и вёрстка;
- информационное наполнение;
- техническая поддержка.
Оформление Android – приложения «СО ФТФ» должно быть
максимально упрощенным и обладать удобным пользовательским
интерфейсом. Общая цветовая гамма должна быть в тёмных тонах (с
применением оттенков темно– синего цвета), общая компоновка страницы не
должна изменяться и быть постоянной на всех страницах Android –
приложения.
Android – приложение «СО ФТФ» должно занимать все пространство
экрана по ширине. Android – приложение должно выглядеть одинаково на
большинстве современных Android – устройств. Допускается незначительные
искажения в отображении некоторых элементов страницы из– за особенностей
разных версий ОС и разных размеров экранов. Код страницы должен быть

14
лаконичным, но без ущерба к оформлению и функционалу Android –
приложения.

2.2 Разработка архитектуры приложения «СО ФТФ»

Архитектура приложения – систематизация информации и навигации по


ней с целью помочь посетителям более успешно находить нужные им данные.
Хорошо продуманная грамотная архитектура приложения гарантирует, что
пользователи потратят меньше времени на поиск нужной информации.
Программная часть архитектуры приложения «СО ФТФ»
рассматривается как взаимосвязь операционной и серверной части.
В операционной части рассматривается среда разработки приложения.
Разработка операционной части.
Приложение «СО ФТФ» разрабатывается в средах PHP и Java. Для ответа
обоснования выбора было произведено сравнение PHP с другими языками
программирования веб – приложений.

2.3 Разработка дизайна приложения «СО ФТФ»

Дизайн – одна из важнейших составляющих приложения. Хороший


дизайн это не только красивая картинка, но и удобный и понятный интерфейс.
Пользователь должен быстро найти то, что ему нужно, важно
минимизировать время на понимание интерфейса, ведь время в наше время –
важнейший ресурс, который нельзя тратить на поиск нужной кнопки или
пункта где то в глубине приложения.
Дизайн разрабатывался в приложении Adobe Illustrator 2018 CC. Данная
программа создана для графических дизайнеров, в ней имеется большой
функционал для отрисовки объектов, калибровки цветов, и самое главное,
программа работает в векторной графике, что позволяет масштабировать

15
изображение бесконечно много, в отличие от растрового изображения,
векторное не искажается.

2.4 Функционал и особенности языка HTML

HTML – это язык гипертекстовой разметки текста. Гипертекстовым


HTML называется потому, что с его помощью на странице можно
устанавливать ссылки на все прочие веб– документы [1].
HTML – это самый распространенный инструмент создания сайтов, если
вы посмотрите на исходный код страниц, то увидите, что среди всех онлайн–
проектов, большинство из них пишется именно на языке HTML.
И отчасти это связано с тем, что язык гипертекстовой разметки очень просто
осваивается и понять его может даже школьник за весьма непродолжительное
время.
HTML считается самым демократичным языком, так как он
поддерживается и интерпретируется Интернет– проводниками.
Ведь браузеры работают по индивидуальным принципам, а HTML позволяет
деликатно подстроить представление страниц под условия каждого из них.
Кроме того, HTML никогда не стоит на месте в плане развития, без конца
появляются новые версии, которую позволяют оптимизировать и облегчить
работу, улучшая при этом общую картину конечного результата. Последняя
версия HTML – это HTML 5.
Если рассматривать эту версию в отдельности, то можно выявить
следующие плюсы: она стала более гармоничной в плане SEO– продвижения,
так что теперь и код вы сможете оптимально сопоставить с поисковыми
алгоритмами.
Кроме того, было усовершенствована мультимедийная сторона HTML. И
если раньше для воспроизведения музыки или видео приходилось подключать
вспомогательные расширения, то теперь вы сможете легко обойтись без
подобной необходимости, используя встроенные функции HTML5 [2].

16
2.5 Функционал и особенности языка PHP

PHP, прежнее название: Personal Home Page Tools –  скриптовый язык


программирования, был создан для генерации HTML – страниц на стороне веб–
сервера. PHP является одним из самых распространенных языков,
используемых в сфере веб-разработок. PHP поддерживается подавляющим
большинством хостинг –  провайдеров. PHP – проект открытого программного
обеспечения.
PHP интерпретируется веб-сервером в HTML– код, который передается на
сторону клиента [3].
В отличие от скриптового языка JavaScript, пользователь не видит PHP–
кода, поскольку браузер получает готовый html- код. Это преимущество с точки
зрения безопасности, но ухудшает интерактивность страниц. Но ничто не
запрещает использовать РНР для генерирования и JavaScript – кодов
выполняемых уже на стороне клиента [4].
Суммируя вышесказанное, можно выделить основные плюсы языка PHP:
- PHP очень прост в изучении (если сравнивать с другими языками);
- этот язык легко внедрять в документы HTML (в отличие от C или Perl); 
- язык PHP очень популярен – большинство хостеров его поддерживают; 
- по этому языку написано огромное количество документаций;
- сейчас тысячи разработчиков используют язык PHP;
- несколько миллионов (а может уже и миллиардов) сайтов работают на
PHP;
- PHP полностью бесплатен.

2.6 Функционал и особенности языка CSS

17
CSS – это формальный язык, служащий для описания оформления
внешнего вида документа, созданного с использованием языка разметки
(HTML, XHTML, XML). Название происходит от английского Cascading Style
Sheets, что означает «каскадные таблицы стилей».
Назначение CSS – отделять то, что задает внешний вид страницы, от ее
содержания. Если документ написан только с использованием языка разметки
HTML, то в нем определяется не только каждый элемент, но и способ его
отображения (цвет, шрифт, положение блока и т. Д.), что очень сильно
загрязняет код и он становится нечитаемым. Для того, чтобы избежать этого,
подключают каскадные таблицы стилей СSS. Если подключены каскадные
таблицы стилей, то HTML описывает только очередность объектов, а за все их
свойства отвечает CSS, достаточно прописывать класс, не перечисляя все стили
каждый раз [5-6].
Такая технология имеет следующие преимущества:
- обеспечивает довольно быструю и простую разработку, потому что
оформление созданное один раз, в будущем можно свободно применять ко
многим другим страница нашего приложения;
- повышает качество и быстроту редактирование, ведь исправив одну
строку кода в CSS, можно исправить большинство станиц нашего приложения,
в зависимости от того, как было настроено подключение таблиц стилей;
- делает код заметно проще для чтения и редактирования человеком, ведь
исправить хорошо структурированный и красиво оформленный код намного
проще, чем хаотичный, а так же CSS упрощает поиск приложения
специальными роботами – поисковиками;
- ускоряет время загрузки, потому что CSS может записываться в кэш ПК,
а в последующих открытиях данной страницы загружаются только структура и
данные;
- увеличивает количество визуальных решений для представления
содержимого;

18
- обеспечивает возможность легко применять к одному документу разные
стили, к примеру, создавать адаптированную версию для мобильных устройств
или специальные стили для слабовидящих, то есть каскадные таблицы служат
не только для воплощения дизайна, но и меняют подход к построению сайтов,
упрощая труд разработчиков и обеспечивая гибкость реализации [7].

2.7 Функционал и особенности языка JavaScript

JavaScript – язык сценариев, или скриптов. Скрипт представляет собой


программный код – набор инструкций, который не требует предварительной
обработки (например, компиляции) перед запуском. Код JavaScript
интерпретируется движком браузера во время загрузки веб– страницы.
Интерпретатор браузера выполняет построчный анализ, обработку и
выполнение исходной программы или запроса.
JavaScript – объектно– ориентированный язык с прототипным
наследованием. Он поддерживает несколько встроенных объектов, а также
позволяет создавать или удалять свои собственные (пользовательские) объекты.
Объекты могут наследовать свойства непосредственно друг от друга,
образуя цепочку объект – прототип.
Сценарии JavaScript бывают встроенные, т.е. их содержимое является
частью документа, и внешние, хранящиеся в отдельном файле с
расширением .js.
Сценарии можно внедрить в html– документ следующими способами:
- в виде гиперссылки:
Для этого нужно разместить код в отдельном файле и включить ссылку на
файл в заголовок, ниже будут представлены различные способы подключения
JS в код приложения.

<head>
<script src=”script.js”></script>

19
</head>
<body>
<script src=”script.js”></script>
</body>

Этот способ обычно применяется для сценариев большого размера или


сценариев, многократно используемых на разных веб– страницах, ведь намного
проще прописать скрипт в отдельном документе и подключать его по
необходимости в виде одной строчки в нужный момент, чем прописывать его
каждый раз, тем самым засоряя код нашего приложения [8].
- в виде обработчика события.
Каждый html– элемент имеет JavaScript– события, которые срабатывают в
определенный момент. Нужно добавить необходимое событие в html– элемент
как атрибут, а в качестве значения этого атрибута указать требуемую функцию.
Функция, вызываемая в ответ на срабатывание события, является
обработчиком события [9-10]. В результате срабатывания события исполнится
связанный с ним код. Этот способ применяется в основном для коротких
сценариев, например, можно установить смену цвета фона при нажатии на
кнопку:

<script>
var colorArray = [“#5A925E”, “#A5BF2A”, “#F2446E”, “#FAD5BB”,
“#F21EFF”]; // создаем массив с цветами фона
var i = 0;

function changeColor(){
document.body.style.background = colorArray[i];
i++;
if( i > colorArray.length – 1){
i = 0;

20
}
}
</script>
<button onclick=”changeColor();”>Change background</button>

2.8 Разработка административной части

Администрирование выполняется путем изменения структуры самой


страницы, то есть изменения кода страницы.
Администратор может исправить содержащиеся основные настройки
приложения, то есть всевозможные настройки базы данных:
- добавление;
- удаление;
- редактирование столбцов содержащих информацию об активе физико–
технического факультета.

2.9 Описание процесса отладки программы

Существует несколько методов отладки программных продуктов:


а) метод ручного тестирования;
б) метод индукции;
в) метод дедукции;
г) метод обратного прослеживания.
Предлагаю познакомиться с каждым из них.
Метод ручного тестирования – самый простой метод отладки, при
котором после обнаружения ошибки необходимо выполнить программу,
которую мы тестируем, вручную, используя тестовый набор, при работе с
которым была обнаружена данная ошибка.

21
Метод индукции – метод основывается на доскональном анализе
симптомов ошибки, которыми могут являться неверные результаты
математических или иных вычислений, всплывающие сообщения об ошибках.
Если ПО просто «зависает», то место появления ошибки вычисляют, исходя из
последних результатов работы программы или действий пользователя,
работавшего с ней.
Метод дедукции – согласно этому методу сначал формируют множество
причин, которые могли бы повлечь за собой появление данной ошибки. Далее,
проводя анализ причины, исключают те, которые противоречат данным
проведенного исследования. В ином случае наиболее вероятную гипотезу
возникновения ошибки стараются доказать и исправить, если гипотеза,
выдвинутая ранее может исправить ошибку, значит она является верной.
Метод обратного прослеживания – для небольших программ является
очень эффективным методом. Начало работы этим методом берется с точки
вывода неверного результата программы. Для этой точки строится гипотеза,
как и в методе дедукции, о значениях основных переменных, которые могли
бы в процессе работы программы привести к появлению имеющегося
результата. Далее, исходя из гипотезы, делают предположения о значениях
переменных в предществующей точке. Процесс продолжается, пока не будет
выявлена истиная причина ошибки.
Для отладки разрабатываемой программы был использован метод «снизу
вверх». Вначале каждый самостоятельный класс или функция был отлажен
отдельно, а затем отлаженные модули были добавлены в единую программу.
Для отладки каждой функции или класса был написан вызывающий
модуль, который задает исходные данные для функции или класса, вызывает ее
и выводит результат её работы на экран.
В процессе отладки были обнаружены ошибки следующих типов:
- синтаксические – это опечатки, а также ошибки, связанные с
неправильным написанием операторов языка. Компилятор обнаруживает эти

22
ошибки, выводит сообщения о них и устанавливает курсор в то место, где
обнаружена ошибка.
- семантические – это ошибки, связанные с неправильным
использованием операторов языка. Они не обнаруживаются при компиляции,
но проявляются при работе программы.
- логические – это ошибки, связанные с неправильным построением
алгоритма программы. В разрабатываемой программе каждая функция и ее
логическая схема была продумана до ее написания, так что логических ошибок
при компиляции и отладки данного программного продукта найдено не было.
Процесс отлдаки занял довольно длительное время, потому что в
приложении было очень много так называемых «Экранов», то есть оконо,
которые необходимо запрограммировать и отладить.
Часто возникали неполадки со скриптами, в процессе написания
появлялось очень много лишних строк кода, что засоряло код и мешало при
работе с ним, нужно было избавляться и максимально очищать код от мусора.
Так же в процессе отладки были выявлены некоторое «баги», то есть
ошибки, провоцирующие некоректную работу программы. Они влияли на
визуальную составляющую, выводили из строя скрипты и так далее.

23
3 Разработка Android – приложения «СО ФТФ»

3.1 Навигация приложения «СО ФТФ»

Заходя в приложение «СО ФТФ» открывается главная страница, где


пользователю предлагается войти в уже существующий аккаунт или
зарегистрировать новый аккаунт. Интерфейс показан на рисунке 1.

Рисунок 1 – Страница входа и регистрации в приложении «СО ФТФ»

24
Нажимая на кнопку «Войти» пользователь попадает в окно ввода логина
и пароля. Интерфейс показан на рисунке 2.

Рисунок 2 – Страница входа в приложение «СО ФТФ»

25
Если же пользователь не зарегистрирован, ему необходимо пройти
регистрацию, где он должен ввести свои фамилию, имя, электронную почту,
логин, пароль, выбрать направление подготовки и курс. Интерфейс показан на
рисунке 3.

Рисунок 3 – Страница регистрации в приложении «СО ФТФ»

26
После завершения процедуры регистрации и входа, пользователь
попадает на главную страницу приложения, тут ему будут представлены
последние новости нашего студенческого объединения, проведенные и
предстоящие мероприятия и кнопка меню, для перехода по различным
страницам приложения, а так — же ссылки на социальные сети СО ФТФ, такие
как страница в Instagram и группа Вконтакте. Интерфейс показан на рисунке 4.

27
Рисунок 4 – Главная страница приложения «СО ФТФ»

По нажатию на кнопку меню, расположенную в правом верхнем углу,


открывается меню для выбора страницы, интерфейс которой, представлен на
рисунке 5. Пользователю необходимо выбрать, куда он хочет перейти,
представлены такие варианты как:
- мой профиль
- рейтинг
- календарь мероприятий
- собрания
- контакты

28
Рисунок 5 – Меню приложения «СО ФТФ»

В данном меню мы можем увидеть цифру в красном круге, она


обозначает о количестве заданий, которые должен выполнить активист СО
ФТФ, об этом я расскажу позже.
О каждом из пунктов будет рассказанно по порядку, начиная со станицы
«Мой профиль»
Выбирая пункт «Мой профиль» пользователь попадёт на страницу
своего профиля, где он сможет загрузить свою фотографию, посмотреть свои
задания, место в общем рейтинге и количество набранных баллов. Интерфейс
представлен на рисунке 6.

29
Рисунок 6 – Страница «Мой профиль» приложения «СО ФТФ»
При нажатии на кнопку «Моё место», пользователь будет перенаправлен
на страницу «Рейтинг». При нажатии на кнопку мои задания, пользователь
увидит всплывающее окно, в котором будут отображены текущие задания.
Интерфейс представлен на рисунке 7.

30
Рисунок 7 – Всплывающее страница «Мои задания»
Пункт «Рейтинг» отправляет нас на страницу, где показаны баллы всех
участников СО ФТФ. Интерфейс представлен на рисунке 8.

Рисунок 8 – Страница «Рейтинг» приложения «СО ФТФ»

31
При выборе пункта «Календарь мероприятий» пользователю откроется
страница, на которой будут представлены предстоящие мероприятия,
администратор может назначать ответственных за мероприятие людей и
выдавать им задания, которые будут отображаться у пользователей на странице
«Мой профиль». Интерфейс представлен на рисунке 9.

32
Рисунок 9 – Страница «Рейтинг» приложения «СО ФТФ»

Выдать задание можно нажав на кнопку «Ответственные» напротив


соответствующего мероприятия. Вызов всплывающего меню выполнен с
помощью кода [11]:
<div class=»b-popup» onclick=»javascript:PopUpHide()» id=»popup-calendar»>
<div class=»b-popup-content —сalendar»>
<div class=»__item»>
<h3>22 апреля</h3>
<p>День ФТФ</p>
<div class=»__ins»>
<h4>Ткачев Артем</h4>
<p>Купить батарейки для микрофонов</p>
<p>Купить воду для жюри</p>
</div>
<div class=»__ins»>
<h4>Петиков Иван</h4>
<p>Фон для проектора</p>
<p>Расстановка декораций</p>
</div>
<button class=»__btn-open»>Назначить задание</button>
</div>
</div>
</div>

Интерфейс представлен на рисунке 10.

33
Рисунок 10 – Страница «Рейтинг» приложения «СО ФТФ»

По нажатию на кнопку «Назначить задание», будет показано меню, с


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

34
При выборе пункта «Собрания» пользователю будет представлена
страница с полем выбора даты прошедших собраний, после выбора даты будет
показана повестка собрания, что обсуждалось на нём и какие мероприятия
предстоят. Интерфейс представлен на рисунке 11.

Рисунок 11 – Страница «Собрания» приложения «СО ФТФ»

На рисунках 12 и 13 представлены страницы, всплывающая после


выбора даты. На ней показана информация о повестке собрания и на ней же,
администратор может отметить присутствующих на собрании людей, нажав

35
на кнопку «Присутствующие» и путём расставления галочек напротив имени
каждого из активистов отметить их. Это нужно для контроля посещений
активистами собраний, а так же для поощрения баллами присутствующих.

Рисунок 12 – Страница с повесткой собрания СО ФТФ

36
Рисунок 13 – Меню для выбора присутствующих на собрании СО ФТФ

37
Нажимая на кнопку «Контакты», пользователь попадает на страницу, где
написаны все контакты председателей студенческого объединения физико-
технического факультета. Интерфейс представлен на рисунке 14.

Рисунок 14 – Страница «Контакты» приложения СО ФТФ

38
3.2 Оптимизация HTML и CSS кода

Рабочий код – не значит хороший код.


Для написания любого хорошего кода важно не только разбираться в его
синтаксисе, но и уметь грамотно его строить и оформлять, ведь при работе с
большими проектами, код переходит от одного программиста к другому ни
один раз, а следовательно каждый должен понять то, что написал предыдущий
человек.
Я расскажу вам про методы написания кода на HTML и CSS и об
основных ошибках, которые могут тут возникнуть.
Разметка по стандартам – HTML по своей сущности относится к языку,
прощающему ошикби, он допускает плохой код к выполнению и вывод
результат на экран. Но успешное отображение не означает, что код
написанный вами, будет семантически правильным или будет совместим с
общепринятыми стандартами. Кроме того, плохой код невозможно
предсказать и вы не можете быть уверены, что получите при отображении
данного кода. Вы должны быть внимательными при написании HTML – во
вложениях закрывать все элементы должным образом, использовать
идентефикаторы, классы так, как это заложено стандартами и всегда
проверять ваш код [12].
Использование семантических элементов – библиотека элементов HTML
является довольно большой и состоит более чем из сотни элементов, которые
пользователь может применять при написании кода., решить какие элементы
использовать для описания различного содержимого нашего будущего сайта
может быть сложно, но эти элементы являются семантическими основами.
Люди, которые в будущем будут пользоваться вашим продуктом, будут
благодарным вам за создание более доступного сайта, а программисты,
работающие над стилизацией вашего проекта, реализуют это намного быстрее.
Структура документа – как упоминалось ранее, HTML – прощающий
язык, следовательно страницы, написанные на нём будут отображаться без

39
испольнования doctype или элементов <html>, <head> и <body>. Без доктайпа
и данных структурных элементов, страницы будут отображаться неправильно
в любом браузере. Мы всегда должны быть уверены, что придерживаемся
верной структуры документа, в том числе элементов <html>, <head> и <body>.
Сохранение огранизованности синтаксиса – при росте колличества и
размеров страниц HTML управлять ими становится непростой задачей. К
нашему счастью, есть несколько простых правил, которые могут помочь
сохранить написанный нами синтаксис чистым и организованным, ниже я
приведу примеры этих правил:
- используйте строчные буквы в именах элементов, значений и
атрибутов;
- используйте строго двойные кавычки;
- уберите слеш в конце самозакрывающихся элементов.
Используйте практичные значения идентификаторов и классов.
Создание значений идентификаторов и классов является одной из самых
сложных частей написание HTML кода. Эти значения должны быть
практичными, относится к самому содержимому, но не к его стилю.
Использование значения green для описания зелёного текста не является
идеальным решением, так как описывает внешний вид нашего текста. Если в
дальнейшем процессе разработки понадобится сменить цвет текста на
красный, то должен будет меняться не только CSS код, но и HTML, в каждом
случае, где встречается класс green.
Используйте альтернативный текст для изображений. Изображения
всегда должны включать атрибут alt. Ридеры и другое ПО полагаются на этот
атрибут, чтобы обеспечить контекст к изображению. Значение атрибута alt
должно описывать, что содержит данное изображение. Если изображение не
содержит ничего полезного для пользователя, атрибут alt всё равно обязан
присутствовать, но при этом, его значение должно быть пустым, чтобы
ридеры его игнорировали. Кроме того, если изображение не несет особого

40
смысла, его можно подключать через CSS как фоновое изображение, а не
через HTML, как <img> [13].
Отделение содержимого от стиля. Никогда не используйте встроеные
стили HTML. Это создаёт страницы, которые слишком долго загружаются,
трудно поддерживаются и препятствуют нормальной работе дизайнеров и
разработчиков. Вместо этого используйте CSS для визуального оформления
вашего сайта. Применяйте их с помощью классов для целевых элементов,
таким образом вы избавитесь от загруженности кода и оптимизируете ваш
код.
Использование конкретных классов. Иногда селектор CSS настолько
длинный и специфичный, что он больше не несёт смысла, наоборот, он лишь
приводит к задрежкам производительности, затрудняет управление. В данном
случае рекомендуется использовать одиночный класс. Применение одинчного
класса к целевому элементу может создать больше кода в HTML, но даст
возможность коду отображаться быстрее и уберёт всевозможные препятствия
для управления кодом.
Использование сокращённых свойств и значений. Одной из
особенностей языка CSS является возможность использоваться сокращённые
значения и свойства. Большинство свойст и значений допускают сокращённый
вариант записи, что приводит к оптимизации процесса написания и
оптимизации кода. Как пример, можно вместо написания четырёх разных
свойств на основе margin и их значений для задания отступов вокруг всех
четырёх сторон рабочей области, можно использовать единственную команду
margin, которая установит равное значение для всех сторон единовременно.
Использование сокращённого варианта значительно ускоряет процесс
установки стилей для HTML.

3.3 Оптимизация JavaScript кода

41
Профессиональный разработчик пишет код не только для пользователя,
но и для себя самого, встретившего код в будущем, следственно код должен
читаться и легко пониматься. Ниже я разберу некоторые нюансы, которые
служат для оптимизации и «очищению» кода от лишнего мусора и возможных
ошибок.
Названия переменных. Переменные необходимо называть осмысленно,
название должно полностью передавать их суть, чтобы в будущем, вы не
вспоминали что такое перменная «а» и к чему она относится, особенно это
касается больнших проектов на многие тысячи строк кода, без осмысленных
названий переменных там просто не обойтись.
Функции. Использование функций длинных описательных имён так же
необходимо. Учитывая, что функция представляет собой описание какого-
либо действия, то и её название должно соответствовать. Вместо
сокращенного notif, нужно использовать notifyUser и так далее.
ES-классы. Классы появились в JS сравнительно недавно. Они являются
неким связующим звеном между синтаксисом. В основе того, что выходит,
при использовании классов, лежат, как и прежде, прототипы объектов, но код,
в котором применяются классы, выглядит немного по-другому. В целом, если
имеется такая возможность, лучше предпочесть ES-классы, некоторым другим
функциям-конструкторам.

3.4 Методология написания приложения

Для написания приложения была выбрана методология объектно-


ориентированного программирования.
ООП – методология программирования, основанная на присвоении
каждому объекту отдельного класса, что позволяет максимально
оптимизировать написанный код, упрощает структуру.
Ниже я приведу пример написания кода внутри класса:

42
<html>
<head>
<title>Login</title>
<meta charset=»utf-8»>
<meta http-equiv=»X-UA-Compatible» content=»IE=edge»>
<meta name=»viewport» content=»width=device-width, initial-scale=1»>
<link href=»/fonts/style.css» rel=»stylesheet» charset=»utf-8»>
<link href=»/lib/default.css?1.00» rel=»stylesheet» charset=»utf-8»>
</head>
<body>
<main>
<section class=»__top-introduce»>
<div class=»__item»>
<h1>Студенческое объединение</h1>
<h2>Физико-Технического факультета</h2>
</div>
</section>
<section class=»__hero —login»>
<img src=»/static/logo.svg»>
</section>
<section class=»__inputs»>
<div class=»__form-field»>
<label for=»auth-login»>Логин</label>
<input id=»auth-login» type=»login» name=»login» value=»»>
</div>
<div class=»__form-field»>
<label for=»auth-passwd»>Пароль</label>
<input id=»auth-passwd» type=»password» name=»passwd» value=»»>
</div>
</section>

43
<section class=»__buttons-block»>
<button class=»__btn-open»>Войти</button>
</section>
</main>
<!—js 
</body>
</html>

Для написания приложения был выбран формат web-app.


Веб-приложение — клиент-серверное приложение, в
котором клиент взаимодействует с веб-сервером и базами данных  при
помощи браузера. Логика веб-приложения распределена между сервером и
клиентом, хранение данных осуществляется, преимущественно, на сервере,
обмен информацией происходит по сети. Одним из преимуществ такого
подхода является тот факт, что клиенты не зависят от
конкретной операционной системы пользователя, поэтому веб-приложения
являются межплатформенными службами.
Мультиплатформенность – важная составляющая данного приложения,
так как необходимо обеспечить доступ к приложению как обладателям
Android-устройств, так и обладателям устройств, с операционной системой
iOS. Обладатели iOS будут пользоваться веб-версией приложения [14].
Все страницы приложения написаны на языке гипертекстовой разметки
HTML, элементы дизайна выполнены с помощью языка каскадных стилей
CSS. За анимацию всплывающих окон отвечает скриптовый язык JavaScript.
Пример реализации всплывающего окна представлен на рисунках 15, 16
и 17.

44
Рисунок 15 – Код всплывающего окна на языке HTML

Рисунок 16 – Код всплывающего окна на языке JavaScript

45
Рисунок 17 – Код всплывающего окна на языке CSS

46
3.5 Backend разработка

Существует 2 вида разработки Frontend и Backend


Первая отвечает за верстку сайта или приложения, визуальную
составляющую, анимации отображения окон.
В Back-end разработке налаживается связь между клиентом и сервером,
базами данных, между пользователем и пользователем.
Существует несколько вариантов взаимодействия frontend и backend:
- HTTP-запрос, отправленный на сервер напрямую, сервер выполняет
поиск информации, встраивает её в шаблон и возвращает пользователю в
видел обычной HTML-страницы;
- вариант с использованием инструментария AJAX (Asynchronous
JavaScript and XML). В данном случае запрос отправляется с помощью
JavaScript, используемый браузером, а ответ приходит в формате XML или
JSON;
- одностраничные приложения, которые загружают данные без
обновления страницы. Это происходит так же с помощью AJAX или же
фреймворков, таких как Angular и Ember;
- Ember или библиотека React могут помочь с использованием
приложения на сервере и в клиенте. Frontend и backend взаимодействуют через
AJAX и HTML код, который в данном случае обрабатывается внутри сервера
[15].
Для создания серверной части сайта нужно освоить полноценный язык
программирования. Это может быть практически любой язык, но сейчас в веб-
разработке чаще всего используют PHP. Это язык общего назначения, но для
создания сайтов он подходит в большинстве случаев. Для разработки
серверной части нужно разобраться с базами данных. Подойдет система
управления базами данных MySQL или SQLite для мобильных устройств на
базе Android.

47
На рисунке 18 представлен код, отвечающий за отправку данных об
активистах в базу данных.

Рисунок 18 – Код отправки данных в базу данных

3.6 Преобразование web-сайта в приложение Android

Когда этап разработки web части подошёл к концу, необходимо


обернуть весь код в простой .apk файл, чтобы его можно было установить на
любой Android – смартфон. Делать это я буду с помощью JSON кода, процесс
будет описан ниже.
Jasonette – OpenSource – проект, направленный на создание кросс-
платформенных нативных приложений, основаный на JSON разметке.
Фреймворк Jasonette похож на обычный веб-браузер, но вместо того,
чтобы превращать HTML – код в веб – страницы, он преобразует JSON
разметку в нативные приложения для iOS либо Android. Сходство с обычным
браузером заключается в том, что любое приложение, основанное на
фреймворке Jasonette, имеет одинаковый базовый код, который отвечает за
интерпретацию различных наборот JSON команд в процессе формирования

48
приложения. Разработчику нет необходимости работать с кодом библиотеки.
Процесс создания приложения заключается в подготовке его JSON описания,
которое позволяет Jasonette, в режиме реального времени, преобразовывать
веб-приложения в нативные приложения.
Динамическое внедрение скриптов на языке JS в веб – контейнеры уже
после того, как в них был загружен HTML – код это довольно часто
встречающаяся задача. Веб – контейнер $jason.body.background  - это всего
лишь агент, то есть при работе с ним, можно использовать метод  $agent.inject,
что и при работе с обычными агентами.

49
ЗАКЛЮЧЕНИЕ

В реузльтате проделанной мной работы, я получил готовое Android –


приложение, которое будет использовано для работы Студенческого
объединения физико-технического факультета. Теперь перед председателями
не будет стоять задача по систематизации, учёту и контролю работы, всё будет
учитываться в приложении. Таким образом наше стунденческое объединение
перешло на новый этап оцифровки данных и автоматизации процесса, что,
несомненно, влечёт за собой только положительные изменения в работе.
Благодаря этому, много времени будет сэкономлено и направлено в более
проблемные участки, где его так нехватало.
Основные результаты Выпускной квалификационной работы состоят в
следующем:
1 Создано приложение для организации работы активистов студенческого
объединения физико – технического факультета, для хранения и работы с
данными к нему подключена база данных SQLite.

2 Для его создания были выполнены следующие задачи:

- написать сайт на языке гипертекстовой разметки HTML;

- добавлены стили посредством языка каскадных стилей CSS;

- добавлены скрипты для корректной работы всплывающих окон;

- добавлены функции, обеспечивающие подключение к локальной базе


данных, отправку в базу данных и считывание данных из базы данных;

- произведена отладка готового кода.

- Веб – приложение преобразовано в Android – приложение

50
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1 Кроудер Д. Создание web- сайта: 3– е изд. / Д. Кроудер. – М.:


Диалектика, 2009.– 193c.
2 Вильямсон Х. Универсальная библиотека программиста / Х.
Вильямсон. – М.: ПИТЕР, 2001.– 234c.
3 Печников В.Н. Создание Web-сайтов без посторонней помощи /
В.Н.Печников. – М.: Триумф, 2006.– 166c.
4 Печников В.Н. Самоучитель Web-страниц и Wеb– сайтов / В.Н.
Печников. – М.: Триумф, 2006.– 152c.
5 Алексеев А.П. Введение в Web-дизайн: учебное пособие / А.П.
Алексеев. – М.: СОЛОН– ПРЕСС, 2008.– 341c.
6 Дронов В.А. Программирование / В.А.Дронов. – СПб.: БХВ–
Петербург, 2006.– 78c.
7 Панфилов К. По ту сторону веб– страницы / К. Панфилов. – СПб.:
ДМК Пресс, 2008.– 123c.
8 Барысов Р. Постройте профессиональный сайт сами / Р. Барысов. –
СПб.: БХВ – Петербург, 2009.– 98c.
9 Котeров, Д. В. К73 РНР 5 2– е изд., перераб. и доп. / Д. В. Котеров, А.
Ф. Костарев. – СПб.: БХВ – Петербург, 2008. — 1104 с.
10 Ульман Л. Основы программирования на PHP: пер. с англ. /
Л.Ульман. – М.: ДМК Пресс, 2001. – 288 с.
11 Мерфи М. Элементы Андроид / М. Мерфи. – Триумф, 2015.– 446c.
12 Котеров Д. PHP 7. Наиболее полное руководство / Д. В. Котеров, И.
В. Симдянов. – Санкт-Петербург : БХВ-Петербург, 2019. – 1088 с. – Текст :
непосредственный.
13 Коваленко, В. В. Проектирование информационных систем : учеб.
пособие / В.В. Коваленко. – Москва : ФОРУМ : ИНФРА-М, 2018. – 320 с. –
(Высшее образование: Бакалавриат). - ISBN 978-5-16-101923-8. - Текст :

51
электронный. – URL: https://new.znanium.com/catalog/product/980117 (дата
обращения: 14.04.2020). – Режим доступа: для зарегистрир. пользователей
14 Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL и
JavaScript, CSS и HTML 5 / Р. Никсон. – Санкт-Петербург: Питер, 2019. – 816 с. –
Текст : непосредственный
15 PHP, Ruby, Python краткая характеристика трех языков
программирования:сайт. – URL https://yandex.ru/turbo?text=https%3A%2F
%2Fwww.internet-technologies.ru%2Farticles%2Fphp-ruby-python-harakteristika-
yazykov-programmirovaniya.html (дата обращения 21.04.2020)

52
ПРИЛОЖЕНИЕ А
Код файла index.html
<!doctype html>
<html>
<head>
<title>Start</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/fonts/style.css" rel="stylesheet" charset="utf-8">
<link href="/lib/default.css?1.00" rel="stylesheet" charset="utf-8">
</head>
<body>
<main>
<section class="__top-introduce">
<div class="__item">
<h1>Студенческое объединение</h1>
<h2>Физико-Технического факультета</h2>
</div>
</section>
<section class="__hero">
<img src="/static/logo.svg">
</section>
<section class="__buttons-block">
<button class="__btn-open"
onclick="document.location='/login.html'">Войти</button>
<button class="__btn-open"
onclick="document.location='/signup.html'">Зарегестрироваться</button>
</section>
</main>
<!-- js -->
</body>
</html>

53
ПРИЛОЖЕНИЕ Б
Код файла calendar.html
<!doctype html>
<html>
<head>
<title>Calendar</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/fonts/style.css" rel="stylesheet" charset="utf-8">
<link href="/lib/default.css?1.00" rel="stylesheet" charset="utf-8">
</head>
<body>
<aside>
<div class="__ins">
<div class="__menu">
<ul>
<li><i class="fa fa-user" aria-hidden="true"></i><a
href="/profile.html">Мой профиль</a></li>
<li><i class="fa fa-star" aria-hidden="true"></i><a
href="/rating.html">Рейтинг</a></li>
<li><i class="fa fa-calendar" aria-hidden="true"></i><a
href="/calendar.html">Календарь мероприятий</a></li>
<li><i class="fa fa-users" aria-hidden="true"></i><a
href="/meetings.html">Собрания</a></li>
<li><i class="fa fa-phone" aria-hidden="true"></i><a
href="/contacts.html">Контакты</a></li>
</ul>
</div>
</div>
</aside>
<div class="b-popup" onclick="javascript:PopUpHide()" id="popup-calendar">
<div class="b-popup-content --сalendar">
<div class="__item">
<h3>22 апреля</h3>
<p>День ФТФ</p>
<div class="__ins">
<h4>Ткачев Артем</h4>
<p>Купить батарейки для микрофонов</p>
<p>Купить воду для жюри</p>
</div>
<div class="__ins">
<h4>Петиков Иван</h4>
54
<p>Фон для проектора</p>
<p>Расстановка декораций</p>
</div>
<button class="__btn-open">Назначить задание</button>
</div>
</div>
</div>
<div class="__burger">
<div class="__bars" onclick="menuToggle(this)"></div>
</div>
<main>
<header class="--contacts">
<div class="__logo">
<a href="start.html">
<img src="/static/logo.svg" alt="home" />
</a>
</div>
</header>
<section class="__calendar">
<h1>Календарь мероприятий</h1>
<div class="__item">
<h2>22 апреля</h2>
<p>День ФТФ</p>
<button class="__btn-open"
onclick="javascript:PopUpShow()">Ответственные</button>
</div>
<div class="__item">
<h2>1 мая</h2>
<p>Шествие</p>
<button class="__btn-open"
onclick="javascript:PopUpShow()">Ответственные</button>
</div>
<div class="__item">
<h2>6 мая</h2>
<p>Поэтический<br>вечер</p>
<button class="__btn-open"
onclick="javascript:PopUpShow()">Ответственные</button>
</div>
<div class="__item">
<h2>9 мая</h2>
<p>День Победы</p>
<button class="__btn-open"
onclick="javascript:PopUpShow()">Ответственные</button>
</div>
<div class="__item">
55
<h2>12 мая</h2>
<p>Квест</p>
<button class="__btn-open"
onclick="javascript:PopUpShow()">Ответственные</button>
</div>
</section>
</main>
<!-- js -->
<script src="/lib/default.js"></script>
<script src="https://use.fontawesome.com/e33f9ef384.js"></script>
</body>
</html>

56
ПРИЛОЖЕНИЕ В
Код файла contacts.html
<!doctype html>
<html>
<head>
<title>Contacts</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/fonts/style.css" rel="stylesheet" charset="utf-8">
<link href="/lib/default.css?1.00" rel="stylesheet" charset="utf-8">
</head>
<body>
<aside>
<div class="__ins">
<div class="__menu">
<ul>
<li><i class="fa fa-user" aria-hidden="true"></i><a
href="/profile.html">Мой профиль</a></li>
<li><i class="fa fa-star" aria-hidden="true"></i><a
href="/rating.html">Рейтинг</a></li>
<li><i class="fa fa-calendar" aria-hidden="true"></i><a
href="/calendar.html">Календарь мероприятий</a></li>
<li><i class="fa fa-users" aria-hidden="true"></i><a
href="/meetings.html">Собрания</a></li>
<li><i class="fa fa-phone" aria-hidden="true"></i><a
href="/contacts.html">Контакты</a></li>
</ul>
</div>
</div>
</aside>
<div class="__burger">
<div class="__bars" onclick="menuToggle(this)"></div>
</div>
<main>
<header class="--contacts">
<div class="__logo">
<a href="start.html">
<img src="/static/logo.svg" alt="home" />
</a>
</div>
</header>

57
<section class="__profile">
<div class="__item">
<img src="/static/userpic.svg">
<h2>Председатель Студенческого Объединения</h2>
<p>Самойленко Антон Валерьевич</p>
<p>Телефон 8(938)423-83-37</p>
<div class="__social">
<a href="https://vk.com/samoylenko_1103" target="_blank"><div
class="__ins">
<p><i class="fa fa-vk" aria-hidden="true"></i>samoylenko_1103</p>
</div></a>
<a href="https://www.instagram.com/samoylenko_11/"
target="_blank"><div class="__ins">
<p><i class="fa fa-instagram" aria-
hidden="true"></i>@samoylenko_11</p>
</div></a>
</div>
</div>
<div class="__item">
<img src="/static/userpic.svg">
<h2>Председатель Профбюро</h2>
<p>Ященко Виктория Александровна</p>
<p>Телефон 8(999)999-99-99</p>
<div class="__social">
<a href="https://vk.com/studftf" target="_blank"><div class="__ins">
<p><i class="fa fa-vk" aria-hidden="true"></i>link</p>
</div></a>
<a href="https://www.instagram.com/studftf/" target="_blank"><div
class="__ins">
<p><i class="fa fa-instagram" aria-hidden="true"></i>@link</p>
</div></a>
</div>
</div>
<div class="__item">
<img src="/static/userpic.svg">
<h2>Председатель Студенческого совета</h2>
<p>Сабитова Даяна Талгатовна</p>
<p>Телефон 8(888)888-88-88</p>
<div class="__social">
<a href="https://vk.com/studftf" target="_blank"><div class="__ins">
<p><i class="fa fa-vk" aria-hidden="true"></i>link</p>
</div></a>
<a href="https://www.instagram.com/studftf/" target="_blank"><div
class="__ins">
<p><i class="fa fa-instagram" aria-hidden="true"></i>@link</p>
58
</div></a>
</div>
</div>
</section>
<section class="__social">
<a href="https://vk.com/studftf" target="_blank"><div class="__ins">
<p><i class="fa fa-vk" aria-hidden="true"></i>studftf</p>
</div></a>
<a href="https://www.instagram.com/studftf/" target="_blank"><div
class="__ins">
<p><i class="fa fa-instagram" aria-hidden="true"></i>@studftf</p>
</div></a>
</section>
</main>
<!-- js -->
<script src="/lib/default.js"></script>
<script src="https://use.fontawesome.com/e33f9ef384.js"></script>
</body>
</html>

59
ПРИЛОЖЕНИЕ Г
Код файла login.html
<!doctype html>
<html>
<head>
<title>Login</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/fonts/style.css" rel="stylesheet" charset="utf-8">
<link href="/lib/default.css?1.00" rel="stylesheet" charset="utf-8">
</head>
<body>
<main>
<section class="__top-introduce">
<div class="__item">
<h1>Студенческое объединение</h1>
<h2>Физико-Технического факультета</h2>
</div>
</section>
<section class="__hero --login">
<img src="/static/logo.svg">
</section>
<section class="__inputs">
<div class="__form-field">
<label for="auth-login">Логин</label>
<input id="auth-login" type="login" name="login" value="">
</div>
<div class="__form-field">
<label for="auth-passwd">Пароль</label>
<input id="auth-passwd" type="password" name="passwd" value="">
</div>
</section>
<section class="__buttons-block">
<button class="__btn-open">Войти</button>
</section>
</main>
<!-- js -->
</body>
</html>

60
ПРИЛОЖЕНИЕ Д
Код файла main.html
<!doctype html>
<html>
<head>
<title>Main Page</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/fonts/style.css" rel="stylesheet" charset="utf-8">
<link href="/lib/default.css?1.00" rel="stylesheet" charset="utf-8">
</head>
<body>
<aside>
<div class="__ins">
<div class="__menu">
<ul>
<li><i class="fa fa-user" aria-hidden="true"></i><a
href="/profile.html">Мой профиль</a></li>
<li><i class="fa fa-star" aria-hidden="true"></i><a
href="/rating.html">Рейтинг</a></li>
<li><i class="fa fa-calendar" aria-hidden="true"></i><a
href="/calendar.html">Календарь мероприятий</a></li>
<li><i class="fa fa-users" aria-hidden="true"></i><a
href="/meetings.html">Собрания</a></li>
<li><i class="fa fa-phone" aria-hidden="true"></i><a
href="/contacts.html">Контакты</a></li>
</ul>
</div>
</div>
</aside>
<div class="__burger">
<div class="__bars" onclick="menuToggle(this)"></div>
</div>
<main>
<header>
<div class="__logo">
<a href="start.html">
61
<img src="/static/logo.svg" alt="home" />
</a>
</div>
</header>
<section class="__news">
<h1>Новости</h1>
<div class="__news-content">
<a href="javascript:;"><div class="__item"></div></a>
<a href="javascript:;"><div class="__item"></div></a>
<a href="javascript:;"><div class="__item"></div></a>
<a href="javascript:;"><div class="__item"></div></a>
</div>
</section>
<section class="__social">
<a href="https://vk.com/studftf" target="_blank"><div class="__ins">
<p><i class="fa fa-vk" aria-hidden="true"></i>studftf</p>
</div></a>
<a href="https://www.instagram.com/studftf/" target="_blank"><div
class="__ins">
<p><i class="fa fa-instagram" aria-hidden="true"></i>@studftf</p>
</div></a>
</section>
</main>
<!-- js -->
<script src="/lib/default.js"></script>
<script src="https://use.fontawesome.com/e33f9ef384.js"></script>
</body>
</html>

62
ПРИЛОЖЕНИЕ Е
Код файла meeting-page.html
<!doctype html>
<html>
<head>
<title>Main Page</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/fonts/style.css" rel="stylesheet" charset="utf-8">
<link href="/lib/default.css?1.00" rel="stylesheet" charset="utf-8">
</head>
<body>
<aside>
<div class="__ins">
<div class="__menu">
<ul>
<li><i class="fa fa-user" aria-hidden="true"></i><a
href="/profile.html">Мой профиль</a></li>
<li><i class="fa fa-star" aria-hidden="true"></i><a
href="/rating.html">Рейтинг</a></li>
<li><i class="fa fa-calendar" aria-hidden="true"></i><a
href="/calendar.html">Календарь мероприятий</a></li>
<li><i class="fa fa-users" aria-hidden="true"></i><a
href="/meetings.html">Собрания</a></li>
<li><i class="fa fa-phone" aria-hidden="true"></i><a
href="/contacts.html">Контакты</a></li>
</ul>
</div>
</div>
</aside>
<div class="__burger">
<div class="__bars" onclick="menuToggle(this)"></div>
</div>
<main>
<header>
<div class="__logo">
<a href="start.html">
<img src="/static/logo.svg" alt="home" />
</a>
</div>
63
</header>
<section class="__news">
<h1>Новости</h1>
<div class="__news-content">
<a href="javascript:;"><div class="__item"></div></a>
<a href="javascript:;"><div class="__item"></div></a>
<a href="javascript:;"><div class="__item"></div></a>
<a href="javascript:;"><div class="__item"></div></a>
</div>
</section>
<section class="__social">
<a href="https://vk.com/studftf" target="_blank"><div class="__ins">
<p><i class="fa fa-vk" aria-hidden="true"></i>studftf</p>
</div></a>
<a href="https://www.instagram.com/studftf/" target="_blank"><div
class="__ins">
<p><i class="fa fa-instagram" aria-hidden="true"></i>@studftf</p>
</div></a>
</section>
</main>
<!-- js -->
<script src="/lib/default.js"></script>
<script src="https://use.fontawesome.com/e33f9ef384.js"></script>
</body>
</html>

64
ПРИЛОЖЕНИЕ Ж
Код файла meeetings.html
<!doctype html>
<html>
<head>
<title>Meetings</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/fonts/style.css" rel="stylesheet" charset="utf-8">
<link href="/lib/default.css?1.00" rel="stylesheet" charset="utf-8">
</head>
<body>
<aside>
<div class="__ins">
<div class="__menu">
<ul>
<li><i class="fa fa-user" aria-hidden="true"></i><a
href="/profile.html">Мой профиль</a></li>
<li><i class="fa fa-star" aria-hidden="true"></i><a
href="/rating.html">Рейтинг</a></li>
<li><i class="fa fa-calendar" aria-hidden="true"></i><a
href="/calendar.html">Календарь мероприятий</a></li>
<li><i class="fa fa-users" aria-hidden="true"></i><a
href="/meetings.html">Собрания</a></li>
<li><i class="fa fa-phone" aria-hidden="true"></i><a
href="/contacts.html">Контакты</a></li>
</ul>
</div>
</div>
</aside>
<div class="__burger">
<div class="__bars" onclick="menuToggle(this)"></div>
</div>
<main>
<header class="--contacts">
<div class="__logo">
<a href="start.html">
<img src="/static/logo.svg" alt="home" />
</a>
</div>

65
</header>
<section class="__date-choose">
<h1>Выберите дату</h1>
<div class="__item">
<a href="/meeting-page.html"><div class="__ins">
<date>7.04.20</date>
</div></a>
<a href="/meeting-page.html"><div class="__ins">
<date>14.04.20</date>
</div></a>
<a href="/meeting-page.html"><div class="__ins">
<date>21.04.20</date>
</div></a>
<a href="/meeting-page.html"><div class="__ins">
<date>28.04.20</date>
</div></a>
</div>
</section>
<section class="__social">
<a href="https://vk.com/studftf" target="_blank"><div class="__ins">
<p><i class="fa fa-vk" aria-hidden="true"></i>studftf</p>
</div></a>
<a href="https://www.instagram.com/studftf/" target="_blank"><div
class="__ins">
<p><i class="fa fa-instagram" aria-hidden="true"></i>@studftf</p>
</div></a>
</section>
</main>
<!-- js -->
<script src="/lib/default.js"></script>
<script src="https://use.fontawesome.com/e33f9ef384.js"></script>
</body>
</html>

66
ПРИЛОЖЕНИЕ З
Код файла profile.html
<!doctype html>
<html>
<head>
<title>Profile</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/fonts/style.css" rel="stylesheet" charset="utf-8">
<link href="/lib/default.css?1.00" rel="stylesheet" charset="utf-8">
</head>
<body>
<aside>
<div class="__ins">
<div class="__menu">
<ul>
<li><i class="fa fa-user" aria-hidden="true"></i><a
href="/profile.html">Мой профиль</a></li>
<li><i class="fa fa-star" aria-hidden="true"></i><a
href="/rating.html">Рейтинг</a></li>
<li><i class="fa fa-calendar" aria-hidden="true"></i><a
href="/calendar.html">Календарь мероприятий</a></li>
<li><i class="fa fa-users" aria-hidden="true"></i><a
href="/meetings.html">Собрания</a></li>
<li><i class="fa fa-phone" aria-hidden="true"></i><a
href="/contacts.html">Контакты</a></li>
</ul>
</div>
</div>
</aside>
<div class="b-popup" onclick="javascript:PopUpHide()" id="popup">
<div class="b-popup-content">
<div class="__item">
<h3>22 апреля</h3>
<p>День ФТФ</p>
<div class="__ins">
<p>Сбор в актовом зале в 9:00</p>
</div>
</div>
<div class="__item">

67
<h3>9 мая</h3>
<p>День Победы</p>
<div class="__ins">
<p>Сбор на шествие в 10:00<br>ул. Красная 1</p>
</div>
</div>
</div>
</div>
<div class="__burger">
<div class="__bars" onclick="menuToggle(this)"></div>
</div>
<main>
<header class="--contacts">
<div class="__logo">
<a href="start.html">
<img src="/static/logo.svg" alt="home" />
</a>
</div>
</header>
<section class="__profile --profile-data">
<div class="__item">
<img src="/static/userpic.svg">
<p>Самойленко</p>
<p>Антон</p>
<p>Валерьевич</p>
<p>Группа<em>ИС</em></p>
<p>Курс<em>4</em></p>
</div>
</section>
<section class="__profile-data">
<div class="__item">
<i class="fa fa-star" aria-hidden="true"></i>
<p>Мое место</p>
<em>3</em>
</div>
<div class="__item">
<i class="fa fa-trophy" aria-hidden="true"></i>
<p>Мои баллы</p>
<em>120</em>
</div>
<a href="javascript:PopUpShow()"><div class="__item --notif">
<i class="fa fa-list-ul" aria-hidden="true"></i>
<p>Мои задания</p>
<em>2</em>
</div></a>
68
</section>
</main>
<!-- js -->
<script src="/lib/default.js"></script>
<script src="https://use.fontawesome.com/e33f9ef384.js"></script>
</body>
</html>

69
ПРИЛОЖЕНИЕ И
Код файла rating.html
<!doctype html>
<html>
<head>
<title>Rating</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/fonts/style.css" rel="stylesheet" charset="utf-8">
<link href="/lib/default.css?1.00" rel="stylesheet" charset="utf-8">
</head>
<body>
<aside>
<div class="__ins">
<div class="__menu">
<ul>
<li><i class="fa fa-user" aria-hidden="true"></i><a
href="/profile.html">Мой профиль</a></li>
<li><i class="fa fa-star" aria-hidden="true"></i><a
href="/rating.html">Рейтинг</a></li>
<li><i class="fa fa-calendar" aria-hidden="true"></i><a
href="/calendar.html">Календарь мероприятий</a></li>
<li><i class="fa fa-users" aria-hidden="true"></i><a
href="/meetings.html">Собрания</a></li>
<li><i class="fa fa-phone" aria-hidden="true"></i><a
href="/contacts.html">Контакты</a></li>
</ul>
</div>
</div>
</aside>
<div class="__burger">
<div class="__bars" onclick="menuToggle(this)"></div>
</div>
<main>
<header class="--contacts">
<div class="__logo">
<a href="start.html">
<img src="/static/logo.svg" alt="home" />
</a>
</div>

70
</header>
<section class="__calendar --rating">
<h1>Рейтинг</h1>
<div class="__item --rating">
<h2>Ф.И.О</h2>
<p>Самойленко Антон</p>
<h2>Место</h2>
<p>1</p>
<h2>Баллы</h2>
<p>120</p>
</div>
<div class="__item --rating">
<h2>Ф.И.О</h2>
<p>Сабитова Даяна</p>
<h2>Место</h2>
<p>2</p>
<h2>Баллы</h2>
<p>115</p>
</div>
<div class="__item --rating">
<h2>Ф.И.О</h2>
<p>Ященко Виктория</p>
<h2>Место</h2>
<p>3</p>
<h2>Баллы</h2>
<p>113</p>
</div>
<div class="__item --rating">
<h2>Ф.И.О</h2>
<p>Докучаев Николай </p>
<h2>Место</h2>
<p>4</p>
<h2>Баллы</h2>
<p>109</p>
</div>
<div class="__item --rating">
<h2>Ф.И.О</h2>
<p>Ткачёв Артём</p>
<h2>Место</h2>
<p>5</p>
<h2>Баллы</h2>
<p>101</p>
</div>
</section>
</main>
71
<!-- js -->
<script src="/lib/default.js"></script>
<script src="https://use.fontawesome.com/e33f9ef384.js"></script>
</body>
</html>

72
ПРИЛОЖЕНИЕ К
Код файла signup.html

<!doctype html>
<html>
<head>
<title>Signup</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/fonts/style.css" rel="stylesheet" charset="utf-8">
<link href="/lib/default.css?1.00" rel="stylesheet" charset="utf-8">
</head>
<body>
<main>
<section class="__hero --signup">
<a href="/start.html"><img src="/static/logo.svg"></a>
</section>
<section class="__inputs --signup">
<div class="__form-field">
<label for="auth-login">Логин</label>
<input id="auth-login" type="login" name="login" value="">
</div>
<div class="__form-field">
<label for="auth-passwd">Пароль</label>
<input id="auth-passwd" type="password" name="passwd" value="">
</div>
<div class="__form-field">
<label for="auth-login">Email</label>
<input id="auth-email" required="" type="email" name="email"
value="">
</div>
<div class="__form-field">
<label for="auth-passwd">Подтвердите пароль</label>
<input id="auth-passwd" type="password" name="passwd" value="">
</div>
<div class="__form-field">
<label for="auth-login">Имя</label>
<input id="auth-firstname" required="" type="text" name="firstname"
value="">

73
</div>
<div class="__form-field">
<label for="auth-passwd">Фамилия</label>
<input id="auth-lastname" type="text" name="lastname" value="">
</div>
<div class="__form-field">
<label for="auth-passwd">Группа</label>
<select class="custom-select">
<option></option>
<option>Биотехнические системы и технологии</option>
<option>Информационные системы и технологии</option>
<option>Инфокоммуникационные технологии и системы
связи</option>
<option>Радиофизика</option>
<option>Радиотехника</option>
<option>Физика</option>
<option>Электроника и наноэлектроника</option>
</select>
</div>
<div class="__form-field --course">
<label for="auth-passwd">Курс</label>
<select class="custom-select">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</section>
<section class="__buttons-block --signup">
<button class="__btn-open">Зарегестрироваться</button>
</section>
</main>
<!-- js -->
</body>
</html>

74
ПРИЛОЖЕНИЕ Л
Код файла default.js
LazyLoad = function (e) {
function t(t, n) {
var s, c = e.createElement(t);
for (s in n) n.hasOwnProperty(s) && c.setAttribute(s, n[s]);
return c
}

function n(e) {
var t, n, s = i[e];
s && (t = s.callback, n = s.urls, n.shift(), u = 0, n.length || (t && t.call(s.context,
s.obj), i[e] = null, f[e].length && c(e)))
}

function s() {
var t = navigator.userAgent;
o={
async: e.createElement("script").async === !0
}, (o.webkit = /AppleWebKit\//.test(t)) || (o.ie = /MSIE|Trident/.test(t)) ||
(o.opera = /Opera/.test(t)) || (o.gecko = /Gecko\//.test(t)) || (o.unknown = !0)
}

function c(c, u, h, g, d) {
var y, p, b, k, m, v, j = function () {
n(c)
},
w = "css" === c,
T = [];
if (o || s(), u)
if (u = "string" == typeof u ? [u] : u.concat(), w || o.async || o.gecko || o.opera)
f[c].push({
urls: u,
callback: h,
obj: g,
context: d
});
else
for (y = 0, p = u.length; p > y; ++y) f[c].push({
urls: [u[y]],
callback: y === p - 1 ? h : null,

75
obj: g,
context: d
});
if (!i[c] && (k = i[c] = f[c].shift())) {
for (l || (l = e.head || e.getElementsByTagName("head")[0]), m =
k.urls.concat(), y = 0, p = m.length; p > y; ++y) v = m[y], w ? b = o.gecko ?
t("style") : t("link", {
href: v,
rel: "stylesheet"
}) : (b = t("script", {
src: v
}), b.async = !1), b.className = "lazyload", b.setAttribute("charset", "utf-8"),
o.ie && !w && "onreadystatechange" in b && !("draggable" in b) ?
b.onreadystatechange = function () {
/loaded|complete/.test(b.readyState) && (b.onreadystatechange = null, j())
} : w && (o.gecko || o.webkit) ? o.webkit ? (k.urls[y] = b.href, r()) :
(b.innerHTML = '@import "' + v + '";', a(b)) : b.onload = b.onerror = j, T.push(b);
for (y = 0, p = T.length; p > y; ++y) l.appendChild(T[y])
}
}

function a(e) {
var t;
try {
t = !!e.sheet.cssRules
} catch (s) {
return u += 1, void(200 > u ? setTimeout(function () {
a(e)
}, 50) : t && n("css"))
}
n("css")
}

function r() {
var e, t = i.css;
if (t) {
for (e = h.length; --e >= 0;)
if (h[e].href === t.urls[0]) {
n("css");
break
} u += 1, t && (200 > u ? setTimeout(r, 50) : n("css"))
}
}
var o, l, i = {},
u = 0,
76
f={
css: [],
js: []
},
h = e.styleSheets;
return {
css: function (e, t, n, s) {
c("css", e, t, n, s)
},
js: function (e, t, n, s) {
c("js", e, t, n, s)
}
}
}(this.document);

function onInit() {
$("[data-oninit]").each(function () {
eval($(this).attr('data-oninit'))
})
}

function strStr(haystack, needle, bool) {


var pos = 0;
haystack += "";
pos = haystack.indexOf(needle);
if (pos == -1) {
return !1
} else {
if (bool) {
return haystack.substr(0, pos)
} else {
return haystack.slice(pos)
}
}
}

function appInit() {
LazyLoad.js('/lib/jquery-3.2.1.min.js', function () {
onInit();

});
}
document.addEventListener("DOMContentLoaded", function (event) {
appInit();
});
77
console.log("%cWebberin Digital | Design your success at webberin.xyz",
["background: linear-gradient(180deg, rgba(174, 0, 110, 1) 0%,rgba(120, 0, 80, 1)
100%);", "color: white", "padding: 10px 20px", "font-weight: 700;", "border-radius:
100em", "line-height: 35px", "font-family: 'SanFrancisco','Helvetica','Roboto',sans-
serif"].join(";"));

function PopUpShow(){
$("#popup").addClass('--active');
$("#popup").show();
$("#popup-calendar").addClass('--active');
$("#popup-calendar").show();
$("#popup-meeting").addClass('--active');
$("#popup-meeting").show();
}
function PopUpHide(){
$("#popup").hide();
$("#popup-calendar").hide();
$("#popup-meeting").hide();
}
function PopUp(){
$("#popupreg").addClass('--active');
$("#popupreg").show();
}
function menuToggle(el) {
if ($(el).attr('data-active') != 1) {
$(el).attr('data-active', 1);
$(el).addClass('--active');
$("aside").addClass('--active');
$(".__burger").attr('data-active', 1);
} else {
$(el).removeAttr('data-active');
$(el).removeClass('--active');
$("aside").removeClass('--active');
$(".__burger").removeAttr('data-active');
}
}

78
ПРИЛОЖЕНИЕ М
Код файла default.css
@media (max-width: 767px) {
:root {
--primary-color: #001442;
--primary-color-light:#0D194C;
--primary-color-button: #073D9E;
--primary-input-color: #B2B3B7;
--black-color: #000000;
--white-color: #fff;
--box-color: #C6C6C6;
--profile-data-color: #00153A;

--gutter: 4vw;
--angles: .625rem;
}
}

::selection {
color: var(--white-color);
background-color: var(--primary-color-light);
}

*{
font-family: 'Century Gothic', sans-serif, -apple-system, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

*:focus,
*:active,
*:hover {
outline: none;
}

*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 16px;

79
}

body {
margin: 0;
padding: 0;
}

main {
display: block;
}

@media (max-width: 767px) {


main {
padding-top: 0;
}
html {
font-size: 4vw;
background-color: var(--primary-color);
}
}

aside {
position: fixed;
top: 0;
right: -2.5rem;
background-color: var(--primary-color);
z-index: 101;
height: 100vh;
width: 21rem;
box-shadow: -.5rem 0 1.5rem rgba(0, 0, 0, .1);
-moz-box-shadow: -.5rem 0 1.5rem rgba(0, 0, 0, .1);
-webkit-box-shadow: -.5rem 0 1.5rem rgba(0, 0, 0, .1);
opacity: 0;
visibility: hidden;
transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
-o-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
-ms-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
-moz-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
-webkit-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
}

aside.--active {
opacity: 1;
visibility: visible;
right: 0;
80
}

aside .__ins {
padding: 2.3rem 2.5rem;
position: relative;
height: 100%;
}

aside .__ins .__menu {


display: block;
margin-bottom: 1rem;
}

aside .__ins .__menu ul {


display: block;
padding: 0;
margin: 0;
list-style: none;
}

aside .__ins .__menu ul li {


display: block;
text-align: left;
}

aside .__ins .__menu ul li a {


display: block;
padding: .5rem 0rem;
text-decoration: none;
position: relative;
color: var(--white-color);
background-color: var(--primary-color);
transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
-o-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
-ms-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
-moz-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
-webkit-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
}

aside .__ins .__menu ul li a:hover {


color: #e7e0e0;
}
@media (max-width: 767px) {
aside {
right: -10vw;
81
width: 100vw;
}

aside .__ins {
padding: 25vw 10vw;
position: relative;
height: 100%;
padding-bottom: 0vw;
overflow-y: auto;
}

aside .__ins .__menu {


margin-bottom: 0vw;
}

aside .__ins .__menu ul li {


text-align: left;
font-size: 5.5vw;
}

aside .__ins .__menu ul li:nth-child(1) a::after {


display: inline-flex;
align-content: center;
align-items: center;
justify-content: center;
width: 7vw;
height: 7vw;
border-radius: 300em;
-moz-border-radius: 300em;
-webkit-border-radius: 300em;
border: 1px solid #FF0000;
background-color: #FF0000;
content: '2';
font-size: 5vw;
margin-left: 3vw;
}

aside .__ins .__menu ul li:nth-child(4) {


margin-bottom: 10vw;
}

aside .__ins .__menu ul li a {


display: inline-block;
padding: 2vw 0vw;
text-decoration: none
82
}

aside .__ins .__menu ul li i {


display: inline-block;
font-size: 5.5vw;
color: var(--white-color);
padding-right: 3vw;
}

aside .__ins .__menu ul li a .__badge {


margin-left: 2vw;
top: -.8vw;
}
}

.__burger {
position: absolute;
z-index: 103;
right: var(--gutter);
top: calc(var(--gutter) - .35rem);
}

.__burger .__bars {
position: relative;
display: block;
width: 0;
height: 2.5rem;
cursor: pointer;
transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
-o-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
-ms-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
-moz-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
-webkit-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
overflow: hidden;
}

.__burger.--show-menu .__bars {
width: 2.5rem;
}

.__burger[data-active] .__bars {
width: 2.5rem;
}

83
.__burger .__bars:before,
.__burger .__bars:after {
content: '';
position: absolute;
right: 0;
height: .35rem;
border-radius: var(--gutter);
-moz-border-radius: var(--gutter);
-webkit-border-radius: var(--gutter);
background-color: var(--white-color);
transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
-o-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
-ms-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
-moz-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
-webkit-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
}

.__burger .__bars:before {
width: 2rem;
top: .65rem;
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}

.__burger .__bars:after {
width: 1.65rem;
top: 1.35rem;
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}

.__burger .__bars.--active {
animation: popbars .5s 1 cubic-bezier(0.7, 0, 0.3, 1);
}

.__burger .__bars.--active:before {
top: 1rem;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

.__burger .__bars.--active:after {
84
top: 1rem;
width: 2rem;
transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}

@media (max-width: 767px) {


.__burger {
top: calc(var(--gutter) + 6vw);
right: calc(var(--gutter) + 1rem);
}

.__burger .__bars {
width: 13vw;
height: 8vw;
}

.__burger .__bars:before {
width: 13vw;
top: 1vw;
}

.__burger .__bars:after {
width: 13vw;
top: 4vw;
}
.__burger .__bars.--active:after {
width: 9vw;
top: 3vw;
}
.__burger .__bars.--active:before {
width: 9vw;
top: 3vw;
}
}
header {
display: none;
}
.__news {
display: none;
}
.__social {
display: none;
}
85
.__top-introduce {
display: none;
}
.__inputs {
display:none;
}
.__hero {
display: none;
}
.__buttons-block {
display: none;
}
.__profile {
display: none;
}
.__profile-data {
display: none;
}
.__calendar {
display: none;
}
.b-popup {
display: none;
}
.__date-choose {
display: none;
}

@media (max-width: 767px) {


header {
display: block;
position: relative;
width: 100%;
margin-bottom: 10vw;
}
header.--contacts {
margin-bottom: 0vw;
}
header .__logo {
display: block;
position: relative;
padding: 1rem calc(var(--gutter) + 1rem);
}
header .__logo img {
width: 20vw;
86
display: block;
}
.__news {
display: block;
position: relative;
width: 100%;
margin: 0 auto;
}
.__news h1 {
display: block;
color: var(--white-color);
font-size: 9vw;
margin: 0 16vw;
}
.__news .__news-content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
position: relative;
width: 100%;
position: relative;
margin: 0 auto;
padding: 1rem var(--gutter);
text-align: center;
}
.__news .__news-content .__item {
display: inline-block;
width: 43vw;
height: 43vw;
border-radius: var(--angles);
-moz-border-radius: var(--angles);
-webkit-border-radius: var(--angles);
background: var(--box-color);
margin: 0 auto 2vw;
}
.__social {
display: block;
position: relative;
width: 100%;
margin: 0 auto;
}
.__social a {
text-decoration: none;
color: var(--white-color);
}
87
.__social .__ins {
display: inline-block;
position: relative;
padding: 0rem calc(var(--gutter) + 1rem);
}
.__social .__ins p {
font-size: 6vw;
color: var(--white-color);
margin-top: 0;
}
.__social .__ins:nth-child(2) {
float: right;
}
.__social .__ins p i {
font-size: 10vw;
padding-right: 3vw;
position: relative;
top: 1vw;
}
.__top-introduce {
display: block;
position: relative;
width: 100%;
margin: 15vw auto 10vw;
padding: 1.5vw 1.5vw;
}
.__top-introduce .__item {
display: block;
position: relative;
background-color: var(--primary-color-light);
border-radius: var(--angles);
-moz-border-radius: var(--angles);
-webkit-border-radius: var(--angles);
text-align: center;
padding: 1vw;
}
.__top-introduce .__item h1 {
display: block;
margin: 0 0 2vw;
position: relative;
font-size: 6vw;
color: var(--white-color);
}
.__top-introduce .__item h2 {
display: block;
88
margin: 0 0 2vw;
position: relative;
font-size: 4.5vw;
color: var(--white-color);
}
.__hero {
display: block;
width: 100%;
position: relative;
margin: 0 auto 10vw;
}
.__hero.--login {
margin: 0 auto 8vw;
}
.__hero img {
display: block;
position: relative;
margin: 0 auto;
width: 70vw;
}
.__hero.--login img {
width: 60vw;
}
.__hero.--signup img {
width: 25vw;
}
.__hero.--signup {
margin: 10vw auto 5vw;
}
.__btn-open {
display: block;
background-color: var(--primary-color-button);
padding: 1vw 20vw;
border: .15rem solid var(--white-color);
border-radius: 300em;
-moz-border-radius: 300em;
-webkit-border-radius: 300em;
font-size: 4.5vw;
color: var(--white-color);
font-weight: 400;
cursor: pointer;
margin: 0 0 0;
transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
-o-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
-ms-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
89
-moz-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
-webkit-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
}
.__btn-open:hover {
border: .15rem solid var(--primary-color-light);
color: var(--white-color);
background-color: var(--primary-color-light);
transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
-o-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
-ms-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
-moz-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
-webkit-transition: all .3s cubic-bezier(0.7, 0, 0.3, 1);
}
.__buttons-block {
display: block;
width: 100%;
position: relative;
margin: 0 auto;
}
.__buttons-block button {
margin: 0 auto;
margin-bottom: 5vw;
}
.__buttons-block button:nth-child(2){
padding: 1vw 3vw;
}
.__buttons-block.--signup button {
padding: 1vw 3vw;
}
.__inputs {
display: block;
position: relative;
width: 100%;
padding: 1rem var(--gutter);
margin-bottom: 8vw;
}
.__inputs .__form-field {
display: inline-block;
position: relative;
margin: 0 auto;
width: 49%;
padding-right: 5vw;
}
.__inputs.--signup .__form-field {
margin: 0 auto 5vw;
90
padding-right: 0;
}
.__inputs.--signup .__form-field label {
font-size: 4vw;
}
.__inputs .__form-field.--course {
display: block;
margin: 0 0 0;
}
.__inputs .__form-field:nth-child(2) {
padding-right:0;
}
.__inputs .__form-field form {
background-color: var(--bg-color);
padding: calc(var(--gutter) / 2);
border-radius: var(--angles);
}
.__inputs .__form-field label {
font-size: 4.5vw;
color: var(--white-color);
}
.__inputs .__form-field input, .__inputs .__form-field select {
width: 100%;
font-size: 4.5vw;
padding: 1vw 3vw;
color: var(--black-color);
background-color: var(--primary-input-color);
border: none;
border-radius: var(--angles);
-moz-border-radius: var(--angles);
-webkit-border-radius: var(--angles);
margin: 0;
margin-top: 2vw;
}
.__inputs .__form-field.--course select {
width: 50%;
}
.__inputs .__form-field.--course label {
display: block;
}
.__inputs.--signup .__form-field input, .__inputs.--signup .__form-field select {
font-size: 4vw;
}
.__profile {
display: block;
91
position: relative;
width: 100%;
padding: 1rem var(--gutter);
margin: 0 auto;
height: 125vw;
overflow-y: auto;
}
.__profile.--profile-data {
overflow-y: none;
height: auto;
}
.__profile .__item {
display: table;
width: 100%;
margin: 0 auto 5vw;
position: relative;
}
.__profile .__item:last-child {
margin: 0 auto 0;
}
.__profile .__item img {
display: block;
position: relative;
width: 20vw;
float: left;
border-radius: 300em;
-moz-border-radius: 300em;
-webkit-border-radius: 300em;
margin-right: 5vw;
margin-bottom: 5vw;
}
.__profile.--profile-data .__item img {
width:30vw;
}
.__profile .__item h2 {
display: block;
margin: 0 0 0vw;
position: relative;
font-size: 4vw;
color: var(--white-color);
margin-bottom: 2vw;
}
.__profile .__item p {
display: block;
margin: 0 0 0vw;
92
position: relative;
font-size: 4vw;
color: var(--white-color);
margin-bottom: 2vw;
font-weight: 200;
}
.__profile.--profile-data .__item p em {
display: inline-block;
margin: 0 0 0vw;
position: relative;
font-size: 4vw;
color: var(--white-color);
font-style: normal;
float: right;
margin-right: 32%;
}
.__profile .__item .__social .__ins {
padding: 0;
display: table;
padding-left: 25vw;
margin-bottom: 1vw;
}
.__profile .__item .__social .__ins p i {
font-size: 5vw;
padding-right: 1vw;
top:.5vw;
}
.__profile-data {
display: block;
position: relative;
width: 100%;
padding: 1rem var(--gutter);
margin: 0 auto;
}
.__profile-data a {
text-decoration: none;
color: var(--white-color);
}
.__profile-data .__item {
display: table;
width: 100%;
position: relative;
margin:0 auto 7vw;
text-align: center;
border: 1px solid var(--white-color);
93
border-radius: var(--gutter);
-moz-border-radius: var(--gutter);
-webkit-border-radius: var(--gutter);
background-color: var(--profile-data-color);
padding: 1vw var(--gutter);
}
.__profile-data .__item i {
font-size: 8vw;
position: relative;
color: var(--white-color);
margin-bottom: 1vw;
}
.__profile-data .__item p {
margin: 0 0 1vw;
position: relative;
font-size: 5vw;
color: var(--white-color);
}
.__profile-data .__item em {
margin: 0 0 0;
position: relative;
font-size: 5vw;
color: var(--white-color);
font-style: normal;
}
.__profile-data .__item.--notif em{
display: flex;
align-content: center;
align-items: center;
justify-content: center;
width: 7vw;
height: 7vw;
border-radius: .3em;
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
background-color: #AF0B0B;
font-size: 5vw;
color: var(--white-color);
margin: 0 auto;
}
.b-popup {
width: 100%;
min-height: 100%;
position: fixed;
top: 0;
94
left: 0;
visibility: hidden;
background-color: rgba(0,0,0,.5);
backdrop-filter: saturate(180%) blur(1vw);
-webkit-backdrop-filter: saturate(180%) blur(1vw);
z-index: 111;
}
.b-popup.--active {
visibility: visible;
top: 0;
}
.b-popup .b-popup-content {
display: table;
width: 90%;
background-color: var(--primary-color);
border: 1px solid var(--white-color);
border-radius: var(--gutter);
-moz-border-radius: var(--gutter);
-webkit-border-radius: var(--gutter);
position: relative;
top: 40vw;
margin: 0 auto;
z-index: 111;
}
.b-popup .b-popup-content .__item {
display: table;
position: relative;
width: 100%;
padding: 5vw;
}
.b-popup .b-popup-content .__item h3,.b-popup .b-popup-content .__item p {
margin: 0 0 0;
position: relative;
font-size: 4vw;
color: var(--white-color);
text-align: right;
}
.b-popup .b-popup-content .__item > p {
font-size: 5vw;
margin-bottom: 5vw;
}
.b-popup .b-popup-content .__item .__ins {
display: block;
width: 100%;
background-color: var(--primary-color);
95
border: 1px solid var(--white-color);
border-radius: var(--gutter);
-moz-border-radius: var(--gutter);
-webkit-border-radius: var(--gutter);
position: relative;
margin: 0 auto;
padding: 3vw;
}
.b-popup .b-popup-content .__item .__ins p {
font-size: 4vw;
color: var(--white-color);
text-align: center;
}
.b-popup .b-popup-content.--сalendar .__item .__ins {
padding: 2vw;
margin-bottom: 5vw;
}
.b-popup .b-popup-content.--сalendar .__item .__ins p {
text-align: right;
font-size: 4vw;
}
.b-popup .b-popup-content.--сalendar .__item .__ins h4{
margin: 0 0 2vw;
position: relative;
font-size: 5vw;
color: var(--white-color);
text-align: left;
}
.b-popup .b-popup-content.--сalendar .__item button {
padding: 1vw 5vw;
float: right;
font-size: 4vw;
}
.b-popup .b-popup-content.--сalendar .__item.--meeting p {
display: inline-block;
font-size: 3vw;
padding: 1vw;
margin-right: 4vw;
}
.b-popup .b-popup-content.--сalendar .__item.--meeting {
display: block;
height: 100vw;
overflow-y: auto;
}
.b-popup .b-popup-content.--сalendar .__item.--meeting .__ins.--meeting {
96
padding: 1vw;
display: inline-block;
width: 85%;
border-radius: .3em;
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
margin-right: 0vw;
}
.__calendar {
display: block;
position: relative;
width: 100%;
padding: 1rem var(--gutter);
margin: 0 auto;
height: 131vw;
overflow-y: auto;
}
.__calendar h1 {
margin: 0 0 10vw;
position: relative;
font-size: 6vw;
color: var(--white-color);
text-align: center;
}
.__calendar.--rating h1 {
margin: 0 0 5vw;
}
.__calendar .__item {
display: table;
width: 100%;
background-color: var(--primary-color);
border: 1px solid var(--white-color);
border-radius: var(--gutter);
-moz-border-radius: var(--gutter);
-webkit-border-radius: var(--gutter);
position: relative;
margin: 0 auto 5vw;
padding: 3vw;
}
.__calendar .__item h2 {
margin: 0 0 1vw;
position: relative;
font-size: 4vw;
color: var(--white-color);
text-align: left;
97
}
.__calendar .__item p {
margin: 0 0 0;
position: relative;
font-size: 6vw;
color: var(--white-color);
text-align: left;
display: inline-block;
}
.__calendar .__item.--rating h2{
font-size: 5vw;
text-align: center;
display: block;
}
.__calendar .__item.--rating p {
font-size: 5vw;
text-align: center;
display: block;
}
.__calendar .__item button {
display: inline-block;
padding: .5vw 2vw;
float: right;
font-size: 4vw;
}
.__date-choose {
display: block;
position: relative;
width: 100%;
padding: 1rem var(--gutter);
margin: 0 auto;
}
.__date-choose h1 {
margin: 0 0 10vw;
position: relative;
font-size: 6vw;
color: var(--white-color);
text-align: center;
}
.__date-choose.--meeting h1 {
border: 1px solid var(--white-color);
border-radius: .3em;
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
width: 50%;
98
margin: 0 auto;
display: block;
margin: 0 auto 5vw;
}
.__date-choose.--meeting h2{
margin: 0 0 5vw;
position: relative;
font-size: 6vw;
color: var(--white-color);
text-align: center;
}
.__date-choose .__item {
display: table;
width: 100%;
background-color: var(--primary-color);
border: 1px solid var(--white-color);
border-radius: var(--gutter);
-moz-border-radius: var(--gutter);
-webkit-border-radius: var(--gutter);
position: relative;
margin: 0 auto 5vw;
padding: 3vw;
}
.__date-choose.--meeting .__item {
height: 90vw;
overflow-y: auto;
display: block;
margin: 0 auto 5vw;
}
.__date-choose .__item a {
text-decoration: none;
color: var(--white-color);
}
.__date-choose.--meeting .__item a {
text-decoration: none;
color: var(--white-color);
}
.__date-choose.--meeting .__item p {
margin: 0 0 0;
position: relative;
font-size: 4vw;
color: var(--white-color);
text-align: justify;
}
.__date-choose.--meeting button {
99
display: block;
padding: .5vw 2vw;
float: right;
font-size: 4vw;
}
.__date-choose .__item .__ins {
display: table;
width: 100%;
background-color: var(--primary-color);
border: 1px solid var(--white-color);
border-radius: var(--gutter);
-moz-border-radius: var(--gutter);
-webkit-border-radius: var(--gutter);
position: relative;
margin: 5vw auto 5vw;
padding: 3vw;
}
.__date-choose .__item .__ins date {
margin: 0 0 0;
position: relative;
font-size: 5vw;
color: var(--white-color);
text-align: center;
display: block;
}
.container {
display: inline-block;
position: relative;
padding-left: 0px;
margin-bottom: 17px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
float:right;
margin-right: 7vw;
margin-top: .2vw;
}
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
100
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 8vw;
width: 8vw;
border: 1px solid var(--white-color);
border-radius: .3em;
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
background-color: transparent;
}
.container:hover input ~ .checkmark {
background-color: transparent;
}
.container input:checked ~ .checkmark {
background-color: var(--primary-color);
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.container input:checked ~ .checkmark:after {
display: block;
}
.container .checkmark:after {
left: 9px;
top: 5px;
width: 2vw;
height: 3vw;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
}

101