-
{title}
+
+
{title}
{children}
);
diff --git a/src/index.css b/src/index.css
deleted file mode 100755
index 9d815ad..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,676 +0,0 @@
-/* index.css */
-
-/* Paleta de cores e variáveis globais */
-:root {
- --color-primary: #4CAF50;
- --color-primary-dark: #45a049;
- --color-dark: #333333;
- --color-light: #ffffff;
- --color-background: #f4f4f9;
- --color-background-dark: #e8e8ef;
- --color-surface: #ffffff;
- --color-table-header: #f2f2f2;
- --color-border: #dddddd;
- --color-info: #2196F3;
- --color-info-dark: #1e88e5;
- --color-alert: #f44336;
- --color-alert-dark: #e53935;
- --color-text-muted: #555555;
- --font-base: 'Roboto', Arial, sans-serif;
- --border-radius: 5px;
- --transition-fast: 0.2s ease-in-out;
-}
-
-/* Resetando margens e padding */
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-/* Fonte padrão para o projeto */
-body {
- font-family: var(--font-base);
- background: linear-gradient(var(--color-background), var(--color-background-dark));
- color: var(--color-dark);
- line-height: 1.6;
- font-size: 16px; /* Tamanho de fonte confortável */
-}
-
-/* Definindo um fundo geral para o layout */
-.container {
- width: 90%;
- max-width: 1200px;
- margin: 0 auto;
-}
-
-/* Estilos básicos de links */
-a {
- text-decoration: none;
- color: inherit; /* Cor do link será herdada do texto */
- transition: color var(--transition-fast);
-}
-
-/* Estilos para os títulos */
-h1, h2, h3 {
- font-weight: bold;
- color: var(--color-dark);
-}
-
-/* Estilo básico de botões */
-button {
- background-color: var(--color-primary);
- color: var(--color-light);
- border: none;
- padding: 10px 20px;
- font-size: 16px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- cursor: pointer;
- border-radius: var(--border-radius);
- transition: background-color var(--transition-fast), transform var(--transition-fast);
-}
-
-button:hover {
- background-color: var(--color-primary-dark);
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
- transform: translateY(-2px);
-}
-
-/* Tabelas */
-table {
- width: 100%;
- border-collapse: collapse;
- background-color: var(--color-surface);
- border-radius: var(--border-radius);
- overflow: hidden;
-}
-
-th, td {
- padding: 12px;
- text-align: left;
- border-bottom: 1px solid var(--color-border);
-}
-
-th {
- background-color: var(--color-table-header);
- color: var(--color-dark);
-}
-
-/* Estilo de caixas de alerta */
-.alert {
- background-color: var(--color-alert);
- color: white;
- padding: 10px;
- margin-top: 20px;
- border-radius: var(--border-radius);
-}
-
-/* Estilos para o Dashboard */
-.dashboard-container {
- background-color: var(--color-surface);
- padding: 20px;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.dashboard-title {
- font-size: 24px;
- font-weight: bold;
- margin-bottom: 20px;
-}
-
-
-
-/* Estilos para Settings */
-.settings-container {
- background-color: var(--color-surface);
- padding: 20px;
- border-radius: var(--border-radius);
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
- max-width: 600px;
- margin: 0 auto;
-}
-
-.settings-title {
- font-size: 24px;
- font-weight: bold;
- margin-bottom: 20px;
- text-align: center;
-}
-
-.settings-item {
- margin-bottom: 20px;
-}
-
-.settings-item label {
- display: block;
- font-size: 16px;
- margin-bottom: 8px;
-}
-
-.settings-item input[type="range"] {
- width: 100%;
- margin: 5px 0;
-}
-
-.settings-item input[type="number"] {
- width: 100px;
- padding: 5px;
- font-size: 16px;
- margin-left: 10px;
- border-radius: var(--border-radius);
- border: 1px solid var(--color-border);
-}
-
-/* Estilo do container do slider */
-.slider-container {
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-
-.slider-container span {
- font-size: 16px;
- color: var(--color-dark);
-}
-
-/* Botão de salvar */
-button.save-button {
- background-color: var(--color-primary);
- color: white;
- border: none;
- padding: 10px 20px;
- font-size: 16px;
- cursor: pointer;
- border-radius: var(--border-radius);
- width: 100%;
- margin-top: 20px;
-}
-
-button.save-button:hover {
- background-color: var(--color-primary-dark);
-}
-
-/* Responsividade para telas pequenas */
-@media (max-width: 768px) {
- .settings-container {
- padding: 15px;
- }
-
- .settings-title {
- font-size: 20px;
- }
-
- .settings-item input[type="number"] {
- width: 70px;
- }
-
- button.save-button {
- width: 100%;
- }
-}
-
-/* Estilo para o Título */
-.settings-title {
- font-size: 32px; /* Tamanho maior para maior destaque */
- font-weight: bold;
- margin-bottom: 30px;
- text-align: center; /* Centralizado */
- color: var(--color-dark);
- text-transform: uppercase; /* Texto em maiúsculo para chamar atenção */
-}
-
-/* Ajustando os parâmetros do título no mobile */
-@media (max-width: 768px) {
- .settings-title {
- font-size: 28px;
- margin-bottom: 20px; /* Menor espaçamento em telas pequenas */
- }
-}
-
-/* Navbar Estilo */
-.navbar {
- background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary));
- color: var(--color-light);
- padding: 15px 20px; /* Mais espaçamento para uma navegação mais confortável */
- display: flex;
- justify-content: space-between;
- align-items: center;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.navbar-container {
- display: flex;
- justify-content: space-between;
- align-items: center;
- width: 100%;
-}
-
-.navbar-logo h2 {
- font-size: 24px;
- font-weight: bold;
- color: var(--color-light);
-}
-
-.navbar-links {
- list-style: none;
- display: flex;
- gap: 20px;
-}
-
-.navbar-links li {
- display: inline-block;
-}
-
-.navbar-links a {
- color: var(--color-light);
- text-decoration: none;
- font-size: 18px;
- padding: 8px 15px;
- border-radius: var(--border-radius);
- transition: background-color var(--transition-fast), color var(--transition-fast);
-}
-
-.navbar-links a:hover {
- background-color: var(--color-primary);
- color: var(--color-light);
-}
-
-.navbar-links a.active {
- background-color: var(--color-primary-dark);
- color: var(--color-light);
-}
-
-/* Ícone do menu hamburguer para telas pequenas */
-.menu-icon {
- display: none;
- font-size: 30px;
- color: white;
- background: none;
- border: none;
- cursor: pointer;
-}
-
-/* Responsividade para telas pequenas */
-@media (max-width: 768px) {
- .navbar-links {
- display: none; /* Inicialmente oculta os links */
- width: 100%;
- flex-direction: column;
- align-items: flex-start;
- margin-top: 20px;
- }
-
- .navbar-links.active {
- display: flex; /* Exibe os links quando o menu estiver ativo */
- }
-
- .navbar-links li {
- width: 100%;
- text-align: left;
- }
-
- .navbar-links a {
- padding: 10px 20px;
- width: 100%;
- }
-
- /* Exibe o ícone do menu hamburguer */
- .menu-icon {
- display: block;
- }
-}
-
-/* Estilos para a Página de Segurança */
-.security-container {
- background-color: var(--color-light);
- padding: 20px;
- border-radius: var(--border-radius);
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
- max-width: 600px;
- margin: 0 auto;
-}
-
-.security-title {
- font-size: 32px;
- font-weight: bold;
- margin-bottom: 30px;
- text-align: center;
- color: var(--color-dark);
-}
-
-.security-item {
- margin-bottom: 20px;
-}
-
-.security-item label {
- display: block;
- font-size: 16px;
- margin-bottom: 8px;
-}
-
-.security-item input[type="checkbox"] {
- margin-right: 10px;
-}
-
-.security-item ul {
- list-style: none;
- padding-left: 0;
-}
-
-.security-item ul li {
- margin-bottom: 10px;
- font-size: 16px;
-}
-
-.security-item select {
- margin-left: 10px;
- padding: 5px;
- font-size: 16px;
- border-radius: var(--border-radius);
- border: 1px solid var(--color-border);
-}
-
-button {
- background-color: var(--color-primary);
- color: white;
- border: none;
- padding: 10px 20px;
- font-size: 16px;
- cursor: pointer;
- border-radius: var(--border-radius);
-}
-
-button:hover {
- background-color: var(--color-primary-dark);
-}
-
-
-/* Estilos para a Página de Segurança */
-.security-container {
- background-color: var(--color-light);
- padding: 20px;
- border-radius: var(--border-radius);
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
- max-width: 600px;
- margin: 0 auto;
-}
-
-.security-title {
- font-size: 32px;
- font-weight: bold;
- margin-bottom: 30px;
- text-align: center;
- color: var(--color-dark);
-}
-
-.security-item {
- margin-bottom: 20px;
-}
-
-.security-item label {
- display: block;
- font-size: 16px;
- margin-bottom: 8px;
-}
-
-.security-item input[type="checkbox"] {
- margin-right: 10px;
-}
-
-.auth-methods label {
- display: block;
- margin-bottom: 10px;
-}
-
-.security-item select {
- margin-left: 10px;
- padding: 5px;
- font-size: 16px;
- border-radius: var(--border-radius);
- border: 1px solid var(--color-border);
-}
-
-button {
- background-color: var(--color-primary);
- color: white;
- border: none;
- padding: 10px 20px;
- font-size: 16px;
- cursor: pointer;
- border-radius: var(--border-radius);
-}
-
-button:hover {
- background-color: var(--color-primary-dark);
-}
-
-.add-user button {
- background-color: var(--color-info); /* Cor azul para adicionar */
-}
-
-.add-user button:hover {
- background-color: var(--color-info-dark);
-}
-
-/* Estilos para a lista de usuários */
-.security-item ul {
- list-style: none;
- padding-left: 0;
-}
-
-.security-item ul li {
- margin-bottom: 10px;
- font-size: 16px;
-}
-
-.security-item button {
- background-color: var(--color-alert); /* Cor vermelha para remover */
- padding: 5px 10px;
- font-size: 14px;
- cursor: pointer;
- border-radius: var(--border-radius);
- margin-left: 10px;
-}
-
-.security-item button:hover {
- background-color: var(--color-alert-dark);
-}
-
-
-/* Estilos para o Dashboard */
-.dashboard-container {
- background-color: var(--color-light);
- padding: 20px;
- border-radius: var(--border-radius);
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
- max-width: 1200px;
- margin: 20px auto;
-}
-
-.dashboard-title {
- font-size: 32px;
- font-weight: bold;
- margin-bottom: 30px;
- text-align: center;
- color: var(--color-dark);
-}
-
-.dashboard-summary {
- display: flex;
- justify-content: space-between;
- gap: 20px;
- margin-bottom: 30px;
-}
-
-.card {
- background-color: var(--color-surface);
- padding: 20px;
- border-radius: var(--border-radius);
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
- width: 30%;
- text-align: center;
- transition: transform var(--transition-fast), box-shadow var(--transition-fast);
-}
-
-.card:hover {
- transform: translateY(-4px);
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-}
-
-.card h3 {
- font-size: 20px;
- color: var(--color-dark);
- margin-bottom: 10px;
-}
-
-.card p {
- font-size: 18px;
- color: var(--color-text-muted);
-}
-
-.alerts {
- margin-bottom: 30px;
-}
-
-.alerts h2 {
- font-size: 24px;
- font-weight: bold;
- margin-bottom: 10px;
-}
-
-.alert-item {
- font-size: 16px;
- background-color: var(--color-alert);
- color: white;
- padding: 10px;
- margin: 10px 0;
- border-radius: var(--border-radius);
-}
-
-.chargers-table {
- margin-top: 30px;
-}
-
-.chargers-table h2 {
- font-size: 24px;
- font-weight: bold;
- margin-bottom: 10px;
-}
-
-table {
- width: 100%;
- border-collapse: collapse;
-}
-
-th, td {
- padding: 12px;
- text-align: left;
- border-bottom: 1px solid var(--color-border);
-}
-
-th {
- background-color: var(--color-table-header);
-}
-
-@media (max-width: 768px) {
- .dashboard-summary {
- flex-direction: column;
- gap: 10px;
- }
-
- .card {
- width: 100%;
- }
-
- table {
- font-size: 14px;
- }
-}
-
-/* Layout comum para páginas */
-.page-container {
- max-width: 900px;
- margin: 20px auto;
- padding: 20px;
- background-color: var(--color-surface);
- border-radius: var(--border-radius);
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
-}
-
-/* Formulários */
-.form {
- display: flex;
- flex-direction: column;
- gap: 15px;
-}
-
-.form-group label {
- display: block;
- margin-bottom: 5px;
-}
-
-.form-group input,
-.form-group select,
-.form-group textarea {
- padding: 8px;
- border: 1px solid var(--color-border);
- border-radius: var(--border-radius);
- width: 100%;
- transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
-}
-.form-group input:focus,
-.form-group select:focus,
-.form-group textarea:focus {
- border-color: var(--color-primary);
- box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
- outline: none;
-}
-
-/* Alinhamento de texto e checkbox */
-.checkbox-label {
- display: flex;
- align-items: center;
- gap: 12px;
-}
-
-.checkbox-label input[type="checkbox"] {
- width: 18px;
- height: 18px;
- accent-color: var(--color-primary);
- margin: 0;
-}
-
-.button-grid {
- margin-top: 10px;
- display: flex;
- gap: 10px;
-}
-
-/* Mensagens de feedback */
-.message {
- padding: 10px 15px;
- border-radius: var(--border-radius);
- margin-bottom: 15px;
- background-color: var(--color-table-header);
- color: var(--color-dark);
-}
-
-.message.success {
- background-color: var(--color-primary);
- color: var(--color-light);
-}
-
-.message.error {
- background-color: var(--color-alert);
- color: var(--color-light);
-}
-
-/* Caixa de log */
-.log-box {
- background-color: var(--color-surface);
- border: 1px solid var(--color-border);
- padding: 15px;
- border-radius: var(--border-radius);
- max-height: 400px;
- overflow: auto;
-}
diff --git a/src/main.jsx b/src/main.jsx
index cb71277..dd1b89c 100755
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -2,7 +2,6 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
-import './index.css'; // Importe o CSS unificado aqui
ReactDOM.createRoot(document.getElementById('root')).render(
diff --git a/src/pages/Connectivity.jsx b/src/pages/Connectivity.jsx
index bedd610..38cc0c7 100755
--- a/src/pages/Connectivity.jsx
+++ b/src/pages/Connectivity.jsx
@@ -78,41 +78,43 @@ const Connectivity = () => {