mirror of
https://forge.chapril.org/tykayn/book_generator
synced 2025-06-20 01:34:43 +02:00
237 lines
No EOL
10 KiB
HTML
237 lines
No EOL
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Éditeur de Livre</title>
|
|
<link href="{{ url_for('static', filename='css/lib/bootstrap.min.css') }}" rel="stylesheet">
|
|
<link href="{{ url_for('static', filename='css/lib/bootstrap-icons.min.css') }}" rel="stylesheet">
|
|
<link href="{{ url_for('static', filename='css/lib/fontawesome.min.css') }}" rel="stylesheet">
|
|
<link href="{{ url_for('static', filename='css/lib/codemirror.min.css') }}" rel="stylesheet">
|
|
<link href="{{ url_for('static', filename='css/lib/monokai.min.css') }}" rel="stylesheet">
|
|
<link href="{{ url_for('static', filename='css/lib/eclipse.min.css') }}" rel="stylesheet">
|
|
<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<!-- Sidebar -->
|
|
<div class="col-md-2 sidebar">
|
|
<!-- Éléments cachés pour stocker les données -->
|
|
<div id="characters-data" style="display: none;"></div>
|
|
<div id="plots-data" style="display: none;"></div>
|
|
|
|
<div class="word-count">
|
|
<h5>Compteur de mots</h5>
|
|
<p>Aujourd'hui : <span id="words-today">0</span> mots</p>
|
|
<div class="progress">
|
|
<div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%"></div>
|
|
</div>
|
|
<p id="progress-text">0% de l'objectif</p>
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text">Objectif</span>
|
|
<input type="number" class="form-control" id="word-goal" value="400">
|
|
</div>
|
|
<div class="progress-chart-container" style="height: 200px;">
|
|
<canvas id="progressChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comment-section mb-3">
|
|
<button id="add-comment-btn" class="btn btn-outline-primary w-100 mb-2">
|
|
<i class="bi bi-chat-square-text"></i> Ajouter un commentaire
|
|
</button>
|
|
<div class="d-flex gap-2">
|
|
<button id="move-up-btn" class="btn btn-outline-secondary flex-grow-1">
|
|
<i class="bi bi-arrow-up"></i> Déplacer vers le haut
|
|
</button>
|
|
<button id="move-down-btn" class="btn btn-outline-secondary flex-grow-1">
|
|
<i class="bi bi-arrow-down"></i> Déplacer vers le bas
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navigation-section">
|
|
<h5>Navigation</h5>
|
|
<ul class="list-group">
|
|
<li class="list-group-item">
|
|
<a href="#" class="book-link" data-type="book">Livre</a>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<a href="#" class="characters-file-link" data-type="characters">Personnages</a>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<a href="#" class="plots-file-link" data-type="plots">Intrigues</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="characters-section">
|
|
<h5>Personnages</h5>
|
|
<div class="characters-toc"></div>
|
|
<ul class="list-group">
|
|
{% for character in characters %}
|
|
<li class="list-group-item">
|
|
<a href="#" class="character-link" data-type="character" data-name="{{ character.name }}">{{
|
|
character.name }}</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="plots-section">
|
|
<h5>Intrigues</h5>
|
|
<div class="plots-toc"></div>
|
|
</div>
|
|
|
|
<div class="table-of-contents">
|
|
<h5>Table des matières</h5>
|
|
<ul class="toc-list"></ul>
|
|
</div>
|
|
|
|
<div class="filters mb-3">
|
|
<h5>Options</h5>
|
|
<div class="theme-switch">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="theme-switch">
|
|
<label class="form-check-label" for="theme-switch">Thème sombre</label>
|
|
</div>
|
|
</div>
|
|
<h6>Prévisualisation</h6>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="auto-preview" checked>
|
|
<label class="form-check-label" for="auto-preview">Mise à jour automatique</label>
|
|
</div>
|
|
<h5>Filtres</h5>
|
|
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="show-titles" checked>
|
|
<label class="form-check-label" for="show-titles">Montrer les titres avec le tag :titre:</label>
|
|
<i class="bi bi-info-circle info-icon" data-bs-toggle="tooltip" data-bs-placement="right"
|
|
title="Affiche ou masque les titres qui contiennent :titre: ou :title: dans leur contenu"></i>
|
|
</div>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="checkbox" id="show-regular-titles">
|
|
<label class="form-check-label" for="show-regular-titles">Montrer les titres d'intrigue</label>
|
|
<i class="bi bi-info-circle info-icon" data-bs-toggle="tooltip" data-bs-placement="right"
|
|
title="Affiche ou masque les titres qui ne contiennent pas :titre: ou :title: dans leur contenu"></i>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="show-comments">
|
|
<label class="form-check-label" for="show-comments">Commentaires</label>
|
|
<i class="bi bi-info-circle info-icon" data-bs-toggle="tooltip" data-bs-placement="right"
|
|
title="Affiche ou masque les commentaires (lignes commençant par # et blocs entre #+BEGIN_COMMENT et #+END_COMMENT)"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main content -->
|
|
<div class="col-md-5 editor">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h2>Éditeur de Livre</h2>
|
|
<button id="update-btn" class="btn btn-primary">Mettre à jour</button>
|
|
</div>
|
|
<textarea id="editor-content">{{ content }}</textarea>
|
|
</div>
|
|
|
|
<!-- Preview panel -->
|
|
<div class="col-md-5 preview-panel">
|
|
<div id="preview-content" class="preview-content"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal pour les personnages -->
|
|
<div class="modal fade" id="characterModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Personnage</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label for="character-name" class="form-label">Nom</label>
|
|
<input type="text" class="form-control" id="character-name">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="character-content" class="form-label">Contenu</label>
|
|
<textarea class="form-control" id="character-content" rows="10"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
|
|
<button type="button" class="btn btn-primary" id="save-character">Enregistrer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal pour les intrigues -->
|
|
<div class="modal fade" id="plotModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Intrigue</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label for="plot-name" class="form-label">Nom</label>
|
|
<input type="text" class="form-control" id="plot-name">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="plot-content" class="form-label">Contenu</label>
|
|
<textarea class="form-control" id="plot-content" rows="10"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
|
|
<button type="button" class="btn btn-primary" id="save-plot">Enregistrer</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="{{ url_for('static', filename='js/lib/bootstrap.bundle.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/lib/chart.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/lib/codemirror.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/lib/xml.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/lib/javascript.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/lib/css.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/lib/markdown.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/lib/commonlisp.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/lib/scheme.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/mode/org.js') }}"></script>
|
|
<script>
|
|
// Passer les données des personnages et des intrigues au JavaScript
|
|
document.getElementById('characters-data').textContent = JSON.stringify({{ characters| tojson | safe }});
|
|
document.getElementById('plots-data').textContent = JSON.stringify({{ plots| tojson | safe }});
|
|
|
|
document.getElementById('update-btn').addEventListener('click', async () => {
|
|
const content = document.getElementById('editor-content').value;
|
|
const editorTitle = document.querySelector('.editor h2').textContent;
|
|
try {
|
|
const response = await fetch('/update', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: `content=${encodeURIComponent(content)}&editor_title=${encodeURIComponent(editorTitle)}`
|
|
});
|
|
if (response.ok) {
|
|
alert('Contenu mis à jour avec succès !');
|
|
}
|
|
} catch (error) {
|
|
alert('Erreur lors de la mise à jour');
|
|
}
|
|
});
|
|
</script>
|
|
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
|
</body>
|
|
|
|
</html> |