{% extends "base.html" %}
{% block title %}Эмулятор компьютерной сети{% endblock %}
{% block description %}Эмулятор компьютерной сети для образовательных целей на базе ОС Linux{% endblock %}
{% block content %}

<main>
    <section class="py-5 my-lg-5">
       <div class="container my-lg-5">
             <div class="row">
                <div class="col-md-5">
                    <div id="index_network_example" class="border border-light" style="height: 300px;cursor: pointer"></div>
                </div>
                <div class="col-md-7">
                    <div class="d-flex align-items-center justify-content-center text-center" style="height: 300px;">
                        <p class="fs-2">Эмулятор компьютерной сети для образовательных целей на базе ОС Linux
                            <br>
                            <a href="{{ url_for('home') }}" class="btn btn-primary">Создать сеть</a>
                        </p>
                    </div>

                </div>
            </div>
        </div>
    </section>

 <section class="container pt-4 pt-lg-0 pb-4 pb-lg-5">
        <h2 class="h1 text-center pb-3 pb-md-0 mb-md-5">Как это работает?</h2>
        <div class="steps">
          <div class="step pt-0 pt-md-3 pb-3">
            <div class="step-number">
              <div class="step-number-inner">1</div>
            </div>
            <div class="step-body d-flex align-items-center ps-xl-5">
              <div class="rellax d-none d-lg-block flex-shrink-0 mx-4 mx-xl-5" data-rellax-percentage="0.5" data-rellax-speed="-0.3" data-disable-parallax-down="lg">
                <img src="/images/howto/how_to_1.png" width="250" alt="Нарисуйте свою сеть">
              </div>
              <div class="rellax ps-md-4 ps-xl-5" data-rellax-percentage="0.5" data-rellax-speed="0.4" data-disable-parallax-down="lg">
                <h3 class="h4">Нарисуйте свою сеть</h3>
                <p class="mb-0">Вы можете создать компьютерную сеть, в которой будут хосты, свитчи, хабы, раутеры и сервера. Также можете задать настройки для каждого устройства.</p>
              </div>
            </div>
          </div>
          <div class="step pt-0 pt-md-4 pb-5">
            <div class="step-number">
              <div class="step-number-inner">2</div>
            </div>
            <div class="step-body d-flex align-items-center ps-xl-5">
              <div class="rellax d-none d-lg-block flex-shrink-0 mx-4 mx-xl-5" data-rellax-percentage="0.5" data-rellax-speed="-0.5" data-disable-parallax-down="lg">
                <img src="/images/howto/how_to_2.png" width="250" alt="Отправте сеть на эмуляцию">
              </div>
              <div class="rellax ps-md-4 ps-xl-5" data-rellax-percentage="0.5" data-rellax-speed="0.5" data-disable-parallax-down="lg">
                <h3 class="h4">Отправьте сеть на эмуляцию</h3>
                <p class="mb-0">На нашем сервере ваша сеть будет эмулироваться с помощью сетевой подсистемы Linux. Для каждого устройства создается сетевой интерфейс со своим уникальным MAC адресом и другими настройками.</p>
              </div>
            </div>
          </div>
          <div class="step pt-0 pt-md-4 pb-5">
            <div class="step-number">
              <div class="step-number-inner">3</div>
            </div>
            <div class="step-body d-flex align-items-center ps-xl-5">
              <div class="rellax d-none d-lg-block flex-shrink-0 mx-4 mx-xl-5" data-rellax-percentage="0.5" data-rellax-speed="-0.3" data-disable-parallax-down="lg">
                <img src="/images/howto/how_to_3.png" class="d-dark-mode-none" width="250" alt="Illustration">
              </div>
              <div class="rellax ps-md-4 ps-xl-5" data-rellax-percentage="0.5" data-rellax-speed="0.4" data-disable-parallax-down="lg">
                <h3 class="h4">Дождитесь эмуляции на сервере</h3>
                <p class="mb-0">Во время эмуляции сети идет захват всего сетевого трафика, который затем обрабатывается для визуализации.</p>
              </div>
            </div>
          </div>
          <div class="step pt-0 pt-md-4 pb-5">
            <div class="step-number">
              <div class="step-number-inner">4</div>
            </div>
            <div class="step-body d-flex align-items-center ps-xl-5">
              <div class="rellax d-none d-lg-block flex-shrink-0 mx-4 mx-xl-5" data-rellax-percentage="0.5" data-rellax-speed="-0.5" data-disable-parallax-down="lg">
                <img src="/images/howto/how_to_4.png" class="d-dark-mode-none" width="250" alt="Illustration">
              </div>
              <div class="rellax ps-md-4 ps-xl-5" data-rellax-percentage="0.5" data-rellax-speed="0.6" data-disable-parallax-down="lg">
                <h3 class="h4">Запустите анимацию</h3>
                <p class="mb-0">Запустите анимацию и наблюдайте за сетевым трафиком в удобном формате.</p>
              </div>
            </div>
          </div>
        </div>
  </section>


    <!-- вторая страница, шаг-->
    <!-- section class="py-5 my-lg-5">
        <div class="container">
            <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-4 pb-xl-3" -->
  <!-- Step -->
                <!-- div class="col text-center border-end">
                     <div class="card d-table border-0 rounded-circle shadow-sm p-3 mx-auto mb-4">
                        <img class="host" src="{{ url_for('static', filename='/images/pc.png') }}" width="100">
                    </div>
                        <h5 class="mb-2">Шаг 1</h5>
                        <p class="fs mb-0">Добавь устройства</p>
                </div-->
  <!-- Step -->
                <!-- div class="col text-center border-end">
                     <div class="card d-table border-0 rounded-circle shadow-sm p-3 mx-auto mb-4">
                        <img class="line" src="{{ url_for('static', filename='/images/line.png') }}" width="90">
                    </div>
                        <h5 class="mb-2">Шаг 2</h5>
                        <p class="fs mb-0">Соедини устройства</p>
                </div -->
  <!-- Step -->
                <!-- div class="col text-center border-end">
                     <div class="card d-table border-0 rounded-circle shadow-sm p-3 mx-auto mb-4">
                        <img class="parameters"  src="{{ url_for('static', filename='/images/parameters.png') }}" width="100">
                    </div>
                        <h5 class="mb-2">Шаг 3</h5>
                        <p class="fs mb-0">Настрой параметры</p>
                </div-->
  <!-- Step -->
                 <!-- div class="col text-center">
                     <div class="card d-table border-0 rounded-circle shadow-sm p-3 mx-auto mb-4">
                        <img class="parameters" src="{{ url_for('static', filename='/images/topo.png') }}" width="150">
                        </div>
                        <h5 class="mb-2">Шаг 4</h5>
                        <p class="fs mb-0">Запусти с помощью кнопки Эмулировать</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section-->

  <section class="container pt-4 pt-lg-0 pb-4 pb-lg-5">
        <h2 class="h1 text-center pb-3 pb-md-0 mb-md-5">Как это работает (видео)</h2>
        <div class="col text-center">
            <video class="border-primary" src="{{ url_for('static', filename='/video/video.mp4') }}" width="60%" controls></video>
        </div>
</section>

<section class="container py-5 mt-md-n2">
    <div class="card border-0 bg-gradient-primary">
        <div class="py-md-5 py-4 text-center">
            <div class="card-body" style="background-image: url(/images/contact-bg.png);">
                <p class="lead text-light opacity-70 mb-3"><font style="vertical-align: inherit;">Остались вопросы?</font></p>
                <h2 class="h1 text-light pb-3 pb-lg-0 mb-lg-5"><font style="vertical-align: inherit;">Можете связаться с нами</font></h2>

                <!-- Telegram -->
                <a href="https://t.me/MimiNetCommunity" class="btn btn-primary btn-secondary btn-telegram">
                    <i class="bx bxl-telegram"></i>
                </a>
            </div>
        </div>
    </div>
</section>

</main>
    <div id="config_host"></div>

{% endblock %}

{% block network %}
<script>

    var graph_network_zoom = 2;
    var graph_network_pan_x = -170;
    var graph_network_pan_y = -90;

    var nodes = JSON.parse('[{"classes": ["l2_switch"], "config": {"label": "l2sw1", "type": "l2_switch"}, "data": {"id": "l2sw1", "label": "l2sw1"}, "interface": [{"connect": "edge_lhaep1dk4d654tvxhl5", "id": "l2sw1_1", "name": "l2sw1_1"}, {"connect": "edge_lhaep2k8vhx64z7cubc", "id": "l2sw1_2", "name": "l2sw1_2"}], "position": {"x": 220.05523484856238, "y": 85.46609972096313}}, {"classes": ["host"], "config": {"default_gw": "", "label": "host_1", "type": "host"}, "data": {"id": "host_1", "label": "host_1"}, "interface": [{"connect": "edge_lhaep1dk4d654tvxhl5", "id": "iface_6634026", "ip": "10.0.0.1", "name": "iface_6634026", "netmask": 24}], "position": {"x": 154.85945194154408, "y": 160.38941060646175}}, {"classes": ["host"], "config": {"default_gw": "", "label": "host_3", "type": "host"}, "data": {"id": "host_3", "label": "host_3"}, "interface": [{"connect": "edge_lhaep2k8vhx64z7cubc", "id": "iface_7628183", "ip": "10.0.0.2", "name": "iface_7628183", "netmask": 24}], "position": {"x": 282.36479340929543, "y": 160.38089132041563}}]');
    const edges = JSON.parse('[{"data": {"id": "edge_lhaep1dk4d654tvxhl5", "source": "host_1", "target": "l2sw1"}}, {"data": {"id": "edge_lhaep2k8vhx64z7cubc", "source": "l2sw1", "target": "host_3"}}]');
    var jobs = JSON.parse('[{"id": "5b4193eefc5e4bf5a0ec03d287f62b80", "level": 0, "job_id": 1, "host_id": "host_1", "arg_1": "10.0.0.2", "print_cmd": "ping -c 1 10.0.0.2"}]');
    var packets = JSON.parse('[[{"data": {"id": "pkt_G09AFC4L", "label": "ARP-request", "type": "packet"}, "config": {"type": "ARP-request", "path": "edge_lhaep1dk4d654tvxhl5", "source": "host_1", "target": "l2sw1"}, "timestamp": "1683282739671808"}], [{"data": {"id": "pkt_MM7U6MQB", "label": "ARP-request", "type": "packet"}, "config": {"type": "ARP-request", "path": "edge_lhaep2k8vhx64z7cubc", "source": "l2sw1", "target": "host_3"}, "timestamp": "1683282739686887"}], [{"data": {"id": "pkt_D8TBGL1D", "label": "ARP-response", "type": "packet"}, "config": {"type": "ARP-response", "path": "edge_lhaep2k8vhx64z7cubc", "source": "host_3", "target": "l2sw1"}, "timestamp": "1683282739701950"}], [{"data": {"id": "pkt_D51CRKUA", "label": "ARP-response", "type": "packet"}, "config": {"type": "ARP-response", "path": "edge_lhaep1dk4d654tvxhl5", "source": "l2sw1", "target": "host_1"}, "timestamp": "1683282739717026"}], [{"data": {"id": "pkt_2X7HMBD9", "label": "ICMP echo-request\\n10.0.0.1 > 10.0.0.2", "type": "packet"}, "config": {"type": "ICMP echo-request\\n10.0.0.1 > 10.0.0.2", "path": "edge_lhaep1dk4d654tvxhl5", "source": "host_1", "target": "l2sw1"}, "timestamp": "1683282739732096"}], [{"data": {"id": "pkt_UPUQXZZW", "label": "ICMP echo-request\\n10.0.0.1 > 10.0.0.2", "type": "packet"}, "config": {"type": "ICMP echo-request\\n10.0.0.1 > 10.0.0.2", "path": "edge_lhaep2k8vhx64z7cubc", "source": "l2sw1", "target": "host_3"}, "timestamp": "1683282739747163"}], [{"data": {"id": "pkt_WSJOYE9F", "label": "ICMP echo-reply\\n10.0.0.2 > 10.0.0.1", "type": "packet"}, "config": {"type": "ICMP echo-reply\\n10.0.0.2 > 10.0.0.1", "path": "edge_lhaep2k8vhx64z7cubc", "source": "host_3", "target": "l2sw1"}, "timestamp": "1683282739762258"}], [{"data": {"id": "pkt_RI2K22SO", "label": "ICMP echo-reply\\n10.0.0.2 > 10.0.0.1", "type": "packet"}, "config": {"type": "ICMP echo-reply\\n10.0.0.2 > 10.0.0.1", "path": "edge_lhaep1dk4d654tvxhl5", "source": "l2sw1", "target": "host_1"}, "timestamp": "1683282739777312"}]]');
    var ns = null;

    PacketPlayer.getInstance().InitPlayer(packets);
    global_cy = DrawIndexGraphStatic(nodes, edges, "index_network_example", graph_network_zoom, graph_network_pan_x, graph_network_pan_y);
    PacketPlayer.getInstance().StartPlayer(global_cy);

    document.getElementById("index_network_example").onclick = function(){
        window.open('https://miminet.ru/web_network_shared?guid=d9012b77-fd52-48b0-b618-a3c3f55caf15', '_blank');
    }

</script>
{% endblock %}

