Hugging Face's logo

Spaces:
rein0421
/
JusTalk_test
Sleeping

App Files Community
mizzzuno commited on
Commit
353124a
·
verified ·
1 Parent(s): 5751736

Update feedback.html

Browse files

棒グラフそれぞれに項目名を追加
全体のサイズを少し拡大

Files changed (1) hide show
  1. feedback.html +51 -13
feedback.html CHANGED
@@ -12,34 +12,52 @@
12
  align-items: center;
13
  height: 100vh;
14
  margin: 0;
 
15
  }
16
  .card {
17
  border: 2px solid #000;
18
  border-radius: 20px;
19
- padding: 20px;
20
- width: 300px;
21
  text-align: center;
 
 
22
  }
23
  .level {
24
- font-size: 24px;
25
  font-weight: bold;
 
26
  }
27
  .message {
28
- margin: 10px 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
29
  }
30
  .bar {
31
- height: 20px;
32
- margin: 5px 0;
33
  background-color: lightgray;
34
  border-radius: 5px;
 
35
  }
36
  .bar-fill {
37
  height: 100%;
38
  border-radius: 5px;
39
  }
40
  .back-button {
41
- margin-top: 15px;
42
- padding: 8px 16px;
43
  background-color: #007bff;
44
  color: white;
45
  border: none;
@@ -66,14 +84,17 @@
66
  window.onload = function() {
67
  const level = 73; // レベル値
68
  const percentages = [80, 50, 60, 100, 30]; // 各バーのパーセンテージ
 
69
 
70
  const message = getMessage(level);
71
  document.getElementById("level").innerText = `話者Lv: ${level}`;
72
  document.getElementById("message").innerText = message;
73
 
74
  const barElements = document.getElementsByClassName("bar-fill");
 
75
  for (let i = 0; i < barElements.length; i++) {
76
  barElements[i].style.width = `${percentages[i]}%`;
 
77
  }
78
  };
79
  </script>
@@ -82,11 +103,28 @@
82
  <div class="card">
83
  <div class="level" id="level">話者Lv: 85</div>
84
  <div class="message" id="message">素晴らしい</div>
85
- <div class="bar"><div class="bar-fill" style="background-color: lightblue;"></div></div>
86
- <div class="bar"><div class="bar-fill" style="background-color: peachpuff;"></div></div>
87
- <div class="bar"><div class="bar-fill" style="background-color: lightblue;"></div></div>
88
- <div class="bar"><div class="bar-fill" style="background-color: peachpuff;"></div></div>
89
- <div class="bar"><div class="bar-fill" style="background-color: lightcoral;"></div></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  <button class="back-button" onclick="goBack()">前の画面に戻る</button>
91
  </div>
92
  </body>
 
12
  align-items: center;
13
  height: 100vh;
14
  margin: 0;
15
+ background-color: #f5f5f5;
16
  }
17
  .card {
18
  border: 2px solid #000;
19
  border-radius: 20px;
20
+ padding: 30px;
21
+ width: 500px;
22
  text-align: center;
23
+ background-color: white;
24
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
25
  }
26
  .level {
27
+ font-size: 28px;
28
  font-weight: bold;
29
+ margin-bottom: 20px;
30
  }
31
  .message {
32
+ margin: 15px 0;
33
+ font-size: 20px;
34
+ font-weight: bold;
35
+ color: #333;
36
+ }
37
+ .bar-container {
38
+ display: flex;
39
+ align-items: center;
40
+ margin: 8px 0;
41
+ }
42
+ .bar-label {
43
+ width: 60px;
44
+ margin-right: 10px;
45
+ font-weight: bold;
46
  }
47
  .bar {
48
+ flex: 1;
49
+ height: 25px;
50
  background-color: lightgray;
51
  border-radius: 5px;
52
+ overflow: hidden;
53
  }
54
  .bar-fill {
55
  height: 100%;
56
  border-radius: 5px;
57
  }
58
  .back-button {
59
+ margin-top: 20px;
60
+ padding: 10px 20px;
61
  background-color: #007bff;
62
  color: white;
63
  border: none;
 
84
  window.onload = function() {
85
  const level = 73; // レベル値
86
  const percentages = [80, 50, 60, 100, 30]; // 各バーのパーセンテージ
87
+ const labels = ["項目1", "項目2", "項目3", "項目4", "項目5"]; // 各項目名
88
 
89
  const message = getMessage(level);
90
  document.getElementById("level").innerText = `話者Lv: ${level}`;
91
  document.getElementById("message").innerText = message;
92
 
93
  const barElements = document.getElementsByClassName("bar-fill");
94
+ const labelElements = document.getElementsByClassName("bar-label");
95
  for (let i = 0; i < barElements.length; i++) {
96
  barElements[i].style.width = `${percentages[i]}%`;
97
+ labelElements[i].innerText = labels[i];
98
  }
99
  };
100
  </script>
 
103
  <div class="card">
104
  <div class="level" id="level">話者Lv: 85</div>
105
  <div class="message" id="message">素晴らしい</div>
106
+
107
+ <div class="bar-container">
108
+ <span class="bar-label"></span>
109
+ <div class="bar"><div class="bar-fill" style="background-color: lightblue;"></div></div>
110
+ </div>
111
+ <div class="bar-container">
112
+ <span class="bar-label"></span>
113
+ <div class="bar"><div class="bar-fill" style="background-color: peachpuff;"></div></div>
114
+ </div>
115
+ <div class="bar-container">
116
+ <span class="bar-label"></span>
117
+ <div class="bar"><div class="bar-fill" style="background-color: lightblue;"></div></div>
118
+ </div>
119
+ <div class="bar-container">
120
+ <span class="bar-label"></span>
121
+ <div class="bar"><div class="bar-fill" style="background-color: peachpuff;"></div></div>
122
+ </div>
123
+ <div class="bar-container">
124
+ <span class="bar-label"></span>
125
+ <div class="bar"><div class="bar-fill" style="background-color: lightcoral;"></div></div>
126
+ </div>
127
+
128
  <button class="back-button" onclick="goBack()">前の画面に戻る</button>
129
  </div>
130
  </body>