[html]
<style>
.kiriw-wrapper { max-width:900px; margin:0 auto; font-family:Georgia,serif; text-align:center; }
.kiriw-wrapper input, .kiriw-wrapper textarea, .kiriw-wrapper select {
box-sizing:border-box; width:100%; padding:10px 12px; margin:8px 0;
font:16px/1.4 Georgia,serif; border:1px solid #b8aa91;
background:#fbf8f0; color:#352b22; border-radius:4px;
}
.kiriw-wrapper textarea { min-height:170px; resize:vertical; }
.kiriw-wrapper input[type="button"] {
background:var(--sec-accent,#72533f); color:#fff; border:0; cursor:pointer;
font-weight:bold; text-transform:uppercase; box-shadow:none;
}
.kiriw-wrapper input[type="button"]:hover { filter:brightness(1.1); }
.kiriw-row { display:flex; gap:12px; flex-wrap:wrap; }
.kiriw-row > div { flex:1 1 260px; min-width:0; }
.kiriw-note { font-size:13px; margin:0 0 10px; opacity:.85; }
.kiriw-count { font-weight:bold; color:var(--sec-accent,#72533f); }
.kiriw-cover-list { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:14px 0 20px; }
.kiriw-cover-item { width:75px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:7px; }
.kiriw-cover-item img { width:69px; height:69px; object-fit:contain; background:none; border:0; padding:0; }
.kiriw-cover-item input { width:15px; height:15px; margin:0; accent-color:var(--sec-accent,#72533f); }
.kiriw-no-seal { width:69px; height:69px; display:flex; align-items:center; justify-content:center; }
.kiriw-preview-title { font-size:14px; letter-spacing:.15em; text-transform:uppercase; margin:25px 0 16px; }
#kiriPreview { padding:12px 0; }
#kiriOutput { min-height:150px; font:12px/1.5 monospace; }
@media (max-width:560px) { .kiriw-cover-list { gap:8px; } .kiriw-cover-item { width:64px; } .kiriw-cover-item img,.kiriw-no-seal { width:60px; height:60px; } }
</style>
<!-- Эти же стили автоматически попадут в HTML готового письма. -->
<style id="kiriLetterStyles">
@font-face { font-family:'kiri-youmurdererbb'; src:url('https://forumstatic.ru/files/001c/0c/35/65006.woff2') format('woff2'); }
@font-face { font-family:'kiri-venecia'; src:url('https://forumstatic.ru/files/001c/0c/35/90521.woff2') format('woff2'); }
@font-face { font-family:'kiri-roadrage'; src:url('https://forumstatic.ru/files/001c/0c/35/98702.woff2') format('woff2'); }
@font-face { font-family:'kiri-majestic'; src:url('https://forumstatic.ru/files/001c/0c/35/16562.woff2') format('woff2'); }
@font-face { font-family:'kiri-christmas'; src:url('https://forumstatic.ru/files/001c/0c/35/64381.woff2') format('woff2'); }
@font-face { font-family:'kiri-amphicyr'; src:url('https://forumstatic.ru/files/001c/0c/35/13711.woff2') format('woff2'); }
.kiri-paper-v3 {
box-sizing:border-box!important;
display:block!important;
width:100%!important;
max-width:700px!important;
height:auto!important;
min-height:0!important;
margin:10px auto 22px!important;
padding:0 5px!important;
background:none!important;
border:0!important;
overflow:visible!important;
text-align:left!important;
filter:drop-shadow(0 9px 12px rgba(38,24,11,.22));
}
.kiri-paper-v3 .kiri-sheet,
.kiri-paper-v3 .kiri-sheet-fufu,
.kiri-paper-v3 .kiri-sheet-burned {
position:relative!important;
display:block!important;
box-sizing:border-box!important;
width:100%!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
padding:54px 55px 35px!important;
margin:0!important;
overflow:visible!important;
border:1px solid rgba(94,62,32,.34)!important;
border-radius:5px 9px 4px 8px!important;
box-shadow:inset 0 0 0 5px rgba(255,244,209,.13),
inset 0 0 40px rgba(98,59,27,.15)!important;
text-align:left!important;
}
/* Чистый пергамент */
.kiri-paper-v3 .kiri-sheet {
--kiri-edge:#f1e2bc;
--kiri-ink:#4b3425;
background:
radial-gradient(ellipse at 5% 12%,rgba(131,89,48,.11),transparent 36%),
radial-gradient(ellipse at 95% 80%,rgba(133,83,42,.14),transparent 40%),
repeating-linear-gradient(113deg,transparent 0 5px,rgba(97,68,36,.016) 6px 7px,transparent 9px 13px),
linear-gradient(145deg,#f8edcf 0%,#f1e1bd 52%,#ead5ac 100%)!important;
}
/* Состаренный пергамент */
.kiri-paper-v3 .kiri-sheet-fufu {
--kiri-edge:#ddc398;
--kiri-ink:#433020;
background:
radial-gradient(ellipse at 8% 8%,rgba(116,65,29,.33),transparent 35%),
radial-gradient(ellipse at 95% 10%,rgba(103,58,24,.22),transparent 28%),
radial-gradient(ellipse at 12% 96%,rgba(108,54,23,.25),transparent 34%),
radial-gradient(ellipse at 90% 92%,rgba(88,51,26,.31),transparent 38%),
radial-gradient(ellipse at 60% 44%,rgba(255,240,198,.32),transparent 56%),
repeating-linear-gradient(104deg,transparent 0 4px,rgba(87,53,30,.026) 5px 7px,transparent 9px 15px),
linear-gradient(140deg,#e9d5ad,#d9bf91 58%,#cba97b)!important;
}
/* Подожжённый пергамент: уголь, коричневые подпалины, светлая середина. */
.kiri-paper-v3 .kiri-sheet-burned {
--kiri-ink:#39271d;
--kiri-edge:#1f100b;
overflow:hidden!important;
isolation:isolate;
border:0!important;
border-radius:0!important;
padding:70px 65px 55px!important;
background:
radial-gradient(ellipse 23% 17% at 0% 0%,rgba(17,10,9,.98) 0%,rgba(45,20,13,.94) 26%,rgba(101,48,25,.72) 50%,transparent 100%),
radial-gradient(ellipse 25% 18% at 100% 0%,rgba(17,11,10,.98) 0%,rgba(54,26,16,.87) 30%,rgba(123,61,29,.57) 55%,transparent 100%),
radial-gradient(ellipse 24% 14% at 3% 100%,rgba(20,11,9,.98) 0%,rgba(62,30,16,.89) 35%,rgba(123,63,30,.45) 70%,transparent 100%),
radial-gradient(ellipse 30% 18% at 100% 100%,rgba(17,10,9,.99) 0%,rgba(63,29,18,.9) 31%,rgba(121,55,25,.57) 61%,transparent 100%),
radial-gradient(ellipse 30% 6% at 42% 0%,rgba(31,14,10,.97) 0%,rgba(105,52,25,.69) 35%,transparent 100%),
radial-gradient(ellipse 38% 7% at 62% 100%,rgba(28,14,11,.96) 0%,rgba(120,57,26,.52) 40%,transparent 100%),
radial-gradient(ellipse 7% 24% at 0% 47%,rgba(27,13,10,.94) 0%,rgba(104,48,24,.61) 52%,transparent 100%),
radial-gradient(ellipse 8% 26% at 100% 68%,rgba(26,12,10,.96) 0%,rgba(115,58,25,.66) 45%,transparent 100%),
linear-gradient(to right,rgba(25,13,11,.89) 0%,rgba(54,27,17,.84) 2%,rgba(125,63,27,.51) 5%,rgba(175,105,50,.18) 10%,transparent 19%),
linear-gradient(to left,rgba(20,11,10,.93) 0%,rgba(62,30,17,.83) 2%,rgba(128,63,27,.48) 5%,rgba(176,101,47,.16) 11%,transparent 20%),
linear-gradient(to bottom,rgba(24,12,10,.93) 0%,rgba(74,35,18,.86) 12px,rgba(130,70,30,.56) 28px,rgba(192,115,58,.18) 53px,transparent 88px),
linear-gradient(to top,rgba(22,11,9,.97) 0%,rgba(68,32,17,.85) 12px,rgba(133,68,32,.54) 27px,rgba(186,105,53,.19) 52px,transparent 91px),
radial-gradient(ellipse at 45% 28%,rgba(255,240,200,.58),transparent 65%),
repeating-linear-gradient(115deg,transparent 0 4px,rgba(64,35,19,.034) 5px 6px,transparent 8px 13px),
linear-gradient(130deg,#d5b17c 0%,#e4c997 42%,#dcc18e 74%,#c99e6f 100%)!important;
box-shadow:inset 0 0 15px 4px rgba(36,17,11,.82),
inset 0 0 58px 12px rgba(85,42,19,.39),
inset 0 0 96px 24px rgba(140,75,35,.23)!important;
/* Неровный контур: обгоревшие уголки, выеденные огнём края.
Все зубцы измерены в px, поэтому длинный текст не увеличивает подпалины. */
-webkit-clip-path:polygon(
0 31px,2% 20px,4% 30px,7% 13px,10% 25px,13% 16px,16% 22px,20% 9px,
24% 19px,27% 11px,31% 24px,36% 14px,40% 20px,44% 9px,49% 18px,
53% 10px,58% 20px,61% 13px,65% 25px,69% 17px,73% 10px,77% 22px,
80% 16px,84% 25px,88% 15px,92% 29px,96% 17px,100% 31px,
calc(100% - 18px) 5%,calc(100% - 8px) 13%,calc(100% - 23px) 25%,
calc(100% - 11px) 39%,calc(100% - 18px) 53%,calc(100% - 7px) 65%,
calc(100% - 22px) 82%,calc(100% - 11px) 93%,100% calc(100% - 27px),
96% calc(100% - 18px),92% calc(100% - 34px),88% calc(100% - 16px),
84% calc(100% - 25px),79% calc(100% - 11px),74% calc(100% - 23px),
69% calc(100% - 14px),64% calc(100% - 29px),60% calc(100% - 15px),
54% calc(100% - 24px),49% calc(100% - 13px),43% calc(100% - 27px),
37% calc(100% - 16px),33% calc(100% - 30px),28% calc(100% - 14px),
23% calc(100% - 23px),18% calc(100% - 12px),14% calc(100% - 26px),
10% calc(100% - 17px),6% calc(100% - 35px),0 calc(100% - 24px),
16px 92%,8px 81%,21px 67%,10px 55%,19px 42%,8px 31%,19px 17%);
clip-path:polygon(
0 31px,2% 20px,4% 30px,7% 13px,10% 25px,13% 16px,16% 22px,20% 9px,
24% 19px,27% 11px,31% 24px,36% 14px,40% 20px,44% 9px,49% 18px,
53% 10px,58% 20px,61% 13px,65% 25px,69% 17px,73% 10px,77% 22px,
80% 16px,84% 25px,88% 15px,92% 29px,96% 17px,100% 31px,
calc(100% - 18px) 5%,calc(100% - 8px) 13%,calc(100% - 23px) 25%,
calc(100% - 11px) 39%,calc(100% - 18px) 53%,calc(100% - 7px) 65%,
calc(100% - 22px) 82%,calc(100% - 11px) 93%,100% calc(100% - 27px),
96% calc(100% - 18px),92% calc(100% - 34px),88% calc(100% - 16px),
84% calc(100% - 25px),79% calc(100% - 11px),74% calc(100% - 23px),
69% calc(100% - 14px),64% calc(100% - 29px),60% calc(100% - 15px),
54% calc(100% - 24px),49% calc(100% - 13px),43% calc(100% - 27px),
37% calc(100% - 16px),33% calc(100% - 30px),28% calc(100% - 14px),
23% calc(100% - 23px),18% calc(100% - 12px),14% calc(100% - 26px),
10% calc(100% - 17px),6% calc(100% - 35px),0 calc(100% - 24px),
16px 92%,8px 81%,21px 67%,10px 55%,19px 42%,8px 31%,19px 17%);
}
/* Местами огонь сильнее выжег бумагу, оставив локальные островки копоти. */
.kiri-paper-v3 .kiri-sheet-burned::before {
content:""!important;
position:absolute!important;
z-index:0!important;
inset:0!important;
display:block!important;
pointer-events:none!important;
background:
radial-gradient(ellipse 7% 7% at 8% 6%,rgba(9,7,7,.89),rgba(73,30,17,.53) 55%,transparent 98%),
radial-gradient(ellipse 9% 4% at 77% 2%,rgba(5,6,6,.87),rgba(87,40,18,.59) 48%,transparent 99%),
radial-gradient(ellipse 5% 8% at 98% 34%,rgba(10,8,7,.82),rgba(106,50,19,.45) 55%,transparent 99%),
radial-gradient(ellipse 10% 8% at 12% 99%,rgba(9,7,6,.91),rgba(102,47,18,.58) 45%,transparent 99%),
radial-gradient(ellipse 6% 6% at 62% 97%,rgba(12,8,7,.87),rgba(121,55,25,.42) 51%,transparent 99%),
radial-gradient(ellipse 4% 9% at 1% 57%,rgba(5,4,4,.82),rgba(98,39,21,.48) 55%,transparent 99%)!important;
}
.kiri-paper-v3 .kiri-sheet-burned::after {
content:""!important;
position:absolute!important;
inset:25px!important;
z-index:0!important;
display:block!important;
pointer-events:none!important;
border:1px solid rgba(104,58,30,.10)!important;
box-shadow:inset 0 0 30px rgba(116,55,26,.08)!important;
}
.kiri-paper-v3 .kiri-sheet-burned .kiri-inner,
.kiri-paper-v3 .kiri-sheet-burned .kiri-monogram { z-index:1!important; }
/* Мягкий рваный край (декоративный, без обрезания текста) */
.kiri-paper-v3 .kiri-sheet::before,
.kiri-paper-v3 .kiri-sheet-fufu::before,
.kiri-paper-v3 .kiri-sheet::after,
.kiri-paper-v3 .kiri-sheet-fufu::after {
content:""!important;
pointer-events:none!important;
position:absolute!important;
display:block!important;
left:-1px!important;
right:-1px!important;
height:12px!important;
background:var(--kiri-edge)!important;
clip-path:polygon(0 62%,3% 49%,7% 69%,12% 43%,18% 60%,24% 46%,31% 67%,38% 49%,46% 62%,53% 42%,61% 65%,69% 48%,76% 65%,84% 44%,91% 63%,96% 46%,100% 60%,100% 100%,0 100%)!important;
}
.kiri-paper-v3 .kiri-sheet::before,
.kiri-paper-v3 .kiri-sheet-fufu::before { top:-8px!important; }
.kiri-paper-v3 .kiri-sheet::after,
.kiri-paper-v3 .kiri-sheet-fufu::after { bottom:-8px!important; transform:rotate(180deg)!important; }
.kiri-paper-v3 .kiri-inner {
position:relative!important;
display:block!important;
box-sizing:border-box!important;
width:100%!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
margin:0!important;
padding:0!important;
background:none!important;
overflow:visible!important;
color:var(--kiri-ink)!important;
}
.kiri-paper-v3 .kiri-inner::before {
content:"❦"; display:block; text-align:center; font:30px/1 Georgia,serif;
color:rgba(103,65,31,.54); margin:0 0 16px;
}
.kiri-paper-v3 .kiri-title {
display:block!important;
position:static!important;
width:auto!important;
height:auto!important;
margin:0 0 22px!important;
padding:0 0 14px!important;
color:var(--kiri-ink)!important;
background:none!important;
border:0!important;
border-bottom:1px solid rgba(102,67,36,.25)!important;
font:italic 30px/1.3 Georgia,serif!important;
text-align:center!important;
overflow-wrap:anywhere;
}
.kiri-paper-v3 .kiri-text {
position:static!important;
display:block!important;
box-sizing:border-box!important;
width:auto!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
margin:0!important;
padding:0!important;
border:0!important;
background:none!important;
color:var(--kiri-ink)!important;
font-size:25px!important;
line-height:1.55!important;
font-weight:normal!important;
text-align:left!important;
white-space:pre-wrap!important;
overflow-wrap:anywhere!important;
word-break:normal!important;
overflow:visible!important;
}
.kiri-paper-v3.kiri-font-amphicyr .kiri-text { font-family:'kiri-amphicyr',Georgia,serif!important; }
.kiri-paper-v3.kiri-font-youmurdererbb .kiri-text { font-family:'kiri-youmurdererbb',Georgia,serif!important; }
.kiri-paper-v3.kiri-font-venecia .kiri-text { font-family:'kiri-venecia',Georgia,serif!important; }
.kiri-paper-v3.kiri-font-roadrage .kiri-text { font-family:'kiri-roadrage',Georgia,serif!important; }
.kiri-paper-v3.kiri-font-majestic .kiri-text { font-family:'kiri-majestic',Georgia,serif!important; }
.kiri-paper-v3.kiri-font-christmas .kiri-text { font-family:'kiri-christmas',Georgia,serif!important; }
.kiri-paper-v3 .kiri-monogram {
position:relative!important;
inset:auto!important;
display:block!important;
box-sizing:border-box!important;
width:105px!important;
height:105px!important;
margin:24px 0 0 auto!important;
padding:0!important;
background:none!important;
border:0!important;
transform:rotate(-8deg);
}
.kiri-paper-v3 .kiri-monogram-img {
position:absolute!important;
display:block!important;
inset:0!important;
width:100%!important;
height:100%!important;
margin:0!important;
padding:0!important;
border:0!important;
object-fit:contain!important;
max-width:none!important;
}
.kiri-paper-v3 .kiri-monogram-letter {
position:absolute!important;
display:flex!important;
inset:0!important;
width:100%!important;
height:100%!important;
box-sizing:border-box!important;
justify-content:center!important;
align-items:center!important;
margin:0!important;
padding:0!important;
background:none!important;
color:var(--seal-color,#9e703c)!important;
font:bold 26px/1 Georgia,serif!important;
letter-spacing:0!important;
text-shadow:0 1px 1px rgba(255,245,218,.45)!important;
}
.kiri-paper-v3 .kiri-monogram-letter.kiri-double { font-size:22px!important; }
.kiri-paper-v3 .kiri-monogram-letter.kiri-triple { font-size:18px!important; }
@media(max-width:600px) {
.kiri-paper-v3 .kiri-sheet,.kiri-paper-v3 .kiri-sheet-fufu { padding:42px 25px 24px!important; }
.kiri-paper-v3 .kiri-sheet-burned { padding:54px 33px 45px!important; }
.kiri-paper-v3 .kiri-title { font-size:25px!important; }
.kiri-paper-v3 .kiri-text { font-size:21px!important; }
.kiri-paper-v3 .kiri-monogram { width:85px!important; height:85px!important; }
}
</style>
<div class="kiriw-wrapper">
<input type="text" id="kiriTitle" placeholder="Заголовок" value="Друг...">
<textarea id="kiriText" placeholder="Текст письма"></textarea>
<div class="kiriw-row">
<div>
<input type="text" id="kiriInitials" placeholder="Инициалы" maxlength="3" oninput="countKiriInitials()">
<div class="kiriw-note">букв: <span id="kiriCount" class="kiriw-count">0</span> / 3</div>
</div>
<div><input type="text" id="kiriColor" placeholder="Цвет оттиска" value="#9E703C"></div>
</div>
<div class="kiriw-row">
<div>
<select id="kiriSheet">
<option value="kiri-sheet">чистый лист</option>
<option value="kiri-sheet-fufu" selected>состаренный лист</option>
<option value="kiri-sheet-burned">подожжённый лист 🔥</option>
</select>
</div>
<div>
<select id="kiriFont">
<option value="kiri-font-amphicyr" selected>Amphicy</option>
<option value="kiri-font-youmurdererbb">You Murderer</option>
<option value="kiri-font-venecia">Венеция</option>
<option value="kiri-font-roadrage">Roadrage</option>
<option value="kiri-font-majestic">Majestic</option>
<option value="kiri-font-christmas">Christmas</option>
</select>
</div>
</div>
<div class="kiriw-note" style="margin-top:12px">печать</div>
<div class="kiriw-cover-list">
<label class="kiriw-cover-item"><input type="radio" name="kiriSeal" value="https://cdn.imgchest.com/files/017c681294a5.png" checked><img src="https://cdn.imgchest.com/files/017c681294a5.png" alt="Печать 1"></label>
<label class="kiriw-cover-item"><input type="radio" name="kiriSeal" value="https://cdn.imgchest.com/files/7f972201106b.png"><img src="https://cdn.imgchest.com/files/7f972201106b.png" alt="Печать 2"></label>
<label class="kiriw-cover-item"><input type="radio" name="kiriSeal" value="https://cdn.imgchest.com/files/0032a793a4e9.png"><img src="https://cdn.imgchest.com/files/0032a793a4e9.png" alt="Печать 3"></label>
<label class="kiriw-cover-item"><input type="radio" name="kiriSeal" value="https://cdn.imgchest.com/files/c4bae208db0e.png"><img src="https://cdn.imgchest.com/files/c4bae208db0e.png" alt="Печать 4"></label>
<label class="kiriw-cover-item"><input type="radio" name="kiriSeal" value="https://cdn.imgchest.com/files/c81cf1501dd0.png"><img src="https://cdn.imgchest.com/files/c81cf1501dd0.png" alt="Печать 5"></label>
<label class="kiriw-cover-item"><input type="radio" name="kiriSeal" value="https://cdn.imgchest.com/files/af350b217889.png"><img src="https://cdn.imgchest.com/files/af350b217889.png" alt="Печать 6"></label>
<label class="kiriw-cover-item"><input type="radio" name="kiriSeal" value="https://cdn.imgchest.com/files/7e016eb17269.png"><img src="https://cdn.imgchest.com/files/7e016eb17269.png" alt="Печать 7"></label>
<label class="kiriw-cover-item"><input type="radio" name="kiriSeal" value="none"><span class="kiriw-no-seal">нет</span></label>
</div>
<div class="kiriw-preview-title">Предпросмотр письма</div>
<div id="kiriPreview"></div>
<input type="button" value="Создать HTML" onclick="generateKiriHTML()">
<textarea id="kiriOutput" readonly placeholder="Скопируй полученный код целиком и вставь в отдельное сообщение форума"></textarea>
<div class="kiriw-note">Скопируй код из поля выше целиком, включая теги HTML. В сообщение с письмом не вставляй сам генератор.</div>
</div>
<script>
function countKiriInitials() {
var field = document.getElementById('kiriInitials');
var initials = field.value.replace(/[^A-Za-zА-Яа-яЁё]/g,'').toUpperCase().substring(0,3);
field.value = initials;
document.getElementById('kiriCount').textContent = initials.length;
renderKiriPreview();
}
function kiriEscape(value) {
return String(value).replace(/&/g,'&').replace(/</g,'<')
.replace(/>/g,'>').replace(/"/g,'"').replace(/'/g,''');
}
function buildKiriLetter() {
var title = kiriEscape(document.getElementById('kiriTitle').value);
var text = kiriEscape(document.getElementById('kiriText').value);
var initials = kiriEscape(document.getElementById('kiriInitials').value);
var color = document.getElementById('kiriColor').value.trim();
if (!/^#[0-9a-fA-F]{3}(?:[0-9a-fA-F]{3})?$/.test(color)) color = '#9E703C';
var sheet = document.getElementById('kiriSheet').value;
var font = document.getElementById('kiriFont').value;
var sealField = document.querySelector('input[name="kiriSeal"]:checked');
var seal = sealField ? sealField.value : 'none';
var monogram = '';
if (seal !== 'none') {
var numberClass = initials.length === 3 ? ' kiri-triple' : (initials.length === 2 ? ' kiri-double' : '');
monogram = '<div class="kiri-monogram">' +
'<img class="kiri-monogram-img" src="' + seal + '" alt="">' +
'<div class="kiri-monogram-letter' + numberClass + '" style="--seal-color:' + color + '">' + initials + '</div>' +
'</div>';
}
return '<div class="kiri-wrap kiri-paper-v3 ' + font + '">\n' +
' <div class="' + sheet + '">\n' +
' <div class="kiri-inner">\n' +
' <div class="kiri-title">' + title + '</div>\n' +
' <div class="kiri-text">' + text + '</div>\n' +
' </div>\n' + monogram + '\n' +
' </div>\n</div>';
}
function renderKiriPreview() {
var preview = document.getElementById('kiriPreview');
if (preview) preview.innerHTML = buildKiriLetter();
}
function generateKiriHTML() {
var styles = document.getElementById('kiriLetterStyles').textContent.trim();
document.getElementById('kiriOutput').value = '[' + 'html]\n<style>\n' + styles + '\n</style>\n' + buildKiriLetter() + '\n[/' + 'html]';
}
(function() {
['kiriTitle','kiriText','kiriColor','kiriSheet','kiriFont'].forEach(function(id) {
var field = document.getElementById(id);
field.addEventListener('input',renderKiriPreview);
field.addEventListener('change',renderKiriPreview);
});
document.querySelectorAll('input[name="kiriSeal"]').forEach(function(field) {
field.addEventListener('change',renderKiriPreview);
});
renderKiriPreview();
})();
</script>
[/html]
