donde termina el eco

16 mironovbogdan341

Abrir en el editor Publica tu código

Recomendado

27 September 2024

Latidos del corazón

14 September 2024

Interacción con carteles de películas

21 September 2024

Control deslizante de recorrido rotatorio

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Там, где заканчивается эхо </title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background: #2b2b26;
            font-family: 'Georgia', 'Times New Roman', Times, serif;
            line-height: 1.7;
            color: #2c2418;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem 1rem;
        }

.book-container {
            max-width: 950px;
            width: 100%;
            background: #fef7e8;
            background-image: radial-gradient(circle at 25% 40%, rgba(200, 170, 120, 0.05) 1.2%, transparent 1.2%);
            background-size: 32px 32px;
            border-radius: 32px 24px 32px 24px;
            box-shadow: 0 35px 50px -20px rgba(0,0,0,0.6), 0 10px 20px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,235,0.9);
            overflow: hidden;
        }

.book-header {
            padding: 2.5rem 2rem 1.5rem 2rem;
            text-align: center;
            border-bottom: 1px solid #e2d5c0;
            background: #fffaf0;
        }

.title-main {
            font-size: 3rem;
            letter-spacing: -0.5px;
            font-weight: 600;
            font-family: 'Times New Roman', serif;
            color: #342a1c;
            text-shadow: 2px 2px 0 rgba(180, 130, 80, 0.1);
            margin-bottom: 0.5rem;
        }

.title-sub {
            font-style: italic;
            font-size: 0.95rem;
            color: #8b765a;
            letter-spacing: 1px;
            border-top: 1px solid #e6d8c4;
            display: inline-block;
            padding-top: 0.5rem;
        }

.author {
            margin-top: 1rem;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 3px;
            font-weight: 400;
            color: #b28b5e;
        }

.navigation {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1.2rem;
            padding: 1rem;
            background: #f5ecdb;
            border-bottom: 1px solid #e2d0b6;
            flex-wrap: wrap;
        }

.nav-btn {
            background: #e8dccc;
            border: none;
            padding: 0.5rem 1.2rem;
            font-family: 'Segoe UI', system-ui, sans-serif;
            font-size: 0.9rem;
            font-weight: 600;
            color: #4f3e2c;
            border-radius: 40px;
            cursor: pointer;
            transition: 0.2s;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }

.nav-btn:hover {
            background: #d6c49e;
            transform: translateY(-2px);
        }

.page-indicator {
            font-family: monospace;
            background: #fff7ed;
            padding: 0.3rem 1rem;
            border-radius: 60px;
            font-size: 0.85rem;
            color: #8b6d48;
            font-weight: bold;
        }

.page-view {
            padding: 2rem 2rem 3rem 2rem;
            min-height: 65vh;
            background: #fef7e8;
            transition: opacity 0.25s ease;
        }

.page-number {
            text-align: center;
            font-size: 0.75rem;
            font-family: monospace;
            color: #c2af8b;
            margin-top: 2.5rem;
            border-top: 1px dotted #ede0cd;
            padding-top: 1rem;
        }

.chapter-head {
            margin-bottom: 1.2rem;
        }

.chapter-num {
            font-size: 1.2rem;
            font-weight: 600;
            color: #c7a36b;
            letter-spacing: 1.5px;
            border-bottom: 1px dotted #ebdfcd;
            display: inline-block;
            padding-right: 1rem;
        }

.chapter-title {
            font-size: 1.7rem;
            font-weight: 500;
            margin: 0.3rem 0 1rem 0;
            color: #3e2e1c;
        }

p {
            margin-bottom: 1.3rem;
            text-align: justify;
            font-size: 1.05rem;
            line-height: 1.65;
        }

.first-letter {
            font-size: 3rem;
            font-weight: 600;
            float: left;
            line-height: 0.85;
            margin-right: 10px;
            color: #b3814b;
        }

.poem, .echo-block {
            margin: 1.5rem 0;
            font-style: italic;
            background: #fcf7ed;
            padding: 1rem 1.8rem;
            border-radius: 28px;
            text-align: center;
            border: 1px solid #f0e3d0;
            color: #5c4b32;
        }

.pullquote {
            font-size: 1.15rem;
            background: #fff3e0;
            border-left: 5px solid #dbb879;
            padding: 0.8rem 1.5rem;
            margin: 1.2rem 0;
            color: #4d3a24;
        }

.pullquote:before {
            content: "“";
            font-size: 2rem;
            color: #cca76e;
            margin-right: 6px;
        }

.divider {
            margin: 1.5rem 0;
            border: none;
            height: 1px;
            background: linear-gradient(to right, #f0e3cf, #d9c8ae, #f0e3cf);
            width: 40%;
            margin-left: auto;
            margin-right: auto;
        }

.echo-symbol {
            text-align: center;
            font-size: 1.6rem;
            letter-spacing: 8px;
            color: #cbb786;
            margin: 1rem 0;
        }

footer {
            text-align: center;
            font-size: 0.7rem;
            padding: 1rem;
            background: #f5ecdb;
            color: #7f6b4b;
            border-top: 1px solid #e2d0b6;
        }

@media (max-width: 650px) {
            .page-view { padding: 1.5rem; }
            .chapter-title { font-size: 1.4rem; }
            p { font-size: 1rem; }
            .nav-btn { padding: 0.3rem 0.9rem; font-size: 0.8rem; }
        }
    </style>
</head>
<body>
<div class="book-container">
    <div class="book-header">
        <div class="title-main">Там, где заканчивается эхо</div>
        <div class="title-sub">полное издание — 20 страниц, 40 глав</div>
        <div class="author">Елена Ветрова</div>
    </div>
    <div class="navigation">
        <button class="nav-btn" id="prevBtn">◀ Предыдущая страница</button>
        <span class="page-indicator" id="pageIndicator">Страница 1 / 20</span>
        <button class="nav-btn" id="nextBtn">Следующая страница ▶</button>
    </div>
    <div class="page-view" id="pageContent"></div>
    <footer>∞ Там, где заканчивается эхо, начинается бесконечность ∞</footer>
</div>

let currentPage = 0;
    const totalPages = pagesData.length;

document.getElementById('nextBtn')?.addEventListener('click', nextPage);
    document.getElementById('prevBtn')?.addEventListener('click', prevPage);
    window.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowRight') nextPage();
        if (e.key === 'ArrowLeft') prevPage();
    });
    renderPage();
</script>
</body>
</html>

CSS