Spaces:
Sleeping
Sleeping
File size: 4,348 Bytes
b412841 353124a b412841 353124a b412841 353124a b412841 353124a b412841 353124a b412841 353124a b412841 353124a b412841 353124a b412841 353124a b412841 353124a b412841 353124a b412841 353124a b412841 353124a b412841 |
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 |
<!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 {
margin-top: 20px;
padding: 10px 20px;
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 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>
<button class="back-button" onclick="goBack()">前の画面に戻る</button>
</div>
</body>
</html> |