Spaces:
Sleeping
Sleeping
File size: 2,260 Bytes
fe1ee14 |
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 |
<!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;
}
.card {
border: 2px solid #000;
border-radius: 20px;
padding: 20px;
width: 300px;
text-align: center;
}
.level {
font-size: 24px;
font-weight: bold;
}
.message {
margin: 10px 0;
}
.bar {
height: 20px;
margin: 5px 0;
background-color: lightgray;
border-radius: 5px;
}
.bar-fill {
height: 100%;
border-radius: 5px;
}
</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 = 85;
const message = getMessage(level);
document.getElementById("message").innerText = message;
};
</script>
</head>
<body>
<div class="card">
<div class="level">話者Lv: 85</div>
<div class="message" id="message">素晴らしい</div>
<div class="bar"><div class="bar-fill" style="width: 80%; background-color: lightblue;"></div></div>
<div class="bar"><div class="bar-fill" style="width: 50%; background-color: peachpuff;"></div></div>
<div class="bar"><div class="bar-fill" style="width: 60%; background-color: lightblue;"></div></div>
<div class="bar"><div class="bar-fill" style="width: 100%; background-color: peachpuff;"></div></div>
<div class="bar"><div class="bar-fill" style="width: 30%; background-color: lightcoral;"></div></div>
</div>
</body>
</html>
|