From b219b2f78749463539bae99980f2b0c91cf722a8 Mon Sep 17 00:00:00 2001 From: Flatlogic Bot Date: Thu, 13 Nov 2025 12:07:46 +0000 Subject: [PATCH] Auto commit: 2025-11-13T12:07:46.193Z --- assets/css/custom.css | 75 +++++++++++++++ assets/js/main.js | 62 +++++++++++++ index.php | 206 +++++++++++++----------------------------- 3 files changed, 198 insertions(+), 145 deletions(-) create mode 100644 assets/css/custom.css create mode 100644 assets/js/main.js diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..0ad0069 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,75 @@ + +:root { + --primary-color: #1DB954; + --secondary-color: #FFFFFF; + --background-color: #121212; + --surface-color: #181818; + --text-color: #FFFFFF; + --border-radius-md: 8px; + --border-radius-pill: 9999px; +} + +body { + background-color: var(--background-color); + color: var(--text-color); + font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; +} + +.navbar-brand { + font-weight: 700; + font-size: 1.5rem; + color: var(--primary-color) !important; +} + +.hero h1 { + font-weight: 700; + background: -webkit-linear-gradient(45deg, var(--primary-color), #1ED760); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.btn-mood { + background-color: var(--surface-color); + color: var(--text-color); + border: 1px solid var(--primary-color); + border-radius: var(--border-radius-pill); + padding: 12px 24px; + font-size: 1.1rem; + transition: all 0.3s ease; +} + +.btn-mood:hover, .btn-mood.active { + background: linear-gradient(45deg, var(--primary-color), #1ED760); + color: var(--background-color); + transform: translateY(-3px); + box-shadow: 0 4px 15px rgba(30, 215, 96, 0.4); +} + +#results { + padding: 2rem; + background-color: var(--surface-color); + border-radius: var(--border-radius-md); +} + +.video-container { + position: relative; + padding-bottom: 56.25%; /* 16:9 */ + height: 0; + overflow: hidden; + max-width: 100%; + background: #000; + border-radius: var(--border-radius-md); + margin-bottom: 1.5rem; +} + +.video-container iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +footer { + color: #a0a0a0; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..a2d1df9 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,62 @@ +document.addEventListener('DOMContentLoaded', function () { + const moodButtons = document.querySelectorAll('.btn-mood'); + const resultsSection = document.getElementById('results'); + const resultsTitle = document.getElementById('results-title'); + const videoGrid = document.getElementById('video-grid'); + + // Hardcoded YouTube video IDs for different moods + const musicDatabase = { + happy: ['3_w0dsiud4E', 'ZbZSe6N_BXs', 'r5Mozr0B-4o'], + sad: ['h1YVae0pKnA', 'RB-RcX5DS5A', 'co512-p_gA8'], + energetic: ['_tV5LEBDs7w', 'l-sZyfFX4F0', 'q9d57g_m_dw'], + calm: ['5qap5aO4i9A', 'lFcLg2hQjdc', 'DWcJFNfaw9c'], + upbeat: ['9d8SzG4FPyM', 'fK_zwl-lnmc', '0-7IHOXkiV8'] + }; + + moodButtons.forEach(button => { + button.addEventListener('click', function () { + const mood = this.dataset.mood; + + // Update active button + moodButtons.forEach(btn => btn.classList.remove('active')); + this.classList.add('active'); + + displayVideos(mood); + }); + }); + + function displayVideos(mood) { + const videos = musicDatabase[mood] || []; + videoGrid.innerHTML = ''; // Clear previous results + + if (videos.length > 0) { + resultsTitle.textContent = `Here's your ${mood} playlist`; + resultsSection.style.display = 'block'; + + videos.forEach(videoId => { + const col = document.createElement('div'); + col.className = 'col-lg-4 col-md-6'; + + const videoContainer = document.createElement('div'); + videoContainer.className = 'video-container'; + + const iframe = document.createElement('iframe'); + iframe.src = `https://www.youtube.com/embed/${videoId}`; + iframe.title = 'YouTube video player'; + iframe.frameBorder = '0'; + iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'; + iframe.allowFullscreen = true; + + videoContainer.appendChild(iframe); + col.appendChild(videoContainer); + videoGrid.appendChild(col); + }); + + // Smooth scroll to results + resultsSection.scrollIntoView({ behavior: 'smooth' }); + + } else { + resultsSection.style.display = 'none'; + } + } +}); \ No newline at end of file diff --git a/index.php b/index.php index 7205f3d..42ba3ce 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,66 @@ - - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + musicbox + + + + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- + + + +
+
+

Music for Every Mood

+

Select how you're feeling today, and we'll curate the perfect playlist for you.

+
+ +
+

How are you feeling?

+
+ + + + + +
+
+ + +
+ + + + + + + - + \ No newline at end of file