diff --git a/index.html b/index.html
index 0c589ec..786e1cf 100755
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
+
Vite + React
diff --git a/src/index.css b/src/index.css
index 6fb0879..c6cbdf5 100755
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,26 @@
/* 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;
@@ -9,11 +30,11 @@
/* Fonte padrão para o projeto */
body {
- font-family: 'Arial', sans-serif;
- background-color: #f4f4f9;
- color: #333;
+ 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; /* Garantindo um tamanho de fonte confortável */
+ font-size: 16px; /* Tamanho de fonte confortável */
}
/* Definindo um fundo geral para o layout */
@@ -27,57 +48,64 @@ body {
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: #333;
+ color: var(--color-dark);
}
/* Estilo básico de botões */
button {
- background-color: #4CAF50;
- color: white;
+ background-color: var(--color-primary);
+ color: var(--color-light);
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
- border-radius: 5px;
+ border-radius: var(--border-radius);
+ transition: background-color var(--transition-fast), transform var(--transition-fast);
}
button:hover {
- background-color: #45a049;
+ background-color: var(--color-primary-dark);
+ 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 #ddd;
+ border-bottom: 1px solid var(--color-border);
}
th {
- background-color: #f2f2f2;
+ background-color: var(--color-table-header);
+ color: var(--color-dark);
}
/* Estilo de caixas de alerta */
.alert {
- background-color: #f44336;
+ background-color: var(--color-alert);
color: white;
padding: 10px;
margin-top: 20px;
- border-radius: 5px;
+ border-radius: var(--border-radius);
}
/* Estilos para o Dashboard */
.dashboard-container {
- background-color: #fff;
+ background-color: var(--color-surface);
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
@@ -92,9 +120,9 @@ th {
/* Estilos para Settings */
.settings-container {
- background-color: #ffffff;
+ background-color: var(--color-surface);
padding: 20px;
- border-radius: 5px;
+ border-radius: var(--border-radius);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 600px;
margin: 0 auto;
@@ -127,8 +155,8 @@ th {
padding: 5px;
font-size: 16px;
margin-left: 10px;
- border-radius: 5px;
- border: 1px solid #ddd;
+ border-radius: var(--border-radius);
+ border: 1px solid var(--color-border);
}
/* Estilo do container do slider */
@@ -140,24 +168,24 @@ th {
.slider-container span {
font-size: 16px;
- color: #333;
+ color: var(--color-dark);
}
/* Botão de salvar */
button.save-button {
- background-color: #4CAF50;
+ background-color: var(--color-primary);
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
- border-radius: 5px;
+ border-radius: var(--border-radius);
width: 100%;
margin-top: 20px;
}
button.save-button:hover {
- background-color: #45a049;
+ background-color: var(--color-primary-dark);
}
/* Responsividade para telas pequenas */
@@ -185,7 +213,7 @@ button.save-button:hover {
font-weight: bold;
margin-bottom: 30px;
text-align: center; /* Centralizado */
- color: #333;
+ color: var(--color-dark);
text-transform: uppercase; /* Texto em maiúsculo para chamar atenção */
}
@@ -199,12 +227,13 @@ button.save-button:hover {
/* Navbar Estilo */
.navbar {
- background-color: #333; /* Fundo escuro para contraste */
- color: white;
+ 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 {
@@ -217,7 +246,7 @@ button.save-button:hover {
.navbar-logo h2 {
font-size: 24px;
font-weight: bold;
- color: #fff;
+ color: var(--color-light);
}
.navbar-links {
@@ -231,21 +260,22 @@ button.save-button:hover {
}
.navbar-links a {
- color: white;
+ color: var(--color-light);
text-decoration: none;
font-size: 18px;
padding: 8px 15px;
- border-radius: 5px;
+ border-radius: var(--border-radius);
+ transition: background-color var(--transition-fast), color var(--transition-fast);
}
.navbar-links a:hover {
- background-color: #4CAF50;
- color: white;
+ background-color: var(--color-primary);
+ color: var(--color-light);
}
.navbar-links a.active {
- background-color: #45a049;
- color: white;
+ background-color: var(--color-primary-dark);
+ color: var(--color-light);
}
/* Ícone do menu hamburguer para telas pequenas */
@@ -290,9 +320,9 @@ button.save-button:hover {
/* Estilos para a Página de Segurança */
.security-container {
- background-color: #fff;
+ background-color: var(--color-light);
padding: 20px;
- border-radius: 5px;
+ border-radius: var(--border-radius);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 600px;
margin: 0 auto;
@@ -303,7 +333,7 @@ button.save-button:hover {
font-weight: bold;
margin-bottom: 30px;
text-align: center;
- color: #333;
+ color: var(--color-dark);
}
.security-item {
@@ -334,30 +364,30 @@ button.save-button:hover {
margin-left: 10px;
padding: 5px;
font-size: 16px;
- border-radius: 5px;
- border: 1px solid #ddd;
+ border-radius: var(--border-radius);
+ border: 1px solid var(--color-border);
}
button {
- background-color: #4CAF50;
+ background-color: var(--color-primary);
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
- border-radius: 5px;
+ border-radius: var(--border-radius);
}
button:hover {
- background-color: #45a049;
+ background-color: var(--color-primary-dark);
}
/* Estilos para a Página de Segurança */
.security-container {
- background-color: #fff;
+ background-color: var(--color-light);
padding: 20px;
- border-radius: 5px;
+ border-radius: var(--border-radius);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 600px;
margin: 0 auto;
@@ -368,7 +398,7 @@ button:hover {
font-weight: bold;
margin-bottom: 30px;
text-align: center;
- color: #333;
+ color: var(--color-dark);
}
.security-item {
@@ -394,30 +424,30 @@ button:hover {
margin-left: 10px;
padding: 5px;
font-size: 16px;
- border-radius: 5px;
- border: 1px solid #ddd;
+ border-radius: var(--border-radius);
+ border: 1px solid var(--color-border);
}
button {
- background-color: #4CAF50;
+ background-color: var(--color-primary);
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
- border-radius: 5px;
+ border-radius: var(--border-radius);
}
button:hover {
- background-color: #45a049;
+ background-color: var(--color-primary-dark);
}
.add-user button {
- background-color: #2196F3; /* Cor azul para adicionar */
+ background-color: var(--color-info); /* Cor azul para adicionar */
}
.add-user button:hover {
- background-color: #1e88e5;
+ background-color: var(--color-info-dark);
}
/* Estilos para a lista de usuários */
@@ -432,24 +462,24 @@ button:hover {
}
.security-item button {
- background-color: #f44336; /* Cor vermelha para remover */
+ background-color: var(--color-alert); /* Cor vermelha para remover */
padding: 5px 10px;
font-size: 14px;
cursor: pointer;
- border-radius: 5px;
+ border-radius: var(--border-radius);
margin-left: 10px;
}
.security-item button:hover {
- background-color: #e53935;
+ background-color: var(--color-alert-dark);
}
/* Estilos para o Dashboard */
.dashboard-container {
- background-color: #fff;
+ background-color: var(--color-light);
padding: 20px;
- border-radius: 5px;
+ border-radius: var(--border-radius);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 1200px;
margin: 20px auto;
@@ -460,7 +490,7 @@ button:hover {
font-weight: bold;
margin-bottom: 30px;
text-align: center;
- color: #333;
+ color: var(--color-dark);
}
.dashboard-summary {
@@ -471,23 +501,29 @@ button:hover {
}
.card {
- background-color: #fff;
+ background-color: var(--color-surface);
padding: 20px;
- border-radius: 5px;
+ 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: #333;
+ color: var(--color-dark);
margin-bottom: 10px;
}
.card p {
font-size: 18px;
- color: #555;
+ color: var(--color-text-muted);
}
.alerts {
@@ -502,11 +538,11 @@ button:hover {
.alert-item {
font-size: 16px;
- background-color: #f44336;
+ background-color: var(--color-alert);
color: white;
padding: 10px;
margin: 10px 0;
- border-radius: 5px;
+ border-radius: var(--border-radius);
}
.chargers-table {
@@ -527,11 +563,11 @@ table {
th, td {
padding: 12px;
text-align: left;
- border-bottom: 1px solid #ddd;
+ border-bottom: 1px solid var(--color-border);
}
th {
- background-color: #f2f2f2;
+ background-color: var(--color-table-header);
}
@media (max-width: 768px) {