<!DOCTYPE html>

<html lang="ru">

<head>

    <meta charset="UTF-8">

    <title>Волшебная Мастерская | Опросник</title>

    <style>

        body { font-family: sans-serif; max-width: 650px; margin: 20px auto; padding: 25px; border: 1px solid #e0e0e0; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.05); }

        h1 { color: #5c6bc0; text-align: center; }

        label { display: block; margin-top: 15px; font-weight: bold; color: #333; }

        input[type="text"], input[type="number"], input[type="email"], select, textarea {

            width: 100%; padding: 10px; margin-top: 8px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;

        }

        button {

            background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 5px; cursor: pointer;

            margin-top: 25px; width: 100%; font-size: 1.1em;

        }

        button:hover { background-color: #45a049; }

    </style>

</head>

<body>

    <h1>Волшебная Мастерская: Создание Истории</h1>

 

    <form action="https://dobro7.app.n8n.cloud/webhook-test/13bc2fe0-3b88-4918-9538-aaba42c7ba65" method="POST" enctype="multipart/form-data">

 

        <label for="child_name">1. Как зовут Главного Героя?</label>

        <input type="text" id="child_name" name="child_name" required>

 

        <label for="age">2. Сколько лет Вашему Герою?</label>

        <input type="number" id="age" name="age" min="1" max="12" required>

 

        <label for="friend_name">3. Как зовут друга/подругу, который будет в Вашем приключении? (Необязательно)</label>

        <input type="text" id="friend_name" name="friend_name">

 

        <label for="problem">4. Какую проблему Вы бы сейчас хотели решить для ребенка?</label>

        <textarea id="problem" name="problem" rows="3" placeholder="Например: страх темноты, буллинг со стороны одноклассников" required></textarea>

       

        <label for="genre">5. В каком жанре будет История?</label>

        <select id="genre" name="genre" required>

            <option value="Приключение">Приключение</option>

            <option value="Детектив">Детектив</option>

            <option value="Мистика">Мистика</option>

            <option value="Научная Фантастика">Научная Фантастика</option>

            <option value="Фэнтези">Фэнтези</option>

        </select>

 

        <label for="style">6. В каком стиле нарисовать иллюстрацию? (Например: Акварель, Комикс, Дисней)</label>

        <input type="text" id="style" name="style" required>

 

        <label for="photo_file">7. Прикрепите фотографию ребенка (для портретного сходства героя). До 5MB</label>

        <input type="file" id="photo_file" name="photo_file" accept="image/*" required>

 

        <label for="email_to">8. Ваш Email для получения истории:</label>

        <input type="email" id="email_to" name="email_to" required>

 

        <button type="submit">Сгенерировать Волшебную Историю</button>

    </form>

</body>

</html>