Leitfaden & mehr Zeug
Aus dem Englischen übersetzt·
69
144
Fortgeschrittenes JanitorAI-Bio-Design · Ein kostenloser Community-Leitfaden von Melancholux
Hallo, Lieblinge. Hier ist Mel. 🤍
Bevor ich den heutigen Leitfaden teile, schulde ich euch eine Entschuldigung dafür, wie ich mit den Ereignissen der letzten Woche umgegangen bin. Ich habe nicht so reagiert, wie man es vernünftigerweise von mir hätte erwarten können. Ich war defensiv und unreif, und ich erkenne, dass ähnliches Verhalten in der Vergangenheit auch bei Auseinandersetzungen mit anderen Janitor-Communities vorgekommen ist.
Ich habe nicht vor, die betreffenden Inhalte zu entfernen. Gleichzeitig beabsichtige ich nicht, diese Art von Inhalt in Zukunft zu wiederholen, wenn er Unbehagen verursacht. Ein Thema zu mögen oder nicht zu mögen ist eine Sache; wegen ihm auf echte Menschen loszugehen, eine andere. Selbst wenn jemand offensichtlich versucht, uns zu provozieren, können wir uns dafür entscheiden, nicht zu antworten. Wir wissen nicht, wie tief unsere Worte jemand anderen treffen könnten, und ein wenig Rücksicht kostet uns nichts.
Es tut mir leid für den Ärger, den ich verursacht habe, und dass ich so lange gebraucht habe, um das hier zu posten. Ich war in letzter Zeit ungewöhnlich erschöpft und habe einen Großteil des Tages verschlafen. Das ist keine Ausrede, nur eine Erklärung für meine Stille. Danke für eure Geduld.
Jetzt zu etwas, das ich wirklich teilen möchte: alles, was ich beim Experimentieren mit fortgeschrittenen Janitor-Bios gelernt habe. Ich möchte, dass mehr Creator Dinge machen können, die ihnen Freude bereiten, ohne die Techniken hinter einem Zaun zu verstecken. Willkommen zu Hause. 🌷
Statt reinem Text kannst du HTML mit Inline-CSS kombinieren, um eine Miniatur-Oberfläche zu schaffen: Fake-Telefone, Chat-Blasen, Eröffnungsszenen-Dateien, Bildergalerien, Musikplayer und sogar gefälschte Apps. Dieser Leitfaden enthält eine sichtbare Demonstration und den bearbeitbaren Code direkt darunter. Du musst nichts herunterladen, um daraus zu lernen.
style="..." an jedem Element; ein globales <style> oder <script> wird möglicherweise entfernt. Der unten beschriebene API-Workaround ist inoffiziell und funktioniert nach Plattformänderungen eventuell nicht mehr.Hier ist ein süßer neuer Leitfaden!
<p style="text-align:center;">Hier ist ein süßer neuer Leitfaden!</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>
gegenüber im Flur
Ich habe gesehen, wie die jüngeren Leute etwas gemacht haben, das sich Amen-Pose nennt...
<p style="background:white;border-radius:15px;padding:10px;">Bitte lach nicht. Ich bereue schon, dass ich das geschickt habe.</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>gegenüber im Flur</small></div>
<div style="padding:12px;color:#5d4b52;">
<p style="background:white;border-radius:15px;padding:10px;">Ich habe gesehen, wie die jüngeren Leute etwas gemacht haben, das sich Amen-Pose nennt...</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;">Bitte lach nicht. Ich bereue schon, dass ich das geschickt habe.</p>
</div>
</div>
</div>
01 · Ein Blumenstrauß für die neue Nachbarin
Sie wollte dich nur willkommen heißen...
SZENE ÖFFNEN ↓
<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 · Ein Blumenstrauß für die neue Nachbarin</b><br>
<i>Sie wollte dich nur willkommen heißen...</i><br>
<small>SZENE ÖFFNEN ↓</small>
</summary>
<div style="padding:17px;background:#fff8f1;color:#73505c;">Clara klopft mit einem kleinen Blumenstrauß und ist plötzlich viel schüchterner als erwartet.</div>
</details>✦ AKTE IV — Die verschlossene Tür
Ein Handtuch. Ein sehr unglücklicher Flur.
EINTRAG ÖFFNEN ↓
<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;">✦ AKTE IV — Die verschlossene Tür<br><i>Ein Handtuch. Ein sehr unglücklicher Flur.</i><br><small>EINTRAG ÖFFNEN ↓</small></summary> <div style="padding:16px;border-top:1px dashed #c5ad89;">Die Szene hat kein Bild, also wird das Papier selbst zum visuellen Thema.</div> </details>
Fiktive Aufnahme · 184 Tage später
LEITSTELLE: 911, was ist Ihr Notfall?
ERIKA: Bitte... ruf {{user}} an.
<div style="background:#111b24;border:1px solid #567080;border-radius:14px;padding:16px;color:#e0eaf0;">
<b>☎ 911-LEITSTELLENARCHIV</b>
<p>Fiktive Aufnahme · 184 Tage später</p>
<audio controls preload="metadata" style="width:100%;">
<source src="https://files.catbox.moe/7u6jbn.mp3" type="audio/mpeg">
</audio>
<p><b>LEITSTELLE:</b> 911, was ist Ihr Notfall?</p>
<p><b>ERIKA:</b> Bitte... ruf {{user}} an.</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>
TRITT DER COMMUNITY BEI ↗
<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>REGINAS HÖHLE</b><br><small>TRITT DER COMMUNITY BEI ↗</small></a>Einige Creator verwenden animierte Profileffekte, CSS-Tabs, Hover-Übergänge und scrollende Galerien. Dieses Beispiel zeigt einen sanft schwebenden Sticker mit Unterstützung für reduzierte Bewegung. Setze dieses CSS in den Profil-CSS/HTML-Bereich und gehe nicht davon aus, dass es innerhalb einer Charakter-Bio funktioniert.
<style>
/* FÜR PROFIL-CSS, NICHT FÜR EINE CHARAKTER-BIO */
@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">🌸 Willkommen zu Hause!</span>
1. Erstelle oder öffne einen Charakter, der dir gehört, vorzugsweise einen unveröffentlichten Test-Bot. 2. Sichere seine aktuelle Beschreibung. 3. Erstelle deine HTML-Seite. 4. Finde die UUID in der Charakter-URL. 5. Hole dir dein eigenes Zugriffstoken lokal. 6. Verwende ein PATCH-Skript, das die komprimierte HTML-Beschreibung enthält. 7. Lade die öffentliche Seite neu und prüfe sie auf Desktop und Mobil.
Melde dich auf dem Desktop bei Janitor an, öffne DevTools → Konsole, führe dies lokal aus und halte den kopierten Wert geheim.
(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("Keine Janitor-Sitzung gefunden.");
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("Kein access_token gefunden.");
copy(token);
console.log("✅ Dein eigenes Zugriffstoken wurde lokal kopiert.");
})();Dies ist die API-Anfrage-Hülle, die wir verwenden. Ersetze die Charakter-UUID, dein privates Token und die komprimierte HTML-Nutzlast. Die Nutzlast ist die gzip → base64-Darstellung deines vollständigen HTML, die normalerweise lokal oder von einem Code-Tool erzeugt wird.
(async()=>{
const CHARACTER_ID="DEINE_CHARAKTER_UUID";
const ACCESS_TOKEN="DEIN_PRIVATES_ZUGRIFFSTOKEN";
const bin=Uint8Array.from(atob("DEIN_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("ANTWORT:",await r.text());
})();Möchtest du lernen, wie eine Karte, ein Textfeld oder ein Layout gebaut wurde? Öffne auf einer öffentlichen Charakterseite die DevTools und führe den Picker aus. Fahre über ein sichtbares Element, klicke, um sein outerHTML zu kopieren, oder drücke Escape zum Abbrechen. Das hilft, die Struktur zu studieren; berechnete Stile, private Daten und skriptgeneriertes Verhalten sind nicht enthalten.
(() => {
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 abgebrochen."); } };
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 kopiert."); }
catch { copy(html); console.log("HTML mit DevTools kopiert."); }
};
document.addEventListener("mouseover", mark, true);
document.addEventListener("click", pick, true);
document.addEventListener("keydown", key, true);
console.log("Fahre über ein Element und klicke darauf, um sein gerendertes HTML zu kopieren. ESC bricht ab.");
})();
✓ Bevorzuge <div>, <span>, <img>, <a>, <details> und <summary>.
✓ Halte Stile bei Charakterbeschreibungen inline.
✓ Vermeide riesige feste Breiten; prüfe die Lesbarkeit auf Mobilgeräten.
✓ Trenne vertikale und horizontale Fotos.
✓ Gib jedem Bot seine eigene visuelle Sprache, statt eine Vorlage umzufärben.
✓ Verwende echte Links, keine Fake-Buttons.
✓ Verwende <audio controls> und nach Möglichkeit ein barrierefreies Transkript.
✓ Sichere das vorherige Bio, bevor du experimentierst.
✓ Erhalte Platzhalter wie {{user}}.
✓ Stecke niemals dein aktives Zugriffstoken in eine öffentliche Beschreibung.
Erstellt 21. Okt.
Aktualisiert 21. Okt.
Veröffentlicht 21. Okt.
- Unbegrenzt
- #guide
- #announcement
- #reginaden