index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>MoveToBeActive Shop - Purchase unlock codes for our Garmin Watch Faces</title>
    <meta
      name="description"
      content="MoveToBeActive Shop of Garmin watch faces"
    />

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YHK0E9JXFB"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-YHK0E9JXFB');
</script>
    
    <!-- Clarity tracking code for https://mtba.int.eu.org/ -->
<script>
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i+"?ref=bwt";
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "acwzji4crt");
</script>
    
    <script data-ad-client="ca-pub-6627201559272369" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    
    <script type = "text/javascript">
          function displayNextImage() {
              x = (x === images.length - 1) ? 0 : x + 1;
              document.getElementById("img").src = images[x];
          }

          function displayPreviousImage() {
              x = (x <= 0) ? images.length - 1 : x - 1;
              document.getElementById("img").src = images[x];
          }

          function startTimer() {
              setInterval(displayNextImage, 5000);
          }

          var images = [], x = -1;
          images[0] = "img/banner3.png";
          images[1] = "img/banner%20v3white.png";
          images[2] = "img/banner4.png";
          images[3] = "img/banner%20v3.png";
      </script>

    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Karma"
    />
    <style>
      body,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-family: "Karma", sans-serif;
      }
      .w3-bar-block .w3-bar-item {
        padding: 20px;
      }
      body {
        background-image: url("img/bg.png");
      }
    </style>

    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/global.css" />
    <!-- Load Stripe.js on your website. -->
    <script src="https://js.stripe.com/v3/"></script>
    <!-- Load Paypal scripts here -->
    
    <!-- Codes for better mobile experience -->
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Ensures optimal rendering on mobile devices. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- Optimal Internet Explorer compatibility -->
  </head>
f
  <body onload = "startTimer()">
    <!-- Top menu -->
    <div class="w3-top">
      <div class="w3-white w3-xlarge" style="max-width:1200px;margin:auto">
        <div class="w3-center w3-padding-16">
          <h1>
            <img
              src="img/Logo-MoveToBeActive_small2.png"
              alt="MtbA Logo Small"
            />
            MoveToBeActive Watch Faces
          </h1>
        </div>
      </div>
    </div>
    <!-- First Photo Grid
    <div class="w3-row-padding w3-padding-16 w3-center" style="max-width:1100px;margin:auto">
      <img src="img/banner.jpg" />
    </div> -->

    <!-- Image header -->
    <header class="w3-display-container w3-center" id="home">
      <br />
      <br />
      <br />
      <img class="w3-image" id="img" src="img/banner%20v3.png" alt="Banner for the MoveToBeActive Shop page with watch face examples"/>
      <!--
      <button type="button" onclick="displayPreviousImage()">Previous</button>
      <button type="button" onclick="displayNextImage()">Next</button>
      <img
        class="w3-image"
        src="img/banner.png"
        alt="Original MoveToBeActive watch face on Garmin Venu"
      /> -->
    </header>
    <div class="sr-root">
      <div class="sr-main" style="text-align: justify;  text-justify: inter-word;">
      <h5>
        All our watch faces are free to use without any time restrictions, as long as you stick to the
        default color and data points. In case you are pleased with the watch
        face and would like to have more customization options, an unlock code can be purchased below that will allow you to:
        <br><br>
        - Choose between 14 different data points to add into each of the 5 different locations on the watch faces:
        <ol>    
            <li><b>Notifications</b> count: Accent color if at least one notification is available or grey if no unread notifications;</li>
            <li><b>Heart Rate</b> data;</li>
            <li><b>Calories</b> burned;</li>
            <li><b>Distance</b> walked/ran on the day (km or miles, dependent on watch’s selected unit on general config): Icon will be displayed in grey until steps goal has been met, and then changing to the accent color of choice;</li>
            <li><b>Steps</b> walked/ran on the day: Icon will be displayed in grey until steps goal has been met, and then changing to the accent color of choice;</li>
            <li><b>Elevation</b> (altitude above mean sea level in meters): Derived from the most accurate source (Barometer or GPS) in order of descending accuracy. If no GPS is present, then barometer readings will be used;</li>
            <li><b>Wind speed</b>: Current wind speed in km/h or mph (depending on watch's pace unit settings), or m/s if selected on the MtbA White settings. The icon is the actual approximate wind direction;</li>
            <li><b>Blood oxygen</b> percentage: last available value or current pulse ox if sensor is active;</li>
            <li><b>Floors climbed</b> count: Icon will be grey when there are no unread notifications, and then changing to the accent color of choice when the floor climb goal is met;</li>
            <li><b>Precipitation</b> percentage: The current chance of rain/snow precipitation (0-100%);</li>
            <li><b>Humidity</b> percentage: The current relative humidity (0-100%);</li>
            <li><b>Solar intensity</b> percentage: Describes the solar sensor’s charge efficiency, only available on Solar Charged watches.</li>
            <li><b>Seconds</b></li>
            <li><b>Intensity Minutes</b> per week</li>
        </ol>
        - 10 different accent colors that go well with the white background (<b>MtbA White Analog only</b>);<br>
        - 22 stripe patterns inspired by the most iconic sport stripes (<b>MtbA Classic Stripes only</b>).
<br><br>
        Please choose the watch face that you would like to buy the code using your preferred currency (<b>delivered automatically by email
        between 1 to 2 hours after payment confirmation</b>, but in cases when the automated process fails, it could take up to 1 business day):
      </h5>
   <!-- </div>
         <div class="sr-root"> -->
        <!--<div class="sr-main" style="display: flex;"> -->
        <table>
              <tr>
                <td>
          <div class="sr-container">
            <section class="container">
              <h2><b>MtbA White Analog</b></h2>
              <a href="https://apps.garmin.com/en-US/apps/90be8a59-284b-4ed2-a052-6cca9d7d5bf4">
                <img
                  src="img/Home-MtbA White v3.png"
                  alt="MtbA White Analog Watch Face"
                  width="270"
                  height="270"
                  class="rounded-corners"
                />
             </a>
             <!-- Stripe Buttons -->
              <button
                data-checkout-mode="payment"
                data-price-id="price_1IcAtsFtAbcT3JTHbbV7ywG3"
              >
                Pay EUR €1.30
              </button>
              <button
                data-checkout-mode="payment"
                data-price-id="price_1IeiE4FtAbcT3JTHzhg3gmYx"
              >
                Pay USD $1.60
              </button>
              <button
                data-checkout-mode="payment"
                data-price-id="price_1KJlW1FtAbcT3JTHGxMpMXAB"
              >
                Pay AUD $2.20
              </button>
              <button
                data-checkout-mode="payment"
                data-price-id="price_1OEgqsFtAbcT3JTH2xiXLbXl"
              >
                Pay GBP £1.30
              </button>
              <button
                data-checkout-mode="payment"
                data-price-id="price_1KEixIFtAbcT3JTHlZQmIqhR"
              >
                Pay PLN zł6.00
              </button>            
              <button
                data-checkout-mode="payment"
                data-price-id="price_1IyYZQFtAbcT3JTHQRu0cuGr"
              >
                Pay CN ¥10.50
              </button>              
              <button
                data-checkout-mode="payment"
                data-price-id="price_1IyYWPFtAbcT3JTHAM1qjfbX"
              >
                Pay JPY ¥180.00
              </button>              
              <br>
              <a href="https://stripe.com/about">
                <img
                  src="img/Powered%20by%20Stripe%20-%20blurple.png"
                  alt="Stripe Badge"
                  width="120"
                  class="displayed"
                />
              </a>
              <!-- End Stripe Buttons -->
              <br>
              <center>
<!-- Start Crypto buttons<div>
  <a class="buy-with-crypto"
     href="https://commerce.coinbase.com/checkout/c21bd001-c7ab-4fd2-8bfa-2c886874afaa">
    Pay with Cryptocurrencies
  </a>
  <script src="https://commerce.coinbase.com/v1/checkout.js?version=201807">
  </script>
</div>
                <em>Powered by <a href="https://commerce.coinbase.com/">Coinbase</a></em>
                <br><br>

  <script
    src="https://js.crypto.com/sdk?publishable-key=pk_test_bwAWzvtx4gQtfmzeordWQfsA">
  </script>

  <script>
    cryptopay.Button({
      createPayment: function(actions) {
        return actions.payment.create({
          currency: 'USD',
          amount: 150,
          description : 'MtbA White Analog',
        });
      },
      onApprove: function (data, actions) {
        // Optional: add logic such as browser redirection or check data object content
        window.location.href = "https://mtba.int.eu.org/success.html";
      },
      defaultLang: 'en-US' // Optional: default language for payment page
    }).render("#pay-button")
  </script>

  <div id="pay-button"></div>
      End Crypto button           -->
                
                </center>
              <!-- Paypal buttons 
              <div class="container">
                <h1>Pay in EUR = €1.40</h1>
                <div id = "paypal-button-container-eur"></div>
                <br>
                <h1>Pay in USD = $1.60</h1>
                <div id = "paypal-button-container-usd"></div>
                <br>                
                <h1>Pay in GBP = £1.20</h1>
                <div id = "paypal-button-container-gbp"></div>
              </div>
              <script src="https://www.paypal.com/sdk/js?client-id=AVdn6pY7lctLqgFudPQFFiujvnZvd00_d03ltdfGLHgBSJRlgHvvp7SVtLTnuuLTiebj8TzpW6hNDcy9&currency=EUR" data-sdk-integration-source="button-factory"></script>
              <script>
                //function initPayPalButton() {
                  paypal.Buttons({
                    style: {
                      shape: 'pill',
                      color: 'black',
                      layout: 'horizontal',
                      label: 'pay',
                      tagline: false
                    },

                    createOrder: function(data, actions) {
                      return actions.order.create({
                        purchase_units: [{"description":"MtbA White Watch Face","amount":{"currency_code":"EUR","value":1.4}}]
                      });
                    },

                    onApprove: function(data, actions) {
                      return actions.order.capture().then(function(details) {
                        alert('Transaction completed by ' + details.payer.name.given_name + '!');
                      });
                    },

                    onError: function(err) {
                      console.log(err);
                    }
                  }).render('#paypal-button-container-eur');
                //}
                //initPayPalButton();
              </script>
              
  <script src="https://www.paypal.com/sdk/js?client-id=AVdn6pY7lctLqgFudPQFFiujvnZvd00_d03ltdfGLHgBSJRlgHvvp7SVtLTnuuLTiebj8TzpW6hNDcy9&currency=USD" data-sdk-integration-source="button-factory" data-namespace = "paypal_sdk"></script>
  <script>
    //function initPayPalButton() {
      paypal_sdk.Buttons({
        style: {
          shape: 'pill',
          color: 'white',
          layout: 'horizontal',
          label: 'pay',
          tagline: false
        },

        createOrder: function(data, actions) {
          return actions.order.create({
            purchase_units: [{"description":"MtbA White Watch Face","amount":{"currency_code":"USD","value":1.6}}]
          });
        },

        onApprove: function(data, actions) {
          return actions.order.capture().then(function(details) {
            alert('Transaction completed by ' + details.payer.name.given_name + '!');
          });
        },

        onError: function(err) {
          console.log(err);
        }
      }).render('#paypal-button-container-usd');
    //}
    //initPayPalButton();
  </script>

<script src="https://www.paypal.com/sdk/js?client-id=AVdn6pY7lctLqgFudPQFFiujvnZvd00_d03ltdfGLHgBSJRlgHvvp7SVtLTnuuLTiebj8TzpW6hNDcy9&currency=GBP" data-sdk-integration-source="button-factory" data-namespace = "paypal_gbp"></script>
  <script>
    //function initPayPalButton() {
      paypal_gbp.Buttons({
        style: {
          shape: 'pill',
          color: 'blue',
          layout: 'horizontal',
          label: 'pay',
          tagline: false
        },

        createOrder: function(data, actions) {
          return actions.order.create({
            purchase_units: [{"description":"MtbA White Watch Face","amount":{"currency_code":"GBP","value":1.2}}]
          });
        },

        onApprove: function(data, actions) {
          return actions.order.capture().then(function(details) {
            alert('Transaction completed by ' + details.payer.name.given_name + '!');
          });
        },

        onError: function(err) {
          console.log(err);
        }
      }).render('#paypal-button-container-gbp');
//    }
//    initPayPalButton();
  </script>-->
              <!-- End Paypal buttons -->

            </section>
          </div>
         </td>
         <td>
          <div class="sr-container">
            <section class="container">
              <h2><b>MtbA Classic Stripes</b></h2>
              <a href="https://apps.garmin.com/en-US/apps/1d3209d4-af81-444f-859c-b97375e09802">
                <img
                  src="img/Home-MtbA_Stripes v2.png"
                  alt="MtbA Iconic Stripes Watch Face" 
                  width="270"
                  height="270"
                  class="rounded-corners"
                />
             </a>
             <!-- Stripe Buttons -->
              <button
                data-checkout-mode="payment"
                data-price-id="price_1IrWIMFtAbcT3JTHzxmg5TtG"
              >
                Pay EUR €1.40
              </button>
              <button
                data-checkout-mode="payment"
                data-price-id="price_1IrWIMFtAbcT3JTHGjFcS5Vs"
              >
                Pay USD $1.70
              </button>
              <button
                data-checkout-mode="payment"
                data-price-id="price_1KJlZUFtAbcT3JTHqnvhkdTh"
              >
                Pay AUD $2.35
              </button>              
              <button
                data-checkout-mode="payment"
                data-price-id="price_1OEgtLFtAbcT3JTH141WIDCM"
              >
                Pay GBP £1.35
              </button>
              <button
                data-checkout-mode="payment"
                data-price-id="price_1KEj1WFtAbcT3JTHyoiYxGtf"
              >
                Pay PLN zł6.50
              </button>
              <button
                data-checkout-mode="payment"
                data-price-id="price_1IrWIMFtAbcT3JTHv4hSnyb3"
              >
                Pay CN ¥11.00
              </button>                            
              <button
                data-checkout-mode="payment"
                data-price-id="price_1IyYTpFtAbcT3JTHr66JZItZ"
              >
                Pay JPY ¥190.00
              </button> 
              <br>
              <a href="https://stripe.com/about">
                <img
                  src="img/Powered%20by%20Stripe%20-%20blurple.png"
                  alt="Stripe Badge"
                  width="120"
                  class="displayed"
                />
              </a>
              <!-- End Stripe Buttons -->
              <br>
              <center>
<!-- Start Crypto buttons
<div>
  <a class="buy-with-crypto"
     href="https://commerce.coinbase.com/checkout/3e878bda-18cd-4138-bb2c-27194e98a4a6">
    Pay with Cryptocurrencies
  </a>
  <script src="https://commerce.coinbase.com/v1/checkout.js?version=201807">
  </script>
</div>
                <em>Powered by <a href="https://commerce.coinbase.com/">Coinbase</a></em>
 End Crypto buttons   -->
                </center>     
            </td>
          </tr>                
        </table>      
                <br>
          <div id="error-message"></div>
        <!-- </div> -->
      <h5><b>Currently Supported Devices:</b> Captain Marvel, D2 Air, Darth Vader, Descent Mk2, Descent Mk2S, Enduro, First Avenger, Forerunner 245, Forerunner 245 Music, Forerunner 745, Forerunner 945, Forerunner 945 LTE, MARQ Adventurer, MARQ Athlete, MARQ Aviator, MARQ Captain, MARQ Commander, MARQ Driver, MARQ Expedition, MARQ Golfer, Rey, fēnix 6, fēnix 6 Dual Power, fēnix 6 Pro, fēnix 6 Pro Dual Power, fēnix 6 Pro Solar, fēnix 6 Solar, fēnix 6S, fēnix 6S Dual Power, fēnix 6S Pro, fēnix 6S Pro Dual Power, fēnix 6S Pro Solar, fēnix 6S Solar, fēnix 6X Pro, fēnix 7S, fēnix 7, fēnix 7X, epix 2, quatix 6, quatix 6X, vívoactive 4, vívoactive 4S, Venu, Venu 2, Venu 2S, Venu 2 Plus, Venu Mercedes-Benz, Venu Sq & Venu Sq Music.</h5>
    </div>
      </div>
    <br><br>
      <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Horizontal -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-6627201559272369"
     data-ad-slot="8590723077"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>    
    <footer>
      <div class="w3-bottom">
        <div class="banner">
          <span>
            This is the shop page of MoveToBeActive watch faces for Garmin.
            <br />Download them from our page on the
            <a
              href="https://apps.garmin.com/en-US/developer/f959cfb4-acb7-4db5-8dfd-92749316d762/apps"
            >
              ConnectIQ store
            </a>
          </span>
        </div>
      </div>
    </footer>

    <script>
      // Replace with your own publishable key: https://dashboard.stripe.com/test/apikeys
      var PUBLISHABLE_KEY =
        "pk_live_51IaLXRFtAbcT3JTHCojJ8Ezne6TdRLMoPhVmPCvsaxuHxwtGjJfCT4v073u2BfEOOjsJfQVSeBmy7jjT8RNfDU8300IaMKVg6S";
      // Replace with the domain you want your users to be redirected back to after payment
      var DOMAIN = location.href.replace(/[^/]*$/, "");

      if (PUBLISHABLE_KEY === "pk_test_Tr8olTkdFnnJVywwhNPHwnHK00HkHV4tnP") {
        console.log(
          "Replace the hardcoded publishable key with your own publishable key: https://dashboard.stripe.com/test/apikeys"
        );
      }

      var stripe = Stripe(PUBLISHABLE_KEY);

      // Handle any errors from Checkout
      var handleResult = function(result) {
        if (result.error) {
          var displayError = document.getElementById("error-message");
          displayError.textContent = result.error.message;
        }
      };

      document.querySelectorAll("button").forEach(function(button) {
        button.addEventListener("click", function(e) {
          var mode = e.target.dataset.checkoutMode;
          var priceId = e.target.dataset.priceId;
          var items = [{ price: priceId, quantity: 1 }];

          // Make the call to Stripe.js to redirect to the checkout page
          // with the sku or plan ID.
          stripe
            .redirectToCheckout({
              mode: mode,
              lineItems: items,
              successUrl:
                DOMAIN + "success.html?session_id={CHECKOUT_SESSION_ID}",
              cancelUrl:
                DOMAIN + "canceled.html?session_id={CHECKOUT_SESSION_ID}"
            })
            .then(handleResult);
        });
      });
    </script>
    <!-- Start of HubSpot Embed Code -->
    <script type="text/javascript" id="hs-script-loader" async defer src="//js-na1.hs-scripts.com/19655302.js"></script>
    <!-- End of HubSpot Embed Code -->
  </body>
</html>