Админ-панель для профиля + полная адаптация под смартфоны

app.js

@@ -396,7 +396,35 @@ function loadProfile() {
       <div class="history-item-status">Статус: ${getStatusName(r.status)}</div>
     </div>
   `).join('') || '<p>Пока нет обращений</p>';
+  
+  // Панель администратора (видна только если isAdmin = true)
+  const adminPanel = document.getElementById('adminPanel');
+  if (adminPanel && profile.isAdmin) {
+    adminPanel.style.display = 'block';
   }
+}
+
+// Экспорт всех данных для админа
+function exportAllData() {
+  const data = {
+    reviews: appData.reviews,
+    ideas: appData.ideas,
+    motivation: appData.motivation,
+    kpi: appData.kpi,
+    reserve: appData.reserve
+  };
+  
+  const json = JSON.stringify(data, null, 2);
+  const blob = new Blob([json], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = 'pulse_admin_export_' + new Date().toISOString().split('T')[0] + '.json';
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+window.exportAllData = exportAllData;
 
 // Аналитика
 function loadAnalytics() {

data.js

@@ -43,7 +43,16 @@ const INITIAL_DATA = {
     name: 'Катипа',
     department: 'IT Департамент',
     position: 'Ведущий специалист',
-    tenure: '2 года 3 месяца'
+    tenure: '2 года 3 месяца',
+    isAdmin: true,
+    adminPermissions: [
+      'Просмотр всех отзывов',
+      'Редактирование статусов идей',
+      'Выгрузка отчётов в Excel',
+      'Управление пользователями',
+      'Доступ к аналитике по подразделениям',
+      'Изменение параметров системы'
+    ]
   },
   settings: {
     engagementIndex: 78,

index.html

@@ -410,6 +410,22 @@
           <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>
 

style.css

@@ -718,6 +718,66 @@ textarea {
   border-radius: 8px;
 }
 
+/* Admin Panel */
+.admin-panel {
+  background: linear-gradient(135deg, #1A3A52, #2C5282);
+  color: var(--white);
+  padding: 24px;
+  border-radius: 12px;
+  box-shadow: var(--shadow-lg);
+  margin-top: 24px;
+}
+
+.admin-panel h3 {
+  margin-bottom: 16px;
+  font-size: 20px;
+}
+
+.admin-permissions {
+  background: rgba(255,255,255,0.1);
+  padding: 16px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.permission-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.permission-icon {
+  font-size: 20px;
+}
+
+.permission-text {
+  font-size: 14px;
+  opacity: 0.95;
+}
+
+.admin-actions {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+}
+
+.admin-btn {
+  background: rgba(255,255,255,0.15);
+  color: var(--white);
+  border: 1px solid rgba(255,255,255,0.3);
+  padding: 12px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  transition: all 0.2s;
+}
+
+.admin-btn:hover {
+  background: rgba(255,255,255,0.25);
+  transform: translateY(-2px);
+}
+
 .history-item-header {
   display: flex;
   justify-content: space-between;
@@ -1351,41 +1411,317 @@ textarea {
   .header-content {
     flex-wrap: wrap;
     height: auto;
-    padding: 16px;
+    padding: 12px 16px;
-    gap: 16px;
+    gap: 12px;
+  }
+
+  .logo {
+    font-size: 20px;
+  }
+
+  .logo-icon {
+    font-size: 24px;
   }
 
   .nav {
     order: 3;
     width: 100%;
     overflow-x: auto;
+    padding-bottom: 8px;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .nav-link {
+    padding: 6px 12px;
+    font-size: 13px;
+  }
+
+  .user-btn {
+    padding: 6px 10px;
+  }
+
+  .user-name {
+    display: none;
   }
 
   .main {
-    padding: 20px 16px;
+    padding: 16px;
+  }
+
+  .section-header h1 {
+    font-size: 24px;
+  }
+
+  .section-subtitle {
+    font-size: 14px;
   }
 
   .kpi-grid {
     grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+  }
+
+  .kpi-card {
+    padding: 16px 12px;
+  }
+
+  .kpi-icon {
+    font-size: 24px;
   }
 
   .kpi-value {
-    font-size: 28px;
+    font-size: 24px;
+  }
+
+  .kpi-label {
+    font-size: 12px;
+  }
+
+  .kpi-trend {
+    font-size: 11px;
   }
 
   .charts-grid {
     grid-template-columns: 1fr;
   }
 
+  .chart-card {
+    padding: 16px;
+  }
+
+  .chart-card h3 {
+    font-size: 16px;
+  }
+
+  .chart-placeholder {
+    height: 200px;
+  }
+
   .profile-stats {
     grid-template-columns: 1fr;
   }
 
+  .stat-item {
+    padding: 16px;
+  }
+
+  .stat-value {
+    font-size: 28px;
+  }
+
   .form-row {
     grid-template-columns: 1fr;
   }
 
   .ideas-filters {
     overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .filter-btn {
+    padding: 6px 12px;
+    font-size: 13px;
+    white-space: nowrap;
+  }
+
+  .idea-card {
+    padding: 16px;
+  }
+
+  .idea-title {
+    font-size: 16px;
+  }
+
+  .idea-meta {
+    flex-direction: column;
+    gap: 4px;
+    font-size: 12px;
+  }
+
+  .idea-actions {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .vote-btn {
+    padding: 6px 12px;
+    font-size: 13px;
+  }
+
+  .feedback-container,
+  .automation-form,
+  .survey-container {
+    padding: 20px 16px;
+  }
+
+  .rating-star {
+    font-size: 28px;
+  }
+
+  .modal-content {
+    max-width: calc(100% - 32px);
+    max-height: calc(100vh - 64px);
+  }
+
+  .modal-header,
+  #ideaForm,
+  .modal-footer {
+    padding: 16px;
+  }
+
+  .adaptation-blocks,
+  .training-grid,
+  .motivation-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .kpi-employee-header {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .kpi-avatar {
+    font-size: 48px;
+  }
+
+  .kpi-circle {
+    width: 120px;
+    height: 120px;
+  }
+
+  .kpi-value {
+    font-size: 28px;
+  }
+
+  .kpi-component {
+    grid-template-columns: 1fr 60px 40px;
+    gap: 8px;
+  }
+
+  .kpi-comp-label {
+    font-size: 12px;
+  }
+
+  .stage {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .stage-dot {
+    width: 32px;
+    height: 32px;
+    font-size: 14px;
+  }
+
+  .participant-card {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .participant-progress {
+    width: 100%;
+  }
+
+  .requirements-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .admin-actions {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .analytics-filters {
+    flex-direction: column;
+  }
+
+  .analytics-filters select {
+    width: 100%;
+  }
+
+  .analytics-kpi {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .akpi-item {
+    padding: 12px;
+  }
+
+  .akpi-value {
+    font-size: 24px;
+  }
+
+  .chart-large {
+    height: 200px;
+  }
+
+  .thanks-wall {
+    padding: 16px;
+  }
+
+  .thank-card {
+    padding: 12px;
+  }
+
+  .thank-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .reserve-banner {
+    padding: 24px 16px;
+  }
+
+  .reserve-banner h2 {
+    font-size: 22px;
+  }
+
+  .reserve-banner p {
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 480px) {
+  .kpi-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .kpi-card {
+    padding: 16px;
+  }
+
+  .nav-link {
+    padding: 6px 10px;
+    font-size: 12px;
+  }
+
+  .section-header h1 {
+    font-size: 20px;
+  }
+
+  .btn-primary,
+  .btn-secondary {
+    padding: 10px 16px;
+    font-size: 14px;
+    width: 100%;
+  }
+
+  .idea-header {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .idea-status {
+    align-self: flex-start;
+  }
+
+  .admin-actions {
+    grid-template-columns: 1fr;
+  }
+
+  .admin-btn {
+    width: 100%;
   }
 }