3.html - master - AlexandrKel/Web_Kel

3.html
468 строк20 KB
AlexandrKel
Практическая 3
03 янв 2026, 19:53
03 янв 2026, 19:53c7a426b
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Регистрация авто для продажи</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: linear-gradient(135deg, #2c3e50, #4a6491);
            color: white;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        h1 {
            font-size: 2.2rem;
            margin-bottom: 10px;
        }

        .subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .form-container {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        }

        .form-section {
            margin-bottom: 30px;
            padding-bottom: 25px;
            border-bottom: 1px solid #eaeaea;
        }

        .form-section h2 {
            color: #2c3e50;
            margin-bottom: 20px;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
        }

        .form-section h2 i {
            margin-right: 10px;
            color: #3498db;
        }

        .form-row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10px;
        }

        .form-group {
            flex: 1 0 300px;
            padding: 0 10px;
            margin-bottom: 20px;
        }

        /* Стили для десктопной версии */
        label {
            display: block;
            font-weight: 600;
            margin-bottom: 8px;
            color: #444;
            font-size: 1rem;
        }

        input, select, textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 1rem;
            transition: border 0.3s, box-shadow 0.3s;
        }

        input:focus, select:focus, textarea:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }

        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 10px;
        }

        .checkbox-item {
            display: flex;
            align-items: center;
        }

        .checkbox-item input[type="checkbox"] {
            width: auto;
            margin-right: 8px;
        }

        .checkbox-item label {
            margin-bottom: 0;
            font-weight: normal;
        }

        .submit-btn {
            background: linear-gradient(to right, #3498db, #2c3e50);
            color: white;
            border: none;
            padding: 15px 30px;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            width: 100%;
            margin-top: 20px;
        }

        .submit-btn:hover {
            background: linear-gradient(to right, #2980b9, #1a252f);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        /* Мобильная версия */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            
            header {
                padding: 15px;
                margin-bottom: 20px;
            }
            
            h1 {
                font-size: 1.8rem;
            }
            
            .form-container {
                padding: 20px;
            }
            
            /* Скрываем label на мобильных */
            label {
                display: none;
            }
            
            /* Показываем placeholder как подпись */
            input::placeholder, textarea::placeholder {
                font-weight: 600;
                color: #444;
                opacity: 1;
            }
            
            select {
                /* Для select добавляем специальный стиль */
                background-color: #f9f9f9;
                color: #333;
            }
            
            /* Специальный псевдоэлемент для селекта на мобильных */
            .select-group::after {
                content: "Выберите марку";
                position: absolute;
                top: 12px;
                left: 15px;
                font-weight: 600;
                color: #444;
                pointer-events: none;
                z-index: 1;
            }
            
            .form-group {
                flex: 1 0 100%;
            }
            
            .checkbox-group {
                flex-direction: column;
            }
            
            .submit-btn {
                padding: 18px 30px;
                font-size: 1.2rem;
            }
        }

        /* Десктопный ховер для чекбоксов */
        @media (min-width: 769px) {
            .checkbox-item:hover {
                background-color: #f9f9f9;
                border-radius: 4px;
                padding: 5px;
            }
        }

        /* Иконки для заголовков */
        .icon {
            display: inline-block;
            width: 24px;
            height: 24px;
            background-size: contain;
            background-repeat: no-repeat;
            margin-right: 10px;
        }

        .icon-car {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233498db"><path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/></svg>');
        }

        .icon-docs {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233498db"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>');
        }

        .icon-features {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233498db"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
        }

        .icon-contact {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233498db"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
        }

        footer {
            text-align: center;
            margin-top: 30px;
            color: #7f8c8d;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Регистрация автомобиля для продажи</h1>
            <p class="subtitle">Заполните форму ниже, чтобы разместить объявление о продаже вашего автомобиля</p>
        </header>

        <div class="form-container">
            <form id="car-registration-form">
                <!-- Основная информация об автомобиле -->
                <div class="form-section">
                    <h2><i class="icon icon-car"></i> Основная информация об автомобиле</h2>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="car-brand">Марка автомобиля</label>
                            <select id="car-brand" name="car-brand" required>
                                <option value="" disabled selected>Выберите марку</option>
                                <option value="toyota">Toyota</option>
                                <option value="bmw">BMW</option>
                                <option value="audi">Audi</option>
                                <option value="mercedes">Mercedes-Benz</option>
                                <option value="honda">Honda</option>
                                <option value="volkswagen">Volkswagen</option>
                                <option value="hyundai">Hyundai</option>
                                <option value="other">Другая</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="car-model">Модель</label>
                            <input type="text" id="car-model" name="car-model" placeholder="Модель" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="car-year">Год выпуска</label>
                            <input type="number" id="car-year" name="car-year" min="1990" max="2024" placeholder="Год выпуска" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="car-mileage">Пробег (км)</label>
                            <input type="number" id="car-mileage" name="car-mileage" min="0" max="1000000" placeholder="Пробег (км)" required>
                        </div>
                    </div>
                </div>

                <!-- Технические характеристики -->
                <div class="form-section">
                    <h2><i class="icon icon-docs"></i> Технические характеристики</h2>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="car-engine">Объем двигателя (л)</label>
                            <input type="text" id="car-engine" name="car-engine" placeholder="Объем двигателя (л)" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="car-transmission">Трансмиссия</label>
                            <select id="car-transmission" name="car-transmission">
                                <option value="automatic">Автоматическая</option>
                                <option value="manual">Механическая</option>
                                <option value="robot">Роботизированная</option>
                                <option value="variator">Вариатор</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="car-fuel">Тип топлива</label>
                            <select id="car-fuel" name="car-fuel">
                                <option value="petrol">Бензин</option>
                                <option value="diesel">Дизель</option>
                                <option value="hybrid">Гибрид</option>
                                <option value="electric">Электрический</option>
                                <option value="gas">Газ</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="car-color">Цвет</label>
                            <input type="text" id="car-color" name="car-color" placeholder="Цвет" required>
                        </div>
                    </div>
                </div>

                <!-- Дополнительные опции -->
                <div class="form-section">
                    <h2><i class="icon icon-features"></i> Дополнительные опции</h2>
                    <div class="checkbox-group">
                        <div class="checkbox-item">
                            <input type="checkbox" id="option-climate" name="options[]" value="climate">
                            <label for="option-climate">Климат-контроль</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="option-leather" name="options[]" value="leather">
                            <label for="option-leather">Кожаный салон</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="option-navigation" name="options[]" value="navigation">
                            <label for="option-navigation">Навигационная система</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="option-parking" name="options[]" value="parking">
                            <label for="option-parking">Парктроник</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="option-camera" name="options[]" value="camera">
                            <label for="option-camera">Камера заднего вида</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="option-heated-seats" name="options[]" value="heated-seats">
                            <label for="option-heated-seats">Подогрев сидений</label>
                        </div>
                    </div>
                </div>

                <!-- Контактная информация -->
                <div class="form-section">
                    <h2><i class="icon icon-contact"></i> Контактная информация</h2>
                    <div class="form-row">
                        <div class="form-group">
                            <label for="seller-name">Имя продавца</label>
                            <input type="text" id="seller-name" name="seller-name" placeholder="Имя продавца" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="seller-phone">Телефон</label>
                            <input type="tel" id="seller-phone" name="seller-phone" placeholder="Телефон" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="seller-email">Email</label>
                            <input type="email" id="seller-email" name="seller-email" placeholder="Email" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="car-price">Цена (₽)</label>
                            <input type="number" id="car-price" name="car-price" min="0" step="1000" placeholder="Цена (₽)" required>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="car-description">Описание автомобиля</label>
                            <textarea id="car-description" name="car-description" rows="4" placeholder="Описание автомобиля (состояние, история обслуживания, особенности и т.д.)"></textarea>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="car-photos">Фотографии автомобиля</label>
                            <input type="file" id="car-photos" name="car-photos" accept="image/*" multiple>
                        </div>
                        
                        <div class="form-group">
                            <label for="availability-date">Дата просмотра</label>
                            <input type="date" id="availability-date" name="availability-date">
                        </div>
                    </div>
                </div>

                <button type="submit" class="submit-btn">Разместить объявление</button>
            </form>
        </div>

        
    </div>

    <script>
        document.getElementById('car-registration-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Получение данных из формы
            const formData = new FormData(this);
            const formObject = {};
            
            formData.forEach((value, key) => {
                if (formObject[key]) {
                    if (!Array.isArray(formObject[key])) {
                        formObject[key] = [formObject[key]];
                    }
                    formObject[key].push(value);
                } else {
                    formObject[key] = value;
                }
            });
            
            // В реальном приложении здесь бы был AJAX-запрос к серверу
            alert('Форма успешно отправлена! В реальном приложении данные бы отправились на сервер.');
            console.log('Данные формы:', formObject);
            
            // Сброс формы после успешной отправки
            this.reset();
        });
        
        // Адаптация placeholder для мобильных устройств
        function adaptPlaceholders() {
            const isMobile = window.innerWidth <= 768;
            const inputs = document.querySelectorAll('input, textarea, select');
            
            if (isMobile) {
                // На мобильных устройствах добавляем специальные placeholder для селектов
                document.querySelectorAll('select').forEach(select => {
                    if (!select.getAttribute('data-original-placeholder')) {
                        select.setAttribute('data-original-placeholder', select.options[0].text);
                    }
                });
            }
        }
        
        // Вызов при загрузке и изменении размера окна
        window.addEventListener('load', adaptPlaceholders);
        window.addEventListener('resize', adaptPlaceholders);
    </script>
</body>
</html>