parte RUAN

Author: Ruan-Marcelo

README.md

@@ -21,6 +21,7 @@ Criar uma interface intuitiva e responsiva que funcione bem tanto em campo quant
 ## 🛠️ Tecnologias Utilizadas
 
 - 🌐 **HTML5 Semântico**
+- ***Bootstrap***
 - 🎨 **CSS3**
   - Flexbox
   - Grid Layout

assets/CSS/style.css

@@ -0,0 +1,71 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+      body {
+        background-color: #0f172a;
+        color: white;
+      }
+nav ul {
+  display: flex;
+  justify-content: space-between;
+}
+.status-online {
+  background: linear-gradient(45deg, #00ff88, #00cc66);
+  color: black;
+  padding: 5px 10px;
+  border-radius: 5px;
+  font-weight: bold;
+}
+
+.card {
+  border-radius: 10px;
+  transition: 0.3s;
+}
+
+.card:hover {
+  transform: scale(1.03);
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+}
+
+.sos-btn {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 999;
+}
+
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.bi-bootstrap {
+  color: #fff;
+}
+
+.text-warning {
+  font-weight: bold;
+}
+
+footer {
+  border-top: 10px solid;
+  border-image: linear-gradient(
+    90deg,
+    #ff0000,
+    #ff7f00,
+    #ffff00,
+    #00ff00,
+    #00ffff,
+    #0000ff,
+    #8b00ff
+  ) 1;
+}
+
+@media (max-width: 768px) {
+  nav ul {
+    flex-direction: column;
+    gap: 10px;
+  }
+}

cadastro.html

@@ -9,18 +9,29 @@
       href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
       rel="stylesheet"
     />
+    <!-- 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="./assets/CSS/style.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
+    />
   </head>
   <style>
-      body {
-        background-color: #0f172a;
-        color: white;
-      }
+    body {
+      background-color: #0f172a;
+      color: white;
+    }
   </style>
 
   <body>
     <header class="bg-dark p-3">
       <div class="container d-flex justify-content-between align-items-center">
-        <h3>🚁 SkyTrack</h3>
+        <h3>SkyTrack</h3>
         <nav>
           <ul class="nav">
             <li class="nav-item">
@@ -42,7 +53,13 @@ <h2>Cadastro de Drone</h2>
       <form>
         <div class="mb-3">
           <label for="nome" class="form-label">Nome do Drone</label>
-          <input type="text" id="nome" class="form-control" required />
+          <input
+            type="text"
+            id="nome"
+            placeholder="Ex: Drone Alpha"
+            class="form-control"
+            required
+          />
         </div>
 
         <div class="mb-3">
@@ -52,6 +69,7 @@ <h2>Cadastro de Drone</h2>
             id="serie"
             class="form-control"
             minlength="8"
+            placeholder="345366"
             required
           />
         </div>
@@ -63,13 +81,14 @@ <h2>Cadastro de Drone</h2>
             id="autonomia"
             class="form-control"
             max="120"
+            placeholder="Max 120"
             required
           />
         </div>
 
         <div class="mb-3">
           <label class="form-label">Setor</label>
-          <select class="form-select" required>
+          <select id="setor" class="form-select" required>
             <option value="">Selecione</option>
             <option>Entrega Rápida</option>
             <option>Inspeção</option>
@@ -92,6 +111,47 @@ <h2>Cadastro de Drone</h2>
         <button type="submit" class="btn btn-success">Cadastrar</button>
       </form>
     </main>
+    <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>
 
     <script>
       const form = document.querySelector("form");
@@ -102,7 +162,7 @@ <h2>Cadastro de Drone</h2>
         const drone = {
           nome: document.getElementById("nome").value,
           serie: document.getElementById("serie").value,
-          autonomia: document.getElementById("autonomia").value,
+          autonomia: Number(document.getElementById("autonomia").value),
           setor: document.querySelector("select").value,
           estado: document.querySelector('input[name="estado"]:checked')?.value,
         };
@@ -113,17 +173,23 @@ <h2>Cadastro de Drone</h2>
 
         localStorage.setItem("drones", JSON.stringify(drones));
 
-        mostrarMensagem("Drone cadastrado com sucesso 🚀");
+        mostrarMensagem("Drone cadastrado com sucesso");
 
         form.reset();
+
+        setTimeout(() => {
+          window.location.href = "index.html";
+        }, 1500);
       });
 
       function mostrarMensagem(msg) {
         const alerta = document.createElement("div");
         alerta.className = "alert alert-success mt-3";
         alerta.innerText = msg;
 
-        document.querySelector("main").appendChild(alerta);
+        const form = document.querySelector("form");
+
+        form.parentNode.insertBefore(alerta, form);
 
         setTimeout(() => {
           alerta.remove();