mirivlad/web_writer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change CSS framework from PicoCSS to Bootstrap 5.3

Browse Source
This commit is contained in:
mirivlad
2025-11-27 14:46:51 +08:00
parent e51768622f
commit 39cda7814f
245 changed files with 678223 additions and 2750 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/chapters/create.php
+60 -49
View File
@@ -2,61 +2,72 @@
include 'views/layouts/header.php';
?>
<h1>Новая глава для: <?= e($book['title']) ?></h1>
<?php if (isset($error) && $error): ?>
<div class="alert alert-error">
<?= e($error) ?>
<div class="container">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="h2">Новая глава для: <?= e($book['title']) ?></h1>
<a href="<?= SITE_URL ?>/books/<?= $book['id'] ?>/chapters" class="btn btn-outline-secondary">
<i class="bi bi-arrow-left"></i> Назад к главам
</a>
</div>
<?php endif; ?>
<form method="post" id="chapter-form">
<input type="hidden" name="csrf_token" value="<?= generate_csrf_token() ?>">
<div style="margin-bottom: 1rem;">
<label for="title" style="display: block; margin-bottom: 0.5rem; font-weight: bold;">
Название главы *
</label>
<input type="text" id="title" name="title"
value="<?= e($_POST['title'] ?? '') ?>"
placeholder="Введите название главы"
style="width: 100%; margin-bottom: 1.5rem;"
required>
<label for="content" style="display: block; margin-bottom: 0.5rem; font-weight: bold;">
Содержание главы *
</label>
<!-- Контейнер Quill -->
<div id="quill-editor"
class="writer-editor-container"
style="height:500px;"
data-content="<?= htmlspecialchars($_POST['content'] ?? '', ENT_QUOTES) ?>">
<?php if (isset($error) && $error): ?>
<div class="alert alert-danger">
<?= e($error) ?>
</div>
<!-- Скрытый textarea для формы -->
<textarea id="content" name="content" style="display:none;"><?= e($_POST['content'] ?? '') ?></textarea>
<?php endif; ?>
<div style="margin-top: 1rem;">
<label for="status" style="display: block; margin-bottom: 0.5rem; font-weight: bold;">
Статус главы
</label>
<select id="status" name="status" style="width: 100%;">
<option value="draft" <?= (($_POST['status'] ?? 'draft') == 'draft') ? 'selected' : '' ?>>📝 Черновик</option>
<option value="published" <?= (($_POST['status'] ?? '') == 'published') ? 'selected' : '' ?>>✅ Опубликована</option>
</select>
<small style="color: var(--muted-color);">
Опубликованные главы видны в публичном доступе
</small>
<div class="card">
<div class="card-body">
<form method="post" id="chapter-form">
<input type="hidden" name="csrf_token" value="<?= generate_csrf_token() ?>">
<div class="mb-3">
<label for="title" class="form-label">Название главы *</label>
<input type="text" class="form-control" id="title" name="title"
value="<?= e($_POST['title'] ?? '') ?>"
placeholder="Введите название главы" required>
</div>
<div class="mb-3">
<label for="content" class="form-label">Содержание главы *</label>
<!-- Контейнер Quill -->
<div id="quill-editor"
class="writer-editor-container"
style="height:500px;"
data-content="<?= htmlspecialchars($_POST['content'] ?? '', ENT_QUOTES) ?>">
</div>
<!-- Скрытый textarea для формы -->
<textarea id="content" name="content" style="display:none;"><?= e($_POST['content'] ?? '') ?></textarea>
</div>
<div class="mb-4">
<label for="status" class="form-label">Статус главы</label>
<select class="form-select" id="status" name="status">
<option value="draft" <?= (($_POST['status'] ?? 'draft') == 'draft') ? 'selected' : '' ?>>📝 Черновик</option>
<option value="published" <?= (($_POST['status'] ?? '') == 'published') ? 'selected' : '' ?>>✅ Опубликована</option>
</select>
<div class="form-text">
Опубликованные главы видны в публичном доступе
</div>
</div>
<div class="d-flex gap-2">
<button type="submit" class="btn btn-primary">
<i class="bi bi-check-circle"></i> Сохранить главу
</button>
<button type="button" onclick="previewChapter()" class="btn btn-outline-secondary">
<i class="bi bi-eye"></i> Предпросмотр
</button>
<a href="<?= SITE_URL ?>/books/<?= $book['id'] ?>/chapters" class="btn btn-outline-danger">
<i class="bi bi-x-circle"></i> Отмена
</a>
</div>
</form>
</div>
</div>
</div>
<div style="display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1.5rem;">
<button type="submit" class="contrast">💾 Сохранить главу</button>
<button type="button" onclick="previewChapter()" class="secondary">👁️ Предпросмотр</button>
<a href="<?= SITE_URL ?>/books/<?= $book['id'] ?>/chapters" role="button" class="secondary">❌ Отмена</a>
</div>
</form>
<link href="/assets/css/quill_reset.css" rel="stylesheet">
<!-- <link href="/assets/css/quill_reset.css" rel="stylesheet"> -->
<script>
function previewChapter() {
const form = document.getElementById('chapter-form');
@@ -94,4 +105,4 @@ function previewChapter() {
}
</script>
<script src="/assets/js/editor.js"></script>
<?php include 'views/layouts/footer.php'; ?>
<?php include 'views/layouts/footer.php'; ?>
views/chapters/edit.php
+110 -73
View File
@@ -1,80 +1,122 @@
// views/chapters/edit.php
<?php
// views/chapters/edit.php
include 'views/layouts/header.php';
?>
<h1>Редактирование главы: <?= e($chapter['title']) ?></h1>
<?php if (isset($error) && $error): ?>
<div class="alert alert-error">
<?= e($error) ?>
</div>
<?php endif; ?>
<form method="post" id="chapter-form">
<input type="hidden" name="csrf_token" value="<?= generate_csrf_token() ?>">
<div style="margin-bottom: 1rem;">
<label for="title" style="display: block; margin-bottom: 0.5rem; font-weight: bold;">
Название главы *
</label>
<input type="text" id="title" name="title"
value="<?= e($chapter['title']) ?>"
placeholder="Введите название главы"
style="width: 100%; margin-bottom: 1.5rem;"
required>
<label for="content" style="display: block; margin-bottom: 0.5rem; font-weight: bold;">
Содержание главы *
</label>
<!-- Контейнер Quill -->
<div id="quill-editor"
class="writer-editor-container"
style="height:500px;"
data-content="<?= htmlspecialchars($chapter['content'] ?? '', ENT_QUOTES) ?>">
</div>
<!-- Скрытый textarea для формы -->
<textarea id="content" name="content" style="display:none;"></textarea>
<div style="margin-top: 1rem;">
<label for="status" style="display: block; margin-bottom: 0.5rem; font-weight: bold;">
Статус главы
</label>
<select id="status" name="status" style="width: 100%;">
<option value="draft" <?= ($chapter['status'] == 'draft') ? 'selected' : '' ?>>📝 Черновик</option>
<option value="published" <?= ($chapter['status'] == 'published') ? 'selected' : '' ?>>✅ Опубликована</option>
</select>
<small style="color: var(--muted-color);">
Опубликованные главы видны в публичном доступе
</small>
</div>
</div>
<div style="display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1.5rem;">
<button type="submit" class="contrast">
💾 Сохранить изменения
</button>
<button type="button" onclick="previewChapter()" class="secondary">
👁️ Предпросмотр
</button>
<a href="<?= SITE_URL ?>/books/<?= $book['id'] ?>/chapters" role="button" class="secondary">
❌ Отмена
<div class="container">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="h2">Редактирование главы: <?= e($chapter['title']) ?></h1>
<a href="<?= SITE_URL ?>/books/<?= $book['id'] ?>/chapters" class="btn btn-outline-secondary">
<i class="bi bi-arrow-left"></i> Назад к главам
</a>
</div>
</form>
<div style="margin-top: 2rem; padding: 1rem; background: var(--card-background-color); border-radius: 5px;">
<h3>Информация о главе</h3>
<p><strong>Книга:</strong> <a href="<?= SITE_URL ?>/books/<?= $book['id'] ?>/edit"><?= e($book['title']) ?></a></p>
<p><strong>Количество слов:</strong> <?= $chapter['word_count'] ?></p>
<p><strong>Создана:</strong> <?= date('d.m.Y H:i', strtotime($chapter['created_at'])) ?></p>
<p><strong>Обновлена:</strong> <?= date('d.m.Y H:i', strtotime($chapter['updated_at'])) ?></p>
<?php if (isset($error) && $error): ?>
<div class="alert alert-danger">
<?= e($error) ?>
</div>
<?php endif; ?>
<div class="row">
<div class="col-lg-8">
<div class="card mb-4">
<div class="card-header">
<h5 class="card-title mb-0">Содержание главы</h5>
</div>
<div class="card-body">
<form method="post" id="chapter-form">
<input type="hidden" name="csrf_token" value="<?= generate_csrf_token() ?>">
<div class="mb-3">
<label for="title" class="form-label">Название главы *</label>
<input type="text" class="form-control" id="title" name="title"
value="<?= e($chapter['title']) ?>"
placeholder="Введите название главы" required>
</div>
<div class="mb-3">
<label for="content" class="form-label">Содержание главы *</label>
<!-- Контейнер Quill -->
<div id="quill-editor"
class="writer-editor-container"
style="height:500px;"
data-content="<?= htmlspecialchars($chapter['content'] ?? '', ENT_QUOTES) ?>">
</div>
<!-- Скрытый textarea для формы -->
<textarea id="content" name="content" style="display:none;"></textarea>
</div>
<div class="mb-4">
<label for="status" class="form-label">Статус главы</label>
<select class="form-select" id="status" name="status">
<option value="draft" <?= ($chapter['status'] == 'draft') ? 'selected' : '' ?>>📝 Черновик</option>
<option value="published" <?= ($chapter['status'] == 'published') ? 'selected' : '' ?>>✅ Опубликована</option>
</select>
<div class="form-text">
Опубликованные главы видны в публичном доступе
</div>
</div>
<div class="d-flex gap-2 flex-wrap">
<button type="submit" class="btn btn-primary">
<i class="bi bi-check-circle"></i> Сохранить изменения
</button>
<button type="button" onclick="previewChapter()" class="btn btn-outline-secondary">
<i class="bi bi-eye"></i> Предпросмотр
</button>
<a href="<?= SITE_URL ?>/books/<?= $book['id'] ?>/chapters" class="btn btn-outline-danger">
<i class="bi bi-x-circle"></i> Отмена
</a>
</div>
</form>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Информация о главе</h5>
</div>
<div class="card-body">
<div class="mb-3">
<strong>Книга:</strong><br>
<a href="<?= SITE_URL ?>/books/<?= $book['id'] ?>/edit" class="text-decoration-none">
<?= e($book['title']) ?>
</a>
</div>
<div class="mb-3">
<strong>Количество слов:</strong><br>
<span class="text-primary fw-bold"><?= $chapter['word_count'] ?></span>
</div>
<div class="mb-3">
<strong>Создана:</strong><br>
<small class="text-muted"><?= date('d.m.Y H:i', strtotime($chapter['created_at'])) ?></small>
</div>
<div class="mb-3">
<strong>Обновлена:</strong><br>
<small class="text-muted"><?= date('d.m.Y H:i', strtotime($chapter['updated_at'])) ?></small>
</div>
<div class="alert alert-info mt-3">
<small>
<i class="bi bi-info-circle"></i>
Автосохранение включено. Изменения сохраняются автоматически каждые 2 минуты.
</small>
</div>
</div>
</div>
</div>
</div>
</div>
<link href="/assets/css/quill_reset.css" rel="stylesheet">
<!-- <link href="/assets/css/quill_reset.css" rel="stylesheet"> -->
<script>
function previewChapter() {
const form = document.getElementById('chapter-form');
@@ -101,11 +143,6 @@ function previewChapter() {
titleInput.value = document.getElementById('title').value || 'Предпросмотр главы';
tempForm.appendChild(titleInput);
const editorTypeInput = document.createElement('input');
editorTypeInput.name = 'editor_type';
editorTypeInput.value = '<?= $book['editor_type'] ?? 'markdown' ?>';
tempForm.appendChild(editorTypeInput);
document.body.appendChild(tempForm);
tempForm.submit();
document.body.removeChild(tempForm);
views/chapters/index.php
+108 -72
View File
@@ -3,79 +3,115 @@
include 'views/layouts/header.php';
?>
<div style="margin-bottom: 1rem;">
<h1 style="margin: 0 0 0.5rem 0; font-size: 1.5rem;">Главы книги: <?= e($book['title']) ?></h1>
<div style="display: flex; gap: 5px; flex-wrap: wrap; justify-content:center;">
<a href="<?= SITE_URL ?>/books/<?= $book['id'] ?>/chapters/create" class="adaptive-button" role="button">➕ Новая глава</a>
<a href="<?= SITE_URL ?>/books/<?= $book['id'] ?>/edit" class="adaptive-button secondary" role="button">✏️ Редактировать книгу</a>
<a href="<?= SITE_URL ?>/book/<?= $book['share_token'] ?>" class="adaptive-button green-btn" role="button" target="_blank">👁️ Публичный доступ</a>
<a href="<?= SITE_URL ?>/book/all/<?= $book['id'] ?>" class="adaptive-button" role="button" target="_blank">👁️ Полный обзор</a>
<div class="container">
<div class="d-flex justify-content-between align-items-center mb-4">
<div>
<h1 class="h2">Главы книги: <?= e($book['title']) ?></h1>
<p class="text-muted mb-0">Управление главами вашей книги</p>
</div>
<div class="btn-group">
<a href="<?= SITE_URL ?>/books/<?= $book['id'] ?>/chapters/create" class="btn btn-primary">
<i class="bi bi-plus-circle"></i> Новая глава
</a>
<a href="<?= SITE_URL ?>/books/<?= $book['id'] ?>/edit" class="btn btn-outline-secondary">
<i class="bi bi-pencil"></i> Редактировать книгу
</a>
</div>
</div>
<div class="d-flex flex-wrap gap-2 mb-4">
<a href="<?= SITE_URL ?>/book/<?= $book['share_token'] ?>" class="btn btn-outline-success" target="_blank">
<i class="bi bi-eye"></i> Публичный доступ
</a>
<a href="<?= SITE_URL ?>/book/all/<?= $book['id'] ?>" class="btn btn-outline-info" target="_blank">
<i class="bi bi-list-ul"></i> Полный обзор
</a>
</div>
<?php if (empty($chapters)): ?>
<div class="text-center py-5">
<div class="mb-4">
<i class="bi bi-file-text fs-1 text-muted"></i>
</div>
<h3 class="h4 text-muted">В этой книге пока нет глав</h3>
<p class="text-muted mb-4">Создайте первую главу для вашей книги</p>
<a href="<?= SITE_URL ?>/books/<?= $book['id'] ?>/chapters/create" class="btn btn-primary">
<i class="bi bi-plus-circle"></i> Создать первую главу
</a>
</div>
<?php else: ?>
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th style="width: 5%;">№</th>
<th style="width: 40%;">Название главы</th>
<th style="width: 15%;">Статус</th>
<th style="width: 10%;">Слов</th>
<th style="width: 20%;">Обновлено</th>
<th style="width: 10%;">Действия</th>
</tr>
</thead>
<tbody>
<?php foreach ($chapters as $index => $chapter): ?>
<tr>
<td><?= $index + 1 ?></td>
<td>
<strong><?= e($chapter['title']) ?></strong>
<?php if ($chapter['content']): ?>
<br><small class="text-muted"><?= e(mb_strimwidth($chapter['content'], 0, 100, '...')) ?></small>
<?php endif; ?>
</td>
<td>
<span class="badge <?= $chapter['status'] == 'published' ? 'bg-success' : 'bg-warning' ?>">
<?= $chapter['status'] == 'published' ? 'Опубликована' : 'Черновик' ?>
</span>
</td>
<td><?= $chapter['word_count'] ?></td>
<td>
<small><?= date('d.m.Y H:i', strtotime($chapter['updated_at'])) ?></small>
</td>
<td>
<div class="btn-group btn-group-sm">
<a href="<?= SITE_URL ?>/chapters/<?= $chapter['id'] ?>/edit" class="btn btn-outline-primary" title="Редактировать">
<i class="bi bi-pencil"></i>
</a>
<form method="post" action="<?= SITE_URL ?>/chapters/<?= $chapter['id'] ?>/delete"
onsubmit="return confirm('Вы уверены, что хотите удалить эту главу? Это действие нельзя отменить.');">
<input type="hidden" name="csrf_token" value="<?= generate_csrf_token() ?>">
<button type="submit" class="btn btn-outline-danger" title="Удалить">
<i class="bi bi-trash"></i>
</button>
</form>
</div>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
<div class="mt-3 p-3 bg-light rounded">
<div class="row text-center">
<div class="col-md-4 col-6 mb-2">
<strong class="text-primary"><?= count($chapters) ?></strong>
<small class="text-muted d-block">Всего глав</small>
</div>
<div class="col-md-4 col-6 mb-2">
<strong class="text-success"><?= array_sum(array_column($chapters, 'word_count')) ?></strong>
<small class="text-muted d-block">Всего слов</small>
</div>
<div class="col-md-4 col-12 mb-2">
<strong class="text-info"><?= count(array_filter($chapters, function($ch) { return $ch['status'] == 'published'; })) ?></strong>
<small class="text-muted d-block">Опубликовано</small>
</div>
</div>
</div>
<?php endif; ?>
</div>
<?php if (empty($chapters)): ?>
<div style="text-align: center; padding: 2rem; background: var(--card-background-color); border-radius: 5px; margin-top: 1rem;">
<h3>В этой книге пока нет глав</h3>
<p>Создайте первую главу для вашей книги</p>
<a href="<?= SITE_URL ?>/books/<?= $book['id'] ?>/chapters/create" class="adaptive-button">📝 Создать первую главу</a>
</div>
<?php else: ?>
<div style="overflow-x: auto; margin-top: 1rem;">
<table class="compact-table">
<thead>
<tr>
<th style="width: 5%;">№</th>
<th style="width: 40%;">Название главы</th>
<th style="width: 15%;">Статус</th>
<th style="width: 10%;">Слов</th>
<th style="width: 20%;">Обновлено</th>
<th style="width: 10%;">Действия</th>
</tr>
</thead>
<tbody>
<?php foreach ($chapters as $index => $chapter): ?>
<tr>
<td><?= $index + 1 ?></td>
<td>
<strong><?= e($chapter['title']) ?></strong>
<?php if ($chapter['content']): ?>
<br><small style="color: var(--muted-color);"><?= e(mb_strimwidth($chapter['content'], 0, 100, '...')) ?></small>
<?php endif; ?>
</td>
<td>
<span style="color: <?= $chapter['status'] == 'published' ? 'green' : 'orange' ?>">
<?= $chapter['status'] == 'published' ? '✅ Опубликована' : '📝 Черновик' ?>
</span>
</td>
<td><?= $chapter['word_count'] ?></td>
<td>
<small><?= date('d.m.Y H:i', strtotime($chapter['updated_at'])) ?></small>
</td>
<td>
<div style="display: flex; gap: 3px; flex-wrap: wrap;">
<a href="<?= SITE_URL ?>/chapters/<?= $chapter['id'] ?>/edit" class="compact-button secondary" title="Редактировать" role="button">
✏️
</a>
<form method="post" action="<?= SITE_URL ?>/chapters/<?= $chapter['id'] ?>/delete" style="display: inline;" onsubmit="return confirm('Вы уверены, что хотите удалить эту главу? Это действие нельзя отменить.');">
<input type="hidden" name="csrf_token" value="<?= generate_csrf_token() ?>">
<button type="submit" class="compact-button secondary" style="background: #ff4444; border-color: #ff4444; color: white;" title="Удалить">
🗑️
</button>
</form>
</div>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<div style="margin-top: 1rem; padding: 0.5rem; background: var(--card-background-color); border-radius: 3px;">
<strong>Статистика:</strong>
Всего глав: <?= count($chapters) ?> |
Всего слов: <?= array_sum(array_column($chapters, 'word_count')) ?> |
Опубликовано: <?= count(array_filter($chapters, function($ch) { return $ch['status'] == 'published'; })) ?>
</div>
<?php endif; ?>
<?php include 'views/layouts/footer.php'; ?>
views/chapters/preview.php
+81 -46
View File
@@ -4,104 +4,139 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= e($page_title) ?></title>
<link rel="stylesheet" href="<?= SITE_URL ?>/assets/css/pico.min.css">
<link rel="stylesheet" href="<?= SITE_URL ?>/assets/css/style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<style>
body {
padding: 20px;
max-width: 800px;
margin: 0 auto;
background-color: #f8f9fa;
line-height: 1.6;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.content {
margin-top: 2rem;
.preview-container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1, h2, h3, h4, h5, h6 {
.chapter-header {
border-bottom: 3px solid var(--bs-primary);
padding-bottom: 1rem;
margin-bottom: 2rem;
}
.chapter-content {
font-size: 1.1em;
}
.chapter-content h1, .chapter-content h2, .chapter-content h3 {
margin-top: 1.5em;
margin-bottom: 0.5em;
}
h1 { border-bottom: 2px solid var(--primary); padding-bottom: 0.3em; }
h2 { border-bottom: 1px solid var(--border-color); padding-bottom: 0.3em; }
p {
.chapter-content h1 {
border-bottom: 2px solid var(--bs-primary);
padding-bottom: 0.3em;
}
.chapter-content h2 {
border-bottom: 1px solid var(--bs-border-color);
padding-bottom: 0.3em;
}
.chapter-content p {
margin-bottom: 1em;
text-align: justify;
}
code {
background: var(--card-background-color);
.chapter-content code {
background: var(--bs-light);
padding: 2px 4px;
border-radius: 3px;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}
pre {
background: var(--card-background-color);
.chapter-content pre {
background: var(--bs-dark);
color: var(--bs-light);
padding: 1rem;
border-radius: 5px;
overflow-x: auto;
border-left: 4px solid var(--primary);
border-left: 4px solid var(--bs-primary);
}
pre code {
.chapter-content pre code {
background: none;
padding: 0;
display: block;
color: inherit;
}
blockquote {
border-left: 4px solid var(--border-color);
.chapter-content blockquote {
border-left: 4px solid var(--bs-border-color);
padding-left: 1rem;
margin-left: 0;
color: var(--muted-color);
color: var(--bs-secondary);
font-style: italic;
background: var(--bs-light);
padding: 1rem;
border-radius: 0 0.5rem 0.5rem 0;
}
strong { font-weight: bold; }
em { font-style: italic; }
u { text-decoration: underline; }
del { text-decoration: line-through; }
.dialogue {
.chapter-content strong { font-weight: bold; }
.chapter-content em { font-style: italic; }
.chapter-content u { text-decoration: underline; }
.chapter-content del { text-decoration: line-through; }
.chapter-content .dialogue {
margin-left: 2rem;
font-style: italic;
color: #2c5aa0;
}
table {
.chapter-content table {
border-collapse: collapse;
width: 100%;
margin: 1rem 0;
}
table, th, td {
border: 1px solid var(--border-color);
.chapter-content table, .chapter-content th, .chapter-content td {
border: 1px solid var(--bs-border-color);
}
th, td {
.chapter-content th, .chapter-content td {
padding: 8px 12px;
text-align: left;
}
th {
background: var(--card-background-color);
.chapter-content th {
background: var(--bs-light);
}
ul, ol {
.chapter-content ul, .chapter-content ol {
margin-bottom: 1rem;
padding-left: 2rem;
}
li {
.chapter-content li {
margin-bottom: 0.3rem;
}
img {
.chapter-content img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<header>
<h1><?= e($title) ?></h1>
<hr>
</header>
<main class="content">
<?= $content ?>
</main>
<footer style="margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--border-color);">
<small>Сгенерировано <?= date('d.m.Y H:i') ?> | Предпросмотр</small>
<br>
<a href="javascript:window.close()" class="button secondary">Закрыть</a>
<a href="javascript:window.print()" class="button">Печать</a>
</footer>
<div class="preview-container">
<header class="chapter-header text-center">
<h1 class="display-6"><?= e($title) ?></h1>
</header>
<main class="chapter-content">
<?= $content ?>
</main>
<footer class="mt-5 pt-4 border-top text-center">
<div class="d-flex justify-content-center gap-2 flex-wrap">
<button onclick="window.print()" class="btn btn-primary">
<i class="bi bi-printer"></i> Печать
</button>
<button onclick="window.close()" class="btn btn-outline-secondary">
<i class="bi bi-x-circle"></i> Закрыть
</button>
</div>
<p class="text-muted mt-3 small">
Сгенерировано <?= date('d.m.Y H:i') ?> | Предпросмотр
</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>