<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>メインメニュー</title>
  <style>
    #box {
            border: 1px solid #ccc;
            padding: 10px;
            margin: 10px;
            display: inline-block;
            margin-top: -10px;
            width:500px
        }

        body {
          display: flex;
          align-items: flex-start;
        }
        
        #calendar-container {
          width: 300px;
        }
        
        table {
          width: 100%;
          border-collapse: collapse;
          margin-top: 20px;
        }
        
        th, td {
          border: 1px solid #ddd;
          padding: 8px;
          text-align: center;
          cursor: pointer;
        }
        
        th {
          background-color: #f2f2f2;
        }
        
        button {
          margin: 10px;
          padding: 5px 10px;
          font-size: 16px;
        }
        
        #month-year-selector {
          margin-bottom: 20px;
        }
        
        #current-month {
          font-size: 18px;
          font-weight: bold;
        }
        
        #news-container {
          width: 30%;
          padding: 20px;
        }
        
        #iframe-container {
            width: 400px;
            height: 400px;
            border: 10px solid #ddd;
            padding: 10px;
            box-sizing: content-box;
          }
        
        #iframe {
            width: 90%;
            height: 90%;
          }
        
        /* 今日の日付をハイライトするためのクラス */
        .today {
          background-color: #ffcccb; /* ピンク色（適宜変更） */
        }

  </style>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>




<!-- 右側-->
<!-- 右側-->
<!-- 右側-->
<!-- 右側-->
<!-- 右側-->
 
<body>
    <div id="box">
      <h1 id="header">{{ currentHeaderText }}</h1>
      <div class="form-group">
        <select class="form-control" id="subjectSelector" onchange="changeContent(this.value)">
          <option value="subject.html">未選択</option>
            <option value="subject/ME.html">小学校算数</option>
            <option value="subjects/MJ.html">中学校数学</option>
            <option value="subjects/MH.html">高校数学</option>
            <option value="subjects/SE.html">小学校理科</option>
            <option value="subjects/SJ.html">中学校理科</option>
            <option value="subjects/SH.html">高校理科</option>
            <option value="subjects/JE.html">小学校国語</option>
            <option value="subjects/JJ.html">中学校国語</option>
            <option value="subjects/JH.html">高校国語</option>
            <option value="subjects/GE.html">小学校社会</option>
            <option value="subjects/GJ.html">中学校社会</option>
            <option value="subjects/GH.html">高校社会</option>
            <option value="subjects/EE.html">小学校英語</option>
            <option value="subjects/EJ.html">中学校英語</option>
            <option value="subjects/EH.html">高校英語</option>
        </select>
    </div>

        <!-- 埋め込むHTMLを表示する領域 -->
        <div>
          <iframe id="embeddedFrame" width="100%" height="360" frameborder="0" scrolling="no" src="{{ url_for('static', filename=currentEmbed) }}"></iframe>
        </div>

        <hr>
        <font size="1">検索結果は灰色で表示される</font>
    </div>

</body>


<script>
  // ページ読み込み時にコンテンツを初期化
  window.onload = function() {
      const initialSelectedValue = "subject.html";
      changeContent(initialSelectedValue);
  };

  // プルダウンメニューの変更でコンテンツを切り替える関数
  function changeContent(selectedValue) {
      const subjectSelector = document.getElementById("subjectSelector");
      const currentHeaderText = subjectSelector.options[subjectSelector.selectedIndex].text;

      // ヘッダーを変更
      document.getElementById('header').innerText = currentHeaderText;

      // HTMLを変更
      document.getElementById('embeddedFrame').src = "{{ url_for('static', filename='') }}" + selectedValue;
  }
</script>






</body>
</html>