Resources | BE 21 PTY LTD

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>PoRWA Event</title>
<style>
:root { --b:#e5e7eb; --g:#6b7280; --bg:#fafafa; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; line-height:1.5; }
.wrap { max-width: 820px; margin: 0 auto; padding: 18px 16px 40px; }
.top { display:flex; align-items:center; gap:12px; margin-bottom: 14px; }
.badge { width:44px; height:44px; border:1px solid var(--b); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; }
h1 { margin:0; font-size: 26px; }
.sub { color: var(--g); font-size: 14px; margin-top:2px; }
.card { border:1px solid var(--b); border-radius: 14px; padding: 14px; margin: 12px 0; background:#fff; }
.card.muted { background: var(--bg); }
.row { display:flex; gap:12px; flex-wrap:wrap; }
.col { flex:1 1 240px; }
label { display:block; font-size:12px; color: var(--g); margin: 10px 0 6px; }
input, textarea, select {
width:100%; box-sizing:border-box; padding:10px 10px; border:1px solid var(--b); border-radius: 10px; font-size: 14px;
background:#fff;
}
textarea { min-height: 64px; resize: vertical; }
.btnrow { display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px; }
a.btn, button.btn {
display:inline-block; padding:10px 12px; border:1px solid var(--b); border-radius: 12px; text-decoration:none; color:#111; background:#fff;
cursor:pointer; font-size:14px;
}
a.btn.primary, button.btn.primary { background:#111; color:#fff; border-color:#111; }
.tiny { font-size: 12px; color: var(--g); margin-top: 8px; }
.hr { height:1px; background: var(--b); margin: 14px 0; }
.pill { display:inline-block; padding:4px 10px; border:1px solid var(--b); border-radius:999px; font-size:12px; color:#111; background:#fff; }
.screenTitle { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
pre { white-space: pre-wrap; border:1px solid var(--b); border-radius: 12px; padding: 12px; background: var(--bg); margin: 10px 0 0; }
.hide { display:none; }
</style>
</head>

<body>
<div class="wrap">
<div class="top">
<div class="badge">BE21</div>
<div>
<div class="sub">Universal PoRWA Event Page (Template)</div>
<h1>PoRWA Event</h1>
</div>
</div>

<div class="card muted">
<div class="screenTitle">
<strong>Setup (only you fill this in)</strong>
<span class="pill">PoRWA v4 • Bitcoin attestation is mandatory</span>
</div>

<div class="row">
<div class="col">
<label>Event ID (short label)</label>
<input id="eventId" placeholder="e.g. KEYS-014" value="KEYS-014" />
</div>
<div class="col">
<label>What is happening?</label>
<input id="what" placeholder="e.g. Keys / Access handover" value="Keys / Access handover" />
</div>
</div>

<div class="row">
<div class="col">
<label>Party A (Sender) name</label>
<input id="aName" placeholder="e.g. Maya" value="Maya Chen" />
</div>
<div class="col">
<label>Party B (Receiver) name</label>
<input id="bName" placeholder="e.g. Jordan" value="Jordan Patel" />
</div>
</div>

<div class="row">
<div class="col">
<label>When / Where</label>
<input id="whenWhere" placeholder="e.g. Tue 3 Feb 3:00pm, 123 Collins St Melbourne" value="Tue 3 Feb 3:00pm • 123 Collins St, Melbourne" />
</div>
<div class="col">
<label>Local Trust Code email</label>
<input id="trustEmail" placeholder="e.g. info@be21.au" value="info@be21.au" />
</div>
</div>

<div class="row">
<div class="col">
<label>Party A email (optional but recommended)</label>
<input id="aEmail" placeholder="maya@example.com" value="maya@example.com" />
</div>
<div class="col">
<label>Party B email (optional but recommended)</label>
<input id="bEmail" placeholder="jordan@example.com" value="jordan@example.com" />
</div>
</div>

<div class="row">
<div class="col">
<label>Party A phone (E.164, e.g. +614xxxxxxxx)</label>
<input id="aPhone" placeholder="+614xxxxxxxx" value="+61400111222" />
</div>
<div class="col">
<label>Party B phone (E.164, e.g. +614xxxxxxxx)</label>
<input id="bPhone" placeholder="+614xxxxxxxx" value="+61400333444" />
</div>
</div>

<div class="tiny">
WhatsApp requires phone without “+” (wa.me/614...). SMS links work best on mobile.
</div>

<div class="btnrow">
<button class="btn primary" onclick="build()">Update Page</button>
<button class="btn" onclick="fillExample()">Load Another Example</button>
</div>
</div>

<div class="card" id="screen1">
<div class="screenTitle">
<strong>1) Event Invite</strong>
<span class="pill" id="pillEvent">EVENT: KEYS-014</span>
</div>

<div class="tiny" id="eventSummary">
Keys / Access handover • From Maya Chen → To Jordan Patel • Tue 3 Feb 3:00pm • 123 Collins St, Melbourne
</div>

<div class="btnrow" style="margin-top:12px;">
<a class="btn primary" id="inviteEmail" href="#">JOIN via Email</a>
<a class="btn" id="inviteSMS" href="#">JOIN via SMS</a>
<a class="btn" id="inviteWA" href="#" target="_blank" rel="noopener">JOIN via WhatsApp</a>
</div>

<div class="tiny">
Tap one button. A message opens pre-filled. You press <b>Send</b>.
</div>

<details style="margin-top:12px;">
<summary style="cursor:pointer;color:#111;">Show the INVITE message text</summary>
<pre id="inviteText"></pre>
</details>
</div>

<div class="card" id="screen2">
<div class="screenTitle">
<strong>2) Confirm after the action</strong>
<span class="pill">After handover</span>
</div>
<div class="tiny">
After the real-world action occurs, both parties send a CONFIRM message.
</div>

<div class="btnrow" style="margin-top:12px;">
<a class="btn primary" id="confirmAEmail" href="#">CONFIRM (Sender) via Email</a>
<a class="btn" id="confirmASMS" href="#">CONFIRM (Sender) via SMS</a>
<a class="btn" id="confirmAWA" href="#" target="_blank" rel="noopener">CONFIRM (Sender) via WhatsApp</a>
</div>

<div class="btnrow">
<a class="btn primary" id="confirmBEmail" href="#">CONFIRM (Receiver) via Email</a>
<a class="btn" id="confirmBSMS" href="#">CONFIRM (Receiver) via SMS</a>
<a class="btn" id="confirmBWA" href="#" target="_blank" rel="noopener">CONFIRM (Receiver) via WhatsApp</a>
</div>

<details style="margin-top:12px;">
<summary style="cursor:pointer;color:#111;">Show CONFIRM message texts</summary>
<pre id="confirmAText"></pre>
<pre id="confirmBText"></pre>
</details>
</div>

<div class="card" id="screen3">
<div class="screenTitle">
<strong>3) Request the dual receipt</strong>
<span class="pill">Trust Code</span>
</div>

<div class="tiny">
Once JOIN + both CONFIRMs are sent, either person forwards the message thread to the Trust Code to receive the dual receipt.
</div>

<div class="btnrow" style="margin-top:12px;">
<a class="btn primary" id="trustMailto" href="#">Email Trust Code (prefilled)</a>
</div>

<details style="margin-top:12px;">
<summary style="cursor:pointer;color:#111;">What does the Trust Code email say?</summary>
<pre id="trustBody"></pre>
</details>

<div class="tiny">
Privacy: only the event hash is anchored to Bitcoin. Event details remain private to participants.
</div>
</div>

</div>

function build(){
const E = document.getElementById("eventId").value.trim() || "EVENT-001";
const what = document.getElementById("what").value.trim() || "Real-world action";
const aName = document.getElementById("aName").value.trim() || "Party A";
const bName = document.getElementById("bName").value.trim() || "Party B";
const whenWhere = document.getElementById("whenWhere").value.trim() || "Time / Location";
const trustEmail = document.getElementById("trustEmail").value.trim() || "info@be21.au";

const aEmail = document.getElementById("aEmail").value.trim();
const bEmail = document.getElementById("bEmail").value.trim();
const aPhone = document.getElementById("aPhone").value.trim();
const bPhone = document.getElementById("bPhone").value.trim();

document.getElementById("pillEvent").textContent = `EVENT: ${E}`;

// INVITE message (Party A -> Party B)
const inviteText =
`EVENT: ${E} — INVITE

What: ${what}
From: ${aName}
To: ${bName}
When/Where: ${whenWhere}

Instructions:
Please reply with:
JOIN — I agree to participate.
or
DECLINE — I do not agree.

Trust Code: ${trustEmail}`;

// JOIN reply (Party B -> Party A)
const joinText =
`EVENT: ${E} — JOIN

I agree to participate.`;

// CONFIRM messages
const confirmA =
`EVENT: ${E} — CONFIRM

${what} completed. (${aName} → ${bName})`;

const confirmB =
`EVENT: ${E} — CONFIRM

${what} received / completed. (${bName})`;

// Trust Code request
const trustMsg =
`EVENT: ${E} — PoRWA Submission

Please anchor this PoRWA event to Bitcoin and issue the dual receipt to both participants.

(Forward / paste the INVITE, JOIN, and both CONFIRM messages in this email.)`;

// Populate previews
document.getElementById("inviteText").textContent = inviteText;
document.getElementById("confirmAText").textContent = confirmA;
document.getElementById("confirmBText").textContent = confirmB;
document.getElementById("trustBody").textContent = trustMsg;

// Build links
// JOIN via Email/SMS/WA should send INVITE to Party B? (poster UX)
// The button label is JOIN, but the actual action is: Party A sends INVITE to Party B.
// This page is typically opened by Party B scanning QR; so JOIN buttons send JOIN message to Party A.
// We'll implement JOIN buttons as Party B -> Party A (joinText) which is what the scanner needs.
const joinEmail = aEmail ? `mailto:${aEmail}?subject=${enc(`EVENT: ${E} — JOIN`)}&body=${enc(joinText)}` : "#";
const joinSMS = aPhone ? `sms:${aPhone}?body=${enc(joinText)}` : "#";
const joinWA = aPhone ? `https://wa.me/${waNumber(aPhone)}?text=${enc(joinText)}` : "#";

// Confirm Sender (A) -> B
const cAEmail = bEmail ? `mailto:${bEmail}?subject=${enc(`EVENT: ${E} — CONFIRM`)}&body=${enc(confirmA)}` : "#";
const cASMS = bPhone ? `sms:${bPhone}?body=${enc(confirmA)}` : "#";
const cAWA = bPhone ? `https://wa.me/${waNumber(bPhone)}?text=${enc(confirmA)}` : "#";

// Confirm Receiver (B) -> A
const cBEmail = aEmail ? `mailto:${aEmail}?subject=${enc(`EVENT: ${E} — CONFIRM`)}&body=${enc(confirmB)}` : "#";
const cBSMS = aPhone ? `sms:${aPhone}?body=${enc(confirmB)}` : "#";
const cBWA = aPhone ? `https://wa.me/${waNumber(aPhone)}?text=${enc(confirmB)}` : "#";

// Trust code email
const trustMailto = `mailto:${trustEmail}?subject=${enc(`EVENT: ${E} — PoRWA Submission`)}&body=${enc(trustMsg)}`;

// Assign links (and disable if missing)
setLink("inviteEmail", joinEmail, !!aEmail);
setLink("inviteSMS", joinSMS, !!aPhone);
setLink("inviteWA", joinWA, !!aPhone);

setLink("confirmAEmail", cAEmail, !!bEmail);
setLink("confirmASMS", cASMS, !!bPhone);
setLink("confirmAWA", cAWA, !!bPhone);

setLink("confirmBEmail", cBEmail, !!aEmail);
setLink("confirmBSMS", cBSMS, !!aPhone);
setLink("confirmBWA", cBWA, !!aPhone);

setLink("trustMailto", trustMailto, true);
}

function setLink(id, href, enabled){
const el = document.getElementById(id);
el.href = href;
el.style.opacity = enabled ? "1" : "0.45";
el.style.pointerEvents = enabled ? "auto" : "none";
el.title = enabled ? "" : "Fill in the required email/phone above to enable this button.";
}

function fillExample(){
// Alternate example (pizza)
document.getElementById("eventId").value = "PIZZA-022";
document.getElementById("what").value = "Pizza delivery confirmation";
document.getElementById("aName").value = "Sam Rivera (courier)";
document.getElementById("bName").value = "Alex Nguyen (customer)";
document.getElementById("whenWhere").value = "Tue 3 Feb 6:40pm • 58 Lygon St, Carlton";
document.getElementById("trustEmail").value = "info@be21.au";
document.getElementById("aEmail").value = "sam@example.com";
document.getElementById("bEmail").value = "alex@example.com";
document.getElementById("aPhone").value = "+61411112222";
document.getElementById("bPhone").value = "+61433334444";
build();
}

// initial render
build();
</script>
</body>
</html>