<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Browser Manager MCP - Tableau de Bord Professionnel</title>
<style>
/* Base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #374151;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
/* Loading spinner */
.loading-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: white;
}
.spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f4f6;
border-top: 4px solid #3b82f6;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-text {
margin-top: 16px;
color: #6b7280;
font-size: 14px;
}
/* Error state */
.error-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background: white;
padding: 20px;
text-align: center;
}
.error-icon {
width: 64px;
height: 64px;
color: #ef4444;
margin-bottom: 16px;
}
.error-title {
font-size: 20px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
}
.error-message {
color: #6b7280;
margin-bottom: 24px;
max-width: 400px;
}
.retry-button {
background: #3b82f6;
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s;
}
.retry-button:hover {
background: #2563eb;
}
/* Hide main content initially */
#root {
display: none;
}
#root.loaded {
display: block;
}
</style>
</head>
<body>
<!-- Loading State -->
<div id="loading" class="loading-container">
<div>
<div class="spinner"></div>
<div class="loading-text">Chargement du tableau de bord professionnel...</div>
</div>
</div>
<!-- Error State -->
<div id="error" class="error-container" style="display: none;">
<svg class="error-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<h2 class="error-title">Erreur de chargement</h2>
<p class="error-message">
Une erreur est survenue lors du chargement du tableau de bord. Veuillez réessayer.
</p>
<button class="retry-button" id="retryButton">Réessayer</button>
</div>
<!-- Main React App -->
<div id="root"></div>
<!-- External Loader Script (CSP compliant) -->
<script src="./status-loader.js" defer></script>
</body>
</html>