{{ extends "global/Page.html" }}
{{ block title }}
<h3 align="center">
</h3>
{{ endblock }}

{{ block styles }}

<style>
  .form-control {
    width: 300px; /* 入力フォームの幅を設定 */
    margin: 0 auto; /* 入力フォームを水平中央に配置 */
    text-align: center; /* 入力フォームのテキストを中央寄せにする */
  }
  .default-text {
    color: #d3d0d0; /* 薄い文字の色 */
  }
</style>
{{ endblock }}

{{ block content }}

<div class="upper-right"><br>
  <span style="cursor: pointer;" onclick="openInNewWindow('https://drive.google.com/file/d/1-dZim74Pei8sQRMA92s2WykMcjS47QJo/view?usp=share_link')">Part3</span>
</div>

<!-- Embedded video -->
<div align="center">
  <iframe width="855" height="480" src="https://www.youtube.com/embed/jh_blG6Tqzk?si=86zePWPInejqHoED" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>


  <!-- Next button -->
  <br><br>
    <input type="text" name = "222" class="form-control default-text" id="passwordInput" required value="動画内で説明するパスワードを入力" 
      onfocus="if(this.value == '動画内で説明するパスワードを入力') { this.value = ''; this.classList.remove('default-text'); }" 
      onblur="if(this.value == '') { this.value = '動画内で説明するパスワードを入力'; this.classList.add('default-text'); }">


<br>

  <div align = "center">
        <button id="buttonA">次へ</button>
            <div class="popup-container">
                <button type="button" id="buttonB">次へ</button>
                <div class="popup">
                　正しいパスワードを入力すると「次へ」が表示されます
                </div>
            </div><button id="hidden_submit_button" type="submit" hidden="true"></button>
    </div>


  {{ if is_defined('view.is_debug') and view.is_debug }}
  <!-- Cheatボタン -->
  <br><button id="cheatButton" class="btn btn-primary">Cheat</button>
  {{ endif}}

</div>
{{ endblock }}



{{ block scripts }}
<script>
  function openInNewWindow(url) {
      // 新しいウィンドウのサイズや位置などの設定
      var newWindow = window.open(url, "_blank", "width=900,height=600,top=100,left=100");
      // 新しいウィンドウのフォーカスを設定
      if (newWindow) {
          newWindow.focus();
      }
  }
          document.querySelector('input[name="222"]').addEventListener('input', function() {
              var passValue = this.value;
              if (passValue === '222') {
                  document.getElementById('buttonB').style.display = 'none';
                  document.getElementById('buttonA').style.display = 'inline-block';
                  // Hide error message
              } else {
              }
          });
  
        function nextPage() {
        oTree.next();
    }
  </script>
{{ endblock }}