worldwide open-source software - software:development:demo:cms:ucms:application_template

admin_panel

anonymous@undisclosed.example.com (Anonymous) — Fri, 01 May 2026 12:30:53 +0000

11.2 Шаблон приложения admin panel (панель администратора)

Вкладки панели:

Общие данные о системе/ обращения в службу поддержки
Последние записи/загрузки/регистрации/комментарии
Настройка приложения
Редактор пользователей
Редактор постов
Редактор книг

3.0. Фиксированное боковое меню с иконками

11.2.2 Разделы таблицы пользователей

Таблица: user
Столбцы:

Столбцы:

 
ID	bigint(20) unsigned	1  //	Идентификатор участника. Значение уникально в пределах базы данных.
user_login	varchar(60)	// Логин пользователя
user_name	varchar(50)	// Имя пользователя
user_pass	varchar(255) // $P$BDlXirvmbPyk0sa/iNyQvoP4JOxG7G/
user_token	varchar(255) // ---$P$BDlXirvmbPyk0sa/iNyQvoP4JOxG7G/---
user_activation_key	varchar(255) //код активации для востановления по почте	
user_otp  //Двухфакторная аутентификация вкл/выкл
 
user_ip
 
user_rating  // Рейтинг пользователя
user_ban    //Временная (таймерная) вкл/выкл
user_block  //постоянная блокировка вкл/выкл
 
user_tel   //  номер телефона (уникальный) пользователя
user_study   //  место учебы пользователя
user_job   //  место работы пользователя
user_city  //  место проживания пользователя
 
user_email	varchar(100) example@gmail.com  //  Email (уникальный) пользователя
user_url	varchar(100) https://example.ru //  Url (уникальный) пользователя
user_registered	datetime	2024-12-22 14:54:42   // Дата регистрации пользователя
 
user_status	int(11)	 0        //Статус активности
user_about      // Раздел о пользователе
user_avatar     varchar(100) // Адрес загруженного фото пользователя
 
user_type       varchar(128) // Описание типа участника. user/admin/gost/editor/
user_group       varchar(128) // Описание группы участника. blog/video/book

install

anonymous@undisclosed.example.com (Anonymous) — Sat, 02 May 2026 14:25:57 +0000

11.1. Шаблон модуля install (application installation)

Вкладки панели:

Общие данные о системе/ обращения в службу поддержки
Последние записи/загрузки/регистрации/комментарии
Настройка приложения
Редактор пользователей
Редактор постов
Редактор книг

Фоновое изображение

Градиент от белого к небесно-голубому

Рекомендуемые варианты фона: Мягкий градиент:Переход от белого к небесно-голубому. Это добавит глубины, не перегружая визуальное восприятие.

Салатовый градиент

Природный «землистый» фон:Светло-бежевый хорошо гармонируют с зеленым, создавая более мягкое и дружелюбное впечатление от интерфейса.

Светло бежевый с частицами

Градиент от белого к небесно - голубому

Градиент от белого к светло - серому

Чистый белый или светло-серый:Классический выбор для ИТ-интерфейсов. Белый цвет (#FFFFFF) или очень светлый серый (#F5F5F5) создаст эффект «чистого холста» и сделает акцент на самом информационном блоке.

particles-js настройка

Настройка particles.js включает подключение библиотеки, создание контейнера (HTML) и инициализацию (JSON-конфиг). Ключевые параметры: плотность (number), размер (size), скорость (move), взаимодействие (interactivity). Для работы как фона важно задать position: absolute и z-index. Используйте генератор для визуальной настройки. 1. Подключение и HTML
Скачайте particles.min.js и подключите его в HTML. Создайте блок для анимации:

index.html

<div id="particles-js"></div>
<script src="particles.min.js"></script>

2. Стили (CSS) Чтобы частицы работали как фон:

style.css

#particles-js {
  position: absolute; /* или fixed */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1; /* под контент */
}

3. Инициализация (JS)

script.js

javascriptparticlesJS.load('particles-js', 'particles.json', function() {
  console.log('particles.js loaded');
});

4. Основные настройки (particles.json)

particles.number: value - количество частиц
particles.color: value - цвет (hex, rgb)
particles.shape: тип (circle, edge, triangle)
particles.opacity: прозрачность
particles.size: размер частиц
particles.line_linked: настройки линий между частицами (enable: true/false)
particles.move: speed (скорость), direction (направление)
interactivity: onhover (реакция на наведение), onclick (на клик).

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

см. также:

sample

anonymous@undisclosed.example.com (Anonymous) — Sat, 02 May 2026 05:36:05 +0000

11.9. Шаблон приложения sample (общий образец)

Общий образец занимает всю площадь экрана и имеет слева панель бургер, плюс в верхней части не сдвигаемое меню

3.0. Фиксированное боковое меню с иконками

social_network

anonymous@undisclosed.example.com (Anonymous) — Sat, 02 May 2026 05:35:39 +0000

11.8. Шаблон приложения sns (социальная сеть)

Шаблон социальной сити в синих тонах (pigeon - голубь)
шаблоны главная

либо
Шаблон социальной сити в синих тонах (в кадре - in the frame)

sample.html

<!doctype html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8">
    <!-- запрет автоперевода перевода google translate -->
    <meta name="google" content="notranslate">
	<!-- отображение файктической ширины экрана для адаптивного дизайна -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sample.html</title>
    <link
      href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One"
      rel="stylesheet"
      type="text/css" />
    <!-- следующие 3 строки нужны для корректного отображения семантических элементов HTML5 в старых версиях Internet Explorer-->
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
	<!-- блок стилей css -->
<style>
html {
    width: 100%; /* Ширина 100% */
    margin: 0;
    padding: 0;
}
body {
 
	width: 960px; /* Задает ширину 960px от вьюпорта */
	max-width: 90%; /* Но не шире 90% экрана */
	margin: 0 auto; /* Центрирует контент */
	box-sizing: border-box; /* Учитывает padding внутри ширины */
 
}
 
.user_profile {
  display: flex;
  flex-direction: column;
 
}
 
.user_profile_preload {
  background-position: center; /* Центрирование */
  width: 100%;
  height: 250px;
 
 
	object-fit: cover; /* Ключевое свойство: обрезка с сохранением пропорций */
 
 
}
 
 
 
.user_profile_images {
  position: relative; /* Для позиционирования наложения */
  top: -75px; /* Отступ сверху */
  left: 75px; /* Отступ слева */
  z-index: 10; /* Поверх базовой картинки */
  width: 50px; /* Размер наложения */
  width: 150px;
  height: 150px;
  overflow: hidden; /* Обрезает все, что выходит за круг */
  border-radius: 50%; /* Делает контейнер круглым [1] */
  border: 3px solid #fff;
}
 
.user_profile_nav {
  background-position: center; /* Центрирование */
  width: 100%;
  height: 92px;
 
}
 
.user_profile_name {   
  background-position: center; /* Центрирование */
 
  height: 60px;
  line-height: 60px; /* Высота строки равна высоте блока */
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;       /* Жирный шрифт */
  font-style: italic;   /* Делает шрифт наклонным (курсив) */
  color: #0866FF; /* основной синий цвет */
  font-size: 40px; /* Размер шрифта 40 пикселей */
  padding-left: 250px; /* Отступ 250px слева */
 
 
}
.user_profile_navbar {
  background-position: center; /* Центрирование */
  height: 30px;
  line-height: 30px; /* Высота строки равна высоте блока */
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;       /* Жирный шрифт */
  font-style: italic;   /* Делает шрифт наклонным (курсив) */
  color: #0866FF; /* основной синий цвет */
  font-size: 15px; /* Размер шрифта 20 пикселей */
  padding-left: 250px; /* Отступ 250px слева */  
 
 
}
 
.nav-list {
 
  display: flex; /* Горизонтальное расположение */
  list-style-type: none; /* Убираем маркеры списка */
  padding: 0;
  margin: 0;
  gap: 20px; /* Расстояние между пунктами */
}
 
.nav-list a {
  text-decoration: none; /* Убираем стандартное подчеркивание */
  display: block;
  transition: border-color 0.3s; /* Плавный эффект */
  border-bottom: 2px solid transparent; /* Линия прозрачна по умолчанию */
}
 
.nav-list a:hover {
  border-bottom: 2px solid #0866FF; /* Подчеркивание при наведении */
}
 
.nav-list a.active {
  border-bottom: 2px solid #0866FF;
}
/* Конец блока  */
 
.user_block_content {
    display: grid;
    grid-template-columns: 30% 70%; /* Две колонки 30% 70%; */
    gap: 10px;
 
 
}
.user_block_sadebar {
 
 
}
 
.user_block_sadebar_info {
 
    /* Светло-серый бордюр 1px */
  border: 1px solid #dcdcdc; 
  /* Мягкая тень: x-смещение, y-смещение, размытие, цвет */
  box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);
  /* Дополнительно: скругление углов */
  border-radius: 5px;
  /* Отступы внутри блока */
 
  /* Цвет фона, чтобы блок не был прозрачным */
  background-color: #fff;
  margin-top: 10px; — /* отступ сверху */
  margin-bottom: 10px; — /* отступ снизу */
}
 
.user_block_sadebar_info_paragraph {
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;       /* Жирный шрифт */
  font-style: italic;   /* Делает шрифт наклонным (курсив) */
  color: #0866FF; /* основной синий цвет */
  font-size: 15px; /* Размер шрифта 15 пикселей */
  padding-left: 10px; /* Отступ 10px слева */  
 
}
.user_block_sadebar_info_field {
  padding-left: 20px;
}
 
 
 
/* Блок фото */
 
.user_block_sadebar_photo {
    /* Светло-серый бордюр 1px */
  border: 1px solid #dcdcdc; 
  /* Мягкая тень: x-смещение, y-смещение, размытие, цвет */
  box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);
  /* Дополнительно: скругление углов */
  border-radius: 5px;
  /* Отступы внутри блока */
 
  /* Цвет фона, чтобы блок не был прозрачным */
  background-color: #fff;
  margin-top: 10px; — /* отступ сверху */
  margin-bottom: 10px; — /* отступ снизу */
}
 
.user_block_sadebar_photo_paragraph {
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;       /* Жирный шрифт */
  font-style: italic;   /* Делает шрифт наклонным (курсив) */
  color: #0866FF; /* основной синий цвет */
  font-size: 15px; /* Размер шрифта 15 пикселей */
  padding-left: 10px; /* Отступ 10px слева */  
 
}
 
.user_block_sadebar_photo_field {
 
 display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 колонки одинаковой ширины */
  gap: 10px; /* Отступы между блоками */
  padding: 10px;
 
 
}
 
 
 
.photo-item {
}
 
.photo-item img{
width: 100%; 
aspect-ratio: 1 / 1; /* Высота равна ширине */ 
object-fit: cover;
  /* Дополнительно: скругление углов */
  border-radius: 3px;
}
 
 
/* Блок видео */
 
 
.user_block_sadebar_video {
    /* Светло-серый бордюр 1px */
  border: 1px solid #dcdcdc; 
  /* Мягкая тень: x-смещение, y-смещение, размытие, цвет */
  box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);
  /* Дополнительно: скругление углов */
  border-radius: 5px;
  /* Отступы внутри блока */
 
  /* Цвет фона, чтобы блок не был прозрачным */
  background-color: #fff;
  margin-top: 10px; — /* отступ сверху */
  margin-bottom: 10px; — /* отступ снизу */
}
 
.user_block_sadebar_video_paragraph {
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;       /* Жирный шрифт */
  font-style: italic;   /* Делает шрифт наклонным (курсив) */
  color: #0866FF; /* основной синий цвет */
  font-size: 15px; /* Размер шрифта 15 пикселей */
  padding-left: 10px; /* Отступ 10px слева */  
 
}
 
.user_block_sadebar_video_field {
 
 display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 колонки одинаковой ширины */
  gap: 10px; /* Отступы между блоками */
  padding: 10px;
 
 
}
 
 
 
.video-item {
}
 
.video-item video{
width: 100%; 
aspect-ratio: 1 / 1; /* Высота равна ширине */ 
object-fit: cover;
  /* Дополнительно: скругление углов */
  border-radius: 3px;
}
 
 
 
 
/*Блок контента в правой части*/
 
.user_block_content_main {
    /* Светло-серый бордюр 1px */
  border: 1px solid #dcdcdc; 
  /* Мягкая тень: x-смещение, y-смещение, размытие, цвет */
  box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);
  /* Дополнительно: скругление углов */
  border-radius: 5px;
  /* Отступы внутри блока */
 
  /* Цвет фона, чтобы блок не был прозрачным */
  background-color: #fff;
  margin-top: 10px; — /* отступ сверху */
  margin-bottom: 10px; — /* отступ снизу */
 
}
 
.user_block_content_header {
  height: 60px;
 
 
 
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;       /* Жирный шрифт */
  font-style: italic;   /* Делает шрифт наклонным (курсив) */
  color: #0866FF; /* основной синий цвет */
  font-size: 20px; /* Размер шрифта 20 пикселей */
  padding-left: 80px; /* Отступ 80px слева */ 
 
 
 
}
 
.user_profile_images_small {
  position: relative; /* Для позиционирования наложения */
  top: -42px; /* Отступ сверху */
  left: -70px; /* Отступ слева */
  z-index: 20; /* Поверх базовой картинки */
  width: 50px; /* Размер наложения */
  height: 50px;
  overflow: hidden; /* Обрезает все, что выходит за круг */
  border-radius: 50%; /* Делает контейнер круглым */
 
}
 
 
.user_block_content_field {
  position: relative; /* Для позиционирования наложения */
  padding-left: 10px; /* Отступ 10px слева */ 
}
 
.user_block_content_field img{
width: 98%; 
  height: 250px;
object-fit: cover;
  /* Дополнительно: скругление углов */
  border-radius: 3px;
 
 
 
 
}
 
 
 
 
 
</style>
  </head>
  <body>
    <!-- Вот наш главный заголовок, который используется на всех страницах нашего веб-сайта -->
    <header>
	    </header>
    <!-- Контейнер изображения (фона) профиля на котором будут распологаться кнопки меню
         фото профиля, логотип приложени, имя пользователя	-->	 
		<div class = "user_profile">
		     <!-- Контейнер изображения (фона) профиля -->	
			<div class = "user_profile_preload"> 
			<img src="./images/moscow_city.jpg" alt="preload" style="width: 100%; height: 100%; object-fit: cover; border-radius: 0 0 5px 5px;">
			 <!-- Контейнер изображения профиля -->	
			<div class = "user_profile_images"> 
		       <img src="./images/photographer.jpg" alt="photo" class="circle-img">
 
			</div>			    
 
			</div>	
 
		     <!-- Контейнер имя профиля -->	
 
 
				<div class = "user_profile_nav"> 
 
		     <!-- Контейнер имя профиля -->	
					<div class = "user_profile_name"> 
					Alisa Sokolova
					</div>	
 
		     <!-- Контейнер меню профиля -->	
					<div class = "user_profile_navbar"> 
					<nav class="navbar">
  <ul class="nav-list">
    <li><a class="active" href="#">Публикации</a></li>
    <li><a href="#">Информация</a></li>
    <li><a href="#">Видео</a></li>
    <li><a href="#">Фото</a></li>
  </ul>
</nav>
					</div>	
				</div>	
 
		</div>
    <!-- Блок контента и сейдбара -->
					<div class = "user_block_content"> 
 
					<div class = "user_block_sadebar"> 
					<div class = "user_block_sadebar_info"> 
					<div class = "user_block_sadebar_info_paragraph"> 
					Краткая информация
					</div>
					<div class = "user_block_sadebar_info_field"> 					
					сайт:</br>
					адрес:</br>
					почта:
					</div>
					</div>
 
 
					<div class = "user_block_sadebar_photo"> 
					<div class = "user_block_sadebar_photo_paragraph">
					Фото 
					</div>
					<div class = "user_block_sadebar_photo_field">
  <div class="photo-item"><img src="./images/photo_1.jpg" alt="preload"></div>
  <div class="photo-item"><img src="./images/photo_2.jpg" alt="preload"></div>
  <div class="photo-item"><img src="./images/photo_3.jpg" alt="preload"></div>
  <div class="photo-item"><img src="./images/photo_4.jpg" alt="preload"></div>
  <div class="photo-item"><img src="./images/photo_5.jpg" alt="preload"></div>
  <div class="photo-item"><img src="./images/photo_6.jpg" alt="preload"></div>
  <div class="photo-item"><img src="./images/photo_7.jpg" alt="preload"></div>
  <div class="photo-item"><img src="./images/photo_8.jpg" alt="preload"></div>
  <div class="photo-item"><img src="./images/photo_9.jpg" alt="preload"></div>
					</div>
 
					</div>
 
 
 
					<div class = "user_block_sadebar_video"> 
					<div class = "user_block_sadebar_video_paragraph">
					Видео 
					</div>
 
 
					<div class = "user_block_sadebar_video_field">
  <div class="video-item"><video src="./images/video_1.mp4" alt="preload"></div>
  <div class="video-item"><video src="./images/video_2.mp4" alt="preload"></div>
  <div class="video-item"><video src="./images/video_3.mp4" alt="preload"></div>
  <div class="video-item"><video src="./images/video_4.mp4" alt="preload"></div>
  <div class="video-item"><video src="./images/video_5.mp4" alt="preload"></div>
  <div class="video-item"><video src="./images/video_6.mp4" alt="preload"></div>
  <div class="video-item"><video src="./images/video_7.mp4" alt="preload"></div>
  <div class="video-item"><video src="./images/video_8.mp4" alt="preload"></div>
  <div class="video-item"><video src="./images/video_9.mp4" alt="preload"></div>
					</div>					
 
 
 
 
					</div>
					</div>	
 
					<div class = "user_block_content_main"> 
 
                    <!-- Блок закрепленных новостей -->
					<div class = "user_block_content_main_fixed">
					<div class = "user_block_content_header"> 
					Alisa Sokolova  </br>
					26.02.2026
					<div class = "user_profile_images_small"> 
		       <img src="./images/photographer_small.jpg" alt="photo" class="circle-img">
			</div>
					</div>	
 
					<div class = "user_block_content_field"> 
					Приятно, граждане, наблюдать, как тщательные 
					исследования конкурентов набирают популярность 
					среди определенных слоев населения
					<img src="./images/avia.jpg" alt="photo">
					</div>
					</div>	
					<!-- Конец блока закрепленных новостей -->
 
                    <!-- Блок последних новостей -->
					<div class = "user_block_content_main_last">
					<div class = "user_block_content_header"> 
					Alisa Sokolova  </br>
					26.02.2026
					<div class = "user_profile_images_small"> 
		       <img src="./images/photographer_small.jpg" alt="photo" class="circle-img">
			</div>
					</div>	
 
					<div class = "user_block_content_field"> 
					Приятно, граждане, наблюдать, как тщательные 
					исследования конкурентов набирают популярность 
					среди определенных слоев населения
					<img src="./images/avia.jpg" alt="photo">
					</div>
					</div>						
					<!-- Конец блока последних новостей -->
 
 
 
 
 
 
 
					</div>					
 
 
					</div>	
 
 
 
    <!-- Конец блока контента и сейдбара -->
 
    <!-- Здесь основное содержимое нашей страницы -->
    <main>
      <!-- Она содержит статью -->
      <article>
    </article>
      <!-- Дополнительный контент также может быть вложен в основной контент -->
      <aside>
 
      </aside>
    </main>
    <!-- И вот наш главный нижний колонтитул, который используется на всех страницах нашего веб-сайта -->
    <footer>
      <p>©2026 Sample HTML5 Page. All rights reserved.</p>
    </footer>
    <!-- Optional: Link to a JavaScript file -->
    <script>
 
	</script>
  </body>
</html>

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

Файлы шаблона