@ -1,7 +1,8 @@
import type { Metadata } from "next" ; import type { Metadata } from "next" ;
import Image from "next/image" ;
export const metadata : Metadata = { export const metadata : Metadata = {
title : "Внутренняя навигация | Брендбук О!Клиника " , title : "Внутренняя навигация. Цифровой брендбук Клиники ухо, горло, нос им. проф. Е.Н.Оленевой " ,
} ; } ;
function Section ( { function Section ( {
@ -30,74 +31,6 @@ function Section({
) ; ) ;
} }
/* Макет настенной таблички */
function SignMockup ( {
type ,
text ,
subtext ,
bgColor ,
textColor ,
accentColor ,
size ,
} : {
type : string ;
text : string ;
subtext? : string ;
bgColor : string ;
textColor : string ;
accentColor : string ;
size : string ;
} ) {
return (
< div className = "flex flex-col items-start gap-2" >
< div
className = "rounded-lg px-6 py-4 flex items-center gap-4"
style = { {
background : bgColor ,
width : 260 ,
border : bgColor === "#ffffff" ? "1px solid #e5e7eb" : "none" ,
} }
>
{ /* Цветовая полоса */ }
< div
className = "w-1.5 self-stretch rounded-full"
style = { { background : accentColor , minHeight : 32 } }
/ >
< div >
< p
style = { {
fontFamily : "'DINPro', Arial, sans-serif" ,
fontSize : 14 ,
fontWeight : 700 ,
color : textColor ,
lineHeight : 1.3 ,
} }
>
{ text }
< / p >
{ subtext && (
< p
style = { {
fontFamily : "'DINPro', Arial, sans-serif" ,
fontSize : 10 ,
color : textColor ,
opacity : 0.65 ,
marginTop : 3 ,
} }
>
{ subtext }
< / p >
) }
< / div >
< / div >
< div className = "pl-1" >
< p className = "text-xs font-medium" style = { { color : "var(--bb-text)" } } > { type } < / p >
< p className = "text-xs" style = { { color : "var(--bb-text-muted)" } } > { size } < / p >
< / div >
< / div >
) ;
}
export default function NavigationPage() { export default function NavigationPage() {
return ( return (
< div className = "max-w-4xl mx-auto px-8 py-10" > < div className = "max-w-4xl mx-auto px-8 py-10" >
@ -115,52 +48,111 @@ export default function NavigationPage() {
< / h1 > < / h1 >
< p className = "text-base max-w-2xl" style = { { color : "var(--bb-text-muted)" } } > < p className = "text-base max-w-2xl" style = { { color : "var(--bb-text-muted)" } } >
С и с т е м а н а в и г а ц и о н н ы х т а б л и ч е к и у к а з а т е л е й в н у т р и к л и н и к и . С и с т е м а н а в и г а ц и о н н ы х т а б л и ч е к и у к а з а т е л е й в н у т р и к л и н и к и .
Е д и н ы й с т и л ь с ф и р м е н н ы м и ц в е т а м и и ш р и ф т о м DINPro . Н а о р г с т е к л е , н а к л е й к и и з п л ё н о к О р а к л 053 M и 073 M .
< / p > < / p >
< / div > < / div >
{ /* Шаблоны табли чек */ } { /* Макеты табле чек */ }
< Section < Section
title = "Типы табличек" title = "Макеты навигационных табличек"
subtitle = "Четыре базовых шаблона для разных зон клиники." subtitle = "Два типа: табличка кабинета с бирюзовым заголовком и карточка врача с логотипом и QR-кодом."
>
< div className = "max-w-lg" >
< div
className = "rounded-xl overflow-hidden border mb-4"
style = { { borderColor : "var(--bb-border)" } }
> >
< div className = "flex flex-wrap gap-6" > < Image
< SignMockup src = "/offline/navigation/nav-mockup-signs.jpeg"
type = "Кабинет врача" alt = "Макеты навигационных табличек: Кабинет 04 с бирюзовым заголовком и карточка врача Лебединской"
text = "Кабинет № 101" width = { 620 }
subtext = "Оториноларингология" height = { 570 }
bgColor = "#ffffff" className = "w-full object-cover"
textColor = "#1b4c72"
accentColor = "#7ecfca"
size = "200 × 80 мм"
/ > / >
< SignMockup < / div >
type = "Направляющий указатель" < p className = "font-medium text-sm mb-1" style = { { color : "var(--bb-text)" } } >
text = "→ Регистратура" М а к е т и з б р е н д б у к а
subtext = "2-й этаж" < / p >
bgColor = "#5b7b87" < p className = "text-sm" style = { { color : "var(--bb-text-muted)" } } >
textColor = "#ffffff" Т а б л и ч к а « К а б и н е т 04 » : б и р ю з о в ы й з а г о л о в о к ( Oracal 053 M ) , с п е ц и а л и з а ц и я и Ф И О в р а ч е й .
accentColor = "#7ecfca" К а р т о ч к а врача : логотип к л и н и к и , и м я , д о л ж н о с т и , QR - к о д н а с т р а н и ц у в р а ч а .
size = "300 × 80 мм" < / p >
< / div >
< / Section >
{ /* Нумерация дверей */ }
< Section
title = "Нумерация кабинетов на дверях"
subtitle = "Номер кабинета размещается непосредственно на двери — крупный шрифт, плёнка Oracal."
>
< div className = "grid grid-cols-1 gap-6 sm:grid-cols-2" >
< div >
< div
className = "rounded-xl overflow-hidden border mb-4"
style = { { borderColor : "var(--bb-border)" } }
>
< Image
src = "/offline/navigation/nav-door-31.png"
alt = "Белая дверь кабинета 31 с крупным номером из плёнки"
width = { 770 }
height = { 963 }
className = "w-full object-cover"
style = { { maxHeight : 420 , objectPosition : "top" } }
/ > / >
< SignMockup < / div >
type = "Зона ожидания" < p className = "font-medium text-sm mb-1" style = { { color : "var(--bb-text)" } } >
text = "Зона ожидания" К а б и н е т 31 — б е л а я д в е р ь
subtext = "Пожалуйста, соблюдайте тишину" < / p >
bgColor = "#e0f5f4" < p className = "text-sm" style = { { color : "var(--bb-text-muted)" } } >
textColor = "#1b4c72" К р у п н ы й н о м е р в в е р х н е й ч а с т и д в е р и . Т ё м н а я п л ё н к а н а б е л о м ф о н е .
accentColor = "#5bb5ad" < / p >
size = "250 × 80 мм" < / div >
< div >
< div
className = "rounded-xl overflow-hidden border mb-4"
style = { { borderColor : "var(--bb-border)" } }
>
< Image
src = "/offline/navigation/nav-3.jpeg"
alt = "Серая дверь кабинета 13 с крупным номером"
width = { 800 }
height = { 463 }
className = "w-full object-cover"
style = { { maxHeight : 420 , objectPosition : "left" } }
/ > / >
< SignMockup < / div >
type = "Запрещающий" < p className = "font-medium text-sm mb-1" style = { { color : "var(--bb-text)" } } >
text = "Вход только для персонала" К а б и н е т 13 — с е р а я д в е р ь
bgColor = "#1b4c72" < / p >
textColor = "#ffffff" < p className = "text-sm" style = { { color : "var(--bb-text-muted)" } } >
accentColor = "#c4a882" Т ё м н а я д в е р ь с к р у п н ы м н о м е р о м . Р я д о м — т а б л и ч к а к а б и н е т а н а с т е н е .
size = "250 × 60 мм" < / p >
< / div >
< / div >
< / Section >
{ /* Указатели по этажам */ }
< Section
title = "Указатели по этажам"
subtitle = "Навигационные панели в холлах — показывают расположение кабинетов и специализации на каждом этаже."
>
< div
className = "rounded-xl overflow-hidden border"
style = { { borderColor : "var(--bb-border)" } }
>
< Image
src = "/offline/navigation/nav-render-p13.jpeg"
alt = "Навигационные панели по этажам: кабинеты 01-06, 21-25, 31-37, 41-45"
width = { 2105 }
height = { 1489 }
className = "w-full"
/ > / >
< / div > < / div >
< p className = "mt-3 text-sm" style = { { color : "var(--bb-text-muted)" } } >
С л е в а — у к а з а т е л ь с э т а ж о м и н а п р а в л е н и е м , с п р а в а — п а н е л ь с п о л н ы м п е р е ч н е м к а б и н е т о в .
А к т и в н ы й э т а ж в ы д е л я е т с я б и р ю з о в ы м ф о н о м ( Oracal 053 M ) .
< / p >
< / Section > < / Section >
{ /* Технические требования */ } { /* Технические требования */ }
@ -188,12 +180,10 @@ export default function NavigationPage() {
< / thead > < / thead >
< tbody > < tbody >
{ [ { [
[ "Основной материал" , "ПВХ 3мм / ПС зеркальный / акрил" ] , [ "Основной материал" , "Оргстекло" ] ,
[ "Покрытие фона" , "Oracal плёнка (053M / 073M / 050M)" ] , [ "Покрытие" , "Наклейка из плёнок Oracal" ] ,
[ "Шрифт" , "DINPro Bold / Regular (DXF для фрезеровки)" ] , [ "Шрифт" , "DINPro Bold / Regular" ] ,
[ "Крепление" , "Двусторонний скотч / шурупы с дистанционным держателем" ] , [ "Крепление" , "Дистанционные держатели" ] ,
[ "Толщина букв (фрезеровка)" , "3 мм от основы" ] ,
[ "Минимальный размер текста" , "10 мм по высоте" ] ,
] . map ( ( [ param , value ] ) = > ( ] . map ( ( [ param , value ] ) = > (
< tr < tr
key = { param } key = { param }
@ -218,24 +208,25 @@ export default function NavigationPage() {
title = "Цвета Oracal для навигации" title = "Цвета Oracal для навигации"
subtitle = "Допустимые цвета плёнки по коду Oracal." subtitle = "Допустимые цвета плёнки по коду Oracal."
> >
< div className = "grid grid-cols-2 gap-4 sm:grid-cols-4 " > < div className = "flex gap-6 " >
{ [ { [
{ code : "053M" , hex : "#7ecfca" , name : "Акцент / полоса" } , { code : "053M" , hex : "#7ecfca" , name : "Заголовок таблички / активный этаж" } ,
{ code : "073M" , hex : "#5b7b87" , name : "Фон указателей" } , { code : "073M" , hex : "#5b7b87" , name : "Дополнительный акцент" } ,
{ code : "050M" , hex : "#1b4c72" , name : "Фон запрещающих" } ,
{ code : "081M" , hex : "#c4a882" , name : "Акцент на тёмном" } ,
] . map ( c = > ( ] . map ( c = > (
< div < div
key = { c . code } key = { c . code }
className = "rounded-xl overflow-hidden border" className = "flex items-center gap-4 rounded-xl border p-4 "
style = { { borderColor : "var(--bb-border)" } } style = { { borderColor : "var(--bb-border)" , background : "var(--bb-sidebar-bg)" } }
> >
< div className = "h-16" style = { { background : c.hex } } / > < div
< div className = "p-3" > className = "w-12 h-12 rounded-lg shrink-0"
< p className = "font-medium text-xs" style = { { color : "var(--bb-text)" } } > style = { { background : c.hex } }
/ >
< div >
< p className = "font-medium text-sm" style = { { color : "var(--bb-text)" } } >
Oracal { c . code } Oracal { c . code }
< / p > < / p >
< p className = "text-xs" style = { { color : "var(--bb-text-muted)" } } > < p className = "text-xs mt-0.5 " style = { { color : "var(--bb-text-muted)" } } >
{ c . name } { c . name }
< / p > < / p >
< p className = "font-mono text-xs mt-1" style = { { color : "var(--bb-text-muted)" } } > < p className = "font-mono text-xs mt-1" style = { { color : "var(--bb-text-muted)" } } >
AR 15 M4
1 week ago
