127 lines
5.7 KiB
HTML
127 lines
5.7 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Локальная админка постов</title>
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<div>
|
|
<p class="eyebrow">Только localhost</p>
|
|
<h1>Посты ProgCode.Ru</h1>
|
|
</div>
|
|
<div class="topbar__actions">
|
|
<button class="button" id="duplicate-button" type="button">Дублировать</button>
|
|
<button class="button" id="new-button" type="button">Новая статья</button>
|
|
<button class="button button--primary" id="save-button" type="button">Сохранить</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="workspace">
|
|
<aside class="sidebar" aria-label="Список статей">
|
|
<div class="sidebar__header">
|
|
<label for="search-input">Поиск</label>
|
|
<input id="search-input" type="search" placeholder="Название, slug, категория" autocomplete="off" />
|
|
</div>
|
|
<div class="article-list" id="article-list"></div>
|
|
</aside>
|
|
|
|
<section class="editor" aria-label="Редактор статьи">
|
|
<div class="status-line">
|
|
<span id="status-text">Загрузка...</span>
|
|
<a id="open-article-link" href="#" target="_blank" rel="noreferrer">Открыть статью</a>
|
|
</div>
|
|
|
|
<form class="article-form" id="article-form">
|
|
<div class="form-grid">
|
|
<label class="field field--wide">
|
|
<span>Заголовок</span>
|
|
<input name="title" type="text" required />
|
|
</label>
|
|
|
|
<label class="field">
|
|
<span>Slug</span>
|
|
<input name="slug" type="text" required />
|
|
</label>
|
|
|
|
<label class="field">
|
|
<span>Дата</span>
|
|
<input name="date" type="text" placeholder="2019-01-12T21:54:18+00:00" required />
|
|
</label>
|
|
|
|
<label class="field">
|
|
<span>Автор</span>
|
|
<input name="author" type="text" required />
|
|
</label>
|
|
|
|
<label class="field">
|
|
<span>Минут чтения</span>
|
|
<input name="readingMinutes" type="number" min="1" step="1" required />
|
|
</label>
|
|
|
|
<label class="field field--wide">
|
|
<span>Категории</span>
|
|
<input name="categories" type="text" placeholder="JavaScript, Bitrix" required />
|
|
</label>
|
|
|
|
<label class="field field--wide">
|
|
<span>Обложка</span>
|
|
<div class="field-row">
|
|
<input name="cover" type="text" list="asset-options" required />
|
|
<button class="button" id="cover-upload-button" type="button">Загрузить</button>
|
|
</div>
|
|
<input id="cover-upload-input" type="file" accept="image/*" hidden />
|
|
<datalist id="asset-options"></datalist>
|
|
</label>
|
|
|
|
<label class="field field--wide">
|
|
<span>Анонс</span>
|
|
<textarea name="excerpt" rows="4" required></textarea>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="editor-tools">
|
|
<button class="button" id="slug-button" type="button">Slug из заголовка</button>
|
|
<button class="button" id="minutes-button" type="button">Оценить время</button>
|
|
<button class="button button--danger" id="delete-button" type="button">Удалить</button>
|
|
</div>
|
|
|
|
<div class="content-layout">
|
|
<section class="field content-field">
|
|
<div class="content-field__header">
|
|
<span>Markdown статьи</span>
|
|
<div class="markdown-toolbar" aria-label="Форматирование Markdown">
|
|
<button class="tool-button" data-format="h2" type="button" title="Заголовок H2">H2</button>
|
|
<button class="tool-button" data-format="h3" type="button" title="Заголовок H3">H3</button>
|
|
<button class="tool-button" data-format="bold" type="button" title="Жирный">B</button>
|
|
<button class="tool-button" data-format="italic" type="button" title="Курсив">I</button>
|
|
<button class="tool-button" data-format="code" type="button" title="Код">Code</button>
|
|
<button class="tool-button" data-format="quote" type="button" title="Цитата">Quote</button>
|
|
<button class="tool-button" data-format="list" type="button" title="Список">List</button>
|
|
<button class="tool-button" data-format="link" type="button" title="Ссылка">Link</button>
|
|
<button class="tool-button" id="asset-upload-button" type="button" title="Загрузить и вставить ассет">
|
|
Upload
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<textarea name="contentMarkdown" spellcheck="false" required></textarea>
|
|
<input id="asset-upload-input" type="file" multiple hidden />
|
|
</section>
|
|
|
|
<section class="preview" aria-label="Предпросмотр">
|
|
<div class="preview__cover">
|
|
<img id="cover-preview" alt="" />
|
|
</div>
|
|
<iframe id="content-preview" title="Предпросмотр HTML статьи" sandbox=""></iframe>
|
|
</section>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="/src/app/main.js" type="module"></script>
|
|
</body>
|
|
</html>
|