da20170bef
- Nouvelle modal moderne avec design élégant et animations
- Icône emoji 👋 avec gradient violet et animation pulse
- Textes en français avec titre et description
- Fond flou avec overlay sombre pour meilleur focus
- Trois méthodes de fermeture : bouton, clic externe, Escape
- Suppression du popup système Electron
145 lines
4.9 KiB
HTML
145 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>SimpleConnect</title>
|
||
<link rel="stylesheet" href="choices.min.css" />
|
||
<link rel="stylesheet" href="styles-modern.css" />
|
||
</head>
|
||
<body>
|
||
<!-- Page de connexion -->
|
||
<div id="loginPage" class="page active">
|
||
<div class="login-container">
|
||
<h1>SimpleConnect</h1>
|
||
<div class="signalr-status">
|
||
<span class="signalr-indicator" id="signalrIndicator"></span>
|
||
<span class="signalr-text" id="signalrText"
|
||
>Connexion au serveur...</span
|
||
>
|
||
</div>
|
||
<h2>Connexion Agent</h2>
|
||
<form id="loginForm">
|
||
<input
|
||
type="text"
|
||
id="accessCode"
|
||
placeholder="Code d'accès"
|
||
required
|
||
/>
|
||
<input
|
||
type="password"
|
||
id="password"
|
||
placeholder="Mot de passe"
|
||
required
|
||
/>
|
||
<select id="terminal" required>
|
||
<option value="" placeholder>Chargement des postes...</option>
|
||
</select>
|
||
|
||
<!-- Option de déconnexion forcée -->
|
||
<div class="force-disconnect-container">
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="forceDisconnect" />
|
||
<span>Débloquer</span>
|
||
</label>
|
||
<small class="checkbox-hint"
|
||
>À cocher en cas de problème de connexion ou de session
|
||
bloquée.</small
|
||
>
|
||
</div>
|
||
|
||
<button type="submit">Se connecter</button>
|
||
<div id="loginError" class="error-message"></div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Page principale -->
|
||
<div id="mainPage" class="page">
|
||
|
||
<!-- Zone d'alerte appel entrant -->
|
||
<div id="incomingCallAlert" class="incoming-call-alert">
|
||
<div class="call-icon">📞</div>
|
||
<div class="call-info">
|
||
<div class="call-title">APPEL ENTRANT</div>
|
||
<div class="call-center" id="callCenterName"></div>
|
||
<div class="call-patient" id="callPatientInfo"></div>
|
||
</div>
|
||
<button id="acceptCallBtn" class="btn-accept">Prendre l'appel</button>
|
||
</div>
|
||
|
||
<!-- Header et onglets combinés -->
|
||
<header class="header-with-tabs">
|
||
<div class="header-left">
|
||
<h1>SimpleConnect</h1>
|
||
<span id="agentName" class="agent-name"></span>
|
||
</div>
|
||
|
||
<!-- Onglets des centres -->
|
||
<div class="tabs" id="centerTabs"></div>
|
||
|
||
<div class="header-right">
|
||
<div id="callStatus" class="call-status">
|
||
<span class="status-indicator" id="statusIndicator"></span>
|
||
<span id="statusText">Disponible</span>
|
||
</div>
|
||
<button id="refreshBtn" class="btn-icon" title="Rafraîchir la page">
|
||
<span class="icon-refresh">🔄</span>
|
||
</button>
|
||
<button id="toggleNotesBtn" class="btn-icon" title="Afficher/Masquer les notes">
|
||
<span class="icon-notes">📝</span>
|
||
</button>
|
||
<button id="logoutBtn" class="btn-secondary">Déconnexion</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Conteneur principal -->
|
||
<div class="main-container">
|
||
<!-- Zone principale avec les webviews -->
|
||
<main class="content">
|
||
|
||
<!-- Container des webviews -->
|
||
<div id="webviewContainer" class="webview-container">
|
||
<div class="no-center-selected">
|
||
<p>Sélectionnez un centre ou attendez un appel entrant</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Zone de notes rapides (masquable) -->
|
||
<div id="notesSection" class="notes-section">
|
||
<div class="notes-header">
|
||
<h4>Notes rapides</h4>
|
||
<button id="closeNotesBtn" class="btn-close-notes" title="Fermer">×</button>
|
||
</div>
|
||
<textarea
|
||
id="quickNotes"
|
||
placeholder="Prenez des notes ici..."
|
||
></textarea>
|
||
<button id="saveNotesBtn" class="btn-small">Sauvegarder</button>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal de confirmation de déconnexion -->
|
||
<div id="logoutModal" class="modal-overlay">
|
||
<div class="logout-modal">
|
||
<div class="logout-modal-icon">
|
||
<span>👋</span>
|
||
</div>
|
||
<h2>Déconnexion</h2>
|
||
<p>Êtes-vous sûr de vouloir vous déconnecter ?</p>
|
||
<p class="logout-modal-subtitle">Votre session sera fermée et vous devrez vous reconnecter.</p>
|
||
<div class="logout-modal-buttons">
|
||
<button id="cancelLogoutBtn" class="btn-modal-cancel">Annuler</button>
|
||
<button id="confirmLogoutBtn" class="btn-modal-confirm">Se déconnecter</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scripts -->
|
||
<script src="choices.min.js"></script>
|
||
<script src="renderer.js"></script>
|
||
</body>
|
||
</html>
|