Refactoring interface web : optimisation layout colonnes et zone upload
- Fusion upload + tree en colonnes unifiées avec header unique - Déplacement bannière conflits en haut pour séparer les colonnes - Infos fichier condensées sur 1 ligne avec bouton icône à droite - Drop zone remplacée par tree après upload (gain d'espace ~60%) - Support drag & drop sur toute la colonne même avec fichier chargé - Styles optimisés : champ recherche intégré, bouton circulaire compact
This commit is contained in:
243
index.php
243
index.php
@@ -45,7 +45,8 @@ $i18n = [
|
||||
'selected_files' => 'fichiers sélectionnés',
|
||||
'loading' => 'Chargement...',
|
||||
'theme_toggle' => 'Changer de thème',
|
||||
'lang_toggle' => 'Language'
|
||||
'lang_toggle' => 'Language',
|
||||
'change_file' => 'Changer'
|
||||
],
|
||||
'en' => [
|
||||
'title' => 'FuZip - ZIP Files Merger',
|
||||
@@ -69,7 +70,8 @@ $i18n = [
|
||||
'selected_files' => 'files selected',
|
||||
'loading' => 'Loading...',
|
||||
'theme_toggle' => 'Toggle theme',
|
||||
'lang_toggle' => 'Langue'
|
||||
'lang_toggle' => 'Langue',
|
||||
'change_file' => 'Change'
|
||||
]
|
||||
];
|
||||
|
||||
@@ -137,93 +139,6 @@ $t = $i18n[$lang];
|
||||
|
||||
<!-- Conteneur principal -->
|
||||
<main class="main-container">
|
||||
<!-- Zones d'upload -->
|
||||
<section class="upload-section">
|
||||
<!-- Upload gauche -->
|
||||
<div class="upload-panel" id="upload-panel-left" data-side="left">
|
||||
<h2 class="panel-title"><?= htmlspecialchars($t['upload_left']) ?></h2>
|
||||
|
||||
<div class="drop-zone" id="drop-zone-left">
|
||||
<svg class="drop-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||||
<polyline points="17 8 12 3 7 8"></polyline>
|
||||
<line x1="12" y1="3" x2="12" y2="15"></line>
|
||||
</svg>
|
||||
<p class="drop-text"><?= htmlspecialchars($t['drag_drop']) ?></p>
|
||||
<p class="drop-or"><?= htmlspecialchars($t['or']) ?></p>
|
||||
<button class="btn-browse" id="btn-browse-left"><?= htmlspecialchars($t['browse']) ?></button>
|
||||
<input type="file" class="file-input" id="file-input-left" accept=".zip,application/zip" hidden>
|
||||
</div>
|
||||
|
||||
<div class="upload-info hidden" id="upload-info-left">
|
||||
<div class="file-name" id="file-name-left"><?= htmlspecialchars($t['no_file']) ?></div>
|
||||
<div class="file-stats">
|
||||
<span class="stat-item">
|
||||
<svg class="stat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
|
||||
<polyline points="13 2 13 9 20 9"></polyline>
|
||||
</svg>
|
||||
<span class="stat-value" id="file-count-left">0</span> <?= htmlspecialchars($t['files_count']) ?>
|
||||
</span>
|
||||
<span class="stat-item">
|
||||
<svg class="stat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
|
||||
</svg>
|
||||
<span class="stat-value" id="file-size-left">0 B</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="upload-progress hidden" id="progress-bar-left">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" id="progress-fill-left" style="width: 0%"></div>
|
||||
</div>
|
||||
<span class="progress-text" id="progress-text-left">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upload droite -->
|
||||
<div class="upload-panel" id="upload-panel-right" data-side="right">
|
||||
<h2 class="panel-title"><?= htmlspecialchars($t['upload_right']) ?></h2>
|
||||
|
||||
<div class="drop-zone" id="drop-zone-right">
|
||||
<svg class="drop-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||||
<polyline points="17 8 12 3 7 8"></polyline>
|
||||
<line x1="12" y1="3" x2="12" y2="15"></line>
|
||||
</svg>
|
||||
<p class="drop-text"><?= htmlspecialchars($t['drag_drop']) ?></p>
|
||||
<p class="drop-or"><?= htmlspecialchars($t['or']) ?></p>
|
||||
<button class="btn-browse" id="btn-browse-right"><?= htmlspecialchars($t['browse']) ?></button>
|
||||
<input type="file" class="file-input" id="file-input-right" accept=".zip,application/zip" hidden>
|
||||
</div>
|
||||
|
||||
<div class="upload-info hidden" id="upload-info-right">
|
||||
<div class="file-name" id="file-name-right"><?= htmlspecialchars($t['no_file']) ?></div>
|
||||
<div class="file-stats">
|
||||
<span class="stat-item">
|
||||
<svg class="stat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
|
||||
<polyline points="13 2 13 9 20 9"></polyline>
|
||||
</svg>
|
||||
<span class="stat-value" id="file-count-right">0</span> <?= htmlspecialchars($t['files_count']) ?>
|
||||
</span>
|
||||
<span class="stat-item">
|
||||
<svg class="stat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
|
||||
</svg>
|
||||
<span class="stat-value" id="file-size-right">0 B</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="upload-progress hidden" id="progress-bar-right">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" id="progress-fill-right" style="width: 0%"></div>
|
||||
</div>
|
||||
<span class="progress-text" id="progress-text-right">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Bandeau de conflits -->
|
||||
<div class="conflicts-banner hidden" id="conflicts-banner">
|
||||
<svg class="banner-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
@@ -237,51 +152,137 @@ $t = $i18n[$lang];
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Section arborescences -->
|
||||
<section class="trees-section" id="trees-section">
|
||||
<!-- Arbre gauche -->
|
||||
<div class="tree-panel" data-side="left">
|
||||
<div class="tree-header">
|
||||
<input type="text" class="search-input" placeholder="<?= htmlspecialchars($t['search_placeholder']) ?>">
|
||||
<div class="tree-actions">
|
||||
<button class="btn-tree-action" title="<?= htmlspecialchars($t['select_all']) ?>">
|
||||
<!-- Colonnes principales -->
|
||||
<section class="columns-section">
|
||||
<!-- Colonne gauche -->
|
||||
<div class="column" id="column-left">
|
||||
<div class="column-header" id="upload-panel-left">
|
||||
<h2 class="column-title"><?= htmlspecialchars($t['upload_left']) ?></h2>
|
||||
<div class="column-info hidden" id="panel-info-left">
|
||||
<span class="info-file-name" id="file-name-left"></span>
|
||||
<span class="info-separator">•</span>
|
||||
<span class="info-stat" id="file-count-left">0</span> <?= htmlspecialchars($t['files_count']) ?>
|
||||
<span class="info-separator">•</span>
|
||||
<span class="info-stat" id="file-size-left">0 B</span>
|
||||
<button class="btn-change-file" id="btn-change-left" aria-label="<?= htmlspecialchars($t['change_file']) ?> - <?= htmlspecialchars($t['upload_left']) ?>" title="<?= htmlspecialchars($t['change_file']) ?>">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 11 12 14 22 4"></polyline>
|
||||
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="btn-tree-action" title="<?= htmlspecialchars($t['expand_all']) ?>">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
<polyline points="1 4 1 10 7 10"></polyline>
|
||||
<path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree-content" id="tree-left">
|
||||
<!-- Arborescence générée par JavaScript -->
|
||||
|
||||
<div class="column-body">
|
||||
<!-- Drop zone (visible avant upload) -->
|
||||
<div class="drop-zone" id="drop-zone-left">
|
||||
<svg class="drop-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||||
<polyline points="17 8 12 3 7 8"></polyline>
|
||||
<line x1="12" y1="3" x2="12" y2="15"></line>
|
||||
</svg>
|
||||
<p class="drop-text"><?= htmlspecialchars($t['drag_drop']) ?></p>
|
||||
<p class="drop-or"><?= htmlspecialchars($t['or']) ?></p>
|
||||
<button class="btn-browse" id="btn-browse-left"><?= htmlspecialchars($t['browse']) ?></button>
|
||||
<input type="file" class="file-input" id="file-input-left" accept=".zip,application/zip" hidden>
|
||||
</div>
|
||||
|
||||
<!-- Tree panel (visible après upload) -->
|
||||
<div class="tree-panel hidden" data-side="left" id="tree-panel-left">
|
||||
<div class="tree-header">
|
||||
<input type="text" class="search-input" placeholder="<?= htmlspecialchars($t['search_placeholder']) ?>">
|
||||
<div class="tree-actions">
|
||||
<button class="btn-tree-action" title="<?= htmlspecialchars($t['select_all']) ?>">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 11 12 14 22 4"></polyline>
|
||||
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="btn-tree-action" title="<?= htmlspecialchars($t['expand_all']) ?>">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree-content" id="tree-left">
|
||||
<!-- Arborescence générée par JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress bar -->
|
||||
<div class="upload-progress hidden" id="progress-bar-left">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" id="progress-fill-left" style="width: 0%"></div>
|
||||
</div>
|
||||
<span class="progress-text" id="progress-text-left">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Arbre droite -->
|
||||
<div class="tree-panel" data-side="right">
|
||||
<div class="tree-header">
|
||||
<input type="text" class="search-input" placeholder="<?= htmlspecialchars($t['search_placeholder']) ?>">
|
||||
<div class="tree-actions">
|
||||
<button class="btn-tree-action" title="<?= htmlspecialchars($t['select_all']) ?>">
|
||||
<!-- Colonne droite -->
|
||||
<div class="column" id="column-right">
|
||||
<div class="column-header" id="upload-panel-right">
|
||||
<h2 class="column-title"><?= htmlspecialchars($t['upload_right']) ?></h2>
|
||||
<div class="column-info hidden" id="panel-info-right">
|
||||
<span class="info-file-name" id="file-name-right"></span>
|
||||
<span class="info-separator">•</span>
|
||||
<span class="info-stat" id="file-count-right">0</span> <?= htmlspecialchars($t['files_count']) ?>
|
||||
<span class="info-separator">•</span>
|
||||
<span class="info-stat" id="file-size-right">0 B</span>
|
||||
<button class="btn-change-file" id="btn-change-right" aria-label="<?= htmlspecialchars($t['change_file']) ?> - <?= htmlspecialchars($t['upload_right']) ?>" title="<?= htmlspecialchars($t['change_file']) ?>">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 11 12 14 22 4"></polyline>
|
||||
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="btn-tree-action" title="<?= htmlspecialchars($t['expand_all']) ?>">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
<polyline points="1 4 1 10 7 10"></polyline>
|
||||
<path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree-content" id="tree-right">
|
||||
<!-- Arborescence générée par JavaScript -->
|
||||
|
||||
<div class="column-body">
|
||||
<!-- Drop zone (visible avant upload) -->
|
||||
<div class="drop-zone" id="drop-zone-right">
|
||||
<svg class="drop-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||||
<polyline points="17 8 12 3 7 8"></polyline>
|
||||
<line x1="12" y1="3" x2="12" y2="15"></line>
|
||||
</svg>
|
||||
<p class="drop-text"><?= htmlspecialchars($t['drag_drop']) ?></p>
|
||||
<p class="drop-or"><?= htmlspecialchars($t['or']) ?></p>
|
||||
<button class="btn-browse" id="btn-browse-right"><?= htmlspecialchars($t['browse']) ?></button>
|
||||
<input type="file" class="file-input" id="file-input-right" accept=".zip,application/zip" hidden>
|
||||
</div>
|
||||
|
||||
<!-- Tree panel (visible après upload) -->
|
||||
<div class="tree-panel hidden" data-side="right" id="tree-panel-right">
|
||||
<div class="tree-header">
|
||||
<input type="text" class="search-input" placeholder="<?= htmlspecialchars($t['search_placeholder']) ?>">
|
||||
<div class="tree-actions">
|
||||
<button class="btn-tree-action" title="<?= htmlspecialchars($t['select_all']) ?>">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 11 12 14 22 4"></polyline>
|
||||
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="btn-tree-action" title="<?= htmlspecialchars($t['expand_all']) ?>">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree-content" id="tree-right">
|
||||
<!-- Arborescence générée par JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress bar -->
|
||||
<div class="upload-progress hidden" id="progress-bar-right">
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" id="progress-fill-right" style="width: 0%"></div>
|
||||
</div>
|
||||
<span class="progress-text" id="progress-text-right">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user