Hugging Face's logo

Spaces:
Justtalk
/
JusTalk
Running

App Files Community
3
mizzzuno commited on
Commit
795058e
·
verified ·
1 Parent(s): da3d356

use tailwind css

Browse files
Files changed (1) hide show
  1. templates/feedback.html +103 -193
templates/feedback.html CHANGED
@@ -1,193 +1,103 @@
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>会話フィードバック画面</title>
7
- <link
8
- href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
9
- rel="stylesheet"
10
- />
11
- <style>
12
- body {
13
- font-family: Arial, sans-serif;
14
- display: flex;
15
- justify-content: center;
16
- align-items: center;
17
- height: 100vh;
18
- margin: 0;
19
- background-color: #f5f5f5;
20
- }
21
- .card {
22
- border: 2px solid #000;
23
- border-radius: 20px;
24
- padding: 30px;
25
- width: 500px;
26
- text-align: center;
27
- background-color: white;
28
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
29
- }
30
- .level {
31
- font-size: 28px;
32
- font-weight: bold;
33
- margin-bottom: 20px;
34
- }
35
- .message {
36
- margin: 15px 0;
37
- font-size: 20px;
38
- font-weight: bold;
39
- color: #333;
40
- }
41
- .bar-container {
42
- display: flex;
43
- align-items: center;
44
- margin: 8px 0;
45
- }
46
- .bar-label {
47
- width: 60px;
48
- margin-right: 10px;
49
- font-weight: bold;
50
- }
51
- .bar {
52
- flex: 1;
53
- height: 25px;
54
- background-color: lightgray;
55
- border-radius: 5px;
56
- overflow: hidden;
57
- }
58
- .bar-fill {
59
- height: 100%;
60
- border-radius: 5px;
61
- }
62
- .back-button,
63
- .history-button {
64
- margin-top: 20px;
65
- margin-left: 20px;
66
- padding: 10px 20px;
67
- background-color: #007bff;
68
- color: white;
69
- border: none;
70
- border-radius: 5px;
71
- cursor: pointer;
72
- }
73
- .back-button:hover,
74
- .history-button:hover {
75
- background-color: #0056b3;
76
- }
77
- .flex {
78
- display: flex;
79
- justify-content: center;
80
- }
81
- </style>
82
- <script>
83
- function getMessage(level) {
84
- if (level < 20) return "やばい";
85
- if (level < 40) return "気をつけよう";
86
- if (level < 60) return "まずまずですね";
87
- if (level < 80) return "がんばれあとちょっと";
88
- return "素晴らしい";
89
- }
90
-
91
- window.onload = function () {
92
- const level = 73; // レベル値
93
- const percentages = [80, 50, 60, 100, 30]; // 各バーのパーセンテージ
94
- const labels = ["項目1", "項目2", "項目3", "項目4", "項目5"]; // 各項目名
95
-
96
- const message = getMessage(level);
97
- document.getElementById("level").innerText = `話者Lv: ${level}`;
98
- document.getElementById("message").innerText = message;
99
-
100
- const barElements = document.getElementsByClassName("bar-fill");
101
- const labelElements = document.getElementsByClassName("bar-label");
102
- for (let i = 0; i < barElements.length; i++) {
103
- barElements[i].style.width = `${percentages[i]}%`;
104
- labelElements[i].innerText = labels[i];
105
- }
106
- };
107
- function showRecorder() {
108
- // 録音画面へ遷移
109
- window.location.href = "index";
110
- }
111
- function showTalkDetil() {
112
- // 会話詳細へ遷移
113
- window.location.href = "talk_detail";
114
- }
115
- </script>
116
- </head>
117
- <body>
118
- <div class="card">
119
- <div class="level" id="level">話者Lv: 85</div>
120
- <div class="message" id="message">素晴らしい</div>
121
-
122
- <div class="bar-container">
123
- <span class="bar-label"></span>
124
- <div class="bar">
125
- <div class="bar-fill" style="background-color: lightblue"></div>
126
- </div>
127
- </div>
128
- <div class="bar-container">
129
- <span class="bar-label"></span>
130
- <div class="bar">
131
- <div class="bar-fill" style="background-color: peachpuff"></div>
132
- </div>
133
- </div>
134
- <div class="bar-container">
135
- <span class="bar-label"></span>
136
- <div class="bar">
137
- <div class="bar-fill" style="background-color: lightblue"></div>
138
- </div>
139
- </div>
140
- <div class="bar-container">
141
- <span class="bar-label"></span>
142
- <div class="bar">
143
- <div class="bar-fill" style="background-color: peachpuff"></div>
144
- </div>
145
- </div>
146
- <div class="bar-container">
147
- <span class="bar-label"></span>
148
- <div class="bar">
149
- <div class="bar-fill" style="background-color: lightcoral"></div>
150
- </div>
151
- </div>
152
- <div class="flex">
153
- <!--
154
- <form method="POST" action="/index">
155
- <div class="feedback-space">
156
- <input
157
- class="history-button"
158
- id="indexButton"
159
- type="submit"
160
- name="submit"
161
- value="録音画面を表示"
162
- />
163
- </div>
164
- </form>-->
165
- <button
166
- class="history-button"
167
- id="detailButton"
168
- onclick="showRecorder()"
169
- >
170
- 録音画面を表示
171
- </button>
172
- <button
173
- class="history-button"
174
- id="detailButton"
175
- onclick="showTalkDetil()"
176
- >
177
- 会話詳細を表示
178
- </button>
179
- <!--<form method="POST" action="/talk_detail">
180
- <div class="feedback-space">
181
- <input
182
- class="history-button"
183
- id="detailButton"
184
- type="submit"
185
- name="submit"
186
- value="会話詳細を表示"
187
- />
188
- </div>
189
- </form>-->
190
- </div>
191
- </div>
192
- </body>
193
- </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>
14
+ function getMessage(level) {
15
+ if (level < 20) return "やばい";
16
+ if (level < 40) return "気をつけよう";
17
+ if (level < 60) return "まずまずですね";
18
+ if (level < 80) return "がんばれあとちょっと";
19
+ return "素晴らしい";
20
+ }
21
+
22
+ window.onload = function () {
23
+ const level = 73;
24
+ const percentages = [80, 50, 60, 100, 30];
25
+ const labels = ["項目1", "項目2", "項目3", "項目4", "項目5"];
26
+
27
+ const message = getMessage(level);
28
+ document.getElementById("level").innerText = `話者Lv: ${level}`;
29
+ document.getElementById("message").innerText = message;
30
+
31
+ const barElements = document.getElementsByClassName("bar-fill");
32
+ const labelElements = document.getElementsByClassName("bar-label");
33
+ for (let i = 0; i < barElements.length; i++) {
34
+ barElements[i].style.width = `${percentages[i]}%`;
35
+ labelElements[i].innerText = labels[i];
36
+ }
37
+ };
38
+
39
+ function showRecorder() {
40
+ window.location.href = "index";
41
+ }
42
+ function showTalkDetail() {
43
+ window.location.href = "talk_detail";
44
+ }
45
+ </script>
46
+ </head>
47
+ <body
48
+ class="flex items-center justify-center min-h-screen bg-gray-900 text-white"
49
+ >
50
+ <div class="p-8 bg-gray-800 rounded-2xl shadow-xl text-center w-96">
51
+ <div class="text-3xl font-bold mb-4" id="level">話者Lv: 85</div>
52
+ <div class="text-xl font-semibold mb-6" id="message">素晴らしい</div>
53
+
54
+ <div class="space-y-2">
55
+ <div class="bar-container flex items-center">
56
+ <span class="bar-label w-20 mr-2"></span>
57
+ <div class="bar w-full h-6 bg-gray-700 rounded-full overflow-hidden">
58
+ <div class="bar-fill h-full bg-blue-500"></div>
59
+ </div>
60
+ </div>
61
+ <div class="bar-container flex items-center">
62
+ <span class="bar-label w-20 mr-2"></span>
63
+ <div class="bar w-full h-6 bg-gray-700 rounded-full overflow-hidden">
64
+ <div class="bar-fill h-full bg-orange-400"></div>
65
+ </div>
66
+ </div>
67
+ <div class="bar-container flex items-center">
68
+ <span class="bar-label w-20 mr-2"></span>
69
+ <div class="bar w-full h-6 bg-gray-700 rounded-full overflow-hidden">
70
+ <div class="bar-fill h-full bg-blue-500"></div>
71
+ </div>
72
+ </div>
73
+ <div class="bar-container flex items-center">
74
+ <span class="bar-label w-20 mr-2"></span>
75
+ <div class="bar w-full h-6 bg-gray-700 rounded-full overflow-hidden">
76
+ <div class="bar-fill h-full bg-orange-400"></div>
77
+ </div>
78
+ </div>
79
+ <div class="bar-container flex items-center">
80
+ <span class="bar-label w-20 mr-2"></span>
81
+ <div class="bar w-full h-6 bg-gray-700 rounded-full overflow-hidden">
82
+ <div class="bar-fill h-full bg-red-500"></div>
83
+ </div>
84
+ </div>
85
+ </div>
86
+
87
+ <div class="flex justify-center space-x-4 mt-6">
88
+ <button
89
+ onclick="showRecorder()"
90
+ class="px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-700"
91
+ >
92
+ 録音画面を表示
93
+ </button>
94
+ <button
95
+ onclick="showTalkDetail()"
96
+ class="px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-700"
97
+ >
98
+ 会話詳細を表示
99
+ </button>
100
+ </div>
101
+ </div>
102
+ </body>
103
+ </html>