projeto-controle-medicamentos/medicamentos.html at main · MvitorLS/projeto-controle-medicamentos · 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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html>
<html lang="pt-BR" class="scroll-smooth">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>SaúdeControl — Medicamentos</title>

  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- GSAP 3 + ScrollTrigger -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

  <!-- Lucide Icons -->
  <script src="https://unpkg.com/lucide@latest"></script>

  <!-- Custom Styles -->
  <link rel="stylesheet" href="css/style.css" />
</head>

<body>

  <div class="bg-ambient"></div>

  <!-- SIDEBAR -->
  <aside class="sidebar" id="sidebar">
    <div class="sidebar-brand">
      <div class="brand-icon">
        <i data-lucide="activity" class="w-6 h-6"></i>
      </div>
      <div class="brand-text">
        <h2>SaúdeControl</h2>
        <span>Monitoramento Pessoal</span>
      </div>
    </div>
    <nav class="sidebar-nav">
      <div class="nav-section-label">Principal</div>
      <a href="index.html" class="nav-item">
        <span class="icon"><i data-lucide="layout-grid" class="w-5 h-5"></i></span> Dashboard
      </a>
      <a href="medicamentos.html" class="nav-item active">
        <span class="icon"><i data-lucide="pill" class="w-5 h-5"></i></span> Medicamentos
      </a>
      <a href="receitas.html" class="nav-item">
        <span class="icon"><i data-lucide="file-text" class="w-5 h-5"></i></span> Receitas Médicas
      </a>
      <a href="metricas.html" class="nav-item">
        <span class="icon"><i data-lucide="line-chart" class="w-5 h-5"></i></span> Métricas de Saúde
      </a>
      <div class="nav-section-label">Histórico</div>
      <a href="historico.html" class="nav-item">
        <span class="icon"><i data-lucide="calendar" class="w-5 h-5"></i></span> Histórico de Doses
      </a>
    </nav>
    <div class="sidebar-footer">
      <div class="sidebar-user">
        <div class="user-avatar" id="userAvatar">U</div>
        <div class="user-info">
          <small>Bem-vindo,</small>
          <strong id="sidebarName">Usuário</strong>
        </div>
      </div>
    </div>
    <div style="padding: 12px 16px; border-top: 1px solid var(--border-subtle);">
      <button onclick="sairDaConta()" class="btn btn-secondary w-full justify-center flex items-center gap-2">
        <i data-lucide="log-out" class="w-4 h-4 text-rose-500"></i> Sair da Conta
      </button>
    </div>
  </aside>

  <!-- MAIN -->
  <div class="main">
    <div class="topbar">
      <button class="btn-toggle-sidebar" onclick="alternarSidebar()" title="Mostrar/esconder menu">
        <i data-lucide="menu" class="w-5 h-5"></i>
      </button>
      <div class="topbar-title">
        <h1>Medicamentos</h1>
        <p>Gerencie seus medicamentos diários com lembretes e horários</p>
      </div>
      <div class="topbar-actions">
        <div class="relative">
          <i data-lucide="search" class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
          <input type="text" id="searchMed" class="form-control pl-9" placeholder="Buscar medicamento..." style="width:200px" oninput="renderizarMedicamentos()" />
        </div>

        <!-- Theme Selector Widget -->
        <div class="theme-menu-container" id="themeContainer">
          <button class="btn-icon" onclick="alternarMenuTema()" title="Escolher Tema Visual">
            <i data-lucide="sun" id="themeIconCurrent" class="w-5 h-5"></i>
          </button>
          <div class="theme-dropdown" id="themeDropdownMenu">
            <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-light);padding:6px 10px 4px;">Tema da Interface</div>
            <button class="theme-option" data-theme-val="light" onclick="aplicarTema('light'); alternarMenuTema();">
              <span><span class="theme-badge-dot" style="background:#0284c7"></span>☀️ Claro (Apple)</span>
            </button>
            <button class="theme-option" data-theme-val="dark" onclick="aplicarTema('dark'); alternarMenuTema();">
              <span><span class="theme-badge-dot" style="background:#38bdf8"></span>🌙 Escuro (Linear)</span>
            </button>
            <button class="theme-option" data-theme-val="midnight" onclick="aplicarTema('midnight'); alternarMenuTema();">
              <span><span class="theme-badge-dot" style="background:#a855f7"></span>🌌 Meia-Noite (OLED)</span>
            </button>
            <button class="theme-option" data-theme-val="wellness" onclick="aplicarTema('wellness'); alternarMenuTema();">
              <span><span class="theme-badge-dot" style="background:#10b981"></span>🌿 Menta (Wellness)</span>
            </button>
          </div>
        </div>

        <button class="btn btn-primary flex items-center gap-2" onclick="abrirModalAdicao()">
          <i data-lucide="plus" class="w-4 h-4"></i> Novo Medicamento
        </button>
      </div>
    </div>

    <div class="page-content">

      <!-- Filters -->
      <div class="flex items-center gap-2 mb-6 flex-wrap">
        <button class="btn btn-sm btn-secondary filter-btn active" data-filter="all" onclick="definirFiltro('all', this)">Todos</button>
        <button class="btn btn-sm btn-secondary filter-btn" data-filter="daily" onclick="definirFiltro('daily', this)">Diários</button>
        <button class="btn btn-sm btn-secondary filter-btn" data-filter="sos" onclick="definirFiltro('sos', this)">S.O.S.</button>
        <button class="btn btn-sm btn-secondary filter-btn" data-filter="active" onclick="definirFiltro('active', this)">Ativos</button>
        <button class="btn btn-sm btn-secondary filter-btn" data-filter="inactive" onclick="definirFiltro('inactive', this)">Inativos</button>
      </div>

      <!-- Meds Grid -->
      <div id="medsGrid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;"></div>

    </div>
  </div>

  <!-- ADD/EDIT MODAL -->
  <div class="modal-overlay" id="medModal">
    <div class="modal">
      <div class="modal-header">
        <h2 class="modal-title flex items-center gap-2" id="medModalTitle">
          <i data-lucide="pill" class="w-5 h-5 text-sky-600"></i> Novo Medicamento
        </h2>
        <button class="modal-close" onclick="fecharModal('medModal')">✕</button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="medId" />

        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Nome do medicamento *</label>
            <input type="text" id="medName" class="form-control" placeholder="Ex: Losartana Potássica" required />
          </div>
          <div class="form-group">
            <label class="form-label">Dosagem *</label>
            <input type="text" id="medDosage" class="form-control" placeholder="Ex: 50mg" required />
          </div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Forma farmacêutica</label>
            <select id="medForm" class="form-control">
              <option value="comprimido">💊 Comprimido</option>
              <option value="capsula">🟡 Cápsula</option>
              <option value="xarope">🥤 Xarope</option>
              <option value="injecao">💉 Injeção</option>
              <option value="gotas">💧 Gotas</option>
              <option value="pomada">🪴 Pomada</option>
              <option value="outro">🧭 Outro</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">Frequência</label>
            <select id="medFreq" class="form-control" onchange="atualizarCamposHorarios()">
              <option value="daily">Diário (1x)</option>
              <option value="twice">2x ao dia</option>
              <option value="three">3x ao dia</option>
              <option value="four">4x ao dia</option>
              <option value="weekly">Semanal</option>
              <option value="biweekly">Quinzenal</option>
              <option value="monthly">Mensal</option>
              <option value="sos">S.O.S. (quando necessário)</option>
            </select>
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">Horário(s) de uso</label>
          <div id="timesFields" style="display:flex;gap:10px;flex-wrap:wrap;"></div>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Data de início</label>
            <input type="date" id="medStart" class="form-control" />
          </div>
          <div class="form-group">
            <label class="form-label">Data de fim (opcional)</label>
            <input type="date" id="medEnd" class="form-control" />
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">Observações & Instruções</label>
          <textarea id="medNotes" class="form-control" rows="2" placeholder="Tomar em jejum, com água abundante..."></textarea>
        </div>

        <div class="form-group">
          <label style="display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--text)">
            <input type="checkbox" id="medActive" checked class="w-4 h-4 rounded text-sky-600 focus:ring-sky-500" />
            Medicamento em uso ativo
          </label>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" onclick="fecharModal('medModal')">Cancelar</button>
        <button class="btn btn-primary" onclick="salvarMedicamento()">Salvar Medicamento</button>
      </div>
    </div>
  </div>

  <!-- DELETE CONFIRM -->
  <div class="modal-overlay" id="deleteModal">
    <div class="modal" style="max-width:420px">
      <div class="modal-header">
        <h2 class="modal-title flex items-center gap-2 text-rose-600">
          <i data-lucide="alert-triangle" class="w-5 h-5 text-rose-600"></i> Excluir Medicamento
        </h2>
        <button class="modal-close" onclick="fecharModal('deleteModal')">✕</button>
      </div>
      <div class="modal-body">
        <p class="text-slate-600">Tem certeza que deseja excluir <strong id="deletemedName" class="text-slate-900"></strong>?</p>
        <p style="font-size:13px;color:var(--text-muted);margin-top:8px">Esta ação removerá este medicamento do cronograma.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" onclick="fecharModal('deleteModal')">Cancelar</button>
        <button class="btn btn-danger" onclick="confirmarExclusao()">Excluir Definitivamente</button>
      </div>
    </div>
  </div>

  <!-- TOAST CONTAINER -->
  <div class="toast-container" id="toastContainer"></div>

  <!-- Scripts Modulares -->
  <script src="js/app.js"></script>
  <script src="js/medicamentos.js"></script>
  <script>
    if (!sessionStorage.getItem("usuarioLogado")) {
      window.location.href = "login.html";
    }
  </script>
</body>
</html>