From 144db5ebd404747c3eed608d34e64ae2eb3f1b43 Mon Sep 17 00:00:00 2001
From: Sandusky <39354014+cold-briu@users.noreply.github.com>
Date: Wed, 30 Aug 2023 13:09:17 -0500
Subject: [PATCH] feat: update fuel styles and fix explorer link (#42)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: changed fuel logo

* fix: explorer link

---------

Co-authored-by: Luiz Estácio <luizstacio@gmail.com>
---
 static/index.html | 537 +++++++++++++++++++++++-----------------------
 1 file changed, 264 insertions(+), 273 deletions(-)
diff --git a/static/index.html b/static/index.html
index ab84c33..f76ec24 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1,326 +1,317 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>{{ page_title }}</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
-      rel="stylesheet"
-    />
-    <script src="https://www.google.com/recaptcha/api.js"></script>
-  </head>
-  <style>
-    * {
-      font-family: "Roboto", sans-serif;
-    }
 
-    body {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-    }
+<head>
+  <meta charset="UTF-8" />
+  <title>{{ page_title }}</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
+  <script src="https://www.google.com/recaptcha/api.js"></script>
+</head>
+<style>
+  * {
+    font-family: "Roboto", sans-serif;
+  }
 
-    .description {
-      text-align: center;
-      line-height: 1.4em;
-      color: #555;
-      font-size: 14px;
-    }
+  body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
 
-    .background {
-      position: fixed;
-      top: 0;
-      left: 0;
-      height: 100%;
-      width: 100%;
-      z-index: 0;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='%230f172a' stroke-opacity='0.04'%3E%3Cpath d='M0 .5H31.5V32' /%3E%3C/svg%3E%0A");
-      -webkit-mask-image: linear-gradient(
-        180deg,
+  .description {
+    text-align: center;
+    line-height: 1.4em;
+    color: #555;
+    font-size: 14px;
+  }
+
+  .background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 0;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='%230f172a' stroke-opacity='0.04'%3E%3Cpath d='M0 .5H31.5V32' /%3E%3C/svg%3E%0A");
+    -webkit-mask-image: linear-gradient(180deg,
         rgba(255, 255, 255, 1),
         rgba(255, 255, 255, 1),
-        rgba(255, 255, 255, 0.3)
-      );
-      mask-image: linear-gradient(
-        180deg,
+        rgba(255, 255, 255, 0.3));
+    mask-image: linear-gradient(180deg,
         rgba(255, 255, 255, 1),
         rgba(255, 255, 255, 1),
-        rgba(255, 255, 255, 0.3)
-      );
-    }
+        rgba(255, 255, 255, 0.3));
+  }
 
-    .fuel-logo {
-      display: flex;
-      justify-content: center;
-      margin-bottom: 20px;
-    }
+  .fuel-logo {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+  }
 
-    .button {
-      background-color: #04aa6d;
-      border: none;
-      color: white;
-      padding: 16px 32px;
-      margin: 4px 2px;
-      cursor: pointer;
-      border-radius: 10px;
-      width: 100%;
-      text-transform: uppercase;
-      text-decoration: none;
-      display: flex;
-      box-sizing: border-box;
-      text-align: center;
-      justify-content: center;
-    }
+  .button {
+    background-color: #00F58C;
+    border: none;
+    color: black;
+    padding: 16px 32px;
+    margin: 4px 2px;
+    cursor: pointer;
+    border-radius: 10px;
+    width: 100%;
+    text-transform: uppercase;
+    text-decoration: none;
+    display: flex;
+    box-sizing: border-box;
+    text-align: center;
+    justify-content: center;
+  }
 
-    .button:disabled {
-      background-color: gray;
-    }
+  .button:disabled {
+    background-color: gray;
+  }
 
-    .card {
-      margin-top: 90px;
-      z-index: 1;
-      width: 480px;
-      font-size: 14px;
-      padding: 40px 20px 20px 20px;
-      border-radius: 10px;
-      background-color: white;
-      box-shadow: 0 0 16px 2px rgba(248, 248, 248, 0.25);
-      border: 1px solid rgb(229, 231, 235);
-      max-width: 95%;
-    }
+  .card {
+    margin-top: 90px;
+    z-index: 1;
+    width: 480px;
+    font-size: 14px;
+    padding: 40px 20px 20px 20px;
+    border-radius: 10px;
+    background-color: white;
+    box-shadow: 0 0 16px 2px rgba(248, 248, 248, 0.25);
+    border: 1px solid rgb(229, 231, 235);
+    max-width: 95%;
+  }
 
-    .from-control {
-      display: flex;
-      flex-direction: column;
-    }
+  .from-control {
+    display: flex;
+    flex-direction: column;
+  }
 
-    .from-control label {
-      margin-bottom: 0.3em;
-      color: #333;
-    }
+  .from-control label {
+    margin-bottom: 0.3em;
+    color: #333;
+  }
 
-    .from-control input {
-      border: 1px solid #888;
-      border-radius: 4px;
-      padding: 10px;
-    }
-    .from-control input:invalid {
-      border: 1px solid red;
-    }
+  .from-control input {
+    border: 1px solid #888;
+    border-radius: 4px;
+    padding: 10px;
+  }
 
-    .captcha-container {
-      display: flex;
-      margin-top: 20px;
-      justify-content: center;
-    }
+  .from-control input:invalid {
+    border: 1px solid red;
+  }
 
-    .bold {
-      color: #000;
-      font-weight: bold;
-    }
+  .captcha-container {
+    display: flex;
+    margin-top: 20px;
+    justify-content: center;
+  }
 
-    .response-title,
-    .provider-url,
-    #response-failure {
-      text-align: center;
-    }
+  .bold {
+    color: #000;
+    font-weight: bold;
+  }
 
-    #response-failure {
-      color: red;
-      padding: 10px;
-    }
+  .response-title,
+  .provider-url,
+  #response-failure {
+    text-align: center;
+  }
 
-    #response {
-      display: none;
-    }
+  #response-failure {
+    color: red;
+    padding: 10px;
+  }
 
-    .provider-url {
-      font-size: 12px;
-      text-align: center;
-      margin-top: 10px;
-      color: #949494;
-    }
+  #response {
+    display: none;
+  }
 
-    .queued {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      text-align: center;
-      gap: 1rem;
-    }
+  .provider-url {
+    font-size: 12px;
+    text-align: center;
+    margin-top: 10px;
+    color: #949494;
+  }
 
-    .loader {
-      border: 0.4rem solid #f3f3f3;
-      border-top: 0.4rem solid #04aa6d;
-      border-radius: 50%;
-      width: 2rem;
-      height: 2rem;
-      animation: spin 2s linear infinite;
-    }
+  .queued {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 1rem;
+  }
+
+  .captcha-area {
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .loader {
+    border: 0.4rem solid #f3f3f3;
+    border-top: 0.4rem solid #00F58C;
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+    animation: spin 2s linear infinite;
+  }
 
-    @keyframes spin {
-      0% { transform: rotate(0deg); }
-      100% { transform: rotate(360deg); }
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
     }
 
-    .hidden {
-      display: none;
+    100% {
+      transform: rotate(360deg);
     }
-  </style>
-  <body>
-    <div class="background"></div>
-    <div class="card">
-      <div class="fuel-logo">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 852 852"
-          style="width: 80px; height: 80px"
-          class="s_logo__16erN"
-        >
-          <defs></defs>
-          <defs>
-            <clipPath id="a"><path d="M0 0h852v852H0z"></path></clipPath>
-          </defs>
-          <g data-name="Fuel logo">
-            <g clip-path="url(#a)" data-name="logo">
-              <path
-                fill="#58c09b"
-                d="M638.737 321.745a16.735 16.735 0 0115.33 9.607 17.281 17.281 0 01-1.737 18.127L360.261 715.008a19.368 19.368 0 01-6.229 4.684 16.628 16.628 0 01-15.113-.151 17.057 17.057 0 01-9.192-19.623l52.567-201.191-216.294.664a16.735 16.735 0 01-15.33-9.607c-2.758-5.887-2.056-13.38 1.737-18.127L444.708 106.62a16.178 16.178 0 0120.618-4.793c7.47 3.1 11.376 11.442 9.686 19.394l-52.567 201.19z"
-              ></path>
-              <path
-                fill="none"
-                stroke="#58c09b"
-                stroke-width="9"
-                d="M639.536 328.815c6.585-.071 58.279 27.655 61.04 33.541a17.291 17.291 0 01-1.741 18.129L406.767 746.012a19.366 19.366 0 01-6.23 4.684 16.628 16.628 0 01-15.113-.151c-6.976-3.332-50.131-38.57-47.946-46.751l94.077-152.613H226.679c-6.585.071-71.974-62.843-68.181-67.59q205.349-262.69 293.209-372.414c9.573-11.955 52.922 17.831 60.122 21.654 7.47 3.1 11.376 11.442 9.686 19.394l-52.567 201.19z"
-              ></path>
-            </g>
+  }
+
+  .hidden {
+    display: none;
+  }
+</style>
+
+<body>
+  <div class="background"></div>
+  <div class="card">
+    <div class="fuel-logo">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" style="width: 80px; height: 80px"
+        class="s_logo__16erN">
+        <g data-name="Fuel logo">
+          <g g clip-path="url(#a)" data-name="logo">
+            <path fill="#00F58C" d="M28.85,0C12.92,0,0,12.92,0,28.85V434h359.09c12.15,0,23.81-4.83,32.4-13.42l29.09-29.09
+         c8.59-8.59,13.42-20.25,13.42-32.4V0H28.85z" />
           </g>
-        </svg>
+          <path d="M283.36,55.8L142.22,196.94c-3.5,3.5-8.25,5.47-13.21,5.47h0c-7.22,0-13.8-4.16-16.89-10.69L57.45,76.11
+       c-4.46-9.44,2.42-20.31,12.86-20.31H283.36z" />
+          <path d="M55.8,378.2V240.87c0-7.32,5.94-13.26,13.26-13.26h137.33L55.8,378.2z" />
+          <path d="M217.72,202.41h-45.46l136.8-136.81c6.28-6.28,14.79-9.81,23.67-9.81h45.46l-136.8,136.81
+       C235.12,198.88,226.6,202.41,217.72,202.41z" />
+        </g>
+      </svg>
+
+
+    </div>
+    <form action="javascript:" onsubmit="faucetApp.give_me_coins(this)" id="form">
+      <div class="from-control">
+        <label for="address">Wallet Address</label>
+        <input type="text" id="address" name="address" autocomplete="off" minlength="63"
+          placeholder="fuel100000... or 0x0000..." pattern="[a-z0-9]{63,66}" />
       </div>
-      <form action="javascript:" onsubmit="faucetApp.give_me_coins(this)" id="form">
-        <div class="from-control">
-          <label for="address">Wallet Address</label>
-          <input
-            type="text"
-            id="address"
-            name="address"
-            autocomplete="off"
-            minlength="63"
-            placeholder="fuel100000... or 0x0000..."
-            pattern="[a-z0-9]{63,66}"
-          />
-        </div>
-        <p class="description">
-          This is a <b class="bold">Test Ether</b> faucet running on the
-          <b class="bold">Test Fuel network</b>. This faucet sends fake Ether
-          assets to the provided wallet address.
-        </p>
+      <p class="description">
+        This is a <b class="bold">Test Ether</b> faucet running on the
+        <b class="bold">Test Fuel network</b>. This faucet sends fake Ether
+        assets to the provided wallet address.
+      </p>
+      <div class="captcha-area">
         {{#if captcha_key}}
           <div class="captcha-container">
-            <div
-              class="g-recaptcha"
-              data-sitekey="{{ captcha_key }}"
-            ></div>
+            <div class="g-recaptcha" data-sitekey="{{ captcha_key }}"></div>
           </div>
         {{/if}}
         <div class="queued hidden">
           <div class="loader"></div>
           <div>Waiting until more tokens are available</div>
         </div>
-        <br />
-        <div id="response-failure"></div>
-        <input type="submit" value="Give me Ether" class="button" />
-      </form>
-      <div id="response">
-        <h2 class="response-title">Test Ether sent to the wallet</h2>
-        <a href="#" id="explorer-link" class="button">See on Fuel Explorer</a>
       </div>
+      <div id="response-failure"></div>
+      <input type="submit" value="Give me Ether" class="button" />
+    </form>
+    <div id="response">
+      <h2 class="response-title">Test Ether sent to the wallet</h2>
+      <a href="#" id="explorer-link" class="button">See on Fuel Explorer</a>
     </div>
-    <div class="provider-url">Node url: {{ public_node_url }}</div>
-    <script>
-      const faucetApp = (function () {
-        let providerUrl = "{{ public_node_url }}";
-        let blockExplorer = "https://fuellabs.github.io/block-explorer-v2";
-        let query = params = new URLSearchParams(document.location.search);
-        let address = query.get('address');
-
-        if (address) {
-          let $address = document.getElementById('address');
-          if ($address) {
-            $address.value = address;
-          }
+  </div>
+  <div class="provider-url">Node url: {{ public_node_url }}</div>
+  <script>
+    const faucetApp = (function () {
+      let providerUrl = "{{ public_node_url }}";
+      let blockExplorer = "https://fuellabs.github.io/block-explorer-v2";
+      let query = params = new URLSearchParams(document.location.search);
+      let address = query.get('address');
+
+      if (address) {
+        let $address = document.getElementById('address');
+        if ($address) {
+          $address.value = address;
         }
+      }
+
+      function hasCaptcha() {
+        return !!document.getElementsByClassName("captcha-container")[0];
+      }
 
-        function hasCaptcha() {
-          return !!document.getElementsByClassName("captcha-container")[0];
+      function showWaiting() {
+        if (hasCaptcha()) {
+          document.getElementsByClassName("captcha-container")[0].classList.add("hidden");
         }
+        document.getElementsByClassName("queued")[0].classList.remove("hidden");
+        form.querySelector("input[type=submit]").disabled = true;
+      }
 
-        function showWaiting() {
-          if (hasCaptcha()) {
-            document.getElementsByClassName("captcha-container")[0].classList.add("hidden");
-          }
-          document.getElementsByClassName("queued")[0].classList.remove("hidden");
-          form.querySelector("input[type=submit]").disabled = true;
+      function hideWaiting() {
+        if (hasCaptcha()) {
+          document.getElementsByClassName("captcha-container")[0].classList.remove("hidden");
         }
+        document.getElementsByClassName("queued")[0].classList.add("hidden");
+        form.querySelector("input[type=submit]").disabled = false;
+      }
 
-        function hideWaiting() {
-          if (hasCaptcha()) {
-            document.getElementsByClassName("captcha-container")[0].classList.remove("hidden");
-          }
-          document.getElementsByClassName("queued")[0].classList.add("hidden");
-          form.querySelector("input[type=submit]").disabled = false;
+      function give_me_coins(form) {
+        const data = {
+          address: form["address"].value,
+          captcha: "",
+        };
+
+        if (hasCaptcha()) {
+          data.captcha = form["g-recaptcha-response"].value;
         }
 
-        function give_me_coins(form) {
-          const data = {
-            address: form["address"].value,
-            captcha: "",
-          };
+        let xhr = new XMLHttpRequest();
+        xhr.open("POST", "/dispense");
+        xhr.setRequestHeader("Accept", "application/json");
+        xhr.setRequestHeader("Content-Type", "application/json");
+        xhr.onload = () =>
+          handle_response(data.address)(JSON.parse(xhr.responseText));
+        xhr.onetimeout = () => handle_error("Connection to the server timed out");
+        xhr.onerror = () => handle_error("Connection to the server failed");
+        xhr.send(JSON.stringify(data));
 
-          if (hasCaptcha()) {
-            data.captcha = form["g-recaptcha-response"].value;
+        document.getElementById("response-failure").innerText = "";
+        showWaiting();
+      }
+
+      function handle_response(address) {
+        return function (data) {
+          if (!data.error) {
+            document.getElementById("form").hidden = true;
+            document.getElementById("response").style.display = "block";
+            document.getElementById(
+              "explorer-link"
+            ).href = `${blockExplorer}/address/${address}?providerUrl=${encodeURIComponent(
+              providerUrl
+            )}`;
+          } else {
+            document.getElementById("response-failure").innerText = data.error;
+            hideWaiting();
           }
+        };
+      }
 
-          let xhr = new XMLHttpRequest();
-          xhr.open("POST", "/dispense");
-          xhr.setRequestHeader("Accept", "application/json");
-          xhr.setRequestHeader("Content-Type", "application/json");
-          xhr.onload = () =>
-            handle_response(address)(JSON.parse(xhr.responseText));
-          xhr.onetimeout = () => handle_error("Connection to the server timed out");
-          xhr.onerror = () => handle_error("Connection to the server failed");
-          xhr.send(JSON.stringify(data));
-
-          document.getElementById("response-failure").innerText = "";
-          showWaiting();
-        }
-        
-        function handle_response(address) {
-          return function (data) {
-            if (!data.error) {
-              document.getElementById("form").hidden = true;
-              document.getElementById("response").style.display = "block";
-              document.getElementById(
-                "explorer-link"
-              ).href = `${blockExplorer}/address/${address}?providerUrl=${encodeURIComponent(
-                providerUrl
-              )}`;
-            } else {
-              document.getElementById("response-failure").innerText = data.error;
-              hideWaiting();
-            }
-          };
-        }
+      function handle_error(message) {
+        document.getElementById("response-failure").innerText = message;
+        hideWaiting();
+      }
 
-        function handle_error(message) {
-          document.getElementById("response-failure").innerText = message;
-          hideWaiting();
-        }
+      return { give_me_coins: give_me_coins };
+    })();
+  </script>
+</body>
 
-        return { give_me_coins: give_me_coins };
-      })();
-    </script>
-  </body>
-</html>
+</html>
\ No newline at end of file
