refactor: Refonte majeure de l'interface utilisateur (v1.2.0)
SUPPRESSIONS:
- Sidebar latérale gauche complètement retirée
- Statistiques du jour supprimées
- Bouton et modal de simulation d'appel supprimés
- Scrollbars visibles masquées
AJOUTS:
- Zone de notes dynamique avec toggle via bouton 📝
- Sauvegarde des préférences dans localStorage
- Nouveau design moderne avec styles-modern.css
AMÉLIORATIONS:
- Interface épurée maximisant l'espace pour les webviews
- Onglets style Material Design avec animations
- Meilleure gestion de l'espace avec calc() CSS
- Code HTML et JavaScript nettoyé et simplifié
This commit is contained in:
Pierre Marx
@@ -1,5 +1,53 @@
|
|||||||
# Changelog - SimpleConnect Electron
|
# Changelog - SimpleConnect Electron
|
||||||
|
|
||||||
|
## [1.2.0] - 2025-09-04
|
||||||
|
|
||||||
|
### Supprimé
|
||||||
|
- **Sidebar latérale gauche** : Interface simplifiée avec suppression complète du panneau latéral
|
||||||
|
- Plus de liste des centres dans la sidebar (navigation uniquement par onglets)
|
||||||
|
- Suppression des statistiques du jour (appels traités et RDV pris)
|
||||||
|
- Gain d'espace significatif pour l'affichage des webviews
|
||||||
|
- **Bouton "Simuler un appel"** : Fonctionnalité de simulation retirée
|
||||||
|
- Suppression du bouton dans le header
|
||||||
|
- Modal de simulation complètement retirée
|
||||||
|
- Code JavaScript associé nettoyé (fonctions showCallSimulation, loadSimulatedCalls, etc.)
|
||||||
|
- Référence au script cti-simulator.js supprimée
|
||||||
|
- **Scrollbars visibles** : Masquage complet des barres de défilement
|
||||||
|
- Scrollbar verticale supprimée via overflow: hidden
|
||||||
|
- Scrollbar horizontale des onglets masquée (reste fonctionnelle au scroll)
|
||||||
|
|
||||||
|
### Ajouté
|
||||||
|
- **Zone de notes dynamique** : Panneau de notes rapides affichable/masquable
|
||||||
|
- Nouveau bouton 📝 dans le header pour toggle les notes
|
||||||
|
- Animation fluide de glissement depuis le bas de l'écran
|
||||||
|
- Bouton × pour fermer rapidement le panneau
|
||||||
|
- Sauvegarde automatique des préférences dans localStorage
|
||||||
|
- Panneau masqué par défaut pour maximiser l'espace de travail
|
||||||
|
|
||||||
|
### Modifié
|
||||||
|
- **Interface modernisée** : Refonte complète du design
|
||||||
|
- Nouveau fichier styles-modern.css remplaçant l'ancien styles.css
|
||||||
|
- Header épuré avec ombres subtiles et animations
|
||||||
|
- Onglets style Material Design avec indicateur actif coloré
|
||||||
|
- Boutons avec effets hover et transitions fluides
|
||||||
|
- Palette de couleurs plus moderne et contrastée
|
||||||
|
- Animations et transitions ajoutées partout
|
||||||
|
- **Optimisation de l'espace** : Meilleure utilisation de l'écran
|
||||||
|
- Les webviews occupent maintenant toute la largeur disponible
|
||||||
|
- Hauteurs calculées précisément avec calc() CSS
|
||||||
|
- Interface responsive et adaptative
|
||||||
|
- **Structure HTML simplifiée** : Code plus propre et maintenable
|
||||||
|
- Suppression des éléments DOM liés à la sidebar
|
||||||
|
- Suppression de la modal de simulation
|
||||||
|
- Organisation plus claire des sections
|
||||||
|
|
||||||
|
### Technique
|
||||||
|
- Gestion des préférences utilisateur via localStorage
|
||||||
|
- Fonctions JavaScript ajoutées : toggleNotes(), showNotes(), hideNotes(), loadUserPreferences()
|
||||||
|
- CSS moderne avec animations @keyframes et transitions
|
||||||
|
- Masquage des scrollbars compatible tous navigateurs (webkit, Firefox, IE/Edge)
|
||||||
|
- Hauteurs calculées dynamiquement pour éviter les débordements
|
||||||
|
|
||||||
## [1.1.3] - 2025-09-04
|
## [1.1.3] - 2025-09-04
|
||||||
|
|
||||||
### Modifié
|
### Modifié
|
||||||
|
|||||||
45
index.html
45
index.html
@@ -5,7 +5,7 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>SimpleConnect</title>
|
<title>SimpleConnect</title>
|
||||||
<link rel="stylesheet" href="choices.min.css" />
|
<link rel="stylesheet" href="choices.min.css" />
|
||||||
<link rel="stylesheet" href="styles.css" />
|
<link rel="stylesheet" href="styles-modern.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Page de connexion -->
|
<!-- Page de connexion -->
|
||||||
@@ -69,8 +69,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-right">
|
<div class="header-right">
|
||||||
<button id="simulateCallBtn" class="btn-secondary">
|
<button id="toggleNotesBtn" class="btn-icon" title="Afficher/Masquer les notes">
|
||||||
Simuler un appel
|
<span class="icon-notes">📝</span>
|
||||||
</button>
|
</button>
|
||||||
<button id="logoutBtn" class="btn-secondary">Déconnexion</button>
|
<button id="logoutBtn" class="btn-secondary">Déconnexion</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -89,25 +89,6 @@
|
|||||||
|
|
||||||
<!-- Conteneur principal -->
|
<!-- Conteneur principal -->
|
||||||
<div class="main-container">
|
<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 -->
|
<!-- Zone principale avec les webviews -->
|
||||||
<main class="content">
|
<main class="content">
|
||||||
<!-- Onglets des centres -->
|
<!-- Onglets des centres -->
|
||||||
@@ -120,9 +101,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Zone de notes rapides -->
|
<!-- Zone de notes rapides (masquable) -->
|
||||||
<div class="notes-section">
|
<div id="notesSection" class="notes-section">
|
||||||
|
<div class="notes-header">
|
||||||
<h4>Notes rapides</h4>
|
<h4>Notes rapides</h4>
|
||||||
|
<button id="closeNotesBtn" class="btn-close-notes" title="Fermer">×</button>
|
||||||
|
</div>
|
||||||
<textarea
|
<textarea
|
||||||
id="quickNotes"
|
id="quickNotes"
|
||||||
placeholder="Prenez des notes ici..."
|
placeholder="Prenez des notes ici..."
|
||||||
@@ -133,21 +117,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
|
||||||
|
|
||||||
<!-- Scripts -->
|
<!-- Scripts -->
|
||||||
<script src="choices.min.js"></script>
|
<script src="choices.min.js"></script>
|
||||||
<script src="renderer.js"></script>
|
<script src="renderer.js"></script>
|
||||||
<script src="cti-simulator.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
168
renderer.js
168
renderer.js
@@ -49,18 +49,27 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||||||
logoutBtn.addEventListener('click', handleLogout);
|
logoutBtn.addEventListener('click', handleLogout);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Bouton simulation d'appel
|
|
||||||
const simulateBtn = document.getElementById('simulateCallBtn');
|
|
||||||
if (simulateBtn) {
|
|
||||||
simulateBtn.addEventListener('click', showCallSimulation);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Bouton sauvegarder notes
|
// Bouton sauvegarder notes
|
||||||
const saveNotesBtn = document.getElementById('saveNotesBtn');
|
const saveNotesBtn = document.getElementById('saveNotesBtn');
|
||||||
if (saveNotesBtn) {
|
if (saveNotesBtn) {
|
||||||
saveNotesBtn.addEventListener('click', saveNotes);
|
saveNotesBtn.addEventListener('click', saveNotes);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Bouton toggle notes
|
||||||
|
const toggleNotesBtn = document.getElementById('toggleNotesBtn');
|
||||||
|
if (toggleNotesBtn) {
|
||||||
|
toggleNotesBtn.addEventListener('click', toggleNotes);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bouton fermer notes
|
||||||
|
const closeNotesBtn = document.getElementById('closeNotesBtn');
|
||||||
|
if (closeNotesBtn) {
|
||||||
|
closeNotesBtn.addEventListener('click', hideNotes);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Charger les préférences utilisateur
|
||||||
|
loadUserPreferences();
|
||||||
|
|
||||||
// Écouter les appels entrants
|
// Écouter les appels entrants
|
||||||
ipcRenderer.on('incoming-call', (event, callData) => {
|
ipcRenderer.on('incoming-call', (event, callData) => {
|
||||||
handleIncomingCall(callData);
|
handleIncomingCall(callData);
|
||||||
@@ -193,31 +202,15 @@ function showMainPage() {
|
|||||||
|
|
||||||
// === GESTION DES CENTRES ===
|
// === GESTION DES CENTRES ===
|
||||||
function initializeCenters() {
|
function initializeCenters() {
|
||||||
const centersList = document.getElementById('centersList');
|
|
||||||
const centerTabs = document.getElementById('centerTabs');
|
const centerTabs = document.getElementById('centerTabs');
|
||||||
const webviewContainer = document.getElementById('webviewContainer');
|
const webviewContainer = document.getElementById('webviewContainer');
|
||||||
|
|
||||||
// Vider les contenus existants
|
// Vider les contenus existants
|
||||||
centersList.innerHTML = '';
|
|
||||||
centerTabs.innerHTML = '';
|
centerTabs.innerHTML = '';
|
||||||
webviewContainer.innerHTML = '';
|
webviewContainer.innerHTML = '';
|
||||||
|
|
||||||
// Créer la liste des centres et les onglets
|
// Créer les onglets et webviews
|
||||||
currentCentres.forEach(centre => {
|
currentCentres.forEach(centre => {
|
||||||
// Élément dans la sidebar
|
|
||||||
const centerItem = document.createElement('div');
|
|
||||||
centerItem.className = 'center-item';
|
|
||||||
centerItem.dataset.centerId = centre.id;
|
|
||||||
centerItem.innerHTML = `
|
|
||||||
<div class="center-indicator" style="background-color: ${centre.couleur}"></div>
|
|
||||||
<div class="center-info">
|
|
||||||
<div class="center-name">${centre.nom}</div>
|
|
||||||
<div class="center-phone">${centre.telephone}</div>
|
|
||||||
</div>
|
|
||||||
<div class="center-status" id="status-${centre.id}">●</div>
|
|
||||||
`;
|
|
||||||
centerItem.addEventListener('click', () => selectCenter(centre.id));
|
|
||||||
centersList.appendChild(centerItem);
|
|
||||||
|
|
||||||
// Onglet
|
// Onglet
|
||||||
const tab = document.createElement('div');
|
const tab = document.createElement('div');
|
||||||
@@ -261,7 +254,6 @@ function initializeCenters() {
|
|||||||
// Gérer les événements de la webview
|
// Gérer les événements de la webview
|
||||||
webview.addEventListener('dom-ready', () => {
|
webview.addEventListener('dom-ready', () => {
|
||||||
console.log(`Webview ${centre.nom} prête`);
|
console.log(`Webview ${centre.nom} prête`);
|
||||||
document.getElementById(`status-${centre.id}`).style.color = '#4CAF50';
|
|
||||||
|
|
||||||
// Auto-connexion si credentials disponibles
|
// Auto-connexion si credentials disponibles
|
||||||
if (centre.credentials && centre.credentials.username) {
|
if (centre.credentials && centre.credentials.username) {
|
||||||
@@ -280,7 +272,6 @@ function initializeCenters() {
|
|||||||
|
|
||||||
webview.addEventListener('did-fail-load', (e) => {
|
webview.addEventListener('did-fail-load', (e) => {
|
||||||
console.error(`Erreur chargement ${centre.nom}:`, e);
|
console.error(`Erreur chargement ${centre.nom}:`, e);
|
||||||
document.getElementById(`status-${centre.id}`).style.color = '#FF5252';
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -290,11 +281,6 @@ function selectCenter(centerId) {
|
|||||||
// Mettre à jour le centre actif
|
// Mettre à jour le centre actif
|
||||||
activeCenter = centerId;
|
activeCenter = centerId;
|
||||||
|
|
||||||
// Mettre à jour l'UI
|
|
||||||
document.querySelectorAll('.center-item').forEach(item => {
|
|
||||||
item.classList.toggle('active', item.dataset.centerId === centerId);
|
|
||||||
});
|
|
||||||
|
|
||||||
document.querySelectorAll('.tab').forEach(tab => {
|
document.querySelectorAll('.tab').forEach(tab => {
|
||||||
tab.classList.toggle('active', tab.dataset.centerId === centerId);
|
tab.classList.toggle('active', tab.dataset.centerId === centerId);
|
||||||
});
|
});
|
||||||
@@ -365,7 +351,6 @@ function acceptCall(callData, centre) {
|
|||||||
|
|
||||||
// Incrémenter les stats
|
// Incrémenter les stats
|
||||||
callStats.calls++;
|
callStats.calls++;
|
||||||
document.getElementById('callCount').textContent = callStats.calls;
|
|
||||||
|
|
||||||
// Sauvegarder l'appel dans l'historique
|
// Sauvegarder l'appel dans l'historique
|
||||||
ipcRenderer.invoke('save-call-history', {
|
ipcRenderer.invoke('save-call-history', {
|
||||||
@@ -384,53 +369,8 @@ function acceptCall(callData, centre) {
|
|||||||
function endCall() {
|
function endCall() {
|
||||||
updateStatus('available');
|
updateStatus('available');
|
||||||
callStats.appointments++;
|
callStats.appointments++;
|
||||||
document.getElementById('appointmentCount').textContent = callStats.appointments;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// === SIMULATION D'APPELS ===
|
|
||||||
function showCallSimulation() {
|
|
||||||
const modal = document.getElementById('callSimulationModal');
|
|
||||||
modal.style.display = 'block';
|
|
||||||
|
|
||||||
// Charger les appels simulés
|
|
||||||
loadSimulatedCalls();
|
|
||||||
|
|
||||||
// Fermer la modal
|
|
||||||
modal.querySelector('.close').onclick = () => {
|
|
||||||
modal.style.display = 'none';
|
|
||||||
};
|
|
||||||
|
|
||||||
// Appel personnalisé
|
|
||||||
document.getElementById('customCallBtn').onclick = () => {
|
|
||||||
const customCall = {
|
|
||||||
numero: prompt('Numéro de téléphone:'),
|
|
||||||
nom: prompt('Nom du patient:'),
|
|
||||||
centreId: currentCentres[0]?.id
|
|
||||||
};
|
|
||||||
if (customCall.numero) {
|
|
||||||
ipcRenderer.invoke('simulate-call', customCall);
|
|
||||||
modal.style.display = 'none';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
async function loadSimulatedCalls() {
|
|
||||||
const calls = await ipcRenderer.invoke('get-simulated-calls');
|
|
||||||
const listDiv = document.getElementById('simulatedCallsList');
|
|
||||||
|
|
||||||
listDiv.innerHTML = calls.map(call => `
|
|
||||||
<div class="simulated-call-item" onclick="simulateThisCall('${JSON.stringify(call).replace(/'/g, "\\'")}')">
|
|
||||||
<div class="call-name">${call.nom}</div>
|
|
||||||
<div class="call-details">${call.numero} - ${call.centreNom}</div>
|
|
||||||
</div>
|
|
||||||
`).join('');
|
|
||||||
}
|
|
||||||
|
|
||||||
window.simulateThisCall = function(callDataStr) {
|
|
||||||
const callData = JSON.parse(callDataStr);
|
|
||||||
ipcRenderer.invoke('simulate-call', callData);
|
|
||||||
document.getElementById('callSimulationModal').style.display = 'none';
|
|
||||||
};
|
|
||||||
|
|
||||||
// === UTILITAIRES ===
|
// === UTILITAIRES ===
|
||||||
function updateStatus(status, details = '') {
|
function updateStatus(status, details = '') {
|
||||||
@@ -529,15 +469,8 @@ function showNotification(message, type = 'info') {
|
|||||||
|
|
||||||
// Fonction pour mettre à jour les statistiques d'appels
|
// Fonction pour mettre à jour les statistiques d'appels
|
||||||
function updateCallStats() {
|
function updateCallStats() {
|
||||||
const callCountElement = document.getElementById('callCount');
|
// Statistiques supprimées de l'interface
|
||||||
const appointmentCountElement = document.getElementById('appointmentCount');
|
console.log('Stats:', { calls: callStats.calls, appointments: callStats.appointments });
|
||||||
|
|
||||||
if (callCountElement) {
|
|
||||||
callCountElement.textContent = callStats.calls;
|
|
||||||
}
|
|
||||||
if (appointmentCountElement) {
|
|
||||||
appointmentCountElement.textContent = callStats.appointments;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function saveNotes() {
|
async function saveNotes() {
|
||||||
@@ -701,6 +634,71 @@ function validateTerminal(terminal) {
|
|||||||
return availableTerminals.map(t => t.toString()).includes(terminal.toString());
|
return availableTerminals.map(t => t.toString()).includes(terminal.toString());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// === GESTION DES NOTES DYNAMIQUES ===
|
||||||
|
function toggleNotes() {
|
||||||
|
const notesSection = document.getElementById('notesSection');
|
||||||
|
const toggleBtn = document.getElementById('toggleNotesBtn');
|
||||||
|
|
||||||
|
if (notesSection.classList.contains('visible')) {
|
||||||
|
hideNotes();
|
||||||
|
} else {
|
||||||
|
showNotes();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showNotes() {
|
||||||
|
const notesSection = document.getElementById('notesSection');
|
||||||
|
const toggleBtn = document.getElementById('toggleNotesBtn');
|
||||||
|
|
||||||
|
notesSection.classList.add('visible');
|
||||||
|
toggleBtn.classList.add('active');
|
||||||
|
|
||||||
|
// Sauvegarder la préférence
|
||||||
|
localStorage.setItem('notesVisible', 'true');
|
||||||
|
|
||||||
|
// Focus sur le textarea
|
||||||
|
document.getElementById('quickNotes').focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideNotes() {
|
||||||
|
const notesSection = document.getElementById('notesSection');
|
||||||
|
const toggleBtn = document.getElementById('toggleNotesBtn');
|
||||||
|
|
||||||
|
notesSection.classList.remove('visible');
|
||||||
|
toggleBtn.classList.remove('active');
|
||||||
|
|
||||||
|
// Sauvegarder la préférence
|
||||||
|
localStorage.setItem('notesVisible', 'false');
|
||||||
|
}
|
||||||
|
|
||||||
|
// === GESTION DES PRÉFÉRENCES UTILISATEUR ===
|
||||||
|
function loadUserPreferences() {
|
||||||
|
// Charger l'état des notes
|
||||||
|
const notesVisible = localStorage.getItem('notesVisible');
|
||||||
|
if (notesVisible === 'true') {
|
||||||
|
// On n'affiche pas automatiquement les notes au démarrage
|
||||||
|
// L'utilisateur devra cliquer pour les afficher
|
||||||
|
}
|
||||||
|
|
||||||
|
// Charger d'autres préférences si nécessaire
|
||||||
|
const lastTheme = localStorage.getItem('theme');
|
||||||
|
if (lastTheme) {
|
||||||
|
document.body.setAttribute('data-theme', lastTheme);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveUserPreferences() {
|
||||||
|
// Cette fonction peut être étendue pour sauvegarder d'autres préférences
|
||||||
|
const preferences = {
|
||||||
|
notesVisible: document.getElementById('notesSection').classList.contains('visible'),
|
||||||
|
theme: document.body.getAttribute('data-theme') || 'light'
|
||||||
|
};
|
||||||
|
|
||||||
|
Object.keys(preferences).forEach(key => {
|
||||||
|
localStorage.setItem(key, preferences[key]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// === GESTION INDICATEUR SIGNALR ===
|
// === GESTION INDICATEUR SIGNALR ===
|
||||||
function updateSignalRIndicator(status) {
|
function updateSignalRIndicator(status) {
|
||||||
const indicator = document.getElementById('signalrIndicator');
|
const indicator = document.getElementById('signalrIndicator');
|
||||||
|
|||||||
839
styles-modern.css
Normal file
839
styles-modern.css
Normal file
@@ -0,0 +1,839 @@
|
|||||||
|
/* === RESET ET BASE === */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||||||
|
background: #f5f5f5;
|
||||||
|
color: #333;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === ANIMATIONS === */
|
||||||
|
@keyframes slideIn {
|
||||||
|
from {
|
||||||
|
transform: translateX(100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateX(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideOut {
|
||||||
|
from {
|
||||||
|
transform: translateX(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateX(100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideUp {
|
||||||
|
from {
|
||||||
|
transform: translateY(100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideDown {
|
||||||
|
from {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateY(100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
0% {
|
||||||
|
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
|
||||||
|
}
|
||||||
|
70% {
|
||||||
|
box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === PAGES === */
|
||||||
|
.page {
|
||||||
|
display: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page.active {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === PAGE DE CONNEXION === */
|
||||||
|
#loginPage {
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-container {
|
||||||
|
background: white;
|
||||||
|
padding: 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
||||||
|
width: 90%;
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-container h1 {
|
||||||
|
text-align: center;
|
||||||
|
color: #667eea;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Indicateur de statut SignalR */
|
||||||
|
.signalr-status {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
margin: 15px 0;
|
||||||
|
padding: 10px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signalr-indicator {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #ccc;
|
||||||
|
transition: background 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signalr-indicator.connected {
|
||||||
|
background: #4CAF50;
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signalr-indicator.connecting {
|
||||||
|
background: #FFC107;
|
||||||
|
animation: pulse 1s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signalr-indicator.disconnected,
|
||||||
|
.signalr-indicator.error {
|
||||||
|
background: #F44336;
|
||||||
|
}
|
||||||
|
|
||||||
|
.signalr-indicator.disabled {
|
||||||
|
background: #9E9E9E;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-container h2 {
|
||||||
|
text-align: center;
|
||||||
|
color: #333;
|
||||||
|
margin: 20px 0;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginForm input,
|
||||||
|
#loginForm select {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginForm button {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
background: #667eea;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginForm button:hover {
|
||||||
|
background: #5a6fd8;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loginForm button:disabled {
|
||||||
|
background: #a8b0e8;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
color: #e74c3c;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Checkbox de déconnexion forcée */
|
||||||
|
.force-disconnect-container {
|
||||||
|
margin: 25px 0 20px 0;
|
||||||
|
padding: 16px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.force-disconnect-container:hover {
|
||||||
|
border-color: #dee2e6;
|
||||||
|
background: #f1f3f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-label {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-label input[type="checkbox"] {
|
||||||
|
position: absolute;
|
||||||
|
opacity: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
left: 0;
|
||||||
|
top: 1px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-label::before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
margin-right: 12px;
|
||||||
|
margin-top: 1px;
|
||||||
|
border: 2px solid #dee2e6;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: white;
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-label input[type="checkbox"]:checked + span::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 1px;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
background: #667eea;
|
||||||
|
border: 2px solid #667eea;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-label input[type="checkbox"]:checked + span::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 6px;
|
||||||
|
top: 4px;
|
||||||
|
width: 6px;
|
||||||
|
height: 11px;
|
||||||
|
border: solid white;
|
||||||
|
border-width: 0 2px 2px 0;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-label span {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #495057;
|
||||||
|
letter-spacing: 0.3px;
|
||||||
|
padding-top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-hint {
|
||||||
|
display: block;
|
||||||
|
margin-top: 6px;
|
||||||
|
margin-left: 30px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #6c757d;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === PAGE PRINCIPALE === */
|
||||||
|
#mainPage {
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === HEADER === */
|
||||||
|
header {
|
||||||
|
background: white;
|
||||||
|
padding: 15px 30px;
|
||||||
|
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 1000;
|
||||||
|
min-height: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-left h1 {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #667eea;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.agent-name {
|
||||||
|
font-size: 16px;
|
||||||
|
color: #666;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-center {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.call-status {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 25px;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator.available {
|
||||||
|
background: #4CAF50;
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator.busy {
|
||||||
|
background: #FF9800;
|
||||||
|
animation: pulse 1s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-indicator.offline {
|
||||||
|
background: #9E9E9E;
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#statusText {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #495057;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0;
|
||||||
|
background: white;
|
||||||
|
border: 1px solid #dee2e6;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
font-size: 18px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon:hover {
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-color: #667eea;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon.active {
|
||||||
|
background: #667eea;
|
||||||
|
color: white;
|
||||||
|
border-color: #667eea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
padding: 10px 20px;
|
||||||
|
background: white;
|
||||||
|
border: 1px solid #dee2e6;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #495057;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-color: #667eea;
|
||||||
|
color: #667eea;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === ALERTE APPEL ENTRANT === */
|
||||||
|
.incoming-call-alert {
|
||||||
|
display: none;
|
||||||
|
background: linear-gradient(135deg, #FF6B6B, #FF8E53);
|
||||||
|
color: white;
|
||||||
|
padding: 20px 30px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
animation: slideDown 0.5s;
|
||||||
|
position: relative;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.incoming-call-alert.active {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideDownAlert {
|
||||||
|
from { transform: translateY(-100%); }
|
||||||
|
to { transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.call-icon {
|
||||||
|
font-size: 40px;
|
||||||
|
animation: ring 1s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes ring {
|
||||||
|
0%, 100% { transform: rotate(0deg); }
|
||||||
|
25% { transform: rotate(20deg); }
|
||||||
|
75% { transform: rotate(-20deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.call-info {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.call-title {
|
||||||
|
font-size: 14px;
|
||||||
|
opacity: 0.9;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.call-center {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.call-patient {
|
||||||
|
font-size: 16px;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-accept {
|
||||||
|
padding: 12px 30px;
|
||||||
|
background: white;
|
||||||
|
color: #FF6B6B;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-accept:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: 0 6px 16px rgba(0,0,0,0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === CONTENEUR PRINCIPAL === */
|
||||||
|
.main-container {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
flex-direction: column;
|
||||||
|
height: calc(100vh - 70px); /* Hauteur totale moins le header */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === ZONE PRINCIPALE === */
|
||||||
|
.content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #f5f5f5;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === ONGLETS === */
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
background: white;
|
||||||
|
border-bottom: 2px solid #e9ecef;
|
||||||
|
padding: 0 20px;
|
||||||
|
gap: 5px;
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: hidden;
|
||||||
|
min-height: 50px;
|
||||||
|
align-items: flex-end;
|
||||||
|
flex-shrink: 0;
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
-ms-overflow-style: none; /* IE/Edge */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Masquer la scrollbar pour Chrome/Safari/Opera */
|
||||||
|
.tabs::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
padding: 12px 24px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
border-bottom: none;
|
||||||
|
border-radius: 8px 8px 0 0;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: -2px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab:hover {
|
||||||
|
background: white;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.active {
|
||||||
|
background: white;
|
||||||
|
color: #667eea;
|
||||||
|
border-color: #e9ecef;
|
||||||
|
padding-bottom: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.active::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 3px;
|
||||||
|
background: #667eea;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === WEBVIEW CONTAINER === */
|
||||||
|
.webview-container {
|
||||||
|
flex: 1;
|
||||||
|
position: relative;
|
||||||
|
background: white;
|
||||||
|
overflow: hidden;
|
||||||
|
height: calc(100% - 50px); /* Hauteur moins les onglets */
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-center-selected {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
color: #999;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.webview-wrapper {
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.webview-toolbar {
|
||||||
|
background: #f8f9fa;
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
border-bottom: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.webview-toolbar button {
|
||||||
|
padding: 6px 12px;
|
||||||
|
background: white;
|
||||||
|
border: 1px solid #dee2e6;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.webview-toolbar button:hover {
|
||||||
|
background: #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.webview-url {
|
||||||
|
flex: 1;
|
||||||
|
color: #666;
|
||||||
|
font-size: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.planning-webview {
|
||||||
|
flex: 1;
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === ZONE DE NOTES === */
|
||||||
|
.notes-section {
|
||||||
|
background: white;
|
||||||
|
border-top: 2px solid #667eea;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
transform: translateY(100%);
|
||||||
|
box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notes-section.visible {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.notes-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 15px 20px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-bottom: 1px solid #e9ecef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notes-header h4 {
|
||||||
|
margin: 0;
|
||||||
|
color: #333;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-close-notes {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
font-size: 24px;
|
||||||
|
color: #999;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-close-notes:hover {
|
||||||
|
background: white;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notes-section textarea {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 120px;
|
||||||
|
padding: 15px 20px;
|
||||||
|
border: none;
|
||||||
|
resize: none;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notes-section textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-small {
|
||||||
|
margin: 0 20px 15px 20px;
|
||||||
|
padding: 8px 20px;
|
||||||
|
background: #667eea;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-small:hover {
|
||||||
|
background: #5a6fd8;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === MODAL === */
|
||||||
|
.modal {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 2000;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0,0,0,0.5);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
animation: fadeIn 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
background-color: white;
|
||||||
|
margin: 10% auto;
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: 12px;
|
||||||
|
width: 80%;
|
||||||
|
max-width: 500px;
|
||||||
|
animation: slideUp 0.3s;
|
||||||
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content h2 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
color: #aaa;
|
||||||
|
float: right;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close:hover {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simulated-calls-list {
|
||||||
|
max-height: 300px;
|
||||||
|
overflow-y: auto;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simulated-call-item {
|
||||||
|
padding: 12px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simulated-call-item:hover {
|
||||||
|
background: white;
|
||||||
|
border-color: #667eea;
|
||||||
|
transform: translateX(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.call-name {
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.call-details {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* === Styles Choices.js === */
|
||||||
|
.choices {
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choices__inner {
|
||||||
|
background: white;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choices.is-focused .choices__inner {
|
||||||
|
border-color: #667eea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choices__list--dropdown {
|
||||||
|
background: white;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-top: 5px;
|
||||||
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.choices__item--choice {
|
||||||
|
padding: 10px 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choices__item--choice:hover {
|
||||||
|
background: #f8f9fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.choices__item--choice.is-highlighted {
|
||||||
|
background: #667eea;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user