From c7b37b92974a030da6decb098891dae16e1967b4 Mon Sep 17 00:00:00 2001
From: Alexander Abakumov <alexander.abakumov@softline.com>
Date: Wed, 10 Sep 2025 00:15:42 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D1=8B=20=D0=BF=D0=BE=D0=BB=D0=BD=D0=BE=D1=86=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=BD=D1=8B=D0=B5=20=D0=B8=D0=BD=D1=82=D0=B5=D1=80=D0=B0?=
 =?UTF-8?q?=D0=BA=D1=82=D0=B8=D0=B2=D0=BD=D1=8B=D0=B5=20=D0=B2=D0=BA=D0=BB?=
 =?UTF-8?q?=D0=B0=D0=B4=D0=BA=D0=B8=20=D0=B4=D0=BB=D1=8F=20=D0=B2=D1=81?=
 =?UTF-8?q?=D0=B5=D1=85=20=D0=BF=D1=80=D0=B8=D0=BC=D0=B5=D1=80=D0=BE=D0=B2?=
 =?UTF-8?q?=20=D0=BA=D0=BE=D0=B4=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Созданы вкладки для SQL vs NoSQL примеров (Java, Rust, JavaScript, Python)
- Добавлены вкладки для REST vs GraphQL примеров (Java, Rust, JavaScript, Python)
- Реализованы вкладки для стратегий кэширования (Java, Rust, JavaScript, Python)
- Улучшена навигация и структура всех блоков примеров кода
- Все вкладки работают независимо с единым стилем GitHub
---
 ...2-introduction-to-software-architecture.md | 91 +++++++++++--------
 1 file changed, 55 insertions(+), 36 deletions(-)

diff --git a/modules/module1/sections/02-introduction-to-software-architecture.md b/modules/module1/sections/02-introduction-to-software-architecture.md
index ec285b5..b41d0f1 100644
--- a/modules/module1/sections/02-introduction-to-software-architecture.md
+++ b/modules/module1/sections/02-introduction-to-software-architecture.md
@@ -353,12 +353,15 @@ async def create_order(request: CreateOrderRequest):
 
 #### Примеры реализации
 
-**Выберите язык программирования:**
-- [Java (Spring Boot + JPA)](#java-sql) | [Rust (SQLx)](#rust-sql) | [JavaScript (Node.js)](#javascript-sql) | [Python (SQLAlchemy)](#python-sql)
-
----
-
-### Java (Spring Boot + JPA) {#java-sql}
+<div class="tabs">
+  <div class="tab-buttons">
+    <button class="tab-btn active" onclick="showTab('sql-java', this)">Java</button>
+    <button class="tab-btn" onclick="showTab('sql-rust', this)">Rust</button>
+    <button class="tab-btn" onclick="showTab('sql-js', this)">JavaScript</button>
+    <button class="tab-btn" onclick="showTab('sql-python', this)">Python</button>
+  </div>
+  
+  <div id="sql-java" class="tab-content active">
 
 ```java
 // SQL подход (PostgreSQL)
@@ -417,8 +420,9 @@ public class MongoUser {
     }
 }
 ```
-
-### Rust (SQLx) {#rust-sql}
+  </div>
+  
+  <div id="sql-rust" class="tab-content">
 
 ```rust
 // SQL подход (PostgreSQL)
@@ -499,8 +503,9 @@ async fn create_user_with_order(
     Ok(user)
 }
 ```
-
-### JavaScript (Node.js) {#javascript-sql}
+  </div>
+  
+  <div id="sql-js" class="tab-content">
 
 ```javascript
 // SQL подход (PostgreSQL)
@@ -588,8 +593,9 @@ async function createUserWithOrderMongo(request) {
     return await user.save();
 }
 ```
-
-### Python (SQLAlchemy) {#python-sql}
+  </div>
+  
+  <div id="sql-python" class="tab-content">
 
 ```python
 # SQL подход (PostgreSQL)
@@ -665,6 +671,8 @@ def create_user_with_order_mongo(request):
     user['_id'] = result.inserted_id
     return user
 ```
+  </div>
+</div>
 
 ### 3. REST vs GraphQL
 
@@ -705,12 +713,15 @@ def create_user_with_order_mongo(request):
 
 #### Примеры реализации
 
-**Выберите язык программирования:**
-- [Java (Spring Boot)](#java-rest) | [Rust (Actix Web)](#rust-rest) | [JavaScript (Node.js)](#javascript-rest) | [Python (FastAPI)](#python-rest)
-
----
-
-### Java (Spring Boot) {#java-rest}
+<div class="tabs">
+  <div class="tab-buttons">
+    <button class="tab-btn active" onclick="showTab('rest-java', this)">Java</button>
+    <button class="tab-btn" onclick="showTab('rest-rust', this)">Rust</button>
+    <button class="tab-btn" onclick="showTab('rest-js', this)">JavaScript</button>
+    <button class="tab-btn" onclick="showTab('rest-python', this)">Python</button>
+  </div>
+  
+  <div id="rest-java" class="tab-content active">
 
 ```java
 // REST API
@@ -738,8 +749,9 @@ public class UserResolver implements GraphQLResolver<User> {
     }
 }
 ```
-
-### Rust (Actix Web) {#rust-rest}
+  </div>
+  
+  <div id="rest-rust" class="tab-content">
 
 ```rust
 // REST API
@@ -775,8 +787,9 @@ const resolvers = {
     }
 };
 ```
-
-### JavaScript (Node.js) {#javascript-rest}
+  </div>
+  
+  <div id="rest-js" class="tab-content">
 
 ```javascript
 // REST API
@@ -794,8 +807,9 @@ const resolvers = {
     }
 };
 ```
-
-### Python (FastAPI + Strawberry) {#python-rest}
+  </div>
+  
+  <div id="rest-python" class="tab-content">
 
 ```python
 # REST API
@@ -811,6 +825,8 @@ class User:
     async def orders(self) -> List[Order]:
         return await order_service.find_by_user_id(self.id)
 ```
+  </div>
+</div>
 
 ### 4. Стратегии кэширования
 
@@ -1011,12 +1027,15 @@ class User:
 
 #### Примеры реализации
 
-**Выберите язык программирования:**
-- [Java (Spring Boot + Redis)](#java-cache) | [Rust (Redis + Tokio)](#rust-cache) | [JavaScript (Node.js + Redis)](#javascript-cache) | [Python (FastAPI + Redis)](#python-cache)
-
----
-
-### Java (Spring Boot + Redis) {#java-cache}
+<div class="tabs">
+  <div class="tab-buttons">
+    <button class="tab-btn active" onclick="showTab('cache-java', this)">Java</button>
+    <button class="tab-btn" onclick="showTab('cache-rust', this)">Rust</button>
+    <button class="tab-btn" onclick="showTab('cache-js', this)">JavaScript</button>
+    <button class="tab-btn" onclick="showTab('cache-python', this)">Python</button>
+  </div>
+  
+  <div id="cache-java" class="tab-content active">
 
 ```java
 // Cache-Aside Pattern
@@ -1073,8 +1092,8 @@ public class UserServiceWriteThrough {
 }
 ```
   </div>
-
-  <div id="rust-cache" class="tab-content">
+  
+  <div id="cache-rust" class="tab-content">
 
 ```rust
 // Cache-Aside Pattern
@@ -1133,8 +1152,8 @@ impl UserService {
 }
 ```
   </div>
-
-  <div id="javascript-cache" class="tab-content">
+  
+  <div id="cache-js" class="tab-content">
 
 ```javascript
 // Cache-Aside Pattern
@@ -1209,8 +1228,8 @@ class UserServiceWriteBehind {
 }
 ```
   </div>
-
-  <div id="python-cache" class="tab-content">
+  
+  <div id="cache-python" class="tab-content">
 
 ```python
 # Cache-Aside Pattern