|
|
<!DOCTYPE html> |
|
|
<html lang="it"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Karaoke App</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background: linear-gradient(135deg, #1a1a2e, #16213e); |
|
|
color: white; |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.lyrics-line { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.lyrics-line.active { |
|
|
color: #f72585; |
|
|
font-weight: bold; |
|
|
transform: scale(1.05); |
|
|
text-shadow: 0 0 10px rgba(247, 37, 133, 0.7); |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
height: 6px; |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
border-radius: 3px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.progress-fill { |
|
|
height: 100%; |
|
|
background: #f72585; |
|
|
width: 0%; |
|
|
transition: width 0.1s linear; |
|
|
} |
|
|
|
|
|
.volume-slider { |
|
|
-webkit-appearance: none; |
|
|
width: 100%; |
|
|
height: 6px; |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
border-radius: 3px; |
|
|
outline: none; |
|
|
} |
|
|
|
|
|
.volume-slider::-webkit-slider-thumb { |
|
|
-webkit-appearance: none; |
|
|
appearance: none; |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
border-radius: 50%; |
|
|
background: #f72585; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.song-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
|
|
|
.marquee { |
|
|
white-space: nowrap; |
|
|
overflow: hidden; |
|
|
display: inline-block; |
|
|
animation: marquee 10s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes marquee { |
|
|
0% { transform: translateX(100%); } |
|
|
100% { transform: translateX(-100%); } |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.1); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
|
|
|
.mic-pulse { |
|
|
animation: pulse 1.5s infinite; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="bg-black bg-opacity-50 py-4 px-6 flex items-center justify-between border-b border-gray-700"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<i class="fas fa-music text-2xl text-pink-500"></i> |
|
|
<h1 class="text-2xl font-bold bg-gradient-to-r from-pink-500 to-purple-600 bg-clip-text text-transparent">Karaoke Star</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="bg-pink-600 hover:bg-pink-700 text-white px-4 py-2 rounded-full transition flex items-center"> |
|
|
<i class="fas fa-user-plus mr-2"></i> Login |
|
|
</button> |
|
|
<button class="text-gray-300 hover:text-white"> |
|
|
<i class="fas fa-cog text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 flex flex-col lg:flex-row p-4 md:p-6 gap-6"> |
|
|
|
|
|
<div class="w-full lg:w-1/3 bg-black bg-opacity-30 rounded-xl p-4 backdrop-blur-sm"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-xl font-bold">Canzoni disponibili</h2> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Cerca canzone..." |
|
|
class="bg-gray-800 bg-opacity-50 text-white rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-pink-500 w-48"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-3 max-h-[calc(100vh-200px)] overflow-y-auto pr-2 scrollbar-thin"> |
|
|
<div class="song-card bg-gray-800 bg-opacity-50 rounded-lg p-4 flex items-center justify-between cursor-pointer hover:bg-gray-700 transition duration-300"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="w-12 h-12 bg-pink-500 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-music text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold">Bohemian Rhapsody</h3> |
|
|
<p class="text-sm text-gray-400">Queen</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-pink-500 hover:text-pink-400"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="song-card bg-gray-800 bg-opacity-50 rounded-lg p-4 flex items-center justify-between cursor-pointer hover:bg-gray-700 transition duration-300"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-music text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold">Sweet Child O' Mine</h3> |
|
|
<p class="text-sm text-gray-400">Guns N' Roses</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-pink-500 hover:text-pink-400"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="song-card bg-gray-800 bg-opacity-50 rounded-lg p-4 flex items-center justify-between cursor-pointer hover:bg-gray-700 transition duration-300"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-music text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold">Billie Jean</h3> |
|
|
<p class="text-sm text-gray-400">Michael Jackson</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-pink-500 hover:text-pink-400"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="song-card bg-gray-800 bg-opacity-50 rounded-lg p-4 flex items-center justify-between cursor-pointer hover:bg-gray-700 transition duration-300"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="w-12 h-12 bg-yellow-500 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-music text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold">Livin' on a Prayer</h3> |
|
|
<p class="text-sm text-gray-400">Bon Jovi</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-pink-500 hover:text-pink-400"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="song-card bg-gray-800 bg-opacity-50 rounded-lg p-4 flex items-center justify-between cursor-pointer hover:bg-gray-700 transition duration-300"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-music text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold">Don't Stop Believin'</h3> |
|
|
<p class="text-sm text-gray-400">Journey</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-pink-500 hover:text-pink-400"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="song-card bg-gray-800 bg-opacity-50 rounded-lg p-4 flex items-center justify-between cursor-pointer hover:bg-gray-700 transition duration-300"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="w-12 h-12 bg-red-500 rounded-lg flex items-center justify-center"> |
|
|
<i class="fas fa-music text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-semibold">Like a Virgin</h3> |
|
|
<p class="text-sm text-gray-400">Madonna</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="text-pink-500 hover:text-pink-400"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 flex flex-col bg-black bg-opacity-30 rounded-xl p-6 backdrop-blur-sm"> |
|
|
<div class="flex items-center justify-between mb-6"> |
|
|
<div> |
|
|
<h2 class="text-2xl font-bold">Bohemian Rhapsody</h2> |
|
|
<p class="text-gray-300">Queen</p> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<span class="text-gray-300">Difficoltà: <span class="text-white">Media</span></span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-clock text-blue-400"></i> |
|
|
<span class="text-gray-300">Durata: <span class="text-white">5:55</span></span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex-1 flex flex-col items-center justify-center py-8"> |
|
|
<div class="w-full max-w-2xl text-center"> |
|
|
<div class="mb-8"> |
|
|
<div class="mic-pulse inline-block"> |
|
|
<i class="fas fa-microphone text-4xl text-pink-500"></i> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="marquee text-xl font-semibold">🎤 Pronto a cantare? Seleziona una canzone e inizia il tuo karaoke! 🎤</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="lyrics-container" class="space-y-6 text-xl text-gray-300"> |
|
|
|
|
|
<div class="lyrics-line">Seleziona una canzone per visualizzare il testo</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-auto"> |
|
|
<div class="progress-bar mb-2"> |
|
|
<div class="progress-fill"></div> |
|
|
</div> |
|
|
<div class="flex items-center justify-between"> |
|
|
<span class="text-sm text-gray-300">0:00</span> |
|
|
<span class="text-sm text-gray-300">5:55</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-center space-x-8 mt-6"> |
|
|
<button class="text-gray-300 hover:text-white text-2xl"> |
|
|
<i class="fas fa-step-backward"></i> |
|
|
</button> |
|
|
<button id="play-btn" class="bg-pink-600 hover:bg-pink-700 text-white w-16 h-16 rounded-full flex items-center justify-center text-3xl"> |
|
|
<i class="fas fa-play"></i> |
|
|
</button> |
|
|
<button class="text-gray-300 hover:text-white text-2xl"> |
|
|
<i class="fas fa-step-forward"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-full lg:w-1/4 bg-black bg-opacity-30 rounded-xl p-4 backdrop-blur-sm"> |
|
|
<div class="mb-6"> |
|
|
<h2 class="text-xl font-bold mb-4">Controlli</h2> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm text-gray-300 mb-1">Volume</label> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<i class="fas fa-volume-down text-gray-300"></i> |
|
|
<input type="range" min="0" max="100" value="70" class="volume-slider"> |
|
|
<i class="fas fa-volume-up text-gray-300"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm text-gray-300 mb-1">Tono</label> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<i class="fas fa-arrow-down text-gray-300"></i> |
|
|
<input type="range" min="-5" max="5" value="0" class="volume-slider"> |
|
|
<i class="fas fa-arrow-up text-gray-300"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm text-gray-300 mb-1">Velocità</label> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<i class="fas fa-turtle text-gray-300"></i> |
|
|
<input type="range" min="0.5" max="1.5" step="0.1" value="1" class="volume-slider"> |
|
|
<i class="fas fa-rabbit text-gray-300"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-4 border-t border-gray-700"> |
|
|
<button class="w-full bg-pink-600 hover:bg-pink-700 text-white py-2 rounded-lg flex items-center justify-center space-x-2"> |
|
|
<i class="fas fa-microphone"></i> |
|
|
<span>Test Microfono</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h2 class="text-xl font-bold mb-4">Coda</h2> |
|
|
<div class="space-y-3 max-h-64 overflow-y-auto scrollbar-thin"> |
|
|
<div class="bg-gray-800 bg-opacity-50 rounded-lg p-3 flex items-center justify-between"> |
|
|
<div> |
|
|
<h3 class="font-medium">Bohemian Rhapsody</h3> |
|
|
<p class="text-xs text-gray-400">Queen</p> |
|
|
</div> |
|
|
<button class="text-red-400 hover:text-red-300"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="bg-gray-800 bg-opacity-50 rounded-lg p-3 flex items-center justify-between"> |
|
|
<div> |
|
|
<h3 class="font-medium">Sweet Child O' Mine</h3> |
|
|
<p class="text-xs text-gray-400">Guns N' Roses</p> |
|
|
</div> |
|
|
<button class="text-red-400 hover:text-red-300"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-black bg-opacity-50 py-3 px-6 text-center text-gray-400 text-sm border-t border-gray-700"> |
|
|
<p>Karaoke Star App © 2023 - Tutti i diritti riservati</p> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const playBtn = document.getElementById('play-btn'); |
|
|
const progressFill = document.querySelector('.progress-fill'); |
|
|
const lyricsContainer = document.getElementById('lyrics-container'); |
|
|
let isPlaying = false; |
|
|
let progress = 0; |
|
|
let progressInterval; |
|
|
|
|
|
|
|
|
const sampleLyrics = [ |
|
|
"Is this the real life?", |
|
|
"Is this just fantasy?", |
|
|
"Caught in a landslide,", |
|
|
"No escape from reality.", |
|
|
"", |
|
|
"Open your eyes,", |
|
|
"Look up to the skies and see,", |
|
|
"I'm just a poor boy, I need no sympathy,", |
|
|
"Because I'm easy come, easy go,", |
|
|
"Little high, little low,", |
|
|
"Any way the wind blows doesn't really matter to me, to me." |
|
|
]; |
|
|
|
|
|
|
|
|
lyricsContainer.innerHTML = ''; |
|
|
sampleLyrics.forEach(line => { |
|
|
const div = document.createElement('div'); |
|
|
div.className = 'lyrics-line'; |
|
|
div.textContent = line || ' '; |
|
|
lyricsContainer.appendChild(div); |
|
|
}); |
|
|
|
|
|
|
|
|
const lyricLines = document.querySelectorAll('.lyrics-line'); |
|
|
let currentLine = 0; |
|
|
|
|
|
function highlightLyricLine(index) { |
|
|
lyricLines.forEach((line, i) => { |
|
|
if (i === index && line.textContent.trim() !== '') { |
|
|
line.classList.add('active'); |
|
|
} else { |
|
|
line.classList.remove('active'); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
playBtn.addEventListener('click', function() { |
|
|
isPlaying = !isPlaying; |
|
|
|
|
|
if (isPlaying) { |
|
|
playBtn.innerHTML = '<i class="fas fa-pause"></i>'; |
|
|
|
|
|
|
|
|
progressInterval = setInterval(() => { |
|
|
progress += 0.5; |
|
|
progressFill.style.width = `${progress}%`; |
|
|
|
|
|
|
|
|
if (progress % 10 === 0 && currentLine < lyricLines.length - 1) { |
|
|
currentLine++; |
|
|
highlightLyricLine(currentLine); |
|
|
|
|
|
|
|
|
lyricLines[currentLine].scrollIntoView({ |
|
|
behavior: 'smooth', |
|
|
block: 'center' |
|
|
}); |
|
|
} |
|
|
|
|
|
if (progress >= 100) { |
|
|
clearInterval(progressInterval); |
|
|
isPlaying = false; |
|
|
playBtn.innerHTML = '<i class="fas fa-play"></i>'; |
|
|
progress = 0; |
|
|
progressFill.style.width = '0%'; |
|
|
currentLine = 0; |
|
|
highlightLyricLine(-1); |
|
|
} |
|
|
}, 500); |
|
|
} else { |
|
|
playBtn.innerHTML = '<i class="fas fa-play"></i>'; |
|
|
clearInterval(progressInterval); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const volumeSlider = document.querySelector('.volume-slider'); |
|
|
volumeSlider.addEventListener('input', function() { |
|
|
|
|
|
console.log('Volume set to:', this.value); |
|
|
}); |
|
|
|
|
|
|
|
|
const songCards = document.querySelectorAll('.song-card'); |
|
|
songCards.forEach(card => { |
|
|
card.addEventListener('click', function() { |
|
|
|
|
|
clearInterval(progressInterval); |
|
|
isPlaying = false; |
|
|
playBtn.innerHTML = '<i class="fas fa-play"></i>'; |
|
|
progress = 0; |
|
|
progressFill.style.width = '0%'; |
|
|
currentLine = 0; |
|
|
highlightLyricLine(-1); |
|
|
|
|
|
|
|
|
const songTitle = this.querySelector('h3').textContent; |
|
|
const artist = this.querySelector('p').textContent; |
|
|
|
|
|
document.querySelector('.text-2xl.font-bold').textContent = songTitle; |
|
|
document.querySelector('.text-gray-300').textContent = artist; |
|
|
|
|
|
|
|
|
lyricsContainer.scrollTo(0, 0); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=rockguard/karaoke" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
