dots replaced with three.js shader

.gitmodules

@@ -0,0 +1,15 @@
+[submodule "hotline.mjs"]
+	path = hotline.mjs
+	url = https://git.svoboda.works/mirzaev/hotline.mjs
+	branch = stable
+[submodule "womb3-simplex.mjs"]
+	path = womb3-simplex.mjs
+	url = https://git.svoboda.works/mirzaev/womb3-simplex.mjs
+	branch = stable
+[submodule "icons"]
+	path = icons
+	url = https://git.svoboda.works/mirzaev/icons
+	branch = stable
+[submodule "three.js"]
+	path = three.js
+	url = https://github.com/mrdoob/three.js.git

composer.json

@@ -17,11 +17,6 @@
       "email": "arsen@mirzaev.sexy",
       "homepage": "https://mirzaev.sexy",
       "role": "Programmer"
-    },
-		{
-      "name": "Hollspae",
-      "email": "ksena.vilkova79@gmail.om",
-      "role": "Creator-Programmer"
     }
 	],
 	"support": {
@@ -29,7 +24,7 @@
 		"issues": "https://git.svoboda.works/kodorvan/perm/issues"
 	},
 	"require": {
-		"php": "^8.4",
+		"php": "^8.5",
 		"mirzaev/minimal": "^3.8",
 		"mirzaev/baza": "^3.4",		
 		"mirzaev/languages": "^1",		

install.sh

@@ -21,3 +21,15 @@ fi
 if ! [ -L kodorvan/perm/system/public/js/modules/hotline.mjs ]; then
 	ln -s ../../../../../../hotline.mjs/hotline.mjs kodorvan/perm/system/public/js/modules/hotline.mjs;
 fi
+
+if ! [ -L kodorvan/perm/system/public/js/modules/womb3-simplex.mjs ]; then
+	ln -s ../../../../../../womb3-simplex.mjs/womb3-simplex.mjs kodorvan/perm/system/public/js/modules/womb3-simplex.mjs;
+fi
+
+if ! [ -L kodorvan/perm/system/public/js/modules/simplex-noise.mjs ]; then
+	ln -s ../../../../../../womb3-simplex.mjs/simplex-noise.mjs kodorvan/perm/system/public/js/modules/simplex-noise.mjs;
+fi
+
+if ! [ -d kodorvan/perm/system/public/css/icons ]; then
+	ln -s ../../../../../icons/css kodorvan/perm/system/public/css/icons;
+fi

kodorvan/perm/system/controllers/index.php

@@ -9,7 +9,7 @@ use kodorvan\perm\controllers\core;
 
 // Framework for PHP
 use mirzaev\minimal\http\enumerations\content,
-  mirzaev\minimal\http\enumerations\status;
+	mirzaev\minimal\http\enumerations\status;
 
 /**
  * Index
@@ -44,6 +44,149 @@ final class index extends core
 		if (str_contains($this->request->headers['accept'] ?? '', content::html->value)) {
 			// Request for HTML response
 
+			// Initializing the team workload
+			$this->view->workload = (string) ($_COOKIE['workload'] ?? rand(20, 80));
+
+			// Initializing services
+			$this->view->services = [
+				[
+					'class' => 'telegram voronka',
+					'title' => 'Телеграм воронка',
+					'icon_left' => '',
+					/* 'icon_center' => 'import', */
+					'icon_center' => 'crown',
+					'icon_right' => '',
+					'description' => <<<TXT
+						Поступательно запросит данные пользователя, скомпонует, запишет в базу данных и синхронизирует в CRM
+						<br><br>
+						Используя иммерсивные технологии и многофакторный сбор обеспечивает максимальное удержание пользователя
+						TXT,
+					'howto' => 'Направьте к нему клиентов и ждите новых заказов в вашей CRM, на сайте или в чате',
+					'buttons' => [
+						[
+							'icon' => 'comment',
+							'link' => ''
+						]
+					],
+					'theses' => [
+						[
+							'class' => 'yellow',
+							'characteristic' => '-80%',
+							'text' => 'НАГРУЗКА'
+						],
+						[
+							'class' => 'blue',
+							'colored' => true,
+							'characteristic' => '+5%',
+							'text' => 'КОНВЕРСИИ'
+						],
+						[
+							'class' => 'green',
+							'characteristic' => '0₽',
+							'text' => 'НИКАКОЙ АРЕНДЫ'
+						]
+					],
+					'background_image_src' => '/themes/default/images/telegram_voronka.png',
+					'background_image_alt' => 'Телеграм воронка КОДОРВАНЬ',
+					'cost' => '2000'
+				],
+				[
+					'class' => 'parser',
+					'title' => 'Парсер',
+					'icon_left' => '',
+					'icon_center' => 'search',
+					'icon_right' => '',
+					'description' => <<<TXT
+						Любая работа за компьютером может быть автоматизирована
+						<br><br>
+						Парсер берёт данные с сайтов через API, либо эмулируя пользователя, а так же из excel-документов, CRM и бухгалтерии, затем просчитывает, анализирует и записывает результат
+						TXT,
+					'howto' => 'Подключите источники и снизьте нагрузку на операторов, оптимизируйте процессы',
+					'extra' => [
+						'Wildberries',
+						'OZON',
+						'Yandex Market',
+						'Avito',
+						'CDEK',
+						'1C',
+						'Bitrix',
+						'Мой Склад'
+					],
+					'buttons' => [
+						[
+							'icon' => 'comment',
+							'link' => ''
+						]
+					],
+					'theses' => [
+						[
+							'class' => 'yellow',
+							'colored' => true,
+							'characteristic' => '-100%',
+							'text' => 'НАГРУЗКА'
+						],
+						[
+							'class' => 'cyan',
+							'icon' => 'infinity',
+							'text' => 'ВЕЧНАЯ ПОДДЕРЖКА'
+						],
+						[
+							'class' => 'green',
+							'icon' => 'play forwards',
+							'text' => 'РЕКОРД СКОРОСТИ'
+						]
+					],
+					'background_image_src' => '/themes/default/images/excel_small_compressed.jpg',
+					'background_image_alt' => 'Парсеры КОДОРВАНЬ',
+					'cost' => '3000'
+				],
+				[
+					'class' => 'calculator',
+					'title' => 'Калькулятор',
+					'icon_left' => '',
+					'icon_center' => 'calculator',
+					'icon_right' => '',
+					'description' => <<<TXT
+						Составление алгоритма обработки большого объёма данных с использованием нейросетей и грамотно выбранной сортировки
+						<br><br>
+						Оператор вводит данные, нажимает на кнопки, двигает ползунки и мгновенно получает точный результат вычислений
+						TXT,
+					'howto' => 'Настройте параметры в панели управления и в долгосрочной перспективе сэкономьте тысячи часов рабочего времени',
+					'extra' => [],
+					'buttons' => [
+						[
+							'icon' => 'comment',
+							'link' => ''
+						]
+					],
+					'theses' => [
+						[
+							'class' => 'yellow',
+							'characteristic' => '-95%',
+							'text' => 'НАГРУЗКА'
+						],
+						[
+							'class' => 'green',
+							'characteristic' => '-80%',
+							'text' => 'ОШИБОК ВЫЧИСЛЕНИЙ'
+						],
+						[
+							'class' => 'red',
+							'colored' => true,
+							'characteristic' => '+20%',
+							'text' => 'ОБУЧАЕМОСТЬ'
+						]
+					],
+					'background_image_src' => '/themes/default/images/tordv_compressed.jpg',
+					'background_image_alt' => 'Калькулятор КОДОРВАНЬ',
+					'cost' => '10 000'
+				]
+
+			];
+
+			// Sending the cookie with the team workload (1800 = 30min)
+			setcookie('workload', $this->view->workload, time() + 1800, '/');
+
 			// Render page
 			$page = $this->view->render('main/index.html');
 

kodorvan/perm/system/public/css/icons

@@ -0,0 +1 @@
+../../../../../icons/css

kodorvan/perm/system/public/js/modules/simplex-noise.mjs

@@ -0,0 +1 @@
+../../../../../../womb3-simplex.mjs/simplex-noise.mjs

kodorvan/perm/system/public/js/modules/womb3-simplex.mjs

@@ -0,0 +1 @@
+../../../../../../womb3-simplex.mjs/womb3-simplex.mjs

kodorvan/perm/system/public/js/pages/main.js

@@ -1,5 +1,176 @@
 "use strict";
 
+import * as THREE from 'three';
+
+
+const fragmentShaderCode = `
+  precision highp float;
+  uniform vec2 u_resolution;
+  uniform float u_time;
+  varying vec2 vUv;
+
+  #define EPSILON 1e-6
+  #define PI 3.14159265359
+  #define ITERATIONS 18.0
+
+  mat2 rotate2d(float angle){
+    return mat2(cos(angle), -sin(angle),
+                sin(angle), cos(angle));
+  }
+
+  void main() {
+    vec2 uv = (vUv * 2.0 - 1.0) * (u_resolution / max(u_resolution.x, u_resolution.y));
+    vec2 u = uv * 0.25;
+    vec4 o = vec4(0.5, 1.0, 1.5, 0.0);
+    vec4 z = o;
+    vec2 v_internal = vec2(0.0);
+    float a = 0.6;
+    float t = u_time * 0.8;
+
+    for (float i = 0.0; i < ITERATIONS; i++)
+    {
+      float u_dot = dot(u, u);
+      float denom_u = 0.6 - u_dot;
+      denom_u += sign(denom_u) * EPSILON;
+
+      vec2 sin_arg = (1.4 * u / denom_u) - (7.0 * u.yx * cos(t*0.2)) + t * 1.1 + v_internal * 0.3;
+      vec2 length_arg = (1.0 + i * 0.1 + a * 0.2) * sin(sin_arg);
+      float len = length(length_arg);
+      float safe_len_divisor = max(len, EPSILON);
+      // float safe_len_divisor = 1.0;
+
+      o += (1.0 + sin(z * 0.9 + t * 1.2 + i * 0.1)) / safe_len_divisor * (1.0 + i*0.02);
+
+      v_internal = 0.9 * v_internal + 0.15 * sin(t * 1.5 + u * 4.0 - o.xy * 0.2);
+      v_internal = clamp(v_internal, -1.0, 1.0);
+
+      a += 0.035;
+      float angle = i * 0.1 + t * 0.05 + a * 0.2;
+      mat2 rot_mat = rotate2d(angle);
+      u *= rot_mat;
+
+      float o_dot = dot(o.xyz, o.xyz);
+      float feedback_scale = 0.5 + 0.5 * sin(o_dot * 0.02 + t * 0.3);
+
+      u += sin(60.0 * dot(u,u) * cos(80.0 * u.yx + t * 1.2)) / 2.5e2
+          + 0.15 * a * u * feedback_scale
+          + cos(o.xy * 0.5 + t * 1.1 + v_internal * 0.8) / 3.5e2;
+
+      u += rotate2d(v_internal.x * 0.01) * vec2(0.0001, 0.0);
+    }
+
+    vec3 base_color = 0.5 + 0.5 * cos(o.xyz * 0.8 + t * 0.15 + vec3(0.0, PI * 0.66, PI * 1.33));
+    vec2 detail_coord = u * 5.0 + v_internal * 1.0;
+    float detail_pattern = smoothstep(0.3, 0.7, fract(detail_coord.x * cos(t*0.1) + detail_coord.y * sin(t*0.1)));
+    vec3 detail_color = vec3(detail_pattern * 0.8 + 0.2);
+    float mix_factor = clamp(length(o.xyz) * 0.1 - 0.1, 0.0, 1.0);
+    vec3 final_color = mix(base_color, detail_color * base_color, mix_factor);
+    final_color.rg += u.xy * 0.05;
+    // float dist_from_center = length(vUv - 0.5);
+    float dist_from_center = 0.0;
+    final_color *= pow(1.0 - dist_from_center * 1.2, 2.0);
+    gl_FragColor = vec4(clamp(final_color, 0.0, 1.0), 1.0);
+  }
+`;
+
+const vertexShaderCode = `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = vec4( position, 1.0 );
+  }
+`;
+
+let scene, camera, renderer, mesh, material, clock;
+let container;
+
+const uniforms = {
+	u_time: { value: 0.0 },
+	u_resolution: { value: new THREE.Vector2() },
+};
+
+function init() {
+	container = document.getElementById("ebashilovo");
+	clock = new THREE.Clock();
+
+	renderer = new THREE.WebGLRenderer();
+	renderer.setSize(container.offsetWidth, container.offsetHeight);
+	renderer.setPixelRatio(window.devicePixelRatio);
+	container.appendChild(renderer.domElement);
+
+	scene = new THREE.Scene();
+
+	camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+
+	const geometry = new THREE.PlaneGeometry(2, 2);
+
+	material = new THREE.ShaderMaterial({
+		uniforms: uniforms,
+		vertexShader: vertexShaderCode,
+		fragmentShader: fragmentShaderCode,
+	});
+
+	mesh = new THREE.Mesh(geometry, material);
+	scene.add(mesh);
+
+	uniforms.u_resolution.value.x = container.offsetWidth;
+	uniforms.u_resolution.value.y = container.offsetHeight;
+
+	window.addEventListener("resize", onWindowResize);
+
+	renderer.setAnimationLoop(animate);
+}
+
+function onWindowResize() {
+	renderer.setSize(container.offsetWidth, container.offsetHeight);
+	uniforms.u_resolution.value.x = container.offsetWidth;
+	uniforms.u_resolution.value.y = container.offsetHeight;
+	material.uniforms.u_resolution.value.set(
+		container.offsetWidth,
+		container.offsetHeight
+	);
+}
+
+function animate() {
+	uniforms.u_time.value = clock.getElapsedTime();
+	renderer.render(scene, camera);
+}
+
+init();
+
+
+/* import("../modules/womb3-simplex.mjs").then((module) => {
+	// Initializing the instance
+	const womb = new module.womb(document.getElementById("introdution_animation"));
+	womb.block = {
+		width: 40,
+		height: 40,
+	};
+	womb.init();
+	womb.generate(undefined, '#000');
+
+	// Initializing the process registers
+	let offset = 0;
+	let speed = 0.01;
+
+	// Starting the process
+	setInterval(function () {
+		womb.dump();
+		womb.generate((offset += speed), '#000');
+	}, 60);
+
+	// Initializing the resizing event processor
+	window.addEventListener(
+		"resize",
+		function (e) {
+			womb.init();
+			womb.dump();
+			womb.generate((offset += speed), '#000');
+		},
+		true
+	);
+}); */
+
 import("../modules/hotline.mjs").then((module) => {
 	// Imported the hotline.mjs module
 
@@ -10,12 +181,8 @@ import("../modules/hotline.mjs").then((module) => {
 	instance.alive = true;
 	instance.wheel = false;
 	instance.delta = 3;
+	instance.step = -0.5;
 
 	// Starting the hotline instance
 	instance.start();
 });
-
- document.addEventListener('dragstart', function(event) {
-        event.preventDefault();
-        return false;
-    });

kodorvan/perm/system/public/js/three.core.js

@@ -0,0 +1 @@
+../../../../../three.js/build/three.core.js

kodorvan/perm/system/public/js/three.module.js

@@ -0,0 +1 @@
+../../../../../three.js/build/three.module.js

kodorvan/perm/system/public/themes/default/css/aside.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 
 aside {
-    &:not(:has(*)) {
-        display: none;
-    }
+	&:not(:has(*)) {
+		display: none;
+	}
 }

kodorvan/perm/system/public/themes/default/css/elements/advantages.css

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 .advantages {
   margin: 0 auto;
 

kodorvan/perm/system/public/themes/default/css/elements/company.css

@@ -0,0 +1,54 @@
+@charset "UTF-8";
+
+section#company {
+	justify-self: end;
+	width: 160px;
+	padding: 1rem;
+	padding-bottom: unset;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	font-family: "Bahnschrift";
+
+	> h4.name {
+		margin: unset;
+		display: block;
+		text-align: right;
+		font-weight: 600;
+		font-size: 1rem;
+	}
+
+	> p.column {
+		margin: unset;
+		display: inline-flex;
+		flex-direction: column;
+		text-align: right;
+		gap: 0.2em;
+		font-size: 0.8rem;
+		color: grey;
+
+		> span.row {
+			display: inline-flex;
+			justify-content: end;
+			font-weight: 400;
+
+			&:before {
+				margin-right: auto;
+				font-weight: 600;
+				color: #fff;
+			}
+		}
+
+		> span.tax {
+			&:before {
+				content: var(--company-tax) ":";
+			}
+		}
+
+		> span.identifier {
+			&:before {
+				content: var(--company-identifier) ":";
+			}
+		}
+	}
+}

kodorvan/perm/system/public/themes/default/css/elements/cookies.css

@@ -0,0 +1,54 @@
+@charset "UTF-8";
+
+section#cookies {
+	--shadow: 4px 4px 10px 0px rgb(0 0 0 / 45%);
+	z-index: 3100;
+	right: var(--fixed-right, 2rem);
+	bottom: var(--fixed-bottom, 2rem);
+	position: fixed;
+	font-family: "Bahnschrift";
+	/* border: 1px solid #a8a8a847; */
+	border: 1px solid #fff;
+	/* border-right: unset;
+	border-bottom: unset; */
+	border-radius: 0.75rem;
+	color: #fff;
+	background-color: #000000b8;
+	background-color: #000000;
+	/* backdrop-filter: blur(3px); */
+	box-shadow: var(--shadow);
+	-webkit-box-shadow: var(--shadow);
+	-moz-box-shadow: var(--shadow);
+	transition: opacity 0.1s ease-out;
+
+	> div {
+		padding: 0.8rem 1.2rem 0.7rem;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+
+		> p {
+			margin: unset;
+			font-size: 1rem;
+		}
+
+		> small {
+			font-size: 0.8rem;
+			font-weight: 200;
+			color: #a6a69d;
+		}
+	}
+
+	> button {
+		top: -0.4rem;
+		right: -2rem;
+		position: absolute;
+		padding: unset;
+		padding-right: 0.1em;
+		cursor: pointer;
+		border: unset;
+		color: #f00;
+		background: unset;
+	}
+}

kodorvan/perm/system/public/themes/default/css/elements/cookies_glass.css

@@ -0,0 +1,70 @@
+@charset "UTF-8";
+
+section#cookies {
+	--shadow: 4px 4px 10px 0px rgb(0 0 0 / 45%);
+	z-index: var(--cookies-z-index, 6000);
+	right: var(--cookies-right, 2rem);
+	bottom: var(--cookies-bottom, 2rem);
+	position: fixed;
+	width: var(--cookies-width, 400px);
+	height: var(--cookies-height, 40px);
+	/* padding: 0.8rem 1.2rem 0.7rem; */
+	font-family: "Bahnschrift";
+	color: #fff;
+	transition: opacity 0.1s ease-out;
+
+	:is(> label[for="cookies"]:focus) {
+		opacity: 0;
+	}
+
+	+ div.cookies.background {
+		z-index: calc(var(--cookies-z-index, 6000) - 1);
+		right: var(--cookies-right, 2rem);
+		bottom: var(--cookies-bottom, 2rem);
+		position: fixed;
+		width: var(--cookies-width, 400px);
+		height: var(--cookies-height, 40px);
+		border: 1px solid #a8a8a847;
+		border-right: unset;
+		border-bottom: unset;
+		border-radius: 0.75rem;
+		background-color: #33323691;
+		backdrop-filter: blur(3px);
+		mix-blend-mode: screen;
+		box-shadow: var(--shadow);
+		-webkit-box-shadow: var(--shadow);
+		-moz-box-shadow: var(--shadow);
+	}
+
+	> div {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+
+		> p {
+			margin: unset;
+			font-size: 1rem;
+		}
+
+		> small {
+			font-size: 0.8rem;
+			font-weight: 200;
+			color: #a6a69d;
+		}
+	}
+
+	> label {
+		right: -20px;
+		top: -20px;
+		position: absolute;
+		padding: unset;
+		padding-right: 0.1em;
+		cursor: pointer;
+		border: unset;
+		color: #f00;
+		background: unset;
+	}
+}

kodorvan/perm/system/public/themes/default/css/elements/description.css

@@ -0,0 +1,95 @@
+@charset "UTF-8";
+
+section#description {
+	padding-top: 2rem;
+	padding-bottom: 1.5rem;
+	gap: 1rem;
+
+	> p {
+		margin: unset;
+		width: var(--width);
+		font-family: "Cascadia Code";
+		font-weight: 300;
+		font-size: 0.8rem;
+
+		> span {
+			font-weight: 400;
+		}
+
+		+ small {
+			font-family: "Bahnschrift";
+			font-weight: 100;
+		}
+	}
+
+	> ul.table {
+		/* --border-color: #000; */
+		--border-color: unset;
+		margin: unset;
+		margin-top: 1rem;
+		width: var(--width);
+		padding: unset;
+		display: flex;
+		flex-direction: column;
+		font-family: "Bahnschrift";
+		font-size: 0.8rem;
+		font-weight: 400;
+		list-style: none;
+		overflow: hidden;
+		border-radius: 0.75rem;
+		border: 1px solid var(--border-color);
+
+		> li {
+			height: 3rem;
+			display: flex;
+			border-bottom: 1px dashed var(--border-color);
+
+			&:is(:last-of-type) {
+				border-bottom: unset;
+			}
+
+			> span {
+				padding: 0.25rem 0.45rem;
+				display: inline;
+				align-content: center;
+
+				&:is(.bad) {
+					width: 45%;
+					opacity: 0.6;
+					border-right: 1px solid var(--border-color);
+					/* background-color: #ffe1e1; */
+
+					> i.icon.close {
+						margin-top: -0.4em;
+						color: #c64d4d;
+					}
+				}
+
+				&:is(.good) {
+					width: 70%;
+					/* background-color: #e0ffd5; */
+
+					> i.icon.check {
+						min-width: var(--width);
+						color: #77b81b;
+					}
+				}
+
+				> i.icon {
+					float: left;
+					height: 100%;
+				}
+			}
+		}
+	}
+
+	> strong.partners {
+		font-family: "Geologica";
+		font-weight: 400;
+		font-size: 1.2rem;
+
+		> span {
+			color: #1e1df2;
+		}
+	}
+}

kodorvan/perm/system/public/themes/default/css/elements/introdution.css

@@ -0,0 +1,158 @@
+@charset "UTF-8";
+
+section#introdution {
+	position: relative;
+	width: 100%;
+	height: var(--introdution-height, 350px);
+	overflow: hidden;
+	background-color: #000;
+
+	+section.row {
+		--shadow: 0px -10px 60px 30px rgba(0, 0, 0, 0.6);
+		padding-top: 1rem;
+		box-shadow: var(--shadow);
+		-webkit-box-shadow: var(--shadow);
+		-moz-box-shadow: var(--shadow);
+	}
+
+	>div.information {
+		z-index: 200;
+		position: fixed;
+		width: 33rem;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		cursor: default;
+		/* transform: perspective(35px) rotatex(1deg); */
+
+		>span#label {
+			--shadow: 0px 9px 8px 0px rgb(0 0 0 / 40%);
+			margin-top: -2em;
+			padding: 0.4em 0.8em 0.2em 1.2em;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			gap: 1em;
+			font-size: 1.2rem;
+			font-family: "Bahnschrift";
+			font-weight: 400;
+			border-radius: 1.125rem;
+			color: #aeb629;
+			border: 1px solid #e06a6a6e;
+			border-bottom: unset;
+			background-color: #472929a8;
+			backdrop-filter: blur(1.3px);
+			box-shadow: var(--shadow);
+			-webkit-box-shadow: var(--shadow);
+			-moz-box-shadow: var(--shadow);
+			/* transform: perspective(25px) rotatex(-1deg); */
+
+			>i.icon.code {
+				margin-bottom: 3px;
+			}
+		}
+
+		>h2#title {
+			margin: unset;
+			width: max-content;
+			padding: 0.2em 0.5em 0em;
+			font-family: Bahnschrift;
+			font-size: 2.6rem;
+			font-weight: 400;
+			color: #fff;
+			text-shadow:
+				0px 0px 4px #ffffff85,
+				0px 0px 9px #ffffff47;
+
+			>span.kodorvan {
+				color: #ffff00;
+				text-shadow:
+					0px 0px 4px #ffff00b5,
+					0px 0px 11px #ffff008a
+			}
+		}
+
+		>p#team {
+			margin: unset;
+			width: 100%;
+			/* height: 70px; */
+			box-sizing: border-box;
+			padding: 0.6em 1em;
+			text-align: center;
+			font-size: 1.2rem;
+			font-family: "Bahnschrift";
+			font-weight: 400;
+			border-radius: 0.75rem;
+			background-color: #fff;
+
+			>b {
+				color: #152bcb;
+			}
+
+			>strong {
+				color: #de1111;
+			}
+		}
+
+		>span {
+			position: absolute;
+			display: flex;
+			padding: 0.4em 0.8rem 0.3em;
+			font-size: 1.2rem;
+			font-family: "Bahnschrift";
+			font-weight: 400;
+			border-radius: 0.75rem;
+			background-color: #fff;
+		}
+	}
+
+	>div.background {
+		z-index: 100;
+		position: absolute;
+		top: 0%;
+		left: 0%;
+		width: 100%;
+		height: 100%;
+		filter: brightness(0.4);
+		animation-name: appearance;
+		animation-fill-mode: forwards;
+		animation-duration: 0.2s;
+		animation-delay: 1s;
+		animation-timing-function: ease-in;
+
+		>video:only-of-type {
+			z-index: -100;
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			object-position: center;
+			scale: 1.1;
+			filter: blur(5px);
+		}
+
+		>div#ebashilovo {
+			z-index: 1000;
+			position: absolute;
+			width: 100%;
+			height: 100%;
+
+			>canvas {
+				width: 200%;
+				height: 100%;
+				display: block;
+			}
+
+		}
+	}
+}
+
+@keyframes appearance {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}

kodorvan/perm/system/public/themes/default/css/elements/links.css

@@ -0,0 +1,27 @@
+@charset "UTF-8";
+
+nav#links {
+	flex-grow: 1;
+	display: inline-flex;
+	justify-content: center;
+	gap: 1rem;
+
+	> a {
+		text-decoration: none;
+		font-family: "Geologica";
+		font-weight: 400;
+		font-size: 0.85rem;
+		color: #807f7f;
+		transition: color 0.1s ease-out;
+
+		&:is(:hover, :focus) {
+			color: #d5d5d5;
+			transition: color 0s;
+		}
+
+		&:active {
+			color: #4b4b4b;
+			transition: color 0s;
+		}
+	}
+}

kodorvan/perm/system/public/themes/default/css/elements/office.css

@@ -0,0 +1,41 @@
+@charset "UTF-8";
+
+section#office {
+	height: 100%;
+	display: flex;
+
+	> div.map {
+		width: 250px;
+		height: 100%;
+		overflow: hidden;
+		border-radius: 0.75rem;
+		border: 1px solid #fff;
+		background-color: #0c110c;
+
+		> div.loading {
+			width: 100%;
+			height: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			filter: brigtless(0.8) blur(1px);
+
+			&:before {
+				margin-top: 50px;
+				position: absolute;
+				content: var(--map-loading, "Loading");
+				width: max-content;
+				text-align: center;
+				font-family: "Geologica";
+				font-style: normal;
+				font-weight: 400;
+				font-size: 0.6rem;
+				color: #533a3a;
+			}
+
+			> i.icon.loading.spinner {
+				color: #fff;
+			}
+		}
+	}
+}

kodorvan/perm/system/public/themes/default/css/elements/popular.css

@@ -0,0 +1,482 @@
+@charset "UTF-8";
+
+section#popular {
+	position: relative;
+	display: flex;
+
+	>div.title {
+		margin-top: 1rem;
+		margin-bottom: 1rem;
+		width: var(--width);
+		display: flex;
+
+		>div.column {
+			display: flex;
+			flex-direction: column;
+
+			&:is(.display) {
+				margin-top: auto;
+				height: min-content;
+				display: flex;
+				flex-direction: row;
+				border-radius: 1.125rem;
+				border: 2px solid #000;
+				background-color: #fff;
+				/* color: #fff;
+				background-color: #000; */
+
+				>span.amount {
+					margin-bottom: 0.1em;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					font-family: "Cascadia Code";
+					font-weight: 600;
+				}
+
+				>button {
+					--padding: 1rem;
+					box-sizing: border-box;
+					padding: var(--padding, 1rem);
+					cursor: pointer;
+					border: unset;
+					/* color: #fff; */
+					background: unset;
+
+					/* &:first-of-type:not(:only-of-type) {
+						padding-right: calc(var(--padding, 1rem) / 1.5);
+					}
+
+					&:last-of-type:not(:only-of-type) {
+						padding-left: calc(var(--padding, 1rem) / 1.5);
+					} */
+				}
+			}
+
+			&:last-of-type:not(:only-of-type) {
+				margin-left: auto;
+			}
+
+			>h3 {
+				margin: unset;
+				font-weight: 600;
+				font-size: 2rem;
+			}
+		}
+	}
+
+	>div.services {
+		--row-amount: 3;
+		--row-amount-protected: min(max(1, var(--row-amount, 1)), 4);
+		--gap: 1rem;
+		width: var(--width);
+		display: flex;
+		flex-flow: row wrap;
+		gap: var(--gap);
+
+		>article.service {
+			--service-width: max(250px, calc(var(--width) / var(--row-amount-protected, 2) - (var(--gap, 0px) * 0.5 * (var(--row-amount-protected, 2) - 1))));
+			--icon-background-color: #261d1b;
+			--background-color: #3f312e;
+			position: relative;
+			min-width: 250px;
+			width: var(--service-width);
+			min-height: 450px;
+			box-sizing: border-box;
+			padding: 1.2rem 0 0;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			color: #fff;
+			transition: width 0.2s cubic-bezier(0.5, 0, 0, 1);
+
+			&:is(.telegram.voronka) {
+				--icon-background-color: #1a82b6;
+				--background-color: #27a6e6;
+			}
+
+			&:is(.parser) {
+				--icon-background-color: #996405;
+				/* --background-color: #fcfd1e; */
+				--background-color: #e58523;
+			}
+
+			&:is(.calculator) {
+				--icon-background-color: #a93737;
+				--background-color: #d24545;
+			}
+
+			>i.icon {
+				position: absolute;
+				margin-top: -1rem;
+				color: #000;
+
+				&:is(.left) {
+					justify-self: start;
+				}
+
+				&:is(.center) {
+					justify-self: center;
+				}
+
+				&:is(.right) {
+					justify-self: end;
+				}
+
+				&:is(.crown) {
+					top: 1.2em;
+				}
+
+				&:is(.search) {
+					top: 1em;
+				}
+
+				&:is(.file.document) {
+					top: 1em;
+				}
+
+				&:is(.calculator) {
+					top: 0.8em;
+				}
+			}
+
+			>div.head {
+				--border-height: 20px;
+				--border-gap: 0.4em;
+				z-index: 50;
+				position: relative;
+				width: 100%;
+				height: calc(2.6em + var(--border-height, 0px) - 0.75rem + var(--border-gap, 0px));
+				box-sizing: border-box;
+				display: flex;
+				justify-content: center;
+				align-items: start;
+				/* text-shadow: 0px -0.03em 0.24em #000000b3, 0px -0.03em 1em #00000087; */
+
+				&:after {
+					z-index: -100;
+					position: absolute;
+					bottom: -0.75rem;
+					left: 0;
+					content: '';
+					width: 100%;
+					height: var(--border-height);
+					border-radius: 0.75rem 0.75rem 0 0;
+					background-color: var(--background-color);
+				}
+
+				>h4 {
+					z-index: 200;
+					margin: unset;
+					display: flex;
+					font-family: "Bahnschrift";
+					font-size: 1.4rem;
+					font-weight: 400;
+					color: #000;
+				}
+			}
+
+			>div.body {
+				--service-body-padding: 1rem;
+				/* --shadow: 0px 0.8em 40px 1.7em rgba(0, 0, 0, 0.4); */
+				z-index: 100;
+				position: relative;
+				flex-grow: 1;
+				width: 100%;
+				height: 100%;
+				box-sizing: border-box;
+				padding: var(--service-body-padding, 1rem);
+				display: flex;
+				flex-direction: column;
+				gap: 1em;
+				overflow: hidden;
+				border-radius: 0.75rem;
+				background-color: #130d0d;
+				/* box-shadow: var(--shadow);
+				-webkit-box-shadow: var(--shadow);
+				-moz-box-shadow: var(--shadow); */
+
+				>div.icon {
+					--diameter: 60px;
+					z-index: 500;
+					position: absolute;
+					justify-content: center;
+					align-items: center;
+					left: calc(var(--diameter) / -2.5);
+					margin-top: calc(var(--diameter) / -2.5);
+					width: var(--diameter);
+					height: var(--diameter);
+					display: flex;
+					border-radius: 100%;
+					background-color: var(--background-color);
+
+					&:before {
+						--border-size: 6px;
+						content: '';
+						margin: auto;
+						width: calc(100% - var(--border-size) * 2);
+						height: calc(100% - var(--border-size) * 2);
+						display: block;
+						border-radius: 100%;
+						background-color: var(--icon-background-color, #fff);
+					}
+
+					>i.icon {
+						position: absolute;
+						color: #fff;
+
+						* {
+							color: #fff;
+						}
+					}
+				}
+
+				>p {
+					margin: unset;
+					font-family: "Bahnschrift";
+					font-size: 0.8rem;
+					font-weight: 200;
+
+					&:is(.description) {
+						margin: unset;
+						flex-grow: 1;
+						font-size: 1rem;
+						color: #fff;
+					}
+
+					&:is(.howto) {
+						font-style: italic;
+						color: #dacfcf;
+					}
+				}
+
+				>div.extra {
+					--service-extra-gap: 1em;
+					--service-extra-animation-duration: 60s;
+					position: relative;
+					margin: 0 calc(var(--service-body-padding, 1rem) * -1);
+					height: 1em;
+					display: inline-flex;
+					font-family: 'Cascadia Code';
+					font-size: 0.7rem;
+					color: #8b8b8bcf;
+
+					>p {
+						position: absolute;
+						margin: unset;
+						min-width: var(--service-width);
+						width: max-content;
+						padding-left: var(--service-extra-gap, 1em);
+						word-break: keep-all;
+						display: inline-flex;
+						gap: var(--service-extra-gap, 1em);
+						animation-name: hotline;
+						animation-duration: var(--service-extra-animation-duration, 10s);
+						animation-iteration-count: infinite;
+						animation-timing-function: linear;
+
+						&:first-of-type {}
+
+						&:last-of-type {
+							animation-delay: calc(var(--service-extra-animation-duration, 10s) / -2);
+						}
+					}
+				}
+
+				>div.footer {
+					--service-footer-height: 60px;
+					width: 100%;
+					min-height: var(--service-footer-height, 70px);
+					height: fit-content;
+					display: flex;
+					gap: 1rem;
+
+					>div.buttons {
+						--footer-buttons-gap: 0.4rem;
+						min-width: var(--service-footer-height, 70px);
+						width: var(--service-footer-height, 70px);
+						box-sizing: border-box;
+						display: flex;
+						justify-content: center;
+						flex-flow: row wrap;
+						gap: var(--footer-buttons-gap, 0.4rem);
+
+						>a[type="button"] {
+							flex-grow: 1;
+							width: calc(50% - var(--footer-buttons-gap, 0.4rem) / 2);
+							height: calc(50% - var(--footer-buttons-gap, 0.4rem) / 2);
+							box-sizing: border-box;
+							padding: 0.4rem 0.4rem;
+							display: flex;
+							justify-content: center;
+							align-items: center;
+							border-radius: 0.75rem;
+							border: 1px solid #a0a0a096;
+							border-right: unset;
+							border-bottom: unset;
+							color: #fff;
+							background-color: #8b8b8b66;
+							backdrop-filter: blur(1px);
+							transition: filter 0.05s ease-in;
+
+							&:is(:only-of-type) {
+								height: 100%;
+							}
+
+							&:hover {
+								filter: brightness(1.3);
+								transition: filter 0s;
+							}
+
+							&:active {
+								filter: brightness(1) contrast(1.2);
+								transition: filter 0s;
+							}
+
+							>i.icon.comment {
+								margin-top: -0.3em;
+							}
+						}
+					}
+
+					>div.theses {
+						position: relative;
+						width: 100%;
+						box-sizing: border-box;
+						padding: 0.2em 0;
+						display: flex;
+						flex-direction: column;
+						justify-content: center;
+						gap: 0.2em;
+						font-family: 'Bahnschrift';
+						font-size: 0.9rem;
+						font-weight: 100;
+
+						>p {
+							margin: unset;
+							min-height: 0.9rem;
+							display: inline-flex;
+							gap: 0.4rem;
+							color: #cbcbcb;
+
+							&:is(.blue) {
+								&:is(.colored) {
+									color: #979aff;
+								}
+
+								>span.characteristic {
+									color: #6c7fff;
+								}
+							}
+
+							&:is(.green) {
+								&:is(.colored) {
+									color: #99ff90;
+								}
+
+								>span.characteristic {
+									color: #4bff3d;
+								}
+							}
+
+							&:is(.yellow) {
+								&:is(.colored) {
+									color: #fffa7f;
+								}
+
+								>span.characteristic {
+									color: #e0ff35;
+								}
+							}
+
+							&:is(.cyan) {
+								&:is(.colored) {
+									color: #caf4ff;
+								}
+
+								>span.characteristic {
+									color: #04efff;
+								}
+							}
+
+							&:is(.red) {
+								&:is(.colored) {
+									color: #ff6767;
+								}
+
+								>span.characteristic {
+									color: #ff4747;
+								}
+							}
+
+							>span.characteristic {
+								--characteristic-width: 2.5em;
+								position: relative;
+								width: var(--characteristic-width);
+								min-width: var(--characteristic-width);
+								display: flex;
+								justify-content: end;
+								text-align: right;
+								font-weight: 200;
+
+								>i {
+									margin: 0 auto;
+									align-self: center;
+
+									&:is(.infinity) {
+										margin-top: -0.2em;
+									}
+
+									&:is(.play.forwards) {
+										margin-top: -0.2em;
+										margin-left: calc(60% + 0.2em);
+									}
+								}
+							}
+						}
+					}
+				}
+
+				>img.background {
+					z-index: -100;
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					object-fit: cover;
+					scale: 1.1;
+					/* filter: blur(1.2px) brightness(0.25); */
+					filter: blur(1px) brightness(0.18) contrast(1.05);
+
+					&:is(.telegram.voronka) {
+						object-position: center;
+					}
+				}
+			}
+
+			>p.cost {
+				margin: unset;
+				margin-top: 0.2rem;
+				margin-right: 0.8rem;
+				width: 100%;
+				text-align: right;
+				font-family: 'Nunito';
+				font-size: 2rem;
+				font-weight: 600;
+				color: #000;
+			}
+		}
+	}
+}
+
+@keyframes hotline {
+	from {
+		/* transform: translateX(var(--service-width, 100%)); */
+		transform: translateX(100%);
+	}
+
+	to {
+		transform: translateX(-100%);
+	}
+}

kodorvan/perm/system/public/themes/default/css/elements/projects.css

@@ -0,0 +1,90 @@
+@charset "UTF-8";
+
+section#projects {
+	z-index: 1000;
+	padding-top: 2.5rem;
+	padding-bottom: 1rem;
+	/* transform: rotate3d(220, -777, -100, 385deg) scale(1.1); */
+
+	> h2.title {
+		font-size: 2.4rem;
+		font-family: "Bahnschrift";
+		margin: 0.1em 0 0.2em 0;
+	}
+
+	div.hotline {
+		width: 100vw;
+		height: 250px;
+		display: inline-flex;
+		gap: 15px;
+		cursor: grab;
+
+		&:active {
+			cursor: grabbing;
+		}
+
+		> :is(article, div) {
+			position: relative;
+			min-width: 220px;
+			max-width: 220px;
+			width: 220px;
+			height: 100%;
+			overflow: hidden;
+			border-radius: 0.75rem;
+			filter: contrast(1) brightness(1) saturate(1);
+			transition: filter 0.2s ease-out;
+
+			&:is(:hover, :focus) {
+				filter: contrast(1.2) brightness(0.8) saturate(0.6);
+				transition: filter 0s;
+			}
+
+			&:active {
+				filter: contrast(1.4) brightness(0.7) saturate(0.2);
+				transition: filter 0s;
+			}
+
+			&:is(.pechatalka) {
+				> img.background {
+					filter: blur(1.5px) brightness(0.8);
+				}
+			}
+
+			&:is(.understyle) {
+				> img.background {
+					object-position: bottom;
+					filter: blur(1px) brightness(0.8);
+				}
+			}
+
+			&:is(.surikov) {
+				> img.background {
+					object-position: bottom;
+					filter: blur(0.4px) brightness(0.8);
+				}
+			}
+
+			h4 {
+				position: absolute;
+				z-index: 50;
+				justify-self: center;
+				bottom: 0.4rem;
+				margin: unset;
+				padding: 0.4rem 1rem 0.3rem;
+				font-family: "Bahnschrift";
+				font-size: 1.2rem;
+				font-weight: 900;
+				color: #fff;
+				text-shadow: 2px 2px 3px #000;
+			}
+
+			img.background {
+				position: absolute;
+				top: 0;
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
+		}
+	}
+}

kodorvan/perm/system/public/themes/default/css/elements/server.css

@@ -0,0 +1,212 @@
+@charset "UTF-8";
+
+section#server {
+	--height: 440px;
+	--y-max: min(var(--y, 0px), var(--height, 0px));
+	--offset-left: -5vw;
+	position: relative;
+	height: 440px;
+	overflow: hidden;
+	/* background-color: #000; */
+	background: linear-gradient(127deg, #030308, #0e0202, #180101);
+
+	>div.server {
+		z-index: 100;
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+
+		>img.pc {
+			z-index: 100;
+			position: absolute;
+			top: -225px;
+			/* left: calc(-120px + var(--offset-left) + (var(--y-max, 0px) / 4)); */
+			left: var(--offset-left);
+			height: 290%;
+			clip-path: polygon(0 0, 915px 0, 1065px 100%, 0 100%);
+			transform: perspective(130px) rotateZ(17deg) rotateX(1.3deg) skewX(8deg);
+			filter: contrast(1.1) brightness(1.1);
+			transition: left 0.4s ease-in-out;
+		}
+	}
+
+	>div.right {
+		position: absolute;
+		display: contents;
+
+		>div.title {
+			z-index: 50;
+			position: absolute;
+			left: calc(var(--offset-left, 0px) + 450px);
+			width: 100%;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: start;
+			align-items: start;
+			font-family: "Geologica";
+			font-size: 3rem;
+			color: #fff;
+			transform: perspective(135px) rotateY(-4deg) skewY(5.4deg);
+
+			>h3 {
+				margin: unset;
+				margin-left: min(calc(-100% + (var(--y-max, 0px) * 4.35)), 0px);
+				width: 100%;
+				display: flex;
+				justify-content: start;
+				align-items: center;
+				gap: 0.4em;
+				font-size: 7.6vw;
+				font-weight: 800;
+				color: #ff9400;
+				transition: margin-left 0.4s cubic-bezier(0.55, 0.04, 0.12, 1);
+
+				>i.icon.server {
+					margin-left: 0.3em;
+					scale: 5;
+					color: #fff;
+				}
+			}
+
+			>span {
+				margin-top: -2rem;
+				/* margin-left: 0.1em; */
+				margin-left: min(calc(-100% + 0.1em + (var(--y-max, 0px) * 4.35)), 0px);
+				font-weight: 400;
+				font-size: 3.65vw;
+				color: #b81515;
+				color: #fff;
+				transition: margin-left 0.5s cubic-bezier(0.55, 0.04, 0.12, 1);
+			}
+		}
+
+		>div.bottom {
+			position: absolute;
+			bottom: 0;
+			width: 100%;
+			display: flex;
+
+			>div.column {
+				--margin-bottom: 1.4rem;
+				--height: 105px;
+				z-index: 100;
+				margin: auto 2rem var(--margin-bottom, 1.4rem) auto;
+				margin-bottom: min(calc(var(--height, 100%) * -4 + var(--y-max) / 1),
+						var(--margin-bottom));
+				height: var(--height, fit-content);
+				display: flex;
+				flex-direction: column;
+				font-family: "Geologica";
+				font-weight: 400;
+				font-size: 3rem;
+				color: #fff;
+				transition: margin-bottom 0.3s cubic-bezier(0.55, 0.04, 0.12, 1) 0.2s;
+
+				>span.location {
+					margin-bottom: -0.2em;
+					text-align: end;
+					font-size: 0.85em;
+					font-weight: 400;
+					color: #fff;
+
+					>strong {
+						margin-left: 0.1em;
+						font-weight: 500;
+						/* color: #f00; */
+						color: #0AF;
+					}
+				}
+
+				>strong.cost {
+					display: flex;
+					justify-content: start;
+					align-items: center;
+					gap: 0.2em;
+					font-weight: 400;
+
+					>span {
+						font-weight: 500;
+						color: #00ff08;
+					}
+
+					>i.icon.trend {
+						margin-bottom: 0em;
+						margin-right: 0.45em;
+						scale: 3;
+						rotate: -17deg;
+						color: #fff;
+					}
+				}
+			}
+
+			>ul.advantages {
+				--border-color: #fff;
+				z-index: 500;
+				position: relative;
+				margin: unset;
+				margin-top: auto;
+				margin-right: 10vw;
+				height: 150px;
+				box-sizing: border-box;
+				padding: 1em 1.2em;
+				display: flex;
+				justify-content: center;
+				gap: 0.3em;
+				flex-direction: column;
+				font-family: "Bahnschrift";
+				font-size: 1.2em;
+				font-weight: 600;
+				list-style: none;
+				border-radius: 0.75rem 0.75rem 0 0;
+				border: 2px solid var(--border-color);
+				border-bottom: unset;
+				color: #000;
+				background-color: #fff;
+				transform-origin: left;
+
+				&:before {
+					content: "";
+					position: absolute;
+					left: -2.4rem;
+					bottom: 0;
+					height: 2.25rem;
+					width: 2.25rem;
+					pointer-events: none;
+					border-bottom-right-radius: 0.75rem;
+					box-shadow: 0 20px 0 0 #fff;
+				}
+
+				&:after {
+					content: "";
+					position: absolute;
+					right: -2.4rem;
+					bottom: 0;
+					height: 2.25rem;
+					width: 2.25rem;
+					pointer-events: none;
+					border-bottom-left-radius: 0.75rem;
+					box-shadow: 0 20px 0 0 #fff;
+				}
+
+				>li {
+					position: relative;
+					display: inline-flex;
+					align-items: center;
+					padding-left: 1.8em;
+
+					>i.icon {
+						position: absolute !important;
+						left: 0;
+
+						&:is(.trophy) {
+							top: 0.15em;
+							left: 0.6em;
+						}
+					}
+				}
+			}
+		}
+	}
+}

kodorvan/perm/system/public/themes/default/css/elements/service.css

@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 section#services {
   margin: unset;
   display: flex;

kodorvan/perm/system/public/themes/default/css/elements/shortcut.css

@@ -0,0 +1,41 @@
+@charset "UTF-8";
+
+section#shortcut {
+	> div {
+		width: var(--width);
+		display: flex;
+		flex-direction: row;
+		gap: 1rem;
+
+		> div.column {
+			display: flex;
+			flex-direction: column;
+
+			&:is(.statistics) {
+				width: 300px;
+
+				> p {
+					margin: unset;
+					margin-top: 0.8rem;
+					display: flex;
+					gap: 0.4rem;
+					font-family: "Cascadia Code";
+					font-weight: 600;
+
+					&:is(:first-of-type) {
+						margin-top: unset;
+					}
+
+					> span {
+						font-weight: 400;
+					}
+
+					+ small {
+						font-family: "Bahnschrift";
+						font-weight: 100;
+					}
+				}
+			}
+		}
+	}
+}

kodorvan/perm/system/public/themes/default/css/elements/telegram.css

@@ -0,0 +1,76 @@
+@charset "UTF-8";
+
+section#telegram {
+	--diameter: var(--telegram-diameter, 50px);
+	z-index: 3000;
+	bottom: var(--fixed-bottom);
+	left: var(--fixed-left);
+	position: fixed;
+	width: var(--diameter);
+	height: var(--diameter);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	> a {
+		z-index: 200;
+		width: 100%;
+		height: 100%;
+		border-radius: 100%;
+		box-shadow: 0px 0px 8px 0px rgb(0 0 0 / 30%);
+		transition: scale 0.1s ease-out;
+
+		&:is(:hover, :focus) {
+			scale: 1.05;
+			transition: scale 0.1s ease-in;
+		}
+
+		&:active {
+			scale: 1;
+			filter: brightness(0.8);
+			transition: scale 0s;
+		}
+
+		> img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	> div {
+		--half: calc(var(--telegram-diameter, 0) / 2);
+		--border-radius: 10rem;
+		--gap: 1rem;
+		--border: 1px;
+		z-index: 100;
+		left: var(--half);
+		position: absolute;
+		width: max-content;
+		height: 100%;
+		box-sizing: border-box;
+		padding-right: 2rem;
+		padding-left: calc(var(--half, 0) + var(--gap, 1rem));
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		font-family: "Bahnschrift";
+		border-radius: 0 var(--border-radius) var(--border-radius) 0;
+		border: var(--border, 1px) solid #ded9fae6;
+		border-bottom: unset;
+		background-color: #c0bcd6cc;
+		backdrop-filter: blur(2px);
+
+		> span {
+			font-size: 1.2rem;
+			font-weight: 400;
+			color: #09394e;
+		}
+
+		> small {
+			margin-top: -0.2em;
+			font-size: 0.8rem;
+			font-weight: 400;
+			color: #415970;
+		}
+	}
+}

kodorvan/perm/system/public/themes/default/css/elements/workload.css

@@ -0,0 +1,47 @@
+@charset "UTF-8";
+
+section#workload {
+	height: 80px;
+	padding-top: unset !important;
+	padding-bottom: 1rem;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+
+	> p {
+		margin: unset;
+		display: inline-flex;
+		align-items: center;
+		gap: 1rem;
+		font-family: "Cascadia Code";
+		font-size: 1.2rem;
+
+		> span {
+			position: relative;
+			margin-left: 1rem;
+			font-weight: 700;
+
+			&:is(.small) {
+				color: #18c32a;
+			}
+
+			&:is(.medium) {
+				color: #184dc3;
+			}
+
+			&:is(.heavy) {
+				color: #ff0b0b;
+			}
+
+			> small {
+				right: 0;
+				bottom: -1rem;
+				position: absolute;
+				width: max-content;
+				font-size: 0.8rem;
+				font-weight: 300;
+				color: initial;
+			}
+		}
+	}
+}

kodorvan/perm/system/public/themes/default/css/footer.css

@@ -1,42 +1,28 @@
 @charset "UTF-8";
 
 footer {
-  box-sizing: border-box;
-  padding: 0 20%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-  gap: 0.5rem;
-  margin: 2rem 0 1rem 0;
+	z-index: 4000;
+	position: relative;
+	height: var(--footer-height, 200px);
+	padding: 1rem 10vw;
+	display: flex;
+	align-items: self-end;
+	color: #fff;
+	background-color: #000;
+	--shadow: 0px 0px 80px 25px rgba(0, 0, 0, 0.4);
+	box-shadow: var(--shadow);
+	-webkit-box-shadow: var(--shadow);
+	-moz-box-shadow: var(--shadow);
 
-  &:not(:has(*)) {
-    display: none;
-  }
+	> div.column {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: end;
+		gap: 1rem;
 
-  > p#description {
-    text-align: center;
-    font-size: 1rem;
-    font-family: "Bahnschrift";
-    font-weight: 400;
-    margin: unset;
-    color: rgb(0, 0, 0, 0.6);
-  }
-  > div#link {
-    display: inline-flex;
-    justify-content: center;
-    gap: 1rem;
-
-    > a {
-      text-decoration: none;
-      font-size: 1rem;
-      font-family: "Bahnschrift";
-      font-weight: 400;
-      color: rgb(160, 160, 160);
-      transition: ease 0.2s;
-      &:hover {
-        color: #000;
-      }
-    }
-  }
+		&:is(:last-of-type:last-child) {
+			margin-left: auto;
+		}
+	}
 }

kodorvan/perm/system/public/themes/default/css/header.css

@@ -1,84 +1,75 @@
 @charset "UTF-8";
 
 header {
-  top: 0;
-  left: 0;
-  position: fixed;
-  width: 100vw;
-  height: 70px;
-  box-sizing: border-box;
-  padding: 0 20%;
-  display: grid;
-  grid-template-columns: 1fr 2fr 1fr;
+	z-index: 1000;
+	top: 0;
+	left: 0;
+	position: absolute;
+	width: 100vw;
+	height: calc(var(--menu-height) + var(--introdution-height));
+	pointer-events: none;
 
-  justify-items: center;
-  align-items: center;
-  background-color: #f7fafc;
-  z-index: 1000;
+	> div {
+		top: 0;
+		position: sticky;
+		width: 100%;
+		height: var(--menu-height);
+		box-sizing: border-box;
+		padding: 0 20%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		pointer-events: all;
+		background-color: #fff;
 
-  &:not(:has(*)) {
-    display: none;
-  }
+		&:not(:has(*)) {
+			display: none;
+		}
 
-  > span#logotype {
-    display: flex;
-    flex-direction: column;
-    font-size: 1.1rem;
+		> a#logotype {
+			margin-top: -0.4rem;
+			display: flex;
+			flex-direction: column;
+			font-size: 1.1rem;
+			text-decoration: none;
+			color: #000;
 
-    > h4:only-of-type:first-child {
-      margin: unset;
-      font-family: "Cascadia Code";
-      font-size: 2.5em;
-    }
+			> h4:only-of-type:first-child {
+				margin: unset;
+				font-family: "Cascadia Code";
+				font-size: 2.5em;
+			}
 
-    > small:only-of-type:last-child {
-      justify-self: end;
-      align-self: end;
-      margin-top: -0.8em;
-      font-family: "Bahnschrift";
-      font-size: 0.62em;
-      font-weight: 800;
-      text-transform: uppercase;
-    }
-  }
+			> small:only-of-type:last-child {
+				justify-self: end;
+				align-self: end;
+				margin-top: -0.8em;
+				font-family: "Bahnschrift";
+				font-size: 0.62em;
+				font-weight: 800;
+				text-transform: uppercase;
+			}
+		}
 
-  > nav#menu {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 1rem;
-    font-family: "Geologica";
+		> nav#menu {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			gap: 1rem;
+			font-family: "Geologica";
 
-    > a {
-      text-decoration: none;
-      font-weight: 500;
-      font-size: 1rem;
-      text-transform: uppercase;
-      color: rgb(0, 0, 0, 0.5);
-      transition: ease 0.2s;
+			> a {
+				text-decoration: none;
+				font-weight: 500;
+				font-size: 1rem;
+				text-transform: uppercase;
+				color: rgb(0, 0, 0, 0.5);
+				transition: ease 0.2s;
 
-      &:hover {
-        color: #000;
-      }
-    }
-  }
-
-  > a#order {
-    display: flex;
-    gap: 5px;
-    align-items: center;
-    padding: 0.5em 1.3em;
-    border-radius: 1.125em;
-
-    font-family: "Cascadia Code";
-    font-weight: 400;
-    text-decoration: none;
-    background-color: #0ea5e9;
-    color: #fff;
-    transition: 0.2s;
-
-    &:hover {
-      transform: scale(1.05);
-    }
-  }
+				&:hover {
+					color: #000;
+				}
+			}
+		}
+	}
 }

kodorvan/perm/system/public/themes/default/css/hotline.css

@@ -1,31 +0,0 @@
-section.hotline {
-
-  max-width: 100vw;
-  max-height: 360px;
-  height: max(16vw, 16vh);
-  display: inline-flex;
-  gap: 15px;
-
-  > :is(article, div) {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: centr;
-
-    min-width: 200px;
-    height: 100%;
-    border-radius: 1.125rem;
-    overflow: hidden;
-    background: rgb(0, 0, 0);
-
-    p {
-      font-family: "Cascadia Code";
-      font-size: 1.8rem;
-      font-weight: bold;
-      color: #ffffff;
-      text-shadow: 5px 5px 2px rgba(14, 165, 2335, 0.7);
-      text-align: center;
-    }
-  }
-}

kodorvan/perm/system/public/themes/default/css/icons/code_slash.css

@@ -1,36 +0,0 @@
-@charset "UTF-8";
-
-i.icon.code.slash {
-	position: relative;
-	width: 2px;
-	height: 16px;
-	box-sizing: border-box;
-	display: block;
-	transform: rotate(15deg);
-	background: currentColor;
-
-	&::after,
-	&::before {
-		position: absolute;
-		content: "";
-		width: 8px;
-		height: 8px;
-		box-sizing: border-box;
-		display: block;
-		transform: rotate(-60deg);
-	}
-
-	&::before {
-		top: 5px;
-		left: -8px;
-		border-top: 2px solid;
-		border-left: 2px solid;
-	}
-
-	&::after {
-		top: 3px;
-		right: -8px;
-		border-right: 2px solid;
-		border-bottom: 2px solid;
-	}
-}

kodorvan/perm/system/public/themes/default/css/icons/telegram.css

@@ -1,31 +0,0 @@
-i.icon.telegram {
-  width: 24px;
-  height: 24px;
-  background: transparent;
-  position: relative;
-}
-
-i.icon.telegram::before {
-  content: "";
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  background: white;
-  border-radius: 50%;
-  top: 2px;
-  left: 2px;
-}
-
-i.icon.telegram::after {
-  content: "";
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-bottom: 8px solid currentColor;
-  transform: rotate(-30deg);
-  top: 7px;
-  left: 9px;
-  color: #ffffff; /* Цвет бумажного самолетика */
-}

kodorvan/perm/system/public/themes/default/css/main.css

@@ -5,138 +5,21 @@
 @import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Geologica:wght@100..900&family=Pochaevsk&display=swap");
-
-body {
-  margin: unset;
-  background-color: #f7fafc;
-}
+@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans+Pinstripe:ital@0;1&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
 
 main {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2rem;
-  transition: 0s;
-  margin-top: 6rem;
-  /* overflow-x: hidden; */
+	--scroll-px-ten: calc(var(--scroll-px) / 10);
+	--scroll-px-hundred: calc(var(--scroll-px-ten) / 10);
+	--scroll-px-thousand: calc(var(--scroll-px-hundred) / 10);
+	margin-top: var(--menu-height);
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	align-items: center;
+	transition: 0s;
+	overflow-x: hidden;
 
-  &:not(:has(*)) {
-    display: none;
-  }
-  > div.container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: auto;
-
-    > span#shape {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      gap: 20px;
-      padding: 0.3em 1em;
-      border-radius: 1.125rem;
-      font-family: "Bahnschrift";
-      font-size: 1.2rem;
-      font-weight: 400;
-      color: #0ea5e9;
-      background: linear-gradient(
-        90deg,
-        rgba(227, 242, 249, 1) 0%,
-        rgba(14, 165, 233, 0.2) 50%,
-        rgba(227, 242, 249, 1) 100%
-      );
-    }
-
-    > h2#title {
-      font-size: 2.4rem;
-      font-family: "Bahnschrift";
-      margin: 0.1em 0 0.2em 0;
-
-      > span {
-        color: #0ea5e9;
-      }
-    }
-
-    > p#description {
-      text-align: center;
-      font-size: 1.2rem;
-      font-family: "Bahnschrift";
-      font-weight: 400;
-
-      margin: unset;
-      color: rgb(0, 0, 0, 0.6);
-    }
-    > p.description {
-      width: 40%;
-    }
-
-    > div#team {
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      gap: 1rem;
-      margin-top: 1rem;
-
-      > div#card {
-        display: flex;
-        flex-direction: column;
-        justify-content: start;
-        padding: 0.6em 0.8em;
-        border-radius: 1.125rem;
-        box-shadow: 0px 0px 15px 0px rgba(14, 165, 233, 0.1);
-        background-color: #fff;
-        transition: ease 0.2s;
-
-        &:hover {
-          transform: scaleY(1.03);
-        }
-        > img {
-          object-fit: cover;
-          width: 250px;
-          height: 270px;
-          margin: 0 auto;
-          border-radius: 1.125rem;
-        }
-        > p {
-          font-size: 1.5em;
-          font-weight: 900;
-          font-family: "Cascadia Code";
-          color: #000000;
-          margin: 15px 0 0;
-        }
-        > span {
-          font-size: 1em;
-          font-family: "Cascadia Code";
-          font-weight: 400;
-          color: #0ea5e9;
-        }
-      }
-    }
-    > a#telegram {
-      display: flex;
-      gap: 5px;
-      align-items: center;
-      padding: 0.5em 1.3em;
-      margin-top: 1rem;
-      border-radius: 1.125em;
-      font-size: 1em;
-      font-family: "Cascadia Code";
-      font-weight: 400;
-      text-decoration: none;
-      background-color: #0ea5e9;
-      color: #fff;
-      transition: 0.2s;
-
-      &:hover {
-        transform: scale(1.05);
-      }
-      > img {
-        width: 20px;
-        height: 20px;
-      }
-    }
-  }
+	&:not(:has(*)) {
+		display: none;
+	}
 }

kodorvan/perm/system/public/themes/default/css/pages/index.css

@@ -0,0 +1,165 @@
+@charset "UTF-8";
+
+main {
+	>section.row {
+		z-index: 500;
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		background-color: #fff;
+
+		>h2#title {
+			font-size: 2.4rem;
+			font-family: "Bahnschrift";
+			margin: 0.1em 0 0.2em 0;
+
+			>span {
+				color: #0ea5e9;
+			}
+		}
+
+		>p#description {
+			margin: unset;
+			text-align: center;
+			font-size: 1.2rem;
+			font-family: "Geologica";
+			font-weight: 400;
+			color: rgb(0, 0, 0, 0.6);
+
+			>span {
+				color: #0ea5e9;
+				font-weight: 800;
+			}
+		}
+
+		>p.description {
+			width: 40%;
+		}
+
+		>a#order {
+			padding: 0.5em 1.3em;
+			margin-top: 1rem;
+			display: flex;
+			align-items: center;
+			gap: 5px;
+			border-radius: 1.125em;
+			font-size: 1em;
+			font-family: "Geologica";
+			font-weight: 400;
+			text-decoration: none;
+			background-color: #0ea5e9;
+			color: #fff;
+			transition: 0.2s;
+
+			&:hover {
+				transform: scale(1.05);
+			}
+		}
+
+		>div#team {
+			margin-top: 1rem;
+			display: inline-flex;
+			justify-content: center;
+			align-items: center;
+			gap: 1rem;
+
+			>div#card {
+				padding: 0.6em 0.8em;
+				width: 180px;
+				height: 220px;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				text-align: center;
+				border-radius: 1.125rem;
+				box-shadow: 0px 0px 15px 0px rgba(14, 165, 233, 0.1);
+				background-color: #fff;
+				transition: ease 0.2s;
+
+				>img {
+					object-fit: cover;
+					width: 140px;
+					height: 140px;
+					border-radius: 100%;
+				}
+
+				>p {
+					margin: 1em 0 0;
+					font-size: 1.2em;
+					font-family: "Geologica";
+					font-weight: 900;
+					color: #000000;
+				}
+
+				>span {
+					font-size: 1em;
+					font-family: "Geologica";
+					font-weight: 400;
+					color: #0ea5e9;
+				}
+			}
+		}
+
+		>a#telegram {
+			padding: 0.5em 1.3em;
+			margin-top: 1rem;
+			display: flex;
+			align-items: center;
+			gap: 5px;
+			border-radius: 1.125em;
+			font-size: 1em;
+			font-family: "Geologica";
+			font-weight: 400;
+			text-decoration: none;
+			background-color: #0ea5e9;
+			color: #fff;
+			transition: 0.2s;
+
+			&:hover {
+				transform: scale(1.05);
+			}
+
+			>img {
+				width: 20px;
+				height: 20px;
+			}
+		}
+	}
+
+	>section.wrap {
+		position: relative;
+		overflow: hidden;
+		background-color: #fff;
+
+		>section.row {
+			z-index: 500;
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			background: unset;
+		}
+
+		>div.net {
+			--dot-bg: #5a645a;
+			--dot-color: transparent;
+			--dot-color: transparent;
+			--dot-size: calc(110px + var(--scroll-px-hundred, 0px) * 2);
+			--dot-space: calc(var(--dot-size) + 1px);
+			z-index: -50;
+			position: absolute;
+			top: -30%;
+			width: 200%;
+			height: 200%;
+			background: linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), var(--dot-color);
+			mask-image: linear-gradient(transparent, #fff, transparent);
+			transform: perspective(135px) rotateX(calc(6deg + var(--scroll-deg, 0deg) * -0.4)) skewY(6deg) rotateZ(-18deg);
+			transition: transform 0.08s linear, background 0.08s linear;
+		}
+	}
+}
+}

kodorvan/perm/system/public/themes/default/css/system.css

@@ -1,28 +1,42 @@
 @charset "UTF-8";
 
 :root {
+	--width: max(1050px, 55vw);
+	--menu-height: 70px;
+	--introdution-height: min(350px, 35vh);
 	--gap: min(12px, 1rem);
+	--fixed-right: 3rem;
+	--fixed-bottom: 2rem;
+	--fixed-left: 3rem;
+	--telegram-diameter: 50px;
 
-	/* font-family: , system-ui, sans-serif; */
-	font-family: "dejavu";
+	--cookies-z-index: 6000;
+	--cookies-right: var(--fixed-right);
+	--cookies-bottom: var(--fixed-bottom);
+	--cookies-width: 24rem;
+	--cookies-height: 4rem;
+
+	font-family: "Commissioner";
+	font-family: "Share Tech Mono";
+	font-family: "Montserrat";
+	font-family: "Alumni Sans Pinstripe";
+	font-family: "DejaVu";
+	font-family: "Fira";
+	font-family: "Hack";
+	font-family: "Nunito", "DejaVu", sans-serif;
 	text-decoration: none;
 	outline: none;
 	border: none;
 	transition: 0.1s ease-out;
 }
 
-/* Selection */
-::selection {
-  color: var(--text-selected-color);
-  background: var(--text-selected-background-color);
+body {
+	margin: unset;
+	width: 100vw;
+	overflow-x: hidden;
+	background-color: #f7fafc;
 }
 
-::-moz-selection {
-  color: var(--text-selected-color);
-  background: var(--text-selected-background-color);
-}
-
-
 .unselectable {
 	-webkit-touch-callout: none;
 	-webkit-user-select: none;
@@ -31,4 +45,3 @@
 	-ms-user-select: none;
 	user-select: none;
 }
-

kodorvan/perm/system/public/themes/default/images/icons/telegram.svg

@@ -1 +1,16 @@
-<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M46.137,6.552c-0.75-0.636-1.928-0.727-3.146-0.238l-0.002,0C41.708,6.828,6.728,21.832,5.304,22.445	c-0.259,0.09-2.521,0.934-2.288,2.814c0.208,1.695,2.026,2.397,2.248,2.478l8.893,3.045c0.59,1.964,2.765,9.21,3.246,10.758	c0.3,0.965,0.789,2.233,1.646,2.494c0.752,0.29,1.5,0.025,1.984-0.355l5.437-5.043l8.777,6.845l0.209,0.125	c0.596,0.264,1.167,0.396,1.712,0.396c0.421,0,0.825-0.079,1.211-0.237c1.315-0.54,1.841-1.793,1.896-1.935l6.556-34.077	C47.231,7.933,46.675,7.007,46.137,6.552z M22,32l-3,8l-3-10l23-17L22,32z"/></svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1000px" height="1000px" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
+    <title>Artboard</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="99.2583404%" id="linearGradient-1">
+            <stop stop-color="#2AABEE" offset="0%"></stop>
+            <stop stop-color="#229ED9" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="Oval" fill="url(#linearGradient-1)" cx="500" cy="500" r="500"></circle>
+        <path d="M226.328419,494.722069 C372.088573,431.216685 469.284839,389.350049 517.917216,369.122161 C656.772535,311.36743 685.625481,301.334815 704.431427,301.003532 C708.567621,300.93067 717.815839,301.955743 723.806446,306.816707 C728.864797,310.92121 730.256552,316.46581 730.922551,320.357329 C731.588551,324.248848 732.417879,333.113828 731.758626,340.040666 C724.234007,419.102486 691.675104,610.964674 675.110982,699.515267 C668.10208,736.984342 654.301336,749.547532 640.940618,750.777006 C611.904684,753.448938 589.856115,731.588035 561.733393,713.153237 C517.726886,684.306416 492.866009,666.349181 450.150074,638.200013 C400.78442,605.66878 432.786119,587.789048 460.919462,558.568563 C468.282091,550.921423 596.21508,434.556479 598.691227,424.000355 C599.00091,422.680135 599.288312,417.758981 596.36474,415.160431 C593.441168,412.561881 589.126229,413.450484 586.012448,414.157198 C581.598758,415.158943 511.297793,461.625274 375.109553,553.556189 C355.154858,567.258623 337.080515,573.934908 320.886524,573.585046 C303.033948,573.199351 268.692754,563.490928 243.163606,555.192408 C211.851067,545.013936 186.964484,539.632504 189.131547,522.346309 C190.260287,513.342589 202.659244,504.134509 226.328419,494.722069 Z" id="Path-3" fill="#FFFFFF"></path>
+    </g>
+</svg>

kodorvan/perm/system/public/themes/test/css/aside.css

@@ -1,7 +0,0 @@
-@charset "UTF-8";
-
-aside {
-    &:not(:has(*)) {
-        display: none;
-    }
-}

kodorvan/perm/system/public/themes/test/css/blocks/hotline.css

@@ -1,38 +0,0 @@
-section#projects {
-  > h2.title {
-    font-size: 2.4rem;
-    font-family: "Bahnschrift";
-    margin: 0.1em 0 0.2em 0;
-  }
-
-  div.hotline {
-    max-width: 100vw;
-    max-height: 360px;
-    height: max(16vw, 16vh);
-    display: inline-flex;
-    gap: 15px;
-
-    > :is(article, div) {
-      position: relative;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      text-align: centr;
-
-      min-width: 200px;
-      height: 100%;
-      border-radius: 1.125rem;
-      overflow: hidden;
-      background: rgb(0, 0, 0);
-
-      p {
-        font-family: "Bahnschrift";
-        font-size: 1.8rem;
-        font-weight: bold;
-        color: #ffffff;
-        text-shadow: 5px 5px 2px rgba(14, 165, 2335, 0.7);
-        text-align: center;
-      }
-    }
-  }
-}

kodorvan/perm/system/public/themes/test/css/blocks/introdution.css

@@ -1,126 +0,0 @@
-section#introdution {
-	position: relative;
-	width: 100%;
-	height: min(500px, 45vh);
-	overflow: hidden;
-
-	>div.dots {
-		--dot-bg: black;
-		--dot-color: red;
-		--dot-size: 3px;
-		--dot-space: 8px;
-		z-index: -50;
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		background:
-			linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
-			linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space), var(--dot-color);
-		mix-blend-mode: color-burn;
-		filter: blur(1px);
-	}
-
-	>video:only-of-type {
-		z-index: -100;
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-		object-position: center;
-		scale: 1.1;
-		filter: blur(5px);
-	}
-
-	>div {
-		position: relative;
-		width: 30vw;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		cursor: default;
-
-		>span#label {
-			margin-top: -60px;
-			margin-bottom: 20px;
-			width: 320px;
-			padding: 0.3em .5em 0.3em 1em;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			gap: 20px;
-			font-size: 1.2rem;
-			font-family: "Bahnschrift";
-			font-weight: 400;
-			border-radius: 1.125rem;
-			border: 1px solid #8080803d;
-			color: #ffe0e0;
-			border: 1px solid #eeeeee1c;
-			background-color: #dadada30;
-			backdrop-filter: blur(2px);
-		}
-
-		>h2#title {
-			margin: unset;
-			width: max-content;
-			padding: 0.2em 0.5em 0em;
-			font-family: 'Bahnschrift';
-			font-size: 2.6rem;
-			font-weight: 600;
-			border-radius: 0 0.75rem 0 0;
-			color: #241fd3;
-			background-color: #fff;
-		}
-
-		>p#team {
-			margin: unset;
-			width: 650px;
-			height: 70px;
-			box-sizing: border-box;
-			padding: 0.6em 1.2em;
-			text-align: center;
-			font-size: 1.2rem;
-			font-family: "Geologica";
-			font-weight: 400;
-			border-radius: 0.75rem;
-			background-color: #fff;
-
-			>span {
-				color: #0ea5e9;
-				font-weight: 800;
-			}
-		}
-
-		>span {
-			position: absolute;
-			display: flex;
-			padding: 0.4em 0.8rem 0.3em;
-			font-size: 1.2rem;
-			font-family: 'Bahnschrift';
-			font-weight: 400;
-			border-radius: 0.75rem;
-			background-color: #fff;
-
-			&:is(#experience) {
-				bottom: -3.4rem;
-				left: 0px;
-				font-size: 1.4rem;
-				font-weight: 600;
-			}
-
-			&:is(#anything) {
-				right: -10px;
-				bottom: -30px;
-				font-weight: 200;
-				border-radius: 0 0 0.75rem 0.75rem;
-			}
-
-			&:is(#technology) {
-				left: -70px;
-				top: -1.5rem;
-				font-size: 1rem;
-				font-weight: 600;
-				border-bottom-right-radius: 0;
-			}
-		}
-	}
-}

kodorvan/perm/system/public/themes/test/css/colorscheme.css

@@ -1,67 +0,0 @@
-@charset "UTF-8";
-
-@media (prefers-color-scheme: default) {
-  :root {
-    --text-color: #fff;
-    --text-color-inverted: #000;
-    --button-background-color-inverted: #fff;
-    --button-background-color: #000;
-    --section-background-color-inverted: #fff;
-    --section-background-color: #000;
-    --background-color: #000;
-    --background-color-inverted: #fff;
-
-    --interface-top-background-color: var(--background-color, #000);
-    --interface-background-color: var(--background-color, #000);
-    --interface-bottom-background-color: var(--background-color, #000);
-
-    --red: red;
-    --white: #fff;
-    --blue: #0ea5e9;
-
-    --paper: var(--white);
-  }
-}
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text-color: #fff;
-    --text-color-inverted: #000;
-    --button-background-color-inverted: #fff;
-    --button-background-color: #000;
-    --section-background-color-inverted: #fff;
-    --section-background-color: #fff;
-    --background-color: #000;
-    --background-color-inverted: #fff;
-
-    --interface-top-background-color: var(--background-color, #000);
-    --interface-background-color: var(--background-color, #000);
-    --interface-bottom-background-color: var(--background-color, #000);
-
-    --red: red;
-    --white: #fff;
-
-    --paper: var(--white);
-  }
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    --text-color: #fff;
-    --text-color-inverted: #000;
-    --button-background-color-inverted: #fff;
-    --button-background-color: #000;
-    --section-background-color-inverted: #fff;
-    --section-background-color: #000;
-    --background-color: #000;
-    --background-color-inverted: #fff;
-
-    --interface-top-background-color: var(--background-color, #000);
-    --interface-background-color: var(--background-color, #000);
-    --interface-bottom-background-color: var(--background-color, #000);
-
-    --red: red;
-    --white: #fff;
-
-    --paper: var(--white);
-  }
-}

kodorvan/perm/system/public/themes/test/css/fonts.css

@@ -1,10 +0,0 @@
-@import url('/css/fonts/fira.css');
-@import url('/css/fonts/hack.css');
-@import url('/css/fonts/dejavu.css');
-@import url('/css/fonts/bahnschrift.css');
-
-@font-face {
-  font-family: 'Commissioner';
-  src: url('/fonts/commissioner.ttf');
-  font-weight: 400;
-}

kodorvan/perm/system/public/themes/test/css/footer.css

@@ -1,42 +0,0 @@
-@charset "UTF-8";
-
-footer {
-  box-sizing: border-box;
-  padding: 0 20%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  text-align: center;
-  gap: 0.5rem;
-  margin: 2rem 0 1rem 0;
-
-  &:not(:has(*)) {
-    display: none;
-  }
-
-  > p#description {
-    text-align: center;
-    font-size: 1rem;
-    font-family: "Geologica";
-    font-weight: 400;
-    margin: unset;
-    color: rgb(0, 0, 0, 0.6);
-  }
-  > div#link {
-    display: inline-flex;
-    justify-content: center;
-    gap: 1rem;
-
-    > a {
-      text-decoration: none;
-      font-size: 1rem;
-      font-family: "Geologica";
-      font-weight: 400;
-      color: rgb(160, 160, 160);
-      transition: ease 0.2s;
-      &:hover {
-        color: #000;
-      }
-    }
-  }
-}

kodorvan/perm/system/public/themes/test/css/header.css

@@ -1,68 +0,0 @@
-@charset "UTF-8";
-
-header {
-  top: 0;
-  left: 0;
-  position: fixed;
-  width: 100vw;
-  height: var(--menu-height);
-  box-sizing: border-box;
-  padding: 0 20%;
-  display: flex;
-  justify-content: space-between;
-
-  align-items: center;
-  background-color: #f7fafc;
-  z-index: 1000;
-
-  &:not(:has(*)) {
-    display: none;
-  }
-
-  > a#logotype {
-    display: flex;
-    flex-direction: column;
-    font-size: 1.1rem;
-    text-decoration: none;
-    color: #000;
-
-    > h4:only-of-type:first-child {
-      margin: unset;
-      font-family: "Cascadia Code";
-      font-size: 2.5em;
-    }
-
-    > small:only-of-type:last-child {
-      justify-self: end;
-      align-self: end;
-      margin-top: -0.8em;
-      font-family: "Bahnschrift";
-      font-size: 0.62em;
-      font-weight: 800;
-      text-transform: uppercase;
-    }
-  }
-
-  > nav#menu {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 1rem;
-    font-family: "Geologica";
-
-    > a {
-      text-decoration: none;
-      font-weight: 500;
-      font-size: 1rem;
-      text-transform: uppercase;
-      color: rgb(0, 0, 0, 0.5);
-      transition: ease 0.2s;
-
-      &:hover {
-        color: #000;
-      }
-    }
-  }
-
-
-}

kodorvan/perm/system/public/themes/test/css/icons/code_slash.css

@@ -1,36 +0,0 @@
-@charset "UTF-8";
-
-i.icon.code.slash {
-	position: relative;
-	width: 2px;
-	height: 16px;
-	box-sizing: border-box;
-	display: block;
-	transform: rotate(15deg);
-	background: currentColor;
-
-	&::after,
-	&::before {
-		position: absolute;
-		content: "";
-		width: 8px;
-		height: 8px;
-		box-sizing: border-box;
-		display: block;
-		transform: rotate(-60deg);
-	}
-
-	&::before {
-		top: 5px;
-		left: -8px;
-		border-top: 2px solid;
-		border-left: 2px solid;
-	}
-
-	&::after {
-		top: 3px;
-		right: -8px;
-		border-right: 2px solid;
-		border-bottom: 2px solid;
-	}
-}

kodorvan/perm/system/public/themes/test/css/icons/telegram.css

@@ -1,31 +0,0 @@
-i.icon.telegram {
-  width: 24px;
-  height: 24px;
-  background: transparent;
-  position: relative;
-}
-
-i.icon.telegram::before {
-  content: "";
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  background: white;
-  border-radius: 50%;
-  top: 2px;
-  left: 2px;
-}
-
-i.icon.telegram::after {
-  content: "";
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-bottom: 8px solid currentColor;
-  transform: rotate(-30deg);
-  top: 7px;
-  left: 9px;
-  color: #ffffff; /* Цвет бумажного самолетика */
-}

kodorvan/perm/system/public/themes/test/css/main.css

@@ -1,163 +0,0 @@
-@charset "UTF-8";
-
-@import url("https://fonts.googleapis.com/css2?family=Commissioner:wght@100;200;300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Cascadia+Code:ital,wght@0,200..700;1,200..700&family=Rubik:ital,wght@0,300..900;1,300..900&family=Wix+Madefor+Display:wght@400..800&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Geologica:wght@100..900&family=Pochaevsk&display=swap");
-
-body {
-  margin: unset;
-  /* overflow-x: hidden; */
-  background-color: #f7fafc;
-}
-
-.unselectable {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  outline: none;
-}
-
-main {
-  margin-top: var(--menu-height);
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  align-items: center;
-  gap: 2rem;
-  transition: 0s;
-  overflow-x: hidden;
-
-  &:not(:has(*)) {
-    display: none;
-  }
-
-  > section.container {
-    height: auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    > h2#title {
-      font-size: 2.4rem;
-      font-family: "Bahnschrift";
-      margin: 0.1em 0 0.2em 0;
-
-      > span {
-        color: #0ea5e9;
-      }
-    }
-
-    > p#description {
-      margin: unset;
-      text-align: center;
-      font-size: 1.2rem;
-      font-family: "Geologica";
-      font-weight: 400;
-      color: rgb(0, 0, 0, 0.6);
-
-      > span {
-        color: #0ea5e9;
-        font-weight: 800;
-      }
-    }
-
-    > p.description {
-      width: 40%;
-    }
-
-    > a#order {
-      padding: 0.5em 1.3em;
-      margin-top: 1rem;
-      display: flex;
-      align-items: center;
-      gap: 5px;
-      border-radius: 1.125em;
-      font-size: 1em;
-      font-family: "Geologica";
-      font-weight: 400;
-      text-decoration: none;
-      background-color: #0ea5e9;
-      color: #fff;
-      transition: 0.2s;
-
-      &:hover {
-        transform: scale(1.05);
-      }
-    }
-    > div#team {
-      margin-top: 1rem;
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      gap: 1rem;
-
-      > div#card {
-        padding: 0.6em 0.8em;
-        width: 180px;
-        height: 220px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        text-align: center;
-        border-radius: 1.125rem;
-        box-shadow: 0px 0px 15px 0px rgba(14, 165, 233, 0.1);
-        background-color: #fff;
-        transition: ease 0.2s;
-
-        > img {
-          object-fit: cover;
-          width: 140px;
-          height: 140px;
-          border-radius: 100%;
-        }
-
-        > p {
-          margin: 1em 0 0;
-          font-size: 1.2em;
-          font-family: "Geologica";
-          font-weight: 900;
-          color: #000000;
-        }
-
-        > span {
-          font-size: 1em;
-          font-family: "Geologica";
-          font-weight: 400;
-          color: #0ea5e9;
-        }
-      }
-    }
-
-    > a#telegram {
-      padding: 0.5em 1.3em;
-      margin-top: 1rem;
-      display: flex;
-      align-items: center;
-      gap: 5px;
-      border-radius: 1.125em;
-      font-size: 1em;
-      font-family: "Geologica";
-      font-weight: 400;
-      text-decoration: none;
-      background-color: #0ea5e9;
-      color: #fff;
-      transition: 0.2s;
-
-      &:hover {
-        transform: scale(1.05);
-      }
-
-      > img {
-        width: 20px;
-        height: 20px;
-      }
-    }
-  }
-}

kodorvan/perm/system/public/themes/test/css/system.css

@@ -1,35 +0,0 @@
-@charset "UTF-8";
-
-:root {
-	--menu-height: 70px;
-	--gap: min(12px, 1rem);
-
-	/* font-family: , system-ui, sans-serif; */
-	font-family: "dejavu";
-	text-decoration: none;
-	outline: none;
-	border: none;
-	transition: 0.1s ease-out;
-}
-
-/* Selection */
-::selection {
-  color: var(--text-selected-color);
-  background: var(--text-selected-background-color);
-}
-
-::-moz-selection {
-  color: var(--text-selected-color);
-  background: var(--text-selected-background-color);
-}
-
-
-.unselectable {
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-

kodorvan/perm/system/public/themes/test/images/icons/telegram.svg

@@ -1 +0,0 @@
-<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M46.137,6.552c-0.75-0.636-1.928-0.727-3.146-0.238l-0.002,0C41.708,6.828,6.728,21.832,5.304,22.445	c-0.259,0.09-2.521,0.934-2.288,2.814c0.208,1.695,2.026,2.397,2.248,2.478l8.893,3.045c0.59,1.964,2.765,9.21,3.246,10.758	c0.3,0.965,0.789,2.233,1.646,2.494c0.752,0.29,1.5,0.025,1.984-0.355l5.437-5.043l8.777,6.845l0.209,0.125	c0.596,0.264,1.167,0.396,1.712,0.396c0.421,0,0.825-0.079,1.211-0.237c1.315-0.54,1.841-1.793,1.896-1.935l6.556-34.077	C47.231,7.933,46.675,7.007,46.137,6.552z M22,32l-3,8l-3-10l23-17L22,32z"/></svg>

kodorvan/perm/system/views/templater.php

@@ -62,7 +62,7 @@ final class templater extends controller implements array_access
 		$this->twig = new twig(new FilesystemLoader(VIEWS));
 
 		// Initializing global variables
-		$this->twig->addGlobal('theme', 'test');
+		$this->twig->addGlobal('theme', THEME);
 		$this->twig->addGlobal('server', $_SERVER);
 		$this->twig->addGlobal('cookies', $_COOKIE);
 		$this->twig->addGlobal('language', $language = $session?->buffer['language'] ?? language::en);

kodorvan/perm/system/views/themes/default/aside.html

@@ -2,8 +2,7 @@
 {% endblock %}
 
 {% block body %}
-
 {% endblock %}
 
 {% block js %}
-{% endblock %}
+{% endblock %}

kodorvan/perm/system/views/themes/default/core.html

@@ -27,4 +27,4 @@
 	{% endblock %}
 </body>
 
-</html>
+</html>

kodorvan/perm/system/views/themes/default/elements/company.html

@@ -0,0 +1,11 @@
+<style>
+	:root {
+		--company-identifier: "{{ language.name == 'ru' or true ? 'ОГРН' : 'ID' }}";
+		--company-tax: "{{ language.name == 'ru' or true ? 'ИНН' : 'TAX' }}";
+	}
+</style>
+
+<section id="company">
+	<h4 class="name">ИП Мирзаев</h4>
+	<p class="column"><span class="tax row">271103176488</span><span class="identifier row">322270000004691</span></p>
+</section>

kodorvan/perm/system/views/themes/default/elements/cookies.html

@@ -0,0 +1,7 @@
+<section id="cookies" class="unselectable">
+	<div>
+		<p>ИСПОЛЬЗУЕТСЯ ТЕХНОЛОГИЯ COOKIES</p>
+		<small>№152-ФЗ «О персональных данных»</small>
+	</div>
+	<button onclick="setTimeout(() => this.parentElement.remove(), 200); this.parentElement.style.opacity = 0"><i class="icon close small"></i></button>
+</section>

kodorvan/perm/system/views/themes/default/elements/links.html

@@ -0,0 +1,7 @@
+<nav id="links" class="unselectable">
+	<a href="/offer">ПУБЛИЧНАЯ ОФЕРТА</a>
+	<a href="https://ru.wikipedia.org/wiki/WTFPL">ЛИЦЕНЗИЯ</a>
+	<a href="https://t.me/kodorvan">КОДОРВАНЬ</a>
+	<a href="https://t.me/blog_mirzaev_sexy">МИРЗАЕВ</a>
+	<a href="https://git.svoboda.works/kodorvan">РЕПОЗИТОРИЙ</a>
+</nav>

kodorvan/perm/system/views/themes/default/elements/office.html

@@ -0,0 +1,13 @@
+<style>
+	:root {
+		--map-loading: "Загрузка карты";
+	}
+</style>
+
+<section id="office">
+	<div class="map">
+		<div class="loading">
+			<i class="icon loading spinner animated"></i>
+		</div>
+	</div>
+</section>