Initial commit: FuZip - Application de fusion interactive de fichiers ZIP
- Backend PHP: architecture MVC avec API REST (upload, merge, preview, extract) - Frontend JavaScript: composants modulaires (arborescence, upload, themes, i18n) - Fonctionnalités: drag&drop, sélection exclusive, détection conflits, persistance état - Sécurité: validation stricte, isolation sessions, sanitization chemins - UI/UX: responsive, thèmes clair/sombre, multi-langue (FR/EN) - Documentation: README complet avec installation et utilisation
This commit is contained in:
268
assets/css/upload-panel.css
Normal file
268
assets/css/upload-panel.css
Normal file
@@ -0,0 +1,268 @@
|
||||
/**
|
||||
* FuZip - Styles zones d'upload
|
||||
* Drop zones, boutons browse, progress bars
|
||||
*/
|
||||
|
||||
/* ===== Panel d'upload ===== */
|
||||
.upload-panel {
|
||||
background-color: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-lg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ===== Drop Zone ===== */
|
||||
.drop-zone {
|
||||
border: 2px dashed var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-2xl) var(--spacing-lg);
|
||||
text-align: center;
|
||||
background-color: var(--color-bg-secondary);
|
||||
transition: all var(--transition-base);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.drop-zone:hover {
|
||||
border-color: var(--color-primary);
|
||||
background-color: var(--color-primary-light);
|
||||
}
|
||||
|
||||
.drop-zone.drag-over {
|
||||
border-color: var(--color-primary);
|
||||
background-color: var(--color-primary-light);
|
||||
border-style: solid;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.drop-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
color: var(--color-text-secondary);
|
||||
transition: color var(--transition-base);
|
||||
}
|
||||
|
||||
.drop-zone:hover .drop-icon,
|
||||
.drop-zone.drag-over .drop-icon {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.drop-text {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.drop-or {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.btn-browse {
|
||||
padding: var(--spacing-sm) var(--spacing-xl);
|
||||
background-color: white;
|
||||
color: var(--color-primary);
|
||||
border: 1px solid var(--color-primary);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.btn-browse:hover {
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ===== Upload Info ===== */
|
||||
.upload-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-md);
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
font-size: var(--font-size-base);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.file-stats {
|
||||
display: flex;
|
||||
gap: var(--spacing-lg);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* ===== Progress Bar ===== */
|
||||
.upload-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
flex: 1;
|
||||
height: 0.5rem;
|
||||
background-color: var(--color-bg-tertiary);
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
|
||||
border-radius: var(--radius-xl);
|
||||
transition: width var(--transition-base);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Animation de progression */
|
||||
.progress-fill::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.3),
|
||||
transparent
|
||||
);
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
min-width: 3rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* ===== États spéciaux ===== */
|
||||
.upload-panel.uploading {
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.upload-panel.success {
|
||||
border-color: var(--color-success);
|
||||
background-color: rgba(16, 185, 129, 0.05);
|
||||
}
|
||||
|
||||
.upload-panel.error {
|
||||
border-color: var(--color-error);
|
||||
background-color: rgba(239, 68, 68, 0.05);
|
||||
}
|
||||
|
||||
/* Message d'erreur */
|
||||
.error-message {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
background-color: #fee2e2;
|
||||
border: 1px solid var(--color-error);
|
||||
border-radius: var(--radius-md);
|
||||
color: #991b1b;
|
||||
font-size: var(--font-size-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Message de succès */
|
||||
.success-message {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
background-color: #d1fae5;
|
||||
border: 1px solid var(--color-success);
|
||||
border-radius: var(--radius-md);
|
||||
color: #065f46;
|
||||
font-size: var(--font-size-sm);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ===== Responsive ===== */
|
||||
@media (max-width: 768px) {
|
||||
.drop-zone {
|
||||
padding: var(--spacing-xl) var(--spacing-md);
|
||||
}
|
||||
|
||||
.drop-icon {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.drop-text {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.file-stats {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user