<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube to MP3 Converter</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
background: white;
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
overflow: hidden;
}
.header {
background: #ff0000;
color: white;
padding: 20px;
text-align: center;
}
.header h1 {
font-size: 24px;
font-weight: 600;
}
.header p {
font-size: 14px;
opacity: 0.9;
margin-top: 5px;
}
.content {
padding: 30px;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 8px;
color: #333;
font-weight: 500;
font-size: 14px;
}
.input-group input {
width: 100%;
padding: 12px 15px;
border: 2px solid #e1e1e1;
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s ease;
}
.input-group input:focus {
outline: none;
border-color: #667eea;
}
.btn {
background: #ff0000;
color: white;
border: none;
padding: 12px 25px;
border-radius: 8px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
width: 100%;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn:hover {
background: #e60000;
transform: translateY(-2px);
}
.btn:active {
transform: translateY(0);
}
.info {
margin-top: 20px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
font-size: 14px;
color: #666;
line-height: 1.5;
}
.info ul {
margin: 10px 0 0 20px;
}
.info li {
margin-bottom: 5px;
}
.status {
margin-top: 20px;
padding: 15px;
border-radius: 8px;
text-align: center;
display: none;
}
.status.processing {
background: #fff3cd;
color: #856404;
display: block;
}
.status.success {
background: #d4edda;
color: #155724;
display: block;
}
.status.error {
background: #f8d7da;
color: #721c24;
display: block;
}
.loader {
width: 20px;
height: 20px;
border: 3px solid #ffffff;
border-top: 3px solid transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
display: inline-block;
margin-right: 8px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.download-link {
display: block;
margin-top: 15px;
color: #ff0000;
font-weight: 500;
text-decoration: none;
}
.download-link:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>YouTube to MP3 Converter</h1>
<p>Convert your favorite YouTube videos to MP3 format</p>
</div>
<div class="content">
<div class="input-group">
<label for="youtube-url">YouTube Video URL</label>
<input type="text" id="youtube-url" placeholder="https://www.youtube.com/watch?v=..." />
</div>
<button id="convert-btn" class="btn">
<span>Convert to MP3</span>
</button>
<div id="status" class="status"></div>
<div class="info">
<h3>How to use:</h3>
<ul>
<li>Copy the YouTube video URL from your browser</li>
<li>Paste it in the input field above</li>
<li>Click "Convert to MP3" button</li>
<li>Wait for the conversion to complete</li>
<li>Download your MP3 file</li>
</ul>
<p><strong>Note:</strong> This tool is for personal use only. Please respect copyright laws.</p>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const youtubeUrlInput = document.getElementById('youtube-url');
const convertBtn = document.getElementById('convert-btn');
const statusDiv = document.getElementById('status');
// Mock conversion function - in a real application, this would call a backend service
convertBtn.addEventListener('click', function() {
const url = youtubeUrlInput.value.trim();
// Validate URL
if (!url) {
showError('Please enter a YouTube URL');
return;
}
if (!url.includes('youtube.com') && !url.includes('youtu.be')) {
showError('Please enter a valid YouTube URL');
return;
}
// Show processing status
showStatus('Processing your request...', 'processing');
convertBtn.innerHTML = '<div class="loader"></div> <span>Converting...</span>';
convertBtn.disabled = true;
// Simulate conversion process (in real app, this would be an API call)
setTimeout(() => {
// Extract video title from URL (mock)
const videoId = extractVideoId(url);
const videoTitle = `YouTube Video ${videoId}`;
// Show success message with download link
showStatus(`Successfully converted: ${videoTitle}`, 'success');
convertBtn.innerHTML = 'Convert to MP3';
convertBtn.disabled = false;
// Create download link
const downloadLink = document.createElement('a');
downloadLink.href = '#';
downloadLink.className = 'download-link';
downloadLink.textContent = 'Download MP3 File';
// Add click event to download link
downloadLink.addEventListener('click', function(e) {
e.preventDefault();
alert('In a real application, this would download the MP3 file.\n\nFor demonstration purposes, this is just a mock function.');
});
// Add download link to status
statusDiv.appendChild(downloadLink);
}, 3000);
});
// Helper function to extract video ID from YouTube URL
function extractVideoId(url) {
const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
const match = url.match(regExp);
return (match && match[2].length === 11) ? match[2] : null;
}
// Show error message
function showError(message) {
showStatus(message, 'error');
convertBtn.innerHTML = 'Convert to MP3';
convertBtn.disabled = false;
setTimeout(() => {
statusDiv.style.display = 'none';
}, 5000);
}
// Show status message
function showStatus(message, type) {
statusDiv.className = `status ${type}`;
statusDiv.textContent = message;
// Remove download link if exists
const existingLink = statusDiv.querySelector('.download-link');
if (existingLink) {
existingLink.remove();
}
}
// Reset button when input changes
youtubeUrlInput.addEventListener('input', function() {
convertBtn.innerHTML = 'Convert to MP3';
convertBtn.disabled = false;
statusDiv.style.display = 'none';
});
});
</script>
</body>
</html>