dsrptlab/test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move prototype to standalone iframe page and align phone right

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-02-10 16:07:32 +07:00
parent 490631acd6
commit d69f2146df
2 changed files with 577 additions and 594 deletions
Download Patch File Download Diff File Expand all files Collapse all files

616
app/app.vue
View File

@@ -9,7 +9,7 @@
<main class="relative px-6 pb-16 pt-10 md:px-12 lg:px-20">
<div class="grid gap-8 lg:grid-cols-[220px_1fr]">
<aside class="hidden lg:block">
<div class="glass-panel sticky top-10 rounded-3xl border border-base-300 bg-base-100/90 p-5 shadow-soft">
<div class="glass-panel sticky top-10 rounded-3xl border border-base-300 p-5 shadow-soft">
<div class="text-xs uppercase tracking-[0.2em] text-neutral/50">Навигация</div>
<nav class="mt-4 space-y-2 text-sm">
<a class="nav-link block rounded-2xl px-3 py-2 text-neutral/70 border border-transparent" href="#context">Контекст</a>
@@ -54,21 +54,21 @@
</div>
<div class="slide-main">
<div class="grid gap-6 md:grid-cols-3 md:items-end">
<div class="glass-card rounded-3xl bg-base-100/90 p-6 shadow-soft md:translate-y-8">
<div class="glass-card rounded-3xl p-6 shadow-soft md:translate-y-8">
<h3 class="font-display text-2xl">Ожидания и реальность расходятся</h3>
<p class="mt-3 text-sm text-neutral/70">
Нет общего понимания результата: стороны по-разному трактуют «готово» и «качественно».
</p>
<p class="mt-3 text-xs text-neutral/60">Заказчик: не уверен, что «сделано правильно». Исполнитель: не понимает, как это доказать.</p>
</div>
<div class="glass-card rounded-3xl bg-base-100/90 p-6 shadow-soft md:translate-y-14">
<div class="glass-card rounded-3xl p-6 shadow-soft md:translate-y-14">
<h3 class="font-display text-2xl">Критерии не зафиксированы</h3>
<p class="mt-3 text-sm text-neutral/70">
Нет списка требований, допусков и контрольных точек — спор легко уходит в эмоции.
</p>
<p class="mt-3 text-xs text-neutral/60">Заказчик: нет прозрачной проверки. Исполнитель: нет единого регламента.</p>
</div>
<div class="glass-card rounded-3xl bg-base-100/90 p-6 shadow-soft md:translate-y-4">
<div class="glass-card rounded-3xl p-6 shadow-soft md:translate-y-4">
<h3 class="font-display text-2xl">Финансовый риск у обеих сторон</h3>
<p class="mt-3 text-sm text-neutral/70">
Платежи завязаны на доверии, а не на факте качества — обе стороны боятся потерь.
@@ -90,7 +90,7 @@
</p>
</div>
<div class="slide-main">
<div class="glass-panel rounded-3xl border border-base-300 bg-base-100/90 p-6">
<div class="glass-panel rounded-3xl border border-base-300 p-6">
<div class="text-xs font-semibold text-neutral/60">Пример регламентной приемки</div>
<div class="mt-4 grid grid-cols-[1.1fr_1.3fr_0.9fr_1fr] gap-3 text-sm">
<div class="rounded-2xl bg-base-200 px-4 py-3 font-semibold text-neutral/70">Работа</div>
@@ -128,21 +128,21 @@
</div>
<div class="slide-main">
<div class="grid gap-6 md:grid-cols-3">
<div class="glass-card rounded-3xl bg-base-100/90 p-6 shadow-soft">
<div class="glass-card rounded-3xl p-6 shadow-soft">
<div class="text-xs font-semibold text-neutral/60">Шаг 1</div>
<h3 class="mt-2 font-display text-2xl">Вход и расчет</h3>
<p class="mt-3 text-sm text-neutral/70">
Заказчик загружает объект, система сразу считает смету и формирует план.
</p>
</div>
<div class="glass-card rounded-3xl bg-base-100/90 p-6 shadow-soft">
<div class="glass-card rounded-3xl p-6 shadow-soft">
<div class="text-xs font-semibold text-neutral/60">Шаг 2</div>
<h3 class="mt-2 font-display text-2xl">Регламент и работа</h3>
<p class="mt-3 text-sm text-neutral/70">
Этапы и критерии фиксируются, исполнитель ведет работы по чек-листам.
</p>
</div>
<div class="glass-card rounded-3xl bg-base-100/90 p-6 shadow-soft">
<div class="glass-card rounded-3xl p-6 shadow-soft">
<div class="text-xs font-semibold text-neutral/60">Шаг 3</div>
<h3 class="mt-2 font-display text-2xl">Независимая проверка</h3>
<p class="mt-3 text-sm text-neutral/70">
@@ -164,14 +164,14 @@
</div>
<div class="slide-main">
<div class="grid gap-6 md:grid-cols-2">
<div class="glass-card rounded-3xl bg-base-100/90 p-6 shadow-soft">
<div class="glass-card rounded-3xl p-6 shadow-soft">
<h3 class="font-display text-2xl">Заказчик</h3>
<p class="mt-3 text-sm text-neutral/70">
Прозрачная смета, понятные критерии качества и независимая приемка. Деньги защищены
эскроу, а результат подтвержден экспертом.
</p>
</div>
<div class="glass-card rounded-3xl bg-base-100/90 p-6 shadow-soft">
<div class="glass-card rounded-3xl p-6 shadow-soft">
<h3 class="font-display text-2xl">Исполнитель</h3>
<p class="mt-3 text-sm text-neutral/70">
Четкий регламент работ, меньше спорных ситуаций и гарантированная оплата после проверки.
@@ -191,8 +191,8 @@
путь от объекта до понятной сметы, этапов и уведомлений. Окунитесь в то, как это может выглядеть.
</p>
</div>
<div class="slide-main">
<div class="relative flex justify-center">
<div class="slide-main items-end">
<div class="relative flex w-full justify-end">
<div class="iphone-frame shadow-glow">
<span class="iphone-button iphone-button--mute" aria-hidden="true"></span>
<span class="iphone-button iphone-button--vol-up" aria-hidden="true"></span>
@@ -203,7 +203,7 @@
<iframe
class="iphone-iframe"
title="Прототип пользовательского пути"
:srcdoc="prototypeSrcdoc"
src="/prototype.html"
></iframe>
</div>
</div>
@@ -221,11 +221,8 @@
</p>
</div>
<div class="slide-main">
<div class="glass-panel relative overflow-hidden rounded-3xl border border-base-300 bg-base-100/90 p-8">
<div class="pointer-events-none absolute -left-16 top-10 h-36 w-36 rounded-full bg-primary/15 blur-3xl"></div>
<div class="pointer-events-none absolute -right-10 bottom-0 h-40 w-40 rounded-full bg-secondary/20 blur-3xl"></div>
<div class="relative grid gap-6 md:grid-cols-3">
<div class="glass-card rounded-3xl bg-white/90 p-6 shadow-soft">
<div class="grid gap-6 md:grid-cols-3">
<div class="glass-card rounded-3xl p-6 shadow-soft">
<div class="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/15 text-primary">
<svg viewBox="0 0 24 24" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.6">
<path d="M12 3v18M7 7h5a3 3 0 1 1 0 6H9a3 3 0 1 0 0 6h5" />
@@ -234,7 +231,7 @@
<h3 class="font-display text-2xl">Комиссия эскроу</h3>
<p class="mt-3 text-sm text-neutral/70">Процент от подтвержденного этапа, удерживается сервисом.</p>
</div>
<div class="glass-card rounded-3xl bg-white/90 p-6 shadow-soft">
<div class="glass-card rounded-3xl p-6 shadow-soft">
<div class="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/15 text-primary">
<svg viewBox="0 0 24 24" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.6">
<path d="M4 20h16M6 20l2-10h8l2 10M9 10V6a3 3 0 0 1 6 0v4" />
@@ -243,7 +240,7 @@
<h3 class="font-display text-2xl">Инспекция</h3>
<p class="mt-3 text-sm text-neutral/70">Плата за выезд и экспертизу, инициирует заказчик.</p>
</div>
<div class="glass-card rounded-3xl bg-white/90 p-6 shadow-soft">
<div class="glass-card rounded-3xl p-6 shadow-soft">
<div class="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-2xl bg-primary/15 text-primary">
<svg viewBox="0 0 24 24" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.6">
<path d="M4 7h16l-2 10H6L4 7z" />
@@ -255,7 +252,6 @@
</div>
</div>
</div>
</div>
</section>
<section id="metrics" class="slide">
@@ -277,15 +273,15 @@
</p>
</div>
<div class="grid gap-4">
<div class="glass-card rounded-3xl border border-base-300 bg-base-100/90 p-6">
<div class="glass-card rounded-3xl border border-base-300 p-6">
<div class="text-xs font-semibold text-neutral/60">Качество</div>
<div class="mt-2 font-display text-xl">Доля зеленых приемок</div>
</div>
<div class="glass-card rounded-3xl border border-base-300 bg-base-100/90 p-6">
<div class="glass-card rounded-3xl border border-base-300 p-6">
<div class="text-xs font-semibold text-neutral/60">Скорость</div>
<div class="mt-2 font-display text-xl">Среднее время приемки этапа</div>
</div>
<div class="glass-card rounded-3xl border border-base-300 bg-base-100/90 p-6">
<div class="glass-card rounded-3xl border border-base-300 p-6">
<div class="text-xs font-semibold text-neutral/60">Точность</div>
<div class="mt-2 font-display text-xl">Отклонение сметы от факта</div>
</div>
@@ -304,7 +300,7 @@
</p>
</div>
<div class="slide-main">
<div class="glass-panel rounded-3xl border border-base-300 bg-base-100/90 p-6">
<div class="glass-panel rounded-3xl border border-base-300 p-6">
<div class="grid gap-4 text-sm">
<div class="grid grid-cols-6 gap-2 text-xs text-neutral/50">
<div>М1</div>
@@ -318,25 +314,25 @@
<div class="grid grid-cols-[160px_1fr] items-center gap-4">
<div class="text-neutral/70">Пилот и гипотезы</div>
<div class="grid grid-cols-6 gap-2">
<div class="col-span-2 rounded-full bg-primary/80 py-2 text-center text-xs text-primary-content">М1–М2</div>
<div class="col-span-4 rounded-full bg-base-200 py-2"></div>
<div class="col-span-2 rounded-full bg-primary py-2 text-center text-xs text-primary-content">М1–М2</div>
<div class="col-span-4 rounded-full bg-base-300/70 py-2"></div>
</div>
</div>
<div class="grid grid-cols-[160px_1fr] items-center gap-4">
<div class="text-neutral/70">Встраивание в процессы</div>
<div class="grid grid-cols-6 gap-2">
<div class="col-span-2 rounded-full bg-base-200 py-2"></div>
<div class="col-span-2 rounded-full bg-primary/80 py-2 text-center text-xs text-primary-content">М3–М4</div>
<div class="col-span-2 rounded-full bg-base-200 py-2"></div>
<div class="col-span-2 rounded-full bg-base-300/70 py-2"></div>
<div class="col-span-2 rounded-full bg-primary py-2 text-center text-xs text-primary-content">М3–М4</div>
<div class="col-span-2 rounded-full bg-base-300/70 py-2"></div>
</div>
</div>
<div class="grid grid-cols-[160px_1fr] items-center gap-4">
<div class="text-neutral/70">Масштабирование</div>
<div class="grid grid-cols-6 gap-2">
<div class="col-span-4 rounded-full bg-base-200 py-2"></div>
<div class="col-span-2 rounded-full bg-primary/80 py-2 text-center text-xs text-primary-content">М5–М6</div>
<div class="col-span-4 rounded-full bg-base-300/70 py-2"></div>
<div class="col-span-2 rounded-full bg-primary py-2 text-center text-xs text-primary-content">М5–М6</div>
</div>
</div>
</div>
@@ -374,539 +370,7 @@ useHead({
]
})
const prototypeSrcdoc = `<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Прототип</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&display=swap');
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
font-family: 'Manrope', system-ui, sans-serif;
color: #171717;
background: #f4f1eb;
}
.app {
height: 100%;
display: flex;
flex-direction: column;
gap: 12px;
padding: 34px 16px 18px;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(243, 239, 232, 0.92));
}
.status {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
color: #2d2d2d;
}
.pill {
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
background: rgba(26, 77, 122, 0.12);
color: #1a4d7a;
font-weight: 600;
}
.icons {
display: flex;
align-items: center;
gap: 6px;
}
.dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: #1a4d7a;
}
.progress {
position: relative;
height: 6px;
background: rgba(26, 77, 122, 0.12);
border-radius: 999px;
overflow: hidden;
}
.progress__bar {
position: absolute;
inset: 0;
width: 10%;
background: linear-gradient(90deg, #1a4d7a, #3f7fb0);
border-radius: inherit;
transition: width 0.35s ease;
}
.card {
background: rgba(255, 255, 255, 0.92);
border-radius: 18px;
border: 1px solid rgba(23, 23, 23, 0.08);
padding: 14px;
box-shadow: 0 12px 28px rgba(23, 23, 23, 0.08);
}
.card.main {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.eyebrow {
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(23, 23, 23, 0.5);
}
.title {
font-size: 20px;
font-weight: 700;
}
.subtitle {
font-size: 12px;
color: rgba(23, 23, 23, 0.64);
margin: 0;
}
.list {
display: grid;
gap: 8px;
margin-top: 4px;
}
.item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
border-radius: 12px;
background: #f0ece6;
font-size: 12px;
}
.item strong {
font-weight: 600;
}
.tag {
padding: 2px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
}
.tag.success {
background: rgba(31, 129, 84, 0.14);
color: #1f8154;
}
.tag.pending {
background: rgba(211, 135, 32, 0.15);
color: #b7741c;
}
.tag.info {
background: rgba(26, 77, 122, 0.14);
color: #1a4d7a;
}
.info-card {
font-size: 12px;
color: rgba(23, 23, 23, 0.7);
line-height: 1.4;
}
.actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.actions .btn {
border: none;
border-radius: 14px;
padding: 10px 12px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.actions .btn:active {
transform: scale(0.98);
}
.btn.primary {
background: #1a4d7a;
color: #fff;
box-shadow: 0 10px 20px rgba(26, 77, 122, 0.3);
grid-column: span 2;
}
.btn.secondary {
background: rgba(26, 77, 122, 0.12);
color: #1a4d7a;
}
.btn.ghost {
background: rgba(23, 23, 23, 0.06);
color: rgba(23, 23, 23, 0.75);
}
.btn[disabled] {
opacity: 0.45;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.cta-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.cta {
padding: 6px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
background: #1a4d7a;
color: #fff;
}
.cta.light {
background: rgba(26, 77, 122, 0.12);
color: #1a4d7a;
}
</style>
</head>
<body>
<div class="app">
<div class="status">
<div>9:41</div>
<div class="pill">Контроль ремонта</div>
<div class="icons">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<div class="progress">
<div class="progress__bar" id="progressBar"></div>
</div>
<div class="card main">
<div class="eyebrow" id="stepLabel"></div>
<div class="title" id="stepTitle"></div>
<p class="subtitle" id="stepSubtitle"></p>
<div id="stepContent"></div>
</div>
<div class="card info-card" id="helperCard"></div>
<div class="actions">
<button class="btn ghost" data-action="back">Назад</button>
<button class="btn secondary" data-action="primary">Добавить</button>
<button class="btn primary" data-action="next">Далее</button>
</div>
</div>
<script>
(function () {
var state = {
step: 0,
projectCreated: false,
addressAdded: false,
mediaAdded: false,
quoteApproved: false,
stageStarted: false,
accepted: false
};
function resetState() {
state.step = 0;
state.projectCreated = false;
state.addressAdded = false;
state.mediaAdded = false;
state.quoteApproved = false;
state.stageStarted = false;
state.accepted = false;
}
var steps = [
{
label: 'Шаг 1 из 6',
title: 'Старт проекта',
subtitle: 'Зафиксируйте объект, чтобы запустить сценарий.',
primaryLabel: 'Создать проект',
onPrimary: function () {
state.projectCreated = true;
},
ready: function () {
return state.projectCreated;
},
content: function () {
var status = state.projectCreated ? 'Проект создан' : 'Проект не создан';
var tagClass = state.projectCreated ? 'success' : 'pending';
return (
'<div class="list">' +
'<div class="item"><strong>Объект</strong><span class="tag ' +
tagClass +
'">' +
status +
'</span></div>' +
'<div class="item"><strong>План приемки</strong><span class="tag info">В подготовке</span></div>' +
'</div>'
);
},
helper: function () {
return state.projectCreated
? 'Проект создан. Теперь добавьте адрес и параметры объекта, чтобы расчет стал точным.'
: 'Нажмите «Создать проект», чтобы зафиксировать старт и открыть следующие шаги.';
}
},
{
label: 'Шаг 2 из 6',
title: 'Добавление объекта',
subtitle: 'Адрес и параметры нужны для точной сметы.',
primaryLabel: 'Добавить адрес',
onPrimary: function () {
state.addressAdded = true;
},
ready: function () {
return state.addressAdded;
},
content: function () {
var address = state.addressAdded ? 'Москва, ул. Правды, 12' : 'Адрес не указан';
var tagClass = state.addressAdded ? 'success' : 'pending';
return (
'<div class="list">' +
'<div class="item"><strong>Адрес</strong><span class="tag ' +
tagClass +
'">' +
address +
'</span></div>' +
'<div class="item"><strong>Метраж</strong><span class="tag info">68 м²</span></div>' +
'</div>'
);
},
helper: function () {
return state.addressAdded
? 'Адрес сохранен. Переходим к медиа — это помогает зафиксировать стартовое состояние.'
: 'Добавьте адрес, чтобы расчет сметы учитывал реальный объект.';
}
},
{
label: 'Шаг 3 из 6',
title: 'Фото и видео',
subtitle: 'Фиксируем стартовое состояние объекта.',
primaryLabel: 'Добавить медиа',
onPrimary: function () {
state.mediaAdded = true;
},
ready: function () {
return state.mediaAdded;
},
content: function () {
var text = state.mediaAdded ? '12 фото, 2 видео' : 'Медиа не загружены';
var tagClass = state.mediaAdded ? 'success' : 'pending';
return (
'<div class="list">' +
'<div class="item"><strong>Загрузка</strong><span class="tag ' +
tagClass +
'">' +
text +
'</span></div>' +
'<div class="item"><strong>Комментарий</strong><span class="tag info">Черновая стяжка</span></div>' +
'</div>'
);
},
helper: function () {
return state.mediaAdded
? 'Медиа загружены. Система сформирует смету и этапы на основании материалов.'
: 'Добавьте фото и видео, чтобы у обеих сторон была единая точка отсчета.';
}
},
{
label: 'Шаг 4 из 6',
title: 'Смета и этапы',
subtitle: 'Проверьте расчет и зафиксируйте этапы.',
primaryLabel: 'Согласовать смету',
onPrimary: function () {
state.quoteApproved = true;
},
ready: function () {
return state.quoteApproved;
},
content: function () {
var tagClass = state.quoteApproved ? 'success' : 'pending';
var status = state.quoteApproved ? 'Согласовано' : 'На согласовании';
return (
'<div class="list">' +
'<div class="item"><strong>Смета</strong><span class="tag ' +
tagClass +
'">' +
status +
'</span></div>' +
'<div class="item"><strong>Этапы</strong><span class="tag info">6 этапов</span></div>' +
'</div>'
);
},
helper: function () {
return state.quoteApproved
? 'Смета согласована. Можно запускать работы по первому этапу.'
: 'Согласуйте смету, чтобы зафиксировать финансовую модель и регламент.';
}
},
{
label: 'Шаг 5 из 6',
title: 'Старт этапа',
subtitle: 'Исполнитель следует чек-листу и фиксирует ход.',
primaryLabel: 'Запустить этап 1',
onPrimary: function () {
state.stageStarted = true;
},
ready: function () {
return state.stageStarted;
},
content: function () {
var tagClass = state.stageStarted ? 'success' : 'pending';
var status = state.stageStarted ? 'В работе' : 'Не запущен';
return (
'<div class="list">' +
'<div class="item"><strong>Этап 1</strong><span class="tag ' +
tagClass +
'">' +
status +
'</span></div>' +
'<div class="item"><strong>Чек-лист</strong><span class="tag info">12 пунктов</span></div>' +
'</div>'
);
},
helper: function () {
return state.stageStarted
? 'Этап запущен. Система подготовит уведомление о приемке.'
: 'Запустите этап, чтобы начать работу и фиксировать прогресс.';
}
},
{
label: 'Шаг 6 из 6',
title: 'Приемка и оплата',
subtitle: 'Подтвердите качество, чтобы закрыть этап и оплату.',
primaryLabel: 'Подтвердить качество',
onPrimary: function () {
state.accepted = true;
},
ready: function () {
return state.accepted;
},
content: function () {
var status = state.accepted ? 'Принято' : 'Ожидает';
var tagClass = state.accepted ? 'success' : 'info';
return (
'<div class="list">' +
'<div class="item"><strong>Инспекция</strong><span class="tag ' +
tagClass +
'">' +
status +
'</span></div>' +
'<div class="item"><strong>Эскроу</strong><span class="tag info">1 250 000 ₽</span></div>' +
'</div>'
);
},
helper: function () {
return state.accepted
? 'Качество подтверждено. Средства автоматически переводятся исполнителю.'
: 'Подтвердите качество, чтобы выпустить оплату и закрыть этап.';
}
}
];
var stepLabel = document.getElementById('stepLabel');
var stepTitle = document.getElementById('stepTitle');
var stepSubtitle = document.getElementById('stepSubtitle');
var stepContent = document.getElementById('stepContent');
var helperCard = document.getElementById('helperCard');
var progressBar = document.getElementById('progressBar');
var actions = document.querySelector('.actions');
function render() {
var step = steps[state.step];
stepLabel.textContent = step.label;
stepTitle.textContent = step.title;
stepSubtitle.textContent = step.subtitle;
stepContent.innerHTML = step.content();
helperCard.textContent = step.helper();
progressBar.style.width = ((state.step + 1) / steps.length) * 100 + '%';
var buttons = actions.querySelectorAll('button');
buttons.forEach(function (btn) {
var action = btn.getAttribute('data-action');
if (action === 'back') {
btn.disabled = state.step === 0;
}
if (action === 'primary') {
btn.textContent = step.primaryLabel || 'Действие';
btn.style.display = step.primaryLabel ? 'inline-flex' : 'none';
}
if (action === 'next') {
btn.textContent = state.step === steps.length - 1 ? 'Завершить' : 'Далее';
btn.disabled = !step.ready();
}
});
}
actions.addEventListener('click', function (event) {
var target = event.target;
if (!target || !target.getAttribute) return;
var action = target.getAttribute('data-action');
var step = steps[state.step];
if (action === 'back') {
state.step = Math.max(0, state.step - 1);
render();
return;
}
if (action === 'primary') {
if (step.onPrimary) {
step.onPrimary();
}
render();
return;
}
if (action === 'next') {
if (!step.ready()) return;
if (state.step >= steps.length - 1) {
resetState();
render();
return;
}
state.step += 1;
render();
}
});
render();
})();
<\\/script>
</body>
</html>`;
let granimInstance
@@ -966,10 +430,10 @@ html {
}
.nav-link:hover {
background: rgba(255, 255, 255, 0.5);
border-color: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(14px) saturate(1.1);
-webkit-backdrop-filter: blur(14px) saturate(1.1);
background: rgba(255, 255, 255, 0.42);
border-color: rgba(255, 255, 255, 0.45);
backdrop-filter: blur(16px) saturate(1.05);
-webkit-backdrop-filter: blur(16px) saturate(1.05);
color: rgba(20, 20, 20, 0.85);
}
@@ -1018,12 +482,18 @@ html {
gap: 1.5rem;
}
.glass-panel,
.glass-card {
background: rgba(255, 255, 255, 0.6);
.glass-panel {
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(18px) saturate(1.1);
-webkit-backdrop-filter: blur(18px) saturate(1.1);
backdrop-filter: blur(24px) saturate(1.15);
-webkit-backdrop-filter: blur(24px) saturate(1.15);
}
.glass-card {
background: rgba(255, 255, 255, 0.42);
border: 1px solid rgba(255, 255, 255, 0.45);
backdrop-filter: blur(16px) saturate(1.05);
-webkit-backdrop-filter: blur(16px) saturate(1.05);
}
.iphone-frame {

513
public/prototype.html Normal file
View File

@@ -0,0 +1,513 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Прототип</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&display=swap');
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
font-family: 'Manrope', system-ui, sans-serif;
color: #171717;
background: #f4f1eb;
}
.app {
height: 100%;
display: flex;
flex-direction: column;
gap: 12px;
padding: 34px 16px 18px;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(243, 239, 232, 0.92));
}
.status {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
color: #2d2d2d;
}
.pill {
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
background: rgba(26, 77, 122, 0.12);
color: #1a4d7a;
font-weight: 600;
}
.icons {
display: flex;
align-items: center;
gap: 6px;
}
.dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: #1a4d7a;
}
.progress {
position: relative;
height: 6px;
background: rgba(26, 77, 122, 0.12);
border-radius: 999px;
overflow: hidden;
}
.progress__bar {
position: absolute;
inset: 0;
width: 10%;
background: linear-gradient(90deg, #1a4d7a, #3f7fb0);
border-radius: inherit;
transition: width 0.35s ease;
}
.card {
background: rgba(255, 255, 255, 0.92);
border-radius: 18px;
border: 1px solid rgba(23, 23, 23, 0.08);
padding: 14px;
box-shadow: 0 12px 28px rgba(23, 23, 23, 0.08);
}
.card.main {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.eyebrow {
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(23, 23, 23, 0.5);
}
.title {
font-size: 20px;
font-weight: 700;
}
.subtitle {
font-size: 12px;
color: rgba(23, 23, 23, 0.64);
margin: 0;
}
.list {
display: grid;
gap: 8px;
margin-top: 4px;
}
.item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
border-radius: 12px;
background: #f0ece6;
font-size: 12px;
}
.item strong {
font-weight: 600;
}
.tag {
padding: 2px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
}
.tag.success {
background: rgba(31, 129, 84, 0.14);
color: #1f8154;
}
.tag.pending {
background: rgba(211, 135, 32, 0.15);
color: #b7741c;
}
.tag.info {
background: rgba(26, 77, 122, 0.14);
color: #1a4d7a;
}
.info-card {
font-size: 12px;
color: rgba(23, 23, 23, 0.7);
line-height: 1.4;
}
.actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.actions .btn {
border: none;
border-radius: 14px;
padding: 10px 12px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.actions .btn:active {
transform: scale(0.98);
}
.btn.primary {
background: #1a4d7a;
color: #fff;
box-shadow: 0 10px 20px rgba(26, 77, 122, 0.3);
grid-column: span 2;
}
.btn.secondary {
background: rgba(26, 77, 122, 0.12);
color: #1a4d7a;
}
.btn.ghost {
background: rgba(23, 23, 23, 0.06);
color: rgba(23, 23, 23, 0.75);
}
.btn[disabled] {
opacity: 0.45;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
</style>
</head>
<body>
<div class="app">
<div class="status">
<div>9:41</div>
<div class="pill">Контроль ремонта</div>
<div class="icons">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<div class="progress">
<div class="progress__bar" id="progressBar"></div>
</div>
<div class="card main">
<div class="eyebrow" id="stepLabel"></div>
<div class="title" id="stepTitle"></div>
<p class="subtitle" id="stepSubtitle"></p>
<div id="stepContent"></div>
</div>
<div class="card info-card" id="helperCard"></div>
<div class="actions">
<button class="btn ghost" data-action="back">Назад</button>
<button class="btn secondary" data-action="primary">Добавить</button>
<button class="btn primary" data-action="next">Далее</button>
</div>
</div>
<script>
(function () {
var state = {
step: 0,
projectCreated: false,
addressAdded: false,
mediaAdded: false,
quoteApproved: false,
stageStarted: false,
accepted: false
};
function resetState() {
state.step = 0;
state.projectCreated = false;
state.addressAdded = false;
state.mediaAdded = false;
state.quoteApproved = false;
state.stageStarted = false;
state.accepted = false;
}
var steps = [
{
label: 'Шаг 1 из 6',
title: 'Старт проекта',
subtitle: 'Зафиксируйте объект, чтобы запустить сценарий.',
primaryLabel: 'Создать проект',
onPrimary: function () {
state.projectCreated = true;
},
ready: function () {
return state.projectCreated;
},
content: function () {
var status = state.projectCreated ? 'Проект создан' : 'Проект не создан';
var tagClass = state.projectCreated ? 'success' : 'pending';
return (
'<div class="list">' +
'<div class="item"><strong>Объект</strong><span class="tag ' +
tagClass +
'">' +
status +
'</span></div>' +
'<div class="item"><strong>План приемки</strong><span class="tag info">В подготовке</span></div>' +
'</div>'
);
},
helper: function () {
return state.projectCreated
? 'Проект создан. Теперь добавьте адрес и параметры объекта, чтобы расчет стал точным.'
: 'Нажмите «Создать проект», чтобы зафиксировать старт и открыть следующие шаги.';
}
},
{
label: 'Шаг 2 из 6',
title: 'Добавление объекта',
subtitle: 'Адрес и параметры нужны для точной сметы.',
primaryLabel: 'Добавить адрес',
onPrimary: function () {
state.addressAdded = true;
},
ready: function () {
return state.addressAdded;
},
content: function () {
var address = state.addressAdded ? 'Москва, ул. Правды, 12' : 'Адрес не указан';
var tagClass = state.addressAdded ? 'success' : 'pending';
return (
'<div class="list">' +
'<div class="item"><strong>Адрес</strong><span class="tag ' +
tagClass +
'">' +
address +
'</span></div>' +
'<div class="item"><strong>Метраж</strong><span class="tag info">68 м²</span></div>' +
'</div>'
);
},
helper: function () {
return state.addressAdded
? 'Адрес сохранен. Переходим к медиа — это помогает зафиксировать стартовое состояние.'
: 'Добавьте адрес, чтобы расчет сметы учитывал реальный объект.';
}
},
{
label: 'Шаг 3 из 6',
title: 'Фото и видео',
subtitle: 'Фиксируем стартовое состояние объекта.',
primaryLabel: 'Добавить медиа',
onPrimary: function () {
state.mediaAdded = true;
},
ready: function () {
return state.mediaAdded;
},
content: function () {
var text = state.mediaAdded ? '12 фото, 2 видео' : 'Медиа не загружены';
var tagClass = state.mediaAdded ? 'success' : 'pending';
return (
'<div class="list">' +
'<div class="item"><strong>Загрузка</strong><span class="tag ' +
tagClass +
'">' +
text +
'</span></div>' +
'<div class="item"><strong>Комментарий</strong><span class="tag info">Черновая стяжка</span></div>' +
'</div>'
);
},
helper: function () {
return state.mediaAdded
? 'Медиа загружены. Система сформирует смету и этапы на основании материалов.'
: 'Добавьте фото и видео, чтобы у обеих сторон была единая точка отсчета.';
}
},
{
label: 'Шаг 4 из 6',
title: 'Смета и этапы',
subtitle: 'Проверьте расчет и зафиксируйте этапы.',
primaryLabel: 'Согласовать смету',
onPrimary: function () {
state.quoteApproved = true;
},
ready: function () {
return state.quoteApproved;
},
content: function () {
var tagClass = state.quoteApproved ? 'success' : 'pending';
var status = state.quoteApproved ? 'Согласовано' : 'На согласовании';
return (
'<div class="list">' +
'<div class="item"><strong>Смета</strong><span class="tag ' +
tagClass +
'">' +
status +
'</span></div>' +
'<div class="item"><strong>Этапы</strong><span class="tag info">6 этапов</span></div>' +
'</div>'
);
},
helper: function () {
return state.quoteApproved
? 'Смета согласована. Можно запускать работы по первому этапу.'
: 'Согласуйте смету, чтобы зафиксировать финансовую модель и регламент.';
}
},
{
label: 'Шаг 5 из 6',
title: 'Старт этапа',
subtitle: 'Исполнитель следует чек-листу и фиксирует ход.',
primaryLabel: 'Запустить этап 1',
onPrimary: function () {
state.stageStarted = true;
},
ready: function () {
return state.stageStarted;
},
content: function () {
var tagClass = state.stageStarted ? 'success' : 'pending';
var status = state.stageStarted ? 'В работе' : 'Не запущен';
return (
'<div class="list">' +
'<div class="item"><strong>Этап 1</strong><span class="tag ' +
tagClass +
'">' +
status +
'</span></div>' +
'<div class="item"><strong>Чек-лист</strong><span class="tag info">12 пунктов</span></div>' +
'</div>'
);
},
helper: function () {
return state.stageStarted
? 'Этап запущен. Система подготовит уведомление о приемке.'
: 'Запустите этап, чтобы начать работу и фиксировать прогресс.';
}
},
{
label: 'Шаг 6 из 6',
title: 'Приемка и оплата',
subtitle: 'Подтвердите качество, чтобы закрыть этап и оплату.',
primaryLabel: 'Подтвердить качество',
onPrimary: function () {
state.accepted = true;
},
ready: function () {
return state.accepted;
},
content: function () {
var status = state.accepted ? 'Принято' : 'Ожидает';
var tagClass = state.accepted ? 'success' : 'info';
return (
'<div class="list">' +
'<div class="item"><strong>Инспекция</strong><span class="tag ' +
tagClass +
'">' +
status +
'</span></div>' +
'<div class="item"><strong>Эскроу</strong><span class="tag info">1 250 000 ₽</span></div>' +
'</div>'
);
},
helper: function () {
return state.accepted
? 'Качество подтверждено. Средства автоматически переводятся исполнителю.'
: 'Подтвердите качество, чтобы выпустить оплату и закрыть этап.';
}
}
];
var stepLabel = document.getElementById('stepLabel');
var stepTitle = document.getElementById('stepTitle');
var stepSubtitle = document.getElementById('stepSubtitle');
var stepContent = document.getElementById('stepContent');
var helperCard = document.getElementById('helperCard');
var progressBar = document.getElementById('progressBar');
var actions = document.querySelector('.actions');
function render() {
var step = steps[state.step];
stepLabel.textContent = step.label;
stepTitle.textContent = step.title;
stepSubtitle.textContent = step.subtitle;
stepContent.innerHTML = step.content();
helperCard.textContent = step.helper();
progressBar.style.width = ((state.step + 1) / steps.length) * 100 + '%';
var buttons = actions.querySelectorAll('button');
buttons.forEach(function (btn) {
var action = btn.getAttribute('data-action');
if (action === 'back') {
btn.disabled = state.step === 0;
}
if (action === 'primary') {
btn.textContent = step.primaryLabel || 'Действие';
btn.style.display = step.primaryLabel ? 'inline-flex' : 'none';
}
if (action === 'next') {
btn.textContent = state.step === steps.length - 1 ? 'Завершить' : 'Далее';
btn.disabled = !step.ready();
}
});
}
actions.addEventListener('click', function (event) {
var target = event.target;
if (!target || !target.getAttribute) return;
var action = target.getAttribute('data-action');
var step = steps[state.step];
if (action === 'back') {
state.step = Math.max(0, state.step - 1);
render();
return;
}
if (action === 'primary') {
if (step.onPrimary) {
step.onPrimary();
}
render();
return;
}
if (action === 'next') {
if (!step.ready()) return;
if (state.step >= steps.length - 1) {
resetState();
render();
return;
}
state.step += 1;
render();
}
});
render();
})();
</script>
</body>
</html>