---

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CaseFilter</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
    <div>
        <h1>Case<span>Filter</span></h1>
        <p>Умный фильтр компьютерных корпусов</p>
    </div>
<div class="header-stats">
    <div>
        <strong id="total-count">0</strong>
        <span>всего</span>
    </div>
    <div>
        <strong id="passed-count">0</strong>
        <span>подходят</span>
    </div>
    <div>
        <strong id="failed-count">0</strong>
        <span>отсеяно</span>
    </div>
</div>
</header>
<main class="container">
<!-- ДОБАВЛЕНИЕ КОРПУСА -->
<section class="card add-section">
    <div class="section-title">
        <div>
            <h2>Добавить корпус</h2>
            <p>Вставь характеристики прямо из магазина</p>
        </div>
    </div>
    <div class="form-grid">
        <div class="field">
            <label>Название корпуса</label>
            <input
                id="case-name"
                type="text"
                placeholder="Например: Formula Air Power G9 Duo PA White"
            >
        </div>
        <div class="field">
            <label>Магазин</label>
            <input
                id="case-store"
                type="text"
                placeholder="DNS / Ozon / Regard / Яндекс Маркет"
            >
        </div>
    </div>
    <div class="field">
        <label>Характеристики</label>
        <textarea
            id="case-specs"
            placeholder="Вставь сюда весь текст характеристик корпуса...

Например:

Форм-фактор: ATX
Максимальная длина видеокарты: 420 мм
Поддержка радиаторов: верх 360 мм
Количество отсеков 3.5: 1
Количество вентиляторов: 4
Подсветка: ARGB
Максимальная длина блока питания: 230 мм
Расположение БП: нижнее
Рейтинг: 4.9
Цена: 7760 ₽”
>

    </div>
    <div class="actions">
        <button
            class="btn primary"
            id="add-case"
        >
            + Добавить корпус
        </button>
        <button
            class="btn secondary"
            id="clear-form"
        >
            Очистить
        </button>
    </div>
</section>
<!-- ТРЕБОВАНИЯ -->
<section class="card">
    <div class="section-title">
        <div>
            <h2>Требования</h2>
            <p>
                Корпус должен соответствовать этим условиям
            </p>
        </div>
    </div>
    <div class="requirements">
        <label class="requirement">
            <span>
                Цена максимум
            </span>
            <div class="requirement-input">
                <input
                    id="req-price"
                    type="number"
                    value="10000"
                >
                <span>₽</span>
            </div>
        </label>
        <label class="requirement">
            <span>
                GPU минимум
            </span>
            <div class="requirement-input">
                <input
                    id="req-gpu"
                    type="number"
                    value="360"
                >
                <span>мм</span>
            </div>
        </label>
        <label class="requirement">
            <span>
                HDD 3.5 минимум
            </span>
            <div class="requirement-input">
                <input
                    id="req-hdd"
                    type="number"
                    value="1"
                >
                <span>шт.</span>
            </div>
        </label>
        <label class="requirement">
            <span>
                Рейтинг минимум
            </span>
            <div class="requirement-input">
                <input
                    id="req-rating"
                    type="number"
                    step="0.1"
                    value="4.5"
                >
                <span>/ 5</span>
            </div>
        </label>
        <label class="check-requirement">
            <input
                id="req-atx"
                type="checkbox"
                checked
            >
            <span>
                ATX
            </span>
        </label>
        <label class="check-requirement">
            <input
                id="req-top360"
                type="checkbox"
                checked
            >
            <span>
                360 мм сверху
            </span>
        </label>
        <label class="check-requirement">
            <input
                id="req-argb"
                type="checkbox"
                checked
            >
            <span>
                ARGB / RGB
            </span>
        </label>
        <label class="check-requirement">
            <input
                id="req-psu"
                type="checkbox"
                checked
            >
            <span>
                Нижний / скрытый БП
            </span>
        </label>
    </div>
    <button
        class="btn secondary apply-btn"
        id="apply-requirements"
    >
        Применить требования
    </button>
</section>