Update pages.html

pages.html

@@ -219,7 +219,85 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
 
 
 
+<style>
+/* Модальный (фон) */
+.modal_2 {
+  display: none; /* Скрыто по умолчанию */
+  position: fixed; /* Оставаться на месте */
+  z-index: 10; /* Сидеть на вершине */
+  padding-top: 100px; /* Расположение коробки */
+  left: 0;
+  top: 0;
+  width: 100%; /* Полная ширина */
+  height: 100%; /* Полная высота */
+  overflow: auto; /* Включите прокрутку, если это необходимо */
+  background-color: rgb(0,0,0); /* Цвет запасной вариант  */
+  background-color: rgba(0,0,0,0.4); /*Черный с непрозрачностью */
+}
+
+/* Модальное содержание */
+.modal-content_2 {
+  position: relative;
+  background-color: #fefefe;
+  margin: auto;
+  padding: 0;
+  border: 1px solid #888;
+  width: 60%;
+  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+  -webkit-animation-name: animatetop_2;
+  -webkit-animation-duration: 0.4s;
+  animation-name: animatetop_2;
+  animation-duration: 0.4s
+}
+
+/* Добавить анимацию */
+@-webkit-keyframes animatetop_2 {
+  from {top:-300px; opacity:0} 
+  to {top:0; opacity:1}
+}
+@keyframes animatetop_2 {
+  from {top:-300px; opacity:0}
+  to {top:0; opacity:1}
+}
+
+/* Кнопка закрытия */
+.close_2 {
+  color: white;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+.close_2:hover,
+.close_2:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.modal-header_2 {
+  padding: 2px 16px;
+  background-color: green;
+  color: white;
+}
+
+.modal-body_2 {padding: 2px 16px;}
+
+.modal-footer_2 {
+  padding: 2px 16px;
+  background-color: green;
+  color: white;
+}
 
+#gjs {
+  position: absolute;
+  left: 0;
+  transition: left 0.3s ease;
+}
+
+#toggleAppBtn {
+  z-index: 1000; /* Убедитесь, что кнопка находится поверх других элементов */
+}
+</style>
 
 
   
@@ -235,6 +313,9 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
   <button id="toggleAppBtn" style="position: absolute; top: 10px; left: 10px;">Показать/Скрыть приложение</button>
   <!-- Кнопка для открытия модального окна -->
   <button id="myBtn" style="position: absolute; top: 30px; right: 10px;">Открыть модальное</button>
+
+  <button id="myBtn_2" style="position: absolute; top: 50px; right: 10px;">Открыть модальное_2</button>
+  
   <!-- Кнопка для проверки работы -->
   <button id="testBtn" style="position: absolute; top: 70px; right: 32px;">Тестовая кнопка</button>
   <div id="gjs" style="height: 90vh;"></div>
@@ -268,6 +349,43 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
       </div>
     </div>
   </div>
+
+
+
+
+<!-- The Modal_2 -->
+<div id="myModal_2" class="modal_2">
+  <!-- Модальное содержание -->
+  <div class="modal-content_2">
+    <div class="modal-header_2">
+      <span class="close_2">&times;</span>
+      <h2>HTMLешка</h2>
+    </div>
+    <div class="modal-body_2">
+      <p>Некоторый текст в модальном теле</p>
+
+      <div id="progressBarContainer">
+        <div id="progressBar">0%</div>
+      </div>
+      <div id="imageUrl" onclick="copyToClipboard(this)">Кликните после загрузки, для получения ссылки на страницу.</div>
+      <form id="uploadForm" enctype="multipart/form-data" method="post" action="/up_page">
+        <input type="file" name="file" accept=".html">
+        <input type="text" name="filename" placeholder="имя файла(маршрут)">
+        <button type="submit">Загрузить</button>
+      </form>
+
+      <br><br><br>
+    </div>
+    <div class="modal-footer_2">
+      <h3>Добавление HTML файла с пользовательским маршрутом.</h3>
+    </div>
+  </div>
+</div>
+
+
+
+
+  
   <script>
     // Инициализация GrapesJS редактора
 const editor = grapesjs.init({
@@ -618,6 +736,44 @@ window.onclick = function(event) {
 }
 </script>
 
+  
+<script>
+// Get the modal_2
+var modal_2 = document.getElementById("myModal_2");
+
+// Get the button that opens the modal
+var btn_2 = document.getElementById("myBtn_2");
+
+// Get the <span> element that closes the modal
+var span_2 = document.getElementsByClassName("close_2")[0];
+
+// When the user clicks the button, open the modal 
+btn_2.onclick = function() {
+  modal_2.style.display = "block";
+}
+
+// When the user clicks on <span> (x), close the modal
+span_2.onclick = function() {
+  modal_2.style.display = "none";
+}
+
+// When the user clicks anywhere outside of the modal, close it
+window.onclick = function(event) {
+  if (event.target == modal_2) {
+    modal_2.style.display = "none";
+  }
+}
+</script>
+
+
+
+
+
+
+
+
+  
+
 <script>
 document.addEventListener('DOMContentLoaded', () => {
   console.log('DOMContentLoaded выполнен');