214 lines
16 KiB
HTML
214 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Waggle · Platform</title>
|
|
<script>document.documentElement.classList.add('js');</script>
|
|
<link rel="stylesheet" href="../styles/waggle.css">
|
|
<style>
|
|
body { height:100vh; overflow:hidden; display:flex; flex-direction:column; }
|
|
.controls { flex:none; display:flex; align-items:center; gap:14px; padding:11px 20px; border-bottom:1px solid var(--line-soft); background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px); z-index:30; }
|
|
.controls .lab { font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); }
|
|
.seg { display:inline-flex; padding:3px; gap:3px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line-soft); }
|
|
.seg button { font-family:var(--sans); font-size:12px; font-weight:600; cursor:pointer; border:0; background:transparent; color:var(--text-muted); padding:6px 11px; border-radius:7px; transition:.14s; white-space:nowrap; }
|
|
.seg button.on { background:var(--honey); color:#1a1407; }
|
|
.controls .vlabel { font-size:12.5px; color:var(--text-muted); } .controls .vlabel b { color:var(--text); font-weight:600; }
|
|
.controls .right { margin-left:auto; display:flex; align-items:center; gap:10px; }
|
|
.tbtn { width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--surface); color:var(--text-2); cursor:pointer; }
|
|
.tbtn:hover { border-color:var(--honey-line); color:var(--honey); }
|
|
.stage { flex:1; min-height:0; overflow:auto; position:relative; }
|
|
.stage .comb { position:absolute; inset:0; opacity:.4; pointer-events:none; }
|
|
.view { display:none; } .view.on { display:block; }
|
|
.wrap { max-width:920px; margin:0 auto; padding:30px 32px 60px; position:relative; }
|
|
.head { margin-bottom:24px; text-align:center; }
|
|
.head .eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--honey); margin-bottom:12px; }
|
|
.head h1 { font-size:28px; font-weight:650; letter-spacing:-0.02em; margin:0 0 10px; } .head h1 em { font-style:normal; color:var(--honey); }
|
|
.head p { font-size:15px; color:var(--text-muted); line-height:1.55; margin:0 auto; max-width:54ch; } .head p b { color:var(--text-2); }
|
|
|
|
/* desktop window mock */
|
|
.winwrap { max-width:760px; margin:0 auto; }
|
|
.ostabs { display:flex; gap:6px; justify-content:center; margin-bottom:16px; }
|
|
.ostab { font-size:12.5px; font-weight:600; padding:7px 15px; border-radius:9px; border:1px solid var(--line-soft); background:var(--surface); color:var(--text-muted); cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
|
|
.ostab.on { border-color:var(--honey-line); background:var(--honey-wash); color:var(--honey); }
|
|
.window { border-radius:12px; overflow:hidden; border:1px solid var(--line-strong); box-shadow:var(--shadow-lg); background:var(--bg-2); }
|
|
.titlebar { height:38px; display:flex; align-items:center; gap:8px; padding:0 14px; background:var(--surface); border-bottom:1px solid var(--line-soft); }
|
|
.titlebar.mac .lights { display:flex; gap:8px; } .titlebar .lights i { width:12px; height:12px; border-radius:999px; }
|
|
.titlebar .lights .r { background:#ec6a5e; } .titlebar .lights .y { background:#f4bf4f; } .titlebar .lights .g { background:#61c554; }
|
|
.titlebar .tt { flex:1; text-align:center; font-size:12px; color:var(--text-dim); font-family:var(--mono); }
|
|
.titlebar.win { flex-direction:row-reverse; }
|
|
.titlebar.win .lights { display:flex; gap:0; } .titlebar.win .lights i { width:30px; height:38px; border-radius:0; display:grid; place-items:center; color:var(--text-muted); font-size:12px; background:transparent; }
|
|
.titlebar.win .lights i.x:hover { background:var(--risk); color:#fff; }
|
|
.titlebar.mac .lights.winhide, .titlebar.win .lights.machide { display:none; }
|
|
.winbody { display:flex; height:300px; }
|
|
.wb-side { width:120px; flex:none; background:var(--bg-2); border-right:1px solid var(--line-soft); padding:14px 8px; }
|
|
.wb-side .wi { display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:8px; font-size:12px; color:var(--text-2); margin-bottom:2px; } .wb-side .wi.on { background:var(--honey-wash); color:var(--text); } .wb-side .wi .d { width:13px; height:13px; border-radius:4px; background:var(--surface-3); } .wb-side .wi.on .d { background:var(--honey); }
|
|
.wb-main { flex:1; padding:22px; background:var(--bg); }
|
|
.wb-main .g { font-family:var(--mono); font-size:10px; color:var(--honey); letter-spacing:.08em; }
|
|
.wb-main h3 { font-family:var(--sans); font-size:20px; font-weight:600; letter-spacing:-0.02em; margin:8px 0 14px; }
|
|
.wb-main .ln { height:9px; border-radius:5px; background:var(--surface-2); margin-bottom:9px; } .wb-main .ln.s { width:60%; }
|
|
|
|
.specs { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:22px; }
|
|
.spec { padding:16px; border-radius:var(--r); border:1px solid var(--line-soft); background:var(--surface); text-align:center; }
|
|
.spec .sv { font-size:16px; font-weight:700; letter-spacing:-0.01em; } .spec .sl { font-size:11px; color:var(--text-muted); margin-top:5px; }
|
|
|
|
/* boot */
|
|
.boot { min-height:440px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
|
|
.boot .mk { width:72px; height:80px; display:grid; place-items:center; font-weight:800; font-size:30px; color:#1a1407; background:linear-gradient(150deg,var(--honey-bright),var(--honey-deep)); box-shadow:var(--honey-glow); margin-bottom:24px; animation:pulse 2.2s ease-in-out infinite; }
|
|
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 1px rgba(233,165,44,.25), 0 8px 30px -10px rgba(233,165,44,.35);} 50%{ box-shadow:0 0 0 1px rgba(233,165,44,.5), 0 8px 50px -6px rgba(233,165,44,.6);} }
|
|
.boot h1 { font-size:24px; font-weight:600; letter-spacing:-0.02em; margin:0 0 8px; white-space:nowrap; }
|
|
.boot .sub { font-family:var(--mono); font-size:12px; color:var(--text-dim); margin-bottom:26px; }
|
|
.bootlist { display:grid; gap:8px; width:300px; text-align:left; }
|
|
.bl { display:flex; align-items:center; gap:11px; font-size:13px; color:var(--text-2); }
|
|
.bl .c { width:16px; height:16px; flex:none; } .bl .c svg { width:16px; height:16px; stroke:var(--healthy); fill:none; stroke-width:2.4; }
|
|
.bl .spin { width:13px; height:13px; border-radius:999px; border:2px solid var(--honey); border-top-color:transparent; animation:spin .7s linear infinite; }
|
|
@keyframes spin { to { transform:rotate(360deg); } }
|
|
.bl.pending { color:var(--text-dim); }
|
|
|
|
/* roadmap */
|
|
.channels { display:grid; gap:12px; }
|
|
.ch { display:flex; align-items:center; gap:15px; padding:18px 20px; border-radius:var(--r-lg); border:1px solid var(--line-soft); background:var(--surface); }
|
|
.ch.now { border-color:var(--honey-line); }
|
|
.ch .ci { width:42px; height:46px; flex:none; display:grid; place-items:center; }
|
|
.ch .ci svg { width:22px; height:22px; stroke:var(--honey); fill:none; stroke-width:1.7; }
|
|
.ch .ct { flex:1; } .ch .ct b { font-size:15.5px; font-weight:650; } .ch .ct p { margin:3px 0 0; font-size:13px; color:var(--text-muted); }
|
|
.ch .platforms { display:flex; gap:6px; margin-top:9px; } .ch .platforms span { font-family:var(--mono); font-size:10.5px; color:var(--text-dim); padding:3px 8px; border-radius:6px; border:1px solid var(--line-soft); }
|
|
.ch .status { font-size:11.5px; font-weight:650; padding:6px 13px; border-radius:999px; white-space:nowrap; }
|
|
.ch .status.now { color:var(--healthy); background:var(--healthy-wash); }
|
|
.ch .status.next { color:var(--attention); background:var(--honey-wash); }
|
|
.ch .status.beta { color:var(--work); background:var(--work-wash); }
|
|
|
|
/* 404 */
|
|
.nf { min-height:420px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
|
|
.nf .big { font-family:var(--sans); font-size:88px; font-weight:750; letter-spacing:-0.04em; color:var(--honey); line-height:1; }
|
|
.nf h1 { font-size:24px; font-weight:600; margin:12px 0 8px; }
|
|
.nf p { font-size:14.5px; color:var(--text-muted); margin:0 0 24px; max-width:40ch; }
|
|
.nf .acts { display:flex; gap:10px; } .nf .acts a { padding:11px 20px; border-radius:11px; font-size:14px; font-weight:650; text-decoration:none; cursor:pointer; } .nf .acts .go { background:var(--honey); color:#1a1407; } .nf .acts .ghost { background:var(--surface); color:var(--text-2); border:1px solid var(--line-strong); }
|
|
|
|
@media (max-width:820px){ .specs { grid-template-columns:1fr 1fr; } .winbody { height:auto; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="controls">
|
|
<span class="lab">Platform & roadmap</span>
|
|
<div class="seg" id="seg">
|
|
<button class="on" data-v="desktop">Desktop (now)</button>
|
|
<button data-v="boot">Boot</button>
|
|
<button data-v="roadmap">Coming next</button>
|
|
<button data-v="nf">404</button>
|
|
</div>
|
|
<div class="right"><button class="tbtn" id="tbtn" title="Toggle theme">☾</button></div>
|
|
</div>
|
|
|
|
<div class="stage">
|
|
<div class="comb"></div>
|
|
|
|
<!-- DESKTOP -->
|
|
<div class="view on wrap" data-view="desktop">
|
|
<div class="head">
|
|
<div class="eyebrow">Ships now · Tauri</div>
|
|
<h1>A real <em>desktop app.</em></h1>
|
|
<p>Waggle ships as a native app for <b>Windows & macOS</b> — built on Tauri, so it's tiny, fast, and truly local. Your hive lives on your disk; the app just opens a window onto it.</p>
|
|
</div>
|
|
<div class="winwrap">
|
|
<div class="ostabs" id="ostabs"><span class="ostab on" data-os="mac">macOS</span><span class="ostab" data-os="win">Windows</span></div>
|
|
<div class="window">
|
|
<div class="titlebar mac" id="titlebar">
|
|
<div class="lights machide"><i class="r"></i><i class="y"></i><i class="g"></i></div>
|
|
<div class="lights winhide"><i>―</i><i>▢</i><i class="x">✕</i></div>
|
|
<div class="tt">Waggle</div>
|
|
</div>
|
|
<div class="winbody">
|
|
<div class="wb-side"><div class="wi on"><span class="d"></span>Home</div><div class="wi"><span class="d"></span>Chat</div><div class="wi"><span class="d"></span>Memory</div><div class="wi"><span class="d"></span>Agents</div><div class="wi"><span class="d"></span>Library</div></div>
|
|
<div class="wb-main"><div class="g">FRIDAY · 8:42</div><h3>Good morning, Mara.</h3><div class="ln"></div><div class="ln"></div><div class="ln s"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="specs">
|
|
<div class="spec"><div class="sv">~12 MB</div><div class="sl">Install size</div></div>
|
|
<div class="spec"><div class="sv">Local</div><div class="sl">Data on your disk</div></div>
|
|
<div class="spec"><div class="sv">Auto-update</div><div class="sl">Signed & notarized</div></div>
|
|
<div class="spec"><div class="sv">Win · Mac</div><div class="sl">Linux soon</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BOOT -->
|
|
<div class="view wrap" data-view="boot">
|
|
<div class="boot">
|
|
<div class="mk hex">W</div>
|
|
<h1>Warming the hive…</h1>
|
|
<div class="sub">waggle · v1.0 · local</div>
|
|
<div class="bootlist">
|
|
<div class="bl"><span class="c"><svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></span>Memory engine ready · 581 memories</div>
|
|
<div class="bl"><span class="c"><svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg></span>Local model online · Qwen 2.5</div>
|
|
<div class="bl"><span class="spin"></span>Loading workspaces… 8 found</div>
|
|
<div class="bl pending"><span class="c"></span>Restoring your last session</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ROADMAP -->
|
|
<div class="view wrap" data-view="roadmap">
|
|
<div class="head">
|
|
<div class="eyebrow">Where Waggle goes</div>
|
|
<h1>One hive, <em>everywhere you work.</em></h1>
|
|
<p>Your memory is the constant; the surfaces multiply. Desktop today — your phone and your messaging apps next.</p>
|
|
</div>
|
|
<div class="channels">
|
|
<div class="ch now">
|
|
<div class="ci hex" style="background:var(--honey-wash)"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M3 9h18M8 21h8"/></svg></div>
|
|
<div class="ct"><b>Desktop app</b><p>The full hive — native, local, fast.</p><div class="platforms"><span>macOS</span><span>Windows</span><span>Linux soon</span></div></div>
|
|
<span class="status now">● Available now</span>
|
|
</div>
|
|
<div class="ch">
|
|
<div class="ci hex" style="background:var(--work-wash)"><svg viewBox="0 0 24 24"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7M14 3l6 6M14 3v6h6M9 13h2M9 17h6"/></svg></div>
|
|
<div class="ct"><b>Browser extension</b><p>Capture context & recall memory anywhere on the web.</p><div class="platforms"><span>Chrome</span><span>Edge</span><span>Firefox</span></div></div>
|
|
<span class="status beta">◐ In beta</span>
|
|
</div>
|
|
<div class="ch">
|
|
<div class="ci hex" style="background:var(--honey-wash)"><svg viewBox="0 0 24 24"><path d="M21 11.5a8.4 8.4 0 0 1-9 8.4 8.6 8.6 0 0 1-3.8-.9L3 20l1.1-4.1A8.4 8.4 0 1 1 21 11.5z"/></svg></div>
|
|
<div class="ct"><b>Messaging</b><p>Talk to your hive from where you already chat — same memory, same agents.</p><div class="platforms"><span>WhatsApp</span><span>Telegram</span><span>iMessage</span></div></div>
|
|
<span class="status next">Coming next</span>
|
|
</div>
|
|
<div class="ch">
|
|
<div class="ci hex" style="background:var(--intel-wash)"><svg viewBox="0 0 24 24"><rect x="7" y="3" width="10" height="18" rx="2"/><path d="M11 18h2"/></svg></div>
|
|
<div class="ct"><b>Mobile</b><p>Your morning briefing and quick capture, in your pocket.</p><div class="platforms"><span>iOS</span><span>Android</span></div></div>
|
|
<span class="status next">Coming next</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 404 -->
|
|
<div class="view wrap" data-view="nf">
|
|
<div class="nf">
|
|
<div class="big">404</div>
|
|
<h1>This cell of the hive is empty.</h1>
|
|
<p>The page you're after doesn't exist — but your memory and workspaces are right where you left them.</p>
|
|
<div class="acts"><a class="go" data-go="home">← Back to Home</a><a class="ghost">Search with ⌘K</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const root = document.documentElement, tbtn = document.getElementById('tbtn');
|
|
function setTheme(t){ root.setAttribute('data-theme', t); tbtn.textContent = t==='dark'?'☾':'☀'; try{localStorage.setItem('waggle-concept-theme',t);}catch(e){} }
|
|
setTheme((()=>{ try{ return localStorage.getItem('waggle-concept-theme')||'dark'; }catch(e){ return 'dark'; } })());
|
|
tbtn.onclick = () => setTheme(root.getAttribute('data-theme')==='dark'?'light':'dark');
|
|
window.addEventListener('message', e => { if(e.data && e.data.theme) setTheme(e.data.theme); });
|
|
window.addEventListener('storage', e => { if(e.key==='waggle-concept-theme' && e.newValue) setTheme(e.newValue); });
|
|
|
|
const seg = document.getElementById('seg');
|
|
seg.addEventListener('click', e=>{ const b=e.target.closest('button'); if(!b) return; [...seg.children].forEach(x=>x.classList.toggle('on',x===b)); document.querySelectorAll('.view').forEach(v=>v.classList.toggle('on', v.dataset.view===b.dataset.v)); document.querySelector('.stage').scrollTop=0; });
|
|
|
|
// os toggle
|
|
document.getElementById('ostabs').addEventListener('click', e=>{
|
|
const t=e.target.closest('.ostab'); if(!t) return;
|
|
document.querySelectorAll('.ostab').forEach(x=>x.classList.toggle('on',x===t));
|
|
const tb=document.getElementById('titlebar'); tb.className = 'titlebar '+t.dataset.os;
|
|
});
|
|
document.addEventListener('click', e=>{ const a=e.target.closest('[data-go=home]'); if(a){ try{ location.href='../Waggle Reimagined.html#home'; }catch(_){} } });
|
|
</script>
|
|
</body>
|
|
</html>
|