Файл sample_install.php является базовым шаблоном установки. Он представляет собой PHP-файл, содержащий HTML-разметку со встроенными стилями оформления: фона, рабочих областей, заголовков, таблиц и форм. В процессе разработки структура шаблона будет оптимизирована:

• Верхняя часть (шапка) и нижняя часть (подвал) будут вынесены в отдельные файлы: tpl_install_header.php и tpl_install_footer.php.
• Все стили оформления будут перенесены в отдельный внешний файл install.css.

Для удобства редактирования каждая значимая строка кода снабжена подробными комментариями.

Структура директории ./ucms/library/install/

• css/ — папка со стилями оформления.
  • install.css — основной файл стилей для процесса установки.
• js/ — папка с клиентскими скриптами.
  • install.js — скрипты для обеспечения интерактивности установщика (валидация, переключения).
• tpl/ — папка с шаблонами оформления (представлениями).
  • tpl_install_header.php — верхняя часть шаблона (шапка сайта, подключение мета-тегов и стилей).
  • tpl_install_footer.php — нижняя часть шаблона (подвал сайта, подключение скриптов).
• pages/ — директория для хранения контента отдельных шагов или страниц установки.
• images/ — папка для графических элементов интерфейса (логотипы, иконки, фоны).
• lang/ — языковые пакеты для локализации интерфейса (файлы переводов).
• sample_install.php — демонстрационный файл (пример) для предварительного просмотра и отладки верстки установщика.
• help.txt — краткое руководство по использованию и описанию структуры файлов.

Для большинства современных сайтов (WordPress, Joomla, Bitrix и др.) стандартом безопасности считаются следующие права доступа:

• Для всех папок (директорий): 755

Владелец может читать, писать и заходить в папку; группа и остальные — только читать и заходить.

• Для всех файлов: 644

Владелец может читать и редактировать; группа и остальные — только читать.

Особые случаи и рекомендации Для критически важных файлов и папок стоит установить более строгие ограничения:

• Конфигурационные файлы (например, wp-config.php, .htaccess): 640 или 600

Это закрывает доступ на чтение для посторонних пользователей на сервере. Некоторые специалисты рекомендуют даже 400 или 440 для максимальной защиты.

• Папки для загрузки файлов (например, /uploads или /images): 755

Иногда (в зависимости от настроек хостинга) может потребоваться 775, если серверу не хватает прав для записи изображений пользователями. Никогда не ставьте 777 на постоянной основе, так как это позволяет любому пользователю изменять файлы на вашем сайте.

Права состоят из трех цифр для трех групп пользователей: Владелец, Группа, Все остальные.

• 4 — Чтение (Read)
• 2 — Запись (Write)
• 1 — Выполнение/Вход в папку (Execute)
• 0 — Доступ запрещен

Складывая их, получаем итоговую цифру. Например, 6 (4+2) — это чтение и запись.

Важно: права 777 (полный доступ для всех) потенциально небезопасны и должны использоваться только в специфических случаях (например, для временного кэша).

Для создания директорий и файлов в PHP используются функции mkdir() и file_put_contents().

Назначение:

• Создает новую директорию (папку).

index.php

<?php
// Простой пример: создание одной папки
mkdir("photos"); 
 
// Продвинутый пример:
$path = "content/assets/images";
 
if (!is_dir($path)) {
    // 0755 — права доступа (чтение и выполнение для всех, запись для владельца)
    // true — позволяет создавать вложенные папки (сначала content, потом assets и т.д.)
    mkdir($path, 0755, true);
    echo "Папки успешно созданы!";
} else {
    echo "Такая папка уже есть.";
}
?>

Примечание:
mkdir() выдаст ошибку, если папка уже существует, поэтому её всегда лучше оборачивать в проверку if (!is_dir(...)).

Назначение: Записывает данные в файл.

• Если файла нет — создаст его.
• Если файл есть — по умолчанию полностью перезапишет его.

index.php

<?php
$file = 'log.txt';
$text = "Запись номер 1\n";
 
// Вариант 1: Просто создать файл и записать текст (перезапишет старое содержимое)
file_put_contents($file, $text);
 
// Вариант 2: Дописать текст в конец файла (флаг FILE_APPEND)
$new_text = "Дополнительная строка\n";
file_put_contents($file, $new_text, FILE_APPEND);
 
// Пример с записью массива (функция сама склеит его в строку)
$data = ["Первый", "Второй", "Третий"];
file_put_contents("list.txt", $data); 
 
echo "Данные записаны!";
?>

Примечание:
file_put_contents() — это универсальная функция в PHP, предназначенная для записи данных в файл «в одно действие». Она заменяет собой целую цепочку команд: fopen() (открыть), fwrite() (записать) и fclose() (закрыть). Если файл не существует, функция создаст его автоматически.

Для быстрого создания структуры (папок и файлов) лучше всего использовать массив с путями и цикл. PHP автоматически создаст вложенные папки, если указать флаг recursive. Ниже приведен готовый скрипт (файл mkdir_files.php), который можно запустить один раз, чтобы развернуть всю структуру директорий и файло с назначенными правами доступа.:

mkdir_files.php

<?php
 
/**
 * Создает директории любой вложенности и наполняет их файлами.
 * 
 * @param string $path Путь к директории
 * @param int $mode Права доступа для папок (напр. 0755)
 * @param array $files Ассоциативный массив [имя_файла => контент]
 */
function createStructure($path, $mode, $files = []) {
    // 1. Создаем дерево папок, если оно не существует
    // Параметр true позволяет создавать вложенность любой глубины за один раз
    if (!is_dir($path)) {
        if (!mkdir($path, $mode, true)) {
            return; // Прекращаем, если нет прав на создание
        }
        chmod($path, $mode); // Принудительно выставляем права (важно для 0777 !!!)
    }
 
    // 2. Создаем файлы внутри указанного пути
    if (!empty($files)) {
        foreach ($files as $name => $content) {
            $filePath = rtrim($path, '/') . '/' . trim($name);
 
            // Записываем контент и выставляем права на файл (0644)
            file_put_contents($filePath, $content);
            chmod($filePath, 0644); 
        }
    }
}
 
// Конфигурация структуры проекта
$installPath = 'library/install';
 
$structure = [
    "$installPath" => [
        'sample_install.php'   => '<?php /* Базовый шаблон установки */ ?>'
    ],
    "$installPath/css" => [
        'install.css'          => '/* Стили инсталлятора */'
    ],
    "$installPath/js" => [
        'install.js'           => '/* Скрипты инсталлятора */'
    ],
    "$installPath/tpl" => [
        'tpl_install_header.php' => '<?php /* Шапка */ ?>',
        'tpl_install_footer.php' => '<?php /* Подвал */ ?>'
    ],
    // Пустые папки для ресурсов
    "$installPath/pages/images" => [],
    "$installPath/pages/lang"   => []
];
 
// Запуск процесса создания
foreach ($structure as $path => $files) {
    createStructure($path, 0755, $files);
}
 
echo "Структура UCMS успешно создана. Права: папки **0755**, файлы **0644**.";
?>

Примечание:

• mkdir($path, 0755, true): Флаг true позволяет создавать цепочку папок (например, сразу и library, и install).
• file_put_contents: Создает файл и записывает в него начальную метку (добавлено <?php для php-файлов).
• Безопасность: Скрипт проверяет is_dir и file_exists, чтобы не перезаписать уже существующие данные.

Сохраните файл mkdir_files.php в корневую директорию /ucms

и запустите в браузере, перейдя по ссылке http://localhost/ucms/mkdir_files.php

Проверим созданные файлы и директории на хосте

Если все в порядке, из корневой директории /ucms удаляем за ненадобностью наш временный файл mkdir_files.php

Откройте в редакторе Notepad++ созданный ранее файл sample_install.php и добавьте в него следующий HTML-код. Файл довольно объемный и содержит подробные комментарии, поясняющие логику стилей и разметки, а также временный код для визуализации стилей форм, таблиц и кнопок.

sample_install.php

<!-- Объявление типа документа: сообщает браузеру, 
что используется современный стандарт HTML5 -->
<!DOCTYPE html> 
<!-- Начало документа, атрибут lang="ru" указывает 
поисковикам и браузерам, что основной язык страницы — русский -->
<html lang="ru"> 
<head>
  <!-- Установка кодировки UTF-8 для корректного отображения 
  кириллицы и спецсимволов -->
  <meta charset="UTF-8"> 
  <!-- Адаптация страницы под ширину экрана мобильных устройств -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <!-- Заголовок вкладки браузера -->
  <title>Установка UCMS Demo</title> 
  <!--  Начало стилей установщика, мы не выносим стили в отдельный файл, т.к.
  эти стили нужны только в этом файле. После установки приложения эта папка 
  будет удалена.	-->
  <style>
    /* Настройки всей видимой части страницы */
    body {
      font-family: "Times New Roman", Times, serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Приоритет шрифта с засечками, далее системные шрифты */
      background: linear-gradient(to bottom, #ffffff 0%, #E0E0E0 100%); /* переход от белого до светлый серый */
      display: flex; /* Включение гибкой верстки для выравнивания содержимого */
      justify-content: center; /* Центрирование контейнера по горизонтали */
      /*align-items: center; /* Центрирование контейнера по вертикали */
      min-height: 100vh; /* Минимальная высота body — 100% высоты окна просмотра */
      margin: 0; /* Удаление стандартных внешних отступов браузера */
      color: #333; /* Основной цвет текста (темно-серый) */
    }
 
    /* Внешняя обертка для карточки установки */
    .install-container {
      width: 100%; /* Растягивание на всю доступную ширину */
      max-width: 700px; /* Ограничение максимальной ширины в 700 пикселей */
      padding: 20px; /* Внутренние отступы от краев экрана */
	  margin: 20px auto 0; /* Отступ 20px сверху, авто-отступы по бокам */
    }
 
    /* Основная карточка с контентом */
    .install-card {
      border: 2px #808080 solid; /* Серая сплошная рамка толщиной 2px */
      background: #e3ffec; /* Светло-зеленый фон как на скриншоте */
      border-radius: 5px; /* Скругление углов рамки на 5px */
      padding: 15px; /* Внутренний отступ от рамки до текста */
      box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.5); /* Глубокая тень: смещение вниз, размытие и полупрозрачный черный цвет */
    }
 
    /* Стили верхнего заголовка внутри карточки */
    .install-title {
      font-size: 18px; /* Размер шрифта заголовка */
      font-style: italic; /* Написание курсивом */
      font-weight: 700; /* Жирное начертание */
      color: #808080; /* Серый цвет текста */
      margin-left: 25px; /* Сдвиг заголовка вправо */
      padding-bottom: 5px; /* Небольшой отступ снизу */
    }
 
    /* Оформление таблицы с параметрами системы */
    table {
      font-family: inherit; /* Наследование шрифтов от body */
      font-weight: 700; /* Жирный текст для всех ячеек */
      font-size: 14px; /* Размер шрифта в таблице */
      width: 100%; /* Таблица занимает всю ширину карточки */
      border-collapse: collapse; /* Убирает двойные рамки между ячейками */
      margin: 20px 0; /* Отступы сверху и снизу от таблицы */
    }
 
    /* Стили обычных ячеек */
    td {
      padding: 5px 0; /* Вертикальные отступы внутри строк */
      border-bottom: 1px dashed #bddbc5; /* Пунктирная разделительная линия снизу ячейки */
    }
 
    /* Специальные стили для правой колонки значений */
    td:last-child {
      text-align: left; /* Текст внутри ячейки прижат к левому краю */
      padding-left: 25%; /* Создание большого пустого пространства слева для имитации смещения вправо */
    }
 
    /* Цвет текста для статуса "ОК" */
    .status-ok {
      color: #2e7d32; /* Темно-зеленый цвет */
      font-weight: bold; /* Дополнительное выделение жирным */
    }
 
    /* Текст подсказки */
    .hint {
      font-size: 0.9em; /* Размер чуть меньше основного (90%) */
      color: #666; /* Средне-серый цвет */
      line-height: 1.5; /* Межстрочный интервал для читаемости */
    }
 
    /* Блок сообщения об ошибке */
    .error-msg {
      background: #ffdce0; /* Светло-розовый фон ошибки */
      padding: 2px 20px; /* Минимальные отступы сверху/снизу и широкие сбоку */
      border-radius: 3px; /* Скругление углов фона */
      border-left: 3px solid #d32f2f; /* Жирная красная черта слева для акцента */
      margin-top: 5px; /* Отступ сверху от предыдущего текста */
    }
 
    /* Убираем отступы у параграфа внутри блока ошибки для компактности */
    .error-msg p {
      margin: 0;
    }
 
    /* Стили подвала (авторские права) */
    .footer {
      text-align: center; /* Центрирование текста */
      font-size: 13px; /* Уменьшенный размер шрифта */
      font-style: italic; /* Курсив */
      font-weight: 700; /* Жирный текст */
      color: #888; /* Светло-серый цвет */
      margin-top: 20px; /* Отступ от основной карточки */
    }
 
    /* Цвет ссылок в подвале */
    .footer a { color: #666; }
 
	/* Стили для форм и таблиц */
	.form-table {
		border-collapse: collapse; /* Убирает двойные рамки между ячейками */
		margin-top: 1em;           /* Отступ всей таблицы сверху */
		width: 100%;               /* Таблица растягивается на всю ширину контейнера */
	}
 
	/* Общие стили для заголовков (th) и обычных ячеек (td) */
	.form-table th, 
	.form-table td {
		padding: 10px 20px 10px 0; /* Внутренние отступы: верх 10px, право 20px, низ 10px, лево 0 */
		font-size: 14px;           /* Размер шрифта текста в ячейках */
		vertical-align: top;       /* Выравнивание содержимого по верхнему краю ячейки */
		text-align: left;          /* Выравнивание текста по левому краю */
	}
 
	.form-table th {
		width: 150px;              /* Фиксированная ширина колонки с заголовками */
		font-weight: 600;          /* Делает текст заголовков полужирным */
	}
 
	.form-table p {
		margin: 4px 0 0;           /* Отступ только сверху (4px), чтобы текст под инпутом не прилипал */
		font-size: 12px;           /* Уменьшенный шрифт для пояснительного текста */
		color: #666;               /* Серый цвет текста для второстепенной информации */
	}
 
	.form-table input {
		width: 100%;               /* Инпут занимает всю доступную ширину ячейки */
		font-size: 12px;           /* Размер шрифта внутри поля ввода */
		padding: 5px;              /* Внутренний отступ текста от краев инпута */
		box-sizing: border-box;    /* Включает padding в ширину 100%, чтобы инпут не вылезал за границы */
	}
 
	.form-table select {
		width: 100%;               /* Инпут занимает всю доступную ширину ячейки */
		font-size: 12px;           /* Размер шрифта внутри поля ввода */
		padding: 5px;              /* Внутренний отступ текста от краев инпута */
		box-sizing: border-box;    /* Включает padding в ширину 100%, чтобы инпут не вылезал за границы */
	}
  </style>
  <!--  Конец стилей установщика	-->
</head>
<body>
 
<!-- Ограничивающий контейнер по центру экрана -->
<div class="install-container"> 
    <!-- Основная «зеленая» карточка -->
    <div class="install-card"> 
		<!-- Заголовок блока -->
		<div class="install-title">Установка UCMS Demo</div> 
		<!--  Конец блока заголовка -->
		<!--  ******************************************* -->
		<!--  ** Начало блока вставки файлов программы ** -->
		<!--  ******************************************* -->
		<!-- Таблица проверки системных требований -->
		<!--  ***************************************** 
		// Временные данные для верстки шаблона
		// Начало временного блока
		******************************************* -->	
			<table class="form-table" role="presentation">
				<tr>
					<th scope="row"><label for="User_Name">
						<b><?php echo 'Выберите часовой пояс' ?></b></label>
					</th> 
					<td>
						<select type="text" name="timezone_selection">
							<option value="Pacific/Kiritimati">Pacific/Kiritimati +14:00</option>
							<option value="Pacific/Tongatapu">Pacific/Tongatapu +13:00</option>
							<option value="Pacific/Majuro">Pacific/Majuro +12:00</option>
						</select>
						<p>По умолчанию приложение использует часовой пояс браузера.</p>
					</td>
				</tr>		 
			</table>
				<p>Введите здесь информацию о подключении к базе данных. Если вы в ней не уверены, 
					свяжитесь с поддержкой вашего хостинга.</p>
			<form  method="post">
				<table class="form-table" role="presentation">
					<tr>
						<th scope="row">
							<label for="Database_Name">
								<b>Имя базы данных:</b>
							</label>
						</th> 
						<td>
							<input type="text" id="Database_Name" name="Database_Name" placeholder="ucms" checked />
							<p>Имя базы данных, в которую вы хотите установить UCMS kernel.</p>
						</td>
					</tr>		 
					<tr>
						<th scope="row">
							<label for="User_Name">
								<b>Имя пользователя:</b>
							</label>
						</th> 
						<td>
							<input type="text" id="User_Name" name="User_Name" placeholder="login" required>
							<p>Имя пользователя базы данных.</p>
						</td>
					</tr>
				</table>  
					<div class = "install_button">
						<input type="submit" value="Продолжить" name="button_database_option_button">
					</div>
			</form>
			<div class="progressbar">
				<span style="width: 60%"></span>
			</div>
 			<table> 
				<tr>
				  <!-- Название параметра -->
				  <td>PHP-версия</td> 
				  <!-- Значение и статус -->
				  <td><strong>8.2.21</strong> — <span class="status-ok">ОК</span></td> 
				</tr>
				<tr>
				  <!-- Название параметра -->
				  <td>Apache web server</td> 
				  <!-- Значение и статус -->
				  <td><strong>Apache/2.4.58 (Unix)</strong> — <span class="status-ok">ОК</span></td>
				</tr>
			</table>
			 <!-- Информационный текст со ссылкой -->
			<p class="hint"> 
				Подробности о необходимых модулях на 
				<a href="https://github.com/UniversalCMS-CE/" target="_blank">странице требований</a>.
			</p>
			<!-- Блок предупреждения об ошибке -->
			<div class="error-msg"> 
				<p> 
					Невозможно продолжить. Исправьте ошибки и попробуйте еще раз. 
					<!-- Ссылка-кнопка для перезагрузки текущего скрипта установки -->
					<a href="./install.php">Обновить</a>
				</p>
			</div>
			<!--  ***************************************** 
			// Временные данные для верстки шаблона
			// Конец временного блока
			******************************************* -->	
			<!--  ****************************************** -->
			<!--  ** Конец блока вставки файлов программы ** -->
			<!--  ****************************************** -->
    </div><!-- Конец блока основная «зеленая» карточка -->
	<!-- Подвал страницы с копирайтом и версией -->
		<div class="footer">
			<p>
				Author: <a href="mailto:PolskiyVN@gmail.com">VladPolskiy</a> &copy; 2024-2025
				<a href="https://UniversalCMS-ce.ovh/" target="_blank">UniversalCMS CE</a> – Ver: 1.2.10
			</p>
		</div>
</div>
</body>
</html>

Перейдите в браузере по ссылке http://localhost/ucms/library/install/sample_install.php, чтобы проверить результат. При желании вы можете отредактировать стили и разметку шаблона, следуя подсказкам в комментариях.

Когда добьетесь нужного результата, переходите к следующей главе руководства.

install.php — это главный «дирижер» или входной файл процесса установки. Именно его пользователь запускает в браузере (например, ://mysite.com), чтобы начать настройку системы.
В структуре этот файл выполняет роль связующего звена, которое собирает воедино логику, данные и шаблоны.
Основные задачи install.php:

• Управление сессией: Отслеживает, на каком шаге находится пользователь (через GET-параметры или SESSION).
• Обработка логики: Проверяет системные требования (ваш код с массивом), подключается к базе данных, создает таблицы.
• Сборка страницы: Подключает «шапку», основной контент и «подвал».
• Безопасность: Проверяет, не была ли система уже установлена (например, если файл config.php уже существует, он блокирует установку).

Основной файл (например, index.php или install.php) превращается в «сендвич». Пример типичного содержимого index.php:

index.php

require 'header.php'; — Верхняя часть (шапка).
/* Основной код */ — Средняя (обычно контент).
require 'footer.php'; — Нижняя часть (подвал).

Создадим с помощью блокнота в директории ./ucms/library/install/ пустой файл install.php

В следующих главах мы подключим в этот файл шапку и подвал

Файл tpl_install_header.php — это файл-шаблон (template), отвечающий за отображение «шапки» (верхней части) страницы в процессе установки или настройки скрипта. Файл обычно содержит:

• HTML-разметку: Начало документа (<!DOCTYPE html>, <html>, <head>), подключение стилей CSS и скриптов.
• Визуальные элементы: Логотип установщика, название этапа установки (например, «Проверка системных требований») и навигационную панель (шаги установки).
• Мета-данные: Кодировку страницы и заголовки title.

Файл подключается (через include или require) в самом начале основных файлов установки (например, в install.php), чтобы на каждой странице инсталлятора был одинаковый дизайн верхней части.
Пример типичного содержимого header.php:

header.php

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $lang['INSTALL_TITLE'] ?? 'Установка системы'; ?></title>
 
    <!-- Подключение стилей -->
    <link rel="stylesheet" href="css/style.css">
 
    <style>
        body { font-family: sans-serif; background: #f4f7f6; color: #333; }
        .install-box { 
            max-width: 700px; 
            margin: 50px auto; 
            background: #fff; 
            padding: 20px; 
            border-radius: 8px; 
            box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
        }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        td { padding: 10px; border-bottom: 1px solid #eee; }
        .table_block_install { text-align: right; }
        img { vertical-align: middle; margin-left: 5px; }
        h1 { font-size: 20px; text-align: center; color: #444; }
    </style>
</head>
<body>
 
<div class="install-box">
    <header>
        <img src="img/logo.png" alt="Logo" style="display:block; margin: 0 auto 20px;">
        <h1>Этап: Проверка системных требований</h1>
    </header>
    <hr>

В файл tpl_install_header.php скопируем из файла шаблона sample_install.php весь код от начала страницы

до конца комментария:

tpl_install_header.php

<!-- Объявление типа документа: сообщает браузеру, 
что используется современный стандарт HTML5 -->
<!DOCTYPE html> 
<!-- Начало документа, атрибут lang="ru" указывает 
поисковикам и браузерам, что основной язык страницы — русский -->
<html lang="ru"> 
<head>
  <!-- Установка кодировки UTF-8 для корректного отображения 
  кириллицы и спецсимволов -->
  <meta charset="UTF-8"> 
  <!-- Адаптация страницы под ширину экрана мобильных устройств -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <!-- Заголовок вкладки браузера -->
  <title>Установка UCMS Demo</title> 
  <!--  Начало стилей установщика, мы не выносим стили в отдельный файл, т.к.
  эти стили нужны только в этом файле. После установки приложения эта папка 
  будет удалена.	-->
  <style>
    /* Настройки всей видимой части страницы */
    body {
      font-family: "Times New Roman", Times, serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Приоритет шрифта с засечками, далее системные шрифты */
      background: linear-gradient(to bottom, #ffffff 0%, #E0E0E0 100%); /* переход от белого до светлый серый */
      display: flex; /* Включение гибкой верстки для выравнивания содержимого */
      justify-content: center; /* Центрирование контейнера по горизонтали */
      /*align-items: center; /* Центрирование контейнера по вертикали */
      min-height: 100vh; /* Минимальная высота body — 100% высоты окна просмотра */
      margin: 0; /* Удаление стандартных внешних отступов браузера */
      color: #333; /* Основной цвет текста (темно-серый) */
    }
 
    /* Внешняя обертка для карточки установки */
    .install-container {
      width: 100%; /* Растягивание на всю доступную ширину */
      max-width: 700px; /* Ограничение максимальной ширины в 700 пикселей */
      padding: 20px; /* Внутренние отступы от краев экрана */
	  margin: 20px auto 0; /* Отступ 20px сверху, авто-отступы по бокам */
    }
 
    /* Основная карточка с контентом */
    .install-card {
      border: 2px #808080 solid; /* Серая сплошная рамка толщиной 2px */
      background: #e3ffec; /* Светло-зеленый фон как на скриншоте */
      border-radius: 5px; /* Скругление углов рамки на 5px */
      padding: 15px; /* Внутренний отступ от рамки до текста */
      box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.5); /* Глубокая тень: смещение вниз, размытие и полупрозрачный черный цвет */
    }
 
    /* Стили верхнего заголовка внутри карточки */
    .install-title {
      font-size: 18px; /* Размер шрифта заголовка */
      font-style: italic; /* Написание курсивом */
      font-weight: 700; /* Жирное начертание */
      color: #808080; /* Серый цвет текста */
      margin-left: 25px; /* Сдвиг заголовка вправо */
      padding-bottom: 5px; /* Небольшой отступ снизу */
    }
 
    /* Оформление таблицы с параметрами системы */
    table {
      font-family: inherit; /* Наследование шрифтов от body */
      font-weight: 700; /* Жирный текст для всех ячеек */
      font-size: 14px; /* Размер шрифта в таблице */
      width: 100%; /* Таблица занимает всю ширину карточки */
      border-collapse: collapse; /* Убирает двойные рамки между ячейками */
      margin: 20px 0; /* Отступы сверху и снизу от таблицы */
    }
 
    /* Стили обычных ячеек */
    td {
      padding: 5px 0; /* Вертикальные отступы внутри строк */
      border-bottom: 1px dashed #bddbc5; /* Пунктирная разделительная линия снизу ячейки */
    }
 
    /* Специальные стили для правой колонки значений */
    td:last-child {
      text-align: left; /* Текст внутри ячейки прижат к левому краю */
      padding-left: 25%; /* Создание большого пустого пространства слева для имитации смещения вправо */
    }
 
    /* Цвет текста для статуса "ОК" */
    .status-ok {
      color: #2e7d32; /* Темно-зеленый цвет */
      font-weight: bold; /* Дополнительное выделение жирным */
    }
 
    /* Текст подсказки */
    .hint {
      font-size: 0.9em; /* Размер чуть меньше основного (90%) */
      color: #666; /* Средне-серый цвет */
      line-height: 1.5; /* Межстрочный интервал для читаемости */
    }
 
    /* Блок сообщения об ошибке */
    .error-msg {
      background: #ffdce0; /* Светло-розовый фон ошибки */
      padding: 2px 20px; /* Минимальные отступы сверху/снизу и широкие сбоку */
      border-radius: 3px; /* Скругление углов фона */
      border-left: 3px solid #d32f2f; /* Жирная красная черта слева для акцента */
      margin-top: 5px; /* Отступ сверху от предыдущего текста */
    }
 
    /* Убираем отступы у параграфа внутри блока ошибки для компактности */
    .error-msg p {
      margin: 0;
    }
 
    /* Стили подвала (авторские права) */
    .footer {
      text-align: center; /* Центрирование текста */
      font-size: 13px; /* Уменьшенный размер шрифта */
      font-style: italic; /* Курсив */
      font-weight: 700; /* Жирный текст */
      color: #888; /* Светло-серый цвет */
      margin-top: 20px; /* Отступ от основной карточки */
    }
 
    /* Цвет ссылок в подвале */
    .footer a { color: #666; }
	
	/* Стили для форм и таблиц */
	.form-table {
		border-collapse: collapse; /* Убирает двойные рамки между ячейками */
		margin-top: 1em;           /* Отступ всей таблицы сверху */
		width: 100%;               /* Таблица растягивается на всю ширину контейнера */
	}
 
	/* Общие стили для заголовков (th) и обычных ячеек (td) */
	.form-table th, 
	.form-table td {
		padding: 10px 20px 10px 0; /* Внутренние отступы: верх 10px, право 20px, низ 10px, лево 0 */
		font-size: 14px;           /* Размер шрифта текста в ячейках */
		vertical-align: top;       /* Выравнивание содержимого по верхнему краю ячейки */
		text-align: left;          /* Выравнивание текста по левому краю */
	}
 
	.form-table th {
		width: 150px;              /* Фиксированная ширина колонки с заголовками */
		font-weight: 600;          /* Делает текст заголовков полужирным */
	}
 
	.form-table p {
		margin: 4px 0 0;           /* Отступ только сверху (4px), чтобы текст под инпутом не прилипал */
		font-size: 12px;           /* Уменьшенный шрифт для пояснительного текста */
		color: #666;               /* Серый цвет текста для второстепенной информации */
	}
 
	.form-table input {
		width: 100%;               /* Инпут занимает всю доступную ширину ячейки */
		font-size: 12px;           /* Размер шрифта внутри поля ввода */
		padding: 5px;              /* Внутренний отступ текста от краев инпута */
		box-sizing: border-box;    /* Включает padding в ширину 100%, чтобы инпут не вылезал за границы */
	}
 
	.form-table select {
		width: 100%;               /* Инпут занимает всю доступную ширину ячейки */
		font-size: 12px;           /* Размер шрифта внутри поля ввода */
		padding: 5px;              /* Внутренний отступ текста от краев инпута */
		box-sizing: border-box;    /* Включает padding в ширину 100%, чтобы инпут не вылезал за границы */
	}
  </style>
  <!--  Конец стилей установщика	-->
</head>
<body>
 
<!-- Ограничивающий контейнер по центру экрана -->
<div class="install-container"> 
    <!-- Основная «зеленая» карточка -->
    <div class="install-card"> 
		<!-- Заголовок блока -->
		<div class="install-title">Установка UCMS Demo</div> 
		<!--  Конец блока заголовка -->
		<!--  ******************************************* -->
		<!--  ** Начало блока вставки файлов программы ** -->
		<!--  ******************************************* -->

Откроем файл install.php и запишем в него первую строчку кода (подключение файла шапки):

install.php

<?php require_once 'tpl/tpl_install_header.php'; // Открывает HTML ?>

и следом добавим текст - заглушку «Lorem ipsum» для визуального восприятия, в результате чего install.php будет иметь следующий вид:

install.php

<?php require_once 'tpl/tpl_install_header.php'; // Открывает HTML ?>
<h3>Классический текст Lorem Ipsum, используемый с XVI века</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
officia deserunt mollit anim id est laborum."</p> 

Откроем файл install.php в бразере, перейдя по ссылке http://localhost/ucms/library/install/install.php

Мы видим, что современный браузер пытается отображает страницу в законченном виде, но код «подвала» выводящий авторство, права и т.д. не отображается, поскольку браузер ничего об этом не знает.

tpl_install_footer.php — это файл-шаблон, который отвечает за «подвал» (нижнюю часть) страницы установки.
Если header открывает страницу, то footer её корректно закрывает.
В структуре типичного инсталлятора он выполняет следующие функции:

• Закрытие тегов: В нем прописываются закрывающие теги </div>, </body> и </html>.
• Авторские права (Copyright): Отображение версии вашего скрипта, ссылки на сайт разработчика или поддержку.
• Подключение скриптов: Здесь обычно подключаются тяжелые JS-файлы (jQuery, Bootstrap и т.д.), чтобы они не замедляли загрузку визуальной части страницы.Визуальное завершение:
• Дизайн нижней границы контейнера установки.

Пример типичного содержимого footer.php:

footer.php

    <footer class="install-footer">
        <hr>
        <p>&copy; <?= date('Y') ?> MyCMS Installer v1.0. Все права защищены.</p>
    </footer>
</div> <!-- Закрытие контейнера из header -->
<script src="js/main.js"></script>
</body>
</html>

В файл tpl_install_footer.php скопируем из файла шаблона sample_install.php весь код от начала комментария:

до конца страницы

tpl_install_footer.php

                        <!--  ****************************************** -->
			<!--  ** Конец блока вставки файлов программы ** -->
			<!--  ****************************************** -->
    </div><!-- Конец блока основная «зеленая» карточка -->
	<!-- Подвал страницы с копирайтом и версией -->
		<div class="footer">
			<p>
				Author: <a href="mailto:PolskiyVN@gmail.com">VladPolskiy</a> &copy; 2024-2025
				<a href="https://UniversalCMS-ce.ovh/" target="_blank">UniversalCMS CE</a> – Ver: 1.2.10
			</p>
		</div>
</div>
</body>
</html>

Откроем файл install.php и запишем конце строчку кода (подключение файла «подвала»):

install.php

<?php require_once 'tpl/tpl_install_footer.php'; // Закрываем HTML ?>

Сохраняем изменения, в результате которых install.php будет иметь следующий вид:

install.php

<?php require_once 'tpl/tpl_install_header.php'; // Открывает HTML ?>
<h3>Классический текст Lorem Ipsum, используемый с XVI века</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
officia deserunt mollit anim id est laborum."</p>
<?php require_once 'tpl/tpl_install_footer.php'; // Закрываем HTML ?> 

Откроем файл install.php в бразере, перейдя по ссылке http://localhost/ucms/library/install/install.php

Браузер полностью отображает страницу, включая «подвал» с данными об авторстве и правах.

install.css — это файл каскадных таблиц стилей, который отвечает за внешний вид (дизайн) шаблона. Если PHP-файлы отвечают за логику и данные, то install.css делает так, чтобы таблицы не «разваливались», кнопки были красивыми, а ошибки — заметными (красными). Необходимость в проекте приложения:

• Оформление таблиц: Настройка отступов (padding), границ (border) и выравнивания в тех самых строках, которые мы сокращали.
• Стилизация статусов: Оформление блоков с ошибками (красный фон) или успешными проверками (зеленый текст).
• Адаптивность: Чтобы окно установки хорошо выглядело и на компьютере, и на телефоне.
• Кнопки: Стили для кнопок «Далее» и «Обновить» (цвет, наведение курсора, размеры).

Пример типового содержимого style.css:

style.css

/* Основной контейнер (из tpl_install_header.php) */
.install-box {
    width: 100%;
    max-width: 600px;
    margin: 40px auto;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    background: #fff;
}
 
/* Стили таблицы с проверками */
table {
    width: 100%;
    border-collapse: collapse;
}
 
td {
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
}

В директории ./ucms/library/install/css откроем в редакторе файл install.css. Из файла «шапки» tpl_install_header.php вырежем (Ctrl+X) весь код стилей от начала комментария (после тега <style>):

до конца кода стилей (до закрывающего тега </style>):

и вставим (Ctrl+V) вырезанный код стилей в файл install.css, в результате чего файл получит следующий вид:

install.css

    /* Настройки всей видимой части страницы */
    body {
      font-family: "Times New Roman", Times, serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Приоритет шрифта с засечками, далее системные шрифты */
      background: linear-gradient(to bottom, #ffffff 0%, #E0E0E0 100%); /* переход от белого до светлый серый */
      display: flex; /* Включение гибкой верстки для выравнивания содержимого */
      justify-content: center; /* Центрирование контейнера по горизонтали */
      /*align-items: center; /* Центрирование контейнера по вертикали */
      min-height: 100vh; /* Минимальная высота body — 100% высоты окна просмотра */
      margin: 0; /* Удаление стандартных внешних отступов браузера */
      color: #333; /* Основной цвет текста (темно-серый) */
    }
 
    /* Внешняя обертка для карточки установки */
    .install-container {
      width: 100%; /* Растягивание на всю доступную ширину */
      max-width: 700px; /* Ограничение максимальной ширины в 700 пикселей */
      padding: 20px; /* Внутренние отступы от краев экрана */
	  margin: 20px auto 0; /* Отступ 20px сверху, авто-отступы по бокам */
    }
 
    /* Основная карточка с контентом */
    .install-card {
      border: 2px #808080 solid; /* Серая сплошная рамка толщиной 2px */
      background: #e3ffec; /* Светло-зеленый фон как на скриншоте */
      border-radius: 5px; /* Скругление углов рамки на 5px */
      padding: 15px; /* Внутренний отступ от рамки до текста */
      box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.5); /* Глубокая тень: смещение вниз, размытие и полупрозрачный черный цвет */
    }
 
    /* Стили верхнего заголовка внутри карточки */
    .install-title {
      font-size: 18px; /* Размер шрифта заголовка */
      font-style: italic; /* Написание курсивом */
      font-weight: 700; /* Жирное начертание */
      color: #808080; /* Серый цвет текста */
      margin-left: 25px; /* Сдвиг заголовка вправо */
      padding-bottom: 5px; /* Небольшой отступ снизу */
    }
 
    /* Оформление таблицы с параметрами системы */
    table {
      font-family: inherit; /* Наследование шрифтов от body */
      font-weight: 700; /* Жирный текст для всех ячеек */
      font-size: 14px; /* Размер шрифта в таблице */
      width: 100%; /* Таблица занимает всю ширину карточки */
      border-collapse: collapse; /* Убирает двойные рамки между ячейками */
      margin: 20px 0; /* Отступы сверху и снизу от таблицы */
    }
 
    /* Стили обычных ячеек */
    td {
      padding: 5px 0; /* Вертикальные отступы внутри строк */
      border-bottom: 1px dashed #bddbc5; /* Пунктирная разделительная линия снизу ячейки */
    }
 
    /* Специальные стили для правой колонки значений */
    td:last-child {
      text-align: left; /* Текст внутри ячейки прижат к левому краю */
      padding-left: 25%; /* Создание большого пустого пространства слева для имитации смещения вправо */
    }
 
    /* Цвет текста для статуса "ОК" */
    .status-ok {
      color: #2e7d32; /* Темно-зеленый цвет */
      font-weight: bold; /* Дополнительное выделение жирным */
    }
 
    /* Текст подсказки */
    .hint {
      font-size: 0.9em; /* Размер чуть меньше основного (90%) */
      color: #666; /* Средне-серый цвет */
      line-height: 1.5; /* Межстрочный интервал для читаемости */
    }
 
    /* Блок сообщения об ошибке */
    .error-msg {
      background: #ffdce0; /* Светло-розовый фон ошибки */
      padding: 2px 20px; /* Минимальные отступы сверху/снизу и широкие сбоку */
      border-radius: 3px; /* Скругление углов фона */
      border-left: 3px solid #d32f2f; /* Жирная красная черта слева для акцента */
      margin-top: 5px; /* Отступ сверху от предыдущего текста */
    }
 
    /* Убираем отступы у параграфа внутри блока ошибки для компактности */
    .error-msg p {
      margin: 0;
    }
 
    /* Стили подвала (авторские права) */
    .footer {
      text-align: center; /* Центрирование текста */
      font-size: 13px; /* Уменьшенный размер шрифта */
      font-style: italic; /* Курсив */
      font-weight: 700; /* Жирный текст */
      color: #888; /* Светло-серый цвет */
      margin-top: 20px; /* Отступ от основной карточки */
    }
 
    /* Цвет ссылок в подвале */
    .footer a { color: #666; }
 
	/* Стили для форм и таблиц */
	.form-table {
		border-collapse: collapse; /* Убирает двойные рамки между ячейками */
		margin-top: 1em;           /* Отступ всей таблицы сверху */
		width: 100%;               /* Таблица растягивается на всю ширину контейнера */
	}
 
	/* Общие стили для заголовков (th) и обычных ячеек (td) */
	.form-table th, 
	.form-table td {
		padding: 10px 20px 10px 0; /* Внутренние отступы: верх 10px, право 20px, низ 10px, лево 0 */
		font-size: 14px;           /* Размер шрифта текста в ячейках */
		vertical-align: top;       /* Выравнивание содержимого по верхнему краю ячейки */
		text-align: left;          /* Выравнивание текста по левому краю */
	}
 
	.form-table th {
		width: 150px;              /* Фиксированная ширина колонки с заголовками */
		font-weight: 600;          /* Делает текст заголовков полужирным */
	}
 
	.form-table p {
		margin: 4px 0 0;           /* Отступ только сверху (4px), чтобы текст под инпутом не прилипал */
		font-size: 12px;           /* Уменьшенный шрифт для пояснительного текста */
		color: #666;               /* Серый цвет текста для второстепенной информации */
	}
 
	.form-table input {
		width: 100%;               /* Инпут занимает всю доступную ширину ячейки */
		font-size: 12px;           /* Размер шрифта внутри поля ввода */
		padding: 5px;              /* Внутренний отступ текста от краев инпута */
		box-sizing: border-box;    /* Включает padding в ширину 100%, чтобы инпут не вылезал за границы */
	}
 
	.form-table select {
		width: 100%;               /* Инпут занимает всю доступную ширину ячейки */
		font-size: 12px;           /* Размер шрифта внутри поля ввода */
		padding: 5px;              /* Внутренний отступ текста от краев инпута */
		box-sizing: border-box;    /* Включает padding в ширину 100%, чтобы инпут не вылезал за границы */
	}

В файле tpl_install_header.php в месте вырезанного кода стилей запишем следующую строчку кода (подключение файла стилей):

tpl_install_header.php

  <?php include __DIR__ . '/../css/install.css';?>

В результате вставки кода, место выреза, имеет следующий вид:

которая подключит наш файл стилей install.css, в результате чего tpl_install_header.php будет иметь следующий вид:

tpl_install_header.php

<!-- Объявление типа документа: сообщает браузеру, 
что используется современный стандарт HTML5 -->
<!DOCTYPE html> 
<!-- Начало документа, атрибут lang="ru" указывает 
поисковикам и браузерам, что основной язык страницы — русский -->
<html lang="ru"> 
<head>
  <!-- Установка кодировки UTF-8 для корректного отображения 
  кириллицы и спецсимволов -->
  <meta charset="UTF-8"> 
  <!-- Адаптация страницы под ширину экрана мобильных устройств -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <!-- Заголовок вкладки браузера -->
  <title>Установка UCMS Demo</title> 
  <!--  Начало стилей установщика, мы не выносим стили в отдельный файл, т.к.
  эти стили нужны только в этом файле. После установки приложения эта папка 
  будет удалена.	-->
  <style>
	<?php include __DIR__ . '/../css/install.css';?>
  </style>
  <!--  Конец стилей установщика	-->
</head>
<body>
  <!-- Ограничивающий контейнер по центру экрана -->
  <div class="install-container"> 
    <!-- Основная «зеленая» карточка -->
    <div class="install-card"> 
	  <!-- Заголовок блока -->
      <div class="install-title">Установка UCMS Demo</div> 
	   	<!--  Конец блока заголовка -->
	    <!--  ******************************************* -->
	    <!--  ** Начало блока вставки файлов программы ** -->
	    <!--  ******************************************* --> 

Откроем файл install.php в бразере, перейдя по ссылке http://localhost/ucms/library/install/install.php

Браузер отображает страницу install.php в законченном виде, включая «шапку» (tpl_install_header.php) с подкьченным файлом стилей (install.css) и «подвал»(tpl_install_footer.php). Этот код предназначен для встраивания (инлайнинга) содержимого CSS-файла напрямую в HTML-структуру страницы с помощью PHP.
Комментарий к коду:

1. <style> ... </style>: Это стандартные HTML-теги, которые говорят браузеру, что внутри находится CSS-код, применимый к текущей странице.
2. <?php ... ?>: Вставка PHP-кода, который исполняется на стороне сервера перед тем, как страница будет отправлена пользователю.
3. include: Команда PHP, которая берет всё содержимое указанного файла и вставляет его в это место «как есть».
4. __DIR__: Константа, которая возвращает абсолютный путь к папке, где лежит текущий PHP-файл.
5. '/../css/install.css': Путь к файлу стилей. Символы .. означают выход на один уровень вверх из текущей папки, а затем переход в папку css.

Плюсы:

• Ускорение загрузки (Critical Path): Браузеру не нужно делать дополнительный HTTP-запрос за отдельным CSS-файлом. Стили применяются мгновенно, что исключает «скачок» нестилизованного контента (FOUC).
• Автономность: Это часто используется в скриптах установки (судя по названию install.css), чтобы страница корректно выглядела, даже если пути к внешним ресурсам еще не настроены.

Минусы:

• Отсутствие кэширования: Браузер не сможет закэшировать этот CSS отдельно. Он будет скачиваться заново при каждой загрузке страницы вместе с HTML.
• Объем страницы: Если CSS-файл очень большой, это увеличит размер HTML-документа, что может замедлить первую отрисовку.

В этой главе руководства мы получили входной шаблон install.php с прикрепленными файлами. Проведем небольшую корректировку полученных файлов, а именно, удалим лишние коментарии, чтобы облегчить размер страницы и увеличить скорость загрузки, а так же проверки наличия подключаемых файлов.

Примечание
Удаляя лишние из готового шаблона, мы оставляем файл sample_install.php в первоночальном виде, со всеми комментариями. На его основе будут сверстаны в дальнейшем другие шаблоны. Так-же файл sample_install.php будет являться тестовым файлом для наглядности примеров.

Блок вставки стилей

tpl_install_header.php

  <style>
	<?php include __DIR__ . '/../css/install.css';?>
  </style>

1. Чтобы сделать этот вызов безопасным и более правильным с точки зрения разработки, стоит добавить проверку наличия файла и использовать функцию для чтения содержимого.

tpl_install_footer.php

<style>
    <?php
    $cssPath = __DIR__ . '/../css/install.css';
    if (file_exists($cssPath)) {
        echo file_get_contents($cssPath);
    }
    ?>
</style>

2. Для чистого кода большинство стандартных тегов (вроде DOCTYPE или charset) комментировать не принято, так как их назначение очевидно любому разработчику. Стоит оставить только те комментарии, которые объясняют логику приложения.
Оптимальный вариант:

tpl_install_header.php

<!DOCTYPE html> 
<html lang="ru"> 
<head>
	<meta charset="UTF-8"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<title>Установка UCMS Demo</title> 
		<style>
			/* Вставка стилей инлайном, так как папка установки будет удалена после завершения */
			<?php
			$cssPath = __DIR__ . '/../css/install.css';
			if (file_exists($cssPath)) {
				echo file_get_contents($cssPath);
			}
			?>
		</style>
</head>
<body>
	<div class="install-container"> 
		<div class="install-card"> 
			<div class="install-title">Установка UCMS Demo</div> 
 
			<!-- Блок вставки файлов программы -->

1.Для чистого кода в этом блоке достаточно одного краткого комментария. Все закрывающие теги и так понятны из структуры HTML.
Оптимальный вариант:

tpl_install_footer.php

			<!-- Конец блока вставки файлов программы -->
		</div>
		<!-- Подвал страницы с копирайтом и версией -->
		<div class="footer">
		  <p>
			Author: <a href="mailto:PolskiyVN@gmail.com">VladPolskiy</a> &copy; 2024-2025
			<a href="https://UniversalCMS-ce.ovh/" target="_blank">UniversalCMS CE</a> – Ver: 1.2.10
		  </p>
		</div>
	</div>
</body>
</html>

В CSS-коде обычно оставляют комментарии только для сложных логических решений или для визуального разделения крупных секций. Описание стандартных свойств (вроде color или margin) считается избыточным. Пример оформленного CSS кода:

install.css

    /* Базовые настройки страницы */
    body {
      font-family: "Times New Roman", Times, serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background-color: #f4f7f6;
      display: flex;
      justify-content: center;
      min-height: 100vh;
      margin: 0;
      color: #333;
    }
 
    .install-container {
      width: 100%;
      max-width: 700px;
      padding: 20px;
      margin: 20px auto 0;
    }
 
    /* Карточка установщика */
    .install-card {
      border: 2px #808080 solid;
      background: #e3ffec;
      border-radius: 5px;
      padding: 15px;
      box-shadow: 0 15px 25px -4px rgba(0, 0, 0, 0.5);
    }
 
    .install-title {
      font-size: 18px;
      font-style: italic;
      font-weight: 700;
      color: #808080;
      margin-left: 25px;
      padding-bottom: 5px;
    }
 
    /* Стили таблицы параметров */
    table {
      font-family: inherit;
      font-weight: 700;
      font-size: 14px;
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
    }
 
    td {
      padding: 5px 0;
      border-bottom: 1px dashed #bddbc5;
    }
 
    td:last-child {
      text-align: left;
      padding-left: 25%; /* Смещение значений вправо */
    }
 
    .status-ok {
      color: #2e7d32;
      font-weight: bold;
    }
 
    /* Служебные блоки: подсказки и ошибки */
    .hint {
      font-size: 0.9em;
      color: #666;
      line-height: 1.5;
    }
 
    .error-msg {
      background: #ffdce0;
      padding: 2px 20px;
      border-radius: 5px;
      border-left: 5px solid #d32f2f;
      margin-top: 5px;
    }
 
    .error-msg p {
      margin: 0;
    }
 
    .footer {
      text-align: center;
      font-size: 13px;
      font-style: italic;
      font-weight: 700;
      color: #888;
      margin-top: 20px;
    }
 
    .footer a { color: #666; }
 
    /* Стили для табличных форм ввода */
    .form-table {
        border-collapse: collapse;
        margin-top: 1em;
        width: 100%;
    }
 
    .form-table th, 
    .form-table td {
        padding: 10px 20px 10px 0;
        font-size: 14px;
        vertical-align: top;
        text-align: left;
    }
 
    .form-table th {
        width: 150px;
        font-weight: 600;
    }
 
    /* Пояснительный текст под полями ввода */
    .form-table p {
        margin: 4px 0 0;
        font-size: 12px;
        color: #666;
    }
 
    .form-table input,
    .form-table select {
        width: 100%;
        font-size: 12px;
        padding: 5px;
        box-sizing: border-box; /* Гарантирует, что поля не выходят за границы ячеек */
    }

Оптимизация кода install.php заключается в добавлении семантики, улучшении структуры текста для удобства чтения и добавлении поясняющих комментариев для поддержки кода.

index.php

<?php 
/**
 * Шаблон мастера установки (Index)
 * Подключает заголовок, выводит контент.
 */
require_once 'tpl/tpl_install_header.php'; 
?>
 
<main class="install-content">
	<p>
		На этом этапе система проверяет совместимость вашего сервера с минимальными требованиями. 
		Будут проверены версия PHP, наличие необходимых расширений (PDO, GD, cURL) и права доступа 
		к ключевым директориям проекта.
	</p> 
 
	<p>
		Если все параметры соответствуют норме, вы сможете перейти к настройке базы данных 
		и созданию учетной записи администратора в следующем шаге.
	</p>
</main>
 
<?php 
/* Закрывающий шаблон: выводит подвал страницы и закрывает HTML-теги. */
require_once 'tpl/tpl_install_footer.php'; 
?>