character js
//@use editDisplay

function simpleHash(inputString) {
    let hash = 0;
    for (let i = 0; i < inputString.length; i++) {
        const char = inputString.charCodeAt(i);
        hash = (hash << 5) - hash + char;
        hash = hash & hash;
    }
    return hash;
}

async function editDisplay(text) {
    const pattern = /\[(.+?):\s*(.+?)\s*\|\s*(.+?):\s*(.+?)\s*\|\s*(.+?):\s*(.+?)\s*\]/;
    const matches = text.match(pattern);
    let Hash=0;

    if (matches && matches[6]) {
        Hash = simpleHash(matches[6]);
    } else return text;


    return editDisplay(text.replace(pattern,
        `<!DOCTYPE html>
<html>
<head>
  <style>

    #toggleCheckbox${Hash} {
      display: none;
    }

    #toggleCheckbox${Hash}:checked ~ .text-box {
      display: none;
    }
    .toggle-label {
      position: absolute;
      top: 22px;
      right: 10px;
      z-index: 4;
      cursor: pointer;
      width: 50px;
      height: 50px;
      background-image: url('{{raw::hide}}');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
  </style>
</head>
<body>
  <div class="image-stack">
    <img src="{{raw::$2}}" alt="Background" class="back">
    <img src="{{raw::$4}}" alt="Character" class="front">
    <input type="checkbox" id="toggleCheckbox${Hash}">
    <label for="toggleCheckbox${Hash}" class="toggle-label"></label>
    <div class="text-box">
<div class="name">{{your character name}}</div>
      <div class="scrollable-content">
          $6
       </div>
      </div>
    </div>
  <br><br>
</body>
</html>`
    ));
}


백그라운드 임베딩
<head>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
    .image-stack {
       position: relative;
       width: 80vw;
       max-width: 450px;
       aspect-ratio: 3 / 2;
       margin: 0 auto;
    }
    .image-stack img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 15px;
      border: 3px solid #ccc;
    }
    .image-stack .front {
      z-index: 2;
      width: auto;
      height: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: none;
    }
    .image-stack .back {
      z-index: 1;
    }
    .text-box {
      font-family: 'Quicksand', sans-serif;
      box-sizing: border-box;
      background-image: url('{{raw::textbox}}');
      background-size: cover;
      background-repeat: no-repeat;
      border: none;
      width: clamp(0px,80vw,420px);
      aspect-ratio: 3 / 1;
      text-align: left;
      color: black;
      padding: clamp(0px,11vw,62px) 5% clamp(0px,5.68vw,32px) 5%;
      font-size: clamp(0px,1em,14px);
      position: relative;
      top: clamp(0px, 33.77vw, 190px);
      z-index: 3;
      overflow: hidden;
      margin: 0 auto;
    }
    .scrollable-content {
    font-family: 'Quicksand', sans-serif;
      position: absolute;
      top: clamp(0px,11vw,62px);
      left: clamp(0px,5.68vw,32px);
      right: clamp(0px,4.62vw,26px);
      bottom: clamp(0px,5.68vw,32px);
      overflow-y: auto;
      font-size: clamp(0px,1em,14px);
    }
    .name {
    font-family: 'Quicksand', sans-serif;
      position: absolute;  
      top: clamp(0px,5.69vw,32px);          
      left: clamp(0px,6.75vw,38px);
      font-weight: bold;
      color: black;
      font-size: clamp(0px,1.2em,17px);
    }
    </style>
</head>


your character name은 실제 캐릭터 이름으로 바꿔주세요


필수 에셋


이름을 hide로 변경


이름을 textbox로 변경


변경점은 없습니당


요청받아서 10분만에 작성해봄


JS 칸 안보이면 여기 참조

https://arca.live/b/characterai/103432059