113 lines
4.0 KiB
JavaScript
113 lines
4.0 KiB
JavaScript
const guides = {
|
||
onboarding: [
|
||
{
|
||
icon: "👋",
|
||
title: "Добро пожаловать!",
|
||
description: "Ты только что устроился к нам. Не переживай — всё просто!",
|
||
visual: "🎉"
|
||
},
|
||
{
|
||
icon: "💻",
|
||
title: "Получи компьютер",
|
||
description: "Подойди к IT-отделу и скажи: 'Мне нужен компьютер для работы'. Они всё дадут.",
|
||
visual: "🖥️"
|
||
},
|
||
{
|
||
icon: "📧",
|
||
title: "Почта и пароли",
|
||
description: "Тебе дадут листок с логином и паролем. Не потеряй!",
|
||
visual: "📋"
|
||
}
|
||
],
|
||
process: [
|
||
{
|
||
icon: "📋",
|
||
title: "Получи задачу",
|
||
description: "Зайди в программу 'Задачи'. Там будут твои дела на сегодня.",
|
||
visual: "📝"
|
||
},
|
||
{
|
||
icon: "⏱️",
|
||
title: "Сделай и закрой",
|
||
description: "Сделал задачу — нажми кнопку 'Готово'. Всё, можно брать следующую.",
|
||
visual: "✅"
|
||
},
|
||
{
|
||
icon: "❓",
|
||
title: "Если не получается",
|
||
description: "Не мучайся! Напиши в чат или позвони руководителю. Помогут.",
|
||
visual: "💬"
|
||
}
|
||
],
|
||
tools: [
|
||
{
|
||
icon: "📞",
|
||
title: "Телефон",
|
||
description: "Набери 100 — это внутренняя линия. Тебе ответит любой коллега.",
|
||
visual: "📱"
|
||
},
|
||
{
|
||
icon: "💬",
|
||
title: "Чат команды",
|
||
description: "Зайди в чат и напиши 'Привет, я новый'. Все поздравят!",
|
||
visual: "👋"
|
||
},
|
||
{
|
||
icon: "📅",
|
||
title: "Календарь",
|
||
description: "Смотри в календарь — там все совещания и дедлайны.",
|
||
visual: "📆"
|
||
}
|
||
]
|
||
};
|
||
|
||
let currentGuide = 'onboarding';
|
||
let currentStep = 0;
|
||
|
||
function updateGuide() {
|
||
const container = document.getElementById('guideContainer');
|
||
const steps = guides[currentGuide];
|
||
const step = steps[currentStep];
|
||
|
||
container.innerHTML = `
|
||
<div class="step-card">
|
||
<span class="step-icon">${step.icon}</span>
|
||
<h2 class="step-title">${step.title}</h2>
|
||
<p class="step-description">${step.description}</p>
|
||
<div class="step-visual">${step.visual}</div>
|
||
</div>
|
||
`;
|
||
|
||
document.getElementById('stepCounter').textContent = `Шаг ${currentStep + 1} из ${steps.length}`;
|
||
document.getElementById('btnBack').disabled = currentStep === 0;
|
||
document.getElementById('btnNext').textContent = currentStep === steps.length - 1 ? 'Готово!' : 'Далее →';
|
||
}
|
||
|
||
document.querySelectorAll('.tab').forEach(tab => {
|
||
tab.addEventListener('click', () => {
|
||
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
||
tab.classList.add('active');
|
||
currentGuide = tab.dataset.guide;
|
||
currentStep = 0;
|
||
updateGuide();
|
||
});
|
||
});
|
||
|
||
document.getElementById('btnNext').addEventListener('click', () => {
|
||
const steps = guides[currentGuide];
|
||
if (currentStep < steps.length - 1) {
|
||
currentStep++;
|
||
updateGuide();
|
||
} else {
|
||
alert('🎉 Ты прошёл все шаги! Теперь ты знаешь, как работать!');
|
||
}
|
||
});
|
||
|
||
document.getElementById('btnBack').addEventListener('click', () => {
|
||
if (currentStep > 0) {
|
||
currentStep--;
|
||
updateGuide();
|
||
}
|
||
});
|
||
|
||
updateGuide(); |