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

BRIGHTWYNN / 01.2026
хомяк
голос эха
новости
казино
сувениры
каталог
flame vector
постап, хоррор, способности
Adam and Jan [Когда путь только начинается]
Трудовые недели изматывали его до состояния почти прозрачной усталости...читать далее
Навигация
сюжет путеводитель правила фракции занятые внешности

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

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

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

    Вы здесь » Вектор Пламени » Реклама » Взаимная #1

    Взаимная #1

    Страница:   1 … 16 17 18 19 20 … 34  
    Тема закрыта

    Сообщений 511 страница 540 из 1001

    1

    • Автор: vector
    • Администратор
    • vector
    • Сообщений: 171
    • Уважение: +66

    https://upforme.ru/uploads/001c/a4/b9/4/771290.png

    Код:
    [align=center][url=https://flamevector.rusff.me][img]https://upforme.ru/uploads/001c/a4/b9/4/771290.png[/img][/url][/align]

    https://upforme.ru/uploads/001c/a4/b9/4/225454.png

    Код:
    [align=center][url=https://flamevector.rusff.me/viewtopic.php?id=11#p4366][img]https://upforme.ru/uploads/001c/a4/b9/4/225454.png[/img][/url][/align]

    https://upforme.ru/uploads/001c/a4/b9/4/386149.png

    Код:
    [align=center][url=https://flamevector.rusff.me/viewtopic.php?id=11#p61][img]https://upforme.ru/uploads/001c/a4/b9/4/386149.png[/img][/url][/align]

    [hideprofile]

    0

    511

    • Автор: Phillip Morgan
    • выебоны 24/7
    • Phillip Morgan
    • Лип, 25
      владелец автомастерской
      Мы ничего не приносим в этот мир и ничего не можем из него унести
    • Сообщений: 1068
    • Уважение: +239
    • валюты: 200$
    • постов: 1
    • КАРАТЕЛЬНЫЙ ОРГАН
      не половой

    https://upforme.ru/uploads/0019/47/79/1115/349573.gif

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

    [html]<div class="battery-wrapper" data-level="6">
      <div class="battery">
        <div class="title">MY SOCIAL BATTERY</div>

        <div class="segments">
          <div class="seg">😢</div>
          <div class="seg">🙁</div>
          <div class="seg">😕</div>
          <div class="seg">😐</div>
          <div class="seg">🙂</div>
          <div class="seg">😊</div>
          <div class="seg">😄</div>

          <div class="track">
            <div class="indicator">⚡</div>
          </div>
        </div>
      </div>

      <div class="side"></div>
    </div>

    <style>
    @font-face {  font-family: 'Cinzel';  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
    }
    .battery-wrapper{
      position: relative;
      width: 300px;
      transform: scale(0.7);
      transform-origin: top left;
      margin: 0 auto;
    }

    .battery{
      background:#000;
      border-radius:16px;
      padding:12px;
      color:#fff;
      font-family:sans-serif;
    }

    .side{
      position:absolute;
      right:-14px;
      top:50%;
      transform:translateY(-50%);
      width:14px;
      height:50%;
      background:#000;
      border-radius:0 8px 8px 0;
    }

    .title{
      text-align:center;
      margin-bottom:10px;
      font-size:20px;
      font-family: 'Cinzel';
    }

    .segments{
      display:flex;
      overflow:hidden;
      border-radius:10px;
      margin-bottom:8px;
      position:relative;
    }

    .seg{
      flex:1;
      text-align:center;
      padding:8px 0 40px;
      font-size:14px;
    }

    .seg:nth-child(1){background:#ff3b3b;}
    .seg:nth-child(2){background:#ff6b3b;}
    .seg:nth-child(3){background:#ff9b3b;}
    .seg:nth-child(4){background:#ffd93b;}
    .seg:nth-child(5){background:#b7e23b;}
    .seg:nth-child(6){background:#6be23b;}
    .seg:nth-child(7){background:#2be23b;}

    .track{
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      height:10px;
      background:#222;
      border-radius:999px;
      z-index:2;
    }

    .indicator{
      position:absolute;
      top:50%;
      transform:translate(-50%, -50%);
      font-size:20px;
      transition:0.3s ease;
    }
    </style>

    <script>
    function updateAll() {
      document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
        const level = parseInt(wrapper.dataset.level) || 1;

        const indicator = wrapper.querySelector('.indicator');
        const segments = wrapper.querySelectorAll('.seg');
        const count = segments.length;

        // центр сегмента + маленький сдвиг вправо
        const offsetPercent = 2; // смещение вправо в процентах
        const percent = ((level - 0.5) / count * 100) + offsetPercent;

        indicator.style.left = percent + '%';
      });
    }

    window.onload = updateAll;
    window.onresize = updateAll;
    </script>[/html]

    0

    512

    • Автор: Phillip Morgan
    • выебоны 24/7
    • Phillip Morgan
    • Лип, 25
      владелец автомастерской
      Мы ничего не приносим в этот мир и ничего не можем из него унести
    • Сообщений: 1068
    • Уважение: +239
    • валюты: 200$
    • постов: 1
    • КАРАТЕЛЬНЫЙ ОРГАН
      не половой

    https://forumstatic.ru/files/001c/52/36/10973.png
    GOLIATH.антуражное фентези с остроухими эльфами, драконами и тележкой магии
    АКТУАЛЬНЫЕ АКЦИИ:
    ДРАКОНЫ ••• ЭЛЬФЫ и ДВАРФЫ ••• ЧЖОУЛИ ••• ВЛАСТИТЕЛИ МИРА
    ДРАКОНЬИ ВСАДНИКИ ••• НУЖНЫЕ ПЕРСОНАЖИ

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

    [html]<div class="battery-wrapper" data-level="6">
      <div class="battery">
        <div class="title">MY SOCIAL BATTERY</div>

        <div class="segments">
          <div class="seg">😢</div>
          <div class="seg">🙁</div>
          <div class="seg">😕</div>
          <div class="seg">😐</div>
          <div class="seg">🙂</div>
          <div class="seg">😊</div>
          <div class="seg">😄</div>

          <div class="track">
            <div class="indicator">⚡</div>
          </div>
        </div>
      </div>

      <div class="side"></div>
    </div>

    <style>
    @font-face {  font-family: 'Cinzel';  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
    }
    .battery-wrapper{
      position: relative;
      width: 300px;
      transform: scale(0.7);
      transform-origin: top left;
      margin: 0 auto;
    }

    .battery{
      background:#000;
      border-radius:16px;
      padding:12px;
      color:#fff;
      font-family:sans-serif;
    }

    .side{
      position:absolute;
      right:-14px;
      top:50%;
      transform:translateY(-50%);
      width:14px;
      height:50%;
      background:#000;
      border-radius:0 8px 8px 0;
    }

    .title{
      text-align:center;
      margin-bottom:10px;
      font-size:20px;
      font-family: 'Cinzel';
    }

    .segments{
      display:flex;
      overflow:hidden;
      border-radius:10px;
      margin-bottom:8px;
      position:relative;
    }

    .seg{
      flex:1;
      text-align:center;
      padding:8px 0 40px;
      font-size:14px;
    }

    .seg:nth-child(1){background:#ff3b3b;}
    .seg:nth-child(2){background:#ff6b3b;}
    .seg:nth-child(3){background:#ff9b3b;}
    .seg:nth-child(4){background:#ffd93b;}
    .seg:nth-child(5){background:#b7e23b;}
    .seg:nth-child(6){background:#6be23b;}
    .seg:nth-child(7){background:#2be23b;}

    .track{
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      height:10px;
      background:#222;
      border-radius:999px;
      z-index:2;
    }

    .indicator{
      position:absolute;
      top:50%;
      transform:translate(-50%, -50%);
      font-size:20px;
      transition:0.3s ease;
    }
    </style>

    <script>
    function updateAll() {
      document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
        const level = parseInt(wrapper.dataset.level) || 1;

        const indicator = wrapper.querySelector('.indicator');
        const segments = wrapper.querySelectorAll('.seg');
        const count = segments.length;

        // центр сегмента + маленький сдвиг вправо
        const offsetPercent = 2; // смещение вправо в процентах
        const percent = ((level - 0.5) / count * 100) + offsetPercent;

        indicator.style.left = percent + '%';
      });
    }

    window.onload = updateAll;
    window.onresize = updateAll;
    </script>[/html]

    0

    513

    • Автор: Phillip Morgan
    • выебоны 24/7
    • Phillip Morgan
    • Лип, 25
      владелец автомастерской
      Мы ничего не приносим в этот мир и ничего не можем из него унести
    • Сообщений: 1068
    • Уважение: +239
    • валюты: 200$
    • постов: 1
    • КАРАТЕЛЬНЫЙ ОРГАН
      не половой

    https://upforme.ru/uploads/001c/9c/5d/2/85497.jpg
    1998 год, dark au ✦ 18+ ✦ эпизоды
    СЮЖЕТ ✦ FAQ ✦ ГОСТЕВАЯ

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

    [html]<div class="battery-wrapper" data-level="6">
      <div class="battery">
        <div class="title">MY SOCIAL BATTERY</div>

        <div class="segments">
          <div class="seg">😢</div>
          <div class="seg">🙁</div>
          <div class="seg">😕</div>
          <div class="seg">😐</div>
          <div class="seg">🙂</div>
          <div class="seg">😊</div>
          <div class="seg">😄</div>

          <div class="track">
            <div class="indicator">⚡</div>
          </div>
        </div>
      </div>

      <div class="side"></div>
    </div>

    <style>
    @font-face {  font-family: 'Cinzel';  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
    }
    .battery-wrapper{
      position: relative;
      width: 300px;
      transform: scale(0.7);
      transform-origin: top left;
      margin: 0 auto;
    }

    .battery{
      background:#000;
      border-radius:16px;
      padding:12px;
      color:#fff;
      font-family:sans-serif;
    }

    .side{
      position:absolute;
      right:-14px;
      top:50%;
      transform:translateY(-50%);
      width:14px;
      height:50%;
      background:#000;
      border-radius:0 8px 8px 0;
    }

    .title{
      text-align:center;
      margin-bottom:10px;
      font-size:20px;
      font-family: 'Cinzel';
    }

    .segments{
      display:flex;
      overflow:hidden;
      border-radius:10px;
      margin-bottom:8px;
      position:relative;
    }

    .seg{
      flex:1;
      text-align:center;
      padding:8px 0 40px;
      font-size:14px;
    }

    .seg:nth-child(1){background:#ff3b3b;}
    .seg:nth-child(2){background:#ff6b3b;}
    .seg:nth-child(3){background:#ff9b3b;}
    .seg:nth-child(4){background:#ffd93b;}
    .seg:nth-child(5){background:#b7e23b;}
    .seg:nth-child(6){background:#6be23b;}
    .seg:nth-child(7){background:#2be23b;}

    .track{
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      height:10px;
      background:#222;
      border-radius:999px;
      z-index:2;
    }

    .indicator{
      position:absolute;
      top:50%;
      transform:translate(-50%, -50%);
      font-size:20px;
      transition:0.3s ease;
    }
    </style>

    <script>
    function updateAll() {
      document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
        const level = parseInt(wrapper.dataset.level) || 1;

        const indicator = wrapper.querySelector('.indicator');
        const segments = wrapper.querySelectorAll('.seg');
        const count = segments.length;

        // центр сегмента + маленький сдвиг вправо
        const offsetPercent = 2; // смещение вправо в процентах
        const percent = ((level - 0.5) / count * 100) + offsetPercent;

        indicator.style.left = percent + '%';
      });
    }

    window.onload = updateAll;
    window.onresize = updateAll;
    </script>[/html]

    0

    514

    • Автор: Phillip Morgan
    • выебоны 24/7
    • Phillip Morgan
    • Лип, 25
      владелец автомастерской
      Мы ничего не приносим в этот мир и ничего не можем из него унести
    • Сообщений: 1068
    • Уважение: +239
    • валюты: 200$
    • постов: 1
    • КАРАТЕЛЬНЫЙ ОРГАН
      не половой

    https://upforme.ru/uploads/001c/8b/41/3/310471.png

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

    [html]<div class="battery-wrapper" data-level="6">
      <div class="battery">
        <div class="title">MY SOCIAL BATTERY</div>

        <div class="segments">
          <div class="seg">😢</div>
          <div class="seg">🙁</div>
          <div class="seg">😕</div>
          <div class="seg">😐</div>
          <div class="seg">🙂</div>
          <div class="seg">😊</div>
          <div class="seg">😄</div>

          <div class="track">
            <div class="indicator">⚡</div>
          </div>
        </div>
      </div>

      <div class="side"></div>
    </div>

    <style>
    @font-face {  font-family: 'Cinzel';  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
    }
    .battery-wrapper{
      position: relative;
      width: 300px;
      transform: scale(0.7);
      transform-origin: top left;
      margin: 0 auto;
    }

    .battery{
      background:#000;
      border-radius:16px;
      padding:12px;
      color:#fff;
      font-family:sans-serif;
    }

    .side{
      position:absolute;
      right:-14px;
      top:50%;
      transform:translateY(-50%);
      width:14px;
      height:50%;
      background:#000;
      border-radius:0 8px 8px 0;
    }

    .title{
      text-align:center;
      margin-bottom:10px;
      font-size:20px;
      font-family: 'Cinzel';
    }

    .segments{
      display:flex;
      overflow:hidden;
      border-radius:10px;
      margin-bottom:8px;
      position:relative;
    }

    .seg{
      flex:1;
      text-align:center;
      padding:8px 0 40px;
      font-size:14px;
    }

    .seg:nth-child(1){background:#ff3b3b;}
    .seg:nth-child(2){background:#ff6b3b;}
    .seg:nth-child(3){background:#ff9b3b;}
    .seg:nth-child(4){background:#ffd93b;}
    .seg:nth-child(5){background:#b7e23b;}
    .seg:nth-child(6){background:#6be23b;}
    .seg:nth-child(7){background:#2be23b;}

    .track{
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      height:10px;
      background:#222;
      border-radius:999px;
      z-index:2;
    }

    .indicator{
      position:absolute;
      top:50%;
      transform:translate(-50%, -50%);
      font-size:20px;
      transition:0.3s ease;
    }
    </style>

    <script>
    function updateAll() {
      document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
        const level = parseInt(wrapper.dataset.level) || 1;

        const indicator = wrapper.querySelector('.indicator');
        const segments = wrapper.querySelectorAll('.seg');
        const count = segments.length;

        // центр сегмента + маленький сдвиг вправо
        const offsetPercent = 2; // смещение вправо в процентах
        const percent = ((level - 0.5) / count * 100) + offsetPercent;

        indicator.style.left = percent + '%';
      });
    }

    window.onload = updateAll;
    window.onresize = updateAll;
    </script>[/html]

    0

    515

    • Автор: Phillip Morgan
    • выебоны 24/7
    • Phillip Morgan
    • Лип, 25
      владелец автомастерской
      Мы ничего не приносим в этот мир и ничего не можем из него унести
    • Сообщений: 1068
    • Уважение: +239
    • валюты: 200$
    • постов: 1
    • КАРАТЕЛЬНЫЙ ОРГАН
      не половой

    https://forumstatic.ru/files/001c/7d/d4/65392.png
    сюжет ☆ о городе ☆ вопросы и ответы ☆ нужные

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

    [html]<div class="battery-wrapper" data-level="6">
      <div class="battery">
        <div class="title">MY SOCIAL BATTERY</div>

        <div class="segments">
          <div class="seg">😢</div>
          <div class="seg">🙁</div>
          <div class="seg">😕</div>
          <div class="seg">😐</div>
          <div class="seg">🙂</div>
          <div class="seg">😊</div>
          <div class="seg">😄</div>

          <div class="track">
            <div class="indicator">⚡</div>
          </div>
        </div>
      </div>

      <div class="side"></div>
    </div>

    <style>
    @font-face {  font-family: 'Cinzel';  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
    }
    .battery-wrapper{
      position: relative;
      width: 300px;
      transform: scale(0.7);
      transform-origin: top left;
      margin: 0 auto;
    }

    .battery{
      background:#000;
      border-radius:16px;
      padding:12px;
      color:#fff;
      font-family:sans-serif;
    }

    .side{
      position:absolute;
      right:-14px;
      top:50%;
      transform:translateY(-50%);
      width:14px;
      height:50%;
      background:#000;
      border-radius:0 8px 8px 0;
    }

    .title{
      text-align:center;
      margin-bottom:10px;
      font-size:20px;
      font-family: 'Cinzel';
    }

    .segments{
      display:flex;
      overflow:hidden;
      border-radius:10px;
      margin-bottom:8px;
      position:relative;
    }

    .seg{
      flex:1;
      text-align:center;
      padding:8px 0 40px;
      font-size:14px;
    }

    .seg:nth-child(1){background:#ff3b3b;}
    .seg:nth-child(2){background:#ff6b3b;}
    .seg:nth-child(3){background:#ff9b3b;}
    .seg:nth-child(4){background:#ffd93b;}
    .seg:nth-child(5){background:#b7e23b;}
    .seg:nth-child(6){background:#6be23b;}
    .seg:nth-child(7){background:#2be23b;}

    .track{
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      height:10px;
      background:#222;
      border-radius:999px;
      z-index:2;
    }

    .indicator{
      position:absolute;
      top:50%;
      transform:translate(-50%, -50%);
      font-size:20px;
      transition:0.3s ease;
    }
    </style>

    <script>
    function updateAll() {
      document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
        const level = parseInt(wrapper.dataset.level) || 1;

        const indicator = wrapper.querySelector('.indicator');
        const segments = wrapper.querySelectorAll('.seg');
        const count = segments.length;

        // центр сегмента + маленький сдвиг вправо
        const offsetPercent = 2; // смещение вправо в процентах
        const percent = ((level - 0.5) / count * 100) + offsetPercent;

        indicator.style.left = percent + '%';
      });
    }

    window.onload = updateAll;
    window.onresize = updateAll;
    </script>[/html]

    0

    516

    • Автор: Phillip Morgan
    • выебоны 24/7
    • Phillip Morgan
    • Лип, 25
      владелец автомастерской
      Мы ничего не приносим в этот мир и ничего не можем из него унести
    • Сообщений: 1068
    • Уважение: +239
    • валюты: 200$
    • постов: 1
    • КАРАТЕЛЬНЫЙ ОРГАН
      не половой

    https://upforme.ru/uploads/001a/f6/b2/2/668618.png

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

    [html]<div class="battery-wrapper" data-level="6">
      <div class="battery">
        <div class="title">MY SOCIAL BATTERY</div>

        <div class="segments">
          <div class="seg">😢</div>
          <div class="seg">🙁</div>
          <div class="seg">😕</div>
          <div class="seg">😐</div>
          <div class="seg">🙂</div>
          <div class="seg">😊</div>
          <div class="seg">😄</div>

          <div class="track">
            <div class="indicator">⚡</div>
          </div>
        </div>
      </div>

      <div class="side"></div>
    </div>

    <style>
    @font-face {  font-family: 'Cinzel';  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
    }
    .battery-wrapper{
      position: relative;
      width: 300px;
      transform: scale(0.7);
      transform-origin: top left;
      margin: 0 auto;
    }

    .battery{
      background:#000;
      border-radius:16px;
      padding:12px;
      color:#fff;
      font-family:sans-serif;
    }

    .side{
      position:absolute;
      right:-14px;
      top:50%;
      transform:translateY(-50%);
      width:14px;
      height:50%;
      background:#000;
      border-radius:0 8px 8px 0;
    }

    .title{
      text-align:center;
      margin-bottom:10px;
      font-size:20px;
      font-family: 'Cinzel';
    }

    .segments{
      display:flex;
      overflow:hidden;
      border-radius:10px;
      margin-bottom:8px;
      position:relative;
    }

    .seg{
      flex:1;
      text-align:center;
      padding:8px 0 40px;
      font-size:14px;
    }

    .seg:nth-child(1){background:#ff3b3b;}
    .seg:nth-child(2){background:#ff6b3b;}
    .seg:nth-child(3){background:#ff9b3b;}
    .seg:nth-child(4){background:#ffd93b;}
    .seg:nth-child(5){background:#b7e23b;}
    .seg:nth-child(6){background:#6be23b;}
    .seg:nth-child(7){background:#2be23b;}

    .track{
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      height:10px;
      background:#222;
      border-radius:999px;
      z-index:2;
    }

    .indicator{
      position:absolute;
      top:50%;
      transform:translate(-50%, -50%);
      font-size:20px;
      transition:0.3s ease;
    }
    </style>

    <script>
    function updateAll() {
      document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
        const level = parseInt(wrapper.dataset.level) || 1;

        const indicator = wrapper.querySelector('.indicator');
        const segments = wrapper.querySelectorAll('.seg');
        const count = segments.length;

        // центр сегмента + маленький сдвиг вправо
        const offsetPercent = 2; // смещение вправо в процентах
        const percent = ((level - 0.5) / count * 100) + offsetPercent;

        indicator.style.left = percent + '%';
      });
    }

    window.onload = updateAll;
    window.onresize = updateAll;
    </script>[/html]

    0

    517

    • Автор: Phillip Morgan
    • выебоны 24/7
    • Phillip Morgan
    • Лип, 25
      владелец автомастерской
      Мы ничего не приносим в этот мир и ничего не можем из него унести
    • Сообщений: 1068
    • Уважение: +239
    • валюты: 200$
    • постов: 1
    • КАРАТЕЛЬНЫЙ ОРГАН
      не половой

    https://upforme.ru/uploads/001c/8d/01/6/256089.jpg

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

    [html]<div class="battery-wrapper" data-level="6">
      <div class="battery">
        <div class="title">MY SOCIAL BATTERY</div>

        <div class="segments">
          <div class="seg">😢</div>
          <div class="seg">🙁</div>
          <div class="seg">😕</div>
          <div class="seg">😐</div>
          <div class="seg">🙂</div>
          <div class="seg">😊</div>
          <div class="seg">😄</div>

          <div class="track">
            <div class="indicator">⚡</div>
          </div>
        </div>
      </div>

      <div class="side"></div>
    </div>

    <style>
    @font-face {  font-family: 'Cinzel';  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
    }
    .battery-wrapper{
      position: relative;
      width: 300px;
      transform: scale(0.7);
      transform-origin: top left;
      margin: 0 auto;
    }

    .battery{
      background:#000;
      border-radius:16px;
      padding:12px;
      color:#fff;
      font-family:sans-serif;
    }

    .side{
      position:absolute;
      right:-14px;
      top:50%;
      transform:translateY(-50%);
      width:14px;
      height:50%;
      background:#000;
      border-radius:0 8px 8px 0;
    }

    .title{
      text-align:center;
      margin-bottom:10px;
      font-size:20px;
      font-family: 'Cinzel';
    }

    .segments{
      display:flex;
      overflow:hidden;
      border-radius:10px;
      margin-bottom:8px;
      position:relative;
    }

    .seg{
      flex:1;
      text-align:center;
      padding:8px 0 40px;
      font-size:14px;
    }

    .seg:nth-child(1){background:#ff3b3b;}
    .seg:nth-child(2){background:#ff6b3b;}
    .seg:nth-child(3){background:#ff9b3b;}
    .seg:nth-child(4){background:#ffd93b;}
    .seg:nth-child(5){background:#b7e23b;}
    .seg:nth-child(6){background:#6be23b;}
    .seg:nth-child(7){background:#2be23b;}

    .track{
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      height:10px;
      background:#222;
      border-radius:999px;
      z-index:2;
    }

    .indicator{
      position:absolute;
      top:50%;
      transform:translate(-50%, -50%);
      font-size:20px;
      transition:0.3s ease;
    }
    </style>

    <script>
    function updateAll() {
      document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
        const level = parseInt(wrapper.dataset.level) || 1;

        const indicator = wrapper.querySelector('.indicator');
        const segments = wrapper.querySelectorAll('.seg');
        const count = segments.length;

        // центр сегмента + маленький сдвиг вправо
        const offsetPercent = 2; // смещение вправо в процентах
        const percent = ((level - 0.5) / count * 100) + offsetPercent;

        indicator.style.left = percent + '%';
      });
    }

    window.onload = updateAll;
    window.onresize = updateAll;
    </script>[/html]

    0

    518

    • Автор: Phillip Morgan
    • выебоны 24/7
    • Phillip Morgan
    • Лип, 25
      владелец автомастерской
      Мы ничего не приносим в этот мир и ничего не можем из него унести
    • Сообщений: 1068
    • Уважение: +239
    • валюты: 200$
    • постов: 1
    • КАРАТЕЛЬНЫЙ ОРГАН
      не половой

    https://upforme.ru/uploads/001c/96/9f/2/463476.jpg

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

    [html]<div class="battery-wrapper" data-level="6">
      <div class="battery">
        <div class="title">MY SOCIAL BATTERY</div>

        <div class="segments">
          <div class="seg">😢</div>
          <div class="seg">🙁</div>
          <div class="seg">😕</div>
          <div class="seg">😐</div>
          <div class="seg">🙂</div>
          <div class="seg">😊</div>
          <div class="seg">😄</div>

          <div class="track">
            <div class="indicator">⚡</div>
          </div>
        </div>
      </div>

      <div class="side"></div>
    </div>

    <style>
    @font-face {  font-family: 'Cinzel';  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
    }
    .battery-wrapper{
      position: relative;
      width: 300px;
      transform: scale(0.7);
      transform-origin: top left;
      margin: 0 auto;
    }

    .battery{
      background:#000;
      border-radius:16px;
      padding:12px;
      color:#fff;
      font-family:sans-serif;
    }

    .side{
      position:absolute;
      right:-14px;
      top:50%;
      transform:translateY(-50%);
      width:14px;
      height:50%;
      background:#000;
      border-radius:0 8px 8px 0;
    }

    .title{
      text-align:center;
      margin-bottom:10px;
      font-size:20px;
      font-family: 'Cinzel';
    }

    .segments{
      display:flex;
      overflow:hidden;
      border-radius:10px;
      margin-bottom:8px;
      position:relative;
    }

    .seg{
      flex:1;
      text-align:center;
      padding:8px 0 40px;
      font-size:14px;
    }

    .seg:nth-child(1){background:#ff3b3b;}
    .seg:nth-child(2){background:#ff6b3b;}
    .seg:nth-child(3){background:#ff9b3b;}
    .seg:nth-child(4){background:#ffd93b;}
    .seg:nth-child(5){background:#b7e23b;}
    .seg:nth-child(6){background:#6be23b;}
    .seg:nth-child(7){background:#2be23b;}

    .track{
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      height:10px;
      background:#222;
      border-radius:999px;
      z-index:2;
    }

    .indicator{
      position:absolute;
      top:50%;
      transform:translate(-50%, -50%);
      font-size:20px;
      transition:0.3s ease;
    }
    </style>

    <script>
    function updateAll() {
      document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
        const level = parseInt(wrapper.dataset.level) || 1;

        const indicator = wrapper.querySelector('.indicator');
        const segments = wrapper.querySelectorAll('.seg');
        const count = segments.length;

        // центр сегмента + маленький сдвиг вправо
        const offsetPercent = 2; // смещение вправо в процентах
        const percent = ((level - 0.5) / count * 100) + offsetPercent;

        indicator.style.left = percent + '%';
      });
    }

    window.onload = updateAll;
    window.onresize = updateAll;
    </script>[/html]

    0

    519

    • Автор: Phillip Morgan
    • выебоны 24/7
    • Phillip Morgan
    • Лип, 25
      владелец автомастерской
      Мы ничего не приносим в этот мир и ничего не можем из него унести
    • Сообщений: 1068
    • Уважение: +239
    • валюты: 200$
    • постов: 1
    • КАРАТЕЛЬНЫЙ ОРГАН
      не половой

    https://upforme.ru/uploads/001c/a8/d2/2/969451.gif

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

    [html]<div class="battery-wrapper" data-level="6">
      <div class="battery">
        <div class="title">MY SOCIAL BATTERY</div>

        <div class="segments">
          <div class="seg">😢</div>
          <div class="seg">🙁</div>
          <div class="seg">😕</div>
          <div class="seg">😐</div>
          <div class="seg">🙂</div>
          <div class="seg">😊</div>
          <div class="seg">😄</div>

          <div class="track">
            <div class="indicator">⚡</div>
          </div>
        </div>
      </div>

      <div class="side"></div>
    </div>

    <style>
    @font-face {  font-family: 'Cinzel';  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
    }
    .battery-wrapper{
      position: relative;
      width: 300px;
      transform: scale(0.7);
      transform-origin: top left;
      margin: 0 auto;
    }

    .battery{
      background:#000;
      border-radius:16px;
      padding:12px;
      color:#fff;
      font-family:sans-serif;
    }

    .side{
      position:absolute;
      right:-14px;
      top:50%;
      transform:translateY(-50%);
      width:14px;
      height:50%;
      background:#000;
      border-radius:0 8px 8px 0;
    }

    .title{
      text-align:center;
      margin-bottom:10px;
      font-size:20px;
      font-family: 'Cinzel';
    }

    .segments{
      display:flex;
      overflow:hidden;
      border-radius:10px;
      margin-bottom:8px;
      position:relative;
    }

    .seg{
      flex:1;
      text-align:center;
      padding:8px 0 40px;
      font-size:14px;
    }

    .seg:nth-child(1){background:#ff3b3b;}
    .seg:nth-child(2){background:#ff6b3b;}
    .seg:nth-child(3){background:#ff9b3b;}
    .seg:nth-child(4){background:#ffd93b;}
    .seg:nth-child(5){background:#b7e23b;}
    .seg:nth-child(6){background:#6be23b;}
    .seg:nth-child(7){background:#2be23b;}

    .track{
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      height:10px;
      background:#222;
      border-radius:999px;
      z-index:2;
    }

    .indicator{
      position:absolute;
      top:50%;
      transform:translate(-50%, -50%);
      font-size:20px;
      transition:0.3s ease;
    }
    </style>

    <script>
    function updateAll() {
      document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
        const level = parseInt(wrapper.dataset.level) || 1;

        const indicator = wrapper.querySelector('.indicator');
        const segments = wrapper.querySelectorAll('.seg');
        const count = segments.length;

        // центр сегмента + маленький сдвиг вправо
        const offsetPercent = 2; // смещение вправо в процентах
        const percent = ((level - 0.5) / count * 100) + offsetPercent;

        indicator.style.left = percent + '%';
      });
    }

    window.onload = updateAll;
    window.onresize = updateAll;
    </script>[/html]

    0

    520

    • Автор: Phillip Morgan
    • выебоны 24/7
    • Phillip Morgan
    • Лип, 25
      владелец автомастерской
      Мы ничего не приносим в этот мир и ничего не можем из него унести
    • Сообщений: 1068
    • Уважение: +239
    • валюты: 200$
    • постов: 1
    • КАРАТЕЛЬНЫЙ ОРГАН
      не половой

    https://upforme.ru/uploads/0010/a8/ca/8298/28543.png
    sacramento: легенды не стареют - они обрастают историей

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

    [html]<div class="battery-wrapper" data-level="6">
      <div class="battery">
        <div class="title">MY SOCIAL BATTERY</div>

        <div class="segments">
          <div class="seg">😢</div>
          <div class="seg">🙁</div>
          <div class="seg">😕</div>
          <div class="seg">😐</div>
          <div class="seg">🙂</div>
          <div class="seg">😊</div>
          <div class="seg">😄</div>

          <div class="track">
            <div class="indicator">⚡</div>
          </div>
        </div>
      </div>

      <div class="side"></div>
    </div>

    <style>
    @font-face {  font-family: 'Cinzel';  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
    }
    .battery-wrapper{
      position: relative;
      width: 300px;
      transform: scale(0.7);
      transform-origin: top left;
      margin: 0 auto;
    }

    .battery{
      background:#000;
      border-radius:16px;
      padding:12px;
      color:#fff;
      font-family:sans-serif;
    }

    .side{
      position:absolute;
      right:-14px;
      top:50%;
      transform:translateY(-50%);
      width:14px;
      height:50%;
      background:#000;
      border-radius:0 8px 8px 0;
    }

    .title{
      text-align:center;
      margin-bottom:10px;
      font-size:20px;
      font-family: 'Cinzel';
    }

    .segments{
      display:flex;
      overflow:hidden;
      border-radius:10px;
      margin-bottom:8px;
      position:relative;
    }

    .seg{
      flex:1;
      text-align:center;
      padding:8px 0 40px;
      font-size:14px;
    }

    .seg:nth-child(1){background:#ff3b3b;}
    .seg:nth-child(2){background:#ff6b3b;}
    .seg:nth-child(3){background:#ff9b3b;}
    .seg:nth-child(4){background:#ffd93b;}
    .seg:nth-child(5){background:#b7e23b;}
    .seg:nth-child(6){background:#6be23b;}
    .seg:nth-child(7){background:#2be23b;}

    .track{
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      height:10px;
      background:#222;
      border-radius:999px;
      z-index:2;
    }

    .indicator{
      position:absolute;
      top:50%;
      transform:translate(-50%, -50%);
      font-size:20px;
      transition:0.3s ease;
    }
    </style>

    <script>
    function updateAll() {
      document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
        const level = parseInt(wrapper.dataset.level) || 1;

        const indicator = wrapper.querySelector('.indicator');
        const segments = wrapper.querySelectorAll('.seg');
        const count = segments.length;

        // центр сегмента + маленький сдвиг вправо
        const offsetPercent = 2; // смещение вправо в процентах
        const percent = ((level - 0.5) / count * 100) + offsetPercent;

        indicator.style.left = percent + '%';
      });
    }

    window.onload = updateAll;
    window.onresize = updateAll;
    </script>[/html]

    0

    521

    • Автор: Phillip Morgan
    • выебоны 24/7
    • Phillip Morgan
    • Лип, 25
      владелец автомастерской
      Мы ничего не приносим в этот мир и ничего не можем из него унести
    • Сообщений: 1068
    • Уважение: +239
    • валюты: 200$
    • постов: 1
    • КАРАТЕЛЬНЫЙ ОРГАН
      не половой

    https://upforme.ru/uploads/001c/38/af/6/786848.jpg

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

    [html]<div class="battery-wrapper" data-level="6">
      <div class="battery">
        <div class="title">MY SOCIAL BATTERY</div>

        <div class="segments">
          <div class="seg">😢</div>
          <div class="seg">🙁</div>
          <div class="seg">😕</div>
          <div class="seg">😐</div>
          <div class="seg">🙂</div>
          <div class="seg">😊</div>
          <div class="seg">😄</div>

          <div class="track">
            <div class="indicator">⚡</div>
          </div>
        </div>
      </div>

      <div class="side"></div>
    </div>

    <style>
    @font-face {  font-family: 'Cinzel';  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
    }
    .battery-wrapper{
      position: relative;
      width: 300px;
      transform: scale(0.7);
      transform-origin: top left;
      margin: 0 auto;
    }

    .battery{
      background:#000;
      border-radius:16px;
      padding:12px;
      color:#fff;
      font-family:sans-serif;
    }

    .side{
      position:absolute;
      right:-14px;
      top:50%;
      transform:translateY(-50%);
      width:14px;
      height:50%;
      background:#000;
      border-radius:0 8px 8px 0;
    }

    .title{
      text-align:center;
      margin-bottom:10px;
      font-size:20px;
      font-family: 'Cinzel';
    }

    .segments{
      display:flex;
      overflow:hidden;
      border-radius:10px;
      margin-bottom:8px;
      position:relative;
    }

    .seg{
      flex:1;
      text-align:center;
      padding:8px 0 40px;
      font-size:14px;
    }

    .seg:nth-child(1){background:#ff3b3b;}
    .seg:nth-child(2){background:#ff6b3b;}
    .seg:nth-child(3){background:#ff9b3b;}
    .seg:nth-child(4){background:#ffd93b;}
    .seg:nth-child(5){background:#b7e23b;}
    .seg:nth-child(6){background:#6be23b;}
    .seg:nth-child(7){background:#2be23b;}

    .track{
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      height:10px;
      background:#222;
      border-radius:999px;
      z-index:2;
    }

    .indicator{
      position:absolute;
      top:50%;
      transform:translate(-50%, -50%);
      font-size:20px;
      transition:0.3s ease;
    }
    </style>

    <script>
    function updateAll() {
      document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
        const level = parseInt(wrapper.dataset.level) || 1;

        const indicator = wrapper.querySelector('.indicator');
        const segments = wrapper.querySelectorAll('.seg');
        const count = segments.length;

        // центр сегмента + маленький сдвиг вправо
        const offsetPercent = 2; // смещение вправо в процентах
        const percent = ((level - 0.5) / count * 100) + offsetPercent;

        indicator.style.left = percent + '%';
      });
    }

    window.onload = updateAll;
    window.onresize = updateAll;
    </script>[/html]

    0

    522

    • Автор: Phillip Morgan
    • выебоны 24/7
    • Phillip Morgan
    • Лип, 25
      владелец автомастерской
      Мы ничего не приносим в этот мир и ничего не можем из него унести
    • Сообщений: 1068
    • Уважение: +239
    • валюты: 200$
    • постов: 1
    • КАРАТЕЛЬНЫЙ ОРГАН
      не половой

    https://upforme.ru/uploads/0015/e5/b7/3090/531229.png

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

    [html]<div class="battery-wrapper" data-level="6">
      <div class="battery">
        <div class="title">MY SOCIAL BATTERY</div>

        <div class="segments">
          <div class="seg">😢</div>
          <div class="seg">🙁</div>
          <div class="seg">😕</div>
          <div class="seg">😐</div>
          <div class="seg">🙂</div>
          <div class="seg">😊</div>
          <div class="seg">😄</div>

          <div class="track">
            <div class="indicator">⚡</div>
          </div>
        </div>
      </div>

      <div class="side"></div>
    </div>

    <style>
    @font-face {  font-family: 'Cinzel';  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
    }
    .battery-wrapper{
      position: relative;
      width: 300px;
      transform: scale(0.7);
      transform-origin: top left;
      margin: 0 auto;
    }

    .battery{
      background:#000;
      border-radius:16px;
      padding:12px;
      color:#fff;
      font-family:sans-serif;
    }

    .side{
      position:absolute;
      right:-14px;
      top:50%;
      transform:translateY(-50%);
      width:14px;
      height:50%;
      background:#000;
      border-radius:0 8px 8px 0;
    }

    .title{
      text-align:center;
      margin-bottom:10px;
      font-size:20px;
      font-family: 'Cinzel';
    }

    .segments{
      display:flex;
      overflow:hidden;
      border-radius:10px;
      margin-bottom:8px;
      position:relative;
    }

    .seg{
      flex:1;
      text-align:center;
      padding:8px 0 40px;
      font-size:14px;
    }

    .seg:nth-child(1){background:#ff3b3b;}
    .seg:nth-child(2){background:#ff6b3b;}
    .seg:nth-child(3){background:#ff9b3b;}
    .seg:nth-child(4){background:#ffd93b;}
    .seg:nth-child(5){background:#b7e23b;}
    .seg:nth-child(6){background:#6be23b;}
    .seg:nth-child(7){background:#2be23b;}

    .track{
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      height:10px;
      background:#222;
      border-radius:999px;
      z-index:2;
    }

    .indicator{
      position:absolute;
      top:50%;
      transform:translate(-50%, -50%);
      font-size:20px;
      transition:0.3s ease;
    }
    </style>

    <script>
    function updateAll() {
      document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
        const level = parseInt(wrapper.dataset.level) || 1;

        const indicator = wrapper.querySelector('.indicator');
        const segments = wrapper.querySelectorAll('.seg');
        const count = segments.length;

        // центр сегмента + маленький сдвиг вправо
        const offsetPercent = 2; // смещение вправо в процентах
        const percent = ((level - 0.5) / count * 100) + offsetPercent;

        indicator.style.left = percent + '%';
      });
    }

    window.onload = updateAll;
    window.onresize = updateAll;
    </script>[/html]

    0

    523

    • Автор: Phillip Morgan
    • выебоны 24/7
    • Phillip Morgan
    • Лип, 25
      владелец автомастерской
      Мы ничего не приносим в этот мир и ничего не можем из него унести
    • Сообщений: 1068
    • Уважение: +239
    • валюты: 200$
    • постов: 1
    • КАРАТЕЛЬНЫЙ ОРГАН
      не половой

    https://i.imgur.com/6ekKg8G.png

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

    [html]<div class="battery-wrapper" data-level="6">
      <div class="battery">
        <div class="title">MY SOCIAL BATTERY</div>

        <div class="segments">
          <div class="seg">😢</div>
          <div class="seg">🙁</div>
          <div class="seg">😕</div>
          <div class="seg">😐</div>
          <div class="seg">🙂</div>
          <div class="seg">😊</div>
          <div class="seg">😄</div>

          <div class="track">
            <div class="indicator">⚡</div>
          </div>
        </div>
      </div>

      <div class="side"></div>
    </div>

    <style>
    @font-face {  font-family: 'Cinzel';  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
    }
    .battery-wrapper{
      position: relative;
      width: 300px;
      transform: scale(0.7);
      transform-origin: top left;
      margin: 0 auto;
    }

    .battery{
      background:#000;
      border-radius:16px;
      padding:12px;
      color:#fff;
      font-family:sans-serif;
    }

    .side{
      position:absolute;
      right:-14px;
      top:50%;
      transform:translateY(-50%);
      width:14px;
      height:50%;
      background:#000;
      border-radius:0 8px 8px 0;
    }

    .title{
      text-align:center;
      margin-bottom:10px;
      font-size:20px;
      font-family: 'Cinzel';
    }

    .segments{
      display:flex;
      overflow:hidden;
      border-radius:10px;
      margin-bottom:8px;
      position:relative;
    }

    .seg{
      flex:1;
      text-align:center;
      padding:8px 0 40px;
      font-size:14px;
    }

    .seg:nth-child(1){background:#ff3b3b;}
    .seg:nth-child(2){background:#ff6b3b;}
    .seg:nth-child(3){background:#ff9b3b;}
    .seg:nth-child(4){background:#ffd93b;}
    .seg:nth-child(5){background:#b7e23b;}
    .seg:nth-child(6){background:#6be23b;}
    .seg:nth-child(7){background:#2be23b;}

    .track{
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      height:10px;
      background:#222;
      border-radius:999px;
      z-index:2;
    }

    .indicator{
      position:absolute;
      top:50%;
      transform:translate(-50%, -50%);
      font-size:20px;
      transition:0.3s ease;
    }
    </style>

    <script>
    function updateAll() {
      document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
        const level = parseInt(wrapper.dataset.level) || 1;

        const indicator = wrapper.querySelector('.indicator');
        const segments = wrapper.querySelectorAll('.seg');
        const count = segments.length;

        // центр сегмента + маленький сдвиг вправо
        const offsetPercent = 2; // смещение вправо в процентах
        const percent = ((level - 0.5) / count * 100) + offsetPercent;

        indicator.style.left = percent + '%';
      });
    }

    window.onload = updateAll;
    window.onresize = updateAll;
    </script>[/html]

    0

    524

    • Автор: Phillip Morgan
    • выебоны 24/7
    • Phillip Morgan
    • Лип, 25
      владелец автомастерской
      Мы ничего не приносим в этот мир и ничего не можем из него унести
    • Сообщений: 1068
    • Уважение: +239
    • валюты: 200$
    • постов: 1
    • КАРАТЕЛЬНЫЙ ОРГАН
      не половой

    https://upforme.ru/uploads/001b/7f/e5/2/683124.jpg
    фэнтези | nc-21 | рисованные внешности

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

    [html]<div class="battery-wrapper" data-level="6">
      <div class="battery">
        <div class="title">MY SOCIAL BATTERY</div>

        <div class="segments">
          <div class="seg">😢</div>
          <div class="seg">🙁</div>
          <div class="seg">😕</div>
          <div class="seg">😐</div>
          <div class="seg">🙂</div>
          <div class="seg">😊</div>
          <div class="seg">😄</div>

          <div class="track">
            <div class="indicator">⚡</div>
          </div>
        </div>
      </div>

      <div class="side"></div>
    </div>

    <style>
    @font-face {  font-family: 'Cinzel';  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
    }
    .battery-wrapper{
      position: relative;
      width: 300px;
      transform: scale(0.7);
      transform-origin: top left;
      margin: 0 auto;
    }

    .battery{
      background:#000;
      border-radius:16px;
      padding:12px;
      color:#fff;
      font-family:sans-serif;
    }

    .side{
      position:absolute;
      right:-14px;
      top:50%;
      transform:translateY(-50%);
      width:14px;
      height:50%;
      background:#000;
      border-radius:0 8px 8px 0;
    }

    .title{
      text-align:center;
      margin-bottom:10px;
      font-size:20px;
      font-family: 'Cinzel';
    }

    .segments{
      display:flex;
      overflow:hidden;
      border-radius:10px;
      margin-bottom:8px;
      position:relative;
    }

    .seg{
      flex:1;
      text-align:center;
      padding:8px 0 40px;
      font-size:14px;
    }

    .seg:nth-child(1){background:#ff3b3b;}
    .seg:nth-child(2){background:#ff6b3b;}
    .seg:nth-child(3){background:#ff9b3b;}
    .seg:nth-child(4){background:#ffd93b;}
    .seg:nth-child(5){background:#b7e23b;}
    .seg:nth-child(6){background:#6be23b;}
    .seg:nth-child(7){background:#2be23b;}

    .track{
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      height:10px;
      background:#222;
      border-radius:999px;
      z-index:2;
    }

    .indicator{
      position:absolute;
      top:50%;
      transform:translate(-50%, -50%);
      font-size:20px;
      transition:0.3s ease;
    }
    </style>

    <script>
    function updateAll() {
      document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
        const level = parseInt(wrapper.dataset.level) || 1;

        const indicator = wrapper.querySelector('.indicator');
        const segments = wrapper.querySelectorAll('.seg');
        const count = segments.length;

        // центр сегмента + маленький сдвиг вправо
        const offsetPercent = 2; // смещение вправо в процентах
        const percent = ((level - 0.5) / count * 100) + offsetPercent;

        indicator.style.left = percent + '%';
      });
    }

    window.onload = updateAll;
    window.onresize = updateAll;
    </script>[/html]

    0

    525

    • Автор: Phillip Morgan
    • выебоны 24/7
    • Phillip Morgan
    • Лип, 25
      владелец автомастерской
      Мы ничего не приносим в этот мир и ничего не можем из него унести
    • Сообщений: 1068
    • Уважение: +239
    • валюты: 200$
    • постов: 1
    • КАРАТЕЛЬНЫЙ ОРГАН
      не половой

    https://upforme.ru/uploads/001c/a1/30/14/758899.gif

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

    [html]<div class="battery-wrapper" data-level="6">
      <div class="battery">
        <div class="title">MY SOCIAL BATTERY</div>

        <div class="segments">
          <div class="seg">😢</div>
          <div class="seg">🙁</div>
          <div class="seg">😕</div>
          <div class="seg">😐</div>
          <div class="seg">🙂</div>
          <div class="seg">😊</div>
          <div class="seg">😄</div>

          <div class="track">
            <div class="indicator">⚡</div>
          </div>
        </div>
      </div>

      <div class="side"></div>
    </div>

    <style>
    @font-face {  font-family: 'Cinzel';  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
    }
    .battery-wrapper{
      position: relative;
      width: 300px;
      transform: scale(0.7);
      transform-origin: top left;
      margin: 0 auto;
    }

    .battery{
      background:#000;
      border-radius:16px;
      padding:12px;
      color:#fff;
      font-family:sans-serif;
    }

    .side{
      position:absolute;
      right:-14px;
      top:50%;
      transform:translateY(-50%);
      width:14px;
      height:50%;
      background:#000;
      border-radius:0 8px 8px 0;
    }

    .title{
      text-align:center;
      margin-bottom:10px;
      font-size:20px;
      font-family: 'Cinzel';
    }

    .segments{
      display:flex;
      overflow:hidden;
      border-radius:10px;
      margin-bottom:8px;
      position:relative;
    }

    .seg{
      flex:1;
      text-align:center;
      padding:8px 0 40px;
      font-size:14px;
    }

    .seg:nth-child(1){background:#ff3b3b;}
    .seg:nth-child(2){background:#ff6b3b;}
    .seg:nth-child(3){background:#ff9b3b;}
    .seg:nth-child(4){background:#ffd93b;}
    .seg:nth-child(5){background:#b7e23b;}
    .seg:nth-child(6){background:#6be23b;}
    .seg:nth-child(7){background:#2be23b;}

    .track{
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      height:10px;
      background:#222;
      border-radius:999px;
      z-index:2;
    }

    .indicator{
      position:absolute;
      top:50%;
      transform:translate(-50%, -50%);
      font-size:20px;
      transition:0.3s ease;
    }
    </style>

    <script>
    function updateAll() {
      document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
        const level = parseInt(wrapper.dataset.level) || 1;

        const indicator = wrapper.querySelector('.indicator');
        const segments = wrapper.querySelectorAll('.seg');
        const count = segments.length;

        // центр сегмента + маленький сдвиг вправо
        const offsetPercent = 2; // смещение вправо в процентах
        const percent = ((level - 0.5) / count * 100) + offsetPercent;

        indicator.style.left = percent + '%';
      });
    }

    window.onload = updateAll;
    window.onresize = updateAll;
    </script>[/html]

    0

    526

    • Автор: Phillip Morgan
    • выебоны 24/7
    • Phillip Morgan
    • Лип, 25
      владелец автомастерской
      Мы ничего не приносим в этот мир и ничего не можем из него унести
    • Сообщений: 1068
    • Уважение: +239
    • валюты: 200$
    • постов: 1
    • КАРАТЕЛЬНЫЙ ОРГАН
      не половой

    https://upforme.ru/uploads/0014/eb/ea/169/547673.png

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

    [html]<div class="battery-wrapper" data-level="6">
      <div class="battery">
        <div class="title">MY SOCIAL BATTERY</div>

        <div class="segments">
          <div class="seg">😢</div>
          <div class="seg">🙁</div>
          <div class="seg">😕</div>
          <div class="seg">😐</div>
          <div class="seg">🙂</div>
          <div class="seg">😊</div>
          <div class="seg">😄</div>

          <div class="track">
            <div class="indicator">⚡</div>
          </div>
        </div>
      </div>

      <div class="side"></div>
    </div>

    <style>
    @font-face {  font-family: 'Cinzel';  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
    }
    .battery-wrapper{
      position: relative;
      width: 300px;
      transform: scale(0.7);
      transform-origin: top left;
      margin: 0 auto;
    }

    .battery{
      background:#000;
      border-radius:16px;
      padding:12px;
      color:#fff;
      font-family:sans-serif;
    }

    .side{
      position:absolute;
      right:-14px;
      top:50%;
      transform:translateY(-50%);
      width:14px;
      height:50%;
      background:#000;
      border-radius:0 8px 8px 0;
    }

    .title{
      text-align:center;
      margin-bottom:10px;
      font-size:20px;
      font-family: 'Cinzel';
    }

    .segments{
      display:flex;
      overflow:hidden;
      border-radius:10px;
      margin-bottom:8px;
      position:relative;
    }

    .seg{
      flex:1;
      text-align:center;
      padding:8px 0 40px;
      font-size:14px;
    }

    .seg:nth-child(1){background:#ff3b3b;}
    .seg:nth-child(2){background:#ff6b3b;}
    .seg:nth-child(3){background:#ff9b3b;}
    .seg:nth-child(4){background:#ffd93b;}
    .seg:nth-child(5){background:#b7e23b;}
    .seg:nth-child(6){background:#6be23b;}
    .seg:nth-child(7){background:#2be23b;}

    .track{
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      height:10px;
      background:#222;
      border-radius:999px;
      z-index:2;
    }

    .indicator{
      position:absolute;
      top:50%;
      transform:translate(-50%, -50%);
      font-size:20px;
      transition:0.3s ease;
    }
    </style>

    <script>
    function updateAll() {
      document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
        const level = parseInt(wrapper.dataset.level) || 1;

        const indicator = wrapper.querySelector('.indicator');
        const segments = wrapper.querySelectorAll('.seg');
        const count = segments.length;

        // центр сегмента + маленький сдвиг вправо
        const offsetPercent = 2; // смещение вправо в процентах
        const percent = ((level - 0.5) / count * 100) + offsetPercent;

        indicator.style.left = percent + '%';
      });
    }

    window.onload = updateAll;
    window.onresize = updateAll;
    </script>[/html]

    0

    527

    • Автор: Phillip Morgan
    • выебоны 24/7
    • Phillip Morgan
    • Лип, 25
      владелец автомастерской
      Мы ничего не приносим в этот мир и ничего не можем из него унести
    • Сообщений: 1068
    • Уважение: +239
    • валюты: 200$
    • постов: 1
    • КАРАТЕЛЬНЫЙ ОРГАН
      не половой

    https://upforme.ru/uploads/0014/cd/dd/2/678124.png

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

    [html]<div class="battery-wrapper" data-level="6">
      <div class="battery">
        <div class="title">MY SOCIAL BATTERY</div>

        <div class="segments">
          <div class="seg">😢</div>
          <div class="seg">🙁</div>
          <div class="seg">😕</div>
          <div class="seg">😐</div>
          <div class="seg">🙂</div>
          <div class="seg">😊</div>
          <div class="seg">😄</div>

          <div class="track">
            <div class="indicator">⚡</div>
          </div>
        </div>
      </div>

      <div class="side"></div>
    </div>

    <style>
    @font-face {  font-family: 'Cinzel';  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
    }
    .battery-wrapper{
      position: relative;
      width: 300px;
      transform: scale(0.7);
      transform-origin: top left;
      margin: 0 auto;
    }

    .battery{
      background:#000;
      border-radius:16px;
      padding:12px;
      color:#fff;
      font-family:sans-serif;
    }

    .side{
      position:absolute;
      right:-14px;
      top:50%;
      transform:translateY(-50%);
      width:14px;
      height:50%;
      background:#000;
      border-radius:0 8px 8px 0;
    }

    .title{
      text-align:center;
      margin-bottom:10px;
      font-size:20px;
      font-family: 'Cinzel';
    }

    .segments{
      display:flex;
      overflow:hidden;
      border-radius:10px;
      margin-bottom:8px;
      position:relative;
    }

    .seg{
      flex:1;
      text-align:center;
      padding:8px 0 40px;
      font-size:14px;
    }

    .seg:nth-child(1){background:#ff3b3b;}
    .seg:nth-child(2){background:#ff6b3b;}
    .seg:nth-child(3){background:#ff9b3b;}
    .seg:nth-child(4){background:#ffd93b;}
    .seg:nth-child(5){background:#b7e23b;}
    .seg:nth-child(6){background:#6be23b;}
    .seg:nth-child(7){background:#2be23b;}

    .track{
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      height:10px;
      background:#222;
      border-radius:999px;
      z-index:2;
    }

    .indicator{
      position:absolute;
      top:50%;
      transform:translate(-50%, -50%);
      font-size:20px;
      transition:0.3s ease;
    }
    </style>

    <script>
    function updateAll() {
      document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
        const level = parseInt(wrapper.dataset.level) || 1;

        const indicator = wrapper.querySelector('.indicator');
        const segments = wrapper.querySelectorAll('.seg');
        const count = segments.length;

        // центр сегмента + маленький сдвиг вправо
        const offsetPercent = 2; // смещение вправо в процентах
        const percent = ((level - 0.5) / count * 100) + offsetPercent;

        indicator.style.left = percent + '%';
      });
    }

    window.onload = updateAll;
    window.onresize = updateAll;
    </script>[/html]

    0

    528

    • Автор: Phillip Morgan
    • выебоны 24/7
    • Phillip Morgan
    • Лип, 25
      владелец автомастерской
      Мы ничего не приносим в этот мир и ничего не можем из него унести
    • Сообщений: 1068
    • Уважение: +239
    • валюты: 200$
    • постов: 1
    • КАРАТЕЛЬНЫЙ ОРГАН
      не половой

    https://upforme.ru/uploads/001c/35/8d/12/63097.png

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

    [html]<div class="battery-wrapper" data-level="6">
      <div class="battery">
        <div class="title">MY SOCIAL BATTERY</div>

        <div class="segments">
          <div class="seg">😢</div>
          <div class="seg">🙁</div>
          <div class="seg">😕</div>
          <div class="seg">😐</div>
          <div class="seg">🙂</div>
          <div class="seg">😊</div>
          <div class="seg">😄</div>

          <div class="track">
            <div class="indicator">⚡</div>
          </div>
        </div>
      </div>

      <div class="side"></div>
    </div>

    <style>
    @font-face {  font-family: 'Cinzel';  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
    }
    .battery-wrapper{
      position: relative;
      width: 300px;
      transform: scale(0.7);
      transform-origin: top left;
      margin: 0 auto;
    }

    .battery{
      background:#000;
      border-radius:16px;
      padding:12px;
      color:#fff;
      font-family:sans-serif;
    }

    .side{
      position:absolute;
      right:-14px;
      top:50%;
      transform:translateY(-50%);
      width:14px;
      height:50%;
      background:#000;
      border-radius:0 8px 8px 0;
    }

    .title{
      text-align:center;
      margin-bottom:10px;
      font-size:20px;
      font-family: 'Cinzel';
    }

    .segments{
      display:flex;
      overflow:hidden;
      border-radius:10px;
      margin-bottom:8px;
      position:relative;
    }

    .seg{
      flex:1;
      text-align:center;
      padding:8px 0 40px;
      font-size:14px;
    }

    .seg:nth-child(1){background:#ff3b3b;}
    .seg:nth-child(2){background:#ff6b3b;}
    .seg:nth-child(3){background:#ff9b3b;}
    .seg:nth-child(4){background:#ffd93b;}
    .seg:nth-child(5){background:#b7e23b;}
    .seg:nth-child(6){background:#6be23b;}
    .seg:nth-child(7){background:#2be23b;}

    .track{
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      height:10px;
      background:#222;
      border-radius:999px;
      z-index:2;
    }

    .indicator{
      position:absolute;
      top:50%;
      transform:translate(-50%, -50%);
      font-size:20px;
      transition:0.3s ease;
    }
    </style>

    <script>
    function updateAll() {
      document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
        const level = parseInt(wrapper.dataset.level) || 1;

        const indicator = wrapper.querySelector('.indicator');
        const segments = wrapper.querySelectorAll('.seg');
        const count = segments.length;

        // центр сегмента + маленький сдвиг вправо
        const offsetPercent = 2; // смещение вправо в процентах
        const percent = ((level - 0.5) / count * 100) + offsetPercent;

        indicator.style.left = percent + '%';
      });
    }

    window.onload = updateAll;
    window.onresize = updateAll;
    </script>[/html]

    0

    529

    • Автор: PR
    • Участник
    • PR
    • Сообщений: 775
    • Уважение: +1

    https://upforme.ru/uploads/001b/7f/e5/2/901732.jpg
    фэнтези | nc-21 | рисованные внешности

    Взаимная реклама

    0

    530

    • Автор: PR
    • Участник
    • PR
    • Сообщений: 775
    • Уважение: +1

    https://upforme.ru/uploads/0018/2a/bd/2/293829.png

    Взаимная реклама

    0

    531

    • Автор: PR
    • Участник
    • PR
    • Сообщений: 775
    • Уважение: +1

    https://upforme.ru/uploads/0013/d0/86/2/t137610.png

    Взаимная реклама

    0

    532

    • Автор: PR
    • Участник
    • PR
    • Сообщений: 775
    • Уважение: +1

    https://upforme.ru/uploads/001c/38/af/6/71088.jpg

    взаимная реклама

    0

    533

    • Автор: PR
    • Участник
    • PR
    • Сообщений: 775
    • Уважение: +1

    https://upforme.ru/uploads/0019/41/ed/4/38676.png
    Ваша реклама

    0

    534

    • Автор: PR
    • Участник
    • PR
    • Сообщений: 775
    • Уважение: +1

    https://domzabveniya.ru/viewtopic.php?i … 40#p809270

    https://upforme.ru/uploads/000a/d4/f4/779/t739795.jpg

    0

    535

    • Автор: PR
    • Участник
    • PR
    • Сообщений: 775
    • Уважение: +1

    https://upforme.ru/uploads/001c/35/8d/12/t736599.jpg

    Взаимная реклама

    0

    536

    • Автор: PR
    • Участник
    • PR
    • Сообщений: 775
    • Уважение: +1

    https://upforme.ru/uploads/001c/92/86/7/712260.png
    Ваша реклама

    0

    537

    • Автор: Phillip Morgan
    • выебоны 24/7
    • Phillip Morgan
    • Лип, 25
      владелец автомастерской
      Мы ничего не приносим в этот мир и ничего не можем из него унести
    • Сообщений: 1068
    • Уважение: +239
    • валюты: 200$
    • постов: 1
    • КАРАТЕЛЬНЫЙ ОРГАН
      не половой

    https://upforme.ru/uploads/001b/e6/2d/126/950274.png

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

    [html]<div class="battery-wrapper" data-level="6">
      <div class="battery">
        <div class="title">MY SOCIAL BATTERY</div>

        <div class="segments">
          <div class="seg">😢</div>
          <div class="seg">🙁</div>
          <div class="seg">😕</div>
          <div class="seg">😐</div>
          <div class="seg">🙂</div>
          <div class="seg">😊</div>
          <div class="seg">😄</div>

          <div class="track">
            <div class="indicator">⚡</div>
          </div>
        </div>
      </div>

      <div class="side"></div>
    </div>

    <style>
    @font-face {  font-family: 'Cinzel';  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
    }
    .battery-wrapper{
      position: relative;
      width: 300px;
      transform: scale(0.7);
      transform-origin: top left;
      margin: 0 auto;
    }

    .battery{
      background:#000;
      border-radius:16px;
      padding:12px;
      color:#fff;
      font-family:sans-serif;
    }

    .side{
      position:absolute;
      right:-14px;
      top:50%;
      transform:translateY(-50%);
      width:14px;
      height:50%;
      background:#000;
      border-radius:0 8px 8px 0;
    }

    .title{
      text-align:center;
      margin-bottom:10px;
      font-size:20px;
      font-family: 'Cinzel';
    }

    .segments{
      display:flex;
      overflow:hidden;
      border-radius:10px;
      margin-bottom:8px;
      position:relative;
    }

    .seg{
      flex:1;
      text-align:center;
      padding:8px 0 40px;
      font-size:14px;
    }

    .seg:nth-child(1){background:#ff3b3b;}
    .seg:nth-child(2){background:#ff6b3b;}
    .seg:nth-child(3){background:#ff9b3b;}
    .seg:nth-child(4){background:#ffd93b;}
    .seg:nth-child(5){background:#b7e23b;}
    .seg:nth-child(6){background:#6be23b;}
    .seg:nth-child(7){background:#2be23b;}

    .track{
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      height:10px;
      background:#222;
      border-radius:999px;
      z-index:2;
    }

    .indicator{
      position:absolute;
      top:50%;
      transform:translate(-50%, -50%);
      font-size:20px;
      transition:0.3s ease;
    }
    </style>

    <script>
    function updateAll() {
      document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
        const level = parseInt(wrapper.dataset.level) || 1;

        const indicator = wrapper.querySelector('.indicator');
        const segments = wrapper.querySelectorAll('.seg');
        const count = segments.length;

        // центр сегмента + маленький сдвиг вправо
        const offsetPercent = 2; // смещение вправо в процентах
        const percent = ((level - 0.5) / count * 100) + offsetPercent;

        indicator.style.left = percent + '%';
      });
    }

    window.onload = updateAll;
    window.onresize = updateAll;
    </script>[/html]

    0

    538

    • Автор: Phillip Morgan
    • выебоны 24/7
    • Phillip Morgan
    • Лип, 25
      владелец автомастерской
      Мы ничего не приносим в этот мир и ничего не можем из него унести
    • Сообщений: 1068
    • Уважение: +239
    • валюты: 200$
    • постов: 1
    • КАРАТЕЛЬНЫЙ ОРГАН
      не половой

    https://upforme.ru/uploads/0019/41/ed/4/38676.png

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

    [html]<div class="battery-wrapper" data-level="6">
      <div class="battery">
        <div class="title">MY SOCIAL BATTERY</div>

        <div class="segments">
          <div class="seg">😢</div>
          <div class="seg">🙁</div>
          <div class="seg">😕</div>
          <div class="seg">😐</div>
          <div class="seg">🙂</div>
          <div class="seg">😊</div>
          <div class="seg">😄</div>

          <div class="track">
            <div class="indicator">⚡</div>
          </div>
        </div>
      </div>

      <div class="side"></div>
    </div>

    <style>
    @font-face {  font-family: 'Cinzel';  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
    }
    .battery-wrapper{
      position: relative;
      width: 300px;
      transform: scale(0.7);
      transform-origin: top left;
      margin: 0 auto;
    }

    .battery{
      background:#000;
      border-radius:16px;
      padding:12px;
      color:#fff;
      font-family:sans-serif;
    }

    .side{
      position:absolute;
      right:-14px;
      top:50%;
      transform:translateY(-50%);
      width:14px;
      height:50%;
      background:#000;
      border-radius:0 8px 8px 0;
    }

    .title{
      text-align:center;
      margin-bottom:10px;
      font-size:20px;
      font-family: 'Cinzel';
    }

    .segments{
      display:flex;
      overflow:hidden;
      border-radius:10px;
      margin-bottom:8px;
      position:relative;
    }

    .seg{
      flex:1;
      text-align:center;
      padding:8px 0 40px;
      font-size:14px;
    }

    .seg:nth-child(1){background:#ff3b3b;}
    .seg:nth-child(2){background:#ff6b3b;}
    .seg:nth-child(3){background:#ff9b3b;}
    .seg:nth-child(4){background:#ffd93b;}
    .seg:nth-child(5){background:#b7e23b;}
    .seg:nth-child(6){background:#6be23b;}
    .seg:nth-child(7){background:#2be23b;}

    .track{
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      height:10px;
      background:#222;
      border-radius:999px;
      z-index:2;
    }

    .indicator{
      position:absolute;
      top:50%;
      transform:translate(-50%, -50%);
      font-size:20px;
      transition:0.3s ease;
    }
    </style>

    <script>
    function updateAll() {
      document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
        const level = parseInt(wrapper.dataset.level) || 1;

        const indicator = wrapper.querySelector('.indicator');
        const segments = wrapper.querySelectorAll('.seg');
        const count = segments.length;

        // центр сегмента + маленький сдвиг вправо
        const offsetPercent = 2; // смещение вправо в процентах
        const percent = ((level - 0.5) / count * 100) + offsetPercent;

        indicator.style.left = percent + '%';
      });
    }

    window.onload = updateAll;
    window.onresize = updateAll;
    </script>[/html]

    0

    539

    • Автор: Phillip Morgan
    • выебоны 24/7
    • Phillip Morgan
    • Лип, 25
      владелец автомастерской
      Мы ничего не приносим в этот мир и ничего не можем из него унести
    • Сообщений: 1068
    • Уважение: +239
    • валюты: 200$
    • постов: 1
    • КАРАТЕЛЬНЫЙ ОРГАН
      не половой

    https://upforme.ru/uploads/0019/9e/ef/4237/680842.png

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

    [html]<div class="battery-wrapper" data-level="6">
      <div class="battery">
        <div class="title">MY SOCIAL BATTERY</div>

        <div class="segments">
          <div class="seg">😢</div>
          <div class="seg">🙁</div>
          <div class="seg">😕</div>
          <div class="seg">😐</div>
          <div class="seg">🙂</div>
          <div class="seg">😊</div>
          <div class="seg">😄</div>

          <div class="track">
            <div class="indicator">⚡</div>
          </div>
        </div>
      </div>

      <div class="side"></div>
    </div>

    <style>
    @font-face {  font-family: 'Cinzel';  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
    }
    .battery-wrapper{
      position: relative;
      width: 300px;
      transform: scale(0.7);
      transform-origin: top left;
      margin: 0 auto;
    }

    .battery{
      background:#000;
      border-radius:16px;
      padding:12px;
      color:#fff;
      font-family:sans-serif;
    }

    .side{
      position:absolute;
      right:-14px;
      top:50%;
      transform:translateY(-50%);
      width:14px;
      height:50%;
      background:#000;
      border-radius:0 8px 8px 0;
    }

    .title{
      text-align:center;
      margin-bottom:10px;
      font-size:20px;
      font-family: 'Cinzel';
    }

    .segments{
      display:flex;
      overflow:hidden;
      border-radius:10px;
      margin-bottom:8px;
      position:relative;
    }

    .seg{
      flex:1;
      text-align:center;
      padding:8px 0 40px;
      font-size:14px;
    }

    .seg:nth-child(1){background:#ff3b3b;}
    .seg:nth-child(2){background:#ff6b3b;}
    .seg:nth-child(3){background:#ff9b3b;}
    .seg:nth-child(4){background:#ffd93b;}
    .seg:nth-child(5){background:#b7e23b;}
    .seg:nth-child(6){background:#6be23b;}
    .seg:nth-child(7){background:#2be23b;}

    .track{
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      height:10px;
      background:#222;
      border-radius:999px;
      z-index:2;
    }

    .indicator{
      position:absolute;
      top:50%;
      transform:translate(-50%, -50%);
      font-size:20px;
      transition:0.3s ease;
    }
    </style>

    <script>
    function updateAll() {
      document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
        const level = parseInt(wrapper.dataset.level) || 1;

        const indicator = wrapper.querySelector('.indicator');
        const segments = wrapper.querySelectorAll('.seg');
        const count = segments.length;

        // центр сегмента + маленький сдвиг вправо
        const offsetPercent = 2; // смещение вправо в процентах
        const percent = ((level - 0.5) / count * 100) + offsetPercent;

        indicator.style.left = percent + '%';
      });
    }

    window.onload = updateAll;
    window.onresize = updateAll;
    </script>[/html]

    0

    540

    • Автор: Phillip Morgan
    • выебоны 24/7
    • Phillip Morgan
    • Лип, 25
      владелец автомастерской
      Мы ничего не приносим в этот мир и ничего не можем из него унести
    • Сообщений: 1068
    • Уважение: +239
    • валюты: 200$
    • постов: 1
    • КАРАТЕЛЬНЫЙ ОРГАН
      не половой

    https://upforme.ru/uploads/000a/d4/f4/779/t913449.jpg

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

    [html]<div class="battery-wrapper" data-level="6">
      <div class="battery">
        <div class="title">MY SOCIAL BATTERY</div>

        <div class="segments">
          <div class="seg">😢</div>
          <div class="seg">🙁</div>
          <div class="seg">😕</div>
          <div class="seg">😐</div>
          <div class="seg">🙂</div>
          <div class="seg">😊</div>
          <div class="seg">😄</div>

          <div class="track">
            <div class="indicator">⚡</div>
          </div>
        </div>
      </div>

      <div class="side"></div>
    </div>

    <style>
    @font-face {  font-family: 'Cinzel';  src: url('https://raw.githubusercontent.com/tukiteruamano-a11y/anketa/main/cinzel_regular.ttf') format('truetype');
    }
    .battery-wrapper{
      position: relative;
      width: 300px;
      transform: scale(0.7);
      transform-origin: top left;
      margin: 0 auto;
    }

    .battery{
      background:#000;
      border-radius:16px;
      padding:12px;
      color:#fff;
      font-family:sans-serif;
    }

    .side{
      position:absolute;
      right:-14px;
      top:50%;
      transform:translateY(-50%);
      width:14px;
      height:50%;
      background:#000;
      border-radius:0 8px 8px 0;
    }

    .title{
      text-align:center;
      margin-bottom:10px;
      font-size:20px;
      font-family: 'Cinzel';
    }

    .segments{
      display:flex;
      overflow:hidden;
      border-radius:10px;
      margin-bottom:8px;
      position:relative;
    }

    .seg{
      flex:1;
      text-align:center;
      padding:8px 0 40px;
      font-size:14px;
    }

    .seg:nth-child(1){background:#ff3b3b;}
    .seg:nth-child(2){background:#ff6b3b;}
    .seg:nth-child(3){background:#ff9b3b;}
    .seg:nth-child(4){background:#ffd93b;}
    .seg:nth-child(5){background:#b7e23b;}
    .seg:nth-child(6){background:#6be23b;}
    .seg:nth-child(7){background:#2be23b;}

    .track{
      position:absolute;
      left:8px;
      right:8px;
      bottom:8px;
      height:10px;
      background:#222;
      border-radius:999px;
      z-index:2;
    }

    .indicator{
      position:absolute;
      top:50%;
      transform:translate(-50%, -50%);
      font-size:20px;
      transition:0.3s ease;
    }
    </style>

    <script>
    function updateAll() {
      document.querySelectorAll('.battery-wrapper').forEach(wrapper => {
        const level = parseInt(wrapper.dataset.level) || 1;

        const indicator = wrapper.querySelector('.indicator');
        const segments = wrapper.querySelectorAll('.seg');
        const count = segments.length;

        // центр сегмента + маленький сдвиг вправо
        const offsetPercent = 2; // смещение вправо в процентах
        const percent = ((level - 0.5) / count * 100) + offsetPercent;

        indicator.style.left = percent + '%';
      });
    }

    window.onload = updateAll;
    window.onresize = updateAll;
    </script>[/html]

    0

    Тема закрыта
    Страница:   1 … 16 17 18 19 20 … 34  

    Вы здесь » Вектор Пламени » Реклама » Взаимная #1

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