style: compactacao de layout e espacos verticais no dashboard, conexoes e clinicas
continuous-integration/webhook Deploy concluido (rx.scoreodonto.com)
continuous-integration/webhook Deploy concluido (rx.scoreodonto.com)
This commit is contained in:
@@ -177,7 +177,7 @@ body {
|
||||
/* Main Content */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: 32px 40px;
|
||||
padding: 20px 24px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@@ -185,7 +185,7 @@ body {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 20px;
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
@@ -335,7 +335,7 @@ body {
|
||||
}
|
||||
|
||||
.modern-table td {
|
||||
padding: 16px;
|
||||
padding: 10px 16px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
<div class="logo-icon">
|
||||
<i class="fa-solid fa-tooth"></i>
|
||||
</div>
|
||||
<h2>RF Dental</h2>
|
||||
<h2>RF Dental <span style="font-size: 10px; opacity: 0.5; font-weight: 500; margin-left: 4px; vertical-align: middle;">v2.1.0</span></h2>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
@@ -83,7 +83,6 @@
|
||||
<button id="logoutBtn" class="logout-btn" onclick="logout(); return false;">
|
||||
<i class="fa-solid fa-arrow-right-from-bracket"></i> Sair
|
||||
</button>
|
||||
<div class="system-version">v2.1.0</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -92,8 +91,18 @@
|
||||
|
||||
<header class="top-header">
|
||||
<div class="header-title">
|
||||
<h1>Dispositivos e Clínicas</h1>
|
||||
<p>Gerencie o acesso do Aplicativo Desktop aos computadores das clínicas.</p>
|
||||
<h1 style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 0;">
|
||||
Dispositivos e Clínicas
|
||||
<span style="font-size: 0.85rem; padding: 6px 12px; border-radius: 20px; background: rgba(79, 70, 229, 0.15); color: var(--primary); font-weight: 600;">
|
||||
Total: <span id="totalDevices">0</span>
|
||||
</span>
|
||||
<span style="font-size: 0.85rem; padding: 6px 12px; border-radius: 20px; background: rgba(16, 185, 129, 0.15); color: var(--success); font-weight: 600;">
|
||||
Ativos: <span id="activeDevices">0</span>
|
||||
</span>
|
||||
<span style="font-size: 0.85rem; padding: 6px 12px; border-radius: 20px; background: rgba(239, 68, 68, 0.15); color: var(--danger); font-weight: 600;">
|
||||
Bloqueados: <span id="blockedDevices">0</span>
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button id="addClinicBtn" class="primary-btn pulse-animation">
|
||||
@@ -102,36 +111,6 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="dashboard-stats">
|
||||
<div class="stat-card glass-card">
|
||||
<div class="stat-icon bg-blue">
|
||||
<i class="fa-solid fa-desktop"></i>
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<h3>Total de Dispositivos</h3>
|
||||
<p id="totalDevices">0</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card glass-card">
|
||||
<div class="stat-icon bg-green">
|
||||
<i class="fa-solid fa-check-circle"></i>
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<h3>Ativos</h3>
|
||||
<p id="activeDevices">0</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card glass-card">
|
||||
<div class="stat-icon bg-red">
|
||||
<i class="fa-solid fa-ban"></i>
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<h3>Bloqueados</h3>
|
||||
<p id="blockedDevices">0</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="data-section glass-card">
|
||||
<div class="table-container">
|
||||
<table class="modern-table">
|
||||
|
||||
@@ -191,7 +191,6 @@
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="app-container">
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
@@ -199,7 +198,7 @@
|
||||
<div class="logo-icon">
|
||||
<i class="fa-solid fa-tooth"></i>
|
||||
</div>
|
||||
<h2>RF Dental</h2>
|
||||
<h2>RF Dental <span style="font-size: 10px; opacity: 0.5; font-weight: 500; margin-left: 4px; vertical-align: middle;">v2.1.0</span></h2>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
@@ -244,7 +243,6 @@
|
||||
<button id="logoutBtn" class="logout-btn" onclick="logout(); return false;">
|
||||
<i class="fa-solid fa-arrow-right-from-bracket"></i> Sair
|
||||
</button>
|
||||
<div class="system-version">v2.1.0</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -252,30 +250,33 @@
|
||||
<div class="clients-container">
|
||||
<div class="clients-header">
|
||||
<div>
|
||||
<h1>🖥️ Clientes Conectados</h1>
|
||||
<p style="color: var(--text-secondary); margin-top: 5px; font-size: 1rem; font-weight: 500;">Monitoramento em tempo real dos clientes Socket.IO</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<a href="/" class="btn btn-secondary">← Voltar</a>
|
||||
<button class="btn btn-primary" onclick="loadClients()">🔄 Atualizar</button>
|
||||
<button class="btn btn-success" onclick="testConnection()" id="testBtn">🧪 Testar Conexão</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats" id="stats">
|
||||
<!-- Stats serão carregados aqui -->
|
||||
</div>
|
||||
|
||||
<div class="clients-list-card">
|
||||
<div id="clientsList">
|
||||
<div class="empty-state">
|
||||
<div class="spinner" style="margin: 0 auto 16px auto;"></div>
|
||||
Carregando...
|
||||
<h1 style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap;">
|
||||
🖥️ Clientes Conectados
|
||||
<span style="font-size: 0.85rem; padding: 6px 12px; border-radius: 20px; background: rgba(79, 70, 229, 0.15); color: var(--primary-color); font-weight: 600;">
|
||||
Conexões: <span id="stat-total">0</span>
|
||||
</span>
|
||||
<span style="font-size: 0.85rem; padding: 6px 12px; border-radius: 20px; background: rgba(16, 185, 129, 0.15); color: var(--success-color); font-weight: 600;">
|
||||
Identificados: <span id="stat-identified">0</span>
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<a href="/" class="btn btn-secondary">← Voltar</a>
|
||||
<button class="btn btn-primary" onclick="loadClients()">🔄 Atualizar</button>
|
||||
<button class="btn btn-success" onclick="testConnection()" id="testBtn">🧪 Testar Conexão</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timestamp" id="timestamp"></div>
|
||||
|
||||
<div class="clients-list-card" style="margin-top: 24px;">
|
||||
<div id="clientsList">
|
||||
<div class="empty-state">
|
||||
<div class="spinner" style="margin: 0 auto 16px auto;"></div>
|
||||
Carregando...
|
||||
</div>
|
||||
</div>
|
||||
<div class="timestamp" id="timestamp"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<div class="logo-icon">
|
||||
<i class="fa-solid fa-tooth"></i>
|
||||
</div>
|
||||
<h2>RF Dental</h2>
|
||||
<h2>RF Dental <span style="font-size: 10px; opacity: 0.5; font-weight: 500; margin-left: 4px; vertical-align: middle;">v2.1.0</span></h2>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
@@ -62,7 +62,6 @@
|
||||
<button id="logoutBtn" class="logout-btn" onclick="logout(); return false;">
|
||||
<i class="fa-solid fa-arrow-right-from-bracket"></i> Sair
|
||||
</button>
|
||||
<div class="system-version">v2.1.0</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -78,13 +77,22 @@
|
||||
<h1 id="mainTitle">Galeria de Imagens</h1>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<!-- Filtro de Clientes -->
|
||||
<select id="clientFilter" class="client-filter" style="padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary); font-size: 0.95rem; font-weight: 500; outline: none; min-width: 180px; cursor: pointer; height: 42px;">
|
||||
<option value="">📋 Todos os Clientes</option>
|
||||
</select>
|
||||
<!-- Mostrar Ocultas -->
|
||||
<button id="toggleDisabledBtn" class="btn btn-secondary" style="padding: 10px 16px; border-radius: 10px; font-weight: 500; font-size: 0.95rem; display: flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary); height: 42px;">
|
||||
👁️ <span id="toggleText">Ocultas</span>
|
||||
</button>
|
||||
<input
|
||||
type="search"
|
||||
id="searchInput"
|
||||
class="search-input"
|
||||
placeholder="🔍 Pesquisar paciente..."
|
||||
style="height: 42px; min-width: 200px;"
|
||||
>
|
||||
<button class="btn btn-secondary" onclick="loadClientsList()">
|
||||
<button class="btn btn-secondary" onclick="loadClientsList()" style="height: 42px; display: flex; align-items: center; justify-content: center; padding: 10px 16px;">
|
||||
<span class="icon">🔄</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -101,20 +109,6 @@
|
||||
|
||||
<!-- Scrollable content area -->
|
||||
<div class="content-scroll">
|
||||
|
||||
<!-- Toolbar de Filtros e Ações Rápidas -->
|
||||
<div class="toolbar glass-card" style="margin-bottom: 24px; padding: 16px; display: flex; gap: 16px; align-items: center; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; box-shadow: var(--shadow-sm);">
|
||||
<div class="toolbar-left" style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
|
||||
<!-- Filtro de Clientes -->
|
||||
<select id="clientFilter" class="client-filter" style="padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary); font-size: 0.95rem; font-weight: 500; outline: none; min-width: 200px; cursor: pointer;">
|
||||
<option value="">📋 Todos os Clientes</option>
|
||||
</select>
|
||||
<!-- Mostrar Ocultas -->
|
||||
<button id="toggleDisabledBtn" class="btn btn-secondary" style="padding: 10px 16px; border-radius: 10px; font-weight: 500; font-size: 0.95rem; display: flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary);">
|
||||
👁️ <span id="toggleText">Ocultas</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div id="loadingState" class="loading">
|
||||
|
||||
@@ -244,7 +244,7 @@ body {
|
||||
backdrop-filter: var(--glass-blur);
|
||||
-webkit-backdrop-filter: var(--glass-blur);
|
||||
border-bottom: 1px solid var(--glass-border);
|
||||
padding: 16px 32px;
|
||||
padding: 10px 24px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -297,7 +297,7 @@ body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 32px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* ================================================================
|
||||
|
||||
Reference in New Issue
Block a user