Update templates/index.html

templates/index.html

@@ -148,6 +148,16 @@
         transition: transform 0.3s ease-in-out, visibility 0s 0s,
           opacity 0.3s ease-in-out; /* すぐに表示 */
       }
+
+      /* レスポンシブデザイン */
+      @media (max-width: 640px) {
+        .w-72 {
+          width: 90%;
+        }
+        .h-72 {
+          height: 300px;
+        }
+      }
     </style>
 
     <script>
@@ -343,82 +353,50 @@
             before_rate = [tmp_rate];
           }
           count_voice++;
-          // 一人モードでは常に緑色とグレーの組み合わせを使用
-          speechChart.data.labels = [members[0], "無音"];
-          speechChart.data.datasets[0].backgroundColor = ["#4caf50", "#757575"];
         } else {
-          // 複数人モードの処理
-          if (!Array.isArray(newRate)) {
-            console.error("newRate is not an array:", newRate);
-            return;
-          }
-          if (newRate.length !== members.length) {
-            console.error(
-              "newRate length does not match members length:",
-              newRate,
-              members
-            );
-            return;
-          }
-          let averagedRates = new Array(newRate.length);
+          // 複数モードの時の処理
+          let sum_rate = 0;
           for (let i = 0; i < newRate.length; i++) {
-            let tmp_rate;
-            if (count_voice === 0) {
-              // 初回はそのまま
-              tmp_rate = newRate[i];
-            } else {
-              // 2回目以降は、過去の平均値と現在の値を加重平均する
-              tmp_rate =
-                (newRate[i] + before_rate[i] * count_voice) / (count_voice + 1);
-            }
-            averagedRates[i] = tmp_rate;
+            sum_rate += newRate[i];
           }
-          // before_rateを更新
-          before_rate = averagedRates;
-          //グラフに反映
-          speechChart.data.datasets[0].data = averagedRates;
-          count_voice++;
-          speechChart.data.datasets[0].backgroundColor = getMemberColors(
-            members.length
-          );
+          // 各メンバーの割合を計算
+          for (let i = 0; i < members.length; i++) {
+            voiceData[i] = (newRate[i] / sum_rate) * 100;
+          }
+          updateChart();
         }
-        speechChart.update();
       }
 
-      // メニューの表示・非表示
+      // メニューの開閉
       function toggleMenu(event) {
         event.stopPropagation();
         const menu = document.getElementById("menu");
         menu.classList.toggle("open");
       }
 
+      // メニュー外クリックで閉じる
       function closeMenu(event) {
         const menu = document.getElementById("menu");
-        if (
-          menu.classList.contains("open") &&
-          !menu.contains(event.target) &&
-          !event.target.closest("#menuButton")
-        ) {
+        if (!menu.contains(event.target)) {
           menu.classList.remove("open");
         }
       }
 
-      // リセットボタンの処理
-      function resetAction() {
-        alert("リセットが実行されました！");
-      }
-
+      // 以下の関数はサンプルのためのスタブです。必要に応じて実装を加えてください。
       function showUserRegister() {
-        fetch("/reset");
-        window.location.href = "userregister";
+        console.log("ユーザー登録画面を表示");
       }
 
       function showTalkdetail() {
-        window.location.href = "talk_detail";
+        console.log("会話履歴画面を表示");
       }
 
       function showResults() {
-        window.location.href = "feedback";
+        console.log("結果画面を表示");
+      }
+
+      function resetAction() {
+        console.log("リセット処理を実行");
       }
     </script>
   </body>