Хочу продублировать к себе, чтобы не потерялось
[html]<style>
.bw-multi-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 700px;
  margin: 15px auto;
  font-family: 'Courier New', Courier, monospace, sans-serif;
  box-sizing: border-box;
}

/* Карточка отдельного плейлиста */
.bw-playlist-card {
  flex: 1 1 300px;
  background: #0d0d0d;
  border: 1px solid #333333;
  border-radius: 4px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
}

/* --- ВЕРХНЯЯ ЧАСТЬ ПЛЕЕРА --- */
.bw-player-header {
  border-bottom: 1px dashed #333;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.bw-playlist-title {
  font-size: 10px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.bw-now-playing-title {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bw-now-playing-artist {
  font-size: 11px;
  color: #888;
  margin-top: 4px;
}

/* --- КРОССБАР ПРОГРЕССА --- */
.bw-timeline-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
}

.bw-progress-bar {
  flex-grow: 1;
  height: 4px;
  background: #222;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.bw-progress-fill {
  height: 100%;
  width: 0%;
  background: #ffffff;
  transition: width 0.1s linear;
}

.bw-time {
  font-size: 10px;
  color: #777;
  min-width: 75px;
  text-align: right;
}

/* --- КНОПКИ И ГРОМКОСТЬ --- */
.bw-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

.bw-main-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bw-btn-play {
  width: 38px;
  height: 38px;
  background: #ffffff;
  color: #000000;
  border: none;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.1s, background 0.2s;
}

.bw-btn-play:hover {
  background: #cccccc;
  transform: scale(1.05);
}

.bw-btn-skip {
  width: 28px;
  height: 28px;
  background: transparent;
  color: #ffffff;
  border: 1px solid #444;
  border-radius: 50%;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.2s;
}

.bw-btn-skip:hover {
  border-color: #ffffff;
  background: #222;
}

/* Кроссбар громкости */
.bw-volume-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bw-vol-icon {
  font-size: 11px;
  color: #888;
}

.bw-volume-bar {
  width: 55px;
  height: 4px;
  background: #222;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}

.bw-volume-fill {
  height: 100%;
  width: 100%; /* По умолчанию 100% громкости */
  background: #888;
  transition: background 0.2s;
}

.bw-volume-bar:hover .bw-volume-fill {
  background: #ffffff;
}

/* --- СПИСОК ТРЕКОВ --- */
.bw-tracks-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 160px;
  overflow-y: auto;
  padding-right: 5px;
}

/* Кастомный скроллбар */
.bw-tracks-container::-webkit-scrollbar { width: 4px; }
.bw-tracks-container::-webkit-scrollbar-track { background: #0d0d0d; }
.bw-tracks-container::-webkit-scrollbar-thumb { background: #444; }

.bw-track {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: #141414;
  border: 1px solid #1a1a1a;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.bw-track:hover { background: #222; border-color: #333; }
.bw-track.active { background: #ffffff; color: #000000; border-color: #ffffff; }
.bw-track.active .bw-track-artist { color: #444444; }

.bw-track-info { display: flex; flex-direction: column; overflow: hidden; }
.bw-track-name { font-size: 12px; font-weight: bold; }
.bw-track-artist { font-size: 10px; color: #777; margin-top: 2px; }
.bw-track-icon { font-size: 10px; }
</style>

<div class="bw-multi-wrapper">

  <!-- ================= ПЛЕЙЛИСТ 1 ================= -->
  <div class="bw-playlist-card">
    <audio preload="none"></audio>
   
    <div class="bw-player-header">
      <div class="bw-playlist-title">Playlist 01 / A > A</div>
      <div class="bw-now-playing-title">Выберите трек</div>
      <div class="bw-now-playing-artist">---</div>
     
      <!-- Кроссбар прогресса трека -->
      <div class="bw-timeline-row">
        <div class="bw-progress-bar"><div class="bw-progress-fill"></div></div>
        <div class="bw-time">00:00 / 00:00</div>
      </div>

      <!-- Кнопки управления и Кроссбар громкости -->
      <div class="bw-controls-row">
        <div class="bw-main-btns">
          <button class="bw-btn-skip bw-prev">◄◄</button>
          <button class="bw-btn-play">▶</button>
          <button class="bw-btn-skip bw-next">►►</button>
        </div>
        <div class="bw-volume-container">
          <span class="bw-vol-icon">VOL</span>
          <div class="bw-volume-bar"><div class="bw-volume-fill"></div></div>
        </div>
      </div>
    </div>

    <!-- СПИСОК ПЕСЕН 1 -->
    <div class="bw-tracks-container">
      <div class="bw-track" data-src="https://audio.jukehost.co.uk/019fa036-a7a8-7074-a99c-cff680d7cd4f" data-title="Długość dźwięku samotności" data-artist="Myslovitz">
        <div class="bw-track-info">
          <span class="bw-track-name">Długość dźwięku samotności</span>
          <span class="bw-track-artist">Myslovitz</span>
        </div>
        <span class="bw-track-icon">▶</span>
      </div>
      <div class="bw-track" data-src="https://audio.jukehost.co.uk/019fa036-a5df-72d5-a665-047e9eb10ad9" data-title="ПММЛ" data-artist="Земфира">
        <div class="bw-track-info">
          <span class="bw-track-name">ПММЛ</span>
          <span class="bw-track-artist">Земфира</span>
        </div>
        <span class="bw-track-icon">▶</span>
      </div>
<div class="bw-track" data-src="https://audio.jukehost.co.uk/019fa036-a761-706d-bc31-8cc4ede4b62f" data-title="High And Dry" data-artist="Radiohead">
        <div class="bw-track-info">
          <span class="bw-track-name">High And Dry</span>
          <span class="bw-track-artist">Radiohead</span>
        </div>
        <span class="bw-track-icon">▶</span>
      </div>
<div class="bw-track" data-src="https://audio.jukehost.co.uk/019fa04e-3776-7369-b2f7-9e8027239d48" data-title="All Apologies" data-artist="Nirvana">
        <div class="bw-track-info">
          <span class="bw-track-name">All Apologies</span>
          <span class="bw-track-artist">Nirvana</span>
        </div>
        <span class="bw-track-icon">▶</span>
      </div>
    </div>
  </div>

  <!-- ================= ПЛЕЙЛИСТ 2 ================= -->
  <div class="bw-playlist-card">
    <audio preload="none"></audio>
   
    <div class="bw-player-header">
      <div class="bw-playlist-title">Playlist 02 / Author > A</div>
      <div class="bw-now-playing-title">Выберите трек</div>
      <div class="bw-now-playing-artist">---</div>
     
      <!-- Кроссбар прогресса трека -->
      <div class="bw-timeline-row">
        <div class="bw-progress-bar"><div class="bw-progress-fill"></div></div>
        <div class="bw-time">00:00 / 00:00</div>
      </div>

      <!-- Кнопки управления и Кроссбар громкости -->
      <div class="bw-controls-row">
        <div class="bw-main-btns">
          <button class="bw-btn-skip bw-prev">◄◄</button>
          <button class="bw-btn-play">▶</button>
          <button class="bw-btn-skip bw-next">►►</button>
        </div>
        <div class="bw-volume-container">
          <span class="bw-vol-icon">VOL</span>
          <div class="bw-volume-bar"><div class="bw-volume-fill"></div></div>
        </div>
      </div>
    </div>

    <!-- СПИСОК ПЕСЕН 2 -->
    <div class="bw-tracks-container">
      <div class="bw-track" data-src="https://audio.jukehost.co.uk/019fa036-a657-73aa-acf9-569553932215" data-title="Tea Errors" data-artist="Jack Stauber">
        <div class="bw-track-info">
          <span class="bw-track-name">Tea Errors</span>
          <span class="bw-track-artist">Jack Stauber</span>
        </div>
        <span class="bw-track-icon">▶</span>
      </div>
      <div class="bw-track" data-src="https://audio.jukehost.co.uk/019fa036-a4d6-7304-b50c-cb93f46d763d" data-title="Alien Blues" data-artist="Vandabar">
        <div class="bw-track-info">
          <span class="bw-track-name">Alien Blues</span>
          <span class="bw-track-artist">Vandabar</span>
        </div>
        <span class="bw-track-icon">▶</span>
      </div>
    <div class="bw-track" data-src="https://audio.jukehost.co.uk/019fa036-aea8-7050-a749-e93f3898aade" data-title="Beach Life-in-Death" data-artist="Car Seat Headrest">
        <div class="bw-track-info">
          <span class="bw-track-name">Beach Life-in-Death</span>
          <span class="bw-track-artist">Car Seat Headrest</span>
        </div>
        <span class="bw-track-icon">▶</span>
      </div>
    </div>
  </div>

</div>

<script>
(function initMyBBPlaylists() {
  const cards = document.querySelectorAll('.bw-playlist-card');
  const globalAudios = [];

  // Форматирование времени
  function formatTime(seconds) {
    if (isNaN(seconds) || !isFinite(seconds)) return "00:00";
    const m = Math.floor(seconds / 60);
    const s = Math.floor(seconds % 60);
    return (m < 10 ? '0' : '') + m + ':' + (s < 10 ? '0' : '') + s;
  }

  cards.forEach(card => {
    const audio = card.querySelector('audio');
    globalAudios.push(audio);
   
    // Элементы интерфейса
    const playBtn = card.querySelector('.bw-btn-play');
    const prevBtn = card.querySelector('.bw-prev');
    const nextBtn = card.querySelector('.bw-next');
    const titleEl = card.querySelector('.bw-now-playing-title');
    const artistEl = card.querySelector('.bw-now-playing-artist');
   
    // Кроссбары
    const progressFill = card.querySelector('.bw-progress-fill');
    const progressBar = card.querySelector('.bw-progress-bar');
    const volBar = card.querySelector('.bw-volume-bar');
    const volFill = card.querySelector('.bw-volume-fill');
    const timeDisplay = card.querySelector('.bw-time');
   
    const tracks = card.querySelectorAll('.bw-track');
    let currentIndex = 0;

    // Загрузка трека
    function loadTrack(index, playAfterLoad = false) {
      if (tracks.length === 0) return;
      currentIndex = index;
      const t = tracks[index];
     
      tracks.forEach(tr => {
        tr.classList.remove('active');
        tr.querySelector('.bw-track-icon').textContent = '▶';
      });
      t.classList.add('active');
     
      const src = t.getAttribute('data-src');
      titleEl.textContent = t.getAttribute('data-title');
      artistEl.textContent = t.getAttribute('data-artist');

      if (audio.src !== src) {
        audio.src = src;
        audio.load();
      }

      if (playAfterLoad) playCurrent();
    }

    // Логика проигрывания с глушением остальных блоков
    function playCurrent() {
      globalAudios.forEach(a => { if (a !== audio && !a.paused) a.pause(); });
      let playPromise = audio.play();
      if (playPromise !== undefined) {
        playPromise.catch(() => console.log("Браузер ожидает взаимодействия с пользователем."));
      }
    }

    loadTrack(0, false);

    // Клик по списку
    tracks.forEach((track, index) => {
      track.addEventListener('click', () => {
        if (currentIndex === index) {
          audio.paused ? playCurrent() : audio.pause();
        } else {
          loadTrack(index, true);
        }
      });
    });

    // Центральные кнопки управления
    playBtn.addEventListener('click', () => {
      audio.paused ? playCurrent() : audio.pause();
    });

    prevBtn.addEventListener('click', () => {
      let newIndex = currentIndex - 1;
      if (newIndex < 0) newIndex = tracks.length - 1;
      loadTrack(newIndex, true);
    });

    nextBtn.addEventListener('click', () => {
      let newIndex = currentIndex + 1;
      if (newIndex >= tracks.length) newIndex = 0;
      loadTrack(newIndex, true);
    });

    // Смена иконок
    audio.addEventListener('play', () => {
      playBtn.textContent = '❚❚';
      if(tracks[currentIndex]) tracks[currentIndex].querySelector('.bw-track-icon').textContent = '❚❚';
    });

    audio.addEventListener('pause', () => {
      playBtn.textContent = '▶';
      if(tracks[currentIndex]) tracks[currentIndex].querySelector('.bw-track-icon').textContent = '▶';
    });

    // Кроссбар прогресса (Таймлайн)
    audio.addEventListener('timeupdate', () => {
      if (audio.duration) {
        const percent = (audio.currentTime / audio.duration) * 100;
        progressFill.style.width = percent + '%';
        timeDisplay.textContent = formatTime(audio.currentTime) + ' / ' + formatTime(audio.duration);
      }
    });

    progressBar.addEventListener('click', (e) => {
      if (audio.duration) {
        audio.currentTime = (e.offsetX / progressBar.clientWidth) * audio.duration;
      }
    });

    // Кроссбар громкости
    volBar.addEventListener('click', (e) => {
      const width = volBar.clientWidth;
      let clickX = e.offsetX;
      if (clickX < 0) clickX = 0;
      if (clickX > width) clickX = width;
     
      const volume = clickX / width;
      audio.volume = volume;
      volFill.style.width = (volume * 100) + '%';
    });

    // Авто-переключение на следующий трек
    audio.addEventListener('ended', () => {
      let newIndex = currentIndex + 1;
      if (newIndex >= tracks.length) newIndex = 0;
      loadTrack(newIndex, true);
    });
  });
})();
</script>[/html]

Отредактировано Adrian Elita-Lichtenberg (28-07-2026 15:39:38)

[html]<style>
.gs-inv{
  width:100%;
  max-width:640px;
  margin:0 auto;
  box-sizing:border-box;
  font-family:Arial,Helvetica,sans-serif;
  background:#141414;
  border:1px solid #333;
  border-radius:8px;
  padding:16px;
  color:#ddd;
}
.gs-inv *{box-sizing:border-box;}
.gs-inv-title{
  text-align:center;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:3px;
  color:#777;
  margin:0 0 12px;
}
.gs-inv-grid{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:6px;
}
.gs-inv-cell{
  position:relative;
  aspect-ratio:1/1;
  width:100%;
  background:#1c1c1c;
  border:1px solid #3a3a3a;
  border-radius:4px;
  box-shadow:inset 0 0 4px rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition:border-color .15s,background .15s;
}
.gs-inv-cell.has-item{cursor:pointer;}
.gs-inv-cell.has-item:hover,
.gs-inv-cell.is-active{
  border-color:#ccc;
  background:#262626;
}
.gs-inv-cell img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:5px;
  pointer-events:none;
}
.gs-inv-info{
  margin-top:12px;
  border:1px solid #333;
  border-radius:4px;
  background:#181818;
  padding:10px 12px;
}
.gs-inv-info-name{
  font-size:13px;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#eee;
  margin-bottom:6px;
}
.gs-inv-info-desc{
  font-size:13px;
  line-height:1.5;
  color:#aaa;
  max-height:110px;
  overflow-y:auto;
  padding-right:8px;
}
.gs-inv-info-desc::-webkit-scrollbar{width:6px;}
.gs-inv-info-desc::-webkit-scrollbar-track{background:#111;}
.gs-inv-info-desc::-webkit-scrollbar-thumb{background:#555;border-radius:3px;}
@media (max-width:480px){
  .gs-inv{padding:10px;}
  .gs-inv-grid{gap:4px;}
  .gs-inv-info-desc{max-height:90px;font-size:12px;}
}
</style>

<div class="gs-inv">
  <p class="gs-inv-title">Инвентарь</p>
  <div class="gs-inv-grid" id="gsInvGrid"></div>
  <div class="gs-inv-info">
    <div class="gs-inv-info-name" id="gsInvName">Наведите или нажмите на предмет</div>
    <div class="gs-inv-info-desc" id="gsInvDesc"></div>
  </div>
</div>

<script>
(function(){
  /* =====================================================================
     СПИСОК ПРЕДМЕТОВ
     Чтобы добавить новый предмет — скопируйте один блок { ... } целиком
     и вставьте его перед закрывающей ] массива (не забудьте запятую
     после предыдущего блока). Ничего больше в коде трогать не нужно.

     img  — прямая ссылка на изображение предмета
     name — название предмета (покажется жирным сверху)
     desc — описание, любой длины (при переполнении появится скроллбар)

     Порядок предметов = порядок ячеек слева направо, сверху вниз.
     Ячеек всего 40 (8 столбцов × 5 строк). Лишние предметы свыше
     40-го просто не поместятся — при необходимости удалите старые.
     ===================================================================== */
  var items = [
{
      img:  "https://upforme.ru/uploads/001c/82/f2/79/406351.png",
      name: "Записная книжка",
      desc: "Потрёпанная записная книжка в бордовой кожаной обложке, запертая на небольшой замок. Её страницы заполнены заметками, наблюдениями и разрозненными мыслями. Из-за проблем с памятью Адриан привык доверять бумаге всё, что считает важным и боится забыть."
    }, 
{
      img:  "https://upforme.ru/uploads/001c/82/f2/79/136092.png",
      name: "Ручка и карандаш",
      desc: "Обычные ручка и карандаш, постоянно используемые для заметок, пометок и быстрых набросков."
    },
   {
      img:  "https://upforme.ru/uploads/001c/82/f2/79/758940.png",
      name: "Фотография",
      desc: "На первый взгляд — испорченная фотография с серым изображением. Под действием определённых чар скрытый снимок проявляется, раскрывая запечатлённый на нём момент."
    },   
{
      img:  "https://upforme.ru/uploads/001c/82/f2/79/578702.png",
      name: "Скрытая камера",
      desc: "Миниатюрное устройство скрытого наблюдения, замаскированное под обычную пуговицу. Записывает видео и звук на карту памяти microSD, работает от встроенного аккумулятора. Благодаря небольшим размерам обычно незаметно закреплена на одежде, заменяя одну из пуговиц."
    },
    {
      img:  "https://upforme.ru/uploads/001c/82/f2/79/891645.png",
      name: "GSM-рекордер",
      desc: "Устройство скрытого аудиопрослушивания с функциями удалённого прослушивания и автономной записи звука. Автоматически сохраняет разговоры в память устройства, активируясь при обнаружении голоса. Позволяет получить доступ к записям позднее или контролировать происходящее в режиме реального времени через мобильную сеть."
    },
{
      img:  "https://upforme.ru/uploads/001c/82/f2/79/453264.png",
      name: "Зелье здоровья",
      desc: "Небольшая колба с восстанавливающим эликсиром. Частично восполняет запас здоровья и ускоряет регенерацию повреждений."
    }
    // добавляйте новые { ... } сюда
  ];

  var TOTAL = 40; // 8 x 5, менять не нужно
  var grid = document.getElementById("gsInvGrid");
  var nameEl = document.getElementById("gsInvName");
  var descEl = document.getElementById("gsInvDesc");
  var activeCell = null;

  function showInfo(item, cell){
    nameEl.textContent = item.name;
    descEl.textContent = item.desc;
    if (activeCell) activeCell.classList.remove("is-active");
    activeCell = cell;
    cell.classList.add("is-active");
  }

  for (var i = 0; i < TOTAL; i++){
    (function(i){
      var cell = document.createElement("div");
      cell.className = "gs-inv-cell";
      var item = items[i];
      if (item){
        cell.classList.add("has-item");
        cell.tabIndex = 0;
        var img = document.createElement("img");
        img.src = item.img;
        img.alt = item.name;
        cell.appendChild(img);
        var show = function(){ showInfo(item, cell); };
        cell.addEventListener("mouseenter", show); // наведение (ПК)
        cell.addEventListener("click", show);       // нажатие (телефон/ПК)
        cell.addEventListener("focus", show);        // навигация с клавиатуры
      }
      grid.appendChild(cell);
    })(i);
  }
})();
</script>
[/html]

Отредактировано Adrian Elita-Lichtenberg (26-08-2026 22:23:31)