mirror of
https://forge.chapril.org/tykayn/book_generator
synced 2025-06-20 01:34:43 +02:00
ajout app flask pour prévisualiser le livre
This commit is contained in:
Tykayn
tykayn
parent
375fbb3a7a
commit
9f1b265a21
29 changed files with 4533 additions and 137 deletions
|
|
@ -5,26 +5,127 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Éditeur de Livre</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<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="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>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<!-- Sidebar -->
|
||||
<div class="col-md-2 sidebar">
|
||||
<h4>Statistiques</h4>
|
||||
<!-- É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>Mots aujourd'hui</h5>
|
||||
<p id="words-today" class="h3">{{ words_today }}</p>
|
||||
<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>
|
||||
|
||||
|
|
@ -39,19 +140,97 @@
|
|||
|
||||
<!-- Preview panel -->
|
||||
<div class="col-md-5 preview-panel">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h2>Prévisualisation</h2>
|
||||
<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>
|
||||
</div>
|
||||
<div id="preview-content" class="preview-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- 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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue