dots replaced with three.js shader

.gitmodules

@@ -10,3 +10,6 @@
 	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",		

kodorvan/perm/system/controllers/index.php

@@ -47,6 +47,143 @@ final class index extends core
 			// 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, '/');
 

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

@@ -1,22 +1,145 @@
 "use strict";
 
-import("../modules/hotline.mjs").then((module) => {
+import * as THREE from 'three';
-	// Imported the hotline.mjs module
 
-	// Initializing an instance of the hotline.mjs
-	const instance = new module.hotline(document.getElementById("wrap"));
 
-	// Initializing settings of the hotline instance
+const fragmentShaderCode = `
-	instance.alive = true;
+  precision highp float;
-	instance.wheel = false;
+  uniform vec2 u_resolution;
-	instance.delta = 3;
+  uniform float u_time;
-	instance.step = -0.5;
+  varying vec2 vUv;
 
-	// Starting the hotline instance
+  #define EPSILON 1e-6
-	instance.start();
+  #define PI 3.14159265359
-});
+  #define ITERATIONS 18.0
 
-import("../modules/womb3-simplex.mjs").then((module) => {
+  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 = {
@@ -46,4 +169,20 @@ import("../modules/womb3-simplex.mjs").then((module) => {
 		},
 		true
 	);
+}); */
+
+import("../modules/hotline.mjs").then((module) => {
+	// Imported the hotline.mjs module
+
+	// Initializing an instance of the hotline.mjs
+	const instance = new module.hotline(document.getElementById("wrap"));
+
+	// Initializing settings of the hotline instance
+	instance.alive = true;
+	instance.wheel = false;
+	instance.delta = 3;
+	instance.step = -0.5;
+
+	// Starting the hotline instance
+	instance.start();
 });

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/elements/description.css

@@ -1,7 +1,8 @@
 @charset "UTF-8";
 
 section#description {
-	padding-top: 1.5rem;
+	padding-top: 2rem;
+	padding-bottom: 1.5rem;
 	gap: 1rem;
 
 	> p {

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

@@ -5,8 +5,9 @@ section#introdution {
 	width: 100%;
 	height: var(--introdution-height, 350px);
 	overflow: hidden;
+	background-color: #000;
 
-	+ section.row {
+	+section.row {
 		--shadow: 0px -10px 60px 30px rgba(0, 0, 0, 0.6);
 		padding-top: 1rem;
 		box-shadow: var(--shadow);
@@ -14,16 +15,18 @@ section#introdution {
 		-moz-box-shadow: var(--shadow);
 	}
 
-	> div.information {
+	>div.information {
 		z-index: 200;
 		position: fixed;
-		width: 30vw;
+		width: 33rem;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		cursor: default;
+		/* transform: perspective(35px) rotatex(1deg); */
 
-		> span#label {
+		>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;
@@ -35,16 +38,21 @@ section#introdution {
 			font-weight: 400;
 			border-radius: 1.125rem;
 			color: #aeb629;
-			border: 1px solid #bababa1c;
+			border: 1px solid #e06a6a6e;
-			background-color: #6262623b;
+			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 {
+			>i.icon.code {
 				margin-bottom: 3px;
 			}
 		}
 
-		> h2#title {
+		>h2#title {
 			margin: unset;
 			width: max-content;
 			padding: 0.2em 0.5em 0em;
@@ -53,11 +61,18 @@ section#introdution {
 			font-weight: 400;
 			color: #fff;
 			text-shadow:
-				0px 0px 4px #ffffff,
+				0px 0px 4px #ffffff85,
-				0px 0px 9px #ffffff96;
+				0px 0px 9px #ffffff47;
+
+			>span.kodorvan {
+				color: #ffff00;
+				text-shadow:
+					0px 0px 4px #ffff00b5,
+					0px 0px 11px #ffff008a
+			}
 		}
 
-		> p#team {
+		>p#team {
 			margin: unset;
 			width: 100%;
 			/* height: 70px; */
@@ -70,16 +85,16 @@ section#introdution {
 			border-radius: 0.75rem;
 			background-color: #fff;
 
-			> b {
+			>b {
 				color: #152bcb;
 			}
 
-			> strong {
+			>strong {
 				color: #de1111;
 			}
 		}
 
-		> span {
+		>span {
 			position: absolute;
 			display: flex;
 			padding: 0.4em 0.8rem 0.3em;
@@ -91,46 +106,21 @@ section#introdution {
 		}
 	}
 
-	> div.background {
+	>div.background {
 		z-index: 100;
-		top: -5%;
-		left: -5%;
 		position: absolute;
-		width: 110%;
+		top: 0%;
-		height: 110%;
+		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;
-		filter: blur(1.8px) contrast(50);
 
-		> div.dots {
+		>video:only-of-type {
-			--dot-bg: black;
-			--dot-color: #00ff00;
-			--dot-size: 4px;
-			--dot-space: 7px;
-			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: contrast(5);
-		}
-
-		> video:only-of-type {
 			z-index: -100;
 			position: absolute;
 			width: 100%;
@@ -141,12 +131,18 @@ section#introdution {
 			filter: blur(5px);
 		}
 
-		> canvas#introdution_animation {
+		>div#ebashilovo {
-			z-index: -100;
+			z-index: 1000;
 			position: absolute;
 			width: 100%;
-			scale: 1.2;
+			height: 100%;
-			filter: url(#blob) contrast(var(--contrast, 30));
+
+			>canvas {
+				width: 200%;
+				height: 100%;
+				display: block;
+			}
+
 		}
 	}
 }

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

@@ -1,8 +1,8 @@
 @charset "UTF-8";
 
 section#office {
-	display: flex;
 	height: 100%;
+	display: flex;
 
 	> div.map {
 		width: 250px;

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

@@ -1,6 +1,7 @@
 @charset "UTF-8";
 
 section#projects {
+	z-index: 1000;
 	padding-top: 2.5rem;
 	padding-bottom: 1rem;
 	/* transform: rotate3d(220, -777, -100, 385deg) scale(1.1); */
@@ -16,6 +17,11 @@ section#projects {
 		height: 250px;
 		display: inline-flex;
 		gap: 15px;
+		cursor: grab;
+
+		&:active {
+			cursor: grabbing;
+		}
 
 		> :is(article, div) {
 			position: relative;
@@ -25,6 +31,38 @@ section#projects {
 			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;
@@ -47,26 +85,6 @@ section#projects {
 				height: 100%;
 				object-fit: cover;
 			}
-
-			&: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);
-				}
-			}
 		}
 	}
 }

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/main.css

@@ -5,8 +5,12 @@
 @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");
+@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 {
+	--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;

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

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 
 main {
-	> section.row {
+	>section.row {
 		z-index: 500;
 		width: 100%;
 		display: flex;
@@ -10,17 +10,17 @@ main {
 		align-items: center;
 		background-color: #fff;
 
-		> h2#title {
+		>h2#title {
 			font-size: 2.4rem;
 			font-family: "Bahnschrift";
 			margin: 0.1em 0 0.2em 0;
 
-			> span {
+			>span {
 				color: #0ea5e9;
 			}
 		}
 
-		> p#description {
+		>p#description {
 			margin: unset;
 			text-align: center;
 			font-size: 1.2rem;
@@ -28,17 +28,17 @@ main {
 			font-weight: 400;
 			color: rgb(0, 0, 0, 0.6);
 
-			> span {
+			>span {
 				color: #0ea5e9;
 				font-weight: 800;
 			}
 		}
 
-		> p.description {
+		>p.description {
 			width: 40%;
 		}
 
-		> a#order {
+		>a#order {
 			padding: 0.5em 1.3em;
 			margin-top: 1rem;
 			display: flex;
@@ -57,14 +57,15 @@ main {
 				transform: scale(1.05);
 			}
 		}
-		> div#team {
+
+		>div#team {
 			margin-top: 1rem;
 			display: inline-flex;
 			justify-content: center;
 			align-items: center;
 			gap: 1rem;
 
-			> div#card {
+			>div#card {
 				padding: 0.6em 0.8em;
 				width: 180px;
 				height: 220px;
@@ -78,14 +79,14 @@ main {
 				background-color: #fff;
 				transition: ease 0.2s;
 
-				> img {
+				>img {
 					object-fit: cover;
 					width: 140px;
 					height: 140px;
 					border-radius: 100%;
 				}
 
-				> p {
+				>p {
 					margin: 1em 0 0;
 					font-size: 1.2em;
 					font-family: "Geologica";
@@ -93,7 +94,7 @@ main {
 					color: #000000;
 				}
 
-				> span {
+				>span {
 					font-size: 1em;
 					font-family: "Geologica";
 					font-weight: 400;
@@ -102,7 +103,7 @@ main {
 			}
 		}
 
-		> a#telegram {
+		>a#telegram {
 			padding: 0.5em 1.3em;
 			margin-top: 1rem;
 			display: flex;
@@ -121,10 +122,44 @@ main {
 				transform: scale(1.05);
 			}
 
-			> img {
+			>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,7 +1,7 @@
 @charset "UTF-8";
 
 :root {
-	--width: max(850px, 45vw);
+	--width: max(1050px, 55vw);
 	--menu-height: 70px;
 	--introdution-height: min(350px, 35vh);
 	--gap: min(12px, 1rem);
@@ -16,8 +16,14 @@
 	--cookies-width: 24rem;
 	--cookies-height: 4rem;
 
-	/* font-family: , system-ui, sans-serif; */
+	font-family: "Commissioner";
-	font-family: "dejavu";
+	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;
@@ -26,6 +32,7 @@
 
 body {
 	margin: unset;
+	width: 100vw;
 	overflow-x: hidden;
 	background-color: #f7fafc;
 }

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

@@ -7,9 +7,7 @@
 			</a>
 
 			<nav id="menu" class="unselectable">
-				<a href="https://git.svoboda.works/kodorvan">Проекты</a>
+				<a href="#">лёха не забудь сюда кнопки добавить</a>
-				<a href="#contacts">Контакты</a>
-				<a href="#services">Услуги</a>
 			</nav>
 		</div>
 	</header>

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

@@ -14,7 +14,7 @@
 	{{ block('header') }}
 	{{ block('aside') }}
 
-	<main>
+	<main id="main">
 		{% block main %}
 			{{ main|raw }}
 		{% endblock %}
@@ -24,6 +24,15 @@
 {% endblock %}
 
 {% block js %}
+	<script>
+		let main = document.getElementById('main');
+
+		setInterval(() => {
+			main.style.setProperty('--scroll-px', window.pageYOffset + 'px');
+			main.style.setProperty('--scroll-deg', window.pageYOffset / 100 + 'deg')
+		}, 60);
+	</script>
+
 	{{ block('header_js') }}
 	{{ block('aside_js') }}
 	{{ block('footer_js') }}

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

@@ -1,4 +1,12 @@
 {% block js %}
+	<script type="importmap">
+		{
+			"imports": {
+        "three": "/js/three.module.js"
+			}
+		}
+	</script>
+
 	{% for element in js %}
 		<script 
 			{% if element.src %}src="{{ element.src }}" {% endif %} 

kodorvan/perm/system/views/themes/default/main/elements/description.html

@@ -24,7 +24,7 @@
 		</li>
 	</ul>
 
-	<strong class="partners">Мы мотивированы сотрудничать на <span>постоянной основе</span>, поэтому <span>работаем на результат</span></strong>
+	<!-- <strong class="partners unselectable">Мы мотивированы сотрудничать на <span>постоянной основе</span>, поэтому <span>работаем на результат</span></strong> -->
 </section>
 
 <!-- , либо реально выгодная аренда сервера у нас по самой низкой цене на рынке и максимально эффективной техподдержкой с бесплатными бекапами и оперативной установкой критических обновлений безопасности -->

kodorvan/perm/system/views/themes/default/main/elements/introdution.html

@@ -2,26 +2,15 @@
 	<div class="information">
 		<span id="label">
 			<i class="icon code slash"></i>
-			<span class="unselectable">ПРОФЕССИОНАЛЫ С ОПЫТОМ</span>
+			<span class="unselectable">ПРОФЕССИОНАЛЫ</span>
 		</span>
 
-		<h2 id="title" class="unselectable">ПЕРМСКИЕ РАЗРАБОТЧИКИ</h2>
+		<h2 id="title" class="unselectable">КОМАНДА <span class="kodorvan">КОДОРВАНЬ</span></h2>
 
-		<p id="team" class="unselectable"><b>Чистый код</b>, реальные сроки и собственные сервера в <strong>Перми</strong><br />по <b>честной цене</b> и с <b>вечной техподдержкой</b></p>
+		<p id="team" class="unselectable"><b>Чистый код</b>, авангардный дизайн, глубокий SEO,</br> безопасность, реальные сроки и свои сервера в <strong>Перми</strong></br>по <b>честной цене</b> и с <b>вечной техподдержкой</b></p>
 	</div>
 
 	<div class="background" style="opacity: 0">
-		<div class="dots"></div>
+		<div id="ebashilovo"></div>
-
-		<canvas id="introdution_animation"></canvas>
-
-		<svg style="position: absolute">
-			<defs>
-			 <filter id="blob">
-					<feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur"></feGaussianBlur>
-					<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="blob"></feColorMatrix>
-				</filter>
-			</defs>
-		</svg>
 	</div>
 </section>

kodorvan/perm/system/views/themes/default/main/elements/popular.html

@@ -0,0 +1,167 @@
+{% macro service(class, title, icon_left, icon_center, icon_right, description, howto, extra, buttons, theses, background_image_src, background_image_alt, cost) %}
+	<article class="service{% if class is not empty %} {{ class }}{% endif %}">
+		{% if icon_left is not empty %}<i class="icon left {{ icon_left }}"></i>{% endif %}
+		{% if icon_center is not empty %}
+			<link type="text/css" rel="stylesheet" href="/css/icons/{{ icon_center|replace({' ': '_'}) }}.css" />
+			<i class="icon center {{ icon_center }}"></i>
+		{% endif %}
+		{% if icon_right is not empty %}<i class="icon right {{ icon_right }}"></i>{% endif %}
+
+		{% if icon_center2222 is not empty %}
+			<link type="text/css" rel="stylesheet" href="/css/icons/{{ icon_center|replace({' ': '_'}) }}.css" />
+			<div class="icon">
+				<i class="icon center {{ icon_center }}"></i>
+			</div>
+		{% endif %}
+
+		<div class="head">
+			<h4>{{ title is empty ? 'Разработка' : title }}</h4>
+		</div>
+
+		<div class="body">
+			{% if description is not empty %}
+				<p class="description">{{ description|raw }}</p>
+			{% endif %}
+
+			{% if howto is not empty %}
+				<p class="howto">{{ howto|raw }}</p>
+			{% endif %}
+
+			{% if extra is not empty %}
+				<div class="extra">
+					<p>
+						{% for text in extra %}
+						<span>{{ text }}</span>
+						{% endfor %}
+					</p>
+					<p>
+						{% for text in extra %}
+						<span>{{ text }}</span>
+						{% endfor %}
+					</p>
+				</div>
+			{% endif %}
+
+			<div class="footer">
+				{% if theses is not empty %}
+					<div class="buttons">
+						{% for button in buttons %}
+							{% set icon = button.icon ?? 'close' %}
+							<link type="text/css" rel="stylesheet" href="/css/icons/{{ button.icon|replace({' ': '_'}) }}.css" />
+							<a type="button" href="{{ button.href }}"><i class="icon {{ button.icon }}"></i></a>
+						{% endfor %}
+					</div>
+				{% endif %}
+
+				{% if theses is not empty %}
+					<div class="theses">
+						{% for thesis in theses %}
+							<p{% if thesis.class is not empty %} class="{{ thesis.class }}{% if thesis.colored is true %} colored{% endif %}"{% endif %}>
+								{% if thesis.icon is not empty %}
+									<span class="characteristic">
+										<link type="text/css" rel="stylesheet" href="/css/icons/{{ thesis.icon|replace({' ': '_'}) }}.css" />
+										<i class="icon {{ thesis.icon }}"></i>
+									</span>
+								{% elseif thesis.characteristic is not empty %}
+									<span class="characteristic">{{ thesis.characteristic }}</span>
+								{% endif %}
+								{{ thesis.text }}
+							</p>
+						{% endfor %}
+					</div>
+				{% endif %}
+			</div>
+
+			{% if background_image_src is not empty and background_image_alt is not empty %}
+				<img class="background" src="{{ background_image_src }}" alt="{{ background_image_alt }}" ondragstart="return false;"/>
+			{% endif %}
+		</div>
+
+		{% if cost is not empty %}
+			<p class="cost">ОТ <span>{{ cost }}₽</span></p>
+		{% endif %}
+	</article>
+{% endmacro service %}
+
+<section id="popular" class="row unselectable">
+	<div class="title unselectable">
+		<div class="column">
+			<h3>Популярные заказы</h3>
+			<span>Готовые оптимизированные пакеты услуг со скидками</span>
+		</div>
+
+		<div class="column display">
+			<button class="plus">
+				<i class="icon plus"></i>
+			</button>
+			<span class="amount">3</span>
+			<button class="minus">
+				<i class="icon minus"></i>
+			</button>
+		</div>
+	</div>
+
+	<div class="services">
+		{% for service in services %}
+			{{ 
+				_self.service(
+					class: service.class,
+					title: service.title,
+					icon_left: service.icon_left,
+					icon_center: service.icon_center,
+					icon_right: service.icon_right,
+					description: service.description,
+					howto: service.howto,
+					extra: service.extra,
+					buttons: service.buttons,
+					theses: service.theses,
+					background_image_src: service.background_image_src,
+					background_image_alt: service.background_image_alt,
+					cost: service.cost
+				) 
+			}}
+		{% endfor %}
+	</div>
+
+	<script>
+		let popular = document.getElementById("popular");
+		let services = popular?.querySelector('div[class="services"]');
+		let amount = popular.querySelector(
+			'div.title>div[class="column display"]>span[class="amount"]'
+		);
+
+		if (services instanceof HTMLElement) {
+			let plus = popular.querySelector(
+				'div.title>div[class="column display"]>button[class="plus"]'
+			);
+
+			plus.addEventListener("click", (event) => {
+				let old =
+					+getComputedStyle(services).getPropertyValue("--row-amount") || 1;
+				let value = old + 1;
+
+				if (value > 4) value = 4;
+				else if (value < 1) value = 1;
+
+				services.style.setProperty("--row-amount", value);
+				amount.innerText = value;
+			});
+
+			let minus = popular.querySelector(
+				'div.title>div[class="column display"]>button[class="minus"]'
+			);
+
+			minus.addEventListener("click", (event) => {
+				let old =
+					+getComputedStyle(services).getPropertyValue("--row-amount") || 1;
+				let value = old - 1;
+
+				if (value > 4) value = 4;
+				else if (value < 1) value = 1;
+
+				services.style.setProperty("--row-amount", value);
+				amount.innerText = value;
+			});
+		}
+	</script>
+</section>

kodorvan/perm/system/views/themes/default/main/elements/products.html

@@ -0,0 +1,11 @@
+<section id="products" class="row">
+	<div class="title">
+		<h3>Готовые проекты</h3>
+		<p>Готовые решения для переработки под свою идею</p>
+	</div>
+
+	<article class="product">
+		<div class="image">
+		</div>
+	</article>
+</section>

kodorvan/perm/system/views/themes/default/main/elements/server.html

@@ -1,2 +1,39 @@
-<section id="server" class="row">
+<section id="server" class="row unselectable">
+	<div class="server">
+		<img
+			src="/themes/default/images/server.png"
+			alt="Kodorvan сервер в Перми"
+			class="pc"
+			ondragstart="return false"
+		/>
+	</div>
+	<div class="right">
+		<div class="title">
+			<h3><i class="icon server"></i>НАШИ СЕРВЕРА</h3>
+			<span>ПОЛНЫЙ КОНТРОЛЬ НАД ПРОЕКТОМ</span>
+		</div>
+
+		<div class="bottom">
+			<div class="column">
+				<span class="location">ЛОКАЦИЯ: <strong>ПЕРМЬ</strong></span>
+				<strong class="cost">
+					<i class="icon trend"></i>
+					ОТ <span>200₽</span> В МЕСЯЦ
+				</strong>
+			</div>
+
+			<ul class="advantages">
+				<li><i class="icon list tree"></i>Бесплатно на этапе разработки</li>
+				<li><i class="icon gift"></i>Самые низкие цены</li>
+				<li><i class="icon phone"></i>Адекватная техподдержка</li>
+				<li><i class="icon terminal"></i>Оперативный доступ</li>
+			</ul>
+		</div>
+	</div>
 </section>
+
+<script>
+	let server = document.getElementById('server');
+
+	setInterval(() => server.style.setProperty('--y', (window.pageYOffset + window.innerHeight - server.offsetTop) + 'px'), 350);
+</script>

kodorvan/perm/system/views/themes/default/main/index.html

@@ -10,26 +10,40 @@
 	<link type="text/css" rel="stylesheet" href="/css/icons/eye.css" />
 	<link type="text/css" rel="stylesheet" href="/css/icons/loading_spinner.css" />
 	<link type="text/css" rel="stylesheet" href="/css/icons/close.css" />
+	<link type="text/css" rel="stylesheet" href="/css/icons/plus.css" />
+	<link type="text/css" rel="stylesheet" href="/css/icons/minus.css" />
+	<link type="text/css" rel="stylesheet" href="/css/icons/server.css" />
+	<link type="text/css" rel="stylesheet" href="/css/icons/trend.css" />
+	<link type="text/css" rel="stylesheet" href="/css/icons/terminal.css" />
+	<link type="text/css" rel="stylesheet" href="/css/icons/list_tree.css" />
+	<link type="text/css" rel="stylesheet" href="/css/icons/gift.css" />
+	<link type="text/css" rel="stylesheet" href="/css/icons/phone.css" />
 	<link type="text/css" rel="stylesheet" href="/themes/default/css/pages/index.css" />
 	<link type="text/css" rel="stylesheet" href="/themes/default/css/elements/introdution.css" />
-	<link type="text/css" rel="stylesheet" href="/themes/default/css/elements/shortcut.css" />
-	<link type="text/css" rel="stylesheet" href="/themes/default/css/elements/description.css" />
-	<link type="text/css" rel="stylesheet" href="/themes/default/css/elements/projects.css" />
-	<link type="text/css" rel="stylesheet" href="/themes/default/css/elements/service.css" />
-	<link type="text/css" rel="stylesheet" href="/themes/default/css/elements/advantages.css" />
-	<link type="text/css" rel="stylesheet" href="/themes/default/css/elements/advantages.css" />
-	<link type="text/css" rel="stylesheet" href="/themes/default/css/elements/telegram.css" />
 	<link type="text/css" rel="stylesheet" href="/themes/default/css/elements/workload.css" />
+	<link type="text/css" rel="stylesheet" href="/themes/default/css/elements/shortcut.css" />
+	<link type="text/css" rel="stylesheet" href="/themes/default/css/elements/popular.css" />
+	<link type="text/css" rel="stylesheet" href="/themes/default/css/elements/projects.css" />
+	<link type="text/css" rel="stylesheet" href="/themes/default/css/elements/server.css" />
+	<link type="text/css" rel="stylesheet" href="/themes/default/css/elements/description.css" />
+	<link type="text/css" rel="stylesheet" href="/themes/default/css/elements/telegram.css" />
 	<link type="text/css" rel="stylesheet" href="/themes/default/css/elements/cookies.css" />
 {% endblock %}
 
 {% block main %}
 	{% include '/themes/default/main/elements/introdution.html' %}
+
+	<section class="wrap row">
+	  <div class="net"></div>
+
 		{% include '/themes/default/main/elements/workload.html' %}
 		{% include '/themes/default/main/elements/shortcut.html' %}
-	{% include '/themes/default/main/elements/description.html' %}
+		{% include '/themes/default/main/elements/popular.html' %}
 		{% include '/themes/default/main/elements/projects.html' %}
+	</section>
+
 	{% include '/themes/default/main/elements/server.html' %}
+	{% include '/themes/default/main/elements/description.html' %}
 
 	{% include '/themes/default/elements/telegram.html' %}
 	{% include '/themes/default/elements/cookies.html' %}
@@ -37,9 +51,10 @@
 
 {% block js %}
 	{{ parent() }}
+
 	<script src="/js/modules/hotline.mjs" type="module"></script>
 	<script src="/js/modules/womb3-simplex.mjs" type="module"></script>
-	<script src="/js/pages/main.js" defer></script>
+	<script src="/js/pages/main.js" type="module" defer></script>
 	<script src="/js/modules/service.js" defer></script>
 	<script src="/js/modules/advantages.js" defer></script>
 {% endblock %}