Cours/minio-explorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add preview

Browse Source
This commit is contained in:
Bertrand Benjamin
2025-09-05 11:20:00 +02:00
parent 393469d55e
commit 78303bc77e
3 changed files with 1037 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
index.html
View File

@@ -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>