Etherpad

_layouts/aulas.html

@@ -20,11 +20,14 @@ lang: pt
 							<a class="button" href="{{ site.baseurl }}{{ zip_file }}" download>
 								Download
 							</a>
+							<a class="button" id="etherpad" etherpad>
+								Etherpad
+							</a>
 					</div>
 				</div>
 			</div>
 								 
-			<div class=" ">
+			<div id="aula">
 				{% assign aula_slug = page.title %}
 				{% assign video_aula = '' | append: aula_slug | append: '.mp4' %}
 				<video controls class="aula-video">
@@ -33,6 +36,17 @@ lang: pt
 				</video>
 			</div>
 
+			<div id="etherpad-container" style="display: none;">
+				<iframe 
+				  id="etherpad-iframe" 
+				  src="https://pad.alice.ufsj.edu.br/p/{{ page.title }}" 
+				  width="100%" 
+				  height="500px" 
+				  frameborder="0">
+				</iframe>
+			  </div>
+			  
+
 			<div class="content-aula">
 				{{ page.description }}
 				</br>
@@ -44,3 +58,23 @@ lang: pt
 			</div>
 		</main>
 
+		<!--  -->
+		<script>
+			document.addEventListener("DOMContentLoaded", function () {
+			  const etherpadButton = document.getElementById("etherpad"); // Botão
+			  const aulaDiv = document.getElementById("aula"); // Div da aula
+			  const etherpadContainer = document.getElementById("etherpad-container"); // Div do Etherpad
+		  
+			  etherpadButton.addEventListener("click", function () {
+				if (aulaDiv.style.display === "none") {
+				  // Se a aula estiver oculta, exibe a aula e oculta o Etherpad
+				  aulaDiv.style.display = "block";
+				  etherpadContainer.style.display = "none";
+				} else {
+				  // Caso contrário, oculta a aula e exibe o Etherpad
+				  aulaDiv.style.display = "none";
+				  etherpadContainer.style.display = "block";
+				}
+			  });
+			});
+		</script>