<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>YouTube Transcription Interface</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f9f9f9;
}
.api-key-input {
margin-bottom: 20px;
}
.api-key-input input {
padding: 8px;
width: 300px;
}
.video-container {
margin-bottom: 20px;
}
.transcription-panel {
border: 1px solid #ccc;
padding: 15px;
background: #fff;
height: 300px;
overflow-y: auto;
}
.transcription-line {
margin-bottom: 10px;
}
.timestamp {
color: #888;
font-size: 0.9em;
}
</style>
</head>
<body>
<h2>YouTube Video Transcription Interface</h2>
<div class="api-key-input">
<label for="apiKey">Enter API Key:</label>
<input type="text" id="apiKey" placeholder="Your API Key here">
</div>
<div class="video-container">
<iframe id="youtubeVideo" width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
frameborder="0" allowfullscreen>
</iframe>
</div>
<div class="transcription-panel" id="transcriptionPanel">
<div class="transcription-line">
<span class="timestamp">[00:01]</span> Never gonna give you up...
</div>
<div class="transcription-line">
<span class="timestamp">[00:05]</span> Never gonna let you down...
</div>
<!-- Add more mock lines as needed -->
</div>
<script>
// Example: Handle API key input (store for future use)
const apiKeyInput = document.getElementById('apiKey');
apiKeyInput.addEventListener('input', () => {
const apiKey = apiKeyInput.value;
console.log('API Key set to:',sk-b315ed15d15f449b85ab9448006d2245);
// Store or use the API key as needed (e.g., fetch transcript)
});
// Placeholder: You could
fetch real transcript here using the API key
</script>
</body>
</html>
No comments:
Post a Comment