Cleaner donate methods

- Add OpenCollective
- Show PayPal earlier
- Hide Apple Pay if it's not supported
- Show Google Pay only on Desktop and Android Chrome
- Change Visa logo to Visa + MC
- Remove all crypto buttons except Bitcoin

Signed-off-by: Alexander Borsuk <me@alex.bio>

static/images/donates/opencollective.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill-rule="evenodd"><path d="M52.402 31.916c0 4.03-1.17 7.895-3.178 11.087l8.196 8.23c4.014-5.375 6.523-12.094 6.523-19.318s-2.51-13.942-6.523-19.318l-8.196 8.23c2.007 3.192 3.178 6.887 3.178 11.087z" fill="#b8d3f4"/><path d="M32.004 52.41c-11.207 0-20.406-9.24-20.406-20.493s9.2-20.493 20.406-20.493c4.182 0 7.86 1.176 11.04 3.36l8.196-8.23C45.887 2.52 39.197 0 32.004 0 14.44 0 .057 14.278.057 32.084S14.44 64 32.004 64c7.36 0 14.05-2.52 19.403-6.55l-8.196-8.23c-3.178 2.016-7.025 3.192-11.207 3.192z" fill="#3385ff"/></svg>

templates/shortcodes/donate_buttons.html

@@ -3,9 +3,13 @@
   <a href="https://donate.organicmaps.ru" title="По карте МИР в рублях"><img id="mir" src="/images/donates/mir.svg" alt="По карте МИР в рублях"></a>
   <a href="https://t.me/OrganicMapsRu/29441" title="Telegram по карте МИР в рублях"><img id="telegramRu" src="/images/donates/telegram.svg" alt="Telegram по карте МИР в рублях"></a>
   {% endif -%}
-  <a href="{{ config.extra.stripe | safe }}" title="Credit/Debit Card"><img src="/images/donates/visa.svg" alt="Credit/Debit Card"></a>
-  <a href="{{ config.extra.stripe | safe }}" title="Apple Pay"><img src="/images/donates/apple.svg" alt="Apple Pay"></a>
-  <a href="{{ config.extra.stripe | safe }}" title="Google Pay"><img src="/images/donates/google.svg" alt="Google Pay"></a>
+  <a href="{{ config.extra.stripe | safe }}" title="Credit/Debit Card"><img src="/images/donates/visa_mc.svg" alt="Credit/Debit Card"></a>
+  <a href="{{ config.extra.stripe | safe }}" title="Apple Pay" id="applePay"><img src="/images/donates/apple.svg" alt="Apple Pay"></a>
+  <a href="{{ config.extra.stripe | safe }}" title="Google Pay" id="googlePay"><img src="/images/donates/google.svg" alt="Google Pay"></a>
+  <form action="https://www.paypal.com/donate" method="post" target="_blank"  title="PayPal">
+    <input type="hidden" name="hosted_button_id" value="JYM34AADM87V8" />
+    <input type="image" src="/images/donates/paypal.svg" name="submit" title="Donate to Organic Maps using PayPal" alt="Donate with PayPal button" />
+  </form>
   <a href="{{ config.extra.stripe | safe }}" title="giropay"><img src="/images/donates/giropay.svg" alt="giropay"></a>
   {%- if lang != 'ru' %}
   <a href="{{ config.extra.stripe | safe }}" title="iDeal"><img src="/images/donates/ideal.svg" alt="iDeal"></a>
@@ -16,15 +20,54 @@
   <a href="https://liberapay.com/OrganicMaps" title="LiberaPay"><img src="/images/donates/liberapay.svg" alt="LiberaPay"></a>
   <a href="https://github.com/sponsors/organicmaps/" title="GitHub Sponsors"><img src="/images/donates/github.svg" alt="GitHub Sponsors"></a>
   <a href="https://www.patreon.com/OrganicMaps" title="Patreon"><img src="/images/donates/patreon.svg" alt="Patreon"></a>
-  <form action="https://www.paypal.com/donate" method="post" target="_blank"  title="PayPal">
-    <input type="hidden" name="hosted_button_id" value="JYM34AADM87V8" />
-    <input type="image" src="/images/donates/paypal.svg" name="submit" title="Donate to Organic Maps using PayPal" alt="Donate with PayPal button" />
-  </form>
+  <a href="https://opencollective.com/organicmaps" title="OpenCollective"><img src="/images/donates/opencollective.svg" alt="OpenCollective"></a>
   <a href="{{ config.extra.stripe | safe }}" title="BanContact"><img src="/images/donates/bancontact.svg" alt="BanContact"></a>
   <a href="{{ config.extra.stripe | safe }}" title="EPS"><img id="eps" src="/images/donates/eps.svg" alt="EPS"></a>
-  <a href="/donate#crypto" title="Bitcoin"><img src="/images/donates/bitcoin.svg" alt="Bitcoin"></a>
-  <a href="/donate#crypto" title="Ethereum"><img src="/images/donates/ethereum.svg" alt="Ethereum"></a>
-  <a href="/donate#crypto" title="Monero"><img src="/images/donates/monero.svg" alt="Monero"></a>
-  <a href="/donate#crypto" title="Tron"><img src="/images/donates/tron.svg" alt="Tron"></a>
-  <a href="/donate#crypto" title="ZCash"><img src="/images/donates/zcash.svg" alt="ZCash"></a>
+  <a href="/donate#crypto" title="Bitcoin, Ethereum, Monero, Tron, ZCash and other crypto"><img src="/images/donates/bitcoin.svg" alt="Bitcoin, Ethereum, Monero, Tron, ZCash and other crypto"></a>
 </div>
+<script>
+  // Check if Apple Pay JS API is available.
+  // https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/checking_for_apple_pay_availability
+  if (!window.ApplePaySession) {
+    var applePayLink = document.getElementById('applePay');
+    if (applePayLink) applePayLink.remove();
+  }
+
+  // https://stackoverflow.com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome/13348618#13348618
+  function isAndroidOrDesktopChrome() {
+    // please note,
+    // that IE11 now returns undefined again for window.chrome
+    // and new Opera 30 outputs true for window.chrome
+    // but needs to check if window.opr is not undefined
+    // and new IE Edge outputs to true now for window.chrome
+    // and if not iOS Chrome check
+    // so use the below updated condition
+    var isChromium = window.chrome;
+    var winNav = window.navigator;
+    var vendorName = winNav.vendor;
+    var isOpera = typeof window.opr !== "undefined";
+    var isIEedge = winNav.userAgent.indexOf("Edg") > -1;
+    var isIOSChrome = winNav.userAgent.match("CriOS");
+
+    if (isIOSChrome) {
+      // is Google Chrome on IOS
+      return false;
+    } else if (isChromium !== null &&
+               typeof isChromium !== "undefined" &&
+               vendorName === "Google Inc." &&
+               isOpera === false &&
+               isIEedge === false) {
+      // is Google Chrome
+      return true;
+    } else {
+      // not Google Chrome
+      return false;
+    }
+  }
+
+  // Hide Google Play when not needed.
+  if (!isAndroidOrDesktopChrome()) {
+    var applePayLink = document.getElementById('googlePay');
+    if (applePayLink) applePayLink.remove();
+  }
+</script>