checkbox clickable et modification des textes
This commit is contained in:
Pierre Marx
240
index.html
240
index.html
@@ -1,131 +1,153 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>SimpleConnect - Gestion Centralisée des Plannings</title>
|
||||
<link rel="stylesheet" href="choices.min.css">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<link rel="stylesheet" href="choices.min.css" />
|
||||
<link rel="stylesheet" href="styles.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éconnexion</span>
|
||||
</label>
|
||||
<small class="checkbox-hint">Cochez si vous rencontrez des problèmes de connexion ou si votre session est bloquée</small>
|
||||
</div>
|
||||
|
||||
<button type="submit">Se connecter</button>
|
||||
<div id="loginError" class="error-message"></div>
|
||||
</form>
|
||||
<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éconnexion</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">
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<div class="header-left">
|
||||
<h1>SimpleConnect</h1>
|
||||
<span id="agentName" class="agent-name"></span>
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<div id="callStatus" class="call-status">
|
||||
<span class="status-indicator" id="statusIndicator"></span>
|
||||
<span id="statusText">En attente</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<button id="simulateCallBtn" class="btn-secondary">Simuler un appel</button>
|
||||
<button id="logoutBtn" class="btn-secondary">Déconnexion</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 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>
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<div class="header-left">
|
||||
<h1>SimpleConnect</h1>
|
||||
<span id="agentName" class="agent-name"></span>
|
||||
</div>
|
||||
|
||||
<!-- Conteneur principal -->
|
||||
<div class="main-container">
|
||||
<!-- Sidebar avec la liste des centres -->
|
||||
<aside class="sidebar">
|
||||
<h3>Mes Centres</h3>
|
||||
<div id="centersList" class="centers-list"></div>
|
||||
<div class="sidebar-footer">
|
||||
<h4>Statistiques du jour</h4>
|
||||
<div id="dailyStats" class="daily-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">Appels traités:</span>
|
||||
<span class="stat-value" id="callCount">0</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">RDV pris:</span>
|
||||
<span class="stat-value" id="appointmentCount">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Zone principale avec les webviews -->
|
||||
<main class="content">
|
||||
<!-- Onglets des centres -->
|
||||
<div class="tabs" id="centerTabs"></div>
|
||||
|
||||
<!-- 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 -->
|
||||
<div class="notes-section">
|
||||
<h4>Notes rapides</h4>
|
||||
<textarea id="quickNotes" placeholder="Prenez des notes ici..."></textarea>
|
||||
<button id="saveNotesBtn" class="btn-small">Sauvegarder</button>
|
||||
</div>
|
||||
</main>
|
||||
<div class="header-center">
|
||||
<div id="callStatus" class="call-status">
|
||||
<span class="status-indicator" id="statusIndicator"></span>
|
||||
<span id="statusText">En attente</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<button id="simulateCallBtn" class="btn-secondary">
|
||||
Simuler un appel
|
||||
</button>
|
||||
<button id="logoutBtn" class="btn-secondary">Déconnexion</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Conteneur principal -->
|
||||
<div class="main-container">
|
||||
<!-- Sidebar avec la liste des centres -->
|
||||
<aside class="sidebar">
|
||||
<h3>Mes Centres</h3>
|
||||
<div id="centersList" class="centers-list"></div>
|
||||
<div class="sidebar-footer">
|
||||
<h4>Statistiques du jour</h4>
|
||||
<div id="dailyStats" class="daily-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">Appels traités:</span>
|
||||
<span class="stat-value" id="callCount">0</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">RDV pris:</span>
|
||||
<span class="stat-value" id="appointmentCount">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Zone principale avec les webviews -->
|
||||
<main class="content">
|
||||
<!-- Onglets des centres -->
|
||||
<div class="tabs" id="centerTabs"></div>
|
||||
|
||||
<!-- 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 -->
|
||||
<div class="notes-section">
|
||||
<h4>Notes rapides</h4>
|
||||
<textarea
|
||||
id="quickNotes"
|
||||
placeholder="Prenez des notes ici..."
|
||||
></textarea>
|
||||
<button id="saveNotesBtn" class="btn-small">Sauvegarder</button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal de simulation d'appel -->
|
||||
<div id="callSimulationModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2>Simuler un appel entrant</h2>
|
||||
<div id="simulatedCallsList" class="simulated-calls-list"></div>
|
||||
<button id="customCallBtn" class="btn-secondary">Appel personnalisé</button>
|
||||
</div>
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2>Simuler un appel entrant</h2>
|
||||
<div id="simulatedCallsList" class="simulated-calls-list"></div>
|
||||
<button id="customCallBtn" class="btn-secondary">
|
||||
Appel personnalisé
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="choices.min.js"></script>
|
||||
<script src="renderer.js"></script>
|
||||
<script src="cti-simulator.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -127,7 +127,7 @@ async function handleLogin(e) {
|
||||
|
||||
// Désactiver le bouton pendant la connexion
|
||||
loginBtn.disabled = true;
|
||||
loginBtn.textContent = forceDisconnect ? 'Déconnexion forcée et reconnexion...' : 'Connexion en cours...';
|
||||
loginBtn.textContent = forceDisconnect ? 'Reconnexion...' : 'Connexion en cours...';
|
||||
errorDiv.textContent = '';
|
||||
|
||||
try {
|
||||
|
||||
22
styles.css
22
styles.css
@@ -408,8 +408,11 @@ body {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
left: 0;
|
||||
top: 1px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Checkbox personnalisée */
|
||||
@@ -427,14 +430,21 @@ body {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Checkbox cochée */
|
||||
.checkbox-label input[type="checkbox"]:checked ~ ::before {
|
||||
/* Checkbox cochée - fond violet */
|
||||
.checkbox-label input[type="checkbox"]:checked + span::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: #667eea;
|
||||
border-color: #667eea;
|
||||
border: 2px solid #667eea;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Icône de check */
|
||||
.checkbox-label input[type="checkbox"]:checked ~ ::after {
|
||||
.checkbox-label input[type="checkbox"]:checked + span::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
|
||||
Reference in New Issue
Block a user