<!doctype html>

<head>

<title>Dartza — Download the App</title>

<style>

:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

body { margin: 0; background: #0b0c10; color: #f5f5f5; }

.wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }

.card {

width: min(680px, 100%);

background: rgba(255,255,255,0.06);

border: 1px solid rgba(255,255,255,0.12);

border-radius: 18px;

padding: 28px;

box-shadow: 0 10px 40px rgba(0,0,0,0.35);

}

h1 { margin: 0 0 8px; font-size: 34px; }

p { margin: 0 0 18px; opacity: 0.9; line-height: 1.5; }

.buttons { display: grid; gap: 12px; margin-top: 18px; }

.btn {

display: inline-flex;

align-items: center;

justify-content: center;

gap: 10px;

padding: 14px 16px;

border-radius: 12px;

border: 1px solid rgba(255,255,255,0.16);

background: rgba(255,255,255,0.08);

color: #fff;

text-decoration: none;

font-weight: 650;

transition: transform 0.08s ease, background 0.2s ease, border 0.2s ease;

}

.btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.26); transform: translateY(-1px); }

.btn:active { transform: translateY(0px); }

.fine { margin-top: 16px; font-size: 13px; opacity: 0.75; }

.row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.badge { font-size: 12px; opacity: 0.75; margin-top: 10px; }

.logo {

width: 60px; height: 60px; border-radius: 14px;

background: rgba(255,255,255,0.12);

display: grid; place-items: center;

font-weight: 800; font-size: 18px;

border: 1px solid rgba(255,255,255,0.14);

margin-bottom: 14px;

}

</style>

</head>

<body>

<h1>Dartza</h1>

<p>Download the app and jump into party games with your friends.</p>

<a class="btn" id="iosLink" href="#" rel="noopener"> Download on the App Store</a>

<a class="btn" id="androidLink" href="#" rel="noopener">▶ Get it on Google Play</a>

<a class="btn" id="openAppLink" href="#" rel="noopener">Open Dartza</a>

</div>

Tip: If “Open Dartza” doesn’t work, install the app first using the buttons above.

</div>

</section>

</main>

// ✅ Replace these with your real links

const APP_STORE_URL = "https://apps.apple.com/app/idYOUR_APP_ID";

const PLAY_STORE_URL = "https://play.google.com/store/apps/details?id=your.package.name";

// Optional: if you have Universal Links / App Links set up, use https URL on your domain (recommended)

// Example: https://dartza.app/open

const UNIVERSAL_LINK = "https://yourdomain.com/open";

// Optional fallback deep links (only if you’ve implemented them)

// Examples:

// iOS custom scheme: dartza://open

// Android scheme/intent: dartza://open (or intent://open#Intent;scheme=dartza;package=...;end)

const IOS_SCHEME = "dartza://open";

const ANDROID_SCHEME = "dartza://open";

const iosLink = document.getElementById("iosLink");

const androidLink = document.getElementById("androidLink");

const openAppLink = document.getElementById("openAppLink");

const hint = document.getElementById("deviceHint");

iosLink.href = APP_STORE_URL;

androidLink.href = PLAY_STORE_URL;

const ua = navigator.userAgent || "";

const isIOS = /iPhone|iPad|iPod/i.test(ua);

const isAndroid = /Android/i.test(ua);

// Basic device hint + sensible default for the "Open" button

if (isIOS) {

hint.textContent = "Looks like you’re on iOS.";

openAppLink.href = UNIVERSAL_LINK !== "https://yourdomain.com/open" ? UNIVERSAL_LINK : IOS_SCHEME;

} else if (isAndroid) {

hint.textContent = "Looks like you’re on Android.";

openAppLink.href = UNIVERSAL_LINK !== "https://yourdomain.com/open" ? UNIVERSAL_LINK : ANDROID_SCHEME;

} else {

hint.textContent = "On desktop? Use the store buttons above or scan a QR code.";

openAppLink.style.display = "none";

}

// Optional: if you want to try opening the app, then fallback to the store automatically.

// Note: browsers are increasingly strict; universal links are the most reliable.

openAppLink.addEventListener("click", (e) => {

const wantsFallback = true;

if (!wantsFallback) return;

// If using universal link, let it proceed normally.

if (openAppLink.href.startsWith("https://") && openAppLink.href !== APP_STORE_URL && openAppLink.href !== PLAY_STORE_URL) {

return;

}

// Try scheme deep link, then fallback.

e.preventDefault();

const start = Date.now();

window.location.href = openAppLink.href;

setTimeout(() => {

// If the page is still visible after ~1.2s, assume app didn't open

if (Date.now() - start < 1600) {

window.location.href = isIOS ? APP_STORE_URL : (isAndroid ? PLAY_STORE_URL : APP_STORE_URL);

}

}, 1200);

});

</script>

</body>

</html>