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 칸 안보이면 여기 참조