896 lines
41 KiB
HTML
896 lines
41 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Pulse — вовлечённость сотрудников</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<header class="header">
|
||
<div class="header-content">
|
||
<div class="logo">
|
||
<span class="logo-icon">💙</span>
|
||
<span class="logo-text">Pulse</span>
|
||
</div>
|
||
<nav class="nav">
|
||
<a href="#" class="nav-link active" data-section="pulse">Пульс команды</a>
|
||
<a href="#" class="nav-link" data-section="adaptation">Адаптация</a>
|
||
<a href="#" class="nav-link" data-section="training">Обучение</a>
|
||
<a href="#" class="nav-link" data-section="discipline">Трудовая дисциплина</a>
|
||
<a href="#" class="nav-link" data-section="automation">Автоматизация</a>
|
||
<a href="#" class="nav-link" data-section="ideas">Инновации</a>
|
||
<a href="#" class="nav-link" data-section="motivation">Мотивация</a>
|
||
<a href="#" class="nav-link" data-section="kpi">КПД</a>
|
||
<a href="#" class="nav-link" data-section="reserve">Кадровый резерв</a>
|
||
<a href="#" class="nav-link" data-section="feedback">Обратная связь</a>
|
||
<a href="#" class="nav-link" data-section="profile">Профиль</a>
|
||
<a href="#" class="nav-link" data-section="analytics">Аналитика</a>
|
||
</nav>
|
||
<div class="user-menu">
|
||
<button class="user-btn" id="userBtn">
|
||
<span class="user-avatar">👤</span>
|
||
<span class="user-name" id="userName">Сотрудник</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="main">
|
||
<!-- Секция: Пульс команды -->
|
||
<section id="pulse" class="section active">
|
||
<div class="section-header">
|
||
<h1>Пульс команды</h1>
|
||
<p class="section-subtitle">Обзор вовлечённости и активности сотрудников</p>
|
||
</div>
|
||
|
||
<!-- KPI карточки -->
|
||
<div class="kpi-grid">
|
||
<div class="kpi-card">
|
||
<div class="kpi-icon">💬</div>
|
||
<div class="kpi-value" id="kpiReviews">0</div>
|
||
<div class="kpi-label">Отзывов получено</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-icon">⭐</div>
|
||
<div class="kpi-value" id="kpiAvgRating">0.0</div>
|
||
<div class="kpi-label">Средняя оценка</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-icon">💡</div>
|
||
<div class="kpi-value" id="kpiIdeas">0</div>
|
||
<div class="kpi-label">Идей предложено</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-icon">✅</div>
|
||
<div class="kpi-value" id="kpiImplemented">0</div>
|
||
<div class="kpi-label">Идей реализовано</div>
|
||
</div>
|
||
<div class="kpi-card">
|
||
<div class="kpi-icon">🎯</div>
|
||
<div class="kpi-value" id="kpiResolved">0</div>
|
||
<div class="kpi-label">Обращений решено</div>
|
||
</div>
|
||
<div class="kpi-card highlight">
|
||
<div class="kpi-icon">📈</div>
|
||
<div class="kpi-value" id="kpiEngagement">0</div>
|
||
<div class="kpi-label">Индекс вовлечённости</div>
|
||
<div class="kpi-trend" id="kpiTrend">→ без изменений</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Графики и визуализация -->
|
||
<div class="charts-grid">
|
||
<div class="chart-card">
|
||
<h3>Динамика вовлечённости</h3>
|
||
<div class="chart-placeholder" id="engagementChart">
|
||
<canvas id="engagementCanvas"></canvas>
|
||
</div>
|
||
</div>
|
||
<div class="chart-card">
|
||
<h3>Оценка по направлениям</h3>
|
||
<div class="chart-placeholder" id="ratingChart">
|
||
<canvas id="ratingCanvas"></canvas>
|
||
</div>
|
||
</div>
|
||
<div class="chart-card">
|
||
<h3>Отзывы по подразделениям</h3>
|
||
<div class="chart-placeholder" id="deptChart">
|
||
<canvas id="deptCanvas"></canvas>
|
||
</div>
|
||
</div>
|
||
<div class="chart-card">
|
||
<h3>Статус идей</h3>
|
||
<div class="chart-placeholder" id="ideasStatusChart">
|
||
<canvas id="ideasStatusCanvas"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Последние идеи -->
|
||
<div class="ideas-preview">
|
||
<h2>Последние идеи</h2>
|
||
<div id="ideasList" class="ideas-list"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Секция: Обратная связь -->
|
||
<section id="feedback" class="section">
|
||
<div class="section-header">
|
||
<h1>Обратная связь</h1>
|
||
<p class="section-subtitle">Поделитесь своим мнением — это поможет сделать компанию лучше</p>
|
||
</div>
|
||
|
||
<div class="feedback-container">
|
||
<form id="feedbackForm" class="feedback-form">
|
||
<div class="form-group">
|
||
<label for="fbDirection">Направление</label>
|
||
<select id="fbDirection" required>
|
||
<option value="">Выберите направление</option>
|
||
<option value="adaptation">Адаптация</option>
|
||
<option value="training">Обучение</option>
|
||
<option value="discipline">Трудовая дисциплина</option>
|
||
<option value="automation">Автоматизация</option>
|
||
<option value="innovation">Инновации</option>
|
||
<option value="other">Другое</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="fbRating">Оценка</label>
|
||
<div class="rating-input" id="ratingInput">
|
||
<span class="rating-star" data-value="1">★</span>
|
||
<span class="rating-star" data-value="2">★</span>
|
||
<span class="rating-star" data-value="3">★</span>
|
||
<span class="rating-star" data-value="4">★</span>
|
||
<span class="rating-star" data-value="5">★</span>
|
||
</div>
|
||
<input type="hidden" id="fbRating" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="fbType">Тип обращения</label>
|
||
<select id="fbType" required>
|
||
<option value="">Выберите тип</option>
|
||
<option value="propose">Хочу предложить</option>
|
||
<option value="attention">Хочу обратить внимание</option>
|
||
<option value="thank">Хочу поблагодарить</option>
|
||
<option value="help">Нужна помощь</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="fbComment">Комментарий</label>
|
||
<textarea id="fbComment" rows="4" placeholder="Опишите вашу ситуацию подробно..." required></textarea>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="fbSuggestion">Предложение</label>
|
||
<textarea id="fbSuggestion" rows="3" placeholder="Что можно улучшить?"></textarea>
|
||
</div>
|
||
|
||
<div class="form-group checkbox-group">
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="fbAnonymous">
|
||
<span class="checkbox-text">Отправить анонимно (HR не увидит ваше имя)</span>
|
||
</label>
|
||
</div>
|
||
|
||
<button type="submit" class="btn-primary">Отправить обратную связь</button>
|
||
</form>
|
||
|
||
<div class="feedback-success" id="feedbackSuccess" style="display: none;">
|
||
<div class="success-icon">✓</div>
|
||
<h3>Спасибо за обратную связь!</h3>
|
||
<p>Ваше обращение принято и будет рассмотрено.</p>
|
||
<button class="btn-secondary" onclick="resetFeedbackForm()">Отправить ещё</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Секция: Инновации и идеи -->
|
||
<section id="ideas" class="section">
|
||
<div class="section-header">
|
||
<h1>Инновации и идеи</h1>
|
||
<p class="section-subtitle">Предлагайте улучшения — вместе мы сделаем процессы лучше</p>
|
||
</div>
|
||
|
||
<button class="btn-primary" id="newIdeaBtn">+ Предложить идею</button>
|
||
|
||
<div class="ideas-filters">
|
||
<button class="filter-btn active" data-status="all">Все</button>
|
||
<button class="filter-btn" data-status="new">Новые</button>
|
||
<button class="filter-btn" data-status="review">На рассмотрении</button>
|
||
<button class="filter-btn" data-status="accepted">Приняты</button>
|
||
<button class="filter-btn" data-status="implement">В реализации</button>
|
||
<button class="filter-btn" data-status="done">Реализованы</button>
|
||
<button class="filter-btn" data-status="rejected">Отклонены</button>
|
||
</div>
|
||
|
||
<div id="ideasContainer" class="ideas-container"></div>
|
||
</section>
|
||
|
||
<!-- Секция: Адаптация -->
|
||
<section id="adaptation" class="section">
|
||
<div class="section-header">
|
||
<h1>Адаптация</h1>
|
||
<p class="section-subtitle">Помогаем новым сотрудникам быстро влиться в команду</p>
|
||
</div>
|
||
|
||
<div class="adaptation-blocks">
|
||
<div class="adaptation-card">
|
||
<h3>📋 Опрос: Первая неделя</h3>
|
||
<p>Оцените свои первые дни в компании</p>
|
||
<button class="btn-secondary" data-survey="week1">Пройти опрос</button>
|
||
</div>
|
||
<div class="adaptation-card">
|
||
<h3>📋 Опрос: 1 месяц</h3>
|
||
<p>Как проходит ваш испытательный срок?</p>
|
||
<button class="btn-secondary" data-survey="month1">Пройти опрос</button>
|
||
</div>
|
||
<div class="adaptation-card">
|
||
<h3>📋 Опрос: После испытательного срока</h3>
|
||
<p>Поделитесь впечатлениями об адаптации</p>
|
||
<button class="btn-secondary" data-survey="probation">Пройти опрос</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="adaptationSurvey" class="survey-container" style="display: none;">
|
||
<h3 id="surveyTitle">Опрос</h3>
|
||
<form id="adaptationForm">
|
||
<div class="form-group">
|
||
<label>Насколько понятны Вам Ваши задачи?</label>
|
||
<div class="rating-input survey-rating" data-field="tasks">
|
||
<span class="rating-star" data-value="1">★</span>
|
||
<span class="rating-star" data-value="2">★</span>
|
||
<span class="rating-star" data-value="3">★</span>
|
||
<span class="rating-star" data-value="4">★</span>
|
||
<span class="rating-star" data-value="5">★</span>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Получаете ли Вы необходимую поддержку?</label>
|
||
<div class="rating-input survey-rating" data-field="support">
|
||
<span class="rating-star" data-value="1">★</span>
|
||
<span class="rating-star" data-value="2">★</span>
|
||
<span class="rating-star" data-value="3">★</span>
|
||
<span class="rating-star" data-value="4">★</span>
|
||
<span class="rating-star" data-value="5">★</span>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="surveyComment">Что помогло бы сделать адаптацию комфортнее?</label>
|
||
<textarea id="surveyComment" rows="3" placeholder="Ваш комментарий..."></textarea>
|
||
</div>
|
||
<button type="submit" class="btn-primary">Отправить</button>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Секция: Обучение -->
|
||
<section id="training" class="section">
|
||
<div class="section-header">
|
||
<h1>Обучение</h1>
|
||
<p class="section-subtitle">Развивайте навыки и делитесь предложениями по обучению</p>
|
||
</div>
|
||
|
||
<div class="training-grid">
|
||
<div class="training-card">
|
||
<h3>📚 Каталог обучения</h3>
|
||
<p>Доступные курсы и программы</p>
|
||
<button class="btn-secondary">Открыть каталог</button>
|
||
</div>
|
||
<div class="training-card">
|
||
<h3>🎯 Рекомендации</h3>
|
||
<p>Персональные рекомендации по обучению</p>
|
||
<button class="btn-secondary">Получить рекомендации</button>
|
||
</div>
|
||
<div class="training-card">
|
||
<h3>📝 Заявка на обучение</h3>
|
||
<p>Подайте заявку на интересный курс</p>
|
||
<button class="btn-secondary">Подать заявку</button>
|
||
</div>
|
||
<div class="training-card">
|
||
<h3>💬 Предложить тему</h3>
|
||
<p>Какие компетенции хотите развить?</p>
|
||
<button class="btn-secondary">Предложить тему</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Секция: Трудовая дисциплина -->
|
||
<section id="discipline" class="section">
|
||
<div class="section-header">
|
||
<h1>Трудовая дисциплина</h1>
|
||
<p class="section-subtitle">Обратная связь по рабочим процессам и коммуникациям</p>
|
||
</div>
|
||
|
||
<div class="discipline-info">
|
||
<p>Этот раздел предназначен для получения обратной связи по:</p>
|
||
<ul>
|
||
<li>Соблюдению рабочего графика</li>
|
||
<li>Понятности внутренних правил</li>
|
||
<li>Взаимодействию руководителя и сотрудника</li>
|
||
<li>Коммуникациям в команде</li>
|
||
<li>Рабочей нагрузке</li>
|
||
<li>Соблюдению договорённостей</li>
|
||
</ul>
|
||
<p class="info-note">⚠️ Персональные данные доступны только уполномоченным пользователям</p>
|
||
</div>
|
||
|
||
<button class="btn-primary" onclick="showSection('feedback')">Оставить обратную связь</button>
|
||
</section>
|
||
|
||
<!-- Секция: Автоматизация процессов -->
|
||
<section id="automation" class="section">
|
||
<div class="section-header">
|
||
<h1>Автоматизация процессов</h1>
|
||
<p class="section-subtitle">Сообщите, какой процесс можно сделать проще</p>
|
||
</div>
|
||
|
||
<form id="automationForm" class="automation-form">
|
||
<div class="form-group">
|
||
<label for="autoProcess">Название процесса</label>
|
||
<input type="text" id="autoProcess" placeholder="Например: согласование отпусков" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="autoDept">Подразделение</label>
|
||
<select id="autoDept" required>
|
||
<option value="">Выберите подразделение</option>
|
||
<option value="hr">HR</option>
|
||
<option value="it">IT</option>
|
||
<option value="finance">Финансы</option>
|
||
<option value="procurement">Закупки</option>
|
||
<option value="sales">Продажи</option>
|
||
<option value="support">Поддержка</option>
|
||
<option value="other">Другое</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="autoProblem">Текущая проблема</label>
|
||
<textarea id="autoProblem" rows="3" placeholder="Опишите, что не так..." required></textarea>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="autoSolution">Предлагаемое решение</label>
|
||
<textarea id="autoSolution" rows="3" placeholder="Как можно улучшить?"></textarea>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="autoEffect">Ожидаемый эффект</label>
|
||
<select id="autoEffect" required>
|
||
<option value="">Выберите эффект</option>
|
||
<option value="time">Экономия времени</option>
|
||
<option value="errors">Снижение количества ошибок</option>
|
||
<option value="cost">Снижение затрат</option>
|
||
<option value="convenience">Повышение удобства</option>
|
||
<option value="quality">Повышение качества</option>
|
||
<option value="other">Другое</option>
|
||
</select>
|
||
</div>
|
||
|
||
<button type="submit" class="btn-primary">Предложить автоматизацию</button>
|
||
</form>
|
||
</section>
|
||
|
||
<!-- Секция: Профиль -->
|
||
<section id="profile" class="section">
|
||
<div class="section-header">
|
||
<h1>Мой профиль</h1>
|
||
<p class="section-subtitle">Ваши данные и активность в системе</p>
|
||
</div>
|
||
|
||
<div class="profile-container">
|
||
<div class="profile-card">
|
||
<div class="profile-avatar">👤</div>
|
||
<h2 id="profileName">Сотрудник</h2>
|
||
<p id="profileDept" class="profile-dept">Подразделение</p>
|
||
<p id="profilePosition" class="profile-position">Должность</p>
|
||
<p id="profileTenure" class="profile-tenure">Стаж: —</p>
|
||
</div>
|
||
|
||
<div class="profile-stats">
|
||
<div class="stat-item">
|
||
<div class="stat-value" id="statReviews">0</div>
|
||
<div class="stat-label">Моих обращений</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-value" id="statIdeas">0</div>
|
||
<div class="stat-label">Моих идей</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-value" id="statSurveys">0</div>
|
||
<div class="stat-label">Опрошено</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="profile-history">
|
||
<h3>Мои обращения</h3>
|
||
<div id="profileHistory" class="history-list"></div>
|
||
</div>
|
||
|
||
<div id="adminPanel" class="admin-panel" style="display: none;">
|
||
<h3>🔐 Панель администратора</h3>
|
||
<div class="admin-permissions">
|
||
<div class="permission-item">
|
||
<span class="permission-icon">✅</span>
|
||
<span class="permission-text">Доступны все права администратора</span>
|
||
</div>
|
||
</div>
|
||
<div class="admin-actions">
|
||
<button class="admin-btn" onclick="alert('Управление пользователями')">👥 Пользователи</button>
|
||
<button class="admin-btn" onclick="alert('Настройки системы')">⚙️ Настройки</button>
|
||
<button class="admin-btn" onclick="alert('Журнал действий')">📋 Журнал</button>
|
||
<button class="admin-btn" onclick="exportAllData()">📥 Полная выгрузка</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Секция: Нематериальная мотивация -->
|
||
<section id="motivation" class="section">
|
||
<div class="section-header">
|
||
<h1>Нематериальная мотивация</h1>
|
||
<p class="section-subtitle">Признание заслуг и поощрение сотрудников</p>
|
||
</div>
|
||
|
||
<div class="motivation-grid">
|
||
<div class="motivation-card highlight">
|
||
<h3>🏆 Сотрудник месяца</h3>
|
||
<p>Лучший сотрудник по итогам месяца</p>
|
||
<div class="employee-badge" id="employeeOfMonth">
|
||
<div class="badge-avatar">👤</div>
|
||
<div class="badge-name">Алексей К.</div>
|
||
<div class="badge-dept">IT Департамент</div>
|
||
</div>
|
||
<button class="btn-secondary" onclick="nominateEmployee()">Номинировать</button>
|
||
</div>
|
||
|
||
<div class="motivation-card">
|
||
<h3>⭐ Благодарности</h3>
|
||
<p>Поблагодарите коллегу за помощь</p>
|
||
<button class="btn-secondary" onclick="showThankForm()">Отправить благодарность</button>
|
||
</div>
|
||
|
||
<div class="motivation-card">
|
||
<h3>🎖 Достижения</h3>
|
||
<p>Ваши награды и значки</p>
|
||
<button class="btn-secondary" onclick="loadAchievements()">Мои достижения</button>
|
||
</div>
|
||
|
||
<div class="motivation-card">
|
||
<h3>💡 Идея месяца</h3>
|
||
<p>Лучшая идея месяца</p>
|
||
<div class="idea-badge" id="ideaOfMonth">
|
||
<div class="idea-badge-title">Чат-бот для HR</div>
|
||
<div class="idea-badge-author">Сергей Л.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="thanks-wall" id="thanksWall">
|
||
<h2>Стена благодарностей</h2>
|
||
<div class="thanks-list" id="thanksList"></div>
|
||
</div>
|
||
|
||
<div id="thankForm" class="thank-form" style="display: none;">
|
||
<h3>Отправить благодарность</h3>
|
||
<form id="thankFormEl">
|
||
<div class="form-group">
|
||
<label for="thankTo">Кому</label>
|
||
<input type="text" id="thankTo" placeholder="ФИО сотрудника" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="thankReason">За что</label>
|
||
<textarea id="thankReason" rows="3" placeholder="Опишите, за что благодарите" required></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="thankType">Тип благодарности</label>
|
||
<select id="thankType" required>
|
||
<option value="help">За помощь в работе</option>
|
||
<option value="mentor">За наставничество</option>
|
||
<option value="initiative">За инициативу</option>
|
||
<option value="team">За командную работу</option>
|
||
<option value="other">Другое</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group checkbox-group">
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="thankAnonymous">
|
||
<span class="checkbox-text">Отправить анонимно</span>
|
||
</label>
|
||
</div>
|
||
<button type="submit" class="btn-primary">Отправить благодарность</button>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Секция: КПД (Коэффициент Полезного Действия) -->
|
||
<section id="kpi" class="section">
|
||
<div class="section-header">
|
||
<h1>КПД сотрудника</h1>
|
||
<p class="section-subtitle">Оценка эффективности и продуктивности</p>
|
||
</div>
|
||
|
||
<div class="kpi-employee-card">
|
||
<div class="kpi-employee-header">
|
||
<div class="kpi-avatar">👤</div>
|
||
<div>
|
||
<h2 id="kpiEmployeeName">Александр Иванов</h2>
|
||
<p class="kpi-dept">IT Департамент</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kpi-score">
|
||
<div class="kpi-circle">
|
||
<svg viewBox="0 0 36 36" class="kpi-svg">
|
||
<path d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#E5E7EB" stroke-width="2"/>
|
||
<path id="kpiCirclePath" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke="#4A90E2" stroke-width="2" stroke-dasharray="75, 100"/>
|
||
</svg>
|
||
<div class="kpi-value" id="kpiValue">75</div>
|
||
</div>
|
||
<div class="kpi-label">Общий КПД</div>
|
||
</div>
|
||
|
||
<div class="kpi-components">
|
||
<div class="kpi-component">
|
||
<div class="kpi-comp-label">Выполнение задач</div>
|
||
<div class="kpi-bar"><div class="kpi-bar-fill" style="width: 85%"></div></div>
|
||
<div class="kpi-comp-value">85%</div>
|
||
</div>
|
||
<div class="kpi-component">
|
||
<div class="kpi-comp-label">Соблюдение сроков</div>
|
||
<div class="kpi-bar"><div class="kpi-bar-fill" style="width: 78%"></div></div>
|
||
<div class="kpi-comp-value">78%</div>
|
||
</div>
|
||
<div class="kpi-component">
|
||
<div class="kpi-comp-label">Качество работы</div>
|
||
<div class="kpi-bar"><div class="kpi-bar-fill" style="width: 82%"></div></div>
|
||
<div class="kpi-comp-value">82%</div>
|
||
</div>
|
||
<div class="kpi-component">
|
||
<div class="kpi-comp-label">Инициативность</div>
|
||
<div class="kpi-bar"><div class="kpi-bar-fill" style="width: 65%"></div></div>
|
||
<div class="kpi-comp-value">65%</div>
|
||
</div>
|
||
<div class="kpi-component">
|
||
<div class="kpi-comp-label">Командная работа</div>
|
||
<div class="kpi-bar"><div class="kpi-bar-fill" style="width: 88%"></div></div>
|
||
<div class="kpi-comp-value">88%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kpi-dynamics">
|
||
<h3>Динамика КПД</h3>
|
||
<div class="kpi-chart">
|
||
<canvas id="kpiChartCanvas"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="kpi-goals">
|
||
<h3>Цели на следующий период</h3>
|
||
<form id="kpiGoalsForm">
|
||
<div class="form-group">
|
||
<label for="kpiGoal1">Цель 1</label>
|
||
<input type="text" id="kpiGoal1" placeholder="Например: завершить проект X до конца месяца">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="kpiGoal2">Цель 2</label>
|
||
<input type="text" id="kpiGoal2" placeholder="Например: пройти обучение по Y">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="kpiGoal3">Цель 3</label>
|
||
<input type="text" id="kpiGoal3" placeholder="Например: оптимизировать процесс Z">
|
||
</div>
|
||
<button type="submit" class="btn-primary">Сохранить цели</button>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Секция: Кадровый резерв -->
|
||
<section id="reserve" class="section">
|
||
<div class="section-header">
|
||
<h1>Кадровый резерв</h1>
|
||
<p class="section-subtitle">Программа развития и подготовки руководителей</p>
|
||
</div>
|
||
|
||
<div class="reserve-info">
|
||
<div class="reserve-banner">
|
||
<h2>🎯 Программа кадрового резерва</h2>
|
||
<p>Участвуйте в программе подготовки руководителей и получите возможность карьерного роста</p>
|
||
<button class="btn-primary" onclick="showReserveForm()">Подать заявку</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="reserve-requirements">
|
||
<h3>Требования для участия</h3>
|
||
<div class="requirements-grid">
|
||
<div class="requirement-card">
|
||
<div class="req-icon">📊</div>
|
||
<div class="req-title">Стаж работы</div>
|
||
<div class="req-desc">Не менее 2 лет в компании</div>
|
||
</div>
|
||
<div class="requirement-card">
|
||
<div class="req-icon">⭐</div>
|
||
<div class="req-title">Рейтинг</div>
|
||
<div class="req-desc">КПД не ниже 75%</div>
|
||
</div>
|
||
<div class="requirement-card">
|
||
<div class="req-icon">🎓</div>
|
||
<div class="req-title">Обучение</div>
|
||
<div class="req-desc">Пройденные курсы лидерства</div>
|
||
</div>
|
||
<div class="requirement-card">
|
||
<div class="req-icon">💡</div>
|
||
<div class="req-title">Инициативы</div>
|
||
<div class="req-desc">Реализованные проекты</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="reserve-program">
|
||
<h3>Этапы программы</h3>
|
||
<div class="stages-timeline">
|
||
<div class="stage">
|
||
<div class="stage-dot">1</div>
|
||
<div class="stage-content">
|
||
<h4>Отборочный этап</h4>
|
||
<p>Собеседование с HR, оценка компетенций</p>
|
||
</div>
|
||
</div>
|
||
<div class="stage">
|
||
<div class="stage-dot">2</div>
|
||
<div class="stage-content">
|
||
<h4>Обучение</h4>
|
||
<p>Курсы по управлению, лидерству, коммуникациям</p>
|
||
</div>
|
||
</div>
|
||
<div class="stage">
|
||
<div class="stage-dot">3</div>
|
||
<div class="stage-content">
|
||
<h4>Стажировка</h4>
|
||
<p>Практика под руководством наставника</p>
|
||
</div>
|
||
</div>
|
||
<div class="stage">
|
||
<div class="stage-dot">4</div>
|
||
<div class="stage-content">
|
||
<h4>Аттестация</h4>
|
||
<p>Финальная оценка и включение в резерв</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="reserve-participants">
|
||
<h3>Текущие участники программы</h3>
|
||
<div class="participants-list" id="participantsList">
|
||
<div class="participant-card">
|
||
<div class="participant-avatar">👤</div>
|
||
<div class="participant-info">
|
||
<div class="participant-name">Мария С.</div>
|
||
<div class="participant-dept">HR Департамент</div>
|
||
<div class="participant-stage">Этап: Обучение</div>
|
||
</div>
|
||
<div class="participant-progress">
|
||
<div class="progress-bar"><div class="progress-fill" style="width: 50%"></div></div>
|
||
<span>50%</span>
|
||
</div>
|
||
</div>
|
||
<div class="participant-card">
|
||
<div class="participant-avatar">👤</div>
|
||
<div class="participant-info">
|
||
<div class="participant-name">Дмитрий В.</div>
|
||
<div class="participant-dept">IT Департамент</div>
|
||
<div class="participant-stage">Этап: Стажировка</div>
|
||
</div>
|
||
<div class="participant-progress">
|
||
<div class="progress-bar"><div class="progress-fill" style="width: 75%"></div></div>
|
||
<span>75%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="reserveForm" class="reserve-form" style="display: none;">
|
||
<h3>Заявка на участие в кадровом резерве</h3>
|
||
<form id="reserveFormEl">
|
||
<div class="form-group">
|
||
<label for="reservePosition">Желаемая должность</label>
|
||
<input type="text" id="reservePosition" placeholder="Например: Руководитель отдела" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="reserveExperience">Опыт работы</label>
|
||
<textarea id="reserveExperience" rows="3" placeholder="Опишите ваш опыт и достижения" required></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="reserveMotivation">Мотивация</label>
|
||
<textarea id="reserveMotivation" rows="4" placeholder="Почему вы хотите участвовать в программе?" required></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="reserveSkills">Ключевые навыки</label>
|
||
<input type="text" id="reserveSkills" placeholder="Перечислите через запятую">
|
||
</div>
|
||
<button type="submit" class="btn-primary">Подать заявку</button>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Секция: Аналитика (HR/Руководители) -->
|
||
<section id="analytics" class="section">
|
||
<div class="section-header">
|
||
<h1>Аналитика</h1>
|
||
<p class="section-subtitle">Дэшборд для HR и руководителей</p>
|
||
</div>
|
||
|
||
<div class="analytics-filters">
|
||
<select id="analyticsPeriod">
|
||
<option value="week">За неделю</option>
|
||
<option value="month" selected>За месяц</option>
|
||
<option value="quarter">За квартал</option>
|
||
<option value="year">За год</option>
|
||
</select>
|
||
<select id="analyticsDept">
|
||
<option value="all">Все подразделения</option>
|
||
<option value="hr">HR</option>
|
||
<option value="it">IT</option>
|
||
<option value="finance">Финансы</option>
|
||
<option value="sales">Продажи</option>
|
||
</select>
|
||
<button class="btn-secondary" id="exportBtn" style="display: none;">📥 Выгрузить в Excel</button>
|
||
<button class="btn-secondary" id="exportBtnLite">📥 Выгрузить мои данные</button>
|
||
</div>
|
||
|
||
<div id="adminExportPanel" class="admin-export-panel" style="display: none;">
|
||
<h3>🔐 Экспорт данных (только для администратора)</h3>
|
||
<div class="export-options">
|
||
<button class="export-option-btn" onclick="exportToExcel('reviews')">
|
||
<span class="export-icon">📊</span>
|
||
<span>Отзывы сотрудников</span>
|
||
</button>
|
||
<button class="export-option-btn" onclick="exportToExcel('ideas')">
|
||
<span class="export-icon">💡</span>
|
||
<span>Идеи и предложения</span>
|
||
</button>
|
||
<button class="export-option-btn" onclick="exportToExcel('motivation')">
|
||
<span class="export-icon">🏆</span>
|
||
<span>Мотивация и благодарности</span>
|
||
</button>
|
||
<button class="export-option-btn" onclick="exportToExcel('kpi')">
|
||
<span class="export-icon">📈</span>
|
||
<span>КПД сотрудников</span>
|
||
</button>
|
||
<button class="export-option-btn" onclick="exportToExcel('reserve')">
|
||
<span class="export-icon">🎯</span>
|
||
<span>Кадровый резерв</span>
|
||
</button>
|
||
<button class="export-option-btn" onclick="exportToExcel('all')">
|
||
<span class="export-icon">📁</span>
|
||
<span>Полный отчёт (все листы)</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="analytics-grid">
|
||
<div class="analytics-card">
|
||
<h3>Общие показатели</h3>
|
||
<div class="analytics-kpi">
|
||
<div class="akpi-item">
|
||
<span class="akpi-label">Сотрудников</span>
|
||
<span class="akpi-value" id="akpiEmployees">0</span>
|
||
</div>
|
||
<div class="akpi-item">
|
||
<span class="akpi-label">Участников опросов</span>
|
||
<span class="akpi-value" id="akpiParticipants">0</span>
|
||
</div>
|
||
<div class="akpi-item">
|
||
<span class="akpi-label">Response rate</span>
|
||
<span class="akpi-value" id="akpiResponse">0%</span>
|
||
</div>
|
||
<div class="akpi-item">
|
||
<span class="akpi-label">Средняя оценка</span>
|
||
<span class="akpi-value" id="akpiAvgRating">0.0</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="analytics-card full-width">
|
||
<h3>Динамика индекса вовлечённости</h3>
|
||
<div class="chart-large">
|
||
<canvas id="engagementTrendCanvas"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="analytics-card">
|
||
<h3>Топ проблемных направлений</h3>
|
||
<div id="problemAreas" class="problem-list"></div>
|
||
</div>
|
||
|
||
<div class="analytics-card">
|
||
<h3>Идеи по категориям</h3>
|
||
<div id="ideasByCategory" class="category-list"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Модальное окно: Новая идея -->
|
||
<div id="ideaModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Предложить идею</h2>
|
||
<button class="modal-close" onclick="closeModal('ideaModal')">×</button>
|
||
</div>
|
||
<form id="ideaForm">
|
||
<div class="form-group">
|
||
<label for="ideaTitle">Название идеи</label>
|
||
<input type="text" id="ideaTitle" placeholder="Кратко опишите суть идеи" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="ideaProblem">Описание проблемы</label>
|
||
<textarea id="ideaProblem" rows="3" placeholder="Какую проблему решает идея?" required></textarea>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="ideaSolution">Предлагаемое решение</label>
|
||
<textarea id="ideaSolution" rows="4" placeholder="Подробно опишите ваше решение" required></textarea>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="ideaEffect">Ожидаемый эффект</label>
|
||
<textarea id="ideaEffect" rows="2" placeholder="Какой результат ожидается?"></textarea>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="ideaCategory">Категория</label>
|
||
<select id="ideaCategory" required>
|
||
<option value="">Выберите категорию</option>
|
||
<option value="process">Оптимизация процессов</option>
|
||
<option value="automation">Автоматизация</option>
|
||
<option value="cost">Снижение затрат</option>
|
||
<option value="quality">Повышение качества</option>
|
||
<option value="safety">Безопасность</option>
|
||
<option value="other">Другое</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="ideaDept">Подразделение</label>
|
||
<select id="ideaDept" required>
|
||
<option value="">Выберите подразделение</option>
|
||
<option value="hr">HR</option>
|
||
<option value="it">IT</option>
|
||
<option value="finance">Финансы</option>
|
||
<option value="procurement">Закупки</option>
|
||
<option value="sales">Продажи</option>
|
||
<option value="support">Поддержка</option>
|
||
<option value="other">Другое</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group checkbox-group">
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="ideaAnonymous">
|
||
<span class="checkbox-text">Опубликовать анонимно</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn-secondary" onclick="closeModal('ideaModal')">Отмена</button>
|
||
<button type="submit" class="btn-primary">Отправить идею</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="data.js"></script>
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|