Automerge backed Markdown editor for the Atmosphere
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="apple-mobile-web-app-title" content="Reams" /> <meta name="theme-color" content="#1e1e1e" /> <meta name="description" content="Mobile-first markdown editor backed by Automerge CRDTs" /> <link rel="manifest" href="/manifest.json" /> <link rel="icon" type="image/svg+xml" sizes="any" href="/icon.svg" /> <link rel="apple-touch-icon" href="/icon-192.png" /> <title>Reams</title> <style> body { margin: 0; background: #1e1e1e; color: #e0e0e0; font-family: system-ui, sans-serif; } .reams-boot { position: fixed; inset: 0; z-index: 1; background: #1e1e1e; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.75rem; padding: 2rem; } .reams-boot__spinner { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 28px; height: 28px; border: 2px solid #404040; border-top-color: #4a9eff; border-radius: 50%; animation: reams-spin 0.8s linear infinite; } @keyframes reams-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .reams-boot__spinner { animation-duration: 1.6s; } } .reams-boot__copy { position: absolute; top: calc(50% + 38px); left: 2rem; right: 2rem; display: grid; gap: 0.5rem; } .reams-boot[role="alert"] .reams-boot__copy { position: static; } .reams-boot h1 { font-size: 1.1rem; margin: 0; } .reams-boot p { font-size: 0.875rem; color: #b0b0b0; margin: 0; } .reams-boot[role="alert"] p { max-width: 38rem; overflow-wrap: anywhere; } .reams-boot button { color: #4a9eff; background: #2d2d2d; border: 1px solid #404040; border-radius: 2px; padding: 0.5rem; } </style> </head> <body> <div id="root"><main class="reams-boot" role="status" aria-live="polite"><span class="reams-boot__spinner" aria-hidden="true"></span><div class="reams-boot__copy"><h1>Reams</h1><p data-boot-stage>Loading application…</p></div></main></div> <script> addEventListener('error', (event) => { if (!(event.target instanceof HTMLScriptElement) || !event.target.type || event.target.type !== 'module') return; const root = document.getElementById('root'); const boot = root?.querySelector('.reams-boot'); if (boot && !boot.querySelector('button')) { boot.setAttribute('role', 'alert'); boot.removeAttribute('aria-live'); boot.querySelector('.reams-boot__spinner')?.remove(); boot.querySelector('h1').textContent = 'Reams could not load'; boot.querySelector('p').textContent = 'Application files could not load. Your local notes have not been cleared.'; const retry = document.createElement('button'); retry.type = 'button'; retry.textContent = 'Try again'; retry.addEventListener('click', () => location.reload()); boot.append(retry); } }, true); </script> <script type="module" src="/src/entries/__REAMS_EDITION__.tsx"></script> </body></html>