<!DOCTYPE html>
<html lang="ru">

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

  <head>
    <meta charset="utf-8">
    <title>Mootfrost DEV</title>
    <meta name="description" content="Обо мне">
    <link rel="stylesheet" type="text/css" href="/static/resources/styles/about.style.css"/>
    <link href="/static/resources/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link rel="icon" type="image/x-icon" href="/static/resources/images/favicon.png">
  </head>

  <body ondragstart="return false;" ondrop="return false;">
    <div id="background"></div>
    <div id="particles-js"><canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="768" height="922"></canvas></div>

    <a class="btn-back" href="https://mootfrost.ru">
      <svg ID="back-s" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="40px" height="40px">
        <path id="pathBack" d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256S114.6 512 256 512s256-114.6 256-256zM271 135c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-87 87 87 87c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L167 273c-9.4-9.4-9.4-24.6 0-33.9L271 135z"  fill="#ffffff" style="fill: rgb(255, 255, 255);"/>
      </svg>
    </a>
    <div class="wrapper pe-none">
      <span class="main-title">Обо мне:</span>
      <p class="content">Семейкин Андрей, <span id="age"></span>, программист<br></p>
      <p class="content">Живу в Москве, учусь в 1580<br></p>
      <p class="content">Пишу на C#, Python, JS. Немного знаю C++ и Java<br></p>
      <p class="content">Разбираюсь в Linux, Docker, Drone CI<br></p>
      <p class="content">За последнюю неделю <span id="code-stats"></span></p>
    </div>

    <script>
      let back_s = document.getElementById('back-s');
      back_s.onmouseenter = () => document.getElementById('pathBack').style.fill = 'lightgray';
      back_s.onmouseleave = () => document.getElementById('pathBack').style.fill = '#ffffffff';
    </script>
    <script>
      async function load_code_stats() {
       let resp = await fetch('/api/get_code_stats', {
                method: 'GET',
            },
       );
       let code_stats = await resp.json()

       let about = document.getElementById('code-stats')

       if (Object.keys(code_stats).length === 0) {
           about.innerHTML += '❌Не удалось загрузить❌'
           return
       }

       for (let lang in code_stats) {
           about.innerHTML += `${code_stats[lang]}на ${lang}, `
       }
       about.innerHTML = about.innerHTML.slice(0, -2)
    }
    load_code_stats()

    async function load_age() {
        let resp = await fetch('/api/get_age', {
                method: 'GET',
            },
        );
        let age = await resp.json()

        if (age.length === 0) {
            document.getElementById('age').innerHTML = 'age∈(-47; 1287) лет'
            return
        }

        let age_container = document.getElementById('age')
        age_container.innerHTML = age
    }
    load_age()
    </script>
    <script src="/static/resources/scripts/particles.js"></script>
    <script src="/static/resources/scripts/app.js"></script>
    <script src="/static/resources/bootstrap/js/bootstrap.js"></script>
  </body>
</html>
