d66af7d99d
- Poignée de redimensionnement avec indicateur visuel permanent (3 points) - Largeur ajustable entre 280px et 600px - Sauvegarde automatique de la largeur préférée - Optimisations avec requestAnimationFrame pour la fluidité - Overlay pendant le drag pour capturer tous les mouvements - Indicateur change de couleur au survol (gris → violet)
167 lines
5.8 KiB
HTML
167 lines
5.8 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
|
||
autofocus
|
||
/>
|
||
<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>
|
||
|
||
<!-- Zone de notes rapides - Panneau latéral -->
|
||
<div id="notesSection" class="notes-section">
|
||
<div class="notes-resize-handle" id="notesResizeHandle"></div>
|
||
<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 pendant vos appels...
|
||
|
||
• Informations patient
|
||
• Motif de l'appel
|
||
• Actions à effectuer
|
||
• Remarques importantes"
|
||
></textarea>
|
||
<div class="notes-footer">
|
||
<button id="clearNotesBtn" class="btn-small btn-clear">Effacer</button>
|
||
<button id="saveNotesBtn" class="btn-small">Sauvegarder</button>
|
||
</div>
|
||
</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" id="logoutIcon">
|
||
<span>👋</span>
|
||
</div>
|
||
<div class="logout-spinner" id="logoutSpinner" style="display: none;">
|
||
<div class="spinner-ring"></div>
|
||
</div>
|
||
<h2 id="logoutTitle">Déconnexion</h2>
|
||
<p id="logoutText">Êtes-vous sûr de vouloir vous déconnecter ?</p>
|
||
<p class="logout-modal-subtitle" id="logoutSubtitle">Votre session sera fermée et vous devrez vous reconnecter.</p>
|
||
<div class="logout-modal-buttons" id="logoutButtons">
|
||
<button id="cancelLogoutBtn" class="btn-modal-cancel">Annuler</button>
|
||
<button id="confirmLogoutBtn" class="btn-modal-confirm">Se déconnecter</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal de progression de connexion -->
|
||
<div id="loginModal" class="modal-overlay">
|
||
<div class="login-progress-modal">
|
||
<div class="login-spinner">
|
||
<div class="spinner-ring"></div>
|
||
</div>
|
||
<h2 id="loginTitle">Connexion en cours...</h2>
|
||
<p id="loginText">Authentification auprès du serveur</p>
|
||
<p class="login-modal-subtitle" id="loginSubtitle">Veuillez patienter...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scripts -->
|
||
<script src="choices.min.js"></script>
|
||
<script src="renderer.js"></script>
|
||
</body>
|
||
</html>
|