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

BRIGHTWYNN / 01.2026
flame vector
постап, хоррор, способности
Kayden and Michael [доктор сон]
Город за стеклом плыл мутными пятнами света...читать далее

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

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

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


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


    Взаимная #1

    Сообщений 271 страница 300 из 1001

    1

    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

    271

    https://forumstatic.ru/files/001c/23/e3/46458.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

    272

    https://upforme.ru/uploads/001c/96/9f/5/785791.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

    273

    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

    274

    https://upforme.ru/uploads/0013/d0/86/2/t137610.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

    275

    https://upforme.ru/uploads/000e/5d/50/2/555462.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

    276

    https://upforme.ru/uploads/001c/6a/04/10/176217.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

    277

    https://upforme.ru/uploads/001c/a6/14/2/283715.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

    278

    https://upforme.ru/uploads/001c/a6/68/4/163045.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

    279

    https://upforme.ru/uploads/0015/e5/b7/3206/359258.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

    280

    https://forumstatic.ru/files/001c/93/ac/50154.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

    281

    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

    282

    https://upforme.ru/uploads/0019/9e/ef/4237/611297.png
    Ваша реклама

    0

    283

    https://upforme.ru/uploads/001c/8b/41/3/310471.png
    Ваша реклама

    0

    284

    https://upforme.ru/uploads/001c/a2/2d/2/989512.jpg

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

    0

    285

    https://upforme.ru/uploads/0014/1f/bb/2/290875.png

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

    0

    286

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

    0

    287

    https://upforme.ru/uploads/001c/a6/14/2/283715.png

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

    0

    288

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

    0

    289

    https://upforme.ru/uploads/001b/70/af/7/269972.png

    Ваша реклама

    0

    290

    https://upforme.ru/uploads/001c/a6/14/2/283715.png

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

    0

    291

    https://upforme.ru/uploads/000f/b3/ce/17/285893.png

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

    0

    292

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

    0

    293

    https://upforme.ru/uploads/001a/17/1c/2/332786.png
    АКЦИИЗАЯВКИ ОТ ИГРОКОВСЮЖЕТ

    ваша реклама

    0

    294

    https://upforme.ru/uploads/001c/9f/9b/3/90982.png
    https://creamy.rusff.me/viewtopic.php?i … =22#p16261

    0

    295

    https://upforme.ru/uploads/001c/92/86/5/524403.png

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

    0

    296

    https://upforme.ru/uploads/001c/8b/a8/7/849645.png

    0

    297

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

    0

    298

    https://forumstatic.ru/files/001c/9e/22/63287.png

    0

    299

    https://upforme.ru/uploads/001c/2a/e5/5/324060.png

    0

    300

    https://upforme.ru/uploads/001c/59/3b/2/915300.png

    0


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


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