Adição da cidade de marcolandia

speedwayti · Mar 23, 2024 · 505685d · 505685d
1 parent dd3e449
commit 505685d
Show file tree

Hide file tree

Showing 6 changed files with 493 additions and 0 deletions.
diff --git a/cidades/marcolandia/home.html b/cidades/marcolandia/home.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Resultado de Hoje - GALO BETS [MARCOLANDIA]</title>
+
+    <meta name="title" content="Galo da sorte - resultados com numeros" />
+    <meta
+      name="description"
+      content="Gere seu flyer personalizado numeros diarios."
+    />
+
+    <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=Bebas+Neue&family=Open+Sans&display=swap"
+      rel="stylesheet"
+    />
+
+    <link rel="stylesheet" href="../../styles/style.css" />
+
+    <script
+      src="https://code.jquery.com/jquery-3.6.1.js"
+      integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://code.jquery.com/jquery-3.6.1.min.js"
+      integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
+      crossorigin="anonymous"
+    ></script>
+
+    <!-- Google tag (gtag.js) -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=UA-169842087-3"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "UA-169842087-3");
+    </script>
+  </head>
+
+
+  <body>
+    <noscript>
+      <div>Para continuar habilite o JavaScript</div>
+    </noscript>
+
+    <div class="container">
+      <canvas width="1080" height="1080"></canvas>
+
+      <div class="form-input">
+        <input
+          name="data"
+          id="data"
+          type="text"
+          placeholder="Coloque sua data"
+        />
+        <input
+          name="number1"
+          id="number1"
+          type="number"
+          max="9"
+          min="0"
+          placeholder="Coloque o primeiro numero"
+        />
+        <input
+          name="number2"
+          id="number2"
+          type="number"
+          max="9"
+          min="0"
+          placeholder="Coloque o segundo numero"
+        />
+        <input
+          name="number3"
+          id="number3"
+          type="number"
+          max="9"
+          min="0"
+          placeholder="Coloque o terceiro numero"
+        />
+        <input
+          name="number4"
+          id="number4"
+          type="number"
+          max="9"
+          min="0"
+          placeholder="Coloque o quarto numero"
+        />
+        <div>
+          <button id="btnSubmit" class="btn btnSave">Salvar</button>
+          <button
+            id="btnSave"
+            class="btn btnSave"
+            href="javascript:saveImage()"
+          >
+            Download
+          </button>
+          <button
+            id="btnShare"
+            class="btn btnShare"
+            href="javascript:shareImage()"
+          >
+            Compartilhar
+          </button>
+
+          <button id="btnClear" class="btn btnShare" href="javascript:clear()">
+            Limpar
+          </button>
+        </div>
+      </div>
+
+      <footer>
+        <a href="https://www.instagram.com/wildysondantas/" target="_blank">
+          <img src="../../img/instagram-logo.svg" />
+          <span>Criado por Wildyson Dantas</span>
+        </a>
+
+        <a
+          href="https://github.com/wildysondantas/flyersdinamicos.github.io"
+          target="_blank"
+        >
+          <img src="../../img/github-logo.svg" />
+          <span>wildysondantas/flyersdinamicos</span>
+        </a>
+      </footer>
+    </div>
+
+    <script src="../../scripts/marcolandia/script.js"></script>
+  </body>
+</html>
diff --git a/cidades/marcolandia/premiacao.html b/cidades/marcolandia/premiacao.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Premiação de Hoje - GALO BETS</title>
+
+    <meta name="title" content="Galo da sorte - premiação do dia" />
+    <meta
+      name="description"
+      content="Gere seu flyer personalizado com premiação do dia"
+    />
+
+    <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=Bebas+Neue&family=Open+Sans&display=swap"
+      rel="stylesheet"
+    />
+
+    <link rel="stylesheet" href="../../styles/style.css" />
+
+    <script
+      src="https://code.jquery.com/jquery-3.6.1.js"
+      integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://code.jquery.com/jquery-3.6.1.min.js"
+      integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
+      crossorigin="anonymous"
+    ></script>
+
+    <!-- Google tag (gtag.js) -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=UA-169842087-3"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "UA-169842087-3");
+    </script>
+  </head>
+
+  <body>
+    <noscript>
+      <div>Para continuar habilite o JavaScript</div>
+    </noscript>
+
+    <div class="container">
+      <canvas width="1080" height="1080"></canvas>
+
+      <div class="form-input">
+        <input
+          name="data"
+          id="data"
+          type="text"
+          placeholder="Coloque sua data"
+        />
+        <input
+          name="milhar"
+          id="milhar"
+          type="text"
+          placeholder="Coloque o primeiro numero"
+        />
+        <!--<input
+          name="centena"
+          id="centena"
+          type="text"
+          placeholder="Coloque o segundo numero"
+        /> -->
+
+        <div>
+          <button id="btnSubmit" class="btn btnSave">Salvar</button>
+          <button
+            id="btnSave"
+            class="btn btnSave"
+            href="javascript:saveImage()"
+          >
+            Download
+          </button>
+          <button
+            id="btnShare"
+            class="btn btnShare"
+            href="javascript:shareImage()"
+          >
+            Compartilhar
+          </button>
+
+          <button id="btnClear" class="btn btnShare" href="javascript:clear()">
+            Limpar
+          </button>
+        </div>
+      </div>
+      <footer>
+        <a href="https://www.instagram.com/wildysondantas/" target="_blank">
+          <img src="../../img/instagram-logo.svg" />
+          <span>Criado por Wildyson Dantas</span>
+        </a>
+
+        <a
+          href="https://github.com/wildysondantas/flyersdinamicos.github.io"
+          target="_blank"
+        >
+          <img src="../../img/github-logo.svg" />
+          <span>wildysondantas/flyersdinamicos</span>
+        </a>
+      </footer>
+    </div>
+
+    <script src="../../scripts/marcolandia/premiacao.js"></script>
+  </body>
+</html>
diff --git a/img/marcolandia/resultado.jpg b/img/marcolandia/resultado.jpg
diff --git a/img/marcolandia/sorteio.jpg b/img/marcolandia/sorteio.jpg
diff --git a/scripts/marcolandia/premiacao.js b/scripts/marcolandia/premiacao.js
@@ -0,0 +1,114 @@
+const canvas = document.querySelector("canvas");
+const context = canvas.getContext("2d");
+
+
+const arialFont = new FontFace(
+  "arial",
+  "url(../../assets/arial-bold.ttf)"
+);
+arialFont.load().then(function (font) {
+  // with canvas, if this is ommited won't work
+  document.fonts.add(font);
+});
+
+const baseImage = new Image();
+baseImage.src = "../../img/marcolandia/sorteio.jpg";
+
+
+document.getElementById("btnShare").addEventListener("click", shareImage);
+document.getElementById("btnSave").addEventListener("click", saveImage);
+
+
+async function shareImage() {
+  try {
+    gtag("event", "share");
+
+    canvas.toBlob((blob) => {
+      const filesArray = [
+        new File(
+          [blob],
+          document.querySelector("input").value.trim() + ".jpg",
+          {
+            type: "image/jpeg",
+            lastModified: new Date().getTime(),
+          }
+        ),
+      ];
+      const shareData = { files: filesArray };
+
+      navigator.share(shareData);
+    });
+  } catch (error) {
+    gtag("event", "exception", {
+      description: "[fn:shareImage] " + (error.message || error),
+      fatal: false,
+    });
+    Alert(
+      "Não foi possível compartilhar a imagem: " + (error.message || error)
+    );
+  }
+}
+
+function saveImage() {
+  try {
+    gtag("event", "download");
+
+    const a = document.createElement("a");
+    a.setAttribute("href", canvas.toDataURL("image/png"));
+    a.setAttribute("download", document.querySelector("input").value.trim());
+    a.click();
+  } catch (error) {
+    gtag("event", "exception", {
+      description: "[fn:saveImage] " + (error.message || error),
+      fatal: false,
+    });
+    Alert("Não foi possível baixar a imagem: " + (error.message || error));
+  }
+}
+
+$( "#btnSubmit" ).click(function() {
+  const n1 = $("#milhar").val();
+ // const n2 = $("#centena").val();
+  const data = $("#data").val();
+
+  context.clearRect(0, 0, canvas.width, canvas.height);
+  context.drawImage(baseImage, 0, 0);
+
+  context.save();
+
+  context.textBaseline = "middle";
+  context.font = "100px arial";
+  context.fillStyle = "white";
+
+  context.fillText(data, 285, 705);
+
+  context.textBaseline = "middle";
+  context.font = "95px arial";
+  context.fillStyle = "white";
+
+  context.fillText("R$ " + n1, 282, 907);
+  //context.fillText(n2, 620, 943);
+
+  context.restore();
+
+});
+
+$( "#btnClear" ).click(function() {
+  // const n1 = $( "#number1" ).val();
+  $("#milhar").val('');
+  //$("#centena").val('');
+  $("#data").val('');
+  context.clearRect(0, 0, canvas.width, canvas.height);
+  context.drawImage(baseImage, 0, 0);
+  context.save();
+});
+
+
+window.onload = () => {
+  context.clearRect(0, 0, canvas.width, canvas.height);
+  context.drawImage(baseImage, 0, 0);
+
+  context.save();
+};
+
+