Atualizar Página Offline

O conteúdo abaixo será enviado automaticamente ao app quando esta página for carregada.

Área Js

SOMENTE CONTEÚDO

Área Body

SOMENTE CONTEÚDO HTML CSS, BODY

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Apontamentos Offline</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style>
    :root {
      --gap: 12px;
      --radius: 10px;
      --bg: #f7f8fa;
      --card: #ffffff;
      --border: #e5e7eb;
      --text: #111827;
      --muted: #6b7280;
      --primary: #2563eb;
      --danger: #dc2626;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0; padding: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--text); background: var(--bg);
    }
    .container {
      max-width: 720px; margin: 0 auto; padding: 20px;
    }
    .card {
      background: var(--card); border: 1px solid var(--border);
      border-radius: var(--radius); padding: 16px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    h2 { margin: 0 0 12px; font-size: 1.4rem; }
    .hint { color: var(--muted); font-size: 0.9rem; margin-bottom: 14px; }
    /* Grid responsivo dos campos */
    .grid {
      display: grid; gap: var(--gap);
      grid-template-columns: 1fr;
    }
    @media (min-width: 640px) {
      .grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .grid .full { grid-column: 1 / -1; }
    }
    label {
      display: block; font-weight: 600; margin-bottom: 6px;
    }
    input, select {
      width: 100%;
      padding: 10px 12px; border: 1px solid var(--border);
      border-radius: 8px; background: #fff; color: var(--text);
      font-size: 1rem;
    }
    .actions {
      display: grid; gap: var(--gap); margin-top: 16px;
      grid-template-columns: 1fr;
    }
    @media (min-width: 480px) {
      .actions { grid-template-columns: 1fr 1fr; }
    }
    button {
      padding: 12px; border: 1px solid var(--border);
      border-radius: 8px; font-weight: 600; font-size: 1rem;
      cursor: pointer; background: #fff; color: var(--text);
    }
    .primary { background: var(--primary); color: #fff; border-color: var(--primary); }
    .danger { background: var(--danger); color: #fff; border-color: var(--danger); }
    .status {
      margin-top: 12px; font-size: 0.95rem; padding: 10px;
      background: #eef2ff; color: #1e40af; border: 1px solid #c7d2fe;
      border-radius: 8px;
    }
  </style>
<body>
  <div class="container">
    <div class="card">
      <h2><span id="linkHome" style="display:none"><a href="#" onclick="javascript:window.AppInventor.setWebViewString('GO_HOME');">🏠</a><span> Formulário de apontamentos </h2>
      <p class="hint">Preencha os campos abaixo. Os dados serão salvos no arquivo local apontamentos.txt.</p>
      <div id="status" class="status">Checando conexão...</div>
      <form id="form" onsubmit="event.preventDefault(); salvarApontamento();">
        <div class="grid">
          <div class="field">
            <label for="matricula">Matrícula</label>
            <input type="text" id="matricula" inputmode="numeric" autocomplete="off">
          </div>
          <div class="field">
            <label for="dataInicio">Data início</label>
            <input type="date" id="dataInicio">
          </div>
          <div class="field">
            <label for="horaInicio">Hora início</label>
            <input type="time" id="horaInicio">
          </div>
          <div class="field">
            <label for="dataFim">Data fim</label>
            <input type="date" id="dataFim">
          </div>
          <div class="field">
            <label for="horas">Horas</label>
            <input type="number" id="horas" min="0" step="0.01">
          </div>
          <div class="field">
            <label for="codigoServico">Código serviço</label>
            <input type="text" id="codigoServico" autocomplete="off">
          </div>
        </div>
        <div class="actions">
<button type='submit' class='primary' onclick='testeJs()'>Testar Js</button>
          <button type="submit" class="primary" onclick="testeScript()">Teste do Script</button>
          <button type="submit" class="primary">Salvar apontamento</button>
          <button type="button" class="danger" onclick="apagarArquivo()">Apagar apontamentos</button>
        </div>
      </form>
    </div>
  </div>
</body>
</html>

Criar conteúdo da Página Offline

🏠 Teste Body

🏠 Home

Área Js

SOMENTE CONTEÚDO

Área Body

SOMENTE CONTEÚDO HTML CSS, BODY