Spaces:
Running
Running
File size: 3,633 Bytes
828cc8a |
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 |
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>会話履歴</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #fff;
color: #000;
}
header {
padding: 16px;
background-color: #f5f5f5;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
font-size: 20px;
font-weight: bold;
text-align: center;
}
.recording-list {
padding: 16px;
}
.record-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
margin: 8px 0;
border-radius: 8px;
background-color: #e9e9e9;
transition: background-color 0.2s ease;
cursor: pointer;
}
.record-item:hover {
background-color: #d3d3d3;
}
.title {
font-size: 18px;
font-weight: bold;
}
.timestamp {
font-size: 14px;
color: #555;
}
.record-item-template {
display: none;
}
button {
margin: 5px;
padding: 10px 20px;
border: none;
border-radius: 4px; /* 4pxに統一 */
background-color: #007bff;
color: #fff;
cursor: pointer;
position: fixed; /* 画面に固定 */
left: 50%; /* 水平方向の中央 */
transform: translateX(-50%); /* 中央に配置 */
bottom: 20px; /* 画面下に配置 */
}
.history-button:hover {
background-color: #0056b3;
}
button:hover {
background-color: #0056b3;
}
</style>
<script>
const recordings = [
{ title: "Recording 1", time: "01:15:35", date: "2/26/2025" },
{ title: "Recording 2", time: "00:16:41", date: "2/10/2025" },
];
function createRecordItem(title, time, date) {
const template = document.querySelector(".record-item-template");
const item = template.cloneNode(true);
item.classList.remove("record-item-template");
item.style.display = "flex";
item.querySelector(".title").textContent = title;
item.querySelector(".timestamp").textContent = `${time} | ${date}`;
item.onclick = () => (location.href = "talkDetail");
return item;
}
function renderRecordings() {
const list = document.querySelector(".recording-list");
list.innerHTML = "";
recordings.forEach((rec) => {
const item = createRecordItem(rec.title, rec.time, rec.date);
list.appendChild(item);
});
}
window.onload = renderRecordings;
//画面遷移
function showRecorder() {
// 録音画面へ遷移
window.location.href = "/index";
}
</script>
</head>
<body>
<header>All Recordings</header>
<div class="recording-list">
<div class="record-item record-item-template">
<div>
<div class="title">Recording Title</div>
<div class="timestamp">00:00:00 | 1/1/2025</div>
</div>
</div>
</div>
<button class="history-button" id="detailButton" onclick="showRecorder()">
録音画面を表示
</button>
</body>
</html>
|