<p>
<script>
function isDarkColor(rgb) {
var match = rgb.match(/\d+/g);
if (!match || match.length < 3) return false;
var brightness = (parseInt(match[0]) * 299 + parseInt(match[1]) * 587 + parseInt(match[2]) * 114) / 1000;
return brightness < 128;
}
function applyBannerTheme() {
var card = document.querySelector('.app-banner-card');
if (!card) return;
var isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
var bodyBg = window.getComputedStyle(document.body).backgroundColor;
var htmlBg = window.getComputedStyle(document.documentElement).backgroundColor;
var parentBg = card.parentElement ? window.getComputedStyle(card.parentElement).backgroundColor : 'rgb(255,255,255)';
var hasDarkClass = document.documentElement.classList.contains('dark') ||
document.body.classList.contains('dark') ||
document.documentElement.getAttribute('data-theme') === 'dark' ||
document.body.getAttribute('data-theme') === 'dark' ||
document.documentElement.getAttribute('data-color-mode') === 'dark';
var pageDark = isDarkMode || hasDarkClass || isDarkColor(bodyBg) || isDarkColor(htmlBg) || isDarkColor(parentBg);
card.classList.remove('light-theme', 'dark-theme');
card.classList.add(pageDark ? 'dark-theme' : 'light-theme');
}
applyBannerTheme();
document.addEventListener('DOMContentLoaded', applyBannerTheme);
if (window.matchMedia) {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applyBannerTheme);
}
var observer = new MutationObserver(applyBannerTheme);
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'data-color-mode'] });
observer.observe(document.body, { attributes: true, attributeFilter: ['class', 'data-theme', 'data-color-mode'] });
</script>
</p>
<div style="padding: 10px 0; font-family: helvetica, arial, sans-serif;">
<div style="max-width: 1200px; margin: 0 auto; padding: 0 16px;">
<div class="app-banner-card" style="position: relative; overflow: hidden; border-radius: 16px; padding: 40px 4%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px;">
<div style="max-width: 450px; flex: 1 1 350px; z-index: 2; text-align: left;">
<h1 style="font-size: clamp(28px, 4vw, 38px); line-height: 1.15; margin: 0 0 12px 0; font-weight: bold;">Wingoat<br />Mobile App</h1>
<p style="font-size: 15px; margin: 0 0 24px 0; font-weight: 500;">Save storage space, and play smoothly!</p>
<div style="display: flex; gap: 10px; flex-wrap: wrap;"><a href="#install-ios" onmouseover="this.style.backgroundColor='#43b873'" onmouseout="this.style.backgroundColor='#43b873'" style="text-decoration: none; display: inline-block; white-space: nowrap; background-color: #43b873; color: #ffffff; padding: 8px 16px; border-radius: 8px; transition: background-color 0.3s ease;" data-darkreader-inline-bgcolor="" data-darkreader-inline-color=""> <span style="display: inline-flex; align-items: center; gap: 10px;"> <img src="https://assets.wingoat.com/sites/wingoat/pages/b91b8b1cc33367df3c2fb178074f74f2.png" alt="iOS" style="width: 32px; height: 32px; display: block; filter: brightness(0) invert(1);" /> <span style="display: inline-flex; flex-direction: column; text-align: left; line-height: 1.2;"> <span style="font-size: 10px; opacity: 0.9;">Get version for</span> <span style="font-size: 16px; font-weight: bold;">IOS</span> </span> </span> </a> <a href="#install-android" onmouseover="this.style.backgroundColor='#43b873'" onmouseout="this.style.backgroundColor='#43b873'" style="text-decoration: none; display: inline-block; white-space: nowrap; background-color: #43b873; color: #ffffff; padding: 8px 16px; border-radius: 8px; transition: background-color 0.3s ease;" data-darkreader-inline-bgcolor="" data-darkreader-inline-color=""> <span style="display: inline-flex; align-items: center; gap: 10px;"> <img src="https://assets.wingoat.com/sites/wingoat/pages/86df708525b111c9439028d1691992cd.png" alt="Android" style="width: 32px; height: 32px; display: block; filter: brightness(0) invert(1);" /> <span style="display: inline-flex; flex-direction: column; text-align: left; line-height: 1.2;"> <span style="font-size: 10px; opacity: 0.9;">Get version for</span> <span style="font-size: 16px; font-weight: bold;">ANDROID</span> </span> </span> </a></div>
</div>
<div style="flex: 1 1 450px; display: flex; justify-content: center; align-items: center;"><img src="https://assets.wingoat.com/sites/wingoat/pages/1c0b02184ee0ac5ee30eacb6e3a52c6a.png" alt="Wingoat Mobile App Banner" style="width: 522px; max-width: 550px; height: 535px; max-height: 360px; display: block; object-fit: contain; margin: 0px auto 0px auto;" /></div>
</div>
</div>
<div style="max-width: 1200px; margin: 60px auto 0 auto; padding: 0 16px; text-align: center;">
<div id="install-ios" style="font-size: 26px; font-weight: 600; margin-bottom: 6px; line-height: 1.3;"><span style="display: inline-flex; align-items: center; gap: 8px;"> <img src="https://assets.wingoat.com/sites/wingoat/pages/ec5fd3f6359f1c59a0b40729af663302.png" alt="iOS" style="width: 32px; height: 32px; display: block; margin-top: -3px;" />How to install web app on iPhone </span></div>
<div style="margin-top: 24px;">
<div style="display: inline-block; vertical-align: top; max-width: 240px; width: 100%; margin: 16px 25px;">
<div style="font-size: 20px; font-weight: bold; margin-bottom: 6px; color: #ffffff;" data-darkreader-inline-color=""><span style="color: #4ed588;">STEP 1</span></div>
<div style="font-size: 15px; margin-bottom: 12px; height: 40px; font-weight: 400;">Open Wingoat, then tap "Share" in the bottom bar.</div>
<img src="https://assets.wingoat.com/sites/wingoat/pages/831deb4fbdae8c1a86e43d9437841376.png" alt="iOS Step 1" style="width: 289px; border-radius: 18px; display: block; margin: 0px auto 0px auto;" height="590" /></div>
<div style="display: inline-block; vertical-align: top; max-width: 240px; width: 100%; margin: 16px 25px;">
<div style="font-size: 20px; font-weight: bold; margin-bottom: 6px; color: #005a34;" data-darkreader-inline-color=""><span style="color: #4ed588;">STEP 2</span></div>
<div style="font-size: 15px; margin-bottom: 12px; height: 40px; font-weight: 400;">Locate and select "Add to Home Screen" from the menu.</div>
<img src="https://assets.wingoat.com/sites/wingoat/pages/ac32d6bd79d3694c4a3bbf0dca20da8f.png" alt="iOS Step 2" style="width: 289px; border-radius: 18px; display: block; margin: 0px auto 0px auto;" height="590" /></div>
<div style="display: inline-block; vertical-align: top; max-width: 240px; width: 100%; margin: 16px 25px;">
<div style="font-size: 20px; font-weight: bold; margin-bottom: 6px; color: #005a34;" data-darkreader-inline-color=""><span style="color: #4ed588;">STEP 3</span></div>
<div style="font-size: 15px; margin-bottom: 12px; height: 40px; font-weight: 400;">Confirm your selection by tapping the "Add" button.</div>
<img src="https://assets.wingoat.com/sites/wingoat/pages/99ce83266ff83dcf132e964d9e19ac26.png" alt="iOS Step 3" style="width: 289px; border-radius: 18px; display: block; margin: 0px auto 0px auto;" height="590" /></div>
</div>
</div>
<div style="max-width: 1200px; margin: 60px auto 0 auto; padding: 0 16px; text-align: center;">
<div id="install-android" style="font-size: 26px; font-weight: 600; margin-bottom: 6px; line-height: 1.3;"><span style="display: inline-flex; align-items: center; gap: 8px;"> <img src="https://assets.wingoat.com/sites/wingoat/pages/a778653d4af8a6b09a11d6556634fa03.png" alt="Android" style="width: 32px; height: 32px; display: block; margin-top: -3px;" />How to install web app on Android </span></div>
<div style="margin-top: 24px;">
<div style="display: inline-block; vertical-align: top; max-width: 240px; width: 100%; margin: 16px 25px;">
<div style="font-size: 20px; font-weight: bold; margin-bottom: 6px; color: #005a34;" data-darkreader-inline-color=""><span style="color: #4ed588;">STEP 1</span></div>
<div style="font-size: 15px; margin-bottom: 12px; height: 40px; font-weight: 400;">On Wingoat, tap the three dots to open the browser menu.</div>
<img src="https://assets.wingoat.com/sites/wingoat/pages/fbf9a4e096b84cc9ad30742cd707b425.png" alt="Android Step 1" style="width: 289px; border-radius: 18px; display: block; margin: 0px auto 0px auto;" height="590" /></div>
<div style="display: inline-block; vertical-align: top; max-width: 240px; width: 100%; margin: 16px 25px;">
<div style="font-size: 20px; font-weight: bold; margin-bottom: 6px; color: #005a34;" data-darkreader-inline-color=""><span style="color: #4ed588;">STEP 2</span></div>
<div style="font-size: 15px; margin-bottom: 12px; height: 40px; font-weight: 400;">Choose "Install and create shortcut" from the menu list.</div>
<img src="https://assets.wingoat.com/sites/wingoat/pages/a2212b11b9595cc9714f020ded4b248f.png" alt="Android Step 2" style="width: 289px; border-radius: 18px; display: block; margin: 0px auto 0px auto;" height="590" /></div>
<div style="display: inline-block; vertical-align: top; max-width: 240px; width: 100%; margin: 16px 25px;">
<div style="font-size: 20px; font-weight: bold; margin-bottom: 6px; color: #005a34;" data-darkreader-inline-color=""><span style="color: #4ed588;">STEP 3</span></div>
<div style="font-size: 15px; margin-bottom: 12px; height: 40px; font-weight: 400;">Confirm your selection by clicking the "Install" button.</div>
<img src="https://assets.wingoat.com/sites/wingoat/pages/57fd56f5677b3b8263a3990bb5a5a267.png" alt="Android Step 3" style="width: 289px; border-radius: 18px; display: block; margin: 0px auto 0px auto;" height="590" /></div>
</div>
</div>
</div>

Install App

WingoatMobile App

Wingoat
Mobile App