Update templates/svt.html
Browse files- templates/svt.html +18 -4
templates/svt.html
CHANGED
|
@@ -67,6 +67,20 @@
|
|
| 67 |
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
| 68 |
gap: 1rem;
|
| 69 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 70 |
</style>
|
| 71 |
</head>
|
| 72 |
<body class="min-h-screen flex items-center justify-center p-4 md:p-8">
|
|
@@ -364,7 +378,7 @@
|
|
| 364 |
}
|
| 365 |
|
| 366 |
const responseList = document.createElement('ul');
|
| 367 |
-
responseList.className = '
|
| 368 |
|
| 369 |
responses.forEach(response => {
|
| 370 |
const listItem = document.createElement('li');
|
|
@@ -380,19 +394,19 @@
|
|
| 380 |
response.images.forEach(imageData => {
|
| 381 |
const img = document.createElement('img');
|
| 382 |
img.src = imageData;
|
| 383 |
-
img.className = 'h-
|
| 384 |
img.onclick = () => previewImage(imageData);
|
| 385 |
previewContainer.appendChild(img);
|
| 386 |
});
|
| 387 |
listItem.appendChild(previewContainer);
|
| 388 |
|
| 389 |
const responsePreview = document.createElement('p');
|
| 390 |
-
responsePreview.className = 'text-gray-600';
|
| 391 |
responsePreview.textContent = response.response.substring(0, 200) + (response.response.length > 200 ? '...' : '');
|
| 392 |
listItem.appendChild(responsePreview);
|
| 393 |
|
| 394 |
const viewButton = document.createElement('button');
|
| 395 |
-
viewButton.className = 'bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg mt-2';
|
| 396 |
viewButton.textContent = 'Voir';
|
| 397 |
viewButton.onclick = () => {
|
| 398 |
document.getElementById('response').innerHTML = marked.parse(response.response);
|
|
|
|
| 67 |
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
| 68 |
gap: 1rem;
|
| 69 |
}
|
| 70 |
+
|
| 71 |
+
/* Responsive adjustments */
|
| 72 |
+
@media (max-width: 640px) {
|
| 73 |
+
.preview-container {
|
| 74 |
+
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
| 75 |
+
}
|
| 76 |
+
.image-preview img {
|
| 77 |
+
height: 32 object-cover;
|
| 78 |
+
}
|
| 79 |
+
#historyContainer .grid {
|
| 80 |
+
grid-template-columns: repeat(1, minmax(0, 1fr));
|
| 81 |
+
}
|
| 82 |
+
}
|
| 83 |
+
|
| 84 |
</style>
|
| 85 |
</head>
|
| 86 |
<body class="min-h-screen flex items-center justify-center p-4 md:p-8">
|
|
|
|
| 378 |
}
|
| 379 |
|
| 380 |
const responseList = document.createElement('ul');
|
| 381 |
+
responseList.className = 'grid gap-4 md:grid-cols-2';
|
| 382 |
|
| 383 |
responses.forEach(response => {
|
| 384 |
const listItem = document.createElement('li');
|
|
|
|
| 394 |
response.images.forEach(imageData => {
|
| 395 |
const img = document.createElement('img');
|
| 396 |
img.src = imageData;
|
| 397 |
+
img.className = 'h-12 w-12 object-cover rounded-md cursor-pointer';
|
| 398 |
img.onclick = () => previewImage(imageData);
|
| 399 |
previewContainer.appendChild(img);
|
| 400 |
});
|
| 401 |
listItem.appendChild(previewContainer);
|
| 402 |
|
| 403 |
const responsePreview = document.createElement('p');
|
| 404 |
+
responsePreview.className = 'text-gray-600 text-sm';
|
| 405 |
responsePreview.textContent = response.response.substring(0, 200) + (response.response.length > 200 ? '...' : '');
|
| 406 |
listItem.appendChild(responsePreview);
|
| 407 |
|
| 408 |
const viewButton = document.createElement('button');
|
| 409 |
+
viewButton.className = 'bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg mt-2 text-sm';
|
| 410 |
viewButton.textContent = 'Voir';
|
| 411 |
viewButton.onclick = () => {
|
| 412 |
document.getElementById('response').innerHTML = marked.parse(response.response);
|