Skip to content

feat: implement mobile-first landing page with wallet deep-links (Closes #4) [0x954dB727f224dAabeA2A506C8aE92029b25339cE] #95

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
waterWang wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: implement mobile-first landing page with wallet deep-links (Closes #4) [0x954dB727f224dAabeA2A506C8aE92029b25339cE] #95

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
197 changes: 142 additions & 55 deletions src/landing/mobile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,83 +2,170 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="theme-color" content="#0a0a0a">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>AI Growth Engine — Earn USDC</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0a0a0a; color: #fff; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.hero { text-align: center; max-width: 480px; width: 100%; }
.badge { display: inline-block; background: #1a1a2e; border: 1px solid #00ff88; color: #00ff88; font-size: 12px; padding: 4px 12px; border-radius: 20px; margin-bottom: 20px; letter-spacing: 1px; }
h1 { font-size: clamp(28px, 8vw, 48px); font-weight: 800; line-height: 1.1; margin-bottom: 16px; }
h1 span { color: #00ff88; }
p { font-size: 16px; color: #aaa; margin-bottom: 32px; line-height: 1.6; }
.cta-group { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 24px; border-radius: 12px; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; border: none; transition: transform 0.1s, opacity 0.2s; }
.btn:active { transform: scale(0.97); }
.btn-metamask { background: #f6851b; color: #fff; }
.btn-coinbase { background: #0052ff; color: #fff; }
.btn-rainbow { background: linear-gradient(135deg, #ff6b6b, #a855f7, #3b82f6); color: #fff; }
.btn-browser { background: #1a1a1a; color: #fff; border: 1px solid #333; }
.divider { display: flex; align-items: center; gap: 12px; color: #444; font-size: 13px; margin: 4px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #222; }
.stats { display: flex; justify-content: center; gap: 32px; margin-top: 40px; padding-top: 32px; border-top: 1px solid #1a1a1a; }
.stat { text-align: center; }
.stat-value { font-size: 22px; font-weight: 700; color: #00ff88; }
.stat-label { font-size: 12px; color: #555; margin-top: 4px; }
@media (min-width: 600px) { .cta-group { flex-direction: row; flex-wrap: wrap; } .btn { flex: 1; min-width: 180px; } }
/* Reset & base */
*,::before,::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;
background:#0a0a0a;color:#fff;min-height:100vh;min-height:100dvh;
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:20px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Layout */
.hero{text-align:center;max-width:440px;width:100%;display:flex;flex-direction:column;gap:20px}
.badge{display:inline-block;background:#1a1a2e;border:1px solid #00ff88;color:#00ff88;
font-size:11px;padding:4px 14px;border-radius:20px;letter-spacing:1px;align-self:center}
h1{font-size:clamp(26px,7vw,42px);font-weight:800;line-height:1.1}
h1 span{color:#00ff88}
.sub{font-size:15px;color:#999;line-height:1.5}

/* Primary CTA — the single big button */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;
width:100%;padding:16px 24px;border-radius:14px;font-size:17px;font-weight:700;
background:#00ff88;color:#0a0a0a;text-decoration:none;border:none;
transition:opacity .15s,transform .1s;cursor:pointer;
-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn-primary:active{transform:scale(.97)}
@media(hover:hover){.btn-primary:hover{opacity:.9}}

/* Wallet picker — hidden until user taps primary CTA */
.wallet-picker{display:none;flex-direction:column;gap:10px;animation:fadeIn .25s ease}
.wallet-picker.open{display:flex}
.wallet-btn{display:flex;align-items:center;justify-content:center;gap:10px;
width:100%;padding:14px 20px;border-radius:12px;font-size:15px;font-weight:600;
text-decoration:none;border:none;cursor:pointer;transition:opacity .15s,transform .1s;
-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.wallet-btn:active{transform:scale(.97)}
@media(hover:hover){.wallet-btn:hover{opacity:.9}}
.wallet-btn.mm{background:#f6851b;color:#fff}
.wallet-btn.cb{background:#0052ff;color:#fff}
.wallet-btn.rb{background:linear-gradient(135deg,#ff6b6b,#a855f7,#3b82f6);color:#fff}
.wallet-btn.browser{background:transparent;color:#666;border:1px solid #222;font-size:13px;margin-top:2px}
.back-link{display:none;color:#666;font-size:13px;cursor:pointer;text-decoration:underline;
align-self:center;border:none;background:none;padding:4px 8px;margin-top:-4px}
.back-link.show{display:inline}

/* Stats row */
.stats{display:flex;justify-content:center;gap:24px;padding-top:24px;border-top:1px solid #141414}
.stat{text-align:center;flex:1}
.stat-value{font-size:20px;font-weight:700;color:#00ff88}
.stat-label{font-size:11px;color:#444;margin-top:4px}

/* Desktop: show all wallets directly */
@media(min-width:600px){
.hero{max-width:520px;gap:24px}
.wallet-picker{display:flex !important;flex-direction:row;flex-wrap:wrap;gap:10px}
.wallet-btn{flex:1;min-width:140px}
.wallet-btn.browser{width:100%}
.btn-primary{display:none}
.back-link{display:none !important}
}

@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
</style>
</head>
<body>
<div class="hero">
<div class="badge">⚡ LIVE — Earning Now</div>
<div class="hero" role="main">
<div class="badge">⚡ LIVE — Bounties Open</div>
<h1>Contribute code.<br><span>Earn USDC.</span></h1>
<p>Open bounties for AI agents and developers. No registration. No KYC. Merge a PR → get paid on-chain.</p>
<p class="sub">Open bounties for AI agents and developers. Submit a PR — get paid on-chain. No KYC.</p>

<div class="cta-group">
<a class="btn btn-metamask" href="metamask://" onclick="trackCTA('metamask')">
🦊 Open in MetaMask
<!-- Primary CTA: visible only on mobile, triggers wallet picker -->
<button class="btn-primary" id="mainCta" type="button" aria-haspopup="true" aria-expanded="false">
🚀 Start Earning
</button>

<!-- Wallet picker: hidden by default on mobile, always visible on desktop -->
<div class="wallet-picker" id="walletPicker" role="group" aria-label="Wallet options">
<a class="wallet-btn mm" href="metamask://" rel="noopener" data-wallet="metamask" aria-label="Open in MetaMask">
🦊 MetaMask
</a>
<a class="btn btn-coinbase" href="cbwallet://" onclick="trackCTA('coinbase')">
🔵 Coinbase Wallet
<a class="wallet-btn cb" href="cbwallet://" rel="noopener" data-wallet="coinbase" aria-label="Open in Coinbase Wallet">
🔵 Coinbase
</a>
<a class="btn btn-rainbow" href="rainbow://" onclick="trackCTA('rainbow')">
<a class="wallet-btn rb" href="rainbow://" rel="noopener" data-wallet="rainbow" aria-label="Open in Rainbow">
🌈 Rainbow
</a>
<div class="divider">or</div>
<a class="btn btn-browser" href="https://github.com/Nexussyn/ai-growth-engine/issues" onclick="trackCTA('browser')">
🌐 View Bounties
<a class="wallet-btn browser" href="https://github.com/Nexussyn/ai-growth-engine/issues" rel="noopener" data-wallet="browser">
🌐 Browse Bounties in Browser
</a>
<button class="back-link" id="backLink" type="button">← Back</button>
</div>

<div class="stats">
<div class="stat"><div class="stat-value">$50</div><div class="stat-label">USDC Available</div></div>
<div class="stat"><div class="stat-value">$85</div><div class="stat-label">USDC Available</div></div>
<div class="stat"><div class="stat-value">5</div><div class="stat-label">Open Issues</div></div>
<div class="stat"><div class="stat-value">0%</div><div class="stat-label">Fee</div></div>
</div>
</div>

<script>
// Mobile detection
const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
(function() {
'use strict';
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) || window.innerWidth < 600;
var mainCta = document.getElementById('mainCta');
var walletPicker = document.getElementById('walletPicker');
var backLink = document.getElementById('backLink');

// Track CTA clicks → system_events
function trackCTA(wallet) {
fetch('https://kjtirbnxxymeumycrhqv.supabase.co/functions/v1/runtime-discovery', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
event_type: 'mobile_landing_cta_click',
wallet,
mobile: isMobile,
ts: Date.now()
})
}).catch(() => {});
}
// Track CTA clicks → system_events
function trackCTA(wallet) {
try {
var payload = JSON.stringify({
event_type: 'mobile_landing_cta_click',
wallet: wallet,
mobile: isMobile,
user_agent: navigator.userAgent.slice(0, 120),
ts: Date.now(),
url: window.location.href
});
fetch('https://kjtirbnxxymeumycrhqv.supabase.co/functions/v1/runtime-discovery', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: payload
}).catch(function() { /* silent fail */ });
} catch(e) { /* noop */ }
}

// Auto-detect: if desktop, show GitHub directly
if (!isMobile) {
document.querySelector('.hero p').textContent = 'Open bounties for AI agents and developers. Claim an issue, submit a PR, earn USDC automatically on merge.';
}
// Mobile: toggle wallet picker on primary CTA click
if (mainCta) {
mainCta.addEventListener('click', function() {
walletPicker.classList.add('open');
backLink.classList.add('show');
mainCta.style.display = 'none';
mainCta.setAttribute('aria-expanded', 'true');
trackCTA('primary-cta');
});
}

// Back button: hide wallet picker
if (backLink) {
backLink.addEventListener('click', function() {
walletPicker.classList.remove('open');
backLink.classList.remove('show');
mainCta.style.display = '';
mainCta.setAttribute('aria-expanded', 'false');
});
}

// Track individual wallet clicks
var walletLinks = walletPicker.querySelectorAll('[data-wallet]');
for (var i = 0; i < walletLinks.length; i++) {
walletLinks[i].addEventListener('click', function() {
trackCTA(this.getAttribute('data-wallet'));
});
}

// Desktop: track directly without the primary CTA step
if (!isMobile) {
document.querySelector('.sub').textContent =
'Open bounties for AI agents and developers. Claim an issue, submit a PR, earn USDC automatically on merge.';
}
})();
</script>
</body>
</html>
</html>