🚀 Quick Start Tutorial

<script src="https://api.gammal.tech/sdk-web.js"></script>

<button id="loginBtn">Login with Gammal Tech</button>
<p id="userStatus">Not logged in</p>

<script>
// Handle login button click
document.getElementById('loginBtn').addEventListener('click', async () => {
    const token = await GammalTech.login();
    if (token) {
        document.getElementById('userStatus').textContent = 'Logged in! ✓';
    }
});

// Check if already logged in on page load
if (GammalTech.isLoggedIn()) {
    document.getElementById('userStatus').textContent = 'Logged in! ✓';
    document.getElementById('loginBtn').textContent = 'Logged In';
}
</script>

<button id="buyBtn">Buy Premium - 99 EGP</button>

<script>
document.getElementById('buyBtn').addEventListener('click', async () => {
    await GammalTech.pay(99, 'Premium Subscription', async (payment) => {
        // This runs after successful payment
        console.log('Payment ID:', payment.payment_id);
        
        // Deliver the product/service here
        unlockPremiumFeatures();
        
        // Confirm delivery
        await GammalTech.confirmDelivery(payment.payment_id);
        
        alert('Thank you for your purchase!');
    });
});
</script>

<select id="themeSelect">
    <option value="light">Light Theme</option>
    <option value="dark">Dark Theme</option>
</select>

<script>
// Load saved preference on page load
async function loadPreferences() {
    if (!GammalTech.isLoggedIn()) return;
    
    const data = await GammalTech.user.get();
    if (data.theme) {
        document.getElementById('themeSelect').value = data.theme;
        document.body.className = data.theme;
    }
}
loadPreferences();

// Save when user changes theme
document.getElementById('themeSelect').addEventListener('change', async (e) => {
    const theme = e.target.value;
    document.body.className = theme;
    
    // Save to Gammal Tech (syncs across devices)
    const data = await GammalTech.user.get();
    data.theme = theme;
    await GammalTech.user.save(data);
});
</script>

<input type="text" id="question" placeholder="Ask me anything...">
<button id="askBtn">Ask AI</button>
<p id="answer"></p>

<script>
document.getElementById('askBtn').addEventListener('click', async () => {
    const question = document.getElementById('question').value;
    document.getElementById('answer').textContent = 'Thinking...';
    
    const response = await GammalTech.ai.ask(question, {
        system: 'You are a helpful assistant. Keep responses brief.'
    });
    
    document.getElementById('answer').textContent = response;
});
</script>