feat: add preview
This commit is contained in:
94
index.html
94
index.html
@@ -7,45 +7,67 @@
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Index of <span id="current-path">/</span></h1>
|
||||
|
||||
<!-- Formulaire de développement pour tester différentes URLs -->
|
||||
<div id="dev-form" class="dev-section">
|
||||
<h2>Mode Développement</h2>
|
||||
<form id="url-form">
|
||||
<label for="minio-url">URL MinIO à explorer :</label>
|
||||
<input type="text" id="minio-url" placeholder="https://mon-minio.example.com" />
|
||||
<div id="page-container">
|
||||
<!-- Header fixe -->
|
||||
<div id="header">
|
||||
<h1>Index of <span id="current-path">/</span></h1>
|
||||
|
||||
<button type="submit">Explorer</button>
|
||||
</form>
|
||||
<div id="config-info"></div>
|
||||
<!-- Formulaire de développement pour tester différentes URLs -->
|
||||
<div id="dev-form" class="dev-section">
|
||||
<h2>Mode Développement</h2>
|
||||
<form id="url-form">
|
||||
<label for="minio-url">URL MinIO à explorer :</label>
|
||||
<input type="text" id="minio-url" placeholder="https://mon-minio.example.com" />
|
||||
|
||||
<button type="submit">Explorer</button>
|
||||
</form>
|
||||
<div id="config-info"></div>
|
||||
</div>
|
||||
|
||||
<!-- Section d'erreur -->
|
||||
<div id="error-section" class="error" style="display: none;">
|
||||
<p id="error-message"></p>
|
||||
</div>
|
||||
|
||||
<!-- Loading indicator -->
|
||||
<div id="loading" style="display: none;">Chargement...</div>
|
||||
</div>
|
||||
|
||||
<!-- Container principal avec layout adaptatif -->
|
||||
<div id="main-container">
|
||||
<!-- Section de gauche/haut : tableau -->
|
||||
<div id="content-section">
|
||||
<!-- Tableau des fichiers et dossiers -->
|
||||
<table id="files-table" style="display: none;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nom</th>
|
||||
<th>Taille</th>
|
||||
<th>Date de modification</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="files-tbody">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Section de droite/bas : prévisualisation -->
|
||||
<div id="preview-section" style="display: none;">
|
||||
<div class="preview-header">
|
||||
<span class="preview-title" id="preview-title">Prévisualisation:</span>
|
||||
<button id="close-preview">✕</button>
|
||||
</div>
|
||||
<div class="preview-content" id="preview-content">
|
||||
<!-- Contenu dynamique selon le type de fichier -->
|
||||
</div>
|
||||
<div class="preview-actions">
|
||||
<button id="download-file">Télécharger</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section d'erreur -->
|
||||
<div id="error-section" class="error" style="display: none;">
|
||||
<p id="error-message"></p>
|
||||
</div>
|
||||
|
||||
<!-- Loading indicator -->
|
||||
<div id="loading" style="display: none;">Chargement...</div>
|
||||
|
||||
<!-- Tableau des fichiers et dossiers -->
|
||||
<table id="files-table" style="display: none;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nom</th>
|
||||
<th>Taille</th>
|
||||
<th>Date de modification</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="files-tbody">
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<hr>
|
||||
<address>MinIO Explorer</address>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
410
script.js
410
script.js
@@ -25,6 +25,10 @@ function setupEventListeners() {
|
||||
|
||||
// Gestion de la navigation arrière/avant du navigateur
|
||||
window.addEventListener('popstate', handlePopState);
|
||||
|
||||
// Gestionnaires pour la prévisualisation
|
||||
document.getElementById('close-preview').addEventListener('click', hidePreview);
|
||||
document.getElementById('download-file').addEventListener('click', downloadCurrentFile);
|
||||
}
|
||||
|
||||
function handlePopState(event) {
|
||||
@@ -309,6 +313,9 @@ function displayContents(contents) {
|
||||
|
||||
// Afficher le tableau
|
||||
document.getElementById('files-table').style.display = 'table';
|
||||
|
||||
// Chercher et ouvrir automatiquement index.rst s'il existe
|
||||
autoOpenIndexRst(contents.files);
|
||||
}
|
||||
|
||||
function createParentRow(parentPath) {
|
||||
@@ -360,7 +367,7 @@ function createFileRow(file) {
|
||||
row.innerHTML = `
|
||||
<td>
|
||||
<span class="icon-file"></span>
|
||||
<a href="${fileUrl}" class="file-link" target="_blank">${file.name}</a>
|
||||
<a href="#" class="file-link" data-file-url="${fileUrl}" data-file-name="${file.name}">${file.name}</a>
|
||||
</td>
|
||||
<td class="file-size">${formatFileSize(file.size)}</td>
|
||||
<td class="file-date">${formatDate(file.modified)}</td>
|
||||
@@ -369,6 +376,12 @@ function createFileRow(file) {
|
||||
</td>
|
||||
`;
|
||||
|
||||
const fileLink = row.querySelector('.file-link');
|
||||
fileLink.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
showPreview(fileUrl, file.name);
|
||||
});
|
||||
|
||||
const copyBtn = row.querySelector('.copy-btn');
|
||||
copyBtn.addEventListener('click', () => copyToClipboard(fileUrl));
|
||||
|
||||
@@ -419,4 +432,399 @@ async function copyToClipboard(text) {
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textArea);
|
||||
}
|
||||
}
|
||||
|
||||
// Variables globales pour la prévisualisation
|
||||
let currentPreviewFile = {
|
||||
url: '',
|
||||
name: ''
|
||||
};
|
||||
|
||||
function detectFileType(fileName) {
|
||||
const extension = fileName.toLowerCase().split('.').pop();
|
||||
|
||||
const fileTypes = {
|
||||
images: ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp'],
|
||||
text: ['txt', 'json', 'xml', 'csv', 'log'],
|
||||
code: ['js', 'css', 'html', 'htm', 'py', 'java', 'cpp', 'c', 'php', 'rb', 'go', 'rs', 'ts', 'jsx', 'tsx', 'vue', 'svelte', 'tex', 'latex'],
|
||||
markdown: ['md', 'markdown'],
|
||||
rst: ['rst', 'rest'],
|
||||
pdf: ['pdf'],
|
||||
video: ['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm', 'mkv'],
|
||||
audio: ['mp3', 'wav', 'ogg', 'aac', 'flac', 'm4a'],
|
||||
archive: ['zip', 'rar', '7z', 'tar', 'gz', 'bz2']
|
||||
};
|
||||
|
||||
for (const [type, extensions] of Object.entries(fileTypes)) {
|
||||
if (extensions.includes(extension)) {
|
||||
return type;
|
||||
}
|
||||
}
|
||||
|
||||
return 'unknown';
|
||||
}
|
||||
|
||||
function showPreview(fileUrl, fileName) {
|
||||
currentPreviewFile = { url: fileUrl, name: fileName };
|
||||
|
||||
const previewSection = document.getElementById('preview-section');
|
||||
const previewTitle = document.getElementById('preview-title');
|
||||
const previewContent = document.getElementById('preview-content');
|
||||
|
||||
previewTitle.textContent = `Prévisualisation: ${fileName}`;
|
||||
previewContent.innerHTML = '<div style="text-align: center; padding: 20px;">Chargement...</div>';
|
||||
|
||||
previewSection.style.display = 'flex';
|
||||
|
||||
const fileType = detectFileType(fileName);
|
||||
|
||||
switch (fileType) {
|
||||
case 'images':
|
||||
showImagePreview(fileUrl, previewContent);
|
||||
break;
|
||||
case 'text':
|
||||
case 'code':
|
||||
showTextPreview(fileUrl, previewContent);
|
||||
break;
|
||||
case 'markdown':
|
||||
showMarkdownPreview(fileUrl, previewContent);
|
||||
break;
|
||||
case 'rst':
|
||||
showRstPreview(fileUrl, previewContent);
|
||||
break;
|
||||
case 'pdf':
|
||||
showPdfPreview(fileUrl, previewContent);
|
||||
break;
|
||||
case 'video':
|
||||
showVideoPreview(fileUrl, previewContent);
|
||||
break;
|
||||
case 'audio':
|
||||
showAudioPreview(fileUrl, previewContent);
|
||||
break;
|
||||
default:
|
||||
showUnsupportedPreview(fileName, previewContent);
|
||||
}
|
||||
}
|
||||
|
||||
function showImagePreview(fileUrl, container) {
|
||||
const img = document.createElement('img');
|
||||
img.src = fileUrl;
|
||||
img.alt = 'Prévisualisation image';
|
||||
|
||||
img.onload = () => {
|
||||
container.innerHTML = '';
|
||||
container.appendChild(img);
|
||||
};
|
||||
|
||||
img.onerror = () => {
|
||||
container.innerHTML = '<div class="preview-error">Erreur: Impossible de charger l\'image</div>';
|
||||
};
|
||||
}
|
||||
|
||||
function showTextPreview(fileUrl, container) {
|
||||
fetch(fileUrl)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`Erreur HTTP: ${response.status}`);
|
||||
}
|
||||
return response.text();
|
||||
})
|
||||
.then(text => {
|
||||
const pre = document.createElement('pre');
|
||||
pre.textContent = text;
|
||||
container.innerHTML = '';
|
||||
container.appendChild(pre);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Erreur chargement texte:', error);
|
||||
container.innerHTML = '<div class="preview-error">Erreur: Impossible de charger le fichier texte</div>';
|
||||
});
|
||||
}
|
||||
|
||||
function showPdfPreview(fileUrl, container) {
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.src = fileUrl;
|
||||
iframe.style.width = '100%';
|
||||
iframe.style.height = '500px';
|
||||
|
||||
container.innerHTML = '';
|
||||
container.appendChild(iframe);
|
||||
}
|
||||
|
||||
function showVideoPreview(fileUrl, container) {
|
||||
const video = document.createElement('video');
|
||||
video.src = fileUrl;
|
||||
video.controls = true;
|
||||
video.style.maxWidth = '100%';
|
||||
|
||||
container.innerHTML = '';
|
||||
container.appendChild(video);
|
||||
}
|
||||
|
||||
function showAudioPreview(fileUrl, container) {
|
||||
const audio = document.createElement('audio');
|
||||
audio.src = fileUrl;
|
||||
audio.controls = true;
|
||||
audio.style.width = '100%';
|
||||
|
||||
container.innerHTML = '';
|
||||
container.appendChild(audio);
|
||||
}
|
||||
|
||||
function showUnsupportedPreview(fileName, container) {
|
||||
const extension = fileName.toLowerCase().split('.').pop();
|
||||
container.innerHTML = `
|
||||
<div class="preview-error">
|
||||
<p>Prévisualisation non disponible pour ce type de fichier (.${extension})</p>
|
||||
<p>Utilisez le bouton "Télécharger" ci-dessous pour obtenir le fichier.</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function hidePreview() {
|
||||
const previewSection = document.getElementById('preview-section');
|
||||
previewSection.style.display = 'none';
|
||||
|
||||
currentPreviewFile = { url: '', name: '' };
|
||||
}
|
||||
|
||||
function downloadCurrentFile() {
|
||||
if (currentPreviewFile.url) {
|
||||
const link = document.createElement('a');
|
||||
link.href = currentPreviewFile.url;
|
||||
link.download = currentPreviewFile.name;
|
||||
link.target = '_blank';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
}
|
||||
|
||||
// Fonction pour ouvrir automatiquement index.rst s'il existe
|
||||
function autoOpenIndexRst(files) {
|
||||
// Chercher un fichier index.rst dans la liste
|
||||
const indexRstFile = files.find(file =>
|
||||
file.name.toLowerCase() === 'index.rst'
|
||||
);
|
||||
|
||||
if (indexRstFile) {
|
||||
// Construire l'URL complète du fichier
|
||||
const fileUrl = `${config.baseUrl}/${indexRstFile.fullKey}`;
|
||||
|
||||
// Ouvrir automatiquement la prévisualisation
|
||||
console.log('Auto-ouverture de index.rst trouvé:', indexRstFile.name);
|
||||
showPreview(fileUrl, indexRstFile.name);
|
||||
} else {
|
||||
// Pas d'index.rst trouvé, fermer le preview s'il est ouvert
|
||||
console.log('Aucun index.rst trouvé, fermeture du preview');
|
||||
hidePreview();
|
||||
}
|
||||
}
|
||||
|
||||
// Fonction simple de parsing Markdown vers HTML
|
||||
function parseMarkdown(text) {
|
||||
let html = text;
|
||||
|
||||
// Headers
|
||||
html = html.replace(/^### (.*$)/gim, '<h3>$1</h3>');
|
||||
html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>');
|
||||
html = html.replace(/^# (.*$)/gim, '<h1>$1</h1>');
|
||||
|
||||
// Bold
|
||||
html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
|
||||
html = html.replace(/__(.*?)__/g, '<strong>$1</strong>');
|
||||
|
||||
// Italic
|
||||
html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');
|
||||
html = html.replace(/_(.*?)_/g, '<em>$1</em>');
|
||||
|
||||
// Code inline
|
||||
html = html.replace(/`(.*?)`/g, '<code>$1</code>');
|
||||
|
||||
// Code blocks
|
||||
html = html.replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>');
|
||||
|
||||
// Links
|
||||
html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>');
|
||||
|
||||
// Images
|
||||
html = html.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img alt="$1" src="$2" style="max-width: 100%; height: auto;">');
|
||||
|
||||
// Lists
|
||||
html = html.replace(/^\* (.*$)/gim, '<li>$1</li>');
|
||||
html = html.replace(/^- (.*$)/gim, '<li>$1</li>');
|
||||
html = html.replace(/^\d+\. (.*$)/gim, '<li>$1</li>');
|
||||
|
||||
// Wrap consecutive <li> items in <ul>
|
||||
html = html.replace(/(<li>.*<\/li>)/gs, (match) => {
|
||||
return '<ul>' + match + '</ul>';
|
||||
});
|
||||
|
||||
// Line breaks
|
||||
html = html.replace(/\n\n/g, '</p><p>');
|
||||
html = '<p>' + html + '</p>';
|
||||
|
||||
// Clean up empty paragraphs
|
||||
html = html.replace(/<p><\/p>/g, '');
|
||||
html = html.replace(/<p>(<h[1-6]>)/g, '$1');
|
||||
html = html.replace(/(<\/h[1-6]>)<\/p>/g, '$1');
|
||||
html = html.replace(/<p>(<ul>)/g, '$1');
|
||||
html = html.replace(/(<\/ul>)<\/p>/g, '$1');
|
||||
html = html.replace(/<p>(<pre>)/g, '$1');
|
||||
html = html.replace(/(<\/pre>)<\/p>/g, '$1');
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
// Fonction simple de parsing reStructuredText vers HTML
|
||||
function parseRst(text) {
|
||||
let html = text;
|
||||
|
||||
// Créer un système de placeholders pour éviter les liens imbriqués
|
||||
const linkPlaceholders = new Map();
|
||||
let placeholderIndex = 0;
|
||||
|
||||
// Fonction pour créer un placeholder unique
|
||||
const createLinkPlaceholder = (linkText, linkUrl) => {
|
||||
const placeholder = `__LINK_PLACEHOLDER_${placeholderIndex++}__`;
|
||||
linkPlaceholders.set(placeholder, `<a href="${linkUrl}" target="_blank">${linkText}</a>`);
|
||||
return placeholder;
|
||||
};
|
||||
|
||||
// Headers (RST style with underlines) - ordre important pour éviter les conflits
|
||||
html = html.replace(/^(.*)\n#{3,}$/gim, '<h1>$1</h1>');
|
||||
html = html.replace(/^(.*)\n={3,}$/gim, '<h2>$1</h2>');
|
||||
html = html.replace(/^(.*)\n-{3,}$/gim, '<h3>$1</h3>');
|
||||
html = html.replace(/^(.*)\n~{3,}$/gim, '<h4>$1</h4>');
|
||||
html = html.replace(/^(.*)\n\^{3,}$/gim, '<h5>$1</h5>');
|
||||
|
||||
// Metadata fields
|
||||
html = html.replace(/^:([^:]+):\s*(.*)$/gim, (match, key, value) => {
|
||||
// Remplacer les liens par des placeholders dans les métadonnées
|
||||
const processedValue = value.replace(/`([^<]+) <([^>]+)>`_/g, (match, text, url) => {
|
||||
return createLinkPlaceholder(text, url);
|
||||
});
|
||||
return `<div class="rst-metadata"><span class="metadata-key">${key}:</span> <span class="metadata-value">${processedValue}</span></div>`;
|
||||
});
|
||||
|
||||
// Custom directives (.. directive::)
|
||||
html = html.replace(/^\.\. ([^:]+)::\s*(.*)$/gim, '<div class="rst-directive rst-directive-$1" data-directive="$1" data-content="$2">');
|
||||
|
||||
// Directive options (:option: value)
|
||||
html = html.replace(/^ :([^:]+):\s*(.*)$/gim, (match, key, value) => {
|
||||
// Remplacer les liens par des placeholders dans les options
|
||||
const processedValue = value.replace(/`([^<]+) <([^>]+)>`_/g, (match, text, url) => {
|
||||
return createLinkPlaceholder(text, url);
|
||||
});
|
||||
return `<div class="directive-option" data-option="${key}" data-value="${value}"><span class="option-key">${key}:</span> <span class="option-value">${processedValue}</span></div>`;
|
||||
});
|
||||
|
||||
// Special handling for big_button directive
|
||||
html = html.replace(/<div class="rst-directive rst-directive-big_button"[^>]*>/g, '<div class="rst-big-button">');
|
||||
|
||||
// Process directive content blocks (indented text after directive)
|
||||
html = html.replace(/(<div class="rst-directive[^>]*>)\n((?: [^\n]*\n?)*)/gim, (match, directive, content) => {
|
||||
if (content.trim()) {
|
||||
const cleanContent = content.replace(/^ /gm, '').trim();
|
||||
// Remplacer les liens par des placeholders dans le contenu
|
||||
const processedContent = cleanContent.replace(/`([^<]+) <([^>]+)>`_/g, (match, text, url) => {
|
||||
return createLinkPlaceholder(text, url);
|
||||
});
|
||||
return directive + '<div class="directive-content">' + processedContent + '</div></div>';
|
||||
}
|
||||
return directive + '</div>';
|
||||
});
|
||||
|
||||
// Bold
|
||||
html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
|
||||
|
||||
// Italic
|
||||
html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');
|
||||
|
||||
// Code inline
|
||||
html = html.replace(/``(.*?)``/g, '<code>$1</code>');
|
||||
|
||||
// Code blocks (:: at end of line followed by indented block)
|
||||
html = html.replace(/::\s*\n\n((?: .*\n?)+)/g, '<pre><code>$1</code></pre>');
|
||||
|
||||
// Links restants dans le texte principal
|
||||
html = html.replace(/`([^<]+) <([^>]+)>`_/g, (match, text, url) => {
|
||||
return createLinkPlaceholder(text, url);
|
||||
});
|
||||
|
||||
// Lists
|
||||
html = html.replace(/^\* (.*$)/gim, '<li>$1</li>');
|
||||
html = html.replace(/^- (.*$)/gim, '<li>$1</li>');
|
||||
html = html.replace(/^\d+\. (.*$)/gim, '<li>$1</li>');
|
||||
|
||||
// Wrap consecutive <li> items in <ul>
|
||||
html = html.replace(/(<li>.*<\/li>)/gs, (match) => {
|
||||
return '<ul>' + match + '</ul>';
|
||||
});
|
||||
|
||||
// Line breaks
|
||||
html = html.replace(/\n\n/g, '</p><p>');
|
||||
html = '<p>' + html + '</p>';
|
||||
|
||||
// Clean up empty paragraphs and fix structure
|
||||
html = html.replace(/<p><\/p>/g, '');
|
||||
html = html.replace(/<p>(<h[1-6]>)/g, '$1');
|
||||
html = html.replace(/(<\/h[1-6]>)<\/p>/g, '$1');
|
||||
html = html.replace(/<p>(<div class="rst-)/g, '<div class="rst-');
|
||||
html = html.replace(/(<\/div>)<\/p>/g, '$1');
|
||||
html = html.replace(/<p>(<ul>)/g, '$1');
|
||||
html = html.replace(/(<\/ul>)<\/p>/g, '$1');
|
||||
html = html.replace(/<p>(<pre>)/g, '$1');
|
||||
html = html.replace(/(<\/pre>)<\/p>/g, '$1');
|
||||
|
||||
// Restaurer tous les liens à partir des placeholders
|
||||
for (const [placeholder, linkHtml] of linkPlaceholders) {
|
||||
html = html.replace(new RegExp(placeholder, 'g'), linkHtml);
|
||||
}
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function showMarkdownPreview(fileUrl, container) {
|
||||
fetch(fileUrl)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`Erreur HTTP: ${response.status}`);
|
||||
}
|
||||
return response.text();
|
||||
})
|
||||
.then(text => {
|
||||
const htmlContent = parseMarkdown(text);
|
||||
const div = document.createElement('div');
|
||||
div.className = 'markdown-content';
|
||||
div.innerHTML = htmlContent;
|
||||
container.innerHTML = '';
|
||||
container.appendChild(div);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Erreur chargement markdown:', error);
|
||||
container.innerHTML = '<div class="preview-error">Erreur: Impossible de charger le fichier Markdown</div>';
|
||||
});
|
||||
}
|
||||
|
||||
function showRstPreview(fileUrl, container) {
|
||||
fetch(fileUrl)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`Erreur HTTP: ${response.status}`);
|
||||
}
|
||||
return response.text();
|
||||
})
|
||||
.then(text => {
|
||||
const htmlContent = parseRst(text);
|
||||
const div = document.createElement('div');
|
||||
div.className = 'rst-content';
|
||||
div.innerHTML = htmlContent;
|
||||
container.innerHTML = '';
|
||||
container.appendChild(div);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Erreur chargement RST:', error);
|
||||
container.innerHTML = '<div class="preview-error">Erreur: Impossible de charger le fichier reStructuredText</div>';
|
||||
});
|
||||
}
|
||||
658
style.css
658
style.css
@@ -1,188 +1,670 @@
|
||||
/* Style type "Index of" Apache classique */
|
||||
/* Reset pour layout pleine page */
|
||||
html,
|
||||
body {
|
||||
font-family: monospace;
|
||||
margin: 20px;
|
||||
background-color: white;
|
||||
color: black;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: auto; /* Pas de scroll global */
|
||||
font-family: monospace;
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Container principal pleine page */
|
||||
#page-container {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Header fixe */
|
||||
#header {
|
||||
flex: 0 0 auto;
|
||||
padding: 15px 20px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* Section développement */
|
||||
.dev-section {
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #ccc;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 4px;
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #ccc;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.dev-section h2 {
|
||||
font-size: 16px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.dev-section form {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.dev-section label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dev-section input[type="text"] {
|
||||
width: 400px;
|
||||
padding: 5px;
|
||||
border: 1px solid #ccc;
|
||||
font-family: monospace;
|
||||
width: 400px;
|
||||
padding: 5px;
|
||||
border: 1px solid #ccc;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.dev-section button {
|
||||
padding: 5px 15px;
|
||||
margin-left: 10px;
|
||||
background-color: #007acc;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 5px 15px;
|
||||
margin-left: 10px;
|
||||
background-color: #007acc;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dev-section button:hover {
|
||||
background-color: #005999;
|
||||
background-color: #005999;
|
||||
}
|
||||
|
||||
#config-info {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Messages d'erreur */
|
||||
.error {
|
||||
background-color: #ffe6e6;
|
||||
border: 1px solid #ff9999;
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
color: #cc0000;
|
||||
border-radius: 4px;
|
||||
background-color: #ffe6e6;
|
||||
border: 1px solid #ff9999;
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
color: #cc0000;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Loading */
|
||||
#loading {
|
||||
font-style: italic;
|
||||
color: #666;
|
||||
margin: 20px 0;
|
||||
font-style: italic;
|
||||
color: #666;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
/* Tableau des fichiers */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #ccc;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #ccc;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid #ccc;
|
||||
padding: 8px;
|
||||
vertical-align: top;
|
||||
border: 1px solid #ccc;
|
||||
padding: 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #f9f9f9;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background-color: #e6f3ff;
|
||||
background-color: #e6f3ff;
|
||||
}
|
||||
|
||||
/* Liens et dossiers */
|
||||
.folder-link {
|
||||
color: #0066cc;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
color: #0066cc;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.folder-link:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.file-link {
|
||||
color: #0066cc;
|
||||
text-decoration: none;
|
||||
color: #0066cc;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.file-link:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.parent-dir {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Bouton copier lien */
|
||||
.copy-btn {
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #ccc;
|
||||
padding: 2px 6px;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
background-color: #f0f0f0;
|
||||
border: 1px solid #ccc;
|
||||
padding: 2px 6px;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
background-color: #e0e0e0;
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.copy-btn:active {
|
||||
background-color: #d0d0d0;
|
||||
background-color: #d0d0d0;
|
||||
}
|
||||
|
||||
/* Tailles de fichiers */
|
||||
.file-size {
|
||||
text-align: right;
|
||||
font-family: monospace;
|
||||
text-align: right;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.file-date {
|
||||
font-family: monospace;
|
||||
white-space: nowrap;
|
||||
font-family: monospace;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Container principal avec layout adaptatif - prend l'espace restant */
|
||||
#main-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 0 20px 20px 20px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
#content-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Section de prévisualisation */
|
||||
#preview-section {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background-color: #f9f9f9;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Mode paysage (landscape) - par défaut */
|
||||
@media screen and (orientation: landscape) {
|
||||
#main-container {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#content-section {
|
||||
flex: 1; /* Tableau prend la moitié disponible */
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#files-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
#preview-section {
|
||||
flex: 1; /* Prévisualisation prend la moitié disponible */
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mode portrait (vertical) */
|
||||
@media screen and (orientation: portrait) {
|
||||
#main-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#content-section {
|
||||
flex: 0 0 25%; /* Tableau prend seulement 25% de la hauteur */
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#files-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
#preview-section {
|
||||
flex: 1; /* Prévisualisation prend 75% restant */
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles pour écrans très petits (mobile) */
|
||||
@media screen and (max-width: 768px) {
|
||||
#main-container {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#content-section {
|
||||
flex: 0 0 20%; /* Encore moins d'espace pour le tableau sur mobile */
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#files-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
#preview-section {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
background-color: #f0f0f0;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-radius: 4px 4px 0 0;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#close-preview {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
padding: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#close-preview:hover {
|
||||
color: #333;
|
||||
background-color: #e0e0e0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.preview-content {
|
||||
padding: 15px;
|
||||
background-color: white;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.preview-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.preview-content pre {
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.preview-content video,
|
||||
.preview-content audio {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.preview-content iframe {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.preview-error {
|
||||
color: #cc0000;
|
||||
font-style: italic;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.preview-actions {
|
||||
padding: 10px 15px;
|
||||
border-top: 1px solid #ccc;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 0 0 4px 4px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
#download-file {
|
||||
background-color: #007acc;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 5px 15px;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#download-file:hover {
|
||||
background-color: #005999;
|
||||
}
|
||||
|
||||
/* Styles pour le contenu Markdown et reStructuredText rendu */
|
||||
.markdown-content,
|
||||
.rst-content {
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.markdown-content h1,
|
||||
.rst-content h1 {
|
||||
color: #2c3e50;
|
||||
border-bottom: 2px solid #3498db;
|
||||
padding-bottom: 10px;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.markdown-content h2,
|
||||
.rst-content h2 {
|
||||
color: #34495e;
|
||||
border-bottom: 1px solid #bdc3c7;
|
||||
padding-bottom: 5px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.markdown-content h3,
|
||||
.rst-content h3 {
|
||||
color: #34495e;
|
||||
margin-top: 18px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.markdown-content h4,
|
||||
.rst-content h4 {
|
||||
color: #34495e;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.markdown-content p,
|
||||
.rst-content p {
|
||||
margin-bottom: 12px;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.markdown-content ul,
|
||||
.rst-content ul {
|
||||
margin: 10px 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.markdown-content li,
|
||||
.rst-content li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.markdown-content code,
|
||||
.rst-content code {
|
||||
background-color: #f1f2f6;
|
||||
color: #e74c3c;
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
font-family: "Courier New", monospace;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.markdown-content pre,
|
||||
.rst-content pre {
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
overflow-x: auto;
|
||||
margin: 15px 0;
|
||||
font-family: "Courier New", monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.markdown-content pre code,
|
||||
.rst-content pre code {
|
||||
background: none;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.markdown-content a,
|
||||
.rst-content a {
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
.markdown-content a:hover,
|
||||
.rst-content a:hover {
|
||||
border-bottom-color: #3498db;
|
||||
}
|
||||
|
||||
.markdown-content strong,
|
||||
.rst-content strong {
|
||||
color: #2c3e50;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.markdown-content em,
|
||||
.rst-content em {
|
||||
color: #34495e;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.markdown-content img,
|
||||
.rst-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
margin: 10px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Styles spécifiques pour les métadonnées et directives RST */
|
||||
.rst-metadata {
|
||||
background-color: #f8f9fa;
|
||||
border-left: 4px solid #17a2b8;
|
||||
padding: 8px 12px;
|
||||
margin: 5px 0;
|
||||
font-size: 14px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.metadata-key {
|
||||
font-weight: bold;
|
||||
color: #17a2b8;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.metadata-value {
|
||||
color: #495057;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/* Directives générales */
|
||||
.rst-directive {
|
||||
background-color: #fff3cd;
|
||||
border: 1px solid #ffeaa7;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.directive-option {
|
||||
margin: 5px 0;
|
||||
padding-left: 15px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.option-key {
|
||||
font-weight: bold;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.option-value {
|
||||
color: #495057;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.directive-content {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #e9ecef;
|
||||
color: #495057;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Directive big_button spécialement stylée */
|
||||
.rst-big-button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.rst-big-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.rst-big-button .option-key {
|
||||
color: #e3f2fd;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.rst-big-button .option-value {
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-left: 0;
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.rst-big-button .directive-content {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: #f8f9fa;
|
||||
font-size: 14px;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
/* Ajustement des titres RST pour la hiérarchie complète */
|
||||
.rst-content h1 {
|
||||
color: #2c3e50;
|
||||
border-bottom: 3px solid #3498db;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.rst-content h2 {
|
||||
color: #34495e;
|
||||
border-bottom: 2px solid #3498db;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.rst-content h3 {
|
||||
color: #34495e;
|
||||
border-bottom: 1px solid #bdc3c7;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.rst-content h4 {
|
||||
color: #34495e;
|
||||
border-bottom: 1px dotted #bdc3c7;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.rst-content h5 {
|
||||
color: #34495e;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
address {
|
||||
margin-top: 30px;
|
||||
font-style: italic;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
border-top: 1px solid #ccc;
|
||||
padding-top: 10px;
|
||||
margin-top: 30px;
|
||||
font-style: italic;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
border-top: 1px solid #ccc;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
/* Icônes (caractères simples) */
|
||||
.icon-folder::before {
|
||||
content: "📁 ";
|
||||
content: "📁 ";
|
||||
}
|
||||
|
||||
.icon-file::before {
|
||||
content: "📄 ";
|
||||
content: "📄 ";
|
||||
}
|
||||
|
||||
.icon-parent::before {
|
||||
content: "⬆️ ";
|
||||
}
|
||||
content: "⬆️ ";
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user