211 lines
10 KiB
HTML
211 lines
10 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>NODE.DC Admin</title>
|
||
<link rel="stylesheet" href="./admin.css" />
|
||
</head>
|
||
<body>
|
||
<div class="admin-backdrop" aria-hidden="true"></div>
|
||
<header class="nodedc-expanded-toolbar-shell">
|
||
<div class="nodedc-expanded-toolbar">
|
||
<div class="nodedc-expanded-toolbar-top">
|
||
<div class="nodedc-expanded-toolbar-left">
|
||
<a href="/" class="nodedc-expanded-brand-link" target="_blank" aria-label="NODE.DC">
|
||
<img src="./nodedc-logo.svg" alt="NODE.DC" class="nodedc-expanded-brand-logo" />
|
||
</a>
|
||
</div>
|
||
<div class="nodedc-expanded-toolbar-center">
|
||
<span class="nodedc-expanded-workspace-button" aria-hidden="true">
|
||
<img src="../assets/custom/logo.png" alt="" class="nodedc-expanded-workspace-avatar" />
|
||
</span>
|
||
<nav class="nodedc-expanded-nav-group" aria-label="Навигация админки">
|
||
<a class="nodedc-expanded-nav-button" href="/" target="_blank" data-active="false">
|
||
<span>Витрина</span>
|
||
</a>
|
||
<button class="nodedc-expanded-nav-button" type="button" data-active="true">
|
||
<span>Администрирование</span>
|
||
</button>
|
||
<button class="nodedc-expanded-nav-button" type="button" data-active="false">
|
||
<span>Платформа</span>
|
||
</button>
|
||
</nav>
|
||
</div>
|
||
<div class="nodedc-expanded-toolbar-right">
|
||
<div class="nodedc-expanded-user-group">
|
||
<span class="nodedc-toolbar-icon-button" aria-hidden="true">▣</span>
|
||
<span class="nodedc-expanded-profile-trigger">
|
||
<span class="nodedc-expanded-nav-button" data-active="false">
|
||
<span>Профиль</span>
|
||
</span>
|
||
<span class="nodedc-expanded-user-avatar-button" aria-hidden="true">
|
||
<span class="nodedc-expanded-user-avatar">DC</span>
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<main class="admin-shell">
|
||
<aside class="sidebar">
|
||
<div class="sidebar-head">
|
||
<div>
|
||
<div class="section-kicker">NODE.DC</div>
|
||
<h1>Администрирование</h1>
|
||
</div>
|
||
<button id="add-block" class="admin-panel-close add-block-button" type="button" aria-label="Добавить блок">+</button>
|
||
<div class="workspace-card admin-panel-client-select">
|
||
<div class="workspace-logo admin-panel-client-select__icon">DC</div>
|
||
<div>
|
||
<div class="workspace-name">NODE.DC</div>
|
||
<div class="workspace-role">Администратор сайта</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="regions" class="regions"></div>
|
||
</aside>
|
||
|
||
<section class="editor">
|
||
<header class="editor-head">
|
||
<div>
|
||
<h1>Настройки сайта</h1>
|
||
<div id="selected-region" class="breadcrumb">NODE.DC / Выберите блок</div>
|
||
<h2 id="selected-title">Контентный слой</h2>
|
||
</div>
|
||
<div class="actions">
|
||
<span id="dirty-state" class="dirty-state" data-dirty="false">Синхронизировано</span>
|
||
<button id="reload" class="icon-btn" type="button" title="Перезагрузить данные">↻</button>
|
||
<button id="save" class="primary-btn" type="button" title="Записать текущую модель в content/pages/home.json">Сохранить модель</button>
|
||
<button id="render" class="ghost-btn" type="button" title="Сохранить модель и пересобрать публичный index.html">Обновить index.html</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div id="empty-state" class="empty-state">
|
||
<div class="empty-icon">ND</div>
|
||
<div>
|
||
<h3>Выберите блок слева</h3>
|
||
<p>Статика, hero, форма и секции страницы разделены на рабочие группы. Сначала редактируем typed-поля, сырой JSON оставлен как технический fallback.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<form id="block-form" class="block-form hidden">
|
||
<section class="settings-card block-meta-card">
|
||
<div class="card-head">
|
||
<div>
|
||
<div class="section-kicker">Идентификатор</div>
|
||
<h3>Служебные параметры</h3>
|
||
</div>
|
||
<label class="toggle-row">
|
||
<input id="block-enabled" name="enabled" type="checkbox" />
|
||
<span>Отображение</span>
|
||
</label>
|
||
</div>
|
||
<div class="field-grid">
|
||
<label class="field-control">
|
||
<span>ID блока</span>
|
||
<input id="block-id" name="id" type="text" autocomplete="off" />
|
||
</label>
|
||
<label class="field-control">
|
||
<span>Название в админке</span>
|
||
<input id="block-label" name="adminLabel" type="text" autocomplete="off" />
|
||
</label>
|
||
<label class="field-control">
|
||
<span>Шаблон / тип</span>
|
||
<input id="block-template" name="template" type="text" autocomplete="off" readonly />
|
||
</label>
|
||
<label class="field-control">
|
||
<span>Anchor</span>
|
||
<input id="block-anchor" name="anchor" type="text" autocomplete="off" />
|
||
</label>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="settings-card structure-card">
|
||
<div class="card-head structure-head">
|
||
<div>
|
||
<div class="section-kicker">Порядок блока</div>
|
||
<h3>Операции с блоком</h3>
|
||
</div>
|
||
<div class="button-row icon-action-row">
|
||
<button id="move-up" class="icon-action-btn" type="button" title="Поднять блок" aria-label="Поднять блок">
|
||
<span aria-hidden="true">↑</span>
|
||
</button>
|
||
<button id="move-down" class="icon-action-btn" type="button" title="Опустить блок" aria-label="Опустить блок">
|
||
<span aria-hidden="true">↓</span>
|
||
</button>
|
||
<button id="duplicate" class="icon-action-btn" type="button" title="Дублировать блок" aria-label="Дублировать блок">
|
||
<span aria-hidden="true">⧉</span>
|
||
</button>
|
||
<button id="copy" class="icon-action-btn operation-extra" type="button" title="Копировать блок" aria-label="Копировать блок">
|
||
<span aria-hidden="true">□</span>
|
||
</button>
|
||
<button id="paste-after" class="icon-action-btn operation-extra" type="button" title="Вставить после" aria-label="Вставить после">
|
||
<span aria-hidden="true">▣</span>
|
||
</button>
|
||
<button id="delete-block" class="icon-action-btn danger-action-btn" type="button" title="Удалить блок" aria-label="Удалить блок">
|
||
<span aria-hidden="true">⌫</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="content-panel">
|
||
<div class="panel-head">
|
||
<div>
|
||
<div class="section-kicker">Контент</div>
|
||
<h3>Редактируемые поля</h3>
|
||
</div>
|
||
<span class="panel-note">Поля сгруппированы по смысловым подблокам верстки.</span>
|
||
</div>
|
||
<div id="content-fields" class="content-fields"></div>
|
||
</section>
|
||
|
||
<details class="json-details">
|
||
<summary>JSON выбранного блока</summary>
|
||
<label class="json-field">
|
||
<span>Техническое представление</span>
|
||
<textarea id="block-json" spellcheck="false"></textarea>
|
||
</label>
|
||
</details>
|
||
</form>
|
||
|
||
<pre id="status" class="status"></pre>
|
||
</section>
|
||
</main>
|
||
<div id="template-modal" class="template-modal-layer hidden" role="dialog" aria-modal="true" aria-labelledby="template-modal-title">
|
||
<article class="template-modal">
|
||
<header class="template-modal-head">
|
||
<div>
|
||
<div class="section-kicker">Библиотека блоков</div>
|
||
<h2 id="template-modal-title">Добавить блок</h2>
|
||
<p>Выберите шаблон. Новый блок появится в конце соответствующего списка.</p>
|
||
</div>
|
||
<button id="template-modal-close" class="admin-panel-close modal-close-button" type="button" aria-label="Закрыть">×</button>
|
||
</header>
|
||
<div id="template-list" class="template-list"></div>
|
||
<footer class="template-modal-foot">
|
||
<button id="template-modal-cancel" class="ghost-btn" type="button">Отмена</button>
|
||
</footer>
|
||
</article>
|
||
</div>
|
||
<div id="delete-modal" class="template-modal-layer delete-modal-layer hidden" role="dialog" aria-modal="true" aria-labelledby="delete-modal-title" aria-describedby="delete-modal-body">
|
||
<article class="template-modal delete-modal">
|
||
<header class="template-modal-head delete-modal-head">
|
||
<div>
|
||
<div class="section-kicker">Удаление</div>
|
||
<h2 id="delete-modal-title">Подтвердите действие</h2>
|
||
<p id="delete-modal-body">Вы действительно подтвердить удаление элемента?</p>
|
||
</div>
|
||
</header>
|
||
<footer class="template-modal-foot delete-modal-foot">
|
||
<button id="delete-modal-cancel" class="ghost-btn" type="button">Отмена</button>
|
||
<button id="delete-modal-confirm" class="danger-btn delete-confirm-btn" type="button">Да</button>
|
||
</footer>
|
||
</article>
|
||
</div>
|
||
<script src="./admin.js" type="module"></script>
|
||
</body>
|
||
</html>
|