Create.html - master - Oleg228/fgy

Create.html
198 строк6 KB
Oleg228
create: Create.html
28 апр 2026, 03:39
28 апр 2026, 03:39a63ae32
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Добавить мероприятие</title>
     <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 600px;
        margin: 40px auto;
        padding: 20px;
        background-color: #f9f9f9;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
      }
      h1 {
        text-align: center;
        margin-bottom: 20px;
      }
      form label {
        display: block;
        margin-top: 10px;
        font-weight: bold;
      }
      form input, form textarea, form select {
        width: 100%;
        padding: 8px 10px;
        margin-top: 6px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
      }
      button {
        margin-top: 20px;
        width: 100%;
        padding: 10px;
        background: #0078D7;
        color: white;
        font-size: 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
      button:hover {
        background: #005a9e;
      }
      .message {
        margin-top: 15px;
        padding: 10px;
        border-radius: 4px;
        text-align: center;
      }
      .success {
        background-color: #d4edda; 
        color: #155724;
      }
      .error {
        background-color: #f8d7da; 
        color: #721c24;
      }
    </style>
</head>
<body>

    
    <a href="navigation.html">
        <button style="padding: 8px 12px; background: #ccc; border: none; border-radius: 4px; cursor: pointer;">
            ← Назад в меню
        </button>
    </a>

    <h1>Добавить мероприятие</h1>

    <form id="eventForm" enctype="multipart/form-data">
        <label for="title">Название мероприятия</label>
        <input type="text" id="title" name="title" />

        <label for="event_date">Дата мероприятия</label>
        <input type="date" id="event_date" name="event_date" />

        <label for="start_time">Время начала</label>
        <input type="time" id="start_time" name="start_time" />

        <label for="duration">Продолжительность (минуты)</label>
        <input type="number" id="duration" name="duration" min="1" />

        <label for="location_type">Тип места проведения</label>
        <select id="location_type" name="location_type">
          <option value="">Выберите вариант...</option>
          <option value="online">Онлайн</option>
          <option value="offline">Офлайн</option>
        </select>

        <label for="location_detail">Ссылка или адрес проведения</label>
        <input type="text" id="location_detail" name="location_detail" />

        <label for="description">Описание</label>
        <textarea id="description" name="description" rows="4"></textarea>

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

        <div id="message" style="margin-top: 10px;"></div>
    </form>

    <script>
    const form = document.getElementById('eventForm');
    const messageDiv = document.getElementById('message');

    form.addEventListener('submit', function(event) {
      event.preventDefault(); 

      
      messageDiv.textContent = '';
      messageDiv.style.color = 'red';

      
      const title = form.title.value.trim();
      const eventDate = form.event_date.value.trim();
      const startTime = form.start_time.value.trim();
      const duration = form.duration.value.trim();
      const locationType = form.location_type.value;
      const locationDetail = form.location_detail.value.trim();
      const description = form.description.value.trim();

      
      const formData = new FormData();
      
      if (title === '') {
          messageDiv.textContent = 'Ошибка: Поле "Название мероприятия" не должно быть пустым.';
          return; 
      } else {
          formData.append('title', title);
      }
      
      if (eventDate === '') {
          messageDiv.textContent = 'Ошибка: Поле "Дата мероприятия" не должно быть пустым.';
          return;
      } else {
          formData.append('event_date', eventDate);
      }
      
      if (startTime === '') {
          messageDiv.textContent = 'Ошибка: Поле "Время начала" не должно быть пустым.';
          return;
      } else {
          formData.append('start_time', startTime);
      }
      
      if (duration === '') {
          messageDiv.textContent = 'Ошибка: Поле "Продолжительность" не должно быть пустым.';
          return;
      } else {
          formData.append('duration', duration);
      }
      
      if (locationType === '') {
          messageDiv.textContent = 'Ошибка: Необходимо выбрать "Тип места проведения".';
          return;
      } else {
          formData.append('location_type', locationType);
      }
      
      if (locationDetail === '') {
          messageDiv.textContent = 'Ошибка: Поле "Место проведения" не должно быть пустым.';
          return;
      } else {
          formData.append('location_detail', locationDetail);
      }
      
      if (description === '') {
          messageDiv.textContent = 'Ошибка: Поле "Описание" не должно быть пустым.';
          return;
      } else {
          formData.append('description', description);
      }
      
      fetch('http://localhost:5678/webhook/9f1f9c4e-db38-44f1-ac14-7eea76c314c1', {
          method: 'POST',
          body: formData
      })
      .then(response => {
          if (response.ok) {
              messageDiv.textContent = 'Мероприятие успешно отправлено!';
              messageDiv.style.color = 'green';
              form.reset(); 
          } else {
              throw new Error('Ошибка сервера');
          }
      })
      .catch(error => {
          messageDiv.textContent = 'Ошибка отправки данных: ' + error.message;
      });
    });
    </script>

</body>
</html>