Я хочу, чтобы вы сделали так, чтобы пустое пространство заполнялось формулами!!!!!! "<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Хардкорные Математические Обои</title>
    <!-- Подключение Google Fonts для стильного шрифта -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
    <!-- Подключение MathJax для отображения математических выражений -->
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <!-- Используем 'defer' для корректной последовательности загрузки -->
    <script defer id="MathJax-script"
            src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
    </script>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            width: 100vw;
            /* Основной фон с несколькими слоями градиентов */
            background:
                /* Линии под 45 градусов */
                repeating-linear-gradient(
                    45deg,
                    rgba(180, 180, 180, 0.3), /* Светлый сероватый цвет с прозрачностью 30% */
                    rgba(180, 180, 180, 0.3) 1px, /* Толщина линии */
                    transparent 1px,
                    transparent 100px /* Расстояние между линиями */
                ),
                /* Линии под -45 градусов */
                repeating-linear-gradient(
                    -45deg,
                    rgba(180, 180, 180, 0.3), /* Светлый сероватый цвет с прозрачностью 30% */
                    rgba(180, 180, 180, 0.3) 1px, /* Толщина линии */
                    transparent 1px,
                    transparent 100px /* Расстояние между линиями */
                ),
                /* Основной градиент */
                linear-gradient(135deg, #0a0d1c, #001f3f),
                /* Радужный градиент */
                linear-gradient(270deg, rgba(255,0,150,0.2), rgba(0,204,255,0.2));
            background-size: 
                141.42px 141.42px, /* 100px * √2 ≈ 141.42px для линий под 45 град */
                141.42px 141.42px, /* 100px * √2 ≈ 141.42px для линий под -45 град */
                600% 600%, /* Размер основного градиента */
                800% 800%; /* Размер радужного градиента */
            /* Анимация только для градиента */
            animation: gradientShift 60s ease infinite;
            font-family: 'Roboto Mono', monospace;
            position: relative;
            overflow: hidden;
            color: #00ffe6;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%, 0% 50%; }
            50% { background-position: 100% 50%, 100% 50%; }
            100% { background-position: 0% 50%, 0% 50%; }
        }

        /* Добавление текстуры шума с помощью псевдоэлемента */
        body::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-image: url('https://www.transparenttextures.com/patterns/black-linen.png');
            opacity: 0.05; /* Прозрачность для мягкого эффекта */
            pointer-events: none; /* Чтобы не мешало кликам */
            z-index: 1;
        }

        /* Добавление анимированных частиц (звездочек) */
        .particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            animation: twinkle 5s infinite;
        }

        @keyframes twinkle {
            0%, 100% { opacity: 0.8; }
            50% { opacity: 0.2; }
        }

        .formula {
            position: absolute;
            font-size: 14px; /* Уменьшенный начальный размер шрифта */
            /* Цвет будет задаваться через inline-стили */
            text-shadow: 0 0 5px rgba(0, 255, 230, 0.7); /* Уменьшенное свечение */
            pointer-events: none; /* Чтобы не мешали кликам */
            user-select: none; /* Запрет выделения текста */
            white-space: nowrap; /* Запрет переноса строк */
            transform: rotate(var(--rotation, 0deg)); /* Поворот по умолчанию 0 градусов */
            transition: font-size 0.3s ease; /* Плавное изменение размера шрифта */
            z-index: 2; /* Поверх всех фоновых слоёв */
        }

        /* Медиа-запросы можно оставить или удалить по необходимости */
        /* @media (max-width: 1920px) {
            .formula {
                font-size: 18px; /* Уменьшенный размер шрифта для экранов меньше 1920px */
            }
        } */
    </style>
</head>
<body>
    <!-- Контейнер для формул -->
    <div id="formulas-container"></div>

    <!-- Контейнер для частиц -->
    <div id="particles-container"></div>

    <script>
        // Настройки MathJax до его загрузки
        window.MathJax = {
            startup: {
                ready: () => {
                    MathJax.startup.defaultReady();
                    // Функция размещения формул
                    placeFormulas();
                }
            }
        };

        function placeFormulas() {
            // Полный список из 100 формул
            const formulas = [
                '$$E = mc^2$$',
                '$$i\\hbar \\frac{\\partial \\Psi}{\\partial t} = \\left( -\\frac{\\hbar^2}{2m}\\nabla^2 + V \\right)\\Psi$$',
                '$$\\Box^2 A^\\mu + m^2A^\\mu = J^\\mu$$',
                '$$\\nabla \\cdot \\mathbf{E} = \\frac{\\rho}{\\varepsilon_0}$$',
                '$$e^{i\\pi} + 1 = 0$$',
                '$$\\frac{\\partial f}{\\partial t} + \\mathbf{v} \\cdot \\nabla f = \\left( \\frac{\\partial f}{\\partial t} \\right)_{\\text{столк.}}$$',
                '$$\\int_{a}^{b} f(x) \\, dx$$',
                '$$\\sigma = \\sqrt{\\frac{1}{N-1} \\sum_{i=1}^{N} (x_i - \\overline{x})^2}$$',
                '$$PV = nRT$$',
                '$$\\frac{dP}{dt} = \\alpha (S - P) P - \\beta P$$',
                '$$\\mathbf{F} = m\\mathbf{a}$$',
                '$$\\phi = \\frac{1}{4 \\pi \\epsilon_0} \\frac{q}{r}$$',
                '$$\\int_{0}^{\\infty} e^{-x} dx = 1$$',
                '$$J_n(x) = \\sum_{m=0}^{\\infty} \\frac{(-1)^m}{m! \\Gamma(m + n + 1)} \\left( \\frac{x}{2} \\right)^{2m + n}$$',
                '$$\\frac{d^2 y}{dx^2} + p(x)\\frac{dy}{dx} + q(x)y = g(x)$$',
                '$$\\lambda = \\frac{h}{p}$$',
                '$$f(\\mathbf{r},\\mathbf{p},t) = \\frac{\\partial f}{\\partial t} + \\mathbf{v} \\cdot \\nabla_\\mathbf{r} f + \\mathbf{F} \\cdot \\nabla_\\mathbf{p} f = \\left(\\frac{\\partial f}{\\partial t}\\right)_{\\text{coll}}$$',
                '$$Z = \\frac{V}{I}$$',
                '$$\\mathbf{A} = \\begin{pmatrix}\n    a_{11} & a_{12} & \\cdots & a_{1n} \\\\\n    a_{21} & a_{22} & \\cdots & a_{2n} \\\\\n    \\vdots & \\vdots & \\ddots & \\vdots \\\\\n    a_{m1} & a_{m2} & \\cdots & a_{mn}\n\\end{pmatrix}$$',
                '$$x(t) = x_0 + v_0 t + \\frac{1}{2} a t^2$$',
                '$$\\Delta S \\geq 0$$',
                '$$\\lambda = \\frac{c}{f}$$',
                '$$\\mathbf{E} = -\\nabla \\phi$$',
                '$$\\rho(\\epsilon) = \\frac{1}{e^{(\\epsilon - \\mu)/kT} - 1}$$',
                '$$\\int_0^\\infty \\frac{\\sin x}{x}\\,dx = \\frac{\\pi}{2}$$',
                '$$\\lambda_1 + \\lambda_2 + \\lambda_3 = 1$$',
                '$$\\lim_{n \\to \\infty} \\left(1 + \\frac{1}{n}\\right)^n = e$$',
                '$$\\mathcal{L} = T - V$$',
                '$$\\mathbf{F} = q(\\mathbf{E} + \\mathbf{v} \\times \\mathbf{B})$$',
                '$$R = \\frac{\\rho l}{A}$$',
                '$$\\frac{d}{dt}\\left( \\frac{\\partial \\mathcal{L}}{\\partial \\dot{q}} \\right) - \\frac{\\partial \\mathcal{L}}{\\partial q} = 0$$',
                '$$\\nabla^2 \\psi + k^2 \\psi = 0$$',
                '$$S = k \\cdot \\log(P)$$',
                '$$\\mathbf{p} = m\\mathbf{v}$$',
                '$$\\nabla \\cdot \\mathbf{D} = \\rho_f$$',
                '$$\\oint_{\\partial V} \\mathbf{E} \\cdot d\\mathbf{A} = \\frac{Q_{\\text{enc}}}{\\varepsilon_0}$$',
                '$$\\tau = I \\alpha$$',
                '$$F_{\\text{ц-стр.}} = \\frac{mv^2}{r}$$',
                '$$K = \\frac{1}{2}mv^2$$',
                '$$V = IR$$',
                '$$\\frac{d\\mathbf{L}}{dt} = \\tau$$',
                '$$\\Phi = \\int \\mathbf{B} \\cdot d\\mathbf{A}$$',
                '$$U = \\frac{1}{2}kx^2$$',
                '$$T = \\frac{1}{2}mv^2 + \\frac{1}{2}I\\omega^2$$',
                '$$\\nabla \\times \\mathbf{B} = \\mu_0 \\mathbf{J} + \\mu_0 \\epsilon_0 \\frac{\\partial \\mathbf{E}}{\\partial t}$$',
                '$$\\frac{d\\mathbf{p}}{dt} = \\mathbf{F}$$',
                '$$\\mathbf{F} = -k\\mathbf{x}$$',
                '$$\\int_V \\nabla \\cdot \\mathbf{F} \\, dV = \\oint_S \\mathbf{F} \\cdot d\\mathbf{A}$$',
                '$$\\mathbf{v} = \\nabla \\phi$$',
                '$$\\text{diam}(A) = \\sup \\{ d(x, y) \\ | \\ x, y \\in A \\}$$',
                '$$R_{ab} - \\frac{1}{2}Rg_{ab} = 8\\pi GT_{ab} + \\Lambda g_{ab} + Q_{ab}$$',
                '$$\\nabla \\cdot \\mathbf{J} = -\\frac{\\partial \\rho}{\\partial t}$$',
                '$$\\oint_C \\mathbf{B} \\cdot d\\mathbf{l} = \\mu_0 I_{\\text{enc}} + \\mu_0 \\epsilon_0 \\frac{d}{dt}\\int_S \\mathbf{E} \\cdot d\\mathbf{A}$$',
                '$$\\nabla^2 \\phi = \\frac{\\rho}{\\varepsilon_0}$$',
                '$$\\mathbf{J} = \\sigma \\mathbf{E}$$',
                '$$\\Gamma(z) = \\int_{0}^{\\infty} t^{z-1} e^{-t} \\, dt$$',
                '$$f(z) = \\frac{1}{2\\pi i} \\oint_{\\gamma} \\frac{f(\\zeta)}{\\zeta - z} \\, d\\zeta$$',
                '$$\\oint_{\\gamma} f(z)\\,dz = 2\\pi i\\sum Res(f,a_k)$$',
                '$$\\sum_{k=0}^n \\binom{n}{k} = 2^n$$',
                '$$\\lim_{n \\to \\infty} \\sum_{k=0}^{n} \\frac{1}{k!} = e$$',
                '$$\\nabla \\times \\mathbf{B} = \\mu_0 \\mathbf{J} + \\mu_0 \\epsilon_0 \\frac{\\partial \\mathbf{E}}{\\partial t}$$',
                '$$\\langle\\Omega|T\\{\\phi(x_1)\\cdots\\phi(x_n)\\}|\\Omega\\rangle = \\frac{\\int\\mathcal{D}\\phi\\,\\phi(x_1)\\cdots\\phi(x_n)e^{iS[\\phi]}}{\\int\\mathcal{D}\\phi\\,e^{iS[\\phi]}}$$',
                '$$\\int_{\\Sigma} (\\nabla \\times \\mathbf{F}) \\cdot d\\mathbf{S} = \\oint_{\\partial \\Sigma} \\mathbf{F} \\cdot d\\mathbf{r}$$',
                '$$\\mathbf{a} = \\frac{\\mathbf{F}}{m}$$',
                '$$P = IV$$',
                '$$Q = It$$',
                '$$W = Pt$$',
                '$$\\mathbf{L} = \\mathbf{r} \\times \\mathbf{p}$$',
                '$$\\Psi(x, t) = \\psi(x)e^{-iEt/\\hbar}$$',
                '$$\\mathbf{F} = -\\nabla U$$',
                '$$\\frac{d}{dt}\\langle A \\rangle = \\frac{i}{\\hbar}\\langle [H, A] \\rangle + \\left\\langle \\frac{\\partial A}{\\partial t} \\right\\rangle$$',
                '$$\\nabla^2 \\phi = \\frac{\\rho}{\\varepsilon_0}$$',
                '$$\\nabla \\cdot \\mathbf{B} = 0$$',
                '$$\\nabla \\times \\mathbf{E} = -\\frac{\\partial \\mathbf{B}}{\\partial t}$$',
                '$$\\nabla \\times \\mathbf{B} = \\mu_0 \\mathbf{J} + \\mu_0 \\epsilon_0 \\frac{\\partial \\mathbf{E}}{\\partial t}$$',
                '$$\\rho\\left(\\frac{\\partial\\mathbf{v}}{\\partial t} + (\\mathbf{v}\\cdot\\nabla)\\mathbf{v}\\right) = -\\nabla p + \\mu\\nabla^2\\mathbf{v} + \\mathbf{F}$$',
                '$$\\frac{d^2 \\mathbf{x}}{dt^2} + \\Omega^2 \\mathbf{x} = 0$$',
                '$$\\int\\limits_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}$$',
                '$$\\nabla \\times (\\nabla \\times \\mathbf{A}) = \\nabla(\\nabla \\cdot \\mathbf{A}) - \\nabla^2\\mathbf{A}$$',
                '$$\\frac{\\partial^2}{\\partial t^2}\\psi = c^2\\nabla^2\\psi + \\frac{1}{\\rho_0}\\nabla p$$',
                '$$R_{\\mu\\nu} - \\frac{1}{2}Rg_{\\mu\\nu} + \\Lambda g_{\\mu\\nu} = \\frac{8\\pi G}{c^4}T_{\\mu\\nu}$$',
                '$$\\hat{H}\\psi = i\\hbar\\frac{\\partial}{\\partial t}\\psi$$',
                '$$\\mathcal{L} = -\\frac{1}{4}F_{\\mu\\nu}F^{\\mu\\nu} - \\frac{1}{2}m^2A_{\\mu}A^{\\mu} + J^{\\mu}A_{\\mu}$$',
                '$$\\frac{d}{dt}\\left(\\frac{\\partial L}{\\partial \\dot{q_i}}\\right) - \\frac{\\partial L}{\\partial q_i} = 0$$',
                '$$\\oint_C \\mathbf{B} \\cdot d\\mathbf{l} = \\mu_0\\epsilon_0 \\frac{d}{dt}\\int_S \\mathbf{E} \\cdot d\\mathbf{A} + \\mu_0\\int_S \\mathbf{J} \\cdot d\\mathbf{A}$$',
                '$$\\left[\\hat{x}_i,\\hat{p}_j\\right] = i\\hbar\\delta_{ij}$$'
            ];
            const container = document.getElementById('formulas-container');

            // Массив холодных цветов (в формате HEX)
            const coldColors = [
                '#00FFFF', // Циан
                '#1E90FF', // Голубой
                '#4682B4', // Стальной синий
                '#5F9EA0', // Циановый
                '#00CED1', // Тёмный циан
                '#40E0D0', // Турецкий
                '#ADD8E6', // Светло-голубой
                '#87CEEB', // Скай голубой
                '#00BFFF', // Дип скай голубой
                '#008B8B', // Дартер тюркоаз
                '#20B2AA', // Светло-сине-зелёный
                '#008080', // Тюркоаз
                '#00FA9A', // Медиумспругация
                '#00FF7F', // Весеннее зелёное
                '#3CB371'  // Медиумсиньо-зелёный
            ];

            // Функция для выбора случайного холодного цвета
            function getRandomColdColor() {
                const index = Math.floor(Math.random() * coldColors.length);
                return coldColors[index];
            }

            // Массив для хранения позиций уже размещённых формул
            const placedFormulas = [];

            // Минимальный размер шрифта (в пикселях)
            const MIN_FONT_SIZE = 8; 

            // Коэффициент уменьшения размера шрифта (на 10%)
            const REDUCTION_FACTOR = 0.9;

            // Функция создания частиц
            function createParticles(num) {
                const particlesContainer = document.getElementById('particles-container');
                for (let i = 0; i < num; i++) {
                    const particle = document.createElement('div');
                    particle.classList.add('particle');
                    // Случайная позиция
                    particle.style.left = `${Math.random() * 100}%`;
                    particle.style.top = `${Math.random() * 100}%`;
                    // Случайный размер
                    const size = Math.random() * 3 + 1; // от 1px до 4px
                    particle.style.width = `${size}px`;
                    particle.style.height = `${size}px`;
                    // Случайная анимация задержки и длительности
                    particle.style.animationDelay = `${Math.random() * 5}s`;
                    particle.style.animationDuration = `${Math.random() * 5 + 5}s`;
                    particlesContainer.appendChild(particle);
                }
            }

            // Функция для проверки пересечения прямоугольников
            function isOverlapping(rect1, rect2) {
                return !(
                    rect1.right < rect2.left ||
                    rect1.left > rect2.right ||
                    rect1.bottom < rect2.top ||
                    rect1.top > rect2.bottom
                );
            }

            // Асинхронная функция для размещения одной формулы
            async function placeFormula(formula) {
                const span = document.createElement('span');
                span.classList.add('formula');
                span.innerHTML = formula;
                container.appendChild(span);

                // Выбор случайного холодного цвета
                const color = getRandomColdColor();
                span.style.color = color; // Установка цвета
                span.style.textShadow = `0 0 10px ${color}B3`; // Дополнительное свечение с прозрачностью

                let currentFontSize = parseFloat(window.getComputedStyle(span).fontSize);

                while (currentFontSize >= MIN_FONT_SIZE) {
                    span.style.fontSize = `${currentFontSize}px`;

                    // Поворот
                    const rotation = Math.random() * 20 - 10; // Поворот от -10 до +10 градусов
                    span.style.setProperty('--rotation', `${rotation}deg`);

                    try {
                        // Рендеринг MathJax
                        await MathJax.typesetPromise([span]);
                    } catch (err) {
                        console.error('Ошибка при рендеринге MathJax:', err);
                        container.removeChild(span);
                        return;
                    }

                    const rect = span.getBoundingClientRect();

                    // Проверка, помещается ли формула в окне просмотра
                    const viewportWidth = window.innerWidth;
                    const viewportHeight = window.innerHeight;

                    if (rect.width > viewportWidth || rect.height > viewportHeight) {
                        // Уменьшаем размер шрифта и продолжаем попытку
                        currentFontSize *= REDUCTION_FACTOR;
                        continue;
                    }

                    // Попытка найти позицию без значительных пересечений
                    const maxAttempts = 150;
                    let attempt = 0;
                    let placed = false;

                    while (attempt < maxAttempts && !placed) {
                        attempt++;

                        const left = Math.random() * (viewportWidth - rect.width);
                        const top = Math.random() * (viewportHeight - rect.height);

                        span.style.left = `${left}px`;
                        span.style.top = `${top}px`;

                        const newRect = span.getBoundingClientRect();

                        // Проверка на пересечение с уже размещёнными формулами
                        let overlap = false;
                        for (const placedRect of placedFormulas) {
                            if (isOverlapping(newRect, placedRect)) {
                                overlap = true;
                                break;
                            }
                        }

                        if (!overlap) {
                            // Формула успешно размещена
                            placedFormulas.push(newRect);
                            placed = true;
                            break;
                        }
                    }

                    if (placed) {
                        console.log(`Формула размещена с размером шрифта: ${currentFontSize}px`);
                        return; // Формула размещена успешно
                    } else {
                        // Не удалось разместить без пересечений, уменьшаем размер шрифта
                        currentFontSize *= REDUCTION_FACTOR;
                        console.warn(`Не удалось разместить формулу с текущим размером шрифта (${currentFontSize / REDUCTION_FACTOR}px). Уменьшаем до ${currentFontSize}px.`);
                    }
                }

                // Если размер шрифта стал меньше минимального, удаляем формулу
                console.warn('Не удалось разместить формулу после уменьшения размера:', formula);
                container.removeChild(span);
            }

            // Асинхронная функция для размещения всех формул с параллельной обработкой
            async function placeAllFormulas() {
                const promises = formulas.map(formula => placeFormula(formula));
                await Promise.all(promises);
            }

            // Инициализация частиц
            createParticles(800);

            // Запуск размещения формул
            placeAllFormulas();

            // Обработка изменения размера окна
            window.addEventListener('resize', () => {
                // Очистка размещения
                container.innerHTML = '';
                placedFormulas.length = 0;

                // Очистка частиц
                const particlesContainer = document.getElementById('particles-container');
                particlesContainer.innerHTML = '';
                createParticles(800); // Пересоздаём частицы

                // Переразмещение всех формул
                placeAllFormulas();
            });
        }
    </script>
</body>
</html>"