создай дизайн и анимации <!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>P2P Сеть на WebRTC с Внутренним Браузером</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #role-selection {
            margin-bottom: 20px;
        }
        .section {
            display: none;
        }
        .active {
            display: block;
        }
        /* Стиль для Хоста */
        #host-section, #client-section {
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 5px;
        }
        /* Стиль для Клиента */
        #browser-controls {
            margin-bottom: 10px;
        }
        #address-bar {
            width: 60%;
            padding: 5px;
        }
        button {
            padding: 5px 10px;
            margin-left: 5px;
        }
        #website-container {
            border: 1px solid #000;
            height: 400px;
            padding: 10px;
            overflow-y: auto;
            white-space: pre-wrap;
            background-color: #f9f9f9;
        }
        #history {
            margin-top: 10px;
            max-height: 150px;
            overflow-y: auto;
            border: 1px solid #ccc;
            padding: 5px;
        }
        #domain-list, #history-list {
            list-style-type: none;
            padding: 0;
        }
        .domain-item, .history-item {
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <h1>P2P Сеть на WebRTC с Внутренним Браузером</h1>

    <!-- Выбор роли -->
    <div id="role-selection">
        <label>
            <input type="radio" name="role" value="host" checked> Хост (A)
        </label>
        <label>
            <input type="radio" name="role" value="client"> Клиент (B)
        </label>
        <button id="switch-role">Переключить Роль</button>
    </div>

    <!-- Раздел для Хоста -->
    <div id="host-section" class="section active">
        <h2>Хост (A)</h2>
        <p>Ваш Peer ID: <span id="host-peer-id">Загрузка...</span></p>
        
        <div id="domain-mapping">
            <h3>Сопоставить Доменное Имя</h3>
            <input type="text" id="domain-name" placeholder="Например, 1.ru">
            <button id="map-domain">Сопоставить</button>
            <ul id="domain-list">
                <!-- Список доменов -->
            </ul>
        </div>

        <div id="send-website" style="margin-top:20px;">
            <h3>Содержимое Веб-сайта</h3>
            <textarea id="website-content" rows="10" cols="80">
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>1.ru</title>
</head>
<body>
    <h1>Добро пожаловать на 1.ru</h1>
    <p>Это пример P2P веб-сайта.</p>
</body>
</html>
            </textarea>
            <br>
            <button id="send-website-btn">Отправить Содержимое</button>
        </div>
    </div>

    <!-- Раздел для Клиента -->
    <div id="client-section" class="section">
        <h2>Клиент (B) с Внутренним Браузером</h2>
        
        <div id="connect-section">
            <label for="host-peer-id-input">Введите Peer ID хоста (A) или домен:</label>
            <input type="text" id="host-peer-id-input" placeholder="Peer ID A или домен (например, 1.ru)">
            <button id="connect-host">Подключиться</button>
        </div>

        <div id="browser-controls">
            <button id="back-button">Назад</button>
            <button id="forward-button">Вперёд</button>
            <button id="refresh-button">Обновить</button>
            <input type="text" id="address-bar" placeholder="Введите домен (например, 1.ru)">
            <button id="go-button">Перейти</button>
        </div>

        <div id="website-container">
            <p>Содержимое веб-сайта будет отображено здесь.</p>
        </div>

        <div id="history">
            <h3>История посещений:</h3>
            <ul id="history-list">
                <!-- Список посещенных доменов -->
            </ul>
        </div>
    </div>

    <script src="https://unpkg.com/peerjs@1.4.7/dist/peerjs.min.js"></script>
    <script>
        // Инициализация PeerJS
        const peer = new Peer();

        // Общие переменные
        let role = 'host'; // начальная роль
        const domainMap = {}; // Для хоста: домен -> Peer ID
        let navigationHistory = {
            backStack: [],
            forwardStack: []
        };
        let currentDomain = null;

        // Элементы интерфейса
        const roleSelection = document.getElementsByName('role');
        const switchRoleBtn = document.getElementById('switch-role');
        const hostSection = document.getElementById('host-section');
        const clientSection = document.getElementById('client-section');

        const hostPeerIdSpan = document.getElementById('host-peer-id');
        const mapDomainBtn = document.getElementById('map-domain');
        const domainNameInput = document.getElementById('domain-name');
        const domainList = document.getElementById('domain-list');
        const sendWebsiteBtn = document.getElementById('send-website-btn');
        const websiteContentTextarea = document.getElementById('website-content');

        const connectHostBtn = document.getElementById('connect-host');
        const hostPeerIdInput = document.getElementById('host-peer-id-input');

        const backBtn = document.getElementById('back-button');
        const forwardBtn = document.getElementById('forward-button');
        const refreshBtn = document.getElementById('refresh-button');
        const goBtn = document.getElementById('go-button');
        const addressBar = document.getElementById('address-bar');
        const websiteContainer = document.getElementById('website-container');
        const historyList = document.getElementById('history-list');

        // Переключение ролей
        switchRoleBtn.addEventListener('click', () => {
            role = role === 'host' ? 'client' : 'host';
            if (role === 'host') {
                hostSection.classList.add('active');
                clientSection.classList.remove('active');
            } else {
                clientSection.classList.add('active');
                hostSection.classList.remove('active');
            }
        });

        // Получение Peer ID после открытия соединения
        peer.on('open', id => {
            if (role === 'host') {
                hostPeerIdSpan.textContent = id;
            }
            console.log('Ваш Peer ID: ' + id);
        });

        // Функции для Хоста
        function handleHostConnections(conn) {
            console.log('Клиент подключен: ' + conn.peer);
            conn.on('data', data => {
                console.log('Получены данные от клиента:', data);
                if (data.type === 'request' && data.domain) {
                    const targetId = domainMap[data.domain];
                    if (targetId && targetId === peer.id) {
                        // Отправляем содержимое сайта
                        const content = websiteContentTextarea.value;
                        conn.send({ type: 'website', content: content });
                        console.log(`Содержимое сайта для домена ${data.domain} отправлено клиенту.`);
                    } else {
                        conn.send({ type: 'error', message: 'Домен не найден или не сопоставлен.' });
                    }
                }
            });
        }

        // Обработка входящих соединений
        peer.on('connection', conn => {
            if (role === 'host') {
                handleHostConnections(conn);
            } else {
                // Клиенту не нужно обрабатывать входящие соединения в этой реализации
                console.log('Получено соединение в режиме Клиента, игнорируем.');
            }
        });

        // Сопоставление доменного имени с Peer ID (Хост)
        mapDomainBtn.addEventListener('click', () => {
            const domain = domainNameInput.value.trim();
            if (domain === "") {
                alert('Пожалуйста, введите доменное имя.');
                return;
            }
            domainMap[domain] = peer.id;
            updateDomainList();
            domainNameInput.value = '';
            alert(`Домен ${domain} сопоставлен с Peer ID ${peer.id}`);
        });

        function updateDomainList() {
            domainList.innerHTML = '';
            for (const [domain, id] of Object.entries(domainMap)) {
                const li = document.createElement('li');
                li.className = 'domain-item';
                li.textContent = `${domain} → ${id}`;
                domainList.appendChild(li);
            }
        }

        // Отправка содержимого сайта клиенту по Peer ID (Хост)
        sendWebsiteBtn.addEventListener('click', () => {
            const content = websiteContentTextarea.value;
            const targetId = prompt('Введите Peer ID клиента (B):');
            if (targetId) {
                const conn = peer.connect(targetId);
                conn.on('open', () => {
                    conn.send({ type: 'website', content: content });
                    console.log('Содержимое сайта отправлено клиенту');
                });

                conn.on('error', err => {
                    console.error('Ошибка соединения:', err);
                    alert('Не удалось подключиться к клиенту.');
                });
            }
        });

        // Функции для Клиента
        function handleClientConnection(conn) {
            conn.on('data', data => {
                if (data.type === 'website') {
                    console.log('Получено содержимое сайта');
                    displayWebsiteContent(data.content);
                } else if (data.type === 'error') {
                    alert(`Ошибка: ${data.message}`);
                }
            });
        }

        // Подключение к Хосту (Клиент)
        connectHostBtn.addEventListener('click', () => {
            const input = hostPeerIdInput.value.trim();
            if (input === "") {
                alert('Пожалуйста, введите Peer ID или домен хоста.');
                return;
            }

            loadDomain(input);
        });

        // Отображение содержимого сайта
        function displayWebsiteContent(content) {
            websiteContainer.innerHTML = content;
            addToHistory(currentDomain);
        }

        // Навигационные кнопки (Клиент)
        backBtn.addEventListener('click', () => {
            if (navigationHistory.backStack.length > 1) {
                const current = navigationHistory.backStack.pop();
                navigationHistory.forwardStack.push(current);
                const previous = navigationHistory.backStack[navigationHistory.backStack.length - 1];
                loadDomain(previous, false);
            }
        });

        forwardBtn.addEventListener('click', () => {
            if (navigationHistory.forwardStack.length > 0) {
                const next = navigationHistory.forwardStack.pop();
                navigationHistory.backStack.push(next);
                loadDomain(next, false);
            }
        });

        refreshBtn.addEventListener('click', () => {
            if (currentDomain) {
                loadDomain(currentDomain, false);
            }
        });

        // Кнопка "Перейти" (Клиент)
        goBtn.addEventListener('click', () => {
            const domain = addressBar.value.trim();
            if (domain === "") {
                alert('Пожалуйста, введите доменное имя.');
                return;
            }
            loadDomain(domain);
        });

        // Загрузка домена (Клиент)
        function loadDomain(domain, addHistory = true) {
            // Если введен домен, получаем Peer ID из сопоставления
            let targetId = domain;
            if (domain.includes('.')) { // простая проверка наличия доменной точки
                // В реальной реализации здесь должен быть механизм разрешения домена в Peer ID
                // Для этой демонстрации предполагаем, что пользователь ввел Peer ID, связанный с доменом
                targetId = domainMap[domain] || prompt(`Не удалось найти Peer ID для домена "${domain}". Введите Peer ID вручную:`);
                if (!targetId) {
                    alert('Peer ID не был введен.');
                    return;
                }
            }

            const conn = peer.connect(targetId);
            conn.on('open', () => {
                console.log(`Подключение к хосту для домена: ${domain}`);
                conn.send({ type: 'request', domain: domain });
            });

            conn.on('data', data => {
                if (data.type === 'website') {
                    console.log(`Получено содержимое сайта для домена: ${domain}`);
                    displayWebsiteContent(data.content);
                    currentDomain = domain;
                } else if (data.type === 'error') {
                    alert(`Ошибка: ${data.message}`);
                }
            });

            conn.on('error', err => {
                console.error('Ошибка соединения:', err);
                alert('Не удалось подключиться к хосту.');
            });

            conn.on('close', () => {
                console.log('Соединение закрыто');
            });

            if (addHistory && domain !== currentDomain) {
                addToHistory(domain);
            }

            // Обновить адресную строку
            addressBar.value = domain;
        }

        // История посещений (Клиент)
        function addToHistory(domain) {
            navigationHistory.backStack.push(domain);
            navigationHistory.forwardStack = []; // Очистить вперед
            const li = document.createElement('li');
            li.className = 'history-item';
            li.textContent = domain;
            historyList.appendChild(li);
        }

        // Прослушивание изменений роли для обновления интерфейса Peer ID (Хост)
        peer.on('open', id => {
            if (role === 'host') {
                hostPeerIdSpan.textContent = id;
            }
        });

        // Дополнительные функции и улучшения можно добавить здесь
    </script>
</body>
</html>