⠀
[html]<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
margin: 0;
font-family: 'Courier New', monospace;
background-color: #2a292e;
color: #36363a;
display: flex;
justify-content: center;
align-items: center;
}
.container {
display: flex;
width: 100%;
max-width: 1200px;
overflow: hidden;
background: rgba(0, 0, 0, 0.7);
}
.left-column {
width: 30%;
background: #b1a69c;
padding: 10px;
height: 250px;
overflow-y: auto;
}
.left-column button {
font-family: 'Courier New', monospace;
height: 50px;
line-height: 50px;
display: block;
width: 100%;
background: #9a8f85;
color: #36363a;
margin-bottom: 10px;
text-align: center;
font-size: 12px;
cursor: pointer;
border: 1px solid #9a8f85;
border-radius: 10px; /* Закруглённые углы */
transition: background 0.3s ease, transform 0.2s ease;
}
.left-column button:hover {
background: #a99e95;
transform: scale(1.05);
}
.right-column {
width: 70%;
padding: 20px;
background: #b1a69c;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.character-info {
font-family: 'Courier New', monospace;
font-size: 12px;
color: #36363a;
}
.character-info h2 {
font-size: 12px;
color: #36363a;
}
</style>
</head>
<body>
<div class="container">
<!-- Левая колонка: список персонажей -->
<div class="left-column">
<button data-id="1">Грин</button>
<button data-id="2">Мионт</button>
<button data-id="3">Рэмиэль</button>
<button data-id="4">Кассандр</button>
<button data-id="5">Мурена</button>
<button data-id="6">Бурелом</button>
<button data-id="7">Шельма</button>
<button data-id="8">Ракша</button>
<button data-id="9">Найтмар</button>
<button data-id="10">Альтея</button>
<button data-id="11">Шельма</button>
<button data-id="12">Кайла</button>
</div>
<!-- Правая колонка: информация о персонаже -->
<div class="right-column">
<div id="default-message" class="character-info">
<h2></h2>
<p>О ком ты хочешь узнать?</p>
</div>
<div id="character-info" class="character-info" style="display: none;">
<h2 id="character-name"></h2>
<p id="character-description"></p>
</div>
</div>
</div>
<script>
// Список персонажей и их описаний
const characters = {
1: { name: "", description: "Гибель друга стала страшной трагедией для Аделины. Нет хуже дня, чем последняя встреча с вожаком. Между волками сложилась не только классическая связь как лидер и последователь, но и очень сильная дружба, которой целительница очень дорожила. Сейчас счастливые воспоминания о Грине лежат в самом центре ее сердца. С уверенностью можно сказать, что Аделина никому не позволит опорочить память о вожаке." },
2: { name: "", description: "Беломордый - любимый секрет целительницы, наделяющий призвание особым смыслом. Учить совсем не так просто, когда и самого себя ты критикуешь и строго оцениваешь. Но Аделина очень старается быть достойным преподавателем. Не только ради сохранения знаний, но и лично для Мионта. Время крепко связало ее с серокровным. Волчица очень чуткая к переменам настроения и сложному нраву Мионта, не упуская возможности поддержать и показать все грани его способностей. Этот малыш еще задаст этому миру. Ему нужен крепкий тыл." },
3: { name: "", description: "Беломордый - любимый секрет целительницы..." },
4: { name: "", description: "Беломордый - любимый секрет целительницы..." },
5: { name: "", description: "Беломордый - любимый секрет целительницы..." },
6: { name: "", description: "Беломордый - любимый секрет целительницы..." },
7: { name: "", description: "Беломордый - любимый секрет целительницы..." },
// Добавьте описания остальных персонажей
};
// Ссылки на элементы интерфейса
const buttons = document.querySelectorAll(".left-column button");
const defaultMessage = document.getElementById("default-message");
const characterInfo = document.getElementById("character-info");
const characterName = document.getElementById("character-name");
const characterDescription = document.getElementById("character-description");
// Обработчик клика на кнопки
buttons.forEach(button => {
button.addEventListener("click", () => {
const id = button.getAttribute("data-id");
// Обновление правой колонки
const character = characters[id];
characterName.textContent = character.name;
characterDescription.textContent = character.description;
// Переключение видимости
defaultMessage.style.display = "none";
characterInfo.style.display = "block";
});
});
</script>
</body>
</html>
[/html]
Они бегали наперегонки, взбирались на деревья, устраивали потешные бои и турниры по рукоборью. И с каждым ярдом они бежали все быстрее; и каждая ветка на пути к вершине открывала перед ними новые горизонты. Они подбивали друг друга на все более рискованные затеи и всегда были готовы принять вызов. Они не обращали внимания на царапины и ссадины; синяки были для них знаками чести, а шрамы приравнивались к боевым наградам. Каждую минуту каждого дня они подвергали себя новым испытаниям перед лицом этого мира и друг друга.
Диана Сеттерфилд
![Победителю конкурса [Смерть - это только начало!]](http://s3.uploads.ru/4kAtM.png "Победителю конкурса [Смерть - это только начало!]")
