шаблон хронологии (необязательно)

[hideprofile]
[html]

<div class="header-box">
ВНИМАНИЕ!
</div>

<div class="guide-block">В целях упрощения процедуры заполнения хронологии, мы разработали генератор хронологии. Напоминаем, что хронология на нашем проекте не является обязательной и введена исключительно для вашего удобства. Хронологию можно разместить следующим сообщением после анкеты в теме с анкетой вашего персонажа.</div>
</div>

</div>
</div>

/* FIX MYBB */
.rules-mybb-fix, .rules-mybb-fix * { overflow: visible; box-sizing: border-box; }

/* Основной блок */
.main-box {
width: 850px;
margin: 2px auto !important;
background: url("https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg") repeat;
border-radius: 20px;
padding: 5px;
font-family: 'Cinzel', serif;
}

.main-box a {
font-family: inherit !important;
}

/* Второй уровень */
.inner-box {
background: #c7c7c7;
border-radius: 15px;
padding: 5px;
}

/* Верхний прямоугольник */
.header-box {
background: url("https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg") repeat;
border-radius: 12px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
color: #c7c7c7;
}

/* GUIDE BLOCKS */
.guide-block {
position: relative;
padding: 10px;
margin: 10px 5px 5px 5px;
border-radius: 16px;
border: 1px solid #a9a9a9;
font-size: 18px;
text-indent: 25px;
text-align: justify;
font-family: 'Comfortaa';
}

a {
color: #744D37 !important;
}
a:hover {
color: #AF6F51 !important;
}
</style>

<div class="archive-title" style="text-align:center; font-size:25px;">ГЕНЕРАТОР ХРОНОЛОГИИ</div>

<div class="mode-switch">
<label><input type="radio" name="mode" value="chronology" checked> ХРОНОЛОГИЯ</label>
<label><input type="radio" name="mode" value="episode"> ЭПИЗОД</label>
</div>

<div class="archive-title">ЭПИЗОДЫ</div>
<div id="episodes"></div>

<div class="archive-title" style="margin-top:20px;">АЛЬТЕРНАТИВНАЯ РЕАЛЬНОСТЬ</div>
<div id="altEpisodes"></div>

<div style="margin-top:10px;">
<button onclick="addEpisode()">+ ЭПИЗОД</button>
<button onclick="addAlt()">+ АЛЬТЕРНАТИВА</button>
</div>

<div style="margin-top:10px;">
<button onclick="generateCode()">СГЕНЕРИРОВАТЬ</button>
<button onclick="copyCode()">СКОПИРОВАТЬ</button>
</div>

<div id="copyMsg" style="display:none; text-align:center; margin-top:10px;">
КОД УСПЕШНО СКОПИРОВАН
</div>

<textarea id="output"></textarea>
<details style='font-size:14px; border: 1px black solid; border-radius:10px; margin-top: 10px;'>
<summary style='text-align: center; margin: 10px;'><strong>ИНСТРУКЦИЯ</strong></summary>
<div class="generator-instructions">

<div class="instruction-block">
<div class="instruction-title">Использование генератора</div>

<div class="instruction-text">
Генератор предназначен для создания оформленных записей эпизодов.
Заполните поля и получите готовый результат для публикации.
</div>
</div>

<div class="instruction-block">
<div class="instruction-title">Добавление записей</div>

<div class="instruction-text">
Создавайте новые записи с помощью кнопок добавления.
Введите название эпизода, ссылку на него и укажите дату.
</div>
</div>

<div class="instruction-block">
<div class="instruction-title">Хронология и Эпизод</div>

<div class="instruction-text">
Активируйте радиокнопку "Хроонлогия", если вам нужна сама хронология, или "Эпизод", если вам нужно дополнить уже имеющуюся хронологию.
</div>
</div>

<div class="instruction-block">
<div class="instruction-title">Отметка статуса</div>

<div class="instruction-text">
Отметьте запись как завершённую (если это необходимо) с помощью специальной кнопки (первый крестик справа от поля ввода).
Такие записи отображаются иначе и помечаются как закрытые.
</div>
</div>

<div class="instruction-block">
<div class="instruction-title">Удаление</div>

<div class="instruction-text">
Если запись была добавлена ошибочно, её можно удалить (бордовый крестик справа от поля ввода).
</div>
</div>

<div class="instruction-block">
<div class="instruction-title">Создание результата</div>

<div class="instruction-text">
После заполнения нажмите кнопку генерации.
Результат появится ниже и будет готов для использования.
</div>
</div>

<div class="instruction-block">
<div class="instruction-title">Копирование</div>

<div class="instruction-text">
Нажмите кнопку копирования, чтобы перенести результат в буфер обмена.
После успешного копирования появится подтверждение.
</div>
</div>

</div>
</details>
</div>
</div>
</div>

.weekly-wrapper { width:850px; margin:2px auto !important; padding:5px; font-family:'Cinzel', serif; font-weight:bold;}
.weekly-bg { padding:5px; background:url(https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg) repeat; border-radius:20px;}
.weekly-inner { background:#c7c7c7; padding:15px; border-radius:15px;}

.archive-title { font-size:16px; margin-bottom:10px; border-bottom:1px solid #777;}

.mode-switch { display:flex; gap:20px; margin-bottom:10px;}
.mode-switch label { display:flex; align-items:center; gap:5px;}

.episode-row {
display: grid;
grid-template-columns: 100px 1fr 1.5fr 30px 30px;
gap: 8px;
margin-bottom: 10px;
align-items: center;
}

.episode-row.alt {
grid-template-columns: 1fr 1.5fr 30px 30px;
}

input {
width: 100%;
box-sizing: border-box;
padding: 6px;
border: none;
font-family: inherit;
}

.episode-row.alt { grid-template-columns: 1fr 1fr 40px 30px; }

input { padding:4px; border:none; width:100%; border-radius:5px; background: #e0dede !important; }

.close-btn { cursor:pointer; opacity:0.3; text-align:center; }
.remove-btn { cursor:pointer; color:#6b3b3b; text-align:center; }

textarea {
width: 100%;
height: 150px;
resize: none;
margin-top: 10px;
font-family: monospace;
box-sizing: border-box;
display: block;
background: #e0dede !important;
}

.weekly-inner textarea {
width: 100%;
box-sizing: border-box;
border-radius:15px;
margin-top:10px;
}
input {
font-family: 'Cinzel', serif !important;
font-size: 14px !important;
}
button {
padding:5px 10px;
background:url(https://upforme.ru/uploads/001c/a4/b9/3/943373.jpg) repeat;
color:white;
border:none;
cursor:pointer;
border-radius:5px;
font-family:'Cinzel', serif;
}
.generator-instructions {
width: 100%;
margin-top: 20px;
font-family: 'Cinzel', serif;
}

.instruction-block {
background: rgba(199, 199, 199, 0.85);
border: 1px solid #a9a9a9;
border-radius: 10px;
padding: 12px 14px;
margin: 12px;
font-family: 'Comfortaa';
}

.instruction-title {
font-size: 20px;
letter-spacing: 2px;
border-bottom: 1px solid #a9a9a9;
margin-bottom: 6px;
padding-bottom: 4px;
}

.instruction-text {
font-size: 18px;
line-height: 1.4;
font-weight:normal !important;
}
</style>

function createRow(isAlt=false){
const div=document.createElement('div');
div.className='episode-row'+(isAlt?' alt':'');

div.innerHTML = isAlt
? `<input placeholder="Название">
<input placeholder="Ссылка">
<div class="close-btn">✖</div>
<div class="remove-btn">✕</div>`
: `<input placeholder="Дата">
<input placeholder="Название">
<input placeholder="Ссылка">
<div class="close-btn">✖</div>
<div class="remove-btn">✕</div>`;

let closed=false;

const closeBtn=div.querySelector('.close-btn');
closeBtn.onclick=()=>{
closed=!closed;
div.dataset.closed=closed;
closeBtn.style.opacity=closed?1:0.3;
};

div.querySelector('.remove-btn').onclick=()=>div.remove();

return div;
}

function addEpisode(){ episodesEl.appendChild(createRow()); }
function addAlt(){ altEl.appendChild(createRow(true)); }

function getStyle(){
return `[html]<style>
@font-face {
font-family:'Cinzel';
src:url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf');
}
.weekly-wrapper { width:600px; margin:auto; padding:5px; font-family:'Cinzel', serif; font-weight:bold;}
.weekly-bg { padding:5px; background:url(https://i.ibb.co/0xP0jH4/6bbf97e48d3c1d … 564e74.jpg) repeat; border-radius:10px;}
.weekly-inner { background:#c7c7c7; padding:15px; border-radius:10px;}
.archive-title { font-size:16px; letter-spacing:3px; margin-bottom:10px; border-bottom:1px solid #777;}
.episode-row { display:grid; grid-template-columns:90px 1fr 70px; padding:6px 4px; font-size:13px;}
.episode-row.alt { grid-template-columns:1fr 70px;}
.episode-name a { text-decoration:none; color:#2f5f2f !important; font-weight:bold !important;}
.episode-name.closed a { color:#6b3b3b !important;}
.episode-status.active { color:#2f5f2f;}
.episode-status.closed { color:#6b3b3b;}
</style>\n`;
}

function generateCode(){

const mode = document.querySelector('input[name="mode"]:checked').value;

let html = '';

if(mode === 'episode'){

[...episodesEl.children].forEach(r=>{
const i=r.querySelectorAll('input');
const closed=r.dataset.closed==='true';

html += `<div class="episode-row">
`;

if(i[0].value){
html += `<div class="episode-date">${i[0].value}</div>
`;
}

html += `<div class="episode-name ${closed?'closed':''}">
<a href="${i[2].value}">${i[1].value}</a>
</div>
<div class="episode-status ${closed?'closed':'active'}">${closed?'ЗАКРЫТ':'ОТКРЫТ'}</div>
</div>

/*ДЛЯ ЗАКРЫТИЯ ЭПА ПОМЕНЯТЬ "active" на "closed"*/
`;
});

// альтернатива (тоже только строки)
[...altEl.children].forEach(r=>{
const i=r.querySelectorAll('input');
const closed=r.dataset.closed==='true';

html += `<div class="episode-row alt">
<div class="episode-name ${closed?'closed':''}">
<a href="${i[1].value}">${i[0].value}</a>
</div>
<div class="episode-status ${closed?'closed':'active'}">${closed?'ЗАКРЫТ':'ОТКРЫТ'}</div>
</div>

/*ДЛЯ ЗАКРЫТИЯ ЭПА ПОМЕНЯТЬ "active" на "closed"*/
`;
});
}

if(mode === 'chronology'){

html += getStyle(); // стили тут

html += `<div class="weekly-wrapper">
<div class="weekly-bg">
<div class="weekly-inner">

<div class="archive-block">
<div class="archive-title">ЭПИЗОДЫ</div>
`;

[...episodesEl.children].forEach(r=>{
const i=r.querySelectorAll('input');
const closed=r.dataset.closed==='true';

html += `<div class="episode-row">
`;

if(i[0].value){
html += `<div class="episode-date">${i[0].value}</div>
`;
}

`;
});

html += `
</div>

<div class="archive-block" style="margin-top:20px;">
<div class="archive-title">АЛЬТЕРНАТИВНАЯ РЕАЛЬНОСТЬ</div>
`;

[...altEl.children].forEach(r=>{
const i=r.querySelectorAll('input');
const closed=r.dataset.closed==='true';

html += `
</div>

</div>
</div>
</div>[` + `/html]`;
}

output.value = html;
}

function copyCode() {
const text = output.value;

if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(text)
.then(() => showCopyMsg())
.catch(() => fallbackCopy());
} else {
// fallback для старых браузеров
fallbackCopy();
}

function fallbackCopy() {
// временно выделяем textarea, чтобы сработало copy
output.select();
output.setSelectionRange(0, 99999); // для мобильных
document.execCommand('copy');
showCopyMsg();
}

function showCopyMsg() {
msg.style.display = 'block';
setTimeout(() => msg.style.display = 'none', 2000);
}
}

function showMsg(){
msg.style.display='block';
setTimeout(()=>msg.style.display='none',2000);
}

addEpisode();
</script>[/html]

Вектор Пламени

Меню навигации

Пользовательские ссылки

Информация о пользователе

шаблон хронологии (необязательно)

Сообщений 1 страница 1 из 1

Поделиться12026-03-24 02:50:32