Это старая версия документа!
Содержание
Редактор цвета стилей шаблона install.php
Введение
Редактор цветовой схемы предназначен для создания и редактирования CSS (Cascading Style Sheets) — цветов, как именно выглядит ваш веб-сайт или документ.
Приведенный ниже код представляет собой простой веб-инструмент для редактирования дизайна сайта прямо через браузер. Он позволяет изменять внешний вид страницы установки (инсталлятора), не открывая файлы через FTP или файловый менеджер хостинга.
Этот файл (обычно называемый edit_colors.php или аналогично) служит админ-панелью для управления цветами.
Назначение кода и файла:
- Кастомизация «на лету»: Дает возможность быстро подогнать дизайн инсталлятора под фирменный стиль (цвета, шрифты, отступы).
- Защита от ошибок: Механизм «отката» к эталонному файлу (default_install.css) позволяет мгновенно вернуть рабочее состояние верстки, если в процессе правки код был случайно испорчен.
- Автономность: Весь функционал управления стилями вынесен в отдельный интерфейс, что упрощает структуру основного файла установки.
Важное замечание по безопасности:
Если этот файл оставить на работающем сайте в открытом доступе, любой человек сможет изменить дизайн вашей страницы или вставить вредоносный код.
Файл README.txt
Ниже приведен файл README.txt объясняющий логику работы редактора
- README.txt
/** * ТЕХНИЧЕСКАЯ ЛОГИКА МОДУЛЯ РЕДАКТИРОВАНИЯ CSS * * 1. ИНИЦИАЛИЗАЦИЯ И КОНТРОЛЬ ПУТЕЙ: * - Скрипт четко разделяет "рабочий файл" (install.css), который видит браузер, * и "эталонный файл" (default_install.css), который используется как резервная копия. * * 2. ОБРАБОТКА КОМАНД (POST-запросы): * - Приоритет кнопки "Сброс" (reset_default): Если пользователь нажал кнопку восстановления, * скрипт игнорирует содержимое текстового поля и выполняет перезапись рабочего файла * данными из эталона. * - Сохранение вручную (css_content): Если сброс не затребован, данные из формы * записываются в файл. Предварительная проверка is_writable() страхует от попыток * записи в заблокированные системой файлы, предотвращая критические ошибки PHP. * * 3. БЕЗОПАСНОСТЬ ПРИ ЧТЕНИИ: * - Весь считанный код CSS перед попаданием в окно редактора (textarea) проходит * через фильтр htmlspecialchars(). Это нейтрализует любые символы, которые браузер * мог бы ошибочно интерпретировать как исполняемый код страницы. * * 4. ПОЛЬЗОВАТЕЛЬСКИЙ ИНТЕРФЕЙС (UX/UI): * - Форма центрирована в блоке 700px, что удобно для работы на мониторах любого разрешения. * - Управление реализовано на чистом HTML/PHP без использования JavaScript (кроме окна * подтверждения), что гарантирует работу редактора даже в "обрезанных" браузерах или * при строгих настройках безопасности. * - Кнопка "Отмена" — это безопасный выход из режима правки без отправки данных. */
Файл edit_colors.php
Для работы редактора необходимо в директории стилей /css, где лежит файл install.css создать копированием дубликат файла с именем default_install.css, откуда скрипт будет брать стили «по умолчанию».
Создадим файл edit_colors.php в директории /ucms/library/install и запишем в него нижеприведенный код:
- edit_colors.php
<?php /** * Редактор цветов для install.css * Центрированное окно 700px, работа с default_install.css, без JS. */ $cssDir = __DIR__ . '/css/'; $cssFile = $cssDir . 'install.css'; $defaultFile = $cssDir . 'default_install.css'; $message = ''; // 1. Карта соответствия цветов и названий элементов $colorNames = [ '#f4f7f6' => 'Фон страницы', '#333' => 'Основной текст', '#808080' => 'Цвет заголовка', '#e3ffec' => 'Фон карточки', '#bddbc5' => 'Линии таблицы', '#2e7d32' => 'Текст статуса ОК', '#666' => 'Цвет ссылок и подсказок', '#ffdce0' => 'Фон блока ошибки', '#d32f2f' => 'Текст ошибки и акценты', '#888' => 'Текст подвала (footer)', '#f9f9f9' => 'Фон строк редактора' ]; // 2. Обработка действий формы (POST) if ($_SERVER['REQUEST_METHOD'] === 'POST') { if (isset($_POST['save'])) { $currentCss = file_get_contents($cssFile); foreach ($_POST['colors'] as $oldColor => $newColor) { // Замена только если формат соответствует HEX (#fff или #ffffff) if (preg_match('/^#[a-fA-F0-9]{3,6}$/', $newColor)) { $currentCss = str_replace($oldColor, $newColor, $currentCss); } } file_put_contents($cssFile, $currentCss); $message = '<span style="color: #2e7d32;">Изменения сохранены!</span>'; } elseif (isset($_POST['reset'])) { if (file_exists($defaultFile)) { copy($defaultFile, $cssFile); $message = '<span style="color: #1976d2;">Восстановлены цвета по умолчанию.</span>'; } else { $message = '<span style="color: #d32f2f;">Ошибка: файл default_install.css не найден!</span>'; } } elseif (isset($_POST['cancel'])) { header("Location: install.php"); exit; } } // 3. Получение уникальных HEX-цветов из текущего CSS $cssContent = file_exists($cssFile) ? file_get_contents($cssFile) : ''; preg_match_all('/#[a-fA-F0-9]{3,6}/', $cssContent, $matches); $uniqueColors = array_unique($matches[0] ?? []); ?> <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Редактирование цветов: install.css</title> <style> body { background: #f0f2f5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; margin: 0; padding: 40px 0; } /* Центрированный контейнер 700px */ .editor-window { width: 700px; margin: 0 auto; background: #ffffff; padding: 30px; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); box-sizing: border-box; } h3 { margin: 0 0 10px 0; font-size: 18px; color: #333; } .status-msg { margin-bottom: 20px; font-size: 14px; font-weight: bold; min-height: 1em; } .color-row { display: flex; align-items: center; background: #f9f9f9; margin-bottom: 8px; padding: 12px 15px; border-radius: 5px; border: 1px solid #eee; } .preview-box { width: 35px; height: 25px; border: 1px solid #ccc; margin-right: 15px; border-radius: 2px; } .label-text { flex-grow: 1; font-size: 14px; color: #444; } input[type="text"] { width: 110px; padding: 6px; border: 1px solid #ccc; border-radius: 4px; font-family: "Courier New", monospace; text-align: center; font-size: 14px; } .button-group { margin-top: 25px; display: flex; gap: 12px; } button { padding: 10px 20px; border: none; border-radius: 4px; color: #fff; font-size: 14px; cursor: pointer; transition: opacity 0.2s; } button:hover { opacity: 0.85; } .btn-save { background: #2e7d32; } /* Зеленый */ .btn-default { background: #1976d2; }/* Синий */ .btn-cancel { background: #d32f2f; } /* Красный */ </style> </head> <body> <div class="editor-window"> <h3>Редактирование цветов: install.css</h3> <div class="status-msg"><?= $message ?></div> <form method="POST"> <?php if (empty($uniqueColors)): ?> <p>Цвета в файле не обнаружены.</p> <?php else: ?> <?php foreach ($uniqueColors as $color): ?> <div class="color-row"> <div class="preview-box" style="background: <?= $color ?>;"></div> <div class="label-text"> <?php echo isset($colorNames[strtolower($color)]) ? $colorNames[strtolower($color)] : "Цвет $color"; ?>: </div> <input type="text" name="colors[<?= $color ?>]" value="<?= $color ?>"> </div> <?php endforeach; ?> <?php endif; ?> <div class="button-group"> <button type="submit" name="save" class="btn-save">Сохранить</button> <button type="submit" name="reset" class="btn-default">Цвет по умолчанию</button> <button type="submit" name="cancel" class="btn-cancel">Отмена</button> </div> </form> </div> </body> </html>
Проверим в браузере работу скрипта, перейдя по ссылке http://localhost/ucms/library/install/edit_colors.php
Заключение
Этот файл не является обязательным и служит для возможности редактирования стилей шаблона инстолятора при написании модуля установщика.
Пример редактирования шаблона в Google Chrome:
Дополнения и Файлы
Архив с файлами редактора модуля
comment


