Spaces:
Running
Running
File size: 3,502 Bytes
b412841 5751736 b412841 5751736 b412841 5751736 b412841 5751736 b412841 5751736 b412841 5751736 b412841 5751736 b412841 5751736 b412841 5751736 b412841 5751736 b412841 5751736 b412841 5751736 b412841 5751736 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 |
<!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> |