add default theme

app/admin_themes/custom/manifest.json

@@ -6,8 +6,8 @@
   "type": "admin_theme",
   "description": "Custom admin theme",
   "preview": "nrnv2024_640x360.jpg",
-  "resource": "/resources/custom",
+  "resource": "/resources/admin_themes/custom",
-  "resource_path": "{RESOURCES}/custom",
+  "resource_path": "{RESOURCES}/admin_themes/custom",
   "layout": "main.php",
   "theme_path": "{APP}/admin_themes/{slug}",
   "layout_path": "{APP}/admin_themes/{slug}/layout"

kernel/AdminController.php

@@ -5,14 +5,17 @@ namespace kernel;
 use kernel\Controller;
 use kernel\helpers\Debug;
 use kernel\services\AdminThemeService;
+use kernel\services\ThemeService;
 
 class AdminController extends Controller
 {
     protected AdminThemeService $adminThemeService;
+    protected ThemeService $themeService;
 
     protected function init(): void
     {
         $this->adminThemeService = new AdminThemeService();
+        $this->themeService = new ThemeService();
         $active_theme = $this->adminThemeService->getActiveAdminThemeInfo();
         $this->cgView->layoutPath = getConst($active_theme['layout_path']);
         $this->cgView->layout = "/" . $active_theme['layout'];

kernel/admin_themes/default/manifest.json

@@ -5,8 +5,8 @@
   "slug": "default",
   "description": "Default admin theme",
   "preview": "preview.png",
-  "resource": "/resources/default",
+  "resource": "/resources/admin_themes/default",
-  "resource_path": "{RESOURCES}/default",
+  "resource_path": "{RESOURCES}/admin_themes/default",
   "layout": "main.php",
   "layout_path": "{KERNEL_ADMIN_THEMES}/default/layout"
 }

kernel/admin_themes/simple/manifest.json

@@ -5,8 +5,8 @@
   "slug": "simple",
   "description": "Simple admin theme",
   "preview": "preview.png",
-  "resource": "/resources/simple",
+  "resource": "/resources/admin_themes/simple",
-  "resource_path": "{RESOURCES}/simple",
+  "resource_path": "{RESOURCES}/admin_themes/simple",
   "layout": "main.php",
   "layout_path": "{KERNEL_ADMIN_THEMES}/simple/layout"
 }

kernel/modules/themes/ThemesModule.php

@@ -0,0 +1,33 @@
+<?php
+
+namespace kernel\modules\themes;
+
+use kernel\Module;
+use kernel\modules\menu\service\MenuService;
+
+class ThemesModule extends Module
+{
+    public MenuService $menuService;
+    public function __construct()
+    {
+        $this->menuService = new MenuService();
+    }
+
+    /**
+     * @throws \Exception
+     */
+    public function init(): void
+    {
+        $this->menuService->createItem([
+            "label" => "Темы сайта",
+            "url" => "/admin/settings/themes",
+            "slug" => "themes",
+            "parent_slug" => "settings"
+        ]);
+    }
+
+    public function deactivate(): void
+    {
+        $this->menuService->removeItemBySlug("themes");
+    }
+}

kernel/modules/themes/controllers/ThemeController.php

@@ -0,0 +1,73 @@
+<?php
+
+namespace kernel\modules\themes\controllers;
+
+use DirectoryIterator;
+use JetBrains\PhpStorm\NoReturn;
+use kernel\AdminController;
+use kernel\helpers\Debug;
+use kernel\models\Option;
+use kernel\Request;
+
+class ThemeController extends AdminController
+{
+    protected function init(): void
+    {
+        parent::init();
+        $this->cgView->viewPath = KERNEL_MODULES_DIR . "/themes/views/";
+    }
+
+    public function actionIndex(): void
+    {
+        $themePaths = Option::where("key", "theme_paths")->first();
+
+        $dirs = [];
+        if ($themePaths){
+            $path = json_decode($themePaths->value);
+            foreach ($path->paths as $p){
+                $dirs[] = getConst($p);
+            }
+        }
+
+        $infoToTable = [];
+        $meta = [];
+        $meta['columns'] = [
+            "preview" => "Превью",
+            "name" => "Название",
+            "author" => "Автор",
+            "version" => "Версия",
+            "description" => "Описание"
+        ];
+        $meta['params'] = ["class" => "table table-bordered"];
+        $meta['perPage'] = 10;
+        $meta['baseUrl'] = "/admin/settings/themes";
+        $meta['currentPage'] = 1;
+
+        $infoToTable['meta'] = $meta;
+
+        $themesInfo = [];
+        foreach ($dirs as $dir){
+            $i = 1;
+            foreach (new DirectoryIterator($dir) as $fileInfo) {
+                $info = [];
+                if($fileInfo->isDot()) continue;
+                $info['id'] = $i;
+                $themesInfo[] = array_merge($info, $this->themeService->getThemeInfo($fileInfo->getPathname()));
+                $i++;
+            }
+        }
+        $infoToTable['meta']['total'] = count($themesInfo);
+        $infoToTable['data'] = $themesInfo;
+
+        $this->cgView->render("index.php", ['json' => json_encode($infoToTable, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE)]);
+    }
+
+    #[NoReturn] public function actionActivate(): void
+    {
+        $request = new Request();
+        $this->themeService->setActiveTheme($request->get("p"));
+
+        $this->cgView->render("view.php", ['data' => $this->themeService->getThemeInfo($request->get("p"))]);
+    }
+
+}

kernel/modules/themes/manifest.json

@@ -0,0 +1,10 @@
+{
+  "name": "Themes",
+  "version": "0.1",
+  "author": "ITGuild",
+  "slug": "themes",
+  "description": "Themes module",
+  "module_class": "kernel\\modules\\themes\\ThemesModule",
+  "module_class_file": "{KERNEL_MODULES}/themes/ThemesModule.php",
+  "routs": "routs/themes.php"
+}

kernel/modules/themes/routs/themes.php

@@ -0,0 +1,16 @@
+<?php
+
+use kernel\App;
+use kernel\modules\admin_themes\controllers\AdminThemeController;
+use Phroute\Phroute\RouteCollector;
+
+App::$collector->group(["prefix" => "admin"], function (RouteCollector $router){
+    App::$collector->group(["before" => "auth"], function (RouteCollector $router) {
+        App::$collector->group(["prefix" => "settings"], function (RouteCollector $router) {
+            App::$collector->group(["prefix" => "themes"], function (RouteCollector $router) {
+                App::$collector->get('/', [\kernel\modules\themes\controllers\ThemeController::class, 'actionIndex']);
+                App::$collector->get('/activate', [\kernel\modules\themes\controllers\ThemeController::class, 'actionActivate']);
+            });
+        });
+    });
+});

kernel/modules/themes/views/index.php

@@ -0,0 +1,25 @@
+<?php
+/**
+ * @var $json string
+ */
+
+
+$table = new \Itguild\Tables\ListJsonTable($json);
+$table->columns([
+    'preview' => function ($data) {
+        return "<img src='$data' width='200px'>";
+    }
+]);
+$table->addAction(function ($row, $url){
+    $active_admin_theme = \kernel\modules\option\service\OptionService::getItem('active_theme');
+
+    if ($row['path'] === $active_admin_theme){
+        return "Активна";
+    } else {
+        $url = "$url/activate/?p=" . $row['path'];
+
+        return \kernel\widgets\IconBtn\IconBtnActivateWidget::create(['url' => $url])->run();
+    }
+});
+$table->create();
+$table->render();

kernel/modules/themes/views/view.php

@@ -0,0 +1,25 @@
+<?php
+/**
+ * @var array $data
+ */
+
+$table_info = [
+    "meta" => [
+        "rows" => ["preview" => "Превью", "name" => "Название", "version" => "Версия", "description" => "Описание"],
+        "params" => ["class" => "table table-bordered"],
+        "baseUrl" => "/admin/settings/themes",
+    ],
+    "data" => $data
+];
+
+$table = new \Itguild\Tables\ViewJsonTable(json_encode($table_info, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));
+$table->rows([
+    'preview' => function ($data) {
+        return "<img src='$data' width='500px'>";
+    }
+]);
+$table->beforePrint(function () {
+    return \kernel\widgets\IconBtn\IconBtnListWidget::create(['url' => '/admin/settings/themes'])->run();
+});
+$table->create();
+$table->render();

kernel/services/ThemeService.php

@@ -2,6 +2,7 @@
 
 namespace kernel\services;
 
+use kernel\helpers\Manifest;
 use kernel\models\Option;
 
 class ThemeService
@@ -12,10 +13,10 @@ class ThemeService
     public function __construct()
     {
         $this->option = new Option();
-        $this->findActiveAdminTheme();
+        $this->findActiveTheme();
     }
 
-    public function findActiveAdminTheme(): void
+    public function findActiveTheme(): void
     {
         $model = $this->option::where("key", "active_theme")->first();
         $this->active_theme = $model->value;
@@ -38,4 +39,26 @@ class ThemeService
         return false;
     }
 
+    public function getThemeInfo(string $theme): false|array|string
+    {
+        $info = [];
+        $theme = getConst($theme);
+        $info['path'] = $theme;
+        if (file_exists($theme . "/manifest.json")) {
+            $manifest = file_get_contents($theme . "/manifest.json");
+            $manifest = Manifest::getWithVars($manifest);
+            $manifest['preview'] = $manifest['resource'] . "/" . $manifest['preview'];
+            $info = array_merge($info, $manifest);
+        }
+
+        return $info;
+    }
+
+    public function setActiveTheme(string $theme): void
+    {
+        $activeTheme = Option::where("key", "active_theme")->first();
+        $activeTheme->value = getConst($theme);
+        $activeTheme->save();
+    }
+
 }

kernel/themes/default/assets/DefaultThemesAssets.php

@@ -0,0 +1,18 @@
+<?php
+
+namespace kernel\themes\default\assets;
+
+use kernel\Assets;
+
+class DefaultThemesAssets extends Assets
+{
+    protected function createCSS(): void
+    {
+        $this->registerCSS(slug: "main", resource: "some");
+    }
+
+    protected function createJS(): void
+    {
+        $this->registerJS(slug: "webpack", resource: "some");
+    }
+}

kernel/themes/default/controllers/MainController.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace kernel\themes\default\controllers;
+
+use kernel\Controller;
+
+class MainController extends Controller
+{
+
+    protected function init(): void
+    {
+        parent::init();
+        $this->cgView->viewPath = APP_DIR . "/themes/default/views/main/";
+        $this->cgView->layout = "main.php";
+        $this->cgView->layoutPath = APP_DIR . "/themes/default/views/layout/";
+        $this->cgView->addVarToLayout("resources", "/resources/default");
+    }
+
+    public function actionIndex(): void
+    {
+        $this->cgView->render("index.php");
+    }
+}

kernel/themes/default/manifest.json

@@ -0,0 +1,11 @@
+{
+  "name": "Default",
+  "slug": "default",
+  "version": "0.1",
+  "author": "ItGuild",
+  "preview": "preview.png",
+  "description": "Default theme",
+  "resource": "/resources/themes/default",
+  "resource_path": "{RESOURCES}/themes/default",
+  "routs": "routs/default.php"
+}

kernel/themes/default/routs/default.php

@@ -0,0 +1,11 @@
+<?php
+
+use kernel\App;
+
+
+App::$collector->get('/', [\kernel\themes\default\controllers\MainController::class, 'actionIndex']);
+//App::$collector->get('/page/{page_number}', [\app\modules\tag\controllers\TagController::class, 'actionIndex']);
+//App::$collector->get('/create', [\app\modules\tag\controllers\TagController::class, 'actionCreate']);
+
+
+

kernel/themes/default/views/main/index.php

@@ -0,0 +1,224 @@
+<?php
+/**
+ * @var string $resources;
+ * @var \kernel\CgView $view
+ */
+
+$view->setTitle("Донецкое гештальт сообщество");
+$view->setMeta([
+    'description' => 'Донецкое гештальт сообщество'
+]);
+?>
+<div class="flex flex-col container m-auto text-center text-dark gap-[31px]"><h1 class="text-[40px] uppercase">
+        Донецкое гештальт сообщество</h1>
+    <p class="text-dark text-[19px] max-w-[832px] mx-auto">это добровольное самоорганизующееся сообщество
+        специалистов г. Донецка и Донецкого края в области психологического консультирования и гештальт-терапии.</p>
+</div>
+<div class="flex justify-center mt-[100px] gap-[14px] container mx-auto">
+    <div class="relative bg-blue border-[1px] border-white rounded-[25px] pr-[48px] max-w-[650px] min-h-[480px] w-full font-[400]">
+        <img alt="intro" loading="lazy" width="1" height="1" decoding="async" data-nimg="1"
+             class="w-auto h-auto absolute" style="color:transparent" src="<?= $resources ?>/images/intro.svg"/>
+        <h3 class="text-white text-[38px] mt-[214px] text-end leading-[41px]"><span
+                class="bg-darkBlue px-[12px] py-[3px] rounded-[18px]">Цель</span> нашего<br/>объединения:</h3>
+        <p class="ml-auto mt-[50px] text-start text-white text-[19px] leading-[20px] max-w-[400px] font-[700]">
+            взаимное обогащение профессиональными знаниями, идеями и опытом на конференциях и семинарах, в учебных
+            программах и на интенсивах, на специализациях и в супервизорских группах.</p></div>
+    <div class="flex flex-col gap-[12px] max-w-[368px]">
+        <div class="flex items-center bg-blue rounded-[25px] min-h-[234px] px-[68px] py-[60px] relative"><p
+                class="text-white font-[500] leading-[23px] text-[20px]">Через собственное развитие мы развиваем и
+                популяризируем гештальт-подход</p><img alt="palm" loading="lazy" width="1" height="1" decoding="async"
+                                                       data-nimg="1" class="w-auto h-auto absolute right-3 bottom-0"
+                                                       style="color:transparent" src="<?= $resources ?>/images/palm.svg"/></div>
+        <div class="flex flex-col items-center rounded-[25px] min-h-[234px] px-[68px] pt-[40px] border-[4px] border-white">
+            <div class="flex relative left-[-20px] bottom-[-10px]"><img alt="avatar" loading="lazy" width="101"
+                                                                        height="100" decoding="async" data-nimg="1"
+                                                                        class="undefined relative"
+                                                                        style="color:transparent"
+                                                                        srcSet="<?= $resources ?>/_next/image?url=%2Fimages%2Favatar.png&amp;w=128&amp;q=75 1x, <?= $resources ?>/_next/image?url=%2Fimages%2Favatar.png&amp;w=256&amp;q=75 2x"
+                                                                        src="<?= $resources ?>/_next/image?url=%2Fimages%2Favatar.png&amp;w=256&amp;q=75"/><img
+                    alt="avatar" loading="lazy" width="101" height="100" decoding="async" data-nimg="1"
+                    class="right-[55px] z-2 relative" style="color:transparent"
+                    srcSet="<?= $resources ?>/_next/image?url=%2Fimages%2Favatar.png&amp;w=128&amp;q=75 1x, <?= $resources ?>/_next/image?url=%2Fimages%2Favatar.png&amp;w=256&amp;q=75 2x"
+                    src="<?= $resources ?>/_next/image?url=%2Fimages%2Favatar.png&amp;w=256&amp;q=75"/><img alt="avatar"
+                                                                                                            loading="lazy"
+                                                                                                            width="101" height="100"
+                                                                                                            decoding="async"
+                                                                                                            data-nimg="1"
+                                                                                                            class="right-[105px] z-3 relative"
+                                                                                                            style="color:transparent"
+                                                                                                            srcSet="<?= $resources ?>/_next/image?url=%2Fimages%2Favatar.png&amp;w=128&amp;q=75 1x, <?= $resources ?>/_next/image?url=%2Fimages%2Favatar.png&amp;w=256&amp;q=75 2x"
+                                                                                                            src="<?= $resources ?>/_next/image?url=%2Fimages%2Favatar.png&amp;w=256&amp;q=75"/><img
+                    alt="avatar" loading="lazy" width="101" height="100" decoding="async" data-nimg="1"
+                    class="right-[155px] z-4 relative" style="color:transparent"
+                    srcSet="<?= $resources ?>/_next/image?url=%2Fimages%2Favatar.png&amp;w=128&amp;q=75 1x, <?= $resources ?>/_next/image?url=%2Fimages%2Favatar.png&amp;w=256&amp;q=75 2x"
+                    src="<?= $resources ?>/_next/image?url=%2Fimages%2Favatar.png&amp;w=256&amp;q=75"/></div>
+            <p class="text-blue font-[900] text-[26px]">+ 145 учасников</p></div>
+    </div>
+</div>
+<div class="mt-[50px] flex gap-[64px] justify-center container mx-auto">
+    <div class="flex-col flex gap-[35px] items-center"><img alt="oppgp" loading="lazy" width="140" height="37"
+                                                            decoding="async" data-nimg="1" style="color:transparent"
+                                                            src="<?= $resources ?>/images/oppgp.svg"/>
+        <p class="text-grey max-w-[300px] text-[16px] leading-[17px] text-center font-[700]">Донецкое
+            гештальт-сообщество является частью Всероссийского общества психологов практикующих гештальт-подход (ОПП
+            ГП). </p></div>
+    <div class="flex-col flex gap-[19px] items-center"><img alt="oppgp" loading="lazy" width="177" height="53"
+                                                            decoding="async" data-nimg="1" style="color:transparent"
+                                                            src="<?= $resources ?>/images/pmg.svg"/>
+        <p class="text-grey max-w-[507px] text-[16px] leading-[17px] text-center font-[700]">В своей работе мы
+            придерживаемся стандартов программы «Московский Гештальт Институт», а также стандартов Европейской
+            Ассоциации Гештальт Терапии, Этического Кодекса Гештальт Терапевта и принципов гуманизма.</p></div>
+</div>
+<div class="flex flex-col mt-[100px]">
+    <div class="flex items-center max-w-[1033px] mx-auto justify-between w-full mb-[50px]">
+        <div class="undefined px-[25px] py-[10px] max-w-[225px] min-w-[180px] justify-center w-fit cursor-pointer border-blue border-[1px] flex gap-[10px] rounded-[10px]">
+            <p class="text-blue font-[700] text-[16px]">Конференции</p><img alt="chevronDown" loading="lazy"
+                                                                            width="11" height="8" decoding="async"
+                                                                            data-nimg="1" style="color:transparent"
+                                                                            src="<?= $resources ?>/images/chevronDown.svg"/></div>
+        <h3 class="text-black text-[26px] uppercase">Мероприятия сообщества</h3>
+        <button class="flex items-center justify-center whitespace-nowrap rounded-[6px] font-[400] bg-blue text-[16px] text-white max-h-[39px] px-[25px] py-[10px] undefined">
+            Все мероприятия
+        </button>
+    </div>
+    <div class="flex justify-around"><a
+            class="border-[1px] border-white rounded-[6px] bg-darkGrey px-[13.5px] pt-[12px] pb-[35px] text-black"
+            href="events/event-1"><span class="flex w-[288px] h-[177px] bg-white"></span><h5
+                class="max-w-[267px] font-[500] text-[16px] leading-[18px] mt-[30px] mb-[8px] line-clamp-3 text-ellipsis">
+                добровольное самоорганизующееся сообщество специалистов ... добровольное самоорганизующееся сообщество
+                специалистов ...</h5>
+            <p class="max-w-[267px] text-[15px] leading-[17px] line-clamp-3 text-ellipsis">добровольное
+                самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области добровольное
+                самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области...</p></a><a
+            class="border-[1px] border-white rounded-[6px] bg-darkGrey px-[13.5px] pt-[12px] pb-[35px] text-black"
+            href="events/event-1"><span class="flex w-[288px] h-[177px] bg-white"></span><h5
+                class="max-w-[267px] font-[500] text-[16px] leading-[18px] mt-[30px] mb-[8px] line-clamp-3 text-ellipsis">
+                добровольное самоорганизующееся сообщество специалистов ... добровольное самоорганизующееся сообщество
+                специалистов ...</h5>
+            <p class="max-w-[267px] text-[15px] leading-[17px] line-clamp-3 text-ellipsis">добровольное
+                самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области добровольное
+                самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области...</p></a><a
+            class="border-[1px] border-white rounded-[6px] bg-darkGrey px-[13.5px] pt-[12px] pb-[35px] text-black"
+            href="events/event-1"><span class="flex w-[288px] h-[177px] bg-white"></span><h5
+                class="max-w-[267px] font-[500] text-[16px] leading-[18px] mt-[30px] mb-[8px] line-clamp-3 text-ellipsis">
+                добровольное самоорганизующееся сообщество специалистов ... добровольное самоорганизующееся сообщество
+                специалистов ...</h5>
+            <p class="max-w-[267px] text-[15px] leading-[17px] line-clamp-3 text-ellipsis">добровольное
+                самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области добровольное
+                самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области...</p></a><a
+            class="border-[1px] border-white rounded-[6px] bg-darkGrey px-[13.5px] pt-[12px] pb-[35px] text-black"
+            href="events/event-1"><span class="flex w-[288px] h-[177px] bg-white"></span><h5
+                class="max-w-[267px] font-[500] text-[16px] leading-[18px] mt-[30px] mb-[8px] line-clamp-3 text-ellipsis">
+                добровольное самоорганизующееся сообщество специалистов ... добровольное самоорганизующееся сообщество
+                специалистов ...</h5>
+            <p class="max-w-[267px] text-[15px] leading-[17px] line-clamp-3 text-ellipsis">добровольное
+                самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области добровольное
+                самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области...</p></a><a
+            class="border-[1px] border-white rounded-[6px] bg-darkGrey px-[13.5px] pt-[12px] pb-[35px] text-black"
+            href="events/event-1"><span class="flex w-[288px] h-[177px] bg-white"></span><h5
+                class="max-w-[267px] font-[500] text-[16px] leading-[18px] mt-[30px] mb-[8px] line-clamp-3 text-ellipsis">
+                добровольное самоорганизующееся сообщество специалистов ... добровольное самоорганизующееся сообщество
+                специалистов ...</h5>
+            <p class="max-w-[267px] text-[15px] leading-[17px] line-clamp-3 text-ellipsis">добровольное
+                самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области добровольное
+                самоорганизующееся сообщество специалистов г. Донецка и Донецкого края в области...</p></a></div>
+</div>
+<div class="flex flex-col mt-[90px] mb-[80px] gap-[56px]">
+    <div class="flex items-center max-w-[1033px] mx-auto justify-between w-full">
+        <div class="undefined px-[25px] py-[10px] max-w-[225px] min-w-[180px] justify-center w-fit cursor-pointer border-blue border-[1px] flex gap-[10px] rounded-[10px]">
+            <p class="text-blue font-[700] text-[16px]">Тренер</p><img alt="chevronDown" loading="lazy" width="11"
+                                                                       height="8" decoding="async" data-nimg="1"
+                                                                       style="color:transparent"
+                                                                       src="<?= $resources ?>/images/chevronDown.svg"/></div>
+        <h3 class="text-black text-[26px] uppercase">наше сообщество</h3>
+        <button class="flex items-center justify-center whitespace-nowrap rounded-[6px] font-[400] bg-blue text-[16px] text-white max-h-[39px] px-[25px] py-[10px] undefined">
+            Все участники
+        </button>
+    </div>
+    <div class="flex max-w-[1033px] m-auto justify-between w-full"><a
+            class=" backdrop-blur-custom border-[1px] border-white rounded-[6px] bg-darkWhite p-[10px] text-black w-fit shadow-custom"
+            href="/participants/1"><img alt="image" loading="lazy" width="221" height="221" decoding="async"
+                                        data-nimg="1" class="rotate-[180deg]" style="color:transparent"
+                                        src="<?= $resources ?>/images/mok_human.svg"/><h5
+                class="text-[18px] font-[400] leading-[20px] max-w-[190px] mt-[16px] mb-[20px]">Лукашенко Марина
+                Анатольевна</h5><span class="text-lightGrey">Работает с темами<p
+                    class="text-black text-[13px] leading-[15px] line-clamp-3 text-ellipsis max-w-[220px] mb-[16px] ">Финансовые изменения, болезнь, своя или близких, разрыв отношений, развод...</p></span>
+            <div class="flex gap-[5px] max-w-[220px] flex-wrap ">
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Терапевт</span></div>
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Супервизор</span></div>
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Тренер-стажер</span></div>
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Тренер</span></div>
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Ассоциированный тренер</span></div>
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Ведущий тренер</span></div>
+            </div>
+        </a><a class=" backdrop-blur-custom border-[1px] border-white rounded-[6px] bg-darkWhite p-[10px] text-black w-fit shadow-custom"
+               href="/participants/1"><img alt="image" loading="lazy" width="221" height="221" decoding="async"
+                                           data-nimg="1" class="rotate-[180deg]" style="color:transparent"
+                                           src="<?= $resources ?>/images/mok_human.svg"/><h5
+                class="text-[18px] font-[400] leading-[20px] max-w-[190px] mt-[16px] mb-[20px]">Лукашенко Марина
+                Анатольевна</h5><span class="text-lightGrey">Работает с темами<p
+                    class="text-black text-[13px] leading-[15px] line-clamp-3 text-ellipsis max-w-[220px] mb-[16px] ">Финансовые изменения, болезнь, своя или близких, разрыв отношений, развод...</p></span>
+            <div class="flex gap-[5px] max-w-[220px] flex-wrap ">
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Терапевт</span></div>
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Супервизор</span></div>
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Тренер-стажер</span></div>
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Тренер</span></div>
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Ассоциированный тренер</span></div>
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Ведущий тренер</span></div>
+            </div>
+        </a><a class=" backdrop-blur-custom border-[1px] border-white rounded-[6px] bg-darkWhite p-[10px] text-black w-fit shadow-custom"
+               href="/participants/1"><img alt="image" loading="lazy" width="221" height="221" decoding="async"
+                                           data-nimg="1" class="rotate-[180deg]" style="color:transparent"
+                                           src="<?= $resources ?>/images/mok_human.svg"/><h5
+                class="text-[18px] font-[400] leading-[20px] max-w-[190px] mt-[16px] mb-[20px]">Лукашенко Марина
+                Анатольевна</h5><span class="text-lightGrey">Работает с темами<p
+                    class="text-black text-[13px] leading-[15px] line-clamp-3 text-ellipsis max-w-[220px] mb-[16px] ">Финансовые изменения, болезнь, своя или близких, разрыв отношений, развод...</p></span>
+            <div class="flex gap-[5px] max-w-[220px] flex-wrap ">
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Терапевт</span></div>
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Супервизор</span></div>
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Тренер-стажер</span></div>
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Тренер</span></div>
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Ассоциированный тренер</span></div>
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Ведущий тренер</span></div>
+            </div>
+        </a><a class=" backdrop-blur-custom border-[1px] border-white rounded-[6px] bg-darkWhite p-[10px] text-black w-fit shadow-custom"
+               href="/participants/1"><img alt="image" loading="lazy" width="221" height="221" decoding="async"
+                                           data-nimg="1" class="rotate-[180deg]" style="color:transparent"
+                                           src="<?= $resources ?>/images/mok_human.svg"/><h5
+                class="text-[18px] font-[400] leading-[20px] max-w-[190px] mt-[16px] mb-[20px]">Лукашенко Марина
+                Анатольевна</h5><span class="text-lightGrey">Работает с темами<p
+                    class="text-black text-[13px] leading-[15px] line-clamp-3 text-ellipsis max-w-[220px] mb-[16px] ">Финансовые изменения, болезнь, своя или близких, разрыв отношений, развод...</p></span>
+            <div class="flex gap-[5px] max-w-[220px] flex-wrap ">
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Терапевт</span></div>
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Супервизор</span></div>
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Тренер-стажер</span></div>
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Тренер</span></div>
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Ассоциированный тренер</span></div>
+                <div class="flex items-center justify-center font-[400] border-blue w-fit text-[12px] py-[4px] px-[8px] rounded-[3px] border-[0.5px] text-blue font-[700]">
+                    <span class="relative top-[2px]">Ведущий тренер</span></div>
+            </div>
+        </a></div>
+</div>