Конфликт в CSS

Проблемы с установкой или работой phpBB 3.3.x? Получите помощь здесь!
Правила форума
Местная Конституция | Шаблон запроса | Документация (phpBB3) | Мини [FAQ] по phpBB 3.1.x/3.2.x | FAQ | Как задавать вопросы | Как устанавливать расширения

Ваш вопрос может быть удален без объяснения причин, если на него есть ответы по приведённым ссылкам (а вы рискуете получить предупреждение ;) ).
Аватара пользователя
romaamor
phpBB 3.0.6
Сообщения: 2369
Стаж: 13 лет
Откуда: Одесса
Благодарил (а): 620 раз
Поблагодарили: 149 раз

Конфликт в CSS

Сообщение romaamor »

Добрый день.
Есть страница созданная для конвертации IPTV Плейлистов. Код установлен с помощью расширения Pages.
Так вот. Код этой страницы ломает стиль поля поиска в шапке и так же выбор стиля. Скрин ниже -
Изображение
Вот не как не могу понять что именно надо изменить что бы не конфликтовало.
Сам код страницы такой -

Код: Выделить всё

<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Конвертер IPTV Плейлистов</title>
    <style>

        h1 {
            color: #333;
        }
        select, textarea, button {
            margin: 10px 0;
            padding: 10px;
            width: 100%;
            font-size: 16px;
        }
        textarea {
            height: 200px;
        }
        button {
            background-color: #32384d;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        .buttons {
            display: flex;
            justify-content: space-between;
        }
        .buttons button {
            width: 48%;
        }
li {
        color: green;
    }
label[for="format"] {
        color: #1E90FF; /* Ярко-синий цвет */
    }
    </style>

 <h1>Конвертер IPTV Плейлистов</h1>

        <!-- Описание -->
        <div class="description">
            <p>Этот инструмент предназначен для конвертации IPTV плейлистов из формата M3U в различные другие форматы. Вы можете загрузить свой плейлист в формате M3U и преобразовать его в такие форматы, как XSPF, PLS, Opticum HD, OpenBox X5 HD и другие.</p>
            <p>Просто вставьте свой плейлист в текстовое поле, выберите формат вывода и нажмите на кнопку "Конвертировать". Результат можно будет скачать в виде файла с уникальным названием, включающим дату и время конвертации.</p>
        </div>

        <!-- Инструкция -->
        <div class="instruction">
            <h2>Как использовать:</h2>
            <ul>
                <li><strong>Шаг 1:</strong> Вставьте ваш IPTV плейлист в текстовое поле "Плейлист". Плейлист должен быть в формате M3U.</li>
                <li><strong>Шаг 2:</strong> Выберите формат, в который вы хотите конвертировать плейлист, используя выпадающий список "Формат". Доступные форматы включают:
                    <ul>
                        <li>M3U</li>
                        <li>Samsung</li>
                        <li>OpenBox</li>
                        <li>Enigma2</li>
                        <li>WMPlayer</li>
                        <li>MPClassic</li>
                        <li>VLC</li>
                        <li>Uppod</li>
                        <li>LG</li>
                        <li>Azbox</li>
                        <li>PLS</li>
                        <li>Opticum HD</li>
                        <li>OpenBox X5 HD</li>
                    </ul>
                </li>
                <li><strong>Шаг 3:</strong> Нажмите кнопку "Конвертировать", чтобы получить результат в выбранном формате.</li>
                <li><strong>Шаг 4:</strong> Нажмите кнопку "Скачать файл", чтобы загрузить преобразованный плейлист на ваш компьютер. Имя файла будет содержать дату и время конвертации.</li>
                <li><strong>Шаг 5:</strong> Если вы хотите начать заново, нажмите кнопку "Очистить все поля".</li>
            </ul>
        </div>
<br>
<br>
    
    <!-- Выбор формата -->
    <label for="format">Выберите формат:</label>
    <select id="format">
        <option value="m3u">M3U</option>
        <option value="samsung">Samsung</option>
        <option value="openbox">OpenBox</option>
        <option value="enigma2">Enigma2</option>
        <option value="lg">LG</option>
        <option value="wmplayer">WMPlayer</option>
        <option value="mpclassic">MPClassic</option>
        <option value="uppod">Uppod</option>
        <option value="vlc">VLC</option>
        <option value="azbox">Azbox</option>
        <option value="xspf">XSPF</option>
        <option value="pls">PLS</option>
        <option value="opticum">Opticum HD</option>
        <option value="openbox_x5">OpenBox X5 HD</option>
    </select>

    <!-- Поле для ввода плейлиста -->
    <label for="playlist">Введите ваш плейлист:</label>
    <textarea id="playlist" placeholder="Вставьте сюда ваш плейлист"></textarea>

    <!-- Кнопки для работы -->
    <div class="buttons">
        <button onclick="convertPlaylist()">Конвертировать</button>
        <button onclick="clearFields()">Очистить</button>
    </div>

    <!-- Результат -->
    <h3>Конвертированный плейлист:</h3>
    <textarea id="result" readonly></textarea>

    <!-- Кнопка для скачивания -->
    <button onclick="downloadFile()">Скачать файл</button>

    <script>
        function convertPlaylist() {
            const format = document.getElementById('format').value;
            const playlist = document.getElementById('playlist').value.trim();
            let convertedPlaylist = '';

            const lines = playlist.split('\n');
            let currentChannelName = '';

            // M3U формат
            if (format === 'm3u') {
                convertedPlaylist = '#EXTM3U\n';
                lines.forEach(line => {
                    if (line.trim().startsWith('#EXTINF')) {
                        // Пытаемся извлечь имя канала из строки #EXTINF
                        const extinfParts = line.split(',');
                        currentChannelName = extinfParts.length > 1 ? extinfParts[1].trim() : 'Неизвестный канал';
                    } else if (line.trim().startsWith('http')) {
                        convertedPlaylist += '#EXTINF:0,' + currentChannelName + '\n';
                        convertedPlaylist += line + '\n';
                    }
                });
            }

            // Samsung (XML) формат
            if (format === 'samsung') {
                convertedPlaylist = '<?xml version="1.0" encoding="UTF-8"?>\n<items>\n';
                lines.forEach(line => {
                    if (line.trim().startsWith('#EXTINF')) {
                        const extinfParts = line.split(',');
                        currentChannelName = extinfParts.length > 1 ? extinfParts[1].trim() : 'Неизвестный канал';
                    } else if (line.trim().startsWith('http')) {
                        convertedPlaylist += '  <channel>\n';
                        convertedPlaylist += '    <title><![CDATA[' + currentChannelName + ']]></title>\n';
                        convertedPlaylist += '    <description><![CDATA[<img src="https://vip-tv.club/favicon.ico">Вип ТВ]]></description>\n';
                        convertedPlaylist += '    <stream_url><![CDATA[' + line + ']]></stream_url>\n';
                        convertedPlaylist += '  </channel>\n';
                    }
                });
                convertedPlaylist += '</items>';
            }

            // OpenBox формат
            if (format === 'openbox') {
                convertedPlaylist = '[channels]\n';
                lines.forEach(line => {
                    if (line.trim().startsWith('#EXTINF')) {
                        const extinfParts = line.split(',');
                        currentChannelName = extinfParts.length > 1 ? extinfParts[1].trim() : 'Неизвестный канал';
                    } else if (line.trim().startsWith('http')) {
                        convertedPlaylist += 'channel = "' + currentChannelName + '"\n';
                        convertedPlaylist += 'url = "' + line + '"\n';
                    }
                });
            }

            // Enigma2 формат
            if (format === 'enigma2') {
                convertedPlaylist = '#NAME: Enigma2 Playlist\n';
                lines.forEach(line => {
                    if (line.trim().startsWith('#EXTINF')) {
                        const extinfParts = line.split(',');
                        currentChannelName = extinfParts.length > 1 ? extinfParts[1].trim() : 'Неизвестный канал';
                    } else if (line.trim().startsWith('http')) {
                        convertedPlaylist += 'URL ' + line + ' ' + currentChannelName + '\n';
                    }
                });
            }

            // LG формат
            if (format === 'lg') {
                convertedPlaylist = '[Channels]\n';
                lines.forEach(line => {
                    if (line.trim().startsWith('#EXTINF')) {
                        const extinfParts = line.split(',');
                        currentChannelName = extinfParts.length > 1 ? extinfParts[1].trim() : 'Неизвестный канал';
                    } else if (line.trim().startsWith('http')) {
                        convertedPlaylist += 'Channel="' + currentChannelName + '"\n';
                        convertedPlaylist += 'URL="' + line + '"\n';
                    }
                });
            }

            // WMPlayer формат
            if (format === 'wmplayer') {
                convertedPlaylist = '[playlist]\n';
                lines.forEach(line => {
                    if (line.trim().startsWith('#EXTINF')) {
                        const extinfParts = line.split(',');
                        currentChannelName = extinfParts.length > 1 ? extinfParts[1].trim() : 'Неизвестный канал';
                    } else if (line.trim().startsWith('http')) {
                        convertedPlaylist += 'File1=' + currentChannelName + '\n';
                        convertedPlaylist += line + '\n';
                    }
                });
            }

            // MPClassic формат
            if (format === 'mpclassic') {
                convertedPlaylist = '[playlist]\n';
                lines.forEach(line => {
                    if (line.trim().startsWith('#EXTINF')) {
                        const extinfParts = line.split(',');
                        currentChannelName = extinfParts.length > 1 ? extinfParts[1].trim() : 'Неизвестный канал';
                    } else if (line.trim().startsWith('http')) {
                        convertedPlaylist += 'File1=' + currentChannelName + '\n';
                        convertedPlaylist += line + '\n';
                    }
                });
            }

            // Uppod формат
            if (format === 'uppod') {
                convertedPlaylist = '[Channels]\n';
                lines.forEach(line => {
                    if (line.trim().startsWith('#EXTINF')) {
                        const extinfParts = line.split(',');
                        currentChannelName = extinfParts.length > 1 ? extinfParts[1].trim() : 'Неизвестный канал';
                    } else if (line.trim().startsWith('http')) {
                        convertedPlaylist += 'url="' + line + '"\n';
                        convertedPlaylist += 'name="' + currentChannelName + '"\n';
                    }
                });
            }

            // VLC формат
            if (format === 'vlc') {
                convertedPlaylist = '#EXTM3U\n';
                lines.forEach(line => {
                    if (line.trim().startsWith('#EXTINF')) {
                        const extinfParts = line.split(',');
                        currentChannelName = extinfParts.length > 1 ? extinfParts[1].trim() : 'Неизвестный канал';
                    } else if (line.trim().startsWith('http')) {
                        convertedPlaylist += '#EXTINF:-1,' + currentChannelName + '\n';
                        convertedPlaylist += line + '\n';
                    }
                });
            }

            // Azbox формат
            if (format === 'azbox') {
                convertedPlaylist = '[Channels]\n';
                lines.forEach(line => {
                    if (line.trim().startsWith('#EXTINF')) {
                        const extinfParts = line.split(',');
                        currentChannelName = extinfParts.length > 1 ? extinfParts[1].trim() : 'Неизвестный канал';
                    } else if (line.trim().startsWith('http')) {
                        convertedPlaylist += 'Channel = "' + currentChannelName + '"\n';
                        convertedPlaylist += 'URL = "' + line + '"\n';
                    }
                });
            }

            // XSPF формат
            if (format === 'xspf') {
                convertedPlaylist = '<?xml version="1.0" encoding="UTF-8"?>\n<playlist version="1" xmlns="http://xspf.org/ns/0/">\n<trackList>\n';
                lines.forEach(line => {
                    if (line.trim().startsWith('#EXTINF')) {
                        const extinfParts = line.split(',');
                        currentChannelName = extinfParts.length > 1 ? extinfParts[1].trim() : 'Неизвестный канал';
                    } else if (line.trim().startsWith('http')) {
                        convertedPlaylist += '  <track>\n';
                        convertedPlaylist += '    <title>' + currentChannelName + '</title>\n';
                        convertedPlaylist += '    <location>' + line + '</location>\n';
                        convertedPlaylist += '  </track>\n';
                    }
                });
                convertedPlaylist += '</trackList>\n</playlist>';
            }

            // PLS формат
            if (format === 'pls') {
                convertedPlaylist = '[playlist]\n';
                lines.forEach(line => {
                    if (line.trim().startsWith('#EXTINF')) {
                        const extinfParts = line.split(',');
                        currentChannelName = extinfParts.length > 1 ? extinfParts[1].trim() : 'Неизвестный канал';
                    } else if (line.trim().startsWith('http')) {
                        convertedPlaylist += 'File1=' + currentChannelName + '\n';
                        convertedPlaylist += line + '\n';
                    }
                });
            }

            // Opticum HD формат
            if (format === 'opticum') {
                convertedPlaylist = '[Channels]\n';
                lines.forEach(line => {
                    if (line.trim().startsWith('#EXTINF')) {
                        const extinfParts = line.split(',');
                        currentChannelName = extinfParts.length > 1 ? extinfParts[1].trim() : 'Неизвестный канал';
                    } else if (line.trim().startsWith('http')) {
                        convertedPlaylist += 'channel="' + currentChannelName + '"\n';
                        convertedPlaylist += 'url="' + line + '"\n';
                    }
                });
            }

            // OpenBox X5 HD формат
            if (format === 'openbox_x5') {
                convertedPlaylist = '[channels]\n';
                lines.forEach(line => {
                    if (line.trim().startsWith('#EXTINF')) {
                        const extinfParts = line.split(',');
                        currentChannelName = extinfParts.length > 1 ? extinfParts[1].trim() : 'Неизвестный канал';
                    } else if (line.trim().startsWith('http')) {
                        convertedPlaylist += 'channel = "' + currentChannelName + '"\n';
                        convertedPlaylist += 'url = "' + line + '"\n';
                    }
                });
            }

            document.getElementById('result').value = convertedPlaylist;
        }

        // Очистить все поля
        function clearFields() {
            document.getElementById('playlist').value = '';
            document.getElementById('result').value = '';
        }

        // Скачивание файла
        function downloadFile() {
            const resultText = document.getElementById('result').value;
            const format = document.getElementById('format').value;

            // Получаем текущую дату и время в формате: yyyy-MM-dd_HH-mm-ss
            const currentDate = new Date();
            const dateString = currentDate.getFullYear() + '-' 
                             + String(currentDate.getMonth() + 1).padStart(2, '0') + '-' 
                             + String(currentDate.getDate()).padStart(2, '0') + '_'
                             + String(currentDate.getHours()).padStart(2, '0') + '-'
                             + String(currentDate.getMinutes()).padStart(2, '0') + '-'
                             + String(currentDate.getSeconds()).padStart(2, '0');

            // Формируем имя файла с датой и временем
            const filename = 'pikniktv.info_' + dateString + '.' + format;

            const blob = new Blob([resultText], { type: 'text/plain' });
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = filename;
            link.click();
        }
    </script>
Сама страница живёт тут - https://pikniktv.info/enigma2-iptv
Помогите кто чем может. :(
Аватара пользователя
KEMnEP
phpBB 2.0.18
Сообщения: 1167
Стаж: 10 лет 1 месяц
Благодарил (а): 44 раза
Поблагодарили: 293 раза

Re: Конфликт в CSS

Сообщение KEMnEP »

Код: Выделить всё

select, textarea, button {
    margin: 10px 0;
    padding: 10px;
    width: 100%;
    font-size: 16px;
 }

этот css блок из enigma2-iptv всё ломает, а срабатывает он на

Код: Выделить всё

<select name="stylechanger" onchange="this.form.submit();"
Отправлено спустя 6 минут 2 секунды:
а исправить, задать стилизацию для селектов на странице по классу, а не такую общую

Отправлено спустя 2 минуты 17 секунд:
к примеру

Код: Выделить всё

<select class="my-custom-select" id="format">

Код: Выделить всё

.my-custom-select, textarea, button {
    margin: 10px 0;
    padding: 10px;
    width: 100%;
    font-size: 16px;
 }
Отправлено спустя 48 секунд:
Вообще старайтесь стилизовать по классам, избавит от многих таких проблем неожиданных
Аватара пользователя
romaamor
phpBB 3.0.6
Сообщения: 2369
Стаж: 13 лет
Откуда: Одесса
Благодарил (а): 620 раз
Поблагодарили: 149 раз

Re: Конфликт в CSS

Сообщение romaamor »

KEMnEP, спасибо. Исправил. :hat

Вернуться в «Поддержка phpBB 3.3.x»