[html]
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Роли на RPG Форуме</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Cuprum', arial narrow;
margin: 0;
background-color: #f4f4f4;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.alphabet {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 20px 20px;
}
button {
margin: 5px;
padding: 10px 15px;
background: #fff;
color: maroon;
border: 1px solid maroon;
border-radius: 4px;
cursor: pointer;
font-size: 15px;
transition: background 0.3s;
}
button:hover {
background: #d6d2d1;
}
section {
font-family: 'Cuprum', arial narrow;
font-size: 15px;
padding: 19px;
background-color: #ffffff;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 600px;
opacity: 0.9;
}
h2 {
margin: 0;
color: #5a1607;
}
.role-list a {
display: block;
margin: 5px 0;
text-decoration: none;
color: #5a1607;
font-weight: bold;
}
.role-list a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<div class="alphabet">
<button onclick="toggleRoles('A ✦ B ✦ C')">A ✦ B ✦ C</button>
<button onclick="toggleRoles('D ✦ E ✦ F')">D ✦ E ✦ F</button>
<button onclick="toggleRoles('G ✦ H ✦ I')">G ✦ H ✦ I</button>
<button onclick="toggleRoles('J ✦ K ✦ L')">J ✦ K ✦ L</button>
<button onclick="toggleRoles('M ✦ N ✦ O')">M ✦ N ✦ O</button>
<button onclick="toggleRoles('P ✦ Q ✦ R')">P ✦ Q ✦ R</button>
<button onclick="toggleRoles('S ✦ T ✦ U')">S ✦ T ✦ U</button>
<button onclick="toggleRoles('V ✦ W ✦ X')">V ✦ W ✦ X</button>
<button onclick="toggleRoles('Y ✦ Z ✦ 0–10')">Y ✦ Z ✦ 0–10</button>
</div>
<section id="rolesDisplay">
<p>выберите блок для отображения ролей</p>
</section>
</div>
<script>
const roles = {
'A ✦ B ✦ C': `<div class="role-list">
<br><br>
<font size=2>✦ baldur's gate</font><hr>
<a href="ссылка">orin the red » орин красная</a>
</div>`,
'D ✦ E ✦ F': `<div class="role-list">
<br><br>
<font size=2>✦ dead boy detectives</font><hr>
<a href="ссылка">monty » монти</a>
<br><br>
<font size=2>✦ doctor who</font><hr>
<a href="ссылка">jeanne-antoinette poisson » ренетт пуассон</a>
</div>`,
'G ✦ H ✦ I': `<div class="role-list">
<br><br>
<font size=2>✦ genshin impact</font><hr>
<a href="ссылка">аyato кamisato » аято камисато</a>
<a href="ссылка">albedo » альбедо</a>
<a href="ссылка">pierro » пьеро</a>
<a href="ссылка">teucer » тевкр</a>
<br><br>
<font size=2>✦ honkai: star rail</font><hr>
<a href="ссылка">guinaifen » гуйнайфэнь</a>
<a href="ссылка">kafka » кафка</a>
<a href="ссылка">march 7th » март 7</a>
<a href="ссылка">sparkle » искорка / ханаби</a>
<br><br>
<font size=2>✦ horizon forbidden west</font><hr>
<a href="ссылка">beta » бета</a>
</div>`,
// аналогичные блоки для остальных букв
};
function toggleRoles(letter) {
const rolesDisplay = document.getElementById('rolesDisplay');
rolesDisplay.innerHTML = `<h2>Роли ${letter}</h2>${roles[letter] || '<p>Роли не найдены</p>'}`;
}
</script>
</body>
[/html]
[hideprofile]
