From b894c69cd86fd9a8466c06c8a9bb78fdcd616d35 Mon Sep 17 00:00:00 2001 From: Dauren777 Date: Fri, 19 Jun 2026 06:53:23 +0000 Subject: [PATCH] tabs --- index.html | 351 ++++++++++++++++++++++++++++------------------------- 1 file changed, 188 insertions(+), 163 deletions(-) diff --git a/index.html b/index.html index 2542088..389cff6 100644 --- a/index.html +++ b/index.html @@ -18,16 +18,19 @@ body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,s .hero h1{font-size:56px;font-weight:800;line-height:1.05;margin-bottom:20px;max-width:800px} .hero h1 span{color:var(--cyan)} .hero p{font-size:20px;color:var(--gray-300);max-width:600px;margin-bottom:40px;line-height:1.5} -.hero .btns{display:flex;gap:16px;flex-wrap:wrap} -.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--cyan);color:var(--ink);padding:14px 32px;border-radius:8px;font-weight:700;font-size:16px;text-decoration:none;transition:.2s} -.btn-primary:hover{background:#33ebff;transform:translateY(-1px)} -.btn-secondary{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--white);padding:14px 32px;border-radius:8px;font-weight:600;font-size:16px;text-decoration:none;border:1px solid var(--gray-600);transition:.2s} -.btn-secondary:hover{border-color:var(--cyan);color:var(--cyan)} + +/* Tab bar */ +.tab-bar{display:flex;gap:4px;flex-wrap:wrap;background:var(--gray-800);border-radius:12px;padding:4px;max-width:720px;border:1px solid var(--gray-600)} +.tab-btn{flex:1;min-width:120px;padding:12px 20px;border:none;background:transparent;color:var(--gray-300);font-size:14px;font-weight:600;border-radius:8px;cursor:pointer;transition:.2s;text-align:center} +.tab-btn:hover{color:var(--white)} +.tab-btn.active{background:var(--cyan);color:var(--ink)} .scroll-down{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);color:var(--gray-300);font-size:13px;letter-spacing:1px;text-transform:uppercase;animation:bounce 2s infinite} @keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}} -/* Sections */ -.section{padding:100px 0;border-top:1px solid var(--gray-800)} +/* Tabs content */ +.tab-content{display:none;padding:80px 0 0} +.tab-content.active{display:block} + .section-header{text-align:center;margin-bottom:64px} .section-header .num{display:inline-block;font-size:12px;font-weight:700;color:var(--cyan);letter-spacing:2px;text-transform:uppercase;margin-bottom:12px} .section-header h2{font-size:40px;font-weight:800;margin-bottom:16px} @@ -69,194 +72,193 @@ body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,s .container{padding:48px 20px} .hero h1{font-size:36px} .hero p{font-size:17px} - .section{padding:60px 0} + .tab-content{padding:48px 0 0} .section-header h2{font-size:30px} .two-col{grid-template-columns:1fr;gap:32px} .two-col.reverse{direction:ltr} .cards{grid-template-columns:1fr;gap:16px} - .hero .btns{flex-direction:column} + .tab-btn{min-width:80px;font-size:12px;padding:10px 12px} .cta h2{font-size:28px} } +
NetAcademy v1.0

Обучение сетевым технологиям

Программирование, волоконная оптика и сетевое оборудование — от основ до продвинутого уровня. Всё, что нужно для работы в телекоме.

-
- Начать обучение → - Оборудование +
+ + + +
- +
-
-
-
-
01
-

Программирование

-

Кодирование для сетевых инженеров: автоматизация, скрипты, API

-
-
-
-

Python для сетей

-

Автоматизация конфигураций, парсинг логов, работа с NETCONF/YANG, Jinja2 шаблоны — всё, что нужно для network automation.

-
    -
  • Основы Python: типы данных, функции, модули
    • -
  • Pexpect, Paramiko, Netmiko — SSH управление
    • -
  • Jinja2 — генерация конфигураций
    • -
  • REST API, NETCONF, gRPC — программное управление
    • -
  • Ansible для сетевых инженеров
    • -
-
-
- 🐍 -
- # Jinja2 template example
- from jinja2 import Environment, FileSystemLoader

- config = template.render(
-   interfaces=interfaces,
-   vlan="vlan1793"
- ) -
-
-
-
-
+
-
-
-
-
02
-

Волоконная оптика

-

Оптические линии, SFP/XFP, DWDM, измерение и монтаж

+
+
+
01
+

Программирование

+

Кодирование для сетевых инженеров: автоматизация, скрипты, API

+
+
+
+

Python для сетей

+

Автоматизация конфигураций, парсинг логов, работа с NETCONF/YANG, Jinja2 шаблоны — всё, что нужно для network automation.

+
    +
  • Основы Python: типы данных, функции, модули
    • +
  • Pexpect, Paramiko, Netmiko — SSH управление
    • +
  • Jinja2 — генерация конфигураций
    • +
  • REST API, NETCONF, gRPC — программное управление
    • +
  • Ansible для сетевых инженеров
    • +
-
-
-

Оптика для связи

-

Физические принципы, типы волокон, оптические трансиверы, пассивные и активные компоненты ВОЛС.

-
    -
  • SMF и MMF: одномод и мультимод — различия
    • -
  • SFP, SFP+, XFP, QSFP28 — трансиверы и их параметры
    • -
  • Длина волны 1310нм, 1550нм — затухание и дальность
    • -
  • DWDM и CWDM — уплотнение каналов
    • -
  • OTDR — рефлектометр и измерение линии
    • -
  • Сварка и коннекторы (LC, SC, FC)
    • -
-
-
- 🔬 -
SMF 9/125 ⇄ SFP+ 10G 1310нм ⇄ 10км
-
-
-
-
- 📡 -

Трансиверы

-

SFP, SFP+, QSFP — подбор оптики под задачу

-
SFPSFP+QSFPCWDM
-
-
- 📏 -

Измерения

-

Затухание, отражения, бюджет мощности

-
OTDRPower MeterVFL
-
-
- 🔗 -

Монтаж

-

Сварка, коннекторы, пигтейлы, кроссовые

-
LCSCFCAPC
+
+ 🐍 +
+ # Jinja2 template example
+ from jinja2 import Environment, FileSystemLoader

+ config = template.render(
+   interfaces=interfaces,
+   vlan="vlan1793"
+ )
-
+
-
-
-
-
03
-

Оборудование

-

Работа с сетевым железом: настройка, диагностика, эксплуатация

+
+
+
02
+

Волоконная оптика

+

Оптические линии, SFP/XFP, DWDM, измерение и монтаж

+
+
+
+

Оптика для связи

+

Физические принципы, типы волокон, оптические трансиверы, пассивные и активные компоненты ВОЛС.

+
    +
  • SMF и MMF: одномод и мультимод — различия
    • +
  • SFP, SFP+, XFP, QSFP28 — трансиверы и их параметры
    • +
  • Длина волны 1310нм, 1550нм — затухание и дальность
    • +
  • DWDM и CWDM — уплотнение каналов
    • +
  • OTDR — рефлектометр и измерение линии
    • +
  • Сварка и коннекторы (LC, SC, FC)
    • +
-
-
-

MX104, Eltex и другие

-

Практические навыки работы с сетевым оборудованием ведущих вендоров от провайдерского класса до корпоративного.

-
    -
  • Juniper MX104 — маршрутизация, MPLS, BGP, firewall filters
    • -
  • Eltex MES/MES — настройка L2/L3 коммутаторов, VLAN, STP
    • -
  • Eltex MG — медиашлюзы, TDM over IP
    • -
  • D-Link, Cisco — базовые свитчи
    • -
  • GPON OLT/ONT — пассивные оптические сети
    • -
  • Диагностика — tcpdump, iperf, мониторинг
    • -
-
-
- ⚙️ -
- # Juniper MX104 — пример
- set interfaces ge-0/0/1 description "Client"
- set interfaces ge-0/0/1 unit 0 family inet
-   address 10.10.10.1/30

- set policy-options policy-statement EXPORT
-   term 10 from protocol bgp
-   term 10 then accept -
-
-
-
-
- 🔄 -

Juniper MX / SRX

-

JunOS — маршрутизация, MPLS, firewall, NAT

-
MX104JunOSBGPMPLS
-
-
- 🔀 -

Eltex

-

Коммутаторы MES, медиашлюзы MG, TA

-
MESMGL2/L3VLAN
-
-
- 🌐 -

GPON

-

OLT, ONT, оптические терминалы

-
GPONOLTONTFTTH
-
+
+ 🔬 +
SMF 9/125 ⇄ SFP+ 10G 1310нм ⇄ 10км
-
+
+
+ 📡 +

Трансиверы

+

SFP, SFP+, QSFP — подбор оптики под задачу

+
SFPSFP+QSFPCWDM
+
+
+ 📏 +

Измерения

+

Затухание, отражения, бюджет мощности

+
OTDRPower MeterVFL
+
+
+ 🔗 +

Монтаж

+

Сварка, коннекторы, пигтейлы, кроссовые

+
LCSCFCAPC
+
+
+ -
-
-
-
04
-

Формат обучения

-

Практические навыки для реальной работы в телекоме

+
+
+
03
+

Оборудование

+

Работа с сетевым железом: настройка, диагностика, эксплуатация

+
+
+
+

MX104, Eltex и другие

+

Практические навыки работы с сетевым оборудованием ведущих вендоров от провайдерского класса до корпоративного.

+
    +
  • Juniper MX104 — маршрутизация, MPLS, BGP, firewall filters
    • +
  • Eltex MES — настройка L2/L3 коммутаторов, VLAN, STP
    • +
  • Eltex MG — медиашлюзы, TDM over IP
    • +
  • D-Link, Cisco — базовые свитчи
    • +
  • GPON OLT/ONT — пассивные оптические сети
    • +
  • Диагностика — tcpdump, iperf, мониторинг
    • +
-
-
- 📖 -

Теория

-

Структурированные материалы от основ до экспертного уровня. Схемы, таблицы, примеры.

-
-
- 🔧 -

Практика

-

Лабораторные работы на реальных конфигах. Настройка, диагностика, отладка.

-
-
- ✅ -

Тесты

-

Проверка знаний после каждого модуля. Подготовка к сертификации.

+
+ ⚙️ +
+ # Juniper MX104 — пример
+ set interfaces ge-0/0/1 description "Client"
+ set interfaces ge-0/0/1 unit 0 family inet
+   address 10.10.10.1/30

+ set policy-options policy-statement EXPORT
+   term 10 from protocol bgp
+   term 10 then accept
-
+
+
+ 🔄 +

Juniper MX / SRX

+

JunOS — маршрутизация, MPLS, firewall, NAT

+
MX104JunOSBGPMPLS
+
+
+ 🔀 +

Eltex

+

Коммутаторы MES, медиашлюзы MG, TA

+
MESMGL2/L3VLAN
+
+
+ 🌐 +

GPON

+

OLT, ONT, оптические терминалы

+
GPONOLTONTFTTH
+
+
+ + +
+
+
04
+

Формат обучения

+

Практические навыки для реальной работы в телекоме

+
+
+
+ 📖 +

Теория

+

Структурированные материалы от основ до экспертного уровня. Схемы, таблицы, примеры.

+
+
+ 🔧 +

Практика

+

Лабораторные работы на реальных конфигах. Настройка, диагностика, отладка.

+
+
+ ✅ +

Тесты

+

Проверка знаний после каждого модуля. Подготовка к сертификации.

+
+
+
+ +
@@ -269,5 +271,28 @@ body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,s
NetAcademy © 2026 — Обучение сетевым технологиям
+ + +