https://www.pandoraburo.ru/dnevnik-emotciy-i-refreyming
Дневник эмоций и рефрейминг
<html lang="ru">
<head>
<meta charset="UTF-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<title>? Дневник эмоций и рефрейминг</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', system-ui, sans-serif;
background: #0f0e1a;
color: #e0e0f0;
min-height: 100vh;
padding: 20px;
display: flex;
justify-content: center;
align-items: flex-start;
}
.container {
max-width: 700px;
width: 100%;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 32px;
padding: 24px 22px;
border: 1px solid rgba(255, 255, 255, 0.06);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
margin-bottom: 30px;
}
/* === дисклеймер === */
.disclaimer {
background: rgba(255, 200, 100, 0.08);
border-left: 3px solid #f0b34b;
padding: 12px 16px;
border-radius: 12px;
font-size: 0.8rem;
color: #c8b89a;
margin-bottom: 20px;
line-height: 1.4;
}
.disclaimer strong {
color: #f0d080;
}
/* === заголовок === */
.header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.header h1 {
font-size: 1.6rem;
background: linear-gradient(135deg, #b8a5ff, #7f6cf0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.header .badge {
font-size: 0.65rem;
background: rgba(255, 255, 255, 0.04);
padding: 4px 12px;
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.35);
}
/* === вкладки === */
.tabs {
display: flex;
gap: 6px;
margin: 16px 0 18px;
background: rgba(255, 255, 255, 0.02);
border-radius: 16px;
padding: 4px;
}
.tab-btn {
flex: 1;
padding: 10px 6px;
background: transparent;
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: 0.25s;
font-family: inherit;
}
.tab-btn:hover {
background: rgba(255, 255, 255, 0.04);
color: #c0b0ff;
}
.tab-btn.active {
background: rgba(108, 92, 231, 0.18);
color: #d4c8ff;
box-shadow: 0 0 20px rgba(108, 92, 231, 0.05);
}
/* === панели === */
.tab-panel {
display: none;
animation: fadeIn 0.3s ease;
}
.tab-panel.active {
display: block;
}
@keyframes fadeIn {
0% {
opacity: 0.4;
transform: translateY(6px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* === форма === */
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
font-size: 0.8rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 4px;
letter-spacing: 0.3px;
}
.form-group select,
.form-group input,
.form-group textarea {
width: 100%;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
color: #f0f0ff;
font-size: 0.95rem;
font-family: inherit;
transition: 0.2s;
}
.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: #7f6cf0;
background: rgba(255, 255, 255, 0.06);
}
.form-group textarea {
resize: vertical;
min-height: 80px;
}
.mood-selector {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.mood-btn {
padding: 8px 16px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 40px;
cursor: pointer;
color: rgba(255, 255, 255, 0.5);
font-size: 0.9rem;
transition: 0.2s;
font-family: inherit;
}
.mood-btn:hover {
background: rgba(255, 255, 255, 0.05);
}
.mood-btn.active {
background: rgba(108, 92, 231, 0.15);
border-color: #7f6cf0;
color: #d4c8ff;
}
.btn-primary {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, #6c5ce7, #a29bfe);
border: none;
border-radius: 16px;
color: #fff;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: 0.2s;
font-family: inherit;
}
.btn-primary:hover {
transform: scale(1.01);
box-shadow: 0 6px 30px rgba(108, 92, 231, 0.2);
}
.btn-primary:active {
transform: scale(0.97);
}
.btn-secondary {
padding: 10px 16px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 40px;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
font-size: 0.8rem;
transition: 0.2s;
font-family: inherit;
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.06);
color: #fff;
}
.flex-row {
display: flex;
gap: 10px;
align-items: center;
}
/* === список записей === */
.entry-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 14px;
max-height: 400px;
overflow-y: auto;
padding-right: 4px;
}
.entry-item {
background: rgba(255, 255, 255, 0.02);
padding: 14px 16px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.04);
}
.entry-item .meta {
display: flex;
justify-content: space-between;
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.3);
margin-bottom: 4px;
}
.entry-item .mood {
font-weight: 600;
color: #b8a5ff;
}
.entry-item .thought {
color: #d0d0e8;
margin: 4px 0;
font-size: 0.9rem;
}
.entry-item .reframe {
color: #8cd4b0;
font-size: 0.85rem;
border-top: 1px solid rgba(255, 255, 255, 0.04);
padding-top: 6px;
margin-top: 4px;
}
.empty-state {
color: rgba(255, 255, 255, 0.25);
text-align: center;
padding: 30px 0;
font-size: 0.95rem;
}
/* === график === */
.chart-container {
background: rgba(255, 255, 255, 0.02);
border-radius: 16px;
padding: 12px;
margin-top: 16px;
border: 1px solid rgba(255, 255, 255, 0.04);
}
.chart-container canvas {
width: 100% !important;
height: auto !important;
max-height: 180px;
}
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
margin-top: 12px;
}
.stat-box {
background: rgba(255, 255, 255, 0.02);
border-radius: 14px;
padding: 12px 8px;
text-align: center;
}
.stat-box .num {
font-size: 1.6rem;
font-weight: 700;
color: #c8b8ff;
}
.stat-box .label {
font-size: 0.65rem;
color: rgba(255, 255, 255, 0.3);
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* === рефрейминг-помощник === */
.reframe-steps {
background: rgba(255, 255, 255, 0.02);
border-radius: 16px;
padding: 16px;
margin-top: 12px;
border: 1px solid rgba(255, 255, 255, 0.04);
}
.reframe-steps .step {
margin-bottom: 14px;
}
.reframe-steps .step-title {
font-weight: 600;
color: #b8a5ff;
font-size: 0.85rem;
}
.reframe-steps .step-desc {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.6);
margin: 2px 0 6px;
}
.reframe-steps textarea {
width: 100%;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
color: #e8e8ff;
font-family: inherit;
font-size: 0.9rem;
resize: vertical;
min-height: 60px;
}
.reframe-steps textarea:focus {
outline: none;
border-color: #6c5ce7;
}
/* === экспорт === */
.export-row {
display: flex;
gap: 10px;
margin-top: 16px;
}
.export-row .btn-secondary {
flex: 1;
text-align: center;
}
/* === скролл === */
::-webkit-scrollbar {
width: 4px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.02);
}
::-webkit-scrollbar-thumb {
background: #6c5ce7;
border-radius: 10px;
}
/* адаптив */
@media (max-width: 500px) {
.container {
padding: 16px 12px;
}
.header h1 {
font-size: 1.2rem;
}
.stats-grid {
grid-template-columns: 1fr 1fr;
}
.mood-selector {
gap: 6px;
}
.mood-btn {
padding: 6px 12px;
font-size: 0.8rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="disclaimer">
<strong>? Обратите внимание:</strong> Этот инструмент предназначен для <strong>самопомощи и самонаблюдения</strong> и не является заменой профессиональной психотерапии или медицинской диагностики. При наличии серьёзных эмоциональных трудностей, суицидальных мыслей или других острых состояний, пожалуйста, обратитесь к квалифицированному специалисту или позвоните на горячую линию доверия.
</div>
<div class="header">
<h1>? Дневник эмоций</h1>
<span class="badge">рефрейминг</span>
</div>
<div class="tabs">
<button class="tab-btn active" data-tab="tab1">? Запись</button>
<button class="tab-btn" data-tab="tab2">? Рефрейминг</button>
<button class="tab-btn" data-tab="tab3">? Статистика</button>
</div>
<div class="tab-panel active" id="tab1">
<div class="form-group">
<label>Как вы себя чувствуете?</label>
<div class="mood-selector" id="moodSelector">
<button class="mood-btn" data-value="1">? Плохо</button>
<button class="mood-btn" data-value="2">? Тревожно</button>
<button class="mood-btn" data-value="3">? Нейтрально</button>
<button class="mood-btn" data-value="4">? Хорошо</button>
<button class="mood-btn" data-value="5">? Отлично</button>
</div>
</div>
<div class="form-group">
<label>Какая автоматическая мысль приходит в голову?</label>
<textarea id="thoughtInput" placeholder="Например: «Я никогда не справлюсь с этой задачей»"></textarea>
</div>
<div class="form-group">
<label>Дополнительный контекст (необязательно)</label>
<input type="text" id="contextInput" placeholder="Что произошло? Где? С кем?" />
</div>
<button class="btn-primary" id="saveEntryBtn">➕ Сохранить запись</button>
<div style="margin-top: 20px; display: flex; gap: 8px; flex-wrap: wrap;">
<button class="btn-secondary" id="exportCsvBtn">? Экспорт CSV</button>
<button class="btn-secondary" id="clearAllBtn" style="color: #f08080;">? Очистить все</button>
</div>
<div id="entryListContainer" style="margin-top: 18px;">
<div style="display: flex; justify-content: space-between; font-size: 0.7rem; color: rgba(255,255,255,0.2); padding: 0 4px;">
<span>Последние записи</span>
<span id="entryCount">0</span>
</div>
<div class="entry-list" id="entryList">
<div class="empty-state">Нет записей. Начните вести дневник прямо сейчас.</div>
</div>
</div>
</div>
<div class="tab-panel" id="tab2">
<div class="disclaimer" style="border-left-color: #6c5ce7; background: rgba(108,92,231,0.05);">
<strong>? Когнитивный рефрейминг</strong> — это техника, помогающая взглянуть на ситуацию под другим углом. Ниже вы можете выбрать одну из своих записей и пройти пошаговое переосмысление.
</div>
<div class="form-group">
<label>Выберите запись для работы</label>
<select id="reframeSelect"></select>
</div>
<div class="reframe-steps" id="reframeSteps">
<div class="step">
<div class="step-title">Шаг 1. Факты</div>
<div class="step-desc">Какие объективные факты подтверждают эту мысль? А какие опровергают?</div>
<textarea id="reframeFacts" placeholder="Например: «Факты против: у меня уже есть успешный опыт в похожих задачах»"></textarea>
</div>
<div class="step">
<div class="step-title">Шаг 2. Альтернативы</div>
<div class="step-desc">Какие ещё возможны объяснения этой ситуации, кроме самого пессимистичного?</div>
<textarea id="reframeAlternatives" placeholder="Например: «Возможно, я просто устал, и это влияет на мою уверенность»"></textarea>
</div>
<div class="step">
<div class="step-title">Шаг 3. Новое убеждение</div>
<div class="step-desc">Сформулируйте более реалистичную и поддерживающую мысль.</div>
<textarea id="reframeNew" placeholder="Например: «Я справлюсь, если разобью задачу на шаги и сделаю перерыв»"></textarea>
</div>
<button class="btn-primary" id="saveReframeBtn" style="margin-top: 8px;">? Сохранить рефрейминг</button>
</div>
<div id="reframeMessage" style="margin-top: 12px; font-size: 0.9rem; color: #8cd4b0;"></div>
</div>
<div class="tab-panel" id="tab3">
<div class="stats-grid">
<div class="stat-box">
<div class="num" id="statTotal">0</div>
<div class="label">Всего записей</div>
</div>
<div class="stat-box">
<div class="num" id="statAvgMood">—</div>
<div class="label">Среднее настроение</div>
</div>
<div class="stat-box">
<div class="num" id="statReframed">0</div>
<div class="label">Переосмыслено</div>
</div>
</div>
<div class="chart-container">
<canvas id="moodChart" width="400" height="180"></canvas>
</div>
<div style="margin-top: 12px; font-size: 0.75rem; color: rgba(255,255,255,0.25); text-align: center;">
График показывает динамику настроения по дням (1–5).
</div>
<div class="disclaimer" style="margin-top: 16px; border-left-color: #f0b34b;">
? Статистика основана на ваших записях. Помните, что настроение изменчиво, и не стоит делать поспешных выводов. Если вы замечаете устойчивое снижение, обратитесь к специалисту.
</div>
</div>
<div class="disclaimer" style="margin-top: 22px; border-left-color: #7f6cf0; background: rgba(108,92,231,0.04);">
<strong>⚠️ Важно:</strong> Все данные сохраняются только в вашем браузере (localStorage). Никакая информация не передаётся на сервер. Регулярно делайте резервные копии через экспорт CSV.
</div>
</div>
<script>
(function() {
'use strict';
// ====== Хранилище ======
const STORAGE_KEY = 'reframe_entries';
function loadEntries() {
try {
return JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
} catch {
return [];
}
}
function saveEntries(entries) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(entries));
}
// ====== Текущие данные ======
let entries = loadEntries();
// ====== DOM refs ======
const moodBtns = document.querySelectorAll('.mood-btn');
const thoughtInput = document.getElementById('thoughtInput');
const contextInput = document.getElementById('contextInput');
const saveBtn = document.getElementById('saveEntryBtn');
const entryList = document.getElementById('entryList');
const entryCount = document.getElementById('entryCount');
const exportCsvBtn = document.getElementById('exportCsvBtn');
const clearAllBtn = document.getElementById('clearAllBtn');
// Рефрейминг
const reframeSelect = document.getElementById('reframeSelect');
const reframeFacts = document.getElementById('reframeFacts');
const reframeAlternatives = document.getElementById('reframeAlternatives');
const reframeNew = document.getElementById('reframeNew');
const saveReframeBtn = document.getElementById('saveReframeBtn');
const reframeMessage = document.getElementById('reframeMessage');
// Статистика
const statTotal = document.getElementById('statTotal');
const statAvgMood = document.getElementById('statAvgMood');
const statReframed = document.getElementById('statReframed');
const moodChartCanvas = document.getElementById('moodChart');
// ====== Выбор настроения ======
let selectedMood = 3; // по умолчанию нейтрально
moodBtns.forEach(btn => {
btn.addEventListener('click', () => {
moodBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
selectedMood = parseInt(btn.dataset.value, 10);
});
});
// активируем нейтральный по умолчанию
document.querySelector('.mood-btn[data-value="3"]')?.classList.add('active');
// ====== Сохранение записи ======
function saveEntry() {
const thought = thoughtInput.value.trim();
if (!thought) {
alert('Пожалуйста, напишите мысль, чтобы сохранить запись.');
return;
}
const context = contextInput.value.trim();
const entry = {
id: Date.now() + '_' + Math.random().toString(36).slice(2, 6),
date: new Date().toISOString(),
mood: selectedMood,
thought: thought,
context: context,
reframe: null // { facts, alternatives, newBelief }
};
entries.unshift(entry);
saveEntries(entries);
renderEntries();
updateStatsAndChart();
thoughtInput.value = '';
contextInput.value = '';
// сброс выбора настроения на нейтральный
moodBtns.forEach(b => b.classList.remove('active'));
document.querySelector('.mood-btn[data-value="3"]')?.classList.add('active');
selectedMood = 3;
// обновить выпадающий список рефрейминга
populateReframeSelect();
reframeMessage.textContent = '✅ Запись сохранена. Перейдите на вкладку "Рефрейминг" для работы с ней.';
}
saveBtn.addEventListener('click', saveEntry);
// ====== Рендер записей ======
function renderEntries() {
if (entries.length === 0) {
entryList.innerHTML = `<div class="empty-state">Нет записей. Начните вести дневник прямо сейчас.</div>`;
entryCount.textContent = '0';
return;
}
let html = '';
const show = entries.slice(0, 10); // последние 10
show.forEach(e => {
const moodEmojis = ['?', '?', '?', '?', '?'];
const moodText = ['Плохо', 'Тревожно', 'Нейтрально', 'Хорошо', 'Отлично'];
const dateStr = new Date(e.date).toLocaleString('ru-RU', { hour12: false });
html += `
<div class="entry-item">
<div class="meta">
<span>${dateStr}</span>
<span class="mood">${moodEmojis[e.mood-1] || '?'} ${moodText[e.mood-1] || 'Нейтрально'}</span>
</div>
<div class="thought">${escapeHtml(e.thought)}</div>
${e.context ? `<div style="font-size:0.8rem; color:rgba(255,255,255,0.3);">? ${escapeHtml(e.context)}</div>` : ''}
${e.reframe ? `<div class="reframe">? ${escapeHtml(e.reframe.newBelief || 'Переосмыслено')}</div>` : ''}
</div>
`;
});
entryList.innerHTML = html;
entryCount.textContent = entries.length;
}
function escapeHtml(str) {
const div = document.createElement('div');
div.textContent = str;
return div.innerHTML;
}
// ====== Популяция выпадающего списка для рефрейминга ======
function populateReframeSelect() {
const select = reframeSelect;
select.innerHTML = '';
// только те, у которых нет рефрейминга
const available = entries.filter(e => !e.reframe);
if (available.length === 0) {
select.innerHTML = `<option value="">— все записи уже переосмыслены —</option>`;
return;
}
available.forEach((e, index) => {
const opt = document.createElement('option');
opt.value = e.id;
const preview = e.thought.length > 40 ? e.thought.slice(0, 40) + '…' : e.thought;
opt.textContent = `${new Date(e.date).toLocaleDateString()} — ${preview}`;
select.appendChild(opt);
});
// автоматически загрузить первую
if (select.options.length > 0) {
select.selectedIndex = 0;
loadReframeData(select.value);
}
}
// ====== Загрузка данных для рефрейминга ======
function loadReframeData(id) {
const entry = entries.find(e => e.id === id);
if (!entry) {
reframeFacts.value = '';
reframeAlternatives.value = '';
reframeNew.value = '';
return;
}
reframeFacts.value = entry.reframe?.facts || '';
reframeAlternatives.value = entry.reframe?.alternatives || '';
reframeNew.value = entry.reframe?.newBelief || '';
reframeMessage.textContent = `Работаем с мыслью: "${entry.thought}"`;
}
reframeSelect.addEventListener('change', (e) => {
loadReframeData(e.target.value);
});
// ====== Сохранить рефрейминг ======
saveReframeBtn.addEventListener('click', () => {
const id = reframeSelect.value;
if (!id) {
reframeMessage.textContent = '⚠️ Нет доступных записей для рефрейминга.';
return;
}
const facts = reframeFacts.value.trim();
const alternatives = reframeAlternatives.value.trim();
const newBelief = reframeNew.value.trim();
if (!newBelief) {
reframeMessage.textContent = '⚠️ Пожалуйста, сформулируйте новое убеждение (шаг 3).';
return;
}
const entry = entries.find(e => e.id === id);
if (!entry) return;
entry.reframe = { facts, alternatives, newBelief };
saveEntries(entries);
renderEntries();
updateStatsAndChart();
populateReframeSelect();
reframeMessage.textContent = '✅ Рефрейминг сохранён! Отлично, вы сделали важный шаг.';
});
// ====== Статистика и график ======
function updateStatsAndChart() {
const total = entries.length;
statTotal.textContent = total;
const reframed = entries.filter(e => e.reframe).length;
statReframed.textContent = reframed;
if (total === 0) {
statAvgMood.textContent = '—';
drawChart([]);
return;
}
const sumMood = entries.reduce((acc, e) => acc + e.mood, 0);
const avg = (sumMood / total).toFixed(1);
statAvgMood.textContent = avg;
// группировка по дням
const days = {};
entries.forEach(e => {
const day = new Date(e.date).toISOString().split('T')[0];
if (!days[day]) days[day] = [];
days[day].push(e.mood);
});
const sortedDays = Object.keys(days).sort();
const chartData = sortedDays.map(day => {
const moods = days[day];
return moods.reduce((a, b) => a + b, 0) / moods.length;
});
drawChart(chartData);
}
function drawChart(data) {
const canvas = moodChartCanvas;
const ctx = canvas.getContext('2d');
const rect = canvas.parentElement.getBoundingClientRect();
const width = canvas.width = Math.min(400, rect.width - 24) || 360;
const height = canvas.height = 140;
ctx.clearRect(0, 0, width, height);
if (data.length < 2) {
ctx.fillStyle = 'rgba(255,255,255,0.15)';
ctx.font = '14px sans-serif';
ctx.textAlign = 'center';
ctx.fillText('Недостаточно данных для графика', width / 2, height / 2 + 6);
return;
}
const padding = { top: 20, bottom: 20, left: 10, right: 10 };
const chartWidth = width - padding.left - padding.right;
const chartHeight = height - padding.top - padding.bottom;
const minVal = 1;
const maxVal = 5;
const range = maxVal - minVal;
const xStep = chartWidth / (data.length - 1);
ctx.beginPath();
ctx.strokeStyle = '#8ab4ff';
ctx.lineWidth = 2.5;
ctx.shadowColor = 'rgba(108,92,231,0.3)';
ctx.shadowBlur = 8;
data.forEach((val, i) => {
const x = padding.left + i * xStep;
const y = padding.top + chartHeight - ((val - minVal) / range) * chartHeight;
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
});
ctx.stroke();
ctx.shadowBlur = 0;
// точки
data.forEach((val, i) => {
const x = padding.left + i * xStep;
const y = padding.top + chartHeight - ((val - minVal) / range) * chartHeight;
ctx.beginPath();
ctx.arc(x, y, 4, 0, 2 * Math.PI);
ctx.fillStyle = '#b8a5ff';
ctx.shadowBlur = 12;
ctx.shadowColor = 'rgba(108,92,231,0.4)';
ctx.fill();
});
ctx.shadowBlur = 0;
// подписи
ctx.fillStyle = 'rgba(255,255,255,0.2)';
ctx.font = '8px sans-serif';
ctx.textAlign = 'center';
const step = Math.max(1, Math.floor(data.length / 8));
data.forEach((val, i) => {
if (i % step === 0 || i === data.length - 1) {
const x = padding.left + i * xStep;
ctx.fillText((i + 1), x, height - 2);
}
});
// метки значений
ctx.fillStyle = 'rgba(255,255,255,0.12)';
ctx.textAlign = 'right';
ctx.fillText('5', padding.left - 2, padding.top + 2);
ctx.fillText('1', padding.left - 2, height - padding.bottom + 2);
}
// ====== Экспорт CSV ======
function exportCsv() {
if (entries.length === 0) {
alert('Нет данных для экспорта.');
return;
}
let csv = 'Дата,Настроение(1-5),Мысль,Контекст,Новое_убеждение\n';
entries.forEach(e => {
const date = new Date(e.date).toLocaleString('ru-RU', { hour12: false });
const mood = e.mood;
const thought = `"${e.thought.replace(/"/g, '""')}"`;
const context = e.context ? `"${e.context.replace(/"/g, '""')}"` : '';
const newBelief = e.reframe?.newBelief ? `"${e.reframe.newBelief.replace(/"/g, '""')}"` : '';
csv += `${date},${mood},${thought},${context},${newBelief}\n`;
});
const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = `reframe_diary_${new Date().toISOString().split('T')[0]}.csv`;
link.click();
URL.revokeObjectURL(link.href);
}
exportCsvBtn.addEventListener('click', exportCsv);
// ====== Очистка всех данных ======
clearAllBtn.addEventListener('click', () => {
if (confirm('Вы уверены, что хотите удалить ВСЕ записи? Это действие необратимо.')) {
entries = [];
saveEntries(entries);
renderEntries();
updateStatsAndChart();
populateReframeSelect();
reframeMessage.textContent = '? Все записи удалены.';
}
});
// ====== Вкладки ======
const tabBtns = document.querySelectorAll('.tab-btn');
const panels = {
tab1: document.getElementById('tab1'),
tab2: document.getElementById('tab2'),
tab3: document.getElementById('tab3')
};
tabBtns.forEach(btn => {
btn.addEventListener('click', () => {
tabBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
const tabId = btn.dataset.tab;
Object.keys(panels).forEach(id => {
panels[id].classList.toggle('active', id === tabId);
});
if (tabId === 'tab2') populateReframeSelect();
if (tabId === 'tab3') updateStatsAndChart();
});
});
// ====== Инициализация ======
renderEntries();
updateStatsAndChart();
populateReframeSelect();
// При первом открытии загружаем данные для рефрейминга
if (reframeSelect.options.length > 0) {
reframeSelect.selectedIndex = 0;
loadReframeData(reframeSelect.value);
}
// ====== Автосохранение при переключении вкладки (на всякий) ======
// дополнительно: подсказка при пустом поле мысли
document.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && e.ctrlKey) {
saveEntry();
}
});
})();
</script>
</body>
</html>
2026-08-15T13:13:11Z
https://pandoraburo.ru/ssl/u/pic/e2/6850fe98a211f18279a3cef0e847cc/-/logo.png
1592962
https://www.pandoraburo.ru/