Шаблон анкеты

[html]

<div id="zero-generator" style="background: #0a0a12; padding: 20px; border: 2px solid #00f3ff; border-radius: 10px; font-family: 'Segoe UI', sans-serif; color: #fff; max-width: 800px; margin: 20px auto;">
<h2 style="color: #00f3ff; text-align: center; text-transform: uppercase; letter-spacing: 2px; margin-top: 0;">Система Регистрации Персонажа v2.0</h2>
<p style="text-align: center; color: #888; font-size: 0.9rem;">Заполните данные — получите код для форума</p>

<form id="charForm" onsubmit="event.preventDefault(); generateCode();">

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;">
<div>
<label style="display: block; color: #00f3ff; margin-bottom: 5px; font-size: 0.9rem;">Имя (Кириллица)</label>
<input type="text" id="nameRu" required style="width: 100%; background: #1a1a2e; border: 1px solid #333; color: #fff; padding: 8px; border-radius: 4px;">
</div>
<div>
<label style="display: block; color: #00f3ff; margin-bottom: 5px; font-size: 0.9rem;">Name (Latin)</label>
<input type="text" id="nameEn" required style="width: 100%; background: #1a1a2e; border: 1px solid #333; color: #fff; padding: 8px; border-radius: 4px;">
</div>
</div>

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin-bottom: 15px;">
<div>
<label style="display: block; color: #00f3ff; margin-bottom: 5px; font-size: 0.9rem;">Раса</label>
<input type="text" id="race" placeholder="Например: Эльф" required style="width: 100%; background: #1a1a2e; border: 1px solid #333; color: #fff; padding: 8px; border-radius: 4px;">
</div>
<div>
<label style="display: block; color: #00f3ff; margin-bottom: 5px; font-size: 0.9rem;">Пол</label>
<select id="gender" style="width: 100%; background: #1a1a2e; border: 1px solid #333; color: #fff; padding: 8px; border-radius: 4px;">
<option value="♂ Мужской">Мужской</option>
<option value="♀ Женский">Женский</option>
<option value="⚧ Другое">Другое / Конструкт</option>
</select>
</div>
<div>
<label style="display: block; color: #00f3ff; margin-bottom: 5px; font-size: 0.9rem;">Возраст</label>
<input type="text" id="age" placeholder="Лет" required style="width: 100%; background: #1a1a2e; border: 1px solid #333; color: #fff; padding: 8px; border-radius: 4px;">
</div>
</div>

<div style="margin-bottom: 15px;">
<label style="display: block; color: #00f3ff; margin-bottom: 5px; font-size: 0.9rem;">Ссылка на Арт</label>
<input type="url" id="artUrl" placeholder="https://..." required style="width: 100%; background: #1a1a2e; border: 1px solid #333; color: #fff; padding: 8px; border-radius: 4px;">
</div>

<div style="background: rgba(0, 243, 255, 0.05); padding: 15px; border-radius: 6px; margin-bottom: 15px; border: 1px solid #333;">
<h3 style="margin: 0 0 10px 0; color: #fff; font-size: 1rem;">Класс и Специализация</h3>
<div style="display: grid; grid-template-columns: 1fr 2fr; gap: 15px;">
<div>
<label style="display: block; color: #aaa; margin-bottom: 5px; font-size: 0.8rem;">Базовый Архетип</label>
<select id="classBase" style="width: 100%; background: #0f0f1a; border: 1px solid #333; color: #fff; padding: 8px; border-radius: 4px;">
<option value="Воин (Fighter)">Воин</option>
<option value="Волшебник (Wizard)">Волшебник</option>
<option value="Жрец (Cleric)">Жрец</option>
<option value="Плут (Rogue)">Плут</option>
<option value="Варвар (Barbarian)">Варвар</option>
<option value="Бард (Bard)">Бард</option>
<option value="Друид (Druid)">Друид</option>
<option value="Паладин (Paladin)">Паладин</option>
<option value="Следопыт (Ranger)">Следопыт</option>
<option value="Чародей (Sorcerer)">Чародей</option>
<option value="Колдун (Warlock)">Колдун</option>
<option value="Монах (Monk)">Монах</option>
</select>
</div>
<div>
<label style="display: block; color: #aaa; margin-bottom: 5px; font-size: 0.8rem;">Описание специализации</label>
<textarea id="classDesc" rows="2" placeholder="Кто ваш персонаж?" required style="width: 100%; background: #0f0f1a; border: 1px solid #333; color: #fff; padding: 8px; border-radius: 4px; resize: vertical;"></textarea>
</div>
</div>
</div>

<div style="margin-bottom: 15px;">
<label style="display: block; color: #00f3ff; margin-bottom: 5px; font-size: 0.9rem;">Тип Способностей</label>
<div style="margin-bottom: 10px;">
<input type="radio" id="typeMagic" name="abilityType" value="magic" checked onchange="toggleAbilityInput()">
<label for="typeMagic" style="color: #ccc; cursor: pointer;">Магический (Школы 1-9 ранг)</label>
<input type="radio" id="typeCombat" name="abilityType" value="combat" onchange="toggleAbilityInput()" style="margin-left: 15px;">
<label for="typeCombat" style="color: #ccc; cursor: pointer;">Боевой / Физический</label>
</div>
<div id="magicInput">
<label style="display: block; color: #aaa; font-size: 0.8rem;">Школа магии и Ранг</label>
<input type="text" id="magicDesc" placeholder="Огненная магия (5 ранг), Иллюзии (2 ранг)" style="width: 100%; background: #1a1a2e; border: 1px solid #333; color: #fff; padding: 8px; border-radius: 4px;">
</div>
<div id="combatInput" style="display: none;">
<label style="display: block; color: #aaa; font-size: 0.8rem;">Боевые навыки</label>
<textarea id="combatDesc" rows="2" placeholder="Фехтование, Стрельба из лука..." style="width: 100%; background: #1a1a2e; border: 1px solid #333; color: #fff; padding: 8px; border-radius: 4px; resize: vertical;"></textarea>
</div>
</div>

<div style="background: rgba(255,255,255,0.03); padding: 15px; border-radius: 6px; margin-bottom: 15px;">
<h3 style="margin: 0 0 10px 0; color: #fff; font-size: 1rem; text-align: center;">Характеристики (DnD 5e)</h3>
<div style="display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; text-align: center;">
<div><label style="font-size: 0.7rem; color: #888;">STR</label><input type="number" id="str" value="10" style="width: 100%; background: #0f0f1a; border: 1px solid #333; color: #fff; padding: 5px; border-radius: 4px;"></div>
<div><label style="font-size: 0.7rem; color: #888;">DEX</label><input type="number" id="dex" value="10" style="width: 100%; background: #0f0f1a; border: 1px solid #333; color: #fff; padding: 5px; border-radius: 4px;"></div>
<div><label style="font-size: 0.7rem; color: #888;">CON</label><input type="number" id="con" value="10" style="width: 100%; background: #0f0f1a; border: 1px solid #333; color: #fff; padding: 5px; border-radius: 4px;"></div>
<div><label style="font-size: 0.7rem; color: #888;">INT</label><input type="number" id="int" value="10" style="width: 100%; background: #0f0f1a; border: 1px solid #333; color: #fff; padding: 5px; border-radius: 4px;"></div>
<div><label style="font-size: 0.7rem; color: #888;">WIS</label><input type="number" id="wis" value="10" style="width: 100%; background: #0f0f1a; border: 1px solid #333; color: #fff; padding: 5px; border-radius: 4px;"></div>
<div><label style="font-size: 0.7rem; color: #888;">CHA</label><input type="number" id="cha" value="10" style="width: 100%; background: #0f0f1a; border: 1px solid #333; color: #fff; padding: 5px; border-radius: 4px;"></div>
</div>
</div>

<div style="margin-bottom: 15px;">
<label style="display: block; color: #00f3ff; margin-bottom: 5px; font-size: 0.9rem;">Биография</label>
<textarea id="bio" rows="4" placeholder="История персонажа..." required style="width: 100%; background: #1a1a2e; border: 1px solid #333; color: #fff; padding: 8px; border-radius: 4px; resize: vertical;"></textarea>
</div>

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;">
<div>
<label style="display: block; color: #00f3ff; margin-bottom: 5px; font-size: 0.9rem;">Способ связи</label>
<input type="text" id="contact" required style="width: 100%; background: #1a1a2e; border: 1px solid #333; color: #fff; padding: 8px; border-radius: 4px;">
</div>
<div style="display: flex; align-items: center; justify-content: center; background: rgba(0, 255, 0, 0.1); border: 1px solid #0f0; border-radius: 4px;">
<input type="checkbox" id="rulesAgree" required style="width: 20px; height: 20px; margin-right: 10px;">
<label for="rulesAgree" style="color: #0f0; cursor: pointer; font-weight: bold;">Согласен с правилами</label>
</div>
</div>

<button type="submit" style="width: 100%; background: #00f3ff; color: #000; font-weight: bold; padding: 15px; border: none; border-radius: 4px; cursor: pointer; text-transform: uppercase; font-size: 1.1rem;">
СКОМПИЛИРОВАТЬ АНКЕТУ
</button>
</form>

<div id="resultBox" style="display: none; margin-top: 20px; border-top: 2px dashed #333; padding-top: 20px;">
<h3 style="color: #fff;">✅ Готово! Используйте HTML код:</h3>
<p style="color: #888; font-size: 0.9rem; margin-bottom: 10px;">Скопируйте код ниже и вставьте в пост на форуме:</p>
<textarea id="outputHTML" rows="20" readonly style="width: 100%; background: #000; border: 1px solid #00f3ff; color: #0f0; font-family: monospace; padding: 10px; font-size: 0.8rem;"></textarea>
<button onclick="copyToClipboard('outputHTML')" style="margin-top: 10px; background: #00f3ff; color: #000; border: none; padding: 10px 20px; border-radius: 3px; cursor: pointer; font-weight: bold; font-size: 1rem;">📋 КОПИРОВАТЬ КОД</button>
</div>
</div>

function getMod(score) {
const num = parseInt(score);
if (isNaN(num)) return 0;
return Math.floor((num - 10) / 2);
}

function getModSign(mod) {
return mod >= 0 ? '+' + mod : mod;
}

function copyToClipboard(id) {
const el = document.getElementById(id);
el.select();
document.execCommand('copy');
alert('✅ Скопировано! Теперь вставьте код в новое сообщение на форуме.');
}

function generateCode() {
const d = {
nameRu: document.getElementById('nameRu').value,
nameEn: document.getElementById('nameEn').value,
race: document.getElementById('race').value,
gender: document.getElementById('gender').value,
age: document.getElementById('age').value,
art: document.getElementById('artUrl').value,
classBase: document.getElementById('classBase').value,
classDesc: document.getElementById('classDesc').value,
bio: document.getElementById('bio').value,
contact: document.getElementById('contact').value,
str: parseInt(document.getElementById('str').value) || 10,
dex: parseInt(document.getElementById('dex').value) || 10,
con: parseInt(document.getElementById('con').value) || 10,
int: parseInt(document.getElementById('int').value) || 10,
wis: parseInt(document.getElementById('wis').value) || 10,
cha: parseInt(document.getElementById('cha').value) || 10,
};

let abilText = document.getElementById('typeMagic').checked
? document.getElementById('magicDesc').value
: document.getElementById('combatDesc').value;
let abilType = document.getElementById('typeMagic').checked ? 'Магический путь' : 'Боевая специализация';

const stats = [
{name:'СИЛА', val:d.str},
{name:'ЛОВКОСТЬ', val:d.dex},
{name:'ВЫНОС', val:d.con},
{name:'ИНТ', val:d.int},
{name:'МУДР', val:d.wis},
{name:'ХАР', val:d.cha}
];

document.getElementById('outputHTML').value = htmlCode;
document.getElementById('resultBox').style.display = 'block';
document.getElementById('resultBox').scrollIntoView({behavior: 'smooth'});
}
</script>[/html]

Zero Frame

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

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

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

Шаблон анкеты

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

Поделиться12026-03-28 13:33:11