Spaces:

Justtalk
/

JusTalk

Runtime error

App Files Files Community

rein0421 commited on Mar 23

Commit

5730461

verified ·

1 Parent(s): 10d653d

Upload 8 files

Browse files

Files changed (6) hide show

templates/feedback.html +170 -174
templates/index.html +95 -1
templates/reset.html +39 -162
templates/talkDetail.html +49 -160
templates/userRegister.html +151 -148
templates/userSelect.html +416 -0

templates/feedback.html CHANGED Viewed

@@ -1,174 +1,170 @@
-<!DOCTYPE html>
-<html lang="ja" class="dark">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>会話フィードバック画面</title>
-    <link
-      rel="stylesheet"
-      href="{{ url_for('static', filename='loading.css') }}"
-    />
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script>
-      tailwind.config = {
-        darkMode: "class",
-      };
-    </script>
-    <script src="https://use.fontawesome.com/releases/v5.10.0/js/all.js"></script>
-    <style>
-      /* Main Container */
-      body {
-        background: linear-gradient(135deg, #2c3e50, #1f2937);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        min-height: 100vh;
-        font-family: "Arial", sans-serif;
-        color: #fff;
-      }
-      /* Main Content Wrapper */
-      .main-content {
-        border: 5px solid rgba(255, 255, 255, 0.2);
-        padding: 2rem;
-        border-radius: 1rem;
-        width: 90%;
-        max-width: 500px;
-        background-color: rgba(0, 0, 0, 0.3);
-        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
-        text-align: center;
-      }
-      /* Title */
-      .main-title {
-        font-size: 2.5rem;
-        font-weight: bold;
-        margin-bottom: 1.5rem;
-        color: #fff;
-        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-      }
-      /* Hamburger Menu Button */
-      #menuButton {
-        background-color: rgba(255, 255, 255, 0.1);
-        border: none;
-        border-radius: 50%;
-        padding: 0.5rem;
-        cursor: pointer;
-        transition: background-color 0.2s ease;
-      }
-      #menuButton:hover {
-        background-color: rgba(255, 255, 255, 0.2);
-      }
-      /* Hamburger Menu Styles */
-      #menu {
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 10;
-        transform: translateX(-100%);
-        visibility: hidden;
-        opacity: 0;
-        background-color: rgb(31, 41, 55);
-        transition: transform 0.3s ease-in-out, visibility 0s 0.3s,
-          opacity 0.3s ease-in-out;
-        backdrop-filter: blur(10px);
-        border-right: 1px solid rgba(255, 255, 255, 0.2);
-      }
-      #menu.open {
-        transform: translateX(0);
-        visibility: visible;
-        opacity: 1;
-        transition: transform 0.3s ease-in-out, visibility 0s 0s,
-          opacity 0.3s ease-in-out;
-      }
-      #menu button {
-        transition: background-color 0.2s ease;
-        background-color: rgba(0, 0, 0, 0.1);
-        margin: 2px;
-        border-radius: 5px;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        gap: 10px;
-        padding: 0.75rem 1rem;
-        width: 100%;
-        text-align: left;
-        border: none;
-        color: #fff;
-        font-size: 1rem;
-        cursor: pointer;
-      }
-      #menu button:hover {
-        background-color: rgba(55, 65, 81, 0.7);
-      }
-    </style>
-  </head>
-  <body>
-    <div class="loader" id="loader">
-      <div class="one"></div>
-      <div class="two"></div>
-      <div class="three"></div>
-      <div class="four"></div>
-    </div>
-    <div class="main-content relative">
-      <!-- Title -->
-      <div class="main-title">会話フィードバック</div>
-      <!-- Hamburger Menu -->
-      <div class="absolute top-4 left-4">
-        <button
-          id="menuButton"
-          class="text-white text-2xl focus:outline-none"
-          onclick="toggleMenu(event)"
-        >
-          <i class="fas fa-bars"></i>
-        </button>
-        <!-- Menu Content -->
-        <div
-          id="menu"
-          class="absolute top-0 left-0 h-full w-64 bg-gray-800 text-white transform -translate-x-full transition-transform duration-300 ease-in-out opacity-0 visibility-hidden"
-        >
-          <div class="px-4 py-2 text-lg font-semibold">メニュー</div>
-          <button onclick="showUserRegister()">
-            <i class="fas fa-user-plus"></i> メンバーを追加
-          </button>
-          <button onclick="showRecorder()">
-            <i class="fas fa-microphone"></i> 録音画面を表示
-          </button>
-          <button onclick="showResults()">
-            <i class="fas fa-chart-bar"></i> フィードバックを表示
-          </button>
-          <button onclick="showTalkDetail()">
-            <i class="fas fa-comments"></i> 会話詳細を表示
-          </button>
-          <button onclick="resetAction()">
-            <i class="fas fa-redo"></i> リセット
-          </button>
-          <button onclick="toggleMenu(event)">
-            <i class="fas fa-times"></i> 閉じる
-          </button>
-        </div>
-      </div>
-      <!-- Feedback Details -->
-      <div class="text-xl font-semibold mb-6" id="level">会話レベル:</div>
-      <div class="text-lg mb-2" id="Harassment_bool">ハラスメントの有無:</div>
-      <div class="text-lg mb-2" id="Harassment_type">��ラスメントの種類:</div>
-      <div class="text-lg mb-2" id="Harassment_loop">繰り返しの程度:</div>
-      <div class="text-lg mb-2" id="Harassment_comfort">会話の心地よさ:</div>
-      <div class="text-lg mb-2" id="Harassment_volume">
-        非難またはハラスメントの程度:
-      </div>
-    </div>
-    <script src="{{ url_for('static', filename='menu.js') }}"></script>
-    <script src="{{ url_for('static', filename='feedback.js') }}"></script>
-  </body>
-</html>

+<!DOCTYPE html>
+<html lang="ja" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>会話フィードバック画面</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        darkMode: "class",
+      };
+    </script>
+    <script src="https://use.fontawesome.com/releases/v5.10.0/js/all.js"></script>
+    <style>
+      /* Main Container */
+      body {
+        background: linear-gradient(135deg, #2c3e50, #1f2937);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        font-family: "Arial", sans-serif;
+        color: #fff;
+      }
+      /* Main Content Wrapper */
+      .main-content {
+        border: 5px solid rgba(255, 255, 255, 0.2);
+        padding: 2rem;
+        border-radius: 1rem;
+        width: 90%;
+        max-width: 500px;
+        background-color: rgba(0, 0, 0, 0.3);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
+        text-align: center;
+      }
+      /* Title */
+      .main-title {
+        font-size: 2.5rem;
+        font-weight: bold;
+        margin-bottom: 1.5rem;
+        color: #fff;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+      }
+      /* Hamburger Menu Button */
+      #menuButton {
+        background-color: rgba(255, 255, 255, 0.1);
+        border: none;
+        border-radius: 50%;
+        padding: 0.5rem;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+      }
+      #menuButton:hover {
+        background-color: rgba(255, 255, 255, 0.2);
+      }
+      /* Hamburger Menu Styles */
+      #menu {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 10;
+        transform: translateX(-100%);
+        visibility: hidden;
+        opacity: 0;
+        background-color: rgb(31, 41, 55);
+        transition: transform 0.3s ease-in-out, visibility 0s 0.3s,
+          opacity 0.3s ease-in-out;
+        backdrop-filter: blur(10px);
+        border-right: 1px solid rgba(255, 255, 255, 0.2);
+      }
+      #menu.open {
+        transform: translateX(0);
+        visibility: visible;
+        opacity: 1;
+        transition: transform 0.3s ease-in-out, visibility 0s 0s,
+          opacity 0.3s ease-in-out;
+      }
+      #menu button {
+        transition: background-color 0.2s ease;
+        background-color: rgba(0, 0, 0, 0.1);
+        margin: 2px;
+        border-radius: 5px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        gap: 10px;
+        padding: 0.75rem 1rem;
+        width: 100%;
+        text-align: left;
+        border: none;
+        color: #fff;
+        font-size: 1rem;
+        cursor: pointer;
+      }
+      #menu button:hover {
+        background-color: rgba(55, 65, 81, 0.7);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="loader" id="loader">
+      <div class="one"></div>
+      <div class="two"></div>
+      <div class="three"></div>
+      <div class="four"></div>
+    </div>
+    <div class="main-content relative">
+      <!-- Title -->
+      <div class="main-title">会話フィードバック</div>
+      <!-- Hamburger Menu -->
+      <div class="absolute top-4 left-4">
+        <button
+          id="menuButton"
+          class="text-white text-2xl focus:outline-none"
+          onclick="toggleMenu(event)"
+        >
+          <i class="fas fa-bars"></i>
+        </button>
+        <!-- Menu Content -->
+        <div
+          id="menu"
+          class="absolute top-0 left-0 h-full w-64 bg-gray-800 text-white transform -translate-x-full transition-transform duration-300 ease-in-out opacity-0 visibility-hidden"
+        >
+          <div class="px-4 py-2 text-lg font-semibold">メニュー</div>
+          <button onclick="showUserRegister()">
+            <i class="fas fa-user-plus"></i> メンバーを追加
+          </button>
+          <button onclick="showRecorder()">
+            <i class="fas fa-microphone"></i> 録音画面を表示
+          </button>
+          <button onclick="showResults()">
+            <i class="fas fa-chart-bar"></i> フィードバックを表示
+          </button>
+          <button onclick="showTalkDetail()">
+            <i class="fas fa-comments"></i> 会話詳細を表示
+          </button>
+          <button onclick="resetAction()">
+            <i class="fas fa-redo"></i> リセット
+          </button>
+          <button onclick="toggleMenu(event)">
+            <i class="fas fa-times"></i> 閉じる
+          </button>
+        </div>
+      </div>
+      <!-- Feedback Details -->
+      <div class="text-xl font-semibold mb-6" id="level">会話レベル:</div>
+      <div class="text-lg mb-2" id="Harassment_bool">ハラスメントの有無:</div>
+      <div class="text-lg mb-2" id="Harassment_type">ハラスメントの種類:</div>
+      <div class="text-lg mb-2" id="Harassment_loop">繰り返しの程度:</div>
+      <div class="text-lg mb-2" id="Harassment_comfort">会話の心地よさ:</div>
+      <div class="text-lg mb-2" id="Harassment_volume">
+        非難またはハラスメントの程度:
+      </div>
+    </div>
+    <script src="{{ url_for('static', filename='menu.js') }}"></script>
+    <script src="{{ url_for('static', filename='feedback.js') }}"></script>
+  </body>
+</html>

templates/index.html CHANGED Viewed

@@ -152,6 +152,37 @@
       #menuButton:hover {
         background-color: rgba(255, 255, 255, 0.2);
       }
     </style>
   </head>
   <body onclick="closeMenu(event)">
@@ -179,6 +210,9 @@
           <button onclick="showUserRegister()">
             <i class="fas fa-user-plus"></i> メンバーを追加
           </button>
           <button onclick="showRecorder()">
             <i class="fas fa-microphone"></i> 録音画面を表示
           </button>
@@ -197,6 +231,11 @@
         </div>
       </div>
       <!-- Chart Display -->
       <div class="chart w-72 h-72 mb-5 mx-auto">
         <canvas id="speechChart"></canvas>
@@ -224,5 +263,60 @@
     <script src="{{ url_for('static', filename='process.js') }}"></script>
     <script src="{{ url_for('static', filename='menu.js') }}"></script>
   </body>
-</html>

       #menuButton:hover {
         background-color: rgba(255, 255, 255, 0.2);
       }
+      /* Member Chips Style */
+      .member-chips {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.5rem;
+        margin-bottom: 1.5rem;
+      }
+      .member-chip {
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 999px;
+        padding: 0.4rem 0.8rem;
+        font-size: 0.8rem;
+        color: white;
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+      .member-avatar {
+        width: 1.5rem;
+        height: 1.5rem;
+        background: rgba(255, 255, 255, 0.3);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.75rem;
+      }
     </style>
   </head>
   <body onclick="closeMenu(event)">
           <button onclick="showUserRegister()">
             <i class="fas fa-user-plus"></i> メンバーを追加
           </button>
+          <button onclick="showUserSelect()">
+            <i class="fas fa-users"></i> メンバーを選択
+          </button>
           <button onclick="showRecorder()">
             <i class="fas fa-microphone"></i> 録音画面を表示
           </button>
         </div>
       </div>
+      <!-- Selected Member Chips -->
+      <div class="member-chips" id="memberChips">
+        <!-- Member chips will be dynamically added here -->
+      </div>
       <!-- Chart Display -->
       <div class="chart w-72 h-72 mb-5 mx-auto">
         <canvas id="speechChart"></canvas>
     <script src="{{ url_for('static', filename='process.js') }}"></script>
     <script src="{{ url_for('static', filename='menu.js') }}"></script>
+    <script>
+      // 選択されたメンバーの表示を更新する関数
+      function updateSelectedMembers() {
+        // ローカルストレージから選択されたメンバーを取得
+        let selectedUsers = [];
+        try {
+          const stored = localStorage.getItem('selectedUsers');
+          if (stored) {
+            selectedUsers = JSON.parse(stored);
+          }
+        } catch (e) {
+          console.error('選択メンバーの読み込みエラー:', e);
+        }
+        // メンバーチップを表示
+        const memberChipsContainer = document.getElementById('memberChips');
+        memberChipsContainer.innerHTML = '';
+        if (selectedUsers.length === 0) {
+          // メンバーがいない場合の表示
+          const noMembers = document.createElement('div');
+          noMembers.className = 'text-white opacity-50 text-sm';
+          noMembers.textContent = 'メンバーが選択されていません';
+          memberChipsContainer.appendChild(noMembers);
+          return;
+        }
+        // 現在選択されているメンバー数を表示
+        const countChip = document.createElement('div');
+        countChip.className = 'member-chip';
+        countChip.style.backgroundColor = 'rgba(66, 153, 225, 0.5)'; // 青っぽい背景
+        countChip.innerHTML = `<i class="fas fa-users"></i> ${selectedUsers.length}人のメンバーを選択中`;
+        memberChipsContainer.appendChild(countChip);
+        // 各メンバーをチップとして表示
+        selectedUsers.forEach(member => {
+          const chip = document.createElement('div');
+          chip.className = 'member-chip';
+          const avatar = document.createElement('div');
+          avatar.className = 'member-avatar';
+          avatar.textContent = member.substr(0, 1).toUpperCase();
+          chip.appendChild(avatar);
+          chip.appendChild(document.createTextNode(member));
+          memberChipsContainer.appendChild(chip);
+        });
+      }
+      // ページ読み込み時にメンバー表示を更新
+      document.addEventListener('DOMContentLoaded', updateSelectedMembers);
+    </script>
   </body>
+</html>

templates/reset.html CHANGED Viewed

@@ -1,162 +1,39 @@
-<!DOCTYPE html>
-<html lang="ja" class="dark">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>リセット画面</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://use.fontawesome.com/releases/v5.10.0/js/all.js"></script>
-    <style>
-      /* Main Container */
-      body {
-        background: linear-gradient(135deg, #2c3e50, #1f2937);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        min-height: 100vh;
-        font-family: "Arial", sans-serif;
-        color: #fff;
-      }
-      .main-content {
-        border: 5px solid rgba(255, 255, 255, 0.2);
-        border-radius: 1rem;
-        margin: 1rem auto; /* 中央揃え */
-        width: 90%;
-        max-width: 500px;
-        /*width: 100%; */ /* 枠線全体を広げる */
-        /*max-width: 90%;*/ /* 最大幅を画面の90%に設定 */
-      }
-      /* Hamburger Menu Button */
-      #menuButton {
-        background-color: rgba(255, 255, 255, 0.1);
-        border: none;
-        border-radius: 50%;
-        padding: 0.5rem;
-        cursor: pointer;
-        transition: background-color 0.2s ease;
-      }
-      #menuButton:hover {
-        background-color: rgba(255, 255, 255, 0.2);
-      }
-      /* Hamburger Menu Styles */
-      #menu {
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 10;
-        transform: translateX(-100%);
-        visibility: hidden;
-        opacity: 0;
-        background-color: rgb(31, 41, 55);
-        transition: transform 0.3s ease-in-out, visibility 0s 0.3s,
-          opacity 0.3s ease-in-out;
-        backdrop-filter: blur(10px);
-        border-right: 1px solid rgba(255, 255, 255, 0.2);
-      }
-      #menu.open {
-        transform: translateX(0);
-        visibility: visible;
-        opacity: 1;
-        transition: transform 0.3s ease-in-out, visibility 0s 0s,
-          opacity 0.3s ease-in-out;
-      }
-      #menu button {
-        transition: background-color 0.2s ease;
-        background-color: rgba(0, 0, 0, 0.1);
-        margin: 2px;
-        border-radius: 5px;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        gap: 10px;
-        padding: 0.75rem 1rem;
-        width: 100%;
-        text-align: left;
-        border: none;
-        color: #fff;
-        font-size: 1rem;
-        cursor: pointer;
-      }
-      #menu button:hover {
-        background-color: rgba(55, 65, 81, 0.7);
-      }
-    </style>
-  </head>
-  <body>
-    <div class="main-content relative">
-      <div class="p-6 bg-white dark:bg-gray-800 shadow-lg rounded-2xl">
-        <h2 class="text-2xl font-semibold mb-4 text-center">
-          メンバーを消去しますか？
-        </h2>
-        <!-- Hamburger Menu -->
-        <div class="absolute top-4 left-4">
-          <button
-            id="menuButton"
-            class="text-white text-2xl focus:outline-none"
-            onclick="toggleMenu(event)"
-          >
-            <i class="fas fa-bars"></i>
-          </button>
-          <!-- Menu Content -->
-          <div
-            id="menu"
-            class="absolute top-0 left-0 h-full w-64 bg-gray-800 text-white transform -translate-x-full transition-transform duration-300 ease-in-out opacity-0 visibility-hidden"
-          >
-            <div class="px-4 py-2 text-lg font-semibold">メニュー</div>
-            <button onclick="showUserRegister()">
-              <i class="fas fa-user-plus"></i> メンバーを追加
-            </button>
-            <button onclick="showRecorder()">
-              <i class="fas fa-microphone"></i> 録音画面を表示
-            </button>
-            <button onclick="showResults()">
-              <i class="fas fa-chart-bar"></i> フィードバックを表示
-            </button>
-            <button onclick="showTalkDetail()">
-              <i class="fas fa-comments"></i> 会話詳細を表示
-            </button>
-            <button onclick="resetAction()">
-              <i class="fas fa-redo"></i> リセット
-            </button>
-            <button onclick="toggleMenu(event)">
-              <i class="fas fa-times"></i> 閉じる
-            </button>
-          </div>
-        </div>
-        <!-- Hamburger Menu End -->
-        <input type="button" id="select-all" value="全選択" />
-        <div id="memberCheckboxes">
-          <!--ここにチャックボックスを表示してほしい-->
-        </div>
-        <div class="flex justify-center gap-4">
-          <button
-            id="reset_btn"
-            class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
-          >
-            メンバー削除
-          </button>
-          <button
-            class="px-6 py-2 bg-[#607d8b] text-white rounded-lg hover:bg-[#546e7a] transition-colors"
-            onclick="showRecorder()"
-          >
-            録音画面を��示
-          </button>
-        </div>
-      </div>
-    </div>
-    <script src="{{ url_for('static', filename='reset.js') }}"></script>
-    <script src="{{ url_for('static', filename='menu.js') }}"></script>
-  </body>
-</html>

+<!DOCTYPE html>
+<html lang="ja" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>リセット画面</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body
+    class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center"
+  >
+    <div
+      class="container mx-auto p-6 bg-white dark:bg-gray-800 shadow-lg rounded-2xl"
+    >
+      <h2 class="text-2xl font-semibold mb-4">メンバーを消去しますか？</h2>
+      <input type="button" id="select-all" value="全選択" />
+      <div id="memberCheckboxes">
+        <!--ここにチャックボックスを表示してほしい-->
+      </div>
+      <div class="flex justify-center gap-4">
+        <button
+          id="reset_btn"
+          class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
+        >
+          メンバー削除
+        </button>
+        <button
+          class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+          onclick="showRecorder()"
+        >
+          録音画面を表示
+        </button>
+      </div>
+    </div>
+    <script src="{{ url_for('static', filename='reset.js') }}"></script>
+  </body>
+</html>

templates/talkDetail.html CHANGED Viewed

@@ -1,160 +1,49 @@
-<!DOCTYPE html>
-<html lang="ja" class="dark">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>会話詳細画面</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://use.fontawesome.com/releases/v5.10.0/js/all.js"></script>
-    <link
-      rel="stylesheet"
-      href="{{ url_for('static', filename='loading.css') }}"
-    />
-    <style>
-      /* Main Container */
-      body {
-        background: linear-gradient(135deg, #2c3e50, #1f2937);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        min-height: 100vh;
-        font-family: "Arial", sans-serif;
-        color: #fff;
-      }
-      .main-content {
-        border: 5px solid rgba(255, 255, 255, 0.2);
-        border-radius: 1rem;
-        margin: 1rem; /* 外側の余白 */
-        width: 90%;
-        max-width: 500px;
-        /*width: 100%; */ /* 枠線全体を広げる */
-        /*max-width: 90%;*/ /* 最大幅を画面の90%に設定 */
-      }
-      /* Hamburger Menu Button */
-      #menuButton {
-        background-color: rgba(255, 255, 255, 0.1);
-        border: none;
-        border-radius: 50%;
-        padding: 0.5rem;
-        cursor: pointer;
-        transition: background-color 0.2s ease;
-      }
-      #menuButton:hover {
-        background-color: rgba(255, 255, 255, 0.2);
-      }
-      /* Hamburger Menu Styles */
-      #menu {
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 10;
-        transform: translateX(-100%);
-        visibility: hidden;
-        opacity: 0;
-        background-color: rgb(31, 41, 55);
-        transition: transform 0.3s ease-in-out, visibility 0s 0.3s,
-          opacity 0.3s ease-in-out;
-        backdrop-filter: blur(10px);
-        border-right: 1px solid rgba(255, 255, 255, 0.2);
-      }
-      #menu.open {
-        transform: translateX(0);
-        visibility: visible;
-        opacity: 1;
-        transition: transform 0.3s ease-in-out, visibility 0s 0s,
-          opacity 0.3s ease-in-out;
-      }
-      #menu button {
-        transition: background-color 0.2s ease;
-        background-color: rgba(0, 0, 0, 0.1);
-        margin: 2px;
-        border-radius: 5px;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        gap: 10px;
-        padding: 0.75rem 1rem;
-        width: 100%;
-        text-align: left;
-        border: none;
-        color: #fff;
-        font-size: 1rem;
-        cursor: pointer;
-      }
-      #menu button:hover {
-        background-color: rgba(55, 65, 81, 0.7);
-      }
-    </style>
-  </head>
-  <body>
-    <div class="main-content relative">
-      <div class="loader" id="loader">
-        <div class="one"></div>
-        <div class="two"></div>
-        <div class="three"></div>
-        <div class="four"></div>
-      </div>
-      <div
-        class="container mx-auto p-6 bg-white dark:bg-gray-800 shadow-lg rounded-2xl w-full max-w-none"
-      >
-        <h2 class="text-2xl font-semibold mb-4 text-center">
-          会話の文字起こし表示
-        </h2>
-        <!-- Hamburger Menu -->
-        <div class="absolute top-4 left-4">
-          <button
-            id="menuButton"
-            class="text-white text-2xl focus:outline-none"
-            onclick="toggleMenu(event)"
-          >
-            <i class="fas fa-bars"></i>
-          </button>
-          <!-- Menu Content -->
-          <div
-            id="menu"
-            class="absolute top-0 left-0 h-full w-64 bg-gray-800 text-white transform -translate-x-full transition-transform duration-300 ease-in-out opacity-0 visibility-hidden"
-          >
-            <div class="px-4 py-2 text-lg font-semibold">メニュー</div>
-            <button onclick="showUserRegister()">
-              <i class="fas fa-user-plus"></i> メンバーを追加
-            </button>
-            <button onclick="showRecorder()">
-              <i class="fas fa-microphone"></i> 録音画面を表示
-            </button>
-            <button onclick="showResults()">
-              <i class="fas fa-chart-bar"></i> フィードバックを表示
-            </button>
-            <button onclick="showTalkDetail()">
-              <i class="fas fa-comments"></i> 会話詳細を表示
-            </button>
-            <button onclick="resetAction()">
-              <i class="fas fa-redo"></i> リセット
-            </button>
-            <button onclick="toggleMenu(event)">
-              <i class="fas fa-times"></i> 閉じる
-            </button>
-          </div>
-        </div>
-        <!-- Hamburger Menu End -->
-        <div
-          id="transcription"
-          class="p-4 bg-gray-200 dark:bg-gray-700 rounded-lg mb-4 max-h-96 overflow-y-auto"
-        >
-          ここに会話内容が表示されます。
-        </div>
-      </div>
-      <script src="{{ url_for('static', filename='talk_detail.js') }}"></script>
-      <script src="{{ url_for('static', filename='menu.js') }}"></script>
-    </div>
-  </body>
-</html>

+<!DOCTYPE html>
+<html lang="ja" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>会話詳細画面</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link
+      rel="stylesheet"
+      href="{{ url_for('static', filename='loading.css') }}"
+    />
+  </head>
+  <body
+    class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center"
+  >
+    <div class="loader" id="loader">
+      <div class="one"></div>
+      <div class="two"></div>
+      <div class="three"></div>
+      <div class="four"></div>
+    </div>
+    <div
+      class="container mx-auto p-6 bg-white dark:bg-gray-800 shadow-lg rounded-2xl"
+    >
+      <h2 class="text-2xl font-semibold mb-4">会話の文字起こし表示</h2>
+      <div
+        id="transcription"
+        class="p-4 bg-gray-200 dark:bg-gray-700 rounded-lg mb-4 max-h-96 overflow-y-auto"
+      >
+        ここに会話内容が表示されます。
+      </div>
+      <div class="flex justify-center gap-4">
+        <button
+          class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+          onclick="showRecorder()"
+        >
+          録音画面を表示
+        </button>
+        <button
+          class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+          onclick="showFeedback()"
+        >
+          フィードバック画面を表示
+        </button>
+      </div>
+    </div>
+    <script src="{{ url_for('static', filename='talk_detail.js') }}"></script>
+  </body>
+</html>

templates/userRegister.html CHANGED Viewed

@@ -1,148 +1,151 @@
-<!DOCTYPE html>
-<html lang="ja">
-  <head>
-    <meta charset="UTF-8" />
-    <title>ユーザー音声登録</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://use.fontawesome.com/releases/v5.10.0/js/all.js"></script>
-    <style>
-      @keyframes pulse-scale {
-        0%,
-        100% {
-          transform: scale(1);
-        }
-        50% {
-          transform: scale(1.1);
-        }
-      }
-      .animate-pulse-scale {
-        animation: pulse-scale 1s infinite;
-      }
-      /* Record Button Styles */
-      .record-button {
-        width: 50px;
-        height: 50px;
-        background-color: transparent;
-        border-radius: 50%;
-        border: 2px solid white;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
-        transition: all 0.3s ease;
-      }
-      .record-icon {
-        width: 35px;
-        height: 35px;
-        background-color: #d32f2f;
-        border-radius: 50%;
-        transition: all 0.3s ease;
-      }
-      .record-button.recording .record-icon {
-        background-color: #f44336; /* 録音中は赤色 */
-        border-radius: 4px; /* 録音時に赤い部分だけ四角にする */
-      }
-      .recording .record-icon {
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-      }
-      /* Main Container */
-      body {
-        background: linear-gradient(135deg, #2c3e50, #1f2937);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        min-height: 100vh;
-        font-family: "Arial", sans-serif;
-      }
-      /* Main Content Wrapper */
-      .main-content {
-        border: 5px solid rgba(255, 255, 255, 0.2);
-        padding: 2rem;
-        border-radius: 1rem;
-        width: 90%;
-        max-width: 500px;
-        background-color: rgba(0, 0, 0, 0.3);
-        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
-        text-align: center;
-      }
-      /* Title */
-      .main-title {
-        font-size: 2.5rem;
-        font-weight: bold;
-        margin-bottom: 1.5rem;
-        color: #fff;
-        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-      }
-      /* Buttons */
-      .action-button {
-        margin-top: 1rem;
-        padding: 0.75rem 1.5rem;
-        border-radius: 0.5rem;
-        cursor: pointer;
-        transition: background-color 0.2s ease;
-        width: 100%;
-      }
-      .action-button:hover {
-        background-color: rgba(55, 65, 81, 0.7);
-      }
-      .back-button {
-        background-color: #607d8b; /* 落ち着いたグレー */
-        color: white;
-      }
-      .add-button {
-        background-color: #4caf50; /* 落ち着いた緑色 */
-        color: white;
-      }
-      /* Disabled State */
-      .disabled {
-        opacity: 0.5;
-        pointer-events: none;
-      }
-      /* Responsive Design */
-      @media (max-width: 640px) {
-        .main-content {
-          padding: 1.5rem;
-        }
-      }
-    </style>
-  </head>
-  <body>
-    <!-- Main Content Wrapper -->
-    <div class="main-content relative">
-      <!-- Title -->
-      <div class="main-title">JustTalk</div>
-      <!-- User List -->
-      <div id="people-list" class="space-y-4"></div>
-      <!-- Add Button -->
-      <button id="add-btn" class="action-button add-button">
-        <i class="fas fa-user-plus"></i> メンバーを追加
-      </button>
-      <!-- 録音画面へ移動ボタン(Back Buttonから変更) -->
-      <button
-        id="backButton"
-        onclick="showRecorder()"
-        class="action-button back-button"
-      >
-        <i class="fas fa-microphone"></i> 録音画面を表示
-      </button>
-    </div>
-    <script src="{{ url_for('static', filename='register_record.js') }}"></script>
-  </body>
-</html>

+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <title>ユーザー音声登録</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://use.fontawesome.com/releases/v5.10.0/js/all.js"></script>
+    <style>
+      @keyframes pulse-scale {
+        0%,
+        100% {
+          transform: scale(1);
+        }
+        50% {
+          transform: scale(1.1);
+        }
+      }
+      .animate-pulse-scale {
+        animation: pulse-scale 1s infinite;
+      }
+      /* Record Button Styles */
+      .record-button {
+        width: 50px;
+        height: 50px;
+        background-color: transparent;
+        border-radius: 50%;
+        border: 2px solid white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+        transition: all 0.3s ease;
+      }
+      .record-icon {
+        width: 35px;
+        height: 35px;
+        background-color: #d32f2f;
+        border-radius: 50%;
+        transition: all 0.3s ease;
+      }
+      .record-button.recording .record-icon {
+        background-color: #f44336; /* 録音中は赤色 */
+        border-radius: 4px; /* 録音時に赤い部分だけ四角にする */
+      }
+      .recording .record-icon {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+      }
+      /* Main Container */
+      body {
+        background: linear-gradient(135deg, #2c3e50, #1f2937);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        font-family: "Arial", sans-serif;
+      }
+      /* Main Content Wrapper */
+      .main-content {
+        border: 5px solid rgba(255, 255, 255, 0.2);
+        padding: 2rem;
+        border-radius: 1rem;
+        width: 90%;
+        max-width: 500px;
+        background-color: rgba(0, 0, 0, 0.3);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
+        text-align: center;
+      }
+      /* Title */
+      .main-title {
+        font-size: 2.5rem;
+        font-weight: bold;
+        margin-bottom: 1.5rem;
+        color: #fff;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+      }
+      /* Buttons */
+      .action-button {
+        margin-top: 1rem;
+        padding: 0.75rem 1.5rem;
+        border-radius: 0.5rem;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+        width: 100%;
+      }
+      .action-button:hover {
+        background-color: rgba(55, 65, 81, 0.7);
+      }
+      .back-button {
+        background-color: #607d8b; /* 落ち着いたグレー */
+        color: white;
+      }
+      .add-button {
+        background-color: #4caf50; /* 落ち着いた緑色 */
+        color: white;
+      }
+      /* Disabled State */
+      .disabled {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+      /* Responsive Design */
+      @media (max-width: 640px) {
+        .main-content {
+          padding: 1.5rem;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Main Content Wrapper -->
+    <div class="main-content relative">
+      <!-- Title -->
+      <div class="main-title">ユーザー音声登録</div>
+      <!-- User List -->
+      <div id="people-list" class="space-y-4"></div>
+      <!-- Add Button -->
+      <button id="add-btn" class="action-button add-button">
+        <i class="fas fa-user-plus"></i> メンバーを追加
+      </button>
+      <!-- Back Button -->
+      <button
+        id="backButton"
+        onclick="goBack()"
+        class="action-button back-button"
+      >
+        戻る
+      </button>
+    </div>
+    <script src="{{ url_for('static', filename='register_record.js') }}"></script>
+  </body>
+</html>

templates/userSelect.html ADDED Viewed

	@@ -0,0 +1,416 @@

+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>メンバー選択 - JustTalk</title>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.0/css/all.css" />
+    <style>
+        body {
+            font-family: 'Helvetica Neue', Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background: linear-gradient(135deg, #2c3e50, #1f2937);
+            color: white;
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .container {
+            max-width: 500px;
+            margin: 0 auto;
+            padding: 30px;
+            border: 5px solid rgba(255, 255, 255, 0.2);
+            border-radius: 1rem;
+            background-color: rgba(0, 0, 0, 0.3);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
+            width: 90%;
+            position: relative;
+        }
+        h1 {
+            color: white;
+            text-align: center;
+            margin-bottom: 30px;
+            font-size: 1.8rem;
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+        }
+        .user-list {
+            background-color: rgba(255, 255, 255, 0.1);
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            padding: 15px;
+            margin-bottom: 25px;
+            max-height: 350px;
+            overflow-y: auto;
+        }
+        .user-item {
+            display: flex;
+            align-items: center;
+            padding: 12px 15px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            transition: background-color 0.2s;
+        }
+        .user-item:last-child {
+            border-bottom: none;
+        }
+        .user-item:hover {
+            background-color: rgba(255, 255, 255, 0.05);
+        }
+        .user-item label {
+            margin-left: 12px;
+            font-size: 16px;
+            cursor: pointer;
+            flex-grow: 1;
+            color: white;
+        }
+        input[type="checkbox"] {
+            cursor: pointer;
+            width: 18px;
+            height: 18px;
+            accent-color: #3498db;
+        }
+        .button-container {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 25px;
+        }
+        button {
+            background-color: #3498db;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            padding: 12px 20px;
+            font-size: 16px;
+            cursor: pointer;
+            transition: background-color 0.3s, transform 0.1s;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        button:hover {
+            background-color: #2980b9;
+        }
+        button:active {
+            transform: translateY(1px);
+        }
+        button:disabled {
+            background-color: #95a5a6;
+            cursor: not-allowed;
+            opacity: 0.7;
+        }
+        button.secondary {
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+        button.secondary:hover {
+            background-color: rgba(255, 255, 255, 0.3);
+        }
+        .selected-count {
+            margin: 15px 0;
+            text-align: center;
+            font-weight: bold;
+            color: #3498db;
+            font-size: 18px;
+            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+        }
+        .no-users {
+            text-align: center;
+            padding: 30px;
+            color: rgba(255, 255, 255, 0.7);
+            font-style: italic;
+        }
+        .loading {
+            text-align: center;
+            padding: 30px;
+            color: white;
+        }
+        .spinner {
+            border: 4px solid rgba(255, 255, 255, 0.1);
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            border-left-color: #3498db;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 15px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        /* User Avatar */
+        .user-avatar {
+            width: 30px;
+            height: 30px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 14px;
+            margin-left: 10px;
+        }
+        /* Hamburger Menu Styles */
+        #menu {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 10;
+            transform: translateX(-100%);
+            visibility: hidden;
+            opacity: 0;
+            background-color: rgb(31, 41, 55);
+            transition: transform 0.3s ease-in-out, visibility 0s 0.3s,
+                opacity 0.3s ease-in-out;
+            backdrop-filter: blur(10px);
+            border-right: 1px solid rgba(255, 255, 255, 0.2);
+            height: 100%;
+        }
+        #menu.open {
+            transform: translateX(0);
+            visibility: visible;
+            opacity: 1;
+            transition: transform 0.3s ease-in-out, visibility 0s 0s,
+                opacity 0.3s ease-in-out;
+        }
+        #menu button {
+            transition: background-color 0.2s ease;
+            background-color: rgba(0, 0, 0, 0.1);
+            margin: 2px;
+            border-radius: 5px;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            gap: 10px;
+            padding: 0.75rem 1rem;
+            width: 100%;
+            text-align: left;
+            border: none;
+            color: #fff;
+            font-size: 1rem;
+            cursor: pointer;
+            box-shadow: none;
+        }
+        #menu button:hover {
+            background-color: rgba(55, 65, 81, 0.7);
+        }
+        #menuButton {
+            background-color: rgba(255, 255, 255, 0.1);
+            border: none;
+            border-radius: 50%;
+            padding: 0.5rem;
+            cursor: pointer;
+            transition: background-color 0.2s ease;
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            box-shadow: none;
+            font-size: 18px;
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        #menuButton:hover {
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+        /* Select All Button */
+        .select-controls {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 15px;
+            gap: 10px;
+        }
+        .select-button {
+            background-color: rgba(255, 255, 255, 0.15);
+            color: white;
+            border: none;
+            border-radius: 5px;
+            padding: 8px 15px;
+            font-size: 14px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        .select-button:hover {
+            background-color: rgba(255, 255, 255, 0.25);
+        }
+        /* Delete Button */
+        .delete-button {
+            background-color: transparent;
+            color: #e74c3c;
+            border: none;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: background-color 0.2s;
+            padding: 0;
+            margin-left: 5px;
+            box-shadow: none;
+        }
+        .delete-button:hover {
+            background-color: rgba(231, 76, 60, 0.2);
+        }
+        /* Modal Dialog */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 100;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            align-items: center;
+            justify-content: center;
+        }
+        .modal-content {
+            background-color: rgb(31, 41, 55);
+            border-radius: 10px;
+            padding: 20px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .modal-title {
+            font-size: 18px;
+            margin-bottom: 15px;
+            color: white;
+        }
+        .modal-text {
+            margin-bottom: 20px;
+            color: rgba(255, 255, 255, 0.9);
+        }
+        .modal-buttons {
+            display: flex;
+            justify-content: flex-end;
+            gap: 10px;
+        }
+        .modal-cancel {
+            background-color: rgba(255, 255, 255, 0.2);
+            color: white;
+        }
+        .modal-delete {
+            background-color: #e74c3c;
+        }
+        .modal-delete:hover {
+            background-color: #c0392b;
+        }
+    </style>
+</head>
+<body onclick="closeMenu(event)">
+    <div class="container">
+        <!-- Hamburger Menu Button -->
+        <button
+            id="menuButton"
+            class="text-white focus:outline-none"
+            onclick="toggleMenu(event)"
+        >
+            <i class="fas fa-bars"></i>
+        </button>
+        <!-- Menu Content -->
+        <div
+            id="menu"
+            class="absolute top-0 left-0 h-full w-64 bg-gray-800 text-white transform -translate-x-full transition-transform duration-300 ease-in-out opacity-0 visibility-hidden"
+        >
+            <div class="px-4 py-2 text-lg font-semibold">メニュー</div>
+            <button onclick="showUserRegister()">
+                <i class="fas fa-user-plus"></i> メンバーを追加
+            </button>
+            <button onclick="showIndex()">
+                <i class="fas fa-home"></i> ホーム画面
+            </button>
+            <button onclick="showResults()">
+                <i class="fas fa-chart-bar"></i> フィードバックを表示
+            </button>
+            <button onclick="showTalkDetail()">
+                <i class="fas fa-comments"></i> 会話詳細を表示
+            </button>
+            <button onclick="resetAction()">
+                <i class="fas fa-redo"></i> リセット
+            </button>
+            <button onclick="toggleMenu(event)">
+                <i class="fas fa-times"></i> 閉じる
+            </button>
+        </div>
+        <h1>会話分析に使用するメンバーを選択</h1>
+        <div class="select-controls">
+            <button class="select-button" onclick="selectAllUsers()">すべて選択</button>
+            <button class="select-button" onclick="deselectAllUsers()">選択解除</button>
+        </div>
+        <div class="user-list" id="userList">
+            <div class="loading">
+                <div class="spinner"></div>
+                <p>メンバーリストを読み込み中...</p>
+            </div>
+        </div>
+        <div class="selected-count" id="selectedCount">選択中: 0人</div>
+        <div class="button-container">
+            <button class="secondary" onclick="location.href='/userregister'">新規登録</button>
+            <button id="proceedButton" onclick="proceedWithSelectedUsers()" disabled>選択して次へ</button>
+        </div>
+    </div>
+    <!-- 削除確認モーダル -->
+    <div id="deleteModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-title">メンバーの削除</div>
+            <div class="modal-text" id="deleteModalText">このメンバーを削除しますか？</div>
+            <div class="modal-buttons">
+                <button class="modal-cancel" onclick="hideDeleteModal()">キャンセル</button>
+                <button class="modal-delete" onclick="confirmDelete()">削除</button>
+            </div>
+        </div>
+    </div>
+    <script src="{{ url_for('static', filename='process1.js') }}"></script>
+</body>
+</html>