c5a7ae3cc4
- Déplacement de la version sous le titre "SimpleConnect" au lieu d'à côté - Titre "SimpleConnect" maintenant parfaitement centré - Nouvelle classe CSS .app-version-login pour le style de la version - Version affichée en gris clair, centrée, taille 14px - Amélioration de l'esthétique de la page de connexion Fichiers modifiés : - index.html : restructuration avec div séparée pour la version - styles-modern.css : ajout du style .app-version-login
178 lines
6.6 KiB
HTML
178 lines
6.6 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="app-version-login" id="appVersionLogin"></div>
|
||
<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 <span id="appVersion" class="app-version"></span></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">
|
||
<svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M23 4v6h-6"></path>
|
||
<path d="M1 20v-6h6"></path>
|
||
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
|
||
</svg>
|
||
</button>
|
||
<button id="toggleNotesBtn" class="btn-icon" title="Afficher/Masquer les notes">
|
||
<svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
||
<polyline points="14 2 14 8 20 8"></polyline>
|
||
<line x1="16" y1="13" x2="8" y2="13"></line>
|
||
<line x1="16" y1="17" x2="8" y2="17"></line>
|
||
<polyline points="10 9 9 9 8 9"></polyline>
|
||
</svg>
|
||
</button>
|
||
<button id="logoutBtn" class="btn-secondary">Quitter</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>
|