/* Bilermen - Admin panel.
Look & feel modelled on the original admin (dark sidebar, white page head with
a Save button top-right, EN/RU tabs, card grids with Edit / Delete / + Add,
full-page editors with Cancel / Save) - but fully working.
How saving works on a static site (no server/database):
• "Save" / "Save changes" stores the whole content in THIS browser and the site
immediately shows it (preview that survives reloads).
• "Publish" downloads an updated data.js - replace it in your deployed site and
re-publish so every visitor sees the changes. (There is no server to save to,
so this download is the only way to make edits live for everyone.)
Interface language follows the EN/RU switch: it changes both the panel language
and which language's content you are editing. */
const AdminUI = (function () {
const { useState, useRef } = React;
const DRAFT_KEY = 'bilermen_content_v3';
const PASS = 'bilermen2026'; // change here, then Publish
/* ---------------------------------------------------------- UI strings */
const STR = {
en: {
panel: 'Admin panel', login: 'Admin Panel', loginSub: 'Sign in to manage the website content.',
password: 'Password', signin: 'Sign in', wrongPass: 'Wrong password.',
save: 'Save changes', saved: 'Saved ✓', add: 'Add', edit: 'Edit', del: 'Delete',
cancel: 'Cancel', publish: 'Publish', openSite: 'Open site →',
publishHint: 'Saved in this browser. Click Publish to download data.js and make it live for everyone.',
published: 'data.js downloaded - replace it on your server and re-publish.',
confirmDel: 'Delete this item permanently?', empty: 'Nothing yet. Click “Add”.',
moveUp: 'Up', moveDown: 'Down', dup: 'Duplicate',
nav: { dashboard: 'Dashboard', hero: 'Hero & Intro', services: 'Services', sectors: 'Sectors', advantages: 'Advantages', news: 'News', partners: 'Partners', contact: 'Contact Info', branding: 'Branding', legal: 'Legal', submissions: 'Submissions' },
meta: {
dashboard: ['Dashboard', 'Overview of your website content.'],
hero: ['Hero & Intro', 'Homepage hero and the “About Bilermen” section.'],
services: ['Services', 'Service cards, their detail pages and photos.'],
sectors: ['Sectors', 'Priority sectors, their detail pages and photos.'],
advantages: ['Advantages', 'The five advantages on the About page.'],
news: ['News', 'Articles - add, edit, or delete posts.'],
partners: ['Partners', 'Logos in the “Trusted by” carousel.'],
contact: ['Contact information', 'Phone, email, address, LinkedIn - used in the footer and contact page.'],
branding: ['Logo & favicon', 'Site logo and browser-tab icon.'],
legal: ['Legal / Privacy', 'Edit the Privacy Policy page - last-updated date, intro, sections, and terms.'],
submissions: ['Submissions', 'Where form submissions go.'],
},
addItem: { services: '+ Add service', sectors: '+ Add sector', advantages: '+ Add advantage', news: '+ New article', partners: '+ Add partner' },
editTitle: { services: 'service', sectors: 'sector', advantages: 'advantage', news: 'article', partners: 'partner' },
subsBody: 'The form on the Contact page sends submissions through Web3Forms. Every inquiry is delivered to the email linked to your Web3Forms key and is available in your Web3Forms dashboard at web3forms.com. To change the recipient address, update it in your Web3Forms account (no code change needed).',
brandLogo: 'Site logo', brandLogoHint: 'Shown in the header and footer. SVG or transparent PNG works best.',
brandFav: 'Favicon (tab icon)', brandFavHint: 'Small icon in the browser tab. A square SVG or PNG.',
logoFile: 'Logo file', altText: 'Alt text', favFile: 'Icon file',
latestNews: 'Latest news', noNews: 'No news yet.',
counts: { services: 'Services', sectors: 'Sectors', news: 'News', partners: 'Partners' },
},
ru: {
panel: 'Админ-панель', login: 'Админ-панель', loginSub: 'Войдите, чтобы управлять содержимым сайта.',
password: 'Пароль', signin: 'Войти', wrongPass: 'Неверный пароль.',
save: 'Сохранить', saved: 'Сохранено ✓', add: 'Добавить', edit: 'Изменить', del: 'Удалить',
cancel: 'Отмена', publish: 'Опубликовать', openSite: 'Открыть сайт →',
publishHint: 'Сохранено в этом браузере. Нажмите «Опубликовать», чтобы скачать data.js и показать правки всем.',
published: 'data.js скачан - замените им файл на сервере и опубликуйте заново.',
confirmDel: 'Удалить эту запись безвозвратно?', empty: 'Пока пусто. Нажмите «Добавить».',
moveUp: 'Вверх', moveDown: 'Вниз', dup: 'Дублировать',
nav: { dashboard: 'Обзор', hero: 'Главный экран', services: 'Услуги', sectors: 'Сектора', advantages: 'Преимущества', news: 'Новости', partners: 'Партнёры', contact: 'Контакты', branding: 'Логотип и иконка', legal: 'Политика', submissions: 'Заявки' },
meta: {
dashboard: ['Обзор', 'Сводка по содержимому сайта.'],
hero: ['Главный экран и «О нас»', 'Первый экран сайта и блок «О Bilermen».'],
services: ['Услуги', 'Карточки услуг, их страницы и фотографии.'],
sectors: ['Сектора', 'Приоритетные сектора, их страницы и фотографии.'],
advantages: ['Преимущества', 'Пять преимуществ на странице «О нас».'],
news: ['Новости', 'Статьи - добавление, изменение, удаление.'],
partners: ['Партнёры', 'Логотипы в блоке «Нам доверяют».'],
contact: ['Контактная информация', 'Телефон, email, адрес, LinkedIn - для подвала и страницы контактов.'],
branding: ['Логотип и иконка', 'Логотип сайта и иконка вкладки.'],
legal: ['Политика конфиденциальности', 'Редактирование страницы Политики - дата обновления, вступление, разделы, условия.'],
submissions: ['Заявки', 'Куда приходят заявки с сайта.'],
},
addItem: { services: '+ Добавить услугу', sectors: '+ Добавить сектор', advantages: '+ Добавить преимущество', news: '+ Новая статья', partners: '+ Добавить партнёра' },
editTitle: { services: 'услугу', sectors: 'сектор', advantages: 'преимущество', news: 'статью', partners: 'партнёра' },
subsBody: 'Форма на странице «Контакты» отправляет заявки через сервис Web3Forms. Каждое обращение приходит на email, привязанный к вашему ключу Web3Forms, и доступно в личном кабинете на web3forms.com. Чтобы сменить адрес получателя - измените его в кабинете Web3Forms (править код не нужно).',
brandLogo: 'Логотип сайта', brandLogoHint: 'Показывается в шапке и подвале. Лучше всего SVG или PNG с прозрачным фоном.',
brandFav: 'Favicon (иконка вкладки)', brandFavHint: 'Маленькая иконка во вкладке браузера. Квадратное изображение SVG/PNG.',
logoFile: 'Файл логотипа', altText: 'Альтернативный текст (alt)', favFile: 'Файл иконки',
latestNews: 'Последние новости', noNews: 'Новостей пока нет.',
counts: { services: 'Услуги', sectors: 'Сектора', news: 'Новости', partners: 'Партнёры' },
},
};
/* field schema (labels bilingual). type: text|textarea|select|image|list|pairs|stats */
const FIELD_LABELS = {
no: ['Number (e.g. 01)', 'Номер (например, 01)'],
slug: ['URL slug (latin)', 'Slug (латиницей)'],
date: ['Date (YYYY-MM-DD)', 'Дата (ГГГГ-ММ-ДД)'],
title: ['Title', 'Название'], name: ['Name', 'Название'],
short: ['Short description', 'Краткое описание'],
hero: ['Page subtitle', 'Подзаголовок на странице'],
lede: ['Intro paragraph', 'Вводный абзац'],
deliverables: ['What we deliver', 'Что мы предоставляем'],
examples: ['Engagement examples (optional)', 'Примеры проектов (необязательно)'],
tag: ['Tag (e.g. Energy)', 'Тег (например, Энергетика)'],
opportunity: ['Opportunity (paragraph)', 'Возможности (абзац)'],
valueAdd: ['How Bilermen adds value', 'Как Bilermen добавляет ценность'],
stats: ['Stats / facts (optional)', 'Цифры/факты (необязательно)'],
deep: ['Detailed description', 'Подробное описание'],
category: ['Category', 'Категория'],
dek: ['Subtitle', 'Подзаголовок'],
body: ['Body (paragraphs split by a blank line)', 'Текст (абзацы - через пустую строку)'],
image: ['Photo', 'Фото'],
group: ['Lane', 'Лента'],
url: ['Website link', 'Ссылка на сайт'],
logo: ['Logo (upload an image; if empty, the built-in brand logo is used)', 'Логотип (загрузите изображение; если пусто - встроенный логотип)'],
eyebrow: ['Eyebrow (small text above title)', 'Надпись над заголовком'],
subtle: ['Subtitle in brackets', 'Подпись в скобках'],
gateway: ['Gateway line', 'Слоган'],
subtitle: ['Description', 'Описание'],
cta1: ['Primary button', 'Кнопка 1'], cta2: ['Secondary button', 'Кнопка 2'],
address: ['Address', 'Адрес'], addressUrl: ['Map link', 'Ссылка на карту'],
email: ['Email', 'Email'], phone: ['Phone', 'Телефон'], phone2: ['Phone 2', 'Телефон 2'],
linkedin: ['LinkedIn (link)', 'LinkedIn (ссылка)'], linkedinHandle: ['LinkedIn (display name)', 'LinkedIn (имя)'],
};
const F = (k, t, opts) => ({ k, t, bi: !!(opts && opts.bi), options: opts && opts.options, neutral: !!(opts && opts.neutral) });
const SCHEMA = {
services: { listKey: 'SERVICES', titleKey: 'title', fields: [F('no','text',{neutral:1}),F('slug','text',{neutral:1}),F('title','text',{bi:1}),F('short','text',{bi:1}),F('hero','text',{bi:1}),F('lede','textarea',{bi:1}),F('deliverables','list',{bi:1}),F('examples','pairs',{bi:1}),F('image','image',{bi:1})] },
sectors: { listKey: 'SECTORS', titleKey: 'title', fields: [F('slug','text',{neutral:1}),F('tag','text',{bi:1}),F('title','text',{bi:1}),F('short','text',{bi:1}),F('opportunity','textarea',{bi:1}),F('valueAdd','list',{bi:1}),F('stats','stats',{neutral:1}),F('image','image',{bi:1})] },
advantages:{ listKey: 'ADVANTAGES', titleKey: 'title', fields: [F('no','text',{neutral:1}),F('slug','text',{neutral:1}),F('title','text',{bi:1}),F('short','text',{bi:1}),F('deep','textarea',{bi:1}),F('image','image',{neutral:1})] },
news: { listKey: 'NEWS', titleKey: 'title', fields: [F('slug','text',{neutral:1}),F('date','text',{neutral:1}),F('category','text',{bi:1}),F('title','text',{bi:1}),F('dek','textarea',{bi:1}),F('body','textarea',{bi:1}),F('image','image',{neutral:1})] },
partners: { listKey: 'PARTNERS', titleKey: 'name', fields: [F('name','text',{neutral:1}),F('group','select',{options:[['development','Partners (top lane) / Партнёры (верхняя)'],['private','Private sector (bottom) / Частный сектор (нижняя)']]}),F('url','text',{neutral:1}),F('logo','image',{neutral:1})] },
};
const HERO_FIELDS = [F('eyebrow','text',{bi:1}),F('title','text',{bi:1}),F('subtle','text',{bi:1}),F('gateway','text',{bi:1}),F('subtitle','text',{bi:1}),F('cta1','text',{bi:1}),F('cta2','text',{bi:1}),F('image','image',{bi:1})];
const CONTACT_FIELDS = [F('title','text',{bi:1}),F('address','textarea',{bi:1}),F('addressUrl','text',{neutral:1}),F('email','text',{neutral:1}),F('phone','text',{neutral:1}),F('phone2','text',{neutral:1}),F('linkedin','text',{neutral:1}),F('linkedinHandle','text',{neutral:1})];
/* ------------------------------------------------------------- styling */
const C = { teal: '#006D77', ink: '#0A1F26', sidebar: '#0A1F26', line: '#dfe3e3', soft: '#f4f6f6', red: '#b3261e', muted: '#6b7a7c' };
const sInput = { width: '100%', padding: '10px 12px', border: '1px solid ' + C.line, borderRadius: 8, font: '400 14px/1.5 system-ui, sans-serif', boxSizing: 'border-box', background: '#fff', color: C.ink };
const sLabel = { display: 'block', font: '600 11px/1.4 system-ui, sans-serif', letterSpacing: '0.6px', textTransform: 'uppercase', color: C.muted, marginBottom: 6, marginTop: 16 };
const sBtn = { padding: '10px 18px', borderRadius: 8, border: '1px solid ' + C.teal, background: C.teal, color: '#fff', font: '600 13px system-ui, sans-serif', cursor: 'pointer' };
const sBtnGhost = { padding: '10px 16px', borderRadius: 8, border: '1px solid ' + C.line, background: '#fff', color: C.ink, font: '600 13px system-ui, sans-serif', cursor: 'pointer' };
const sBtnSm = { padding: '6px 13px', borderRadius: 7, border: '1px solid ' + C.line, background: '#fff', color: C.ink, font: '600 12px system-ui, sans-serif', cursor: 'pointer' };
const sBtnTiny = { padding: '4px 10px', borderRadius: 6, border: '1px solid ' + C.line, background: '#fff', color: C.ink, font: '600 12px system-ui, sans-serif', cursor: 'pointer' };
const sCard = { border: '1px solid ' + C.line, borderRadius: 12, background: '#fff', padding: 20, marginBottom: 14 };
const clone = (o) => JSON.parse(JSON.stringify(o));
const fileToDataUrl = (file, cb) => { const r = new FileReader(); r.onload = () => cb(r.result); r.readAsDataURL(file); };
/* page head - title + sub + action button(s) top-right (like original) */
function PageHead({ title, sub, action }) {
return (
);
}
function LangTabs({ lang, setLang }) {
return (
{[['en', 'EN · English'], ['ru', 'RU · Русский']].map(([v, lbl]) => (
))}
);
}
/* ----------------------------------------------------------- field UI */
function Field({ field, item, lang, onChange }) {
const labelPair = FIELD_LABELS[field.k] || [field.k, field.k];
const label = labelPair[lang === 'ru' ? 1 : 0];
const key = field.bi ? field.k + (lang === 'ru' ? '_ru' : '') : field.k;
const val = item[key];
const set = (v) => onChange(key, v);
if (field.t === 'text') return ( set(e.target.value)} />
);
if (field.t === 'textarea') return (