Hugging Face's logo

Spaces:
Justtalk
/
JusTalk
Running

App Files Community
3
rein0421 commited on
Commit
5730461
·
verified ·
1 Parent(s): 10d653d

Upload 8 files

Browse files
Files changed (6) hide show
  1. templates/feedback.html +170 -174
  2. templates/index.html +95 -1
  3. templates/reset.html +39 -162
  4. templates/talkDetail.html +49 -160
  5. templates/userRegister.html +151 -148
  6. templates/userSelect.html +416 -0
templates/feedback.html CHANGED
@@ -1,174 +1,170 @@
1
- <!DOCTYPE html>
2
- <html lang="ja" class="dark">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>会話フィードバック画面</title>
7
- <link
8
- rel="stylesheet"
9
- href="{{ url_for('static', filename='loading.css') }}"
10
- />
11
- <script src="https://cdn.tailwindcss.com"></script>
12
- <script>
13
- tailwind.config = {
14
- darkMode: "class",
15
- };
16
- </script>
17
- <script src="https://use.fontawesome.com/releases/v5.10.0/js/all.js"></script>
18
- <style>
19
- /* Main Container */
20
- body {
21
- background: linear-gradient(135deg, #2c3e50, #1f2937);
22
- display: flex;
23
- align-items: center;
24
- justify-content: center;
25
- min-height: 100vh;
26
- font-family: "Arial", sans-serif;
27
- color: #fff;
28
- }
29
-
30
- /* Main Content Wrapper */
31
- .main-content {
32
- border: 5px solid rgba(255, 255, 255, 0.2);
33
- padding: 2rem;
34
- border-radius: 1rem;
35
- width: 90%;
36
- max-width: 500px;
37
- background-color: rgba(0, 0, 0, 0.3);
38
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
39
- text-align: center;
40
- }
41
-
42
- /* Title */
43
- .main-title {
44
- font-size: 2.5rem;
45
- font-weight: bold;
46
- margin-bottom: 1.5rem;
47
- color: #fff;
48
- text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
49
- }
50
-
51
- /* Hamburger Menu Button */
52
- #menuButton {
53
- background-color: rgba(255, 255, 255, 0.1);
54
- border: none;
55
- border-radius: 50%;
56
- padding: 0.5rem;
57
- cursor: pointer;
58
- transition: background-color 0.2s ease;
59
- }
60
-
61
- #menuButton:hover {
62
- background-color: rgba(255, 255, 255, 0.2);
63
- }
64
-
65
- /* Hamburger Menu Styles */
66
- #menu {
67
- position: absolute;
68
- top: 0;
69
- left: 0;
70
- z-index: 10;
71
- transform: translateX(-100%);
72
- visibility: hidden;
73
- opacity: 0;
74
- background-color: rgb(31, 41, 55);
75
- transition: transform 0.3s ease-in-out, visibility 0s 0.3s,
76
- opacity 0.3s ease-in-out;
77
- backdrop-filter: blur(10px);
78
- border-right: 1px solid rgba(255, 255, 255, 0.2);
79
- }
80
-
81
- #menu.open {
82
- transform: translateX(0);
83
- visibility: visible;
84
- opacity: 1;
85
- transition: transform 0.3s ease-in-out, visibility 0s 0s,
86
- opacity 0.3s ease-in-out;
87
- }
88
-
89
- #menu button {
90
- transition: background-color 0.2s ease;
91
- background-color: rgba(0, 0, 0, 0.1);
92
- margin: 2px;
93
- border-radius: 5px;
94
- display: flex;
95
- align-items: center;
96
- justify-content: flex-start;
97
- gap: 10px;
98
- padding: 0.75rem 1rem;
99
- width: 100%;
100
- text-align: left;
101
- border: none;
102
- color: #fff;
103
- font-size: 1rem;
104
- cursor: pointer;
105
- }
106
-
107
- #menu button:hover {
108
- background-color: rgba(55, 65, 81, 0.7);
109
- }
110
- </style>
111
- </head>
112
- <body>
113
- <div class="loader" id="loader">
114
- <div class="one"></div>
115
- <div class="two"></div>
116
- <div class="three"></div>
117
- <div class="four"></div>
118
- </div>
119
- <div class="main-content relative">
120
- <!-- Title -->
121
- <div class="main-title">会話フィードバック</div>
122
-
123
- <!-- Hamburger Menu -->
124
- <div class="absolute top-4 left-4">
125
- <button
126
- id="menuButton"
127
- class="text-white text-2xl focus:outline-none"
128
- onclick="toggleMenu(event)"
129
- >
130
- <i class="fas fa-bars"></i>
131
- </button>
132
-
133
- <!-- Menu Content -->
134
- <div
135
- id="menu"
136
- 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"
137
- >
138
- <div class="px-4 py-2 text-lg font-semibold">メニュー</div>
139
- <button onclick="showUserRegister()">
140
- <i class="fas fa-user-plus"></i> メンバーを追加
141
- </button>
142
- <button onclick="showRecorder()">
143
- <i class="fas fa-microphone"></i> 録音画面を表示
144
- </button>
145
- <button onclick="showResults()">
146
- <i class="fas fa-chart-bar"></i> フィードバックを表示
147
- </button>
148
- <button onclick="showTalkDetail()">
149
- <i class="fas fa-comments"></i> 会話詳細を表示
150
- </button>
151
- <button onclick="resetAction()">
152
- <i class="fas fa-redo"></i> リセット
153
- </button>
154
- <button onclick="toggleMenu(event)">
155
- <i class="fas fa-times"></i> 閉じる
156
- </button>
157
- </div>
158
- </div>
159
-
160
- <!-- Feedback Details -->
161
- <div class="text-xl font-semibold mb-6" id="level">会話レベル:</div>
162
- <div class="text-lg mb-2" id="Harassment_bool">ハラスメントの有無:</div>
163
- <div class="text-lg mb-2" id="Harassment_type">��ラスメントの種類:</div>
164
- <div class="text-lg mb-2" id="Harassment_loop">繰り返しの程度:</div>
165
- <div class="text-lg mb-2" id="Harassment_comfort">会話の心地よさ:</div>
166
- <div class="text-lg mb-2" id="Harassment_volume">
167
- 非難またはハラスメントの程度:
168
- </div>
169
- </div>
170
-
171
- <script src="{{ url_for('static', filename='menu.js') }}"></script>
172
- <script src="{{ url_for('static', filename='feedback.js') }}"></script>
173
- </body>
174
- </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="ja" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>会話フィードバック画面</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script>
9
+ tailwind.config = {
10
+ darkMode: "class",
11
+ };
12
+ </script>
13
+ <script src="https://use.fontawesome.com/releases/v5.10.0/js/all.js"></script>
14
+ <style>
15
+ /* Main Container */
16
+ body {
17
+ background: linear-gradient(135deg, #2c3e50, #1f2937);
18
+ display: flex;
19
+ align-items: center;
20
+ justify-content: center;
21
+ min-height: 100vh;
22
+ font-family: "Arial", sans-serif;
23
+ color: #fff;
24
+ }
25
+
26
+ /* Main Content Wrapper */
27
+ .main-content {
28
+ border: 5px solid rgba(255, 255, 255, 0.2);
29
+ padding: 2rem;
30
+ border-radius: 1rem;
31
+ width: 90%;
32
+ max-width: 500px;
33
+ background-color: rgba(0, 0, 0, 0.3);
34
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
35
+ text-align: center;
36
+ }
37
+
38
+ /* Title */
39
+ .main-title {
40
+ font-size: 2.5rem;
41
+ font-weight: bold;
42
+ margin-bottom: 1.5rem;
43
+ color: #fff;
44
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
45
+ }
46
+
47
+ /* Hamburger Menu Button */
48
+ #menuButton {
49
+ background-color: rgba(255, 255, 255, 0.1);
50
+ border: none;
51
+ border-radius: 50%;
52
+ padding: 0.5rem;
53
+ cursor: pointer;
54
+ transition: background-color 0.2s ease;
55
+ }
56
+
57
+ #menuButton:hover {
58
+ background-color: rgba(255, 255, 255, 0.2);
59
+ }
60
+
61
+ /* Hamburger Menu Styles */
62
+ #menu {
63
+ position: absolute;
64
+ top: 0;
65
+ left: 0;
66
+ z-index: 10;
67
+ transform: translateX(-100%);
68
+ visibility: hidden;
69
+ opacity: 0;
70
+ background-color: rgb(31, 41, 55);
71
+ transition: transform 0.3s ease-in-out, visibility 0s 0.3s,
72
+ opacity 0.3s ease-in-out;
73
+ backdrop-filter: blur(10px);
74
+ border-right: 1px solid rgba(255, 255, 255, 0.2);
75
+ }
76
+
77
+ #menu.open {
78
+ transform: translateX(0);
79
+ visibility: visible;
80
+ opacity: 1;
81
+ transition: transform 0.3s ease-in-out, visibility 0s 0s,
82
+ opacity 0.3s ease-in-out;
83
+ }
84
+
85
+ #menu button {
86
+ transition: background-color 0.2s ease;
87
+ background-color: rgba(0, 0, 0, 0.1);
88
+ margin: 2px;
89
+ border-radius: 5px;
90
+ display: flex;
91
+ align-items: center;
92
+ justify-content: flex-start;
93
+ gap: 10px;
94
+ padding: 0.75rem 1rem;
95
+ width: 100%;
96
+ text-align: left;
97
+ border: none;
98
+ color: #fff;
99
+ font-size: 1rem;
100
+ cursor: pointer;
101
+ }
102
+
103
+ #menu button:hover {
104
+ background-color: rgba(55, 65, 81, 0.7);
105
+ }
106
+ </style>
107
+ </head>
108
+ <body>
109
+ <div class="loader" id="loader">
110
+ <div class="one"></div>
111
+ <div class="two"></div>
112
+ <div class="three"></div>
113
+ <div class="four"></div>
114
+ </div>
115
+ <div class="main-content relative">
116
+ <!-- Title -->
117
+ <div class="main-title">会話フィードバック</div>
118
+
119
+ <!-- Hamburger Menu -->
120
+ <div class="absolute top-4 left-4">
121
+ <button
122
+ id="menuButton"
123
+ class="text-white text-2xl focus:outline-none"
124
+ onclick="toggleMenu(event)"
125
+ >
126
+ <i class="fas fa-bars"></i>
127
+ </button>
128
+
129
+ <!-- Menu Content -->
130
+ <div
131
+ id="menu"
132
+ 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"
133
+ >
134
+ <div class="px-4 py-2 text-lg font-semibold">メニュー</div>
135
+ <button onclick="showUserRegister()">
136
+ <i class="fas fa-user-plus"></i> メンバーを追加
137
+ </button>
138
+ <button onclick="showRecorder()">
139
+ <i class="fas fa-microphone"></i> 録音画面を表示
140
+ </button>
141
+ <button onclick="showResults()">
142
+ <i class="fas fa-chart-bar"></i> フィードバックを表示
143
+ </button>
144
+ <button onclick="showTalkDetail()">
145
+ <i class="fas fa-comments"></i> 会話詳細を表示
146
+ </button>
147
+ <button onclick="resetAction()">
148
+ <i class="fas fa-redo"></i> リセット
149
+ </button>
150
+ <button onclick="toggleMenu(event)">
151
+ <i class="fas fa-times"></i> 閉じる
152
+ </button>
153
+ </div>
154
+ </div>
155
+
156
+ <!-- Feedback Details -->
157
+ <div class="text-xl font-semibold mb-6" id="level">会話レベル:</div>
158
+ <div class="text-lg mb-2" id="Harassment_bool">ハラスメントの有無:</div>
159
+ <div class="text-lg mb-2" id="Harassment_type">ハラスメントの種類:</div>
160
+ <div class="text-lg mb-2" id="Harassment_loop">繰り返しの程度:</div>
161
+ <div class="text-lg mb-2" id="Harassment_comfort">会話の心地よさ:</div>
162
+ <div class="text-lg mb-2" id="Harassment_volume">
163
+ 非難またはハラスメントの程度:
164
+ </div>
165
+ </div>
166
+
167
+ <script src="{{ url_for('static', filename='menu.js') }}"></script>
168
+ <script src="{{ url_for('static', filename='feedback.js') }}"></script>
169
+ </body>
170
+ </html>
 
 
 
 
templates/index.html CHANGED
@@ -152,6 +152,37 @@
152
  #menuButton:hover {
153
  background-color: rgba(255, 255, 255, 0.2);
154
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
155
  </style>
156
  </head>
157
  <body onclick="closeMenu(event)">
@@ -179,6 +210,9 @@
179
  <button onclick="showUserRegister()">
180
  <i class="fas fa-user-plus"></i> メンバーを追加
181
  </button>
 
 
 
182
  <button onclick="showRecorder()">
183
  <i class="fas fa-microphone"></i> 録音画面を表示
184
  </button>
@@ -197,6 +231,11 @@
197
  </div>
198
  </div>
199
 
 
 
 
 
 
200
  <!-- Chart Display -->
201
  <div class="chart w-72 h-72 mb-5 mx-auto">
202
  <canvas id="speechChart"></canvas>
@@ -224,5 +263,60 @@
224
 
225
  <script src="{{ url_for('static', filename='process.js') }}"></script>
226
  <script src="{{ url_for('static', filename='menu.js') }}"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
227
  </body>
228
- </html>
 
152
  #menuButton:hover {
153
  background-color: rgba(255, 255, 255, 0.2);
154
  }
155
+
156
+ /* Member Chips Style */
157
+ .member-chips {
158
+ display: flex;
159
+ flex-wrap: wrap;
160
+ justify-content: center;
161
+ gap: 0.5rem;
162
+ margin-bottom: 1.5rem;
163
+ }
164
+
165
+ .member-chip {
166
+ background: rgba(255, 255, 255, 0.2);
167
+ border-radius: 999px;
168
+ padding: 0.4rem 0.8rem;
169
+ font-size: 0.8rem;
170
+ color: white;
171
+ display: inline-flex;
172
+ align-items: center;
173
+ gap: 0.5rem;
174
+ }
175
+
176
+ .member-avatar {
177
+ width: 1.5rem;
178
+ height: 1.5rem;
179
+ background: rgba(255, 255, 255, 0.3);
180
+ border-radius: 50%;
181
+ display: flex;
182
+ align-items: center;
183
+ justify-content: center;
184
+ font-size: 0.75rem;
185
+ }
186
  </style>
187
  </head>
188
  <body onclick="closeMenu(event)">
 
210
  <button onclick="showUserRegister()">
211
  <i class="fas fa-user-plus"></i> メンバーを追加
212
  </button>
213
+ <button onclick="showUserSelect()">
214
+ <i class="fas fa-users"></i> メンバーを選択
215
+ </button>
216
  <button onclick="showRecorder()">
217
  <i class="fas fa-microphone"></i> 録音画面を表示
218
  </button>
 
231
  </div>
232
  </div>
233
 
234
+ <!-- Selected Member Chips -->
235
+ <div class="member-chips" id="memberChips">
236
+ <!-- Member chips will be dynamically added here -->
237
+ </div>
238
+
239
  <!-- Chart Display -->
240
  <div class="chart w-72 h-72 mb-5 mx-auto">
241
  <canvas id="speechChart"></canvas>
 
263
 
264
  <script src="{{ url_for('static', filename='process.js') }}"></script>
265
  <script src="{{ url_for('static', filename='menu.js') }}"></script>
266
+ <script>
267
+
268
+
269
+ // 選択されたメンバーの表示を更新する関数
270
+ function updateSelectedMembers() {
271
+ // ローカルストレージから選択されたメンバーを取得
272
+ let selectedUsers = [];
273
+ try {
274
+ const stored = localStorage.getItem('selectedUsers');
275
+ if (stored) {
276
+ selectedUsers = JSON.parse(stored);
277
+ }
278
+ } catch (e) {
279
+ console.error('選択メンバーの読み込みエラー:', e);
280
+ }
281
+
282
+ // メンバーチップを表示
283
+ const memberChipsContainer = document.getElementById('memberChips');
284
+ memberChipsContainer.innerHTML = '';
285
+
286
+ if (selectedUsers.length === 0) {
287
+ // メンバーがいない場合の表示
288
+ const noMembers = document.createElement('div');
289
+ noMembers.className = 'text-white opacity-50 text-sm';
290
+ noMembers.textContent = 'メンバーが選択されていません';
291
+ memberChipsContainer.appendChild(noMembers);
292
+ return;
293
+ }
294
+
295
+ // 現在選択されているメンバー数を表示
296
+ const countChip = document.createElement('div');
297
+ countChip.className = 'member-chip';
298
+ countChip.style.backgroundColor = 'rgba(66, 153, 225, 0.5)'; // 青っぽい背景
299
+ countChip.innerHTML = `<i class="fas fa-users"></i> ${selectedUsers.length}人のメンバーを選択中`;
300
+ memberChipsContainer.appendChild(countChip);
301
+
302
+ // 各メンバーをチップとして表示
303
+ selectedUsers.forEach(member => {
304
+ const chip = document.createElement('div');
305
+ chip.className = 'member-chip';
306
+
307
+ const avatar = document.createElement('div');
308
+ avatar.className = 'member-avatar';
309
+ avatar.textContent = member.substr(0, 1).toUpperCase();
310
+
311
+ chip.appendChild(avatar);
312
+ chip.appendChild(document.createTextNode(member));
313
+
314
+ memberChipsContainer.appendChild(chip);
315
+ });
316
+ }
317
+
318
+ // ページ読み込み時にメンバー表示を更新
319
+ document.addEventListener('DOMContentLoaded', updateSelectedMembers);
320
+ </script>
321
  </body>
322
+ </html>
templates/reset.html CHANGED
@@ -1,162 +1,39 @@
1
- <!DOCTYPE html>
2
- <html lang="ja" class="dark">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>リセット画面</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <script src="https://use.fontawesome.com/releases/v5.10.0/js/all.js"></script>
9
- <style>
10
- /* Main Container */
11
- body {
12
- background: linear-gradient(135deg, #2c3e50, #1f2937);
13
- display: flex;
14
- align-items: center;
15
- justify-content: center;
16
- min-height: 100vh;
17
- font-family: "Arial", sans-serif;
18
- color: #fff;
19
- }
20
-
21
- .main-content {
22
- border: 5px solid rgba(255, 255, 255, 0.2);
23
- border-radius: 1rem;
24
- margin: 1rem auto; /* 中央揃え */
25
- width: 90%;
26
- max-width: 500px;
27
- /*width: 100%; */ /* 枠線全体を広げる */
28
- /*max-width: 90%;*/ /* 最大幅を画面の90%に設定 */
29
- }
30
-
31
- /* Hamburger Menu Button */
32
- #menuButton {
33
- background-color: rgba(255, 255, 255, 0.1);
34
- border: none;
35
- border-radius: 50%;
36
- padding: 0.5rem;
37
- cursor: pointer;
38
- transition: background-color 0.2s ease;
39
- }
40
-
41
- #menuButton:hover {
42
- background-color: rgba(255, 255, 255, 0.2);
43
- }
44
-
45
- /* Hamburger Menu Styles */
46
- #menu {
47
- position: absolute;
48
- top: 0;
49
- left: 0;
50
- z-index: 10;
51
- transform: translateX(-100%);
52
- visibility: hidden;
53
- opacity: 0;
54
- background-color: rgb(31, 41, 55);
55
- transition: transform 0.3s ease-in-out, visibility 0s 0.3s,
56
- opacity 0.3s ease-in-out;
57
- backdrop-filter: blur(10px);
58
- border-right: 1px solid rgba(255, 255, 255, 0.2);
59
- }
60
-
61
- #menu.open {
62
- transform: translateX(0);
63
- visibility: visible;
64
- opacity: 1;
65
- transition: transform 0.3s ease-in-out, visibility 0s 0s,
66
- opacity 0.3s ease-in-out;
67
- }
68
-
69
- #menu button {
70
- transition: background-color 0.2s ease;
71
- background-color: rgba(0, 0, 0, 0.1);
72
- margin: 2px;
73
- border-radius: 5px;
74
- display: flex;
75
- align-items: center;
76
- justify-content: flex-start;
77
- gap: 10px;
78
- padding: 0.75rem 1rem;
79
- width: 100%;
80
- text-align: left;
81
- border: none;
82
- color: #fff;
83
- font-size: 1rem;
84
- cursor: pointer;
85
- }
86
-
87
- #menu button:hover {
88
- background-color: rgba(55, 65, 81, 0.7);
89
- }
90
- </style>
91
- </head>
92
- <body>
93
- <div class="main-content relative">
94
- <div class="p-6 bg-white dark:bg-gray-800 shadow-lg rounded-2xl">
95
- <h2 class="text-2xl font-semibold mb-4 text-center">
96
- メンバーを消去しますか？
97
- </h2>
98
-
99
- <!-- Hamburger Menu -->
100
- <div class="absolute top-4 left-4">
101
- <button
102
- id="menuButton"
103
- class="text-white text-2xl focus:outline-none"
104
- onclick="toggleMenu(event)"
105
- >
106
- <i class="fas fa-bars"></i>
107
- </button>
108
-
109
- <!-- Menu Content -->
110
- <div
111
- id="menu"
112
- 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"
113
- >
114
- <div class="px-4 py-2 text-lg font-semibold">メニュー</div>
115
- <button onclick="showUserRegister()">
116
- <i class="fas fa-user-plus"></i> メンバーを追加
117
- </button>
118
- <button onclick="showRecorder()">
119
- <i class="fas fa-microphone"></i> 録音画面を表示
120
- </button>
121
- <button onclick="showResults()">
122
- <i class="fas fa-chart-bar"></i> フィードバックを表示
123
- </button>
124
- <button onclick="showTalkDetail()">
125
- <i class="fas fa-comments"></i> 会話詳細を表示
126
- </button>
127
- <button onclick="resetAction()">
128
- <i class="fas fa-redo"></i> リセット
129
- </button>
130
- <button onclick="toggleMenu(event)">
131
- <i class="fas fa-times"></i> 閉じる
132
- </button>
133
- </div>
134
- </div>
135
- <!-- Hamburger Menu End -->
136
-
137
- <input type="button" id="select-all" value="全選択" />
138
- <div id="memberCheckboxes">
139
- <!--ここにチャックボックスを表示してほしい-->
140
- </div>
141
-
142
- <div class="flex justify-center gap-4">
143
- <button
144
- id="reset_btn"
145
- class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
146
- >
147
- メンバー削除
148
- </button>
149
-
150
- <button
151
- class="px-6 py-2 bg-[#607d8b] text-white rounded-lg hover:bg-[#546e7a] transition-colors"
152
- onclick="showRecorder()"
153
- >
154
- 録音画面を��示
155
- </button>
156
- </div>
157
- </div>
158
- </div>
159
- <script src="{{ url_for('static', filename='reset.js') }}"></script>
160
- <script src="{{ url_for('static', filename='menu.js') }}"></script>
161
- </body>
162
- </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="ja" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>リセット画面</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ </head>
9
+ <body
10
+ class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center"
11
+ >
12
+ <div
13
+ class="container mx-auto p-6 bg-white dark:bg-gray-800 shadow-lg rounded-2xl"
14
+ >
15
+ <h2 class="text-2xl font-semibold mb-4">メンバーを消去しますか？</h2>
16
+ <input type="button" id="select-all" value="全選択" />
17
+ <div id="memberCheckboxes">
18
+ <!--ここにチャックボックスを表示してほしい-->
19
+ </div>
20
+
21
+ <div class="flex justify-center gap-4">
22
+ <button
23
+ id="reset_btn"
24
+ class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
25
+ >
26
+ メンバー削除
27
+ </button>
28
+
29
+ <button
30
+ class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
31
+ onclick="showRecorder()"
32
+ >
33
+ 録音画面を表示
34
+ </button>
35
+ </div>
36
+ </div>
37
+ <script src="{{ url_for('static', filename='reset.js') }}"></script>
38
+ </body>
39
+ </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
templates/talkDetail.html CHANGED
@@ -1,160 +1,49 @@
1
- <!DOCTYPE html>
2
- <html lang="ja" class="dark">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>会話詳細画面</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <script src="https://use.fontawesome.com/releases/v5.10.0/js/all.js"></script>
9
- <link
10
- rel="stylesheet"
11
- href="{{ url_for('static', filename='loading.css') }}"
12
- />
13
- <style>
14
- /* Main Container */
15
- body {
16
- background: linear-gradient(135deg, #2c3e50, #1f2937);
17
- display: flex;
18
- align-items: center;
19
- justify-content: center;
20
- min-height: 100vh;
21
- font-family: "Arial", sans-serif;
22
- color: #fff;
23
- }
24
-
25
- .main-content {
26
- border: 5px solid rgba(255, 255, 255, 0.2);
27
- border-radius: 1rem;
28
- margin: 1rem; /* 外側の余白 */
29
- width: 90%;
30
- max-width: 500px;
31
- /*width: 100%; */ /* 枠線全体を広げる */
32
- /*max-width: 90%;*/ /* 最大幅を画面の90%に設定 */
33
- }
34
-
35
- /* Hamburger Menu Button */
36
- #menuButton {
37
- background-color: rgba(255, 255, 255, 0.1);
38
- border: none;
39
- border-radius: 50%;
40
- padding: 0.5rem;
41
- cursor: pointer;
42
- transition: background-color 0.2s ease;
43
- }
44
-
45
- #menuButton:hover {
46
- background-color: rgba(255, 255, 255, 0.2);
47
- }
48
-
49
- /* Hamburger Menu Styles */
50
- #menu {
51
- position: absolute;
52
- top: 0;
53
- left: 0;
54
- z-index: 10;
55
- transform: translateX(-100%);
56
- visibility: hidden;
57
- opacity: 0;
58
- background-color: rgb(31, 41, 55);
59
- transition: transform 0.3s ease-in-out, visibility 0s 0.3s,
60
- opacity 0.3s ease-in-out;
61
- backdrop-filter: blur(10px);
62
- border-right: 1px solid rgba(255, 255, 255, 0.2);
63
- }
64
-
65
- #menu.open {
66
- transform: translateX(0);
67
- visibility: visible;
68
- opacity: 1;
69
- transition: transform 0.3s ease-in-out, visibility 0s 0s,
70
- opacity 0.3s ease-in-out;
71
- }
72
-
73
- #menu button {
74
- transition: background-color 0.2s ease;
75
- background-color: rgba(0, 0, 0, 0.1);
76
- margin: 2px;
77
- border-radius: 5px;
78
- display: flex;
79
- align-items: center;
80
- justify-content: flex-start;
81
- gap: 10px;
82
- padding: 0.75rem 1rem;
83
- width: 100%;
84
- text-align: left;
85
- border: none;
86
- color: #fff;
87
- font-size: 1rem;
88
- cursor: pointer;
89
- }
90
-
91
- #menu button:hover {
92
- background-color: rgba(55, 65, 81, 0.7);
93
- }
94
- </style>
95
- </head>
96
- <body>
97
- <div class="main-content relative">
98
- <div class="loader" id="loader">
99
- <div class="one"></div>
100
- <div class="two"></div>
101
- <div class="three"></div>
102
- <div class="four"></div>
103
- </div>
104
- <div
105
- class="container mx-auto p-6 bg-white dark:bg-gray-800 shadow-lg rounded-2xl w-full max-w-none"
106
- >
107
- <h2 class="text-2xl font-semibold mb-4 text-center">
108
- 会話の文字起こし表示
109
- </h2>
110
-
111
- <!-- Hamburger Menu -->
112
- <div class="absolute top-4 left-4">
113
- <button
114
- id="menuButton"
115
- class="text-white text-2xl focus:outline-none"
116
- onclick="toggleMenu(event)"
117
- >
118
- <i class="fas fa-bars"></i>
119
- </button>
120
-
121
- <!-- Menu Content -->
122
- <div
123
- id="menu"
124
- 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"
125
- >
126
- <div class="px-4 py-2 text-lg font-semibold">メニュー</div>
127
- <button onclick="showUserRegister()">
128
- <i class="fas fa-user-plus"></i> メンバーを追加
129
- </button>
130
- <button onclick="showRecorder()">
131
- <i class="fas fa-microphone"></i> 録音画面を表示
132
- </button>
133
- <button onclick="showResults()">
134
- <i class="fas fa-chart-bar"></i> フィードバックを表示
135
- </button>
136
- <button onclick="showTalkDetail()">
137
- <i class="fas fa-comments"></i> 会話詳細を表示
138
- </button>
139
- <button onclick="resetAction()">
140
- <i class="fas fa-redo"></i> リセット
141
- </button>
142
- <button onclick="toggleMenu(event)">
143
- <i class="fas fa-times"></i> 閉じる
144
- </button>
145
- </div>
146
- </div>
147
- <!-- Hamburger Menu End -->
148
-
149
- <div
150
- id="transcription"
151
- class="p-4 bg-gray-200 dark:bg-gray-700 rounded-lg mb-4 max-h-96 overflow-y-auto"
152
- >
153
- ここに会話内容が表示されます。
154
- </div>
155
- </div>
156
- <script src="{{ url_for('static', filename='talk_detail.js') }}"></script>
157
- <script src="{{ url_for('static', filename='menu.js') }}"></script>
158
- </div>
159
- </body>
160
- </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="ja" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>会話詳細画面</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link
9
+ rel="stylesheet"
10
+ href="{{ url_for('static', filename='loading.css') }}"
11
+ />
12
+ </head>
13
+ <body
14
+ class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center"
15
+ >
16
+ <div class="loader" id="loader">
17
+ <div class="one"></div>
18
+ <div class="two"></div>
19
+ <div class="three"></div>
20
+ <div class="four"></div>
21
+ </div>
22
+ <div
23
+ class="container mx-auto p-6 bg-white dark:bg-gray-800 shadow-lg rounded-2xl"
24
+ >
25
+ <h2 class="text-2xl font-semibold mb-4">会話の文字起こし表示</h2>
26
+ <div
27
+ id="transcription"
28
+ class="p-4 bg-gray-200 dark:bg-gray-700 rounded-lg mb-4 max-h-96 overflow-y-auto"
29
+ >
30
+ ここに会話内容が表示されます。
31
+ </div>
32
+ <div class="flex justify-center gap-4">
33
+ <button
34
+ class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
35
+ onclick="showRecorder()"
36
+ >
37
+ 録音画面を表示
38
+ </button>
39
+ <button
40
+ class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
41
+ onclick="showFeedback()"
42
+ >
43
+ フィードバック画面を表示
44
+ </button>
45
+ </div>
46
+ </div>
47
+ <script src="{{ url_for('static', filename='talk_detail.js') }}"></script>
48
+ </body>
49
+ </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
templates/userRegister.html CHANGED
@@ -1,148 +1,151 @@
1
- <!DOCTYPE html>
2
- <html lang="ja">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <title>ユーザー音声登録</title>
6
- <script src="https://cdn.tailwindcss.com"></script>
7
- <script src="https://use.fontawesome.com/releases/v5.10.0/js/all.js"></script>
8
- <style>
9
- @keyframes pulse-scale {
10
- 0%,
11
- 100% {
12
- transform: scale(1);
13
- }
14
- 50% {
15
- transform: scale(1.1);
16
- }
17
- }
18
- .animate-pulse-scale {
19
- animation: pulse-scale 1s infinite;
20
- }
21
-
22
- /* Record Button Styles */
23
- .record-button {
24
- width: 50px;
25
- height: 50px;
26
- background-color: transparent;
27
- border-radius: 50%;
28
- border: 2px solid white;
29
- display: flex;
30
- justify-content: center;
31
- align-items: center;
32
- cursor: pointer;
33
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
34
- transition: all 0.3s ease;
35
- }
36
- .record-icon {
37
- width: 35px;
38
- height: 35px;
39
- background-color: #d32f2f;
40
- border-radius: 50%;
41
- transition: all 0.3s ease;
42
- }
43
- .record-button.recording .record-icon {
44
- background-color: #f44336; /* 録音中は赤色 */
45
- border-radius: 4px; /* 録音時に赤い部分だけ四角にする */
46
- }
47
- .recording .record-icon {
48
- width: 20px;
49
- height: 20px;
50
- border-radius: 50%;
51
- }
52
-
53
- /* Main Container */
54
- body {
55
- background: linear-gradient(135deg, #2c3e50, #1f2937);
56
- display: flex;
57
- align-items: center;
58
- justify-content: center;
59
- min-height: 100vh;
60
- font-family: "Arial", sans-serif;
61
- }
62
-
63
- /* Main Content Wrapper */
64
- .main-content {
65
- border: 5px solid rgba(255, 255, 255, 0.2);
66
- padding: 2rem;
67
- border-radius: 1rem;
68
- width: 90%;
69
- max-width: 500px;
70
- background-color: rgba(0, 0, 0, 0.3);
71
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
72
- text-align: center;
73
- }
74
-
75
- /* Title */
76
- .main-title {
77
- font-size: 2.5rem;
78
- font-weight: bold;
79
- margin-bottom: 1.5rem;
80
- color: #fff;
81
- text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
82
- }
83
-
84
- /* Buttons */
85
- .action-button {
86
- margin-top: 1rem;
87
- padding: 0.75rem 1.5rem;
88
- border-radius: 0.5rem;
89
- cursor: pointer;
90
- transition: background-color 0.2s ease;
91
- width: 100%;
92
- }
93
-
94
- .action-button:hover {
95
- background-color: rgba(55, 65, 81, 0.7);
96
- }
97
-
98
- .back-button {
99
- background-color: #607d8b; /* 落ち着いたグレー */
100
- color: white;
101
- }
102
-
103
- .add-button {
104
- background-color: #4caf50; /* 落ち着いた緑色 */
105
- color: white;
106
- }
107
-
108
- /* Disabled State */
109
- .disabled {
110
- opacity: 0.5;
111
- pointer-events: none;
112
- }
113
-
114
- /* Responsive Design */
115
- @media (max-width: 640px) {
116
- .main-content {
117
- padding: 1.5rem;
118
- }
119
- }
120
- </style>
121
- </head>
122
- <body>
123
- <!-- Main Content Wrapper -->
124
- <div class="main-content relative">
125
- <!-- Title -->
126
- <div class="main-title">JustTalk</div>
127
-
128
- <!-- User List -->
129
- <div id="people-list" class="space-y-4"></div>
130
-
131
- <!-- Add Button -->
132
- <button id="add-btn" class="action-button add-button">
133
- <i class="fas fa-user-plus"></i> メンバーを追加
134
- </button>
135
-
136
- <!-- 録音画面へ移動ボタン(Back Buttonから変更) -->
137
- <button
138
- id="backButton"
139
- onclick="showRecorder()"
140
- class="action-button back-button"
141
- >
142
- <i class="fas fa-microphone"></i> 録音画面を表示
143
- </button>
144
- </div>
145
-
146
- <script src="{{ url_for('static', filename='register_record.js') }}"></script>
147
- </body>
148
- </html>
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ja">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <title>ユーザー音声登録</title>
6
+ <script src="https://cdn.tailwindcss.com"></script>
7
+ <script src="https://use.fontawesome.com/releases/v5.10.0/js/all.js"></script>
8
+ <style>
9
+ @keyframes pulse-scale {
10
+ 0%,
11
+ 100% {
12
+ transform: scale(1);
13
+ }
14
+ 50% {
15
+ transform: scale(1.1);
16
+ }
17
+ }
18
+ .animate-pulse-scale {
19
+ animation: pulse-scale 1s infinite;
20
+ }
21
+
22
+ /* Record Button Styles */
23
+ .record-button {
24
+ width: 50px;
25
+ height: 50px;
26
+ background-color: transparent;
27
+ border-radius: 50%;
28
+ border: 2px solid white;
29
+ display: flex;
30
+ justify-content: center;
31
+ align-items: center;
32
+ cursor: pointer;
33
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
34
+ transition: all 0.3s ease;
35
+ }
36
+ .record-icon {
37
+ width: 35px;
38
+ height: 35px;
39
+ background-color: #d32f2f;
40
+ border-radius: 50%;
41
+ transition: all 0.3s ease;
42
+ }
43
+ .record-button.recording .record-icon {
44
+ background-color: #f44336; /* 録音中は赤色 */
45
+ border-radius: 4px; /* 録音時に赤い部分だけ四角にする */
46
+ }
47
+ .recording .record-icon {
48
+ width: 20px;
49
+ height: 20px;
50
+ border-radius: 50%;
51
+ }
52
+
53
+ /* Main Container */
54
+ body {
55
+ background: linear-gradient(135deg, #2c3e50, #1f2937);
56
+ display: flex;
57
+ align-items: center;
58
+ justify-content: center;
59
+ min-height: 100vh;
60
+ font-family: "Arial", sans-serif;
61
+ }
62
+
63
+ /* Main Content Wrapper */
64
+ .main-content {
65
+ border: 5px solid rgba(255, 255, 255, 0.2);
66
+ padding: 2rem;
67
+ border-radius: 1rem;
68
+ width: 90%;
69
+ max-width: 500px;
70
+ background-color: rgba(0, 0, 0, 0.3);
71
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
72
+ text-align: center;
73
+ }
74
+
75
+ /* Title */
76
+ .main-title {
77
+ font-size: 2.5rem;
78
+ font-weight: bold;
79
+ margin-bottom: 1.5rem;
80
+ color: #fff;
81
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
82
+ }
83
+
84
+ /* Buttons */
85
+ .action-button {
86
+ margin-top: 1rem;
87
+ padding: 0.75rem 1.5rem;
88
+ border-radius: 0.5rem;
89
+ cursor: pointer;
90
+ transition: background-color 0.2s ease;
91
+ width: 100%;
92
+ }
93
+
94
+ .action-button:hover {
95
+ background-color: rgba(55, 65, 81, 0.7);
96
+ }
97
+
98
+ .back-button {
99
+ background-color: #607d8b; /* 落ち着いたグレー */
100
+ color: white;
101
+ }
102
+
103
+ .add-button {
104
+ background-color: #4caf50; /* 落ち着いた緑色 */
105
+ color: white;
106
+ }
107
+
108
+ /* Disabled State */
109
+ .disabled {
110
+ opacity: 0.5;
111
+ pointer-events: none;
112
+ }
113
+
114
+ /* Responsive Design */
115
+ @media (max-width: 640px) {
116
+ .main-content {
117
+ padding: 1.5rem;
118
+ }
119
+ }
120
+ </style>
121
+ </head>
122
+ <body>
123
+ <!-- Main Content Wrapper -->
124
+ <div class="main-content relative">
125
+ <!-- Title -->
126
+ <div class="main-title">ユーザー音声登録</div>
127
+
128
+ <!-- User List -->
129
+ <div id="people-list" class="space-y-4"></div>
130
+
131
+ <!-- Add Button -->
132
+ <button id="add-btn" class="action-button add-button">
133
+ <i class="fas fa-user-plus"></i> メンバーを追加
134
+ </button>
135
+
136
+ <!-- Back Button -->
137
+ <button
138
+ id="backButton"
139
+ onclick="goBack()"
140
+ class="action-button back-button"
141
+ >
142
+ 戻る
143
+ </button>
144
+ </div>
145
+
146
+ <script src="{{ url_for('static', filename='register_record.js') }}"></script>
147
+
148
+
149
+
150
+ </body>
151
+ </html>
templates/userSelect.html ADDED
@@ -0,0 +1,416 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ja">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>メンバー選択 - JustTalk</title>
7
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.0/css/all.css" />
8
+ <style>
9
+ body {
10
+ font-family: 'Helvetica Neue', Arial, sans-serif;
11
+ margin: 0;
12
+ padding: 0;
13
+ background: linear-gradient(135deg, #2c3e50, #1f2937);
14
+ color: white;
15
+ min-height: 100vh;
16
+ display: flex;
17
+ align-items: center;
18
+ justify-content: center;
19
+ }
20
+
21
+ .container {
22
+ max-width: 500px;
23
+ margin: 0 auto;
24
+ padding: 30px;
25
+ border: 5px solid rgba(255, 255, 255, 0.2);
26
+ border-radius: 1rem;
27
+ background-color: rgba(0, 0, 0, 0.3);
28
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
29
+ width: 90%;
30
+ position: relative;
31
+ }
32
+
33
+ h1 {
34
+ color: white;
35
+ text-align: center;
36
+ margin-bottom: 30px;
37
+ font-size: 1.8rem;
38
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
39
+ }
40
+
41
+ .user-list {
42
+ background-color: rgba(255, 255, 255, 0.1);
43
+ border-radius: 10px;
44
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
45
+ padding: 15px;
46
+ margin-bottom: 25px;
47
+ max-height: 350px;
48
+ overflow-y: auto;
49
+ }
50
+
51
+ .user-item {
52
+ display: flex;
53
+ align-items: center;
54
+ padding: 12px 15px;
55
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
56
+ transition: background-color 0.2s;
57
+ }
58
+
59
+ .user-item:last-child {
60
+ border-bottom: none;
61
+ }
62
+
63
+ .user-item:hover {
64
+ background-color: rgba(255, 255, 255, 0.05);
65
+ }
66
+
67
+ .user-item label {
68
+ margin-left: 12px;
69
+ font-size: 16px;
70
+ cursor: pointer;
71
+ flex-grow: 1;
72
+ color: white;
73
+ }
74
+
75
+ input[type="checkbox"] {
76
+ cursor: pointer;
77
+ width: 18px;
78
+ height: 18px;
79
+ accent-color: #3498db;
80
+ }
81
+
82
+ .button-container {
83
+ display: flex;
84
+ justify-content: space-between;
85
+ margin-top: 25px;
86
+ }
87
+
88
+ button {
89
+ background-color: #3498db;
90
+ color: white;
91
+ border: none;
92
+ border-radius: 8px;
93
+ padding: 12px 20px;
94
+ font-size: 16px;
95
+ cursor: pointer;
96
+ transition: background-color 0.3s, transform 0.1s;
97
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
98
+ }
99
+
100
+ button:hover {
101
+ background-color: #2980b9;
102
+ }
103
+
104
+ button:active {
105
+ transform: translateY(1px);
106
+ }
107
+
108
+ button:disabled {
109
+ background-color: #95a5a6;
110
+ cursor: not-allowed;
111
+ opacity: 0.7;
112
+ }
113
+
114
+ button.secondary {
115
+ background-color: rgba(255, 255, 255, 0.2);
116
+ }
117
+
118
+ button.secondary:hover {
119
+ background-color: rgba(255, 255, 255, 0.3);
120
+ }
121
+
122
+ .selected-count {
123
+ margin: 15px 0;
124
+ text-align: center;
125
+ font-weight: bold;
126
+ color: #3498db;
127
+ font-size: 18px;
128
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
129
+ }
130
+
131
+ .no-users {
132
+ text-align: center;
133
+ padding: 30px;
134
+ color: rgba(255, 255, 255, 0.7);
135
+ font-style: italic;
136
+ }
137
+
138
+ .loading {
139
+ text-align: center;
140
+ padding: 30px;
141
+ color: white;
142
+ }
143
+
144
+ .spinner {
145
+ border: 4px solid rgba(255, 255, 255, 0.1);
146
+ width: 36px;
147
+ height: 36px;
148
+ border-radius: 50%;
149
+ border-left-color: #3498db;
150
+ animation: spin 1s linear infinite;
151
+ margin: 0 auto 15px;
152
+ }
153
+
154
+ @keyframes spin {
155
+ 0% { transform: rotate(0deg); }
156
+ 100% { transform: rotate(360deg); }
157
+ }
158
+
159
+ /* User Avatar */
160
+ .user-avatar {
161
+ width: 30px;
162
+ height: 30px;
163
+ background: rgba(255, 255, 255, 0.2);
164
+ border-radius: 50%;
165
+ display: flex;
166
+ align-items: center;
167
+ justify-content: center;
168
+ font-size: 14px;
169
+ margin-left: 10px;
170
+ }
171
+
172
+ /* Hamburger Menu Styles */
173
+ #menu {
174
+ position: absolute;
175
+ top: 0;
176
+ left: 0;
177
+ z-index: 10;
178
+ transform: translateX(-100%);
179
+ visibility: hidden;
180
+ opacity: 0;
181
+ background-color: rgb(31, 41, 55);
182
+ transition: transform 0.3s ease-in-out, visibility 0s 0.3s,
183
+ opacity 0.3s ease-in-out;
184
+ backdrop-filter: blur(10px);
185
+ border-right: 1px solid rgba(255, 255, 255, 0.2);
186
+ height: 100%;
187
+ }
188
+
189
+ #menu.open {
190
+ transform: translateX(0);
191
+ visibility: visible;
192
+ opacity: 1;
193
+ transition: transform 0.3s ease-in-out, visibility 0s 0s,
194
+ opacity 0.3s ease-in-out;
195
+ }
196
+
197
+ #menu button {
198
+ transition: background-color 0.2s ease;
199
+ background-color: rgba(0, 0, 0, 0.1);
200
+ margin: 2px;
201
+ border-radius: 5px;
202
+ display: flex;
203
+ align-items: center;
204
+ justify-content: flex-start;
205
+ gap: 10px;
206
+ padding: 0.75rem 1rem;
207
+ width: 100%;
208
+ text-align: left;
209
+ border: none;
210
+ color: #fff;
211
+ font-size: 1rem;
212
+ cursor: pointer;
213
+ box-shadow: none;
214
+ }
215
+
216
+ #menu button:hover {
217
+ background-color: rgba(55, 65, 81, 0.7);
218
+ }
219
+
220
+ #menuButton {
221
+ background-color: rgba(255, 255, 255, 0.1);
222
+ border: none;
223
+ border-radius: 50%;
224
+ padding: 0.5rem;
225
+ cursor: pointer;
226
+ transition: background-color 0.2s ease;
227
+ position: absolute;
228
+ top: 20px;
229
+ left: 20px;
230
+ box-shadow: none;
231
+ font-size: 18px;
232
+ width: 40px;
233
+ height: 40px;
234
+ display: flex;
235
+ align-items: center;
236
+ justify-content: center;
237
+ }
238
+
239
+ #menuButton:hover {
240
+ background-color: rgba(255, 255, 255, 0.2);
241
+ }
242
+
243
+ /* Select All Button */
244
+ .select-controls {
245
+ display: flex;
246
+ justify-content: center;
247
+ margin-bottom: 15px;
248
+ gap: 10px;
249
+ }
250
+
251
+ .select-button {
252
+ background-color: rgba(255, 255, 255, 0.15);
253
+ color: white;
254
+ border: none;
255
+ border-radius: 5px;
256
+ padding: 8px 15px;
257
+ font-size: 14px;
258
+ cursor: pointer;
259
+ transition: background-color 0.2s;
260
+ }
261
+
262
+ .select-button:hover {
263
+ background-color: rgba(255, 255, 255, 0.25);
264
+ }
265
+
266
+ /* Delete Button */
267
+ .delete-button {
268
+ background-color: transparent;
269
+ color: #e74c3c;
270
+ border: none;
271
+ border-radius: 50%;
272
+ width: 30px;
273
+ height: 30px;
274
+ display: flex;
275
+ align-items: center;
276
+ justify-content: center;
277
+ cursor: pointer;
278
+ transition: background-color 0.2s;
279
+ padding: 0;
280
+ margin-left: 5px;
281
+ box-shadow: none;
282
+ }
283
+
284
+ .delete-button:hover {
285
+ background-color: rgba(231, 76, 60, 0.2);
286
+ }
287
+
288
+ /* Modal Dialog */
289
+ .modal {
290
+ display: none;
291
+ position: fixed;
292
+ z-index: 100;
293
+ left: 0;
294
+ top: 0;
295
+ width: 100%;
296
+ height: 100%;
297
+ background-color: rgba(0, 0, 0, 0.5);
298
+ align-items: center;
299
+ justify-content: center;
300
+ }
301
+
302
+ .modal-content {
303
+ background-color: rgb(31, 41, 55);
304
+ border-radius: 10px;
305
+ padding: 20px;
306
+ width: 90%;
307
+ max-width: 400px;
308
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
309
+ border: 1px solid rgba(255, 255, 255, 0.1);
310
+ }
311
+
312
+ .modal-title {
313
+ font-size: 18px;
314
+ margin-bottom: 15px;
315
+ color: white;
316
+ }
317
+
318
+ .modal-text {
319
+ margin-bottom: 20px;
320
+ color: rgba(255, 255, 255, 0.9);
321
+ }
322
+
323
+ .modal-buttons {
324
+ display: flex;
325
+ justify-content: flex-end;
326
+ gap: 10px;
327
+ }
328
+
329
+ .modal-cancel {
330
+ background-color: rgba(255, 255, 255, 0.2);
331
+ color: white;
332
+ }
333
+
334
+ .modal-delete {
335
+ background-color: #e74c3c;
336
+ }
337
+
338
+ .modal-delete:hover {
339
+ background-color: #c0392b;
340
+ }
341
+ </style>
342
+ </head>
343
+ <body onclick="closeMenu(event)">
344
+ <div class="container">
345
+ <!-- Hamburger Menu Button -->
346
+ <button
347
+ id="menuButton"
348
+ class="text-white focus:outline-none"
349
+ onclick="toggleMenu(event)"
350
+ >
351
+ <i class="fas fa-bars"></i>
352
+ </button>
353
+
354
+ <!-- Menu Content -->
355
+ <div
356
+ id="menu"
357
+ 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"
358
+ >
359
+ <div class="px-4 py-2 text-lg font-semibold">メニュー</div>
360
+ <button onclick="showUserRegister()">
361
+ <i class="fas fa-user-plus"></i> メンバーを追加
362
+ </button>
363
+ <button onclick="showIndex()">
364
+ <i class="fas fa-home"></i> ホーム画面
365
+ </button>
366
+ <button onclick="showResults()">
367
+ <i class="fas fa-chart-bar"></i> フィードバックを表示
368
+ </button>
369
+ <button onclick="showTalkDetail()">
370
+ <i class="fas fa-comments"></i> 会話詳細を表示
371
+ </button>
372
+ <button onclick="resetAction()">
373
+ <i class="fas fa-redo"></i> リセット
374
+ </button>
375
+ <button onclick="toggleMenu(event)">
376
+ <i class="fas fa-times"></i> 閉じる
377
+ </button>
378
+ </div>
379
+
380
+ <h1>会話分析に使用するメンバーを選択</h1>
381
+
382
+ <div class="select-controls">
383
+ <button class="select-button" onclick="selectAllUsers()">すべて選択</button>
384
+ <button class="select-button" onclick="deselectAllUsers()">選択解除</button>
385
+ </div>
386
+
387
+ <div class="user-list" id="userList">
388
+ <div class="loading">
389
+ <div class="spinner"></div>
390
+ <p>メンバーリストを読み込み中...</p>
391
+ </div>
392
+ </div>
393
+
394
+ <div class="selected-count" id="selectedCount">選択中: 0人</div>
395
+
396
+ <div class="button-container">
397
+ <button class="secondary" onclick="location.href='/userregister'">新規登録</button>
398
+ <button id="proceedButton" onclick="proceedWithSelectedUsers()" disabled>選択して次へ</button>
399
+ </div>
400
+ </div>
401
+
402
+ <!-- 削除確認モーダル -->
403
+ <div id="deleteModal" class="modal">
404
+ <div class="modal-content">
405
+ <div class="modal-title">メンバーの削除</div>
406
+ <div class="modal-text" id="deleteModalText">このメンバーを削除しますか？</div>
407
+ <div class="modal-buttons">
408
+ <button class="modal-cancel" onclick="hideDeleteModal()">キャンセル</button>
409
+ <button class="modal-delete" onclick="confirmDelete()">削除</button>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ <script src="{{ url_for('static', filename='process1.js') }}"></script>
414
+
415
+ </body>
416
+ </html>