ajout app flask pour prévisualiser le livre

static/css/lib/eclipse.min.css

@@ -0,0 +1 @@
+.cm-s-eclipse span.cm-meta{color:#ff1717}.cm-s-eclipse span.cm-keyword{line-height:1em;font-weight:700;color:#7f0055}.cm-s-eclipse span.cm-atom{color:#219}.cm-s-eclipse span.cm-number{color:#164}.cm-s-eclipse span.cm-def{color:#00f}.cm-s-eclipse span.cm-variable{color:#000}.cm-s-eclipse span.cm-variable-2{color:#0000c0}.cm-s-eclipse span.cm-type,.cm-s-eclipse span.cm-variable-3{color:#0000c0}.cm-s-eclipse span.cm-property{color:#000}.cm-s-eclipse span.cm-operator{color:#000}.cm-s-eclipse span.cm-comment{color:#3f7f5f}.cm-s-eclipse span.cm-string{color:#2a00ff}.cm-s-eclipse span.cm-string-2{color:#f50}.cm-s-eclipse span.cm-qualifier{color:#555}.cm-s-eclipse span.cm-builtin{color:#30a}.cm-s-eclipse span.cm-bracket{color:#cc7}.cm-s-eclipse span.cm-tag{color:#170}.cm-s-eclipse span.cm-attribute{color:#00c}.cm-s-eclipse span.cm-link{color:#219}.cm-s-eclipse span.cm-error{color:red}.cm-s-eclipse .CodeMirror-activeline-background{background:#e8f2ff}.cm-s-eclipse .CodeMirror-matchingbracket{outline:1px solid grey;color:#000!important}

static/css/lib/monokai.min.css

@@ -0,0 +1 @@
+.cm-s-monokai.CodeMirror{background:#272822;color:#f8f8f2}.cm-s-monokai div.CodeMirror-selected{background:#49483e}.cm-s-monokai .CodeMirror-line::selection,.cm-s-monokai .CodeMirror-line>span::selection,.cm-s-monokai .CodeMirror-line>span>span::selection{background:rgba(73,72,62,.99)}.cm-s-monokai .CodeMirror-line::-moz-selection,.cm-s-monokai .CodeMirror-line>span::-moz-selection,.cm-s-monokai .CodeMirror-line>span>span::-moz-selection{background:rgba(73,72,62,.99)}.cm-s-monokai .CodeMirror-gutters{background:#272822;border-right:0}.cm-s-monokai .CodeMirror-guttermarker{color:#fff}.cm-s-monokai .CodeMirror-guttermarker-subtle{color:#d0d0d0}.cm-s-monokai .CodeMirror-linenumber{color:#d0d0d0}.cm-s-monokai .CodeMirror-cursor{border-left:1px solid #f8f8f0}.cm-s-monokai span.cm-comment{color:#75715e}.cm-s-monokai span.cm-atom{color:#ae81ff}.cm-s-monokai span.cm-number{color:#ae81ff}.cm-s-monokai span.cm-comment.cm-attribute{color:#97b757}.cm-s-monokai span.cm-comment.cm-def{color:#bc9262}.cm-s-monokai span.cm-comment.cm-tag{color:#bc6283}.cm-s-monokai span.cm-comment.cm-type{color:#5998a6}.cm-s-monokai span.cm-attribute,.cm-s-monokai span.cm-property{color:#a6e22e}.cm-s-monokai span.cm-keyword{color:#f92672}.cm-s-monokai span.cm-builtin{color:#66d9ef}.cm-s-monokai span.cm-string{color:#e6db74}.cm-s-monokai span.cm-variable{color:#f8f8f2}.cm-s-monokai span.cm-variable-2{color:#9effff}.cm-s-monokai span.cm-type,.cm-s-monokai span.cm-variable-3{color:#66d9ef}.cm-s-monokai span.cm-def{color:#fd971f}.cm-s-monokai span.cm-bracket{color:#f8f8f2}.cm-s-monokai span.cm-tag{color:#f92672}.cm-s-monokai span.cm-header{color:#ae81ff}.cm-s-monokai span.cm-link{color:#ae81ff}.cm-s-monokai span.cm-error{background:#f92672;color:#f8f8f0}.cm-s-monokai .CodeMirror-activeline-background{background:#373831}.cm-s-monokai .CodeMirror-matchingbracket{text-decoration:underline;color:#fff!important}

static/css/style.css

@@ -7,6 +7,14 @@
   --preview-bg: #ffffff;
   --code-bg: #f8f9fa;
   --blockquote-color: #6c757d;
+  --link-color: #0d6efd;
+  --link-hover-color: #0a58ca;
+  --progress-bg: #e9ecef;
+  --progress-bar-bg: #0d6efd;
+  --title-bg: #e3f2fd;
+  --title-color: #1976d2;
+  --comment-bg: #f5f5f5;
+  --comment-color: #757575;
 }
 
 [data-theme="dark"] {
@@ -18,6 +26,14 @@
   --preview-bg: #2b3035;
   --code-bg: #343a40;
   --blockquote-color: #adb5bd;
+  --link-color: #6ea8fe;
+  --link-hover-color: #8bb9fe;
+  --progress-bg: #495057;
+  --progress-bar-bg: #6ea8fe;
+  --title-bg: #1a237e;
+  --title-color: #90caf9;
+  --comment-bg: #424242;
+  --comment-color: #bdbdbd;
 }
 
 body {
@@ -30,6 +46,7 @@ body {
   background-color: var(--sidebar-bg);
   padding: 20px;
   border-right: 1px solid var(--border-color);
+  overflow-y: auto;
 }
 
 .editor {
@@ -49,6 +66,142 @@ body {
   color: var(--text-color);
 }
 
+/* Styles pour CodeMirror */
+.CodeMirror {
+  height: calc(100vh - 100px);
+  font-family: monospace;
+  font-size: 14px;
+  line-height: 1.6;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+}
+
+.CodeMirror-scroll {
+  height: 100%;
+}
+
+.CodeMirror-gutters {
+  background-color: var(--sidebar-bg);
+  border-right: 1px solid var(--border-color);
+}
+
+.CodeMirror-linenumber {
+  color: var(--text-color);
+  opacity: 0.7;
+}
+
+.CodeMirror-cursor {
+  border-left: 2px solid var(--text-color);
+}
+
+/* Thème clair */
+[data-theme="light"] .CodeMirror {
+  background-color: var(--editor-bg);
+  color: var(--text-color);
+}
+
+[data-theme="light"] .cm-header-1 {
+  color: #1976d2;
+}
+
+[data-theme="light"] .cm-header-2 {
+  color: #2196f3;
+}
+
+[data-theme="light"] .cm-header-3 {
+  color: #42a5f5;
+}
+
+[data-theme="light"] .cm-header-4 {
+  color: #64b5f6;
+}
+
+[data-theme="light"] .cm-header-5 {
+  color: #90caf9;
+}
+
+[data-theme="light"] .cm-header-6 {
+  color: #bbdefb;
+}
+
+[data-theme="light"] .cm-comment {
+  color: #757575;
+}
+
+[data-theme="light"] .cm-keyword {
+  color: #7b1fa2;
+}
+
+[data-theme="light"] .cm-string {
+  color: #2e7d32;
+}
+
+[data-theme="light"] .cm-property {
+  color: #1976d2;
+}
+
+[data-theme="light"] .cm-variable {
+  color: #1976d2;
+}
+
+[data-theme="light"] .cm-number {
+  color: #f57c00;
+}
+
+/* Thème sombre */
+[data-theme="dark"] .CodeMirror {
+  background-color: var(--editor-bg);
+  color: var(--text-color);
+}
+
+[data-theme="dark"] .cm-header-1 {
+  color: #90caf9;
+}
+
+[data-theme="dark"] .cm-header-2 {
+  color: #64b5f6;
+}
+
+[data-theme="dark"] .cm-header-3 {
+  color: #42a5f5;
+}
+
+[data-theme="dark"] .cm-header-4 {
+  color: #2196f3;
+}
+
+[data-theme="dark"] .cm-header-5 {
+  color: #1976d2;
+}
+
+[data-theme="dark"] .cm-header-6 {
+  color: #1565c0;
+}
+
+[data-theme="dark"] .cm-comment {
+  color: #bdbdbd;
+}
+
+[data-theme="dark"] .cm-keyword {
+  color: #ce93d8;
+}
+
+[data-theme="dark"] .cm-string {
+  color: #81c784;
+}
+
+[data-theme="dark"] .cm-property {
+  color: #90caf9;
+}
+
+[data-theme="dark"] .cm-variable {
+  color: #90caf9;
+}
+
+[data-theme="dark"] .cm-number {
+  color: #ffb74d;
+}
+
 .word-count {
   background-color: var(--code-bg);
   padding: 15px;
@@ -56,6 +209,37 @@ body {
   margin-bottom: 20px;
 }
 
+.word-count .progress {
+  height: 8px;
+  background-color: var(--progress-bg);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.word-count .progress-bar {
+  background-color: var(--progress-bar-bg);
+  transition: width 0.3s ease;
+}
+
+.word-count input[type="number"] {
+  background-color: var(--editor-bg);
+  border-color: var(--border-color);
+  color: var(--text-color);
+}
+
+.word-count input[type="number"]:focus {
+  background-color: var(--editor-bg);
+  border-color: var(--link-color);
+  color: var(--text-color);
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+.word-count .input-group-text {
+  background-color: var(--code-bg);
+  border-color: var(--border-color);
+  color: var(--text-color);
+}
+
 .preview-panel {
   height: 100vh;
   padding: 20px;
@@ -124,9 +308,361 @@ body {
   margin: 1em 0;
 }
 
-.theme-switch {
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  z-index: 1000;
+
+/* Styles pour la table des matières */
+.table-of-contents {
+  margin-bottom: 20px;
+  padding: 15px;
+  background-color: var(--code-bg);
+  border-radius: 4px;
+}
+
+.table-of-contents h5 {
+  margin-bottom: 10px;
+  color: var(--text-color);
+}
+
+.toc-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.toc-item {
+  margin: 5px 0;
+}
+
+.toc-item a {
+  color: var(--link-color);
+  text-decoration: none;
+  display: block;
+  padding: 2px 0;
+  transition: color 0.2s;
+}
+
+.toc-item a:hover {
+  color: var(--link-hover-color);
+}
+
+.level-1 {
+  font-weight: bold;
+  margin-left: 0;
+}
+
+.level-2 {
+  margin-left: 15px;
+}
+
+.level-3 {
+  margin-left: 30px;
+  font-size: 0.9em;
+}
+
+.level-4 {
+  margin-left: 45px;
+  font-size: 0.85em;
+}
+
+.level-5 {
+  margin-left: 60px;
+  font-size: 0.8em;
+}
+
+/* Styles pour les titres et commentaires */
+.preview-content .title-section {
+  background-color: var(--title-bg);
+  color: var(--title-color);
+  padding: 10px 15px;
+  margin: 10px 0;
+  border-radius: 4px;
+  border-left: 4px solid var(--title-color);
+}
+
+.preview-content .comment-section {
+  background-color: var(--comment-bg);
+  color: var(--comment-color);
+  padding: 10px 15px;
+  margin: 10px 0;
+  border-radius: 4px;
+  border-left: 4px solid var(--comment-color);
+  font-style: italic;
+}
+
+.preview-content .hidden {
+  display: none;
+}
+
+/* Styles pour les filtres */
+.filters {
+  background-color: var(--code-bg);
+  padding: 15px;
+  border-radius: 4px;
+}
+
+.filters h5 {
+  margin-bottom: 10px;
+  color: var(--text-color);
+}
+
+.filters .form-check-label {
+  color: var(--text-color);
+}
+
+.filters .form-check {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.info-icon {
+  color: var(--text-color);
+  opacity: 0.7;
+  cursor: help;
+  font-size: 0.9em;
+  transition: opacity 0.2s;
+}
+
+.info-icon:hover,
+.info-icon:focus {
+  opacity: 1;
+}
+
+/* Styles pour les tooltips */
+.tooltip {
+  font-size: 0.875rem;
+}
+
+.tooltip-inner {
+  max-width: 300px;
+  padding: 0.5rem 1rem;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.tooltip.bs-tooltip-end .tooltip-arrow::before {
+  border-right-color: var(--border-color);
+}
+
+.tooltip.bs-tooltip-end .tooltip-arrow::after {
+  border-right-color: var(--bg-color);
+}
+
+.progress-chart {
+  background-color: var(--code-bg);
+  padding: 15px;
+  border-radius: 4px;
+  height: 200px;
+}
+
+.progress-chart h5 {
+  margin-bottom: 10px;
+  color: var(--text-color);
+}
+
+/* Styles pour le graphique en mode sombre */
+[data-theme="dark"] .progress-chart canvas {
+  filter: brightness(0.8) contrast(1.2);
+}
+
+/* Styles pour les sections de personnages et d'intrigues */
+.characters-section,
+.plots-section {
+  background-color: var(--code-bg);
+  padding: 15px;
+  border-radius: 4px;
+}
+
+.characters-section h5,
+.plots-section h5 {
+  margin-bottom: 10px;
+  color: var(--text-color);
+}
+
+.list-group-item {
+  background-color: var(--editor-bg);
+  border-color: var(--border-color);
+  color: var(--text-color);
+  transition: all 0.2s;
+}
+
+.list-group-item:hover {
+  background-color: var(--sidebar-bg);
+  border-color: var(--link-color);
+  color: var(--link-color);
+}
+
+/* Styles pour les modales */
+.modal-content {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+}
+
+.modal-header {
+  border-bottom-color: var(--border-color);
+}
+
+.modal-footer {
+  border-top-color: var(--border-color);
+}
+
+.modal .form-control {
+  background-color: var(--editor-bg);
+  border-color: var(--border-color);
+  color: var(--text-color);
+}
+
+.modal .form-control:focus {
+  background-color: var(--editor-bg);
+  border-color: var(--link-color);
+  color: var(--text-color);
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+.modal .btn-close {
+  filter: var(--btn-close-filter);
+}
+
+.characters-toc {
+  background-color: var(--bg-secondary);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.characters-toc h6 {
+  margin-bottom: 0.5rem;
+  color: var(--text-primary);
+}
+
+.word-count-badge {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  background-color: var(--bg-secondary);
+  font-size: 0.8em;
+}
+
+.plots-toc {
+  background-color: var(--bg-secondary);
+  padding: 1rem;
+  border-radius: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.plots-toc h6 {
+  margin-bottom: 0.5rem;
+  color: var(--text-primary);
+}
+
+.subplot-count-badge {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  background-color: var(--bg-secondary);
+  font-size: 0.8em;
+  color: var(--text-secondary);
+}
+
+.toc-list {
+  list-style: none;
+  padding-left: 1rem;
+}
+
+.toc-item {
+  margin: 0.5rem 0;
+}
+
+.toc-item a {
+  color: var(--text-primary);
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.toc-item a:hover {
+  color: var(--primary);
+}
+
+.level-1 {
+  margin-left: 0;
+}
+
+.level-2 {
+  margin-left: 1rem;
+}
+
+.level-3 {
+  margin-left: 2rem;
+}
+
+.level-4 {
+  margin-left: 3rem;
+}
+
+.level-5 {
+  margin-left: 4rem;
+}
+
+.regular-title {
+  color: #ccc;
+}
+
+.plots-file-link {
+  float: right;
+  font-size: 0.8em;
+  color: var(--text-secondary);
+  text-decoration: none;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  transition: all 0.2s ease;
+}
+
+.plots-file-link:hover {
+  color: var(--primary);
+  background-color: var(--bg-secondary);
+}
+
+.plots-section h5 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.comment-section {
+  margin-bottom: 1rem;
+}
+
+#add-comment-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  transition: all 0.2s ease;
+}
+
+#add-comment-btn:hover {
+  background-color: var(--bg-secondary);
+  color: var(--primary);
+}
+
+#add-comment-btn i {
+  font-size: 1.1em;
+}
+
+/* Styles pour les boutons désactivés */
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.btn:disabled:hover {
+  background-color: var(--bg-secondary);
+  color: var(--text-color);
 }