NicolasCantu
2b9b9771e1
**Motivations :** - forceWalletGeneration() recréait un wallet vierge au lieu d'utiliser le wallet préparé - Les pages avaient des styles incohérents et des problèmes d'affichage - Besoin d'un template standardisé pour toutes les pages d'initialisation **Modifications :** - service.ts : Suppression de forceWalletGeneration() dans restoreDevice() - src/templates/page-template.html : Template HTML standardisé pour toutes les pages - src/utils/page-template.utils.ts : Classe utilitaire pour gérer le template - src/pages/pairing/pairing.html : Refonte avec le template standardisé - src/pages/pairing/pairing.ts : Utilisation du template avec PageTemplate - src/pages/block-sync/block-sync.html : Refonte avec le template standardisé - src/pages/block-sync/block-sync.ts : Utilisation du template avec PageTemplate **Pages affectées :** - src/services/service.ts : Suppression de la génération forcée de wallet - src/templates/ : Nouveau template standardisé - src/utils/page-template.utils.ts : Nouvelle classe utilitaire - src/pages/pairing/ : Refonte complète avec template - src/pages/block-sync/ : Refonte complète avec template
200 lines
4.9 KiB
HTML
200 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{PAGE_TITLE}} - LeCoffre</title>
|
|
<link rel="stylesheet" href="../../4nk.css">
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.container {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 40px;
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
|
max-width: 600px;
|
|
width: 100%;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.subtitle {
|
|
text-align: center;
|
|
color: #666;
|
|
margin-bottom: 30px;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.status {
|
|
text-align: center;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
font-size: 1rem;
|
|
min-height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.status.loading {
|
|
background: #e3f2fd;
|
|
color: #1976d2;
|
|
}
|
|
|
|
.status.success {
|
|
background: #e8f5e8;
|
|
color: #2e7d32;
|
|
}
|
|
|
|
.status.error {
|
|
background: #ffebee;
|
|
color: #c62828;
|
|
}
|
|
|
|
.progress-container {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 8px;
|
|
background: #e0e0e0;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #4caf50, #8bc34a);
|
|
width: 0%;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.steps-container {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.step-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.step-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.step-label {
|
|
flex: 1;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
|
|
.step-value {
|
|
font-weight: 600;
|
|
color: #666;
|
|
}
|
|
|
|
.step-status {
|
|
margin-left: 10px;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.step-status.pending {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
|
|
.step-status.completed {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.step-status.error {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
|
|
.continue-btn {
|
|
width: 100%;
|
|
padding: 15px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.continue-btn:hover:not(:disabled) {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
|
|
}
|
|
|
|
.continue-btn:disabled {
|
|
background: #ccc;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.content-area {
|
|
min-height: 200px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>{{PAGE_ICON}} {{PAGE_TITLE}}</h1>
|
|
<p class="subtitle">{{PAGE_SUBTITLE}}</p>
|
|
|
|
<div class="status loading" id="status">
|
|
{{INITIAL_STATUS}}
|
|
</div>
|
|
|
|
<div class="progress-container" id="progressContainer" style="display: none;">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progressFill"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="steps-container" id="stepsContainer" style="display: none;">
|
|
<!-- Les étapes seront injectées ici dynamiquement -->
|
|
</div>
|
|
|
|
<div class="content-area" id="contentArea">
|
|
<!-- Le contenu spécifique à la page sera injecté ici -->
|
|
</div>
|
|
|
|
<button class="continue-btn" id="continueBtn" style="display: none;">
|
|
{{CONTINUE_BUTTON_TEXT}}
|
|
</button>
|
|
</div>
|
|
|
|
<script type="module" src="{{SCRIPT_PATH}}"></script>
|
|
</body>
|
|
</html>
|