4nk/ihm_client
5
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix pairing page display and structure

Browse Source 
**Motivations :**
- La page de pairing avait des problèmes d'affichage dus à des conflits de styles
- Le contenu de home.html était injecté de manière incorrecte
- La structure HTML n'était pas cohérente avec les autres pages

**Modifications :**
- Refactorisé pairing.html avec une structure complète et des styles cohérents
- Ajouté des styles spécifiques pour le contenu de pairing (cards, status indicators, etc.)
- Modifié pairing.ts pour injecter le contenu dans le bon conteneur (pairingContainer)
- Amélioré la lisibilité et l'organisation du code

**Pages affectées :**
- src/pages/pairing/pairing.html
- src/pages/pairing/pairing.ts
This commit is contained in:
NicolasCantu 2025-10-29 22:58:16 +01:00
parent b8e5ae3088
commit df835332e5
2 changed files with 103 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/pages/pairing/pairing.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pairing - LeCoffre</title>
<title>Pairing - 4NK</title>
<link rel="stylesheet" href="../../4nk.css">
<style>
body {
@ -22,7 +22,7 @@
border-radius: 12px;
padding: 40px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
max-width: 600px;
max-width: 800px;
width: 100%;
}
@ -67,8 +67,103 @@
color: #c62828;
}
.content-area {
min-height: 200px;
/* Styles pour le contenu de pairing */
.pairing-container {
margin-top: 20px;
}
.card {
background: #f8f9fa;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
border: 1px solid #e9ecef;
}
.card-header h2 {
margin: 0 0 10px 0;
color: #333;
font-size: 1.5rem;
}
.card-description {
color: #666;
margin: 0 0 20px 0;
}
.status-container {
margin: 20px 0;
}
.status-indicator {
padding: 15px;
border-radius: 6px;
text-align: center;
font-weight: 500;
}
.status-indicator.loading {
background: #e3f2fd;
color: #1976d2;
}
.status-indicator.success {
background: #e8f5e8;
color: #2e7d32;
}
.status-indicator.error {
background: #ffebee;
color: #c62828;
}
.account-actions {
text-align: center;
margin-top: 20px;
}
.danger-btn {
background: #dc3545;
color: white;
border: none;
padding: 10px 20px;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
}
.danger-btn:hover {
background: #c82333;
}
.pairing-request {
margin: 20px 0;
padding: 15px;
background: #f8f9fa;
border-radius: 6px;
border-left: 4px solid #007bff;
}
.debug-info {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 6px;
padding: 15px;
margin: 20px 0;
font-family: monospace;
font-size: 0.9rem;
}
.debug-info h3 {
margin: 0 0 10px 0;
color: #333;
font-size: 1rem;
}
.debug-info pre {
margin: 0;
white-space: pre-wrap;
word-break: break-all;
}
</style>
</head>
@ -81,7 +176,7 @@
🔄 Initialisation en cours...
</div>
<div class="content-area" id="contentArea">
<div class="pairing-container" id="pairingContainer">
<!-- Le contenu de pairing sera injecté ici -->
</div>
</div>

5
src/pages/pairing/pairing.ts
View File

@ -91,8 +91,9 @@ document.addEventListener('DOMContentLoaded', async () => {
updateStatus('🔄 Initialisation du pairing...', 'loading');
// Injecter le contenu de pairing dans la zone de contenu
if (contentArea) {
contentArea.innerHTML = loginHtml;
const pairingContainer = document.getElementById('pairingContainer');
if (pairingContainer) {
pairingContainer.innerHTML = loginHtml;
}
// Importer et initialiser la logique de pairing depuis home.ts