[html]

<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v6.1.2/css/pro.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
    .form-container {
        font-family: 'Century Gothic', Arial, sans-serif;
        max-width: 450px;
        margin: 20px auto;
        padding: 25px;
        border: 1px solid #e0e0e0;
        border-radius: 12px;
        background-color: #f8f8f8;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    .form-group {
        margin-bottom: 20px;
    }
    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #555;
    }
    .form-group select, .form-group input[type="text"] {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 8px;
        background-color: #fff;
        font-size: 14px;
    }
    .result-area {
        margin-top: 25px;
        display: block;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    .result-area textarea {
        width: 100%;
        height: 100px;
        padding: 15px;
        border: 1px solid #ccc;
        border-radius: 8px;
        resize: vertical;
        font-family: 'Courier New', Courier, monospace;
        font-size: 14px;
        background-color: #f1f1f1;
    }
    .copy-button {
        display: block;
        width: 100%;
        padding: 10px;
        margin-top: 10px;
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        background-color: #756983;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .copy-button:hover {
        background-color: #5d5367;
    }
    .output-preview {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background-color: #cbcaca;
        margin-bottom: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 30px;
    }
</style>

<div class="form-container">
    <div class="form-group">
        <label for="type-select">Выберите тип:</label>
        <select id="type-select" onchange="toggleForm()">
            <option value="default">-- Выберите --</option>
            <option value="children">Дети</option>
            <option value="adults">Взрослые</option>
        </select>
    </div>

    <div id="children-options" style="display:none;">
        <div class="form-group">
            <label for="faculty-select">Выберите факультет:</label>
            <select id="faculty-select" onchange="updateOutput()">
                <option value="Горный факультет">Горный факультет</option>
                <option value="Факультет Проводников">Факультет Проводников</option>
                <option value="Факультет обслуживания и ремонта">Факультет обслуживания и ремонта</option>
                <option value="Факультет охраны и безопасности">Факультет охраны и безопасности</option>
                <option value="Факультет здорового питания">Факультет здорового питания</option>
                <option value="Факультет технологий изготовления">Факультет технологий изготовления</option>
                <option value="Факультет управления">Факультет управления</option>
            </select>
        </div>

        <div class="form-group">
            <label for="course-select">Выберите курс:</label>
            <select id="course-select" onchange="updateOutput()">
                <option value="I курс">I курс</option>
                <option value="II курс">II курс</option>
                <option value="III курс">III курс</option>
            </select>
        </div>

        <div class="form-group">
            <label for="gang-select">Выберите банду:</label>
            <select id="gang-select" onchange="updateOutput()">
                <option value="Шорохи">Шорохи</option>
                <option value="Гвозди">Гвозди</option>
                <option value="Спички">Спички</option>
                <option value="Две луны">Две луны</option>
            </select>
        </div>
    </div>

    <div id="adults-options" style="display:none;">
        <div class="form-group">
            <label for="profession-input">Профессия:</label>
            <input type="text" id="profession-input" placeholder="Введите профессию" oninput="updateOutput()" style="max-width: 200px;">
        </div>
    </div>
   
    <div class="result-area" id="result-area">
        <p style="color:#666;">Предпросмотр кода:</p>
        <div class="output-preview" id="output-preview"></div>
        <textarea id="output-code" readonly></textarea>
        <button class="copy-button" onclick="copyCode()">Скопировать код</button>
    </div>
</div>

<script>
    const imageLinks = {
        'Горный факультет': 'https://i.imgur.com/9gMGZ3F.png',
        'Факультет Проводников': 'https://i.imgur.com/hJsgoWl.png',
        'Факультет обслуживания и ремонта': 'https://i.imgur.com/g5jZOZn.png',
        'Факультет охраны и безопасности': 'https://i.imgur.com/dxnuFIr.png',
        'Факультет здорового питания': 'https://i.imgur.com/EJNWTce.png',
        'Факультет технологий изготовления': 'https://i.imgur.com/r0XVnpi.png',
        'Факультет управления': 'https://i.imgur.com/pJtVlcX.png',
        'I курс': 'https://i.imgur.com/FO4UYQ0.png',
        'II курс': 'https://i.imgur.com/alVpBd1.png',
        'III курс': 'https://i.imgur.com/vE7AAeQ.png',
        'Шорохи': 'https://i.imgur.com/P7iwLIO.png',
        'Гвозди': 'https://i.imgur.com/ltGZmZM.png',
        'Спички': 'https://i.imgur.com/L4SBVW2.png',
        'Две луны': 'https://i.imgur.com/WPYoXNY.png'
    };
   
    const adultIconUrl = 'https://i.imgur.com/3NWzXTp.png';

    function toggleForm() {
        const type = document.getElementById('type-select').value;
        const childrenOptions = document.getElementById('children-options');
        const adultsOptions = document.getElementById('adults-options');
       
        childrenOptions.style.display = type === 'children' ? 'block' : 'none';
        adultsOptions.style.display = type === 'adults' ? 'block' : 'none';

        updateOutput();
    }

    function updateOutput() {
        const type = document.getElementById('type-select').value;
        let generatedCode = '';
       
        if (type === 'children') {
            const faculty = document.getElementById('faculty-select').value;
            const course = document.getElementById('course-select').value;
            const gang = document.getElementById('gang-select').value;
           
            const facultyImgUrl = imageLinks[faculty] || '';
            const courseImgUrl = imageLinks[course] || '';
            const gangImgUrl = imageLinks[gang] || '';
           
            generatedCode = `<div style="background-color: #cbcaca; padding: 5px; border-radius: 5px; display: flex; justify-content: center; align-items: center;">
<img src="${facultyImgUrl}" style="height: 20px; margin-right: 5px;" alt="${faculty}" title="${faculty}">
<img src="${courseImgUrl}" style="height: 20px; margin-right: 5px;" alt="${course}" title="${course}">
<img src="${gangImgUrl}" style="height: 20px;" alt="${gang}" title="${gang}">
</div>`;
           
        } else if (type === 'adults') {
            const profession = document.getElementById('profession-input').value;
            const adultImgUrl = adultIconUrl;

            generatedCode = `<div style="background-color: #cbcaca; padding: 5px; border-radius: 5px; display: flex; justify-content: center; align-items: center;">
<img src="${adultImgUrl}" style="height: 20px; margin-right: 5px;" alt="Взрослый" title="Взрослый"> ${profession}
</div>`;
        } else {
            generatedCode = 'Выберите тип, чтобы начать';
        }
       
        document.getElementById('output-preview').innerHTML = generatedCode;
        document.getElementById('output-code').value = generatedCode;
    }

    function copyCode() {
        const outputCode = document.getElementById('output-code');
        outputCode.select();
        document.execCommand('copy');
        alert('Код скопирован!');
    }

    window.onload = toggleForm;
</script>
[/html]