mirror of
https://github.com/wasrusgen/vizelberg-mockups.git
synced 2026-06-03 13:24:50 +00:00
Add client questionnaire (voice+example), interaction protocol, channel kit; update gallery
This commit is contained in:
wasrusgen
parent
1938c38b2e
commit
9415ee0317
219
anketa.html
Normal file
219
anketa.html
Normal file
@ -0,0 +1,219 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>VIZELBERG — Анкета нового клиента</title>
|
||||
<style>
|
||||
:root{--sage:#7C9070;--herbal:#2F4A3C;--cream:#F5EFE6;--terra:#E8A87C;--gold:#C9A24B;--ink:#23302a;--line:rgba(47,74,60,.14);--soft:#8a978d}
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
body{font-family:'Segoe UI',-apple-system,Roboto,sans-serif;color:var(--ink);background:#ece5da;line-height:1.55}
|
||||
.ic{width:20px;height:20px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block}
|
||||
.ic-sm{width:15px;height:15px}
|
||||
.shell{max-width:640px;margin:0 auto;min-height:100vh;background:var(--cream);box-shadow:0 0 60px rgba(0,0,0,.07)}
|
||||
.top{background:var(--herbal);color:var(--cream);padding:22px 22px 18px;position:sticky;top:0;z-index:5}
|
||||
.top .row{display:flex;align-items:center;gap:10px}
|
||||
.top .lg{width:30px;height:30px;border-radius:10px;background:var(--gold);color:var(--herbal);display:flex;align-items:center;justify-content:center}
|
||||
.top h1{font-size:16px;font-weight:600}
|
||||
.top .sl{font-size:10px;letter-spacing:2px;color:var(--sage);text-transform:uppercase}
|
||||
.pbar{height:6px;background:rgba(255,255,255,.15);border-radius:4px;margin-top:14px;overflow:hidden}
|
||||
.pbar i{display:block;height:6px;background:var(--gold);width:0;transition:width .4s}
|
||||
.pmeta{font-size:11px;color:var(--sage);margin-top:6px;display:flex;justify-content:space-between}
|
||||
|
||||
.toolbar{display:flex;gap:8px;padding:14px 20px 0;flex-wrap:wrap}
|
||||
.tbtn{font-family:inherit;border:1px solid var(--line);background:#fff;border-radius:20px;padding:7px 13px;font-size:12px;color:var(--herbal);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
|
||||
.tbtn.gold{background:var(--gold);color:#3a2e10;border:none}
|
||||
.tbtn:active{transform:scale(.97)}
|
||||
|
||||
.body{padding:14px 20px 30px}
|
||||
.sect{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:14px}
|
||||
.sect h2{font-family:Georgia,serif;font-size:16px;color:var(--herbal);display:flex;align-items:center;gap:8px;margin-bottom:4px}
|
||||
.sect h2 .num{width:24px;height:24px;border-radius:50%;background:var(--sage);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;flex:none}
|
||||
.sect .sd{font-size:12px;color:var(--soft);margin-bottom:12px}
|
||||
.q{margin-bottom:14px}
|
||||
.q label{display:block;font-size:13px;color:var(--herbal);font-weight:600;margin-bottom:6px}
|
||||
.inwrap{position:relative}
|
||||
.inp{width:100%;border:1px solid var(--line);border-radius:11px;padding:11px 44px 11px 12px;font-family:inherit;font-size:13.5px;outline:none;background:#fff;color:var(--ink)}
|
||||
.inp:focus{border-color:var(--sage)}
|
||||
textarea.inp{min-height:64px;resize:vertical;line-height:1.5}
|
||||
.ex{font-size:11.5px;color:#a99;margin-top:5px;font-style:italic}
|
||||
.mic{position:absolute;right:7px;top:7px;width:32px;height:32px;border-radius:50%;border:none;background:var(--cream);color:var(--herbal);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
|
||||
.mic:hover{background:#e6ddcd}
|
||||
.mic.rec{background:#c0584f;color:#fff;animation:pulse 1s infinite}
|
||||
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(192,88,79,.5)}50%{box-shadow:0 0 0 7px rgba(192,88,79,0)}}
|
||||
.chips{display:flex;gap:7px;flex-wrap:wrap}
|
||||
.chip{border:1px solid var(--line);border-radius:20px;padding:7px 13px;font-size:12.5px;color:var(--herbal);cursor:pointer;background:#fff}
|
||||
.chip.on{background:var(--herbal);color:#fff;border-color:var(--herbal)}
|
||||
|
||||
.submit{position:sticky;bottom:0;background:linear-gradient(transparent,var(--cream) 30%);padding:16px 20px 22px}
|
||||
.btn{width:100%;background:var(--gold);color:#3a2e10;border:none;font-family:inherit;border-radius:14px;padding:15px;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
|
||||
.btn:active{transform:scale(.99)}
|
||||
.voice-note{font-size:11px;color:var(--soft);text-align:center;margin-top:8px}
|
||||
|
||||
/* done screen */
|
||||
.done{display:none;padding:50px 24px;text-align:center}
|
||||
.done.on{display:block}
|
||||
.done .badge{width:80px;height:80px;border-radius:50%;background:var(--sage);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
|
||||
.done h2{font-family:Georgia,serif;color:var(--herbal);font-size:22px}
|
||||
.done p{color:#5d6b62;font-size:14px;margin-top:8px}
|
||||
.json{text-align:left;background:#1b251f;color:#cfe0d3;border-radius:12px;padding:16px;font-family:Consolas,monospace;font-size:11px;margin-top:20px;white-space:pre-wrap;line-height:1.5;max-height:320px;overflow:auto}
|
||||
.hint{background:var(--cream);border:1px dashed var(--sage);border-radius:12px;padding:12px;font-size:12.5px;color:#5d6b62;margin-top:16px;text-align:left}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg width="0" height="0" style="position:absolute">
|
||||
<symbol id="i-leaf" viewBox="0 0 24 24"><path d="M5 19C5 11 11 5 20 5c0 9-6 14-14 14z"/><path d="M5 19c4-1 7-4 9-8"/></symbol>
|
||||
<symbol id="i-mic" viewBox="0 0 24 24"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></symbol>
|
||||
<symbol id="i-spark" viewBox="0 0 24 24"><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/></symbol>
|
||||
<symbol id="i-eye" viewBox="0 0 24 24"><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></symbol>
|
||||
<symbol id="i-check" viewBox="0 0 24 24"><path d="M5 12l4.5 4.5L19 7"/></symbol>
|
||||
<symbol id="i-send" viewBox="0 0 24 24"><path d="M4 12l16-7-7 16-2-7-7-2z"/></symbol>
|
||||
</svg>
|
||||
|
||||
<div class="shell">
|
||||
<div class="top">
|
||||
<div class="row"><div class="lg"><svg class="ic ic-sm"><use href="#i-leaf"/></svg></div><div><h1>Анкета нового клиента</h1><div class="sl">vizelberg · нутрициология здоровья</div></div></div>
|
||||
<div class="pbar"><i id="pbar"></i></div>
|
||||
<div class="pmeta"><span>Заполнено: <span id="pcnt">0</span>%</span><span id="micstate">🎙 голос: проверка…</span></div>
|
||||
</div>
|
||||
|
||||
<div id="form">
|
||||
<div class="toolbar">
|
||||
<button class="tbtn gold" onclick="fillExample()"><svg class="ic ic-sm"><use href="#i-spark"/></svg> Заполнить примером</button>
|
||||
<button class="tbtn" onclick="toggleEx()"><svg class="ic ic-sm"><use href="#i-eye"/></svg> Показать/скрыть подсказки</button>
|
||||
<button class="tbtn" onclick="clearAll()">Очистить</button>
|
||||
</div>
|
||||
|
||||
<div class="body">
|
||||
|
||||
<div class="sect">
|
||||
<h2><span class="num">1</span> О себе</h2>
|
||||
<div class="sd">Базовые данные — чтобы рассчитать норму калорий и нутриентов.</div>
|
||||
<div class="q"><label>Имя</label><div class="inwrap"><input class="inp" data-k="name" placeholder="Например: Анна"><button class="mic" onclick="rec(this)"><svg class="ic ic-sm"><use href="#i-mic"/></svg></button></div><div class="ex">Пример: Анна</div></div>
|
||||
<div class="q"><label>Возраст / рост / вес</label><div class="inwrap"><input class="inp" data-k="afp" placeholder="32 года, 168 см, 70 кг"><button class="mic" onclick="rec(this)"><svg class="ic ic-sm"><use href="#i-mic"/></svg></button></div><div class="ex">Пример: 32 года, 168 см, 70 кг</div></div>
|
||||
</div>
|
||||
|
||||
<div class="sect">
|
||||
<h2><span class="num">2</span> Цель</h2>
|
||||
<div class="sd">Что хотите изменить и к какому сроку.</div>
|
||||
<div class="q"><label>Главная цель</label>
|
||||
<div class="chips" data-multi="goal">
|
||||
<span class="chip" onclick="tog(this)">Снизить вес</span><span class="chip" onclick="tog(this)">Больше энергии</span><span class="chip" onclick="tog(this)">Наладить ЖКТ</span><span class="chip" onclick="tog(this)">Долголетие / anti-age</span><span class="chip" onclick="tog(this)">Набрать массу</span><span class="chip" onclick="tog(this)">Привычки питания</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="q"><label>Опишите цель своими словами</label><div class="inwrap"><textarea class="inp" data-k="goal_text" placeholder="Хочу снизить вес на 5 кг к лету и перестать срываться вечером"></textarea><button class="mic" onclick="rec(this)"><svg class="ic ic-sm"><use href="#i-mic"/></svg></button></div><div class="ex">Пример: снизить вес на 5 кг к лету, убрать вечерние срывы, больше энергии днём</div></div>
|
||||
</div>
|
||||
|
||||
<div class="sect">
|
||||
<h2><span class="num">3</span> Здоровье</h2>
|
||||
<div class="sd">Важно для безопасных рекомендаций. Всё конфиденциально.</div>
|
||||
<div class="q"><label>Хронические заболевания, состояние ЖКТ</label><div class="inwrap"><textarea class="inp" data-k="health" placeholder="Гастрит, бывает вздутие после молочного"></textarea><button class="mic" onclick="rec(this)"><svg class="ic ic-sm"><use href="#i-mic"/></svg></button></div><div class="ex">Пример: гастрит вне обострения, вздутие после молочного</div></div>
|
||||
<div class="q"><label>Аллергии / непереносимости</label><div class="inwrap"><input class="inp" data-k="allergy" placeholder="Лактоза, орехи"><button class="mic" onclick="rec(this)"><svg class="ic ic-sm"><use href="#i-mic"/></svg></button></div><div class="ex">Пример: непереносимость лактозы</div></div>
|
||||
<div class="q"><label>Лекарства / БАД сейчас</label><div class="inwrap"><input class="inp" data-k="meds" placeholder="Витамин D, магний"><button class="mic" onclick="rec(this)"><svg class="ic ic-sm"><use href="#i-mic"/></svg></button></div><div class="ex">Пример: витамин D 2000 МЕ, магний</div></div>
|
||||
</div>
|
||||
|
||||
<div class="sect">
|
||||
<h2><span class="num">4</span> Питание сейчас</h2>
|
||||
<div class="sd">Как вы едите в обычный день — без прикрас, это база для меню.</div>
|
||||
<div class="q"><label>Типичный день: завтрак / обед / ужин / перекусы</label><div class="inwrap"><textarea class="inp" data-k="day" placeholder="Завтрак — кофе и бутерброд, обед — что на работе, ужин поздно, перекусы сладким"></textarea><button class="mic" onclick="rec(this)"><svg class="ic ic-sm"><use href="#i-mic"/></svg></button></div><div class="ex">Пример: завтрак часто пропускаю, обед на бегу, ужин плотный поздно, днём сладкое</div></div>
|
||||
<div class="q"><label>Сколько воды в день / что не едите принципиально</label><div class="inwrap"><input class="inp" data-k="water" placeholder="~1 л воды, не ем мясо"><button class="mic" onclick="rec(this)"><svg class="ic ic-sm"><use href="#i-mic"/></svg></button></div><div class="ex">Пример: примерно 1 литр воды, не ем красное мясо</div></div>
|
||||
</div>
|
||||
|
||||
<div class="sect">
|
||||
<h2><span class="num">5</span> Образ жизни</h2>
|
||||
<div class="sd">Сон, активность, стресс влияют на результат не меньше еды.</div>
|
||||
<div class="q"><label>Сон, физическая активность, уровень стресса</label><div class="inwrap"><textarea class="inp" data-k="life" placeholder="Сплю 6 часов, сидячая работа, высокий стресс"></textarea><button class="mic" onclick="rec(this)"><svg class="ic ic-sm"><use href="#i-mic"/></svg></button></div><div class="ex">Пример: сон 6 ч, сидячая работа, 8000 шагов, стресс высокий</div></div>
|
||||
<div class="q"><label>Был ли опыт диет? Что не сработало?</label><div class="inwrap"><textarea class="inp" data-k="diets" placeholder="Пробовала кето — срывалась, голодала — вес вернулся"></textarea><button class="mic" onclick="rec(this)"><svg class="ic ic-sm"><use href="#i-mic"/></svg></button></div><div class="ex">Пример: пробовала кето и подсчёт калорий — надолго не хватало</div></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="submit">
|
||||
<button class="btn" onclick="submitForm()"><svg class="ic ic-sm"><use href="#i-send"/></svg> Отправить анкету нутрициологу</button>
|
||||
<div class="voice-note">🎙 У каждого поля — кнопка микрофона: можно наговорить ответ голосом</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- DONE -->
|
||||
<div class="done" id="done">
|
||||
<div class="badge"><svg class="ic" style="width:34px;height:34px"><use href="#i-check"/></svg></div>
|
||||
<h2>Спасибо! Анкета отправлена</h2>
|
||||
<p>Наталья изучит ответы и подготовит персональные рекомендации. Структурированные данные уходят в обработку.</p>
|
||||
<div class="json" id="jsonout"></div>
|
||||
<div class="hint">⚙️ Эти данные в формате JSON поступают в <b>алгоритм обработки анкет</b> (предоставляется отдельно): расчёт калорий/КБЖУ, выделение рисков и противопоказаний, черновик первичных рекомендаций и меню. Голосовые ответы уже расшифрованы в текст.</div>
|
||||
<button class="btn" style="margin-top:18px;background:var(--herbal);color:#fff" onclick="location.reload()">Заполнить заново</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ---- progress ----
|
||||
function fields(){return document.querySelectorAll('#form .inp');}
|
||||
function updateProgress(){
|
||||
const f=fields();let filled=0;f.forEach(x=>{if(x.value.trim())filled++;});
|
||||
const goal=document.querySelectorAll('[data-multi="goal"] .chip.on').length>0?1:0;
|
||||
const total=f.length+1, done=filled+goal;
|
||||
const pct=Math.round(done/total*100);
|
||||
document.getElementById('pbar').style.width=pct+'%';
|
||||
document.getElementById('pcnt').textContent=pct;
|
||||
}
|
||||
fields().forEach(x=>x.addEventListener('input',updateProgress));
|
||||
|
||||
// ---- chips ----
|
||||
function tog(el){el.classList.toggle('on');updateProgress();}
|
||||
|
||||
// ---- example / hints ----
|
||||
const sample={name:'Анна',afp:'32 года, 168 см, 70 кг',goal_text:'Снизить вес на 5 кг к лету, убрать вечерние срывы, больше энергии днём',health:'Гастрит вне обострения, вздутие после молочного',allergy:'Непереносимость лактозы',meds:'Витамин D 2000 МЕ, магний',day:'Завтрак часто пропускаю, обед на бегу, ужин плотный поздно, днём тянет на сладкое',water:'Примерно 1 литр воды, не ем красное мясо',life:'Сон 6 часов, сидячая работа, ~8000 шагов, стресс высокий',diets:'Пробовала кето и подсчёт калорий — надолго не хватало'};
|
||||
function fillExample(){
|
||||
fields().forEach(x=>{const k=x.dataset.k;if(sample[k])x.value=sample[k];});
|
||||
document.querySelectorAll('[data-multi="goal"] .chip').forEach((c,i)=>c.classList.toggle('on',i===0||i===1));
|
||||
updateProgress();
|
||||
}
|
||||
let exShown=true;
|
||||
function toggleEx(){exShown=!exShown;document.querySelectorAll('.ex').forEach(e=>e.style.display=exShown?'':'none');}
|
||||
function clearAll(){fields().forEach(x=>x.value='');document.querySelectorAll('.chip.on').forEach(c=>c.classList.remove('on'));updateProgress();}
|
||||
|
||||
// ---- voice (Web Speech API) ----
|
||||
const SR=window.SpeechRecognition||window.webkitSpeechRecognition;
|
||||
let recog=null,activeMic=null;
|
||||
if(SR){
|
||||
document.getElementById('micstate').textContent='🎙 голос: доступен';
|
||||
recog=new SR();recog.lang='ru-RU';recog.interimResults=true;recog.continuous=false;
|
||||
let target=null,base='';
|
||||
recog.onresult=(e)=>{
|
||||
let txt='';for(let i=0;i<e.results.length;i++)txt+=e.results[i][0].transcript;
|
||||
if(target){target.value=(base?base+' ':'')+txt;updateProgress();}
|
||||
};
|
||||
recog.onend=()=>{if(activeMic){activeMic.classList.remove('rec');activeMic=null;target=null;}};
|
||||
recog.onerror=()=>{document.getElementById('micstate').textContent='🎙 голос: нет доступа к микрофону';if(activeMic){activeMic.classList.remove('rec');activeMic=null;}};
|
||||
window.rec=function(btn){
|
||||
const input=btn.parentElement.querySelector('.inp');
|
||||
if(activeMic===btn){recog.stop();return;}
|
||||
if(activeMic){recog.stop();}
|
||||
target=input;base=input.value.trim();
|
||||
activeMic=btn;btn.classList.add('rec');
|
||||
try{recog.start();}catch(e){}
|
||||
};
|
||||
} else {
|
||||
document.getElementById('micstate').textContent='🎙 голос: браузер не поддерживает';
|
||||
// fallback: simulate dictation
|
||||
window.rec=function(btn){
|
||||
const input=btn.parentElement.querySelector('.inp');const k=input.dataset.k;
|
||||
btn.classList.add('rec');
|
||||
setTimeout(()=>{input.value=(input.value?input.value+' ':'')+(sample[k]||'(распознанный голос)');btn.classList.remove('rec');updateProgress();},900);
|
||||
};
|
||||
}
|
||||
|
||||
// ---- submit ----
|
||||
function submitForm(){
|
||||
const data={};fields().forEach(x=>{if(x.value.trim())data[x.dataset.k]=x.value.trim();});
|
||||
data.goal=[...document.querySelectorAll('[data-multi="goal"] .chip.on')].map(c=>c.textContent);
|
||||
data.submitted_at=new Date().toISOString();
|
||||
document.getElementById('jsonout').textContent=JSON.stringify(data,null,2);
|
||||
document.getElementById('form').style.display='none';
|
||||
document.getElementById('done').classList.add('on');
|
||||
window.scrollTo(0,0);
|
||||
}
|
||||
updateProgress();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
205
channel_kit.html
Normal file
205
channel_kit.html
Normal file
@ -0,0 +1,205 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>VIZELBERG — Ребрендинг Telegram-канала</title>
|
||||
<style>
|
||||
:root{--sage:#7C9070;--herbal:#2F4A3C;--cream:#F5EFE6;--terra:#E8A87C;--gold:#C9A24B;--ink:#23302a;--line:rgba(47,74,60,.12);--soft:#8a978d}
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
body{font-family:'Segoe UI',-apple-system,Roboto,sans-serif;color:var(--ink);background:#ece5da;line-height:1.55}
|
||||
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
|
||||
header{background:var(--herbal);color:var(--cream);padding:46px 0;text-align:center}
|
||||
header .k{font-size:12px;letter-spacing:6px;color:var(--gold);text-transform:uppercase}
|
||||
header h1{font-family:Georgia,serif;font-size:24px;margin-top:10px}
|
||||
header p{color:var(--sage);font-size:14px;margin-top:6px}
|
||||
.ic{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block}
|
||||
.ic-sm{width:15px;height:15px}.ic-lg{width:34px;height:34px}
|
||||
.sec{padding:42px 0}
|
||||
.sec h2{font-family:Georgia,serif;font-size:20px;color:var(--herbal);margin-bottom:4px}
|
||||
.sec .d{color:#5d6b62;font-size:13.5px;margin-bottom:22px;max-width:680px}
|
||||
.cols{display:grid;grid-template-columns:340px 1fr;gap:34px;align-items:start}
|
||||
|
||||
/* telegram phone */
|
||||
.phone{background:#1b251f;border-radius:36px;padding:9px;box-shadow:0 20px 46px rgba(27,37,31,.3)}
|
||||
.tg{background:#e9e3d8;border-radius:28px;overflow:hidden}
|
||||
.tg .cover{background:linear-gradient(135deg,#2F4A3C,#3c5b4a);padding:26px 18px 18px;color:var(--cream);text-align:center;position:relative;overflow:hidden}
|
||||
.tg .cover .leaf{position:absolute;right:-26px;top:-20px;opacity:.16}
|
||||
.tg .av{width:84px;height:84px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;color:var(--herbal);border:3px solid rgba(245,239,230,.25)}
|
||||
.tg .nm{font-weight:600;font-size:17px}
|
||||
.tg .sl{font-size:11px;letter-spacing:2px;color:var(--sage);margin-top:3px;text-transform:lowercase}
|
||||
.tg .subs{font-size:11px;color:rgba(245,239,230,.7);margin-top:7px}
|
||||
.tg .desc{background:#fff;margin:0;padding:14px 16px;font-size:11.5px;color:#3a463f;line-height:1.6;border-bottom:1px solid var(--line)}
|
||||
.tg .desc .lnk{color:var(--sage)}
|
||||
.tg .posts{padding:12px;display:flex;flex-direction:column;gap:10px;background:#e9e3d8}
|
||||
.pcard{background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
|
||||
.pcard .pc{padding:18px 14px;color:#fff;display:flex;align-items:center;gap:10px}
|
||||
.pcard .pt{padding:9px 12px;font-size:11px;color:#3a463f}
|
||||
|
||||
/* assets */
|
||||
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
|
||||
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
|
||||
.card .t{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:12px}
|
||||
.av-opt{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;color:var(--soft)}
|
||||
.copybox{background:var(--cream);border:1px dashed var(--sage);border-radius:12px;padding:16px;font-size:13px;color:var(--ink);line-height:1.7;white-space:pre-wrap}
|
||||
.copybox b{color:var(--herbal)}
|
||||
|
||||
/* covers */
|
||||
.covers{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
|
||||
.cover-tpl{border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1.5/1;display:flex;flex-direction:column;justify-content:space-between;padding:20px;position:relative;color:#fff}
|
||||
.cover-tpl .lbl{font-size:11px;letter-spacing:3px;text-transform:uppercase;opacity:.85;display:flex;align-items:center;gap:7px}
|
||||
.cover-tpl .hl{font-family:Georgia,serif;font-size:20px;line-height:1.2}
|
||||
.cover-tpl .lg{font-size:10px;letter-spacing:1px;opacity:.8;display:flex;align-items:center;gap:6px}
|
||||
.cover-tpl .bgleaf{position:absolute;right:-20px;bottom:-30px;opacity:.13}
|
||||
.tags{margin-top:8px}
|
||||
.pill{display:inline-flex;align-items:center;gap:5px;background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:4px 11px;font-size:11px;color:var(--herbal);margin:3px 4px 0 0}
|
||||
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
|
||||
@media(max-width:860px){.cols,.two{grid-template-columns:1fr}.grid3{grid-template-columns:1fr}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<svg width="0" height="0" style="position:absolute">
|
||||
<symbol id="i-leaf" viewBox="0 0 24 24"><path d="M5 19C5 11 11 5 20 5c0 9-6 14-14 14z"/><path d="M5 19c4-1 7-4 9-8"/></symbol>
|
||||
<symbol id="i-bowl" viewBox="0 0 24 24"><path d="M3 11h18a9 9 0 0 1-18 0z"/><path d="M2 11h20"/><path d="M9 7c0-1.5 1-2 1-3M13 7c0-1.5 1-2 1-3"/></symbol>
|
||||
<symbol id="i-spark" viewBox="0 0 24 24"><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/></symbol>
|
||||
<symbol id="i-video" viewBox="0 0 24 24"><rect x="3" y="6" width="13" height="12" rx="2"/><path d="M16 10l5-3v10l-5-3z"/></symbol>
|
||||
<symbol id="i-book" viewBox="0 0 24 24"><path d="M12 6c-2-1.5-5-1.5-7-1v13c2-.5 5-.5 7 1 2-1.5 5-1.5 7-1V5c-2-.5-5-.5-7 1z"/><path d="M12 6v13"/></symbol>
|
||||
<symbol id="i-fire" viewBox="0 0 24 24"><path d="M12 3c1 3 4 4 4 8a4 4 0 0 1-8 0c0-1 .5-2 1-2.5C9 11 12 8 12 3z"/></symbol>
|
||||
<symbol id="i-heart" viewBox="0 0 24 24"><path d="M12 20S4 14.5 4 9a4 4 0 0 1 8-1 4 4 0 0 1 8 1c0 5.5-8 11-8 11z"/></symbol>
|
||||
</svg>
|
||||
|
||||
<header>
|
||||
<div class="k">VIZELBERG · Channel Rebrand</div>
|
||||
<h1>Ребрендинг Telegram-канала</h1>
|
||||
<p>@natali_amrita → единый фирменный стиль</p>
|
||||
</header>
|
||||
|
||||
<!-- BEFORE/AFTER + PHONE -->
|
||||
<div class="sec"><div class="wrap">
|
||||
<h2>Как будет выглядеть канал</h2>
|
||||
<div class="d">Имя автора сохраняем (Наталья Визельберг), визуал и описание приводим к брендбуку. Аватар — фирменный листок, шапка постов — единые обложки.</div>
|
||||
<div class="cols">
|
||||
|
||||
<div class="phone"><div class="tg">
|
||||
<div class="cover">
|
||||
<svg class="leaf" width="130" height="130" viewBox="0 0 24 24"><path d="M5 19C5 11 11 5 20 5c0 9-6 14-14 14z" fill="#C9A24B"/></svg>
|
||||
<div class="av"><svg class="ic ic-lg"><use href="#i-leaf"/></svg></div>
|
||||
<div class="nm">Наталья Визельберг</div>
|
||||
<div class="sl">нутрициология здоровья</div>
|
||||
<div class="subs">632 подписчика</div>
|
||||
</div>
|
||||
<div class="desc">
|
||||
<b>Клинический нутрициолог.</b> Помогаю восстановить здоровье и энергию через питание, движение и образ жизни — спокойно, по шагам, без диет и чувства вины. 🌿<br>
|
||||
Разборы тарелки · привычки · восточный взгляд на тело<br>
|
||||
Программы и консультации → <span class="lnk">vizelberg.ru</span>
|
||||
</div>
|
||||
<div class="posts">
|
||||
<div class="pcard"><div class="pc" style="background:var(--herbal)"><svg class="ic"><use href="#i-bowl"/></svg><b style="font-family:Georgia,serif">Разбор тарелки: сыр и кисломолочка</b></div><div class="pt">Как сочетать без вреда для ЖКТ →</div></div>
|
||||
<div class="pcard"><div class="pc" style="background:var(--sage)"><svg class="ic"><use href="#i-fire"/></svg><b style="font-family:Georgia,serif">Привычка недели</b></div><div class="pt">Белковый перекус в 17:00 →</div></div>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
<div>
|
||||
<div class="grid3">
|
||||
<div class="card av-opt"><div class="t" style="margin:0">тёмный</div>
|
||||
<svg width="92" height="92" viewBox="0 0 120 120"><circle cx="60" cy="60" r="56" fill="#2F4A3C"/><circle cx="60" cy="58" r="30" fill="#C9A24B"/><path d="M44 50 C44 38 52 30 66 30 C62 44 56 52 44 58 Z" fill="#2F4A3C"/></svg>
|
||||
основной
|
||||
</div>
|
||||
<div class="card av-opt"><div class="t" style="margin:0">шалфей</div>
|
||||
<svg width="92" height="92" viewBox="0 0 120 120"><circle cx="60" cy="60" r="56" fill="#7C9070"/><path d="M42 50 C42 36 52 26 68 26 C63 42 55 52 42 58 Z" fill="#F5EFE6"/></svg>
|
||||
альтернатива
|
||||
</div>
|
||||
<div class="card av-opt"><div class="t" style="margin:0">крем</div>
|
||||
<svg width="92" height="92" viewBox="0 0 120 120"><circle cx="60" cy="60" r="56" fill="#F5EFE6" stroke="#C9A24B" stroke-width="2"/><circle cx="60" cy="58" r="30" fill="#C9A24B"/><path d="M44 50 C44 38 52 30 66 30 C62 44 56 52 44 58 Z" fill="#2F4A3C"/></svg>
|
||||
премиум
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-top:16px">
|
||||
<div class="t">Готовое описание канала (копировать)</div>
|
||||
<div class="copybox"><b>Наталья Визельберг · нутрициология здоровья</b>
|
||||
|
||||
Клинический нутрициолог. Помогаю восстановить здоровье и энергию через питание, движение и образ жизни — спокойно, по шагам, без диет и чувства вины. 🌿
|
||||
|
||||
🍽 Разборы тарелки и сочетания продуктов
|
||||
🌱 Привычки и восточный взгляд на тело
|
||||
📋 Программы сопровождения и консультации
|
||||
|
||||
Записаться → vizelberg.ru</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
<!-- POST COVER TEMPLATES -->
|
||||
<div class="sec" style="background:#fff"><div class="wrap">
|
||||
<h2>Шаблоны обложек постов</h2>
|
||||
<div class="d">4 рубрики в едином стиле — узнаваемость ленты. Монохромная иконка + рубрика + заголовок + лого-замок.</div>
|
||||
<div class="covers">
|
||||
<div class="cover-tpl" style="background:var(--herbal)">
|
||||
<svg class="bgleaf" width="120" height="120" viewBox="0 0 24 24"><path d="M5 19C5 11 11 5 20 5c0 9-6 14-14 14z" fill="#C9A24B"/></svg>
|
||||
<div class="lbl"><svg class="ic ic-sm"><use href="#i-bowl"/></svg> Разбор тарелки</div>
|
||||
<div class="hl">Как правильно есть<br>сыр и кисломолочку</div>
|
||||
<div class="lg"><svg class="ic ic-sm"><use href="#i-leaf"/></svg> vizelberg</div>
|
||||
</div>
|
||||
<div class="cover-tpl" style="background:var(--sage)">
|
||||
<svg class="bgleaf" width="120" height="120" viewBox="0 0 24 24"><path d="M5 19C5 11 11 5 20 5c0 9-6 14-14 14z" fill="#F5EFE6"/></svg>
|
||||
<div class="lbl"><svg class="ic ic-sm"><use href="#i-fire"/></svg> Привычка недели</div>
|
||||
<div class="hl">Белковый перекус,<br>чтобы не сорваться вечером</div>
|
||||
<div class="lg"><svg class="ic ic-sm"><use href="#i-leaf"/></svg> vizelberg</div>
|
||||
</div>
|
||||
<div class="cover-tpl" style="background:var(--terra);color:#3a2e10">
|
||||
<svg class="bgleaf" width="120" height="120" viewBox="0 0 24 24"><path d="M5 19C5 11 11 5 20 5c0 9-6 14-14 14z" fill="#2F4A3C"/></svg>
|
||||
<div class="lbl" style="opacity:.7"><svg class="ic ic-sm"><use href="#i-book"/></svg> Рецепт</div>
|
||||
<div class="hl">Ароматный бульон:<br>3 секрета насыщенности</div>
|
||||
<div class="lg" style="opacity:.7"><svg class="ic ic-sm"><use href="#i-leaf"/></svg> vizelberg</div>
|
||||
</div>
|
||||
<div class="cover-tpl" style="background:#3c5b4a">
|
||||
<svg class="bgleaf" width="120" height="120" viewBox="0 0 24 24"><path d="M5 19C5 11 11 5 20 5c0 9-6 14-14 14z" fill="#C9A24B"/></svg>
|
||||
<div class="lbl"><svg class="ic ic-sm"><use href="#i-video"/></svg> Эфир / Q&A</div>
|
||||
<div class="hl">Долголетие и энергия:<br>с чего начать</div>
|
||||
<div class="lg"><svg class="ic ic-sm"><use href="#i-leaf"/></svg> vizelberg</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
<!-- GUIDELINES -->
|
||||
<div class="sec"><div class="wrap">
|
||||
<h2>Правила оформления ленты</h2>
|
||||
<div class="two">
|
||||
<div class="card">
|
||||
<div class="t">Рубрики (хэштеги)</div>
|
||||
<div class="tags">
|
||||
<span class="pill"><svg class="ic ic-sm"><use href="#i-bowl"/></svg> #разбор_тарелки</span>
|
||||
<span class="pill"><svg class="ic ic-sm"><use href="#i-fire"/></svg> #привычка_недели</span>
|
||||
<span class="pill"><svg class="ic ic-sm"><use href="#i-book"/></svg> #рецепт</span>
|
||||
<span class="pill"><svg class="ic ic-sm"><use href="#i-video"/></svg> #эфир</span>
|
||||
<span class="pill"><svg class="ic ic-sm"><use href="#i-heart"/></svg> #долголетие</span>
|
||||
</div>
|
||||
<div class="t" style="margin-top:18px">Принципы</div>
|
||||
<ul style="font-size:13px;color:#3a463f;list-style:none">
|
||||
<li style="padding:5px 0;border-bottom:1px dashed var(--line)">· Каждый пост — фирменная обложка с рубрикой</li>
|
||||
<li style="padding:5px 0;border-bottom:1px dashed var(--line)">· Палитра: травяной/шалфей фон, золото/крем акцент</li>
|
||||
<li style="padding:5px 0;border-bottom:1px dashed var(--line)">· Только монохромные иконки бренда, без сторонних эмодзи-наборов</li>
|
||||
<li style="padding:5px 0">· Тон: тёплый эксперт, без запугивания и «срочно худей»</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="t">Что меняем сейчас</div>
|
||||
<ul style="font-size:13px;color:#3a463f;list-style:none">
|
||||
<li style="padding:7px 0;border-bottom:1px dashed var(--line)">✓ Аватар → фирменный листок</li>
|
||||
<li style="padding:7px 0;border-bottom:1px dashed var(--line)">✓ Описание → новый текст в ToV бренда</li>
|
||||
<li style="padding:7px 0;border-bottom:1px dashed var(--line)">✓ Обложки постов → 4 шаблона рубрик</li>
|
||||
<li style="padding:7px 0;border-bottom:1px dashed var(--line)">✓ Ссылка taplink → vizelberg.ru (свой домен)</li>
|
||||
<li style="padding:7px 0">○ Юзернейм @natali_amrita — решить отдельно (оставить / @vizelberg)</li>
|
||||
</ul>
|
||||
<div class="copybox" style="margin-top:14px;font-size:12.5px">💡 Имя автора «Наталья Визельберг» оставляем — это и доверие, и реальная фамилия. Бренд VIZELBERG выстраивается вокруг неё.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
<div style="padding:36px 0;text-align:center;color:#5d6b62;font-size:13px">VIZELBERG · Channel Rebrand Kit · 2026 — превью на системных шрифтах</div>
|
||||
</body>
|
||||
</html>
|
||||
18
index.html
18
index.html
@ -80,6 +80,24 @@
|
||||
<p>Статичный обзор всех экранов клиентского приложения + монохромный icon-set.</p>
|
||||
<span class="tag">смотреть →</span>
|
||||
</a>
|
||||
<a class="card" href="anketa.html">
|
||||
<div class="ico" style="background:var(--terra)"><svg class="ic"><use href="#i-book"/></svg></div>
|
||||
<h3>Анкета нового клиента</h3>
|
||||
<p>Интерактивный опросник с голосовым вводом (микрофон) и примером заполнения. Готова к алгоритму обработки.</p>
|
||||
<span class="tag">интерактив →</span>
|
||||
</a>
|
||||
<a class="card" href="channel_kit.html">
|
||||
<div class="ico" style="background:var(--gold)"><svg class="ic"><use href="#i-book"/></svg></div>
|
||||
<h3>Ребрендинг Telegram-канала</h3>
|
||||
<p>Аватар, описание, обложки постов по рубрикам — оформление канала под бренд.</p>
|
||||
<span class="tag">смотреть →</span>
|
||||
</a>
|
||||
<a class="card" href="protocol.html">
|
||||
<div class="ico" style="background:var(--herbal)"><svg class="ic"><use href="#i-users"/></svg></div>
|
||||
<h3>Протокол взаимодействия</h3>
|
||||
<p>Роли, матрица решений, цикл работы Заказчик ↔ Claude, стоп-условия. Для согласования процесса.</p>
|
||||
<span class="tag">читать →</span>
|
||||
</a>
|
||||
</div></div>
|
||||
|
||||
<footer>VIZELBERG · Prototype Gallery · 2026</footer>
|
||||
|
||||
111
protocol.html
Normal file
111
protocol.html
Normal file
@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>VIZELBERG — Протокол взаимодействия</title>
|
||||
<style>
|
||||
:root{--sage:#7C9070;--herbal:#2F4A3C;--cream:#F5EFE6;--terra:#E8A87C;--gold:#C9A24B;--ink:#23302a;--line:rgba(47,74,60,.12);--soft:#8a978d}
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
body{font-family:'Segoe UI',-apple-system,Roboto,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6}
|
||||
.wrap{max-width:900px;margin:0 auto;padding:0 24px}
|
||||
header{background:var(--herbal);color:var(--cream);padding:50px 0;text-align:center}
|
||||
header .k{font-size:12px;letter-spacing:6px;color:var(--gold);text-transform:uppercase}
|
||||
header h1{font-family:Georgia,serif;font-size:26px;margin-top:10px}
|
||||
header p{color:var(--sage);margin-top:8px;font-size:14px}
|
||||
.sec{padding:40px 0;border-bottom:1px solid var(--line)}
|
||||
.kick{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);font-weight:700}
|
||||
h2{font-family:Georgia,serif;font-size:21px;color:var(--herbal);margin:6px 0 16px}
|
||||
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
|
||||
.role{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
|
||||
.role .ico{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:12px;font-size:20px}
|
||||
.role h3{color:var(--herbal);font-size:16px;margin-bottom:6px}
|
||||
.role p{font-size:13px;color:#5d6b62}
|
||||
.role .tag{display:inline-block;margin-top:10px;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gold)}
|
||||
table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
|
||||
th{background:var(--herbal);color:var(--cream);text-align:left;font-size:12px;padding:11px 14px;font-weight:600}
|
||||
td{padding:11px 14px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:top}
|
||||
td b{color:var(--herbal)}
|
||||
.who-n{color:#3c5b4a;font-weight:700}.who-c{color:var(--gold);font-weight:700}.who-r{color:var(--terra);font-weight:700}
|
||||
.flow{display:flex;flex-direction:column;gap:10px}
|
||||
.step{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
|
||||
.step .n{width:30px;height:30px;border-radius:50%;background:var(--sage);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
|
||||
.step b{color:var(--herbal)}
|
||||
.step small{color:var(--soft)}
|
||||
.stop{background:#fff;border:1px solid rgba(192,88,79,.4);border-left:4px solid #c0584f;border-radius:12px;padding:16px;margin-bottom:10px}
|
||||
.stop b{color:#a8453c}
|
||||
ul.clean{list-style:none}ul.clean li{padding:7px 0;border-bottom:1px dashed var(--line);font-size:14px}
|
||||
ul.clean li:before{content:"›";color:var(--gold);font-weight:700;margin-right:8px}
|
||||
.note{background:var(--cream);border:1px dashed var(--sage);border-radius:12px;padding:16px;font-size:13.5px;margin-top:14px}
|
||||
@media(max-width:720px){.roles{grid-template-columns:1fr}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="k">VIZELBERG · Operating Protocol</div>
|
||||
<h1>Протокол взаимодействия</h1>
|
||||
<p>Заказчик ↔ Claude напрямую · Руслан — реализация</p>
|
||||
</header>
|
||||
|
||||
<div class="sec"><div class="wrap">
|
||||
<div class="kick">01 · Роли</div>
|
||||
<h2>Кто за что отвечает</h2>
|
||||
<div class="roles">
|
||||
<div class="role"><div class="ico" style="background:#3c5b4a">Н</div><h3>Наталья (Заказчик)</h3><p>Источник экспертизы и контента: цели, тексты, медицинская правота, обратная связь. Общается голосом или текстом.</p><div class="tag">решает: контент и экспертиза</div></div>
|
||||
<div class="role"><div class="ico" style="background:#C9A24B;color:#3a2e10">C</div><h3>Claude (Исполнитель)</h3><p>Дизайн, прототипы, тексты, обработка анкет, обновление мокапов на GitHub. Уточняет минимально, показывает результат ссылкой.</p><div class="tag">делает: продукт и дизайн</div></div>
|
||||
<div class="role"><div class="ico" style="background:#E8A87C;color:#3a2e10">Р</div><h3>Руслан (Реализация)</h3><p>Приоритеты, бюджет, доступы и секреты, деплой в прод, юр-вопросы, финальный sign-off, арбитр спорных решений.</p><div class="tag">владеет: реализация и деньги</div></div>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
<div class="sec"><div class="wrap">
|
||||
<div class="kick">02 · Кто что решает</div>
|
||||
<h2>Матрица решений</h2>
|
||||
<table>
|
||||
<tr><th>Вопрос</th><th>Решает</th><th>Роль остальных</th></tr>
|
||||
<tr><td><b>Контент, тексты, экспертные правки</b></td><td class="who-n">Наталья</td><td>Claude выполняет</td></tr>
|
||||
<tr><td><b>Дизайн / UX внутри утверждённого бренда</b></td><td class="who-c">Claude</td><td>Наталья согласует, Руслан в копии</td></tr>
|
||||
<tr><td><b>Бренд, нейминг, слоган, цены, скоуп</b></td><td class="who-r">Руслан</td><td>Claude предлагает, Наталья высказывается</td></tr>
|
||||
<tr><td><b>Деньги, интеграции, доступы, деплой в прод</b></td><td class="who-r">Руслан</td><td>Claude помечает флагом</td></tr>
|
||||
<tr><td><b>Персональные данные клиентов, юр/оферта/ПДн</b></td><td class="who-r">Руслан</td><td>Claude не публикует без разрешения</td></tr>
|
||||
<tr><td><b>Техническая реализация и инфраструктура</b></td><td class="who-r">Руслан</td><td>Claude отдаёт готовые артефакты</td></tr>
|
||||
</table>
|
||||
</div></div>
|
||||
|
||||
<div class="sec"><div class="wrap">
|
||||
<div class="kick">03 · Цикл работы</div>
|
||||
<h2>Как идёт один запрос</h2>
|
||||
<div class="flow">
|
||||
<div class="step"><div class="n">1</div><div><b>Запрос</b> — Наталья формулирует задачу голосом или текстом в общем канале (что нужно, зачем). <small>Голос → транскрипт автоматически.</small></div></div>
|
||||
<div class="step"><div class="n">2</div><div><b>Уточнение</b> — Claude задаёт максимум 1–2 вопроса, только если без них нельзя. Иначе сразу делает.</div></div>
|
||||
<div class="step"><div class="n">3</div><div><b>Исполнение + публикация</b> — Claude выполняет и <b>сразу обновляет мокапы на GitHub</b>, присылает живую ссылку.</div></div>
|
||||
<div class="step"><div class="n">4</div><div><b>Проверка</b> — Наталья смотрит с телефона по ссылке, даёт правки (голосом). Итерируем до «ок».</div></div>
|
||||
<div class="step"><div class="n">5</div><div><b>Эскалация</b> — если задача задевает бренд/деньги/доступы/ПДн → Claude поднимает Руслану, ждёт решения.</div></div>
|
||||
<div class="step"><div class="n">6</div><div><b>Дайджест</b> — раз в неделю Claude присылает Руслану сводку: что сделано, что в работе, где нужно решение.</div></div>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
<div class="sec"><div class="wrap">
|
||||
<div class="kick">04 · Стоп-условия</div>
|
||||
<h2>Когда Claude обязан остановиться и спросить Руслана</h2>
|
||||
<div class="stop"><b>Деньги/доступы.</b> Любая интеграция, требующая ключей, оплат, аккаунтов, токенов.</div>
|
||||
<div class="stop"><b>Бренд/скоуп.</b> Смена имени, слогана, палитры, цен, расширение проекта за рамки.</div>
|
||||
<div class="stop"><b>Персональные данные.</b> Публикация/хранение данных реальных клиентов, медицинских сведений.</div>
|
||||
<div class="stop"><b>Право.</b> Оферта, договор, согласие на обработку ПДн, регуляторика нутрициологии.</div>
|
||||
</div></div>
|
||||
|
||||
<div class="sec"><div class="wrap">
|
||||
<div class="kick">05 · Каналы и правила</div>
|
||||
<h2>Как технически устроен «прямой канал»</h2>
|
||||
<ul class="clean">
|
||||
<li><b>Вариант A (быстро):</b> Наталья работает в общем проекте Claude — пишет/наговаривает запросы, видит ответы и ссылки.</li>
|
||||
<li><b>Вариант B (удобнее ей):</b> Telegram-бот-мост — её голосовые → транскрипт → Claude → ответ ссылкой. Руслан в том же чате как наблюдатель.</li>
|
||||
<li><b>Единый источник правды:</b> прототипы на GitHub Pages — всегда актуальны, открываются с любого устройства.</li>
|
||||
<li><b>Каждое обновление Claude</b> автоматически уходит на GitHub (правило включено).</li>
|
||||
<li><b>Язык общения с Натальей</b> — простой, без терминов; Claude переводит её пожелания в продукт.</li>
|
||||
</ul>
|
||||
<div class="note">💡 Рекомендация: начать с <b>Варианта A</b> (ноль настройки), а Telegram-мост (Вариант B) подключить, когда поток запросов станет регулярным — он удобнее для голосовых.</div>
|
||||
</div></div>
|
||||
|
||||
<div style="padding:36px 0;text-align:center;color:#5d6b62;font-size:13px">VIZELBERG · Operating Protocol v1.0 · 2026</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user