watt-io · mtsnatalino · Dec 26, 2024 · Dec 26, 2024 · Dec 26, 2024 · Dec 26, 2024
diff --git a/index.html b/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!-- CSS -->
+    <link rel="stylesheet" href="./src/styles/main.css" />
+
+    <!-- Fontes -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Electrolize&family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- FavIcon -->
+    <link rel="shortcut icon" href="./src/icons/favI.png" type="image/x-icon" />
+
+    <title>Wattio - Marketplace de Energia</title>
+  </head>
+  <body>
+    <header>
+      <div class="container">
+        <img src="./src/icons/iconLightning.png" alt="icone de relampago" />
+        <h1>Wattio - Marketplace de Energia</h1>
+        <img src="./src/icons/iconLightning.png" alt="icone de relampago" />
+      </div>
+    </header>
+
+    <main class="main-content">
+      <section class="calculo-container">
+        <h2>Calcule a economia de suas contas</h2>
+        <div class="input-container">
+          <input
+            type="number"
+            id="valorConta"
+            placeholder="Insira o valor médio de sua conta"
+          />
+          <button id="mostrarOfertasBtn">MOSTRAR OFERTAS</button>
+        </div>
+      </section>
+
+      <section id="opcoesOfertas" style="display: none">
+        <h2>Escolha uma oferta:</h2>
+        <form id="ofertasForm"></form>
+        <button id="contratarBtn" style="display: none">CONTRATAR</button>
+      </section>
+    </main>
+
+    <!-- JS -->
+    <script defer src="./src/scripts/engine.js"></script>
+  </body>
+</html>
+
diff --git a/src/icons/favI.png b/src/icons/favI.png
diff --git a/src/icons/iconLightning.png b/src/icons/iconLightning.png
diff --git a/src/scripts/engine.js b/src/scripts/engine.js
@@ -0,0 +1,92 @@
+const ofertas = [
+  {
+    nome: "EnerFácil",
+    valorMinimoMensal: 1000,
+    valorMaximoMensal: 40000,
+    desconto: 0.2,
+  },
+  {
+    nome: "EnerLimpa",
+    valorMinimoMensal: 10000,
+    valorMaximoMensal: 80000,
+    desconto: 0.25,
+  },
+  {
+    nome: "EnerGrande",
+    valorMinimoMensal: 1000,
+    valorMaximoMensal: 40000,
+    desconto: 0.2,
+  },
+];
+
+const mostrarOfertasBtn = document.getElementById("mostrarOfertasBtn");
+const opcoesOfertas = document.getElementById("opcoesOfertas");
+const ofertasForm = document.getElementById("ofertasForm");
+const contratarBtn = document.getElementById("contratarBtn");
+const valorContaInput = document.getElementById("valorConta");
+
+mostrarOfertasBtn.addEventListener("click", () => {
+  const valorConta = parseFloat(valorContaInput.value);
+
+  if (isNaN(valorConta) || valorConta <= 0) {
+    alert("Por Favor, insira um valor válido!");
+    return;
+  }
+
+  const ofertasFiltradas = ofertas.filter(
+    (oferta) =>
+      valorConta >= oferta.valorMinimoMensal &&
+      valorConta <= oferta.valorMaximoMensal
+  );
+
+  ofertasForm.innerHTML = "";
+
+  if (ofertasFiltradas.length === 0) {
+    ofertasForm.innerHTML =
+      "<p>Nenhuma oferta disponível para o valor informado.</p>";
+    contratarBtn.style.display = "none";
+  } else {
+    ofertasFiltradas.forEach((oferta, index) => {
+      const economia = valorConta * oferta.desconto;
+
+      const ofertaElement = `    
+            <label>      
+            <div class="oferta">
+            <input type="radio" name="oferta" value="${index}" />
+                <h3>${oferta.nome}</h3>
+                <p>Valor da conta: <span style="color: #ecc030">R$ ${valorConta.toFixed(
+                  2
+                )}</span></p>
+                <p>Desconto: <span style="color: #ecc030">R$ ${
+                  oferta.desconto * 100
+                }%</span></p>
+                <p>Valor da conta: <span style="color: #ecc030">R$ ${economia.toFixed(
+                  2
+                )}</span></p>
+            </div>
+            </label>
+        `;
+      ofertasForm.insertAdjacentHTML("beforeend", ofertaElement);
+    });
+
+    contratarBtn.style.display = "block";
+  }
+
+  opcoesOfertas.style.display = "block";
+});
+
+contratarBtn.addEventListener("click", () => {
+  const ofertaSelecionada = document.querySelector(
+    'input[name="oferta"]:checked'
+  );
+
+  if (!ofertaSelecionada) {
+    alert("Por favor, selecione uma oferta antes de contratar.");
+    return;
+  }
+
+  const ofertaIndex = parseInt(ofertaSelecionada.value);
+  const ofertaEscolhida = ofertas[ofertaIndex];
+
+  alert(`Você contratou: ${ofertaEscolhida.nome}`);
+});
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -0,0 +1,175 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  background-color: #1a0b2e;
+  user-select: none;
+}
+
+body {
+  font-family: "Electrolize", sans-serif;
+  color: #fff;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  padding: 20px;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  margin-bottom: 0px;
+  margin-top: 20px;
+}
+
+.container h1 {
+  font-weight: 500;
+  font-size: 2rem;
+  color: #ecc030;
+  white-space: nowrap;
+}
+
+.container img {
+  padding: 20px;
+}
+
+h2 {
+  font-size: 1.3rem;
+  color: #ecc030;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  position: relative;
+  margin: 20px;
+  font-weight: 500;
+}
+
+h2::after {
+  content: "";
+  position: absolute;
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100px;
+  height: 3px;
+  background: linear-gradient(90deg, transparent, #ecc030, transparent);
+}
+
+input[type="number"] {
+  font-family: "Electrolize", sans-serif;
+  background-color: #fff;
+  padding: 10px;
+  font-size: 1rem;
+  border: 2px solid #ecc030;
+  border-radius: 5px;
+  outline: none;
+  text-align: center;
+  color: #000;
+  font-weight: 500;
+  width: 100%;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+button {
+  font-family: "Exo 2", sans-serif;
+  padding: 10px 20px;
+  background-color: #e13232;
+  color: #fff;
+  font-size: 1rem;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-weight: bold;
+  transition: background-color 0.3s ease;
+  margin-top: 15px;
+}
+
+button:hover {
+  background-color: #9a3535;
+}
+
+#ofertasForm {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+}
+
+.oferta {
+  background: linear-gradient(145deg, #2e1b4c, #1a0b2e);
+  border: 2px solid #ecc030;
+  border-radius: 15px;
+  padding: 25px;
+  width: 280px;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+  position: relative;
+  overflow: hidden;
+}
+
+.oferta::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 5px;
+  background: linear-gradient(90deg, transparent, #ecc030, transparent);
+  animation: slideBorder 3s infinite linear;
+}
+
+@keyframes slideBorder {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
+.oferta h3 {
+  background: linear-gradient(145deg, #2e1b4c, #1a0b2e);
+  font-size: 1.5rem;
+  color: #ecc030;
+  margin-bottom: 15px;
+}
+
+.oferta p {
+  background: linear-gradient(145deg, #2e1b4c, #1a0b2e);
+  font-size: 1rem;
+  padding: 5px;
+  font-weight: 500;
+}
+
+.oferta:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px rgba(0.4, 0.4, 0.4, 0.4);
+  border-color: #1f19206b;
+}
+
+input[type="radio"] {
+  margin-top: 2px;
+  margin-bottom: 10px;
+  transform: scale(1.3);
+  accent-color: #ecc030;
+}
+
+#contratarBtn {
+  margin-top: 20px;
+  padding: 13px 17px;
+  background-color: #28a745;
+  font-size: 1.5rem;
+  display: block;
+  margin: 20px auto;
+}
+
+#contratarBtn:hover {
+  background-color: #218838;
+}
+