135 lines
5.1 KiB
HTML
135 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>Novela — Book Builder{% if view == 'editor' %}: {{ draft.title }}{% endif %}</title>
|
|
<link rel="icon" href="/static/favicon.ico" sizes="16x16"/>
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32.png"/>
|
|
<link rel="icon" type="image/png" sizes="256x256" href="/static/favicon-256.png"/>
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png"/>
|
|
<link rel="stylesheet" href="/static/theme.css"/>
|
|
<link rel="stylesheet" href="/static/library.css"/>
|
|
<link rel="stylesheet" href="/static/sidebar.css"/>
|
|
<link rel="stylesheet" href="/static/builder.css"/>
|
|
</head>
|
|
<body>
|
|
|
|
{% include "_sidebar.html" %}
|
|
|
|
<div class="builder-wrap">
|
|
|
|
{% if view == 'index' %}
|
|
<div class="builder-index">
|
|
<div class="builder-index-header">
|
|
<h1 class="builder-index-title">Book Builder</h1>
|
|
</div>
|
|
|
|
<div class="builder-create-card">
|
|
<div class="builder-create-title">Nieuw boek</div>
|
|
<form method="post" action="/builder" class="builder-create-form">
|
|
<div class="bc-row">
|
|
<label class="bc-label">Titel <span class="bc-required">*</span></label>
|
|
<input class="bc-input" type="text" name="title" required placeholder="Boektitel" autocomplete="off"/>
|
|
</div>
|
|
<div class="bc-row">
|
|
<label class="bc-label">Auteur <span class="bc-required">*</span></label>
|
|
<input class="bc-input" type="text" name="author" required placeholder="Voornaam Achternaam" autocomplete="off"/>
|
|
</div>
|
|
<div class="bc-row">
|
|
<label class="bc-label">Publisher</label>
|
|
<input class="bc-input" type="text" name="publisher" placeholder="Optioneel" autocomplete="off"/>
|
|
</div>
|
|
<div class="bc-row">
|
|
<label class="bc-label">Source URL</label>
|
|
<input class="bc-input" type="url" name="source_url" placeholder="https://…" autocomplete="off"/>
|
|
</div>
|
|
<div class="bc-actions">
|
|
<button class="btn-primary" type="submit">Aanmaken</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{% if drafts %}
|
|
<div class="builder-drafts-section">
|
|
<div class="builder-drafts-label">Openstaande drafts</div>
|
|
<div class="builder-drafts-list">
|
|
{% for d in drafts %}
|
|
<div class="draft-card">
|
|
<a class="draft-card-title" href="/builder/{{ d.id }}">{{ d.title }}</a>
|
|
<div class="draft-card-meta">{{ d.author }} · {{ d.updated_at.strftime('%d %b %Y %H:%M') }}</div>
|
|
<button class="draft-card-delete" data-id="{{ d.id }}" title="Draft verwijderen">✕</button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% elif view == 'editor' %}
|
|
<div class="builder-editor" id="builder-editor">
|
|
|
|
<div class="builder-header">
|
|
<a class="builder-back" href="/builder">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
|
<polyline points="15 18 9 12 15 6"/>
|
|
</svg>
|
|
Drafts
|
|
</a>
|
|
<div class="builder-header-title">{{ draft.title }}</div>
|
|
<div class="builder-header-actions">
|
|
<span class="save-status" id="save-status"></span>
|
|
<button class="btn-publish" id="btn-publish" onclick="publishDraft()">Publiceer als EPUB</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="builder-toolbar" id="builder-toolbar">
|
|
<button class="tb-btn" data-cmd="bold" title="Vet (Ctrl+B)"><strong>B</strong></button>
|
|
<button class="tb-btn" data-cmd="italic" title="Cursief (Ctrl+I)"><em>I</em></button>
|
|
<button class="tb-btn" data-cmd="underline" title="Onderstrepen (Ctrl+U)"><u>U</u></button>
|
|
<div class="tb-sep"></div>
|
|
<button class="tb-btn" title="Citaat" onclick="wrapBlockquote('')">❝</button>
|
|
<button class="tb-btn" title="Auteur-noot" onclick="wrapBlockquote('author-note')">✍</button>
|
|
<div class="tb-sep"></div>
|
|
<button class="tb-btn" title="Scene break" onclick="insertBreak()">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="3" y1="12" x2="9" y2="12"/>
|
|
<circle cx="12" cy="12" r="2" fill="currentColor" stroke="none"/>
|
|
<line x1="15" y1="12" x2="21" y2="12"/>
|
|
</svg>
|
|
</button>
|
|
<div class="tb-sep"></div>
|
|
<button class="tb-btn tb-normalize" onclick="normalizeChapter()" title="Normaliseer huidige hoofdstuk">Normaliseer</button>
|
|
</div>
|
|
|
|
<div class="builder-body">
|
|
<nav class="builder-chapter-panel">
|
|
<div class="chapter-panel-title">Hoofdstukken</div>
|
|
<div class="chapter-list" id="chapter-list"></div>
|
|
<button class="btn-add-chapter" onclick="addChapter()">+ Hoofdstuk</button>
|
|
</nav>
|
|
<div class="builder-editor-pane">
|
|
<div
|
|
class="builder-content"
|
|
id="builder-content"
|
|
contenteditable="true"
|
|
spellcheck="true"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const BUILDER = {
|
|
draftId: {{ draft.id | tojson }},
|
|
title: {{ draft.title | tojson }},
|
|
chapters: {{ draft.chapters | tojson }},
|
|
};
|
|
</script>
|
|
<script src="/static/builder.js"></script>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|