benoit
22bb66b680
Statut serveur :
- SERVER_URL utilisait "localhost", que le Node embarqué par Electron peut
résoudre en IPv6 (::1) en priorité ; le serveur n'écoutant qu'en IPv4
(host: 0.0.0.0), le ping de statut échouait silencieusement alors que le
serveur tournait. Bascule sur 127.0.0.1 (main.js + preload.js).
- L'erreur réelle de pingServer() n'était jamais remontée au renderer
(health.error perdu) ; elle est maintenant incluse dans la réponse IPC.
URL/QR code clients :
- L'URL affichée utilisait un remplacement de chaîne ("localhost" -> IP) qui
ne matchait plus rien depuis le passage à 127.0.0.1 ; remplacé par un
parsing d'URL qui ne réutilise que le protocole/port.
- Le QR code dépendait d'une lib chargée depuis un CDN externe, inadapté à
une app self-hosted censée fonctionner sans accès Internet sur le WiFi
d'un événement. Généré désormais côté Main Process avec la lib qrcode
(déjà en dépendance, jamais utilisée) et transmis au renderer en data URL ;
suppression du fichier placeholder et de la dépendance CDN.
- getNetworkIP() lisait /admin/config, qui renvoie la valeur YAML brute
"AUTO" (jamais résolue), donc retombait toujours sur "localhost".
Remplacé par la détection réseau du Main Process (même logique que pour
les certificats mkcert).
- Ajout d'un placeholder visuel (icône + message) tant qu'aucun QR code
n'est généré ou que le serveur est arrêté, en CSS pur.
730 lines
12 KiB
CSS
730 lines
12 KiB
CSS
/**
|
|
* PTT Live Desktop - Styles
|
|
*/
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--bg-primary: #1a1a1a;
|
|
--bg-secondary: #2a2a2a;
|
|
--bg-tertiary: #3a3a3a;
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #b0b0b0;
|
|
--accent-primary: #4a9eff;
|
|
--accent-success: #4caf50;
|
|
--accent-warning: #ff9800;
|
|
--accent-error: #f44336;
|
|
--border-color: #444;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
overflow: hidden;
|
|
}
|
|
|
|
#app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem 1.5rem;
|
|
background: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.version {
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary);
|
|
background: var(--bg-tertiary);
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.server-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 1rem;
|
|
background: var(--bg-tertiary);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.status-indicator {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn {
|
|
padding: 0.5rem 1rem;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--accent-primary);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover:not(:disabled) {
|
|
background: #3d8eef;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.btn-secondary:hover:not(:disabled) {
|
|
background: #4a4a4a;
|
|
}
|
|
|
|
.btn-small {
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
/* Main Content */
|
|
.main-content {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Sidebar */
|
|
.sidebar {
|
|
width: 200px;
|
|
background: var(--bg-secondary);
|
|
border-right: 1px solid var(--border-color);
|
|
padding: 1rem 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.nav-item {
|
|
padding: 0.75rem 1.5rem;
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
text-align: left;
|
|
font-size: 0.9375rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
border-left: 3px solid transparent;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.nav-item.active {
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
border-left-color: var(--accent-primary);
|
|
}
|
|
|
|
/* Content */
|
|
.content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.view {
|
|
display: none;
|
|
}
|
|
|
|
.view.active {
|
|
display: block;
|
|
}
|
|
|
|
.view h2 {
|
|
font-size: 1.75rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.view h3 {
|
|
font-size: 1.25rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Stats Grid */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--bg-secondary);
|
|
padding: 1.5rem;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
color: var(--accent-primary);
|
|
}
|
|
|
|
/* Sections */
|
|
.section {
|
|
background: var(--bg-secondary);
|
|
padding: 1.5rem;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-color);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* QR Code */
|
|
.qr-container {
|
|
display: flex;
|
|
gap: 2rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.qr-wrapper {
|
|
position: relative;
|
|
width: 256px;
|
|
height: 256px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#qr-code {
|
|
display: none;
|
|
width: 256px;
|
|
height: 256px;
|
|
border: 4px solid white;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* L'image n'a un attribut src qu'une fois le QR code généré */
|
|
#qr-code[src] {
|
|
display: block;
|
|
}
|
|
|
|
#qr-code[src] ~ .qr-placeholder {
|
|
display: none;
|
|
}
|
|
|
|
.qr-placeholder {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 2px dashed var(--border-color);
|
|
border-radius: 8px;
|
|
color: var(--text-secondary);
|
|
text-align: center;
|
|
padding: 1rem;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.qr-placeholder-icon {
|
|
font-size: 2.5rem;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.qr-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.url-text {
|
|
font-family: 'Courier New', monospace;
|
|
background: var(--bg-tertiary);
|
|
padding: 0.75rem;
|
|
border-radius: 6px;
|
|
margin: 0.5rem 0 1rem 0;
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* Users List */
|
|
.users-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.user-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem;
|
|
background: var(--bg-tertiary);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.user-status {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.user-details h4 {
|
|
font-size: 1rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.user-details p {
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.user-badge {
|
|
padding: 0.25rem 0.75rem;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
.user-badge.ptt-active {
|
|
background: var(--accent-error);
|
|
}
|
|
|
|
/* Forms */
|
|
.form-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.form-control {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
color: var(--text-primary);
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.form-control-small {
|
|
width: auto;
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.form-control:focus {
|
|
outline: none;
|
|
border-color: var(--accent-primary);
|
|
}
|
|
|
|
/* Groups List */
|
|
.groups-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.group-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1.5rem;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.group-info h4 {
|
|
font-size: 1.125rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.group-info p {
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.group-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* VU Meters */
|
|
.vu-meters {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.vu-meter {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.vu-label {
|
|
width: 120px;
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.vu-bar {
|
|
flex: 1;
|
|
height: 24px;
|
|
background: var(--bg-tertiary);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.vu-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--accent-success), var(--accent-warning), var(--accent-error));
|
|
transition: width 0.1s ease-out;
|
|
}
|
|
|
|
.vu-value {
|
|
width: 60px;
|
|
text-align: right;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Logs */
|
|
.logs-controls {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.logs-container {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
max-height: 600px;
|
|
overflow-y: auto;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.log-entry {
|
|
padding: 0.5rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
display: flex;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.log-entry:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.log-time {
|
|
color: var(--text-secondary);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.log-level {
|
|
width: 60px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.log-level.error { color: var(--accent-error); }
|
|
.log-level.warn { color: var(--accent-warning); }
|
|
.log-level.info { color: var(--accent-primary); }
|
|
.log-level.debug { color: var(--text-secondary); }
|
|
|
|
.log-message {
|
|
flex: 1;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* Empty State */
|
|
.empty-state {
|
|
text-align: center;
|
|
color: var(--text-secondary);
|
|
padding: 2rem;
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--bg-primary);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--bg-tertiary);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #4a4a4a;
|
|
}
|
|
|
|
/* Toast Notifications */
|
|
.toast-container {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 9999;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.toast {
|
|
min-width: 300px;
|
|
padding: 1rem 1.5rem;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
animation: slideIn 0.3s ease-out;
|
|
}
|
|
|
|
.toast.success {
|
|
border-left: 4px solid var(--accent-success);
|
|
}
|
|
|
|
.toast.error {
|
|
border-left: 4px solid var(--accent-error);
|
|
}
|
|
|
|
.toast.warning {
|
|
border-left: 4px solid var(--accent-warning);
|
|
}
|
|
|
|
.toast.info {
|
|
border-left: 4px solid var(--accent-primary);
|
|
}
|
|
|
|
.toast-icon {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.toast-message {
|
|
flex: 1;
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.toast-close {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
font-size: 1.25rem;
|
|
padding: 0;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.toast-close:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
transform: translateX(400px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* VU Meters */
|
|
.vu-meters {
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.vu-status {
|
|
font-size: 0.875rem;
|
|
padding: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
border-radius: 4px;
|
|
background: var(--bg-tertiary);
|
|
text-align: center;
|
|
}
|
|
|
|
.vu-status.connected {
|
|
background: rgba(76, 175, 80, 0.2);
|
|
color: var(--accent-success);
|
|
}
|
|
|
|
.vu-status.disconnected {
|
|
background: rgba(244, 67, 54, 0.2);
|
|
color: var(--accent-error);
|
|
}
|
|
|
|
.vu-section {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.vu-section h4 {
|
|
font-size: 0.875rem;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.vu-grid {
|
|
display: grid;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.vu-meter {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
padding: 0.75rem;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.vu-meter-clipping {
|
|
border-color: var(--accent-error);
|
|
animation: pulseClipping 0.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulseClipping {
|
|
0%, 100% {
|
|
border-color: var(--accent-error);
|
|
}
|
|
50% {
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
.vu-label {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.vu-bar-container {
|
|
position: relative;
|
|
height: 24px;
|
|
background: var(--bg-tertiary);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.vu-bar {
|
|
height: 100%;
|
|
transition: width 0.05s linear;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.vu-bar-green {
|
|
background: linear-gradient(to right, #4caf50, #66bb6a);
|
|
}
|
|
|
|
.vu-bar-yellow {
|
|
background: linear-gradient(to right, #ff9800, #ffa726);
|
|
}
|
|
|
|
.vu-bar-red {
|
|
background: linear-gradient(to right, #f44336, #e57373);
|
|
}
|
|
|
|
.vu-peak {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 2px;
|
|
height: 100%;
|
|
background: #ffffff;
|
|
box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
|
|
transition: left 0.1s linear;
|
|
}
|
|
|
|
.vu-values {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.vu-rms {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.vu-clip {
|
|
color: var(--accent-error);
|
|
font-weight: bold;
|
|
animation: blinkClip 0.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes blinkClip {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.3;
|
|
}
|
|
}
|