feat: лендинг как main.html + новый бот @wasrusgen1_cons_bot в ссылках

This commit is contained in:
wasrusgen 2026-06-03 18:41:21 +03:00
parent 0a335d0075
commit 8ca8076e5b
2 changed files with 375 additions and 2 deletions

View File

@ -309,7 +309,7 @@ function showOpLogin(){
<input id="opPass" type="password" placeholder="Пароль оператора" style="width:100%;border:1.5px solid #E5E7EB;border-radius:10px;padding:11px 13px;font-size:14px;font-family:Inter;outline:none;box-sizing:border-box" onkeydown="if(event.key==='Enter')doOpLogin()">
<div id="opErr" style="color:#DC2626;font-size:12px;margin-top:7px;min-height:14px"></div>
<button onclick="doOpLogin()" style="width:100%;margin-top:6px;padding:12px;background:#047857;color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;font-family:Inter;cursor:pointer">Войти →</button>
<div style="font-size:11px;color:#9CA3AF;margin-top:14px;text-align:center">Или в Telegram: <b>@wasrusgen1_consulting_bot</b> → /start</div>
<div style="font-size:11px;color:#9CA3AF;margin-top:14px;text-align:center">Или в Telegram: <b>@wasrusgen1_cons_bot</b> → /start</div>
</div></div>`;
}
async function doOpLogin(){
@ -740,7 +740,7 @@ async function sugUpdate(id,fields){
state.suggestions=d.suggestions||state.suggestions;if(mainTab==='suggestions')renderClient();toast('Сохранено','ok');
}catch(e){toast('Ошибка: '+e.message,'err');}
}
function inviteTelegram(){const url=`https://t.me/wasrusgen1_consulting_bot?start=${current}`;navigator.clipboard.writeText(url).then(()=>alert("Ссылка для Telegram скопирована:\n\n"+url+"\n\nКлиент откроет кабинет прямо в Telegram.")).catch(()=>prompt("Ссылка для Telegram:",url));}
function inviteTelegram(){const url=`https://t.me/wasrusgen1_cons_bot?start=${current}`;navigator.clipboard.writeText(url).then(()=>alert("Ссылка для Telegram скопирована:\n\n"+url+"\n\nКлиент откроет кабинет прямо в Telegram.")).catch(()=>prompt("Ссылка для Telegram:",url));}
async function setBilling(t){
state.crm=state.crm||{};state.crm.billing_type=t;
await fetch(`${API}/api/project/crm`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({token:current,billing_type:t})});

373
docs/main.html Normal file
View File

@ -0,0 +1,373 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI КОНСАЛТИНГ CRM — @wasrusgen1</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@700;800&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0F172A;
--bg2: #1E293B;
--bg3: #0D1B2A;
--accent: #10B981;
--accent2: #047857;
--accent3: #34D399;
--text: #F1F5F9;
--muted: #94A3B8;
--border: #334155;
}
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1,h2,h3 { font-family: 'Montserrat', sans-serif; }
a { text-decoration: none; color: inherit; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
/* NAV */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: rgba(15,23,42,0.85); backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
padding: 0 24px;
height: 64px; display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 20px; color: var(--accent); letter-spacing: -0.5px; }
.nav-logo span { color: var(--text); }
.nav-links { display: flex; gap: 32px; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--muted); transition: color 0.2s; }
.nav-links a:hover { color: var(--text); }
.nav-cta { background: var(--accent); color: #fff; padding: 8px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: background 0.2s; }
.nav-cta:hover { background: var(--accent2); color: #fff; }
/* HERO */
.hero {
min-height: 100vh;
background: linear-gradient(135deg, #064E3B 0%, #0F172A 50%, #0F172A 100%);
display: flex; align-items: center; justify-content: center;
text-align: center; padding: 80px 24px 60px;
position: relative; overflow: hidden;
}
.hero::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(16,185,129,0.12) 0%, transparent 70%);
}
.hero-content { position: relative; z-index: 1; max-width: 800px; }
.hero-badge {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.3);
color: var(--accent3); padding: 6px 16px; border-radius: 100px;
font-size: 13px; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 28px;
}
.hero-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: block; }
.hero h1 { font-size: clamp(32px, 6vw, 60px); font-weight: 800; line-height: 1.1; margin-bottom: 20px; letter-spacing: -1px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero p { font-size: clamp(16px, 2vw, 20px); color: var(--muted); max-width: 600px; margin: 0 auto 40px; }
.hero-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn-primary {
background: var(--accent); color: #fff; padding: 14px 32px; border-radius: 10px;
font-size: 16px; font-weight: 600; transition: all 0.2s;
box-shadow: 0 4px 20px rgba(16,185,129,0.3);
}
.btn-primary:hover { background: var(--accent2); transform: translateY(-1px); box-shadow: 0 8px 30px rgba(16,185,129,0.4); }
.btn-outline {
background: transparent; color: var(--text); padding: 14px 32px; border-radius: 10px;
font-size: 16px; font-weight: 600; border: 1px solid var(--border); transition: all 0.2s;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.hero-stat { display: flex; gap: 48px; justify-content: center; margin-top: 60px; padding-top: 40px; border-top: 1px solid var(--border); }
.stat-item { text-align: center; }
.stat-num { font-family: 'Montserrat', sans-serif; font-size: 28px; font-weight: 800; color: var(--accent); }
.stat-label { font-size: 13px; color: var(--muted); margin-top: 4px; }
/* SECTIONS */
section { padding: 96px 24px; }
.section-tag { font-size: 13px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; }
.section-title { font-size: clamp(26px, 4vw, 40px); font-weight: 800; margin-bottom: 16px; letter-spacing: -0.5px; }
.section-sub { font-size: 17px; color: var(--muted); max-width: 560px; }
/* PROBLEM */
.problem { background: var(--bg); }
.problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 56px; }
.problem-card {
background: var(--bg2); border: 1px solid var(--border); border-radius: 16px;
padding: 32px; position: relative; overflow: hidden;
}
.problem-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, #EF4444, #F97316);
}
.problem-icon { font-size: 32px; margin-bottom: 16px; }
.problem-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; font-family: 'Inter', sans-serif; }
.problem-card p { font-size: 14px; color: var(--muted); }
/* FEATURES */
.features { background: linear-gradient(180deg, #0A1628 0%, var(--bg) 100%); }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 56px; }
.feature-card {
background: var(--bg2); border: 1px solid var(--border); border-radius: 16px;
padding: 28px; transition: border-color 0.2s, transform 0.2s;
}
.feature-card:hover { border-color: rgba(16,185,129,0.4); transform: translateY(-2px); }
.feature-icon { width: 48px; height: 48px; background: rgba(16,185,129,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; }
.feature-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; font-family: 'Inter', sans-serif; }
.feature-card p { font-size: 14px; color: var(--muted); }
/* FUNNEL */
.funnel { background: var(--bg2); }
.funnel-flow { display: flex; align-items: flex-start; gap: 0; margin-top: 56px; overflow-x: auto; padding-bottom: 16px; }
.funnel-step {
flex: 1; min-width: 160px;
background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
padding: 24px 20px; text-align: center; position: relative;
}
.funnel-step.active { border-color: var(--accent); background: rgba(16,185,129,0.05); }
.funnel-arrow {
flex: 0 0 32px; display: flex; align-items: center; justify-content: center;
color: var(--accent); font-size: 20px; padding-top: 36px;
}
.funnel-num {
width: 32px; height: 32px; border-radius: 50%; background: rgba(16,185,129,0.15);
color: var(--accent); font-weight: 700; font-size: 14px;
display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
}
.funnel-step.active .funnel-num { background: var(--accent); color: #fff; }
.funnel-step h4 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.funnel-step p { font-size: 12px; color: var(--muted); line-height: 1.5; }
.funnel-desc { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
/* DEMO */
.demo { background: var(--bg); }
.demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 56px; }
.demo-card {
background: var(--bg2); border: 1px solid var(--border); border-radius: 16px;
padding: 28px; transition: all 0.2s;
}
.demo-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.2); }
.demo-num { font-family: 'Montserrat', sans-serif; font-size: 36px; font-weight: 800; color: rgba(16,185,129,0.2); margin-bottom: 16px; line-height: 1; }
.demo-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.demo-card p { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.demo-link {
display: inline-flex; align-items: center; gap: 6px;
color: var(--accent); font-size: 14px; font-weight: 600;
transition: gap 0.2s;
}
.demo-link:hover { gap: 10px; }
.demo-link::after { content: '→'; }
/* FOOTER */
footer {
background: var(--bg3); border-top: 1px solid var(--border);
padding: 48px 24px;
}
.footer-inner { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.footer-brand .logo { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 20px; color: var(--accent); }
.footer-brand p { font-size: 13px; color: var(--muted); margin-top: 6px; }
.footer-links { display: flex; gap: 24px; }
.footer-links a { font-size: 14px; color: var(--muted); transition: color 0.2s; }
.footer-links a:hover { color: var(--text); }
.footer-contact { font-size: 14px; color: var(--muted); }
.footer-contact a { color: var(--accent); }
.footer-bottom { max-width: 1120px; margin: 24px auto 0; padding-top: 24px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-bottom p { font-size: 13px; color: var(--muted); }
@media(max-width: 768px) {
.nav-links { display: none; }
.hero-stat { gap: 24px; flex-wrap: wrap; }
.funnel-flow { flex-wrap: nowrap; }
.footer-inner { justify-content: center; text-align: center; }
.footer-links { justify-content: center; }
.footer-bottom { justify-content: center; }
}
</style>
</head>
<body>
<!-- NAV -->
<nav>
<div class="nav-logo" style="display:flex;align-items:center;gap:10px;font-size:18px">
<span style="width:30px;height:30px;background:#047857;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></span>
<span style="line-height:1"><span style="color:#9CA3AF;font-weight:700;letter-spacing:-.3px">@wasrusgen1</span> <span style="color:#0F0F1A;font-weight:800;letter-spacing:-.5px">КОНСАЛТИНГ</span></span>
</div>
<div class="nav-links">
<a href="#problem">Проблема</a>
<a href="#features">Возможности</a>
<a href="#funnel">Воронка</a>
<a href="#demo">Демо</a>
</div>
<a href="https://wasrusgen1.ru/consulting/cabinet.html?src=landing" target="_blank" class="nav-cta">Открыть систему</a>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-content">
<div class="hero-badge">AI КОНСАЛТИНГ ПЛАТФОРМА</div>
<h1>AI-Ассистент для<br><em>консалтингового</em> бизнеса</h1>
<p>Структурирует сбор информации о клиенте. Ведёт через все этапы проекта. Готовит документы.</p>
<div class="hero-btns">
<a href="#demo" class="btn-primary">Посмотреть демо</a>
<a href="https://wasrusgen1.ru/consulting/cabinet.html?src=landing" target="_blank" class="btn-outline">Открыть систему</a>
</div>
<div class="hero-stat">
<div class="stat-item">
<div class="stat-num">5</div>
<div class="stat-label">фаз проекта</div>
</div>
<div class="stat-item">
<div class="stat-num">AI</div>
<div class="stat-label">ассистент Елена</div>
</div>
<div class="stat-item">
<div class="stat-num">0</div>
<div class="stat-label">ручных документов</div>
</div>
</div>
</div>
</section>
<!-- PROBLEM -->
<section class="problem" id="problem">
<div class="container">
<div class="section-tag">Проблема</div>
<h2 class="section-title">Почему консалтинг теряет деньги</h2>
<p class="section-sub">Три системных проблемы, которые съедают время и снижают качество работы с клиентами</p>
<div class="problem-grid">
<div class="problem-card">
<div class="problem-icon">🗣️</div>
<h3>Клиент рассказывает обо всём, кроме сути</h3>
<p>Первичная встреча превращается в монолог без структуры. Консультант получает 80% нерелевантной информации и 20% нужной.</p>
</div>
<div class="problem-card">
<div class="problem-icon">📋</div>
<h3>Нет структуры сбора информации</h3>
<p>Каждый проект начинается с нуля. Нет единого шаблона брифа, нет контрольного списка вопросов, нет истории диалога.</p>
</div>
<div class="problem-card">
<div class="problem-icon">📝</div>
<h3>Документы готовятся вручную</h3>
<p>ТЗ, договоры, отчёты — каждый раз копипаст из предыдущих проектов. Занимает часы, в которые можно работать с клиентами.</p>
</div>
</div>
</div>
</section>
<!-- FEATURES -->
<section class="features" id="features">
<div class="container">
<div class="section-tag">Решение</div>
<h2 class="section-title">Возможности платформы</h2>
<p class="section-sub">Всё что нужно для системной работы с клиентами — в одном месте</p>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🎙️</div>
<h3>Первичный бриф с голосом</h3>
<p>5 структурированных блоков с поддержкой голосового ввода. Клиент говорит — система записывает и структурирует.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🤖</div>
<h3>AI-ассистент с ограничениями</h3>
<p>Ассистент Елена ведёт диалог строго в рамках задачи. Не уходит в сторону, фокусирует клиента на главном.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📊</div>
<h3>Структурированное интервью</h3>
<p>Система вопросов с прогрессом прохождения. Все ответы сохраняются, можно продолжить в любой момент.</p>
</div>
<div class="feature-card">
<div class="feature-icon">📄</div>
<h3>Генерация ТЗ и договоров</h3>
<p>Документы автоматически формируются из данных карточки клиента. Редактирование и экспорт одним кликом.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🗂️</div>
<h3>CRM с воронкой проекта</h3>
<p>Каждый клиент проходит 5 фаз: от первичного анализа до сопровождения. Статус всегда виден в кабинете.</p>
</div>
</div>
</div>
</section>
<!-- FUNNEL -->
<section class="funnel" id="funnel">
<div class="container">
<div class="section-tag">Воронка проекта</div>
<h2 class="section-title">5 фаз работы с клиентом</h2>
<p class="section-sub">Стандартизированный процесс от первого контакта до долгосрочного сопровождения</p>
<div class="funnel-flow">
<div class="funnel-step">
<div class="funnel-num">1</div>
<h4>AS-IS</h4>
<p>Анализ текущего состояния бизнеса клиента</p>
</div>
<div class="funnel-arrow"></div>
<div class="funnel-step">
<div class="funnel-num">2</div>
<h4>Аудит</h4>
<p>Детальный разбор процессов, выявление узких мест</p>
</div>
<div class="funnel-arrow"></div>
<div class="funnel-step active">
<div class="funnel-num">3</div>
<h4>TO-BE</h4>
<p>Проектирование целевого состояния</p>
</div>
<div class="funnel-arrow"></div>
<div class="funnel-step">
<div class="funnel-num">4</div>
<h4>Внедрение</h4>
<p>Реализация изменений, обучение команды</p>
</div>
<div class="funnel-arrow"></div>
<div class="funnel-step">
<div class="funnel-num">5</div>
<h4>Сопровождение</h4>
<p>Поддержка, контроль результатов, доработки</p>
</div>
</div>
</div>
</section>
<!-- DEMO -->
<section class="demo" id="demo">
<div class="container">
<div class="section-tag">Демо</div>
<h2 class="section-title">Посмотрите систему в работе</h2>
<p class="section-sub">Откройте кабинет и начните бесплатную диагностику — прямо сейчас</p>
<div class="demo-grid">
<div class="demo-card">
<div class="demo-num">01</div>
<h3>Кабинет клиента</h3>
<p>Workspace с чатом AI-ассистента Елены, брифом и интервью</p>
<a href="https://wasrusgen1.ru/consulting/cabinet.html?src=landing" target="_blank" class="demo-link">Открыть</a>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footer-inner">
<div class="footer-brand">
<div class="logo">@wasrusgen1</div>
<p>AI-консалтинг для производственного бизнеса</p>
</div>
<div class="footer-links">
<a href="#problem">Проблема</a>
<a href="#features">Возможности</a>
<a href="#funnel">Воронка</a>
<a href="#demo">Демо</a>
</div>
<div class="footer-contact">
ИП Васильев Р.Г. &nbsp;|&nbsp; <a href="https://wasrusgen1.ru/consulting/cabinet.html?src=landing" target="_blank">wasrusgen1.ru</a>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 @wasrusgen1 — AI КОНСАЛТИНГ CRM</p>
<p>Все права защищены</p>
</div>
</footer>
</body>
</html>