Найди свое направление!
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
margin: 0;
padding: 20px;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
color: #333;
}
h1 {
margin-bottom: 30px;
text-align: center;
color: #2c3e50;
}
#cloud {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
max-width: 800px;
margin-bottom: 40px;
}
.tag {
background: linear-gradient(145deg, #e6e6e6, #ffffff);
padding: 10px 18px;
border-radius: 25px;
cursor: pointer;
user-select: none;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
border: 2px solid transparent;
font-size: 15px;
position: relative;
overflow: hidden;
}
.tag:hover {
transform: translateY(-2px) scale(1.04);
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
border-color: #3498db;
}
.tag.selected {
background: linear-gradient(145deg, #3498db, #2980b9);
color: white;
font-weight: bold;
transform: translateY(-1px) scale(1.06);
box-shadow: 0 5px 10px rgba(52, 152, 219, 0.4);
border-color: #2980b9;
}
.tag.selected::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
animation: shine 1.5s infinite;
}
.tag.influential {
background: linear-gradient(145deg, #27ae60, #2ecc71);
color: white;
font-weight: bold;
transform: translateY(-2px) scale(1.08);
box-shadow: 0 7px 14px rgba(46, 204, 113, 0.4);
border-color: #27ae60;
z-index: 10;
}
.tag.influential::after {
content: '✓';
margin-left: 6px;
font-weight: bold;
}
.tag.influential::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
animation: shine 1.2s infinite;
}
@keyframes shine {
0% { left: -100%; }
20% { left: 100%; }
100% { left: 100%; }
}
#calculateBtn {
background: linear-gradient(145deg, #ff7e5f, #feb47b);
color: white;
border: none;
padding: 16px 32px;
font-size: 18px;
border-radius: 30px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 5px 10px rgba(255, 126, 95, 0.3);
font-weight: bold;
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
}
#calculateBtn:hover:not(:disabled) {
transform: translateY(-2px) scale(1.04);
box-shadow: 0 8px 16px rgba(255, 126, 95, 0.4);
background: linear-gradient(145deg, #ff8c6f, #ffc29b);
}
#calculateBtn:active:not(:disabled) {
transform: translateY(-1px) scale(1.02);
}
#calculateBtn:disabled {
background: linear-gradient(145deg, #bdc3c7, #95a5a6);
cursor: not-allowed;
transform: none;
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}
.selection-counter {
margin-top: 15px;
color: #7f8c8d;
font-size: 16px;
margin-bottom: 15px;
font-weight: bold;
}
#result {
max-width: 600px;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 20px;
padding: 30px;
box-shadow: 0 15px 30px rgba(0,0,0,0.15);
text-align: center;
display: none;
animation: fadeInUp 0.8s ease-out;
border: 1px solid #e0e0e0;
margin-top: 20px;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.result-item {
background: white;
border-radius: 15px;
padding: 20px;
margin: 15px 0;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
border-left: 4px solid #e67e22;
}
.result-title {
font-size: 20px;
font-weight: bold;
color: #2c3e50;
margin-bottom: 10px;
}
.result-score {
background: #e67e22;
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 14px;
margin-left: 10px;
}
.result-description {
font-size: 15px;
line-height: 1.6;
color: #555;
text-align: left;
}
.influence-info {
margin-top: 20px;
color: #27ae60;
font-size: 15px;
font-style: italic;
background: rgba(46, 204, 113, 0.1);
padding: 15px;
border-radius: 10px;
border-left: 3px solid #27ae60;
}
.results-container {
width: 100%;
margin-top: 20px;
}
.result-header {
color: #e67e22;
margin-top: 0;
font-size: 24px;
margin-bottom: 20px;
}
Выберите 6 слов, которые вам наиболее близки
Выбрано: 0 из 6
// 1. База данных тегов и результатов
const tagsData = [
{ text: "Творчество", values: { theatre: 4, media: 5, volunteer: 2 } },
{ text: "Сцена", values: { theatre: 5, media: 3 } },
{ text: "Искусство", values: { theatre: 4, media: 4, champions: 2 } },
{ text: "Команда", values: { sport: 3, council: 4, media: 3, volunteer: 3 } },
{ text: "Лидерство", values: { council: 5, media: 3, volunteer: 2 } },
{ text: "Соревнование", values: { sport: 5, esport: 4, champions: 3 } },
{ text: "Здоровье", values: { sport: 4, tourism: 3 } },
{ text: "Движение", values: { sport: 3, tourism: 4 } },
{ text: "Помощь", values: { volunteer: 5, council: 2 } },
{ text: "Общество", values: { volunteer: 4, council: 3, patriotic: 2 } },
{ text: "Технологии", values: { esport: 5, media: 4, champions: 4 } },
{ text: "Игры", values: { esport: 4, sport: 2 } },
{ text: "Природа", values: { tourism: 5, patriotic: 1 } },
{ text: "Приключения", values: { tourism: 4, sport: 2 } },
{ text: "Навыки", values: { tourism: 3, champions: 5, patriotic: 3 } },
{ text: "История", values: { patriotic: 4, tourism: 2, media: 3 } },
{ text: "Культура", values: { patriotic: 4, theatre: 2, media: 4 } },
{ text: "Родина", values: { patriotic: 5 } },
{ text: "Профессия", values: { champions: 5, council: 2 } },
{ text: "Знания", values: { champions: 4, council: 1 } },
{ text: "Инновации", values: { champions: 3, esport: 3, media: 4 } },
{ text: "Общение", values: { council: 3, volunteer: 3, media: 5 } },
{ text: "Организация", values: { council: 4, volunteer: 2, media: 3 } },
{ text: "Сила", values: { sport: 4, patriotic: 2 } },
{ text: "Выносливость", values: { sport: 4, tourism: 3 } },
{ text: "Стратегия", values: { esport: 4, council: 3, champions: 2 } },
{ text: "Гибкость", values: { sport: 3, theatre: 2 } },
{ text: "Эмпатия", values: { volunteer: 4, theatre: 3, media: 3 } },
{ text: "Традиции", values: { patriotic: 4, theatre: 2 } },
{ text: "Новаторство", values: { champions: 4, esport: 3, media: 5 } },
{ text: "Дисциплина", values: { sport: 3, patriotic: 3, champions: 2 } },
{ text: "Вдохновение", values: { theatre: 4, media: 5, volunteer: 2 } },
{ text: "Развитие", values: { champions: 4, sport: 2, tourism: 2 } },
{ text: "Сообщество", values: { council: 4, volunteer: 3, patriotic: 2 } },
{ text: "Победа", values: { sport: 4, esport: 3, champions: 2 } },
{ text: "Фотография", values: { media: 5, tourism: 2 } },
{ text: "Видео", values: { media: 5, esport: 2 } },
{ text: "Журналистика", values: { media: 5, council: 2 } },
{ text: "Блогинг", values: { media: 4, esport: 2 } },
{ text: "Дизайн", values: { media: 4, champions: 2 } },
{ text: "Креатив", values: { media: 5, theatre: 3 } },
{ text: "Публикации", values: { media: 4, council: 2 } },
{ text: "Контент", values: { media: 5, esport: 2 } },
{ text: "Интервью", values: { media: 4, council: 2 } },
{ text: "Подкасты", values: { media: 4, champions: 1 } }
];
const results = {
'champions': {
title: 'Кружки от чемпионов',
description: 'Городской проект «Кружки от чемпионов» в рамках доп.образования направлен на расширение горизонтов обучающихся. Каждый участник имеет возможность погрузиться в увлекательный мир различных профессий, осваивая ключевые навыки и компетенции.'
},
'theatre': {
title: 'ПРОЕКТ "ТЕАТР В ШКОЛЕ"',
description: 'Театральная студия «Арлекин» создана для всех студентов, стремящихся раскрыть творческие способности и выразить себя на сцене. Независимо от специальности, каждый студент найдет возможность для творческого самовыражения и личностного роста.'
},
'council': {
title: 'СТУДЕНЧЕСКИЙ СОВЕТ',
description: 'Студсовет представляет интерес для всех студентов, стремящихся влиять на жизнь колледжа. Он организует мероприятия, отстаивает права студентов и помогает решать их проблемы.'
},
'sport': {
title: 'СПОРТИВНЫЙ КЛУБ',
description: 'ССК «Легион» ждет любителей физической активности и здорового образа жизни. Он предлагает тренировки, соревнования и возможность завести новых друзей.'
},
'volunteer': {
title: 'ВОЛОНТЕРСКИЙ ЦЕНТР',
description: 'Волонтерский центр КС54 «На связи с добром» приглашает студентов, желающих помочь обществу. Он организует различные благотворительные акции и социальные проекты.'
},
'esport': {
title: 'ЦЕНТР КИБЕРСПОРТА',
description: 'Киберспортивный центр заинтересует геймеров и любителей цифровых технологий. Это место для тренировок, соревнований и общения с единомышленниками.'
},
'tourism': {
title: 'ТУРИСТИЧЕСКИЙ КЛУБ',
description: 'Турклуб «Эдельвейс» ориентирован на любителей активного отдыха на природе. Он организуе походы, мероприятия на свежем воздухе и помогает развивать навыки выживания.'
},
'patriotic': {
title: 'ВОЕННО-ПАТРИОТИЧЕСКИЙ КЛУБ',
description: 'В КС54 открыто несколько ВПК, объединяющие студентов, заинтересованных в истории и культуре страны. Он проводит лекции, культурные мероприятия и акции, направленные на патриотическое воспитание.'
},
'media': {
title: 'Студенческий медиацентр КС54',
description: 'Медиацентр КС54 - это лицо колледжа в СМИ. Поддержание имиджа колледжа и создание уникального контента - наши основные задачи. Если ты хочешь видеть себя в кадре или быть тем, кто его создает - присоединяйся к нам! Фотоотчеты, видео репортажи, интервью, подкасты, дайджесты, новости - формат найдется для каждого. Именно мы говорим, показываем, пишем и публикуем. Давай создавать качественный контент вместе!'
}
};
// 2. Настройки приложения
const MAX_SELECTIONS = 6;
const MAX_RESULTS = 3;
let selectedTags = [];
let totalScores = {};
let tagElements = [];
// 3. Инициализация
const cloudContainer = document.getElementById('cloud');
const counterElement = document.getElementById('counter');
const calculateBtn = document.getElementById('calculateBtn');
const influenceInfoElement = document.getElementById('influenceInfo');
const resultsContainer = document.getElementById('resultsContainer');
tagsData.forEach((tag, index) => {
const tagElement = document.createElement('div');
tagElement.className = 'tag';
tagElement.textContent = tag.text;
tagElement.dataset.index = index;
tagElement.dataset.values = JSON.stringify(tag.values);
tagElement.addEventListener('click', () => {
toggleTag(tagElement, tag);
});
cloudContainer.appendChild(tagElement);
tagElements.push(tagElement);
});
// 4. Функция переключения тега
function toggleTag(tagElement, tagData) {
if (tagElement.classList.contains('selected')) {
tagElement.classList.remove('selected');
selectedTags = selectedTags.filter(t => t !== tagData);
} else {
if (selectedTags.length {
totalScores = {
'champions': 0, 'theatre': 0, 'council': 0, 'sport': 0,
'volunteer': 0, 'esport': 0, 'tourism': 0, 'patriotic': 0,
'media': 0
};
// Считаем баллы
selectedTags.forEach(tag => {
for (const [key, value] of Object.entries(tag.values)) {
totalScores[key] += value;
}
});
// Получаем топ-3 результатов
const topResults = getTopResults(MAX_RESULTS);
// Подсвечиваем влиятельные теги
highlightInfluentialTags(topResults);
// Показываем результаты
showResults(topResults);
});
// 6. Получение топ-N результатов
function getTopResults(count) {
const scoresArray = Object.entries(totalScores)
.filter(([_, score]) => score > 0)
.sort((a, b) => b[1] - a[1])
.slice(0, count);
return scoresArray.map(([key, score]) => ({
key,
score,
...results[key]
}));
}
// 7. Подсветка влиятельных тегов
function highlightInfluentialTags(topResults) {
// Сбрасываем все предыдущие подсветки
tagElements.forEach(element => {
element.classList.remove('influential');
});
const influentialTags = new Set();
// Для каждого топ-результата находим влиятельные теги
topResults.forEach(result => {
selectedTags.forEach(tag => {
if (tag.values[result.key] && tag.values[result.key] >= 3) {
influentialTags.add(tag.text);
// Находим и подсвечиваем DOM-элемент
const tagElement = Array.from(tagElements).find(el =>
el.textContent === tag.text
);
if (tagElement) {
setTimeout(() => {
tagElement.classList.add('influential');
}, 300);
}
}
});
});
return Array.from(influentialTags);
}
// 8. Показ результатов
function showResults(topResults) {
const resultElement = document.getElementById('result');
resultsContainer.innerHTML = '';
if (topResults.length === 0) {
resultsContainer.innerHTML = '
Не удалось определить подходящие варианты. Попробуйте выбрать другие слова.
';
resultElement.style.display = 'block';
return;
}
// Создаем карточки для каждого результата
topResults.forEach((result, index) => {
const resultCard = document.createElement('div');
resultCard.className = 'result-item';
resultCard.innerHTML = `
${index + 1}. ${result.title}
${result.score} баллов
${result.description}
`;
resultsContainer.appendChild(resultCard);
});
// Показываем информацию о влиятельных тегах
const influentialTags = Array.from(new Set(selectedTags.filter(tag =>
Object.values(tag.values).some(score => score >= 3)
).map(tag => tag.text)));
if (influentialTags.length > 0) {
influenceInfoElement.textContent = `Наиболее влиятельные выборы: ${influentialTags.join(', ')}`;
influenceInfoElement.style.display = 'block';
} else {
influenceInfoElement.style.display = 'none';
}
resultElement.style.display = 'block';
resultElement.scrollIntoView({ behavior: 'smooth' });
}