---

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Форма обратной связи</title>
    
    <style>

        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            justify-content: center;
            padding: 50px;
            margin: 0;
        }
        .form-container {
            background: #ffffff;
            padding: 30px;
            border-radius: 8px; 
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            border: 2px solid #4CAF50;
            width: 100%;
            max-width: 500px;
        }
        h2 { text-align: center; color: #333; margin-top: 0; }
        h3 { color: #555; font-size: 16px; border-bottom: 1px solid #eee; padding-bottom: 5px; margin-bottom: 10px; }
        .form-group { margin-bottom: 20px; }
        label { display: block; margin-bottom: 8px; color: #444; cursor: pointer; font-size: 14px; }
        .inline-label { display: inline-block; margin-right: 15px; }
        
        input[type="text"], input[type="email"] {
            width: 100%; padding: 10px; border: 1px solid #ccc;
            border-radius: 4px; box-sizing: border-box; font-size: 14px;
        }
        input[type="text"]:focus, input[type="email"]:focus { border-color: #4CAF50; outline: none; }
        input[type="radio"], input[type="checkbox"] { margin-right: 8px; cursor: pointer; }
        
        .consent-group { margin-top: 25px; padding-top: 15px; border-top: 1px dashed #ccc; }
        .consent-label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #666; }
        .consent-label input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
        
        button {
            width: 100%; background-color: #4CAF50; color: white; padding: 12px;
            border: none; border-radius: 4px; font-size: 16px; cursor: pointer;
            transition: background 0.3s; margin-top: 10px;
        }
        button:hover { background-color: #45a049; }
    </style>
</head>
<body>

<div class="form-container">
    <h2>Форма обратной связи</h2>
    
    <form action="processor.php" method="POST" id="feedbackForm">
        

        <div class="form-group">
            <label for="name">Ваше имя:</label>
            <input type="text" id="name" name="name" required placeholder="Только буквы">
        </div>


        <div class="form-group">
            <label for="email">Ваша почта:</label>
            <input type="email" id="email" name="email" required placeholder="example@mail.ru">
        </div>

        <div class="form-group">
            <p>Ваш пол:</p>
            <label class="inline-label">
                <input type="radio" name="gender" value="female" required> Женский
            </label>
            <label class="inline-label">
                <input type="radio" name="gender" value="male"> Мужской
            </label>
        </div>


        <div class="form-group">
            <h3>Что не понравилось:</h3>
            <label><input type="checkbox" name="disliked[]" value="Дизайн"> Дизайн и визуальное оформление</label>
            <label><input type="checkbox" name="disliked[]" value="Функционал"> Функционал</label>
            <label><input type="checkbox" name="disliked[]" value="Структура и читаемость"> Структура навигации и читаемость текста</label>
            <label><input type="checkbox" name="disliked[]" value="Интерактив"> Вовлечение пользователя</label>
            <label><input type="checkbox" name="disliked[]" value="Интуитивность"> Интуитивность использования</label>
            <label><input type="checkbox" name="disliked[]" value="Плохо"> Ресурс требует глобальной доработки</label>
        </div>


        <div class="form-group">
            <h3>Что понравилось:</h3>
            <label><input type="checkbox" name="liked[]" value="Дизайн"> Дизайн и визуальное оформление</label>
            <label><input type="checkbox" name="liked[]" value="Функционал"> Функционал</label>
            <label><input type="checkbox" name="liked[]" value="Структура и читаемость"> Структура навигации и читаемость текста</label>
            <label><input type="checkbox" name="liked[]" value="Интерактив"> Вовлечение пользователя</label>
            <label><input type="checkbox" name="liked[]" value="Интуитивность"> Интуитивность использования</label>
            <label><input type="checkbox" name="liked[]" value="Плохо"> Ресурс требует глобальной доработки</label>
        </div>


        <div class="form-group consent-group">
            <label class="consent-label">
                <input type="checkbox" name="consent" value="yes" required>
                Я согласен на обработку моих персональных данных
            </label>
        </div>

        <button type="submit">Отправить</button>
    </form>
</div>


<script>
    document.getElementById('feedbackForm').addEventListener('submit', function(e) {
        var dislikedChecked = document.querySelectorAll('input[name="disliked[]"]:checked').length;
        if (dislikedChecked === 0) {
            alert('Пожалуйста, отметьте хотя бы один пункт в разделе "Что не понравилось".');
            e.preventDefault();
            return false;
        }
        var likedChecked = document.querySelectorAll('input[name="liked[]"]:checked').length;
        if (likedChecked === 0) {
            alert('Пожалуйста, отметьте хотя бы один пункт в разделе "Что понравилось".');
            e.preventDefault();
            return false;
        }
    });
</script>

</body>
</html>