Hugging Face's logo

Spaces:
DMTuit
/
psy_vk
Running

App Files Community
DmitrMakeev commited on
Commit
09ef128
·
verified ·
1 Parent(s): 864fc51

Update pages.html

Browse files
Files changed (1) hide show
  1. pages.html +121 -1
pages.html CHANGED
@@ -300,6 +300,73 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
300
  </style>
301
 
302
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
303
  <style>
304
 
305
  .input-row {
@@ -341,6 +408,11 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
341
  border-bottom: 2px solid #388E3C !important;
342
  }
343
  </style>
 
 
 
 
 
344
  </head>
345
  <body>
346
  <script>
@@ -354,7 +426,8 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
354
  <!-- Кнопка для открытия модального окна -->
355
  <button id="myBtn" style="position: absolute; top: 30px; right: 10px;">Открыть модальное</button>
356
 
357
- <button id="myBtn_2" style="position: absolute; top: 50px; right: 10px;">Открыть модальное_2</button>
 
358
 
359
  <!-- Кнопка для проверки работы -->
360
  <button id="testBtn" style="position: absolute; top: 70px; right: 32px;">Тестовая кнопка</button>
@@ -434,6 +507,31 @@ z-index: 1000; /* Убедитесь, что кнопка находится п
434
 
435
 
436
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
437
 
438
  <script>
439
  // Инициализация GrapesJS редактора
@@ -816,6 +914,28 @@ window.onclick = function(event) {
816
 
817
 
818
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
819
 
820
 
821
 
 
300
  </style>
301
 
302
 
303
+ <style>
304
+ /* Модальный (фон) */
305
+ .modal_3 {
306
+ display: none; /* Скрыто по умолчанию */
307
+ position: fixed; /* Оставаться на месте */
308
+ z-index: 10; /* Сидеть на вершине */
309
+ padding-top: 100px; /* Расположение коробки */
310
+ left: 0;
311
+ top: 0;
312
+ width: 100%; /* Полная ширина */
313
+ height: 100%; /* Полная высота */
314
+ overflow: auto; /* Включите прокрутку, если это необходимо */
315
+ background-color: rgb(0,0,0); /* Цвет запасной вариант */
316
+ background-color: rgba(0,0,0,0.4); /*Черный с непрозрачностью */
317
+ }
318
+ /* Модальное содержание */
319
+ .modal-content_3 {
320
+ position: relative;
321
+ background-color: #fefefe;
322
+ margin: auto;
323
+ padding: 0;
324
+ border: 1px solid #888;
325
+ width: 100%;
326
+ box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
327
+ -webkit-animation-name: animatetop_3;
328
+ -webkit-animation-duration: 0.4s;
329
+ animation-name: animatetop_3;
330
+ animation-duration: 0.4s
331
+ }
332
+ /* Добавить анимацию */
333
+ @-webkit-keyframes animatetop_3 {
334
+ from {top:-300px; opacity:0}
335
+ to {top:0; opacity:1}
336
+ }
337
+ @keyframes animatetop_3 {
338
+ from {top:-300px; opacity:0}
339
+ to {top:0; opacity:1}
340
+ }
341
+ /* Кнопка закрытия */
342
+ .close_3 {
343
+ color: white;
344
+ float: right;
345
+ font-size: 28px;
346
+ font-weight: bold;
347
+ }
348
+ .close_3:hover,
349
+ .close_3:focus {
350
+ color: #000;
351
+ text-decoration: none;
352
+ cursor: pointer;
353
+ }
354
+ .modal-header_3 {
355
+ padding: 2px 16px;
356
+ background-color: green;
357
+ color: white;
358
+ }
359
+ .modal-body_3 {padding: 2px 16px;}
360
+ .modal-footer_3 {
361
+ padding: 2px 16px;
362
+ background-color: green;
363
+ color: white;
364
+ }
365
+ </style>
366
+
367
+
368
+
369
+
370
  <style>
371
 
372
  .input-row {
 
408
  border-bottom: 2px solid #388E3C !important;
409
  }
410
  </style>
411
+
412
+
413
+
414
+
415
+
416
  </head>
417
  <body>
418
  <script>
 
426
  <!-- Кнопка для открытия модального окна -->
427
  <button id="myBtn" style="position: absolute; top: 30px; right: 10px;">Открыть модальное</button>
428
 
429
+ <button id="myBtn_2" style="position: absolute; top: 60px; right: 10px;">Открыть модальное_2</button>
430
+ <button id="myBtn_3" style="position: absolute; top: 90px; right: 10px;">Открыть модальное_3</button>
431
 
432
  <!-- Кнопка для проверки работы -->
433
  <button id="testBtn" style="position: absolute; top: 70px; right: 32px;">Тестовая кнопка</button>
 
507
 
508
 
509
 
510
+
511
+
512
+ <!-- The Modal_3 -->
513
+ <div id="myModal_3" class="modal_3">
514
+ <!-- Модальное содержание -->
515
+ <div class="modal-content_3">
516
+ <div class="modal-header_3">
517
+ <span class="close_3">&times;</span>
518
+ <h2>HTMLешка</h2>
519
+ </div>
520
+ <div class="modal-body_3">
521
+ <iframe id="iframe1" src="https://dmtuit-psy-vk.hf.space/buil_json?api_sys=fasSd345D" title="Iframe Example"></iframe>
522
+ <br><br><br>
523
+ </div>
524
+ <div class="modal-footer_3">
525
+ <h3>Добавление HTML файла с пользовательским маршрутом.</h3>
526
+ </div>
527
+ </div>
528
+ </div>
529
+
530
+
531
+
532
+
533
+
534
+
535
 
536
  <script>
537
  // Инициализация GrapesJS редактора
 
914
 
915
 
916
 
917
+ <script>
918
+ // Get the modal_3
919
+ var modal_3 = document.getElementById("myModal_3");
920
+ // Get the button that opens the modal
921
+ var btn_3 = document.getElementById("myBtn_3");
922
+ // Get the <span> element that closes the modal
923
+ var span_3 = document.getElementsByClassName("close_3")[0];
924
+ // When the user clicks the button, open the modal
925
+ btn_3.onclick = function() {
926
+ modal_3.style.display = "block";
927
+ }
928
+ // When the user clicks on <span> (x), close the modal
929
+ span_3.onclick = function() {
930
+ modal_3.style.display = "none";
931
+ }
932
+ // When the user clicks anywhere outside of the modal, close it
933
+ window.onclick = function(event) {
934
+ if (event.target == modal_3) {
935
+ modal_3.style.display = "none";
936
+ }
937
+ }
938
+ </script>
939
 
940
 
941