task.html - master - KVSysya/KVSy

task.html
254 строки10 KB
KVSysya
Create: task.html, new_file_
15 июн 2026, 19:20
15 июн 2026, 19:2078e9901
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>GetVerse | Стихи на каждый день</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #1a1e2c 0%, #2a2f3f 100%);
            font-family: 'Segoe UI', 'Roboto', 'Merriweather', 'Georgia', serif;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1.5rem;
        }

        .verse-card {
            max-width: 800px;
            width: 100%;
            background: rgba(255, 255, 255, 0.07);
            backdrop-filter: blur(12px);
            border-radius: 2.5rem;
            padding: 2rem 2rem 2.5rem;
            box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
            transition: transform 0.2s ease;
            text-align: center;
        }

        .verse-card:hover {
            transform: scale(1.01);
        }

        h1 {
            font-size: 3.2rem;
            font-weight: 700;
            background: linear-gradient(120deg, #f6d5b3, #f0a78c);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            letter-spacing: -0.02em;
            margin-bottom: 0.5rem;
            text-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .sub {
            font-size: 1rem;
            color: #b9c3e0;
            border-bottom: 1px dashed rgba(255,255,240,0.3);
            display: inline-block;
            padding-bottom: 0.3rem;
            margin-bottom: 2rem;
            font-weight: 400;
            letter-spacing: 1px;
        }

        .verse-content {
            background: rgba(10, 14, 23, 0.65);
            border-radius: 1.8rem;
            padding: 2rem 1.8rem;
            margin: 1.5rem 0 2rem;
            transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
            border: 1px solid rgba(255,210,160,0.2);
        }

        .verse-text {
            font-size: 1.55rem;
            line-height: 1.5;
            color: #f0ede8;
            white-space: pre-line;
            font-style: normal;
            font-weight: 450;
            text-shadow: 0 1px 1px rgba(0,0,0,0.2);
            transition: opacity 0.2s ease;
        }

        .verse-author {
            margin-top: 1.5rem;
            font-size: 1rem;
            color: #e2bc8c;
            letter-spacing: 1px;
            font-weight: 400;
            text-transform: uppercase;
            border-top: 1px solid rgba(255,215,170,0.3);
            display: inline-block;
            padding-top: 0.8rem;
        }

        .btn-get {
            background: linear-gradient(95deg, #e6b17e, #d9895a);
            border: none;
            padding: 1rem 2.4rem;
            font-size: 1.2rem;
            font-weight: 600;
            font-family: inherit;
            color: #1f1b2c;
            border-radius: 60px;
            cursor: pointer;
            box-shadow: 0 8px 18px rgba(0,0,0,0.3);
            transition: 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            letter-spacing: 1px;
        }

        .btn-get:hover {
            transform: translateY(-3px);
            background: linear-gradient(95deg, #f3c09a, #ea9b6e);
            box-shadow: 0 14px 24px rgba(0,0,0,0.4);
        }

        .btn-get:active {
            transform: translateY(2px);
        }

        .footer-note {
            margin-top: 2rem;
            font-size: 0.75rem;
            color: #8f9bb5;
            opacity: 0.8;
        }

        @media (max-width: 550px) {
            .verse-card {
                padding: 1.5rem;
            }
            h1 {
                font-size: 2.3rem;
            }
            .verse-text {
                font-size: 1.25rem;
            }
            .btn-get {
                padding: 0.8rem 1.8rem;
                font-size: 1rem;
            }
        }

        /* анимация появления */
        @keyframes gentleFade {
            0% { opacity: 0; transform: translateY(8px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        .verse-content {
            animation: gentleFade 0.45s ease-out;
        }
    </style>
</head>
<body>
<div class="verse-card">
    <h1>✨ GetVerse</h1>
    <div class="sub">поэзия на кончиках пальцев</div>

    <div class="verse-content" id="verseBox">
        <div class="verse-text" id="verseText">
            «Я искал в этом мире одну лишь свободу,<br>
            но нашёл только цепи и грусть…»
        </div>
        <div class="verse-author" id="verseAuthor">— Неизвестный странник</div>
    </div>

    <button class="btn-get" id="getVerseBtn">
        📜 Получить стих
    </button>
    <div class="footer-note">
        нажми — вдохновение придёт
    </div>
</div>

<script>
    // Коллекция стихов: текст + автор
    const verses = [
        {
            text: "Я вас любил: любовь ещё, быть может,\nВ душе моей угасла не совсем;\nНо пусть она вас больше не тревожит;\nЯ не хочу печалить вас ничем.",
            author: "Александр Пушкин"
        },
        {
            text: "Быть знаменитым некрасиво.\nНе это поднимает ввысь.\nНе надо заводить архива,\nНад рукописями трястись.",
            author: "Борис Пастернак"
        },
        {
            text: "Всем, кто идёт по краю, — не упасть.\nВсем, кто устал, — не сбиться бы с пути.\nПока горит свеча — есть шанс остаться,\nПока живут стихи — есть что найти.",
            author: "Современный аноним"
        },
        {
            text: "Люблю тебя, Петра творенье,\nЛюблю твой строгий, стройный вид,\nНевы державное теченье,\nБереговой её гранит.",
            author: "Александр Пушкин"
        },
        {
            text: "Выхожу один я на дорогу;\nСквозь туман кремнистый путь блестит;\nНочь тиха. Пустыня внемлет богу,\nИ звезда с звездою говорит.",
            author: "Михаил Лермонтов"
        },
        {
            text: "Do not go gentle into that good night,\nOld age should burn and rave at close of day;\nRage, rage against the dying of the light.",
            author: "Dylan Thomas"
        },
        {
            text: "А вам не кажется, что стих\nЖивёт в дыхании простом?\nОн — луч, упавший на чертёж,\nГде даже ветер стал листом.",
            author: "Из архива GetVerse"
        },
        {
            text: "Я узнал, что у меня\nЕсть огромная семья:\nИ тропинка, и лесок,\nВ поле — каждый колосок!",
            author: "Владимир Орлов"
        }
    ];

    const verseTextEl = document.getElementById('verseText');
    const verseAuthorEl = document.getElementById('verseAuthor');
    const btn = document.getElementById('getVerseBtn');

    // Функция показа случайного стиха
    function getRandomVerse() {
        const randomIndex = Math.floor(Math.random() * verses.length);
        const chosen = verses[randomIndex];
        // Добавляем замену \n на <br> для корректного отображения переносов
        const formattedText = chosen.text.replace(/\n/g, '<br>');
        verseTextEl.innerHTML = `❝ ${formattedText} ❞`;
        verseAuthorEl.textContent = `— ${chosen.author}`;
    }

    // Добавляем лёгкую анимацию для смены контента (сброс и запуск анимации)
    function animateVerseChange() {
        const container = document.querySelector('.verse-content');
        container.style.animation = 'none';
        // форсируем reflow
        void container.offsetHeight;
        container.style.animation = 'gentleFade 0.45s ease-out';
        getRandomVerse();
    }

    // Загружаем случайный стих при первом открытии (можно оставить дефолтный или сразу случайный)
    // Но чтобы сразу был случайный — вызываем, но оставим дефолтный красивый первый, а при клике уже меняем.
    // Однако по желанию: закомментируем, а лучше чтобы при загрузке тоже показывался случайный, но при этом не конфликтовать с вёрсткой.
    // Поскольку в html уже задан стих по умолчанию, мы можем его заменить, но оставим возможность первого рандома.
    // Чтобы не было путаницы, сделаем так: при загрузке страницы показываем случайный стих из коллекции (сразу рандом, кнопка не нужна для первого раза)
    window.addEventListener('DOMContentLoaded', () => {
        getRandomVerse();   // заменит дефолтный стих на случайный из списка
    });

    // Обработчик кнопки с анимацией
    btn.addEventListener('click', () => {
        animateVerseChange();
    });
</script>
</body>
</html>