9.html - master - Codeboy1/lab6

9.html
247 строк11 KB
Codeboy1
create: 1.html, 2.html, 3.html, 4.html, 5.html, 6.html, 7.html, 8.html, 9.html
01 апр 2026, 14:10
01 апр 2026, 14:10b887c38
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>Лицемер (с) - Динамические карточки</title>
    <style>
        /* ========== ПОЛНЫЕ СТИЛИ из исходного style.css ========== */
        @import url('https://fonts.googleapis.com/css?family=Arimo&subset=cyrillic');

        body, html {
            height: 100%;
            width: 100%;
            margin: 0;
            font-family: 'Arimo';
        }
        body {
            display: flex;
            flex-flow: column nowrap;
        }
        body > header {
            height: 60px;
            background-color: #7161EF;
        }
        .content {
            flex: 1;
            display: flex;
            flex-flow: row nowrap;
        }
        .content > aside {
            width: 30%;
        }
        .content > section {
            flex: 1;
            background-color: #FFE7DB;
        }
        .header-d {
            text-align: center;
            height: 80px;
            line-height: 80px;
            font-size: 1.8rem;
        }
        .display {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            align-items: flex-start;
        }
        .card {
            height: 36vh;
            width: 30vh;
            margin: 20px 40px;
            box-shadow: 0 4px 16px 0 rgba(0,0,0,0.2);
            transition: 0.3s ease-out;
            background-color: white;
            border-radius: 5px;
            cursor: pointer;
        }
        .card:hover {
            box-shadow: 0 8px 32px 0 rgba(0,0,0,0.4);
            transform-origin: center;
            transform: scale(1.02, 1.02);
        }
        .card > img {
            width: 30vh;
            height: 30vh;
            border-radius: 5px 5px 0 0;
            object-fit: cover;
        }
        .description {
            padding: 0 16px;
            text-align: center;
            font-size: 1.1rem;
        }
        /* небольшая адаптивность для читаемости */
        @media (max-width: 768px) {
            .card {
                width: 25vh;
                height: 31vh;
            }
            .card > img {
                width: 25vh;
                height: 25vh;
            }
            .header-d {
                font-size: 1.3rem;
                height: 60px;
                line-height: 60px;
            }
        }
    </style>
</head>
<body>
    <script>
        // ========== 1. ФУНКЦИЯ ДЛЯ ГЕНЕРАЦИИ СЛУЧАЙНОГО ИМЕНИ ==========
        // Массивы имён и фамилий (богатый выбор)
        const firstNames = [
            "Александр", "Дмитрий", "Максим", "Иван", "Артём", "Егор", "Никита", "Михаил", "Даниил", "Тимофей",
            "Анна", "Мария", "Екатерина", "Ольга", "Татьяна", "Наталья", "Ирина", "Виктория", "Елена", "Светлана",
            "София", "Алиса", "Полина", "Вероника", "Арина", "Ксения", "Валерия", "Анастасия", "Юлия", "Дарья"
        ];

        const lastNames = [
            "Иванов", "Петров", "Сидоров", "Смирнов", "Кузнецов", "Попов", "Васильев", "Соколов", "Михайлов", "Новиков",
            "Фёдорова", "Морозова", "Волкова", "Алексеева", "Лебедева", "Семёнова", "Егорова", "Павлова", "Козлова", "Степанова",
            "Николаева", "Дмитриева", "Андреева", "Борисова", "Киселёва", "Григорьева", "Зайцева", "Соловьёва", "Орлова", "Макарова"
        ];

        // Функция для генерации случайного полного имени (Имя + Фамилия)
        function getRandomFullName() {
            const randomFirstName = firstNames[Math.floor(Math.random() * firstNames.length)];
            const randomLastName = lastNames[Math.floor(Math.random() * lastNames.length)];
            return `${randomFirstName} ${randomLastName}`;
        }

        // ========== 2. СОЗДАНИЕ ВСЕЙ СТРУКТУРЫ (кроме карточек) через DOM API ==========
        // Очищаем body, чтобы построить всё с нуля по заданию (пункт a: создаём точно такую же разметку как в файле, всё внутри body)
        // Но сохраняем ссылку на body
        const body = document.body;
        // Полностью очищаем body (в исходном файле там могли быть заглушки, но мы пересоздаём всё чисто)
        body.innerHTML = '';

        // 2.1 Создаём <header></header>
        const header = document.createElement('header');

        // 2.2 Создаём <main class="content">
        const mainContent = document.createElement('main');
        mainContent.className = 'content';

        // 2.3 Создаём <aside></aside> (левый сайдбар)
        const aside = document.createElement('aside');

        // 2.4 Создаём <section></section>
        const section = document.createElement('section');

        // 2.5 Внутри section: <div class="header-d">Выберите лицо, которое нравится вам больше остальных:</div>
        const headerDiv = document.createElement('div');
        headerDiv.className = 'header-d';
        headerDiv.textContent = 'Выберите лицо, которое нравится вам больше остальных:';

        // 2.6 Внутри section: <div class="display"></div> — контейнер для всех карточек (изначально пустой)
        const displayDiv = document.createElement('div');
        displayDiv.className = 'display';

        // Собираем структуру section -> headerDiv и displayDiv
        section.appendChild(headerDiv);
        section.appendChild(displayDiv);

        // Собираем main: aside + section
        mainContent.appendChild(aside);
        mainContent.appendChild(section);

        // Добавляем header и main в body
        body.appendChild(header);
        body.appendChild(mainContent);

        // ========== 3. ЛОГИКА ДОБАВЛЕНИЯ КАРТОЧЕК С ИНТЕРВАЛОМ (setInterval) ==========
        let cardCounter = 0;       // счетчик созданных карточек (для уникального параметра и лимита 6)
        const MAX_CARDS = 6;
        let intervalId = null;

        // Функция для создания одной карточки (div.card со всей внутренней разметкой)
        // Принимает номер карточки (уникальный параметр для src) и случайное имя для текста
        function createCard(cardNumber, randomName) {
            // Создаем корневой элемент карточки
            const cardDiv = document.createElement('div');
            cardDiv.className = 'card';

            // Создаем изображение <img> с динамическим параметром (уникальный ?число)
            const img = document.createElement('img');
            img.src = `https://thispersondoesnotexist.com/?${cardNumber}`;
            img.alt = "Avatar";

            // Создаем блок описания <div class="description">
            const descriptionDiv = document.createElement('div');
            descriptionDiv.className = 'description';

            const nameParagraph = document.createElement('p');
            nameParagraph.textContent = randomName;   // случайное имя, например "Александр Иванов"

            // Собираем вложенность
            descriptionDiv.appendChild(nameParagraph);
            cardDiv.appendChild(img);
            cardDiv.appendChild(descriptionDiv);

            // Можно добавить небольшой интерактив: клик по карточке выводит в консоль имя, но это необязательно
            cardDiv.addEventListener('click', () => {
                console.log(`Выбрана карточка: ${randomName}`);
            });

            return cardDiv;
        }

        // Функция добавления новой карточки в контейнер .display
        function addNewCard() {
            // Увеличиваем счетчик перед созданием (первая карточка будет с номером 1)
            cardCounter++;

            // Генерируем случайное полное имя с помощью нашей функции
            const randomFullName = getRandomFullName();

            // Создаём карточку с текущим номером и случайным именем
            const newCard = createCard(cardCounter, randomFullName);

            // Находим контейнер .display (он существует, создан ранее)
            const displayContainer = document.querySelector('.display');
            if (displayContainer) {
                displayContainer.appendChild(newCard);
            } else {
                console.error('Контейнер .display не найден!');
            }

            // Проверяем: если достигли 6 карточек, очищаем интервал
            if (cardCounter === MAX_CARDS) {
                clearInterval(intervalId);
                intervalId = null;
                console.log(`Достигнуто ${MAX_CARDS} карточек. Добавление остановлено.`);
            }
        }

        // ========== 4. ЗАПУСК setInterval (каждые 2000 мс), пока не будет 6 карточек ==========
        // Убедимся, что интервал не запущен повторно
        if (intervalId === null) {
            intervalId = setInterval(() => {
                // Добавляем карточку, если ещё не создано 6
                if (cardCounter < MAX_CARDS) {
                    addNewCard();
                } else {
                    // Если по какой-то причине условие сработало после 6, чистим
                    if (intervalId) {
                        clearInterval(intervalId);
                        intervalId = null;
                    }
                }
            }, 2000);
        }

        console.log('Скрипт активен: динамическое создание карточек (макс. 6) с интервалом 2000мс.');
        console.log('Структура body полностью построена через createElement (без стартовых карточек).');

    </script>
</body>
</html>