Sauvegarde - CORD

--white: #ffffff; --gray-dark: #1a1a1a; --gray-light: #f5f5f5; --accent: #e6e6e6; --primary: #333; --secondary: #2a5298; --success: #28a745; --warning: #ffc107; --danger: #dc3545; --info: #17a2b8; --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--white); color: var(--black); min-height: 100vh; } /* Sidebar */ .sidebar { position: fixed; width: 250px; height: 100vh; background-color: var(--primary); color: white; padding: 20px 0; z-index: 1000; transition: transform 0.3s ease; overflow-y: auto; } .sidebar-header { padding: 0 20px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 20px; } .sidebar-header h2 { display: flex; align-items: center; gap: 10px; } .sidebar-menu { list-style: none; } .sidebar-menu li { margin-bottom: 5px; } .sidebar-menu a { display: block; padding: 12px 20px; color: white; text-decoration: none; transition: var(--transition); border-left: 4px solid transparent; } .sidebar-menu a:hover, .sidebar-menu a.active { background-color: var(--secondary); border-left-color: var(--info); } .sidebar-menu i { margin-right: 10px; width: 20px; text-align: center; } /* Menu hamburger pour mobile */ .menu-toggle { display: none; position: fixed; top: 15px; left: 15px; background-color: var(--primary); color: white; border: none; border-radius: 4px; width: 40px; height: 40px; z-index: 1100; font-size: 20px; } .main-content { margin-left: 250px; padding: 20px; transition: margin-left 0.3s ease; } .header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background-color: white; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); margin-bottom: 20px; border-radius: 5px; } .user-info { display: flex; align-items: center; gap: 10px; } .user-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; } .logout-btn { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 5px; } .page-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 15px; } .search-box { display: flex; align-items: center; background: white; border-radius: 5px; padding: 5px 15px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); flex-grow: 1; min-width: 200px; } .search-box input { border: none; padding: 8px; outline: none; width: 100%; } .btn { display: inline-block; padding: 10px 15px; border-radius: 5px; cursor: pointer; transition: var(--transition); font-weight: 600; text-align: center; border: none; } .btn-primary { background-color: var(--primary); color: white; } .btn-primary:hover { background-color: var(--secondary); } .btn-success { background-color: var(--success); color: white; } .btn-warning { background-color: var(--warning); color: var(--black); } .btn-danger { background-color: var(--danger); color: white; } .btn-info { background-color: var(--info); color: white; } .btn-sm { padding: 5px 10px; font-size: 12px; } .backup-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 30px; } .action-card { background-color: white; border-radius: 8px; padding: 25px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); text-align: center; } .action-icon { font-size: 40px; margin-bottom: 15px; color: var(--primary); } .action-title { font-size: 18px; font-weight: 600; margin-bottom: 10px; color: var(--primary); } .action-description { color: #666; margin-bottom: 20px; line-height: 1.5; } .backup-history { background-color: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); overflow-x: auto; margin-bottom: 20px; } table { width: 100%; border-collapse: collapse; min-width: 600px; } th, td { padding: 15px; text-align: left; border-bottom: 1px solid var(--accent); } th { background-color: var(--gray-light); font-weight: 600; color: var(--gray-dark); } tr:hover { background-color: var(--gray-light); } .badge { padding: 5px 10px; border-radius: 15px; font-size: 12px; font-weight: 600; } .badge-success { background-color: #d4edda; color: #155724; } .badge-warning { background-color: #fff3cd; color: #856404; } .badge-danger { background-color: #f8d7da; color: #721c24; } .badge-info { background-color: #d1ecf1; color: #0c5460; } .action-buttons { display: flex; gap: 10px; flex-wrap: wrap; } .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 2000; justify-content: center; align-items: center; padding: 20px; } .modal-content { background-color: white; border-radius: 8px; width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; padding: 20px; } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--accent); } .close-modal { background: none; border: none; font-size: 24px; cursor: pointer; } .modal-body { margin-bottom: 20px; } .modal-footer { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } .btn-cancel { background-color: #6c757d; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; } .btn-confirm { background-color: #dc3545; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; } .progress-bar { width: 100%; height: 20px; background-color: #f0f0f0; border-radius: 10px; overflow: hidden; margin: 15px 0; } .progress { height: 100%; background-color: var(--primary); width: 0%; transition: width 0.3s; } .progress-text { text-align: center; font-size: 14px; color: #666; } .file-input { display: none; } .file-label { display: inline-block; background-color: var(--primary); color: white; padding: 10px 15px; border-radius: 5px; cursor: pointer; margin-top: 10px; } .file-name { margin-top: 10px; font-size: 14px; color: #666; } .pagination { display: flex; justify-content: center; margin-top: 20px; gap: 5px; flex-wrap: wrap; } .pagination button { padding: 8px 12px; border: 1px solid var(--accent); background-color: white; cursor: pointer; border-radius: 4px; min-width: 40px; } .pagination button.active { background-color: var(--primary); color: white; border-color: var(--primary); } /* Media Queries pour la responsivité */ @media (max-width: 1024px) { .backup-actions { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } } @media (max-width: 900px) { .sidebar { transform: translateX(-100%); width: 250px; } .sidebar.open { transform: translateX(0); } .menu-toggle { display: flex; align-items: center; justify-content: center; } .main-content { margin-left: 0; padding-top: 70px; } } @media (max-width: 768px) { .header { flex-direction: column; align-items: flex-start; gap: 15px; } .backup-actions { grid-template-columns: 1fr; } .action-buttons { flex-direction: column; } .backup-history { border-radius: 0; box-shadow: none; } .modal { padding: 10px; } .modal-content { padding: 15px; } .modal-footer { justify-content: center; } .modal-footer button { width: 100%; } } @media (max-width: 480px) { .main-content { padding: 10px; padding-top: 70px; } .header { padding: 15px; } .action-card { padding: 15px; } .backup-history { padding: 15px; } th, td { padding: 10px; font-size: 14px; } .pagination button { padding: 6px 10px; min-width: 35px; } .user-info { flex-direction: column; align-items: flex-start; gap: 5px; } }

💾

Sauvegarde Manuelle

Créez une sauvegarde complète de toutes les données du système.

📥

Restaurer une Sauvegarde

Restaurer les données à partir d'un fichier de sauvegarde précédent.

📂 Choisir un fichier

Aucun fichier choisi

⚙️

Sauvegarde Automatique

Configurez les sauvegardes automatiques quotidiennes ou hebdomadaires.

Historique des Sauvegardes

Nom du fichier	Date	Taille	Type	Actions

CORD

Sauvegarde et Restauration

Sauvegarde Manuelle

Restaurer une Sauvegarde

Sauvegarde Automatique

Historique des Sauvegardes

Confirmation

Sauvegarde en cours