[html]<div class="char-wrapper">
<!-- СТИЛИ (можно оставить прямо здесь) -->
<style>
.char-wrapper {
width: 700px;
margin: 0 auto;
display: flex;
gap: 20px;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
.char-card {
flex: 1;
border-radius: 8px;
padding: 15px;
box-sizing: border-box;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
border: 1px solid;
}
/* Стили для портрета */
.char-photo-container {
width: 100%;
height: 380px; /* Высота портрета, можно изменить */
overflow: hidden;
border-radius: 6px;
margin-bottom: 15px;
}
.char-photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.char-name {
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
margin-bottom: 15px;
}
/* Стили для спойлеров */
.char-spoilers {
display: flex;
flex-direction: column;
gap: 8px;
}
.char-spoiler {
border-radius: 5px;
overflow: hidden;
transition: all 0.3s ease;
}
.char-spoiler summary {
padding: 10px 15px;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
list-style: none; /* убирает стандартную стрелку в некоторых браузерах */
outline: none;
display: flex;
justify-content: space-between;
align-items: center;
}
/* Кастомный маркер для спойлера */
.char-spoiler summary::-webkit-details-marker {
display: none;
}
.char-spoiler summary::after {
content: '+';
font-weight: normal;
}
.char-spoiler[open] summary::after {
content: '−';
}
.char-spoiler-content {
padding: 12px 15px;
font-size: 13px;
line-height: 1.5;
}
/* ПЕРСОНАЖ 1: НИКОДИМ (Горчичный и ванильный) */
.char-nikodim {
background-color: #fbf9f3; /* Ванильный фон */
border-color: #e6dfce;
}
.char-nikodim .char-name {
color: #7d6b47; /* Горчичный темный */
}
.char-nikodim .char-spoiler {
background-color: #f4eee0;
}
.char-nikodim .char-spoiler summary {
background-color: #ebdcb9; /* Горчичный светлый */
color: #5c4d2d;
}
.char-nikodim .char-spoiler-content {
background-color: #faf7f0;
color: #5c4d2d;
border-top: 1px solid #ebdcb9;
}
/* ПЕРСОНАЖ 2: ГЛЕНН (Голубой и белый) */
.char-glenn {
background-color: #f3f6f9; /* Мягкий белый с голубизной */
border-color: #dee5ed;
}
.char-glenn .char-name {
color: #52657a; /* Серо-голубой темный */
}
.char-glenn .char-spoiler {
background-color: #e6ecf2;
}
.char-glenn .char-spoiler summary {
background-color: #d2dee9; /* Серо-голубой светлый */
color: #384656;
}
.char-glenn .char-spoiler-content {
background-color: #f7f9fb;
color: #384656;
border-top: 1px solid #d2dee9;
}
</style>
<!-- ЛЕВАЯ ЧАСТЬ: НИКОДИМ -->
<div class="char-card char-nikodim">
<div class="char-photo-container">
<img src="https://upforme.ru/uploads/001c/82/f2/166/94955.png" class="char-photo">
</div>
<div class="char-name">Никодим</div>
<div class="char-spoilers">
<details class="char-spoiler">
<summary>Эпизоды</summary>
<div class="char-spoiler-content">
<center><b>process</b></center><br>
✔ <a href="https://kindredspirits.ru/viewtopic.php?id=735">[21.12.2012] doomsday party</a><br>
✔ <a href="https://kindredspirits.ru/viewtopic.php?id=618">[20.09.2024] Distant past</a><br>
❗ <a href="https://kindredspirits.ru/viewtopic.php?id=665">[10.01.2026] Carpe Demon</a><br>
✔ <a href="https://kindredspirits.ru/viewtopic.php?id=765">[03.12.2025] A Little Bit Off</a><br>
✔ <a href="https://kindredspirits.ru/viewtopic.php?id=813#p142220">[17.04.2026] Город, который... - жертва</a><br>
</div>
</details>
<details class="char-spoiler">
<summary>Детали</summary>
<div class="char-spoiler-content">
будут позже
</div>
</details>
</div>
</div>
<!-- ПРАВАЯ ЧАСТЬ: ГЛЕНН -->
<div class="char-card char-glenn">
<div class="char-photo-container">
<img src="https://upforme.ru/uploads/001c/82/f2/166/198795.png" class="char-photo">
</div>
<div class="char-name">Гленн</div>
<div class="char-spoilers">
<details class="char-spoiler">
<summary>Эпизоды</summary>
<div class="char-spoiler-content">
<center><b>process</b></center><br>
❗ <a href="https://kindredspirits.ru/viewtopic.php?id=651">[03.10.2019] what if...</a> (alt)<br>
❗ <a href="https://kindredspirits.ru/viewtopic.php?id=816#p142430">
[08.11.2025] right / wrong</a><br>
❗ <a href="https://kindredspirits.ru/viewtopic.php?id=618">[20.09.2024] Distant past</a><br>
❗ <a href="https://kindredspirits.ru/viewtopic.php?id=537#p99035">[13.09.2025] polar glass</a><br>
✔ <a href="https://kindredspirits.ru/viewtopic.php?id=706#p125908">[10.01.2026] room 404</a><br>
✔ <a href="https://kindredspirits.ru/viewtopic.php?id=708#p125994">[12.03.2026] Совершается преступление. Не мешать.</a><br>
✔ <a href="https://kindredspirits.ru/viewtopic.php?id=724#p127541">[18.03.2026] лягушачий патруль</a><br>
✔ <a href="https://kindredspirits.ru/viewtopic.php?id=701">[17.04.2026] Город, который...</a><br>
✔ <a href="https://kindredspirits.ru/viewtopic.php?id=763">[17.04.2026] Город, который... - Paradise</a><br>
<br>
<center><b>done</b></center><br>
<a href="https://kindredspirits.ru/viewtopic.php?id=314#p45506">[06.01.2025 / 05.05.2025] At the edge of singularity</a><br>
<a href="https://kindredspirits.ru/viewtopic.php?id=364#p54848">[23.05.2025] Endurance</a><br>
<a href="https://kindredspirits.ru/viewtopic.php?id=541">[27.08.2025] Bring the lion out</a><br>
<a href="https://kindredspirits.ru/viewtopic.php?id=351">[23.04.2025] Погреться у нарисованной печки</a><br>
<a href="https://kindredspirits.ru/viewtopic.php?id=530">[26.05.2025] early shift</a><br>
<a href="https://kindredspirits.ru/viewtopic.php?id=341">[31.10.2025] Ночь сорванных замков - Смешать, перемешать, взболтать...</a><br>
</div>
</details>
<details class="char-spoiler">
<summary>Детали</summary>
<div class="char-spoiler-content">
будут позже
</div>
</details>
</div>
</div>
</div>[/html]
Отредактировано Glenn Valentine (19-08-2026 20:07:57)
Цитировать
