Diario_Trabalho/index.html at main · Carla-coder/Diario_Trabalho · 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
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Registro Diário</title>
    <link rel="stylesheet" href="style.css" />
    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>Registro de Dias Trabalhados</h1>
        <div class="header-info" id="company-salary-section">
          <label>
            Empresa:
            <input
              type="text"
              id="company-name"
              placeholder="Digite o nome da empresa"
            />
          </label>
          <label>
            Salário: R$
            <input type="number" id="salary-input" placeholder="0,00" min="0" />
          </label>
          <button id="save-company-salary-btn">Salvar Empresa e Salário</button>
        </div>
      </header>

      <div class="form-container">
        <form id="work-form">
          <div class="form-row">
            <label>
              Data de Início:
              <input type="date" id="start-date" name="start-date" required />
            </label>
            <label>
              Horário de Entrada:
              <input type="time" id="entry-time" name="entry-time" required />
            </label>
            <label>
              Horário de Saída:
              <input type="time" id="exit-time" name="exit-time" required />
            </label>
          </div>
          <button type="submit">Adicionar Registro</button>
        </form>
      </div>

      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th>Data</th>
              <th>Entrada</th>
              <th>Saída</th>
              <th>Ações</th>
            </tr>
          </thead>
          <tbody id="records-table"></tbody>
        </table>
      </div>
    </div>

    <!-- Modal para o relatório mensal -->
    <div
      class="modal fade"
      id="reportModal"
      tabindex="-1"
      aria-labelledby="reportModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="reportModalLabel">Relatório Mensal</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <div id="reportContent"></div>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              Fechar
            </button>
            <button
              type="button"
              class="btn btn-custom"
              onclick="downloadPDF()"
            >
              Baixar PDF
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      <!-- Seu conteúdo atual -->
      <button
        type="button"
        class="btn btn-custom mt-3"
        onclick="generateMonthlyReport()"
      >
        Gerar Relatório Mensal
      </button>
    </div>

    <div class="watermark">Desenvolvido por Carla Coder © 2025</div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>