Я развил свои навыки программирования и изучил новые аспекты проектирования систем, формирования технологических требований и набора инструментов, необходимых для разработки программного обеспечения со сложной и монолитной архитектурой. Это помогло мне разработать прототип автоматической системы рекомендаций сотрудников, опираясь на конкретный «кейс» компании. Мне так же удалось реализовать гибкий интерфейс, позволяющий быстро создавать опросы для любой вакансии. Данный конструктор тестов имеет широкий спектр возможностей, что позволяет собрать качественную информацию о соискателе для ее дальнейшего анализа.

Разработанный прототип системы уже может быть использован как быстрый способ проведения опросов кандидатов на массовые позиции, а так же сервис рекомендаций сотрудников. В будущем, данный прототип может быть развит до полноценной универсальной системы, которая будет востребованным коммерческим продуктом на рынке. Систему можно монетизировать путем договоренности с клиентом о выплате процентов от должностного оклада сотрудника принятого на работу и успешно прошедшего интервью по рекомендации системы.

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

Выяснилось, что проблема высоких издержек, связанных с рекрутингом в HR достаточно остра и индустрия в шаге от повсеместного внедрения технологий массового подбора сотрудников. Бизнес лидеры зарубежных компаний активно развивают и инвестируют в это направление. Большинство склоняется к тому, что скоро ниша автоматизированного рекрутинга может отойти монополисту, создавшему первую систему, которая даст возможность полностью искоренить вербальный контакт HR с кандидатами на вакансию.



Литература

1. Эльвира Бойко. Компьютеризация кадрового делопроизводства. М. : Управление персоналом, 2010.

2. Майкл Армстронг. Стратегическое управление человеческими ресурсами М. : ИНФРА -- М. 2006 г.

3. Н. Папонова. Обучение персонала компании. М. : Финпресс, -- С. 176. 2011 г.

4. Хендерсон Р. И. Компенсационный менеджмент: стратегия и тактика формирование заработной платы и других выплат. СПб. : Питер, 2004.

5. Гапоненко А. Л. Управление знаниями. М. : ИПК Госслужбы. -- 2001.

6. К. Джанетто, Э. Уилер Управление знаниями. -- М. : Добрая книга. 2005 г.

7. Дэйв Ульрих. Эффективное управление персоналом: новая роль HR-менеджера в организации = Human Resource Champions: The Next Agenda for Adding Value and Delivering Results. -- М.: «Вильямс», 2006.

8. Неларин Корнелиус. HR-менеджмент. -- Баланс Бизнес Букс, 2005. -- С. 520.

9. Марк А. Хьюзлид, Дэйв Ульрих, Брайан И. Беккер. Измерение результативности работы HR-департамента. Люди, стратегия и производительность = The HR Scorecard: Linking People, Strategy, and Performance. -- М.: «Вильямс», 2007.

10. Ларри Боссиди, Рэм Чаран. Исполнение. Система достижения целей = Execution: The Discipline of Getting Things Done. -- М.: «Альпина Паблишер», 2012.

11. Берн, Э. Трансакционный анализ в психотерапии / пер. с англ. А. Грузберга. -- М.: Эксмо, 2009.

12. Берн, Э. Игры, в которые играют люди. Люди, которые играют в игры / пер. с англ. А. Грузберга. -- М.: Эксмо, 2014.

13. Стюарт, Ян; Джойнс, Вэнн. Современный транзактный анализ. -- СПб.: Социально-психологический центр, 1996.

14. «RECRUITMENT SOFTWARE - A GLOBAL STRATEGIC BUSINESS REPORT» [Электронный ресурс] http://www.strategyr.com -- URL : http://www.strategyr.com/Recruitment_Software_Market_Report.asp (Дата обращения: 11.05.17).

15. «Как машинное обучение меняет рынок HR (и привлекает миллионные инвестиции)» [Электронный ресурс] http://incrussia.ru -- URL: http://incrussia.ru/understand/kak-mashinnoe-obuchenie-menyaet-rynok-hr-i-privlekaet-millionnye-investitsiy/ (Дата обращения: 10.05.17).

16. «Сеть «Связной» запустила бота». [Электронный ресурс] https://www.vedomosti.ru -- URL : https://www.vedomosti.ru/management/articles/2016/07/19/649649-set-svyaznoi-zapustila-bota (Дата обращения: 10.05.17).

17. «Автоматизация рекрутинга: ускоряем процесс подбора персонала». [Электронный ресурс] http://hrdocs.ru/ -- URL: http://hrdocs.ru/poleznaya-informacziya/avtomatizatsia-rekrutinga/ (Дата обращения: 13.05.17).

18. «Перспективы HR-роботов/ботов в области подбора персонала -- текущие реалии, мнения и опыт экспертов» [Электронный ресурс] https://habrahabr.ru -- URL: https://habrahabr.ru/post/321070/ (Дата обращения: 10.05.17).

19. «One in seven HR leaders report Automation / Artificial Intelligence is already impacting their workforce plans, reports Harvey Nash HR Survey 2017» [Электронный ресурс] http://www.harveynash.com/ -- URL: http://www.harveynash.com/group/mediacentre/2017/01/one_in_seven_hr_leaders_report_automation_artificial_intelligence_is_already_impacting_their_workfor/index.asp (Дата обращения: 10.05.17).

20. «HR Technology Disruptions for 2017: Nine Trends Reinventing the HR Software Market» [Электронный ресурс] https://www2.deloitte.com --URL: https://www2.deloitte.com/content/dam/Deloitte/us/Documents/human-capital/us-hc-disruptions.pdf (Дата обращения: 10.05.17).

21. «Искусственный интеллект HeadHunter: как роботы будут искать персонал для крупнейшего онлайн-рекрутера». [Электонный ресурс] http://www.forbes.ru/ -- URL: http://www.forbes.ru/tehnologii/338623-iskusstvennyy-intellekt-headhunter-kak-roboty-budut-iskat-personal-dlya (Дата обращения: 10.05.17).

22. «Тренды ИТ-стартапов в 2017 году -- прогноз управляющего инвестиционным портфелем ФРИИ». [Электронный ресурс] https://vc.ru -- URL: https://vc.ru/p/startup-trends-2017 (Дата обращения: 10.05.17).

23. «A guide to Elements». [Электронный ресурс] https://www.trytalentq.com -- URL: https://www.trytalentq.com/how-to-complete/elements/ (Дата обращения: 10.05.17).

24. ««Билайн» запустил онлайн-тесты для автоматического подбора персонала». [Электонный ресурс] https://vc.ru -- URL: https://vc.ru/n/vimpelkom-skillaz (Дата обращения: 10.05.17).

25. «Трансактный анализ, как метод психотерапии». [Электронный ресурс] http://www.transactional-analysis.ru/ -- URL: http://www.transactional-analysis.ru/methods/273-ta-method (Дата обращения: 10.05.17).



Приложение 1

Описания логики системы (JavaScript)

var gulp = require('gulp');

var sass = require('gulp-sass');

var autoprefix = require('gulp-autoprefixer');

var minify = require('gulp-minify-css');

var uglify = require('gulp-uglify');

var concat = require('gulp-concat');

var spritesmith = require('gulp.spritesmith');

var rename = require('gulp-rename');

var replace = require('gulp-replace');

var merge = require('merge-stream');

gulp.task('sass', function() {

return gulp.src('cogito/assets/stylesheets/application.sass')

.pipe(sass())

.pipe(autoprefix())

.pipe(gulp.dest('cogito/static'));

});

gulp.task('js', function(){

return gulp.src('cogito/assets/javascripts/*.js')

.pipe(concat('application.js'))

//.pipe(uglify())

.pipe(gulp.dest('cogito/static'));

});

gulp.task('sprite', function () {

var data = gulp.src('cogito/assets/images/chunks/*.png').pipe(spritesmith({

retinaSrcFilter: 'cogito/assets/images/chunks/*@2x.png',

retinaImgName: 'sprite@2x.png',

imgName: 'sprite.png',

cssName: 'sprite.css',

algorithm: 'top-down'

}));

var cssStream = data.css.pipe(gulp.dest('cogito/static/'));

var imgStream = data.img.pipe(gulp.dest('cogito/static/'));

return merge(imgStream, cssStream);

});

gulp.task('watch', function() {

gulp.watch('cogito/assets/stylesheets/**/*.sass', ['sass']);

gulp.watch('cogito/assets/javascripts/**/*.js', ['js']);

});

gulp.task('default', ['sass', 'js', 'watch', 'sprite']);

(function(quizModel, trainers){

var body = $(document.body);

var win = $(window);

var page = $('html, body');

var node = body.find('.js-quiz');

var results = body.find('.js-results');

var i;

var j;

var next;

var questionTpl;

var resultTpl;

var r = { info: [], talents: [] };

var answers = [];

var timeStart = new Date();

var timeEnd;

var key;

var keys;

var sequence = [

{ key: 15, type: 'long' },

{ key: 14, type: 'long' },

{ key: 8, type: 'long' },

{ key: 7, type: 'short' },

{ key: 9, type: 'short' },

{ key: 10, type: 'short' },

{ key: 12, type: 'short' },

{ key: 13, type: 'short' },

{ key: 11, type: 'native'}

];

var dependancies = {};

var key = '';

var m = {

setEvents: function() {

node.on({

click: function() {

var currentItem = node.find('.js-quiz-item.is-active-item');

var nextItem = node.find('.js-quiz-item[data-id=' + next + ']');

node.find('.js-quiz-answer').prop('checked', false);

timeEnd = Math.floor((Date.parse(new Date()) - Date.parse(timeStart))/1000 % 60);

answers[currentItem.data('id')]['time'] = timeEnd;

timeStart = new Date();

currentItem.animate({ opacity: '0' }, 250, function() {

currentItem.removeClass('is-active-item is-ready-item');

if (nextItem.length === 0) {

if (window.searchQuiz)

s.endQuiz();

else {

// node.append('<div class="quiz__result">The End</div>');

m.calculateTalents();

}

} else {

nextItem

.addClass('is-active-item')

.css({opacity: '0'})

.find('.js-quiz-answer');

page.animate({ scrollTop: nextItem.offset().top - 120 }, 500, function() {

nextItem.animate({ opacity: '1' }, 250);

});

}

});

}

}, '.js-quiz-next');

node.on({

change: function() { m.answer($(this)) },

keyup: function() { m.answer($(this)) }

}, '.js-quiz-answer');

body.on({

click: function() {

body.find('.js-popup').addClass('is-opened');

}

}, '.js-results-btn');

body.on({

click: function() {

body.find('.js-popup').removeClass('is-opened');

}

}, '.js-popup-bg');

},

answer: function(self) {

var item = self.closest('.js-quiz-item');

var scrollDistance = item.offset().top + item.height() - win.height();

if (window.searchQuiz) {

dependancies[parseInt(self.prop('name'), 10)] = (parseInt(self.prop('name'), 10) === 11)

? parseInt(self.parent().find('.js-quiz-answer-content').html(), 10)

: parseInt(self.parent().find('.js-quiz-answer-content').html(), self.prop('value'), 10);

}

answers[item.data('id')] = {

id: item.data('id'),

answer: self.prop('value'),

talent_name: self.data('talent'),

talent_val: self.data('val')

};

next = parseInt(self.data('next'), 10);

if (win.scrollTop() + win.height() < item.offset().top + item.height() + 55) {

page.animate({ scrollTop: scrollDistance + 120 }, 400, function() { item.addClass('is-ready-item'); });

} else {

item.addClass('is-ready-item');

}

},

calculateTalents: function() {

for (key in answers) {

if (answers.hasOwnProperty(key)) {

if (typeof answers[key].talent_name !== 'undefined'

&& parseInt(answers[key].answer, 10) !== NaN) {

for (i = 0; i < r.talents.length; i++) {

if (r.talents[i].name === answers[key].talent_name) {

r.talents[i].score += (r.talents[i].is_time)

? answers[key].time

: answers[key].talent_val;

}

}

} else {

r.info[answers[key].id] = answers[key].answer;

}

}

}

// тест

results.html('');

results.addClass('is-ready')

for (key in r.info) { node.append('<div class="quiz__result">' + r.info[key] + '</div>'); }

for (i = 0; i < r.talents.length; i++) { results.append(Mustache.render(resultTpl, r.talents[i])); }

},

init: function() {

var first = node.find('.js-quiz-item').eq(0);

first.addClass('is-active-item');

first.find('.js-quiz-answer');

r.talents = window.model.talents;

for (i = 0; i < r.talents.length; i++) r.talents[i]['score'] = 0;

m.setEvents();

},

render: function() {

var i;

for (i = 0; i < quizModel.points.length; i++) {

node.append(Mustache.render(questionTpl, quizModel.points[i]));

if (i === quizModel.points.length - 1) m.init()

}

},

tpl: function(model) {

$.get('views/question.tpl', function(tpl) {

questionTpl = tpl;

m.render();

});

$.get('views/result.tpl', function(tpl) { resultTpl = tpl; });

if (window.searchQuiz && window.model === '') {

$.get('../keys.json', function(json) { keys = json; console.log('ready'); });

}

}

};

var s = {

renderResult: function(result) {

results.html('');

results.addClass('is-ready')

for (i = 0; i < result.length; i++) {

result[i].value >= 0 && (result[i]['label'] = 'is-red');

result[i].value >= 0.2 && (result[i]['label'] = 'is-yellow');

result[i].value >= 0.4 && (result[i]['label'] = 'is-green');

results.append(Mustache.render(resultTpl, result[i]));

}

},

getAnswersLength: function(q, a) {

var quantity;

var index;

var i;

var j;

for (i = 0; i < quizModel.points.length; i++) {

if (quizModel.points[i].id === q) {

quantity = quizModel.points[i].task.answers.length

for (j = 0; j < quizModel.points[i].task.answers.length; j++) {

if (quizModel.points[i].task.answers[j].id === a) {

index = j;

}

}

}

}

return { quantity: quantity, index: index };

},

generateSubKey: function(q, a, t) {

var i;

var subKey = '';

var properties = s.getAnswersLength(q, a);

if (t === 'long') {

for (i = 0; i < properties.quantity; i++) {

subKey += (i === properties.index) ? 1 : 0;

}

} else if (t === 'short') {

subKey = (properties.index === properties.quantity - 1) ? 0 : 1;

} else if (t === 'native') {

subKey = a;

}

return subKey;

},

prepareResult: function(probabilities) {

var trainersDependancies = [];

var i;

if (probabilities) {

for (i = 0; i < probabilities.length; i++) {

trainersDependancies.push({ name: trainers[i].name, value: probabilities[i] });

}

} else {

throw new Error('Key: ' + key)

}

trainersDependancies.sort(function(a, b){ return b.value - a.value });

s.renderResult(trainersDependancies);

},

endQuiz: function() {

var i;

key = '';

for (i = 0; i < sequence.length; i++) {

key += s.generateSubKey(sequence[i].key, dependancies[sequence[i].key], sequence[i].type) + '';

}

s.prepareResult(keys[key]);

},

};

node.length > 0 && (m.tpl());

window.testKey = function(k) { key = k; console.log(keys[key]); s.prepareResult(keys[k]); }

window.changeModel = function(model) { quizModel = model; node.html(''); m.tpl(); };

})(window.model === '' ? quizModel : window.model, trainers);

(function(s) {

var body = $(document.body);

var params = {};

var login;

var errorNotify;

var removeLogin;

errorNotify = function() {

body.find('.js-login-form').append('<span class="login__notify js-login-notify">Ошибка авторизации</span>');

setTimeout(function(){

body.find('.js-login-notify').animate({ opacity: 0 }, 1200, function() { $(this).remove(); });

}, 3000);

};

removeLogin = function() {

body.find('.js-login-form').animate({ top: '-200%' }, 500, function() {

$(this).closest('.js-login').addClass('is-closed');

s.uploadUsers();

});

};

login = function() {

var login = body.find('.js-login-name').val();

var pass = body.find('.js-login-password').val();

$.ajax({

url: '/query.php',

type: 'POST',

data: { action: 'sodi-4sdk-m123-l3oa-l19c', login: login, pass: pass },

success: function(data) {

if (data) {

removeLogin();

}

else {

errorNotify();

}

},

error: function(data) {

throw new Error('Failed to login')

}

});

};

body.on({

click: function() { login(); }

}, '.js-login-button');

body.on({

keypress: function(event) { if (event.which === 13) login(); }

});

})(setup);

(function(){

var win = $(window);

var page = $('html, body');

var node = $(document.body).find('.js-form');

var questions;

var question;

var answers;

var answer;

var place;

var model;

var i;

var j;

var questionTpl;

var answerTpl;

var talentTpl;

var answerTalentTpl;

var toLiteral = function(str) {

var dict = {'\b': 'b', '\t': 't', '\n': 'n', '\v': 'v', '\f': 'f', '\r': 'r'};

return str.replace(/([\\'"\b\t\n\v\f\r])/g, function ($0, $1) {

return '\\' + (dict[$1] || $1);

});

};

var scroll = function(el) {

page.animate({ scrollTop: el.offset().top - 120 }, 500);

};

var addQuestion = function(num) {

var html = Mustache.render(questionTpl, { 'num': num });

node.find('.js-form-questions').append(html);

scroll(node.find('.js-form-question').eq(num - 1));

};

var addAnswer = function(place, num) {

var html = Mustache.render(answerTpl, { 'num': num, 'talents': window.model.talents });

place.append(html);

scroll(place.find('.js-form-answer').eq(num - 1));

};

var addTalent = function(num) {

var html = Mustache

.render(talentTpl, {'talents':[{'id': num,'is_time': false,'name':''}]});

node.find('.js-form-talents-body').append(html);

};

var updateHtml = function() {

buildModel();

};

var getTemplates = function() {

$.get('../views/form_talent.tpl', function(tpl) {

talentTpl = tpl;

if (window.model !== '') {

node.find('.js-form-talents-body')

.append(Mustache.render(tpl, window.model));

}

});

$.get('../views/form.tpl', function(tpl) {

if (window.model !== '') {

node.prepend(Mustache.render(tpl, window.model));

}

setEvents();

});

$.get('../views/form_answer_talent.tpl', function(tpl) { answerTalentTpl = tpl; });

$.get('../views/form_question.tpl', function(tpl) { questionTpl = tpl; });

$.get('../views/form_answer.tpl', function(tpl) { answerTpl = tpl; });

};

var setAdd = function() {

var btn = node.find('.js-form-add-question-container')[0];

if (btn.getBoundingClientRect().top < 40) {

node.addClass('is-add-fixed');

} else if (btn.getBoundingClientRect().top >= 40) {

node.removeClass('is-add-fixed');

}

};

var buildModel = function() {

var name = node.find('.js-form-name').val();

var questions = node.find('.js-form-question');

var talents = node.find('.js-form-talents-item');

var attr;

var point;

var talent;

var a;

var t;

window.model = {

'id': 1,

'regression_id': 1,

'name': name,

'points': [],

'talents' : []

};

for (i = 0; i < questions.length; i++) {

answers = questions.eq(i).find('.js-form-answer');

question = questions.eq(i).find('.js-form-question-text').val();

material = questions.eq(i).find('.js-form-material-type:checked');

point = {

'id': i + 1,

'name': question,

'answers': [],

'is_text': false,

'material': false

};

if (material.is(':checked') && material.val() !== 'none') {

point.material = true;

point.material_type = material.val();

attr = (material.val() === 'photo')

? 'material_photo'

: 'material_video';

point[attr] = questions.eq(i).find('.js-form-question-material-url').val();

}

window.model.points.push(point);

for (j = 0; j < answers.length; j++) {

answer = answers.eq(j).find('.js-form-answer-text').val();

a = {

'id_answer': j + 1,

'text': answer,

'nextIndex': i + 2,

'talent': answers.eq(j).find('.js-form-answer-option').val(),

'talent_val': answers.eq(j).find('.js-form-answer-value').val(),

};

window.model.points[i].answers.push(a);

}

if (questions.eq(i).find('.js-form-is-text-answer').is(':checked')) {

window.model.points[i].is_text = true;

window.model.points[i].nextIndex = i + 2;

}

}

for (i = 0; i < talents.length; i++) {

t = {

'id': i + 1,

'name': talents.eq(i).find('.js-form-talents-input').val(),

'is_time': talents.eq(i).find('.js-form-talents-time').is(':checked')

};

window.model.talents.push(t);

}

return { id: window.id, name: name, json: toLiteral(JSON.stringify(window.model)) };

};

var setEvents = function() {

node.on({

click: function() {

var questions = node.find('.js-form-question');

addQuestion(questions.length + 1);

if (questions.length + 1 > 0)

node.find('.js-form-generate').addClass('is-active');

}

}, '.js-form-add-question');

node.on({

click: function() {

var place = $(this).parent().find('.js-form-answers');

var answers = place.find('.js-form-answer');

if ($(this).hasClass('is-disabled')) return;

addAnswer(place, answers.length + 1);

}

}, '.js-form-add-answer');

node.on({

click: function() {

answer = $(this).closest('.js-form-answer');

question = answer.closest('.js-form-question');

answer.remove();

answers = question.find('.js-form-answer');

for (i = 0; i < answers.length; i++) {

answers.eq(i).find('.js-form-answer-label').html(i + 1);

}

}

}, '.js-form-answer-label');

node.on({

click: function() {

node.toggleClass('is-talents-active')

}

}, '.js-form-menu');

node.on({

click: function() {

question = $(this).closest('.js-form-question');

question.remove();

questions = node.find('.js-form-question');

for (i = 0; i < questions.length; i++) {

questions.eq(i).find('.js-form-question-label').html(i + 1);

}

if (questions.length <= 0)

node.find('.js-form-generate').removeClass('is-active');

}

}, '.js-form-question-label');

node.on({

click: function() {

$(this)

.closest('.js-form-question')

.find('.js-form-question-material')

.toggleClass('is-active');

}

}, '.js-form-question-extra');

node.on({

click: function() {

var data = buildModel();

$.ajax({

url: '/create_quiz.php',

method: 'post',

dataType: 'json',

data: data,

success: function(data) {

alert('Ваш тест сохранен по ссылке http://www.reports.cogito.space/templates/quiz.php?id=' + data)

if (window.id === '') {

window.location('http://www.reports.cogito.space/templates/cms/form.php?id=' + data);

}

},

error: function(data) { console.log(data); }

});

}

}, '.js-form-generate');

node.on({

change: function() {

var self = $(this);

var btn = self.closest('.js-form-question').find('.js-form-add-answer');

if (self.is(':checked')) {

btn.addClass('is-disabled');

} else {

btn.removeClass('is-disabled');

}

}

}, '.js-form-is-text-answer');

node.on({

click: function() {

var talents = node.find('.js-form-talents-item');

addTalent(talents.length + 1);

}

}, '.js-form-talents-add');

node.on({

click: function() {

talent = $(this).closest('.js-form-talents-item');

talent.remove();

talents = node.find('.js-form-talents-item');

for (i = 0; i < talents.length; i++) {

talents.eq(i).find('.js-form-talents-label').html(i + 1);

}

}

}, '.js-form-talents-label');

node.on({

click: function() {

}

}, '.js-form-ansewer-add-talent');

win.on({ scroll: function() { setAdd(); } });

};

if (node.length > 0) {

getTemplates();

}

}());

var setup = (function(){

var body = $(document.body);

return {

animateUser: function(length, index) {

setTimeout(function () {

body.find('.js-users-el').eq(index).addClass('is-ready');

if (index + 1 < length) {

index++;

setup.animateUser(length, index);

}

}, 500);

},

uploadUsers: function() {

$.ajax({

url: '/query.php',

type: 'POST',

data: { action: 'lamr-qi10-kac9-msa9-12dao' },

success: function(data) {

var model = JSON.parse(data);

var i = 0;

console.log(model);

for (i = 0; i < model.length; i++) {

var tmp = '<form class="users__el js-users-el" method="POST" action="http://104.236.238.238/Cogito/query.php">' +

'<label class="users__el-name">Person: ' + model[i].name + ' ' + model[i].surname + '</label>' +

'<input type="hidden" name="id" value="' + model[i].id + '">' +

'<input type="hidden" name="surname" value="' + model[i].surname + '">' +

'<input type="hidden" name="action" value="mpqo-1mwq-93rf-aokd-wipb">' +

'<input class="users__el-submit" type="submit" value="Get report">' +

'</form>';

body.find('.js-users').append(tmp);

}

setup.animateUser(model.length, 0);

},

error: function(data) {

throw new Error(data.statusText);

}

});

}

}

})();



Приложение 2

Описание визуальной составляющей приложения (SASS)

.entry

padding: 40px

font-size: 0

&__item

display: inline-block

vertical-align: top

width: 33.333%

height: 250px

padding: 20px

transition: opacity 200ms ease

&:hover,

&:active

opacity: .7

&-wrap

position: relative

height: 100%

padding: 20px

background-color: rgba(0, 0, 0, .3)

&-name,

&-id

color: $white1

font-size: 18px

padding-bottom: 10px

&-link

+absolute-full

text-indent: -9999px

&-new

text-align: center

line-height: 160px

font-size: 100px

color: $white1

.form

padding: 50px 40px 70px

max-width: 900px

&__input

+input

&__button

position: relative

float: left

margin-top: 120px

&-wrap

+btn

float: none

&.is-add-fixed &__button-wrap

position: fixed

top: 40px

&__questions

margin: 120px 0 0 170px

&__question

position: relative

border: 1px dashed $black1

background-color: $main2

padding: 30px

margin-top: 80px

&:first-of-type

margin-top: 0px

&-text

height: 35px

font-size: 20px

&-label

+label

&-extra

position: absolute

right: -10px

top: 20px

background-color: $main

width: 25px

height: 25px

border-radius: 25px

text-align: center

line-height: 25px

color: $white1

font-size: 12px

transition: all 200ms ease

cursor: pointer

z-index: 5

&-btn

+btn

margin-top: 35px

&__answer

margin: 35px 0 0 155px

position: relative

background-color: $main2

border: 1px dashed $black1

padding: 20px

&-text

height: 30px

font-size: 15px

&-label

+label

right: -8px

top: -8px

width: 20px

height: 20px

border-radius: 20px

line-height: 20px

font-size: 10px

&-talent

display: table

width: 100%

padding-top: 20px

&-option

display: table-cell

+input

border: 1px solid $black1

width: auto

height: 30px

font-size: 15px

&-value

+input

border: 1px solid $black1

width: auto

float: right

padding-left: 10px

height: 30px

font-size: 15px

&-add-talent

+btn

width: 100%

float: none

margin-top: 20px

&__generate

position: fixed

left: 0

right: 0

bottom: 0

z-index: 10

display: none

background-color: $main

color: $white1

text-transform: uppercase

text-align: center

height: 50px

line-height: 50px

cursor: pointer

font-size: 12px

transition: opacity 150ms ease-out

&:hover,

&:active

opacity: .9

&.is-active

display: block

&__check

position: absolute

top: 0

left: 0

right: 0

z-index: -1

display: table

width: 100%

border-top: 1px dashed $black1

border-left: 1px dashed $black1

border-right: 1px dashed $black1

padding: 20px

transition: all 100ms ease

&.is-active

top: -61px

z-index: 1

&-type

+checkbox

&-text

font-size: 15px

display: table-cell

vertical-align: middle

max-height: 20px

max-width: 300px

&-istext

float: right

margin-top: 40px

&__menu

position: fixed

top: 20px

right: 20px

z-index: 10

background-color: rgba(0,0,0,.4)

cursor: pointer

width: 50px

height: 50px

transition: all 200ms ease

.form.is-talents-active &

background: none

&:hover

opacity: .7

&-stripe

position: relative

top: 50%

margin: 0 auto

height: 2px

width: 25px

background-color: $white1

&:before

content: ''

position: absolute

bottom: 7px

left: 0

height: 2px

width: 25px

background-color: $white1

&:after

content: ''

position: absolute

top: 7px

left: 0

height: 2px

width: 25px

background-color: $white1

.form.is-talents-active &-stripe:before,

.form.is-talents-active &-stripe:after

display: none

&__talents

position: fixed

top: 0

right: -500px

bottom: 50px

z-index: 9

width: 500px

border-bottom: 1px dashed $white1

background-color: $main

transition: right 200ms ease

padding: 0 25px

overflow-y: scroll

.form.is-talents-active &

right: 0

&-title

color: $white1

font-size: 25px

height: 90px

line-height: 90px

&-add

+btn

width: 100%

float: none

background-color: rgba(0,0,0,.4)

&-body

margin-top: 30px

&-item

display: table

position: relative

width: 100%

padding: 5px

margin-top: 15px

border: 1px dashed $black1

&-label

+label

background-color: $black1

color: $white1

&-input

+input

border: 1px solid $black1

padding-left: 20px

width: auto

& label

+checkbox

margin-right: 0px

& span

border-color: $black1

&:after

background-color: $black1 !important

.login

position: fixed

top: 0

left: 0

right: 0

bottom: 0

width: 100%

height: 100%

background-image: url(https://img03.rl0.ru/afisha/c1000x500/daily.afisha.ru/uploads/images/e/0f/e0fb76eda22442fb804177be8012b1b5.jpg)

background-repeat: no-repeat

background-size: cover

&.is-closed

display: none

&__form

+absolute-full

margin: auto

width: 750px

height: 270px

padding: 60px

background-color: rgba(0, 0, 0, .4);

&__input

font-size: 25px

background-color: rgba(0, 0, 0, 0);

color: $black1

width: 100%

height: 50px

border-width: 0 0 1px

border-color: $black1

&__button

float: right

background-color: $main

color: $black1

text-transform: uppercase

padding: 10px 20px

margin-top: 20px

cursor: pointer

font-size: 12px

transition: opacity 150ms ease-out

&:hover

opacity: 0.7

&__notify

color: $red1

float: left

font-size: 12px

margin-top: 20px

.popup

position: fixed

top: 0

left: 0

right: 0

bottom: 0

display: none

&.is-opened

display: block

&__background

+absolute-full

cursor: pointer

background-color: rgba(0, 0, 0, .6)

&__window

position: absolute

left: 0

right: 0

top: 0

bottom: 0

margin: auto

padding: 30px

background-color: $main2

width: 700px

height: 505px

& form *

width: 100%

margin-bottom: 10px

& form span

margin-bottom: 5px

&__input

font-size: 15px

background-color: rgba(0, 0, 0, 0);

color: $black1

width: 100%

height: 30px

border-width: 0 0 1px

border-color: $black1

&__button

text-align: center

background-color: $main

color: $white1

text-transform: uppercase

padding: 10px 20px

margin-top: 20px

cursor: pointer

font-size: 12px

transition: opacity 150ms ease-out

&:hover

opacity: .7

.quiz

width: 65%

padding: 40px

background-color: $main2

&__item

padding: 0 0 25px

margin: 0 auto

max-width: 650px

min-width: 400px

position: relative

display: none

&.is-active-item

display: block

&__body

padding: 45px 40px

transition: border 200ms ease

background-color: rgba(0, 0, 0, 0.2)

&__title

font-size: 25px

color: $main

padding-bottom: 20px

text-align: center

transition: color 200ms ease

&__name

font-size: 15px

color: $main

text-align: center

transition: color 200ms ease

&__material

text-align: center

&-photo

position: relative

height: 400px

&-img

+absolute-full

background-size: cover

background-position: center center

background-repeat: no-repeat

&-video

margin: -45px -40px 0

& iframe

width: 100%

&-iframe

& iframe

display: inline-block!important

&__question

color: $white1

font-size: 21px

line-height: 30px

padding: 45px 70px 0

text-align: center

&__next

height: 0

color: $white1

text-transform: uppercase

background-color: $main

font-size: 13px

line-height: 50px

transition: height 200ms ease

text-align: center

cursor: pointer

overflow: hidden

&__item.is-ready-item &__next

height: 55px

&__item.quiz__item-photo &__answers

margin-top: 35px

&__item.is-active-item &__answer:hover

cursor: pointer

&__item.quiz__item-photo &__answer

width: 33.333%

display: inline-block

position: relative

float: left

margin-top: 0

&:before

content: ''

display: block

padding-top: 100%

&__item.quiz__item-photo &__answers-even &__answer

width: 50%

&__item.is-active-item &__answer-checkbox:checked ~ &__answer-content

color: $main

&__item-photo &__answer-content

margin-left: 0

position: absolute

top: 5px

left: 5px

right: 5px

bottom: 5px

background-size: cover

background-position: center center

background-repeat: no-repeat

&__item-photo &__answer.is-correct-answer &__answer-content:after

content: ''

+absolute-full

border: 3px solid $green1

background-color: rgba(255, 255, 255, 0.8)

&__item.is-active-item &__answer.is-correct-answer &__answer-icon

transition: none

border: 3px solid $green1

&__item-photo &__answer-icon

position: absolute

left: 15px

top: 15px

z-index: 1

margin-top: 0

&__item.is-active-item &__answer-checkbox:checked ~ &__answer-icon:after

background-color: $main

&__item.is-active-item &__answer-icon

border: 3px solid $main

&__item.quiz__item-photo &__answer-note

position: absolute

top: 15px

left: 5px

padding-right: 10px

&__answer

display: block

margin-top: 35px

vertical-align: top

transition: color 100ms ease

&-checkbox

display: none

&-content

margin-left: 40px

font-size: 15px

color: $white1

line-height: 20px

transition: color 100ms ease

&:after

transition: all 200ms ease

&-icon

position: relative

width: 20px

height: 20px

vertical-align: top

border: 3px solid $white2

background-color: $white1

float: left

transition: border 200ms ease

&-checkbox:checked ~ &-icon:after

content: ''

position: absolute

width: 6px

height: 6px

top: 4px

left: 4px

background-color: $white2

&-text

+input

&__result

text-align: center

text-transform: uppercase

font-size: 25px

color: $black1

margin-top: 50px

.results

position: fixed

top: 0

right: -40%

bottom: 0

width: 35%

min-width: 250px

background-color: $main

padding: 30px

font-size: 15px

transition: right 500ms ease

display: inline-block

overflow-y: auto

&.is-ready

right: 0

&__item

position: relative

padding: 20px 25px 20px 20px

margin-bottom: 20px

&:after

content: ''

position: absolute

right: -1px

top: -1px

bottom: -1px

width: 20px

&.is-green

border: 1px dashed $green1

&:after

background-color: $green1

&.is-yellow

border: 1px dashed $yellow1

&:after

background-color: $yellow1

&.is-red

border: 1px dashed $red1

&:after

background-color: $red1

&:nth-child(6) ~ &

display: none

&-name

color: $white1

font-size: 18px

line-height: 20px

padding-bottom: 10px

&-type

font-size: 12px

&.is-green &-type

color: $green1

&.is-yellow &-type

color: $yellow1

&.is-red &-type

color: $red1

&__button

float: right

display: inline-block

color: $white1

text-transform: uppercase

cursor: pointer

font-size: 10px

opacity: 0

transition: opacity 150ms ease-out

&:hover

text-decoration: underline

&__item:hover &__button

opacity: 1

.users

padding: 20px

&__el

display: table

width: 100%

padding: 30px 40px

border: 1px dashed $black1

margin-bottom: 10px

margin-left: -200%

transition: margin-left 300ms ease-out

&.is-ready

margin-left: 0

&-name,

&-submit

display: table-cell

vertical-align: middle

font-size: 15px

&-submit

display: table-cell

vertical-align: middle

float: right

background-color: $white1

color: $black1

text-transform: uppercase

padding: 10px 20px

cursor: pointer

font-size: 12px

transition: opacity 150ms ease-out

border: none

&:hover

opacity: 0.7

html

height: 100%

body

min-height: 100%

body

line-height: 1

+font-default

font-size: 62.5%

color: $black1

-webkit-font-smoothing: antialiased

*:focus

outline: 0

ins

text-decoration: none

del

text-decoration: line-through

a

color: inherit

text-decoration: none

outline: none

input, textarea

outline: none

margin: 0

border-radius: 0px

background-color: $white1

-webkit-appearance: none

opacity: 1

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill

-webkit-box-shadow: 0 0 0px 1000px transparent inset

input[type='submit']

-webkit-appearance: none

-moz-appearance: none

img

vertical-align: bottom

*, *:before, *:after

-webkit-tap-highlight-color: transparent

box-sizing: border-box

::-webkit-input-placeholder

color: rgba(0, 0, 0, .6)

:-moz-placeholder

color: rgba(0, 0, 0, .6)

::-moz-placeholder

color: rgba(0, 0, 0, .6)

:-ms-input-placeholder

color: rgba(0, 0, 0, .6)

button

padding: 0

border: 0

background: transparent

outline: none

span.sprite

display: inline-block

/* colors */

$white1: #ffffff

$white2: #fffce9

$black1: #000000

$yellow1: #f7d37f

$yellow2: #f5cb6e

$yellow3: #f1b843

$yellow4: #D29215

$red1: #f86161

$red2: #e14444

$purple1: #a44db9

$purple2: #711d86

$orange1: #f17d17

$orange2: #de6b04

$blue1: #52b6aa

$blue2: #25776f

$green1: #00CA60

$autofill: #65223F

$main: #8C6954

$main2: #F7EAC8

/* sizes */

/* z-indexes */

/* breakpoints */

$screen-xxs: 320px

$screen-xxs-min: $screen-xxs

$screen-xs: 480px

$screen-xs-min: $screen-xs

$screen-sm: 780px

$screen-sm-min: $screen-sm

$screen-md: 1020px

$screen-md-min: $screen-md

$screen-lg: 1280px

$screen-lg-min: $screen-lg

$screen-xl: 1440px

$screen-xl-min: $screen-xl

$screen-xxl: 1920px

$screen-xxl-min: $screen-xxl

$screen-xxs-max: $screen-xs-min - 1

$screen-xs-max: $screen-sm-min - 1

$screen-sm-max: $screen-md-min - 1

$screen-md-max: $screen-lg-min - 1

$screen-lg-max: $screen-xl-min - 1

$screen-xl-max: $screen-xxl-min - 1

/* mixins of breakpoits */

=breakpoint($min: 0, $max: 0)

@if unitless($max)

@media screen and (min-width: $min)

@content

@else if unitless($min)

@media screen and (max-width: $max)

@content

@else

@media screen and (min-width: $min) and (max-width: $max)

@content

=retina

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-o-min-device-pixel-ratio: 2/1), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)

@content

/* mixins fonts */

=font-default

font-family: UbuntuB

/* mixins */

=absolute-full

position: absolute

top: 0

left: 0

right: 0

bottom: 0

=inline

white-space: nowrap

word-wrap: normal

=notinline

white-space: normal

=with-link

& a

color: $red1

&:hover

text-decoration: underline

=checkbox

display: table-cell

vertical-align: middle

margin-right: 30px

transition: color 100ms ease

cursor: pointer

& input

display: none

& span

position: relative

width: 20px

height: 20px

vertical-align: top

border: 3px solid $main

background-color: $white1

float: left

transition: border 200ms ease

& div

margin-left: 30px

font-size: 15px

color: $black1

line-height: 20px

transition: color 100ms ease

& span:after

content: ''

position: absolute

width: 0px

height: 0px

top: 7px

left: 7px

background-color: $main

transition: all 250ms ease

& input:checked ~ span:after

width: 6px

height: 6px

top: 4px

left: 4px

=label

position: absolute

right: -10px

top: -10px

background-color: $main

width: 25px

height: 25px

border-radius: 25px

text-align: center

line-height: 25px

color: $white1

font-size: 12px

transition: all 200ms ease

cursor: pointer

z-index: 5

&:hover

color: $white1

width: 35px

height: 35px

border-radius: 35px

font-size: 15px

line-height: 35px

&:after

color: $white1

content: ''

+absolute-full

border-radius: 35px

&:hover:after

color: $white1

content: 'D'

background-color: $red1

=circle($size, $color, $borderCol, $borderSiz, $hoverCol)

display: inline-block

height: $size

width: $size

background-color: $color

border-radius: $size

border-color: $borderCol

border-width: $borderSiz

transition: background-color 200ms ease-out

&:hover

background-color: $hoverCol

border-color: $hoverCol

=input

font-size: 25px

background-color: rgba(0, 0, 0, 0);

color: $black1

width: 100%

height: 50px

border-width: 0 0 1px

border-color: $black1

=btn

float: left

background-color: $main

color: $white1

text-transform: uppercase

padding: 10px 20px

cursor: pointer

font-size: 12px

transition: opacity 150ms ease-out

text-align: center

&:hover,

&:active

opacity: .7

&.is-disabled

cursor: default

opacity: .3

&:hover,

&:active

opacity: .3

.unsel

-webkit-user-select: none

-moz-user-select: none

-ms-user-select: none

-webkit-user-drag: none

-khtml-user-drag: none

.cf:after

content: ''

display: block

height: 0

clear: both

.g-sides

position: relative

.g-content

position: relative

z-index: 0

body.is-noscroll

overflow: hidden

body

background-color: $main2

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center, dl, dt, dd, ol, ul, li,

fieldset, form, label, legend, table,

caption, tbody, tfoot, thead, tr, th, td

margin: 0

padding: 0

border: 0

outline: 0

font: inherit

font-size: 100%

vertical-align: baseline

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section

display: block

body

line-height: 1

ol, ul

list-style: none

blockquote, q

quotes: none

blockquote:before, blockquote:after,

q:before, q:after

content: ''

content: none

table

border-collapse: collapse

border-spacing: 0

Размещено на Allbest.ru

...