Fix/design improvments

.github/workflows/build-assets.yml

@@ -2,14 +2,14 @@ name: Build Assets
 
 on:
   push:
-    branches: [main, develop]
+    branches: [develop]
     paths:
       - 'assets/src/**'
       - 'templates/**'
       - 'tailwind.config.js'
       - 'scripts/generate-icons.php'
   pull_request:
-    branches: [main, develop]
+    branches: [main]
     paths:
       - 'assets/src/**'
       - 'templates/**'

.gitignore

@@ -51,3 +51,4 @@ error_log
 tailwindcss-linux-x64
 esbuild
 uploads/.import_history.json
+frontend/

CHANGELOG.md

@@ -4,6 +4,58 @@ All notable changes to BigDump are documented in this file.
 
 > **Note**: BigDump was originally created by Alexey Ozerov in 2003. Version 2.x is a complete MVC refactoring by w3spi5 (2025).
 
+## [2.27] - 2025-01-13 - Celebration UI & Import Completion
+
+### Added in 2.27
+
+- **Celebration Effects on Import Completion**: Visual feedback for successful imports
+  - Canvas-based fireworks with particle trails, glow effects, and color gradients
+  - 3D rotating confetti with realistic physics (air resistance, terminal velocity)
+  - Confetti cannons firing from screen sides at intervals
+  - Fireworks display for 20 seconds, confetti falls indefinitely
+  - Performance optimized with `requestAnimationFrame`
+
+- **Animated Favicon**: Visual indicator during active import
+  - Canvas-generated bouncing arrow animation
+  - Starts on SSE connection, stops on completion/error
+  - Restores original favicon when stopped
+
+- **Skeleton Loaders**: Better loading state UX
+  - Horizontal shimmer animation for unknown statistics
+  - Replaces static "?" placeholders during import start
+  - Smooth gradient animation with dark mode support
+
+### Fixed in 2.27
+
+- **99.5% Progress Bug**: Import no longer stuck at 99.5%
+  - Forces 100% display when `data.finished` is true
+  - Updates all percentage displays (progress bar, stat boxes, table)
+  - Adds green glow animation class on completion
+
+- **SSE Completion Redirect**: Success message now displays in-page
+  - No longer redirects to error page after session cleanup
+  - Shows "Import terminé !" with statistics grid
+  - French localization for success screen labels
+
+### Changed in 2.27
+
+- **Success Screen Styling**: Enhanced dark mode support
+  - New `.stat-card-success` class with gradient backgrounds
+  - Glowing borders and hover effects in dark mode
+  - French labels: "Requêtes", "Lignes", "Traité", "Durée"
+
+- **Progress Bar Completion**: Animated green glow effect
+  - `.progress-bar-complete` class with shimmer gradient
+  - Pulsing box-shadow animation
+  - Dark mode optimized glow intensity
+
+- **CI Workflow**: Fixed build-assets workflow for protected branches
+  - Auto-commit now only runs on `develop` branch
+  - PR to `main` triggers build verification only
+  - Prevents conflict with branch protection rules
+
+---
+
 ## [2.26] - 2025-01-13 - Clean URLs & Bug Fixes
 
 ### Added in 2.26

README.md

@@ -1,8 +1,8 @@
-# BigDump 2.26 - Staggered MySQL Dump Importer
+# BigDump 2.27 - Staggered MySQL Dump Importer
 
 [![PHP Version](https://img.shields.io/badge/php-8.1+-yellow.svg)](https://php.net/)
 [![License](https://img.shields.io/badge/license-MIT-green.svg)](LICENSE)
-[![Package Version](https://img.shields.io/badge/version-2.26-blue.svg)](https://php.net/)
+[![Package Version](https://img.shields.io/badge/version-2.27-blue.svg)](https://php.net/)
 [![Build Assets](https://img.shields.io/badge/build-GitHub_Actions-2088FF.svg)](https://github.com/w3spi5/bigdump/actions)
 [![PHAR](https://img.shields.io/badge/PHAR-single--file-purple.svg)](https://github.com/w3spi5/bigdump/releases)
 

assets/css/bigdump.css

@@ -773,6 +773,120 @@
     display: flex;
 }
 
+/* ========================================
+   SKELETON LOADER
+   ======================================== */
+
+.skeleton {
+    display: inline-block;
+    height: 1em;
+    min-width: 3em;
+    background: linear-gradient(
+        90deg,
+        rgba(156, 163, 175, 0.3) 25%,
+        rgba(156, 163, 175, 0.5) 50%,
+        rgba(156, 163, 175, 0.3) 75%
+    );
+    background-size: 200% 100%;
+    animation: skeleton-shimmer 1.5s ease-in-out infinite;
+    border-radius: 0.25rem;
+    vertical-align: middle;
+}
+
+[data-theme="dark"] .skeleton {
+    background: linear-gradient(
+        90deg,
+        rgba(75, 85, 99, 0.4) 25%,
+        rgba(75, 85, 99, 0.7) 50%,
+        rgba(75, 85, 99, 0.4) 75%
+    );
+    background-size: 200% 100%;
+}
+
+@keyframes skeleton-shimmer {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+
+/* ========================================
+   PROGRESS BAR COMPLETION ANIMATION
+   ======================================== */
+
+.progress-bar-complete {
+    background: linear-gradient(90deg, #22c55e, #16a34a, #4ade80, #22c55e) !important;
+    background-size: 300% 100% !important;
+    animation: progress-complete-glow 2s ease-in-out infinite !important;
+    box-shadow: 0 0 20px rgba(34, 197, 94, 0.6),
+                0 0 40px rgba(34, 197, 94, 0.4),
+                inset 0 0 10px rgba(255, 255, 255, 0.2) !important;
+}
+
+@keyframes progress-complete-glow {
+    0%, 100% {
+        background-position: 0% 50%;
+        box-shadow: 0 0 20px rgba(34, 197, 94, 0.6),
+                    0 0 40px rgba(34, 197, 94, 0.4),
+                    inset 0 0 10px rgba(255, 255, 255, 0.2);
+    }
+    50% {
+        background-position: 100% 50%;
+        box-shadow: 0 0 30px rgba(34, 197, 94, 0.8),
+                    0 0 60px rgba(34, 197, 94, 0.5),
+                    inset 0 0 15px rgba(255, 255, 255, 0.3);
+    }
+}
+
+/* Dark mode adjustment for completion glow */
+.dark .progress-bar-complete {
+    box-shadow: 0 0 25px rgba(74, 222, 128, 0.7),
+                0 0 50px rgba(74, 222, 128, 0.5),
+                inset 0 0 10px rgba(255, 255, 255, 0.15) !important;
+}
+
+/* Success message fade-in animation */
+.animate-fade-in {
+    animation: fade-in-up 0.5s ease-out forwards;
+}
+
+@keyframes fade-in-up {
+    0% {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Success stat cards with enhanced dark mode */
+.stat-card-success {
+    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
+    border-radius: 0.75rem;
+    padding: 1rem;
+    border: 1px solid rgba(34, 197, 94, 0.2);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.stat-card-success:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
+}
+
+.dark .stat-card-success {
+    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(22, 163, 74, 0.25) 100%);
+    border: 1px solid rgba(74, 222, 128, 0.3);
+    box-shadow: 0 0 20px rgba(34, 197, 94, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+.dark .stat-card-success:hover {
+    box-shadow: 0 0 25px rgba(34, 197, 94, 0.2),
+                0 4px 15px rgba(0, 0, 0, 0.3),
+                inset 0 1px 0 rgba(255, 255, 255, 0.08);
+    border-color: rgba(74, 222, 128, 0.5);
+}
+
 /* ========================================
    FILE UPLOAD ENHANCEMENTS
    ======================================== */