Spaces:
Sleeping
Sleeping
File size: 3,093 Bytes
fe1ee14 689d71a fe1ee14 a7e4b6c 689d71a fe1ee14 a7e4b6c fe1ee14 a7e4b6c fe1ee14 a7e4b6c fe1ee14 a7e4b6c fe1ee14 a7e4b6c 689d71a fe1ee14 a7e4b6c |
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 |
<!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;
}
.back-button {
margin-top: 15px;
padding: 8px 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.back-button:hover {
background-color: #0056b3;
}
</style>
<script>
function getMessage(level) {
if (level < 20) return "やばい";
if (level < 40) return "気をつけよう";
if (level < 60) return "まずまずですね";
if (level < 80) return "がんばれあとちょっと";
return "素晴らしい";
}
function goBack() {
history.back();
}
window.onload = function() {
const level = 73; // レベル値
const percentages = [80, 50, 60, 100, 30]; // 各バーのパーセンテージ
const message = getMessage(level);
document.getElementById("level").innerText = `話者Lv: ${level}`;
document.getElementById("message").innerText = message;
const barElements = document.getElementsByClassName("bar-fill");
for (let i = 0; i < barElements.length; i++) {
barElements[i].style.width = `${percentages[i]}%`;
}
};
</script>
</head>
<body>
<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>
<button class="back-button" onclick="goBack()">前の画面に戻る</button>
</div>
</body>
</html> |