https://www.pandoraburo.ru/opora-chto-u-vas-est-na-samom-dele
Опора- что у вас есть на самом деле
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Точка опоры — карта вашей ситуации</title>
<style>
#toApp, #toApp *{box-sizing:border-box !important;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
-webkit-font-smoothing:antialiased}
#toApp{
--bg:#faf6f0; --panel:#ffffff; --panel-2:#f4ede2;
--text:#3a2f28; --muted:#8c7a6b; --border:#e8ddcc;
--green:#7a9a6d; --yellow:#c99c4a; --red:#b87366;
--accent:#b8763f; --accent-2:#c9a876;
background:var(--bg) !important; color:var(--text) !important;
font-size:15px !important; line-height:1.65 !important;
padding:32px 20px 80px !important; border-radius:12px;
text-align:left !important;
}
#toApp .wrap{max-width:760px;margin:0 auto}
#toApp h1,#toApp h2,#toApp h3{margin:0;color:var(--text) !important;
letter-spacing:-0.01em;font-weight:600}
#toApp p{margin:0}
#toApp .screen{display:none}
#toApp .screen.active{display:block}
#toApp .hero{padding:24px 0 28px;border-bottom:1px solid var(--border);margin-bottom:28px}
#toApp .hero h1{font-size:34px;margin-bottom:16px;color:var(--accent) !important;font-weight:600}
#toApp .hero p{color:var(--text);font-size:16px;margin-bottom:14px;line-height:1.7}
#toApp .hero .quiet{font-size:14px;color:var(--muted);opacity:.95}
#toApp button.primary{
background:var(--accent) !important; color:#fff !important;
border:none !important; padding:16px 34px !important;
border-radius:12px !important; font:inherit !important;
font-weight:600 !important; font-size:16px !important;
cursor:pointer; transition:opacity .15s,transform .15s;
box-shadow:0 2px 8px rgba(184,118,63,0.18);
}
#toApp button.primary:hover{opacity:.92;transform:translateY(-1px)}
#toApp button.primary:disabled{background:#d8ccbb !important;
color:#9c8f7f !important; cursor:not-allowed;box-shadow:none;transform:none}
#toApp button.ghost{
background:#fff !important; color:var(--text) !important;
border:1px solid var(--border) !important; padding:14px 24px !important;
border-radius:12px !important; font:inherit !important;
font-weight:500 !important; font-size:14px !important; cursor:pointer;
transition:border-color .15s,background .15s;
}
#toApp button.ghost:hover{border-color:var(--accent) !important;background:#fdf9f3 !important}
#toApp .progress-shell{margin:0 0 28px}
#toApp .progress-info{display:flex;justify-content:space-between;
font-size:13px;color:var(--muted);margin-bottom:10px;gap:12px;flex-wrap:wrap}
#toApp .progress-info strong{color:var(--text)}
#toApp .progress-track{height:5px;background:var(--panel-2);
border-radius:3px;overflow:hidden}
#toApp .progress-fill{height:100%;width:0;
background:linear-gradient(90deg,var(--accent),var(--accent-2));
transition:width .3s;border-radius:3px}
#toApp .draft-note{font-size:12px;color:var(--muted);margin-top:8px;
font-style:italic;opacity:.85;transition:opacity .4s}
#toApp .draft-note.hidden{opacity:0}
#toApp .indices{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px}
#toApp .idx{background:var(--panel);border:1px solid var(--border);
border-radius:16px;padding:20px 22px;
box-shadow:0 1px 3px rgba(58,47,40,0.04)}
#toApp .idx .lbl{font-size:11px;color:var(--muted);
text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;font-weight:600}
#toApp .idx .val{font-size:34px;font-weight:600;color:var(--accent)}
#toApp .idx .hint{font-size:13px;color:var(--muted);margin-top:6px}
#toApp .block{background:var(--panel);border:1px solid var(--border);
border-radius:16px;padding:26px 24px 8px;margin-bottom:20px;
box-shadow:0 1px 3px rgba(58,47,40,0.04)}
#toApp .block-head{margin-bottom:6px}
#toApp .block-head h2{font-size:18px;color:var(--accent) !important;font-weight:600}
#toApp .block-desc{font-size:13px;color:var(--muted);margin-bottom:20px}
#toApp .q{padding:18px 0;border-top:1px solid var(--border)}
#toApp .q:first-of-type{border-top:none}
#toApp .q-label{font-size:15px;margin-bottom:12px;display:block;color:var(--text);line-height:1.6}
#toApp .q-fields{display:grid;grid-template-columns:1fr 220px;gap:12px}
#toApp .q textarea,#toApp .q select,#toApp .field input{
width:100%;background:#fff !important;border:1px solid var(--border);
color:var(--text) !important;padding:12px 14px;border-radius:12px;
font:inherit !important;outline:none;font-size:14px;
transition:border-color .15s,box-shadow .15s;
}
#toApp .q textarea:focus,#toApp .q select:focus,#toApp .field input:focus{
border-color:var(--accent);box-shadow:0 0 0 3px rgba(184,118,63,0.1)}
#toApp .q textarea{resize:vertical;min-height:48px}
#toApp .q textarea::placeholder,#toApp .field input::placeholder{color:#b3a596}
#toApp .q select{appearance:none;padding-right:38px;cursor:pointer;
background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
linear-gradient(135deg,var(--muted) 50%,transparent 50%);
background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;
background-size:5px 5px,5px 5px;background-repeat:no-repeat}
#toApp .q select.s-sure{border-color:var(--green);background-color:#f5f8f3 !important}
#toApp .q select.s-think{border-color:var(--yellow);background-color:#fdf9ee !important}
#toApp .q select.s-fear{border-color:var(--red);background-color:#fcf4f2 !important}
#toApp .q select.s-dont{border-color:var(--border)}
#toApp .consent{background:var(--panel);border:1px solid var(--border);
border-radius:16px;padding:24px;margin-bottom:20px;
box-shadow:0 1px 3px rgba(58,47,40,0.04)}
#toApp .consent h2{font-size:17px;margin-bottom:16px;color:var(--accent) !important}
#toApp .consent .disclaimer{font-size:14px;color:var(--muted);
background:var(--panel-2);border-left:3px solid var(--accent-2);
padding:14px 18px;border-radius:10px;margin-bottom:18px;line-height:1.7}
#toApp .consent label{display:flex;gap:12px;align-items:flex-start;
font-size:14px;cursor:pointer;color:var(--text);line-height:1.6}
#toApp .consent input[type=checkbox]{margin-top:4px;accent-color:var(--accent);
width:16px;height:16px;flex-shrink:0;cursor:pointer}
#toApp .info-box{background:var(--panel);border:1px solid var(--border);
border-radius:16px;padding:24px;margin-bottom:20px;
box-shadow:0 1px 3px rgba(58,47,40,0.04)}
#toApp .info-box h2{font-size:17px;margin-bottom:16px;color:var(--accent) !important}
#toApp .field{margin-bottom:14px}
#toApp .field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
#toApp .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
#toApp .report{background:var(--panel);border:1px solid var(--accent-2);
border-radius:18px;padding:32px;margin-top:24px;
box-shadow:0 2px 12px rgba(184,118,63,0.08)}
#toApp .report h2{font-size:22px;margin-bottom:20px;color:var(--accent) !important}
#toApp .report h3{font-size:12px;margin:26px 0 12px;color:var(--muted);
text-transform:uppercase;letter-spacing:.1em;font-weight:600}
#toApp .report .row{display:flex;justify-content:space-between;padding:12px 0;
border-bottom:1px solid var(--border);font-size:15px;gap:12px}
#toApp .report .row:last-child{border-bottom:none}
#toApp .report .row span:first-child{color:var(--muted)}
#toApp .report .row strong{color:var(--accent);font-size:17px}
#toApp .lights{display:flex;flex-direction:column;gap:8px;font-size:14px}
#toApp .light{display:flex;justify-content:space-between;gap:12px;
padding:14px 16px;border:1px solid var(--border);border-radius:12px;
background:var(--panel-2)}
#toApp .light .dot{width:10px;height:10px;border-radius:50%;
display:inline-block;margin-right:10px}
#toApp .dot.g{background:var(--green)}
#toApp .dot.y{background:var(--yellow)}
#toApp .dot.r{background:var(--red)}
#toApp .list{margin:0;padding-left:22px;font-size:14px;color:var(--text);line-height:1.75}
#toApp .list li{margin-bottom:10px}
#toApp .soft-note{font-size:14px;color:var(--text);background:var(--panel-2);
padding:16px 20px;border-radius:12px;margin-bottom:12px;line-height:1.7;
border-left:3px solid var(--accent-2)}
#toApp .soft-note strong{color:var(--accent)}
#toApp .discl{font-size:13px;color:var(--muted);background:var(--panel-2);
border-left:3px solid var(--accent-2);padding:14px 18px;border-radius:10px;
margin-top:24px;line-height:1.7}
#toApp .offer{background:linear-gradient(135deg,#fdf7ee,#f7efe1);
border:1px solid var(--accent-2);border-radius:16px;padding:28px;margin-top:26px}
#toApp .offer h3{color:var(--accent) !important;font-size:18px;
text-transform:none;letter-spacing:0;margin:0 0 14px;font-weight:600}
#toApp .offer p{font-size:14px;color:var(--text);line-height:1.75;margin-bottom:12px}
#toApp .offer p.muted{color:var(--muted);font-size:13px}
#toApp .offer strong{color:var(--accent)}
#toApp .hp-field{position:absolute;left:-9999px;top:auto}
#toApp footer{color:var(--muted);font-size:12px;text-align:center;
margin-top:48px;padding-top:24px;border-top:1px solid var(--border)}
/* ====== МОБИЛЬНАЯ АДАПТАЦИЯ ====== */
@media (max-width: 640px) {
#toApp{padding:20px 14px 60px !important}
#toApp .hero h1{font-size:28px}
#toApp .hero p{font-size:15px}
#toApp .indices{grid-template-columns:1fr;gap:10px}
#toApp .idx{padding:16px 18px}
#toApp .idx .val{font-size:28px}
#toApp .block{padding:20px 18px 6px}
#toApp .block-head h2{font-size:17px}
#toApp .q{padding:16px 0}
#toApp .q-fields{grid-template-columns:1fr;gap:8px}
#toApp .q textarea{min-height:80px;font-size:16px !important}
#toApp .q select{font-size:16px !important;padding:14px 14px}
#toApp .field input{font-size:16px !important}
#toApp .report{padding:22px 18px}
#toApp .report h2{font-size:20px}
#toApp .offer{padding:22px 18px}
#toApp button.primary{padding:15px 26px !important;font-size:15px !important;width:100%}
#toApp button.ghost{padding:13px 18px !important;font-size:14px !important}
#toApp .actions{flex-direction:column;align-items:stretch}
#toApp .progress-info{font-size:12px}
}
</style>
</head>
<body>
<div id="toApp">
<div class="wrap">
<section class="screen active" id="screen-intro">
<div class="hero">
<h1>Точка опоры</h1>
<p>Это не тест и не диагноз. Это способ увидеть свою ситуацию
со стороны — без осуждения, без советов, без обещаний.</p>
<p>19 вопросов. Займёт 10–15 минут. В конце вы получите карту:
где у вас есть настоящая опора, а где — только тревога и страх.</p>
<p class="quiet">Ничего не сохраняем и никому не передаём.
Ваши ответы сохраняются только в вашем браузере — можно вернуться и продолжить позже.</p>
</div>
<button type="button" class="primary" id="startBtn">Начать разбор</button>
</section>
<section class="screen" id="screen-form">
<div class="progress-shell">
<div class="progress-info">
<span>Отвечено: <strong id="filledCount">0</strong> из <strong id="totalCount">19</strong></span>
<span id="progressText">Осталось примерно 10 минут</span>
</div>
<div class="progress-track"><div class="progress-fill" id="progressFill"></div></div>
<div class="draft-note" id="draftNote">Ваши ответы сохраняются автоматически</div>
</div>
<div class="indices">
<div class="idx">
<div class="lbl">Опора</div>
<div class="val" id="oporaVal">0%</div>
<div class="hint" id="oporaHint">Что реально есть в вашей жизни</div>
</div>
<div class="idx">
<div class="lbl">Ясность</div>
<div class="val" id="yasnostVal">0%</div>
<div class="hint" id="yasnostHint">Насколько точно вы видите ситуацию</div>
</div>
</div>
<form id="toForm" autocomplete="off" novalidate="novalidate">
<div class="hp-field">
<label>Не заполняйте <input type="text" id="hp_field" tabindex="-1" /></label>
</div>
<div id="blocksContainer"></div>
<section class="consent">
<h2>О конфиденциальности</h2>
<div class="disclaimer">
Всё, что вы пишете, остаётся только в вашем браузере. Мы ничего не собираем
и никому не передаём. Результат вы увидите сами, на этом же экране.
Если захотите обсудить свою ситуацию лично — оставьте email в конце.
Это не обязательно.
</div>
<label>
<input type="checkbox" id="consentBox" />
<span>Я понимаю, что это не медицинская, не психологическая и не
психотерапевтическая помощь. Это структурирование моей ситуации.</span>
</label>
</section>
<section class="info-box">
<h2>Хотите обсудить лично?</h2>
<div class="field">
<label>Ваше имя (как к вам обращаться)</label>
<input type="text" id="clientName" placeholder="Имя" />
</div>
<div class="field">
<label>Email — если хотите, чтобы с вами связались</label>
<input type="email" id="clientEmail" placeholder="you@mail.ru" />
</div>
<p style="font-size:13px;color:var(--muted);margin-top:8px;line-height:1.6">
Это поле необязательное. Если оставите — мы напишем вам один раз,
без рассылок и навязчивости.
</p>
</section>
<div class="actions">
<button type="submit" class="primary" id="submitBtn" disabled="disabled">Показать карту</button>
<button type="button" class="ghost" id="backBtn">← Вернуться</button>
<button type="button" class="ghost" id="resetBtn">Начать заново</button>
</div>
</form>
</section>
<section class="screen" id="screen-report">
<div class="report" id="reportBox"></div>
<div class="actions" style="margin-top:20px">
<button type="button" class="ghost" id="downloadBtn">Скачать карту</button>
<button type="button" class="ghost" id="backFromReport">← Изменить ответы</button>
</div>
</section>
<footer>
Точка опоры · © <span id="year"></span>
</footer>
</div>
</div>
<script>
(function(){
"use strict";
var STORAGE_KEY = "tochka_opory_draft_v1";
var SOURCES = {
sure: { label:"Знаю точно", opora:1.0, yasnost:1.0, cls:"s-sure" },
think: { label:"Скорее знаю, чем нет", opora:0.5, yasnost:0.7, cls:"s-think" },
fear: { label:"Боюсь, что это так", opora:0.2, yasnost:0.3, cls:"s-fear" },
dont: { label:"Не знаю", opora:0.0, yasnost:0.0, cls:"s-dont" }
};
var SCENARIO = {
id:"TO", title:"Точка опоры",
blocks: [
{ title:"Финансовая независимость", weight:25,
desc:"Что у вас есть лично — не через мужа, не через семью.",
questions:[
"Есть ли у вас личный счёт или карта, которыми управляете только вы?",
"Знаете ли вы, какие активы оформлены на вас лично (квартиры, машины, доли, счета)?",
"Знаете ли вы, сколько денег уходит лично на вас в месяц?",
"Есть ли у вас собственный источник дохода или накоплений, независимый от партнёра?"
]},
{ title:"Смысл и занятие", weight:25,
desc:"Что вам интересно само по себе — не для других, не для статуса.",
questions:[
"Есть ли дело, которое вам интересно само по себе?",
"Есть ли занятие, за которое вы отвечаете только перед собой?",
"Знаете ли вы, чем хотели бы заниматься через год?",
"Есть ли у вас план на ближайший месяц — кроме бытовых и семейных дел?"
]},
{ title:"Близкие отношения", weight:20,
desc:"Что вы знаете о своей семье по фактам, а не по страхам.",
questions:[
"Знаете ли вы, что у вашего мужа или партнёра с финансами — доходы, долги, обязательства?",
"Обсуждаете ли вы с ним планы на будущее — включая сложные сценарии?",
"Есть ли у вас человек, с которым можно говорить честно, не боясь осуждения?",
"Есть ли у вас ощущение, что вас любят саму, а не ваш статус?"
]},
{ title:"Окружение", weight:15,
desc:"Люди вокруг — по настоящему, а не по статусу.",
questions:[
"Есть ли у вас 2–3 человека, которым вы по-настоящему доверяете?",
"Есть ли в вашем окружении люди, с которыми вам интересно?",
"Знаете ли вы, кто из окружения может помочь в сложной ситуации — юрист, врач, финансист?"
]},
{ title:"Ресурс", weight:15,
desc:"Тело, здоровье и время для себя.",
questions:[
"Есть ли у вас регулярная физическая активность — спорт, прогулки, йога?",
"Знаете ли вы состояние своего здоровья по последнему обследованию?",
"Есть ли у вас время и место, где вы можете побыть одна?",
"Есть ли занятие, которое возвращает вам силы — не для других?"
]}
]
};
var app = document.getElementById("toApp");
var introScreen = app.querySelector("#screen-intro");
var formScreen = app.querySelector("#screen-form");
var reportScreen = app.querySelector("#screen-report");
var startBtn = app.querySelector("#startBtn");
var form = app.querySelector("#toForm");
var blocksContainer = app.querySelector("#blocksContainer");
var filledCountEl = app.querySelector("#filledCount");
var totalCountEl = app.querySelector("#totalCount");
var progressFill = app.querySelector("#progressFill");
var progressText = app.querySelector("#progressText");
var draftNote = app.querySelector("#draftNote");
var oporaVal = app.querySelector("#oporaVal");
var oporaHint = app.querySelector("#oporaHint");
var yasnostVal = app.querySelector("#yasnostVal");
var yasnostHint = app.querySelector("#yasnostHint");
var submitBtn = app.querySelector("#submitBtn");
var backBtn = app.querySelector("#backBtn");
var resetBtn = app.querySelector("#resetBtn");
var backFromReport = app.querySelector("#backFromReport");
var downloadBtn = app.querySelector("#downloadBtn");
var consentBox = app.querySelector("#consentBox");
var clientName = app.querySelector("#clientName");
var clientEmail = app.querySelector("#clientEmail");
var hpField = app.querySelector("#hp_field");
var reportBox = app.querySelector("#reportBox");
var yearEl = app.querySelector("#year");
yearEl.textContent = new Date().getFullYear();
var allAreas = [];
var allSources = [];
var draftTimer = null;
function showScreen(el){
[introScreen, formScreen, reportScreen].forEach(function(s){
s.classList.toggle("active", s === el);
});
window.scrollTo({ top:0, behavior:"smooth" });
}
function buildForm(){
blocksContainer.innerHTML = "";
var total = 0;
SCENARIO.blocks.forEach(function(block, bi){
var sec = document.createElement("section");
sec.className = "block";
sec.setAttribute("data-weight", block.weight);
var html = '<div class="block-head"><h2>' + block.title + '</h2></div>'
+ '<p class="block-desc">' + block.desc + '</p>';
block.questions.forEach(function(q, qi){
var qnum = (bi+1) + "." + (qi+1);
total++;
html += '<div class="q">'
+ '<label class="q-label">' + q + '</label>'
+ '<div class="q-fields">'
+ '<textarea data-q="' + qnum + '" placeholder="Опишите своими словами или оставьте пустым..."></textarea>'
+ '<select class="source" data-q="' + qnum + '">'
+ '<option value="">— как вы это знаете? —</option>';
Object.keys(SOURCES).forEach(function(key){
html += '<option value="' + key + '">' + SOURCES[key].label + '</option>';
});
html += '</select></div></div>';
});
sec.innerHTML = html;
blocksContainer.appendChild(sec);
});
allAreas = Array.prototype.slice.call(blocksContainer.querySelectorAll("textarea[data-q]"));
allSources = Array.prototype.slice.call(blocksContainer.querySelectorAll("select.source"));
totalCountEl.textContent = total;
allAreas.forEach(function(a){
a.addEventListener("input", function(){ updateUI(); saveDraft(); });
});
allSources.forEach(function(s){
s.addEventListener("change", function(){
applySourceColor(s);
updateUI();
saveDraft();
});
});
}
function applySourceColor(select){
Object.keys(SOURCES).forEach(function(k){ select.classList.remove(SOURCES[k].cls); });
if (SOURCES[select.value]) select.classList.add(SOURCES[select.value].cls);
}
function saveDraft(){
try {
var data = { answers:{}, sources:{} };
allAreas.forEach(function(a){ data.answers[a.getAttribute("data-q")] = a.value; });
allSources.forEach(function(s){ data.sources[s.getAttribute("data-q")] = s.value; });
localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
showDraftNote();
} catch(e){}
}
function loadDraft(){
try {
var raw = localStorage.getItem(STORAGE_KEY);
if (!raw) return;
var data = JSON.parse(raw);
var loaded = 0;
if (data.answers) {
allAreas.forEach(function(a){
var key = a.getAttribute("data-q");
if (data.answers[key]) { a.value = data.answers[key]; loaded++; }
});
}
if (data.sources) {
allSources.forEach(function(s){
var key = s.getAttribute("data-q");
if (data.sources[key]) {
s.value = data.sources[key];
applySourceColor(s);
}
});
}
if (loaded > 0) showDraftNote("Черновик восстановлен — можно продолжить");
} catch(e){}
}
function showDraftNote(text){
if (!draftNote) return;
if (text) draftNote.textContent = text;
draftNote.classList.remove("hidden");
if (draftTimer) clearTimeout(draftTimer);
draftTimer = setTimeout(function(){
draftNote.classList.add("hidden");
}, 2500);
}
function computeIndices(){
var totalWeight = 0, wOpora = 0, wYasnost = 0, filled = 0;
var blocks = Array.prototype.slice.call(blocksContainer.querySelectorAll("section.block"));
blocks.forEach(function(block){
var weight = parseFloat(block.getAttribute("data-weight")) || 0;
totalWeight += weight;
var areas = Array.prototype.slice.call(block.querySelectorAll("textarea[data-q]"));
var srcs = Array.prototype.slice.call(block.querySelectorAll("select.source"));
var n = areas.length || 1;
var oporaSum = 0, yasnostSum = 0;
areas.forEach(function(a, i){
var v = (a.value||"").trim();
var s = srcs[i] ? srcs[i].value : "";
if (v.length > 0) filled++;
if (v.length > 0 && s && SOURCES[s]) {
oporaSum += SOURCES[s].opora;
yasnostSum += SOURCES[s].yasnost;
}
});
wOpora += (oporaSum / n) * weight;
wYasnost += (yasnostSum / n) * weight;
});
return {
opora: Math.round(totalWeight > 0 ? (wOpora / totalWeight) * 100 : 0),
yasnost: Math.round(totalWeight > 0 ? (wYasnost / totalWeight) * 100 : 0),
filled: filled,
total: allAreas.length
};
}
function updateUI(){
var idx = computeIndices();
filledCountEl.textContent = idx.filled;
progressFill.style.width = ((idx.filled / (idx.total || 1)) * 100) + "%";
oporaVal.textContent = idx.opora + "%";
yasnostVal.textContent = idx.yasnost + "%";
// Оценка оставшегося времени
var remaining = Math.max(0, idx.total - idx.filled);
var minutesLeft = Math.ceil(remaining * 0.5);
if (progressText) {
if (minutesLeft <= 0) {
progressText.textContent = "Почти готово";
} else if (minutesLeft === 1) {
progressText.textContent = "Осталась примерно 1 минута";
} else if (minutesLeft < 5) {
progressText.textContent = "Осталось примерно " + minutesLeft + " минуты";
} else {
progressText.textContent = "Осталось примерно " + minutesLeft + " минут";
}
}
if (idx.opora >= 65) oporaHint.textContent = "Прочная основа";
else if (idx.opora >= 35) oporaHint.textContent = "Что-то есть, но не везде";
else oporaHint.textContent = "Пока мало подтверждённого";
if (idx.yasnost >= 65) yasnostHint.textContent = "Видите свою ситуацию";
else if (idx.yasnost >= 35) yasnostHint.textContent = "Часть картины размыта";
else yasnostHint.textContent = "Много страхов и тумана";
var consentOk = consentBox.checked;
submitBtn.disabled = !(consentOk && idx.filled >= 10);
}
function computeLights(){
var result = [];
var blocks = Array.prototype.slice.call(blocksContainer.querySelectorAll("section.block"));
blocks.forEach(function(block){
var title = block.querySelector(".block-head h2").textContent.trim();
var weight = block.getAttribute("data-weight");
var areas = Array.prototype.slice.call(block.querySelectorAll("textarea[data-q]"));
var srcs = Array.prototype.slice.call(block.querySelectorAll("select.source"));
var n = areas.length || 1;
var oporaSum = 0, yasnostSum = 0, filled = 0;
areas.forEach(function(a, i){
var v = (a.value||"").trim();
var s = srcs[i] ? srcs[i].value : "";
if (v) filled++;
if (v && s && SOURCES[s]) {
oporaSum += SOURCES[s].opora;
yasnostSum += SOURCES[s].yasnost;
}
});
var o = (oporaSum / n) * 100;
var ya = (yasnostSum / n) * 100;
var color = "r";
if (o >= 65 && ya >= 65) color = "g";
else if (o >= 35 || ya >= 40) color = "y";
result.push({ title:title, weight:weight, color:color, filled:filled, total:areas.length });
});
return result;
}
function buildBlindSpots(){
var out = [];
var blocks = Array.prototype.slice.call(blocksContainer.querySelectorAll("section.block"));
blocks.forEach(function(block){
var title = block.querySelector(".block-head h2").textContent.trim();
var areas = Array.prototype.slice.call(block.querySelectorAll("textarea[data-q]"));
var srcs = Array.prototype.slice.call(block.querySelectorAll("select.source"));
var empty = 0, fear = 0, dont = 0;
areas.forEach(function(a, i){
var v = (a.value||"").trim();
var s = srcs[i] ? srcs[i].value : "";
if (!v || !s) empty++;
else if (s === "fear") fear++;
else if (s === "dont") dont++;
});
if (fear + dont >= 2) {
out.push(title + ": часть картины держится на страхах и догадках, а не на подтверждённых фактах.");
} else if (empty >= 2) {
out.push(title + ": много вопросов осталось без ответа — это тоже важный сигнал.");
}
});
return out;
}
function buildSoftPlan(lights){
var plan = [];
var reds = lights.filter(function(l){ return l.color === "r"; });
if (reds.length === 0) {
plan.push("У вас довольно прочная картина. Задача на ближайший месяц — поддерживать её и не терять из виду.");
return plan;
}
var map = {
"Финансовая независимость": "Начните с одного: узнайте точно, что оформлено лично на вас. Это не про недоверие к близким — это про вашу опору.",
"Смысл и занятие": "Выпишите три занятия, которые вам интересны сами по себе. Не для мужа, не для детей, не для статуса. Просто для вас. И выберите одно — начать на этой неделе.",
"Близкие отношения": "Найдите 30 минут, чтобы честно спросить себя: что я знаю о своей семье точно, а что — только мои страхи? Не действуйте сразу. Просто отделите факты от тревоги.",
"Окружение": "Вспомните 2–3 человека, с которыми вам по-настоящему легко. Напишите им на этой неделе. Даже просто так.",
"Ресурс": "Начните с одного: 20 минут в день только для себя. Прогулка, книга, музыка, ванна — то, что возвращает силы."
};
reds.forEach(function(l){
if (map[l.title]) plan.push(map[l.title]);
});
if (plan.length === 0) {
plan.push("Обратите внимание на блоки, которые сейчас в жёлтой зоне — там больше всего тумана.");
}
return plan;
}
function renderReport(){
var idx = computeIndices();
var lights = computeLights();
var blind = buildBlindSpots();
var plan = buildSoftPlan(lights);
var html = '<h2>Ваша карта</h2>';
html += '<div class="row"><span>Опора</span><strong>' + idx.opora + '%</strong></div>';
html += '<div class="row"><span>Ясность</span><strong>' + idx.yasnost + '%</strong></div>';
html += '<div class="row"><span>Отвечено</span><strong>' + idx.filled + ' из ' + idx.total + '</strong></div>';
html += '<h3>Светофор по блокам</h3><div class="lights">';
lights.forEach(function(l){
html += '<div class="light"><span><span class="dot ' + l.color + '"></span>'
+ l.title + '</span><span>' + l.filled + ' из ' + l.total + '</span></div>';
});
html += '</div>';
if (blind.length) {
html += '<h3>Где картина размыта</h3><ul class="list">';
blind.forEach(function(b){ html += '<li>' + b + '</li>'; });
html += '</ul>';
}
html += '<h3>Что можно сделать в ближайшие 30 дней</h3>';
plan.forEach(function(p){ html += '<div class="soft-note">' + p + '</div>'; });
html += '<div class="discl">'
+ 'Это не диагноз, не терапия и не прогноз. Это структурирование того, что вы сами '
+ 'сказали о своей ситуации. Ответственность за решения остаётся на вас. Если вы '
+ 'чувствуете, что вам тяжело и нужна поддержка, обратитесь к психологу или врачу.'
+ '</div>';
html += '<div class="offer">'
+ '<h3>Если хотите поговорить лично</h3>'
+ '<p>Можно разобрать вашу ситуацию с человеком — 60 минут, спокойно, без осуждения '
+ 'и без готовых рецептов. Просто чтобы посмотреть вместе и подумать, что делать дальше.</p>'
+ '<p class="muted">Напишите на <strong>setipandorra@internet.ru</strong>, если '
+ 'хотите обсудить. Без обязательств и навязчивости.</p>'
+ '</div>';
reportBox.innerHTML = html;
}
function buildTextReport(){
var idx = computeIndices();
var lights = computeLights();
var blind = buildBlindSpots();
var plan = buildSoftPlan(lights);
var now = new Date();
var L = [];
L.push("ТОЧКА ОПОРЫ");
L.push("Карта ситуации");
L.push("================================");
L.push("Дата: " + now.toLocaleString("ru-RU"));
L.push("");
L.push("Опора: " + idx.opora + "%");
L.push("Ясность: " + idx.yasnost + "%");
L.push("Отвечено: " + idx.filled + " из " + idx.total);
L.push("");
L.push("СВЕТОФОР ПО БЛОКАМ");
lights.forEach(function(l){
var mark = l.color === "g" ? "[зелёный]" : l.color === "y" ? "[жёлтый]" : "[красный]";
L.push(" " + mark + " " + l.title + " (" + l.filled + "/" + l.total + ")");
});
if (blind.length) {
L.push("");
L.push("ГДЕ КАРТИНА РАЗМЫТА");
blind.forEach(function(b){ L.push(" • " + b); });
}
L.push("");
L.push("ЧТО МОЖНО СДЕЛАТЬ В БЛИЖАЙШИЕ 30 ДНЕЙ");
plan.forEach(function(p){ L.push(" • " + p); });
L.push("");
L.push("================================");
L.push("Это не диагноз, не терапия и не прогноз.");
L.push("Это структурирование того, что вы сами сказали о своей ситуации.");
L.push("Ответственность за решения остаётся на вас.");
L.push("Если тяжело — обратитесь к психологу или врачу.");
L.push("");
L.push("Связаться: setipandorra@internet.ru");
return L.join("\n");
}
function downloadFile(name, text){
var blob = new Blob([text], { type:"text/plain;charset=utf-8" });
var url = URL.createObjectURL(blob);
var a = document.createElement("a");
a.href = url; a.download = name;
document.body.appendChild(a); a.click(); document.body.removeChild(a);
setTimeout(function(){ URL.revokeObjectURL(url); }, 2000);
}
startBtn.addEventListener("click", function(){
showScreen(formScreen);
});
backBtn.addEventListener("click", function(){
showScreen(introScreen);
});
backFromReport.addEventListener("click", function(){
showScreen(formScreen);
});
form.addEventListener("submit", function(e){
e.preventDefault();
if (hpField.value.trim() !== "") return;
var idx = computeIndices();
if (idx.filled < 10) {
alert("Пожалуйста, ответьте хотя бы на 10 вопросов.");
return;
}
renderReport();
showScreen(reportScreen);
});
resetBtn.addEventListener("click", function(){
if (!confirm("Очистить все ответы? Это действие нельзя отменить.")) return;
allAreas.forEach(function(a){ a.value = ""; });
allSources.forEach(function(s){ s.value = ""; applySourceColor(s); });
consentBox.checked = false;
clientName.value = ""; clientEmail.value = "";
try { localStorage.removeItem(STORAGE_KEY); } catch(e){}
updateUI();
});
downloadBtn.addEventListener("click", function(){
downloadFile("tochka_opory_" + Date.now() + ".txt", buildTextReport());
});
consentBox.addEventListener("change", updateUI);
clientName.addEventListener("input", updateUI);
clientEmail.addEventListener("input", updateUI);
// Порядок важен: сначала строим форму, потом подгружаем черновик
buildForm();
loadDraft();
updateUI();
})();
</script>
</body>
</html>
2026-09-22T08:19:14Z
https://pandoraburo.ru/ssl/u/pic/ef/f66878aa6d11f1abb9f7ceed6face4/-/image%20%284%29.jpg
1592962
https://www.pandoraburo.ru/