Новости:

SMF - Just Installed!

Главное меню
Нужные
Активисты
Навигация
Добро пожаловать на форумную ролевую игру «Аркхейм»
Авторский мир в антураже многожанровой фантастики, эпизодическая система игры, смешанный мастеринг. Контент для пользователей от 18 лет. Игровой период с 5025 по 5029 годы.
В разделе «Акции» размещены заявки на желаемых персонажей. Они делятся на два типа: «Акция на персонажа» и «Хотим видеть». Персонажи с меткой «Акция на персонажа» особенно востребованы. Активность заказчиков можно посмотреть в
таблице игровой активности.

Лавэмориум — обитель забытых

Автор Волхайм, 19-06-2025, 13:38:52

« назад - далее »

0 Пользователи и 1 гость просматривают эту тему.

Печать
Вниз Страницы1
Действия пользователя

Волхайм

19-06-2025, 13:38:52
[ПРИМЕЧАНИЕ: Я не против, если вы будете пользоваться кодами из этого блога или в принципе моими кодами, но оставляйте на меня ссылку, как на автора / соавтора(когда код серьезно изменен)]

Волхайм

#1
09-07-2025, 20:30:15
[ПРИМЕЧАНИЕ: Я не против, если вы будете пользоваться кодами из этого блога или в принципе моими кодами, но оставляйте на меня ссылку, как на автора / соавтора(когда код серьезно изменен)]
   

Волхайм

#2
14-07-2025, 00:13:44
[ПРИМЕЧАНИЕ: Я не против, если вы будете пользоваться кодами из этого блога или в принципе моими кодами, но оставляйте на меня ссылку, как на автора / соавтора(когда код серьезно изменен)]

Волхайм

#3
22-07-2025, 21:25:21
[ПРИМЕЧАНИЕ: Я не против, если вы будете пользоваться кодами из этого блога или в принципе моими кодами, но оставляйте на меня ссылку, как на автора / соавтора(когда код серьезно изменен)]

Волхайм

#4
02-08-2025, 18:26:42

Ctrl+C, Ctrl+V
Код Копировать
[safehtml]<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Эпизод</title>
  <style>
    :root {
      /* Цвета */
      --date-place-text-bg: linear-gradient(180deg, #ffffff, #60b0eb);
      --ep-bg-grad: linear-gradient(to top, #272B30 2%, transparent 60%),
                  radial-gradient(ellipse at top left, #3a6e92 0%, rgba(0, 0, 0, 0) 50%), transparent;
      --ep-desc-bg: rgba(52, 45, 29, 0.28);
      --ep-desc-clr: #fff9f0;
      --ep-info-bg: rgba(30, 35, 40, 0.8);
      --ep-info-clr: #e0e0e0;
      --accent-color: #E3311D;
      --avatar-border: #AAACA1;
      --info-header-clr: #f0f0f0;
      --info-label-clr: #c0c0c0;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Cormorant Garamond', serif;
      color: var(--ep-desc-clr);
      line-height: 1.6;
    }

    .arc-episode-wrapper {
      position: relative;
      width: 100%;
      min-height: 550px;
      overflow: hidden;
      isolation: isolate;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .arc-episode-wrapper::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--ep-bg-grad);
      z-index: -1;
      border-radius: 8px;
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    .arc-episode-wrapper:hover::before {
      opacity: 1;
    }

    .arc-episode-wrapper img.background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -2;
      filter: brightness(0.7);
      transition: transform 0.5s ease, filter 0.5s ease;
      border-radius: 8px;
    }

    .arc-episode-wrapper:hover img.background {
      transform: scale(1.05);
      filter: brightness(0.5);
    }

    .arc-episode-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 1.5rem;
      position: relative;
      animation: fadeInDown 0.8s ease-out;
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    .arc-episode-wrapper:hover .arc-episode-header {
      opacity: 1;
    }

    .arc-date-place {
      display: flex;
      gap: 1.5rem;
      list-style: none;
    }

    .arc-date-place li {
      position: relative;
      padding: 0.5rem 1rem;
      font-family: 'Cinzel', serif;
      font-size: 1rem;
      color: var(--ep-desc-clr);
      background-clip: text;
      -webkit-background-clip: text;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
    }

    .arc-date-place li:hover {
      transform: translateY(3px);
    }

    .arc-date-place li::before {
      content: attr(data-title);
      position: absolute;
      top: -1.2rem;
      left: 0;
      font-size: 1.3rem;
      color: transparent;
      background-clip: text;
      -webkit-background-clip: text;
      background-image: var(--date-place-text-bg);
      opacity: 0.9;
      transition: all 0.3s ease;
    }

    .arc-date-place li:hover::before {
      opacity: 1;
      transform: translateY(-3px);
    }

    .arc-episode-content {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      padding: 1rem;
      animation: fadeInUp 0.8s ease-out;
      justify-content: center;
      padding-bottom: 10px; /* Уменьшено для создания места под плеер */
      margin-top: 3rem;
      position: absolute;
      bottom: 110px; /* Добавлено место для плеера */
      left: 0;
      right: 0;
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    .arc-episode-wrapper:hover .arc-episode-content {
      opacity: 1;
    }

    .arc-episode-desc {
      flex: 1;
      min-width: 300px;
      padding: 1.5rem;
      background-color: var(--ep-desc-bg);
      backdrop-filter: blur(5px);
      border-radius: 5px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      transition: all 0.4s ease;
      max-width: 700px;
      max-height: 200px;
      overflow-y: auto;
    }

    .arc-episode-desc:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    }

    .arc-episode-info {
      flex: 0 0 300px;
      padding: 1.5rem;
      background-color: var(--ep-info-bg);
      backdrop-filter: blur(5px);
      border-radius: 5px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      transition: all 0.4s ease;
      max-height: 200px;
      overflow-y: auto;
    }

    .arc-episode-info h3 {
      color: var(--info-header-clr);
      margin-bottom: 1rem;
      text-align: center;
    }

    .arc-episode-info p strong {
      color: var(--info-label-clr);
      font-weight: normal;
    }

    .arc-episode-info p {
      margin-bottom: 0.8rem;
    }

    .arc-episode-info:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    }

    .arc-episode-chars {
      display: flex;
      gap: 1.5rem;
      flex-wrap: wrap;
    }

    .arc-episode-chars .char-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
    }

    .arc-episode-chars a {
      position: relative;
      display: block;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      border: 2px solid var(--avatar-border);
      overflow: hidden;
      transition: all 0.3s ease;
      animation: floatAvatar 6s ease-in-out infinite;
      opacity: 0;
    }

    .arc-episode-wrapper:hover .arc-episode-chars a {
      opacity: 1;
    }

    .arc-episode-chars a:hover {
      transform: scale(1.1);
      box-shadow: 0 0 15px var(--accent-color);
      animation: none;
    }

    .arc-episode-chars .char-name {
      font-size: 0.8rem;
      color: var(--ep-desc-clr);
      text-align: center;
      background-color: rgba(5, 5, 7, 0.7);
      padding: 0.3rem 0.6rem;
      border-radius: 3px;
      width: max-content;
      max-width: 120px;
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    .arc-episode-wrapper:hover .arc-episode-chars .char-name {
      opacity: 1;
    }

    .arc-episode-chars img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .arc-episode-chars a:hover img {
      transform: scale(1.1);
    }

    /* Анимации */
    @keyframes fadeInDown {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes floatAvatar {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-10px);
      }
    }

.arc-episode-player {
    width: calc(100% - 3rem);
    max-height: 100px;
    margin: 0 auto;
    padding: 1.5rem;
    background: var(--ep-info-bg);
    backdrop-filter: blur(5px);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    font-family: 'Cormorant Garamond', serif;
    color: var(--ep-desc-clr);
    text-align: center;
    box-sizing: border-box;
    position: absolute;
    bottom: 10px;
    left: 1.5rem;
    right: 1.5rem;
    z-index: 1;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
    animation: fadeInUp 0.8s ease-out;
}

.arc-episode-wrapper:hover .arc-episode-player {
    opacity: 1;
    transform: translateY(0);
}

.arc-episode-player-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    margin-top: -1rem;
    color: var(--info-header-clr);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.arc-episode-player audio {
    width: 100%;
    border-radius: 5px;
    background: rgba(30, 35, 40, 0.6);
    padding: 5px;
}

.arc-episode-player audio::-webkit-media-controls-panel {
    background: rgba(30, 35, 40, 0.8);
}

    /* Мобильная адаптация */
@media (max-width: 768px) {
  .arc-episode-wrapper {
    display: flex;
    flex-direction: column;
    min-height: auto;
    gap: 1rem;
  }
 
  .arc-episode-header {
    flex-direction: column-reverse;
    gap: 1.5rem;
    align-items: center;
    opacity: 1;
    padding: 1rem;
    order: 1;
    width: 100%;
  }
 
  .arc-episode-chars {
    width: 100%;
    justify-content: center;
    order: -1;
    margin-bottom: 0;
    padding: 0 1rem;
  }
 
  .arc-date-place {
    width: 100%;
    justify-content: center;
    gap: 1rem;
  }
 
  .arc-episode-content {
    position: relative;
    flex-direction: column;
    margin-top: 0;
    padding: 0 1rem 1rem;
    opacity: 1;
    order: 2;
    flex-grow: 1;
    width: 100%;
    box-sizing: border-box;
    bottom: auto;
    margin-bottom: 120px; /* Добавлено место для плеера */
  }
 
  .arc-episode-desc,
  .arc-episode-info {
    min-width: 100%;
    max-height: none;
    margin-bottom: 1rem;
  }
 
  .arc-episode-chars a {
    width: 60px;
    height: 60px;
    opacity: 1;
    animation: none;
  }
 
  .arc-episode-chars .char-name {
    font-size: 0.7rem;
    opacity: 1;
  }
 
  .arc-episode-wrapper::before {
    opacity: 1;
  }
 
  .arc-episode-wrapper:hover img.background {
    transform: none;
    filter: brightness(0.7);
  }

  .arc-episode-player {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    width: calc(100% - 2rem);
    margin: 10px auto;
    opacity: 1;
    transform: none;
    order: 3;
  }
}

    @media (max-width: 480px) {
      .arc-episode-header {
        padding: 0.8rem;
        gap: 1rem;
      }
     
      .arc-date-place {
        flex-wrap: wrap;
      }
     
      .arc-date-place li {
        font-size: 0.9rem;
        padding: 0.3rem 0.8rem;
      }
     
      .arc-date-place li::before {
        top: -1rem;
        font-size: 0.6rem;
      }
     
      .arc-episode-desc,
      .arc-episode-info {
        padding: 1rem;
      }
     
      .arc-episode-chars {
        gap: 0.8rem;
      }
     
      .arc-episode-chars a {
        width: 50px;
        height: 50px;
      }
     
      .arc-episode-chars .char-name {
        font-size: 0.6rem;
      }

      .arc-episode-player {
        width: calc(100% - 1.6rem);
        padding: 1rem;
      }

      .arc-episode-content {
        margin-bottom: 110px; /* Уменьшено для мобильных */
      }
    }
  </style>
</head>
<body>
  <div class="arc-episode-wrapper">
    <img class="background" src='https://i.imgur.com/ENybzzr.png' alt="Фон эпизода">
   
    <div class='arc-episode-header'>
      <ul class="arc-date-place">
        <li data-title='время'>время</li>
        <li data-title='место'>место</li>
      </ul>
     
      <div class='arc-episode-chars'>
        <div class="char-item">
          <a href='https://arkhaim.su/index.php?action=profile;u=851'><img src='https://i.imgur.com/eBN5Ik8.png' alt='Генри Волхай'></a>
          <span class="char-name">Генри Волхайм</span>
        </div>
        <div class="char-item">
          <a href='#'><img src='https://i.imgur.com/OnBGANj.png' alt='Персонаж 2'></a>
          <span class="char-name">Персонаж 2</span>
        </div>
      </div>
    </div>
   
    <div class='arc-episode-content'>
      <div class='arc-episode-desc'>
        <p>ОПИСАНИЕ</p>
      </div>
     
      <div class='arc-episode-info'>
        <h3>Детали эпизода</h3>
        <p><strong>Статус:</strong> ОТКРЫТ / ЗАКРЫТ</p>
        <p><strong>Тип:</strong> НАСТОЯЩЕЕ / ПРОШЛОЕ / АЛЬТЕРНАТИВА</p>
        <p><strong>БС:</strong> СТАНДАРТНАЯ / БЕЗ БС</p>
      </div>
    </div>

    <div class="arc-episode-player">
        <div class="arc-episode-player-title">
            ♪
        </div>
        <audio controls>
            <source src="https://www.dropbox.com/scl/fi/dcaz4mzoc5ga11gerdlsz/Demon-Slayer-Douma-Theme-EPIC-FAN-VERSION-OST.mp3?rlkey=c2m40f9ismnb4sy38mnvgug3p&st=ba19vgla&dl=1" type="audio/mpeg">
            Ваш браузер не поддерживает воспроизведение аудио.
        </audio>
    </div>
  </div>
</body>
</html>[/safehtml]
[ПРИМЕЧАНИЕ: Я не против, если вы будете пользоваться кодами из этого блога или в принципе моими кодами, но оставляйте на меня ссылку, как на автора / соавтора(когда код серьезно изменен)]
 

Волхайм

#5
17-08-2025, 13:08:59
[ПРИМЕЧАНИЕ: Я не против, если вы будете пользоваться кодами из этого блога или в принципе моими кодами, но оставляйте на меня ссылку, как на автора / соавтора(когда код серьезно изменен)]
Печать
Вверх Страницы1
Действия пользователя
Лучший пост от Владимира
Владимира
Стоило полновесному серебру покинуть кошель Тигровой Лилии, как Виазо, до этого уделившая гостям лишь немного приветственного внимания, мгновенно оживилась. Гномья жадность давно стала притчей во языцех, не подвела она и сегодня. Очень скоро перед наемниками и мракоходцами...
Рейтинг Ролевых Ресурсов - RPG TOPРейтинг форумов Forum-top.ruЭдельвейсphotoshop: RenaissanceМаяк. Сообщество ролевиков и дизайнеровСказания РазломаЭврибия: история одной БашниПовесть о призрачном пактеKindred souls. Место твоей душиcursed landDragon AgeTenebria. Legacy of Ashes Lies of tales: персонажи сказок в современном мире, рисованные внешностиKelmora. Hollow crownsinistrumGEMcrossLYL Magic War. ProphecyDISex librissoul loveNIGHT CITY VIBEReturn to edenMORSMORDRE: MORTIS REQUIEM Яндекс.Метрика