Не подключаеться  исправь ошибку <!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>P2P Сеть с PeerJS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f2f5;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 800px;
            margin: auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1, h2 {
            text-align: center;
            color: #333;
        }
        .section {
            margin-bottom: 30px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            color: #555;
        }
        input[type="text"], textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: vertical;
            font-family: monospace;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        #siteFrame {
            width: 100%;
            height: 500px;
            border: none;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .status {
            text-align: center;
            margin-bottom: 15px;
            padding: 10px;
            border-radius: 4px;
        }
        .info {
            background-color: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .flex {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>P2P Сеть с PeerJS</h1>
        
        <!-- Раздел для подключений -->
        <div class="section">
            <h2>Подключение</h2>
            <div class="flex">
                <div style="flex:1;">
                    <label for="myId">Ваш ID:</label>
                    <input type="text" id="myId" readonly>
                </div>
                <div style="flex:1;">
                    <label for="connectId">ID для подключения:</label>
                    <input type="text" id="connectId" placeholder="Введите ID получателя">
                </div>
            </div>
            <button id="connectBtn">Подключиться</button>
            <div id="connectionStatus" class="status info">Статус соединения: Ожидание действий.</div>
        </div>
        
        <!-- Раздел для загрузки сайта -->
        <div class="section">
            <h2>Загрузка Сайта</h2>
            <label for="domainInput">Введите домен (например, 100.RR):</label>
            <input type="text" id="domainInput" placeholder="100.RR">
            <button id="loadSiteBtn">Загрузить сайт</button>
            <div id="loadStatus" class="status"></div>
        </div>
        
        <!-- Раздел для просмотра сайта -->
        <div class="section">
            <h2>Просмотр Сайта</h2>
            <iframe id="siteFrame" src=""></iframe>
        </div>
    </div>

    <!-- Подключение PeerJS через CDN -->
    <script src="https://unpkg.com/peerjs@1.4.7/dist/peerjs.min.js"></script>
    <script>
        // Инициализация PeerJS
        const peer = new Peer();

        const myIdInput = document.getElementById('myId');
        const connectIdInput = document.getElementById('connectId');
        const connectBtn = document.getElementById('connectBtn');
        const connectionStatus = document.getElementById('connectionStatus');
        const loadSiteBtn = document.getElementById('loadSiteBtn');
        const domainInput = document.getElementById('domainInput');
        const siteFrame = document.getElementById('siteFrame');
        const loadStatus = document.getElementById('loadStatus');

        let conn;

        // Обработка получения своего ID
        peer.on('open', id => {
            myIdInput.value = id;
        });

        // Обработка входящих подключений
        peer.on('connection', connection => {
            if (conn) {
                connection.close();
                return;
            }
            conn = connection;
            setupConnection();
        });

        // Кнопка "Подключиться"
        connectBtn.addEventListener('click', () => {
            const id = connectIdInput.value.trim();
            if (id === '') {
                alert('Введите действительный ID для подключения.');
                return;
            }
            conn = peer.connect(id);
            setupConnection();
        });

        function setupConnection() {
            conn.on('open', () => {
                connectionStatus.textContent = 'Соединение установлено!';
                connectionStatus.classList.remove('info', 'error');
                connectionStatus.classList.add('success');
            });

            conn.on('data', data => {
                if (data.type === 'siteContent') {
                    siteFrame.srcdoc = data.content;
                    loadStatus.textContent = `Сайт "${data.domain}" загружен.`;
                    loadStatus.className = 'status success';
                }
            });

            conn.on('close', () => {
                connectionStatus.textContent = 'Соединение закрыто.';
                connectionStatus.classList.remove('success');
                connectionStatus.classList.add('error');
                conn = null;
            });

            conn.on('error', err => {
                console.error(err);
                connectionStatus.textContent = 'Произошла ошибка при соединении.';
                connectionStatus.classList.remove('success');
                connectionStatus.classList.add('error');
            });
        }

        // Объект для хранения содержимого сайтов по доменным именам
        const sites = {
            '100.RR': `
                <!DOCTYPE html>
                <html lang="ru">
                <head>
                    <meta charset="UTF-8">
                    <title>Сайт 100.RR</title>
                    <style>
                        body { font-family: Arial, sans-serif; background-color: #e3f2fd; text-align: center; padding-top: 50px; }
                        h1 { color: #0d47a1; }
                        p { color: #1565c0; }
                    </style>
                </head>
                <body>
                    <h1>Добро пожаловать на сайт 100.RR!</h1>
                    <p>Это сайт, хостящийся внутри P2P-сети.</p>
                </body>
                </html>
            `,
            '200.RR': `
                <!DOCTYPE html>
                <html lang="ru">
                <head>
                    <meta charset="UTF-8">
                    <title>Сайт 200.RR</title>
                    <style>
                        body { font-family: Arial, sans-serif; background-color: #fff3e0; text-align: center; padding-top: 50px; }
                        h1 { color: #e65100; }
                        p { color: #ef6c00; }
                    </style>
                </head>
                <body>
                    <h1>Добро пожаловать на сайт 200.RR!</h1>
                    <p>Ещё один сайт внутри P2P-сети.</p>
                </body>
                </html>
            `,
            // Добавьте другие домены и их содержимое по необходимости
        };

        // Кнопка "Загрузить сайт"
        loadSiteBtn.addEventListener('click', () => {
            const domain = domainInput.value.trim();
            if (domain === '') {
                alert('Введите доменное имя.');
                return;
            }
            const content = sites[domain];
            if (!content) {
                alert('Сайт не найден в P2P-сети.');
                return;
            }
            if (conn && conn.open) {
                conn.send({ type: 'siteContent', domain, content });
                siteFrame.srcdoc = content;
                loadStatus.textContent = `Сайт "${domain}" загружен.`;
                loadStatus.className = 'status success';
            } else {
                alert('Нет активного соединения. Подключитесь к другому пользователю.');
            }
        });
    </script>
</body>
</html>