Spaces:
Running
Running
File size: 4,784 Bytes
b412841 120f536 b412841 120f536 b412841 120f536 b412841 120f536 b412841 120f536 b412841 120f536 b412841 120f536 b412841 120f536 15e686d 120f536 353124a 120f536 353124a 120f536 353124a 120f536 353124a 120f536 353124a 120f536 6ffdbaf 120f536 6ffdbaf 120f536 6ffdbaf 120f536 b412841 120f536 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 |
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>会話フィードバック画面</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
.card {
border: 2px solid #000;
border-radius: 20px;
padding: 30px;
width: 500px;
text-align: center;
background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.level {
font-size: 28px;
font-weight: bold;
margin-bottom: 20px;
}
.message {
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 {
flex: 1;
height: 25px;
background-color: lightgray;
border-radius: 5px;
overflow: hidden;
}
.bar-fill {
height: 100%;
border-radius: 5px;
}
.back-button,
.history-button {
margin-top: 20px;
margin-left: 20px;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.back-button:hover,
.history-button:hover {
background-color: #0056b3;
}
.flex {
display: flex;
justify-content: center;
}
</style>
<script>
function getMessage(level) {
if (level < 20) return "やばい";
if (level < 40) return "気をつけよう";
if (level < 60) return "まずまずですね";
if (level < 80) return "がんばれあとちょっと";
return "素晴らしい";
}
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>
</head>
<body>
<div class="card">
<div class="level" id="level">話者Lv: 85</div>
<div class="message" id="message">素晴らしい</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>
<div class="flex">
<form method="POST" action="/index">
<div class="feedback-space">
<input
class="history-button"
id="indexButton"
type="submit"
name="submit"
value="録音画面を表示"
/>
</div>
</form>
<form method="POST" action="/talk_detail">
<div class="feedback-space">
<input
class="history-button"
id="detailButton"
type="submit"
name="submit"
value="会話履歴を表示"
/>
</div>
</form>
</div>
</div>
</body>
</html>
|