lake house dreams когда одна мечта сбылась, ты отправляешься за новой.

the lake house

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

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

Вы здесь » the lake house » болталка » баловство с кодами

баловство с кодами

Страница: 1

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

1

[html]<div style="
  width: 600px;
  height: 800px;
  margin: 0 auto;
  border: 1px solid #555;
  border-radius: 8px;
  background: #1c1c1c;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 16px 0 0 0;
  color: #d4d4d4;
">
  <!-- Блок с изображением -->
  <div style="
    width: 550px;
    height: 100px;
    margin: 0 auto 10px auto;
    border: 1px solid #1c1c1c;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;
  ">
    <img
      src="https://i.ibb.co/BV7bxScG/image.png"
      alt="Баннер"
      style="width:100%; height:100%; object-fit:contain; display:block;"
    />
  </div>

  <!-- Верхний блок (прокручиваемый) -->
  <div style="
    flex: 1;
    width: 550px;
    margin: 0 auto 20px auto;
    overflow-y: auto;
    border: 2px solid #6b3a3a;
    border-radius: 6px;
    background: #2d1f1f;
    padding: 20px;
    box-sizing: border-box;
  ">
    <!-- Строка с двумя ячейками -->
    <div style="display:flex; gap:10px; margin-bottom:20px;">
      <div style="width:100px; height:100px; flex-shrink:0; border:1px solid #6b3a3a; border-radius:4px; overflow:hidden; background:#fff;">
        <img src="https://i.pinimg.com/1200x/2d/c6/d2/2dc6d2f87dde5e3cbd35ed0d83e6e0cd.jpg" alt="Пример" style="width:100%; height:100%; object-fit:cover; display:block;" />
      </div>
      <div style="width:400px; height:100px; flex-shrink:0; border:1px solid #6b3a3a; border-radius:4px; padding:8px; background:#2d1f1f; overflow-y:auto; box-sizing:border-box; font-size:13px; line-height:1.5;">
        <strong>1990‑й год</strong>
        <p style="font-size:10px; margin:0 0 6px 0; color:#c0b0b0;">Пять долгих лет Хоукинс пребывал в спокойном сне. Сразу после событий 1985‑го власти отрапортовали: «Утечка химикатов, ситуация под контролем». Город послушно кивнул — официальная версия легла слишком гладко, чтобы искать трещины.</p>
        <p style="font-size:10px; margin:0 0 6px 0; color:#c0b0b0;">Но посвященные помнили, что скрывалось за этой тишиной. Они видели, как захлопнулись врата, как сгинули монстры и как исчезла та самая девочка — спасшая их всех, но оставшаяся невидимой для мира — утянутая вместе с обломками чужого измерения.</p>
        <p style="font-size:10px; margin:0; color:#c0b0b0;">Затишье длилось достаточно долго, чтобы притупить любую бдительность. А под землей, в гниющей плоти Изнанки, тем временем набухало и пульсировало новое, зловещее начало.</p>
      </div>
    </div>

    <h4 style="margin:0 0 8px 0; color:#e6d0b0;">Кого из каноничных персонажей можно придержать?</h4>
    <p style="color:#c0b0b0;">Любого персонажа, который выжил до 1985 года</p>
    <p style="color:#c0b0b0;">Заполняйте код и ждем вас</p>

    <!-- Блок с примером кода и кнопкой копирования -->
    <div style="margin-bottom:10px;">
      <button id="copyCodeBtn" style="
        background: #6b3a3a;
        border: none;
        color: #e6e4e4;
        font-size: 13px;
        padding: 4px 14px;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        margin-bottom: 4px;
        transition: 0.1s ease;
      " onmouseover="this.style.background='#8a4a4a'" onmouseout="this.style.background='#6b3a3a'" onmousedown="this.style.transform='scale(0.95)'" onmouseup="this.style.transform='scale(1)'">
        📋 Копировать код
      </button>
      <span id="copyStatus" style="margin-left:8px; font-size:13px; color:#b8860b; display:none;">Скопировано!</span>
      <pre id="codeExample" style="
        background:#1a1414;
        padding:8px 12px;
        border-radius:4px;
        border:1px solid #6b3a3a;
        color:#b8a8a8;
        font-family:monospace;
        white-space:pre-wrap;
        word-wrap:break-word;
        margin:0;
      ">name surname за {url=ссыла_на_профиль}никнейм{/url}</pre>
    </div>
  </div>

  <!-- Нижний блок с двумя ячейками -->
  <div style="display:flex; justify-content:center; gap:20px; height:250px; padding:0 0 16px 0; flex-shrink:0; color:#000000;">
    <div style="width:250px; height:100%; border:2px solid #6b8a8a; border-radius:6px; background:#2f4747; padding:10px; box-sizing:border-box; overflow-y:auto; color:#000000;">
      <div style="text-align:center; font-weight:bold; margin-bottom:8px; color:#d0d0d0;">Занятые роли</div>
      <p style="color:#d0d0d0;">Контент с прокруткой.</p>
      <p style="color:#d0d0d0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p style="color:#d0d0d0;">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <p style="color:#d0d0d0;">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
    <div style="width:250px; height:100%; border:2px solid #6b8a8a; border-radius:6px; background:#2f4747; padding:10px; box-sizing:border-box; overflow-y:auto; color:#000000;">
      <div style="text-align:center; font-weight:bold; margin-bottom:8px; color:#d0d0d0;">Занятые внешности</div>
      <p style="color:#d0d0d0;">Контент с прокруткой.</p>
      <p style="color:#d0d0d0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p style="color:#d0d0d0;">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
</div>

<script>
  (function() {
    const preBlock = document.getElementById('codeExample');
    const copyBtn = document.getElementById('copyCodeBtn');
    const statusSpan = document.getElementById('copyStatus');

    const exampleWithBraces = 'name surname за {url=ссыла_на_профиль}никнейм{/url}';
    preBlock.textContent = exampleWithBraces;

    copyBtn.addEventListener('click', function() {
      let raw = preBlock.textContent.trim();
      let final = raw.replace(/\{/g, '[').replace(/\}/g, ']');
     
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(final).then(() => {
          statusSpan.style.display = 'inline';
          setTimeout(() => { statusSpan.style.display = 'none'; }, 2000);
        }).catch(() => {
          fallbackCopy(final);
        });
      } else {
        fallbackCopy(final);
      }
    });

    function fallbackCopy(text) {
      const textarea = document.createElement('textarea');
      textarea.value = text;
      document.body.appendChild(textarea);
      textarea.select();
      try {
        document.execCommand('copy');
        statusSpan.style.display = 'inline';
        setTimeout(() => { statusSpan.style.display = 'none'; }, 2000);
      } catch (e) {
        alert('Не удалось скопировать. Попробуйте выделить и скопировать вручную.');
      }
      document.body.removeChild(textarea);
    }
  })();
</script>[/html]

Подпись автора


• •   р а з б и в а л и   с е р ы й   л ё д   с   о г р о м н о й   в ы с о т ы   г л а з а
                                                    твои черты   • •
https://forumstatic.ru/files/001b/ee/37/96328.gif https://forumstatic.ru/files/001b/ee/37/31565.gif
s a y   m y   n a m e !  let me angel like a rain. burnin' up   in love again . . .

0

2

[html]<div style="
  width: 100%;
  max-width: 900px;
  height: 600px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  font-family: Arial, Helvetica, sans-serif;
  color: #1a1a1a;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
">
  <div style="padding: 16px 20px; flex: 1; display: flex; flex-direction: column; box-sizing: border-box; overflow: hidden;">

    <!-- Верхняя плашка -->
    <div style="
      background: #f5f5f5;
      border-radius: 8px;
      padding: 6px 14px;
      margin-bottom: 14px;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #333;
      flex-shrink: 0;
    ">
      <b style="color: #c00;">breaking:</b> rumor file / open for press / no comment yet
    </div>

    <!-- Основная часть (занимает остаток высоты) -->
    <div style="display: flex; gap: 20px; flex: 1 1 0; min-height: 0; flex-wrap: wrap;">

      <!-- Левая колонка (фикс. ширина) -->
      <div style="flex: 0 0 200px; display: flex; flex-direction: column; gap: 8px; min-height: 0;">

        <div style="
          position: relative;
          border-radius: 10px;
          overflow: hidden;
          border: 1px solid #ddd;
          background: #fafafa;
          flex-shrink: 0;
        ">
          <img src="https://upforme.ru/uploads/001c/b7/5d/27/151861.jpg"
               alt="Фото"
               style="width:100%; display:block; height:auto;">
          <div style="
            position: absolute;
            bottom: 8px;
            left: 8px;
            background: rgba(0,0,0,0.7);
            color: #fff;
            font-size: 11px;
            padding: 2px 10px;
            border-radius: 20px;
            text-transform: uppercase;
          ">замечены</div>
        </div>

        <div style="display: flex; gap: 8px; flex-shrink: 0;">
          <div style="flex:1; border-radius:8px; overflow:hidden; border:1px solid #ddd; position:relative;">
            <img src="https://upforme.ru/uploads/001c/b7/5d/27/525697.jpg" alt="фото #1" style="width:100%; display:block;">
            <div style="position:absolute; bottom:4px; left:4px; background:rgba(0,0,0,0.6); color:#fff; font-size:9px; padding:1px 6px; border-radius:12px;">фото #1</div>
          </div>
          <div style="flex:1; border-radius:8px; overflow:hidden; border:1px solid #ddd; position:relative;">
            <img src="https://upforme.ru/uploads/001c/b7/5d/27/256263.png" alt="фото #2" style="width:100%; display:block;">
            <div style="position:absolute; bottom:4px; left:4px; background:rgba(0,0,0,0.6); color:#fff; font-size:9px; padding:1px 6px; border-radius:12px;">фото #2</div>
          </div>
        </div>
      </div>

      <!-- Правая колонка (занимает остаток) -->
      <div style="flex: 1; display: flex; flex-direction: column; min-width: 200px; min-height: 0;">

        <!-- Теги -->
        <div style="display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; font-size: 12px; flex-shrink: 0;">
          <span style="background: #c00; color:#fff; padding:2px 10px; border-radius:20px; font-weight:bold;">unclaimed</span>
          <span style="background:#eee; padding:2px 10px; border-radius:20px;">rumor</span>
          <span style="background:#eee; padding:2px 10px; border-radius:20px;">mercedes</span>
          <span style="background:#eee; padding:2px 10px; border-radius:20px;">paddok</span>
          <span style="background:#eee; padding:2px 10px; border-radius:20px;">instagram</span>
        </div>

        <!-- Заголовок -->
        <h2 style="font-size:22px; margin:0 0 6px 0; line-height:1.2; font-weight:700; flex-shrink:0;">
          <span style="font-weight:400;">скажи мне — кто твой друг?</span> <i style="font-style:italic; color:#666;">слуха</i>
        </h2>

        <!-- Лид -->
        <div style="
          background:#f9f9f9; border-left:4px solid #c00; padding:6px 14px; margin-bottom:10px;
          font-size:14px; line-height:1.5; border-radius:0 6px 6px 0; flex-shrink:0;
        ">
          <strong>СКАНДАЛ В ПАДДОКЕ!</strong> Джордж Рассел больше не скрывает свою тайную страсть? Сенсационное признание гонщика Mercedes, которое все <strong>ПРОПУСТИЛИ!</strong>
        </div>

        <!-- Прокручиваемый текст – теперь точно работает -->
        <div style="
          flex: 1 1 0;
          min-height: 0;
          overflow-y: auto;
          font-size: 14px;
          line-height: 1.6;
          color: #222;
          padding-right: 6px;
          margin-bottom: 10px;
        ">
          <p style="margin: 0 0 12px 0;">
            Пока весь паддок Формулы-1 обсуждал тактические моменты на гран-при Испании, мы откопали в Instagram Джорджа Рассела пост, который затерялся среди официальных публикаций. И теперь у нас есть все основания полагать, что «серебро» для Mercedes — это последнее, о чём думает британский гонщик.
          </p>
          <p style="margin: 0 0 12px 0;">
            В минувшее воскресенье, вместо того чтобы анализировать телеметрию, Джордж опубликовал фотографию, от которой плавятся экраны телефонов. На этой фотографии он собственноручно <span style="font-style: italic;">надевает командную кепку на голову португальской актрисы и модели Маргариды Корсейру.</span> Но настоящая бомба замедленного действия — это подпись! Поблагодарив девушку за поддержку в Барселоне, он назвал её своим талисманом на удачу... а затем добил фанатов фразой на испанском: <span style="font-style: italic;">«cada dia te quiero mas»</span>. Для тех, кто прогуливал уроки иностранного, переводим: <strong><span style="font-style: italic;">«с каждым днём я люблю тебя всё больше»</span></strong>. Интересное признание для «просто друга», не находите?
          </p>
          <p style="margin: 0 0 12px 0;">
            Но наш инсайдер шепчет, что эта история началась гораздо раньше! На прошедшем гран-при Монако пару уже засекли (см. фото 1) вместе на балконе над пит-лейн. Тогда публикация удачно затерялась, но сейчас пазл сложился. Посмотрите на этот кадр: Маргарида обнимает своего «друга детства», и тот, кажется, совсем не расстроен ни штрафами, ни жалкой четырнадцатой позицией по итогам гонки. Что же случилось в Монако? Или это случилось гораздо раньше?
          </p>
          <div style="
            background:#f9f9f9; border-left:4px solid #c00; padding:6px 14px; margin:12px 0;
            font-size:14px; line-height:1.5; border-radius:0 6px 6px 0;
          ">
            <strong>НОВЫЙ УРОВЕНЬ ОТНОШЕНИЙ: ЯХТА, ИНСТАГРАМ И БОЛЬШИЕ ВОПРОСЫ</strong>
          </div>
          <p style="margin: 0 0 12px 0;">
            Наш герой не забывает поддерживать градус драмы и делится новой фотографией (фото 2) в своих социальных сетях. Пара расслабляется после изнурительного уик-энда на роскошной яхте. Подпись гласит: <span style="font-style: italic;">«могу я себе позволить отдых?»</span>. Мы их не осуждаем! Но как это понимать? Можно ли считать это официальным подтверждением статуса <span style="font-style: italic;">«всё сложно»</span> или уже <span style="font-style: italic;"><strong>«всё серьёзно»</strong></span>? Наше издание предполагает, что эта публичность может быть связана с грядущей премьерой фильма мисс Корсейру, которая намечена на 5 июля. Появится ли она на ковровой дорожке под руку с Джорджем Расселом? И самый главный вопрос, который мучает всех хейтеров и обожателей: будет ли он ей интересен дальше? Особенно с учётом того, как нестабильно идут дела у самого Джорджа в Mercedes. Каково пилоту топ-команды знать, что в сравнении с блистательным Ландо Норрисом он выглядит не так успешно, как хотел бы? Пресс-служба команды хранит молчание, отказываясь комментировать не только личную жизнь пилота, но и его будущее в команде. Держим кулачки, ведь любовь — это тоже гонка, где не всегда побеждает быстрейший!
          </p>
        </div>

        <!-- Инфо-боксы и шкала (фиксированные) -->
        <div style="display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0;">
          <div style="flex:1; background:#f5f5f5; border-radius:8px; padding:8px 14px; font-size:13px; border:1px solid #e8e8e8;">
            <b>кто может забрать:</b><br>
            журналист / блогер / инсайдер / пресс-служба.
          </div>
          <div style="flex:1; background:#f5f5f5; border-radius:8px; padding:8px 14px; font-size:13px; border:1px solid #e8e8e8;">
            <b>что можно играть:</b><br>
            статья / опровержение / обсуждение / скандал.
          </div>
        </div>

        <div style="margin: 8px 0 0 0; flex-shrink: 0;">
          <b style="font-size:13px; text-transform:uppercase; letter-spacing:0.5px;">scandal level</b>
          <div style="margin-top:4px; height:8px; background:#eee; border-radius:10px; overflow:hidden;">
            <div style="width:91%; height:100%; background:#c00; border-radius:10px;"></div>
          </div>
        </div>

      </div>
    </div>

    <!-- Статус (фиксированный) -->
    <div style="
      background:#f5f5f5; border-radius:8px; padding:4px 14px; font-size:13px; color:#333;
      margin-top:12px; border:1px dashed #ccc; flex-shrink:0;
    ">
      <b>статус:</b> свободно для обсуждений
    </div>

  </div>
</div>[/html]

Подпись автора


• •   р а з б и в а л и   с е р ы й   л ё д   с   о г р о м н о й   в ы с о т ы   г л а з а
                                                    твои черты   • •
https://forumstatic.ru/files/001b/ee/37/96328.gif https://forumstatic.ru/files/001b/ee/37/31565.gif
s a y   m y   n a m e !  let me angel like a rain. burnin' up   in love again . . .

0

3

[html]<div style="
  width: 600px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  font-family: Arial, Helvetica, sans-serif;
  color: #1a1a1a;
  box-sizing: border-box;
  overflow: hidden;
  padding: 20px 24px 20px 24px;
">
  <!-- Заголовок "анкета принята" -->
  <div style="display:flex; align-items:center; gap:12px; margin-bottom:16px;">
    <img src="https://forumstatic.ru/files/001c/b8/3a/72025.jpg" alt="" style="width:40px; height:auto; border-radius:50%;">
    <h2 style="margin:0; font-size:24px; font-weight:700; color:#222; text-transform:uppercase;">анкета принята</h2>
  </div>

  <!-- Ссылки-навигация -->
  <div style="display:flex; flex-wrap:wrap; gap:8px 16px; margin-bottom:20px; padding:6px 0; border-bottom:1px solid #eee;">
    <a href="https://boxbox.rusff.me/viewtopic.php?id=10" style="color:#c00; text-decoration:none; font-size:14px;">вопросы к амс</a>
    <a href="https://boxbox.rusff.me/viewtopic.php?id=25#p26" style="color:#c00; text-decoration:none; font-size:14px;">поиск игры</a>
    <a href="https://boxbox.rusff.me/viewtopic.php?id=51#p2417" style="color:#c00; text-decoration:none; font-size:14px;">банк</a>
    <a href="https://boxbox.rusff.me/viewtopic.php?id=48#p2414" style="color:#c00; text-decoration:none; font-size:14px;">игровые задания</a>
  </div>

  <!-- Раздел: коды для оформления -->
  <div style="margin-bottom:20px;">
    <div style="font-size:18px; font-weight:700; margin-bottom:12px; color:#333; border-left:4px solid #c00; padding-left:12px;">коды для оформления</div>
   
    <div style="display:flex; flex-direction:column; gap:12px;">
      <!-- Оформление -->
      <div style="background:#f9f9f9; border-radius:8px; padding:12px 16px; border:1px solid #eee;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; flex-wrap:wrap;">
          <b style="font-size:15px; color:#222;">оформление</b>
          <span style="font-size:13px; color:#888;">команда, иконка, фон</span>
        </div>
        <pre id="code1" style="background:#1a1a1a; color:#f0f0f0; padding:8px 12px; border-radius:6px; font-family:monospace; font-size:13px; white-space:pre-wrap; word-wrap:break-word; margin:0; cursor:pointer;" onclick="copyCode('code1')">&lt;team&gt;команда игрока (ваша принадлежность: ф1, наскар, сфера деятельности)&lt;/team&gt;&lt;img src='ссылка иконку' class='prof-icon'&gt;&lt;img src='ссылка на фон' class='prof-bg'&gt;</pre>
        <div style="margin-top:4px; font-size:12px; color:#999;">кликните по коду, чтобы скопировать</div>
      </div>

      <!-- Личное звание -->
      <div style="background:#f9f9f9; border-radius:8px; padding:12px 16px; border:1px solid #eee;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; flex-wrap:wrap;">
          <b style="font-size:15px; color:#222;">личное звание</b>
          <span style="font-size:13px; color:#888;">ссылка на анкету и текст лз</span>
        </div>
        <pre id="code2" style="background:#1a1a1a; color:#f0f0f0; padding:8px 12px; border-radius:6px; font-family:monospace; font-size:13px; white-space:pre-wrap; word-wrap:break-word; margin:0; cursor:pointer;" onclick="copyCode('code2')">&lt;lz&gt; &lt;a href="ссылка на анкету"&gt;имя фамилия на русском&lt;/a&gt;&lt;center&gt;лз может быть с ссылкой &lt;a href="ссылка"&gt;название ссылки&lt;/a&gt;&lt;/center&gt;&lt;/lz&gt;</pre>
        <div style="margin-top:4px; font-size:12px; color:#999;">кликните по коду, чтобы скопировать</div>
      </div>

      <!-- Плашка -->
      <div style="background:#f9f9f9; border-radius:8px; padding:12px 16px; border:1px solid #eee;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; flex-wrap:wrap;">
          <b style="font-size:15px; color:#222;">плашка</b>
          <span style="font-size:13px; color:#888;">текст, модалка, изображение плашки</span>
        </div>
        <pre id="code3" style="background:#1a1a1a; color:#f0f0f0; padding:8px 12px; border-radius:6px; font-family:monospace; font-size:13px; white-space:pre-wrap; word-wrap:break-word; margin:0; cursor:pointer;" onclick="copyCode('code3')">&lt;rank&gt;короткий текст перед плашкой&lt;/rank&gt;&lt;a id="имя страницы" class="modal-link pls-pers-page" title="личная страница" data-reveal-id="character"&gt;&lt;div class="plaque"&gt;&lt;img src="ссылка на плашку"&gt;&lt;/div&gt;&lt;/a&gt;</pre>
        <div style="margin-top:4px; font-size:12px; color:#999;">кликните по коду, чтобы скопировать</div>
      </div>

      <!-- Занятые внешности -->
      <div style="background:#f9f9f9; border-radius:8px; padding:12px 16px; border:1px solid #eee;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; flex-wrap:wrap;">
          <b style="font-size:15px; color:#222;">занятые внешности</b>
          <span style="font-size:13px; color:#888;">строка для списка внешностей</span>
        </div>
        <pre id="code4" style="background:#1a1a1a; color:#f0f0f0; padding:8px 12px; border-radius:6px; font-family:monospace; font-size:13px; white-space:pre-wrap; word-wrap:break-word; margin:0; cursor:pointer;" onclick="copyCode('code4')">&lt;span&gt; фи внешности на английском — &lt;a href='ссылка на профиль'&gt;ник&lt;/a&gt; &lt;/span&gt;</pre>
        <div style="margin-top:4px; font-size:12px; color:#999;">кликните по коду, чтобы скопировать</div>
      </div>
    </div>
  </div>

  <!-- Раздел: личная страница (спойлер) -->
  <details style="margin-bottom:20px; border:1px solid #eee; border-radius:8px; padding:10px 16px;">
    <summary style="font-weight:700; font-size:18px; cursor:pointer; color:#333; outline:none;">личная страница — коды</summary>
    <div style="padding-top:12px;">
      <div style="display:flex; flex-direction:column; gap:12px;">

        <!-- Фон страницы -->
        <div style="background:#f9f9f9; border-radius:8px; padding:12px 16px; border:1px solid #eee;">
          <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; flex-wrap:wrap;">
            <b style="font-size:15px; color:#222;">фон страницы</b>
            <span style="font-size:13px; color:#888;">большой фон личной страницы</span>
          </div>
          <pre id="code5" style="background:#1a1a1a; color:#f0f0f0; padding:8px 12px; border-radius:6px; font-family:monospace; font-size:13px; white-space:pre-wrap; word-wrap:break-word; margin:0; cursor:pointer;" onclick="copyCode('code5')">&lt;img src='ссылка' class='page-bg'&gt;</pre>
          <div style="margin-top:4px; font-size:12px; color:#999;">кликните по коду, чтобы скопировать</div>
        </div>

        <!-- Аватарка -->
        <div style="background:#f9f9f9; border-radius:8px; padding:12px 16px; border:1px solid #eee;">
          <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; flex-wrap:wrap;">
            <b style="font-size:15px; color:#222;">аватарка</b>
            <span style="font-size:13px; color:#888;">изображение в личной странице</span>
          </div>
          <pre id="code6" style="background:#1a1a1a; color:#f0f0f0; padding:8px 12px; border-radius:6px; font-family:monospace; font-size:13px; white-space:pre-wrap; word-wrap:break-word; margin:0; cursor:pointer;" onclick="copyCode('code6')">&lt;img src='ссылка' class='user-av'&gt;</pre>
          <div style="margin-top:4px; font-size:12px; color:#999;">кликните по коду, чтобы скопировать</div>
        </div>

        <!-- Инфо под аватаркой (широкий блок) -->
        <div style="background:#f9f9f9; border-radius:8px; padding:12px 16px; border:1px solid #eee;">
          <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; flex-wrap:wrap;">
            <b style="font-size:15px; color:#222;">инфо под аватаркой</b>
            <span style="font-size:13px; color:#888;">анкета, род деятельности, цитата, трек, команда</span>
          </div>
          <pre id="code7" style="background:#1a1a1a; color:#f0f0f0; padding:8px 12px; border-radius:6px; font-family:monospace; font-size:13px; white-space:pre-wrap; word-wrap:break-word; margin:0; cursor:pointer;" onclick="copyCode('code7')">&lt;a href='ссылка на анкету'&gt;имя фамилия, возраст цифрой&lt;/a&gt;
&lt;ppocc&gt;&lt;center&gt;род деятельности&lt;/center&gt;&lt;/ppocc&gt;
&lt;ppquote&gt;&lt;i&gt;“вайбовые цитатки, можно с ссылками &lt;a href='ссылка'&gt;текст&lt;/a&gt;”&lt;/i&gt;&lt;/ppquote&gt;

&lt;pptrack&gt;&lt;a href='ссылка послушать песню'&gt;исполнитель&lt;/a&gt; - название трека&lt;/pptrack&gt;

&lt;team&gt;команда персонажа, место работы или сфера деятельности&lt;/team&gt;</pre>
          <div style="margin-top:4px; font-size:12px; color:#999;">кликните по коду, чтобы скопировать</div>
        </div>

        <!-- Твинки -->
        <div style="background:#f9f9f9; border-radius:8px; padding:12px 16px; border:1px solid #eee;">
          <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; flex-wrap:wrap;">
            <b style="font-size:15px; color:#222;">твинки</b>
            <span style="font-size:13px; color:#888;">если есть, укажите основной профиль</span>
          </div>
          <pre id="code8" style="background:#1a1a1a; color:#f0f0f0; padding:8px 12px; border-radius:6px; font-family:monospace; font-size:13px; white-space:pre-wrap; word-wrap:break-word; margin:0; cursor:pointer;" onclick="copyCode('code8')">&lt;a href="ссылка на профиль" class="profile-card"&gt;&lt;/a&gt;</pre>
          <div style="margin-top:4px; font-size:12px; color:#999;">кликните по коду, чтобы скопировать</div>
        </div>

        <!-- Социальные сети -->
        <div style="background:#f9f9f9; border-radius:8px; padding:12px 16px; border:1px solid #eee;">
          <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; flex-wrap:wrap;">
            <b style="font-size:15px; color:#222;">социальные сети</b>
            <span style="font-size:13px; color:#888;">ссылки на первые сообщения в темах</span>
          </div>
          <pre id="code9" style="background:#1a1a1a; color:#f0f0f0; padding:8px 12px; border-radius:6px; font-family:monospace; font-size:13px; white-space:pre-wrap; word-wrap:break-word; margin:0; cursor:pointer;" onclick="copyCode('code9')">&lt;a href='ссылка на первое соо в Твиттере' class='pp-twit'&gt;&lt;/a&gt;
&lt;a href='ссылка на первое соо в Инстаграме' class='pp-inst'&gt;&lt;/a&gt;</pre>
          <div style="margin-top:4px; font-size:12px; color:#999;">кликните по коду, чтобы скопировать</div>
        </div>

        <!-- Эпизод (широкий) -->
        <div style="background:#f9f9f9; border-radius:8px; padding:12px 16px; border:1px solid #eee;">
          <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; flex-wrap:wrap;">
            <b style="font-size:15px; color:#222;">эпизод</b>
            <span style="font-size:13px; color:#888;">добавить эпизод в хронологию</span>
          </div>
          <pre id="code10" style="background:#1a1a1a; color:#f0f0f0; padding:8px 12px; border-radius:6px; font-family:monospace; font-size:13px; white-space:pre-wrap; word-wrap:break-word; margin:0; cursor:pointer;" onclick="copyCode('code10')">&lt;pp-ep&gt;&lt;a href='#'&gt;название эпизода&lt;/a&gt;
&lt;div&gt;&lt;active&gt;active&lt;/active&gt;&lt;au&gt;au&lt;/au&gt;&lt;closed&gt;closed&lt;/closed&gt;&lt;span&gt;quest&lt;/span&gt;&lt;/div&gt;
&lt;ep-chars&gt;
&lt;a href='#'&gt;имя участника&lt;/a&gt; &amp;
&lt;a href='#'&gt;имя участника&lt;/a&gt;
&lt;/ep-chars&gt;&lt;/pp-ep&gt;</pre>
          <div style="margin-top:4px; font-size:12px; color:#999;">кликните по коду, чтобы скопировать</div>
        </div>

        <div style="background:#fff3e0; border-left:4px solid #c00; padding:8px 14px; border-radius:4px; font-size:13px; color:#555;">
          <b>подсказка:</b> <span style="background:#c00; color:#fff; padding:0 6px; border-radius:4px;">active</span> — активный эпизод; <span style="background:#6a6a6a; color:#fff; padding:0 6px; border-radius:4px;">au</span> — альтернатива; <span style="background:#444; color:#fff; padding:0 6px; border-radius:4px;">closed</span> — окончен, закрыт или заморожен; <span style="background:#008000; color:#fff; padding:0 6px; border-radius:4px;">quest</span> — квест.
        </div>
      </div>
    </div>
  </details>

  <!-- Раздел: подарочное оформление (примеры профилей) -->
  <div style="margin-top:8px;">
    <div style="font-size:17px; font-weight:700; margin-bottom:12px; color:#333;">🎁 подарочное оформление</div>
    <div style="background:#f5f5f5; border-radius:8px; padding:14px 16px; margin-bottom:14px; border:1px solid #eee;">
      <p style="margin:0 0 6px 0; font-size:14px; color:#333;">выбирай любое оформление после принятия. пиши короткую фразу, которую хочешь над плашкой. и наслаждайся ♥</p>
      <p style="margin:0; font-size:13px; color:#666;"><strong>важно:</strong> для заполнения кода вы можете копировать ссылки фона/плашки прямо из примеров правой кнопкой мыши.</p>
    </div>

    <!-- Три примера профилей (в стиле post-author) -->
    <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:16px;">
      <!-- Пример 1 -->
      <div style="background:#fff; border-radius:12px; border:1px solid #eee; padding:12px; box-shadow:0 2px 6px rgba(0,0,0,0.04);">
        <div style="display:flex; flex-direction:column; align-items:center; text-align:center;">
          <div style="position:relative; width:100%; margin-bottom:8px;">
            <img src="https://i.pinimg.com/736x/8b/26/62/8b266251b6b1c3cfde5f73af2bcc7b7b.jpg" alt="фон" style="width:100%; height:auto; border-radius:8px;">
            <img src="https://upforme.ru/uploads/001c/b8/3a/3/474340.png" alt="иконка" style="position:absolute; top:6px; right:6px; width:24px; height:auto; border-radius:50%; border:2px solid #fff;">
            <div style="position:absolute; bottom:6px; left:6px; background:rgba(0,0,0,0.6); color:#fff; font-size:10px; padding:2px 8px; border-radius:12px;">команда игрока</div>
          </div>
          <div style="font-weight:700; font-size:16px;">name surname</div>
          <div style="font-size:13px; color:#888;">Администратор</div>
          <img src="https://forumstatic.ru/files/001c/b8/3a/95358.png" alt="аватар" style="width:60px; height:60px; border-radius:50%; margin:8px 0; border:2px solid #eee;">
          <div style="font-size:12px; color:#555; background:#f9f9f9; padding:4px 8px; border-radius:20px; margin-bottom:6px;"><a href="#" style="color:#c00; text-decoration:none;">имя фамилия</a> текст личного звания</div>
          <div style="display:grid; grid-template-columns:1fr 1fr; gap:4px 8px; font-size:12px; color:#444; width:100%;">
            <span>Сообщений: 123</span>
            <span>Валюта: 123123</span>
            <span>Посты: 123</span>
            <span>Репутация: +0</span>
          </div>
          <div style="margin-top:8px; font-size:11px; color:#999;">некий краткий текст над плашкой</div>
          <img src="https://i.pinimg.com/736x/fb/2f/c0/fb2fc0f61d897b2613c9bd7d03d7c945.jpg" alt="плашка" style="width:100%; border-radius:6px; margin-top:4px;">
        </div>
      </div>

      <!-- Пример 2 -->
      <div style="background:#fff; border-radius:12px; border:1px solid #eee; padding:12px; box-shadow:0 2px 6px rgba(0,0,0,0.04);">
        <div style="display:flex; flex-direction:column; align-items:center; text-align:center;">
          <div style="position:relative; width:100%; margin-bottom:8px;">
            <img src="https://i.pinimg.com/736x/f7/61/b0/f761b0c5960070c3026cd9c6a48b04f2.jpg" alt="фон" style="width:100%; height:auto; border-radius:8px;">
            <img src="https://upforme.ru/uploads/001c/b8/3a/3/330266.png" alt="иконка" style="position:absolute; top:6px; right:6px; width:24px; height:auto; border-radius:50%; border:2px solid #fff;">
            <div style="position:absolute; bottom:6px; left:6px; background:rgba(0,0,0,0.6); color:#fff; font-size:10px; padding:2px 8px; border-radius:12px;">команда игрока</div>
          </div>
          <div style="font-weight:700; font-size:16px;">name surname</div>
          <div style="font-size:13px; color:#888;">Администратор</div>
          <img src="https://forumstatic.ru/files/001c/b8/3a/95358.png" alt="аватар" style="width:60px; height:60px; border-radius:50%; margin:8px 0; border:2px solid #eee;">
          <div style="font-size:12px; color:#555; background:#f9f9f9; padding:4px 8px; border-radius:20px; margin-bottom:6px;"><a href="#" style="color:#c00; text-decoration:none;">имя фамилия</a> текст личного звания</div>
          <div style="display:grid; grid-template-columns:1fr 1fr; gap:4px 8px; font-size:12px; color:#444; width:100%;">
            <span>Сообщений: 123</span>
            <span>Валюта: 123123</span>
            <span>Посты: 123</span>
            <span>Репутация: +0</span>
          </div>
          <div style="margin-top:8px; font-size:11px; color:#999;">некий краткий текст над плашкой</div>
          <img src="https://i.pinimg.com/736x/16/14/9d/16149d71e0b62d05e5952c1ecb9fbc97.jpg" alt="плашка" style="width:100%; border-radius:6px; margin-top:4px;">
        </div>
      </div>

      <!-- Пример 3 -->
      <div style="background:#fff; border-radius:12px; border:1px solid #eee; padding:12px; box-shadow:0 2px 6px rgba(0,0,0,0.04);">
        <div style="display:flex; flex-direction:column; align-items:center; text-align:center;">
          <div style="position:relative; width:100%; margin-bottom:8px;">
            <img src="https://i.pinimg.com/736x/a4/2a/15/a42a15916feb9c65ae1c5b382f51c197.jpg" alt="фон" style="width:100%; height:auto; border-radius:8px;">
            <img src="https://upforme.ru/uploads/001c/b8/3a/3/453324.png" alt="иконка" style="position:absolute; top:6px; right:6px; width:24px; height:auto; border-radius:50%; border:2px solid #fff;">
            <div style="position:absolute; bottom:6px; left:6px; background:rgba(0,0,0,0.6); color:#fff; font-size:10px; padding:2px 8px; border-radius:12px;">команда игрока</div>
          </div>
          <div style="font-weight:700; font-size:16px;">name surname</div>
          <div style="font-size:13px; color:#888;">Администратор</div>
          <img src="https://forumstatic.ru/files/001c/b8/3a/95358.png" alt="аватар" style="width:60px; height:60px; border-radius:50%; margin:8px 0; border:2px solid #eee;">
          <div style="font-size:12px; color:#555; background:#f9f9f9; padding:4px 8px; border-radius:20px; margin-bottom:6px;"><a href="#" style="color:#c00; text-decoration:none;">имя фамилия</a> текст личного звания</div>
          <div style="display:grid; grid-template-columns:1fr 1fr; gap:4px 8px; font-size:12px; color:#444; width:100%;">
            <span>Сообщений: 123</span>
            <span>Валюта: 123123</span>
            <span>Посты: 123</span>
            <span>Репутация: +0</span>
          </div>
          <div style="margin-top:8px; font-size:11px; color:#999;">некий краткий текст над плашкой</div>
          <img src="https://i.pinimg.com/1200x/e0/70/d7/e070d7761add40cbd45653e2d4740081.jpg" alt="плашка" style="width:100%; border-radius:6px; margin-top:4px;">
        </div>
      </div>
    </div>
  </div>

</div>

<script>
  // Функция копирования по клику на <pre>
  function copyCode(id) {
    const pre = document.getElementById(id);
    const text = pre.textContent;
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(text).then(() => {
        pre.style.border = '2px solid #4caf50';
        setTimeout(() => pre.style.border = 'none', 1000);
      }).catch(() => fallbackCopy(text, pre));
    } else {
      fallbackCopy(text, pre);
    }
  }

  function fallbackCopy(text, pre) {
    const ta = document.createElement('textarea');
    ta.value = text;
    document.body.appendChild(ta);
    ta.select();
    try {
      document.execCommand('copy');
      pre.style.border = '2px solid #4caf50';
      setTimeout(() => pre.style.border = 'none', 1000);
    } catch (e) {
      alert('Не удалось скопировать. Выделите текст вручную.');
    }
    document.body.removeChild(ta);
  }
</script>[/html]

Подпись автора


• •   р а з б и в а л и   с е р ы й   л ё д   с   о г р о м н о й   в ы с о т ы   г л а з а
                                                    твои черты   • •
https://forumstatic.ru/files/001b/ee/37/96328.gif https://forumstatic.ru/files/001b/ee/37/31565.gif
s a y   m y   n a m e !  let me angel like a rain. burnin' up   in love again . . .

0

4

[html]<div style="
  width: 600px;
  height: 800px;
  margin: 0 auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #0a0808;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 16px 0 0 0;
  color: #e6e4e4;
">
  <!-- Блок с изображением -->
  <div style="
    width: 550px;
    height: 100px;
    margin: 0 auto 10px auto;
    border: 1px solid #0a0808;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;
  ">
    <img
      src="https://i.ibb.co/BV7bxScG/image.png"
      alt="Баннер"
      style="width:100%; height:100%; object-fit:contain; display:block;"
    />
  </div>

  <!-- Верхний блок (прокручиваемый) -->
  <div style="
    flex: 1;
    width: 550px;
    margin: 0 auto 20px auto;
    overflow-y: auto;
    border: 2px solid #602423;
    border-radius: 6px;
    background: #331d1c;
    padding: 20px;
    box-sizing: border-box;
  ">
    <!-- Строка с двумя ячейками -->
    <div style="display:flex; gap:10px; margin-bottom:20px;">
      <div style="width:100px; height:100px; flex-shrink:0; border:1px solid #602423; border-radius:4px; overflow:hidden; background:#fff;">
        <img src="https://i.pinimg.com/1200x/2d/c6/d2/2dc6d2f87dde5e3cbd35ed0d83e6e0cd.jpg" alt="Пример" style="width:100%; height:100%; object-fit:cover; display:block;" />
      </div>
      <div style="width:400px; height:100px; flex-shrink:0; border:1px solid #602423; border-radius:4px; padding:8px; background:#331d1c; overflow-y:auto; box-sizing:border-box; font-size:13px; line-height:1.5;">
        <strong>1990‑й год</strong>
        <p style="font-size:10px; margin:0 0 6px 0;">Пять долгих лет Хоукинс пребывал в спокойном сне. Сразу после событий 1985‑го власти отрапортовали: «Утечка химикатов, ситуация под контролем». Город послушно кивнул — официальная версия легла слишком гладко, чтобы искать трещины.</p>
        <p style="font-size:10px; margin:0 0 6px 0;">Но посвященные помнили, что скрывалось за этой тишиной. Они видели, как захлопнулись врата, как сгинули монстры и как исчезла та самая девочка — спасшая их всех, но оставшаяся невидимой для мира — утянутая вместе с обломками чужого измерения.</p>
        <p style="font-size:10px; margin:0;">Затишье длилось достаточно долго, чтобы притупить любую бдительность. А под землей, в гниющей плоти Изнанки, тем временем набухало и пульсировало новое, зловещее начало.</p>
      </div>
    </div>

    <h4 style="margin:0 0 8px 0;">Кого из каноничных персонажей можно придержать?</h4>
    <p>Любого персонажа, который выжил до 1985 года</p>
    <p>Заполняйте код и ждем вас</p>

    <!-- Блок с примером кода – кликабельный -->
    <div style="margin-bottom:10px;">
      <pre id="codeExample" style="
        background:#1a0f0c;
        padding:8px 12px;
        border-radius:4px;
        border:1px solid #602423;
        color:#d4b48c;
        font-family:monospace;
        white-space:pre-wrap;
        word-wrap:break-word;
        margin:0;
        cursor:pointer;
        transition: border-color 0.2s;
      ">name surname за {url=ссыла_на_профиль}никнейм{/url}</pre>
      <div style="margin-top:4px; font-size:12px; color:#888; text-align:center; opacity:0.6;">кликните по коду, чтобы скопировать</div>
    </div>
  </div>

  <!-- Нижний блок с двумя ячейками -->
  <div style="display:flex; justify-content:center; gap:20px; height:250px; padding:0 0 16px 0; flex-shrink:0; color:#000000;">
    <div style="width:250px; height:100%; border:2px solid #82989a; border-radius:6px; background:#375258; padding:10px; box-sizing:border-box; overflow-y:auto; color:#000000;">
      <div style="text-align:center; font-weight:bold; margin-bottom:8px;">Занятые роли</div>
      <p>Контент с прокруткой.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
    <div style="width:250px; height:100%; border:2px solid #82989a; border-radius:6px; background:#375258; padding:10px; box-sizing:border-box; overflow-y:auto; color:#000000;">
      <div style="text-align:center; font-weight:bold; margin-bottom:8px;">Занятые внешности</div>
      <p>Контент с прокруткой.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
</div>

<script>
  (function() {
    const preBlock = document.getElementById('codeExample');
    const originalText = 'name surname за {url=ссыла_на_профиль}никнейм{/url}';
    preBlock.textContent = originalText;

    function copyCode() {
      let raw = preBlock.textContent.trim();
      let final = raw.replace(/\{/g, '[').replace(/\}/g, ']');
     
      const copy = function(text) {
        if (navigator.clipboard && navigator.clipboard.writeText) {
          navigator.clipboard.writeText(text).then(() => {
            preBlock.style.borderColor = '#4caf50';
            setTimeout(() => preBlock.style.borderColor = '#602423', 1000);
          }).catch(() => fallbackCopy(text));
        } else {
          fallbackCopy(text);
        }
      };

      function fallbackCopy(text) {
        const textarea = document.createElement('textarea');
        textarea.value = text;
        document.body.appendChild(textarea);
        textarea.select();
        try {
          document.execCommand('copy');
          preBlock.style.borderColor = '#4caf50';
          setTimeout(() => preBlock.style.borderColor = '#602423', 1000);
        } catch (e) {
          alert('Не удалось скопировать. Выделите текст вручную.');
        }
        document.body.removeChild(textarea);
      }

      copy(final);
    }

    // По клику на pre – копируем
    preBlock.addEventListener('click', copyCode);
  })();
</script>[/html]

Подпись автора


• •   р а з б и в а л и   с е р ы й   л ё д   с   о г р о м н о й   в ы с о т ы   г л а з а
                                                    твои черты   • •
https://forumstatic.ru/files/001b/ee/37/96328.gif https://forumstatic.ru/files/001b/ee/37/31565.gif
s a y   m y   n a m e !  let me angel like a rain. burnin' up   in love again . . .

0

Страница: 1

Вы здесь » the lake house » болталка » баловство с кодами

Рейтинг форумов | Создать форум бесплатно