codeg52's picture
Create a high-fidelity web UI design for an application called AIPHY — a “Giphy but for sound clips” platform.
4ea3c28 verified
// Modern smooth scroll behavior
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Audio player functionality
class AudioPlayer {
constructor() {
this.audio = new Audio();
this.currentSound = null;
this.isPlaying = false;
// Setup event listeners
document.addEventListener('click', (e) => {
if (e.target.closest('[data-play]')) {
const soundId = e.target.closest('[data-play]').getAttribute('data-play');
this.playSound(soundId);
}
});
}
playSound(soundId) {
// In a real app, we'd fetch the sound URL from an API
const soundUrl = `https://example.com/api/sounds/${soundId}/stream`;
if (this.currentSound !== soundId) {
this.audio.src = soundUrl;
this.currentSound = soundId;
}
if (this.isPlaying) {
this.audio.pause();
this.isPlaying = false;
} else {
this.audio.play()
.then(() => {
this.isPlaying = true;
// Update UI to show playing state
document.querySelectorAll('[data-play]').forEach(btn => {
if (btn.getAttribute('data-play') === soundId) {
btn.classList.add('playing');
btn.innerHTML = '<i data-feather="pause"></i>';
} else {
btn.classList.remove('playing');
btn.innerHTML = '<i data-feather="play"></i>';
}
});
feather.replace();
})
.catch(err => {
console.error('Error playing sound:', err);
});
}
// Update global player UI
this.updatePlayerUI(soundId);
}
updatePlayerUI(soundId) {
// In a real app, we'd fetch sound details from an API
const soundDetails = {
title: "Currently Playing",
duration: "0:45"
};
const playerEl = document.querySelector('.fixed-player');
if (playerEl) {
playerEl.querySelector('.sound-title').textContent = soundDetails.title;
playerEl.querySelector('.sound-duration').textContent = `0:12 / ${soundDetails.duration}`;
}
}
}
// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
const audioPlayer = new AudioPlayer();
// Initialize tooltips
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
});