sortVisualization/index.html at master · NSTU-TMP/sortVisualization · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html>
  <head>
    <link rel="icon" href="images/favicon.ico" type="image/x-icon">

    <meta charset="utf-8" />
    <title>Sortify!</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <script src="js/script.js"></script>
    <script src="js/bubbleSort.js"></script>
    <script src="js/quickSort.js"></script>
    <script src="js/heapSort.js"></script>
    <script src="js/mergeSort.js"></script>

    <script
      src="https://code.jquery.com/jquery-3.6.3.js"
      integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM="
      crossorigin="anonymous"
    ></script>

    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
      crossorigin="anonymous"
    />

    <link rel="stylesheet" href="css/style.css" />

    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
    ></script>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
      body {
        font-family: 'Ubuntu', sans-serif;
      }
    </style>

  </head>

  <body class="bg-grey">

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand square-brand" href="index.html"><svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="80px" height="27px">
       <path fill-rule="evenodd"  fill="rgb(250, 250, 250)"
        d="M77.40,14.978 L73.512,14.978 L76.250,2.53 L79.778,2.53 L77.40,14.978 ZM67.13,20.626 L65.122,23.611 C64.644,24.317 64.77,24.934 63.423,25.461 C62.769,25.987 62.88,26.406 61.381,26.718 L60.858,23.364 C61.173,23.199 61.467,23.10 61.743,22.797 C62.18,22.583 62.251,22.336 62.442,22.57 L63.485,20.626 L60.765,10.415 L61.293,7.923 L64.6,7.923 L66.151,16.310 L71.874,7.923 L74.588,7.923 L74.60,10.415 L67.13,20.626 ZM60.52,11.450 L57.92,11.450 L55.149,20.626 L51.621,20.626 L53.565,11.450 L50.704,11.450 L51.451,7.923 L54.312,7.923 L54.375,7.627 C54.542,6.838 54.827,6.94 55.230,5.395 C55.633,4.696 57.386,1.78 58.892,0.659 L59.690,4.48 C58.400,4.558 58.44,7.35 57.902,7.627 L57.840,7.923 L60.800,7.923 L60.52,11.450 ZM50.739,6.628 C50.319,6.982 49.845,7.159 49.319,7.159 C48.793,7.159 48.391,6.982 48.112,6.628 C47.833,6.275 47.750,5.835 47.861,5.309 C47.973,4.783 48.242,4.347 48.669,4.1 C49.95,3.656 49.571,3.483 50.98,3.483 C50.624,3.483 51.23,3.656 51.295,4.1 C51.568,4.347 51.648,4.783 51.537,5.309 C51.425,5.835 51.159,6.275 50.739,6.628 ZM48.218,20.626 L44.690,20.626 L47.381,7.923 L50.909,7.923 L48.218,20.626 ZM46.92,11.450 L43.132,11.450 L41.188,20.626 L37.661,20.626 L39.605,11.450 L36.743,11.450 L37.491,7.923 L40.352,7.923 L41.292,3.483 L44.819,3.483 L43.879,7.923 L46.839,7.923 L46.92,11.450 ZM33.377,12.30 C32.558,12.597 32.37,13.292 31.813,14.114 L30.434,20.626 L26.906,20.626 L29.598,7.923 L33.125,7.923 L32.921,8.885 C33.344,8.441 33.882,8.113 34.536,7.899 C35.189,7.685 36.18,7.578 37.21,7.578 L36.263,11.154 C35.158,11.171 34.196,11.463 33.377,12.30 ZM26.715,16.815 C26.205,17.629 25.587,18.336 24.860,18.936 C24.132,19.537 23.327,20.18 22.445,20.379 C21.562,20.741 20.661,20.922 19.740,20.922 C18.819,20.922 17.988,20.749 17.248,20.404 C16.507,20.59 15.895,19.586 15.414,18.986 C14.933,18.386 14.601,17.683 14.418,16.877 C14.235,16.71 14.242,15.208 14.437,14.287 C14.632,13.366 14.984,12.499 15.494,11.685 C16.3,10.871 16.621,10.164 17.349,9.564 C18.76,8.963 18.885,8.483 19.776,8.121 C20.666,7.759 21.572,7.578 22.493,7.578 C23.414,7.578 24.245,7.751 24.986,8.96 C25.726,8.441 26.333,8.914 26.806,9.514 C27.279,10.115 27.607,10.818 27.790,11.623 C27.973,12.429 27.967,13.292 27.772,14.213 C27.577,15.134 27.224,16.1 26.715,16.815 ZM24.244,13.54 C24.159,12.676 24.0,12.338 23.767,12.42 C23.267,11.450 22.590,11.154 21.735,11.154 C20.880,11.154 20.84,11.459 19.347,12.67 C18.602,12.708 18.142,13.448 17.964,14.287 C17.783,15.142 17.938,15.882 18.431,16.507 C18.910,17.115 19.586,17.420 20.457,17.420 C20.888,17.403 21.309,17.317 21.721,17.161 C22.132,17.4 22.509,16.778 22.851,16.482 C23.588,15.874 24.49,15.134 24.234,14.262 C24.325,13.835 24.328,13.432 24.244,13.54 ZM21.182,6.419 C21.92,6.584 20.979,6.721 20.843,6.831 C20.708,6.941 20.554,7.23 20.383,7.78 C20.213,7.132 20.29,7.159 19.833,7.159 C19.638,7.159 19.460,7.134 19.302,7.83 C19.144,7.32 19.11,6.954 18.903,6.847 C18.795,6.740 18.719,6.604 18.675,6.438 C18.630,6.272 18.625,6.75 18.660,5.848 L19.19,3.508 L19.769,3.508 L19.409,5.858 C19.399,5.925 19.403,5.990 19.423,6.55 C19.443,6.120 19.477,6.177 19.525,6.228 C19.573,6.279 19.632,6.321 19.702,6.354 C19.773,6.387 19.853,6.404 19.944,6.404 C20.45,6.404 20.137,6.383 20.218,6.341 C20.300,6.299 20.369,6.249 20.425,6.191 C20.481,6.134 20.525,6.74 20.557,6.13 C20.589,5.952 20.608,5.904 20.613,5.869 L20.975,3.508 L21.725,3.508 L21.367,5.848 C21.333,6.65 21.272,6.255 21.182,6.419 ZM17.844,4.264 L17.400,7.159 L16.650,7.159 L17.94,4.264 L16.97,4.264 L16.212,3.514 L18.919,3.514 L18.804,4.264 L17.844,4.264 ZM14.985,4.453 C15.10,4.460 15.47,4.463 15.96,4.463 L15.348,4.463 L15.505,4.463 C15.722,4.463 15.908,4.496 16.62,4.563 C16.216,4.629 16.339,4.722 16.431,4.841 C16.523,4.960 16.583,5.101 16.612,5.266 C16.641,5.430 16.641,5.610 16.611,5.806 L16.610,5.811 L16.609,5.816 C16.579,6.12 16.524,6.192 16.445,6.356 C16.366,6.521 16.262,6.662 16.133,6.781 C16.5,6.900 15.854,6.993 15.679,7.59 C15.504,7.126 15.309,7.159 15.92,7.159 L13.707,7.159 L13.823,6.404 L14.568,6.404 L14.626,6.404 L15.229,6.404 C15.264,6.404 15.314,6.392 15.378,6.370 C15.443,6.347 15.508,6.311 15.573,6.262 C15.638,6.213 15.698,6.152 15.751,6.78 C15.804,6.5 15.839,5.916 15.855,5.811 C15.870,5.710 15.863,5.621 15.832,5.546 C15.802,5.471 15.762,5.409 15.711,5.360 C15.661,5.311 15.607,5.275 15.550,5.252 C15.492,5.230 15.446,5.218 15.411,5.218 L15.390,5.218 L14.986,5.218 C14.720,5.218 14.506,5.156 14.343,5.32 C14.180,4.908 14.106,4.720 14.120,4.468 L14.130,4.369 C14.151,4.229 14.196,4.105 14.263,3.996 C14.330,3.888 14.413,3.799 14.511,3.729 C14.609,3.659 14.722,3.606 14.848,3.569 C14.974,3.532 15.107,3.514 15.247,3.514 L15.651,3.514 L15.535,4.269 L15.378,4.269 L15.126,4.269 C15.35,4.269 14.978,4.279 14.956,4.300 C14.934,4.321 14.921,4.344 14.917,4.369 C14.916,4.376 14.915,4.384 14.915,4.395 C14.915,4.405 14.921,4.416 14.932,4.426 C14.942,4.437 14.960,4.446 14.985,4.453 ZM12.863,7.159 L11.111,4.662 L10.728,7.159 L9.978,7.159 L10.537,3.514 L11.287,3.514 L13.39,6.10 L13.422,3.514 L14.172,3.514 L13.613,7.159 L12.863,7.159 ZM8.795,7.35 L7.611,7.35 C7.184,7.35 6.914,7.85 6.803,7.183 C6.692,7.282 6.624,7.389 6.599,7.504 C6.592,7.537 6.588,7.578 6.586,7.627 C6.583,7.677 6.606,7.726 6.653,7.775 C6.700,7.825 6.782,7.866 6.898,7.899 C7.14,7.932 7.188,7.948 7.418,7.948 L8.602,7.948 L9.342,7.948 C10.361,7.948 11.224,8.104 11.931,8.417 C12.638,8.729 13.191,9.165 13.590,9.724 C13.990,10.283 14.235,10.949 14.326,11.722 C14.417,12.495 14.366,13.342 14.171,14.262 L14.165,14.287 L14.160,14.312 C13.965,15.233 13.658,16.79 13.240,16.852 C12.821,17.625 12.293,18.291 11.657,18.850 C11.21,19.409 10.283,19.845 9.444,20.157 C8.605,20.470 7.675,20.626 6.656,20.626 L0.144,20.626 L0.897,17.74 L4.399,17.74 L4.671,17.74 L7.507,17.74 C7.671,17.74 7.909,17.21 8.219,16.914 C8.530,16.807 8.845,16.639 9.165,16.408 C9.485,16.178 9.781,15.890 10.51,15.545 C10.322,15.200 10.509,14.780 10.614,14.287 C10.715,13.810 10.704,13.395 10.581,13.41 C10.459,12.688 10.286,12.396 10.64,12.166 C9.841,11.936 9.597,11.767 9.332,11.660 C9.67,11.553 8.852,11.500 8.688,11.500 L8.589,11.500 L6.690,11.500 C5.440,11.500 4.450,11.208 3.719,10.624 C2.987,10.41 2.689,9.157 2.825,7.973 L2.900,7.504 C3.39,6.846 3.282,6.263 3.628,5.753 C3.974,5.243 4.388,4.824 4.869,4.495 C5.350,4.166 5.892,3.915 6.496,3.742 C7.100,3.570 7.731,3.483 8.388,3.483 L10.288,3.483 L9.535,7.35 L8.795,7.35 ZM76.590,17.99 L75.843,20.626 L72.316,20.626 L73.63,17.99 L76.590,17.99 Z"/>
       </svg></a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNavDropdown"
        aria-controls="navbarNavDropdown"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="about.html"
              >О задании<span class="sr-only"></span
            ></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="sorting.html">Сортировки</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contacts.html">Контакты</a>
          </li>
        </ul>
      </div>
    </nav>
    <div id="parallax">
    <div class="left-padding">
      <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="400px" height="124px">
      <path fill-rule="evenodd"  fill="rgb(0, 0, 0)"
      d="M386.30,64.825 L368.337,64.825 L382.72,0.8 L399.765,0.8 L386.30,64.825 ZM335.733,93.158 L326.251,108.130 C323.849,111.675 321.9,114.768 317.728,117.409 C314.447,120.48 311.32,122.151 307.483,123.719 L304.861,106.892 C306.438,106.67 307.917,105.118 309.300,104.46 C310.681,102.974 311.850,101.736 312.808,100.335 L318.40,93.158 L304.394,41.935 L307.41,29.438 L320.651,29.438 L331.412,71.506 L360.120,29.438 L373.730,29.438 L371.83,41.935 L335.733,93.158 ZM300.818,47.132 L285.971,47.132 L276.220,93.158 L258.527,93.158 L268.278,47.132 L253.925,47.132 L257.673,29.438 L272.26,29.438 L272.340,27.954 C273.179,23.994 274.608,20.263 276.630,16.756 C278.651,13.251 281.163,10.56 284.168,7.167 L294.264,19.664 C292.155,22.222 290.744,24.984 290.34,27.954 L289.719,29.438 L304.566,29.438 L300.818,47.132 ZM254.101,22.943 C251.992,24.717 249.618,25.603 246.979,25.603 C244.339,25.603 242.320,24.717 240.923,22.943 C239.524,21.170 239.106,18.964 239.666,16.323 C240.225,13.684 241.573,11.498 243.715,9.766 C245.855,8.33 248.244,7.167 250.885,7.167 C253.524,7.167 255.527,8.33 256.892,9.766 C258.257,11.498 258.660,13.684 258.101,16.323 C257.542,18.964 256.208,21.170 254.101,22.943 ZM241.452,93.158 L223.759,93.158 L237.258,29.438 L254.951,29.438 L241.452,93.158 ZM230.788,47.132 L215.941,47.132 L206.190,93.158 L188.497,93.158 L198.248,47.132 L183.895,47.132 L187.643,29.438 L201.996,29.438 L206.714,7.167 L224.407,7.167 L219.689,29.438 L234.536,29.438 L230.788,47.132 ZM167.9,50.39 C162.899,52.885 160.285,56.371 159.164,60.494 L152.244,93.158 L134.551,93.158 L148.50,29.438 L165.744,29.438 L164.721,34.264 C166.842,32.37 169.542,30.388 172.822,29.315 C176.100,28.244 180.256,27.706 185.288,27.706 L181.488,45.647 C175.943,45.730 171.117,47.193 167.9,50.39 ZM133.590,74.42 C131.33,78.125 127.931,81.673 124.283,84.683 C120.633,87.695 116.596,90.108 112.171,91.921 C107.745,93.735 103.222,94.643 98.603,94.643 C93.983,94.643 89.816,93.777 86.100,92.45 C82.384,90.313 79.317,87.943 76.905,84.930 C74.490,81.920 72.824,78.394 71.908,74.352 C70.989,70.311 71.21,65.981 72.0,61.360 C72.978,56.742 74.745,52.390 77.302,48.307 C79.856,44.224 82.958,40.678 86.608,37.666 C90.256,34.656 94.315,32.244 98.783,30.428 C103.250,28.615 107.792,27.706 112.412,27.706 C117.31,27.706 121.199,28.572 124.915,30.305 C128.631,32.37 131.674,34.409 134.49,37.419 C136.421,40.431 138.65,43.957 138.984,47.998 C139.900,52.40 139.870,56.371 138.892,60.989 C137.913,65.610 136.145,69.959 133.590,74.42 ZM121.193,55.174 C120.770,53.277 119.974,51.586 118.804,50.101 C116.297,47.132 112.900,45.647 108.612,45.647 C104.322,45.647 100.327,47.174 96.630,50.225 C92.896,53.442 90.584,57.154 89.693,61.360 C88.784,65.650 89.564,69.362 92.36,72.496 C94.440,75.548 97.828,77.74 102.201,77.74 C104.363,76.993 106.475,76.560 108.539,75.775 C110.602,74.992 112.491,73.857 114.209,72.372 C117.906,69.321 120.220,65.610 121.146,61.237 C121.600,59.93 121.615,57.72 121.193,55.174 ZM105.836,21.894 C105.385,22.719 104.819,23.407 104.138,23.960 C103.457,24.512 102.688,24.924 101.830,25.196 C100.973,25.468 100.53,25.604 99.71,25.604 C98.89,25.604 97.200,25.477 96.407,25.223 C95.612,24.968 94.945,24.574 94.405,24.39 C93.864,23.504 93.482,22.820 93.259,21.986 C93.36,21.154 93.12,20.167 93.187,19.27 L94.986,7.293 L98.748,7.293 L96.941,19.79 C96.890,19.413 96.914,19.742 97.13,20.66 C97.112,20.391 97.283,20.680 97.525,20.934 C97.766,21.189 98.63,21.399 98.414,21.566 C98.766,21.732 99.169,21.815 99.626,21.815 C100.134,21.815 100.593,21.710 101.3,21.500 C101.412,21.289 101.757,21.39 102.39,20.750 C102.320,20.461 102.541,20.163 102.702,19.855 C102.863,19.549 102.957,19.307 102.984,19.132 L104.799,7.293 L108.561,7.293 L106.762,19.27 C106.595,20.114 106.286,21.70 105.836,21.894 ZM89.90,11.81 L86.864,25.604 L83.101,25.604 L85.328,11.81 L80.329,11.81 L80.906,7.319 L94.482,7.319 L93.905,11.81 L89.90,11.81 ZM82.913,16.106 C83.59,16.931 83.56,17.834 82.906,18.816 L82.902,18.843 L82.898,18.869 C82.747,19.851 82.472,20.754 82.74,21.579 C81.676,22.403 81.155,23.114 80.511,23.710 C79.867,24.306 79.107,24.771 78.232,25.104 C77.356,25.438 76.375,25.604 75.288,25.604 L68.342,25.604 L68.923,21.815 L72.659,21.815 L72.948,21.815 L75.974,21.815 C76.149,21.815 76.399,21.759 76.724,21.644 C77.48,21.531 77.374,21.351 77.701,21.105 C78.28,20.860 78.325,20.553 78.592,20.184 C78.859,19.816 79.32,19.369 79.113,18.843 C79.191,18.334 79.154,17.891 79.1,17.514 C78.848,17.137 78.646,16.826 78.395,16.580 C78.143,16.335 77.872,16.155 77.583,16.41 C77.293,15.927 77.61,15.870 76.885,15.870 L76.780,15.870 L74.754,15.870 C73.421,15.870 72.346,15.558 71.530,14.936 C70.713,14.313 70.340,13.370 70.411,12.107 L70.462,11.608 C70.569,10.906 70.792,10.283 71.130,9.740 C71.467,9.196 71.882,8.749 72.375,8.398 C72.867,8.47 73.430,7.780 74.63,7.595 C74.696,7.411 75.364,7.319 76.65,7.319 L78.91,7.319 L77.510,11.108 L76.721,11.108 L75.458,11.108 C75.2,11.108 74.718,11.160 74.605,11.265 C74.493,11.371 74.427,11.485 74.408,11.608 C74.403,11.643 74.400,11.686 74.401,11.739 C74.402,11.792 74.429,11.844 74.482,11.897 C74.535,11.950 74.625,11.994 74.751,12.28 C74.878,12.64 75.63,12.81 75.309,12.81 L76.572,12.81 L77.361,12.81 C78.448,12.81 79.379,12.248 80.152,12.581 C80.925,12.914 81.543,13.379 82.4,13.975 C82.465,14.572 82.768,15.282 82.913,16.106 ZM64.106,25.604 L55.319,13.81 L53.398,25.604 L49.636,25.604 L52.440,7.319 L56.202,7.319 L64.990,19.842 L66.910,7.319 L70.672,7.319 L67.868,25.604 L64.106,25.604 ZM43.701,24.984 L37.762,24.984 C35.617,24.984 34.265,25.232 33.708,25.727 C33.149,26.222 32.809,26.759 32.686,27.335 C32.651,27.501 32.627,27.706 32.617,27.954 C32.605,28.201 32.717,28.449 32.955,28.696 C33.191,28.944 33.601,29.150 34.185,29.315 C34.768,29.481 35.637,29.562 36.793,29.562 L42.732,29.562 L46.443,29.562 C51.557,29.562 55.885,30.347 59.432,31.913 C62.976,33.481 65.751,35.667 67.755,38.471 C69.759,41.276 70.989,44.616 71.447,48.493 C71.904,52.371 71.644,56.618 70.665,61.237 L70.639,61.360 L70.613,61.484 C69.634,66.104 68.94,70.352 65.995,74.228 C63.894,78.106 61.249,81.447 58.57,84.250 C54.864,87.55 51.163,89.242 46.955,90.808 C42.745,92.375 38.84,93.158 32.971,93.158 L0.306,93.158 L4.81,75.342 L21.650,75.342 L23.11,75.342 L37.240,75.342 C38.64,75.342 39.255,75.75 40.813,74.537 C42.368,74.2 43.951,73.157 45.557,72.1 C47.162,70.847 48.644,69.403 50.1,67.670 C51.357,65.938 52.298,63.835 52.822,61.360 C53.329,58.969 53.275,56.887 52.661,55.112 C52.47,53.339 51.181,51.876 50.65,50.720 C48.949,49.566 47.724,48.721 46.396,48.183 C45.65,47.648 43.987,47.379 43.164,47.379 L42.669,47.379 L33.142,47.379 C26.872,47.379 21.903,45.916 18.235,42.987 C14.565,40.60 13.71,35.625 13.753,29.686 L14.127,27.335 C14.826,24.37 16.44,21.108 17.782,18.550 C19.519,15.995 21.594,13.891 24.6,12.240 C26.417,10.591 29.138,9.333 32.168,8.467 C35.197,7.600 38.361,7.167 41.661,7.167 L51.188,7.167 L47.413,24.984 L43.701,24.984 ZM383.776,75.465 L380.28,93.158 L362.335,93.158 L366.83,75.465 L383.776,75.465 Z"/>
      </svg>
    </div>
    <div class="block-about container-fluid">
      <br />
      <div class="row">

        <h1
          class="title-square"
          style="text-align: center; width: auto; background-color: rgba(124, 163, 187, 0.8);"
        >
          Расчётное графическое задание:
          <br/>
          Визуализация сортировок
        </h1>
      </div>

      <div class="row">
        <div
          class="title-square col-md-12"
          style="text-align: center; width: 600px; background-color: rgba(81, 96, 109, 0.8)"
        >
          <h3 style="padding: 10px">
            Выполнили студенты группы АВТ-113
            <br />
          </h3>
          <h5 style="padding: 10px">
              Хромин Сергей Константинови
            <br />
              Пронько Артем Вячеславович
            <br />
              Чуриков Данил Игоревич
            <br />
              Кашаев Аскер Муратович
          </h5>
        </div>
      </div>
    </div>
  </div>
  <script>
    (function() {
      // Add event listener
      document.addEventListener("mousemove", parallax);
      const elem = document.querySelector("#parallax");

      // Magic happens here
      function parallax(e) {
        let _w = window.innerWidth / 2;
        let _h = window.innerHeight / 2;
        let _mouseX = e.clientX;
        let _mouseY = e.clientY;
        let _depth1 = `${50 - (_mouseX - _w) * 0.01}% ${50 - (_mouseY - _h) * 0.01}%`;
        let _depth2 = `${50 - (_mouseX - _w) * 0.02}% ${50 - (_mouseY - _h) * 0.02}%`;
        let _depth3 = `${50 - (_mouseX - _w) * 0.06}% ${50 - (_mouseY - _h) * 0.06}%`;
        let x = `${_depth3}, ${_depth2}, ${_depth1}`;
        console.log(x);
        elem.style.backgroundPosition = x;
      }
    })();
  </script>
  </body>
</html>