Pastein: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Компьютер - просто о сложном</title> <style> * { margin: 0;

Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Компьютер - просто о сложном</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            background: #1e3c72;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }

        header {
            background: #2c3e50;
            color: white;
            text-align: center;
            padding: 20px;
        }

        header h1 {
            font-size: 1.8em;
        }

        /* Вкладки */
        .tabs {
            display: flex;
            background: #ecf0f1;
            flex-wrap: wrap;
        }

        .tab-btn {
            flex: 1;
            padding: 12px;
            background: none;
            border: none;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: 0.3s;
        }

        .tab-btn:hover {
            background: #bdc3c7;
        }

        .tab-btn.active {
            background: white;
            color: #3498db;
            border-bottom: 3px solid #3498db;
        }

        /* Содержимое */
        .tab-content {
            display: none;
            padding: 25px;
            animation: fade 0.3s;
        }

        @keyframes fade {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .tab-content.active {
            display: block;
        }

        /* Карточки */
        .card {
            background: #f8f9fa;
            padding: 15px;
            margin: 15px 0;
            border-left: 4px solid #3498db;
            border-radius: 8px;
        }

        .card h3 {
            margin-bottom: 8px;
            color: #2c3e50;
        }

        /* Блок с кодом */
        pre {
            background: #2d2d2d;
            color: #f8f8f2;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            margin: 15px 0;
        }

        ul {
            margin-left: 20px;
        }

        li {
            margin: 8px 0;
        }

        footer {
            background: #2c3e50;
            color: white;
            text-align: center;
            padding: 15px;
            font-size: 0.9em;
        }

        @media (max-width: 600px) {
            .tabs {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1> Всё о компьютере</h1>
            <p>Просто и понятно</p>
        </header>

        <div class="tabs">
            <button class="tab-btn active" onclick="openTab(event, 'info')"> Что это?</button>
            <button class="tab-btn" onclick="openTab(event, 'parts')"> Комплектующие</button>
            <button class="tab-btn" onclick="openTab(event, 'code')"> Код</button>
            <button class="tab-btn" onclick="openTab(event, 'tips')"> Советы</button>
        </div>

        <!-- Вкладка 1: Информация -->
        <div id="info" class="tab-content active">
            <h2>Что такое компьютер?</h2>
            <p>Компьютер — это устройство для обработки, хранения и передачи информации. Он состоит из железа и программного обеспечения.</p>
            
            <div class="card">
                <h3> Интересный факт</h3>
                <p>Первый компьютер (Z3, 1941 год) весил 1000 кг. Сегодня телефон в 1000 раз мощнее!</p>
            </div>
            
            <ul>
                <li><strong>Производительность</strong> — зависит от процессора и памяти</li>
                <li><strong>Скорость</strong> — чем новее компоненты, тем быстрее</li>
                <li><strong>Память</strong> — важна для хранения файлов</li>
            </ul>
        </div>

        <!-- Вкладка 2: Комплектующие -->
        <div id="parts" class="tab-content">
            <h2>Основные части ПК</h2>
            
            <div class="card">
                <h3> Процессор (CPU)</h3>
                <p>Мозг компьютера. Чем больше ядер и выше частота, тем лучше.</p>
            </div>
            
            <div class="card">
                <h3> Видеокарта (GPU)</h3>
                <p>Отвечает за графику. Важна для игр и работы с видео.</p>
            </div>
            
            <div class="card">
                <h3> Оперативная память (RAM)</h3>
                <p>Временное хранилище. 16-32 GB — хороший выбор для современных задач.</p>
            </div>
            
            <div class="card">
                <h3> Накопитель (SSD)</h3>
                <p>SSD в 10 раз быстрее HDD. Объём 500GB-1TB оптимален.</p>
            </div>
        </div>

        <!-- Вкладка 3: Код -->
        <div id="code" class="tab-content">
            <h2>Простой код для проверки ПК</h2>
            <p>Команда для Windows (PowerShell или CMD):</p>
            <pre>systeminfo | findstr /B /C:"OS Name" /C:"Total Physical Memory" /C:"Processor"</pre>
            
            <p>Или Python скрипт:</p>
            <pre>import platform
print(f"OS: {platform.system()} {platform.release()}")
print(f"PC Name: {platform.node()}")
print(f"Processor: {platform.processor()}")</pre>
            
            <div class="card">
                <h3> Как использовать?</h3>
                <p>Сохрани код в файл .py, установи Python и запусти двойным щелчком.</p>
            </div>
        </div>

        <!-- Вкладка 4: Советы -->
        <div id="tips" class="tab-content">
            <h2>Простые советы</h2>
            <ul>
                <li><strong> Чисти от пыли</strong> — раз в 6 месяцев открывай и пылесось</li>
                <li><strong> Обновляй драйверы</strong> — с сайта производителя</li>
                <li><strong> Очищай диск</strong> — встроенной утилитой Windows</li>
                <li><strong> Ставь антивирус</strong> — защита от вирусов</li>
                <li><strong> Не перегревай</strong> — оставь место для вентиляции</li>
            </ul>
            
            <div class="card">
                <h3> Полезные программы</h3>
                <p>• CCleaner — очистка<br>• HWMonitor — смотрим температуру<br>• CrystalDiskInfo — проверка диска</p>
            </div>
        </div>

        <footer>
            <p>Простой сайт о компьютерах | 2025</p>
        </footer>
    </div>

    <script>
        function openTab(event, tabName) {
            // Скрыть всё
            const contents = document.getElementsByClassName("tab-content");
            for (let i = 0; i < contents.length; i++) {
                contents[i].classList.remove("active");
            }
            
            // Убрать активные кнопки
            const btns = document.getElementsByClassName("tab-btn");
            for (let i = 0; i < btns.length; i++) {
                btns[i].classList.remove("active");
            }
            
            // Показать нужное
            document.getElementById(tabName).classList.add("active");
            event.currentTarget.classList.add("active");
        }
    </script>
</body>
</html>
Больше возможностей при регистрации:
