import qrcode from 'https://esm.sh/qrcode-generator@1.4.4'; import { nanoid } from 'https://esm.sh/nanoid@4.0.2'; import { sqlite } from "https://esm.town/v/stevekrouse/sqlite"; const SCHEMA_VERSION = 2; const KEY = new URL(import.meta.url).pathname.split("/").at(-1); const TABLE_NAME = `${KEY}_razza_users_${SCHEMA_VERSION}`; async function initDB() { await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${TABLE_NAME} ( id TEXT PRIMARY KEY, handle TEXT NOT NULL, phone TEXT NOT NULL, category TEXT NOT NULL, details TEXT, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ) `); console.log(`Table ${TABLE_NAME} initialized`); } function generateQRCode(text: string): string { const qr = qrcode(0, 'L'); qr.addData(text); qr.make(); return qr.createSvgTag({ cellSize: 4, margin: 1 }); } const css = ` body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } h1, h2 { text-align: center; color: #333; } .content { display: flex; justify-content: space-between; margin-top: 20px; gap: 20px; } .left-side, .right-side { width: 48%; background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } input, select, textarea, button { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; } textarea { height: 100px; resize: vertical; } button { background-color: #007bff; color: white; border: none; cursor: pointer; } button:hover { background-color: #0056b3; } #qrCodesContainer { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; } .qr-code-item { display: flex; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 10px; box-sizing: border-box; } .qr-code-item svg { width: 120px; height: 120px; } .qr-code-details { margin-left: 15px; font-size: 0.9em; display: flex; flex-direction: column; justify-content: space-between; } .qr-code-details p { margin: 0 0 5px 0; } .countdown { font-weight: normal; } .countdown-label { font-weight: bold; } `; const clientScript = ` let existingCodes = []; function updateExistingCodes() { const category = document.getElementById('filterCategory').value; fetch('/existing-qr-codes?category=' + encodeURIComponent(category)) .then(response => response.json()) .then(codes => { existingCodes = codes; renderExistingCodes(); }); } function renderExistingCodes() { const container = document.getElementById('qrCodesContainer'); container.innerHTML = ''; existingCodes.forEach(code => { const codeElement = document.createElement('div'); codeElement.className = 'qr-code-item'; codeElement.innerHTML = \` \${code.qrCodeSvg}

Handle: \${code.handle}

Category: \${code.category}

Details: \${code.details || 'N/A'}

Time left:

\`; container.appendChild(codeElement); }); updateCountdowns(); } function updateCountdowns() { const countdowns = document.querySelectorAll('.countdown'); const now = new Date(); countdowns.forEach(countdown => { const createdAt = new Date(countdown.dataset.created); const timeLeft = 300 - Math.floor((now - createdAt) / 1000); const countdownValue = countdown.querySelector('.countdown-value'); if (timeLeft > 0) { countdownValue.textContent = \`\${timeLeft} seconds\`; } else { countdownValue.textContent = 'Expired'; } }); } function formatPhoneNumber(phoneNumberString) { const cleaned = phoneNumberString.replace(/\\D/g, ''); const match = cleaned.match(/^(\\d{0,3})(\\d{0,3})(\\d{0,4})$/); if (match) { const parts = [match[1], match[2], match[3]].filter(Boolean); if (parts.length === 1) { return \`(\${parts[0]}\`; } else if (parts.length === 2) { return \`(\${parts[0]}) \${parts[1]}\`; } else if (parts.length === 3) { return \`(\${parts[0]}) \${parts[1]}-\${parts[2]}\`; } } return phoneNumberString; } document.getElementById('phone').addEventListener('input', function(e) { const input = e.target; const formatted = formatPhoneNumber(input.value); input.value = formatted; }); function validatePhoneNumber(phone) { const phoneRegex = /^\$\\d{3}\$\\s\\d{3}-\\d{4}$/; return phoneRegex.test(phone); } document.getElementById('generate').addEventListener('click', () => { const handle = document.getElementById('handle').value; const phone = document.getElementById('phone').value; const category = document.getElementById('category').value; const details = document.getElementById('details').value; if (!handle || !phone || !category) { alert('Please fill in all required fields'); return; } if (!validatePhoneNumber(phone)) { alert('Please enter a valid phone number'); return; } fetch('/generate', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ handle, phone, category, details }), }) .then(response => response.json()) .then(newCode => { existingCodes.unshift(newCode); renderExistingCodes(); }); }); document.getElementById('filterCategory').addEventListener('change', updateExistingCodes); updateExistingCodes(); setInterval(updateCountdowns, 1000); `; export default async function server(req: Request): Promise { try { await initDB(); const url = new URL(req.url); if (url.pathname === '/generate' && req.method === 'POST') { const { handle, phone, category, details } = await req.json(); const id = nanoid(); const created_at = new Date().toISOString(); await sqlite.execute( `INSERT INTO ${TABLE_NAME} (id, handle, phone, category, details, created_at) VALUES (?, ?, ?, ?, ?, ?)`, [id, handle, phone, category, details, created_at] ); const qrCodeText = `sms:${phone.replace(/\D/g, '')}?body=Hi! I'm ${handle} from Razza. Let's chat about ${category}!`; const qrCodeSvg = generateQRCode(qrCodeText); const newCode = { id, handle, phone, category, details, qrCodeSvg, created_at }; return new Response(JSON.stringify(newCode), { headers: { 'Content-Type': 'application/json' } }); } if (url.pathname === '/existing-qr-codes' && req.method === 'GET') { const category = url.searchParams.get('category') || ''; let query = ` SELECT * FROM ${TABLE_NAME} WHERE created_at > datetime('now', '-5 minutes') `; const params = []; if (category && category !== '') { query += ` AND category = ?`; params.push(category); } query += ` ORDER BY created_at DESC`; const result = await sqlite.execute(query, params); const now = new Date(); const existingCodes = result.rows .filter(row => { const createdAt = new Date(row.created_at); return (now.getTime() - createdAt.getTime()) < 300000; }) .map(row => ({ ...row, qrCodeSvg: generateQRCode(`sms:${row.phone.replace(/\D/g, '')}?body=Hi! I'm ${row.handle} from Razza. Let's chat about ${row.category}!`) })); return new Response(JSON.stringify(existingCodes), { headers: { 'Content-Type': 'application/json' } }); } return new Response(` Razza

Razza

New Chat

Existing Chats

`, { headers: { 'Content-Type': 'text/html' } }); } catch (error) { console.error('Server error:', error); return new Response(`An error occurred on the server: ${error.message}`, { status: 500 }); } }

razza

Versions

v0