<div class="code-container">
  <div id="matrix-code"></div>
</div>

// Constants:
$COLUMNS: 99;

// Colors:
$black:        rgb(28, 26, 32);
$dark-green:   rgb(255,   0,   0);   /* Обновлено */
$green:        rgb(255,   0,   0);   /* Обновлено */
$fade-green:   rgb(255, 136, 136);   /* Обновлено */
$light-green:  rgb(255, 187, 187);   /* Обновлено */
$energy-green: rgb(255, 221, 221);   /* Обновлено */
$white:        rgb(28, 26, 32);

@font-face {
  font-family: 'MTSSans',Arial,sans-serif;
   src: url("https://fonts.gstatic.com/s/mtssans/v8/3JVi8CoXs0iehqI6cK3jcW1_Kw.woff2") format("woff2"),
       url("https://fonts.gstatic.com/s/mtssans/v8/3JVi8CoXs0iehqI6cK3jcW1_Kx0j.woff") format("woff");
  font-weight: 100;

  src: url("https://raw.githubusercontent.com/UstymUkhman/UstymUkhman/master/public/fonts/matrix-code/Matrix-Code-NFI.otf?raw=true") format("opentype"),
       url("https://raw.githubusercontent.com/UstymUkhman/UstymUkhman/master/public/fonts/matrix-code/Matrix-Code-NFI.ttf?raw=true") format("truetype");
}

@function getRandom($min: 1, $max: 100) {
  @return floor(random() * ($max - $min + 1)) + $min;
}

* {
  margin: 0;
  padding: 0;
}

html, body {
  width:      100%;
  height:     100%;

  min-width:  100%;
  min-height: 100%;
  max-width:  100%;
  max-height: 100%;
  
  -moz-osx-font-smoothing: none;
  -webkit-font-smoothing: none;
  text-size-adjust: none;
  touch-callout: none;
  user-select: none;

  background-color: $black;
  overflow: hidden;
}

div.code-container {
  background-color: transparent;
  position: absolute;
  margin: auto;

  height: 110%;
  width: 110%;
  left: -5%;
  top: -5%;
  
  font-family: 'MTSSans',Arial,sans-serif;
  font-weight: 100;
  font-size: 30px;
  color: $green;

  div#matrix-code {
    width: 100%;
    height: 100%;

    p.code-column {
      position: absolute;
      height: auto;
      width: 40px;

      text-align: center;
      line-height: 25px;

      $code-sizes: (12, 25, 60);
      
      @for $i from 1 through 3 {
        $current-size: #{nth($code-sizes, $i)};
        $margin: -0.5%;
        $z: 1;

        @if $i == 2 {
          $margin: 0%;
          $z: 2;
        } @else if $i == 3 {
          $margin: -0.75%;
          $z: 3;
        }

        &.column-size-#{$current-size} {
          margin-left: $margin;
          z-index: $z;
        }
      }

      span {
        text-shadow: 0 -12px 10px $green;
        display: block;
        width: auto;

        &:nth-child(-n+5) {
          opacity: .3;
        }

        &:nth-child(n+6):nth-child(-n+10) {
          opacity: .42;
        }

        &:nth-child(n+11):nth-child(-n+15) {
          opacity: .54;
        }

        &:nth-child(n+16):nth-child(-n+25) {
          opacity: .66;
        }

        &:nth-child(n+26):nth-child(-n+35) {
          opacity: .78;
        }

        &:nth-child(n+36):nth-child(-n+40) {
          opacity: .9;
        }

        &:nth-child(n+41) {
          opacity: 1;
        }

        &:nth-last-child(3) {
          color: $fade-green;
        }

        &:nth-last-child(2) {
          color: $light-green;          
        }

        &:nth-last-child(1) {
          color: $energy-green;
        }

        @for $i from 1 through 3 {
          $current-size: #{nth($code-sizes, $i)};

          &.code-size-#{$current-size} {
            $size: #{$current-size}px;

            font-size: $size;
            height: $size;
          }
        }
      }
    }

    @for $i from 0 through $COLUMNS {
      p.code-#{$i} {
        $delay: getRandom(0ms, 1000ms);
        $duration: getRandom(1000ms, 15000ms);

        position: absolute;
        left: unquote("#{$i}%");
        animation: drop $duration linear $delay infinite;
      }
    }
  }
}

@keyframes drop {
  from { transform: translateY(-100%); }
  to { transform: translateY(100%); }
}

'use strict';

const COLUMNS = 100;
const TEXT = "Хакатон. МТС Финтех";
const CHARACTERS = 50;
const EVERY_TENTH_LINE = 10;

function getRandomNumber() {
  return Math.floor(Math.random() * 2); // Генерация случайного числа 0 или 1
}

function getCharCodes(isSpecialLine) {
  if (isSpecialLine) {
    return Array.from(TEXT);
  } else {
    return Array.from(
      new Array(CHARACTERS), () => {
        return getRandomNumber().toString(); // Получение случайного числа 0 или 1
      }
    );
  }
}

function createCharCodes(drop, isSpecialLine) {
  let codes = getCharCodes(isSpecialLine);
  let size = Math.floor(Math.random() * 13);

  if (size < 10) size = 25;
  else if (size < 12) size = 12;
  else size = 60;

  setCharCodes(drop, codes, size);
  return size;
}

function setCharCodes(column, codes, size) {
  codes.forEach((char, index) => {
    let charElement = document.createElement('span');
    charElement.className = `char-${index} code-size-${size}`;
    charElement.textContent = char; // Вывод символа
    column.appendChild(charElement);
  });
}

function createRain(container) {
  for (let i = 0; i < COLUMNS; i++) {
    let isSpecialLine = (i % EVERY_TENTH_LINE === 0);
    let column = document.createElement('p');
    let size = createCharCodes(column, isSpecialLine);
    column.className = `code-column column-size-${size} code-${i}`;
    container.appendChild(column);
  }
}

createRain(document.getElementById('matrix-code'));