Spaces:
Running
Running
| <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> | |