Scribd
Upload
24 views

Coding

Uploaded by

Danjay
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
24 views

Coding

Uploaded by

Danjay
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 16

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Harmonia - Immerse Yourself in Music</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.css" rel="stylesheet">

<style>

:root {

--primary-color: #4A0E4E;

--secondary-color: #00B9AE;

--tertiary-color: #E6E6FA;

--background-color: #1a1a2e;

--text-color: #ffffff;

body {

background-color: var(--background-color);

color: var(--text-color);

font-family: 'Arial', sans-serif;


transition: background-color 0.3s ease, color 0.3s ease;

body.dark-mode {

--background-color: #f0f0f0;

--text-color: #1a1a2e;

.neumorphic {

background: var(--background-color);

box-shadow: 12px 12px 24px #0f0f1a, -12px -12px 24px #252542;

border-radius: 15px;

transition: all 0.3s ease;

body.dark-mode .neumorphic {

box-shadow: 12px 12px 24px #d1d1d1, -12px -12px 24px #ffffff;

.glassmorphism {

background: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(10px);

border-radius: 15px;

border: 1px solid rgba(255, 255, 255, 0.2);

}
.btn-primary {

background-color: var(--primary-color);

color: var(--text-color);

transition: all 0.3s ease;

.btn-primary:hover {

background-color: var(--secondary-color);

transform: translateY(-3px);

#particles-js {

position: absolute;

width: 100%;

height: 100%;

z-index: -1;

.hero-image {

animation: float 6s ease-in-out infinite;

@keyframes float {

0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }

100% { transform: translateY(0px); }

.music-visualizer {

width: 100%;

height: 200px;

margin-top: 2rem;

.playlist {

max-height: 300px;

overflow-y: auto;

.playlist-item {

cursor: pointer;

transition: all 0.3s ease;

.playlist-item:hover {

background-color: rgba(255, 255, 255, 0.1);

.playlist-item.active {
background-color: var(--secondary-color);

color: var(--background-color);

.progress-bar {

width: 100%;

height: 5px;

background-color: rgba(255, 255, 255, 0.2);

border-radius: 5px;

overflow: hidden;

.progress {

width: 0%;

height: 100%;

background-color: var(--secondary-color);

transition: width 0.1s linear;

</style>

</head>

<body class="min-h-screen flex flex-col">

<div id="particles-js"></div>

<header class="neumorphic p-4 m-4">

<nav class="flex justify-between items-center">


<h1 class="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-
pink-600">

Harmonia

</h1>

<div class="space-x-4">

<a href="#" class="hover:text-secondary-color transition-colors">Home</a>

<a href="#" class="hover:text-secondary-color transition-colors">Discover</a>

<a href="#" class="hover:text-secondary-color transition-colors">Library</a>

<button id="darkModeToggle" class="neumorphic p-2">🌓</button>

</div>

</nav>

</header>

<main class="flex-grow container mx-auto px-4">

<section class="hero flex flex-col md:flex-row items-center justify-between py-20">

<div class="md:w-1/2" data-aos="fade-right">

<h2 class="text-5xl font-bold mb-6">Discover Your Sound</h2>

<p class="text-xl mb-8">Immerse yourself in a world of music with Harmonia. Stream, create,
and share your perfect soundtrack.</p>

<button class="btn-primary neumorphic px-8 py-3 rounded-full text-lg font-semibold">

Start Listening Now

</button>

</div>

<div class="md:w-1/2 mt-10 md:mt-0" data-aos="fade-left">

<img src="https://picsum.photos/800/600?random=1" alt="Music Streaming" class="hero-


image rounded-lg shadow-2xl">

</div>
</section>

<section class="features grid grid-cols-1 md:grid-cols-3 gap-8 py-20">

<div class="feature neumorphic p-6" data-aos="flip-left">

<h3 class="text-2xl font-semibold mb-4">Personalized Playlists</h3>

<p>Discover new music tailored to your taste with our AI-powered recommendation
engine.</p>

</div>

<div class="feature neumorphic p-6" data-aos="flip-left" data-aos-delay="100">

<h3 class="text-2xl font-semibold mb-4">High-Quality Audio</h3>

<p>Experience crystal-clear sound with our lossless audio streaming technology.</p>

</div>

<div class="feature neumorphic p-6" data-aos="flip-left" data-aos-delay="200">

<h3 class="text-2xl font-semibold mb-4">Live Concerts</h3>

<p>Attend virtual concerts and exclusive live performances from your favorite artists.</p>

</div>

</section>

<section class="music-preview py-20">

<h2 class="text-4xl font-bold mb-10 text-center">Experience the Beat</h2>

<div class="music-visualizer neumorphic" id="visualizer"></div>

<div class="mt-6">

<div class="progress-bar">

<div class="progress" id="progress"></div>

</div>

<div class="flex justify-between items-center mt-4">


<span id="currentTime">0:00</span>

<div>

<button id="prevTrack" class="btn-primary neumorphic px-4 py-2 rounded-full text-lg font-


semibold mr-2">

</button>

<button id="playPause" class="btn-primary neumorphic px-6 py-2 rounded-full text-lg font-


semibold mr-2">

▶️

</button>

<button id="nextTrack" class="btn-primary neumorphic px-4 py-2 rounded-full text-lg font-


semibold">

</button>

</div>

<span id="duration">0:00</span>

</div>

</div>

</section>

<section class="playlist-section py-20">

<h2 class="text-4xl font-bold mb-10 text-center">Your Playlist</h2>

<div class="playlist neumorphic p-4">

<div class="playlist-item p-2 rounded" data-src="https://example.com/path/to/song1.mp3">

<h3 class="font-semibold">Song 1</h3>

<p class="text-sm text-gray-400">Artist 1</p>

</div>
<div class="playlist-item p-2 rounded" data-src="https://example.com/path/to/song2.mp3">

<h3 class="font-semibold">Song 2</h3>

<p class="text-sm text-gray-400">Artist 2</p>

</div>

<div class="playlist-item p-2 rounded" data-src="https://example.com/path/to/song3.mp3">

<h3 class="font-semibold">Song 3</h3>

<p class="text-sm text-gray-400">Artist 3</p>

</div>

</div>

</section>

</main>

<footer class="neumorphic p-4 mt-20">

<div class="container mx-auto text-center">

<p>&copy; 2023 Harmonia. All rights reserved.</p>

</div>

</footer>

<script>

// Particles.js configuration

particlesJS("particles-js", {

particles: {

number: { value: 80, density: { enable: true, value_area: 800 } },

color: { value: "#ffffff" },

shape: { type: "circle" },


opacity: { value: 0.5, random: false },

size: { value: 3, random: true },

line_linked: { enable: true, distance: 150, color: "#ffffff", opacity: 0.4, width: 1 },

move: { enable: true, speed: 6, direction: "none", random: false, straight: false, out_mode:
"out", bounce: false }

},

interactivity: {

detect_on: "canvas",

events: { onhover: { enable: true, mode: "repulse" }, onclick: { enable: true, mode: "push" },
resize: true },

modes: { repulse: { distance: 100, duration: 0.4 }, push: { particles_nb: 4 } }

},

retina_detect: true

});

// Initialize AOS (Animate on Scroll)

AOS.init();

// Music Visualizer

const visualizer = document.getElementById('visualizer');

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, visualizer.clientWidth / visualizer.clientHeight,


0.1, 1000);

const renderer = new THREE.WebGLRenderer();

renderer.setSize(visualizer.clientWidth, visualizer.clientHeight);

visualizer.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry(1, 1, 1);

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

const cube = new THREE.Mesh(geometry, material);

scene.add(cube);

camera.position.z = 5;

function animate() {

requestAnimationFrame(animate);

cube.rotation.x += 0.01;

cube.rotation.y += 0.01;

renderer.render(scene, camera);

animate();

// Audio playback and controls

const playPauseBtn = document.getElementById('playPause');

const prevTrackBtn = document.getElementById('prevTrack');

const nextTrackBtn = document.getElementById('nextTrack');

const progressBar = document.getElementById('progress');

const currentTimeEl = document.getElementById('currentTime');

const durationEl = document.getElementById('duration');

const playlist = document.querySelector('.playlist');

let currentTrack = 0;

let sound;
let isPlaying = false;

playPauseBtn.addEventListener('click', togglePlayPause);

prevTrackBtn.addEventListener('click', playPreviousTrack);

nextTrackBtn.addEventListener('click', playNextTrack);

function togglePlayPause() {

if (!sound) {

playTrack(currentTrack);

} else if (isPlaying) {

sound.pause();

playPauseBtn.textContent = '▶️';

} else {

sound.play();

playPauseBtn.textContent = '';

isPlaying = !isPlaying;

function playTrack(index) {

if (sound) {

sound.unload();

const tracks = Array.from(playlist.children);


const track = tracks[index];

sound = new Howl({

src: [track.dataset.src],

autoplay: false,

loop: false,

volume: 0.5,

onplay: function() {

requestAnimationFrame(updateProgress);

playPauseBtn.textContent = '';

isPlaying = true;

},

onpause: function() {

playPauseBtn.textContent = '▶️';

isPlaying = false;

},

onend: function() {

playNextTrack();

},

onload: function() {

durationEl.textContent = formatTime(sound.duration());

});

tracks.forEach((t, i) => {
t.classList.toggle('active', i === index);

});

sound.play();

function playPreviousTrack() {

currentTrack = (currentTrack - 1 + playlist.children.length) % playlist.children.length;

playTrack(currentTrack);

function playNextTrack() {

currentTrack = (currentTrack + 1) % playlist.children.length;

playTrack(currentTrack);

function updateProgress() {

if (sound && isPlaying) {

const progress = (sound.seek() / sound.duration()) * 100;

progressBar.style.width = `${progress}%`;

currentTimeEl.textContent = formatTime(sound.seek());

requestAnimationFrame(updateProgress);

}
function formatTime(seconds) {

const minutes = Math.floor(seconds / 60);

const remainingSeconds = Math.floor(seconds % 60);

return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;

playlist.addEventListener('click', function(e) {

const trackItem = e.target.closest('.playlist-item');

if (trackItem) {

currentTrack = Array.from(playlist.children).indexOf(trackItem);

playTrack(currentTrack);

});

// Dark mode toggle

const darkModeToggle = document.getElementById('darkModeToggle');

darkModeToggle.addEventListener('click', toggleDarkMode);

function toggleDarkMode() {

document.body.classList.toggle('dark-mode');

const isDarkMode = document.body.classList.contains('dark-mode');

darkModeToggle.textContent = isDarkMode ? '☀️' : '🌓';

</script>

</body>
</html>

You might also like