[html]
<div class="magic-potion-selector">
    <div class="selector-header">Выберите зелье</div>
 
    <div class="potion-dropdown">
        <div class="dropdown-toggle">
            <span class="selected-value">Кликните для выбора</span>
            <i class="dropdown-arrow">▼</i>
        </div>
        <ul class="potion-options">
            <li data-potion="amortentia">
                <span class="potion-icon" style="background-color: #e74c3c;"></span>
                Amortentia (Амортенция)
            </li>
            <li data-potion="animagus">
                <span class="potion-icon" style="background-color: #8e44ad;"></span>
                Animagus Potion (Зелье анимага)
            </li>
            <li data-potion="antidote">
                <span class="potion-icon" style="background-color: #27ae60;"></span>
                Antidote to Common Poisons (Противоядие)
            </li>
            <li data-potion="draught">
                <span class="potion-icon" style="background-color: #16a085;"></span>
                Draught of Living Death (Напиток живых мертвецов)
            </li>
            <li data-potion="felix">
                <span class="potion-icon" style="background-color: #f39c12;"></span>
                Felix Felicis (Феликс Фелицис)
            </li>
            <li data-potion="pepperup">
                <span class="potion-icon" style="background-color: #c0392b;"></span>
                Pepperup Potion (Бодрящее зелье)
            </li>
            <li data-potion="polyjuice">
                <span class="potion-icon" style="background-color: #2ecc71;"></span>
                Polyjuice Potion (Полижуйс)
            </li>
            <li data-potion="skele">
                <span class="potion-icon" style="background-color: #bdc3c7;"></span>
                Skele-Gro (Скелегро)
            </li>
            <li data-potion="veritaserum">
                <span class="potion-icon" style="background-color: #3498db;"></span>
                Veritaserum (Веритасерум)
            </li>
            <li data-potion="wolfsbane">
                <span class="potion-icon" style="background-color: #34495e;"></span>
                Wolfsbane Potion (Зелье из волчьей ягоды)
            </li>
        </ul>
        <input type="hidden" class="selected-potion" value="">
    </div>
 
    <div class="potion-details">
        <div class="potion-info">
            <div class="potion-image"></div>
            <div class="potion-text">
                <div class="potion-title" style="color: #423a52;"></div>
                <div class="potion-description">Выберите зелье из списка</div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
    const potions = {
        'amortentia': {
            title: 'Amortentia (Амортенция)',
            color: '#e74c3c',
            desc: 'Самое сильное любовное зелье. Имеет перламутровый оттенок и издаёт аромат, который наиболее привлекателен для того, кто его нюхает. Запрещено к использованию.',
            icon: '❤️'
        },
        'animagus': {
            title: 'Animagus Potion (Зелье анимага)',
            color: '#8e44ad',
            desc: 'Позволяет волшебнику превращаться в животное. Процесс приготовления занимает месяц, требует постоянного ноствания мандрагоры во рту.',
            icon: '🐾'
        },
        'antidote': {
            title: 'Antidote to Common Poisons (Противоядие)',
            color: '#27ae60',
            desc: 'Зелье бирюзового цвета, нейтрализует большинство известных ядов. Изобретено Северусом Снеггом в школьные годы.',
            icon: '🌿'
        },
        'draught': {
            title: 'Draught of Living Death (Напиток живых мертвецов)',
            color: '#16a085',
            desc: 'Одно из самых сложных зелий. Вызывает глубокий сон, похожий на смерть. Имеет серебристый цвет.',
            icon: '💀'
        },
        'felix': {
            title: 'Felix Felicis (Феликс Фелицис)',
            color: '#f39c12',
            desc: 'Золотое зелье удачи. Дарует невероятное везение на 12 часов. Передозировка вызывает головокружение и безрассудство.',
            icon: '✨'
        },
        'pepperup': {
            title: 'Pepperup Potion (Бодрящее зелье)',
            color: '#c0392b',
            desc: 'Лечит простуду. После приёма из ушей повалит пар в течение нескольких часов. Изобретено в XVIII веке.',
            icon: '♨️'
        },
        'polyjuice': {
            title: 'Polyjuice Potion (Полижуйс)',
            color: '#2ecc71',
            desc: 'Позволяет принять облик другого человека на 1 час. Требует биологический материал цели (волос, ноготь). Имеет отвратительный вкус.',
            icon: '🧪'
        },
        'skele': {
            title: 'Skele-Gro (Скелегро)',
            color: '#bdc3c7',
            desc: 'Восстанавливает утраченные кости. Процесс крайне болезненный. Гарри Поттер использовал в 1993 году.',
            icon: '🦴'
        },
        'veritaserum': {
            title: 'Veritaserum (Веритасерум)',
            color: '#3498db',
            desc: 'Прозрачное зелье правды без вкуса и запаха. Заставляет говорить только правду в течение 1 часа. Используется Министерством Магии.',
            icon: '💧'
        },
        'wolfsbane': {
            title: 'Wolfsbane Potion (Зелье из волчьей ягоды)',
            color: '#34495e',
            desc: 'Позволяет оборотню сохранять человеческий разум при превращении. Очень сложно варится и дорого стоит.',
            icon: '🐺'
        }
    };

    // Открытие/закрытие dropdown
    $('.potion-dropdown').on('click', function(e) {
        e.stopPropagation();
        $(this).toggleClass('active');
        $('.potion-options').not($(this).find('.potion-options')).slideUp();
        $(this).find('.potion-options').slideToggle(200);
    });

    // Закрытие при клике вне
    $(document).on('click', function() {
        $('.potion-dropdown').removeClass('active');
        $('.potion-options').slideUp(200);
    });

    // Выбор зелья
    $('.potion-options li').on('click', function(e) {
        e.stopPropagation();
        const potionId = $(this).data('potion');
        const potion = potions[potionId];
       
        // Обновляем выбор
        $('.selected-value').text(potion.title);
        $('.selected-potion').val(potionId);
       
        // Обновляем детали
        $('.potion-title').text(potion.title).css('color', '#423a52');
        $('.potion-description').text(potion.desc);
        $('.potion-image').html(potion.icon)
            .css('background-color', potion.color)
            .css('font-size', '24px');
       
        // Закрываем dropdown
        $('.potion-dropdown').removeClass('active');
        $('.potion-options').slideUp(200);
    });
});
</script>

<style>
.magic-potion-selector {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 500px;
    height: 300px;
    margin: 20px auto;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    border: 1px solid #e0e0e0;
}
.selector-header {
    color: #423a52;
    font-weight: 600;
    margin-bottom: 12px;
    text-align: center;
    font-size: 16px;
}
.potion-dropdown {
    position: relative;
    margin-bottom: 15px;
}
.dropdown-toggle {
    padding: 10px 15px;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
}
.dropdown-toggle:hover {
    border-color: #a1a1a1;
}
.selected-value {
    color: #423a52;
    font-weight: 500;
}
.dropdown-arrow {
    color: #423a52;
    transition: transform 0.2s;
    font-size: 12px;
}
.potion-dropdown.active .dropdown-arrow {
    transform: rotate(180deg);
}

.potion-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 70vh;
    overflow-y: auto;
    margin: 5px 0 0;
    padding: 5px 5px;
    list-style: none;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    border-radius: 0 0 6px 6px;
    z-index: 1000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    transform: translateZ(0);
}

.potion-options::-webkit-scrollbar {
    width: 8px;
}
.potion-options::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.potion-options li {
    padding: 10px 15px;
    color: #423a52;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    transition: all 0.2s;
    cursor: pointer;
    white-space: nowrap; /* Добавлено для предотвращения переноса */
    overflow: hidden;
    text-overflow: ellipsis;
}
.potion-options li:hover {
    background-color: #f0f0f0;
}
.potion-options li:last-child {
    border-bottom: none;
}
.potion-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
}
.potion-details {
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #e0e0e0;
}
.potion-info {
    display: flex;
    align-items: center;
    gap: 15px;
}
.potion-image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
}
.potion-text {
    flex: 1;
}
.potion-title {
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 16px;
}
.potion-description {
    color: #555;
    font-size: 14px;
    line-height: 1.5;
}
</style>
[/html]

[hideprofile][html]
<style>
.curved {
  position: relative;
  background: #423a52;
  height: 120px;
  border-bottom-left-radius: 50% 20%;
  border-bottom-right-radius: 50% 20%;
  color: #bdb8b2;
  font-size: 40px;
  margin: 0 auto;
  padding-top: 20px;
}
</style>
<section class="curved" align="center">Здесь может быть заголовок</section>

<section class="blockquote-section">
<blockquote class="classy-bq"><p>В 1970 г. то, что прежде было лишь отзвуками редких вспышек, превратилось в настоящую войну. Локальные сражения обернулись полноценным террором. Магическая Британия окончательно перестала быть безопасной.

Одно за другим отменялись массовые развлекательные мероприятия. Ближе к восьмидесятым Министерство все больше советовало избегать людных скоплений. Да что толку? Те, кто называли себя Пожирателями, не гнушались и атаками на отдельно стоящие дома волшебников, а порой и магглов, связанных с магическим миром. Где они появлялись — небо озаряла Чёрная метка. Где они проходили — пахло смертью.

Долго так продолжаться не могло. Конечно, уже в середине десятилетия (а по слухам — и того раньше) открыто заявила о себе и другая организация, Орден Феникса, всеми силами препятствовавшая деятельности Пожирателей и передававшая их в руки Министерства… на первых порах.

Вскоре выяснилось, что тех немногих последователей Лорда, кого Ордену удавалось схватить, Министерство отпускало за «нехваткой доказательств». Это, а также нарастающие из-за постоянных вооружённых конфликтов экономические проблемы (вы думали, можно без последствий громить лавки?) — привело к отставке в 1975 году Юджины Дженкинс. Министром Магии становится Бартемиус Крауч-cтарший, всего на один голос обошедший Гарольда Мичмума в политической борьбе.

Назначение кажется более чем удачным решением — до этого момента ДоМП оправдывало свою неспособность справиться с угрозой террора тем, что вышестоящие органы Министерства связывали отделу руки, однако гладко не проходит: несколько представителей департаментов уходят в отставку в знак протеста (мы услышим о них позже, как о предателях и террористах).</p>
</blockquote>
<span class="cite">«Я хотел изменить этот мир. Но мир изменил меня»
<br>Братья Стругацкие <em>«Обитаемый остров»</em></span>
</section>
[/html]

Версия 1 на CSS без ссылок, адаптировано под мобильные:
[html]
<style>
  .image-swapper {
    display: inline-block;
    cursor: pointer; /* Чтобы было понятно, что элемент интерактивный */
  }
  .image-swapper img:last-child {
    display: none;
  }
  .image-swapper:hover img:first-child,
  .image-swapper:active img:first-child,
  .image-swapper:focus img:first-child {
    display: none;
  }
  .image-swapper:hover img:last-child,
  .image-swapper:active img:last-child,
  .image-swapper:focus img:last-child {
    display: inline;
  }
</style>

<div class="image-swapper">
  <img src='https://forumupload.ru/uploads/001c/76/cd/4/889921.png' alt="Image 1">
  <img src='https://forumupload.ru/uploads/001c/76/cd/4/190159.png' alt="Image 2">
</div>[/html]

Для зелий?

[html]
<style>
body {
  margin: 50px;
}

.water {
  margin: auto;
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #80c5de;
  box-shadow: inset 0 0 50px #1c637c;
  clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%)
}

.water::before {
  content: "";
  width: 200%;
  height: 200%;
  background-color: #ececec;
  position: absolute;
  top: -150%;
  left: -50%;
  border-radius: 40%;
  animation: anim 12s linear infinite;
}

.water::after {
  content: "";
  width: 204%;
  height: 204%;
  background-color: #ececec80;
  position: absolute;
  top: -150%;
  left: -52%;
  border-radius: 40%;
  animation: anim 12s linear infinite;
  animation-delay: 0.5s;
}

@keyframes anim {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
<div class="water"></div>
[/html]

Лотерея от Гекаты

[html]
<style>
/*Для использованных зелий div class="fly-container-1" меняем на div class="fly-container-2"*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.fly-container-1, .fly-container-2 {
display: flex;
flex-direction: column;
align-items: center;
}

.fly-container-1:hover {
cursor: pointer;
}

.fly-container-1 img {
filter: none;
width: 100px;
height: 100px;
border-radius: 50%;
border: 0px solid #493b66;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
margin-bottom: 1rem;
transition: filter 0.4s ease-in-out;
}

.fly-container-1:hover img {
filter: grayscale();
}

.fly-container-2 img {
filter: grayscale();
width: 100px;
height: 100px;
border-radius: 50%;
border: 0px solid #493b66;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
margin-bottom: 1rem;
transition: filter 0.4s ease-in-out;
}

.fly-title-1 {
        font-family: 'Noto Serif';
font-size: 12px;
color: #493b66;
position: relative;
}

.fly-title-2 {
filter: grayscale();
}

.fly-title-1::after {
position: absolute;
content: "";
width: 0%;
height: 4px;
background-color: whitesmoke;
left: 50%;
bottom: -10px;
transition: all 0.4s ease-in-out;
}

.fly-container-1:hover .title::after {
width: 100%;
left: 0;
}

.fly-wrapper-main {
        width: 400px;
display: flex;
        flex-wrap: wrap;
justify-content: center;
align-items: center;
}

</style>
<center><div class="fly-wrapper-main">

<div class="fly-container-1">
<img src="https://forumupload.ru/uploads/001c/64/0a/2/908622.png">
<div class="fly-title-1">Подарок 1</div>
</div>

<div class="fly-container-1">
<img src="https://forumupload.ru/uploads/001c/64/0a/2/247671.png">
<div class="fly-title-1">Подарок 2</div>
</div>

<div class="fly-container-1">
<img src="https://forumupload.ru/uploads/001c/64/0a/2/456282.png">
<div class="fly-title-1">Подарок 3</div>
</div>

<div class="fly-container-1">
<img src="https://forumupload.ru/uploads/001c/64/0a/2/304679.png">
<div class="fly-title-1">Подарок 4</div>
</div>

<div class="fly-container-1">
<img src="https://forumupload.ru/uploads/001c/64/0a/2/818542.png">
<div class="fly-title-1">Подарок 5</div>
</div>

<br><br>
<div class="fly-container-1">
<img src="https://forumupload.ru/uploads/001c/64/0a/2/116058.png">
<div class="fly-title-1">Подарок 6</div>
</div>
<div class="fly-container-1">
<img src="https://forumupload.ru/uploads/001c/64/0a/2/82264.png">
<div class="fly-title-1">Подарок 7</div>
</div>
<div class="fly-container-1">
<img src="https://forumupload.ru/uploads/001c/64/0a/2/524225.png">
<div class="fly-title-1">Подарок 8</div>
</div>
<div class="fly-container-1">
<img src="https://forumupload.ru/uploads/001c/64/0a/2/694356.png">
<div class="fly-title-1">Подарок 9</div>
</div>
<div class="fly-container-1">
<img src="https://forumupload.ru/uploads/001c/64/0a/2/536553.png">
<div class="fly-title-1">Подарок 10</div>
</div>

<div class="fly-container-1">
<img src="https://forumupload.ru/uploads/001c/64/0a/2/812773.png">
<div class="fly-title-1">Подарок 11</div>
</div>

<div class="fly-container-1">
<img src="https://forumupload.ru/uploads/001c/64/0a/2/546373.png">
<div class="fly-title-1">Подарок 12</div>
</div>

<div class="fly-container-1">
<img src="https://forumupload.ru/uploads/001c/64/0a/2/354795.png">
<div class="fly-title-1">Подарок 13</div>
</div>

<div class="fly-container-1">
<img src="https://forumupload.ru/uploads/001c/64/0a/2/194888.png">
<div class="fly-title-1">Подарок 14</div>
</div>

<div class="fly-container-1">
<img src="https://forumupload.ru/uploads/001c/64/0a/2/86680.png">
<div class="fly-title-1">Подарок 15</div>
</div>

<div class="fly-container-1">
<img src="https://forumupload.ru/uploads/001c/64/0a/2/104971.png">
<div class="fly-title-1">Подарок 16</div>
</div>

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