Leitfaden & mehr Zeug

Aus dem Englischen übersetzt

Guide & More Stuff

69

144

Fortgeschrittenes JanitorAI-Bio-Design · Ein kostenloser Community-Leitfaden von Melancholux

REGINAS WERKSTATT // COMMUNITY-RESSOURCEDas Handbuch für fortgeschrittene BiosTelefone · Archive · Intros · Audio · Galerien · Konsolen-PATCH · Mehr
00 // REGINAS WERKSTATTEine Anmerkung, bevor wir beginnenEine Entschuldigung, ein paar Klarstellungen und ein Dankeschön.

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. 🌷

01 // REGINAS WERKSTATTWas ist ein fortgeschrittenes Bio?Eine kleine thematische Seite innerhalb einer Charakterbeschreibung.

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.

Zwei verschiedene Systeme: Profil-CSS kann dein Profil und seine nativen Karten beeinflussen. HTML in der Charakterbeschreibung funktioniert meist am besten mit 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.
02 // REGINAS WERKSTATTBehalte das VorschaubildErste Eindrücke zählen auf Bot-Karten.
Der neutrale Vorschau-Header
Beginne mit einfachem Absatz-Markup. Nach unserer Erfahrung erhöht das die Wahrscheinlichkeit, dass das erste Bild in der öffentlichen Vorschau erscheint. Über jedes Janitor-Update hinweg ist es nicht garantiert.

Hier ist ein süßer neuer Leitfaden!

QUELLCODE — AUSWÄHLEN UND KOPIEREN
<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>
03 // REGINAS WERKSTATTDas winzige TelefonUnsere Fake-Chat-Oberfläche: kein JavaScript erforderlich.
Clara probiert die Amen-Pose aus
Telefonrahmen, Chat-Blasen, Foto- und Statusbereich. Ändere den Text und die Bilder, damit sie zu deinem eigenen Charakter passen.
Clara 🌸
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>
QUELLCODE — AUSWÄHLEN UND KOPIEREN
<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>
04 // REGINAS WERKSTATTEinstiegsszenarienEine cineastische Karte mit einem Bild hinter ihrem Titel.
Aufklappbares Intro mit Cover-Art
Klicke auf die Karte, um das Szenario-Debrief zu enthüllen. Das Bild ist der Hintergrund der Zusammenfassung, kein losgelöstes Bild.
01 · Ein Blumenstrauß für die neue Nachbarin
Sie wollte dich nur willkommen heißen...
SZENE ÖFFNEN ↓
Clara klopft mit einem kleinen Blumenstrauß und ist plötzlich viel schüchterner als erwartet.
QUELLCODE — AUSWÄHLEN UND KOPIEREN
<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>
Kein Bild? Verwende stattdessen ein Archiv.
Ein Akkordeon im Pergamentstil kann bewusst wirken, ohne zusammenhanglose Kunst wiederzuverwenden.
✦ AKTE IV — Die verschlossene Tür
Ein Handtuch. Ein sehr unglücklicher Flur.
EINTRAG ÖFFNEN ↓
Die Szene hat kein Bild, also wird das Papier selbst zum visuellen Thema.
QUELLCODE — AUSWÄHLEN UND KOPIEREN
<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>
05 // REGINAS WERKSTATTAudio und TranskripteMache eine Sprachnachricht oder eine fiktive Szene abspielbar.
Erika — Leitstellenaufnahme
Direkte MP3-URL + nativer HTML-Player + optionales schriftliches Transkript. Verlasse dich nicht auf Autoplay.
☎ 911-LEITSTELLENARCHIV

Fiktive Aufnahme · 184 Tage später

LEITSTELLE: 911, was ist Ihr Notfall?

ERIKA: Bitte... ruf {{user}} an.

QUELLCODE — AUSWÄHLEN UND KOPIEREN
<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>
06 // REGINAS WERKSTATTBildergalerien und Community-LinksHalte verschiedene Bildausrichtungen getrennt und mache echte klickbare Karten.
Scrollender Bildstreifen
Halte Hochformat- und Querformatgalerien in eigenen Abschnitten, wenn du beide Formate hast.
QUELLCODE — AUSWÄHLEN UND KOPIEREN
<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>
Discord-Banner als Button
Verwende ein echtes href. Der gesamte Banner ist die klickbare Fläche.
REGINAS HÖHLE
TRITT DER COMMUNITY BEI ↗
QUELLCODE — AUSWÄHLEN UND KOPIEREN
<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>
07 // REGINAS WERKSTATTAnimationen: Was tatsächlich funktioniertEine Unterscheidung, die für Profil-CSS wichtig ist.

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>
08 // REGINAS WERKSTATTWie unsere Konsolen-PATCH-Methode funktioniertFür Creator, die mit fortgeschrittenen Beschreibungen experimentieren möchten.

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.

Wichtig: Das Zugriffstoken ist ein Anmelde-Anmeldedatum, kein öffentlicher Code. Hole es nur ab, während du in deinem eigenen Konto angemeldet bist. Sende es nicht an einen anderen Creator, füge es nicht in Screenshots ein und veröffentliche es nicht in einem Bot. Der folgende Code liest nur deine lokalen Janitor-Cookies und kopiert das Token in deine eigene Zwischenablage; er kontaktiert keinen Drittanbieter-Server. Änderungen an Browser oder Cookies können verhindern, dass er funktioniert.
SCHRITT A — DEIN EIGENES TOKEN

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.");
})();
SCHRITT B — PATCH-STRUKTUR

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());
})();
Führe niemals blind ein Skript aus, das dir ein Fremder gibt. Lies seine Ziel-URL und prüfe, dass es nur deinen eigenen Charakter aktualisiert. Dies ist eine inoffizielle Methode, kein Versprechen von Kompatibilität oder Erlaubnis, zukünftige Sicherheitsbeschränkungen zu umgehen.
09 // REGINAS WERKSTATTElement-Picker für InspirationKlicke auf einer öffentlichen Seite auf ein Element, um sein gerendertes HTML zu inspizieren.

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.");
})();
Nutze die Arbeit anderer Creator als Lernreferenz; nenne sie, wenn angebracht. Veröffentliche ihre genauen Designs oder ihre Kunst nicht als deine eigenen. Außerdem benötigt ein kopiertes Element möglicherweise externe Stile, um identisch auszusehen.
10 // REGINAS WERKSTATTDinge, die ich auf die harte Tour gelernt habePraktische Prüfungen vor dem Veröffentlichen.
✓ Verwende einen neutralen ersten Absatz und ein echtes Bild für Kartenvorschauen.
✓ 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.
Mach etwas, das sich wie dein Charakter anfühlt.Ein Klassenzimmer-Notizbuch, ein kleines Telefon, ein Fallarchiv, ein verzaubertes Buch — alles, was zu ihrer Geschichte gehört.MEHR VON MELANCHOLUX ↗Bleibt flauschig, Lieblinge. — Mel & Regina 🌸🤍

Erstellt 21. Okt.

Aktualisiert 21. Okt.

Veröffentlicht 21. Okt.

Veröffentlichte Chats