Initial scaffold: Клиника УГН mobile prototype
Ported HTML/CSS/JS design bundle from Claude Design to Vite + React. 20 screens (home 3 variants, booking flow, doctors, appointments, results + audiogram, recovery, audio test, chat, profile, QR, telemed, medcard, notifications). Tweaks panel with iOS/Android frames, layout/accent/font switchers. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,6 @@
|
||||
node_modules
|
||||
dist
|
||||
.DS_Store
|
||||
*.log
|
||||
design.tar.gz
|
||||
design_extracted
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Клиника УГН — мобильное приложение</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=Golos+Text:wght@400;500;600;700&family=Oswald:wght@500;600;700&family=PT+Sans:wght@400;700&family=PT+Sans+Narrow:wght@400;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+1677
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "pcs-pt-mobile",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"vite": "^5.4.10"
|
||||
}
|
||||
}
|
||||
+268
@@ -0,0 +1,268 @@
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { IOSDevice } from './frames/IOSDevice.jsx';
|
||||
import { AndroidDevice } from './frames/AndroidDevice.jsx';
|
||||
import { PhoneApp } from './PhoneApp.jsx';
|
||||
|
||||
const TWEAKS_DEFAULT = {
|
||||
homeVariant: 'cards',
|
||||
docVariant: 'rich',
|
||||
density: 'comfort',
|
||||
accent: 'teal',
|
||||
font: 'inter',
|
||||
layout: 'single',
|
||||
screen: 'home',
|
||||
device: 'ios',
|
||||
scale: 'auto',
|
||||
showIntro: true,
|
||||
};
|
||||
|
||||
const SCALE_OPTIONS = [
|
||||
{ id: 'auto', lb: 'Авто' },
|
||||
{ id: '0.5', lb: '50%' },
|
||||
{ id: '0.75', lb: '75%' },
|
||||
{ id: '1', lb: '100%' },
|
||||
];
|
||||
|
||||
const HOME_OPTIONS = [
|
||||
{ id: 'cards', lb: 'Карточки' },
|
||||
{ id: 'list', lb: 'Лента' },
|
||||
{ id: 'feed', lb: 'Таймлайн' },
|
||||
];
|
||||
const DOC_OPTIONS = [
|
||||
{ id: 'rich', lb: 'Карточки+' },
|
||||
{ id: 'list', lb: 'Список' },
|
||||
{ id: 'photo', lb: 'Плитка' },
|
||||
];
|
||||
const DENSITY_OPTIONS = [
|
||||
{ id: 'comfort', lb: 'Комф.' },
|
||||
{ id: 'compact', lb: 'Плотно' },
|
||||
];
|
||||
const ACCENT_OPTIONS = [
|
||||
{ id: 'teal', lb: 'Тил', primary: '#1F8F85', darker: '#166B63', dark: '#0F4A44', p50: '#E3F4F2', p100: '#C7E8E4', p200: '#9BD6CE', warm50: '#FDF8EE', warm100: '#F5EDDF' },
|
||||
{ id: 'terra', lb: 'Терра', primary: '#C77A4C', darker: '#A65C33', dark: '#7F4426', p50: '#FBEFE4', p100: '#F5DDC9', p200: '#EBC19F', warm50: '#F4F7F3', warm100: '#E5ECE4' },
|
||||
{ id: 'marine', lb: 'Марин', primary: '#3C6EA8', darker: '#23538B', dark: '#193C66', p50: '#E4EDF8', p100: '#C8DAEE', p200: '#9DBDDE', warm50: '#FBF6EE', warm100: '#F2E8D5' },
|
||||
];
|
||||
const FONT_OPTIONS = [
|
||||
{ id: 'manrope', lb: 'Manrope', base: '"Manrope", system-ui, sans-serif', narrow: '"Oswald", sans-serif' },
|
||||
{ id: 'inter', lb: 'Inter', base: '"Inter", system-ui, sans-serif', narrow: '"Oswald", sans-serif' },
|
||||
{ id: 'golos', lb: 'Golos', base: '"Golos Text", system-ui, sans-serif', narrow: '"Oswald", sans-serif' },
|
||||
];
|
||||
const SCREEN_OPTIONS = [
|
||||
{ id: 'home', lb: 'Главная' },
|
||||
{ id: 'doctors', lb: 'Врачи' },
|
||||
{ id: 'doctor:syndaev', lb: 'Карточка врача' },
|
||||
{ id: 'booking-specs', lb: 'Запись: специализация' },
|
||||
{ id: 'booking-doctor:ent', lb: 'Запись: врач' },
|
||||
{ id: 'booking-time:syndaev', lb: 'Запись: время' },
|
||||
{ id: 'booking-confirm:syndaev:1:16:00', lb: 'Запись: подтверждение' },
|
||||
{ id: 'booking-success', lb: 'Запись: успех' },
|
||||
{ id: 'appts', lb: 'Приёмы' },
|
||||
{ id: 'appt:a1', lb: 'Детали приёма' },
|
||||
{ id: 'results', lb: 'Результаты' },
|
||||
{ id: 'result-audio', lb: 'Аудиограмма' },
|
||||
{ id: 'recovery', lb: 'Восстановление' },
|
||||
{ id: 'audiotest', lb: 'Тест слуха' },
|
||||
{ id: 'chat', lb: 'Чат' },
|
||||
{ id: 'profile', lb: 'Профиль' },
|
||||
{ id: 'qr', lb: 'QR' },
|
||||
{ id: 'telemed', lb: 'Телемед' },
|
||||
{ id: 'medcard', lb: 'Медкарта' },
|
||||
{ id: 'notifications', lb: 'Уведомления' },
|
||||
];
|
||||
|
||||
function applyTheme(tw) {
|
||||
const a = ACCENT_OPTIONS.find(x => x.id === tw.accent) || ACCENT_OPTIONS[0];
|
||||
const f = FONT_OPTIONS.find(x => x.id === tw.font) || FONT_OPTIONS[0];
|
||||
const r = document.documentElement.style;
|
||||
r.setProperty('--c-primary', a.primary);
|
||||
r.setProperty('--c-primary-darker', a.darker);
|
||||
r.setProperty('--c-primary-dark', a.dark);
|
||||
r.setProperty('--c-primary-50', a.p50);
|
||||
r.setProperty('--c-primary-100', a.p100);
|
||||
r.setProperty('--c-primary-200', a.p200);
|
||||
r.setProperty('--c-warm-50', a.warm50);
|
||||
r.setProperty('--c-warm-100', a.warm100);
|
||||
r.setProperty('--font-base', f.base);
|
||||
r.setProperty('--font-narrow', f.narrow);
|
||||
document.body.style.fontFamily = f.base;
|
||||
}
|
||||
|
||||
function Phone({ device = 'ios', screen, ctx, label, sublabel }) {
|
||||
const content = <PhoneApp initialScreen={screen} ctx={ctx} />;
|
||||
const frame = device === 'android'
|
||||
? <AndroidDevice>{content}</AndroidDevice>
|
||||
: <IOSDevice>{content}</IOSDevice>;
|
||||
if (!label) return frame;
|
||||
return (
|
||||
<div className="phone-cell">
|
||||
{frame}
|
||||
<div className="label">{label}</div>
|
||||
{sublabel && <div className="sublabel">{sublabel}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TweaksPanel({ tw, setTw, onClose }) {
|
||||
const group = (title, children) => (
|
||||
<div className="tweaks-section">
|
||||
<div className="label">{title}</div>
|
||||
<div className="tweaks-options">{children}</div>
|
||||
</div>
|
||||
);
|
||||
const opts = (options, key) =>
|
||||
options.map(o => (
|
||||
<button key={o.id} onClick={() => setTw({ ...tw, [key]: o.id })} className={tw[key] === o.id ? 'on' : ''}>
|
||||
{o.lb}
|
||||
</button>
|
||||
));
|
||||
|
||||
return (
|
||||
<div className="tweaks-panel">
|
||||
<h3>
|
||||
Tweaks
|
||||
<button onClick={onClose} title="Закрыть">×</button>
|
||||
</h3>
|
||||
{group('Экран',
|
||||
<select value={tw.screen} onChange={e => setTw({ ...tw, screen: e.target.value })}>
|
||||
{SCREEN_OPTIONS.map(s => <option key={s.id} value={s.id}>{s.lb}</option>)}
|
||||
</select>
|
||||
)}
|
||||
{group('Устройство', opts([{id:'ios',lb:'iOS'},{id:'android',lb:'Android'}], 'device'))}
|
||||
{tw.layout === 'single' && group('Масштаб', opts(SCALE_OPTIONS, 'scale'))}
|
||||
{group('Компоновка', opts([
|
||||
{ id:'single', lb:'1 телефон' },
|
||||
{ id:'home3', lb:'Главная ×3' },
|
||||
{ id:'flow', lb:'Флоу записи' },
|
||||
{ id:'variants', lb:'Все варианты' },
|
||||
], 'layout'))}
|
||||
{group('Главный экран', opts(HOME_OPTIONS, 'homeVariant'))}
|
||||
{group('Карточки врачей', opts(DOC_OPTIONS, 'docVariant'))}
|
||||
{group('Плотность', opts(DENSITY_OPTIONS, 'density'))}
|
||||
{group('Цвет',
|
||||
ACCENT_OPTIONS.map(a => (
|
||||
<button key={a.id} onClick={() => setTw({ ...tw, accent: a.id })} className={tw.accent === a.id ? 'on' : ''} style={{
|
||||
display: 'flex', alignItems: 'center', gap: 6
|
||||
}}>
|
||||
<span style={{ width: 10, height: 10, borderRadius: 999, background: a.primary, display: 'inline-block' }} />
|
||||
{a.lb}
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
{group('Шрифт', opts(FONT_OPTIONS, 'font'))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FitWrap({ children, w = 402, h = 874, userScale = 'auto' }) {
|
||||
const outerRef = useRef(null);
|
||||
const [autoScale, setAutoScale] = useState(1);
|
||||
useEffect(() => {
|
||||
const outer = outerRef.current;
|
||||
if (!outer) return;
|
||||
const stage = outer.parentElement;
|
||||
if (!stage) return;
|
||||
const measure = () => {
|
||||
const padding = 48;
|
||||
const availW = stage.clientWidth - padding;
|
||||
const availH = stage.clientHeight - padding;
|
||||
const s = Math.min(availW / w, availH / h, 1);
|
||||
setAutoScale(Math.max(s, 0.3));
|
||||
};
|
||||
measure();
|
||||
const ro = new ResizeObserver(measure);
|
||||
ro.observe(stage);
|
||||
window.addEventListener('resize', measure);
|
||||
return () => { ro.disconnect(); window.removeEventListener('resize', measure); };
|
||||
}, [w, h]);
|
||||
const scale = userScale === 'auto' ? autoScale : parseFloat(userScale);
|
||||
return (
|
||||
<div ref={outerRef} style={{ width: w * scale, height: h * scale, position: 'relative', flexShrink: 0 }}>
|
||||
<div style={{
|
||||
width: w, height: h, transformOrigin: 'top left',
|
||||
transform: `scale(${scale})`,
|
||||
}}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const [tw, setTw] = useState(TWEAKS_DEFAULT);
|
||||
const [panelOpen, setPanelOpen] = useState(true);
|
||||
const [introVisible, setIntroVisible] = useState(tw.showIntro !== false);
|
||||
|
||||
useEffect(() => { applyTheme(tw); }, [tw.accent, tw.font]);
|
||||
|
||||
const ctx = { homeVariant: tw.homeVariant, docVariant: tw.docVariant, density: tw.density };
|
||||
|
||||
const content = useMemo(() => {
|
||||
if (tw.layout === 'home3') {
|
||||
return (
|
||||
<div className="phones-grid">
|
||||
<Phone device={tw.device} screen="home" ctx={{ ...ctx, homeVariant: 'cards' }} label="Главная — Карточки" sublabel="CTA + сетка специализаций" />
|
||||
<Phone device={tw.device} screen="home" ctx={{ ...ctx, homeVariant: 'list' }} label="Главная — Лента" sublabel="Список с деталями" />
|
||||
<Phone device={tw.device} screen="home" ctx={{ ...ctx, homeVariant: 'feed' }} label="Главная — Таймлайн" sublabel="Лента здоровья" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (tw.layout === 'flow') {
|
||||
return (
|
||||
<div className="phones-grid">
|
||||
<Phone device={tw.device} screen="booking-specs" ctx={ctx} label="1 · Специализация" />
|
||||
<Phone device={tw.device} screen="booking-doctor:ent" ctx={ctx} label="2 · Выбор врача" />
|
||||
<Phone device={tw.device} screen="booking-time:syndaev" ctx={ctx} label="3 · Дата и время" />
|
||||
<Phone device={tw.device} screen="booking-confirm:syndaev:1:16:00" ctx={ctx} label="4 · Подтверждение" />
|
||||
<Phone device={tw.device} screen="booking-success" ctx={ctx} label="Успех" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (tw.layout === 'variants') {
|
||||
return (
|
||||
<div className="phones-grid">
|
||||
<Phone device={tw.device} screen="home" ctx={ctx} label="Главная" />
|
||||
<Phone device={tw.device} screen="doctors" ctx={ctx} label="Врачи" />
|
||||
<Phone device={tw.device} screen="doctor:syndaev" ctx={ctx} label="Карточка врача" />
|
||||
<Phone device={tw.device} screen="booking-time:syndaev" ctx={ctx} label="Запись: время" />
|
||||
<Phone device={tw.device} screen="appts" ctx={ctx} label="Мои приёмы" />
|
||||
<Phone device={tw.device} screen="appt:a1" ctx={ctx} label="Детали приёма" />
|
||||
<Phone device={tw.device} screen="result-audio" ctx={ctx} label="Аудиограмма" />
|
||||
<Phone device={tw.device} screen="recovery" ctx={ctx} label="Восстановление" />
|
||||
<Phone device={tw.device} screen="audiotest" ctx={ctx} label="Тест слуха" />
|
||||
<Phone device={tw.device} screen="chat" ctx={ctx} label="Чат с врачом" />
|
||||
<Phone device={tw.device} screen="profile" ctx={ctx} label="Профиль" />
|
||||
<Phone device={tw.device} screen="qr" ctx={ctx} label="QR пациента" />
|
||||
<Phone device={tw.device} screen="telemed" ctx={ctx} label="Видеозвонок" />
|
||||
<Phone device={tw.device} screen="medcard" ctx={ctx} label="Медкарта" />
|
||||
<Phone device={tw.device} screen="notifications" ctx={ctx} label="Уведомления" />
|
||||
<Phone device={tw.device} screen="booking-specs" ctx={ctx} label="Запись" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<FitWrap userScale={tw.scale}>
|
||||
<Phone device={tw.device} screen={tw.screen} ctx={ctx} />
|
||||
</FitWrap>
|
||||
);
|
||||
}, [tw, ctx.homeVariant, ctx.docVariant, ctx.density]);
|
||||
|
||||
const stageClass = tw.layout === 'single' ? 'stage' : 'stage grid-mode';
|
||||
|
||||
return (
|
||||
<div style={{ width: '100%', height: '100%', position: 'relative' }} data-density={tw.density}>
|
||||
<div className={stageClass}>
|
||||
{content}
|
||||
</div>
|
||||
|
||||
{introVisible && (
|
||||
<div className="intro-banner">
|
||||
<span>📱 <b>Клиника УГН</b> · мобильный прототип · откройте <b>Tweaks</b> справа, чтобы переключать экраны и варианты.</span>
|
||||
<button onClick={() => { setIntroVisible(false); setTw({ ...tw, showIntro: false }); }}>×</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{panelOpen && <TweaksPanel tw={tw} setTw={setTw} onClose={() => setPanelOpen(false)} />}
|
||||
{!panelOpen && (
|
||||
<button className="tweaks-fab" onClick={() => setPanelOpen(true)} title="Tweaks">⚙</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { TabBar } from './components.jsx';
|
||||
import { HomeCardsScreen, HomeListScreen, HomeFeedScreen } from './screens/screens-home.jsx';
|
||||
import {
|
||||
BookingSpecsScreen, BookingDoctorScreen, BookingTimeScreen,
|
||||
BookingConfirmScreen, BookingSuccessScreen,
|
||||
DoctorsTabScreen, DoctorDetailScreen,
|
||||
} from './screens/screens-booking.jsx';
|
||||
import {
|
||||
ApptsTabScreen, ApptDetailScreen,
|
||||
ResultsScreen, ResultAudioScreen,
|
||||
RecoveryScreen, AudioTestScreen,
|
||||
ChatTabScreen, ProfileTabScreen, QRScreen,
|
||||
TelemedScreen, MedcardScreen, NotificationsScreen,
|
||||
} from './screens/screens-misc.jsx';
|
||||
|
||||
function renderScreen(screenId, nav, ctx) {
|
||||
const parts = screenId.split(':');
|
||||
const id = parts[0];
|
||||
const HOME = { cards: HomeCardsScreen, list: HomeListScreen, feed: HomeFeedScreen }[ctx.homeVariant] || HomeCardsScreen;
|
||||
switch (id) {
|
||||
case 'home': return <HOME nav={nav} ctx={ctx} />;
|
||||
case 'doctors': return <DoctorsTabScreen nav={nav} ctx={ctx} />;
|
||||
case 'doctor': return <DoctorDetailScreen nav={nav} doctorId={parts[1]} />;
|
||||
case 'booking-specs': return <BookingSpecsScreen nav={nav} />;
|
||||
case 'booking-doctor': return <BookingDoctorScreen nav={nav} specId={parts[1]} />;
|
||||
case 'booking-time': return <BookingTimeScreen nav={nav} doctorId={parts[1]} />;
|
||||
case 'booking-confirm': return <BookingConfirmScreen nav={nav} doctorId={parts[1]} dateIdx={+parts[2]} time={parts[3]} />;
|
||||
case 'booking-success': return <BookingSuccessScreen nav={nav} />;
|
||||
case 'appts': return <ApptsTabScreen nav={nav} />;
|
||||
case 'appt': return <ApptDetailScreen nav={nav} apptId={parts[1]} />;
|
||||
case 'results': return <ResultsScreen nav={nav} />;
|
||||
case 'result-audio': return <ResultAudioScreen nav={nav} />;
|
||||
case 'recovery': return <RecoveryScreen nav={nav} />;
|
||||
case 'audiotest': return <AudioTestScreen nav={nav} />;
|
||||
case 'chat': return <ChatTabScreen nav={nav} />;
|
||||
case 'profile': return <ProfileTabScreen nav={nav} ctx={ctx} />;
|
||||
case 'qr': return <QRScreen nav={nav} />;
|
||||
case 'telemed': return <TelemedScreen nav={nav} />;
|
||||
case 'medcard': return <MedcardScreen nav={nav} />;
|
||||
case 'notifications': return <NotificationsScreen nav={nav} />;
|
||||
default: return <div style={{padding: 40, textAlign: 'center'}}>Экран не найден: {screenId}</div>;
|
||||
}
|
||||
}
|
||||
|
||||
const TAB_IDS = ['home', 'appts', 'doctors', 'chat', 'profile'];
|
||||
|
||||
export function PhoneApp({ initialScreen, ctx }) {
|
||||
const [stack, setStack] = useState([initialScreen]);
|
||||
|
||||
useEffect(() => { setStack([initialScreen]); }, [initialScreen]);
|
||||
|
||||
const nav = useMemo(() => ({
|
||||
push: (id) => setStack(s => [...s, id]),
|
||||
pop: () => setStack(s => s.length > 1 ? s.slice(0, -1) : s),
|
||||
set: (id) => setStack([id]),
|
||||
reset:() => setStack(['home']),
|
||||
}), []);
|
||||
|
||||
const current = stack[stack.length - 1];
|
||||
const tabId = TAB_IDS.includes(current.split(':')[0]) ? current.split(':')[0] : null;
|
||||
const showTabBar = tabId !== null;
|
||||
|
||||
const modalScreens = ['qr', 'telemed', 'booking-success', 'audiotest'];
|
||||
const isModal = modalScreens.includes(current.split(':')[0]);
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
position: 'absolute', inset: 0,
|
||||
background: 'var(--c-bg)',
|
||||
overflow: 'hidden',
|
||||
fontFamily: 'var(--font-base)',
|
||||
}}>
|
||||
<div style={{ position: 'absolute', inset: 0, overflowY: 'auto', overflowX: 'hidden', paddingTop: 58, paddingBottom: showTabBar ? 80 : 0 }}>
|
||||
{renderScreen(current, nav, ctx)}
|
||||
</div>
|
||||
{showTabBar && !isModal && (
|
||||
<TabBar active={tabId} onChange={(t) => nav.set(t)} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+347
@@ -0,0 +1,347 @@
|
||||
/* ============================================================
|
||||
Клиника УГН — Мобильное приложение
|
||||
============================================================ */
|
||||
|
||||
:root {
|
||||
--c-primary: #2BB4A8;
|
||||
--c-primary-dark: #1F8F85;
|
||||
--c-primary-darker: #166B63;
|
||||
--c-primary-50: #F2FAF9;
|
||||
--c-primary-100: #E3F4F2;
|
||||
--c-primary-200: #C7E9E4;
|
||||
--c-primary-300: #9ED8D1;
|
||||
|
||||
--c-accent: #E04E44;
|
||||
--c-accent-dark: #B63D35;
|
||||
--c-accent-50: #FCF1F0;
|
||||
|
||||
--c-warm-50: #FBF7EE;
|
||||
--c-warm-100: #F5EDDF;
|
||||
--c-warm-200: #E8DCC5;
|
||||
--c-warm-text: #7A6A2E;
|
||||
|
||||
--c-success: #2E9B6B;
|
||||
--c-success-50: #E8F5EE;
|
||||
--c-warning: #E8A13C;
|
||||
--c-warning-50: #FBEFD8;
|
||||
--c-danger: #D94141;
|
||||
|
||||
--c-bg: #F7F9FB;
|
||||
--c-bg-card: #FFFFFF;
|
||||
--c-bg-app-ios: #F5F7F9;
|
||||
--c-bg-app-and: #F4FBF8;
|
||||
|
||||
--c-border: #EAF0F3;
|
||||
--c-border-strong: #D8E1E6;
|
||||
--c-divider: #F0F4F6;
|
||||
|
||||
--c-fg-1: #17242E;
|
||||
--c-fg-2: #3E4C5D;
|
||||
--c-fg-3: #6B7A89;
|
||||
--c-fg-4: #9AA7B4;
|
||||
|
||||
--font-base: 'Manrope', system-ui, sans-serif;
|
||||
--font-narrow: 'Oswald', sans-serif;
|
||||
|
||||
--r-sm: 8px;
|
||||
--r-md: 12px;
|
||||
--r-lg: 16px;
|
||||
--r-xl: 20px;
|
||||
--r-2xl: 24px;
|
||||
|
||||
--sh-sm: 0 1px 2px rgba(15, 42, 55, 0.04), 0 2px 6px rgba(15, 42, 55, 0.04);
|
||||
--sh-md: 0 2px 8px rgba(15, 42, 55, 0.06), 0 8px 24px rgba(15, 42, 55, 0.06);
|
||||
--sh-lg: 0 4px 16px rgba(15, 42, 55, 0.08), 0 16px 40px rgba(15, 42, 55, 0.08);
|
||||
}
|
||||
|
||||
[data-density="compact"] {
|
||||
--pad-card: 12px;
|
||||
--pad-row: 10px 14px;
|
||||
--gap-xs: 8px;
|
||||
--gap-sm: 10px;
|
||||
--gap-md: 14px;
|
||||
--gap-lg: 18px;
|
||||
}
|
||||
[data-density="spacious"] {
|
||||
--pad-card: 18px;
|
||||
--pad-row: 16px 18px;
|
||||
--gap-xs: 12px;
|
||||
--gap-sm: 16px;
|
||||
--gap-md: 22px;
|
||||
--gap-lg: 28px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
margin: 0; padding: 0;
|
||||
font-family: var(--font-base);
|
||||
background: #EBEEF2;
|
||||
color: var(--c-fg-1);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
body { overflow: hidden; }
|
||||
#root { width: 100vw; height: 100vh; }
|
||||
|
||||
button { font-family: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
|
||||
input, select, textarea { font-family: inherit; }
|
||||
|
||||
.noscroll::-webkit-scrollbar { display: none; }
|
||||
.noscroll { scrollbar-width: none; }
|
||||
|
||||
.seg {
|
||||
display: inline-flex; background: #EEF2F5; border-radius: 10px; padding: 3px;
|
||||
gap: 2px;
|
||||
}
|
||||
.seg button {
|
||||
padding: 7px 14px; font-size: 13px; font-weight: 700; color: var(--c-fg-3);
|
||||
border-radius: 8px; transition: all .2s;
|
||||
}
|
||||
.seg button.on { background: #fff; color: var(--c-primary-darker); box-shadow: var(--sh-sm); }
|
||||
|
||||
.btn-p {
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||||
background: var(--c-primary); color: #fff; font-weight: 700; font-size: 15px;
|
||||
border-radius: 12px; padding: 14px 20px; transition: background .15s;
|
||||
}
|
||||
.btn-p:hover { background: var(--c-primary-dark); }
|
||||
.btn-p.block { width: 100%; }
|
||||
.btn-accent { background: var(--c-accent); }
|
||||
.btn-accent:hover { background: var(--c-accent-dark); }
|
||||
|
||||
.btn-s {
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
|
||||
background: var(--c-primary-100); color: var(--c-primary-darker); font-weight: 700;
|
||||
font-size: 14px; border-radius: 10px; padding: 10px 14px;
|
||||
}
|
||||
.btn-s:hover { background: var(--c-primary-200); }
|
||||
|
||||
.btn-g {
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
|
||||
background: #fff; color: var(--c-fg-2); font-weight: 600;
|
||||
font-size: 14px; border-radius: 10px; padding: 10px 14px;
|
||||
border: 1px solid var(--c-border);
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
|
||||
background: var(--c-primary-100); color: var(--c-primary-darker);
|
||||
}
|
||||
.chip-warm { background: var(--c-warm-100); color: var(--c-warm-text); }
|
||||
.chip-soft { background: var(--c-bg); color: var(--c-fg-3); border: 1px solid var(--c-border); font-weight: 500; }
|
||||
.chip-success { background: var(--c-success-50); color: var(--c-success); }
|
||||
.chip-danger { background: var(--c-accent-50); color: var(--c-accent); }
|
||||
|
||||
.card {
|
||||
background: #fff; border-radius: var(--r-lg); padding: var(--pad-card, 16px);
|
||||
box-shadow: var(--sh-sm);
|
||||
}
|
||||
|
||||
.h-screen { font-size: 28px; font-weight: 700; letter-spacing: -0.3px; color: var(--c-fg-1); margin: 0; line-height: 1.15; }
|
||||
.h-sec { font-size: 17px; font-weight: 700; color: var(--c-fg-1); margin: 0; }
|
||||
.h-row { font-size: 15px; font-weight: 700; color: var(--c-fg-1); margin: 0; }
|
||||
.sub { font-size: 13px; color: var(--c-fg-3); }
|
||||
.mute { color: var(--c-fg-3); }
|
||||
.price { font-family: var(--font-narrow); font-weight: 700; color: var(--c-fg-1); }
|
||||
|
||||
.avatar {
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font-weight: 700; color: var(--c-primary-darker);
|
||||
background: linear-gradient(135deg, #E3F4F2, #B5E3DE);
|
||||
border-radius: 50%; flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; display: inline-block; vertical-align: middle; }
|
||||
|
||||
.tabbar {
|
||||
position: absolute; left: 0; right: 0; bottom: 0;
|
||||
background: rgba(255,255,255,0.92);
|
||||
backdrop-filter: blur(18px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(180%);
|
||||
border-top: 1px solid var(--c-border);
|
||||
padding: 8px 4px 22px;
|
||||
display: flex; justify-content: space-around; align-items: flex-start;
|
||||
z-index: 40;
|
||||
}
|
||||
.tab {
|
||||
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
|
||||
font-size: 10px; font-weight: 600; color: var(--c-fg-4); padding: 4px 2px;
|
||||
transition: color .15s;
|
||||
}
|
||||
.tab.on { color: var(--c-primary-darker); }
|
||||
|
||||
.pills { display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px; }
|
||||
.pills::-webkit-scrollbar { display: none; }
|
||||
.pill {
|
||||
flex-shrink: 0; padding: 8px 14px; border-radius: 999px; font-size: 13px;
|
||||
font-weight: 600; background: #fff; color: var(--c-fg-2); border: 1px solid var(--c-border);
|
||||
}
|
||||
.pill.on { background: var(--c-primary-darker); color: #fff; border-color: var(--c-primary-darker); }
|
||||
|
||||
.press { transition: transform .12s ease, opacity .12s ease; }
|
||||
.press:active { transform: scale(0.98); opacity: .9; }
|
||||
|
||||
.divider { height: 1px; background: var(--c-divider); margin: 0; border: 0; }
|
||||
|
||||
.stat-big {
|
||||
font-family: var(--font-narrow); font-weight: 700; font-size: 28px; color: var(--c-primary-darker);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Stage – centers a single phone OR grid of phones */
|
||||
.stage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 28px;
|
||||
box-sizing: border-box;
|
||||
background:
|
||||
radial-gradient(1200px 600px at 20% 0%, #F2EADA 0%, transparent 60%),
|
||||
radial-gradient(1000px 500px at 90% 100%, #E3F1EE 0%, transparent 50%),
|
||||
#EDEFF3;
|
||||
}
|
||||
.stage.grid-mode { align-items: flex-start; padding-top: 28px; padding-bottom: 40px; overflow: auto; }
|
||||
|
||||
.phones-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, 410px);
|
||||
gap: 32px 28px;
|
||||
justify-content: center;
|
||||
}
|
||||
.phone-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.phone-cell .label {
|
||||
font-size: 13px;
|
||||
color: #4A5560;
|
||||
font-weight: 700;
|
||||
letter-spacing: .2px;
|
||||
}
|
||||
.phone-cell .sublabel {
|
||||
font-size: 11px;
|
||||
color: #8A95A2;
|
||||
}
|
||||
|
||||
/* Tweaks panel */
|
||||
.tweaks-panel {
|
||||
position: fixed;
|
||||
right: 18px;
|
||||
bottom: 18px;
|
||||
width: 300px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 20px 60px rgba(15,30,40,0.25), 0 4px 16px rgba(15,30,40,0.08);
|
||||
padding: 16px;
|
||||
z-index: 100;
|
||||
font-size: 13px;
|
||||
}
|
||||
.tweaks-panel h3 {
|
||||
margin: 0 0 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.tweaks-panel h3 button {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: #8A95A2;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
padding: 0;
|
||||
}
|
||||
.tweaks-section { margin-bottom: 14px; }
|
||||
.tweaks-section .label {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .6px;
|
||||
color: #8A95A2;
|
||||
font-weight: 700;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.tweaks-options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
}
|
||||
.tweaks-options button {
|
||||
padding: 6px 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #E4EAF2;
|
||||
background: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #4A5560;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tweaks-options button.on {
|
||||
background: var(--c-primary-darker);
|
||||
color: #fff;
|
||||
border-color: var(--c-primary-darker);
|
||||
}
|
||||
.tweaks-options select {
|
||||
flex: 1;
|
||||
padding: 7px 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #E4EAF2;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.tweaks-fab {
|
||||
position: fixed;
|
||||
right: 18px;
|
||||
bottom: 18px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 16px rgba(15,30,40,0.15);
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
z-index: 99;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.intro-banner {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 18px;
|
||||
transform: translateX(-50%);
|
||||
background: #fff;
|
||||
border-radius: 14px;
|
||||
padding: 10px 16px;
|
||||
box-shadow: 0 8px 24px rgba(15,30,40,0.12);
|
||||
font-size: 13px;
|
||||
color: #4A5560;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
max-width: 90vw;
|
||||
}
|
||||
.intro-banner b { color: var(--c-primary-darker); }
|
||||
.intro-banner button {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
color: #8A95A2;
|
||||
font-size: 18px;
|
||||
padding: 0 0 0 6px;
|
||||
}
|
||||
|
||||
@keyframes pulse { 0%{opacity:.5;transform:scale(.95)} 100%{opacity:0;transform:scale(1.15)} }
|
||||
@keyframes blink { 50% { opacity: .3 } }
|
||||
@@ -0,0 +1,222 @@
|
||||
import React from 'react';
|
||||
import { I } from './icons.jsx';
|
||||
|
||||
export function Avatar({ init, size = 44, style = {} }) {
|
||||
return (
|
||||
<div className="avatar" style={{ width: size, height: size, fontSize: size * 0.38, ...style }}>
|
||||
{init}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function DoctorCard({ doc, variant = 'rich', onClick, dense }) {
|
||||
if (variant === 'list') {
|
||||
return (
|
||||
<button onClick={onClick} className="press" style={{
|
||||
display: 'flex', width: '100%', textAlign: 'left',
|
||||
background: '#fff', borderRadius: 14, padding: dense ? 12 : 14,
|
||||
gap: 12, alignItems: 'center', border: '1px solid var(--c-border)'
|
||||
}}>
|
||||
<Avatar init={doc.init} size={46} />
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ fontWeight: 700, fontSize: 15, color: 'var(--c-fg-1)', marginBottom: 2, lineHeight: 1.25 }}>{doc.name}</div>
|
||||
<div style={{ fontSize: 13, color: 'var(--c-fg-3)', display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
|
||||
<span>{doc.spec}</span>
|
||||
<span className="dot" />
|
||||
<span>{doc.exp} лет</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ textAlign: 'right', flexShrink: 0 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 3, justifyContent: 'flex-end', marginBottom: 4 }}>
|
||||
<I.star size={13} style={{ color: '#E8A13C' }} />
|
||||
<span style={{ fontSize: 13, fontWeight: 700 }}>{doc.rating}</span>
|
||||
</div>
|
||||
<div className="price" style={{ fontSize: 15 }}>{doc.price} ₽</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
if (variant === 'rich') {
|
||||
return (
|
||||
<button onClick={onClick} className="press" style={{
|
||||
background: '#fff', borderRadius: 18, padding: dense ? 14 : 16, width: '100%',
|
||||
textAlign: 'left', boxShadow: 'var(--sh-sm)', border: '1px solid var(--c-border)',
|
||||
display: 'flex', flexDirection: 'column', gap: 12,
|
||||
}}>
|
||||
<div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
|
||||
<Avatar init={doc.init} size={56} />
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ fontWeight: 700, fontSize: 16, color: 'var(--c-fg-1)', lineHeight: 1.25, marginBottom: 3 }}>{doc.name}</div>
|
||||
<div style={{ fontSize: 13, color: 'var(--c-fg-3)', marginBottom: 6 }}>{doc.spec}</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12, color: 'var(--c-fg-3)' }}>
|
||||
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, color: 'var(--c-fg-2)' }}>
|
||||
<I.star size={12} style={{ color: '#E8A13C' }} />
|
||||
<strong>{doc.rating}</strong>
|
||||
<span style={{ color: 'var(--c-fg-4)' }}>· {doc.reviews}</span>
|
||||
</span>
|
||||
<span className="dot" />
|
||||
<span>{doc.exp} лет опыта</span>
|
||||
</div>
|
||||
</div>
|
||||
{doc.kmn && <span className="chip" style={{ background: 'var(--c-warm-100)', color: 'var(--c-warm-text)', fontSize: 11, flexShrink: 0 }}>К.м.н.</span>}
|
||||
</div>
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||
paddingTop: 12, borderTop: '1px solid var(--c-divider)'
|
||||
}}>
|
||||
<div>
|
||||
<div style={{ fontSize: 11, color: 'var(--c-fg-4)', marginBottom: 2 }}>Ближайший приём</div>
|
||||
<div style={{ fontSize: 13, fontWeight: 700, color: 'var(--c-primary-darker)' }}>{doc.next}</div>
|
||||
</div>
|
||||
<div className="price" style={{ fontSize: 18 }}>{doc.price} ₽</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<button onClick={onClick} className="press" style={{
|
||||
width: '100%', textAlign: 'left', borderRadius: 20, overflow: 'hidden',
|
||||
background: '#fff', boxShadow: 'var(--sh-sm)', display: 'flex', flexDirection: 'column',
|
||||
}}>
|
||||
<div style={{
|
||||
aspectRatio: '5/4', background: 'linear-gradient(180deg,#E3F4F2 0%,#B5E3DE 100%)',
|
||||
position: 'relative', display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
|
||||
color: 'var(--c-primary-darker)', fontWeight: 700, fontSize: 48, fontFamily: 'var(--font-narrow)'
|
||||
}}>
|
||||
<div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: .5 }}>
|
||||
{doc.init}
|
||||
</div>
|
||||
{doc.kmn && <div style={{ position: 'absolute', top: 10, left: 10, padding: '4px 8px', borderRadius: 6, background: 'rgba(255,255,255,0.9)', color: 'var(--c-warm-text)', fontSize: 11, fontWeight: 700 }}>К.м.н.</div>}
|
||||
<div style={{ position: 'absolute', top: 10, right: 10, padding: '4px 8px', borderRadius: 999, background: 'rgba(255,255,255,0.9)', fontSize: 12, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 3 }}>
|
||||
<I.star size={12} style={{ color: '#E8A13C' }} />
|
||||
{doc.rating}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ padding: 12 }}>
|
||||
<div style={{ fontWeight: 700, fontSize: 14, color: 'var(--c-fg-1)', lineHeight: 1.25, marginBottom: 3, minHeight: 35 }}>{doc.name.split(' ').slice(0, 2).join(' ')}</div>
|
||||
<div style={{ fontSize: 12, color: 'var(--c-fg-3)', marginBottom: 8 }}>{doc.spec}</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<div className="price" style={{ fontSize: 15 }}>{doc.price} ₽</div>
|
||||
<I.chev size={16} style={{ color: 'var(--c-fg-4)' }} />
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function AppointmentCard({ appt, doctor, addr, onClick, compact = false }) {
|
||||
const isUpcoming = appt.status === 'upcoming';
|
||||
return (
|
||||
<button onClick={onClick} className="press" style={{
|
||||
width: '100%', textAlign: 'left',
|
||||
background: isUpcoming ? 'linear-gradient(135deg,#E3F4F2 0%,#F2FAF9 100%)' : '#fff',
|
||||
borderRadius: 18, padding: 16, border: isUpcoming ? '1px solid var(--c-primary-200)' : '1px solid var(--c-border)',
|
||||
display: 'flex', gap: 14, alignItems: 'flex-start',
|
||||
}}>
|
||||
<div style={{
|
||||
width: 50, height: 58, flexShrink: 0,
|
||||
background: isUpcoming ? 'var(--c-primary-darker)' : '#fff',
|
||||
color: isUpcoming ? '#fff' : 'var(--c-fg-2)',
|
||||
border: isUpcoming ? 0 : '1px solid var(--c-border)',
|
||||
borderRadius: 12, padding: '8px 6px', textAlign: 'center',
|
||||
}}>
|
||||
<div style={{ fontFamily: 'var(--font-narrow)', fontSize: 22, fontWeight: 700, lineHeight: 1 }}>{appt.date.split(' ')[0]}</div>
|
||||
<div style={{ fontSize: 11, marginTop: 2, opacity: .85 }}>{appt.date.split(' ')[1]}</div>
|
||||
</div>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ fontSize: 12, color: isUpcoming ? 'var(--c-primary-darker)' : 'var(--c-fg-3)', fontWeight: 700, marginBottom: 3, display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
<I.clock size={13} />
|
||||
{appt.time} · {appt.weekday}
|
||||
</div>
|
||||
<div style={{ fontWeight: 700, fontSize: 15, color: 'var(--c-fg-1)', marginBottom: 2, lineHeight: 1.25 }}>{doctor.name.split(' ').slice(0, 2).join(' ')}</div>
|
||||
<div style={{ fontSize: 13, color: 'var(--c-fg-3)', marginBottom: 6 }}>{doctor.spec}</div>
|
||||
{!compact && (
|
||||
<div style={{ fontSize: 12, color: 'var(--c-fg-3)', display: 'flex', alignItems: 'center', gap: 5 }}>
|
||||
<I.pin size={12} />
|
||||
{addr.short} · {appt.room}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{isUpcoming && <I.chev size={18} style={{ color: 'var(--c-fg-4)', flexShrink: 0 }} />}
|
||||
{!isUpcoming && appt.hasReport && <span className="chip chip-soft" style={{ flexShrink: 0 }}>Заключение</span>}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function SectionHeader({ title, action, onAction, pad = '0 20px' }) {
|
||||
return (
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: pad, marginBottom: 12 }}>
|
||||
<h2 className="h-sec">{title}</h2>
|
||||
{action && <button onClick={onAction} style={{ fontSize: 13, color: 'var(--c-primary-dark)', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 3 }}>{action} <I.chev size={14} /></button>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function TabBar({ active, onChange, platform = 'ios' }) {
|
||||
const tabs = [
|
||||
{ id: 'home', label: 'Главная', icon: I.home },
|
||||
{ id: 'appts', label: 'Приёмы', icon: I.calendar },
|
||||
{ id: 'doctors', label: 'Врачи', icon: I.stetho },
|
||||
{ id: 'chat', label: 'Чат', icon: I.chat, badge: 2 },
|
||||
{ id: 'profile', label: 'Профиль', icon: I.profile },
|
||||
];
|
||||
return (
|
||||
<div className="tabbar" style={{ paddingBottom: platform === 'ios' ? 30 : 14 }}>
|
||||
{tabs.map(t => {
|
||||
const IconC = t.icon;
|
||||
const on = active === t.id;
|
||||
return (
|
||||
<button key={t.id} onClick={() => onChange(t.id)} className={'tab' + (on ? ' on' : '')}>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<IconC size={22} sw={on ? 2 : 1.75} />
|
||||
{t.badge > 0 && (
|
||||
<span style={{
|
||||
position: 'absolute', top: -3, right: -6,
|
||||
background: 'var(--c-accent)', color: '#fff',
|
||||
fontSize: 10, fontWeight: 700,
|
||||
minWidth: 16, height: 16, borderRadius: 999,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
padding: '0 4px',
|
||||
}}>{t.badge}</span>
|
||||
)}
|
||||
</div>
|
||||
<span>{t.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ScreenHeader({ title, subtitle, onBack, rightIcon, onRight, center = false }) {
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', padding: '12px 16px 8px',
|
||||
background: 'transparent',
|
||||
gap: 12, position: 'sticky', top: 0, zIndex: 10,
|
||||
}}>
|
||||
{onBack && (
|
||||
<button onClick={onBack} className="press" style={{
|
||||
width: 38, height: 38, borderRadius: 999, background: '#fff',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
boxShadow: 'var(--sh-sm)', border: '1px solid var(--c-border)'
|
||||
}}>
|
||||
<I.chevL size={20} style={{ color: 'var(--c-fg-1)' }} />
|
||||
</button>
|
||||
)}
|
||||
<div style={{ flex: 1, textAlign: center ? 'center' : 'left' }}>
|
||||
{subtitle && <div className="sub" style={{ marginBottom: 2 }}>{subtitle}</div>}
|
||||
<div style={{ fontSize: 18, fontWeight: 700, color: 'var(--c-fg-1)' }}>{title}</div>
|
||||
</div>
|
||||
{rightIcon && (
|
||||
<button onClick={onRight} className="press" style={{
|
||||
width: 38, height: 38, borderRadius: 999, background: '#fff',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
boxShadow: 'var(--sh-sm)', border: '1px solid var(--c-border)'
|
||||
}}>
|
||||
{React.createElement(rightIcon, { size: 18, style: { color: 'var(--c-fg-1)' } })}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+88
@@ -0,0 +1,88 @@
|
||||
// Реальные данные с сайта Клиники УГН им. проф. Е.Н. Оленевой
|
||||
// (oclinica.ru/lor) — врачи, услуги, цены.
|
||||
|
||||
export const CLINIC_DATA = {
|
||||
clinic: {
|
||||
name: 'Клиника УГН',
|
||||
full: 'Клиника ухо, горло, нос им. проф. Е.Н. Оленевой',
|
||||
phone: '(342) 207-03-03',
|
||||
hours: '9:00–21:00 ежедневно',
|
||||
addresses: [
|
||||
{ id: 'tsetkin', short: 'К. Цеткин, 9', full: 'ул. Клары Цеткин, 9', note: 'Основная клиника + Центр сурдологии' },
|
||||
{ id: 'zvezda', short: 'Газеты Звезда, 31а', full: 'ул. Газеты Звезда, 31а', note: 'Клиника лечения кашля и аллергии' },
|
||||
{ id: 'krasnokamsk', short: 'Краснокамск', full: 'г. Краснокамск, филиал', note: 'Филиал' },
|
||||
],
|
||||
},
|
||||
doctors: [
|
||||
{ id: 'makarova', init: 'МЛ', name: 'Макарова Людмила Германовна', spec: 'ЛОР-врач · Сурдолог', exp: 24, price: 1800, rating: 4.9, reviews: 312, kmn: false, next: 'Завтра, 10:30', address: 'tsetkin' },
|
||||
{ id: 'semerikova',init: 'СН', name: 'Семерикова Наталия Александровна', spec: 'ЛОР-хирург · Сурдолог', exp: 28, price: 2400, rating: 5.0, reviews: 428, kmn: true, next: 'Сегодня, 16:00', address: 'tsetkin' },
|
||||
{ id: 'voronchikhina', init: 'ВН', name: 'Ворончихина Наталия Валерьевна', spec: 'Отоневролог · Хирург', exp: 22, price: 2400, rating: 4.9, reviews: 201, kmn: true, next: '21 апр, 09:00', address: 'tsetkin' },
|
||||
{ id: 'lobanova', init: 'ЛИ', name: 'Лобанова Ирина Юрьевна', spec: 'ЛОР-врач · Сурдолог', exp: 18, price: 1800, rating: 4.8, reviews: 256, kmn: false, next: 'Завтра, 14:15', address: 'tsetkin' },
|
||||
{ id: 'torsunova', init: 'ТН', name: 'Торсунова Наталья Сергеевна', spec: 'Слухопротезирование', exp: 14, price: 1500, rating: 4.9, reviews: 98, kmn: false, next: '22 апр, 11:00', address: 'tsetkin' },
|
||||
{ id: 'suvorova', init: 'СС', name: 'Суворова Светлана Викторовна', spec: 'ЛОР-врач · Сурдолог', exp: 16, price: 1800, rating: 4.8, reviews: 174, kmn: false, next: 'Сегодня, 18:30', address: 'zvezda' },
|
||||
{ id: 'syndaev', init: 'СА', name: 'Синдяев Андрей Викторович', spec: 'ЛОР-хирург', exp: 21, price: 2200, rating: 5.0, reviews: 389, kmn: false, next: 'Завтра, 12:00', address: 'tsetkin' },
|
||||
{ id: 'zykin', init: 'ЗО', name: 'Зыкин Олег Владимирович', spec: 'ЛОР-врач · Фониатр', exp: 19, price: 2000, rating: 4.9, reviews: 217, kmn: false, next: '21 апр, 15:30', address: 'tsetkin' },
|
||||
],
|
||||
services: [
|
||||
{ cat: 'Приёмы', name: 'Приём ЛОР-врача первичный', price: 1800 },
|
||||
{ cat: 'Приёмы', name: 'Приём ЛОР-врача повторный', price: 1400 },
|
||||
{ cat: 'Приёмы', name: 'Консультация кандидата мед. наук', price: 2400 },
|
||||
{ cat: 'Приёмы', name: 'Приём детского ЛОР-врача', price: 1800 },
|
||||
{ cat: 'Диагностика',name: 'Эндоскопия ЛОР-органов', price: 1200 },
|
||||
{ cat: 'Диагностика',name: 'Аудиометрия', price: 1100 },
|
||||
{ cat: 'Диагностика',name: 'Тимпанометрия', price: 800 },
|
||||
{ cat: 'Процедуры', name: 'Промывание миндалин', price: 1200 },
|
||||
{ cat: 'Процедуры', name: 'Промывание носа «Кукушка»', price: 900 },
|
||||
{ cat: 'Операции', name: 'Аденотомия (эндоскопическая)', price: 28000 },
|
||||
{ cat: 'Операции', name: 'Вазотомия нижних раковин', price: 22000 },
|
||||
{ cat: 'Операции', name: 'Септопластика', price: 45000 },
|
||||
{ cat: 'Операции', name: 'Тонзиллэктомия', price: 38000 },
|
||||
],
|
||||
specializations: [
|
||||
{ id: 'lor', icon: 'ear', label: 'ЛОР', count: 12 },
|
||||
{ id: 'surdo', icon: 'hear', label: 'Сурдология', count: 5 },
|
||||
{ id: 'allergo', icon: 'leaf', label: 'Аллергология', count: 3 },
|
||||
{ id: 'phono', icon: 'mic', label: 'Фониатрия', count: 2 },
|
||||
{ id: 'kids', icon: 'baby', label: 'Детский ЛОР', count: 7 },
|
||||
{ id: 'surgery', icon: 'scalpel', label: 'Хирургия', count: 6 },
|
||||
],
|
||||
appointments: [
|
||||
{ id: 'a1', status: 'upcoming', doctor: 'semerikova', date: '21 апр', weekday: 'понедельник', time: '16:00', room: 'Каб. 204', address: 'tsetkin', type: 'Первичный приём' },
|
||||
{ id: 'a2', status: 'upcoming', doctor: 'torsunova', date: '25 апр', weekday: 'пятница', time: '11:00', room: 'Каб. 118', address: 'tsetkin', type: 'Аудиометрия' },
|
||||
{ id: 'a3', status: 'past', doctor: 'makarova', date: '8 апр', weekday: 'среда', time: '10:30', room: 'Каб. 202', address: 'tsetkin', type: 'Первичный приём', hasReport: true },
|
||||
{ id: 'a4', status: 'past', doctor: 'zykin', date: '28 мар', weekday: 'пятница', time: '15:00', room: 'Каб. 210', address: 'tsetkin', type: 'Консультация', hasReport: true },
|
||||
],
|
||||
results: [
|
||||
{ id: 'r1', name: 'Аудиограмма', date: '8 апр 2026', doctor: 'makarova', status: 'ready', kind: 'audio' },
|
||||
{ id: 'r2', name: 'Эндоскопия носоглотки', date: '8 апр 2026', doctor: 'makarova', status: 'ready', kind: 'image' },
|
||||
{ id: 'r3', name: 'Общий анализ крови', date: '1 апр 2026', doctor: 'syndaev', status: 'ready', kind: 'lab' },
|
||||
{ id: 'r4', name: 'Мазок из зева', date: '28 мар 2026',doctor: 'zykin', status: 'ready', kind: 'lab' },
|
||||
{ id: 'r5', name: 'Посев на микрофлору', date: '20 апр 2026',doctor: 'syndaev', status: 'pending', kind: 'lab' },
|
||||
],
|
||||
articles: [
|
||||
{ tag: 'Дети', title: 'Как понять, что у ребёнка отит', mins: 4, author: 'Макарова Л.Г.' },
|
||||
{ tag: 'Операции', title: 'Восстановление после септопластики', mins: 6, author: 'Синдяев А.В.' },
|
||||
{ tag: 'Беременность', title: 'Безопасно лечим горло при беременности', mins: 5, author: 'Лобанова И.Ю.' },
|
||||
{ tag: 'Слух', title: 'Когда пора проверить слух', mins: 3, author: 'Семерикова Н.А.' },
|
||||
],
|
||||
recovery: {
|
||||
op: 'Септопластика',
|
||||
surgeon: 'syndaev',
|
||||
date: '12 апр 2026',
|
||||
dayNow: 6,
|
||||
totalDays: 14,
|
||||
steps: [
|
||||
{ day: 0, title: 'День операции', done: true, note: 'Постельный режим, холод на переносицу' },
|
||||
{ day: 1, title: '1 день — снятие тампонов',done: true, note: 'Контрольный осмотр хирурга' },
|
||||
{ day: 3, title: '3 день — промывание', done: true, note: 'Солевой раствор 4 раза в день' },
|
||||
{ day: 6, title: '6 день — осмотр', done: false, active: true, note: 'Осмотр хирурга, снятие корочек' },
|
||||
{ day: 10, title: '10 день — контроль', done: false, note: 'Эндоскопия полости носа' },
|
||||
{ day: 14, title: 'Выписка', done: false, note: 'Финальный осмотр' },
|
||||
],
|
||||
meds: [
|
||||
{ name: 'Аква Марис', freq: '4 раза в день', nextTake: '14:00', taken: 2, total: 4 },
|
||||
{ name: 'Амоксиклав 625 мг', freq: '2 раза в день', nextTake: '20:00', taken: 1, total: 2 },
|
||||
{ name: 'Нурофен', freq: 'при боли', nextTake: '—', taken: 0, total: 0 },
|
||||
],
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,74 @@
|
||||
import React from 'react';
|
||||
|
||||
const MD_C = {
|
||||
surface: '#f4fbf8',
|
||||
onSurface: '#171d1b',
|
||||
frameBorder: 'rgba(116,119,117,0.5)',
|
||||
};
|
||||
|
||||
function AndroidStatusBar({ dark = false }) {
|
||||
const c = dark ? '#fff' : MD_C.onSurface;
|
||||
return (
|
||||
<div style={{
|
||||
height: 40, display: 'flex', alignItems: 'center',
|
||||
justifyContent: 'space-between', padding: '0 16px',
|
||||
position: 'relative', flexShrink: 0,
|
||||
fontFamily: 'Roboto, system-ui, sans-serif',
|
||||
}}>
|
||||
<div style={{ width: 128, display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<span style={{ fontSize: 14, fontWeight: 400, letterSpacing: 0.25, lineHeight: '20px', color: c }}>9:30</span>
|
||||
</div>
|
||||
<div style={{
|
||||
position: 'absolute', left: '50%', top: 8, transform: 'translateX(-50%)',
|
||||
width: 24, height: 24, borderRadius: 100, background: '#2e2e2e',
|
||||
}} />
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<div style={{ display: 'flex', paddingRight: 2 }}>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" style={{ marginRight: -2 }}>
|
||||
<path d="M8 13.3L.67 5.97a10.37 10.37 0 0114.66 0L8 13.3z" fill={c}/>
|
||||
</svg>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" style={{ marginRight: -2 }}>
|
||||
<path d="M14.67 14.67V1.33L1.33 14.67h13.34z" fill={c}/>
|
||||
</svg>
|
||||
</div>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16">
|
||||
<rect x="3.75" y="2" width="8.5" height="13" rx="1.5" fill={c}/>
|
||||
<rect x="5.5" y="0.9" width="5" height="2" rx="0.5" fill={c}/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AndroidNavBar({ dark = false }) {
|
||||
return (
|
||||
<div style={{
|
||||
height: 24, display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
flexShrink: 0,
|
||||
}}>
|
||||
<div style={{
|
||||
width: 108, height: 4, borderRadius: 2,
|
||||
background: dark ? '#fff' : MD_C.onSurface, opacity: 0.4,
|
||||
}} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function AndroidDevice({ children, width = 412, height = 892, dark = false }) {
|
||||
return (
|
||||
<div style={{
|
||||
width, height, borderRadius: 18, overflow: 'hidden',
|
||||
background: dark ? '#1d1b20' : MD_C.surface,
|
||||
border: `8px solid ${MD_C.frameBorder}`,
|
||||
boxShadow: '0 30px 80px rgba(0,0,0,0.25)',
|
||||
display: 'flex', flexDirection: 'column', boxSizing: 'border-box',
|
||||
position: 'relative',
|
||||
}}>
|
||||
<AndroidStatusBar dark={dark} />
|
||||
<div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
|
||||
{children}
|
||||
</div>
|
||||
<AndroidNavBar dark={dark} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import React from 'react';
|
||||
|
||||
export function IOSStatusBar({ dark = false, time = '9:41' }) {
|
||||
const c = dark ? '#fff' : '#000';
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex', gap: 154, alignItems: 'center', justifyContent: 'center',
|
||||
padding: '21px 24px 19px', boxSizing: 'border-box',
|
||||
position: 'relative', zIndex: 20, width: '100%',
|
||||
}}>
|
||||
<div style={{ flex: 1, height: 22, display: 'flex', alignItems: 'center', justifyContent: 'center', paddingTop: 1.5 }}>
|
||||
<span style={{
|
||||
fontFamily: '-apple-system, "SF Pro", system-ui', fontWeight: 590,
|
||||
fontSize: 17, lineHeight: '22px', color: c,
|
||||
}}>{time}</span>
|
||||
</div>
|
||||
<div style={{ flex: 1, height: 22, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7, paddingTop: 1, paddingRight: 1 }}>
|
||||
<svg width="19" height="12" viewBox="0 0 19 12">
|
||||
<rect x="0" y="7.5" width="3.2" height="4.5" rx="0.7" fill={c}/>
|
||||
<rect x="4.8" y="5" width="3.2" height="7" rx="0.7" fill={c}/>
|
||||
<rect x="9.6" y="2.5" width="3.2" height="9.5" rx="0.7" fill={c}/>
|
||||
<rect x="14.4" y="0" width="3.2" height="12" rx="0.7" fill={c}/>
|
||||
</svg>
|
||||
<svg width="17" height="12" viewBox="0 0 17 12">
|
||||
<path d="M8.5 3.2C10.8 3.2 12.9 4.1 14.4 5.6L15.5 4.5C13.7 2.7 11.2 1.5 8.5 1.5C5.8 1.5 3.3 2.7 1.5 4.5L2.6 5.6C4.1 4.1 6.2 3.2 8.5 3.2Z" fill={c}/>
|
||||
<path d="M8.5 6.8C9.9 6.8 11.1 7.3 12 8.2L13.1 7.1C11.8 5.9 10.2 5.1 8.5 5.1C6.8 5.1 5.2 5.9 3.9 7.1L5 8.2C5.9 7.3 7.1 6.8 8.5 6.8Z" fill={c}/>
|
||||
<circle cx="8.5" cy="10.5" r="1.5" fill={c}/>
|
||||
</svg>
|
||||
<svg width="27" height="13" viewBox="0 0 27 13">
|
||||
<rect x="0.5" y="0.5" width="23" height="12" rx="3.5" stroke={c} strokeOpacity="0.35" fill="none"/>
|
||||
<rect x="2" y="2" width="20" height="9" rx="2" fill={c}/>
|
||||
<path d="M25 4.5V8.5C25.8 8.2 26.5 7.2 26.5 6.5C26.5 5.8 25.8 4.8 25 4.5Z" fill={c} fillOpacity="0.4"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function IOSDevice({ children, width = 402, height = 874, dark = false }) {
|
||||
return (
|
||||
<div style={{
|
||||
width, height, borderRadius: 48, overflow: 'hidden',
|
||||
position: 'relative', background: dark ? '#000' : '#F2F2F7',
|
||||
boxShadow: '0 40px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.12)',
|
||||
fontFamily: '-apple-system, system-ui, sans-serif',
|
||||
WebkitFontSmoothing: 'antialiased',
|
||||
}}>
|
||||
<div style={{
|
||||
position: 'absolute', top: 11, left: '50%', transform: 'translateX(-50%)',
|
||||
width: 126, height: 37, borderRadius: 24, background: '#000', zIndex: 50,
|
||||
}} />
|
||||
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10 }}>
|
||||
<IOSStatusBar dark={dark} />
|
||||
</div>
|
||||
<div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>{children}</div>
|
||||
</div>
|
||||
<div style={{
|
||||
position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 60,
|
||||
height: 34, display: 'flex', justifyContent: 'center', alignItems: 'flex-end',
|
||||
paddingBottom: 8, pointerEvents: 'none',
|
||||
}}>
|
||||
<div style={{
|
||||
width: 139, height: 5, borderRadius: 100,
|
||||
background: dark ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.25)',
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
// Outline icons — 24x24, 1.75 stroke. Нейтральный медицинский стиль.
|
||||
import React from 'react';
|
||||
|
||||
const Icon = ({ d, size = 22, stroke = 'currentColor', fill = 'none', sw = 1.75, children, style }) => (
|
||||
<svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={style}>
|
||||
{d ? <path d={d} /> : children}
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const I = {
|
||||
home: (p) => <Icon {...p}><path d="M3 10.5L12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/><path d="M10 21v-6h4v6"/></Icon>,
|
||||
calendar: (p) => <Icon {...p}><rect x="3.5" y="5" width="17" height="15" rx="2.5"/><path d="M8 3v4M16 3v4M3.5 10h17"/></Icon>,
|
||||
chat: (p) => <Icon {...p}><path d="M4 5h16a1 1 0 011 1v11a1 1 0 01-1 1H9l-4 3v-3H4a1 1 0 01-1-1V6a1 1 0 011-1z"/></Icon>,
|
||||
profile: (p) => <Icon {...p}><circle cx="12" cy="8.5" r="4"/><path d="M4 20.5c1.5-4 4.5-6 8-6s6.5 2 8 6"/></Icon>,
|
||||
phone: (p) => <Icon {...p}><path d="M5 4h3l2 5-2.5 1.5a12 12 0 006 6L15 14l5 2v3a2 2 0 01-2 2 16 16 0 01-13-13 2 2 0 012-2z"/></Icon>,
|
||||
pin: (p) => <Icon {...p}><path d="M12 22s7-6.5 7-12a7 7 0 10-14 0c0 5.5 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></Icon>,
|
||||
clock: (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></Icon>,
|
||||
search: (p) => <Icon {...p}><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4-4"/></Icon>,
|
||||
chev: (p) => <Icon {...p}><path d="M9 6l6 6-6 6"/></Icon>,
|
||||
chevL: (p) => <Icon {...p}><path d="M15 6l-6 6 6 6"/></Icon>,
|
||||
chevD: (p) => <Icon {...p}><path d="M6 9l6 6 6-6"/></Icon>,
|
||||
close: (p) => <Icon {...p}><path d="M6 6l12 12M18 6L6 18"/></Icon>,
|
||||
check: (p) => <Icon {...p}><path d="M5 12.5l4 4 10-10"/></Icon>,
|
||||
bell: (p) => <Icon {...p}><path d="M6 16V10a6 6 0 1112 0v6l1.5 2h-15L6 16z"/><path d="M10 19.5a2 2 0 004 0"/></Icon>,
|
||||
video: (p) => <Icon {...p}><rect x="3" y="6.5" width="12" height="11" rx="2"/><path d="M15 10l6-3v10l-6-3"/></Icon>,
|
||||
doc: (p) => <Icon {...p}><path d="M6 3h8l5 5v13a1 1 0 01-1 1H6a1 1 0 01-1-1V4a1 1 0 011-1z"/><path d="M14 3v5h5"/><path d="M8 13h7M8 17h7"/></Icon>,
|
||||
plus: (p) => <Icon {...p}><path d="M12 5v14M5 12h14"/></Icon>,
|
||||
heart: (p) => <Icon {...p}><path d="M12 20s-7-4.5-7-10a4 4 0 017-2.5A4 4 0 0119 10c0 5.5-7 10-7 10z"/></Icon>,
|
||||
star: (p) => <Icon fill="currentColor" stroke="none" {...p}><path d="M12 2.5l2.9 6 6.6.9-4.8 4.7 1.1 6.6L12 17.6l-5.9 3.1 1.1-6.6L2.5 9.4l6.6-.9z"/></Icon>,
|
||||
ear: (p) => <Icon {...p}><path d="M8.5 20c-2 0-3.5-1.5-3.5-3.5 0-1.5 1-2.5 1-4.5 0-4.5 3-7.5 7-7.5s7 2.5 7 6.5-3 5.5-5 5.5c-1.5 0-2 1-2 2s-.5 3-2.5 3-2-1.5-2-1.5"/></Icon>,
|
||||
hearing: (p) => <Icon {...p}><path d="M6 12c0-3.5 2.5-6 6-6s6 2.5 6 6"/><path d="M9 12c0-1.5 1.5-3 3-3s3 1.5 3 3"/><circle cx="12" cy="12" r="1"/><path d="M17 16l2 2M17 8l2-2"/></Icon>,
|
||||
stetho: (p) => <Icon {...p}><path d="M6 3v6a4 4 0 008 0V3"/><path d="M10 13v3a4 4 0 008 0v-2"/><circle cx="18" cy="9.5" r="1.5"/></Icon>,
|
||||
pill: (p) => <Icon {...p}><rect x="3" y="9" width="18" height="7" rx="3.5" transform="rotate(-30 12 12.5)"/><path d="M8 16l8-8"/></Icon>,
|
||||
qr: (p) => <Icon {...p}><rect x="3.5" y="3.5" width="6" height="6" rx="1"/><rect x="14.5" y="3.5" width="6" height="6" rx="1"/><rect x="3.5" y="14.5" width="6" height="6" rx="1"/><path d="M14.5 14.5h2v2M20.5 14.5v2M14.5 18.5h2M18.5 16.5v4M16.5 20.5h4"/></Icon>,
|
||||
card: (p) => <Icon {...p}><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18M7 15h3"/></Icon>,
|
||||
file: (p) => <Icon {...p}><path d="M6 3h8l5 5v13H6z"/><path d="M14 3v5h5"/></Icon>,
|
||||
filter: (p) => <Icon {...p}><path d="M4 5h16M7 12h10M10 19h4"/></Icon>,
|
||||
mic: (p) => <Icon {...p}><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0014 0M12 18v3"/></Icon>,
|
||||
user: (p) => <Icon {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21c1-5 4-7 8-7s7 2 8 7"/></Icon>,
|
||||
shield: (p) => <Icon {...p}><path d="M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6z"/></Icon>,
|
||||
gift: (p) => <Icon {...p}><rect x="3" y="9" width="18" height="12" rx="1"/><path d="M3 13h18M12 9v12M8 9a2.5 2.5 0 010-5c2 0 4 5 4 5M16 9a2.5 2.5 0 000-5c-2 0-4 5-4 5"/></Icon>,
|
||||
volume: (p) => <Icon {...p}><path d="M4 9h4l5-4v14l-5-4H4V9z"/><path d="M16 8a5 5 0 010 8M19 5a9 9 0 010 14"/></Icon>,
|
||||
arrow: (p) => <Icon {...p}><path d="M5 12h14M13 6l6 6-6 6"/></Icon>,
|
||||
menu: (p) => <Icon {...p}><path d="M4 7h16M4 12h16M4 17h16"/></Icon>,
|
||||
};
|
||||
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App.jsx';
|
||||
import './tokens.css';
|
||||
import './app.css';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
@@ -0,0 +1,450 @@
|
||||
import React, { useState } from 'react';
|
||||
import { I } from '../icons.jsx';
|
||||
import { CLINIC_DATA } from '../data.js';
|
||||
import { Avatar, DoctorCard, ScreenHeader } from '../components.jsx';
|
||||
|
||||
export function BookingSpecsScreen({ nav }) {
|
||||
const { specializations } = CLINIC_DATA;
|
||||
return (
|
||||
<div style={{ paddingBottom: 100 }}>
|
||||
<ScreenHeader title="Запись на приём" subtitle="Шаг 1 из 4" onBack={() => nav.pop()} />
|
||||
<div style={{ padding: '8px 20px 12px' }}>
|
||||
<div className="h-screen" style={{ marginBottom: 8 }}>Выберите направление</div>
|
||||
<div className="sub" style={{ marginBottom: 16 }}>27 ЛОР-врачей в клинике · 6 кандидатов мед. наук</div>
|
||||
|
||||
<div className="seg" style={{ marginBottom: 18 }}>
|
||||
{['Взрослому', 'Ребёнку', 'Онлайн'].map((l, i) => (
|
||||
<button key={i} className={i === 0 ? 'on' : ''}>{l}</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
|
||||
{specializations.map(s => {
|
||||
const icons = { ear: I.ear, hear: I.hearing, leaf: I.heart, mic: I.mic, baby: I.profile, scalpel: I.stetho };
|
||||
const Ic = icons[s.icon];
|
||||
return (
|
||||
<button key={s.id} onClick={() => nav.push('booking-doctor:' + s.id)} className="press card" style={{
|
||||
padding: 16, display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 12,
|
||||
textAlign: 'left',
|
||||
}}>
|
||||
<div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--c-primary-100)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Ic size={24} style={{ color: 'var(--c-primary-darker)' }} />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontSize: 15, fontWeight: 700, marginBottom: 2 }}>{s.label}</div>
|
||||
<div className="sub" style={{ fontSize: 12 }}>{s.count} специалистов</div>
|
||||
</div>
|
||||
<div style={{ fontSize: 13, color: 'var(--c-primary-darker)', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
от 1500 ₽ <I.chev size={14} />
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function BookingDoctorScreen({ nav }) {
|
||||
const { doctors } = CLINIC_DATA;
|
||||
const [q, setQ] = useState('');
|
||||
const filtered = doctors.filter(d => !q || d.name.toLowerCase().includes(q.toLowerCase()) || d.spec.toLowerCase().includes(q.toLowerCase()));
|
||||
return (
|
||||
<div style={{ paddingBottom: 100 }}>
|
||||
<ScreenHeader title="Выберите врача" subtitle="Шаг 2 из 4" onBack={() => nav.pop()} rightIcon={I.filter} />
|
||||
<div style={{ padding: '0 16px 12px' }}>
|
||||
<div style={{
|
||||
background: '#fff', borderRadius: 14, padding: '10px 14px',
|
||||
display: 'flex', alignItems: 'center', gap: 10,
|
||||
border: '1px solid var(--c-border)',
|
||||
}}>
|
||||
<I.search size={18} style={{ color: 'var(--c-fg-4)' }} />
|
||||
<input value={q} onChange={e => setQ(e.target.value)} placeholder="ФИО или специализация" style={{
|
||||
flex: 1, border: 0, outline: 0, fontSize: 15, background: 'transparent',
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="pills" style={{ marginBottom: 12 }}>
|
||||
{['Все','Свободно сегодня','Кандидаты наук','Хирурги','Детские'].map((p,i)=>(
|
||||
<button key={i} className={'pill' + (i===0?' on':'')}>{p}</button>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
{filtered.map(d => (
|
||||
<DoctorCard key={d.id} doc={d} variant="rich" onClick={() => nav.push('booking-time:' + d.id)} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function BookingTimeScreen({ nav, doctorId }) {
|
||||
const doc = CLINIC_DATA.doctors.find(d => d.id === doctorId);
|
||||
const [selDate, setSelDate] = useState(1);
|
||||
const [selTime, setSelTime] = useState('16:00');
|
||||
|
||||
const dates = [
|
||||
{ i: 0, d: 'Сегодня', n: '20', wd: 'вс' },
|
||||
{ i: 1, d: 'Пн', n: '21', wd: 'пн' },
|
||||
{ i: 2, d: 'Вт', n: '22', wd: 'вт' },
|
||||
{ i: 3, d: 'Ср', n: '23', wd: 'ср' },
|
||||
{ i: 4, d: 'Чт', n: '24', wd: 'чт' },
|
||||
{ i: 5, d: 'Пт', n: '25', wd: 'пт' },
|
||||
{ i: 6, d: 'Сб', n: '26', wd: 'сб' },
|
||||
];
|
||||
const slots = {
|
||||
morning: ['09:00','09:30','10:00','10:30','11:15','11:45'],
|
||||
day: ['12:00','13:30','14:00','14:30','15:15','15:45'],
|
||||
evening: ['16:00','16:30','17:15','18:00','18:30','19:15','20:00'],
|
||||
};
|
||||
const booked = new Set(['10:30','14:00','18:00']);
|
||||
|
||||
return (
|
||||
<div style={{ paddingBottom: 130 }}>
|
||||
<ScreenHeader title="Дата и время" subtitle="Шаг 3 из 4" onBack={() => nav.pop()} />
|
||||
|
||||
<div style={{ padding: '0 20px 16px' }}>
|
||||
<div className="card" style={{ display: 'flex', gap: 12, alignItems: 'center', padding: 14 }}>
|
||||
<Avatar init={doc.init} size={48} />
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontSize: 14, fontWeight: 700 }}>{doc.name.split(' ').slice(0,2).join(' ')}</div>
|
||||
<div className="sub" style={{ fontSize: 12 }}>{doc.spec}</div>
|
||||
</div>
|
||||
<div className="price" style={{ fontSize: 16 }}>{doc.price} ₽</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 16 }}>
|
||||
<div style={{ padding: '0 20px 10px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<h2 className="h-sec">Апрель 2026</h2>
|
||||
<button style={{ color: 'var(--c-primary-darker)', fontSize: 13, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<I.calendar size={15} /> Календарь
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 8, padding: '0 16px', overflowX: 'auto' }} className="noscroll">
|
||||
{dates.map(d => (
|
||||
<button key={d.i} onClick={() => setSelDate(d.i)} className="press" style={{
|
||||
flexShrink: 0, padding: '10px 4px', width: 54, borderRadius: 14,
|
||||
background: selDate === d.i ? 'var(--c-primary-darker)' : '#fff',
|
||||
color: selDate === d.i ? '#fff' : 'var(--c-fg-1)',
|
||||
border: selDate === d.i ? 0 : '1px solid var(--c-border)',
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
<div style={{ fontSize: 11, opacity: .7, marginBottom: 3 }}>{d.d}</div>
|
||||
<div style={{ fontFamily: 'var(--font-narrow)', fontSize: 20, fontWeight: 700, lineHeight: 1 }}>{d.n}</div>
|
||||
<div style={{ fontSize: 10, marginTop: 4, opacity: selDate===d.i ? .7 : .5 }}>
|
||||
{selDate===d.i ? '12 окон' : '·'}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: '0 20px' }}>
|
||||
{Object.entries({ 'Утро': slots.morning, 'День': slots.day, 'Вечер': slots.evening }).map(([label, arr]) => (
|
||||
<div key={label} style={{ marginBottom: 18 }}>
|
||||
<div style={{ fontSize: 12, fontWeight: 700, color: 'var(--c-fg-3)', textTransform: 'uppercase', letterSpacing: .5, marginBottom: 10 }}>{label}</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 8 }}>
|
||||
{arr.map(t => {
|
||||
const isBooked = booked.has(t);
|
||||
const sel = selTime === t;
|
||||
return (
|
||||
<button key={t} disabled={isBooked} onClick={() => setSelTime(t)} className="press" style={{
|
||||
padding: '11px 0', borderRadius: 10, fontSize: 14, fontWeight: 700,
|
||||
background: sel ? 'var(--c-primary-darker)' : isBooked ? 'var(--c-divider)' : '#fff',
|
||||
color: sel ? '#fff' : isBooked ? 'var(--c-fg-4)' : 'var(--c-fg-1)',
|
||||
border: sel ? 0 : '1px solid var(--c-border)',
|
||||
textDecoration: isBooked ? 'line-through' : 'none',
|
||||
cursor: isBooked ? 'not-allowed' : 'pointer',
|
||||
}}>{t}</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
position: 'absolute', left: 0, right: 0, bottom: 0, padding: '14px 20px 34px',
|
||||
background: 'rgba(255,255,255,0.95)', backdropFilter: 'blur(10px)',
|
||||
borderTop: '1px solid var(--c-border)',
|
||||
}}>
|
||||
<button onClick={() => nav.push('booking-confirm:' + doctorId + ':' + selDate + ':' + selTime)} className="btn-p block">
|
||||
Выбрать · {dates[selDate].d}, {selTime}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function BookingConfirmScreen({ nav, doctorId, dateIdx, time }) {
|
||||
const doc = CLINIC_DATA.doctors.find(d => d.id === doctorId);
|
||||
const addr = CLINIC_DATA.clinic.addresses.find(a => a.id === doc.address);
|
||||
const [type, setType] = useState('offline');
|
||||
const [comment, setComment] = useState('');
|
||||
const dates = ['Сегодня, 20 апр','Пн, 21 апр','Вт, 22 апр','Ср, 23 апр','Чт, 24 апр','Пт, 25 апр','Сб, 26 апр'];
|
||||
return (
|
||||
<div style={{ paddingBottom: 120 }}>
|
||||
<ScreenHeader title="Подтверждение" subtitle="Шаг 4 из 4" onBack={() => nav.pop()} />
|
||||
<div style={{ padding: '0 20px' }}>
|
||||
<div className="card" style={{ padding: 0, overflow: 'hidden', marginBottom: 16 }}>
|
||||
<div style={{ padding: 16, display: 'flex', gap: 12, alignItems: 'center' }}>
|
||||
<Avatar init={doc.init} size={50} />
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontWeight: 700, fontSize: 15 }}>{doc.name.split(' ').slice(0,2).join(' ')}</div>
|
||||
<div className="sub" style={{ fontSize: 12 }}>{doc.spec}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="divider" />
|
||||
<div style={{ padding: '12px 16px', display: 'flex', justifyContent: 'space-between' }}>
|
||||
<span className="sub">Дата</span>
|
||||
<span style={{ fontSize: 14, fontWeight: 700 }}>{dates[dateIdx]}</span>
|
||||
</div>
|
||||
<div className="divider" />
|
||||
<div style={{ padding: '12px 16px', display: 'flex', justifyContent: 'space-between' }}>
|
||||
<span className="sub">Время</span>
|
||||
<span style={{ fontSize: 14, fontWeight: 700 }}>{time}</span>
|
||||
</div>
|
||||
<div className="divider" />
|
||||
<div style={{ padding: '12px 16px', display: 'flex', justifyContent: 'space-between' }}>
|
||||
<span className="sub">Адрес</span>
|
||||
<span style={{ fontSize: 14, fontWeight: 700, textAlign: 'right' }}>{addr.full}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-sec" style={{ marginBottom: 10 }}>Формат приёма</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 20 }}>
|
||||
{[
|
||||
{ id: 'offline', lb: 'Очно', sub: 'В клинике', i: I.pin },
|
||||
{ id: 'online', lb: 'Онлайн', sub: 'Видеосвязь', i: I.video },
|
||||
].map(o => {
|
||||
const OIcon = o.i;
|
||||
return (
|
||||
<button key={o.id} onClick={() => setType(o.id)} className="press" style={{
|
||||
padding: 14, borderRadius: 14,
|
||||
background: type === o.id ? 'var(--c-primary-100)' : '#fff',
|
||||
border: `2px solid ${type === o.id ? 'var(--c-primary-darker)' : 'var(--c-border)'}`,
|
||||
display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 8, textAlign: 'left',
|
||||
}}>
|
||||
<OIcon size={22} style={{ color: 'var(--c-primary-darker)' }} />
|
||||
<div>
|
||||
<div style={{ fontSize: 14, fontWeight: 700 }}>{o.lb}</div>
|
||||
<div className="sub" style={{ fontSize: 12 }}>{o.sub}</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="h-sec" style={{ marginBottom: 10 }}>Комментарий для врача</div>
|
||||
<textarea value={comment} onChange={e => setComment(e.target.value)} placeholder="Опишите симптомы или задайте вопрос" style={{
|
||||
width: '100%', padding: 14, borderRadius: 14, border: '1px solid var(--c-border)',
|
||||
fontSize: 14, resize: 'none', minHeight: 80, background: '#fff', outline: 'none',
|
||||
}} />
|
||||
|
||||
<div style={{ marginTop: 20, display: 'flex', alignItems: 'center', gap: 10, padding: 14, background: 'var(--c-warm-50)', borderRadius: 12 }}>
|
||||
<I.shield size={20} style={{ color: 'var(--c-warm-text)' }} />
|
||||
<div className="sub" style={{ fontSize: 12 }}>Приём можно отменить или перенести не позднее чем за 3 часа</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '14px 20px 34px', background: '#fff', borderTop: '1px solid var(--c-border)' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
|
||||
<span className="sub">К оплате в клинике</span>
|
||||
<span className="price" style={{ fontSize: 20 }}>{doc.price} ₽</span>
|
||||
</div>
|
||||
<button onClick={() => nav.push('booking-success')} className="btn-p block">Подтвердить запись</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function BookingSuccessScreen({ nav }) {
|
||||
return (
|
||||
<div style={{ padding: '0 20px', height: '100%', display: 'flex', flexDirection: 'column', position: 'relative' }}>
|
||||
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '20px 0' }}>
|
||||
<div style={{
|
||||
width: 96, height: 96, borderRadius: 999,
|
||||
background: 'var(--c-primary-100)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
marginBottom: 24, position: 'relative',
|
||||
}}>
|
||||
<div style={{
|
||||
position: 'absolute', inset: -12, borderRadius: 999,
|
||||
background: 'var(--c-primary-100)', opacity: .4,
|
||||
}} />
|
||||
<I.check size={56} style={{ color: 'var(--c-primary-darker)', position: 'relative' }} sw={3} />
|
||||
</div>
|
||||
<h1 style={{ fontSize: 24, fontWeight: 700, margin: '0 0 8px', color: 'var(--c-fg-1)' }}>Вы записаны!</h1>
|
||||
<p style={{ fontSize: 15, color: 'var(--c-fg-3)', margin: '0 0 28px', maxWidth: 280 }}>
|
||||
Понедельник, 21 апреля в 16:00 к Семериковой Н.А. Напомним за 2 часа.
|
||||
</p>
|
||||
<div className="card" style={{ padding: 16, width: '100%', textAlign: 'left', marginBottom: 12 }}>
|
||||
<div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 10 }}>
|
||||
<I.pin size={18} style={{ color: 'var(--c-primary-darker)' }} />
|
||||
<div style={{ fontSize: 14, fontWeight: 700 }}>ул. Клары Цеткин, 9</div>
|
||||
</div>
|
||||
<div className="sub" style={{ fontSize: 13, paddingLeft: 28 }}>Каб. 204 · 2 этаж</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ padding: '8px 0 24px', display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
<button onClick={() => { nav.reset(); nav.set('appts'); }} className="btn-p block">К моим приёмам</button>
|
||||
<button onClick={() => nav.reset()} className="btn-g" style={{ width: '100%', padding: 14 }}>На главную</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function DoctorsTabScreen({ nav, ctx }) {
|
||||
const { doctors } = CLINIC_DATA;
|
||||
const [q, setQ] = useState('');
|
||||
const [filter, setFilter] = useState('all');
|
||||
const filtered = doctors.filter(d => !q || d.name.toLowerCase().includes(q.toLowerCase()));
|
||||
return (
|
||||
<div style={{ paddingBottom: 100 }}>
|
||||
<div style={{ padding: '12px 20px 16px' }}>
|
||||
<h1 className="h-screen" style={{ marginBottom: 14 }}>Врачи</h1>
|
||||
<div style={{ background: '#fff', borderRadius: 14, padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10, border: '1px solid var(--c-border)' }}>
|
||||
<I.search size={18} style={{ color: 'var(--c-fg-4)' }} />
|
||||
<input value={q} onChange={e => setQ(e.target.value)} placeholder="Найти врача" style={{ flex: 1, border: 0, outline: 0, fontSize: 15, background: 'transparent' }} />
|
||||
<I.filter size={18} style={{ color: 'var(--c-fg-3)' }} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="pills" style={{ marginBottom: 12 }}>
|
||||
{['Все','Свободно сегодня','Кандидаты наук','Хирурги','Детские','Сурдологи'].map((p,i)=>(
|
||||
<button key={i} onClick={() => setFilter(p)} className={'pill' + (filter===p ? ' on' : (i===0 && filter==='all' ? ' on' : ''))}>{p}</button>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ padding: '0 16px' }}>
|
||||
{ctx.docVariant === 'photo' ? (
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
|
||||
{filtered.map(d => <DoctorCard key={d.id} doc={d} variant="photo" onClick={() => nav.push('doctor:' + d.id)} />)}
|
||||
</div>
|
||||
) : ctx.docVariant === 'list' ? (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{filtered.map(d => <DoctorCard key={d.id} doc={d} variant="list" onClick={() => nav.push('doctor:' + d.id)} dense={ctx.density==='compact'} />)}
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
{filtered.map(d => <DoctorCard key={d.id} doc={d} variant="rich" onClick={() => nav.push('doctor:' + d.id)} dense={ctx.density==='compact'} />)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function DoctorDetailScreen({ nav, doctorId }) {
|
||||
const doc = CLINIC_DATA.doctors.find(d => d.id === doctorId);
|
||||
const [tab, setTab] = useState('info');
|
||||
return (
|
||||
<div style={{ paddingBottom: 110 }}>
|
||||
<ScreenHeader title="" onBack={() => nav.pop()} rightIcon={I.heart} />
|
||||
<div style={{ padding: '0 20px 16px' }}>
|
||||
<div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
|
||||
<Avatar init={doc.init} size={84} style={{ fontSize: 32 }} />
|
||||
<div style={{ flex: 1, paddingTop: 6 }}>
|
||||
<div style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.2, marginBottom: 4 }}>{doc.name}</div>
|
||||
<div style={{ fontSize: 14, color: 'var(--c-fg-3)', marginBottom: 8 }}>{doc.spec}</div>
|
||||
{doc.kmn && <span className="chip chip-warm">Кандидат мед. наук</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ padding: '0 20px 16px', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 }}>
|
||||
<div className="card" style={{ textAlign: 'center', padding: 12 }}>
|
||||
<div className="stat-big">{doc.exp}</div>
|
||||
<div className="sub" style={{ fontSize: 11 }}>лет опыта</div>
|
||||
</div>
|
||||
<div className="card" style={{ textAlign: 'center', padding: 12 }}>
|
||||
<div className="stat-big" style={{ display: 'flex', justifyContent: 'center', alignItems: 'baseline', gap: 3 }}>
|
||||
{doc.rating}<I.star size={16} style={{ color: '#E8A13C' }} />
|
||||
</div>
|
||||
<div className="sub" style={{ fontSize: 11 }}>{doc.reviews} отзыва</div>
|
||||
</div>
|
||||
<div className="card" style={{ textAlign: 'center', padding: 12 }}>
|
||||
<div className="stat-big">{doc.price}</div>
|
||||
<div className="sub" style={{ fontSize: 11 }}>₽ приём</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: '0 20px 12px' }}>
|
||||
<div className="seg" style={{ width: '100%', display: 'flex' }}>
|
||||
{[['info','О враче'],['schedule','Расписание'],['reviews','Отзывы']].map(([id,lb]) => (
|
||||
<button key={id} onClick={() => setTab(id)} className={tab===id?'on':''} style={{ flex: 1 }}>{lb}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: '0 20px' }}>
|
||||
{tab === 'info' && (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||
<div className="card">
|
||||
<div className="h-row" style={{ marginBottom: 6 }}>Образование</div>
|
||||
<p style={{ margin: 0, fontSize: 14, color: 'var(--c-fg-2)', lineHeight: 1.55 }}>Пермский государственный медицинский университет им. акад. Е.А. Вагнера, специальность «Оториноларингология».</p>
|
||||
</div>
|
||||
<div className="card">
|
||||
<div className="h-row" style={{ marginBottom: 6 }}>Специализация</div>
|
||||
<p style={{ margin: 0, fontSize: 14, color: 'var(--c-fg-2)', lineHeight: 1.55 }}>Эндоскопическая хирургия околоносовых пазух, лечение хронических отитов, слухопротезирование.</p>
|
||||
</div>
|
||||
<div className="card">
|
||||
<div className="h-row" style={{ marginBottom: 10 }}>Услуги и цены</div>
|
||||
{[
|
||||
['Первичный приём', doc.price],
|
||||
['Повторный приём', doc.price - 400],
|
||||
['Эндоскопия ЛОР-органов', 1200],
|
||||
].map(([n,p],i,a) => (
|
||||
<div key={n}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 0' }}>
|
||||
<span style={{ fontSize: 14 }}>{n}</span>
|
||||
<span className="price" style={{ fontSize: 15 }}>{p} ₽</span>
|
||||
</div>
|
||||
{i < a.length - 1 && <div className="divider" />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{tab === 'schedule' && (
|
||||
<div className="card">
|
||||
{['Пн 21 апр','Вт 22 апр','Ср 23 апр','Чт 24 апр'].map((d,i,a) => (
|
||||
<div key={d}>
|
||||
<div style={{ padding: '12px 0' }}>
|
||||
<div style={{ fontSize: 13, fontWeight: 700, marginBottom: 8 }}>{d}</div>
|
||||
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
|
||||
{['09:00','10:30','14:00','16:00','18:30'].slice(0, 5-i).map(t => (
|
||||
<span key={t} style={{ padding: '5px 10px', borderRadius: 8, background: 'var(--c-primary-100)', color: 'var(--c-primary-darker)', fontSize: 13, fontWeight: 700 }}>{t}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{i < a.length - 1 && <div className="divider" />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{tab === 'reviews' && (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
{[
|
||||
{ n: 'Елена К.', d: '12 апр', r: 5, t: 'Доктор очень внимательная, всё объяснила простыми словами. Дочке 6 лет, нашли общий язык быстро.' },
|
||||
{ n: 'Михаил П.', d: '5 апр', r: 5, t: 'Профессионал высокого уровня. Операция прошла без осложнений, восстановление быстрое.' },
|
||||
{ n: 'Ольга Н.', d: '28 мар', r: 4, t: 'Хороший специалист. Жаль, что приём ждать долго в регистратуре.' },
|
||||
].map((r,i)=>(
|
||||
<div key={i} className="card">
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
|
||||
<div style={{ fontWeight: 700, fontSize: 14 }}>{r.n}</div>
|
||||
<div style={{ display: 'flex', gap: 1 }}>{[1,2,3,4,5].map(s => <I.star key={s} size={13} style={{ color: s<=r.r?'#E8A13C':'#E4EAF2' }}/>)}</div>
|
||||
</div>
|
||||
<div className="sub" style={{ fontSize: 11, marginBottom: 8 }}>{r.d}</div>
|
||||
<div style={{ fontSize: 14, color: 'var(--c-fg-2)', lineHeight: 1.5 }}>{r.t}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '14px 20px 34px', background: 'rgba(255,255,255,0.95)', backdropFilter: 'blur(8px)', borderTop: '1px solid var(--c-border)' }}>
|
||||
<button onClick={() => nav.push('booking-time:' + doc.id)} className="btn-p block">Записаться · от {doc.price} ₽</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,294 @@
|
||||
import React from 'react';
|
||||
import { I } from '../icons.jsx';
|
||||
import { CLINIC_DATA } from '../data.js';
|
||||
import { Avatar, AppointmentCard, SectionHeader } from '../components.jsx';
|
||||
|
||||
export function HomeCardsScreen({ nav }) {
|
||||
const { doctors, appointments, specializations, clinic, articles } = CLINIC_DATA;
|
||||
const upcoming = appointments.find(a => a.status === 'upcoming');
|
||||
const upDoc = upcoming && doctors.find(d => d.id === upcoming.doctor);
|
||||
return (
|
||||
<div style={{ paddingBottom: 100 }}>
|
||||
<div style={{ padding: '8px 20px 16px', background: 'linear-gradient(180deg,#F5EDDF 0%,transparent 100%)' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
|
||||
<div>
|
||||
<div className="sub" style={{ marginBottom: 2 }}>Добрый день,</div>
|
||||
<div style={{ fontSize: 22, fontWeight: 700, color: 'var(--c-fg-1)' }}>Анна Сергеевна</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<button onClick={() => nav.push('notifications')} className="press" style={{ width: 42, height: 42, borderRadius: 999, background: '#fff', border: '1px solid var(--c-border)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
|
||||
<I.bell size={20} style={{ color: 'var(--c-fg-1)' }} />
|
||||
<span style={{ position: 'absolute', top: 7, right: 9, width: 8, height: 8, borderRadius: 999, background: 'var(--c-accent)' }} />
|
||||
</button>
|
||||
<button onClick={() => nav.push('qr')} className="press" style={{ width: 42, height: 42, borderRadius: 999, background: '#fff', border: '1px solid var(--c-border)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<I.qr size={20} style={{ color: 'var(--c-fg-1)' }} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button onClick={() => nav.push('booking-specs')} className="press" style={{
|
||||
width: '100%', textAlign: 'left',
|
||||
background: 'var(--c-primary-darker)', color: '#fff',
|
||||
borderRadius: 20, padding: 18,
|
||||
display: 'flex', alignItems: 'center', gap: 14,
|
||||
boxShadow: '0 10px 30px rgba(22,107,99,.25)',
|
||||
}}>
|
||||
<div style={{ width: 48, height: 48, borderRadius: 14, background: 'rgba(255,255,255,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<I.plus size={26} />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontSize: 16, fontWeight: 700, marginBottom: 2 }}>Записаться на приём</div>
|
||||
<div style={{ fontSize: 13, opacity: .8 }}>К ЛОР-врачу · сегодня или завтра</div>
|
||||
</div>
|
||||
<I.arrow size={22} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{upcoming && upDoc && (
|
||||
<div style={{ padding: '16px 20px 8px' }}>
|
||||
<SectionHeader title="Ближайший приём" pad="0 0 0 0" action="Все" onAction={() => nav.set('appts')} />
|
||||
<AppointmentCard appt={upcoming} doctor={upDoc} addr={clinic.addresses.find(a => a.id === upcoming.address)} onClick={() => nav.push('appt:' + upcoming.id)} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ padding: '16px 20px 8px' }}>
|
||||
<SectionHeader title="Специализации" pad="0 0 0 0" />
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 }}>
|
||||
{specializations.map(s => {
|
||||
const icons = { ear: I.ear, hear: I.hearing, leaf: I.heart, mic: I.mic, baby: I.profile, scalpel: I.stetho };
|
||||
const Ic = icons[s.icon];
|
||||
return (
|
||||
<button key={s.id} onClick={() => nav.push('doctors')} className="press card" style={{ padding: 14, display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 10 }}>
|
||||
<div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--c-primary-100)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Ic size={20} style={{ color: 'var(--c-primary-darker)' }} />
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 13, fontWeight: 700, color: 'var(--c-fg-1)', marginBottom: 1 }}>{s.label}</div>
|
||||
<div className="sub" style={{ fontSize: 11 }}>{s.count} врачей</div>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: '16px 20px 8px' }}>
|
||||
<SectionHeader title="Быстрые действия" pad="0 0 0 0" />
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 10 }}>
|
||||
<button onClick={() => nav.push('telemed')} className="press card" style={{ padding: 14, display: 'flex', gap: 12, alignItems: 'center', textAlign: 'left' }}>
|
||||
<div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--c-accent-50)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<I.video size={20} style={{ color: 'var(--c-accent)' }} />
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 13, fontWeight: 700 }}>Телемедицина</div>
|
||||
<div className="sub" style={{ fontSize: 11 }}>Видео с врачом</div>
|
||||
</div>
|
||||
</button>
|
||||
<button onClick={() => nav.push('audiotest')} className="press card" style={{ padding: 14, display: 'flex', gap: 12, alignItems: 'center', textAlign: 'left' }}>
|
||||
<div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--c-primary-100)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<I.hearing size={20} style={{ color: 'var(--c-primary-darker)' }} />
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 13, fontWeight: 700 }}>Тест слуха</div>
|
||||
<div className="sub" style={{ fontSize: 11 }}>За 3 минуты</div>
|
||||
</div>
|
||||
</button>
|
||||
<button onClick={() => nav.push('results')} className="press card" style={{ padding: 14, display: 'flex', gap: 12, alignItems: 'center', textAlign: 'left' }}>
|
||||
<div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--c-warm-100)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<I.doc size={20} style={{ color: 'var(--c-warm-text)' }} />
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 13, fontWeight: 700 }}>Анализы</div>
|
||||
<div className="sub" style={{ fontSize: 11 }}>5 результатов</div>
|
||||
</div>
|
||||
</button>
|
||||
<button onClick={() => nav.push('recovery')} className="press card" style={{ padding: 14, display: 'flex', gap: 12, alignItems: 'center', textAlign: 'left' }}>
|
||||
<div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--c-success-50)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<I.shield size={20} style={{ color: 'var(--c-success)' }} />
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 13, fontWeight: 700 }}>Восстановление</div>
|
||||
<div className="sub" style={{ fontSize: 11 }}>День 6 из 14</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: '16px 0 8px' }}>
|
||||
<SectionHeader title="Статьи врачей" action="Все" onAction={() => nav.push('articles')} />
|
||||
<div style={{ display: 'flex', gap: 12, overflowX: 'auto', padding: '0 20px 8px' }} className="noscroll">
|
||||
{articles.map((a, i) => (
|
||||
<button key={i} className="press card" style={{
|
||||
flexShrink: 0, width: 220, padding: 0, overflow: 'hidden', textAlign: 'left',
|
||||
}}>
|
||||
<div style={{
|
||||
height: 90, background: ['#F5EDDF','#E3F4F2','#FDF8E6','#FCF1F0'][i % 4],
|
||||
display: 'flex', alignItems: 'flex-end', padding: 12,
|
||||
}}>
|
||||
<span className="chip chip-warm" style={{ background: 'rgba(255,255,255,0.85)' }}>{a.tag}</span>
|
||||
</div>
|
||||
<div style={{ padding: 12 }}>
|
||||
<div style={{ fontSize: 13, fontWeight: 700, color: 'var(--c-fg-1)', lineHeight: 1.3, marginBottom: 6, minHeight: 34 }}>{a.title}</div>
|
||||
<div className="sub" style={{ fontSize: 11 }}>{a.author} · {a.mins} мин</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function HomeListScreen({ nav }) {
|
||||
const { doctors, appointments, clinic } = CLINIC_DATA;
|
||||
const upcoming = appointments.find(a => a.status === 'upcoming');
|
||||
const upDoc = upcoming && doctors.find(d => d.id === upcoming.doctor);
|
||||
const items = [
|
||||
{ id: 'book', icon: I.plus, title: 'Записаться на приём', sub: 'ЛОР, сурдолог, фониатр', tint: 'var(--c-primary-darker)', bg: 'var(--c-primary-100)', cta: true, go: 'booking-specs' },
|
||||
{ id: 'appt', icon: I.calendar, title: 'Мои приёмы', sub: `${appointments.filter(a=>a.status==='upcoming').length} предстоящих · ${appointments.filter(a=>a.status==='past').length} прошедших`, go: 'appts' },
|
||||
{ id: 'card', icon: I.file, title: 'Медицинская карта', sub: 'История, результаты, заключения', go: 'medcard' },
|
||||
{ id: 'results', icon: I.doc, title: 'Анализы и обследования', sub: '5 результатов · 1 в работе', go: 'results' },
|
||||
{ id: 'telemed', icon: I.video, title: 'Видеоконсультация', sub: 'Онлайн с ЛОР-врачом', go: 'telemed' },
|
||||
{ id: 'audio', icon: I.hearing, title: 'Тест слуха', sub: 'Аудиограмма за 3 минуты', go: 'audiotest' },
|
||||
{ id: 'recovery', icon: I.shield, title: 'Восстановление', sub: 'Септопластика · день 6', go: 'recovery' },
|
||||
{ id: 'chat', icon: I.chat, title: 'Чат с врачом', sub: '2 непрочитанных', badge: 2, go: 'chat' },
|
||||
];
|
||||
return (
|
||||
<div style={{ paddingBottom: 100 }}>
|
||||
<div style={{ padding: '8px 20px 16px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
|
||||
<div>
|
||||
<div className="sub">Здравствуйте,</div>
|
||||
<div style={{ fontSize: 20, fontWeight: 700 }}>Анна Сергеевна</div>
|
||||
</div>
|
||||
<button onClick={() => nav.push('notifications')} className="press" style={{ width: 40, height: 40, borderRadius: 999, background: '#fff', border: '1px solid var(--c-border)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<I.bell size={18} />
|
||||
</button>
|
||||
</div>
|
||||
{upcoming && upDoc && (
|
||||
<div style={{ marginBottom: 18 }}>
|
||||
<AppointmentCard appt={upcoming} doctor={upDoc} addr={clinic.addresses.find(a=>a.id===upcoming.address)} onClick={() => nav.push('appt:' + upcoming.id)} compact />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="card" style={{ margin: '0 16px', padding: 0, overflow: 'hidden' }}>
|
||||
{items.map((it, i) => (
|
||||
<React.Fragment key={it.id}>
|
||||
<button onClick={() => nav.push(it.go)} className="press" style={{
|
||||
width: '100%', display: 'flex', alignItems: 'center', gap: 14,
|
||||
padding: '14px 16px', textAlign: 'left',
|
||||
background: it.cta ? 'var(--c-primary-50)' : 'transparent',
|
||||
}}>
|
||||
<div style={{
|
||||
width: 40, height: 40, borderRadius: 10,
|
||||
background: it.bg || 'var(--c-primary-100)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
|
||||
}}>
|
||||
{React.createElement(it.icon, { size: 20, style: { color: it.tint || 'var(--c-primary-darker)' } })}
|
||||
</div>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ fontSize: 15, fontWeight: 700, color: 'var(--c-fg-1)', marginBottom: 2 }}>{it.title}</div>
|
||||
<div className="sub" style={{ fontSize: 12 }}>{it.sub}</div>
|
||||
</div>
|
||||
{it.badge && <span style={{ background: 'var(--c-accent)', color: '#fff', fontSize: 11, fontWeight: 700, padding: '2px 7px', borderRadius: 999 }}>{it.badge}</span>}
|
||||
<I.chev size={16} style={{ color: 'var(--c-fg-4)' }} />
|
||||
</button>
|
||||
{i < items.length - 1 && <div style={{ height: 1, background: 'var(--c-divider)', marginLeft: 70 }} />}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function HomeFeedScreen({ nav }) {
|
||||
const { doctors, appointments, clinic, articles, recovery } = CLINIC_DATA;
|
||||
const upcoming = appointments.find(a => a.status === 'upcoming');
|
||||
const upDoc = upcoming && doctors.find(d => d.id === upcoming.doctor);
|
||||
return (
|
||||
<div style={{ paddingBottom: 100 }}>
|
||||
<div style={{ padding: '8px 20px 12px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<div>
|
||||
<div className="sub">18 апреля, суббота</div>
|
||||
<div style={{ fontSize: 24, fontWeight: 700 }}>Как Ваше самочувствие?</div>
|
||||
</div>
|
||||
<button onClick={() => nav.push('profile')} className="press">
|
||||
<Avatar init="АС" size={42} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: '0 16px' }}>
|
||||
<button onClick={() => nav.push('recovery')} className="press card" style={{
|
||||
width: '100%', textAlign: 'left', padding: 18, marginBottom: 14,
|
||||
background: 'linear-gradient(135deg,#E3F4F2,#F2FAF9)',
|
||||
border: '1px solid var(--c-primary-200)',
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--c-primary-darker)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<I.shield size={18} style={{ color: '#fff' }} />
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ fontWeight: 700, fontSize: 14 }}>Восстановление</div>
|
||||
<div className="sub" style={{ fontSize: 12 }}>{recovery.op}</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="chip">День {recovery.dayNow} из {recovery.totalDays}</span>
|
||||
</div>
|
||||
<div style={{ height: 6, background: 'rgba(255,255,255,0.7)', borderRadius: 999, overflow: 'hidden', marginBottom: 12 }}>
|
||||
<div style={{ width: `${recovery.dayNow/recovery.totalDays*100}%`, height: '100%', background: 'var(--c-primary-darker)', borderRadius: 999 }} />
|
||||
</div>
|
||||
<div style={{ fontSize: 13, color: 'var(--c-fg-2)' }}>
|
||||
Сегодня: <strong>осмотр хирурга, снятие корочек</strong>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className="card" style={{ padding: 14, marginBottom: 14, display: 'flex', gap: 12, alignItems: 'center' }}>
|
||||
<div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--c-warning-50)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<I.pill size={20} style={{ color: 'var(--c-warning)' }} />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontSize: 14, fontWeight: 700 }}>Амоксиклав 625 мг</div>
|
||||
<div className="sub" style={{ fontSize: 12 }}>Принять в 20:00 — через 2 часа</div>
|
||||
</div>
|
||||
<button className="btn-s" style={{ padding: '8px 12px', fontSize: 13 }}>Принял</button>
|
||||
</div>
|
||||
|
||||
{upcoming && upDoc && (
|
||||
<>
|
||||
<SectionHeader title="Ближайший приём" pad="4px 4px 8px" />
|
||||
<AppointmentCard appt={upcoming} doctor={upDoc} addr={clinic.addresses.find(a=>a.id===upcoming.address)} onClick={() => nav.push('appt:' + upcoming.id)} />
|
||||
</>
|
||||
)}
|
||||
|
||||
<button onClick={() => nav.push('booking-specs')} className="press" style={{
|
||||
width: '100%', marginTop: 14, padding: '14px 18px', borderRadius: 16,
|
||||
background: 'var(--c-accent)', color: '#fff', fontWeight: 700, fontSize: 15,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
|
||||
}}>
|
||||
<I.plus size={20} /> Записаться на приём
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: '18px 20px 8px' }}>
|
||||
<SectionHeader title="Полезно прочитать" pad="0 0 0 0" />
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
{articles.slice(0,3).map((a,i)=>(
|
||||
<button key={i} className="press card" style={{ display: 'flex', gap: 12, alignItems: 'center', padding: 14, textAlign: 'left' }}>
|
||||
<div style={{ width: 56, height: 56, borderRadius: 12, background: ['#F5EDDF','#E3F4F2','#FDF8E6'][i%3], flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24 }}>
|
||||
{['📖','👂','🤱'][i%3]}
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontSize: 11, color: 'var(--c-primary-dark)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: .5, marginBottom: 3 }}>{a.tag}</div>
|
||||
<div style={{ fontSize: 14, fontWeight: 700, lineHeight: 1.3, marginBottom: 3 }}>{a.title}</div>
|
||||
<div className="sub" style={{ fontSize: 12 }}>{a.author} · {a.mins} мин</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,757 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { I } from '../icons.jsx';
|
||||
import { CLINIC_DATA } from '../data.js';
|
||||
import { Avatar, AppointmentCard, ScreenHeader } from '../components.jsx';
|
||||
|
||||
export function ApptsTabScreen({ nav }) {
|
||||
const { appointments, doctors, clinic } = CLINIC_DATA;
|
||||
const [tab, setTab] = useState('upcoming');
|
||||
const items = appointments.filter(a => a.status === tab);
|
||||
return (
|
||||
<div style={{ paddingBottom: 100 }}>
|
||||
<div style={{ padding: '12px 20px 12px' }}>
|
||||
<h1 className="h-screen" style={{ marginBottom: 14 }}>Мои приёмы</h1>
|
||||
<div className="seg" style={{ width: '100%', display: 'flex' }}>
|
||||
<button onClick={() => setTab('upcoming')} className={tab==='upcoming'?'on':''} style={{ flex: 1 }}>Предстоящие · {appointments.filter(a=>a.status==='upcoming').length}</button>
|
||||
<button onClick={() => setTab('past')} className={tab==='past'?'on':''} style={{ flex: 1 }}>Прошедшие</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
{items.map(a => {
|
||||
const d = doctors.find(x => x.id === a.doctor);
|
||||
const ad = clinic.addresses.find(x => x.id === a.address);
|
||||
return <AppointmentCard key={a.id} appt={a} doctor={d} addr={ad} onClick={() => nav.push('appt:' + a.id)} />;
|
||||
})}
|
||||
{items.length === 0 && (
|
||||
<div style={{ textAlign: 'center', padding: '40px 20px' }}>
|
||||
<div style={{ fontSize: 48, opacity: .3, marginBottom: 8 }}>📋</div>
|
||||
<div className="sub">Нет приёмов в этой категории</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ padding: 16, marginTop: 12 }}>
|
||||
<button onClick={() => nav.push('booking-specs')} className="btn-p block">
|
||||
<I.plus size={18} /> Записаться на приём
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ApptDetailScreen({ nav, apptId }) {
|
||||
const a = CLINIC_DATA.appointments.find(x => x.id === apptId);
|
||||
const d = CLINIC_DATA.doctors.find(x => x.id === a.doctor);
|
||||
const ad = CLINIC_DATA.clinic.addresses.find(x => x.id === a.address);
|
||||
const isUp = a.status === 'upcoming';
|
||||
return (
|
||||
<div style={{ paddingBottom: 120 }}>
|
||||
<ScreenHeader title="Приём" onBack={() => nav.pop()} />
|
||||
<div style={{ padding: '0 20px' }}>
|
||||
<div className="card" style={{ padding: 20, textAlign: 'center', marginBottom: 14, background: isUp ? 'linear-gradient(135deg,#E3F4F2,#F2FAF9)' : '#fff' }}>
|
||||
<div style={{ fontSize: 14, color: 'var(--c-primary-darker)', fontWeight: 700, marginBottom: 6 }}>{a.weekday}, {a.date}</div>
|
||||
<div style={{ fontSize: 42, fontFamily: 'var(--font-narrow)', fontWeight: 700, color: 'var(--c-fg-1)', lineHeight: 1, marginBottom: 8 }}>{a.time}</div>
|
||||
<div className="sub">{a.type}</div>
|
||||
</div>
|
||||
<div className="card" style={{ padding: 0, marginBottom: 14 }}>
|
||||
<button onClick={() => nav.push('doctor:' + d.id)} style={{ width: '100%', textAlign: 'left', padding: 14, display: 'flex', gap: 12, alignItems: 'center' }}>
|
||||
<Avatar init={d.init} size={48} />
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontWeight: 700, fontSize: 15 }}>{d.name.split(' ').slice(0,2).join(' ')}</div>
|
||||
<div className="sub" style={{ fontSize: 12 }}>{d.spec}</div>
|
||||
</div>
|
||||
<I.chev size={16} style={{ color: 'var(--c-fg-4)' }} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="card" style={{ padding: 0 }}>
|
||||
<div style={{ padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<I.pin size={20} style={{ color: 'var(--c-primary-darker)' }} />
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontSize: 14, fontWeight: 700 }}>{ad.full}</div>
|
||||
<div className="sub" style={{ fontSize: 12 }}>{a.room} · 2 этаж</div>
|
||||
</div>
|
||||
<button className="btn-s" style={{ padding: '8px 12px', fontSize: 12 }}>Карта</button>
|
||||
</div>
|
||||
<div className="divider" />
|
||||
<div style={{ padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<I.phone size={20} style={{ color: 'var(--c-primary-darker)' }} />
|
||||
<div style={{ flex: 1, fontSize: 14 }}>(342) 207-03-03</div>
|
||||
<I.chev size={16} style={{ color: 'var(--c-fg-4)' }} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isUp && (
|
||||
<div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
<button className="btn-g" style={{ width: '100%', padding: 14 }}>
|
||||
<I.calendar size={18} /> Добавить в календарь
|
||||
</button>
|
||||
<button className="btn-g" style={{ width: '100%', padding: 14 }}>
|
||||
<I.bell size={18} /> Напомнить позже
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{a.hasReport && (
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<div className="h-sec" style={{ marginBottom: 10 }}>Заключение врача</div>
|
||||
<div className="card">
|
||||
<div style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--c-fg-2)' }}>
|
||||
Диагноз: хронический риносинусит, обострение. Назначено: Аква Марис, Назонекс 14 дней. Контрольный осмотр через 2 недели.
|
||||
</div>
|
||||
<button className="btn-s" style={{ marginTop: 12, padding: '8px 14px', fontSize: 13 }}>
|
||||
<I.doc size={15} /> Открыть PDF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isUp && (
|
||||
<div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '14px 20px 34px', background: '#fff', borderTop: '1px solid var(--c-border)', display: 'flex', gap: 10 }}>
|
||||
<button className="btn-g" style={{ flex: 1, padding: 14, color: 'var(--c-danger)', borderColor: 'var(--c-accent-50)' }}>Отменить</button>
|
||||
<button className="btn-p" style={{ flex: 2 }}>Перенести</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ResultsScreen({ nav }) {
|
||||
const { results, doctors } = CLINIC_DATA;
|
||||
return (
|
||||
<div style={{ paddingBottom: 100 }}>
|
||||
<ScreenHeader title="Анализы и обследования" onBack={() => nav.pop()} />
|
||||
<div className="pills" style={{ marginBottom: 12 }}>
|
||||
{['Все','Готовы','В работе','Аудио','Эндоскопия'].map((p,i)=>(
|
||||
<button key={i} className={'pill' + (i===0?' on':'')}>{p}</button>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||||
{results.map(r => {
|
||||
const d = doctors.find(x => x.id === r.doctor);
|
||||
const isReady = r.status === 'ready';
|
||||
const kindIcons = { audio: I.hearing, image: I.video, lab: I.doc };
|
||||
const Ic = kindIcons[r.kind];
|
||||
return (
|
||||
<button key={r.id} onClick={() => isReady && nav.push(r.kind === 'audio' ? 'result-audio' : 'result:' + r.id)} className="press card" style={{
|
||||
display: 'flex', gap: 12, alignItems: 'center', textAlign: 'left', opacity: isReady ? 1 : .7,
|
||||
}}>
|
||||
<div style={{ width: 44, height: 44, borderRadius: 12, background: isReady ? 'var(--c-primary-100)' : 'var(--c-warning-50)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Ic size={22} style={{ color: isReady ? 'var(--c-primary-darker)' : 'var(--c-warning)' }} />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontWeight: 700, fontSize: 15, marginBottom: 2 }}>{r.name}</div>
|
||||
<div className="sub" style={{ fontSize: 12 }}>{r.date} · {d.name.split(' ')[0]}</div>
|
||||
</div>
|
||||
{isReady ? <I.chev size={16} style={{ color: 'var(--c-fg-4)' }} /> : <span className="chip" style={{ background: 'var(--c-warning-50)', color: 'var(--c-warning)' }}>В работе</span>}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ResultAudioScreen({ nav }) {
|
||||
const freqs = [250, 500, 1000, 2000, 4000, 8000];
|
||||
const leftDB = [10, 15, 20, 25, 35, 50];
|
||||
const rightDB = [5, 10, 15, 20, 30, 40];
|
||||
const w = 320, h = 220, pl = 30, pt = 10, pr = 10, pb = 30;
|
||||
const iw = w - pl - pr, ih = h - pt - pb;
|
||||
const xFor = i => pl + (i / (freqs.length - 1)) * iw;
|
||||
const yFor = db => pt + (db / 120) * ih;
|
||||
return (
|
||||
<div style={{ paddingBottom: 40 }}>
|
||||
<ScreenHeader title="Аудиограмма" subtitle="8 апр 2026" onBack={() => nav.pop()} rightIcon={I.doc} />
|
||||
<div style={{ padding: '0 20px' }}>
|
||||
<div className="card" style={{ marginBottom: 14 }}>
|
||||
<div style={{ display: 'flex', gap: 16, marginBottom: 12 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
<div style={{ width: 10, height: 10, borderRadius: 999, background: 'var(--c-accent)' }} />
|
||||
<span style={{ fontSize: 12, fontWeight: 700 }}>Правое ухо</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
<div style={{ width: 10, height: 10, background: 'var(--c-primary-darker)' }} />
|
||||
<span style={{ fontSize: 12, fontWeight: 700 }}>Левое ухо</span>
|
||||
</div>
|
||||
</div>
|
||||
<svg width="100%" viewBox={`0 0 ${w} ${h}`} style={{ display: 'block' }}>
|
||||
{[0, 20, 40, 60, 80, 100, 120].map(db => (
|
||||
<g key={db}>
|
||||
<line x1={pl} y1={yFor(db)} x2={w - pr} y2={yFor(db)} stroke="#E4EAF2" strokeWidth="1" />
|
||||
<text x={pl - 6} y={yFor(db) + 4} fontSize="10" fill="#9AA7B4" textAnchor="end">{db}</text>
|
||||
</g>
|
||||
))}
|
||||
{freqs.map((f, i) => (
|
||||
<g key={f}>
|
||||
<line x1={xFor(i)} y1={pt} x2={xFor(i)} y2={h - pb} stroke="#E4EAF2" strokeWidth="1" />
|
||||
<text x={xFor(i)} y={h - pb + 14} fontSize="10" fill="#9AA7B4" textAnchor="middle">{f < 1000 ? f : (f/1000) + 'k'}</text>
|
||||
</g>
|
||||
))}
|
||||
<rect x={pl} y={pt} width={iw} height={yFor(25)-pt} fill="#E8F5EE" opacity=".5" />
|
||||
<polyline points={rightDB.map((db,i)=>`${xFor(i)},${yFor(db)}`).join(' ')} fill="none" stroke="#E04E44" strokeWidth="2" />
|
||||
{rightDB.map((db,i)=>(<circle key={i} cx={xFor(i)} cy={yFor(db)} r="4" fill="#fff" stroke="#E04E44" strokeWidth="2" />))}
|
||||
<polyline points={leftDB.map((db,i)=>`${xFor(i)},${yFor(db)}`).join(' ')} fill="none" stroke="#166B63" strokeWidth="2" strokeDasharray="4 3" />
|
||||
{leftDB.map((db,i)=>(
|
||||
<g key={i} stroke="#166B63" strokeWidth="2">
|
||||
<line x1={xFor(i)-4} y1={yFor(db)-4} x2={xFor(i)+4} y2={yFor(db)+4} />
|
||||
<line x1={xFor(i)+4} y1={yFor(db)-4} x2={xFor(i)-4} y2={yFor(db)+4} />
|
||||
</g>
|
||||
))}
|
||||
</svg>
|
||||
<div className="sub" style={{ fontSize: 11, textAlign: 'center', marginTop: 8 }}>dB HL / частота (Гц) · зелёная зона — норма</div>
|
||||
</div>
|
||||
|
||||
<div className="card" style={{ marginBottom: 14 }}>
|
||||
<div className="h-row" style={{ marginBottom: 8 }}>Заключение</div>
|
||||
<div style={{ fontSize: 14, color: 'var(--c-fg-2)', lineHeight: 1.55, marginBottom: 12 }}>
|
||||
Правое ухо — норма. Левое ухо — лёгкая нейросенсорная тугоухость в области высоких частот (4–8 кГц).
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 8, alignItems: 'center', padding: 12, background: 'var(--c-primary-50)', borderRadius: 10 }}>
|
||||
<I.stetho size={18} style={{ color: 'var(--c-primary-darker)' }} />
|
||||
<div style={{ fontSize: 13, color: 'var(--c-fg-2)' }}>Рекомендован контроль через 6 месяцев</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="btn-g" style={{ width: '100%', padding: 14 }}>
|
||||
<I.doc size={18} /> Скачать заключение
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function RecoveryScreen({ nav }) {
|
||||
const { recovery } = CLINIC_DATA;
|
||||
const surgeon = CLINIC_DATA.doctors.find(d => d.id === recovery.surgeon);
|
||||
return (
|
||||
<div style={{ paddingBottom: 40 }}>
|
||||
<ScreenHeader title="Восстановление" onBack={() => nav.pop()} />
|
||||
<div style={{ padding: '0 20px 16px' }}>
|
||||
<div className="card" style={{ padding: 18, marginBottom: 14, background: 'linear-gradient(135deg, var(--c-primary-darker), #0F4A44)', color: '#fff', border: 0 }}>
|
||||
<div style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: .8, opacity: .7, marginBottom: 4 }}>Операция</div>
|
||||
<div style={{ fontSize: 20, fontWeight: 700, marginBottom: 14 }}>{recovery.op}</div>
|
||||
<div style={{ height: 8, background: 'rgba(255,255,255,0.2)', borderRadius: 999, overflow: 'hidden', marginBottom: 12 }}>
|
||||
<div style={{ width: `${recovery.dayNow/recovery.totalDays*100}%`, height: '100%', background: '#fff', borderRadius: 999 }} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12 }}>
|
||||
<span style={{ opacity: .8 }}>День {recovery.dayNow}</span>
|
||||
<span style={{ opacity: .8 }}>{recovery.totalDays - recovery.dayNow} дней до выписки</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-sec" style={{ marginBottom: 10 }}>Лекарства сегодня</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 18 }}>
|
||||
{recovery.meds.map((m,i)=>(
|
||||
<div key={i} className="card" style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 14 }}>
|
||||
<div style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--c-warning-50)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<I.pill size={20} style={{ color: 'var(--c-warning)' }} />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontSize: 14, fontWeight: 700 }}>{m.name}</div>
|
||||
<div className="sub" style={{ fontSize: 12 }}>{m.freq} · след. {m.nextTake}</div>
|
||||
</div>
|
||||
{m.total > 0 && (
|
||||
<div style={{ fontSize: 12, color: 'var(--c-fg-3)', fontWeight: 700 }}>{m.taken}/{m.total}</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="h-sec" style={{ marginBottom: 10 }}>План восстановления</div>
|
||||
<div className="card" style={{ padding: 0 }}>
|
||||
{recovery.steps.map((s, i) => (
|
||||
<div key={i} style={{ display: 'flex', gap: 14, padding: '14px 16px', alignItems: 'flex-start', position: 'relative' }}>
|
||||
{i < recovery.steps.length - 1 && (
|
||||
<div style={{ position: 'absolute', left: 27, top: 36, bottom: -10, width: 2, background: s.done ? 'var(--c-primary-darker)' : 'var(--c-divider)' }} />
|
||||
)}
|
||||
<div style={{
|
||||
width: 28, height: 28, borderRadius: 999, flexShrink: 0,
|
||||
background: s.done ? 'var(--c-primary-darker)' : '#fff',
|
||||
border: s.active ? '3px solid var(--c-primary-darker)' : s.done ? 0 : '2px solid var(--c-border-strong)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
position: 'relative', zIndex: 1,
|
||||
}}>
|
||||
{s.done && <I.check size={16} style={{ color: '#fff' }} sw={3} />}
|
||||
{s.active && <div style={{ width: 10, height: 10, borderRadius: 999, background: 'var(--c-primary-darker)' }} />}
|
||||
</div>
|
||||
<div style={{ flex: 1, paddingBottom: 4 }}>
|
||||
<div style={{ fontSize: 14, fontWeight: 700, color: s.done ? 'var(--c-fg-3)' : 'var(--c-fg-1)', marginBottom: 2 }}>{s.title}</div>
|
||||
<div className="sub" style={{ fontSize: 12 }}>{s.note}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="card" style={{ marginTop: 14, display: 'flex', gap: 12, alignItems: 'center', padding: 14 }}>
|
||||
<Avatar init={surgeon.init} size={44} />
|
||||
<div style={{ flex: 1 }}>
|
||||
<div className="sub" style={{ fontSize: 11 }}>Ваш хирург</div>
|
||||
<div style={{ fontSize: 14, fontWeight: 700 }}>{surgeon.name.split(' ').slice(0,2).join(' ')}</div>
|
||||
</div>
|
||||
<button onClick={() => nav.push('chat')} className="btn-s" style={{ padding: '8px 12px' }}>
|
||||
<I.chat size={15} /> Чат
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function AudioTestScreen({ nav }) {
|
||||
const [stage, setStage] = useState('intro');
|
||||
const [progress, setProgress] = useState(0);
|
||||
const [currFreq, setCurrFreq] = useState(500);
|
||||
|
||||
useEffect(() => {
|
||||
if (stage !== 'test') return;
|
||||
const id = setInterval(() => {
|
||||
setProgress(p => {
|
||||
if (p >= 100) { clearInterval(id); setStage('done'); return 100; }
|
||||
return p + 2;
|
||||
});
|
||||
setCurrFreq([250,500,1000,2000,4000,8000][Math.floor(Math.random()*6)]);
|
||||
}, 200);
|
||||
return () => clearInterval(id);
|
||||
}, [stage]);
|
||||
|
||||
return (
|
||||
<div style={{ paddingBottom: 40, height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<ScreenHeader title="Тест слуха" onBack={() => nav.pop()} />
|
||||
<div style={{ flex: 1, padding: '0 20px', display: 'flex', flexDirection: 'column' }}>
|
||||
{stage === 'intro' && (
|
||||
<>
|
||||
<div style={{ textAlign: 'center', padding: '24px 0' }}>
|
||||
<div style={{ width: 120, height: 120, margin: '0 auto 20px', borderRadius: 999, background: 'var(--c-primary-100)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<I.hearing size={60} style={{ color: 'var(--c-primary-darker)' }} />
|
||||
</div>
|
||||
<h1 className="h-screen" style={{ marginBottom: 10 }}>Проверим Ваш слух</h1>
|
||||
<p className="sub" style={{ fontSize: 14, maxWidth: 300, margin: '0 auto' }}>Тест займёт 3 минуты. Результат не заменяет консультацию сурдолога, но покажет, стоит ли записаться на приём.</p>
|
||||
</div>
|
||||
<div className="card" style={{ marginBottom: 14 }}>
|
||||
<div className="h-row" style={{ marginBottom: 10 }}>Для точного теста</div>
|
||||
{[
|
||||
{ i: I.volume, t: 'Наденьте наушники', s: 'Без Bluetooth, проводные лучше' },
|
||||
{ i: I.shield, t: 'Выберите тихое место', s: 'Без фоновых звуков и разговоров' },
|
||||
{ i: I.clock, t: 'Не торопитесь', s: 'Отвечайте, когда уверены' },
|
||||
].map((x,i,a)=>{
|
||||
const XI = x.i;
|
||||
return (
|
||||
<div key={i}>
|
||||
<div style={{ display: 'flex', gap: 12, padding: '10px 0', alignItems: 'flex-start' }}>
|
||||
<XI size={20} style={{ color: 'var(--c-primary-darker)', flexShrink: 0, marginTop: 1 }} />
|
||||
<div>
|
||||
<div style={{ fontSize: 14, fontWeight: 700, marginBottom: 2 }}>{x.t}</div>
|
||||
<div className="sub" style={{ fontSize: 12 }}>{x.s}</div>
|
||||
</div>
|
||||
</div>
|
||||
{i < a.length - 1 && <div className="divider" />}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div style={{ flex: 1 }} />
|
||||
<button onClick={() => setStage('test')} className="btn-p block" style={{ marginBottom: 10 }}>Начать тест</button>
|
||||
<div className="sub" style={{ fontSize: 12, textAlign: 'center' }}>Регулярные тесты помогают заметить изменения слуха вовремя</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{stage === 'test' && (
|
||||
<>
|
||||
<div style={{ padding: '16px 0 8px' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
|
||||
<span className="sub" style={{ fontSize: 12 }}>Правое ухо · {currFreq} Гц</span>
|
||||
<span className="sub" style={{ fontSize: 12 }}>{Math.round(progress)}%</span>
|
||||
</div>
|
||||
<div style={{ height: 6, background: 'var(--c-divider)', borderRadius: 999, overflow: 'hidden' }}>
|
||||
<div style={{ width: `${progress}%`, height: '100%', background: 'var(--c-primary-darker)', borderRadius: 999, transition: 'width .2s' }} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<div style={{ position: 'relative', width: 220, height: 220, marginBottom: 24 }}>
|
||||
{[0,1,2].map(i => (
|
||||
<div key={i} style={{
|
||||
position: 'absolute', inset: -20 * i, borderRadius: 999,
|
||||
border: '2px solid var(--c-primary-200)',
|
||||
opacity: 0.5 - i * 0.15,
|
||||
animation: `pulse 1.4s ${i * 0.3}s ease-out infinite`,
|
||||
}} />
|
||||
))}
|
||||
<div style={{ position: 'absolute', inset: 0, borderRadius: 999, background: 'var(--c-primary-darker)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<I.volume size={70} style={{ color: '#fff' }} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ fontSize: 18, fontWeight: 700, textAlign: 'center', marginBottom: 8 }}>Слышите звук?</div>
|
||||
<div className="sub" style={{ fontSize: 14, textAlign: 'center', maxWidth: 260 }}>Нажмите кнопку сразу, как услышите тон — даже если очень тихо</div>
|
||||
</div>
|
||||
<button className="btn-p block" style={{ padding: 22, fontSize: 17, marginBottom: 8 }}>Слышу!</button>
|
||||
<button className="btn-g" style={{ width: '100%', padding: 14 }}>Не слышу</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{stage === 'done' && (
|
||||
<>
|
||||
<div style={{ textAlign: 'center', padding: '24px 0' }}>
|
||||
<div style={{ width: 96, height: 96, margin: '0 auto 20px', borderRadius: 999, background: 'var(--c-success-50)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<I.check size={48} style={{ color: 'var(--c-success)' }} sw={3} />
|
||||
</div>
|
||||
<h1 className="h-screen" style={{ marginBottom: 8 }}>Тест завершён</h1>
|
||||
<p className="sub" style={{ fontSize: 14 }}>Ваш слух в пределах нормы</p>
|
||||
</div>
|
||||
<div className="card" style={{ marginBottom: 14 }}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
|
||||
<div>
|
||||
<div className="sub" style={{ fontSize: 11, marginBottom: 4 }}>Правое ухо</div>
|
||||
<div style={{ fontSize: 18, fontWeight: 700, color: 'var(--c-success)' }}>Норма</div>
|
||||
<div className="sub" style={{ fontSize: 12, marginTop: 2 }}>10 дБ, все частоты</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="sub" style={{ fontSize: 11, marginBottom: 4 }}>Левое ухо</div>
|
||||
<div style={{ fontSize: 18, fontWeight: 700, color: 'var(--c-warning)' }}>Почти норма</div>
|
||||
<div className="sub" style={{ fontSize: 12, marginTop: 2 }}>25 дБ на 4 кГц</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card" style={{ marginBottom: 14, background: 'var(--c-primary-50)' }}>
|
||||
<div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
|
||||
<I.stetho size={20} style={{ color: 'var(--c-primary-darker)', flexShrink: 0, marginTop: 2 }} />
|
||||
<div>
|
||||
<div style={{ fontSize: 14, fontWeight: 700, marginBottom: 4 }}>Рекомендация</div>
|
||||
<div style={{ fontSize: 13, color: 'var(--c-fg-2)', lineHeight: 1.5 }}>Небольшое снижение на левом ухе. Рекомендуем пройти аудиометрию у сурдолога.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ flex: 1 }} />
|
||||
<button onClick={() => nav.push('booking-specs')} className="btn-p block" style={{ marginBottom: 10 }}>Записаться к сурдологу</button>
|
||||
<button onClick={() => nav.pop()} className="btn-g" style={{ width: '100%', padding: 14 }}>Сохранить и закрыть</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ChatTabScreen() {
|
||||
const msgs = [
|
||||
{ from: 'doc', t: 'Добрый день, Анна! Как самочувствие после операции?', tm: '14:02' },
|
||||
{ from: 'me', t: 'Здравствуйте! В целом хорошо, немного саднит в носу по утрам.', tm: '14:08' },
|
||||
{ from: 'doc', t: 'Это нормально на 6-й день. Продолжайте промывания Аква Марис 4 раза в день.', tm: '14:10' },
|
||||
{ from: 'doc', t: 'Выходите на осмотр сегодня? Я свободен после 15:00.', tm: '14:11' },
|
||||
{ from: 'me', t: 'Да, буду в 16:00 как запланировано.', tm: '14:14' },
|
||||
{ from: 'doc', t: 'Отлично, жду. Если что-то изменится — напишите.', tm: '14:15' },
|
||||
];
|
||||
const doc = CLINIC_DATA.doctors.find(d => d.id === 'syndaev');
|
||||
return (
|
||||
<div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
|
||||
<div style={{ padding: '12px 20px 12px' }}>
|
||||
<h1 className="h-screen">Чат</h1>
|
||||
</div>
|
||||
<div style={{ padding: '0 16px 12px' }}>
|
||||
<div className="card" style={{ display: 'flex', gap: 12, alignItems: 'center', padding: 12, background: 'var(--c-primary-50)' }}>
|
||||
<Avatar init={doc.init} size={44} />
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontSize: 14, fontWeight: 700 }}>{doc.name.split(' ').slice(0,2).join(' ')}</div>
|
||||
<div className="sub" style={{ fontSize: 12, display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--c-success)' }} />
|
||||
Онлайн · отвечает 5 мин
|
||||
</div>
|
||||
</div>
|
||||
<button className="btn-s" style={{ padding: 10, borderRadius: 999 }}>
|
||||
<I.video size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ flex: 1, overflowY: 'auto', padding: '8px 16px', display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{msgs.map((m,i)=>(
|
||||
<div key={i} style={{ alignSelf: m.from === 'me' ? 'flex-end' : 'flex-start', maxWidth: '78%' }}>
|
||||
<div style={{
|
||||
background: m.from === 'me' ? 'var(--c-primary-darker)' : '#fff',
|
||||
color: m.from === 'me' ? '#fff' : 'var(--c-fg-1)',
|
||||
padding: '10px 14px', borderRadius: 16,
|
||||
borderBottomRightRadius: m.from === 'me' ? 4 : 16,
|
||||
borderBottomLeftRadius: m.from === 'me' ? 16 : 4,
|
||||
fontSize: 14, lineHeight: 1.45,
|
||||
boxShadow: m.from === 'me' ? 'none' : 'var(--sh-sm)',
|
||||
}}>{m.t}</div>
|
||||
<div className="sub" style={{ fontSize: 11, marginTop: 3, textAlign: m.from === 'me' ? 'right' : 'left', padding: '0 4px' }}>{m.tm}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div style={{ padding: '10px 16px 100px', borderTop: '1px solid var(--c-border)', background: '#fff' }}>
|
||||
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
||||
<button style={{ width: 38, height: 38, borderRadius: 999, background: 'var(--c-bg)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<I.plus size={20} />
|
||||
</button>
|
||||
<div style={{ flex: 1, background: 'var(--c-bg)', borderRadius: 999, padding: '10px 16px', fontSize: 14, color: 'var(--c-fg-4)' }}>Сообщение...</div>
|
||||
<button style={{ width: 38, height: 38, borderRadius: 999, background: 'var(--c-primary-darker)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<I.mic size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ProfileTabScreen({ nav }) {
|
||||
const sections = [
|
||||
{
|
||||
title: 'Здоровье',
|
||||
items: [
|
||||
{ i: I.file, t: 'Медицинская карта', s: 'История, диагнозы', go: 'medcard' },
|
||||
{ i: I.doc, t: 'Анализы', s: '5 результатов', go: 'results' },
|
||||
{ i: I.pill, t: 'Лекарства', s: '3 активных курса', go: 'recovery' },
|
||||
{ i: I.hearing, t: 'История тестов слуха', s: '2 аудиограммы', go: 'results' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Оплата и бонусы',
|
||||
items: [
|
||||
{ i: I.card, t: 'Способы оплаты', s: 'Mir •••• 4821' },
|
||||
{ i: I.gift, t: 'Бонусы', s: '2 480 баллов · 5%', badge: 'Серебро' },
|
||||
{ i: I.file, t: 'История платежей', s: '12 операций' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Клиника',
|
||||
items: [
|
||||
{ i: I.pin, t: 'Адреса и часы работы', s: '3 клиники' },
|
||||
{ i: I.phone, t: '(342) 207-03-03', s: 'Ежедневно 9:00–21:00' },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Настройки',
|
||||
items: [
|
||||
{ i: I.bell, t: 'Уведомления' },
|
||||
{ i: I.shield, t: 'Конфиденциальность' },
|
||||
{ i: I.user, t: 'Члены семьи', s: '+ 2 профиля' },
|
||||
]
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div style={{ paddingBottom: 100 }}>
|
||||
<div style={{ padding: '12px 20px 16px' }}>
|
||||
<h1 className="h-screen" style={{ marginBottom: 18 }}>Профиль</h1>
|
||||
<div className="card" style={{ padding: 18, display: 'flex', gap: 14, alignItems: 'center', background: 'linear-gradient(135deg, var(--c-primary-100), var(--c-warm-100))', border: 0 }}>
|
||||
<Avatar init="АС" size={64} style={{ fontSize: 24, boxShadow: 'var(--sh-sm)' }} />
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontSize: 18, fontWeight: 700 }}>Анна Сергеевна</div>
|
||||
<div className="sub" style={{ fontSize: 13, marginBottom: 6 }}>+7 (912) 485-••-•• · 42 года</div>
|
||||
<button onClick={() => nav.push('qr')} className="chip" style={{ fontSize: 12, fontWeight: 700 }}>
|
||||
<I.qr size={12} /> QR пациента
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ padding: '0 16px' }}>
|
||||
{sections.map((sec, si) => (
|
||||
<div key={si} style={{ marginBottom: 18 }}>
|
||||
<div style={{ fontSize: 11, color: 'var(--c-fg-3)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: .8, padding: '0 4px 8px' }}>{sec.title}</div>
|
||||
<div className="card" style={{ padding: 0 }}>
|
||||
{sec.items.map((it, i) => {
|
||||
const II = it.i;
|
||||
return (
|
||||
<React.Fragment key={i}>
|
||||
<button onClick={() => it.go && nav.push(it.go)} className="press" style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 14, padding: '13px 16px', textAlign: 'left' }}>
|
||||
<div style={{ width: 34, height: 34, borderRadius: 9, background: 'var(--c-primary-100)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
|
||||
<II size={18} style={{ color: 'var(--c-primary-darker)' }} />
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontSize: 14, fontWeight: 600 }}>{it.t}</div>
|
||||
{it.s && <div className="sub" style={{ fontSize: 12 }}>{it.s}</div>}
|
||||
</div>
|
||||
{it.badge && <span className="chip chip-warm" style={{ fontSize: 11 }}>{it.badge}</span>}
|
||||
<I.chev size={15} style={{ color: 'var(--c-fg-4)' }} />
|
||||
</button>
|
||||
{i < sec.items.length - 1 && <div style={{ height: 1, background: 'var(--c-divider)', marginLeft: 64 }} />}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function QRScreen({ nav }) {
|
||||
const cells = [];
|
||||
for (let i = 0; i < 441; i++) cells.push(Math.random() > 0.52 ? 1 : 0);
|
||||
const marker = (cx, cy) => {
|
||||
for (let y = 0; y < 7; y++) {
|
||||
for (let x = 0; x < 7; x++) {
|
||||
const isEdge = x === 0 || x === 6 || y === 0 || y === 6;
|
||||
const isInner = x >= 2 && x <= 4 && y >= 2 && y <= 4;
|
||||
cells[(cy + y) * 21 + (cx + x)] = (isEdge || isInner) ? 1 : 0;
|
||||
}
|
||||
}
|
||||
};
|
||||
marker(0, 0); marker(14, 0); marker(0, 14);
|
||||
|
||||
return (
|
||||
<div style={{ paddingBottom: 40, height: '100%', display: 'flex', flexDirection: 'column', background: 'linear-gradient(180deg, var(--c-primary-darker) 0%, var(--c-primary-dark) 100%)', color: '#fff' }}>
|
||||
<div style={{ display: 'flex', padding: '12px 16px 8px' }}>
|
||||
<button onClick={() => nav.pop()} className="press" style={{ width: 38, height: 38, borderRadius: 999, background: 'rgba(255,255,255,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<I.chevL size={20} style={{ color: '#fff' }} />
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '0 32px' }}>
|
||||
<div style={{ marginBottom: 24, textAlign: 'center' }}>
|
||||
<div style={{ fontSize: 22, fontWeight: 700, marginBottom: 6 }}>Ваш QR-код</div>
|
||||
<div style={{ fontSize: 13, opacity: .75 }}>Покажите на ресепшен, чтобы быстро отметиться</div>
|
||||
</div>
|
||||
<div style={{ background: '#fff', borderRadius: 24, padding: 20, marginBottom: 20 }}>
|
||||
<div style={{ width: 210, height: 210, display: 'grid', gridTemplateColumns: 'repeat(21,1fr)', gap: 0 }}>
|
||||
{cells.map((c, i) => (
|
||||
<div key={i} style={{ background: c ? '#0F4A44' : 'transparent' }} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<div style={{ fontSize: 13, opacity: .75, marginBottom: 3 }}>Пациент №</div>
|
||||
<div style={{ fontSize: 20, fontWeight: 700, letterSpacing: 1, fontFamily: 'var(--font-narrow)' }}>УГН-2014-00482</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ padding: '0 20px 20px' }}>
|
||||
<div style={{ background: 'rgba(255,255,255,0.12)', borderRadius: 16, padding: 14, display: 'flex', gap: 12, alignItems: 'center' }}>
|
||||
<I.shield size={22} style={{ color: '#fff', opacity: .8 }} />
|
||||
<div style={{ fontSize: 13, lineHeight: 1.45, opacity: .9 }}>Код обновляется каждые 60 секунд. Не передавайте третьим лицам.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function TelemedScreen({ nav }) {
|
||||
return (
|
||||
<div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: '#0F1A20', color: '#fff', position: 'relative' }}>
|
||||
<div style={{ flex: 1, background: 'linear-gradient(135deg, #1F8F85, #166B63)', position: 'relative' }}>
|
||||
<div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<div style={{ width: 140, height: 140, borderRadius: 999, background: 'rgba(255,255,255,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-narrow)', fontSize: 56, fontWeight: 700 }}>СА</div>
|
||||
</div>
|
||||
<div style={{ position: 'absolute', top: 60, left: 0, right: 0, padding: '0 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<button onClick={() => nav.pop()} className="press" style={{ width: 36, height: 36, borderRadius: 999, background: 'rgba(0,0,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<I.chevD size={22} style={{ color: '#fff' }} />
|
||||
</button>
|
||||
<div style={{ background: 'rgba(0,0,0,0.4)', borderRadius: 999, padding: '8px 14px', display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<span style={{ width: 8, height: 8, borderRadius: 999, background: '#E04E44', animation: 'blink 1.2s infinite' }} />
|
||||
<span style={{ fontSize: 13, fontWeight: 700 }}>05:42</span>
|
||||
</div>
|
||||
<button className="press" style={{ width: 36, height: 36, borderRadius: 999, background: 'rgba(0,0,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<I.menu size={20} style={{ color: '#fff' }} />
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ position: 'absolute', bottom: 160, left: 0, right: 0, textAlign: 'center' }}>
|
||||
<div style={{ fontSize: 18, fontWeight: 700, marginBottom: 3 }}>Синдяев А.В.</div>
|
||||
<div style={{ fontSize: 13, opacity: .75 }}>ЛОР-хирург</div>
|
||||
</div>
|
||||
<div style={{ position: 'absolute', top: 110, right: 16, width: 96, height: 130, borderRadius: 14, background: '#2a3540', border: '2px solid rgba(255,255,255,0.2)', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<div style={{ width: 44, height: 44, borderRadius: 999, background: 'var(--c-primary-100)', color: 'var(--c-primary-darker)', fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>АС</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ padding: '24px 0 50px', background: 'rgba(15,26,32,0.9)', backdropFilter: 'blur(10px)', display: 'flex', justifyContent: 'center', gap: 14 }}>
|
||||
{[
|
||||
{ i: I.mic, bg: 'rgba(255,255,255,0.15)' },
|
||||
{ i: I.video, bg: 'rgba(255,255,255,0.15)' },
|
||||
{ i: I.chat, bg: 'rgba(255,255,255,0.15)' },
|
||||
{ i: I.phone, bg: '#E04E44' },
|
||||
].map((c,i)=>{
|
||||
const CI = c.i;
|
||||
return (
|
||||
<button key={i} className="press" style={{ width: 58, height: 58, borderRadius: 999, background: c.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<CI size={24} style={{ color: '#fff' }} />
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function MedcardScreen({ nav }) {
|
||||
return (
|
||||
<div style={{ paddingBottom: 40 }}>
|
||||
<ScreenHeader title="Медицинская карта" onBack={() => nav.pop()} />
|
||||
<div style={{ padding: '0 20px' }}>
|
||||
<div className="card" style={{ marginBottom: 14 }}>
|
||||
<div className="h-row" style={{ marginBottom: 10 }}>Основное</div>
|
||||
{[['Пол','Женский'],['Возраст','42 года'],['Рост / Вес','168 см · 62 кг'],['Группа крови','II (A), Rh+']].map(([k,v])=>(
|
||||
<div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0' }}>
|
||||
<span className="sub">{k}</span>
|
||||
<span style={{ fontSize: 14, fontWeight: 700 }}>{v}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="card" style={{ marginBottom: 14 }}>
|
||||
<div className="h-row" style={{ marginBottom: 10 }}>Аллергии</div>
|
||||
<div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
|
||||
<span className="chip chip-danger">Пенициллин</span>
|
||||
<span className="chip chip-danger">Пыльца берёзы</span>
|
||||
<span className="chip chip-soft">+ добавить</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="h-sec" style={{ padding: '4px 4px 10px' }}>История диагнозов</div>
|
||||
<div className="card" style={{ padding: 0 }}>
|
||||
{[
|
||||
{ d: '12 апр 2026', t: 'Искривление носовой перегородки', doc: 'Синдяев А.В.', tag: 'Операция' },
|
||||
{ d: '8 апр 2026', t: 'Хронический риносинусит', doc: 'Макарова Л.Г.', tag: 'Приём' },
|
||||
{ d: '15 ноя 2025', t: 'ОРВИ', doc: 'Суворова С.В.', tag: 'Приём' },
|
||||
].map((r,i,a)=>(
|
||||
<div key={i}>
|
||||
<div style={{ padding: '14px 16px' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
|
||||
<span className="sub" style={{ fontSize: 12 }}>{r.d}</span>
|
||||
<span className="chip chip-soft" style={{ fontSize: 10 }}>{r.tag}</span>
|
||||
</div>
|
||||
<div style={{ fontSize: 14, fontWeight: 700, marginBottom: 3 }}>{r.t}</div>
|
||||
<div className="sub" style={{ fontSize: 12 }}>{r.doc}</div>
|
||||
</div>
|
||||
{i < a.length - 1 && <div className="divider" />}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function NotificationsScreen({ nav }) {
|
||||
const n = [
|
||||
{ tm: '2 ч назад', t: 'Напоминание', s: 'Приём Амоксиклава в 20:00', i: I.pill, tint: 'warning' },
|
||||
{ tm: 'Сегодня', t: 'Готово заключение', s: 'Макарова Л.Г. — эндоскопия носоглотки', i: I.doc, tint: 'primary' },
|
||||
{ tm: 'Вчера', t: 'Новое сообщение', s: 'Синдяев А.В.: «Как самочувствие?»', i: I.chat, tint: 'primary' },
|
||||
{ tm: '15 апр', t: 'Акция', s: 'Бесплатная консультация хирурга в апреле', i: I.gift, tint: 'warm' },
|
||||
{ tm: '12 апр', t: 'Приём завершён', s: 'Не забудьте оставить отзыв о враче', i: I.star, tint: 'warning' },
|
||||
];
|
||||
const tints = {
|
||||
primary: { bg: 'var(--c-primary-100)', c: 'var(--c-primary-darker)' },
|
||||
warning: { bg: 'var(--c-warning-50)', c: 'var(--c-warning)' },
|
||||
warm: { bg: 'var(--c-warm-100)', c: 'var(--c-warm-text)' },
|
||||
};
|
||||
return (
|
||||
<div style={{ paddingBottom: 40 }}>
|
||||
<ScreenHeader title="Уведомления" onBack={() => nav.pop()} />
|
||||
<div style={{ padding: '0 16px', display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{n.map((x,i)=>{
|
||||
const t = tints[x.tint];
|
||||
const XI = x.i;
|
||||
return (
|
||||
<div key={i} className="card" style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: 14 }}>
|
||||
<div style={{ width: 38, height: 38, borderRadius: 10, background: t.bg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
|
||||
<XI size={18} style={{ color: t.c }} />
|
||||
</div>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 2 }}>
|
||||
<span style={{ fontSize: 14, fontWeight: 700 }}>{x.t}</span>
|
||||
<span className="sub" style={{ fontSize: 11 }}>{x.tm}</span>
|
||||
</div>
|
||||
<div className="sub" style={{ fontSize: 13 }}>{x.s}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+107
@@ -0,0 +1,107 @@
|
||||
/* ============================================================
|
||||
Клиника УГН — Colors & Type
|
||||
Design tokens: CSS custom properties for colors, type, spacing,
|
||||
radii, shadows, and semantic text styles.
|
||||
============================================================ */
|
||||
|
||||
:root {
|
||||
/* ---------- Colors — Primary ---------- */
|
||||
--color-primary: #2BB4A8;
|
||||
--color-primary-dark: #1F8F85;
|
||||
--color-primary-darker: #166B63;
|
||||
--color-primary-light: #E3F4F2;
|
||||
--color-primary-soft: #B5E3DE;
|
||||
|
||||
--color-bg-hero: #F5EDDF;
|
||||
--color-bg-hero-deep: #E8DCC5;
|
||||
--color-bg-news: #FDF8E6;
|
||||
--color-bg-news-deep: #F5E9BF;
|
||||
|
||||
/* ---------- Colors — Accent ---------- */
|
||||
--color-accent: #E04E44;
|
||||
--color-accent-dark: #B63D35;
|
||||
--color-accent-light: #FCE8E6;
|
||||
|
||||
/* ---------- Colors — Semantic ---------- */
|
||||
--color-success: #2E9B6B;
|
||||
--color-success-light: #E4F4EC;
|
||||
--color-warning: #E8A13C;
|
||||
--color-warning-light: #FBEFD8;
|
||||
--color-danger: #D94141;
|
||||
--color-danger-light: #FBE4E4;
|
||||
--color-info: var(--color-primary);
|
||||
--color-info-light: var(--color-primary-light);
|
||||
|
||||
/* ---------- Colors — Neutrals ---------- */
|
||||
--color-bg: #FFFFFF;
|
||||
--color-bg-alt: #F7F9FC;
|
||||
--color-bg-muted: #EEF2F7;
|
||||
--color-surface: #FFFFFF;
|
||||
--color-border: #E4EAF2;
|
||||
--color-border-strong: #CDD6E2;
|
||||
|
||||
--color-fg-1: #1F2A37;
|
||||
--color-fg-2: #3E4C5D;
|
||||
--color-fg-3: #5A6B7B;
|
||||
--color-fg-4: #8596A8;
|
||||
--color-fg-on-primary: #FFFFFF;
|
||||
--color-fg-link: var(--color-primary);
|
||||
--color-fg-link-hover: var(--color-primary-dark);
|
||||
|
||||
--font-sans: 'PT Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||||
--font-display: 'PT Sans Narrow', 'PT Sans', system-ui, sans-serif;
|
||||
--font-mono: 'SF Mono', Menlo, Consolas, monospace;
|
||||
|
||||
--text-xs: 12px;
|
||||
--text-sm: 13px;
|
||||
--text-base: 15px;
|
||||
--text-md: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-xl: 20px;
|
||||
--text-2xl: 24px;
|
||||
--text-3xl: 28px;
|
||||
--text-4xl: 32px;
|
||||
--text-5xl: 40px;
|
||||
--text-6xl: 52px;
|
||||
|
||||
--lh-tight: 1.15;
|
||||
--lh-snug: 1.3;
|
||||
--lh-normal: 1.5;
|
||||
--lh-loose: 1.7;
|
||||
|
||||
--fw-regular: 400;
|
||||
--fw-bold: 700;
|
||||
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-10: 40px;
|
||||
--space-12: 48px;
|
||||
--space-16: 64px;
|
||||
--space-20: 80px;
|
||||
|
||||
--radius-xs: 2px;
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
--radius-xl: 12px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
--shadow-xs: 0 1px 2px rgba(15, 76, 129, 0.06);
|
||||
--shadow-sm: 0 2px 8px rgba(15, 76, 129, 0.08);
|
||||
--shadow-md: 0 4px 16px rgba(15, 76, 129, 0.12);
|
||||
--shadow-lg: 0 12px 32px rgba(15, 76, 129, 0.16);
|
||||
--shadow-focus: 0 0 0 3px rgba(30, 111, 181, 0.25);
|
||||
|
||||
--ease: cubic-bezier(0.4, 0.0, 0.2, 1);
|
||||
--dur-fast: 150ms;
|
||||
--dur: 200ms;
|
||||
--dur-slow: 320ms;
|
||||
|
||||
--container-max: 1200px;
|
||||
--container-pad: 24px;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: { port: 5173, host: true },
|
||||
});
|
||||
Reference in New Issue
Block a user