|
{% extends "base.html" %} |
|
{% block title %}Личный кабинет{% endblock %} |
|
{% block content %} |
|
<div class="profile-container"> |
|
|
|
|
|
<div class="profile-header"> |
|
<div class="user-info"> |
|
<div class="user-avatar"> |
|
<img src="{{ url_for('static', filename='avatars/' ~ current_user.avatar) }}" alt="Avatar" |
|
class="avatar-img"> |
|
</div> |
|
<div class="user-details"> |
|
<h2>Логин: {{ current_user.username }}</h2> |
|
<p>Почта: {{ current_user.email }}</p> |
|
<a href="{{ url_for('edit_profile') }}" class="btn btn-primary edit-profile-btn"> |
|
<i class="fas fa-user-edit"></i> Редактировать профиль |
|
</a> |
|
</div> |
|
</div> |
|
<div class="stats-cards"> |
|
<div class="stat-card"> |
|
<div class="stat-icon"><i class="fas fa-chart-bar"></i></div> |
|
<div class="stat-content"> |
|
<h3>Всего анализов</h3> |
|
<p class="stat-value">{{ total_reports }}</p> |
|
</div> |
|
</div> |
|
<div class="stat-card"> |
|
<div class="stat-icon"><i class="fas fa-smile"></i></div> |
|
<div class="stat-content"> |
|
<h3>Преобладающая эмоция</h3> |
|
<p class="stat-value">{{ emotion_map.get(most_common_emotion, most_common_emotion) }}</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="reports-section"> |
|
<h3 class="section-title"><i class="fas fa-history"></i> История анализов</h3> |
|
|
|
{% if reports %} |
|
<div class="reports-list" id="reports-list"> |
|
{% set page_size = 6 %} |
|
{% set current_page = request.args.get('page', default='1') | int %} |
|
{% set start_index = (current_page - 1) * page_size %} |
|
{% set end_index = [start_index + page_size, reports|length] | min %} |
|
|
|
{% for report in reports[start_index:end_index] %} |
|
<div class="report-card"> |
|
<div class="report-header"> |
|
<span class="report-date"> |
|
{{ report['created_at'] if report['created_at'] is string else report['created_at'].strftime('%d.%m.%Y %H:%M') }} |
|
</span> |
|
<span class="report-emotion {{ report['emotion'] }}"> |
|
{{ emotion_map.get(report['emotion'], report['emotion']) }} |
|
</span> |
|
</div> |
|
<div class="report-content"> |
|
<p>{{ report['content'][:200] }}{% if report['content']|length > 200 %}...{% endif %}</p> |
|
</div> |
|
<div class="report-footer"> |
|
<div class="confidence-meter"> |
|
<div class="confidence-fill" style="width: {{ (report['confidence'] * 100)|round(1) }}%"></div> |
|
</div> |
|
<span class="confidence-value">{{ (report['confidence'] * 100)|round(1) }}%</span> |
|
</div> |
|
</div> |
|
{% endfor %} |
|
</div> |
|
|
|
|
|
{% if reports|length > page_size %} |
|
<div class="pagination"> |
|
{% set total_pages = (reports|length / page_size)|round(0, 'ceil')|int %} |
|
|
|
|
|
<a href="?page={{ current_page - 1 }}" class="pagination-btn {% if current_page == 1 %}disabled{% endif %}">« |
|
Назад</a> |
|
|
|
|
|
{% for i in range(1, total_pages + 1) %} |
|
<a href="?page={{ i }}" class="pagination-btn {% if current_page == i %}active{% endif %}">{{ i }}</a> |
|
{% endfor %} |
|
|
|
|
|
<a href="?page={{ current_page + 1 }}" |
|
class="pagination-btn {% if current_page >= total_pages %}disabled{% endif %}">Вперед »</a> |
|
</div> |
|
{% endif %} |
|
{% else %} |
|
<div class="empty-state"> |
|
<i class="fas fa-comment-slash"></i> |
|
<h4>У вас пока нет анализов</h4> |
|
<p>Начните использовать систему на главной странице</p> |
|
<a href="{{ url_for('index') }}" class="btn-primary"> |
|
<i class="fas fa-arrow-right"></i> Перейти к анализу |
|
</a> |
|
</div> |
|
{% endif %} |
|
</div> |
|
|
|
|
|
<div class="telegram-analysis-section"> |
|
<h3 class="section-title"><i class="fab fa-telegram"></i> Анализ Telegram чатов</h3> |
|
<div class="chat-import-section"> |
|
<form id="telegram-upload-form" enctype="multipart/form-data"> |
|
<div class="file-upload"> |
|
<label for="telegram-file" class="file-upload-btn"> |
|
<i class="fas fa-file-import"></i> Выбрать файл чата |
|
</label> |
|
<input type="file" id="telegram-file" accept=".json" required/> |
|
<div class="file-info" style="display: none;"> |
|
<span id="selected-file-name">Файл не выбран</span> |
|
<button type="button" id="clear-file" class="clear-file-btn"> |
|
<i class="fas fa-times"></i> |
|
</button> |
|
</div> |
|
<button type="submit" class="btn-primary mt-3"> |
|
<i class="fas fa-chart-bar"></i> Анализировать |
|
</button> |
|
</div> |
|
<p class="hint">Экспортируйте чат через Telegram Desktop (JSON format)</p> |
|
</form> |
|
|
|
</div> |
|
|
|
|
|
<div class="chart-header"> |
|
<h4><i class="fas fa-chart-line"></i> Изменение эмоционального фона</h4> |
|
<div class="time-filter"> |
|
<button class="time-btn active" data-range="week">Неделя</button> |
|
<button class="time-btn" data-range="month">Месяц</button> |
|
<button class="time-btn" data-range="year">Год</button> |
|
<button class="time-btn" data-range="all">Все время</button> |
|
</div> |
|
<div class="user-filter"> |
|
<label for="user-select" style="color: white;"><i class="fas fa-user-friends"></i> Участник:</label> |
|
<select id="user-select" class="form-control"> |
|
<option value="all">Все участники</option> |
|
</select> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="analysis-summary" class="analysis-summary"> |
|
<h4><i class="fas fa-lightbulb"></i> Автоматический анализ</h4> |
|
<ul id="summary-content"></ul> |
|
</div> |
|
|
|
|
|
<div class="chart-container" id="emotion-timeline"></div> |
|
|
|
|
|
<div class="chart-container" id="calendar-heatmap"></div> |
|
|
|
|
|
<div class="chart-row"> |
|
<div class="chart-col"> |
|
<h4><i class="fas fa-chart-pie"></i> Распределение эмоций</h4> |
|
<div class="chart-container" id="emotion-distribution-pie"></div> |
|
</div> |
|
<div class="chart-col"> |
|
<h4><i class="fas fa-percentage"></i> Статистика по эмоциям</h4> |
|
<div class="emotion-stats" id="emotion-distribution"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
|
|
<script src="https://cdn.plot.ly/plotly-2.24.1.min.js "></script> |
|
|
|
|
|
<script src="{{ url_for('static', filename='script.js') }}"></script> |
|
|
|
|
|
<script> |
|
const telegramFileInput = document.getElementById('telegram-file'); |
|
if (telegramFileInput) { |
|
telegramFileInput.addEventListener('change', function(e) { |
|
const fileName = e.target.files[0]?.name || 'Файл не выбран'; |
|
const selectedFileName = document.getElementById('selected-file-name'); |
|
const fileInfo = document.querySelector('.file-info'); |
|
|
|
if (selectedFileName) { |
|
selectedFileName.textContent = fileName; |
|
} |
|
if (fileInfo) { |
|
fileInfo.style.display = 'flex'; |
|
} |
|
}); |
|
} |
|
</script> |
|
|
|
<style> |
|
.edit-profile-btn { |
|
display: inline-flex; |
|
align-items: center; |
|
font-size: 0.85rem; |
|
padding: 5px 10px; |
|
border-radius: 5px; |
|
} |
|
|
|
.edit-profile-btn i { |
|
font-size: 0.9rem; |
|
margin-right: 6px; |
|
} |
|
|
|
.avatar-img { |
|
width: 100px; |
|
height: 100px; |
|
border-radius: 10%; |
|
object-fit: cover; |
|
} |
|
.detailed-analysis { |
|
margin-top: 10px; |
|
padding: 10px; |
|
background: rgba(255,255,255,0.05); |
|
border-radius: 8px; |
|
} |
|
|
|
.detailed-analysis-item { |
|
display: flex; |
|
justify-content: space-between; |
|
margin-bottom: 5px; |
|
} |
|
|
|
.emotion-bar { |
|
height: 8px; |
|
background: rgba(255,255,255,0.1); |
|
border-radius: 4px; |
|
margin-top: 3px; |
|
} |
|
|
|
.emotion-fill { |
|
height: 100%; |
|
border-radius: 4px; |
|
} |
|
|
|
.advice-box { |
|
margin-top: 10px; |
|
padding: 10px; |
|
background: rgba(74, 74, 232, 0.1); |
|
border-left: 3px solid var(--primary-color); |
|
font-style: italic; |
|
} |
|
|
|
.pagination { |
|
display: flex; |
|
justify-content: center; |
|
gap: 8px; |
|
margin-top: 20px; |
|
flex-wrap: wrap; |
|
} |
|
.pagination-btn { |
|
padding: 8px 12px; |
|
border-radius: 4px; |
|
background: #3c3c5a; |
|
color: white; |
|
text-decoration: none; |
|
transition: 0.2s; |
|
} |
|
.pagination-btn:hover:not(.disabled):not(.active) { |
|
background: #5a5a7e; |
|
} |
|
.pagination-btn.active { |
|
background: #6c63ff; |
|
font-weight: bold; |
|
color: #fff; |
|
} |
|
.pagination-btn.disabled { |
|
opacity: 0.5; |
|
pointer-events: none; |
|
} |
|
|
|
|
|
.chat-controls { |
|
margin: 15px 0; |
|
display: flex; |
|
gap: 10px; |
|
} |
|
|
|
.btn-danger { |
|
background-color: #d63031; |
|
color: white; |
|
border: none; |
|
padding: 8px 15px; |
|
border-radius: 4px; |
|
cursor: pointer; |
|
transition: background-color 0.2s; |
|
} |
|
|
|
.btn-danger:hover { |
|
background-color: #ff4757; |
|
} |
|
|
|
.report-emotion.anger { |
|
color: #d63031; |
|
} |
|
.report-emotion.joy { |
|
color: #00b894; |
|
} |
|
.report-emotion.sadness { |
|
color: #0984e3; |
|
} |
|
.report-emotion.surprise { |
|
color: #fdcb6e; |
|
} |
|
.report-emotion.fear { |
|
color: #a29bfe; |
|
} |
|
.report-emotion.neutral { |
|
color: #636e72; |
|
} |
|
|
|
.report-emotion.no_emotion { |
|
color: #636e72; |
|
} |
|
</style> |
|
|
|
{% endblock %} |