556 lines
25 KiB
HTML
556 lines
25 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="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>
|
||
</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">📥 Выгрузить в Excel</button>
|
||
</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>
|