software:development:demo:cms:ucms:creating_sample_install_php_edit_colors_comment
Комментарии Файл edit_colors.php
- edit_colors.php
<?php /** * Редактор цветов для install.css * Центрированное окно 700px, работа с default_install.css, без JS. */ $cssDir = __DIR__ . '/css/'; // Путь к директории со стилями $cssFile = $cssDir . 'install.css'; // Путь к рабочему файлу CSS $defaultFile = $cssDir . 'default_install.css'; // Путь к эталонному файлу (бэкапу) $message = ''; // Переменная для вывода уведомлений пользователю // 1. Карта соответствия цветов и названий элементов (HEX => Понятное имя) $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); // Читаем текущее содержимое CSS foreach ($_POST['colors'] as $oldColor => $newColor) { // Перебираем массив измененных цветов // Проверяем через регулярное выражение, является ли введенная строка HEX-кодом if (preg_match('/^#[a-fA-F0-9]{3,6}$/', $newColor)) { // Заменяем старый код цвета на новый во всем тексте CSS $currentCss = str_replace($oldColor, $newColor, $currentCss); } } file_put_contents($cssFile, $currentCss); // Записываем обновленный CSS обратно в файл $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) : ''; // Читаем файл, если он есть // Ищем все вхождения HEX-кодов цветов (от 3 до 6 символов после решетки) 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: 20px; /* Внутренний отступ от краев экрана для контента */ } /* Основное окно редактора (белая карточка) */ .editor-window { width: 100%; /* По умолчанию занимает всю доступную ширину */ max-width: 700px; /* Но не раздвигается шире 700 пикселей */ margin: 0 auto; /* Центрируем блок по горизонтали */ background: #ffffff; /* Чисто белый фон карточки */ padding: 20px; /* Отступ от рамки до содержимого внутри */ border-radius: 8px; /* Скругление углов (8px — современный стандарт) */ box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Мягкая тень для эффекта глубины */ box-sizing: border-box; /* Чтобы padding не увеличивал общую ширину блока */ } /* Заголовок внутри окна */ h3 { margin: 0 0 10px 0; /* Обнуляем отступ сверху, оставляем 10px снизу */ font-size: 18px; /* Размер шрифта */ color: #333; /* Почти черный цвет текста */ text-align: center; /* Выравнивание по центру */ } /* Сообщение о статусе сохранения/ошибке */ .status-msg { margin-bottom: 20px; /* Отступ до начала списка цветов */ font-size: 14px; /* Размер шрифта текста сообщения */ font-weight: bold; /* Делаем текст жирным для акцента */ text-align: center; /* Текст по центру */ } /* Ряд с настройкой одного цвета */ .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; /* Отступ справа до названия */ flex-shrink: 0; /* Запрещаем браузеру сжимать квадрат при нехватке места */ } /* Название редактируемого элемента */ .label-text { flex-grow: 1; /* Занимает всё свободное пространство в строке */ font-size: 14px; /* Размер шрифта названия */ color: #444; /* Темно-серый цвет */ } /* Поле ввода HEX-кода */ input[type="text"] { width: 100px; /* Фиксированная ширина поля */ padding: 8px; /* Внутренний отступ текста внутри поля */ border: 1px solid #ccc; /* Серая рамка */ border-radius: 4px; /* Слегка скругленные углы */ font-family: monospace; /* Моноширинный шрифт (как в коде) */ text-align: center; /* Текст внутри поля по центру */ } /* Сетка для кнопок внизу */ .button-group { margin-top: 25px; /* Отступ сверху от списка цветов */ display: grid; /* Включаем сетку */ grid-template-columns: 1fr 1fr 1fr; /* Три равные колонки для кнопок */ gap: 10px; /* Расстояние между кнопками */ } /* Общие стили для всех кнопок */ button { padding: 12px 5px; /* Внутренние отступы (высота и ширина) */ border: none; /* Убираем стандартную рамку кнопки */ border-radius: 4px; /* Скругление углов */ color: #fff; /* Белый цвет текста */ font-size: 13px; /* Размер шрифта на кнопках */ cursor: pointer; /* Указатель мыши при наведении (палец) */ width: 100%; /* Кнопка занимает всю ширину своей колонки */ } /* Индивидуальные цвета кнопок */ .btn-save { background: #2e7d32; } /* Зеленый фон для "Сохранить" */ .btn-default { background: #1976d2; }/* Синий фон для "По умолчанию" */ .btn-cancel { background: #d32f2f; } /* Красный фон для "Отмена" */ /* ПРАВИЛА ДЛЯ УЗКИХ ЭКРАНОВ (смартфоны до 600px) */ @media (max-width: 600px) { .color-row { flex-wrap: wrap; /* Разрешаем элементам внутри строки переноситься на новую */ justify-content: space-between; } .label-text { /* Занимает всю ширину за вычетом ширины квадрата превью */ width: calc(100% - 60px); margin-bottom: 10px; /* Отступ снизу перед инпутом */ } input[type="text"] { width: 100%; /* Инпут растягивается на всю ширину на новой строке */ margin-top: 5px; /* Дополнительный отступ сверху */ } .button-group { grid-template-columns: 1fr; /* Перестраиваем кнопки в одну колонку (одна под другой) */ } } </style> </head> <body> <!-- Основной контейнер-оболочка (белое центрированное окно) --> <div class="editor-window"> <!-- Заголовок окна редактора --> <h3>Редактирование цветов: install.css</h3> <!-- Блок для вывода системных сообщений (например, "Изменения сохранены") --> <div class="status-msg"><?= $message ?></div> <!-- Форма для отправки данных методом POST на этот же скрипт --> <form method="POST"> <?php if (empty($uniqueColors)): ?> <!-- Если массив цветов пуст (например, файл пустой или в нем нет HEX-кодов) --> <p>Цвета в файле не обнаружены.</p> <?php else: ?> <!-- Перебор найденных уникальных HEX-кодов цветов --> <?php foreach ($uniqueColors as $color): ?> <div class="color-row"> <!-- Квадратик предпросмотра: подставляем текущий цвет в атрибут style --> <div class="preview-box" style="background: <?= $color ?>;"></div> <div class="label-text"> <?php // Проверяем, есть ли понятное название для этого цвета в нашем словаре. // strtolower нужен для совпадения ключей, если в CSS цвет написан как #FFF, а в массиве #fff. echo isset($colorNames[strtolower($color)]) ? $colorNames[strtolower($color)] : "Цвет $color"; ?>: </div> <!-- Поле ввода: в атрибут name передаем исходный цвет как ключ, чтобы знать, что заменять в файле --> <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> <!-- Кнопка сброса (запускает копирование из default_install.css) --> <button type="submit" name="reset" class="btn-default">Цвет по умолчанию</button> <!-- Кнопка отмены (выполняет редирект обратно на страницу установки) --> <button type="submit" name="cancel" class="btn-cancel">Отмена</button> </div> </form> </div> </body> </html>
Только авторизованные участники могут оставлять комментарии.
software/development/demo/cms/ucms/creating_sample_install_php_edit_colors_comment.txt · Последнее изменение: — VladPolskiy