Creating.html - master - quax/projLastW

Creating.html
781 строка28 KB
semkaeee
update Creating.html
03 сен 2025, 21:44
03 сен 2025, 21:44b022ccd
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Создать мероприятие - QuaxLife</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #2563eb;
            --primary-dark: #1d4ed8;
            --primary-light: #93c5fd;
            --secondary: #f59e0b;
            --text: #1f2937;
            --text-light: #6b7280;
            --bg: #f9fafb;
            --bg-card: #ffffff;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: var(--bg);
            color: var(--text);
            line-height: 1.6;
            padding-bottom: 2rem;
        }
        
        /* Навигация */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 5%;
            background-color: var(--bg-card);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        .logo {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--primary);
            display: flex;
            align-items: center;
        }
        
        .logo i {
            margin-right: 10px;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin: 0 1.2rem;
        }
        
        .nav-links a {
            color: var(--text);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
            position: relative;
        }
        
        .nav-links a:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background-color: var(--primary);
            transition: width 0.3s;
        }
        
        .nav-links a:hover:after {
            width: 100%;
        }
        
        .nav-links a:hover {
            color: var(--primary);
        }
        
        .auth-buttons {
            display: flex;
            gap: 1rem;
        }
        
        /* Кнопки */
        .btn {
            padding: 0.7rem 1.5rem;
            border-radius: 8px;
            border: none;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        
        .btn i {
            margin-right: 8px;
        }
        
        .btn-primary {
            background-color: var(--primary);
            color: white;
            box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
        }
        
        .btn-primary:hover {
            background-color: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(37, 99, 235, 0.3);
        }
        
        .btn-outline {
            background-color: transparent;
            color: var(--primary);
            border: 2px solid var(--primary);
        }
        
        .btn-outline:hover {
            background-color: rgba(37, 99, 235, 0.1);
        }
        
        .btn-secondary {
            background-color: var(--secondary);
            color: white;
            box-shadow: 0 4px 6px rgba(245, 158, 11, 0.2);
        }
        
        .btn-secondary:hover {
            background-color: #e58c08;
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(245, 158, 11, 0.3);
        }
        
        /* Контейнер формы */
        .form-container {
            max-width: 800px;
            margin: 2rem auto;
            padding: 0 5%;
        }
        
        .form-card {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 2.5rem;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            margin-top: 2rem;
        }
        
        .form-title {
            font-size: 2.2rem;
            text-align: center;
            margin-bottom: 2rem;
            color: var(--primary);
            position: relative;
        }
        
        .form-title:after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(to right, var(--primary), var(--primary-light));
            border-radius: 2px;
        }
        
        /* Форма */
        .form-group {
            margin-bottom: 1.5rem;
        }
        
        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 600;
            color: var(--text);
        }
        
        .form-input,
        .form-textarea,
        .form-select {
            width: 100%;
            padding: 1rem;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }
        
        .form-input:focus,
        .form-textarea:focus,
        .form-select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }
        
        .form-textarea {
            min-height: 120px;
            resize: vertical;
        }
        
        /* Загрузка файла */
        .file-upload {
            border: 2px dashed #d1d5db;
            border-radius: 8px;
            padding: 2rem;
            text-align: center;
            cursor: pointer;
            transition: border-color 0.3s;
            margin-bottom: 1rem;
        }
        
        .file-upload:hover {
            border-color: var(--primary);
        }
        
        .file-upload.dragover {
            border-color: var(--primary);
            background-color: rgba(37, 99, 235, 0.05);
        }
        
        .file-input {
            display: none;
        }
        
        .upload-icon {
            font-size: 3rem;
            color: var(--primary-light);
            margin-bottom: 1rem;
        }
        
        .image-preview {
            margin-top: 1rem;
            max-width: 100%;
            max-height: 300px;
            border-radius: 8px;
            overflow: hidden;
            display: none;
        }
        
        .image-preview img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }
        
        /* Теги */
        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        
        .tag {
            background-color: var(--primary-light);
            color: var(--primary-dark);
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .tag:hover {
            background-color: var(--primary);
            color: white;
        }
        
        .tag.selected {
            background-color: var(--primary);
            color: white;
        }
        
        .tag-remove {
            cursor: pointer;
            font-size: 1.2rem;
            line-height: 1;
        }
        
        /* Двойные поля */
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }
        
        /* Кнопка отправки */
        .submit-btn {
            width: 100%;
            padding: 1.2rem;
            font-size: 1.1rem;
            margin-top: 1rem;
        }
        
        /* Уведомления */
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 1rem 1.5rem;
            border-radius: 8px;
            color: white;
            font-weight: 600;
            z-index: 10000;
            transform: translateX(100%);
            transition: transform 0.3s;
        }
        
        .notification.success {
            background-color: var(--success);
        }
        
        .notification.error {
            background-color: var(--danger);
        }
        
        .notification.show {
            transform: translateX(0);
        }
        
        /* Адаптивность */
        @media (max-width: 768px) {
            .form-row {
                grid-template-columns: 1fr;
            }
            
            .form-card {
                padding: 1.5rem;
            }
            
            .form-title {
                font-size: 1.8rem;
            }
            
            .nav-links {
                display: none;
            }
            
            .auth-buttons {
                display: none;
            }
            
            .tags-container {
                justify-content: center;
            }
        }
        
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 1.5rem;
            color: var(--text);
            cursor: pointer;
        }
        
        @media (max-width: 768px) {
            .mobile-menu-btn {
                display: block;
            }
        }
    </style>
</head>
<body>
    <!-- Навигация -->
    <nav class="navbar">
        <div class="logo">
            <i class="fas fa-users"></i>
            <span>QuaxLife</span>
        </div>
        
        <ul class="nav-links">
            <li><a href="main.html">Главная</a></li>
            <li><a href="Mero2.html">Мероприятия</a></li>
            <li><a href="Calendar.html">Календарь</a></li>
            <li><a href="#sectionk">Контакты</a></li>
        </ul>
        
        <button class="mobile-menu-btn">
            <i class="fas fa-bars"></i>
        </button>
    </nav>

    <!-- Форма создания мероприятия -->
    <div class="form-container">
        <h1 class="form-title">Создать новое мероприятие</h1>
        
        <div class="form-card">
            <form id="createEventForm">
                <!-- Название мероприятия -->
                <div class="form-group">
                    <label class="form-label" for="eventTitle">Название мероприятия *</label>
                    <input type="text" id="eventTitle" class="form-input" placeholder="Введите название мероприятия" required>
                </div>
                
                <!-- Описание -->
                <div class="form-group">
                    <label class="form-label" for="eventDescription">Описание *</label>
                    <textarea id="eventDescription" class="form-textarea" placeholder="Опишите ваше мероприятие..." required></textarea>
                </div>
                
                <!-- Дата и время -->
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="eventDate">Дата *</label>
                        <input type="date" id="eventDate" class="form-input" required>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label" for="eventTime">Время *</label>
                        <input type="time" id="eventTime" class="form-input" required>
                    </div>
                </div>
                
                <!-- Место и длительность -->
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="eventLocation">Место проведения *</label>
                        <input type="text" id="eventLocation" class="form-input" placeholder="Где будет проходить мероприятие?" required>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label" for="eventDuration">Длительность (минуты)</label>
                        <input type="number" id="eventDuration" class="form-input" placeholder="120" min="1">
                    </div>
                </div>
                
                <!-- Категория и количество участников -->
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="eventCategory">Категория *</label>
                        <select id="eventCategory" class="form-select" required>
                            <option value="">Выберите категорию</option>
                            <option value="sport">Спорт</option>
                            <option value="education">Образование</option>
                            <option value="culture">Культура</option>
                            <option value="games">Игры</option>
                            <option value="social">Общение</option>
                            <option value="music">Музыка</option>
                            <option value="art">Искусство</option>
                            <option value="other">Другое</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label" for="eventMaxParticipants">Максимум участников</label>
                        <input type="number" id="eventMaxParticipants" class="form-input" placeholder="Оставьте пустым, если нет ограничений" min="1">
                    </div>
                </div>
                
                <!-- Теги -->
                <div class="form-group">
                    <label class="form-label">Выберите теги *</label>
                    <div class="tags-container" id="tagsContainer">
                        <!-- Теги будут добавлены через JavaScript -->
                    </div>
                    <small style="color: var(--text-light);">Выберите один или несколько тегов для вашего мероприятия</small>
                </div>
                
                <!-- Загрузка фото -->
                <div class="form-group">
                    <label class="form-label">Фотография мероприятия</label>
                    <div class="file-upload" id="fileUploadArea">
                        <div class="upload-icon">
                            <i class="fas fa-cloud-upload-alt"></i>
                        </div>
                        <p>Перетащите фото сюда или нажмите для выбора</p>
                        <p style="color: var(--text-light); font-size: 0.9rem; margin-top: 0.5rem;">
                            Максимальный размер: 5MB. Поддерживаемые форматы: JPG, PNG, WebP
                        </p>
                        <input type="file" id="eventImage" class="file-input" accept="image/*">
                    </div>
                    <div class="image-preview" id="imagePreview">
                        <img src="" alt="Предпросмотр">
                    </div>
                </div>
                
                <!-- Кнопка отправки -->
                <button type="submit" class="btn btn-primary submit-btn">
                    <i class="fas fa-plus"></i>Создать мероприятие
                </button>
            </form>
        </div>
    </div>

    <!-- Уведомление -->
    <div class="notification" id="notification"></div>

    <script>
        // Предопределенный список тегов
        const AVAILABLE_TAGS = [
            'Спорт', 'Общение', 'Музыка', 'Волонтерство', 
            'Искусство', 'Наука', 'Развлечения', 'Компьютерные игры', 'Другое'
        ];

        document.addEventListener('DOMContentLoaded', function() {
            // Мобильное меню
            const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
            const navLinks = document.querySelector('.nav-links');
            
            mobileMenuBtn.addEventListener('click', function() {
                navLinks.classList.toggle('active');
            });
            
            // Инициализация тегов
            initTags();
            
            // Загрузка и предпросмотр фото
            const fileUploadArea = document.getElementById('fileUploadArea');
            const fileInput = document.getElementById('eventImage');
            const imagePreview = document.getElementById('imagePreview');
            const previewImg = imagePreview.querySelector('img');
            
            fileUploadArea.addEventListener('click', function() {
                fileInput.click();
            });
            
            fileInput.addEventListener('change', function(e) {
                if (e.target.files.length > 0) {
                    const file = e.target.files[0];
                    previewImage(file);
                }
            });
            
            // Drag and drop
            fileUploadArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                fileUploadArea.classList.add('dragover');
            });
            
            fileUploadArea.addEventListener('dragleave', function() {
                fileUploadArea.classList.remove('dragover');
            });
            
            fileUploadArea.addEventListener('drop', function(e) {
                e.preventDefault();
                fileUploadArea.classList.remove('dragover');
                
                if (e.dataTransfer.files.length > 0) {
                    const file = e.dataTransfer.files[0];
                    if (file.type.startsWith('image/')) {
                        fileInput.files = e.dataTransfer.files;
                        previewImage(file);
                    }
                }
            });
            
            function previewImage(file) {
                if (file.size > 5 * 1024 * 1024) {
                    showNotification('Файл слишком большой. Максимальный размер: 5MB', 'error');
                    return;
                }
                
                const reader = new FileReader();
                reader.onload = function(e) {
                    // Создаем изображение для сжатия
                    const img = new Image();
                    img.onload = function() {
                        // Создаем canvas для сжатия
                        const canvas = document.createElement('canvas');
                        const ctx = canvas.getContext('2d');
                        
                        // Устанавливаем максимальные размеры
                        const MAX_WIDTH = 800;
                        const MAX_HEIGHT = 600;
                        
                        let width = img.width;
                        let height = img.height;
                        
                        // Изменяем размер, если нужно
                        if (width > height) {
                            if (width > MAX_WIDTH) {
                                height *= MAX_WIDTH / width;
                                width = MAX_WIDTH;
                            }
                        } else {
                            if (height > MAX_HEIGHT) {
                                width *= MAX_HEIGHT / height;
                                height = MAX_HEIGHT;
                            }
                        }
                        
                        canvas.width = width;
                        canvas.height = height;
                        
                        // Рисуем сжатое изображение
                        ctx.drawImage(img, 0, 0, width, height);
                        
                        // Получаем Data URL сжатого изображения
                        const dataUrl = canvas.toDataURL('image/jpeg', 0.7);
                        
                        // Устанавливаем сжатое изображение в предпросмотр
                        previewImg.src = dataUrl;
                        imagePreview.style.display = 'block';
                    };
                    img.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
            
            // Обработка формы
            const form = document.getElementById('createEventForm');

            form.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // Валидация
                if (!validateForm()) {
                    return;
                }
                
                // Получаем выбранные теги
                const selectedTags = getSelectedTags();
                
                // Сбор данных
                const formData = {
                    id: Date.now(), // Уникальный ID на основе времени
                    title: document.getElementById('eventTitle').value,
                    description: document.getElementById('eventDescription').value,
                    date: document.getElementById('eventDate').value,
                    time: document.getElementById('eventTime').value,
                    location: document.getElementById('eventLocation').value,
                    duration: document.getElementById('eventDuration').value || null,
                    category: document.getElementById('eventCategory').value,
                    maxParticipants: document.getElementById('eventMaxParticipants').value || null,
                    tags: selectedTags,
                    image: previewImg.src || null,
                    createdAt: new Date().toISOString(),
                    participants: 0 // Начальное количество участников
                };
                
                // Сохранение мероприятия
                saveEventToStorage(formData);
                
                // Показ уведомления об успехе
                showNotification('Мероприятие успешно создано!', 'success');
                
                // Перенаправление на страницу мероприятий через 1 секунду
                setTimeout(() => {
                    window.location.href = 'Mero2.html';
                }, 1000);
            });
            
            function validateForm() {
                const requiredFields = [
                    'eventTitle', 'eventDescription', 'eventDate', 
                    'eventTime', 'eventLocation', 'eventCategory'
                ];
                
                for (const fieldId of requiredFields) {
                    const field = document.getElementById(fieldId);
                    if (!field.value.trim()) {
                        showNotification(`Пожалуйста, заполните поле: ${field.previousElementSibling.textContent}`, 'error');
                        field.focus();
                        return false;
                    }
                }
                
                // Проверка тегов
                const selectedTags = getSelectedTags();
                if (selectedTags.length === 0) {
                    showNotification('Пожалуйста, выберите хотя бы один тег', 'error');
                    return false;
                }
                
                // Проверка даты (не раньше сегодняшней)
                const eventDate = new Date(document.getElementById('eventDate').value);
                const today = new Date();
                today.setHours(0, 0, 0, 0);
                
                if (eventDate < today) {
                    showNotification('Дата мероприятия не может быть в прошлом', 'error');
                    return false;
                }
                
                // Проверка на дубликаты (по названию и дате)
                const existingEvents = JSON.parse(localStorage.getItem('quaxlifeEvents')) || [];
                const isDuplicate = existingEvents.some(event => 
                    event.title === document.getElementById('eventTitle').value.trim() && 
                    event.date === document.getElementById('eventDate').value
                );

                if (isDuplicate) {
                    showNotification('Мероприятие с таким названием и датой уже существует', 'error');
                    return false;
                }
                
                return true;
            }

            // Функция для сохранения мероприятия в хранилище
            function saveEventToStorage(eventData) {
                // Получаем текущие мероприятия из localStorage
                const existingEvents = JSON.parse(localStorage.getItem('quaxlifeEvents')) || [];
                
                // Добавляем новое мероприятие
                existingEvents.push(eventData);
                
                // Сохраняем обновленный список обратно в localStorage
                localStorage.setItem('quaxlifeEvents', JSON.stringify(existingEvents));
                
                return existingEvents;
            }
            
            function showNotification(message, type) {
                const notification = document.getElementById('notification');
                notification.textContent = message;
                notification.className = `notification ${type} show`;
                
                setTimeout(() => {
                    notification.classList.remove('show');
                }, 3000);
            }
            
            // Установка минимальной даты (сегодня)
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('eventDate').min = today;
        });

        // Инициализация тегов
        function initTags() {
            const tagsContainer = document.getElementById('tagsContainer');
            
            AVAILABLE_TAGS.forEach(tag => {
                const tagElement = document.createElement('div');
                tagElement.className = 'tag';
                tagElement.textContent = tag;
                tagElement.dataset.tag = tag;
                
                tagElement.addEventListener('click', function() {
                    this.classList.toggle('selected');
                });
                
                tagsContainer.appendChild(tagElement);
            });
        }

        // Получение выбранных тегов
        function getSelectedTags() {
            const selectedTags = [];
            document.querySelectorAll('.tag.selected').forEach(tagElement => {
                selectedTags.push(tagElement.dataset.tag);
            });
            return selectedTags;
        }

        // Функция для перенаправления на страницу мероприятий
        function redirectToEventsPage() {
            window.location.href = 'Mero2.html';
        }
    </script>
</body>
</html>