TecVerde/index.html at main · juniodevs/TecVerde · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TecVerde: Monitoramento com Firebase e Gráficos</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Chart.js via CDN -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Link para o arquivo CSS externo -->
    <link rel="stylesheet" href="style.css">
</head>
<body class="bg-gray-100">

    <div class="container">
        <header class="text-center mb-8">
            <h1 class="text-3xl font-bold text-green-600">TecVerde</h1>
            <p class="text-md text-gray-600">Monitoramento Avançado</p>

            <!-- Seção de Autenticação -->
            <div id="authSection" class="mt-6 p-4 bg-white rounded-lg shadow-md text-center">
                <!-- Botão Entrar com Google Melhorado -->
                <button id="googleSignInBtn" class="button bg-white hover:bg-gray-100 text-gray-700 font-medium border border-gray-300 shadow-sm w-full sm:w-auto flex items-center justify-center mx-auto">
                    <svg class="inline-block w-5 h-5 mr-3" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
                        <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
                        <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
                        <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
                        <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
                        <path fill="none" d="M0 0h48v48H0z"></path>
                    </svg>
                    Entrar com Google
                </button>
                <p id="authStatus" class="text-sm text-gray-500 mt-3">Aguardando login...</p>
                <p id="userInfo" class="text-sm text-gray-700 font-semibold mt-1"></p>
                <button id="signOutBtn" class="button button-sm bg-gray-500 hover:bg-gray-600 mt-3 hidden">Sair</button>
            </div>
             <p id="userIdDisplay" class="text-xs text-gray-400 mt-1"></p> <!-- Mantido para debug ou referência -->
        </header>

        <!-- Conteúdo Principal da Aplicação (inicialmente escondido) -->
        <main id="appContent" class="hidden">
            <!-- Formulário de Entrada -->
            <div id="inputForm" class="mb-8 p-6 bg-white rounded-lg shadow">
                <h2 class="card-title">Registrar Novo Consumo</h2>
                <div class="input-group">
                    <label for="nomeLocal" class="label">Nome do Local/Residência:</label>
                    <input type="text" id="nomeLocal" class="input" placeholder="Ex: Casa, Apartamento Bloco A">
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="input-group">
                        <label for="consumoAgua" class="label">Consumo de Água:</label>
                        <input type="number" id="consumoAgua" class="input" placeholder="Ex: 15000">
                    </div>
                    <div class="input-group">
                        <label for="unidadeAgua" class="label">Unidade (Água):</label>
                        <select id="unidadeAgua" class="input">
                            <option value="litros">Litros</option>
                            <option value="m3">Metros Cúbicos (m³)</option>
                        </select>
                    </div>
                </div>

                <div class="input-group">
                    <label for="consumoEnergia" class="label">Consumo de Energia (em kWh):</label>
                    <input type="number" id="consumoEnergia" class="input" placeholder="Ex: 300">
                </div>

                <div class="input-group">
                    <label for="periodo" class="label">Período de Referência:</label>
                    <input type="month" id="periodo" class="input">
                </div>

                <button id="submitBtn" class="button w-full">
                    <span id="submitBtnText">Registrar Consumo</span>
                    <div id="submitSpinner" class="loading-spinner hidden w-5 h-5 inline-block ml-2"></div>
                </button>
            </div>

            <!-- Seção de Gráficos -->
            <div id="chartsSection" class="chart-card hidden">
                <h2 class="card-title">Histórico de Consumo (Gráficos)</h2>
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div>
                        <h3 class="text-md font-semibold text-center mb-2">Consumo de Água (Litros)</h3>
                        <div class="chart-container">
                            <canvas id="aguaChart"></canvas>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-md font-semibold text-center mb-2">Consumo de Energia (kWh)</h3>
                        <div class="chart-container">
                            <canvas id="energiaChart"></canvas>
                        </div>
                    </div>
                </div>
                 <p id="noChartData" class="text-center text-gray-500 mt-4 hidden">Sem dados suficientes para exibir gráficos.</p>
            </div>

            <!-- Seção de Análise de Consumo -->
            <div id="analysisSection" class="analysis-card hidden">
                <h2 class="card-title">Análise de Consumo</h2>
                <div id="analysisContent" class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <h3 class="text-md font-semibold mb-2 text-blue-700">Água</h3>
                        <p class="analysis-item">Consumo Médio Mensal: <span id="avgAgua" class="analysis-value">N/A</span></p>
                        <p class="analysis-item">Consumo Total Registrado: <span id="totalAgua" class="analysis-value">N/A</span></p>
                        <p class="analysis-item">Variação (vs Mês Anterior): <span id="varAgua" class="analysis-value">N/A</span></p>
                        <p class="analysis-item">Estimativa de Custo (Último Mês): <span id="costAgua" class="analysis-value">N/A</span></p>
                    </div>
                    <div>
                        <h3 class="text-md font-semibold mb-2 text-yellow-600">Energia</h3>
                        <p class="analysis-item">Consumo Médio Mensal: <span id="avgEnergia" class="analysis-value">N/A</span></p>
                        <p class="analysis-item">Consumo Total Registrado: <span id="totalEnergia" class="analysis-value">N/A</span></p>
                        <p class="analysis-item">Variação (vs Mês Anterior): <span id="varEnergia" class="analysis-value">N/A</span></p>
                        <p class="analysis-item">Estimativa de Custo (Último Mês): <span id="costEnergia" class="analysis-value">N/A</span></p>
                    </div>
                </div>
                <div class="mt-6 pt-4 border-t border-gray-200">
                    <h3 class="text-md font-semibold mb-2">Configurar Custos Estimados</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="input-group">
                            <label for="custoAguaM3" class="label">Custo por m³ de Água (R$):</label>
                            <input type="number" id="custoAguaM3" class="input" placeholder="Ex: 5.50" step="0.01">
                        </div>
                        <div class="input-group">
                            <label for="custoEnergiaKWh" class="label">Custo por kWh de Energia (R$):</label>
                            <input type="number" id="custoEnergiaKWh" class="input" placeholder="Ex: 0.75" step="0.01">
                        </div>
                    </div>
                    <button id="saveCostsBtn" class="button mt-2">Salvar Custos e Recalcular</button>
                </div>
                <p id="noAnalysisData" class="text-center text-gray-500 mt-4 hidden">Sem dados suficientes para análise detalhada.</p>
            </div>

            <!-- Seção de Registros Salvos -->
            <div id="recordsSection" class="records-card hidden">
                <h2 class="card-title">Registros Salvos</h2>
                <div id="loadingRecords" class="text-center py-4">
                    <div class="loading-spinner"></div>
                    <p class="text-sm text-gray-500 mt-2">Carregando registros...</p>
                </div>
                <ul id="recordsList" class="space-y-3">
                    <!-- Itens de registro serão adicionados aqui -->
                </ul>
                <p id="noRecords" class="text-center text-gray-500 mt-4 hidden">Nenhum registro encontrado.</p>
            </div>
        </main>
    </div>

    <div id="messageBox" class="message-box"></div>

    <script src="script.js" type="module"></script>
</body>
</html>