diff options
Diffstat (limited to 'frontend/style.css')
| -rw-r--r-- | frontend/style.css | 253 |
1 files changed, 253 insertions, 0 deletions
diff --git a/frontend/style.css b/frontend/style.css new file mode 100644 index 0000000..be965cb --- /dev/null +++ b/frontend/style.css @@ -0,0 +1,253 @@ +/* --- Variáveis de Cor (Paleta "Neon Tech") --- */ +:root { + --bg-color: #121212; /* Fundo principal (preto) */ + --card-color: #1e1e1e; /* Fundo dos cards (grafite) */ + --border-color: #2f2f2f; /* Bordas sutis */ + --text-primary: #e0e0e0; /* Texto principal (cinza claro) */ + --text-secondary: #aaaaaa; /* Texto secundário (cinza) */ + --accent-color: #00ff9a; /* Destaque (verde neon) */ + --accent-color-dark: #00b36e; + --accent-color-transparent: rgba(0, 255, 154, 0.1); + + --temp-color: #ff5252; /* Vermelho para temperatura */ + --pressure-color: #448aff; /* Azul para pressão */ + --humidity-color: #29b6f6; /* Ciano para umidade */ + --uv-color: #fdd835; /* Amarelo para UV */ + + --font-family: 'Sora', 'Segoe UI', system-ui, sans-serif; +} + +/* --- Resets e Estilos Globais --- */ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: var(--font-family); + background-color: var(--bg-color); + color: var(--text-primary); + display: flex; + height: 100vh; + overflow: hidden; /* Impede o scroll da página inteira */ +} + +h1, h2, h3 { + font-weight: 600; +} + +/* --- Layout Principal --- */ +.dashboard-container { + display: flex; + width: 100%; + height: 100%; +} + +/* --- Barra Lateral (Sidebar) --- */ +.sidebar { + width: 280px; + flex-shrink: 0; + background-color: var(--card-color); + border-right: 1px solid var(--border-color); + display: flex; + flex-direction: column; + padding: 20px; + overflow-y: auto; /* Permite scroll na sidebar se precisar */ +} + +.sidebar-header { + text-align: center; + margin-bottom: 30px; + border-bottom: 1px solid var(--border-color); + padding-bottom: 20px; +} +.sidebar-header h2 { + color: var(--accent-color); + font-weight: 700; + letter-spacing: 1px; +} +.sidebar-header span { + font-size: 0.9rem; + color: var(--text-secondary); +} + +.sidebar-nav { + flex-grow: 1; +} +.sidebar-nav h3 { + color: var(--text-secondary); + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 0.5px; + margin-bottom: 15px; + display: flex; + align-items: center; + gap: 8px; +} + +/* Widgets de Dados Atuais */ +.data-widget { + display: flex; + align-items: center; + margin-bottom: 20px; + background-color: var(--bg-color); + padding: 12px; + border-radius: 8px; + border: 1px solid var(--border-color); + transition: border-color 0.3s ease; +} +.data-widget:hover { + border-color: var(--accent-color); +} + +.widget-icon { + font-size: 1.5rem; + margin-right: 15px; + padding: 10px; + border-radius: 50%; + width: 48px; + height: 48px; + display: grid; + place-items: center; +} +.widget-info span { + font-size: 1.4rem; + font-weight: 600; + color: var(--text-primary); +} +.widget-info p { + font-size: 0.9rem; + color: var(--text-secondary); +} + +/* Cores dos ícones dos widgets */ +.icon-temp { background-color: rgba(255, 82, 82, 0.1); color: var(--temp-color); } +.icon-humidity { background-color: rgba(41, 182, 246, 0.1); color: var(--humidity-color); } +.icon-wind { background-color: rgba(0, 255, 154, 0.1); color: var(--accent-color); } +.icon-pressure { background-color: rgba(68, 138, 255, 0.1); color: var(--pressure-color); } + +.sidebar-footer { + border-top: 1px solid var(--border-color); + padding-top: 20px; + text-align: center; +} +.sidebar-footer button { + background-color: var(--accent-color); + color: #000; + border: none; + padding: 12px 20px; + border-radius: 5px; + cursor: pointer; + font-family: var(--font-family); + font-weight: 600; + font-size: 1rem; + width: 100%; + margin-bottom: 10px; + transition: background-color 0.3s ease; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; +} +.sidebar-footer button:hover { + background-color: var(--accent-color-dark); +} +.sidebar-footer p { + font-size: 0.8rem; + color: var(--text-secondary); +} +#statusText { + color: var(--accent-color); + font-weight: 600; +} + +/* --- Conteúdo Principal (Gráficos) --- */ +.main-content { + flex-grow: 1; + padding: 30px; + overflow-y: auto; /* Permite scroll se os gráficos não couberem */ +} + +.main-content h1 { + font-size: 2rem; + margin-bottom: 30px; + color: var(--text-primary); +} + +.charts-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 20px; +} + +.chart-card { + background-color: var(--card-color); + border: 1px solid var(--border-color); + border-radius: 8px; + padding: 20px; + min-height: 350px; + display: flex; + flex-direction: column; + + /* A CORREÇÃO VITAL: + Isso "prende" o canvas do Chart.js dentro do card, + impedindo que ele tente criar um canvas infinito + quando executado no Live Server. + */ + position: relative; +} +.chart-card.large { + grid-column: span 2; /* Faz o gráfico ocupar 2 colunas */ +} +.chart-card h3 { + margin-bottom: 20px; + text-align: center; + color: var(--text-secondary); + font-weight: 400; + font-size: 1rem; +} + +/* Contêiner para Medidores (Gauge) */ +.gauge-container { + position: relative; + flex-grow: 1; + display: grid; + place-items: center; +} +.gauge-text { + position: absolute; + font-size: 2.5rem; + font-weight: 700; + color: var(--text-primary); +} +#uvText.gauge-text { + font-size: 3rem; /* UV é só um número, pode ser maior */ +} + +/* --- Responsividade --- */ +@media (max-width: 1200px) { + .chart-card.large { + grid-column: span 1; /* Em telas menores, o gráfico largo ocupa 1 coluna */ + } +} +@media (max-width: 900px) { + body { + height: auto; + overflow: auto; /* Permite scroll em telas pequenas */ + } + .dashboard-container { + flex-direction: column; + } + .sidebar { + width: 100%; + height: auto; + border-right: none; + border-bottom: 1px solid var(--border-color); + overflow-y: visible; + } + .main-content { + height: auto; + overflow-y: visible; + } +}
\ No newline at end of file |