diplomus / templates /profile.html
Arghet6's picture
Upload 44 files
6bcf797 verified
{% extends "base.html" %}
{% block title %}Личный кабинет{% endblock %}
{% block content %}
<div class="profile-container">
<!-- User Info -->
<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>
<!-- Reports History -->
<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 %}">&laquo;
Назад</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 %}">Вперед &raquo;</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>
<!-- Telegram Analysis Section -->
<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>
<!-- Plotly -->
<script src="https://cdn.plot.ly/plotly-2.24.1.min.js "></script>
<!-- Main Script -->
<script src="{{ url_for('static', filename='script.js') }}"></script>
<!-- File upload handler -->
<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;
}
/* В секции style в profile.html */
.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 %}