><
Страница: 1
Сообщений 1 страница 3 из 3
ПеревестиПоделиться12026-06-06 14:06:08
- Администратор
- Адам Ландау, 30темный колдун в розыске
Никто мной не правит, и не мне выбирать, кто мой бог и что правильно
- Сообщений: 51
- Уважение: +0
- деньги: 6275
- Последний визит:
Вчера 21:18:06 сhoke me like you hate me but you love me 
Поделиться22026-06-06 14:12:13
- Администратор
- Адам Ландау, 30темный колдун в розыске
Никто мной не правит, и не мне выбирать, кто мой бог и что правильно - Сообщений: 51
- Уважение: +0
- деньги: 6275
- Последний визит:
Вчера 21:18:06 сhoke me like you hate me but you love me
[html]<style>
@font-face {
font-family: 'kiri-youmurdererbb';
src: url('https://forumstatic.ru/files/001c/0c/35/65006.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'kiri-venecia';
src: url('https://forumstatic.ru/files/001c/0c/35/90521.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'kiri-roadrage';
src: url('https://forumstatic.ru/files/001c/0c/35/98702.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'kiri-majestic';
src: url('https://forumstatic.ru/files/001c/0c/35/16562.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'kiri-christmas';
src: url('https://forumstatic.ru/files/001c/0c/35/64381.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'kiri-amphicyr';
src: url('https://forumstatic.ru/files/001c/0c/35/13711.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
.kiriw-wrapper {
font-family: Georgia, serif;
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.kiriw-wrapper input,
.kiriw-wrapper textarea,
.kiriw-wrapper select {
font-size: 16px;
padding: 10px;
margin: 10px 0;
width: 100%;
border: 1px solid #ccc;
box-sizing: border-box;
}
.kiriw-wrapper input[type="button"] {
background: var(--sec-accent);
color: #e3e3e3;
border: none;
cursor: pointer;
transition: .2s ease;
font-weight: bold;
text-transform: uppercase;
box-shadow: none;
}
.kiriw-wrapper input[type="button"]:hover {
filter: brightness(1.08);
}
.kiriw-wrapper textarea {
height: 180px;
resize: vertical;
}
.kiriw-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.kiriw-row > div {
flex: 1 1 300px;
}
.kiriw-note {
font-size: 13px;
margin-top: -5px;
margin-bottom: 10px;
}
.cover-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 18px;
margin: 15px 0 20px;
}
.cover-item {
text-align: center;
width: 80px;
}
.cover-item img {
width: 70px;
height: 70px;
object-fit: contain;
display: block;
margin: 0 auto;
background: transparent;
border: none;
padding: 0;
box-sizing: border-box;
}
.cover-list input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 14px;
height: 14px;
border: 2px solid #888;
border-radius: 50%;
background-color: var(--main-bg);
margin-bottom: 8px;
cursor: pointer;
}
.cover-list input[type="radio"]:checked {
background-color: var(--sec-accent);
border-color: var(--sec-accent);
}
.kiriw-count {
font-weight: bold;
color: var(--sec-accent);
}
#kiriFont {
font-size: 16px;
line-height: 1.2;
padding: 8px 10px;
}
#kiriFont option {
font-size: 16px;
line-height: 1.2;
background: var(--main-bg);
color: inherit;
}
#kiriFont option[value="kiri-font-amphicyr"] {
font-family: 'kiri-amphicyr', serif;
}
#kiriFont option[value="kiri-font-youmurdererbb"] {
font-family: 'kiri-youmurdererbb', serif;
}
#kiriFont option[value="kiri-font-venecia"] {
font-family: 'kiri-venecia', serif;
}
#kiriFont option[value="kiri-font-roadrage"] {
font-family: 'kiri-roadrage', serif;
}
#kiriFont option[value="kiri-font-majestic"] {
font-family: 'kiri-majestic', serif;
}
#kiriFont option[value="kiri-font-christmas"] {
font-family: 'kiri-christmas', serif;
}
</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" onkeyup="countKiriInitials()" 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>
</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:10px;">печать</div>
<div class="cover-list">
<label class="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">
</label>
<label class="cover-item">
<input type="radio" name="kiriSeal" value="https://cdn.imgchest.com/files/7f972201106b.png">
<img src="https://cdn.imgchest.com/files/7f972201106b.png">
</label>
<label class="cover-item">
<input type="radio" name="kiriSeal" value="https://cdn.imgchest.com/files/0032a793a4e9.png">
<img src="https://cdn.imgchest.com/files/0032a793a4e9.png">
</label>
<label class="cover-item">
<input type="radio" name="kiriSeal" value="https://cdn.imgchest.com/files/c4bae208db0e.png">
<img src="https://cdn.imgchest.com/files/c4bae208db0e.png">
</label>
<label class="cover-item">
<input type="radio" name="kiriSeal" value="https://cdn.imgchest.com/files/c81cf1501dd0.png">
<img src="https://cdn.imgchest.com/files/c81cf1501dd0.png">
</label>
<label class="cover-item">
<input type="radio" name="kiriSeal" value="https://cdn.imgchest.com/files/af350b217889.png">
<img src="https://cdn.imgchest.com/files/af350b217889.png">
</label>
<label class="cover-item">
<input type="radio" name="kiriSeal" value="https://cdn.imgchest.com/files/7e016eb17269.png">
<img src="https://cdn.imgchest.com/files/7e016eb17269.png">
</label>
<label class="cover-item">
<input type="radio" name="kiriSeal" value="none">
<div style="height:70px;display:flex;align-items:center;justify-content:center;">нет</div>
</label>
</div>
<input type="button" value="Создать HTML" onclick="generateKiriHTML()">
<textarea id="kiriOutput" readonly placeholder="Сгенерированный HTML появится здесь"></textarea>
</div>
<script>
function countKiriInitials() {
var initials = document.getElementById('kiriInitials').value;
initials = initials.replace(/[^A-Za-zА-Яа-яЁё]/g, '');
initials = initials.toUpperCase();
initials = initials.substring(0, 3);
document.getElementById('kiriInitials').value = initials;
document.getElementById('kiriCount').innerHTML = initials.length;
}
function generateKiriHTML() {
var title = document.getElementById('kiriTitle').value;
var text = document.getElementById('kiriText').value;
var initials = document.getElementById('kiriInitials').value;
var color = document.getElementById('kiriColor').value;
var sheet = document.getElementById('kiriSheet').value;
var font = document.getElementById('kiriFont').value;
var seal = document.querySelector('input[name="kiriSeal"]:checked').value;
var initialsClass = 'kiri-monogram-letter';
if (initials.length == 2) {
initialsClass = 'kiri-monogram-letter kiri-double';
}
if (initials.length == 3) {
initialsClass = 'kiri-monogram-letter kiri-triple';
}
var monogramHtml = '';
if (seal != 'none') {
monogramHtml =
' <div class="kiri-monogram">' +
' <img class="kiri-monogram-img" src="' + seal + '" alt="">' +
' <div class="' + initialsClass + '" style="--seal-color:' + color + ';">' + initials + '</div>' +
' </div>';
}
var html =
'<link rel="stylesheet" href="https://forumstatic.ru/files/001c/6d/19/29725.css?v=2">' +
'<div class="kiri-wrap ' + font + '">' +
' <div class="' + sheet + '">' +
' <div class="kiri-inner">' +
' <div class="kiri-title">' + title + '</div>' +
' <div class="kiri-text">' + text + '</div>' +
' </div>' +
monogramHtml +
' </div>' +
'</div>';
document.getElementById('kiriOutput').value = html;
}
</script>[/html]
Поделиться32026-06-06 14:31:23
- Администратор
- Адам Ландау, 30темный колдун в розыске
Никто мной не правит, и не мне выбирать, кто мой бог и что правильно - Сообщений: 51
- Уважение: +0
- деньги: 6275
- Последний визит:
Вчера 21:18:06 сhoke me like you hate me but you love me
[html]<div class="arion-wrap arion-font-youmurdererbb"><div class="arion-sheet"><div class="arion-inner"><div class="arion-title">Друг...</div><div class="arion-text">fff</div></div><div class="arion-monogram"><img class="arion-monogram-img" src="https://cdn.imgchest.com/files/0032a793a4e9.png" alt=""><div class="arion-monogram-letter arion-double" style="--seal-color:#9E703C;">FF</div></div></div></div>[/html]
Страница: 1
