make the image a slide of series of images - Follow Up Deployment
Browse files- index.html +69 -2
- prompts.txt +3 -1
index.html
CHANGED
|
@@ -50,6 +50,15 @@
|
|
| 50 |
cursor: pointer;
|
| 51 |
}
|
| 52 |
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 53 |
</head>
|
| 54 |
<body class="min-h-screen">
|
| 55 |
<div class="container mx-auto px-4 py-8 max-w-6xl">
|
|
@@ -73,8 +82,11 @@
|
|
| 73 |
<div class="lg:col-span-2 space-y-6" data-aos="fade-right">
|
| 74 |
<div class="bg-slate-800 rounded-2xl p-6 shadow-xl">
|
| 75 |
<div class="flex flex-col items-center">
|
| 76 |
-
<div class="album-art w-64 h-64 rounded-xl overflow-hidden mb-6">
|
| 77 |
-
<img src="http://static.photos/music/640x360/1" alt="Album Art" class="w-full h-full object-cover">
|
|
|
|
|
|
|
|
|
|
| 78 |
</div>
|
| 79 |
<div class="text-center">
|
| 80 |
<h2 class="text-2xl font-semibold">Current Song</h2>
|
|
@@ -278,6 +290,61 @@
|
|
| 278 |
AOS.init();
|
| 279 |
feather.replace();
|
| 280 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 281 |
// Simple player functionality
|
| 282 |
document.addEventListener('DOMContentLoaded', function() {
|
| 283 |
const playButton = document.querySelector('.bg-gradient-to-r');
|
|
|
|
| 50 |
cursor: pointer;
|
| 51 |
}
|
| 52 |
</style>
|
| 53 |
+
<style>
|
| 54 |
+
.slide-img {
|
| 55 |
+
opacity: 0;
|
| 56 |
+
transition: opacity 1s ease-in-out;
|
| 57 |
+
}
|
| 58 |
+
.slide-img.active {
|
| 59 |
+
opacity: 1;
|
| 60 |
+
}
|
| 61 |
+
</style>
|
| 62 |
</head>
|
| 63 |
<body class="min-h-screen">
|
| 64 |
<div class="container mx-auto px-4 py-8 max-w-6xl">
|
|
|
|
| 82 |
<div class="lg:col-span-2 space-y-6" data-aos="fade-right">
|
| 83 |
<div class="bg-slate-800 rounded-2xl p-6 shadow-xl">
|
| 84 |
<div class="flex flex-col items-center">
|
| 85 |
+
<div class="album-art w-64 h-64 rounded-xl overflow-hidden mb-6 relative">
|
| 86 |
+
<img src="http://static.photos/music/640x360/1" alt="Album Art" class="w-full h-full object-cover absolute inset-0 slide-img active">
|
| 87 |
+
<img src="http://static.photos/music/640x360/2" alt="Album Art" class="w-full h-full object-cover absolute inset-0 slide-img">
|
| 88 |
+
<img src="http://static.photos/music/640x360/3" alt="Album Art" class="w-full h-full object-cover absolute inset-0 slide-img">
|
| 89 |
+
<img src="http://static.photos/music/640x360/4" alt="Album Art" class="w-full h-full object-cover absolute inset-0 slide-img">
|
| 90 |
</div>
|
| 91 |
<div class="text-center">
|
| 92 |
<h2 class="text-2xl font-semibold">Current Song</h2>
|
|
|
|
| 290 |
AOS.init();
|
| 291 |
feather.replace();
|
| 292 |
|
| 293 |
+
// Simple player functionality
|
| 294 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 295 |
+
const playButton = document.querySelector('.bg-gradient-to-r');
|
| 296 |
+
const progressBar = document.querySelector('.progress');
|
| 297 |
+
let isPlaying = false;
|
| 298 |
+
let progress = 0;
|
| 299 |
+
let interval;
|
| 300 |
+
|
| 301 |
+
playButton.addEventListener('click', function() {
|
| 302 |
+
isPlaying = !isPlaying;
|
| 303 |
+
|
| 304 |
+
if (isPlaying) {
|
| 305 |
+
playButton.innerHTML = '<i data-feather="pause"></i>';
|
| 306 |
+
feather.replace();
|
| 307 |
+
|
| 308 |
+
// Simulate progress
|
| 309 |
+
interval = setInterval(() => {
|
| 310 |
+
if (progress >= 100) {
|
| 311 |
+
progress = 0;
|
| 312 |
+
isPlaying = false;
|
| 313 |
+
clearInterval(interval);
|
| 314 |
+
playButton.innerHTML = '<i data-feather="play"></i>';
|
| 315 |
+
feather.replace();
|
| 316 |
+
} else {
|
| 317 |
+
progress += 0.5;
|
| 318 |
+
progressBar.style.width = progress + '%';
|
| 319 |
+
}
|
| 320 |
+
}, 100);
|
| 321 |
+
} else {
|
| 322 |
+
clearInterval(interval);
|
| 323 |
+
playButton.innerHTML = '<i data-feather="play"></i>';
|
| 324 |
+
feather.replace();
|
| 325 |
+
}
|
| 326 |
+
});
|
| 327 |
+
|
| 328 |
+
// Image slideshow
|
| 329 |
+
let slideIndex = 0;
|
| 330 |
+
const slides = document.querySelectorAll('.slide-img');
|
| 331 |
+
setInterval(() => {
|
| 332 |
+
slides[slideIndex].classList.remove('active');
|
| 333 |
+
slideIndex = (slideIndex + 1) % slides.length;
|
| 334 |
+
slides[slideIndex].classList.add('active');
|
| 335 |
+
}, 3000);
|
| 336 |
+
|
| 337 |
+
// File upload handling
|
| 338 |
+
const fileUpload = document.getElementById('file-upload');
|
| 339 |
+
fileUpload.addEventListener('change', function(e) {
|
| 340 |
+
const files = e.target.files;
|
| 341 |
+
if (files.length > 0) {
|
| 342 |
+
alert(`Added ${files.length} music file(s) to your library!`);
|
| 343 |
+
// In a real app, you would process these files and add them to the playlist
|
| 344 |
+
}
|
| 345 |
+
});
|
| 346 |
+
});
|
| 347 |
+
</script>
|
| 348 |
// Simple player functionality
|
| 349 |
document.addEventListener('DOMContentLoaded', function() {
|
| 350 |
const playButton = document.querySelector('.bg-gradient-to-r');
|
prompts.txt
CHANGED
|
@@ -1,4 +1,6 @@
|
|
| 1 |
build a site for playing offline musics
|
| 2 |
change the name to courageous tunes
|
| 3 |
add features like library and quality of music like mp4 or high quality sounds
|
| 4 |
-
add features like library and quality of music like mp4 or high quality sounds
|
|
|
|
|
|
|
|
|
| 1 |
build a site for playing offline musics
|
| 2 |
change the name to courageous tunes
|
| 3 |
add features like library and quality of music like mp4 or high quality sounds
|
| 4 |
+
add features like library and quality of music like mp4 or high quality sounds
|
| 5 |
+
use java language
|
| 6 |
+
make the image a slide of series of images
|