Spaces:
Running
Running
File size: 4,605 Bytes
b412841 353124a b412841 353124a b412841 353124a b412841 353124a b412841 353124a b412841 353124a b412841 353124a b412841 353124a b412841 15e686d 353124a b412841 15e686d b412841 15e686d b412841 353124a b412841 353124a b412841 353124a b412841 15e686d 353124a 15e686d 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 132 133 134 135 136 |
<!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;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.back-button:hover, .history-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 showRecorder() {
window.location.href = "index.html";
}
function showHistory() {
window.location.href = "talkDetail.html";
}
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="showRecorder()">録音画面を表示</button>
<button class="history-button" onclick="showHistory()">会話履歴を表示</button>
</div>
</body>
</html> |