airsign-web-demo
Version:
AirSign Protocol Web Demo - Shows crypto payments between browser tabs
309 lines (265 loc) • 10.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AirSign SDK Integration Demo</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 15px;
padding: 40px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
margin-bottom: 30px;
}
.integration-examples {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin: 30px 0;
}
.example {
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
border-left: 4px solid #4ECDC4;
}
.example h3 {
margin: 0 0 15px 0;
color: #333;
}
.example code {
background: #e9ecef;
padding: 2px 6px;
border-radius: 4px;
font-family: monospace;
font-size: 0.9em;
}
.example pre {
background: #2d3748;
color: #e2e8f0;
padding: 15px;
border-radius: 8px;
overflow-x: auto;
font-size: 0.85em;
margin: 10px 0;
}
.feature-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 30px 0;
}
.feature {
background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
color: white;
padding: 20px;
border-radius: 10px;
text-align: center;
}
.feature h4 {
margin: 0 0 10px 0;
}
.demo-section {
background: #f8f9fa;
padding: 30px;
border-radius: 15px;
margin: 30px 0;
text-align: center;
}
.demo-btn {
background: linear-gradient(45deg, #4ECDC4, #44A08D);
color: white;
border: none;
padding: 15px 30px;
border-radius: 50px;
cursor: pointer;
font-weight: bold;
font-size: 1.1em;
margin: 10px;
transition: all 0.3s ease;
}
.demo-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(78, 205, 196, 0.4);
}
.status {
margin: 20px 0;
padding: 15px;
border-radius: 8px;
font-weight: bold;
}
.status.success {
background: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.status.error {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
</style>
</head>
<body>
<div class="container">
<h1>🚀 AirSign SDK Integration Demo</h1>
<p style="text-align: center; font-size: 1.2em; color: #666;">
Add Web3 AirDrop functionality to any website with just 2 lines of code!
</p>
<div class="feature-list">
<div class="feature">
<h4>🔗 Drop-in Integration</h4>
<p>Works with any website or web app</p>
</div>
<div class="feature">
<h4>💰 Multi-Currency</h4>
<p>BTC, ETH, USDC, SOL support</p>
</div>
<div class="feature">
<h4>🔐 End-to-End Encrypted</h4>
<p>Real X25519 ECDH + ChaCha20</p>
</div>
<div class="feature">
<h4>📱 Cross-Platform</h4>
<p>Desktop, mobile, any device</p>
</div>
</div>
<div class="integration-examples">
<div class="example">
<h3>🚀 Quick Start (Auto-Init)</h3>
<p>Add to any HTML page:</p>
<pre><!-- Add this anywhere in your page -->
<div data-airsign-auto
data-airsign-api-key="your-key"
data-airsign-position="bottom-right"></div>
<script src="airsign-embed.js"></script></pre>
</div>
<div class="example">
<h3>⚙️ JavaScript API</h3>
<p>Programmatic control:</p>
<pre>const airsign = new AirSignEmbed({
apiKey: 'your-api-key',
network: 'mainnet',
position: 'bottom-right'
});
await airsign.enable();</pre>
</div>
<div class="example">
<h3>🎨 Custom Integration</h3>
<p>For React, Vue, Angular:</p>
<pre>import AirSignEmbed from 'airsign-embed';
// In your component
useEffect(() => {
const airsign = new AirSignEmbed(config);
airsign.enable();
return () => airsign.disable();
}, []);</pre>
</div>
<div class="example">
<h3>🔧 WordPress Plugin</h3>
<p>Easy CMS integration:</p>
<pre>// Add to functions.php
wp_enqueue_script('airsign',
'airsign-embed.js');
// Shortcode: [airsign position="bottom-left"]</pre>
</div>
</div>
<div class="demo-section">
<h2>🧪 Live Demo</h2>
<p>Try the embeddable SDK right on this page!</p>
<button class="demo-btn" onclick="enableAirSign()">✅ Enable AirSign Widget</button>
<button class="demo-btn" onclick="disableAirSign()">❌ Disable Widget</button>
<button class="demo-btn" onclick="testMetaMask()">🦊 Test MetaMask Integration</button>
<div id="demo-status"></div>
<h3>💡 Integration Use Cases</h3>
<div style="text-align: left; max-width: 600px; margin: 0 auto;">
<p><strong>🛒 E-commerce:</strong> Let customers pay with crypto by scanning nearby devices</p>
<p><strong>🎮 Gaming:</strong> Trade items and currency between players in proximity</p>
<p><strong>💼 Business:</strong> B2B payments and invoicing via device discovery</p>
<p><strong>🏪 Retail:</strong> Point-of-sale crypto payments without QR codes</p>
<p><strong>📱 DApps:</strong> Enhanced UX for wallet connections and payments</p>
<p><strong>🎪 Events:</strong> Peer-to-peer payments at conferences and meetups</p>
</div>
</div>
<div style="text-align: center; margin-top: 40px; padding: 20px; background: #f8f9fa; border-radius: 10px;">
<h3>🔗 Ready to Integrate?</h3>
<p>Get your API key and start building the future of Web3 payments!</p>
<p><strong>SDK Size:</strong> ~15KB gzipped | <strong>Dependencies:</strong> None | <strong>License:</strong> MIT</p>
</div>
</div>
<!-- AirSign Embeddable SDK -->
<script src="airsign-embed.js"></script>
<script>
let airsignInstance = null;
async function enableAirSign() {
if (airsignInstance) {
showStatus('AirSign already enabled!', 'error');
return;
}
try {
airsignInstance = new AirSignEmbed({
apiKey: 'demo-key',
network: 'testnet',
position: 'bottom-right'
});
await airsignInstance.enable();
showStatus('✅ AirSign enabled! Check the bottom-right corner.', 'success');
} catch (error) {
showStatus('❌ Failed to enable AirSign: ' + error.message, 'error');
}
}
function disableAirSign() {
if (!airsignInstance) {
showStatus('AirSign is not enabled!', 'error');
return;
}
airsignInstance.disable();
airsignInstance = null;
showStatus('❌ AirSign disabled.', 'success');
}
async function testMetaMask() {
if (typeof window.ethereum === 'undefined') {
showStatus('🦊 MetaMask not detected. Install MetaMask extension to test!', 'error');
window.open('https://metamask.io/download/', '_blank');
return;
}
try {
const accounts = await window.ethereum.request({
method: 'eth_requestAccounts'
});
showStatus(`🦊 MetaMask connected! Account: ${accounts[0].substring(0, 10)}...`, 'success');
} catch (error) {
showStatus('❌ MetaMask connection failed: ' + error.message, 'error');
}
}
function showStatus(message, type) {
const statusEl = document.getElementById('demo-status');
statusEl.className = `status ${type}`;
statusEl.textContent = message;
setTimeout(() => {
statusEl.textContent = '';
statusEl.className = '';
}, 5000);
}
// Auto-enable for demo
window.addEventListener('load', () => {
setTimeout(enableAirSign, 1000);
});
</script>
</body>
</html>