Spaces:
Sleeping
Sleeping
File size: 3,502 Bytes
fe1ee14 e66063b fe1ee14 e66063b fe1ee14 e66063b fe1ee14 e66063b fe1ee14 e66063b fe1ee14 e66063b 223ee7d e66063b 223ee7d fe1ee14 e66063b 223ee7d fe1ee14 e66063b fe1ee14 e66063b fe1ee14 e66063b fe1ee14 e66063b fe1ee14 e66063b fe1ee14 223ee7d fe1ee14 223ee7d |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voice Recorder Interface</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #121212;
color: white;
}
.chart {
width: 300px;
height: 300px;
margin-bottom: 20px;
}
.record-button {
position: fixed;
bottom: 30px;
width: 80px;
height: 80px;
background-color: transparent;
border-radius: 50%;
border: 4px solid white;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
transition: all 0.2s ease;
}
.record-icon {
width: 60px;
height: 60px;
background-color: #d32f2f;
border-radius: 50%;
transition: all 0.2s ease;
}
.recording .record-icon {
width: 40px;
height: 40px;
border-radius: 10%;
}
.result-button {
margin-top: 20px;
padding: 10px 20px;
background-color: #4caf50;
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}
.result-button:hover {
background-color: #388e3c;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="chart">
<canvas id="speechChart"></canvas>
</div>
<button class="record-button" id="recordButton" onclick="toggleRecording()">
<div class="record-icon" id="recordIcon"></div>
</button>
<button class="result-button" onclick="showResults()">結果を表示</button>
<script>
let isRecording = false;
function toggleRecording() {
const recordButton = document.getElementById('recordButton');
const recordIcon = document.getElementById('recordIcon');
isRecording = !isRecording;
if (isRecording) {
recordButton.classList.add('recording');
} else {
recordButton.classList.remove('recording');
}
}
function showResults() {
window.location.href = 'feedback.html';
}
const ctx = document.getElementById('speechChart').getContext('2d');
const chart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['自分', '他の人'],
datasets: [{
data: [30, 70],
backgroundColor: ['#4caf50', '#757575'],
}],
},
options: {
responsive: true,
plugins: {
legend: {
display: true,
position: 'bottom',
labels: {
color: 'white'
}
}
}
}
});
</script>
</body>
</html> |