// ===== WebAnchor — recreated, semi-interactive app demos =====
// These are original recreations (NOT the real apps, no real data) so visitors
// can play with the idea of each tool without the full thing.
function DemoWin({ theme = 'dark', name, label, children }) {
return (
{name}
{label && {label} }
{children}
);
}
// ---------- Life OS — daily planner that syncs your calendar ----------
function LifeOSDemo() {
const [tasks, setTasks] = useState([
{ t: 'Reply to new enquiries', tag: 'Work', time: '09:00', done: true },
{ t: 'Send invoice #0042', tag: 'Work', time: '11:00', done: false },
{ t: 'Prep Friday delivery', tag: 'Ops', time: '14:00', done: false },
{ t: 'Review this week’s leads', tag: 'Work', time: '16:00', done: false },
]);
const [habits, setHabits] = useState([
{ t: 'Gym', on: true }, { t: 'Deep work', on: false }, { t: 'No phone AM', on: false },
]);
const done = tasks.filter(t => t.done).length;
const days = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
return (
Good morning.
Thursday, 12 June
{days.map((d, i) => (
{d}
))}
Today’s tasks
{done}/{tasks.length} done
{tasks.map((t, i) => (
setTasks(ts => ts.map((x, j) => j === i ? { ...x, done: !x.done } : x))}>
{t.done &&
{t.t}
{t.tag}
{t.time}
))}
Daily habits
{habits.map((h, i) => (
setHabits(hs => hs.map((x, j) => j === i ? { ...x, on: !x.on } : x))}>
{h.on ? '✓ ' : ''}{h.t}
))}
);
}
// ---------- Stash — drop files in, it sorts the library ----------
function StashDemo() {
const FILES = [
{ n: 'IMG_2381.png', f: 'Images' },
{ n: 'invoice-0042.pdf', f: 'Documents' },
{ n: 'logo_final.svg', f: 'Design' },
{ n: 'Q2-report.xlsx', f: 'Sheets' },
{ n: 'promo-clip.mp4', f: 'Video' },
{ n: 'meeting-notes.txt', f: 'Documents' },
];
const FOLDERS = ['Images', 'Documents', 'Design', 'Sheets', 'Video'];
const [sorted, setSorted] = useState(false);
const count = (f) => sorted ? FILES.filter(x => x.f === f).length : 0;
return (
Loose files
{FILES.map((file, i) => (
{file.n}
))}
Library
{FOLDERS.map((f) => (
{count(f)}
))}
{!sorted ? (
setSorted(true)}>✦ Sort with AI
) : (
<>
setSorted(false)}>Reset
)}
Drop a folder in — it files everything for you.
);
}
// ---------- Waypoint — leads from first hello to paid ----------
function WaypointDemo() {
const COLS = ['New lead', 'Contacted', 'Quoted', 'Won'];
const SRC = { Website: 'var(--cyan)', Facebook: 'var(--violet)', Referral: 'var(--pink)' };
const [leads, setLeads] = useState([
{ n: 'Brewline Coffee', src: 'Website', col: 0, amt: 'R18k' },
{ n: 'Mara Photography', src: 'Referral', col: 0, amt: 'R12k' },
{ n: 'Cape Plumbing', src: 'Facebook', col: 1, amt: 'R32k' },
{ n: 'Harbour Café', src: 'Website', col: 2, amt: 'R26k' },
]);
const advance = (idx) => setLeads(ls => ls.map((l, j) => j === idx ? { ...l, col: Math.min(l.col + 1, 3) } : l));
return (
Leads
Click a card to move it →
{COLS.map((c, ci) => (
{c} {leads.filter(l => l.col === ci).length}
{leads.map((l, li) => l.col === ci && (
advance(li)}>
{l.n}
{ci === 3
? {l.amt} }
))}
))}
A sign-up on your site or Facebook drops straight into “New lead”.
);
}
// ---------- Trifusion — clients & installers, no middle-man ----------
function TrifusionDemo() {
const [jobs, setJobs] = useState([
{ id: 'JOB-104', loc: 'Kempton Park', who: 'Korridor', ok: false },
{ id: 'JOB-105', loc: 'Sandton CBD', who: 'Brigade', ok: false },
{ id: 'JOB-106', loc: 'Pretoria East', who: 'Vortex', ok: true },
]);
const pending = jobs.filter(j => !j.ok).length;
const active = 4 + jobs.filter(j => j.ok).length;
const accept = (i) => setJobs(js => js.map((j, k) => k === i ? { ...j, ok: true } : j));
const stats = [['24', 'Total jobs'], [String(active), 'Active'], [String(pending), 'Pending'], ['15', 'Completed']];
return (
{stats.map(([v, l], i) => (
))}
Needs attention
{jobs.map((j, i) => (
{j.id}
{j.loc} · {j.who} accept(i)}>Accept job }
))}
Powered by WebAnchor
);
}
Object.assign(window, { DemoWin, LifeOSDemo, StashDemo, WaypointDemo, TrifusionDemo });