Загрузка данных

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Компьютер</title>
    <style>
        body { font-family: Arial; background: #f0f0f0; padding: 20px; }
        .box { max-width: 800px; margin: auto; background: white; border-radius: 10px; overflow: hidden; }
        .tabs { display: flex; background: #333; }
        .tab-btn { flex: 1; padding: 12px; background: #555; color: white; border: none; cursor: pointer; }
        .tab-btn.active { background: #007bff; }
        .tab-content { display: none; padding: 20px; }
        .tab-content.active { display: block; }
        .card { background: #f9f9f9; padding: 12px; margin: 10px 0; border-left: 4px solid #007bff; }
        pre { background: #2d2d2d; color: #fff; padding: 10px; border-radius: 5px; overflow-x: auto; }
    </style>
</head>
<body>
<div class="box">
    <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>
    </div>

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

    <div id="parts" class="tab-content">
        <h2>Основные части</h2>
        <div class="card"><b> Процессор</b> — мозг компьютера</div>
        <div class="card"><b> Видеокарта</b> — отвечает за графику</div>
        <div class="card"><b>
Оперативная память</b> — временная память</div>
        <div class="card"><b> SSD диск</b> — хранит файлы</div>
    </div>

    <div id="code" class="tab-content">
        <h2>Узнать характеристики ПК</h2>
        <p>Команда для Windows (CMD или PowerShell):</p>
        <pre>systeminfo | findstr "OS Name Processor Total Physical Memory"</pre>
        <p>Или Python скрипт:</p>
        <pre>import platform
print(platform.system(), platform.release(), platform.processor())</pre>
    </div>
</div>

<script>
function openTab(event, tabName) {
    let tabs = document.getElementsByClassName("tab-content");
    for (let i = 0; i < tabs.length; i++) tabs[i].classList.remove("active");
    
    let 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>