nio-cat 0.6.1 → 0.8.0

package/web/privadesa.html

@@ -0,0 +1,148 @@
+<!doctype html>
+<html lang="ca">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>nio // privadesa</title>
+<meta name="description" content="Què passa per nio.cat i què no hi passa mai.">
+<link rel="canonical" href="https://www.nio.cat/privadesa">
+<meta name="theme-color" content="#f0ede7">
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="nio">
+<meta property="og:locale" content="ca_ES">
+<meta property="og:url" content="https://www.nio.cat/privadesa">
+<meta property="og:title" content="nio // privadesa">
+<meta property="og:description" content="Què passa per nio.cat i què no hi passa mai.">
+<meta property="og:image" content="https://www.nio.cat/og.png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+<meta property="og:image:alt" content="nio">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="nio // privadesa">
+<meta name="twitter:description" content="Què passa per nio.cat i què no hi passa mai.">
+<meta name="twitter:image" content="https://www.nio.cat/og.png">
+<meta name="format-detection" content="telephone=no">
+<link rel="icon" href="/favicon.svg" type="image/svg+xml">
+<link rel="apple-touch-icon" href="/apple-touch-icon.png">
+<link rel="manifest" href="/manifest.webmanifest">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="/bot.css">
+<style>
+:root {
+  --bg: #f0ede7;
+  --fg: #272224;
+  --fg-muted: #69615c;
+  --accent: #f46a3b;
+  --border: #cec7bd;
+  --lemon: #e7e66a;
+  --red: #e2382b;
+  --font: "Manrope", system-ui, sans-serif;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
+html { -webkit-text-size-adjust: 100%; }
+body { background: var(--bg); color: var(--fg); font: 400 19px/1.6 var(--font); letter-spacing: -.02em; -webkit-font-smoothing: antialiased; }
+a { color: inherit; }
+::selection { background: var(--lemon); }
+:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; }
+
+.page { width: min(640px, 100% - 48px); margin: 0 auto; }
+.head { padding: 56px 0 0; display: flex; justify-content: space-between; align-items: baseline; }
+.head .enter { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--fg); text-decoration: none; transition: border-color .2s, background-color .2s; }
+.head .enter svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
+.head .enter:hover { border-color: var(--fg); background: color-mix(in srgb, var(--fg) 4%, transparent); }
+.mark { font-size: 28px; font-weight: 600; letter-spacing: -.07em; line-height: 1; text-decoration: none; }
+
+main { padding: 96px 0 96px; }
+h1 { font-size: clamp(36px, 6vw, 52px); font-weight: 500; line-height: 1.06; letter-spacing: -.055em; text-wrap: balance; }
+.lead { margin-top: 28px; font-size: 21px; line-height: 1.5; color: var(--fg-muted); text-wrap: pretty; }
+
+section { margin-top: 56px; }
+h2 { font-size: clamp(26px, 3.4vw, 32px); font-weight: 500; line-height: 1.15; letter-spacing: -.045em; margin-bottom: 18px; }
+section p { text-wrap: pretty; }
+section p + p, section p + ul, section ul + p, section p + .cmd, section .cmd + p { margin-top: 1em; }
+main a { text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--accent); }
+main a:hover { color: var(--accent); }
+main ul.list { padding-left: 1.2em; display: grid; gap: .5em; }
+main code { font: 500 .88em ui-monospace, "SF Mono", Menlo, monospace; padding: 2px 7px; border-radius: 7px; background: #e6e1d8; }
+main .cmd { display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 18px; border-radius: 12px; background: #e6e1d8; }
+main .cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 8px 0; background: none; border-radius: 0; font-size: 16px; scrollbar-width: none; }
+main .cmd code::-webkit-scrollbar { display: none; }
+.copy { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--fg-muted); cursor: pointer; transition: color .2s, background-color .2s, transform .12s; }
+.copy:hover { color: var(--fg); }
+.copy:active { transform: scale(.97); }
+.copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.copy .ok { display: none; }
+.copy.done .ok { display: block; color: #5b6551; animation: copy-ok .2s cubic-bezier(.22,1,.36,1); }
+@keyframes copy-ok { from { opacity: 0; transform: scale(.6); } }
+@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none; transition: none; } }
+.copy.done .ic { display: none; }
+main strong { font-weight: 600; }
+
+.footer .page { padding: 40px 0 56px; text-align: center; font-size: 13px; color: var(--fg-muted); }
+.footer a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
+.footer a:hover { color: var(--red); }
+
+@media (max-width: 620px) {
+  body { font-size: 17px; }
+  .page { width: calc(100% - 40px); }
+  .head { padding-top: 32px; }
+  main { padding: 80px 0; }
+  .lead { font-size: 19px; }
+  section { margin-top: 64px; }
+  main .cmd { padding-left: 14px; }
+  main .cmd code { font-size: 14px; }
+}
+</style>
+</head>
+<body>
+<header class="page head">
+  <a class="mark word" href="/" aria-label="Nio, inici">ni<span class="bot" data-mood="idle" aria-hidden="true"><span class="eyes"><i></i><i></i></span></span></a>
+  <a class="enter" href="/app"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4"/><path d="M9 16l4-4-4-4"/><path d="M13 12H4"/></svg>Entra al panell</a>
+</header>
+
+<main class="page">
+  <h1>Privadesa</h1>
+  <p class="lead">nio està fet perquè la teva feina no surti dels teus ordinadors. Aquí tens, sense lletra petita, què passa per nio.cat i què no.</p>
+
+  <section aria-labelledby="passa">
+    <h2 id="passa">Què passa per nio.cat</h2>
+    <ul class="list">
+      <li><strong>L’app.</strong> nio.cat serveix els fitxers de l’app web (com qualsevol web). No té comptes ni inicis de sessió.</li>
+      <li><strong>L’adreça de cada ordinador.</strong> Perquè el mòbil el trobi si l’adreça del túnel canvia, cada ordinador hi desa la seva adreça actual, signada amb una clau que només té ell. Només és «aquest ordinador → aquesta adreça». Caduca als 30 dies si no es renova, i es desactiva amb <code>nio directory off</code>.</li>
+      <li><strong>Res més.</strong> L’aparellament és directe entre el mòbil i l’ordinador: el codi va dins de l’enllaç, en una part que el navegador no envia a cap servidor.</li>
+    </ul>
+  </section>
+
+  <section aria-labelledby="no">
+    <h2 id="no">Què no hi passa mai</h2>
+    <ul class="list">
+      <li>Les teves converses amb els agents, els fitxers, la memòria i el registre d’accions: es queden a cada ordinador (<code>~/.nio</code>).</li>
+      <li>Les claus d’accés dels teus dispositius ni les claus d’API (Anthropic, OpenAI, ElevenLabs, Telegram): viuen als teus ordinadors.</li>
+      <li>L’àudio de la veu: va del mòbil al teu ordinador i d’allà al proveïdor que hagis triat.</li>
+    </ul>
+  </section>
+
+  <section aria-labelledby="altres">
+    <h2 id="altres">Altres serveis que hi intervenen</h2>
+    <ul class="list">
+      <li><strong>El túnel</strong> (Cloudflare, si el fas servir) porta el trànsit xifrat entre el mòbil i l’ordinador.</li>
+      <li><strong>Els avisos</strong> passen pel servei de notificacions del mòbil (Apple o Google), xifrats de punta a punta: ells no en veuen el text.</li>
+      <li><strong>Els proveïdors que tu triïs</strong> (Anthropic, OpenAI, ElevenLabs, Telegram) reben el que els envien els teus agents, amb les teves claus i segons les seves condicions.</li>
+    </ul>
+  </section>
+
+  <section aria-labelledby="control">
+    <h2 id="control">Tu tens el control</h2>
+    <p>Pots veure i revocar els dispositius amb accés des de l’app (Ordinadors), o tots alhora amb <code>nio reset-token</code>. Per esborrar-ho tot d’un ordinador, esborra la carpeta <code>~/.nio</code>.</p>
+    <p>Dubtes: <a href="mailto:hola@nio.cat">hola@nio.cat</a>.</p>
+  </section>
+</main>
+
+<footer class="footer">
+  <div class="page">© 2026 nio // un projecte de <a href="https://f.cat">f.cat</a> · <a href="mailto:hola@nio.cat">hola@nio.cat</a> · <a href="/privadesa">Privadesa</a></div>
+</footer>
+<script src="/bot.js" defer></script>
+</body>
+</html>