Update feedback.html

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

feedback.html

@@ -12,34 +12,52 @@
             align-items: center;
             height: 100vh;
             margin: 0;
+            background-color: #f5f5f5;
         }
         .card {
             border: 2px solid #000;
             border-radius: 20px;
-            padding: 20px;
-            width: 300px;
+            padding: 30px;
+            width: 500px;
             text-align: center;
+            background-color: white;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }
         .level {
-            font-size: 24px;
+            font-size: 28px;
             font-weight: bold;
+            margin-bottom: 20px;
         }
         .message {
-            margin: 10px 0;
+            margin: 15px 0;
+            font-size: 20px;
+            font-weight: bold;
+            color: #333;
+        }
+        .bar-container {
+            display: flex;
+            align-items: center;
+            margin: 8px 0;
+        }
+        .bar-label {
+            width: 60px;
+            margin-right: 10px;
+            font-weight: bold;
         }
         .bar {
-            height: 20px;
-            margin: 5px 0;
+            flex: 1;
+            height: 25px;
             background-color: lightgray;
             border-radius: 5px;
+            overflow: hidden;
         }
         .bar-fill {
             height: 100%;
             border-radius: 5px;
         }
         .back-button {
-            margin-top: 15px;
-            padding: 8px 16px;
+            margin-top: 20px;
+            padding: 10px 20px;
             background-color: #007bff;
             color: white;
             border: none;
@@ -66,14 +84,17 @@
         window.onload = function() {
             const level = 73; // レベル値
             const percentages = [80, 50, 60, 100, 30]; // 各バーのパーセンテージ
+            const labels = ["項目1", "項目2", "項目3", "項目4", "項目5"]; // 各項目名
 
             const message = getMessage(level);
             document.getElementById("level").innerText = `話者Lv: ${level}`;
             document.getElementById("message").innerText = message;
 
             const barElements = document.getElementsByClassName("bar-fill");
+            const labelElements = document.getElementsByClassName("bar-label");
             for (let i = 0; i < barElements.length; i++) {
                 barElements[i].style.width = `${percentages[i]}%`;
+                labelElements[i].innerText = labels[i];
             }
         };
     </script>
@@ -82,11 +103,28 @@
     <div class="card">
         <div class="level" id="level">話者Lv: 85</div>
         <div class="message" id="message">素晴らしい</div>
-        <div class="bar"><div class="bar-fill" style="background-color: lightblue;"></div></div>
-        <div class="bar"><div class="bar-fill" style="background-color: peachpuff;"></div></div>
-        <div class="bar"><div class="bar-fill" style="background-color: lightblue;"></div></div>
-        <div class="bar"><div class="bar-fill" style="background-color: peachpuff;"></div></div>
-        <div class="bar"><div class="bar-fill" style="background-color: lightcoral;"></div></div>
+        
+        <div class="bar-container">
+            <span class="bar-label"></span>
+            <div class="bar"><div class="bar-fill" style="background-color: lightblue;"></div></div>
+        </div>
+        <div class="bar-container">
+            <span class="bar-label"></span>
+            <div class="bar"><div class="bar-fill" style="background-color: peachpuff;"></div></div>
+        </div>
+        <div class="bar-container">
+            <span class="bar-label"></span>
+            <div class="bar"><div class="bar-fill" style="background-color: lightblue;"></div></div>
+        </div>
+        <div class="bar-container">
+            <span class="bar-label"></span>
+            <div class="bar"><div class="bar-fill" style="background-color: peachpuff;"></div></div>
+        </div>
+        <div class="bar-container">
+            <span class="bar-label"></span>
+            <div class="bar"><div class="bar-fill" style="background-color: lightcoral;"></div></div>
+        </div>
+
         <button class="back-button" onclick="goBack()">前の画面に戻る</button>
     </div>
 </body>