Инструменты пользователя

Инструменты сайта


software:development:demo:cms:ucms:creating_sample_install_php_edit_colors

Это старая версия документа!


Редактор цвета стилей шаблона install.php

Введение

Редактор цветовой схемы предназначен для создания и редактирования CSS (Cascading Style Sheets) — цветов, как именно выглядит ваш веб-сайт или документ.
Приведенный ниже код представляет собой простой веб-инструмент для редактирования дизайна сайта прямо через браузер. Он позволяет изменять внешний вид страницы установки (инсталлятора), не открывая файлы через FTP или файловый менеджер хостинга.
Этот файл (обычно называемый edit_colors.php или аналогично) служит админ-панелью для управления цветами.
Назначение кода и файла:

  • Кастомизация «на лету»: Дает возможность быстро подогнать дизайн инсталлятора под фирменный стиль (цвета, шрифты, отступы).
  • Защита от ошибок: Механизм «отката» к эталонному файлу (default_install.css) позволяет мгновенно вернуть рабочее состояние верстки, если в процессе правки код был случайно испорчен.
  • Автономность: Весь функционал управления стилями вынесен в отдельный интерфейс, что упрощает структуру основного файла установки.
:&9: Важное замечание по безопасности: Если этот файл оставить на работающем сайте в открытом доступе, любой человек сможет изменить дизайн вашей страницы или вставить вредоносный код.

Файл 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:

Дополнения и Файлы

Только авторизованные участники могут оставлять комментарии.
software/development/demo/cms/ucms/creating_sample_install_php_edit_colors.1777974935.txt.gz · Последнее изменение: VladPolskiy

Если не указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: Public Domain
Public Domain Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki