Upload 9 files

.gitattributes

@@ -0,0 +1,3 @@
+static/avatars/38073be902884c20986765aa948ccb53_123.jpg filter=lfs diff=lfs merge=lfs -text
+static/avatars/be2c7651449642e4ae32b9eeeb073a06_123.jpg filter=lfs diff=lfs merge=lfs -text
+static/avatars/e98b2fefcf1f47eb91a49384f2127307_123.jpg filter=lfs diff=lfs merge=lfs -text

static/admin.css

@@ -0,0 +1,160 @@
+.admin-wrapper {
+    display: flex;
+    min-height: 100vh;
+}
+
+.admin-sidebar {
+    width: 250px;
+    background: #2c3e50;
+    color: white;
+    display: flex;
+    flex-direction: column;
+}
+
+.admin-brand {
+    padding: 20px;
+    font-size: 1.2rem;
+    font-weight: bold;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.admin-nav {
+    flex: 1;
+    padding: 10px 0;
+}
+
+.nav-item {
+    display: flex;
+    align-items: center;
+    padding: 10px 20px;
+    color: rgba(255, 255, 255, 0.8);
+    text-decoration: none;
+    transition: all 0.3s;
+}
+
+.nav-item:hover {
+    background: #34495e;
+    color: white;
+}
+
+.nav-item i {
+    margin-right: 10px;
+    width: 20px;
+    text-align: center;
+}
+
+.nav-divider {
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    margin: 10px 0;
+}
+
+.admin-user {
+    padding: 15px 20px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    display: flex;
+    align-items: center;
+}
+
+.admin-user i {
+    margin-right: 10px;
+    font-size: 1.2rem;
+}
+
+.admin-main {
+    flex: 1;
+    background-color: #f8f9fa;
+    padding: 20px;
+    overflow-y: auto;
+}
+
+.admin-container {
+    background: white;
+    border-radius: 5px;
+    padding: 20px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+}
+
+.admin-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.admin-header h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    display: flex;
+    align-items: center;
+}
+
+.admin-header h1 i {
+    margin-right: 10px;
+}
+
+.admin-actions {
+    display: flex;
+    gap: 10px;
+}
+
+.search-form {
+    width: 300px;
+}
+
+.filter-form {
+    width: 200px;
+}
+
+.stat-card {
+    display: flex;
+    align-items: center;
+    padding: 15px;
+    border-radius: 5px;
+    color: white;
+    margin-bottom: 20px;
+}
+
+.stat-icon {
+    font-size: 2rem;
+    margin-right: 15px;
+    opacity: 0.8;
+}
+
+.stat-info h3 {
+    margin: 0;
+    font-size: 1.8rem;
+    font-weight: bold;
+}
+
+.stat-info p {
+    margin: 0;
+    opacity: 0.8;
+}
+
+.text-truncate {
+    max-width: 200px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+    .admin-wrapper {
+        flex-direction: column;
+    }
+
+    .admin-sidebar {
+        width: 100%;
+    }
+
+    .admin-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 10px;
+    }
+
+    .search-form, .filter-form {
+        width: 100%;
+    }
+}

static/admin.js

@@ -0,0 +1,16 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Подтверждение удаления
+    document.querySelectorAll('.delete-btn').forEach(btn => {
+        btn.addEventListener('click', function(e) {
+            if (!confirm('Вы уверены, что хотите выполнить это действие?')) {
+                e.preventDefault();
+            }
+        });
+    });
+
+    // Инициализация tooltips
+    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+});

static/script.js

@@ -1,5 +1,6 @@
 document.addEventListener("DOMContentLoaded", () => {
     let mediaRecorder, audioChunks = [], audioStream, currentChatId = null;
+
     const recordBtn = document.getElementById("record-btn");
     const stopBtn = document.getElementById("stop-btn");
     const sendBtn = document.getElementById("send-btn");
@@ -13,37 +14,44 @@ document.addEventListener("DOMContentLoaded", () => {
     const fileName = document.getElementById("file-name");
     const clearFileBtn = document.getElementById("clear-file");
 
+    // Emotion Map (скопирован из profile.html)
+    const emotionMap = {
+        'joy': '😊 Радость',
+        'neutral': '😐 Нейтрально',
+        'anger': '😠 Злость',
+        'sadness': '😢 Грусть',
+        'surprise': '😲 Удивление'
+    };
+
     // Инициализация при загрузке
     initializeChats();
 
-function initializeChats() {
-    const savedChatId = localStorage.getItem('currentChatId');
-
-    fetch("/get_chats")
-        .then(response => response.json())
-        .then(chats => {
-            renderChatList(chats);
-
-
-            if (savedChatId && chats.some(c => c.chat_id === savedChatId)) {
-                loadChat(savedChatId);
-            }
-
-            else if (chats.length > 0) {
-                loadChat(chats[0].chat_id);
-            }
-
-            else {
+    function initializeChats() {
+        const savedChatId = localStorage.getItem('currentChatId');
+        fetch("/get_chats")
+            .then(response => response.json())
+            .then(chats => {
+                renderChatList(chats);
+                if (savedChatId && chats.some(c => c.chat_id === savedChatId)) {
+                    loadChat(savedChatId);
+                } else if (chats.length > 0) {
+                    loadChat(chats[0].chat_id);
+                } else {
+                    showEmptyChatUI();
+                }
+            })
+            .catch(error => {
+                console.error("Ошибка загрузки чатов:", error);
                 showEmptyChatUI();
-            }
-        })
-        .catch(error => {
-            console.error("Ошибка загрузки чатов:", error);
-            showEmptyChatUI();
-        });
-}
+            });
+    }
+
+    function showEmptyChatUI() {
+        if (chatBox) chatBox.innerHTML = '<div class="empty-chat">Нет активного чата</div>';
+    }
 
     function renderChatList(chats) {
+        if (!chatList) return;
         chatList.innerHTML = '';
         chats.forEach(chat => {
             const chatItem = document.createElement("div");
@@ -61,14 +69,11 @@ function initializeChats() {
                     <i class="fas fa-trash"></i>
                 </button>
             `;
-
-            // Обработчик клика по чату
             chatItem.querySelector('.chat-item-main').addEventListener('click', () => {
                 loadChat(chat.chat_id);
                 localStorage.setItem('currentChatId', chat.chat_id);
             });
 
-            // Обработчик удаления чата
             chatItem.querySelector('.delete-chat-btn').addEventListener('click', (e) => {
                 e.stopPropagation();
                 deleteChat(chat.chat_id);
@@ -85,10 +90,7 @@ function initializeChats() {
     }
 
     async function deleteChat(chatId) {
-        if (!confirm('Вы точно хотите удалить этот чат? Это действие нельзя отменить.')) {
-            return;
-        }
-
+        if (!confirm('Вы точно хотите удалить этот чат? Это действие нельзя отменить.')) return;
         try {
             const response = await fetch(`/delete_chat/${chatId}`, {
                 method: 'DELETE',
@@ -97,14 +99,13 @@ function initializeChats() {
                     'X-CSRFToken': getCSRFToken()
                 }
             });
-
             const result = await response.json();
-
             if (result.success) {
-                if (currentChatId === chatId) {
-                    startNewChat();
-                }
-                initializeChats();
+            if (currentChatId === chatId) {
+                chatBox.innerHTML = '<div class="empty-chat">Чат удалён</div>';
+                currentChatId = null;
+            }
+            initializeChats(); // Перезагружаем список чатов
             } else {
                 throw new Error(result.error || 'Ошибка при удалении чата');
             }
@@ -114,7 +115,12 @@ function initializeChats() {
         }
     }
 
-    newChatBtn.addEventListener("click", startNewChat);
+    function getCSRFToken() {
+        const meta = document.querySelector('meta[name="csrf-token"]');
+        return meta ? meta.content : '';
+    }
+
+    newChatBtn?.addEventListener("click", startNewChat);
 
     function startNewChat() {
         fetch("/start_chat", {
@@ -124,7 +130,9 @@ function initializeChats() {
         .then(response => response.json())
         .then(data => {
             currentChatId = data.chat_id;
-            currentChatTitle.textContent = data.title;
+if (currentChatTitle) {
+    currentChatTitle.textContent = data.title;
+}
             chatBox.innerHTML = '<div class="message bot-message">Привет! Отправьте текст или голосовое сообщение для анализа эмоций.</div>';
             initializeChats();
             localStorage.setItem('currentChatId', data.chat_id);
@@ -134,25 +142,22 @@ function initializeChats() {
 
     function loadChat(chatId) {
         fetch(`/load_chat/${chatId}`)
-        .then(response => response.json())
-        .then(data => {
-            if (data.error) throw new Error(data.error);
-
-            currentChatId = chatId;
-            currentChatTitle.textContent = data.title;
-            updateActiveChat(chatId);
-
-            chatBox.innerHTML = "";
-            data.messages.forEach(msg => {
-                appendMessage(msg.sender, msg.content);
+            .then(response => response.json())
+            .then(data => {
+                if (data.error) throw new Error(data.error);
+                currentChatId = chatId;
+                currentChatTitle.textContent = data.title;
+                updateActiveChat(chatId);
+                chatBox.innerHTML = "";
+                data.messages.forEach(msg => {
+                    appendMessage(msg.sender, msg.content);
+                });
+                localStorage.setItem('currentChatId', chatId);
+            })
+            .catch(error => {
+                console.error("Ошибка загрузки чата:", error);
+                appendMessage("bot", `❌ Ошибка: ${error.message}`);
             });
-
-            localStorage.setItem('currentChatId', chatId);
-        })
-        .catch(error => {
-            console.error("Ошибка загрузки чата:", error);
-            appendMessage("bot", `❌ Ошибка: ${error.message}`);
-        });
     }
 
     function updateActiveChat(chatId) {
@@ -161,19 +166,16 @@ function initializeChats() {
         });
     }
 
-    // Обработчики отправки сообщений
-    sendBtn.addEventListener("click", sendMessage);
-    userInput.addEventListener("keypress", (e) => {
+    sendBtn?.addEventListener("click", sendMessage);
+    userInput?.addEventListener("keypress", (e) => {
         if (e.key === "Enter") sendMessage();
     });
 
     async function sendMessage() {
-        const text = userInput.value.trim();
+        const text = userInput?.value.trim();
         if (!text || !currentChatId) return;
-
         appendAndSaveMessage("user", text);
         userInput.value = "";
-
         try {
             const response = await fetch("/analyze", {
                 method: "POST",
@@ -189,11 +191,15 @@ function initializeChats() {
     }
 
     // Обработчики аудио
-    audioFileInput.addEventListener("change", handleAudioUpload);
-    clearFileBtn.addEventListener("click", clearAudioFile);
+    if (audioFileInput) {
+        audioFileInput.addEventListener("change", handleAudioUpload);
+    }
+    if (clearFileBtn) {
+        clearFileBtn.addEventListener("click", clearAudioFile);
+    }
 
     function handleAudioUpload() {
-        const file = audioFileInput.files[0];
+        const file = audioFileInput?.files[0];
         if (file) {
             fileName.textContent = file.name;
             fileInfo.style.display = 'flex';
@@ -208,20 +214,16 @@ function initializeChats() {
 
     async function sendAudioFile(file) {
         if (!currentChatId) return;
-
         appendAndSaveMessage("user", "Загружен аудиофайл...");
-
         try {
             const formData = new FormData();
             formData.append("audio", file);
             formData.append("chat_id", currentChatId);
-
             const response = await fetch("/analyze_audio", {
                 method: "POST",
                 body: formData
             });
             const data = await response.json();
-
             if (data.transcribed_text) {
                 appendAndSaveMessage("user", `Распознанный текст: ${data.transcribed_text}`);
             }
@@ -233,25 +235,23 @@ function initializeChats() {
         }
     }
 
-    // Обработчики записи голоса
-    recordBtn.addEventListener("click", startRecording);
-    stopBtn.addEventListener("click", stopRecording);
+    // Запись голоса
+    if (recordBtn) recordBtn.addEventListener("click", startRecording);
+    if (stopBtn) stopBtn.addEventListener("click", stopRecording);
 
     async function startRecording() {
         try {
             audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
             mediaRecorder = new MediaRecorder(audioStream);
             audioChunks = [];
-
             mediaRecorder.ondataavailable = e => audioChunks.push(e.data);
             mediaRecorder.onstop = async () => {
                 const audioBlob = new Blob(audioChunks, { type: "audio/wav" });
                 sendAudioBlob(audioBlob);
             };
-
             mediaRecorder.start();
-            recordBtn.disabled = true;
-            stopBtn.disabled = false;
+            if (recordBtn) recordBtn.disabled = true;
+            if (stopBtn) stopBtn.disabled = false;
             appendMessage("user", "Запись начата...");
         } catch (error) {
             console.error("Ошибка записи:", error);
@@ -262,28 +262,24 @@ function initializeChats() {
     function stopRecording() {
         if (mediaRecorder?.state === "recording") {
             mediaRecorder.stop();
-            recordBtn.disabled = false;
-            stopBtn.disabled = true;
-            audioStream.getTracks().forEach(track => track.stop());
+            if (recordBtn) recordBtn.disabled = false;
+            if (stopBtn) stopBtn.disabled = true;
+            if (audioStream) audioStream.getTracks().forEach(track => track.stop());
         }
     }
 
     async function sendAudioBlob(audioBlob) {
         if (!currentChatId) return;
-
         appendAndSaveMessage("user", "Отправлено голосовое сообщение...");
-
         try {
             const formData = new FormData();
             formData.append("audio", audioBlob, "recording.wav");
             formData.append("chat_id", currentChatId);
-
             const response = await fetch("/analyze_audio", {
                 method: "POST",
                 body: formData
             });
             const data = await response.json();
-
             if (data.transcribed_text) {
                 appendAndSaveMessage("user", `Распознанный текст: ${data.transcribed_text}`);
             }
@@ -294,18 +290,18 @@ function initializeChats() {
         }
     }
 
-    // Вспомогательные функции
     function appendMessage(sender, text) {
         const message = document.createElement("div");
         message.className = `message ${sender}-message`;
         message.innerHTML = text;
-        chatBox.appendChild(message);
-        chatBox.scrollTop = chatBox.scrollHeight;
+        if (chatBox) {
+            chatBox.appendChild(message);
+            chatBox.scrollTop = chatBox.scrollHeight;
+        }
     }
 
     function appendAndSaveMessage(sender, text) {
         appendMessage(sender, text);
-
         if (currentChatId) {
             fetch("/save_message", {
                 method: "POST",
@@ -322,8 +318,402 @@ function initializeChats() {
         }
     }
 
-    function getCSRFToken() {
-        const meta = document.querySelector('meta[name="csrf-token"]');
-        return meta ? meta.content : '';
+    // Telegram анализ
+    document.getElementById('telegram-upload-form')?.addEventListener('submit', async function(e) {
+    e.preventDefault();
+    const fileInput = document.getElementById('telegram-file');
+    const file = fileInput.files[0];
+
+    if (!file) {
+        alert('Пожалуйста, выберите файл');
+        return;
     }
-});
+
+    try {
+        const formData = new FormData();
+        formData.append('file', file);
+
+        const response = await fetch('/analyze_telegram_chat', {
+            method: 'POST',
+            body: formData
+        });
+
+        const result = await response.json();
+
+        if (result.error) {
+            throw new Error(result.error);
+        }
+
+        alert('Анализ завершен успешно!');
+        updateTelegramAnalytics(); // Обновляем графики
+    } catch (error) {
+        console.error('Ошибка загрузки файла:', error);
+        alert(`Ошибка: ${error.message}`);
+    }
+});
+
+
+
+// Функция скользящего среднего
+function movingAverage(data, windowSize) {
+    const result = [];
+    for (let i = 0; i < data.length; i++) {
+        const start = Math.max(0, i - windowSize + 1);
+        const slice = data.slice(start, i + 1);
+        const avg = slice.reduce((sum, val) => sum + val, 0) / slice.length;
+        result.push(avg);
+    }
+    return result;
+}
+
+// Цвета эмоций
+function getEmotionColor(emotion) {
+    const colors = {
+        '😊 Радость': '#00b894',
+        '😢 Грусть': '#0984e3',
+        '😠 Злость': '#d63031',
+        '😲 Удивление': '#fdcb6e',
+        '😨 Страх': '#a29bfe',
+        '😐 Нейтрально': '#636e72'
+    };
+    return colors[emotion] || '#4a4ae8';
+}
+
+// Иконки эмоций
+function getEmotionIcon(emotion) {
+    const icons = {
+        '😊 Радость': 'fa-smile',
+        '😢 Грусть': 'fa-sad-tear',
+        '😠 Злость': 'fa-angry',
+        '😲 Удивление': 'fa-surprise',
+        '😨 Страх': 'fa-flushed',
+        '😐 Нейтрально': 'fa-meh'
+    };
+    return icons[emotion] || 'fa-comment';
+}
+
+// Основная функция анализа Telegram
+// Основная функция анализа Telegram
+async function updateTelegramAnalytics(range = 'month') {
+    try {
+        const response = await fetch('/get_telegram_analysis');
+        const analyses = await response.json();
+        if (!analyses || analyses.length === 0) {
+            document.getElementById('emotion-timeline').innerHTML =
+                '<div class="empty-state"><i class="fas fa-comment-slash"></i><p>Нет данных для отображения</p></div>';
+            document.getElementById('emotion-distribution').innerHTML = '';
+            return;
+        }
+
+        const allData = analyses.flatMap(a => JSON.parse(a.data));
+        const emotionMap = {
+            'joy': '😊 Радость',
+            'sadness': '😢 Грусть',
+            'anger': '😠 Злость',
+            'surprise': '😲 Удивление',
+            'fear': '😨 Страх',
+            'no_emotion': '😐 Нейтрально'
+        };
+
+        // Фильтрация по пользователю
+        const userSelect = document.getElementById('user-select');
+        const selectedUser = userSelect?.value;
+        let filteredData = allData;
+        if (selectedUser && selectedUser !== 'all') {
+            filteredData = allData.filter(d => d.from === selectedUser);
+        }
+
+        const processedData = filteredData.map(d => ({
+            emotion: emotionMap[d.emotion] || d.emotion,
+            from: d.from,
+            text: d.text,
+            date: new Date(d.timestamp),
+            confidence: d.confidence
+        }));
+
+        // --- Блок подготовки графиков ---
+        const groupByTime = (date, range) => {
+            const d = new Date(date);
+            if (range === 'week') {
+                d.setHours(0, 0, 0, 0);
+                d.setDate(d.getDate() - d.getDay());
+                return d;
+            } else if (range === 'month') {
+                return new Date(d.getFullYear(), d.getMonth(), 1);
+            } else if (range === 'year') {
+                return new Date(d.getFullYear(), 0, 1);
+            }
+            return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+        };
+
+        const groupedData = {};
+        processedData.forEach(d => {
+            const timeKey = groupByTime(d.date, range).getTime();
+            if (!groupedData[timeKey]) {
+                groupedData[timeKey] = {
+                    date: new Date(timeKey),
+                    emotions: {}
+                };
+            }
+            if (!groupedData[timeKey].emotions[d.emotion]) {
+                groupedData[timeKey].emotions[d.emotion] = {
+                    count: 0,
+                    totalConfidence: 0
+                };
+            }
+            groupedData[timeKey].emotions[d.emotion].count++;
+            groupedData[timeKey].emotions[d.emotion].totalConfidence += d.confidence;
+        });
+
+        const timeKeys = Object.keys(groupedData).sort();
+        const emotions = [...new Set(processedData.map(d => d.emotion))];
+        const traces = emotions.map(emotion => {
+            const x = [];
+            const y = [];
+            const customdata = [];
+            timeKeys.forEach(key => {
+                const dataPoint = groupedData[key];
+                if (dataPoint.emotions[emotion]) {
+                    x.push(dataPoint.date);
+                    y.push(dataPoint.emotions[emotion].count);
+                    customdata.push({
+                        emotion: emotion,
+                        avgConfidence: (dataPoint.emotions[emotion].totalConfidence /
+                                        dataPoint.emotions[emotion].count).toFixed(2)
+                    });
+                } else {
+                    x.push(dataPoint.date);
+                    y.push(0);
+                    customdata.push(null);
+                }
+            });
+
+            return {
+                x: x,
+                y: y,
+                name: emotion,
+                type: 'scatter',
+                mode: 'lines+markers',
+                line: { shape: 'spline' },
+                marker: { color: getEmotionColor(emotion), size: 6 },
+                fill: 'tonexty',
+                fillcolor: `${getEmotionColor(emotion)}7F`,
+                customdata: customdata,
+                hovertemplate:
+                    '<b>%{x|%d %b %Y}</b><br>' +
+                    'Эмоция: %{fullData.name}<br>' +
+                    'Сообщений: %{y}<br>' +
+                    'Средняя уверенность: %{customdata.avgConfidence}<extra></extra>'
+            };
+        });
+
+        Plotly.newPlot('emotion-timeline', traces, {
+            title: false,
+            plot_bgcolor: 'rgba(0,0,0,0)',
+            paper_bgcolor: 'rgba(0,0,0,0)',
+            font: { color: 'white' },
+            xaxis: {
+                title: 'Дата',
+                tickformat: range === 'year' ? '%Y' : range === 'month' ? '%b %Y' : '%d %b',
+                gridcolor: 'rgba(255,255,255,0.1)'
+            },
+            yaxis: {
+                title: 'Количество сообщений',
+                gridcolor: 'rgba(255,255,255,0.1)'
+            },
+            hovermode: 'closest',
+            legend: {
+                orientation: 'h',
+                y: -0.2
+            },
+            margin: { t: 0, b: 80 }
+        });
+
+        // Тепловая карта
+        const dates = [...new Set(processedData.map(d => d.date.toDateString()))];
+        const emotionLabels = Object.values(emotionMap);
+        const z = emotionLabels.map(e => dates.map(d =>
+            processedData.filter(msg => msg.date.toDateString() === d && msg.emotion === e).length
+        ));
+
+        Plotly.newPlot('calendar-heatmap', [{
+            type: 'heatmap',
+            z: z,
+            x: dates,
+            y: emotionLabels,
+            colorscale: [
+                [0, '#2d3436'],   // Темный фон
+                [0.5, '#6c5ce7'],
+                [1, '#00b894']
+            ],
+            showscale: true,
+            colorbar: {
+                title: 'Частота',
+                titleside: 'top',
+                tickmode: 'array',
+                tickvals: [0, Math.max(...z.flat())],
+                ticktext: ['Мало', 'Много'],
+                ticks: 'outside'
+            }
+        }], {
+            title: 'Тепловая карта эмоций по дням',
+            xaxis: {
+                title: 'Дата',
+                tickangle: -45
+            },
+            yaxis: {
+                title: 'Эмоции',
+                automargin: true
+            },
+            margin: { t: 30, r: 30, l: 80, b: 80 }
+        });
+
+        // Автоматический анализ
+        const totalMessages = processedData.length;
+        const emotionCounts = {};
+        processedData.forEach(d => {
+            emotionCounts[d.emotion] = (emotionCounts[d.emotion] || 0) + 1;
+        });
+        const sorted = Object.entries(emotionCounts).sort((a, b) => b[1] - a[1]);
+        const dominant = sorted[0];
+
+        const sadnessPeaks = processedData
+            .filter(d => d.emotion === '😢 Грусть')
+            .reduce((acc, d) => {
+                const key = d.date.toDateString();
+                acc[key] = (acc[key] || 0) + 1;
+                return acc;
+            }, {});
+        const sadPeak = Object.entries(sadnessPeaks).sort((a, b) => b[1] - a[1])[0];
+
+        document.getElementById('summary-content').innerHTML = `
+            <ul style="color: white;">
+                <li>💡 Преобладает: ${dominant[0]} (${((dominant[1]/totalMessages)*100).toFixed(1)}%)</li>
+                <li>📉 Пик грусти: ${sadPeak[0]} (${sadPeak[1]} сообщений)</li>
+            </ul>
+        `;
+
+        // Круговая диаграмма и статистика
+        const pieLabels = Object.keys(emotionCounts);
+        const pieValues = Object.values(emotionCounts);
+
+        Plotly.newPlot('emotion-distribution-pie', [{
+            labels: pieLabels,
+            values: pieValues,
+            type: 'pie',
+            textinfo: 'label+percent',
+            hoverinfo: 'label+value+percent',
+            marker: {
+                colors: pieLabels.map(e => getEmotionColor(e))
+            },
+            textfont: {
+                color: 'white'
+            },
+            hole: 0.4,
+            rotation: 45
+        }], {
+            title: false,
+            plot_bgcolor: 'rgba(0,0,0,0)',
+            paper_bgcolor: 'rgba(0,0,0,0)',
+            font: { color: 'white' },
+            showlegend: false,
+            margin: { t: 0, b: 0, l: 0, r: 0 }
+        });
+
+        // Статистика по эмоциям — 2 строки по 3 эмоции
+        const statsHTML = pieLabels.slice(0, 6).map((emotion, i) => {
+            const percentage = ((pieValues[i] / totalMessages) * 100).toFixed(1);
+            return `
+                <div class="emotion-stat">
+                    <div class="emotion-label" style="color: ${getEmotionColor(emotion)}">
+                        <span>${emotion.replace(/[\u{1F600}-\u{1F64F}]/gu, '')}</span>
+                    </div>
+                    <div class="confidence-bar">
+                        <div class="confidence-fill"
+                             style="width: ${percentage}%;
+                                    background: ${getEmotionColor(emotion)};"></div>
+                    </div>
+                    <div class="confidence-value">${percentage}%</div>
+                </div>`;
+        }).join('');
+
+        document.getElementById('emotion-distribution').innerHTML = statsHTML;
+
+        // Адаптация сетки на фронтенде
+        const statsContainer = document.getElementById('emotion-distribution');
+        if (statsContainer) {
+            statsContainer.style.display = 'grid';
+            statsContainer.style.gridTemplateColumns = 'repeat(3, 1fr)';
+            statsContainer.style.gap = '15px';
+        }
+
+        // --- Выбор пользователя ---
+        populateUserSelect(processedData);
+
+    } catch (error) {
+        console.error('Ошибка обновления аналитики:', error);
+        document.getElementById('emotion-timeline').innerHTML =
+            `<div class="empty-state"><i class="fas fa-exclamation-triangle"></i><p>Ошибка загрузки данных: ${error.message}</p></div>`;
+    }
+}
+
+// Глобальная переменная для хранения списка пользователей
+let telegramUsers = [];
+
+function populateUserSelect(processedData) {
+    const userSelect = document.getElementById('user-select');
+    if (!userSelect) return;
+
+    const users = [...new Set(processedData.map(d => d.from))];
+
+    // Если пользователи не изменились — ничего не делаем
+    if (JSON.stringify(users.sort()) === JSON.stringify(telegramUsers.sort())) return;
+
+    telegramUsers = users;
+    userSelect.innerHTML = '<option value="all">Все участники</option>';
+
+    users.forEach(user => {
+        const option = document.createElement('option');
+        option.value = user;
+        option.textContent = user;
+        userSelect.appendChild(option);
+    });
+
+    // Добавляем обработчик только один раз
+    if (!userSelect.dataset.listenerAdded) {
+        userSelect.addEventListener('change', () => {
+            updateTelegramAnalytics(document.querySelector('.time-btn.active')?.dataset.range || 'month');
+        });
+        userSelect.dataset.listenerAdded = 'true';
+    }
+}
+document.querySelectorAll('.time-btn').forEach(button => {
+    button.addEventListener('click', function () {
+        // Удаляем класс 'active' у всех кнопок
+        document.querySelectorAll('.time-btn').forEach(btn => btn.classList.remove('active'));
+        // Добавляем класс 'active' текущей кнопке
+        this.classList.add('active');
+
+        // Получаем диапазон времени из атрибута data-range
+        const range = this.getAttribute('data-range');
+
+        // Вызываем функцию обновления графиков с новым диапазоном
+        updateTelegramAnalytics(range);
+    });
+});
+
+// Проверяем, есть ли сохранённый активный временной интервал в localStorage или просто ставим 'month'
+window.addEventListener('load', () => {
+    const activeTimeBtn = document.querySelector('.time-btn.active');
+    if (activeTimeBtn) {
+        const range = activeTimeBtn.dataset.range || 'month';
+        updateTelegramAnalytics(range);
+    } else {
+        updateTelegramAnalytics('month');
+    }
+});
+// Инициализация при загрузке страницы
+if (window.location.pathname.includes('/profile')) {
+    updateTelegramAnalytics();
+}
+    });

static/styles.css

@@ -28,11 +28,71 @@ body {
     color: var(--light-text);
     line-height: 1.6;
 }
-
+h2, label{
+color: #fff;
+}
 /* Контейнер приложения */
 .app-container {
     display: flex;
     min-height: 100vh;
+    position: relative;
+}
+
+/* Предупреждения */
+.alert-text {
+    color:  #fff;
+}
+
+body::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  background: transparent;
+}
+
+.enhanced-alert {
+    padding: 20px 25px !important;
+    font-size: 1.1rem !important;
+    border: 2px solid rgba(255,255,255,0.3) !important;
+    backdrop-filter: blur(5px);
+    display: flex !important;
+    align-items: center;
+    gap: 15px;
+}
+
+.flash-info.enhanced-alert {
+    background: rgba(74, 74, 232, 0.9) !important;
+    color: #fff !important;
+    border-color: var(--primary-color) !important;
+}
+
+.alert-icon {
+    font-size: 1.5rem;
+    min-width: 30px;
+}
+
+.alert-icon .fa-info-circle {
+    color: #ff0000;
+}
+
+.flash-close {
+    background: none !important;
+    color: rgba(255,255,255,0.8) !important;
+    padding: 0 !important;
+}
+
+.flash-close:hover {
+    color: #ff0000 !important;
+}
+
+/* Анимация появления */
+@keyframes pulse-alert {
+    0% { transform: translateY(20px); opacity: 0; }
+    80% { transform: translateY(-5px); }
+    100% { transform: translateY(0); opacity: 1; }
+}
+
+.enhanced-alert {
+    animation: pulse-alert 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 /* Боковая панель */
@@ -43,6 +103,14 @@ body {
     flex-direction: column;
     padding: 20px 0;
     border-right: 1px solid rgba(255, 255, 255, 0.1);
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 280px;
+    z-index: 1000;
+    overflow-y: auto;
+    transition: transform 0.3s ease;
 }
 
 .sidebar-header {
@@ -50,6 +118,16 @@ body {
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
+.logo-link {
+    text-decoration: none !important;
+    border-bottom: none !important;
+}
+
+.logo-link:hover,
+.logo-link:focus {
+    box-shadow: none !important;
+}
+
 .sidebar-header h2 {
     display: flex;
     align-items: center;
@@ -150,10 +228,156 @@ body {
 }
 
 /* Основное содержимое */
+/* Welcome Page Styles */
+.welcome-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    padding: 2rem;
+}
+
+.welcome-content {
+    max-width: 1200px;
+    text-align: center;
+}
+
+.welcome-header h1 {
+    font-size: 3.5rem;
+    margin-bottom: 1rem;
+    color: var(--light-text);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+}
+
+.tagline {
+    font-size: 1.5rem;
+    color: rgba(255, 255, 255, 0.8);
+    margin-bottom: 3rem;
+}
+
+.welcome-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2rem;
+    margin-bottom: 4rem;
+}
+
+.feature-card {
+    background: rgba(255, 255, 255, 0.05);
+    padding: 2rem;
+    border-radius: var(--border-radius);
+    transition: all 0.3s ease;
+}
+
+.feature-card:hover {
+    transform: translateY(-10px);
+    box-shadow: var(--box-shadow);
+}
+
+.feature-icon {
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 1.5rem;
+    background: rgba(74, 74, 232, 0.2);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2rem;
+}
+
+.feature-card h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    color: var(--light-text);
+}
+
+.feature-card p {
+    color: rgba(255, 255, 255, 0.7);
+    line-height: 1.6;
+}
+
+.auth-buttons {
+    display: flex;
+    gap: 1.5rem;
+    justify-content: center;
+}
+
+.btn-secondary {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.8rem;
+    padding: 1rem 2rem;
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    border: none;
+    border-radius: var(--border-radius);
+    text-decoration: none;
+    transition: all 0.3s ease;
+}
+
+.btn-secondary:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: translateY(-2px);
+}
+
+@media (max-width: 768px) {
+    .welcome-header h1 {
+        font-size: 2.5rem;
+    }
+
+    .tagline {
+        font-size: 1.2rem;
+    }
+
+    .auth-buttons {
+        flex-direction: column;
+    }
+}
+
 .app-main {
     flex: 1;
     padding: 30px;
     background: linear-gradient(135deg, #1e1e2f, #2a2a40);
+        margin-left: 280px;
+    min-height: 100vh;
+}
+
+@media (max-width: 992px) {
+    .app-sidebar {
+        transform: translateX(-100%);
+    }
+
+    .app-main {
+        margin-left: 0;
+    }
+
+    .app-container.sidebar-open .app-sidebar {
+        transform: translateX(0);
+    }
+}
+
+.mobile-menu-toggle {
+    display: none;
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    z-index: 1100;
+    padding: 10px 15px;
+    background: rgba(74, 74, 232, 0.9);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 1.1rem;
+}
+
+@media (max-width: 992px) {
+    .mobile-menu-toggle {
+        display: block;
+    }
 }
 
 .flash-messages {
@@ -209,6 +433,17 @@ body {
 }
 
 /* Стили для чата */
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+    100% { transform: scale(1); }
+}
+
+.recording {
+    animation: pulse 1.2s infinite ease-in-out !important;
+    box-shadow: 0 0 20px rgba(214, 48, 49, 0.6) !important;
+}
+
 .chat-container {
     display: flex;
     height: calc(100vh - 60px);
@@ -345,6 +580,7 @@ body {
 }
 
 .welcome-message h4 {
+    color: rgba(255, 255, 255, 0.7);
     margin-bottom: 10px;
     font-size: 1.5rem;
 }
@@ -479,6 +715,17 @@ input[type="file"] {
     cursor: pointer;
 }
 
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.1); }
+    100% { transform: scale(1); }
+}
+
+.record-btn.recording {
+    animation: pulse 1.2s infinite;
+    box-shadow: 0 0 20px rgba(214, 48, 49, 0.5);
+}
+
 .record-controls {
     display: flex;
     gap: 10px;
@@ -493,7 +740,7 @@ input[type="file"] {
     justify-content: center;
     border: none;
     cursor: pointer;
-    transition: all 0.3s ease;
+    transition: all 0.3s ease, animation 0.3s ease;
 }
 
 .record-btn {
@@ -833,4 +1080,740 @@ input[type="file"] {
 
 .delete-chat-btn:hover {
     color: #ff4444;
+}
+
+.chat-import-section {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--border-radius);
+    padding: 20px;
+    margin-bottom: 30px;
+    border: 1px dashed rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.chat-import-section:hover {
+    border-color: var(--primary-color);
+    background: rgba(74, 74, 232, 0.05);
+}
+
+.import-box {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    margin-top: 15px;
+}
+
+.import-chat-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    padding: 12px;
+    background: linear-gradient(135deg, var(--secondary-color), #5d4ae8);
+    color: white;
+    border: none;
+    border-radius: var(--border-radius);
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.import-chat-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3);
+}
+
+.hint {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.6);
+    text-align: center;
+    margin-top: 10px;
+}
+
+/* Стили для графиков аналитики */
+.analytics-section {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--border-radius);
+    padding: 25px;
+    margin-bottom: 30px;
+}
+
+.chart-container {
+    position: relative;
+    height: 300px;
+    margin: 20px 0;
+}
+
+.emotion-stats {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: minmax(min-content, max-content);
+    gap: 15px;
+    margin-top: 25px;
+}
+
+.emotion-stat {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--border-radius);
+    padding: 15px;
+    transition: all 0.3s ease;
+}
+
+.emotion-stat:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+
+.emotion-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 500;
+    margin-bottom: 10px;
+    font-size: 0.95rem;
+}
+
+.emotion-count {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.7);
+    margin-bottom: 8px;
+}
+
+.confidence-bar {
+    height: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+    margin: 10px 0;
+    overflow: hidden;
+}
+
+.confidence-fill {
+    height: 100%;
+    border-radius: 3px;
+}
+
+.confidence-value {
+    font-size: 0.8rem;
+    text-align: right;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+/* Цвета для разных эмоций */
+.emotion-stat[data-emotion="joy"] .confidence-fill,
+.emotion-stat[data-emotion="happy"] .confidence-fill {
+    background: linear-gradient(90deg, #00b894, #00cec9);
+}
+
+.emotion-stat[data-emotion="sadness"] .confidence-fill,
+.emotion-stat[data-emotion="sad"] .confidence-fill {
+    background: linear-gradient(90deg, #0984e3, #6c5ce7);
+}
+
+.emotion-stat[data-emotion="anger"] .confidence-fill,
+.emotion-stat[data-emotion="angry"] .confidence-fill {
+    background: linear-gradient(90deg, #d63031, #e17055);
+}
+
+.emotion-stat[data-emotion="neutral"] .confidence-fill {
+    background: linear-gradient(90deg, #636e72, #b2bec3);
+}
+
+.emotion-stat[data-emotion="surprise"] .confidence-fill {
+    background: linear-gradient(90deg, #fdcb6e, #e17055);
+}
+
+/* Стили для боковой панели чатов */
+.import-chat-sidebar {
+    padding: 15px;
+    margin: 10px 0;
+    background: rgba(74, 74, 232, 0.1);
+    border-radius: var(--border-radius);
+    text-align: center;
+}
+
+.import-chat-sidebar label {
+    display: block;
+    padding: 10px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: var(--border-radius);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 0.9rem;
+}
+
+.import-chat-sidebar label:hover {
+    background: rgba(74, 74, 232, 0.2);
+}
+
+/* Адаптивные стили */
+@media (max-width: 768px) {
+    .emotion-stats {
+        grid-template-columns: 1fr;
+    }
+
+    .chart-container {
+        height: 250px;
+    }
+}
+
+@media (max-width: 576px) {
+    .analytics-section,
+    .chat-import-section {
+        padding: 15px;
+    }
+
+    .import-chat-btn {
+        padding: 10px;
+        font-size: 0.9rem;
+    }
+}
+
+/* Telegram Analysis Styles */
+.telegram-analysis-section .section-title,
+.telegram-analysis-section h4 {
+    color: var(--light-text) !important;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    padding-bottom: 10px;
+    margin-bottom: 20px;
+}
+
+.telegram-analysis-section {
+    margin-top: 40px;
+    padding: 25px;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: var(--border-radius);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+#emotion-distribution {
+    background: rgba(255,255,255,0.05);
+    border-radius: var(--border-radius);
+    padding: 15px;
+    margin-top: 15px;
+    max-height: 400px; /* Фиксированная высота */
+    overflow-y: auto; /* Скролл при переполнении */
+}
+
+.emotion-stat {
+    background: rgba(255,255,255,0.03);
+    border-radius: 8px;
+    padding: 12px;
+    margin: 8px 0;
+    border-left: 4px solid transparent;
+    transition: all 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.emotion-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.95rem;
+    color: var(--light-text);
+}
+
+.emotion-label i {
+    font-size: 1.2rem !important; /* Увеличиваем иконки */
+    width: 25px; /* Фиксированная ширина */
+    color: inherit !important; /* Цвет из JS */
+}
+
+.confidence-bar {
+    height: 6px;
+    background: rgba(255,255,255,0.1);
+    border-radius: 3px;
+}
+
+.confidence-value {
+    text-align: right;
+    font-size: 0.85rem;
+    color: rgba(255,255,255,0.8);
+}
+
+.chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+    gap: 15px;
+}
+
+.time-filter {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.time-btn {
+    padding: 6px 12px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 20px;
+    color: rgba(255, 255, 255, 0.7);
+    cursor: pointer;
+    font-size: 0.85rem;
+    transition: all 0.3s ease;
+}
+
+.time-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.time-btn.active {
+    background: rgba(74, 74, 232, 0.3);
+    border-color: var(--primary-color);
+    color: white;
+}
+
+.chart-row {
+    gap: 20px;
+    margin-top: 25px;
+}
+
+.chart-col {
+    background: rgba(255, 255, 255, 0.03);
+    padding: 20px;
+    border-radius: var(--border-radius);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.chart-col h4 {
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+@media (max-width: 768px) {
+    .chart-row {
+        flex-direction: column;
+    }
+
+    .chart-col {
+        width: 100%;
+    }
+}
+
+.clear-file-btn {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.6);
+    cursor: pointer;
+    padding: 0 5px;
+}
+
+.clear-file-btn:hover {
+    color: var(--danger-color);
+}
+
+#emotion-timeline {
+    height: 400px;
+    margin: 20px 0;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: var(--border-radius);
+}
+
+.emotion-stat {
+    background: rgba(255, 255, 255, 0.05);
+    padding: 15px;
+    margin: 10px 0;
+    border-radius: var(--border-radius);
+    transition: transform 0.3s ease;
+}
+
+.emotion-stat:hover {
+    transform: translateY(-3px);
+}
+
+.emotion-label {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 0.95rem;
+    margin-bottom: 8px;
+}
+
+.confidence-bar {
+    height: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+    margin: 10px 0;
+}
+
+.confidence-fill {
+    height: 100%;
+    border-radius: 3px;
+    transition: width 0.5s ease;
+}
+
+.file-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--border-radius);
+}
+
+#selected-file-name {
+    font-size: 0.9rem;
+    max-width: 250px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.message-preview-panel {
+    position: fixed;
+    right: 20px;
+    top: 100px;
+    width: 300px;
+    background: #1e1e2f;
+    padding: 15px;
+    border-radius: 8px;
+    color: white;
+    z-index: 100;
+    box-shadow: 0 0 10px rgba(0,0,0,0.5);
+}
+
+.analysis-summary {
+    margin-top: 20px;
+    padding: 15px;
+    background: #2c2c3e;
+    border-radius: 8px;
+}
+
+.user-filter {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 10px;
+}
+
+/* Auth Styles */
+.auth-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: linear-gradient(135deg, var(--darker-bg), var(--dark-bg));
+    padding: 20px;
+}
+
+.auth-card {
+    width: 100%;
+    max-width: 450px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    box-shadow: var(--box-shadow);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.auth-header {
+    padding: 25px;
+    background: rgba(74, 74, 232, 0.1);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    text-align: center;
+}
+
+.auth-header h3 {
+    color: var(--light-text);
+    font-size: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.auth-body {
+    padding: 25px;
+}
+
+.form-group {
+    margin-bottom: 20px;
+}
+
+.form-label {
+    display: block;
+    margin-bottom: 8px;
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 0.95rem;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.form-input {
+    width: 100%;
+    padding: 12px 15px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--border-radius);
+    color: var(--light-text);
+    font-size: 0.95rem;
+    transition: all 0.3s ease;
+}
+
+.form-input:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    background: rgba(255, 255, 255, 0.15);
+    box-shadow: 0 0 0 3px rgba(74, 74, 232, 0.2);
+}
+
+.form-error {
+    color: var(--danger-color);
+    font-size: 0.85rem;
+    margin-top: 5px;
+}
+
+.btn-auth {
+    width: 100%;
+    padding: 14px;
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+    color: white;
+    border: none;
+    border-radius: var(--border-radius);
+    font-size: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}
+
+.btn-auth:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 15px rgba(74, 74, 232, 0.4);
+}
+
+.auth-footer {
+    text-align: center;
+    margin-top: 20px;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 0.95rem;
+}
+
+.auth-link {
+    color: var(--primary-color);
+    text-decoration: none;
+    transition: all 0.3s ease;
+}
+
+.auth-link:hover {
+    color: var(--secondary-color);
+    text-decoration: underline;
+}
+
+/* Responsive */
+@media (max-width: 576px) {
+    .auth-card {
+        border-radius: 0;
+        border: none;
+    }
+
+    .auth-container {
+        padding: 0;
+        align-items: flex-start;
+    }
+}
+
+.analysis-result-card {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--border-radius);
+    padding: 15px;
+    margin-top: 10px;
+    border-left: 4px solid transparent;
+    transition: transform 0.3s ease;
+}
+
+.analysis-result-card:hover {
+    transform: translateY(-5px);
+}
+
+.analysis-result-card.joy {
+    border-color: var(--success-color);
+}
+
+.analysis-result-card.anger {
+    border-color: var(--danger-color);
+}
+
+.analysis-result-card.sadness {
+    border-color: var(--info-color);
+}
+
+.analysis-result-card.neutral {
+    border-color: var(--warning-color);
+}
+
+.analysis-result-card.fear {
+    border-color: #a29bfe;
+}
+
+.analysis-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.emotion-label {
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+
+.confidence-bar-container {
+    height: 8px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.confidence-bar {
+    height: 100%;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.confidence-fill {
+    height: 100%;
+    transition: width 0.5s ease;
+}
+
+.confidence-fill[joy] {
+    background: linear-gradient(90deg, #00b894, #00cec9);
+}
+
+.confidence-fill[anger] {
+    background: linear-gradient(90deg, #d63031, #e17055);
+}
+
+.confidence-fill[sadness] {
+    background: linear-gradient(90deg, #0984e3, #6c5ce7);
+}
+
+.confidence-fill[neutral] {
+    background: linear-gradient(90deg, #fdcb6e, #ffeaa7);
+}
+
+.confidence-fill[fear] {
+    background: linear-gradient(90deg, #a29bfe, #6c5ce7);
+}
+
+.confidence-percent {
+    margin-top: 8px;
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+/* Admin Styles */
+.admin-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+.admin-stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1.5rem;
+    margin: 2rem 0;
+}
+
+.stat-card {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: var(--border-radius);
+    padding: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    transition: transform 0.3s ease;
+}
+
+.stat-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+.stat-icon {
+    width: 50px;
+    height: 50px;
+    background: rgba(74, 74, 232, 0.2);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    color: var(--primary-color);
+}
+
+.stat-content h3 {
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.7);
+    margin-bottom: 0.5rem;
+}
+
+.stat-value {
+    font-size: 1.8rem;
+    font-weight: 600;
+    color: white;
+}
+
+.stat-change {
+    font-size: 0.8rem;
+    color: var(--success-color);
+}
+
+.btn-admin {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1rem 1.5rem;
+    background: rgba(74, 74, 232, 0.2);
+    border: 1px solid var(--primary-color);
+    border-radius: var(--border-radius);
+    color: white;
+    text-decoration: none;
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+    transition: all 0.3s ease;
+}
+
+.btn-admin:hover {
+    background: rgba(74, 74, 232, 0.4);
+    transform: translateY(-2px);
+}
+
+/* Таблицы в админке */
+.admin-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1.5rem 0;
+}
+
+.admin-table th, .admin-table td {
+    padding: 1rem;
+    text-align: left;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.admin-table th {
+    background: rgba(74, 74, 232, 0.2);
+    color: var(--primary-color);
+}
+
+.admin-table tr:hover {
+    background: rgba(255, 255, 255, 0.03);
+}
+
+.admin-actions {
+    margin: 2rem 0;
 }