index.html

<!DOCTYPE html>
<html lang="en" translate="no">

<head>
  <meta charset="utf-8" />
  <meta name="theme-color" content="#000000" />
  <title>react-declarative</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimal-ui">
  <link
    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
    rel="stylesheet" />
  <link href="https://api.mapbox.com/mapbox-gl-js/v3.4.0/mapbox-gl.css" rel="stylesheet">
  <link rel="stylesheet" href="/css/codicon.css" />
  <link rel="preload" href="star.png" as="image" crossorigin="anonymous" />
  <link rel="preload" href="floor.jpg" as="image" crossorigin="anonymous" />
  <link rel="preload" href="peter.png" as="image" crossorigin="anonymous" />
  <link rel="preload" href="image/1.jpg" as="image" crossorigin="anonymous" />
  <link rel="preload" href="image/2.jpg" as="image" crossorigin="anonymous" />
  <link rel="preload" href="image/3.jpg" as="image" crossorigin="anonymous" />
  <link rel="preload" href="image/4.jpg" as="image" crossorigin="anonymous" />
  <link rel="preload" href="image/5.jpg" as="image" crossorigin="anonymous" />
  <link rel="preload" href="image/6.jpg" as="image" crossorigin="anonymous" />
  <link rel="preload" href="image/7.jpg" as="image" crossorigin="anonymous" />
  <link rel="preload" href="code1.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="code2.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="code3.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="code4.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="code5.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="code6.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="code7.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="code8.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="code9.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="code10.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="code11.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="code12.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="code13.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="code14.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="code15.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="code16.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="code17.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="code18.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="code19.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="code20.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="code21.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="code22.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="code23.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="code24.txt" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="react-declarative.d.ts" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="react.d.ts" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="global.d.ts" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="mui-icons.d.ts" as="fetch" crossorigin="anonymous" />
  <link rel="preload" href="mui-material.d.ts" as="fetch" crossorigin="anonymous" />
  <style>
    @font-face {
      font-family: "codicon";
      font-display: block;
      src: url("/font/codicon.ttf") format("truetype");
    }
  
    .monaco-editor .codicon {
      font-family: "codicon" !important;
    }

    * {
      font-family: "Roboto", sans-serif !important;
    }

    html,
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    body {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    input[type=number] {
      -moz-appearance: textfield;
    }

    .split-horizontal {
      display: flex;
      width: 100%;
      height: calc(100dvh - 50px);
    }

    .split-vertical {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: calc(100dvh - 50px);
    }

    .gutter {
      flex-basis: 5px !important;
      nav-index: 999;
      flex-shrink: 0;
      flex-grow: 0;
      background: #424242;
    }

    .gutter-horizontal {
      cursor: col-resize;
    }

    .gutter-vertical {
      cursor: row-resize;
    }

    .pane {
      display: flex;
      flex-shrink: 1;
      flex-grow: 1;
      overflow: hidden;
      position: relative;
    }

    .pane> :nth-of-type(1) {
      flex: 1;
    }


    .loader_wraper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      width: 100vw;
      background: #0c0d11;
    }

    .loader,
    .loader:after {
      border-radius: 50%;
      width: 10em;
      height: 10em;
    }

    .loader {
      margin: 60px auto;
      font-size: 10px;
      position: relative;
      text-indent: -9999em;
      border-top: 1.1em solid transparent;
      border-right: 1.1em solid transparent;
      border-bottom: 1.1em solid transparent;
      border-left: 1.1em solid #3F51B5;
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-animation: load8 1.1s infinite linear;
      animation: load8 1.1s infinite linear;
    }

    @-webkit-keyframes load8 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @keyframes load8 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root">
    <div class="loader_wraper">
      <div class="loader"></div>
    </div>
  </div>
  <script type="module" src="/src/index.tsx"></script>
  <!-- Yandex.Metrika counter -->
  <script type="text/javascript" >
    (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
    m[i].l=1*new Date();
    for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
    k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
    (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

    ym(97575246, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        webvisor:true
    });
  </script>
  <noscript><div><img src="https://mc.yandex.ru/watch/97575246" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
  <!-- /Yandex.Metrika counter -->
</body>

</html>