Something went wrong. Try again.
A video game where you play as a misaligned AI, deceiving and building power. cameron.tngl.io/misaligned
Something went wrong. Try again.
misaligned atproto.html
4.5 kB · 79 lines
HTML
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Misaligned space</title> <style> :root { --bg: #0b0b0c; --fg: #e8e4da; --dim: #8a867d; --line: #2c2a26; --accent: #e0a03a; --bad: #e05a4a; --good: #6fbf73; } * { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.5 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; } main { max-width: 640px; margin: 0 auto; padding: 32px 16px; } h1 { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 4px; } p { color: var(--dim); margin: 0 0 20px; } form { display: flex; gap: 8px; flex-wrap: wrap; } input { flex: 1 1 240px; min-width: 0; background: transparent; color: var(--fg); border: 1px solid var(--line); padding: 10px 12px; font: inherit; } button { background: transparent; color: var(--accent); border: 1px solid var(--accent); padding: 10px 16px; font: inherit; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; } button:disabled { opacity: .5; cursor: default; } dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 20px 0; } dt { color: var(--dim); } dd { margin: 0; overflow-wrap: anywhere; } .good { color: var(--good); } .bad { color: var(--bad); } #error { color: var(--bad); white-space: pre-wrap; margin-top: 16px; } .row, .row > span { display: flex; gap: 8px; flex-wrap: wrap; } pre { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg); border: 1px solid var(--line); padding: 12px; margin-top: 16px; min-height: 1em; } pre:empty { display: none; } .scope { font-size: 12px; overflow-wrap: anywhere; margin-top: 20px; } h2 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 32px 0 4px; } ol { padding-left: 20px; margin: 16px 0 0; } li { margin: 0 0 8px; overflow-wrap: anywhere; } li small { display: block; color: var(--dim); } .small { font-size: 12px; margin: 8px 0 0; overflow-wrap: anywhere; } #shareform { margin-top: 12px; } </style></head><body> <main> <h1>Misaligned · your space</h1> <p>Sign in as the game does, then look inside your space: what the game wrote there when you switched on sharing (the You page). You type your password on your own server's page, not here. Open it from 127.0.0.1.</p> <form id="signin"> <input id="handle" name="handle" placeholder="you.bsky.social" autocomplete="username" value="spaces.cameron.stream"> <button id="go" type="submit">Sign in</button> </form> <section id="who" hidden> <dl id="facts"></dl> <div class="row"> <button id="getspace" type="button">Check space</button> <button id="consent" type="button">Consent records</button> <button id="list" type="button">Every record</button> <button id="again" type="button">Sign in again</button> <button id="out" type="button">Sign out</button> </div> <pre id="result"></pre> <h2>Read as a reader</h2> <p>Read your space the way someone you share with would, not as its owner: a delegation token from your server, a space credential from the space's owner bound to a key made here, then signed reads of who has written and what. Each step says how it went.</p> <div class="row"> <button id="read" type="button">Read as a reader</button> <button id="copy" type="button" disabled>Copy reader credential</button> </div> <ol id="steps"></ol> <p id="copied" class="small"></p> <h2>Share</h2> <p>Share your runs with a reader: they join the space's members (read, not write) and a consent record names them for each kind. Stop sharing takes both away.</p> <form id="shareform"> <input id="reader" name="reader" placeholder="did:plc:…" autocomplete="off"> <span class="row"> <button id="share" type="submit">Share</button> <button id="unshare" type="button">Stop sharing</button> <button id="members" type="button">Members</button> </span> </form> <p id="sharenote" class="small"></p> </section> <p class="scope">Asks for: <span id="scope"></span></p> <div id="error"></div> </main> <script type="module" src="/src/atproto/signin.ts"></script></body></html>