From bd2afd04cc31c61768e9b0a2f38d5ad323b0824d Mon Sep 17 00:00:00 2001
From: Wesley Ribeiro <wesle202@gmail.com>
Date: Tue, 14 Oct 2025 07:07:24 -0300
Subject: [PATCH] refactor(page-tutorials): reverse the sequence of sections
 and add topic authentication to the platform

---
 docs/en/tutoriais.html | 215 +++++++++++++++++++++--------------------
 docs/tutoriais.html    | 207 ++++++++++++++++++++-------------------
 2 files changed, 215 insertions(+), 207 deletions(-)

diff --git a/docs/en/tutoriais.html b/docs/en/tutoriais.html
index fdb1e12..2c08cfc 100644
--- a/docs/en/tutoriais.html
+++ b/docs/en/tutoriais.html
@@ -47,113 +47,116 @@
                 </ul>
             </nav>
             <nav class="menu-idiomas">
-               <ul class="menu-idiomas">
-                    <li>
-                      <a href="/tutoriais.html" class="pt">
-                         <img src="/assets/img/br.png" alt="Portuguese" class="bandeira">
-                      </a>
-                    </li>
-                    <li>
-                    </li>
-               </ul>
-            </nav>
-          </header>
+             <ul class="menu-idiomas">
+                <li>
+                  <a href="/tutoriais.html" class="pt">
+                   <img src="/assets/img/br.png" alt="Portuguese" class="bandeira">
+               </a>
+           </li>
+           <li>
+           </li>
+       </ul>
+   </nav>
+</header>
+</div>
+<section class="tutorial-section">
+    <h2>INSTALLATION AND TUTORIALS</h2>
+    <section class="demo-section">
+        <div class="demo-item">
+            <div class="demo-title" onclick="toggleVideo('video0')">
+                <span>Autentication in plataform</span>
+                <span class="arrow">▼</span>
+            </div>
+            <div id="video0" class="demo-video">
+                <iframe width="560" height="315" src="https://www.youtube.com/embed/ZhgZV3x03Yw" frameborder="0" allowfullscreen></iframe>
+            </div>
         </div>
-        <section class="tutorial-section">
-            <h2>INSTALLATION AND TUTORIALS</h2>
-            <div class="tutorial-container">
-                <div class="tutorial-card">
-                    <img src="/assets/img/11.png" alt="Kytos-ng Logo">
-                    <a href="tutorial_kytos.html">Kytos Installation Tutorial</a>
-                </div>
-                <div class="tutorial-card">
-                    <img src="/assets/img/12.png" alt="MongoDB Logo">
-                    <a href="tutorial_mongodb.html">Configuring MongoDB</a>
-                </div>
-                <div class="tutorial-card">
-                    <img src="/assets/img/13.png" alt="Lock Icon">
-                    <a href="tutorial_contencao.html">Contention Block Tests<br>(Block Action)</a>
-                </div>
-                <div class="tutorial-card">
-                    <img src="/assets/img/16.png" alt="MISP Logo">
-                    <a href="tutorial_misp.html">MISP Module Tutorial</a>
-                </div>
-                <div class="tutorial-card">
-                    <img src="/assets/img/15.png" alt="MnSec Logo">
-                    <a href="tutorial_mnsec.html">Activating Mininet-sec</a>
-                </div>
-                <div class="tutorial-card">
-                    <img src="/assets/img/14.png" alt="Suricata Logo">
-                    <a href="tutorial_mnsec_suricata.html">Execution and Attack Detection with MnSec and Suricata</a>
-                </div>
+        <div class="demo-item">
+            <div class="demo-title" onclick="toggleVideo('video1')">
+                <span>HackInSDN Demonstration - Integrated Components</span>
+                <span class="arrow">▼</span>
             </div>
-
-            <section class="demo-section">
-                <div class="demo-item">
-                    <div class="demo-title" onclick="toggleVideo('video1')">
-                        <span>HackInSDN Demonstration - Integrated Components</span>
-                        <span class="arrow">▼</span>
-                    </div>
-                    <div id="video1" class="demo-video">
-                        <iframe width="560" height="315" src="https://www.youtube.com/embed/gXD2FcBjGuk" frameborder="0" allowfullscreen></iframe>
-                    </div>
-                </div>
-                <div class="demo-item">
-                    <div class="demo-title" onclick="toggleVideo('video2')">
-                        <span>Mininet-Sec Usage Demonstration</span>
-                        <span class="arrow">▼</span>
-                    </div>
-                    <div id="video2" class="demo-video">
-                        <iframe width="560" height="315" src="https://www.youtube.com/embed/cuHZMSPIQdw" frameborder="0" allowfullscreen></iframe>
-                    </div>
-                </div>
-                <div class="demo-item">
-                    <div class="demo-title" onclick="toggleVideo('video3')">
-                        <span>Contention Napp on Kytos</span>
-                        <span class="arrow">▼</span>
-                    </div>
-                    <div id="video3" class="demo-video">
-                        <iframe width="560" height="315" src="https://www.youtube.com/embed/kb9F3WKWsSc" frameborder="0" allowfullscreen></iframe>
-                    </div>
-                </div>
-                <div class="demo-item">
-                    <div class="demo-title" onclick="toggleVideo('video4')">
-                        <span>MISP Suricata</span>
-                        <span class="arrow">▼</span>
-                    </div>
-                    <div id="video4" class="demo-video">
-                        <iframe width="560" height="315" src="https://www.youtube.com/embed/IxJ4zsGYDgY" frameborder="0" allowfullscreen></iframe>
-                    </div>
-                </div> <!-- End of the first item -->
-                
-                <div class="demo-item">
-                    <div class="demo-title" onclick="toggleVideo('video5')">
-                        <span>Using HackInSDN Dashboard for Security and Networking Experiments</span>
-                        <span class="arrow">▼</span>
-                    </div>
-                    <div id="video5" class="demo-video">
-                        <a href="https://www.youtube.com/watch?v=o5lC5tBhZM0">
-                            <img src="https://img.youtube.com/vi/o5lC5tBhZM0/0.jpg" alt="Click to watch the video on YouTube">
-                        </a>
-                    </div>
-                    
-                </div> <!-- End of the second item -->
-                
-                <div class="demo-item">
-                    <div class="demo-title" onclick="toggleVideo('video6')">
-                        <span>Creating Labs on HackInSDN Dashboard - For Teachers</span>
-                        <span class="arrow">▼</span>
-                    </div>
-                    <div id="video6" class="demo-video">
-                        <a href="https://www.youtube.com/watch?v=YKb_MtTeZ1k">
-                            <img src="https://img.youtube.com/vi/YKb_MtTeZ1k/0.jpg" alt="Click to watch the video on YouTube">
-                        </a>
-                    </div>
-                    
-                </div> <!-- End of the third item -->
-                
-            </section>            
-        </section>
-    </div>
+            <div id="video1" class="demo-video">
+                <iframe width="560" height="315" src="https://www.youtube.com/embed/gXD2FcBjGuk" frameborder="0" allowfullscreen></iframe>
+            </div>
+        </div>
+        <div class="demo-item">
+            <div class="demo-title" onclick="toggleVideo('video6')">
+                <span>Creating Labs on HackInSDN Dashboard - For Teachers</span>
+                <span class="arrow">▼</span>
+            </div>
+            <div id="video6" class="demo-video">
+                <a href="https://www.youtube.com/watch?v=YKb_MtTeZ1k">
+                    <img src="https://img.youtube.com/vi/YKb_MtTeZ1k/0.jpg" alt="Click to watch the video on YouTube">
+                </a>
+            </div>
+        </div> <!-- End of the second item -->
+        <div class="demo-item">
+            <div class="demo-title" onclick="toggleVideo('video5')">
+                <span>Using HackInSDN Dashboard for Security and Networking Experiments</span>
+                <span class="arrow">▼</span>
+            </div>
+            <div id="video5" class="demo-video">
+                <a href="https://www.youtube.com/watch?v=o5lC5tBhZM0">
+                    <img src="https://img.youtube.com/vi/o5lC5tBhZM0/0.jpg" alt="Click to watch the video on YouTube">
+                </a>
+            </div>
+        </div> <!-- End of the second item -->
+        <div class="demo-item">
+            <div class="demo-title" onclick="toggleVideo('video2')">
+                <span>Mininet-Sec Usage Demonstration</span>
+                <span class="arrow">▼</span>
+            </div>
+            <div id="video2" class="demo-video">
+                <iframe width="560" height="315" src="https://www.youtube.com/embed/cuHZMSPIQdw" frameborder="0" allowfullscreen></iframe>
+            </div>
+        </div>
+        <div class="demo-item">
+            <div class="demo-title" onclick="toggleVideo('video3')">
+                <span>Contention Napp on Kytos</span>
+                <span class="arrow">▼</span>
+            </div>
+            <div id="video3" class="demo-video">
+                <iframe width="560" height="315" src="https://www.youtube.com/embed/kb9F3WKWsSc" frameborder="0" allowfullscreen></iframe>
+            </div>
+        </div>
+        <div class="demo-item">
+            <div class="demo-title" onclick="toggleVideo('video4')">
+                <span>MISP Suricata</span>
+                <span class="arrow">▼</span>
+            </div>
+            <div id="video4" class="demo-video">
+                <iframe width="560" height="315" src="https://www.youtube.com/embed/IxJ4zsGYDgY" frameborder="0" allowfullscreen></iframe>
+            </div>
+        </div> <!-- End of the first item -->
+    </section> 
+    <div class="tutorial-container">
+        <div class="tutorial-card">
+            <img src="/assets/img/11.png" alt="Kytos-ng Logo">
+            <a href="tutorial_kytos.html">Kytos Installation Tutorial</a>
+        </div>
+        <div class="tutorial-card">
+            <img src="/assets/img/12.png" alt="MongoDB Logo">
+            <a href="tutorial_mongodb.html">Configuring MongoDB</a>
+        </div>
+        <div class="tutorial-card">
+            <img src="/assets/img/13.png" alt="Lock Icon">
+            <a href="tutorial_contencao.html">Contention Block Tests<br>(Block Action)</a>
+        </div>
+        <div class="tutorial-card">
+            <img src="/assets/img/16.png" alt="MISP Logo">
+            <a href="tutorial_misp.html">MISP Module Tutorial</a>
+        </div>
+        <div class="tutorial-card">
+            <img src="/assets/img/15.png" alt="MnSec Logo">
+            <a href="tutorial_mnsec.html">Activating Mininet-sec</a>
+        </div>
+        <div class="tutorial-card">
+            <img src="/assets/img/14.png" alt="Suricata Logo">
+            <a href="tutorial_mnsec_suricata.html">Execution and Attack Detection with MnSec and Suricata</a>
+        </div>
+    </div>           
+</section>
+</div>
 </body>
 </html>
diff --git a/docs/tutoriais.html b/docs/tutoriais.html
index 325bbf8..e5c3cb1 100644
--- a/docs/tutoriais.html
+++ b/docs/tutoriais.html
@@ -39,11 +39,11 @@
                 </div>
                 <nav>
                     <ul>
-                    <li><a href="/">Início</a></li>
-                    <li><a href="/sobre.html">Sobre Nós</a></li>
-                    <li><a href="/tutoriais.html">Tutoriais</a></li>
-                    <li><a href="/publicacoes.html">Publicações</a></li>
-                    <li><a href="/dashboard">Dashboard</a></li>
+                        <li><a href="/">Início</a></li>
+                        <li><a href="/sobre.html">Sobre Nós</a></li>
+                        <li><a href="/tutoriais.html">Tutoriais</a></li>
+                        <li><a href="/publicacoes.html">Publicações</a></li>
+                        <li><a href="/dashboard">Dashboard</a></li>
                     </ul>
                 </nav>
                 <nav class="menu-idiomas">
@@ -53,105 +53,110 @@
                         <li>
                           <a href="en/tutoriais.html" class="en ativo">
                             <img src="/assets/img/us.png" alt="English" class="bandeira">
-                          </a>
-                        </li>
-                    </ul>
-                </nav>
-            </header>
-        </div>
-        <section class="tutorial-section">
-            <h2>INSTALAÇÃO E TUTORIAIS</h2>
-            <div class="tutorial-container">
-                <div class="tutorial-card">
-                    <img src="/assets/img/11.png" alt="Logotipo do Kytos-ng">
-                    <a href="tutorial_kytos.html">Tutorial de Instalação do Kytos</a>
-                </div>
-                <div class="tutorial-card">
-                    <img src="/assets/img/12.png" alt="Logotipo do MongoDB">
-                    <a href="tutorial_mongodb.html">Configurando MongoDB</a>
-                </div>
-                <div class="tutorial-card">
-                    <img src="/assets/img/13.png" alt="Ícone de Cadeado">
-                    <a href="tutorial_contencao.html">Testes de Bloqueio de Contenção<br>(Ação de Bloqueio)</a>
-                </div>
-                <div class="tutorial-card">
-                    <img src="/assets/img/16.png" alt="Logotipo do MISP">
-                    <a href="tutorial_misp.html">Tutorial do Módulo MISP</a>
-                </div>
-                <div class="tutorial-card">
-                    <img src="/assets/img/15.png" alt="Logotipo do MnSec">
-                    <a href="tutorial_mnsec.html">Ativando Mininet-sec</a>
+                        </a>
+                    </li>
+                </ul>
+            </nav>
+        </header>
+    </div>
+    <section class="tutorial-section">
+        <h2>INSTALAÇÃO E TUTORIAIS</h2>
+        <section class="demo-section">
+            <div class="demo-item">
+              <div class="demo-item">
+                <div class="demo-title" onclick="toggleVideo('video0')">
+                    <span>Autenticação na plataforma</span>
+                    <span class="arrow">▼</span>
                 </div>
-                <div class="tutorial-card">
-                    <img src="/assets/img/14.png" alt="Logotipo do Suricata">
-                    <a href="tutorial_mnsec_suricata.html">Execução e Detecção de Ataques com Mnsec e Suricata</a>
+                <div id="video0" class="demo-video">
+                    <iframe width="560" height="315" src="https://www.youtube.com/embed/ZhgZV3x03Yw" frameborder="0" allowfullscreen></iframe>
                 </div>
             </div>
-
-            <section class="demo-section">
-                <div class="demo-item">
-                    <div class="demo-title" onclick="toggleVideo('video1')">
-                        <span>Demonstração HackInSDN - Componentes Integrados</span>
-                        <span class="arrow">▼</span>
-                    </div>
-                    <div id="video1" class="demo-video">
-                        <iframe width="560" height="315" src="https://www.youtube.com/embed/gXD2FcBjGuk" frameborder="0" allowfullscreen></iframe>
-                    </div>
-                </div>
-                <div class="demo-item">
-                    <div class="demo-title" onclick="toggleVideo('video2')">
-                        <span>Demonstração de Uso do Mininet-Sec</span>
-                        <span class="arrow">▼</span>
-                    </div>
-                    <div id="video2" class="demo-video">
-                        <iframe width="560" height="315" src="https://www.youtube.com/embed/cuHZMSPIQdw" frameborder="0" allowfullscreen></iframe>
-                    </div>
-                </div>
-                <div class="demo-item">
-                    <div class="demo-title" onclick="toggleVideo('video3')">
-                        <span>Contention Napp no Kytos</span>
-                        <span class="arrow">▼</span>
-                    </div>
-                    <div id="video3" class="demo-video">
-                        <iframe width="560" height="315" src="https://www.youtube.com/embed/kb9F3WKWsSc" frameborder="0" allowfullscreen></iframe>
-                    </div>
-                </div>
-                <div class="demo-item">
-                    <div class="demo-title" onclick="toggleVideo('video4')">
-                        <span>MISP Suricata</span>
-                        <span class="arrow">▼</span>
-                    </div>
-                    <div id="video4" class="demo-video">
-                        <iframe width="560" height="315" src="https://www.youtube.com/embed/IxJ4zsGYDgY" frameborder="0" allowfullscreen></iframe>
-                    </div>
-                </div> <!-- Fim do primeiro item -->
-                
-                <div class="demo-item">
-                    <div class="demo-title" onclick="toggleVideo('video5')">
-                        <span>Utilizando o Dashboard HackInSDN para executar experimentos de Segurança e Redes</span>
-                        <span class="arrow">▼</span>
-                    </div>
-                    <div id="video5" class="demo-video">
-                        <a href="https://www.youtube.com/watch?v=o5lC5tBhZM0">
-                            <img src="https://img.youtube.com/vi/o5lC5tBhZM0/0.jpg" alt="Clique para assistir ao vídeo no YouTube">
-                        </a>
-                    </div>                    
-                    
-                </div> <!-- Fim do segundo item -->
-                
-                <div class="demo-item">
-                    <div class="demo-title" onclick="toggleVideo('video6')">
-                        <span>Criação de laboratórios no Dashboard HackInSDN - Para professores</span>
-                        <span class="arrow">▼</span>
-                    </div>
-                    <div id="video6" class="demo-video">
-                        <a href="https://www.youtube.com/watch?v=YKb_MtTeZ1k">
-                            <img src="https://img.youtube.com/vi/YKb_MtTeZ1k/0.jpg" alt="Clique para assistir ao vídeo no YouTube">
-                        </a>
-                    </div>
-                </div> <!-- Fim do terceiro item -->
-            </section>
-        </section>
+            <div class="demo-title" onclick="toggleVideo('video1')">
+                <span>Demonstração HackInSDN - Componentes Integrados</span>
+                <span class="arrow">▼</span>
+            </div>
+            <div id="video1" class="demo-video">
+                <iframe width="560" height="315" src="https://www.youtube.com/embed/gXD2FcBjGuk" frameborder="0" allowfullscreen></iframe>
+            </div>
+        </div>
+        <div class="demo-item">
+            <div class="demo-title" onclick="toggleVideo('video6')">
+                <span>Criação de laboratórios no Dashboard HackInSDN - Para professores</span>
+                <span class="arrow">▼</span>
+            </div>
+            <div id="video6" class="demo-video">
+                <a href="https://www.youtube.com/watch?v=YKb_MtTeZ1k">
+                    <img src="https://img.youtube.com/vi/YKb_MtTeZ1k/0.jpg" alt="Clique para assistir ao vídeo no YouTube">
+                </a>
+            </div>
+        </div> <!-- Fim do segundo item-->
+        <div class="demo-item">
+            <div class="demo-title" onclick="toggleVideo('video5')">
+                <span>Utilizando o Dashboard HackInSDN para executar experimentos de Segurança e Redes</span>
+                <span class="arrow">▼</span>
+            </div>
+            <div id="video5" class="demo-video">
+                <a href="https://www.youtube.com/watch?v=o5lC5tBhZM0">
+                    <img src="https://img.youtube.com/vi/o5lC5tBhZM0/0.jpg" alt="Clique para assistir ao vídeo no YouTube">
+                </a>
+            </div>                    
+        </div> <!-- Fim do terceiro item -->
+        <div class="demo-item">
+            <div class="demo-title" onclick="toggleVideo('video2')">
+                <span>Demonstração de Uso do Mininet-Sec</span>
+                <span class="arrow">▼</span>
+            </div>
+            <div id="video2" class="demo-video">
+                <iframe width="560" height="315" src="https://www.youtube.com/embed/cuHZMSPIQdw" frameborder="0" allowfullscreen></iframe>
+            </div>
+        </div>
+        <div class="demo-item">
+            <div class="demo-title" onclick="toggleVideo('video3')">
+                <span>Contention Napp no Kytos</span>
+                <span class="arrow">▼</span>
+            </div>
+            <div id="video3" class="demo-video">
+                <iframe width="560" height="315" src="https://www.youtube.com/embed/kb9F3WKWsSc" frameborder="0" allowfullscreen></iframe>
+            </div>
+        </div>
+        <div class="demo-item">
+            <div class="demo-title" onclick="toggleVideo('video4')">
+                <span>MISP Suricata</span>
+                <span class="arrow">▼</span>
+            </div>
+            <div id="video4" class="demo-video">
+                <iframe width="560" height="315" src="https://www.youtube.com/embed/IxJ4zsGYDgY" frameborder="0" allowfullscreen></iframe>
+            </div>
+        </div> <!-- Fim do primeiro item -->
+    </section>
+    <div class="tutorial-container">
+        <div class="tutorial-card">
+            <img src="/assets/img/11.png" alt="Logotipo do Kytos-ng">
+            <a href="tutorial_kytos.html">Tutorial de Instalação do Kytos</a>
+        </div>
+        <div class="tutorial-card">
+            <img src="/assets/img/12.png" alt="Logotipo do MongoDB">
+            <a href="tutorial_mongodb.html">Configurando MongoDB</a>
+        </div>
+        <div class="tutorial-card">
+            <img src="/assets/img/13.png" alt="Ícone de Cadeado">
+            <a href="tutorial_contencao.html">Testes de Bloqueio de Contenção<br>(Ação de Bloqueio)</a>
+        </div>
+        <div class="tutorial-card">
+            <img src="/assets/img/16.png" alt="Logotipo do MISP">
+            <a href="tutorial_misp.html">Tutorial do Módulo MISP</a>
+        </div>
+        <div class="tutorial-card">
+            <img src="/assets/img/15.png" alt="Logotipo do MnSec">
+            <a href="tutorial_mnsec.html">Ativando Mininet-sec</a>
+        </div>
+        <div class="tutorial-card">
+            <img src="/assets/img/14.png" alt="Logotipo do Suricata">
+            <a href="tutorial_mnsec_suricata.html">Execução e Detecção de Ataques com Mnsec e Suricata</a>
+        </div>
     </div>
+</section>
+</div>
 </body>
 </html>