Email Engine ships (L3): sequence generation (welcome/follow-up/re-engagement/broadcast) on the Suite engine with tolerant EMAIL/SUBJECT/BODY parsing, per-email copy buttons, metered; tile live
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
@@ -0,0 +1,62 @@
|
||||
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="noindex"><meta name="description" content="Email Engine — write follow-up sequences, welcome series and broadcasts in the team voice, with your invite link."><title>Email Engine | The Circle Suite</title><link rel="icon" type="image/png" href="/favicon.png"><link rel="stylesheet" href="/styles.css">
|
||||
<style>
|
||||
.ew{max-width:880px;margin:0 auto;padding:24px 20px 70px}
|
||||
.ew h1{font-size:clamp(26px,4.5vw,36px);margin:6px 0 8px}
|
||||
.ew .lede{color:var(--muted);line-height:1.6;margin-bottom:18px}
|
||||
#emGate{display:none;border:2px solid var(--gold);border-radius:12px;padding:16px 20px;margin-bottom:18px;line-height:1.6}
|
||||
#emGate b{color:var(--gold)}
|
||||
.em-card{background:var(--card,#0d2236);border:1px solid var(--line,#24425d);border-radius:14px;padding:18px 20px}
|
||||
.em-kinds{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
|
||||
.em-kind{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;
|
||||
padding:7px 14px;font-size:13.5px;font-weight:700;cursor:pointer}
|
||||
.em-kind.on{border-color:var(--teal);background:rgba(78,214,203,.12);color:var(--teal)}
|
||||
label.em-lab{display:block;font-weight:700;font-size:14px;margin:0 0 6px}
|
||||
#emBrief{width:100%;min-height:88px;resize:vertical;background:var(--bg,#0b1d2e);border:1px solid var(--line);
|
||||
border-radius:10px;color:var(--text);padding:11px 13px;font-size:15px;font-family:inherit;line-height:1.5}
|
||||
.em-hint{color:var(--muted);font-size:12.5px;margin-top:6px}
|
||||
.em-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px}
|
||||
#emMeter{font-size:12.5px;color:var(--muted);margin-left:auto}
|
||||
#emMeter b{color:var(--text)}
|
||||
#emErr{display:none;color:#f0a05a;margin-top:12px;font-size:14px;line-height:1.55}
|
||||
#emOut{display:none;margin-top:18px}
|
||||
.em-mail{background:var(--bg,#0b1d2e);border:1px solid var(--line);border-left:3px solid var(--gold);
|
||||
border-radius:10px;padding:14px 16px;margin-bottom:12px}
|
||||
.em-mail .n{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
|
||||
.em-mail .s{font-weight:800;font-size:16px;margin:4px 0 8px;color:var(--text)}
|
||||
.em-mail .b{white-space:pre-wrap;font-size:15px;line-height:1.6;color:var(--muted)}
|
||||
.em-mail .act{margin-top:10px}
|
||||
.em-note{margin-top:20px;font-size:12.5px;color:var(--muted);line-height:1.6;border-top:1px solid var(--line);padding-top:12px}
|
||||
.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.25);border-top-color:var(--gold);
|
||||
border-radius:50%;animation:sp .8s linear infinite;vertical-align:-2px;margin-right:7px}
|
||||
@keyframes sp{to{transform:rotate(360deg)}}
|
||||
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
|
||||
</style></head>
|
||||
<body>
|
||||
<header class="wrap nav"><a class="brand" href="/suite"><img class="brand-mark" src="/logo.jpg" alt="The RM Circle" width="42" height="42"><span><span id="brandName">RM Circle</span><small>Email Engine</small></span></a><div class="nav-actions"><a class="btn btn-secondary hide-mobile" href="/suite">← The Suite</a><a class="btn btn-primary" href="/suite/copy">Copy Engine</a></div></header>
|
||||
<main class="ew">
|
||||
<div class="eyebrow" style="color:var(--gold)">CIRCLE SUITE · LEVEL 3 · FABRICA</div>
|
||||
<h1>Email <span class="gold">Engine.</span></h1>
|
||||
<p class="lede">Whole sequences, not one-offs. Pick the job, say who the list is, and it writes the series in the team's voice with <strong style="color:var(--text)">your</strong> link — ready to paste into any autoresponder.</p>
|
||||
|
||||
<div id="emGate"></div>
|
||||
|
||||
<div class="em-card" id="emCard">
|
||||
<label class="em-lab">What do you need?</label>
|
||||
<div class="em-kinds" id="emKinds"></div>
|
||||
<label class="em-lab" for="emBrief">Who's the list, and what should it emphasise?</label>
|
||||
<textarea id="emBrief" placeholder="e.g. People from my marketing list who know me but have never touched crypto — lead with how simple it is and be upfront about risk"></textarea>
|
||||
<div class="em-hint">Mention anything you want included: your story, their situation, objections you keep hearing.</div>
|
||||
<div class="em-row">
|
||||
<button id="emGo" class="btn btn-primary">✉️ Write the sequence</button>
|
||||
<span id="emMeter"></span>
|
||||
</div>
|
||||
<div id="emErr"></div>
|
||||
</div>
|
||||
|
||||
<div id="emOut"></div>
|
||||
|
||||
<p class="em-note"><strong style="color:var(--text)">Teach it forward:</strong> a member with a follow-up sequence running never loses a warm prospect to silence — show your two how to set theirs up. <br>Read every email before you send it; your name is on it. Generated copy follows the team's rules — no income promises, no invented numbers, honest about risk. Independent team resource · No income is guaranteed · Cryptocurrency involves risk.</p>
|
||||
</main>
|
||||
<script src="/suite-email.js"></script>
|
||||
<script src="/chat.js" defer></script>
|
||||
<script src="/translate.js" defer></script><script src="/tg-app.js" defer></script><script src="/nav-dash.js" defer></script></body></html>
|
||||
@@ -0,0 +1,124 @@
|
||||
// Email Engine client — sequence picker, brief, then a card per email with
|
||||
// its own copy button (people paste them one at a time into an autoresponder).
|
||||
(function () {
|
||||
'use strict';
|
||||
var KINDS = [
|
||||
{ k: 'welcome', label: 'Welcome series (4)' },
|
||||
{ k: 'followup', label: 'Follow-up series (4)' },
|
||||
{ k: 'reengage', label: 'Re-engagement (3)' },
|
||||
{ k: 'broadcast', label: 'Single broadcast' }
|
||||
];
|
||||
var PLACEHOLDERS = {
|
||||
welcome: "e.g. New members who joined from my warm market — most are brand new to crypto and a little nervous",
|
||||
followup: "e.g. People who watched my video and said they'd think about it — no pressure, keep it useful",
|
||||
reengage: "e.g. Members who joined a month ago, got their wallet set up, then went quiet",
|
||||
broadcast: "e.g. My marketing list — they know me from my content, not from crypto. Lead with the toolkit angle."
|
||||
};
|
||||
var $ = function (id) { return document.getElementById(id); };
|
||||
var kind = 'welcome', busy = false;
|
||||
|
||||
function renderKinds() {
|
||||
var host = $('emKinds');
|
||||
host.innerHTML = '';
|
||||
KINDS.forEach(function (x) {
|
||||
var b = document.createElement('button');
|
||||
b.type = 'button';
|
||||
b.className = 'em-kind' + (x.k === kind ? ' on' : '');
|
||||
b.textContent = x.label;
|
||||
b.addEventListener('click', function () {
|
||||
kind = x.k;
|
||||
$('emBrief').placeholder = PLACEHOLDERS[kind] || '';
|
||||
renderKinds();
|
||||
});
|
||||
host.appendChild(b);
|
||||
});
|
||||
}
|
||||
|
||||
function showMeter(m) {
|
||||
if (!m || !m.limit) { $('emMeter').textContent = ''; return; }
|
||||
$('emMeter').innerHTML = '<b>' + m.remaining + '</b> of ' + m.limit + ' emails left this month';
|
||||
}
|
||||
|
||||
function gate(msg) {
|
||||
var g = $('emGate');
|
||||
g.style.display = 'block';
|
||||
g.innerHTML = msg;
|
||||
$('emCard').style.opacity = '.55';
|
||||
$('emGo').disabled = true;
|
||||
$('emBrief').disabled = true;
|
||||
}
|
||||
|
||||
function renderEmails(list) {
|
||||
var out = $('emOut');
|
||||
out.innerHTML = '';
|
||||
list.forEach(function (e, i) {
|
||||
var d = document.createElement('div');
|
||||
d.className = 'em-mail';
|
||||
d.innerHTML = '<div class="n">Email ' + (i + 1) + '</div><div class="s"></div><div class="b"></div>' +
|
||||
'<div class="act"><button class="btn btn-teal btn-sm">📋 Copy this email</button> <span class="em-hint ok" style="display:none;color:var(--teal)">Copied.</span></div>';
|
||||
d.querySelector('.s').textContent = e.subject;
|
||||
d.querySelector('.b').textContent = e.body;
|
||||
d.querySelector('button').addEventListener('click', function () {
|
||||
navigator.clipboard.writeText('Subject: ' + e.subject + '\n\n' + e.body).then(function () {
|
||||
var ok = d.querySelector('.ok');
|
||||
ok.style.display = '';
|
||||
setTimeout(function () { ok.style.display = 'none'; }, 2200);
|
||||
});
|
||||
});
|
||||
out.appendChild(d);
|
||||
});
|
||||
out.style.display = 'block';
|
||||
}
|
||||
|
||||
async function boot() {
|
||||
renderKinds();
|
||||
try {
|
||||
var r = await fetch('/api/public/suite-meters');
|
||||
if (r.status === 401) { gate('You’re not signed in yet. <a href="/suite" style="color:var(--gold);font-weight:700">Open the Suite</a> and connect the wallet that holds your position, then come back.'); return; }
|
||||
if (r.status === 403) { gate('The Email Engine isn’t open for this position yet. <a href="/suite" style="color:var(--gold);font-weight:700">See your Suite</a>.'); return; }
|
||||
if (!r.ok) return;
|
||||
var d = await r.json();
|
||||
var m = d.meters && d.meters.email;
|
||||
if (m && m.reason === 'locked') {
|
||||
gate('The Email Engine unlocks at <b>Fabrica (level 3)</b>. You’re at level ' + d.level + ' — keep climbing and it opens, along with the Video Maker. <a href="/how-pay-works#exact-costs" style="color:var(--gold);font-weight:700">See what upgrades cost →</a>');
|
||||
return;
|
||||
}
|
||||
showMeter(m);
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
async function run() {
|
||||
if (busy) return;
|
||||
busy = true;
|
||||
$('emErr').style.display = 'none';
|
||||
$('emGo').disabled = true;
|
||||
$('emGo').innerHTML = '<span class="spin"></span>Writing the sequence… (up to two minutes)';
|
||||
try {
|
||||
var r = await fetch('/api/public/suite-email', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ kind: kind, brief: $('emBrief').value.trim() })
|
||||
});
|
||||
var d = await r.json();
|
||||
if (!r.ok) {
|
||||
$('emErr').textContent = d.error || 'That didn’t go through — try again.';
|
||||
$('emErr').style.display = 'block';
|
||||
if (d.meter) showMeter(d.meter);
|
||||
} else {
|
||||
renderEmails(d.emails || []);
|
||||
showMeter(d.meter);
|
||||
$('emOut').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}
|
||||
} catch (e) {
|
||||
$('emErr').textContent = 'Connection hiccup — try again.';
|
||||
$('emErr').style.display = 'block';
|
||||
}
|
||||
busy = false;
|
||||
$('emGo').disabled = false;
|
||||
$('emGo').textContent = '✉️ Write the sequence';
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
boot();
|
||||
$('emGo').addEventListener('click', run);
|
||||
});
|
||||
})();
|
||||
+1
-1
@@ -15,7 +15,7 @@
|
||||
{ lv: 1, ico: '🤖', name: 'AI Coach', desc: '24/7 answers about the system, in 21+ languages — the chat bubble on every page of this site.', href: '#', live: true, coach: true },
|
||||
{ lv: 2, ico: '✍️', name: 'Copy Engine', desc: 'An AI copywriter tuned to this business: posts, DMs, follow-ups and objection replies with your link filled in.', href: '/suite/copy', live: true },
|
||||
{ lv: 2, ico: '🧱', name: 'Page Builder', desc: 'Answer four questions, get your own hosted invitation page — your story, your angle video, your QR.', href: '/suite/page', live: true },
|
||||
{ lv: 3, ico: '📧', name: 'Email Engine', desc: 'Follow-up sequences and broadcasts in the team voice, exportable to any autoresponder.', live: false },
|
||||
{ lv: 3, ico: '📧', name: 'Email Engine', desc: 'Welcome series, follow-up sequences and broadcasts in the team voice — exportable to any autoresponder.', href: '/suite/email', live: true },
|
||||
{ lv: 3, ico: '🎥', name: 'Video Maker', desc: 'The team’s master promo videos rendered with your personal end-card — your name, your QR, your link.', live: false },
|
||||
{ lv: 4, ico: '🗣️', name: 'Voice Profile + Funnels', desc: 'Output that sounds like YOU, plus multi-page funnels on your own team subdomain.', live: false },
|
||||
{ lv: 5, ico: '🚦', name: 'Traffic Desk', desc: 'Syndicated network display advertising: monthly ad credits on the team’s own network, banner and text placements, rotator priority, and AI campaign packs.', live: false },
|
||||
|
||||
Reference in New Issue
Block a user