Здесь делается вжух 🪄

bran: Его сильная девочка сидела на холодных ступенях и плакала из-за него. Не из-за договора. Не из-за похорон, ковена, детей, бессонных ночей или дома, требовавшего от неё больше, чем следовало требовать от одного человека. Из-за него.
sonya kurt
vinny romeo
навигация
внешности фак расы организации нужные

BROKEN GEIS

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

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » BROKEN GEIS » imbolc » шаблон анкеты

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

Страница: 1
Тема закрыта

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

1

  • Автор: broken geis
  • Администратор
  • broken geis
  • Сообщений: 69
  • Уважение: +401
  • Последний визит:
    Сегодня 00:02:00

шаблон анкеты
название темы — имя фамилия на латиницей, возраст цифрой, раса латиницей (подсказка ниже);
вторым сообщение не забывайте отправлять коды

названия рас

https://upforme.ru/uploads/001c/bc/72/2/297486.png
внешность # возраст # раса # род деятельности # локация проживания
name surname
имя фамилия на русском

информация о персонаже в свободной форме заполнения. можете заполнить поле мемами или аестетиками, если не планируете плотно участвовать в квестах или общем сюжете. если хотите в квесты - нужно хотя бы немного информации о вашем персонаже.

[html]<style>
/* ==== Виджет анкеты (rf-anketa) ==== */
/* Все селекторы ограничены корневым блоком .rf-anketa-widget,
   чтобы не конфликтовать со стилями темы форума */

.rf-anketa-widget {
  max-width: 660px;
  margin: 12px auto;
  padding: 14px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 13px;
  border: solid #b4c6d9;
    border-radius: 27px;
    border-width: 1.5px;
    background-color: #e4e4e4;
}

.rf-anketa-widget * {
  box-sizing: border-box;
}

.rf-anketa-field {
  margin-bottom: 10px;
}

.rf-anketa-field label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  opacity: 0.8;
}

.rf-anketa-input {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid #b4c6d9!important;
  border-radius: 4px;
  background: #f7f7f7!important;
}

.rf-anketa-img-list {
  margin-bottom: 6px;
}

.rf-anketa-img-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.rf-anketa-img-row .rf-anketa-input {
  flex: 1 1 auto;
}

.rf-anketa-btn-remove {
  flex: 0 0 auto;
  width: 28px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 4px;
  background: rgba(0,0,0,0.05);
  cursor: pointer;
}

.rf-anketa-btn-remove:hover {
  background: rgba(0,0,0,0.1);
}

.rf-anketa-btn-add {
padding: 5px 10px;
    font-size: 12px;
    border: none;
    border-radius: 4px;
    background: #151515;
    cursor: pointer;
}

.rf-anketa-btn-add:hover {
  background: #5959a1;
}

.rf-anketa-bio {
  width: 100%;
  min-height: 90px;
  max-height: 300px;
  overflow-y: auto;
  padding: 6px 8px;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 4px;
  background: rgba(255,255,255,0.6);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.rf-anketa-buttons {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}

.rf-anketa-btn {
  flex: 1 1 auto;
  padding: 7px 10px;
  font-size: 13px;
  border: none;
  border-radius: 4px;
  background: #000;
  cursor: pointer;
}

.rf-anketa-btn:hover {
  background: #5959a1;
}

.rf-anketa-output {
  width: 100%;
  min-height: 140px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  border: 1px dashed rgba(0,0,0,0.3);
  border-radius: 4px;
  background: rgba(0,0,0,0.03);
  font-family: monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.rf-anketa-status {
  margin-top: 6px;
  font-size: 12px;
  min-height: 16px;
  opacity: 0.85;
}
</style>

<!-- rf-anketa: форма для заполнения анкеты и генерации готового BB-кода -->
<div class="rf-anketa-widget" data-role="root">

  <div class="rf-anketa-field">
    <label>Ссылки на картинки</label>
    <div class="rf-anketa-img-list" data-role="img-list">
      <div class="rf-anketa-img-row" data-role="img-row">
        <input type="text" class="rf-anketa-input" data-role="input-img" placeholder="https://..." />
        <button type="button" class="rf-anketa-btn-remove" data-action="remove-image" title="Удалить">×</button>
      </div>
    </div>
    <button type="button" class="rf-anketa-btn-add" data-action="add-image">+ Добавить картинку</button>
  </div>

  <div class="rf-anketa-field">
    <label>Внешность</label>
    <input type="text" class="rf-anketa-input" data-role="input-appearance" placeholder="name surname" />
  </div>

  <div class="rf-anketa-field">
    <label>Возраст</label>
    <input type="text" class="rf-anketa-input" data-role="input-age" placeholder="напр. 27" />
  </div>

  <div class="rf-anketa-field">
    <label>Раса</label>
    <input type="text" class="rf-anketa-input" data-role="input-race" placeholder="человек, вампир, оборотень, мэрроу и т.д" />
  </div>

  <div class="rf-anketa-field">
    <label>Род деятельности</label>
    <input type="text" class="rf-anketa-input" data-role="input-occupation" placeholder="чем занимается персонаж" />
  </div>

  <div class="rf-anketa-field">
    <label>Локация проживания</label>
    <input type="text" class="rf-anketa-input" data-role="input-location" placeholder="напр. лондон, юк" />
  </div>

  <div class="rf-anketa-field">
    <label>Имя Фамилия на латинице</label>
    <input type="text" class="rf-anketa-input" data-role="input-name-en" placeholder="name surname" />
  </div>

  <div class="rf-anketa-field">
    <label>Имя Фамилия на русском</label>
    <input type="text" class="rf-anketa-input" data-role="input-name-ru" placeholder="имя фамилия" />
  </div>

  <div class="rf-anketa-field">
    <label>Информация о персонаже в свободной форме</label>
    <div class="rf-anketa-bio" contenteditable="true" data-role="input-bio"></div>
  </div>

  <div class="rf-anketa-buttons">
    <button type="button" class="rf-anketa-btn" data-action="generate">Сгенерировать шаблон</button>
    <button type="button" class="rf-anketa-btn" data-action="copy">Скопировать</button>
  </div>

  <div class="rf-anketa-field">
    <label>Готовый BB-код (можно скопировать вручную)</label>
    <div class="rf-anketa-output" contenteditable="true" data-role="output"></div>
  </div>

  <div class="rf-anketa-status" data-role="status"></div>

</div>

<script>
(function () {
  "use strict";

  var ROOT_SELECTOR = ".rf-anketa-widget";
  var READY_ATTR = "data-rf-anketa-ready";

  // --- сборка BB-тегов, чтобы конвертер форума не съел их раньше времени ---
  function bbTag(name) {
    return String.fromCharCode(91) + name + String.fromCharCode(93);
  }

  // убираем квадратные скобки из введённого текста, чтобы не поломать разметку
  function clean(str) {
    if (!str) {
      return "";
    }
    return String(str).split("[").join("(").split("]").join(")");
  }

  function trim(str) {
    return String(str).replace(/^\s+|\s+$/g, "");
  }

  function getVal(root, role) {
    var el = root.querySelector('[data-role="' + role + '"]');
    if (!el) {
      return "";
    }
    if (el.tagName === "INPUT") {
      return clean(el.value);
    }
    return clean(el.textContent);
  }

  // читаем contenteditable-блок с учётом переносов строк.
  // Разные браузеры по-разному оформляют Enter (<div> на строку, <br>,
  // иногда пустой <div><br></div> для пустой строки), поэтому обходим
  // узлы напрямую, а не полагаемся на textContent или regex по HTML.
  function walkBioNode(node, state) {
    var children = node.childNodes;
    var i;
    var child;
    var tag;
    var isBlock;

    for (i = 0; i < children.length; i++) {
      child = children[i];

      if (child.nodeType === 3) {
        state.text += child.nodeValue;
      } else if (child.nodeType === 1) {
        tag = child.tagName.toLowerCase();

        if (tag === "br") {
          state.text += "\n";
        } else {
          isBlock = (tag === "div" || tag === "p");

          if (isBlock && state.text.length > 0 && state.text.charAt(state.text.length - 1) !== "\n") {
            state.text += "\n";
          }

          walkBioNode(child, state);

          if (isBlock && state.text.length > 0 && state.text.charAt(state.text.length - 1) !== "\n") {
            state.text += "\n";
          }
        }
      }
    }
  }

  function getBioValue(root) {
    var el = root.querySelector('[data-role="input-bio"]');
    if (!el) {
      return "";
    }

    var state = { text: "" };
    walkBioNode(el, state);

    var text = state.text.replace(/\n+$/, "");
    text = clean(text);

    return text;
  }

  function getImages(root) {
    var inputs = root.querySelectorAll('[data-role="input-img"]');
    var result = [];
    var i;
    var val;
    for (i = 0; i < inputs.length; i++) {
      val = trim(clean(inputs[i].value));
      if (val) {
        result.push(val);
      }
    }
    return result;
  }

  function buildTemplate(v) {
    var out = "";
    var i;
    var imgParts;

    out += bbTag("table layout=fixed width=100%");
    out += bbTag("tr") + bbTag("td") + bbTag("/td") + bbTag("/tr");
    out += bbTag("tr");
    out += bbTag("td");

    out += bbTag("align=center");

    imgParts = [];
    for (i = 0; i < v.images.length; i++) {
      imgParts.push(bbTag("img") + v.images[i] + bbTag("/img"));
    }
    out += imgParts.join(" ");
    if (v.images.length > 0) {
      out += "\n";
    }

    out += bbTag("size=9");
    out += v.appearance;
    out += " " + bbTag("b") + "#" + bbTag("/b") + " " + v.age;
    out += " " + bbTag("b") + "#" + bbTag("/b") + " " + v.race;
    out += " " + bbTag("b") + "#" + bbTag("/b") + " " + v.occupation;
    out += " " + bbTag("b") + "#" + bbTag("/b") + " " + v.location;
    out += bbTag("/size");
    out += bbTag("/align");

    out += bbTag("align=center");
    out += bbTag("size=24") + bbTag("b") + bbTag("i") + bbTag("font=Georgia");
    out += v.nameEn;
    out += bbTag("/font") + bbTag("/i") + bbTag("/b") + bbTag("/size");
    out += "\n" + v.nameRu;
    out += bbTag("/align");

    out += bbTag("/td");
    out += bbTag("/tr");
    out += bbTag("/table");

    out += bbTag("table layout=fixed width=100%");
    out += bbTag("tr");
    out += bbTag("td width=10%") + bbTag("/td");
    out += bbTag("td");
    out += "\n" + v.bio + "\n";
    out += bbTag("/td");
    out += bbTag("td width=10%") + bbTag("/td");
    out += bbTag("/tr");
    out += bbTag("/table");

    return out;
  }

  function setStatus(root, text) {
    var el = root.querySelector('[data-role="status"]');
    if (el) {
      el.textContent = text;
    }
  }

  function generate(root) {
    var values = {
      images: getImages(root),
      appearance: getVal(root, "input-appearance"),
      age: getVal(root, "input-age"),
      race: getVal(root, "input-race"),
      occupation: getVal(root, "input-occupation"),
      location: getVal(root, "input-location"),
      nameEn: getVal(root, "input-name-en"),
      nameRu: getVal(root, "input-name-ru"),
      bio: getBioValue(root)
    };

    var output = root.querySelector('[data-role="output"]');
    if (!output) {
      return;
    }

    output.textContent = buildTemplate(values);
    setStatus(root, "Шаблон готов. Можно скопировать.");
  }

  function fallbackCopy(root, output) {
    var range = document.createRange();
    range.selectNodeContents(output);
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);

    var ok = false;
    try {
      ok = document.execCommand("copy");
    } catch (e) {
      ok = false;
    }
    selection.removeAllRanges();

    if (ok) {
      setStatus(root, "Скопировано.");
    } else {
      setStatus(root, "Не удалось скопировать автоматически — выделите текст и нажмите Ctrl+C.");
    }
  }

  function copyOutput(root) {
    var output = root.querySelector('[data-role="output"]');
    if (!output) {
      return;
    }

    var text = output.textContent;
    if (!text) {
      setStatus(root, "Сначала нажмите «Сгенерировать шаблон».");
      return;
    }

    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(text).then(
        function () {
          setStatus(root, "Скопировано.");
        },
        function () {
          fallbackCopy(root, output);
        }
      );
    } else {
      fallbackCopy(root, output);
    }
  }

  // свой closest() по тегу BUTTON, чтобы не зависеть от Element.prototype.closest
  function closestButton(target, root) {
    var node = target;
    while (node && node !== root) {
      if (node.nodeName === "BUTTON" && node.getAttribute("data-action")) {
        return node;
      }
      node = node.parentNode;
    }
    return null;
  }

  // свой closest() по классу (для поиска строки картинки, которую нужно удалить)
  function closestByClass(target, className, root) {
    var node = target;
    while (node && node !== root) {
      if (node.className && (" " + node.className + " ").indexOf(" " + className + " ") !== -1) {
        return node;
      }
      node = node.parentNode;
    }
    return null;
  }

  function addImageRow(root) {
    var list = root.querySelector('[data-role="img-list"]');
    if (!list) {
      return;
    }

    var row = document.createElement("div");
    row.className = "rf-anketa-img-row";
    row.setAttribute("data-role", "img-row");

    var input = document.createElement("input");
    input.type = "text";
    input.className = "rf-anketa-input";
    input.setAttribute("data-role", "input-img");
    input.setAttribute("placeholder", "https://...");

    var removeBtn = document.createElement("button");
    removeBtn.type = "button";
    removeBtn.className = "rf-anketa-btn-remove";
    removeBtn.setAttribute("data-action", "remove-image");
    removeBtn.setAttribute("title", "Удалить");
    removeBtn.textContent = String.fromCharCode(215); // ×

    row.appendChild(input);
    row.appendChild(removeBtn);
    list.appendChild(row);
  }

  function removeImageRow(root, button) {
    var row = closestByClass(button, "rf-anketa-img-row", root);
    if (row && row.parentNode) {
      row.parentNode.removeChild(row);
    }
  }

  function bindRoot(root) {
    if (root.getAttribute(READY_ATTR) === "true") {
      return;
    }
    root.setAttribute(READY_ATTR, "true");

    root.addEventListener("click", function (event) {
      var btn = closestButton(event.target, root);
      if (!btn) {
        return;
      }
      var action = btn.getAttribute("data-action");
      if (action === "generate") {
        generate(root);
      } else if (action === "copy") {
        copyOutput(root);
      } else if (action === "add-image") {
        addImageRow(root);
      } else if (action === "remove-image") {
        removeImageRow(root, btn);
      }
    });
  }

  function init() {
    var roots = document.querySelectorAll(ROOT_SELECTOR);
    for (var i = 0; i < roots.length; i++) {
      bindRoot(roots[i]);
    }
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
  } else {
    init();
  }

  // повторная инициализация на случай отложенной вставки HTML конвертером
  setTimeout(init, 300);
  setTimeout(init, 800);
  setTimeout(init, 1500);
})();
</script>
[/html]

заполнить код вручную
Код:
[table layout=fixed width=100%]
[tr][td][/td][/tr]
[tr]
[td]
[align=center][img]картинку сюда[/img]
[size=9]внешность [b]#[/b] возраст [b]#[/b] раса [b]#[/b] род деятельности [b]#[/b] локация проживания[/size][/align]
[align=center][size=24][b][i][font=Georgia]name surname[/font][/i][/b][/size]
имя фамилия на русском[/align][/td]
[/tr]
[/table]
[table layout=fixed width=100%]
[tr][td width=10%][/td]
[td]
информация о персонаже в свободной форме заполнения. можете заполнить поле мемами или аестетиками, если не планируете плотно участвовать в квестах или общем сюжете. если хотите в квесты - нужно хотя бы немного информации о вашем персонаже.
[/td]
[td width=10%][/td][/tr]
[/table]
шпаргалка для лз

+6

2

  • Автор: broken geis
  • Администратор
  • broken geis
  • Сообщений: 69
  • Уважение: +401
  • Последний визит:
    Сегодня 00:02:00

[html]<style>
@import url('https://fonts.googleapis.com/css2?family=Georgia&family=Spline+Sans+Mono&family=Jost&display=swap');

:root {--textcolor: black;
--headercolor: white;
--backcolorOff: black;
--backcolorOn: #555CA3;
--basecolor1: #E4E4E4;
--basecolor2: #D9D9D9;
--bordercolor: #B4C6D9;}

#base {width: 100%;
height: auto;
min-height: 566px;
overflow: hidden;
border: solid var(--bordercolor);
border-radius: 27px;
border-width: 1.5px;
background-color: var(--basecolor1);
padding: 0;
box-sizing: border-box;}

#title {background-image: url(https://upforme.ru/uploads/001a/cd/5b/2/209498.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 60px;
position: relative;
color: var(--headercolor) !important;
text-align: center;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;}

h1 {font: italic bold 18px 'Georgia', serif !important;
margin: 0;
padding: 0;
color: var(--headercolor) !important;}

#title p {font-family: 'Arial', serif;
font-size: 11px;
margin: 0;
padding: 0;}

.form-container {max-width: 600px;
margin: 0 auto;
padding: 20px;}

.form-group {margin-bottom: 15px;
display: flex;
flex-direction: column;
flex: 1;}

.form-group label {font: italic bold 14px 'Georgia', serif;
color: var(--textcolor);
margin-bottom: 5px;}

.form-group input,
.form-group select,
.form-group textarea {
padding: 8px 12px;
border: 1.5px solid var(--bordercolor);
border-radius: 27px;
font: 400 12px "Jost", sans-serif;
color: var(--textcolor);
background-color: var(--basecolor2);
outline: none;
transition: border-color 0.3s;
width: 100%;
box-sizing: border-box;}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--backcolorOn);}

.form-group textarea {resize: vertical;
min-height: 80px;
border-radius: 18px;}

.form-row {display: flex;
gap: 15px;}

.form-row .form-group {flex: 1;}

.city-row {display: flex;
gap: 10px;
align-items: flex-end;}

.city-row .form-group {flex: 1;
margin-bottom: 15px;}

.city-row .form-group:last-child {flex: 0.8;}

.city-row .form-group select {width: 100%;}

.submit-btn {background-color: var(--backcolorOff);
color: var(--headercolor);
border: none;
border-radius: 27px;
padding: 12px 30px;
font: italic bold 14px 'Georgia', serif;
cursor: pointer;
transition: background-color 0.3s;
width: 100%;
margin-top: 10px;}

.submit-btn:hover {background-color: var(--backcolorOn);}

.form-row:last-child .form-group:last-child {margin-bottom: 0;}

/* ------------------------------------------------ ЧЕК-БОКС ТВИНА ------------------------------------------------ */
.checkbox-row {display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
padding: 10px 15px;
border: 1.5px solid var(--bordercolor);
border-radius: 27px;
background-color: var(--basecolor2);
box-sizing: border-box;}

.checkbox-row input[type="checkbox"] {width: 16px;
height: 16px;
flex: none;
margin: 0;
padding: 0;
accent-color: var(--backcolorOn);
cursor: pointer;}

.checkbox-row label {font: italic bold 14px 'Georgia', serif;
color: var(--textcolor);
margin: 0;
cursor: pointer;}

/* ------------------------------------------------ ЗАБЛОКИРОВАННОЕ ПОЛЕ ------------------------------------------------ */
.form-group.locked {opacity: 0.4;
pointer-events: none;
user-select: none;}

/* ------------------------------------------------ СЧЁТЧИК СИМВОЛОВ ------------------------------------------------ */
.form-group label.with-counter {display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;}

.char-counter {font: 400 11px "Jost", sans-serif;
font-style: normal;
color: var(--textcolor);
opacity: 0.55;
flex-shrink: 0;}

.char-counter.full {color: #8E2B37;
opacity: 1;}

/* ------------------------------------------------ СТИЛИ ДЛЯ УВЕДОМЛЕНИЯ ------------------------------------------------ */
.notification {position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background-color: var(--backcolorOn);
color: var(--headercolor);
padding: 15px 30px;
border-radius: 27px;
font: italic bold 14px 'Georgia', serif;
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;}

.notification.show {opacity: 1;}
</style>

<div id="base">
<div id="title">
<h1>коды заполнения</h1>
<p>заполните все поля и отправьте вторым сообщением</p></div>
   
<div class="form-container">
<form id="characterForm">
<div class="form-row">
<div class="form-group">
<label>ссылка на профиль</label>
<input type="url" placeholder="https://example.com/profile" id="profileLink" required></div>
<div class="form-group">
<label>ссылка на анкету</label>
<input type="url" placeholder="https://example.com/anketa" id="surveyLink" required></div></div>
           
<div class="form-row">
<div class="form-group">
<label>только имя на русском</label>
<input type="text" placeholder="джон" id="nameRu" required></div>
<div class="form-group">
<label>имя фамилия на английском</label>
<input type="text" placeholder="john doe" id="nameEn" required></div></div>
           
<div class="form-row">
<div class="form-group">
<label>имя внешности на английском</label>
<input type="text" placeholder="john doe" id="appearanceName" required></div>
<div class="form-group">
<label>картинка для личной страницы (размер не менее 165х165)</label>
<input type="url" placeholder="https://example.com/image.gif" id="picLink" required>
</div>
</div>
           
<div class="form-group">
<label>текст для лз</label>
<textarea placeholder="ваш любимый вайбовый текст..." id="lzText" required></textarea></div>
           
<div class="city-row">
<div class="form-group">
<label>город на русском</label>
<input type="text" placeholder="лондон" id="cityRu" required></div>
<div class="form-group">
<label>город на английском</label>
<input type="text" placeholder="london" id="cityEn" required></div>
<div class="form-group">
<label>страна</label>
<select id="countrySelect" required>
<option value="uk">англия</option>
<option value="ireland">ирландия</option>
</select></div></div>
           
<div class="form-row">
<div class="form-group">
<label>раса</label>
<select id="raceSelect" required>
<option value="">выберите расу</option>
</select></div>
<div class="form-group">
<label>организация</label>
<select id="orgSelect" required>
<option value="">выберите организацию</option>
</select></div></div>
           
<div class="form-group">
<label class="with-counter">деятельность <span class="char-counter" id="activityCounter">0 / 33</span></label>
<input type="text" placeholder="очень краткое описание деятельности" id="activity" maxlength="33" required></div>

<!-- ------------------------------------------------ БЛОК ТВИНА ------------------------------------------------ -->
<div class="checkbox-row">
<input type="checkbox" id="isTwin">
<label for="isTwin">это твин</label></div>

<div class="form-group locked" id="twinGroup">
<label>ссылка на профиль основного персонажа</label>
<input type="url" placeholder="https://brokengeis.rusff.me/profile.php?id=00" id="mainCharLink" disabled></div>
           
<button type="submit" class="submit-btn">скопировать коды</button>
</form></div></div>

<!-- Уведомление -->
<div class="notification" id="notification">коды скопированы в буфер обмена!</div>

<script>
const races = new Map([
/* ------------------------------------------------ РАСЫ ТУТ ------------------------------------------------ */
["banshee", "банши"],
["vampire", "вампир"],
["witch", "ведьма"],
["witcher", "ведьмак"],
["merrow", "мерроу"],
["shifter", "оборотень"],
["ghost", "призрак"],
["faoladh", "фаолад"],
["faerie", "фейри"],
["human", "человек"]]);

const organizations = new Map([
/* ------------------------------------------------ ОРГАНИЗАЦИИ ТУТ ------------------------------------------------ */
["msa", "министерство сверхъестественных дел"],
["neutral", "нейтралы"],
["oa", "орден энгуса"],
["hunter", "охотники"],
["sss", "свидетели судного дня"]]);

const countries = {
/* ------------------------------------------------ СТРАНЫ ТУТ ------------------------------------------------ */
"uk": "юк",
"ireland": "ир"};

/* ------------------------------------------------ ЗАПОЛНЯЕМ ВЫПАДАЮЩИЙ СПИСОК РАС ------------------------------------------------ */
const raceSelect = document.getElementById('raceSelect');
races.forEach((value, key) => {
const option = document.createElement('option');
option.value = key;
option.textContent = value;
raceSelect.appendChild(option);});

/* ------------------------------------------------ ЗАПОЛНЯЕМ ВЫПАДАЮЩИЙ СПИСОК ОРГАНИЗАЦИЙ ------------------------------------------------ */
const orgSelect = document.getElementById('orgSelect');
organizations.forEach((value, key) => {
const option = document.createElement('option');
option.value = key;
option.textContent = value;
orgSelect.appendChild(option);});

/* ------------------------------------------------ БЛОКИРОВКА / РАЗБЛОКИРОВКА ПОЛЯ ТВИНА ------------------------------------------------ */
const isTwin = document.getElementById('isTwin');
const twinGroup = document.getElementById('twinGroup');
const mainCharLink = document.getElementById('mainCharLink');

function toggleTwinField() {
if (isTwin.checked) {
twinGroup.classList.remove('locked');
mainCharLink.disabled = false;
mainCharLink.setAttribute('required', '');} else {
twinGroup.classList.add('locked');
mainCharLink.disabled = true;
mainCharLink.removeAttribute('required');
mainCharLink.value = '';
mainCharLink.style.borderColor = '';}}

isTwin.addEventListener('change', toggleTwinField);
toggleTwinField();

/* ------------------------------------------------ СЧЁТЧИК СИМВОЛОВ ДЕЯТЕЛЬНОСТИ ------------------------------------------------ */
const activityLimit = 33;
const activityInput = document.getElementById('activity');
const activityCounter = document.getElementById('activityCounter');

function updateActivityCounter() {
const length = activityInput.value.length;
activityCounter.textContent = length + ' / ' + activityLimit;
activityCounter.classList.toggle('full', length >= activityLimit);}

activityInput.addEventListener('input', updateActivityCounter);
updateActivityCounter();

/* ------------------------------------------------ ФУНКЦИЯ ДЛЯ ПОКАЗА УВЕДОМЛЕНИЯ ------------------------------------------------ */
function showNotification(message) {
const notification = document.getElementById('notification');
notification.textContent = message || 'коды скопированы в буфер обмена!';
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');}, 3000);}

/* ------------------------------------------------ ФУНКЦИЯ ДЛЯ КОПИРОВАНИЯ В БУФЕР ОБМЕНА ------------------------------------------------ */
function copyToClipboard(text) {
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(() => {
showNotification();
}).catch(() => {
// Fallback
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
showNotification();});} else {
// Fallback
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
showNotification();}}

/* ------------------------------------------------ ОБРАБОТЧИК ОТПРАВКИ ФОРМЫ ------------------------------------------------ */
document.getElementById('characterForm').addEventListener('submit', function(e) {
e.preventDefault();
   
/* ------------------------------------------------ ПРОВЕРЯЕМ ЗАПОЛНЕННОСТЬ ВСЕХ ПОЛЕЙ ------------------------------------------------ */
const fields = this.querySelectorAll('input, select, textarea');
let allFilled = true;
   
fields.forEach(field => {
if (field.disabled || field.type === 'checkbox') {
field.style.borderColor = '';
return;}
if (field.hasAttribute('required') && !field.value.trim()) {
allFilled = false;
field.style.borderColor = 'red';} else {
field.style.borderColor = '';}});
   
if (!allFilled) {
showNotification('пожалуйста, заполните все поля!');
return;}

if (activityInput.value.trim().length > activityLimit) {
showNotification('деятельность — не больше ' + activityLimit + ' символов!');
activityInput.style.borderColor = 'red';
return;}
   
/* ------------------------------------------------ СОБИРАЕМ ДАННЫЕ ------------------------------------------------ */
const profileLink = document.getElementById('profileLink').value;
const surveyLink = document.getElementById('surveyLink').value;
const nameRu = document.getElementById('nameRu').value;
const nameEn = document.getElementById('nameEn').value;
const appearanceName = document.getElementById('appearanceName').value;
const picLink = document.getElementById('picLink').value;
const lzText = document.getElementById('lzText').value;
const cityRu = document.getElementById('cityRu').value;
const cityEn = document.getElementById('cityEn').value;
const country = document.getElementById('countrySelect').value;
const race = document.getElementById('raceSelect').value;
const organization = document.getElementById('orgSelect').value;
const activity = document.getElementById('activity').value;
   
/* ------------------------------------------------ ФОРМИРУЕМ ТЕКСТЫ ДЛЯ КОПИРОВАНИЯ ------------------------------------------------ */
const countryShort = countries[country] || 'юк';
const raceRu = races.get(race) || race;
const orgRu = organizations.get(organization) || organization;
   
/* ------------------------------------------------ СПИСОК ВНЕШНОСТЕЙ ------------------------------------------------ */
const text1 = appearanceName + " — [" + "url" + "=" + profileLink + "]" + nameEn + "[" + "/url" + "]";
   
/* ------------------------------------------------ СПИСОК РОЛЕЙ ------------------------------------------------ */
const text2 = `{ name: "${nameEn}", race: "${race}", organization: "${organization}", place: "${cityEn}", job: "${activity}", profile: "${profileLink}" },`;
   
/* ------------------------------------------------ ГОРОД В СПИСОК РОЛЕЙ ------------------------------------------------ */
const text3 = `["${cityEn}", "${cityRu}, ${countryShort}"],`;
   
/* ------------------------------------------------ ПРОФИЛЬ ------------------------------------------------ */
const text4 = `<div class="char-name"><a href="${surveyLink}">${nameRu}</a></div> <div class="char-race">${raceRu}</div> <div class="char-divider"></div> <div class="char-desc">${lzText}</div>`;
   
/* ------------------------------------------------ ЛОКАЦИЯ ------------------------------------------------ */
const text5 = country === 'uk' ? `${cityEn}, uk` : `${cityEn}, irl`;
   
/* ------------------------------------------------ ОБЪЕДИНЯЕМ ВСЁ ------------------------------------------------ */
let fullText = "список внешностей:\n[" + "code" + "]" + text1 + "[" + "/code" + "]\n\n" +
"список ролей:\n[" + "code" + "]" + text2 + "[" + "/code" + "]\n\n" +
"город для списка ролей:\n[" + "code" + "]" + text3 + "[" + "/code" + "]\n\n" +
"профиль:\n[" + "code" + "]" + text4 + "[" + "/code" + "]\n\n" +
"локация:\n[" + "code" + "]" + text5 + "[" + "/code" + "]\n\n" +
"картинка для личной страницы:\n[" + "code" + "]" + picLink + "[" + "/code" + "]";

/* ------------------------------------------------ ТВИН НА ЛИЧНУЮ СТРАНИЦУ ------------------------------------------------ */
if (isTwin.checked) {
const mainLink = mainCharLink.value;

const text6 = `<div class="ch-char"
     data-ava="${picLink}"
     data-mercy="0" data-wrath="0">
  <a class="ch-go" href="${profileLink}" title="в профиль"><i class="fa-solid fa-address-card"></i></a>
  <b>${nameEn}</b><i>${raceRu}</i>
</div>`;

fullText += "\n\nтвин на личную страницу основного персонажа (" + mainLink + "):\n[" + "code" + "]" + text6 + "[" + "/code" + "]";}
   
/* ------------------------------------------------ КОПИРУЕМ В БУФЕР ОБМЕНА ------------------------------------------------ */
copyToClipboard(fullText);});
</script>[/html]

+7

Тема закрыта
Страница: 1

Вы здесь » BROKEN GEIS » imbolc » шаблон анкеты