SkyTrack_Project/index.html at main · ByteCoreRP/SkyTrack_Project · 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
<!doctype html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SkyTrack Drones</title>

    <!-- Bootstrap -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./assets/CSS/style.css" />
    <!-- icon da pagina -->
    <link
      rel="icon"
      type="image/x-icon"
      href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRArHRQlKS6To2_41tWeGjSX8gB-A3QEX8Xwg&s"
    />

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
    />
  </head>

  <body>
    <header class="bg-dark p-3">
      <div class="container d-flex justify-content-between align-items-center">
        <h3>SkyTrack</h3>
        <nav>
          <ul class="nav">
            <li class="nav-item">
              <a href="index.html" class="nav-link text-white">Dashboard</a>
            </li>
            <li class="nav-item">
              <a href="cadastro.html" class="nav-link text-white"
                >Cadastrar Drone</a
              >
            </li>
          </ul>
        </nav>
      </div>
    </header>

    <main class="container my-4">
      <section class="mb-5">
        <h2>Resumo da Frota</h2>

        <div class="table-responsive">
          <table class="table table-dark table-striped">
            <thead>
              <tr>
                <th>Drone</th>
                <th>Status</th>
                <th>Autonomia</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </section>
      <button class="btn btn-danger mt-3" onclick="limparDados()">
        Limpar Todos os Drones
      </button>
    </main>

    <section class="alertas d-flex flex-wrap gap-3 container mb-4">
      <article class="card p-3 bg-dark text-white flex-fill">
        <header>
          <h5 class="text-warning">Drone em Manutenção</h5>
        </header>
        <p><strong>Drone:</strong> Sky-01</p>
        <p><strong>Motivo:</strong> Revisão preventiva</p>
      </article>

      <article class="card p-3 bg-dark text-white flex-fill">
        <header>
          <h5 class="text-danger">Bateria Fraca</h5>
        </header>
        <p><strong>Drone:</strong> Sky-07</p>
        <p><strong>Nível:</strong> 15%</p>
      </article>
    </section>

    <button class="btn btn-danger sos-btn">
      <i class="bi bi-chat-heart"></i>
    </button>

    <footer class="bg-dark text-white py-4 mt-5">
      <div
        class="container d-flex flex-wrap justify-content-between align-items-start"
      >
        <!-- Esquerda -->
        <div>
          <p class="mb-1">&copy; 2025 SkyTrack</p>
          <p class="mb-0">Todos os direitos reservados</p>
        </div>

        <address class="mb-0 text-center">
          BrenoMaranhao@skytrack.com<br />
          (16) 4002-8922 <br />
          Ribeirão Preto - SP
        </address>

        <nav>
          <ul class="nav flex-column text-end">
            <li class="nav-item">
              <a href="index.html" class="nav-link text-white p-0">Dashboard</a>
            </li>
            <li class="nav-item">
              <a href="cadastro.html" class="nav-link text-white p-0"
                >Cadastrar Drone</a
              >
            </li>
            <li class="nav-item">
              <a
                href="https://github.com/ByteCoreRP/SkyTrack_Project.git"
                class="nav-link text-white p-0"
              >
                GitHub
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </footer>

    <!-- professor esse script ele mostra os drones cadastrados na pagina
    cadastro.html e se não tiver nenhum cadastrado da uma mensagem de nenhum
    encontrado -->

    <script>
      const tabela = document.querySelector("tbody");

      let drones = JSON.parse(localStorage.getItem("drones")) || [];

      //limpa
      tabela.innerHTML = "";

      if (drones.length === 0) {
        tabela.innerHTML = `
      <tr>
        <td colspan="3" class="text-center text-primary">
          Nenhum drone cadastrado
        </td>
      </tr>
    `;
      } else {
        drones.forEach((drone) => {
          const statusClass =
            drone.estado === "Ativo" ? "status-online" : "text-warning";

          const linha = `
        <tr>
          <td class="truncate">${drone.nome}</td>
          <td><span class="${statusClass}">${drone.estado}</span></td>
          <td>${drone.autonomia} min</td>
        </tr>
      `;

          tabela.innerHTML += linha;
        });
      }

      //essa parte professor é pra excluir todos os drones e tem um alert de confirm para não excluir de uma vez
      function limparDados() {
        if (confirm("Tem certeza?")) {
          localStorage.removeItem("drones");
          location.reload();
        }
      }
    </script>
  </body>
</html>