index.html

<!DOCTYPE html>
<html lang="pt-PT">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1">
<title>Vetranquil</title>

<!-- PWA -->
<link rel="manifest" href="manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Vetranquil">
<meta name="theme-color" content="#2B3328">
<link rel="apple-touch-icon" href="icons/icon-192.png">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap" rel="stylesheet">

<link rel="stylesheet" href="css/style.css">
</head>
<body>

<!-- ===== ECRÃ DE LOGIN ===== -->
<div id="loginScreen" class="login-screen">
  <div class="login-card">
    <div class="tag-icon">🐄</div>
    <h1>Vetranquil</h1>
    <p class="login-sub">Registo de tratamentos veterinários</p>
    <form id="loginForm">
      <input type="email" id="loginEmail" placeholder="Email" autocomplete="username" required>
      <input type="password" id="loginPassword" placeholder="Palavra-passe" autocomplete="current-password" required>
      <button type="submit" class="btn-primary">Entrar</button>
      <p id="loginError" class="login-error"></p>
    </form>
  </div>
</div>

<!-- ===== ESCOLHA DE PAPEL ===== -->
<div id="roleScreen" class="login-screen hidden">
  <div class="login-card">
    <div class="tag-icon">🐄</div>
    <h1>Quem está a usar?</h1>
    <p class="login-sub">Só o veterinário pode registar tratamentos.</p>
    <div class="role-choice">
      <button id="roleVet" class="btn-primary">Sou veterinário</button>
      <button id="roleCampino" class="btn-secondary">Sou campino</button>
    </div>
  </div>
</div>

<!-- ===== APP ===== -->
<div id="app" class="app hidden">

  <header class="app-header">
    <span class="tag-icon small">🐄</span>
    <h1 id="viewTitle">Painel</h1>
    <button id="roleBadge" class="role-badge" title="Trocar utilizador"></button>
    <button id="logoutBtn" class="icon-btn" title="Sair">⏻</button>
  </header>

  <main id="main">

    <!-- DASHBOARD -->
    <section id="view-dashboard" class="view">

      <div class="hero">
        <svg viewBox="0 0 400 180" class="hero-art" preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg">
          <rect width="400" height="180" fill="#CFE8DB"/>
          <circle cx="340" cy="40" r="26" fill="#F2C572"/>
          <path d="M0,110 Q100,80 200,105 T400,95 V180 H0 Z" fill="#95C9A6"/>
          <path d="M0,130 Q120,105 240,128 T400,120 V180 H0 Z" fill="#6FA986"/>
          <path d="M0,155 Q140,135 260,152 T400,148 V180 H0 Z" fill="#40916C"/>
          <g transform="translate(90,128)">
            <ellipse cx="0" cy="18" rx="34" ry="20" fill="#F7F4EC"/>
            <ellipse cx="-20" cy="6" rx="9" ry="8" fill="#F7F4EC"/>
            <circle cx="-24" cy="2" r="3.5" fill="#1B2E22"/>
            <ellipse cx="10" cy="8" rx="8" ry="6" fill="#1B2E22"/>
            <ellipse cx="-8" cy="24" rx="7" ry="5" fill="#1B2E22"/>
            <rect x="-6" y="30" width="4" height="10" fill="#F7F4EC"/>
            <rect x="6" y="30" width="4" height="10" fill="#F7F4EC"/>
          </g>
          <g transform="translate(220,140) scale(0.85)">
            <ellipse cx="0" cy="18" rx="34" ry="20" fill="#EDE6D6"/>
            <ellipse cx="22" cy="6" rx="9" ry="8" fill="#EDE6D6"/>
            <circle cx="26" cy="2" r="3.5" fill="#1B2E22"/>
            <ellipse cx="-10" cy="10" rx="9" ry="7" fill="#8B5E3C"/>
            <rect x="-6" y="30" width="4" height="10" fill="#EDE6D6"/>
            <rect x="6" y="30" width="4" height="10" fill="#EDE6D6"/>
          </g>
        </svg>
        <div class="hero-overlay">
          <p class="hero-title">Vetranquil</p>
          <p class="hero-sub">Gestão de tratamentos veterinários</p>
        </div>
      </div>

      <div class="hero-actions">
        <button class="hero-btn primary" data-goto="registar">＋ Adicionar tratamento</button>
        <button class="hero-btn secondary" data-goto="historico">Histórico de tratamentos</button>
      </div>

      <div class="stat-row">
        <div class="stat-card">
          <span class="stat-num" id="statTotalAnimais">0</span>
          <span class="stat-label">Animais totais</span>
        </div>
        <div class="stat-card warn">
          <span class="stat-num" id="statEmCarencia">0</span>
          <span class="stat-label">Em carência</span>
        </div>
      </div>
      <h2 class="section-label">Carência ativa</h2>
      <div id="carenciaList" class="tag-list"></div>
      <p id="carenciaEmpty" class="empty-msg hidden">Nenhum animal em período de carência.</p>

      <h2 class="section-label">Últimos tratamentos</h2>
      <div id="recentList" class="record-list"></div>
    </section>

    <!-- REGISTAR TRATAMENTO -->
    <section id="view-registar" class="view hidden">
      <div id="registarLocked" class="locked-msg hidden">
        <span class="locked-ic">🔒</span>
        <p>Apenas o veterinário pode registar tratamentos.</p>
      </div>
      <form id="tratamentoForm" class="form-card">
        <label>Manada
          <select id="fManada" required></select>
        </label>
        <label>Animal
          <select id="fAnimal" required>
            <option value="__manada__">Toda a manada</option>
          </select>
        </label>
        <label>Medicamento
          <select id="fMedicamento" required></select>
        </label>
        <div class="row-2">
          <label>Dose
            <input type="text" id="fDose" placeholder="ex: 10ml">
          </label>
          <label>Data
            <input type="date" id="fData" required>
          </label>
        </div>
        <label>Carência (dias)
          <input type="number" id="fCarencia" min="0">
        </label>
        <label>Aplicado por
          <input type="text" id="fAplicadoPor" placeholder="nome do campino/veterinário">
        </label>
        <label>Notas
          <textarea id="fNotas" rows="2" placeholder="opcional"></textarea>
        </label>
        <button type="submit" class="btn-primary">Guardar tratamento</button>
        <p id="tratamentoMsg" class="form-msg"></p>
      </form>
    </section>

    <!-- ANIMAIS / MANADAS -->
    <section id="view-animais" class="view hidden">
      <div class="sub-tabs">
        <button class="sub-tab active" data-sub="manadas">Manadas</button>
        <button class="sub-tab" data-sub="animais">Animais</button>
      </div>

      <div id="sub-manadas" class="sub-view">
        <form id="manadaForm" class="inline-form">
          <input type="text" id="fManadaNome" placeholder="Nome da manada" required>
          <button type="submit" class="btn-small">Adicionar</button>
        </form>
        <div id="manadasList" class="simple-list"></div>
      </div>

      <div id="sub-animais" class="sub-view hidden">
        <form id="animalForm" class="form-card compact">
          <label>Manada
            <select id="fAnimalManada" required></select>
          </label>
          <label>Nº brinco
            <input type="text" id="fBrinco" placeholder="ex: PT 123456789" required>
          </label>
          <label>Nome (opcional)
            <input type="text" id="fAnimalNome">
          </label>
          <label>Sexo
            <select id="fSexo">
              <option value="F">Fêmea</option>
              <option value="M">Macho</option>
            </select>
          </label>
          <button type="submit" class="btn-small">Adicionar animal</button>
        </form>
        <div id="animaisList" class="tag-list"></div>
      </div>
    </section>

    <!-- MEDICAMENTOS -->
    <section id="view-medicamentos" class="view hidden">
      <form id="medicamentoForm" class="form-card compact">
        <label>Nome
          <input type="text" id="fMedNome" required>
        </label>
        <div class="row-2">
          <label>Unidade
            <input type="text" id="fMedUnidade" placeholder="ml, mg...">
          </label>
          <label>Carência padrão (dias)
            <input type="number" id="fMedCarencia" min="0" value="0">
          </label>
        </div>
        <label>Notas
          <input type="text" id="fMedNotas" placeholder="opcional">
        </label>
        <button type="submit" class="btn-small">Adicionar medicamento</button>
      </form>
      <div id="medicamentosList" class="simple-list"></div>
    </section>

    <!-- HISTÓRICO -->
    <section id="view-historico" class="view hidden">
      <div class="search-bar">
        <span class="search-ic">⌕</span>
        <input type="text" id="histSearch" placeholder="Pesquisar brinco, medicamento, veterinário...">
      </div>
      <div id="histChips" class="chip-row"></div>
      <div id="historicoList" class="record-list"></div>
      <p id="historicoEmpty" class="empty-msg hidden">Sem tratamentos registados.</p>
    </section>

  </main>

  <nav class="tabbar">
    <button class="tab active" data-view="dashboard"><span class="tab-ic">◎</span>Painel</button>
    <button class="tab" data-view="registar"><span class="tab-ic">+</span>Registar</button>
    <button class="tab" data-view="animais"><span class="tab-ic">▤</span>Animais</button>
    <button class="tab" data-view="medicamentos"><span class="tab-ic">✚</span>Medic.</button>
    <button class="tab" data-view="historico"><span class="tab-ic">≡</span>Histórico</button>
  </nav>
</div>

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