Hugging Face's logo

Spaces:
Justtalk
/
JusTalk
Running

App Files Community
3
tomato25 commited on
Commit
c066837
·
verified ·
1 Parent(s): 3dd3b31

add_guruguru

Browse files
Files changed (1) hide show
  1. templates/feedback.html +174 -170
templates/feedback.html CHANGED
@@ -1,170 +1,174 @@
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>
 
 
 
 
 
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>