[html]
<!-- Подключаем шрифт прямо через head -->
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
</head>
<div class="diary-wrapper">
<div class="arrow prev"></div>
<div class="book">
<!-- СТРАНИЦА 1 -->
<div class="page character-one active">
<div class="page-inner">
<div class="date-plate">12 октября</div>
<div class="entry-bubble">
<div class="entry">
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
</div>
</div>
</div>
</div>
<!-- СТРАНИЦА 2 -->
<div class="page character-two">
<div class="page-inner">
<div class="date-plate">13 октября</div>
<div class="entry-bubble">
<div class="entry">
Сегодня ночью спал просто отвратительно. По ощущениям будто кто-то подкинул мне в голову взрывчатку - подкрался, пока я дремал, открыл черепную крышку, сбросил туда всякой дряни, закрыл и убежал со всех ног. Ментальный подкидыш, взрывоопасная бредятина. Причем сон начинался просто чудесно - я, кажется, был на задании или просто развлекался славной "охотой", я отчетливо помню, как пролезал в чье-то тело, подслушивал чужой пульс, окунался в чужие крики, но потом.. потом я полностью потерял контроль над своим телом. Нет, я продолжил начатое, но будто бы уже не по своей воле, я наносил своей жертве увечья, но не там, где хотел их нанести, и пытал ее не теми способами, которыми всегда предпочитал.. Из дирижёра я превратился в обычного зрителя, пусть и посаженного в первых рядах. Очень гадкое ощущение, когда ты, вроде бы, делаешь все то, что хотел сделать изначально, но по чьей-то указке, по чьему-то велению, в совершенно ином, не согласованном с тобой, виде. Я потратил три тысячелетия на то, чтобы двинуть хотя бы пальцем, чтобы сделать хоть что-то самостоятельно, а не лицезреть парализованным истуканом, как льются реки крови из вспоротых глоток. Творить нечто настолько упоительно сладкое и грешное, но не по доброй воле - самое мерзкое, самое унизительное и святотатственное, что можно придумать. Грешить нужно осознанно. По велению своего выбора, своего решения, своей тяги, иначе это просто кукольная постановка, где ты болтаешься на невидимых ниточках, где ты и не убийца даже, а лишь инструмент того, кто в действительности является убийцей. Заснуть снова я так и не смог, однако днем был весьма бодр. Подумаешь, скверный сон. И не такое случалось.
</div>
</div>
</div>
</div>
<!-- СТРАНИЦА 1 -->
<div class="page character-one">
<div class="page-inner">
<div class="date-plate">12 октября</div>
<div class="entry-bubble">
<div class="entry">
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
</div>
</div>
</div>
</div>
</div>
<div class="arrow next"></div>
</div>
<style>
/* =========================
ОБЁРТКА
========================= */
.diary-wrapper{
position:relative;
width:100%;
max-width:780px;
margin:80px auto;
background:transparent;
}
/* =========================
КНИГА
========================= */
.book{
position:relative;
height:660px;
border-radius:36px;
overflow:hidden;
background:#e9dcc6;
}
/* =========================
СТРАНИЦЫ
========================= */
.page{
position:absolute;
inset:0;
transform-origin:left;
transform:rotateY(90deg);
opacity:0;
transition:0.8s ease;
backface-visibility:hidden;
}
.page.active{
transform:rotateY(0deg);
opacity:1;
}
/* =========================
ВНУТРЕННОСТЬ
========================= */
.page-inner{
height:100%;
padding:80px 90px 80px 90px;
box-sizing:border-box;
display:flex;
flex-direction:column;
position:relative;
}
/* =========================
ПУЗЫРЬ
========================= */
.entry-bubble {
flex: 1 1 auto; /* растягиваем, но не “ломаем” высоту */
margin-top: 20px;
border-radius: 26px;
padding: 25px 40px 35px 45px; /* top right bottom left */
overflow-y: auto;
position: relative;
box-sizing: border-box; /* padding включен в высоту */
scrollbar-width: thin;
scrollbar-color: rgba(0,0,0,0.35) transparent;
}
.entry-bubble::-webkit-scrollbar {
width: 6px;
}
.entry-bubble::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.35);
border-radius: 20px;
}
.entry-bubble::-webkit-scrollbar-track {
background: transparent;
}
/* =========================
ПЕРСОНАЖ 1 — МУЖСКОЙ ДНЕВНИК
========================= */
.character-one{
background:
radial-gradient(circle at 25% 25%, rgba(50,80,50,0.4), transparent 60%),
linear-gradient(160deg, #3b2f25, #1f3a2a); /* коричнево-хвойный */
font-family:"Georgia", serif;
color:#e4dbc6; /* читаемый контрастный текст */
}
.character-one .date-plate{
font-size:18px;
padding:12px 36px;
border:2px solid rgba(100,120,80,0.8); /* темно-зеленый */
display:inline-block;
letter-spacing:2px;
text-transform:uppercase;
background:rgba(50,70,40,0.5);
color:#f1f0e6;
backdrop-filter:blur(2px);
box-shadow:0 6px 18px rgba(0,0,0,0.12);
transition:.3s ease;
}
.character-one .date-plate:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(0,0,0,0.18);
}
/* Вертикальная линия — коричнево-зеленая */
.character-one .page-inner::before{
content:"";
position:absolute;
left:75px;
top:150px;
bottom:80px;
width:2px;
background:linear-gradient(to bottom,
rgba(80,90,60,0.2),
rgba(50,70,40,0.6),
rgba(80,90,60,0.2));
}
/* Пузырь — тёплый, закрашенный */
.character-one .entry-bubble{
background:#3a4a36; /* глубокий зеленый */
box-shadow:
0 12px 28px rgba(0,0,0,0.2),
inset 0 0 35px rgba(0,0,0,0.08);
color:#e4dbc6; /* текст читаемый */
padding-left:40px;
border:none;
}
.character-one .entry{
line-height:2.05;
font-size:17px;
letter-spacing:0.2px;
}
/* =========================
ПЕРСОНАЖ 2
========================= */
.character-two{
background:
radial-gradient(circle at 70% 30%, rgba(120,0,0,0.25), transparent 60%),
linear-gradient(#130c0c,#0b0505);
font-family:"Cormorant Garamond", serif;
color:#f1e7e7;
}
.character-two .date-plate{
font-size:17px;
padding:10px 28px;
background:linear-gradient(90deg,#6e0f0f,#9b1c1c);
color:#fff;
letter-spacing:4px;
display:inline-block;
text-transform:uppercase;
box-shadow:
0 0 20px rgba(180,0,0,0.4),
0 10px 30px rgba(0,0,0,0.6);
transition:.3s ease;
}
.character-two .date-plate:hover{
transform:scale(1.05);
box-shadow:
0 0 30px rgba(220,0,0,0.6),
0 15px 40px rgba(0,0,0,0.8);
}
.character-two .entry-bubble{
background:rgba(15,0,0,0.6);
border:1px solid rgba(255,255,255,0.08);
box-shadow:
0 20px 50px rgba(0,0,0,0.8),
inset 0 0 50px rgba(150,0,0,0.15);
padding:20px 40px;
}
.character-two .entry {
font-family: "Crimson Text", serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
line-height: 1.8;
letter-spacing: 0.5px;
}
/* =========================
СТРЕЛКИ
========================= */
.arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:60px;
height:60px;
border-radius:50%;
cursor:pointer;
opacity:0;
transition:.3s ease;
z-index:5;
}
.book:hover .arrow{
opacity:1;
}
.prev{
left:25px;
}
.next{
right:25px;
}
.character-one ~ .arrow{
background:#2e452e; /* глубокий зеленый */
box-shadow:0 10px 25px rgba(0,0,0,0.2);
}
.character-two ~ .arrow{
background:#4a0c0c;
}
.arrow:hover{
transform:translateY(-50%) scale(1.1);
}
.arrow::before{
content:"";
position:absolute;
top:50%;
left:50%;
width:16px;
height:16px;
border-top:2px solid #e4dbc6;
border-right:2px solid #e4dbc6;
}
.next::before{
transform:translate(-50%,-50%) rotate(45deg);
}
.prev::before{
transform:translate(-50%,-50%) rotate(-135deg);
}
.arrow.visible{
opacity:1;
}
/* =========================
📱 МОБИЛЬНАЯ ВЕРСИЯ
========================= */
@media (max-width: 600px) {
.book {
height: auto; /* убираем 660px */
min-height: auto; /* убираем 100vh */
border-radius: 0;
}
.page {
position: relative; /* убираем абсолютное позиционирование */
transform: none !important;
opacity: 1 !important;
}
.page-inner {
padding: 25px 20px; /* уменьшаем внешние отступы */
}
.entry-bubble {
padding: 15px 15px 20px 15px; /* убираем огромные внутренние поля */
margin-top: 15px;
border-radius: 18px;
overflow: visible; /* чтобы не было странного обрезания */
}
.character-one .entry-bubble {
padding-left: 15px; /* убираем декоративный отступ */
}
.character-two .entry-bubble {
padding: 15px !important;
}
.date-plate {
font-size: 14px; /* уменьшаем дату */
padding: 6px 16px;
letter-spacing: 1px;
}
.entry {
font-size: 16px; /* текст чуть компактнее */
line-height: 1.6;
}
.arrow {
display: none; /* на телефоне стрелки не нужны */
}
}
</style>
<script>
let pages=document.querySelectorAll('.page');
let current=0;
let prev=document.querySelector('.prev');
let next=document.querySelector('.next');
function updateNav(){
prev.classList.toggle('visible',current>0);
next.classList.toggle('visible',current<pages.length-1);
}
updateNav();
next.onclick=function(){
if(current<pages.length-1){
pages[current].classList.remove('active');
current++;
pages[current].classList.add('active');
updateNav();
}
};
prev.onclick=function(){
if(current>0){
pages[current].classList.remove('active');
current--;
pages[current].classList.add('active');
updateNav();
}
};
</script>
[/html]
