퀼 캐릭터 시트 > 배포 | 커스텀 시트

HTML

<!-- HTML-->
<div class="sheet-quillwrap">
  
  <div class="sheet-ch-info">
    
    <!-- 캐 인장 -->
    <img name="attr_character_avatar">
    <!-- 캐 정보입력 -->
    <div class="sheet-ch-infoarea">
      <div>
      <img src="https://imgur.com/GmKivGw.png">
      <span class="sheet-bigtitle" style="font-size:40px;">Quill</span>
      </div>
      
      <div class="sheet-ch-row1">
        
        <!--이름, 직업 등등-->
        <div class="sheet-ch-left">
          <input class="sheet-smallinput" name="attr_player" placeholder="플레이어 이름">
          <input type="text" name="attr_character_name" placeholder="이름" class="sheet-nameinput">
          <div class="sheet-age">
            <span>나이 : </span>
            <input type="text" name="attr_age" class="sheet-smallinput" placeholder="-">
          </div>
          <div class="sheet-job">
            <span>직업 : </span>
            <input type="text" name="attr_job" class="sheet-smallinput" placeholder="-">
          </div>
        </div>
        
        <!--스탯 등등-->
        <div class="sheet-ch-right">
          <div class="sheet-ch-rightitem">
            <button class="sheet-dice" type="roll" value="&{template:QuillFree}{{name=자유 다이스}}{{dice=@{freeroll}}}{{result=[[@{freeroll}]]}}"></button>
            <input type="text"style="width: 50px;" name="attr_freeroll" value="1D6">
          </div>
          <div class="sheet-ch-rightitem">
            <button class="sheet-dice" type="roll" value="&{template:Quill}{{name=감정 판정}}{{result=[[(@{heart}?{기술(부푼 감정) 사용|사용 안 함,+0|사용함,+1})d6>5]]개 성공}}"></button>
            <span>감정 : </span>
            <select name="attr_heart">
              <option value="0">단계 선택</option>
							<option value="1">나쁨</option>
							<option value="2">보통</option>
              <option value="3">좋음</option>
            </select>
          </div>
          <div class="sheet-ch-rightitem">
            <button class="sheet-dice" type="roll" value="&{template:Quill}{{name=문장력 판정}}{{result=[[(@{lang}?{기술(영감) 사용|사용 안함,+0|사용함,+1})d6>5]]개 성공}}"></button>
            <span>문장력 : </span>
            <select name="attr_lang">
              <option value="0">단계 선택</option>
							<option value="1">나쁨</option>
							<option value="2">보통</option>
              <option value="3">좋음</option>
            </select>
          </div>
          <div class="sheet-ch-rightitem">
            <button class="sheet-dice" type="roll" value="&{template:Quill}{{name=필체 판정}}{{result=[[(@{penmanship}?{기술(화려함) 사용|사용 안함,+0|사용함,+1})d6>5]]개 성공}}"></button>
            <span>필체 : </span>
            <select name="attr_penmanship">
              <option value="0">단계 선택</option>
							<option value="1">나쁨</option>
							<option value="2">보통</option>
              <option value="3">좋음</option>
            </select>
          </div>
          <div class="sheet-ch-rightitemskill">
            <input style="width: 16px; height: 16px;" id="skilluse" type="checkbox" name="attr_skill_use" value="1">
            <label for="skilluse"></label>
            <span>기술 : </span>
            <select name="attr_skill">
              <option value="0">기술 선택</option>
							<option value="1">영감(문장력 +1)</option>
							<option value="2">화려함(필체 +1)</option>
              <option value="3">부푼 감정(감정 +1)</option>
            </select>
          </div>
        </div>
      
      </div>
      
      <!-- 캐 메모 -->
      <div class="sheet-ch-row2">
        <span>MEMO</span>
        <textarea name="attr_memo"></textarea>
      </div>
    
    </div>
  
  </div>

  <!--플레이 기록-->
  <div class="sheet-parascore">
    <img src="https://imgur.com/AKfgVln.png">
    <span class="sheet-bigtitle">Paragraph Score</span>
    
    <div class="sheet-paragraph">
      <div class="sheet-paragraph-record">
        <div class="sheet-paragraph-num">
          <span>문단 </span>
          <input type="number" name="attr_para-01-num" placeholder="#">
        </div>
        <div class="sheet-paragraph-rhetoric">
          <span>미사여구ㅤ</span>
          <input type="checkbox" name="attr_para-01-rhetoric" value="1">
        </div>
        <div class="sheet-paragraph-lang">
          <span>문장력ㅤ</span>
          <input type="checkbox" name="attr_para-01-lang" value="1">
        </div>
        <div class="sheet-paragraph-word">
          <input type="text" name="attr_para-01-word" placeholder="사용한 잉크병 단어">
        </div>
        <div class="sheet-paragraph-pen">
          <span>필체ㅤ</span>
          <input type="checkbox" name="attr_para-01-pen" value="1">
        </div>
        <div class="sheet-paragraph-score">
          <span>점수 : </span>
          <input type="number" name="attr_para-01-score" value="(@{para-01-rhetoric}+@{para-01-lang}*2-2)*@{para-01-rhetoric}+@{para-01-lang}+@{para-01-pen}" disabled="true">
        </div>
      </div>
      <div class="sheet-paragraph-sentence">
        <input class="sheet-sentence" type="text" name="attr_para-01-sentence" placeholder="문장">
      </div>
    </div>
    
    <fieldset class="repeating_paraitems">
      <div class="sheet-paragraph">
        <div class="sheet-paragraph-record">
          <div class="sheet-paragraph-num">
            <span>문단 </span>
            <input type="number" name="attr_para-num" placeholder="#">
          </div>
          <div class="sheet-paragraph-rhetoric">
            <span>미사여구ㅤ</span>
            <input type="checkbox" name="attr_para-rhetoric" value="1">
          </div>
          <div class="sheet-paragraph-lang">
            <span>문장력ㅤ</span>
            <input type="checkbox" name="attr_para-lang" value="1">
          </div>
          <div class="sheet-paragraph-word">
            <input type="text" name="attr_para-word" placeholder="사용한 잉크병 단어">
          </div>
          <div class="sheet-paragraph-pen">
            <span>필체ㅤ</span>
            <input type="checkbox" name="attr_para-pen" value="1">
          </div>
          <div class="sheet-paragraph-score">
            <span>점수 : </span>
            <input type="number" name="attr_para-score" value="(@{para-rhetoric}+@{para-lang}*2-2)*@{para-rhetoric}+@{para-lang}+@{para-pen}" disabled="true">
          </div>
        </div>
        <div class="sheet-paragraph-sentence">
          <input class="sheet-sentence" type="text" name="attr_para-sentence" placeholder="문장">
        </div>
      </div>
    </fieldset>

    <div class="sheet-bigtitle">
    <span>Total Score : </span>
    <input type="number" name="attr_total_score" placeholder="?">
    </div>
  </div>

  <!--완성 편지-->
  <div class="sheet-letter">
    <img src="https://i.imgur.com/A3eLqgk.png">
    <div class="sheet-paragraph">
      <div class="sheet-paragraph-sentence">
        <input class="sheet-sentence" type="text" name="attr_para-01-sentence" placeholder="문장">
      </div>
    </div>
    <fieldset class="repeating_paraitems">
      <div class="sheet-paragraph">
        <div class="sheet-paragraph-sentence">
          <input class="sheet-sentence" type="text" name="attr_para-sentence" placeholder="문장">
        </div>
      </div>
    </fieldset>
  </div>

  <span style="font-size:10px;text-align:center;">Made by Larfik<br>Images from Pixabay</span>

</div>

<!-- 주사위 -->
<rolltemplate class="sheet-rolltemplate-Quill">
  <div class="sheet-container">
    <img src="https://imgur.com/PdH0UCB.png">
    <div class="sheet-rollname">{{name}}</div>
    <span>5 이상일 시 성공</span>
    <div class="sheet-rollresultsuccess">{{result}}</div>
    <img src="https://i.imgur.com/A3eLqgk.png">    
  </div>
</rolltemplate>

<rolltemplate class="sheet-rolltemplate-QuillFree">
  <div class="sheet-container">
    <img src="https://imgur.com/PdH0UCB.png">
    <div class="sheet-rollname">{{dice}}</div>
    <div class="sheet-freerollresult">{{result}}</div>
    <img src="https://i.imgur.com/A3eLqgk.png">
  </div>
</rolltemplate>

CSS

/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDZbtPY_Q.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvXDXbtM.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cafe24Oneprettynight';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Oneprettynight.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.sheet-quillwrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 15px;
  gap: 20px;
  position: relative;
  width: 800px;
  background: #FFFFFF;
  font-family: 'Cafe24Oneprettynight';
  font-size: 16px;
  color: black;
  border: 2px solid #000000;
}

.sheet-quillwrap input {font-size: 16px; background: transparent; border: none; color: black;}
.sheet-quillwrap select {margin: 0px; background: transparent; border: none; color: black; font-size: 16px; width: 100px;}

.sheet-smallinput {font-size:14px !important;}
.sheet-nameinput {font-size: 32px !important;}
.sheet-bigtitle {font-family:'Playfair Display'; font-size: 24px;}
.sheet-bigtitle input {font-family: 'Cafe24Oneprettynight'; font-size: 40px !important; width: 65px !important;}
.sheet-sentence {background: transparent; border: none; color: #000000; width: 700px; font-size: 14px !important; text-align: center;}

.sheet-ch-info{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 0px;
  gap: 15px;
  width: 770px;
  flex: none;
  flex-grow: 0;
}
.sheet-ch-info img{width:200px; object-fit:contain;}

.sheet-ch-infoarea{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 5px;
  width: 555px;
  flex: none;
  align-self: stretch;
  flex-grow: 1;
}
.sheet-ch-infoarea img{width: auto; height: 60px; object-fit:contain;}

.sheet-ch-row1{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 5px;
  width: 555px;
  flex: none;
  align-self: stretch;
  flex-grow: 0;
}

.sheet-ch-left{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 5px;
  width: 300px;
  flex: none;
  flex-grow: 0;
  font-size: 14px;
}

.sheet-ch-right{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 5px;
  width: 250px;
  flex: none;
  flex-grow: 1;
}

.sheet-ch-rightitemskill select {width: 150px;}

.sheet-ch-row2{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 5px;
  width: 555px;
  flex: none;
  align-self: stretch;
  flex-grow: 0;
}
.sheet-ch-row2 textarea {width: 555px; background: transparent; border: none; color: black; font-size: 14px; border: 1px solid #000000; height: 100%}

.sheet-parascore {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  gap: 10px;
  width: 770px;
  background: #FFFFFF;
  border: 1px solid #000000;
  flex: none;
  flex-grow: 0;
}
.sheet-parascore img {height: 70px; object-fit: contain;}
.repcontrol > button {background: transparent; box-shadow:none; border-style: none;}

.sheet-paragraph{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px 0px;
  gap: 5px;
  width: 730px;
  border-bottom: 1px solid #AAAAAA;
  flex: none;
  align-self: stretch;
  flex-grow: 0;
}

.sheet-paragraph-record{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  padding: 0px;
  gap: 20px;
  width: 730px;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}



.sheet-paragraph-num input {max-width: 40px;}
.sheet-paragraph-rhetoric input {width: 16px; height: 16px;}
.sheet-paragraph-lang input {width: 16px; height: 16px;}
.sheet-paragraph-pen input {width: 16px; height: 16px;}
.sheet-paragraph-word input {width: 200px; text-align: center;}

.repitem {margin-bottom: 10px;}

.sheet-letter {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  gap: 10px;
  width: 770px;
  background: #FFFFFF;
  border: 1px solid #000000;
  flex: none;
  flex-grow: 0;
}

.sheet-letter img {height: 50px; object-fit: contain;}
.sheet-letter .repcontrol{display: none;}

.charsheet button[type="roll"].sheet-dice:before{
  content: ' ';
}

.charsheet button[type="roll"].sheet-dice:hover{
  background-position: 0;
}

.charsheet button[type="roll"].sheet-dice{
  background-image: url("https://imgur.com/zkKkJTj.png"); 
  background-size: 26px 26px;
  background-repeat: no-repeat;
  width: 26px;
  height: 26px;
  border-style: none;
  background-color: transparent;
  box-shadow:none;
  margin-left: 5px;
}

.sheet-ch-rightitem input[type="text"]{
  height:25px;
  border-bottom: 1px solid black;
  border-radius:0px;
  text-align: center;
  font-size: 14px;
}

.sheet-bigtitle input[type="number"]{
  height: 40px;
  border-bottom: 1px solid black;
  border-radius:0px;
  text-align: center;
}

.sheet-ch-rightitemskill input[type="checkbox"]{
  display: none;
}

input[type="checkbox"] + label{
  display: inline-block;
  width: 26px;
  height: 26px;
  position: bottom;
  background-image: url("https://imgur.com/DwCLNHt.png"); 
  background-size: 26px 26px;
  background-repeat: no-repeat;
  margin: 0px;
}

input[type="checkbox"]:checked + label{
  background-image: url("https://imgur.com/hhU2bL7.png"); 
  background-size: 26px 26px;
  background-repeat: no-repeat;
}

/* roll template */
.sheet-rolltemplate-Quill>.sheet-container{
  padding: 5px 5px;
  width: 200px;
  height: 240px;

  background: #FFFFFF;
  border: 1px solid #000000;

  font-family: 'Cafe24Oneprettynight';
  font-size: 11px;
  color: #000000;
  text-align: center;
}

.sheet-rolltemplate-QuillFree>.sheet-container{
  padding: 5px 5px;
  width: 200px;
  height: 200px;

  background: #FFFFFF;
  border: 1px solid #000000;

  font-family: 'Cafe24Oneprettynight';
  font-size: 11px;
  color: #000000;
  text-align: center;
}

.sheet-rolltemplate-Quill .sheet-container img {height: 20px; width: auto; object-fit: contain; margin: 20px 0px;}
.sheet-rolltemplate-Quill .sheet-container .sheet-rollname {font-size: 18px;}
.sheet-rolltemplate-Quill .sheet-container .sheet-rollresult {font-family: 'Playfair Display'; font-size: 24px; margin-bottom: 20px;}
.sheet-rolltemplate-Quill .sheet-container .sheet-rollresultsuccess {font-size: 36px;margin: 20px 0px;}
.sheet-rolltemplate-Quill .sheet-container .inlinerollresult{background: transparent; border: none; padding: 0px; font-weight:400;}
.sheet-rolltemplate-QuillFree .sheet-container img {height: 20px; width: auto; object-fit: contain; margin: 20px 0px;}
.sheet-rolltemplate-QuillFree .sheet-container .sheet-rollname {font-size: 18px; margin-bottom: 10px;}
.sheet-rolltemplate-QuillFree .sheet-container .sheet-freerollresult {font-family: 'Playfair Display'; font-size: 48px; margin: 20px 0px;}
.sheet-rolltemplate-QuillFree .sheet-container .inlinerollresult{background: transparent; border: none; padding: 0px; font-weight:400;}

API