Guia e mais coisas
Traduzido do inglês·
69
144
Design avançado de bio do JanitorAI · Um guia gratuito da comunidade por Melancholux
Oi, queridos. É a Mel. 🤍
Antes de compartilhar o guia de hoje, devo um pedido de desculpas pela forma como lidei com os acontecimentos da semana passada. Não dei o tipo de resposta que as pessoas poderiam razoavelmente esperar de mim. Fui defensiva e imatura, e reconheço que comportamentos semelhantes já aconteceram em desentendimentos passados com outras comunidades do Janitor.
Não pretendo remover o conteúdo em questão. Ao mesmo tempo, não pretendo repetir esse tipo específico de conteúdo no futuro se ele causar desconforto. Gostar ou não gostar de um tema é uma coisa; atacar pessoas de verdade por causa disso é outra. Mesmo quando alguém está claramente tentando nos provocar, podemos escolher não responder. Não sabemos o quão profundamente nossas palavras podem afetar outra pessoa, e um pouco de consideração não nos custa nada.
Sinto muito pelo transtorno que causei e por demorar tanto para postar isto. Ando excepcionalmente exausta ultimamente e dormi boa parte do dia. Não é uma desculpa, apenas uma explicação para o meu silêncio. Obrigada pela paciência.
Agora algo que eu realmente quero compartilhar: tudo o que aprendi experimentando bios avançadas do Janitor. Quero que mais criadores possam fazer coisas de que gostam sem monopolizar as técnicas. Bem-vindos ao lar. 🌷
Em vez de texto simples, você pode combinar HTML com CSS inline para criar uma interface em miniatura: celulares falsos, balões de mensagem, arquivos de cena inicial, galerias de imagens, players de música e até apps falsos. Este guia inclui uma demonstração visível e seu código editável logo abaixo. Você não precisa baixar nada para aprender com ele.
style="..." em cada elemento; um <style> ou <script> global pode ser removido. O contorno via API descrito abaixo é não oficial e pode parar de funcionar após mudanças na plataforma.Um novo guia docinho chegou!
<p style="text-align:center;">Um novo guia docinho chegou!</p> <p style="text-align:center;"></p> <p style="text-align:center;"><img src="https://ella.janitorai.com/media-approved/dy0zWX7NoKK4GHuBJDD5O.webp" style="display:block;max-width:100%;height:auto;margin:0 auto;"></p>
do outro lado do corredor
Vi os mais jovens fazendo algo chamado pose Amen...
<p style="background:white;border-radius:15px;padding:10px;">Por favor, não ria. Já me arrependo de ter mandado isto.</p>
</div>
<div style="width:268px;max-width:100%;margin:auto;background:#171416;border-radius:42px;padding:9px;">
<div style="border-radius:34px;overflow:hidden;background:#f9f1ea;font-family:Arial,sans-serif;">
<div style="padding:12px;text-align:center;background:white;color:#41313a;"><b>Clara 🌸</b><br><small>do outro lado do corredor</small></div>
<div style="padding:12px;color:#5d4b52;">
<p style="background:white;border-radius:15px;padding:10px;">Vi os mais jovens fazendo algo chamado pose Amen...</p>
<img src="https://ella.janitorai.com/media-approved/tFa0-Leebkg_pPplQvxBj.webp" style="max-width:100%;height:auto;border-radius:12px;">
<p style="background:white;border-radius:15px;padding:10px;">Por favor, não ria. Já me arrependo de ter mandado isto.</p>
</div>
</div>
</div>
01 · Um Buquê para a Nova Vizinha
Ela só queria te dar boas-vindas...
ABRIR CENA ↓
<details style="border:1px solid #d3a8b8;border-radius:15px;overflow:hidden;">
<summary style="cursor:pointer;list-style:none;display:block;background:linear-gradient(transparent,rgba(38,24,35,.88)),url('https://ella.janitorai.com/media-approved/ovh2DAZQGTdr78LhhS9Gw.webp');background-size:cover;background-position:center;padding:42% 18px 20px;text-align:center;color:white;">
<b>01 · Um Buquê para a Nova Vizinha</b><br>
<i>Ela só queria te dar boas-vindas...</i><br>
<small>ABRIR CENA ↓</small>
</summary>
<div style="padding:17px;background:#fff8f1;color:#73505c;">Clara bate à porta com um pequeno buquê, de repente bem mais tímida do que esperava.</div>
</details>✦ ARQUIVO IV — A Porta Trancada
Uma toalha. Um corredor muito infeliz.
ABRIR REGISTRO ↓
<details style="border:1px solid #bca47b;background:#f4e7c9;border-radius:13px;color:#4d3926;"> <summary style="cursor:pointer;list-style:none;padding:18px;font-family:Georgia,serif;">✦ ARQUIVO IV — A Porta Trancada<br><i>Uma toalha. Um corredor muito infeliz.</i><br><small>ABRIR REGISTRO ↓</small></summary> <div style="padding:16px;border-top:1px dashed #c5ad89;">A cena não tem imagem, então o próprio papel se torna o tema visual.</div> </details>
Gravação fictícia · 184 Dias Depois
OPERADOR: 911, qual é a sua emergência?
ERIKA: Por favor... ligue para {{user}}.
<div style="background:#111b24;border:1px solid #567080;border-radius:14px;padding:16px;color:#e0eaf0;">
<b>☎ ARQUIVO DE DESPACHO 911</b>
<p>Gravação fictícia · 184 Dias Depois</p>
<audio controls preload="metadata" style="width:100%;">
<source src="https://files.catbox.moe/7u6jbn.mp3" type="audio/mpeg">
</audio>
<p><b>OPERADOR:</b> 911, qual é a sua emergência?</p>
<p><b>ERIKA:</b> Por favor... ligue para {{user}}.</p>
</div><div style="display:flex;overflow-x:auto;gap:12px;padding:10px;"> <img src="https://ella.janitorai.com/media-approved/dy0zWX7NoKK4GHuBJDD5O.webp" style="display:block;flex:0 0 65%;max-width:250px;height:auto;border-radius:12px;"> <img src="https://ella.janitorai.com/media-approved/eEY7icr8-9ZhuhcKNd3KC.webp" style="display:block;flex:0 0 65%;max-width:250px;height:auto;border-radius:12px;"> </div>
ENTRE NA COMUNIDADE ↗
<a href="https://discord.gg/Uvz7TG5ceJ" style="display:block;text-decoration:none;background:linear-gradient(transparent,rgba(21,17,28,.90)),url('https://ella.janitorai.com/media-approved/8OpbhA9D9TkCTKK-W31wG.webp');background-size:cover;background-position:center;padding:31% 12px 20px;text-align:center;border-radius:14px;color:white;"><b>O COVIL DA REGINA</b><br><small>ENTRE NA COMUNIDADE ↗</small></a>Alguns criadores usam efeitos animados de perfil, abas CSS, transições de hover e galerias roláveis. Este exemplo mostra um adesivo flutuante suave com suporte a movimento reduzido. Coloque este CSS na área de CSS/HTML do perfil em vez de assumir que funciona dentro de uma bio de personagem.
<style>
/* PARA CSS DE PERFIL, NÃO PARA UMA BIO DE PERSONAGEM */
@keyframes gentleFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
.my-profile-sticker { display:inline-block;animation:gentleFloat 3s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) { .my-profile-sticker { animation:none; } }
</style>
<span class="my-profile-sticker">🌸 Bem-vindo ao lar!</span>
1. Crie ou abra um personagem que seja seu, de preferência um bot de teste não publicado. 2. Faça backup da descrição atual. 3. Monte sua página HTML. 4. Encontre o UUID na URL do personagem. 5. Obtenha seu próprio token de acesso localmente. 6. Use um script PATCH que inclua a descrição HTML comprimida. 7. Recarregue e inspecione a página pública, no desktop e no celular.
Faça login no Janitor no desktop, abra o DevTools → Console, execute isto localmente e mantenha o valor copiado em sigilo.
(async () => {
const getCookie = n => {
const p = ("; " + document.cookie).split("; " + n + "=");
return p.length === 2 ? p.pop().split(";").shift() : null;
};
const m = document.cookie.match(/(?:^|;\s*)(sb-[^=]+-auth-token)(?:\.\d+)?=/);
const base = m ? m[1] : "sb-auth-auth-token";
let raw = getCookie(base);
if (!raw) {
const chunks = [];
for (let i = 0; ; i++) {
const c = getCookie(base + "." + i);
if (c === null) break;
chunks.push(c);
}
raw = chunks.join("");
}
if (!raw) throw new Error("No Janitor session found.");
let json;
if (raw.startsWith("base64-")) {
let b64 = raw.slice(7).replace(/-/g, "+").replace(/_/g, "/");
while (b64.length % 4) b64 += "=";
json = new TextDecoder().decode(Uint8Array.from(atob(b64), c => c.charCodeAt(0)));
} else { json = decodeURIComponent(raw); }
const token = JSON.parse(json)?.access_token;
if (!token) throw new Error("No access_token found.");
copy(token);
console.log("✅ Your own access token was copied locally.");
})();Este é o esqueleto da requisição de API que usamos. Substitua o UUID do personagem, seu token privado e o payload HTML comprimido. O payload é a representação gzip → base64 do seu HTML completo, geralmente gerado localmente ou por uma ferramenta de código.
(async()=>{
const CHARACTER_ID="YOUR_CHARACTER_UUID";
const ACCESS_TOKEN="YOUR_PRIVATE_ACCESS_TOKEN";
const bin=Uint8Array.from(atob("YOUR_GZIP_BASE64_HTML"),c=>c.charCodeAt(0));
const ds=new DecompressionStream("gzip");
const description=await new Response(new Blob([bin]).stream().pipeThrough(ds)).text();
const r=await fetch("https://janitorai.com/mb/characters/"+CHARACTER_ID,{
method:"PATCH",credentials:"include",
headers:{"content-type":"application/json","authorization":"Bearer "+ACCESS_TOKEN},
body:JSON.stringify({description})
});
console.log("HTTP STATUS:",r.status);console.log("RESPONSE:",await r.text());
})();Quer aprender como um card, uma caixa de texto ou um layout foi construído? Em uma página pública de personagem, abra o DevTools e execute o seletor. Passe o mouse sobre um elemento visível, clique para copiar seu outerHTML, ou pressione Escape para cancelar. Isso ajuda a estudar a estrutura; estilos computados, dados privados e comportamentos gerados por script não são incluídos.
(() => {
let current = null;
const mark = e => {
if (current) current.style.outline = "";
current = e.target;
current.style.outline = "3px solid #ff8db1";
};
const stop = () => {
document.removeEventListener("mouseover", mark, true);
document.removeEventListener("click", pick, true);
document.removeEventListener("keydown", key, true);
if (current) current.style.outline = "";
};
const key = e => { if (e.key === "Escape") { stop(); console.log("Picker cancelled."); } };
const pick = async e => {
e.preventDefault(); e.stopImmediatePropagation();
const element = e.target;
stop();
const html = element.outerHTML;
try { await navigator.clipboard.writeText(html); console.log("HTML copied."); }
catch { copy(html); console.log("HTML copied using DevTools."); }
};
document.addEventListener("mouseover", mark, true);
document.addEventListener("click", pick, true);
document.addEventListener("keydown", key, true);
console.log("Hover and click an element to copy its rendered HTML. ESC cancels.");
})();
✓ Prefira <div>, <span>, <img>, <a>, <details> e <summary>.
✓ Mantenha os estilos inline para descrições de personagem.
✓ Evite larguras fixas enormes; verifique a legibilidade no celular.
✓ Separe fotos verticais e horizontais.
✓ Dê a cada bot sua própria linguagem visual em vez de recolorir um único template.
✓ Use links de verdade, não botões falsos.
✓ Use <audio controls> e uma transcrição acessível quando possível.
✓ Faça backup da bio anterior antes de experimentar.
✓ Preserve placeholders como {{user}}.
✓ Nunca coloque seu token de acesso ativo dentro de uma descrição pública.
Criado 21 de out.
Atualizado 21 de out.
Publicado 21 de out.
- Sem limites
- #guide
- #announcement
- #reginaden