Update templates/index.html
Browse files- templates/index.html +106 -9
templates/index.html
CHANGED
|
@@ -43,10 +43,16 @@
|
|
| 43 |
background-color: #EEF2FF;
|
| 44 |
}
|
| 45 |
|
| 46 |
-
/*
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 47 |
.markdown-content table {
|
| 48 |
border-collapse: collapse;
|
| 49 |
-
width: 100%;
|
|
|
|
| 50 |
margin: 1rem 0;
|
| 51 |
}
|
| 52 |
|
|
@@ -55,14 +61,70 @@
|
|
| 55 |
border: 1px solid #e5e7eb;
|
| 56 |
padding: 0.75rem;
|
| 57 |
text-align: left;
|
|
|
|
|
|
|
| 58 |
}
|
| 59 |
|
| 60 |
.markdown-content th {
|
| 61 |
background-color: #f9fafb;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 62 |
}
|
| 63 |
</style>
|
| 64 |
</head>
|
| 65 |
<body class="bg-gray-50">
|
|
|
|
| 66 |
<div class="min-h-screen">
|
| 67 |
<!-- Header -->
|
| 68 |
<header class="bg-white shadow-sm">
|
|
@@ -130,7 +192,7 @@
|
|
| 130 |
</div>
|
| 131 |
|
| 132 |
<script>
|
| 133 |
-
let tableauContent = '';
|
| 134 |
|
| 135 |
function updateFileName() {
|
| 136 |
const input = document.getElementById('imageInput');
|
|
@@ -142,13 +204,53 @@
|
|
| 142 |
}
|
| 143 |
}
|
| 144 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 145 |
document.getElementById('showTableau').addEventListener('click', () => {
|
| 146 |
Swal.fire({
|
| 147 |
title: 'Tableau d\'analyse',
|
| 148 |
html: marked.parse(tableauContent),
|
| 149 |
-
width: '
|
| 150 |
customClass: {
|
| 151 |
htmlContainer: 'markdown-content'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 152 |
}
|
| 153 |
});
|
| 154 |
});
|
|
@@ -175,13 +277,8 @@
|
|
| 175 |
const data = await response.json();
|
| 176 |
|
| 177 |
if (response.ok) {
|
| 178 |
-
// Stocker le tableau pour l'affichage ultérieur
|
| 179 |
tableauContent = data.tableau;
|
| 180 |
-
|
| 181 |
-
// Afficher la dissertation
|
| 182 |
dissertationResult.innerHTML = marked.parse(data.dissertation);
|
| 183 |
-
|
| 184 |
-
// Afficher la section des résultats avec animation
|
| 185 |
results.classList.remove('hidden');
|
| 186 |
results.classList.add('fade-in');
|
| 187 |
} else {
|
|
|
|
| 43 |
background-color: #EEF2FF;
|
| 44 |
}
|
| 45 |
|
| 46 |
+
/* Styles améliorés pour le tableau avec scroll horizontal */
|
| 47 |
+
.markdown-content {
|
| 48 |
+
overflow-x: auto;
|
| 49 |
+
padding-bottom: 1rem; /* Espace pour la scrollbar */
|
| 50 |
+
}
|
| 51 |
+
|
| 52 |
.markdown-content table {
|
| 53 |
border-collapse: collapse;
|
| 54 |
+
min-width: 100%;
|
| 55 |
+
width: max-content; /* Permet au tableau de dépasser si nécessaire */
|
| 56 |
margin: 1rem 0;
|
| 57 |
}
|
| 58 |
|
|
|
|
| 61 |
border: 1px solid #e5e7eb;
|
| 62 |
padding: 0.75rem;
|
| 63 |
text-align: left;
|
| 64 |
+
white-space: nowrap; /* Empêche le retour à la ligne */
|
| 65 |
+
min-width: 150px; /* Largeur minimum pour chaque cellule */
|
| 66 |
}
|
| 67 |
|
| 68 |
.markdown-content th {
|
| 69 |
background-color: #f9fafb;
|
| 70 |
+
position: sticky;
|
| 71 |
+
top: 0;
|
| 72 |
+
z-index: 10;
|
| 73 |
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
| 74 |
+
}
|
| 75 |
+
|
| 76 |
+
/* Style pour la scrollbar horizontale */
|
| 77 |
+
.markdown-content::-webkit-scrollbar {
|
| 78 |
+
height: 8px;
|
| 79 |
+
}
|
| 80 |
+
|
| 81 |
+
.markdown-content::-webkit-scrollbar-track {
|
| 82 |
+
background: #f1f1f1;
|
| 83 |
+
border-radius: 4px;
|
| 84 |
+
}
|
| 85 |
+
|
| 86 |
+
.markdown-content::-webkit-scrollbar-thumb {
|
| 87 |
+
background: #6366F1;
|
| 88 |
+
border-radius: 4px;
|
| 89 |
+
}
|
| 90 |
+
|
| 91 |
+
.markdown-content::-webkit-scrollbar-thumb:hover {
|
| 92 |
+
background: #4F46E5;
|
| 93 |
+
}
|
| 94 |
+
|
| 95 |
+
/* Styles pour SweetAlert2 */
|
| 96 |
+
.swal2-popup {
|
| 97 |
+
width: 90% !important;
|
| 98 |
+
max-width: 1200px !important;
|
| 99 |
+
}
|
| 100 |
+
|
| 101 |
+
.swal2-html-container {
|
| 102 |
+
max-height: 80vh !important;
|
| 103 |
+
overflow-y: auto !important;
|
| 104 |
+
}
|
| 105 |
+
|
| 106 |
+
/* Indicateur de défilement */
|
| 107 |
+
.scroll-indicator {
|
| 108 |
+
position: absolute;
|
| 109 |
+
bottom: 20px;
|
| 110 |
+
right: 20px;
|
| 111 |
+
background: rgba(99, 102, 241, 0.9);
|
| 112 |
+
color: white;
|
| 113 |
+
padding: 8px 12px;
|
| 114 |
+
border-radius: 4px;
|
| 115 |
+
font-size: 0.875rem;
|
| 116 |
+
opacity: 0;
|
| 117 |
+
transition: opacity 0.3s ease;
|
| 118 |
+
pointer-events: none;
|
| 119 |
+
}
|
| 120 |
+
|
| 121 |
+
.scroll-indicator.visible {
|
| 122 |
+
opacity: 1;
|
| 123 |
}
|
| 124 |
</style>
|
| 125 |
</head>
|
| 126 |
<body class="bg-gray-50">
|
| 127 |
+
<!-- [Le reste du HTML reste identique jusqu'au script] -->
|
| 128 |
<div class="min-h-screen">
|
| 129 |
<!-- Header -->
|
| 130 |
<header class="bg-white shadow-sm">
|
|
|
|
| 192 |
</div>
|
| 193 |
|
| 194 |
<script>
|
| 195 |
+
let tableauContent = '';
|
| 196 |
|
| 197 |
function updateFileName() {
|
| 198 |
const input = document.getElementById('imageInput');
|
|
|
|
| 204 |
}
|
| 205 |
}
|
| 206 |
|
| 207 |
+
function showScrollIndicator(container) {
|
| 208 |
+
if (container.scrollWidth > container.clientWidth) {
|
| 209 |
+
const indicator = document.createElement('div');
|
| 210 |
+
indicator.className = 'scroll-indicator visible';
|
| 211 |
+
indicator.textContent = '← Faites défiler →';
|
| 212 |
+
container.parentElement.appendChild(indicator);
|
| 213 |
+
|
| 214 |
+
setTimeout(() => {
|
| 215 |
+
indicator.classList.remove('visible');
|
| 216 |
+
}, 3000);
|
| 217 |
+
|
| 218 |
+
container.addEventListener('scroll', () => {
|
| 219 |
+
if (container.scrollLeft > 0) {
|
| 220 |
+
indicator.classList.add('visible');
|
| 221 |
+
} else {
|
| 222 |
+
indicator.classList.remove('visible');
|
| 223 |
+
}
|
| 224 |
+
|
| 225 |
+
// Cache l'indicateur après 1 seconde de scroll
|
| 226 |
+
clearTimeout(container.scrollTimeout);
|
| 227 |
+
container.scrollTimeout = setTimeout(() => {
|
| 228 |
+
indicator.classList.remove('visible');
|
| 229 |
+
}, 1000);
|
| 230 |
+
});
|
| 231 |
+
}
|
| 232 |
+
}
|
| 233 |
+
|
| 234 |
document.getElementById('showTableau').addEventListener('click', () => {
|
| 235 |
Swal.fire({
|
| 236 |
title: 'Tableau d\'analyse',
|
| 237 |
html: marked.parse(tableauContent),
|
| 238 |
+
width: '90%',
|
| 239 |
customClass: {
|
| 240 |
htmlContainer: 'markdown-content'
|
| 241 |
+
},
|
| 242 |
+
didRender: () => {
|
| 243 |
+
const container = document.querySelector('.markdown-content');
|
| 244 |
+
showScrollIndicator(container);
|
| 245 |
+
|
| 246 |
+
// Ajout des ombres de défilement
|
| 247 |
+
container.addEventListener('scroll', () => {
|
| 248 |
+
const maxScroll = container.scrollWidth - container.clientWidth;
|
| 249 |
+
container.style.boxShadow = container.scrollLeft > 0 ?
|
| 250 |
+
'inset 10px 0 5px -5px rgba(0,0,0,0.1)' : '';
|
| 251 |
+
container.style.boxShadow += container.scrollLeft < maxScroll ?
|
| 252 |
+
', inset -10px 0 5px -5px rgba(0,0,0,0.1)' : '';
|
| 253 |
+
});
|
| 254 |
}
|
| 255 |
});
|
| 256 |
});
|
|
|
|
| 277 |
const data = await response.json();
|
| 278 |
|
| 279 |
if (response.ok) {
|
|
|
|
| 280 |
tableauContent = data.tableau;
|
|
|
|
|
|
|
| 281 |
dissertationResult.innerHTML = marked.parse(data.dissertation);
|
|
|
|
|
|
|
| 282 |
results.classList.remove('hidden');
|
| 283 |
results.classList.add('fade-in');
|
| 284 |
} else {
|