A modern music pick list panel with YouTube integration
当前为
// ==UserScript==
// @name MMT Music Panel
// @namespace http://tampermonkey.net/
// @version 2.1.0
// @description A modern music pick list panel with YouTube integration
// @author MMT
// @match https://docs.google.com/*
// @match https://docs.google.com/*
// @grant none
// @require https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js
// @require https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js
// ==/UserScript==
(function() {
'use strict';
// Load YouTube API script
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Create the main panel container
const panel = document.createElement('div');
panel.id = 'music-panel';
panel.style.cssText = `
position: fixed;
bottom: 30px;
right: 30px;
width: 380px; /* Slimmer width */
max-height: 600px; /* Taller for a more elegant look */
background: linear-gradient(135deg, #1E3C72, #2A5298); /* Cooler blue tones with a smooth gradient */
color: #F0F0F0; /* Softer off-white text for better contrast */
border-radius: 24px; /* Slightly less rounded for a more refined look */
padding: 20px;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6); /* Moderate shadow for depth without overwhelming */
display: none;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
font-family: 'Poppins', sans-serif;
z-index: 1000;
border: 2px solid rgba(100, 160, 220, 0.8); /* Cool-toned blue border */
backdrop-filter: blur(10px); /* Glass-like effect, not too strong */
opacity: 0.97; /* Slight transparency for modern feel */
transform: scale(1); /* Default scale for smooth scaling animations */
/* Hover effect for interactivity */
&:hover {
transform: scale(1.03); /* Slight scale-up on hover */
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.75); /* Stronger shadow for hover effect */
}
`;
// You can then append this panel to the body or any other container
document.body.appendChild(panel);
// Adding a smooth transition for opening/closing
panel.style.transform = 'translateY(100%)';
panel.style.transition = 'transform 0.3s ease-in-out';
// Function to show the panel
function showPanel() {
panel.style.display = 'block';
setTimeout(() => {
panel.style.transform = 'translateY(0)';
}, 10); // Delay to ensure the display change is applied
}
// Function to hide the panel
function hidePanel() {
panel.style.transform = 'translateY(100%)';
setTimeout(() => {
panel.style.display = 'none';
}, 300); // Delay to match the transition duration
}
// Example usage: Show the panel
showPanel(); // Call this function to show the panel
document.body.appendChild(panel);
// Header section
const header = document.createElement('div');
header.innerHTML = `
<strong style="display: block; font-size: 22px; color: #FFDA44; margin-bottom: 5px;">
Now Playing
</strong>
<span id="currently-playing" style="font-size: 18px; color: #EAEAEA;">
None
</span>
`;
header.style.cssText = `
background-color: rgba(255, 255, 255, 0.1); /* Soft transparent background */
padding: 15px;
margin-bottom: 20px;
text-align: center;
border-radius: 12px; /* Rounded edges for a softer look */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /* Adds depth with a subtle shadow */
backdrop-filter: blur(5px); /* Glass-like effect */
`;
panel.appendChild(header);
// Track List with thumbnails and gradients
const tracks = [
{ title: "Uptown Funk - Mark Ronson ft. Bruno Mars", duration: "4:31", videoId: "OPf0YbXqDm0", icon: "fa-funk", color: "#FF5733" },
{ title: "Sorry - Justin Bieber", duration: "3:25", videoId: "fRh_vgS2dFE", icon: "fa-smile", color: "#FF6347" },
{ title: "Thinking Out Loud - Ed Sheeran", duration: "4:41", videoId: "lp-EO5I60KA", icon: "fa-heart", color: "#C71585" },
{ title: "Love Me Like You Do - Ellie Goulding", duration: "4:10", videoId: "AJtDXIazrMo", icon: "fa-heartbeat", color: "#FF1493" },
{ title: "Shake It Off - Taylor Swift", duration: "4:01", videoId: "nfWlot6h_JM", icon: "fa-music", color: "#FF4500" },
{ title: "Closer - The Chainsmokers ft. Halsey", duration: "4:21", videoId: "PT2_F-1esPk", icon: "fa-heart", color: "#FFD700" },
{ title: "Happy - Pharrell Williams", duration: "4:00", videoId: "y6Sxv-sUYtM", icon: "fa-smile", color: "#FF4500" },
{ title: "Firework - Katy Perry", duration: "3:54", videoId: "QGJuMBdaqIw", icon: "fa-firework", color: "#FF6347" },
{ title: "What Do You Mean? - Justin Bieber", duration: "3:26", videoId: "DK_0jXPuIr0", icon: "fa-question", color: "#FF8C00" },
{ title: "Photograph - Ed Sheeran", duration: "4:18", videoId: "nSDgHBxUbVQ", icon: "fa-camera", color: "#FF7F50" },
{ title: "Can't Stop The Feeling! - Justin Timberlake", duration: "3:56", videoId: "ru0K8uYEZWw", icon: "fa-sun", color: "#FFD700" },
{ title: "Titanium - David Guetta ft. Sia", duration: "4:05", videoId: "JRfuAukYTKg", icon: "fa-shield-alt", color: "#4682B4" },
{ title: "Halo - Beyoncé", duration: "3:44", videoId: "bnVUHWCynig", icon: "fa-angel", color: "#8A2BE2" },
{ title: "Demons - Imagine Dragons", duration: "2:57", videoId: "mWRsgZuwf_8", icon: "fa-skull", color: "#B22222" },
{ title: "In the End - Linkin Park", duration: "3:36", videoId: "eVTXPUF4Oz4", icon: "fa-puzzle-piece", color: "#2E8B57" },
{ title: "Rockabye - Clean Bandit ft. Sean Paul & Anne-Marie", duration: "4:11", videoId: "papuvlVeZg8", icon: "fa-baby", color: "#FF4500" }
,
{ title: "Blinding Lights - The Weeknd", duration: "3:20", videoId: "4NRXx6U8ABQ", icon: "fa-star", color: "#33FF57" },
{ title: "Despacito - Luis Fonsi ft. Daddy Yankee", duration: "3:47", videoId: "kJQP7kiw5Fk", icon: "fa-headphones", color: "#3357FF" },
{ title: "Bad Guy - Billie Eilish", duration: "3:14", videoId: "DyDfgMOUjCI", icon: "fa-exclamation-triangle", color: "#FF33A1" },
{ title: "Senorita - Shawn Mendes & Camila Cabello", duration: "3:11", videoId: "Pkh8UtueQ3o", icon: "fa-heart", color: "#FF8C00" },
{ title: "Dance Monkey - Tones and I", duration: "3:29", videoId: "q0hyYWKXF0Q", icon: "fa-dance", color: "#8A2BE2" },
{ title: "Someone You Loved - Lewis Capaldi", duration: "3:02", videoId: "zABLQcW2NEI", icon: "fa-sad-tear", color: "#2E8B57" },
{ title: "Watermelon Sugar - Harry Styles", duration: "3:07", videoId: "E07s5byfNiU", icon: "fa-watermelon-slice", color: "#FF4500" },
{ title: "Thank U, Next - Ariana Grande", duration: "3:27", videoId: "gl1aHhXnN1k", icon: "fa-quote-right", color: "#DA70D6" },
{ title: "Old Town Road - Lil Nas X ft. Billy Ray Cyrus", duration: "2:37", videoId: "w2Ov5jzm3Bs", icon: "fa-guitar", color: "#D2691E" },
{ title: "Roar - Katy Perry", duration: "3:42", videoId: "CevxZvSJLk8", icon: "fa-lion", color: "#FF1493" },
{ title: "Hello - Adele", duration: "4:55", videoId: "YQHsXMglC9A", icon: "fa-phone", color: "#708090" },
{ title: "Stay - The Kid LAROI & Justin Bieber", duration: "2:55", videoId: "1DsK1Z6uL5I", icon: "fa-stopwatch", color: "#FF6347" },
{ title: "Levitating - Dua Lipa", duration: "3:23", videoId: "t1TcW3abC8I", icon: "fa-rocket", color: "#FFD700" },
{ title: "Savage Love - Jawsh 685 x Jason Derulo", duration: "2:53", videoId: "2EwViQ3KZcE", icon: "fa-heartbeat", color: "#FF4500" },
{ title: "Faded - Alan Walker", duration: "3:32", videoId: "60ItHLz5WEA", icon: "fa-eye", color: "#4682B4" },
{ title: "Memories - Maroon 5", duration: "3:31", videoId: "UrIiLvg58SY", icon: "fa-book", color: "#5F9EA0" },
{ title: "7 Rings - Ariana Grande", duration: "2:58", videoId: "QYhE38p8m9A", icon: "fa-gem", color: "#DAA520" },
{ title: "Don't Start Now - Dua Lipa", duration: "3:03", videoId: "oygrmJ3m0Ik", icon: "fa-times-circle", color: "#FF69B4" },
{ title: "My Heart Will Go On - Celine Dion", duration: "4:40", videoId: "wP4S2W9r3rM", icon: "fa-heart", color: "#B22222" },
{ title: "All of Me - John Legend", duration: "4:29", videoId: "450p7goxZyI", icon: "fa-music", color: "#A0522D" },
{ title: "Shallow - Lady Gaga & Bradley Cooper", duration: "3:36", videoId: "bo_efYhYU2A", icon: "fa-water", color: "#00BFFF" },
{ title: "Believer - Imagine Dragons", duration: "3:24", videoId: "7wtX6f6YzY4", icon: "fa-bolt", color: "#FF7F50" },
{ title: "Let Me Love You - Mario", duration: "4:04", videoId: "We1q5G4Dfto", icon: "fa-heart", color: "#FF6347" },
{ title: "Say You Won't Let Go - James Arthur", duration: "3:31", videoId: "0yD2v2VxNUA", icon: "fa-hands", color: "#FF8C00" },
{ title: "We Don't Talk Anymore - Charlie Puth ft. Selena Gomez", duration: "3:38", videoId: "0pYtKq9UbEo", icon: "fa-comments", color: "#4682B4" },
{ title: "Counting Stars - OneRepublic", duration: "4:17", videoId: "hT_nvWreIhg", icon: "fa-star", color: "#6A5ACD" },
{ title: "Perfect - Ed Sheeran", duration: "4:23", videoId: "2Vv-BfVoq4g", icon: "fa-heart", color: "#DC143C" },
{ title: "Killing Me Softly - Roberta Flack", duration: "4:50", videoId: "YBgYx0YmPjI", icon: "fa-sad-cry", color: "#8B0000" },
{ title: "Hips Don't Lie - Shakira ft. Wyclef Jean", duration: "3:38", videoId: "DUT5rEU6pqM", icon: "fa-dancer", color: "#FFD700" },
{ title: "I Will Always Love You - Whitney Houston", duration: "4:31", videoId: "3JWTaaS7LdU", icon: "fa-angel", color: "#B0C4DE" },
{ title: "Young Dumb & Broke - Khalid", duration: "3:17", videoId: "3qM0a2zC1Fc", icon: "fa-bell", color: "#FF7F50" },
{ title: "Sweet but Psycho - Ava Max", duration: "3:07", videoId: "ZCmyI3K1KxU", icon: "fa-star", color: "#FF1493" },
{ title: "Rather Be - Clean Bandit ft. Jess Glynne", duration: "3:28", videoId: "mqXv5U1fyyA", icon: "fa-cog", color: "#FF4500" },
{ title: "Don't Let Me Down - The Chainsmokers ft. Daya", duration: "3:28", videoId: "Io0c3g8Wg7I", icon: "fa-thumbs-up", color: "#4682B4" },
{ title: "365 - Zedd & Katy Perry", duration: "3:21", videoId: "19kQys0U9qQ", icon: "fa-calendar", color: "#B8860B" },
{ title: "One Kiss - Calvin Harris & Dua Lipa", duration: "3:31", videoId: "9Sc-8qG8puI", icon: "fa-kiss", color: "#DC143C" },
{ title: "Love Yourself - Justin Bieber", duration: "3:53", videoId: "oygrmJ3m0Ik", icon: "fa-heart", color: "#FF69B4" },
{ title: "I Gotta Feeling - The Black Eyed Peas", duration: "4:49", videoId: "uSD4vT2z8Y8", icon: "fa-smile", color: "#FFD700" },
{ title: "Uptown Funk - Mark Ronson ft. Bruno Mars", duration: "4:30", videoId: "OPf0Y6YaJU0", icon: "fa-funk", color: "#8B0000" },
{ title: "Royals - Lorde", duration: "3:10", videoId: "nlcIKh6sB0I", icon: "fa-crown", color: "#B22222" },
{ title: "Waka Waka (This Time for Africa) - Shakira", duration: "3:31", videoId: "pRpeEdMmmQ0", icon: "fa-flag", color: "#FFD700" },
{ title: "Rolling in the Deep - Adele", duration: "3:54", videoId: "rYEDA3JcQqw", icon: "fa-water", color: "#708090" },
{ title: "One Dance - Drake ft. Wizkid & Kyla", duration: "2:54", videoId: "iAbnEUA0wpA", icon: "fa-dance", color: "#FF4500" },
{ title: "No Tears Left to Cry - Ariana Grande", duration: "3:26", videoId: "ffxKSjUwKdU", icon: "fa-umbrella", color: "#DA70D6" },
{ title: "Havana - Camila Cabello ft. Young Thug", duration: "3:37", videoId: "Bk-aRMDcX88", icon: "fa-music", color: "#FF5733" },
{ title: "Lose Yourself - Eminem", duration: "5:26", videoId: "xFYQQPAOz7Y", icon: "fa-fist-raised", color: "#B22222" },
{ title: "Rockstar - Post Malone ft. 21 Savage", duration: "3:38", videoId: "UceaB4D0jpo", icon: "fa-guitar", color: "#FF8C00" },
{ title: "Wake Me Up - Avicii", duration: "4:33", videoId: "IcrbM1l_BoI", icon: "fa-sun", color: "#FFD700" },
{ title: "Cheap Thrills - Sia ft. Sean Paul", duration: "3:44", videoId: "nYh-n7EOtMA", icon: "fa-dollar-sign", color: "#FF6347" },
{ title: "Sorry Not Sorry - Demi Lovato", duration: "3:23", videoId: "5jemVf_qfqk", icon: "fa-thumbs-up", color: "#FF1493" },
{ title: "Attention - Charlie Puth", duration: "3:31", videoId: "nfs8NYg7yQM", icon: "fa-bell", color: "#4682B4" },
{ title: "Lovely - Billie Eilish & Khalid", duration: "3:20", videoId: "V1Pl8CzNzCw", icon: "fa-heart-broken", color: "#8A2BE2" },
{ title: "See You Again - Wiz Khalifa ft. Charlie Puth", duration: "3:57", videoId: "RgKAFK5djSk", icon: "fa-road", color: "#708090" },
{ title: "Shape of My Heart - Backstreet Boys", duration: "3:50", videoId: "cfmP7NkvF8M", icon: "fa-heart", color: "#FF4500" },
{ title: "Umbrella - Rihanna ft. Jay-Z", duration: "4:14", videoId: "CvBfHwUxHIk", icon: "fa-cloud-showers-heavy", color: "#2E8B57" },
{ title: "Grenade - Bruno Mars", duration: "3:50", videoId: "SR6iYWJxHqs", icon: "fa-bomb", color: "#DC143C" },
{ title: "All About That Bass - Meghan Trainor", duration: "3:10", videoId: "7PCkvCPvDXk", icon: "fa-music", color: "#FF69B4" },
{ title: "Call Me Maybe - Carly Rae Jepsen", duration: "3:13", videoId: "fWNaR-rxAic", icon: "fa-phone", color: "#FF4500" },
{ title: "Don't Let Me Down - The Chainsmokers ft. Daya", duration: "3:28", videoId: "Io0fBr1XBUA", icon: "fa-arrow-down", color: "#4682B4" },
{ title: "Sugar - Maroon 5", duration: "5:02", videoId: "09R8_2nJtjg", icon: "fa-candy-cane", color: "#FF6347" },
{ title: "Happy - Pharrell Williams", duration: "3:53", videoId: "ZbZSe6N_BXs", icon: "fa-smile", color: "#FFD700" },
{ title: "Uptown Funk - Mark Ronson ft. Bruno Mars", duration: "4:30", videoId: "OPf0YbXqDm0", icon: "fa-fire", color: "#FF6347" },
{ title: "Counting Stars - OneRepublic", duration: "4:17", videoId: "hT_nvWreIhg", icon: "fa-star", color: "#6A5ACD" },
{ title: "Don't Stop Believin' - Journey", duration: "4:11", videoId: "1k8craCGpgs", icon: "fa-mountain", color: "#4682B4" },
{ title: "Bohemian Rhapsody - Queen", duration: "6:07", videoId: "fJ9rUzIMcZQ", icon: "fa-crown", color: "#FFD700" },
{ title: "Take On Me - a-ha", duration: "3:48", videoId: "djV11Xbc914", icon: "fa-heartbeat", color: "#FF69B4" },
{ title: "Thriller - Michael Jackson", duration: "5:58", videoId: "sOnqjkJTMaA", icon: "fa-ghost", color: "#FF4500" },
{ title: "Beat It - Michael Jackson", duration: "4:57", videoId: "oRdxUFDoQe0", icon: "fa-music", color: "#B22222" },
{ title: "Somebody That I Used To Know - Gotye ft. Kimbra", duration: "4:04", videoId: "8UVNT4wvIGY", icon: "fa-handshake", color: "#8A2BE2" },
{ title: "Can't Feel My Face - The Weeknd", duration: "3:39", videoId: "KEI4qSrkPAs", icon: "fa-face-meh", color: "#FF8C00" },
{ title: "Shake It Off - Taylor Swift", duration: "4:02", videoId: "nfWlot6h_JM", icon: "fa-dance", color: "#FF4500" },
{ title: "Party Rock Anthem - LMFAO", duration: "6:16", videoId: "KQ6zr6kCPj8", icon: "fa-glass-cheers", color: "#FFD700" },
{ title: "Survivor - Destiny's Child", duration: "4:06", videoId: "Wmc8bQoL-J0", icon: "fa-shield-alt", color: "#DC143C" },
{ title: "Eye of the Tiger - Survivor", duration: "4:04", videoId: "btPJPFnesV4", icon: "fa-eye", color: "#FF5733" },
{ title: "Livin' on a Prayer - Bon Jovi", duration: "4:10", videoId: "lDK9QqIzhwk", icon: "fa-pray", color: "#4682B4" },
{ title: "We Will Rock You - Queen", duration: "2:02", videoId: "HgzGwKwLmgM", icon: "fa-hand-rock", color: "#FFD700" },
{ title: "Shape of You - Ed Sheeran", duration: "3:53", videoId: "JGwWNGJdvx8", icon: "fa-music", color: "#FF6347" },
{ title: "Bad Romance - Lady Gaga", duration: "5:08", videoId: "qrO4YZeyl0I", icon: "fa-kiss", color: "#FF1493" },
{ title: "What Makes You Beautiful - One Direction", duration: "3:27", videoId: "QJO3ROT-A4E", icon: "fa-heart", color: "#FF69B4" },
{ title: "Wake Me Up Before You Go-Go - Wham!", duration: "3:51", videoId: "pIgZ7gMze7A", icon: "fa-coffee", color: "#FF6347" },
{ title: "We Are the Champions - Queen", duration: "3:10", videoId: "04854XqcfCY", icon: "fa-trophy", color: "#FFD700" },
{ title: "I'm Yours - Jason Mraz", duration: "4:02", videoId: "EkHTsc9PU2A", icon: "fa-heart", color: "#2E8B57" },
{ title: "Just the Way You Are - Bruno Mars", duration: "3:58", videoId: "LjhCEhWiKXk", icon: "fa-star", color: "#FF5733" },
{ title: "Halo - Beyoncé", duration: "4:21", videoId: "bnVUHWCynig", icon: "fa-angel", color: "#4682B4" },
{ title: "Let It Go - Idina Menzel (Frozen)", duration: "3:45", videoId: "L0MK7qz13bU", icon: "fa-snowflake", color: "#00BFFF" },
{ title: "Take Me to Church - Hozier", duration: "4:02", videoId: "PVjiKRfKpPI", icon: "fa-church", color: "#708090" },
{ title: "I Gotta Feeling - The Black Eyed Peas", duration: "4:49", videoId: "uSD4vsh1zDA", icon: "fa-music", color: "#FF6347" },
{ title: "Happy Together - The Turtles", duration: "2:55", videoId: "f-10fZ57LIw", icon: "fa-heart", color: "#FF69B4" },
{ title: "All Star - Smash Mouth", duration: "3:21", videoId: "L_jWHffIx5E", icon: "fa-star", color: "#FFD700" },
{ title: "Toxic - Britney Spears", duration: "3:32", videoId: "LOZuxwVk7TU", icon: "fa-skull-crossbones", color: "#FF1493" },
{ title: "Rolling in the Deep - Adele", duration: "3:48", videoId: "rY0WxgSXdEE", icon: "fa-music", color: "#A0522D" },
{ title: "Someone Like You - Adele", duration: "4:45", videoId: "hLQl3WQQoQ0", icon: "fa-heart", color: "#FF6347" },
{ title: "All of Me - John Legend", duration: "4:29", videoId: "450p7goxZyI", icon: "fa-music", color: "#2E8B57" },
{ title: "Say So - Doja Cat", duration: "3:58", videoId: "nYh-n7EOtMA", icon: "fa-microphone", color: "#FF69B4" },
{ title: "Watermelon Sugar - Harry Styles", duration: "3:07", videoId: "E07s5byfNiU", icon: "fa-watermelon-slice", color: "#FF4500" },
{ title: "Adore You - Harry Styles", duration: "3:27", videoId: "YQHsXMglC9A", icon: "fa-angel", color: "#FFD700" },
{ title: "Roses - SAINt JHN", duration: "2:59", videoId: "vU2eGxR1gfU", icon: "fa-flower", color: "#FF69B4" },
{ title: "Break My Heart - Dua Lipa", duration: "3:42", videoId: "IgG_iyI54Dw", icon: "fa-heart", color: "#FF6347" },
{ title: "Mood - 24kGoldn ft. Iann Dior", duration: "2:21", videoId: "5D01wW8AyKo", icon: "fa-smile", color: "#FFD700" },
{ title: "Good 4 U - Olivia Rodrigo", duration: "2:58", videoId: "gNi_6U5P4fA", icon: "fa-thumbs-up", color: "#FF4500" },
{ title: "Stay - The Kid LAROI & Justin Bieber", duration: "2:55", videoId: "1DsK1Z6uL5I", icon: "fa-stopwatch", color: "#FF6347" },
{ title: "Bad Habits - Ed Sheeran", duration: "3:51", videoId: "eJg2gUd8R2I", icon: "fa-badger", color: "#FF5733" },
{ title: "Peaches - Justin Bieber ft. Daniel Caesar & Giveon", duration: "3:18", videoId: "tE7bh_PzHcM", icon: "fa-peach", color: "#FF4500" },
{ title: "Leave The Door Open - Silk Sonic", duration: "4:02", videoId: "adMCAW1Ll0g", icon: "fa-door-open", color: "#8A2BE2" },
{ title: "Save Your Tears - The Weeknd", duration: "3:35", videoId: "4NRXx6U8ABQ", icon: "fa-sad-cry", color: "#FF5733" },
{ title: "Deja Vu - Olivia Rodrigo", duration: "3:35", videoId: "xU7m0YUnAmY", icon: "fa-clock", color: "#4682B4" },
{ title: "Blame It On Me - George Ezra", duration: "3:18", videoId: "Sz7jK3N2E0c", icon: "fa-flag", color: "#DAA520" },
{ title: "Dance Monkey - Tones and I", duration: "3:29", videoId: "q0hyYWKXF0Q", icon: "fa-dance", color: "#8A2BE2" },
{ title: "Don't Start Now - Dua Lipa", duration: "3:03", videoId: "oygrmJ3m0Ik", icon: "fa-times-circle", color: "#FF69B4" },
{ title: "Perfect - Ed Sheeran", duration: "4:23", videoId: "2Vv-BfVoq4g", icon: "fa-heart", color: "#DC143C" },
{ title: "Finesse - Bruno Mars ft. Cardi B", duration: "3:11", videoId: "oD8b1HMGdHI", icon: "fa-music", color: "#FF4500" },
{ title: "No Guidance - Chris Brown ft. Drake", duration: "4:18", videoId: "KkFZx2v1Hsk", icon: "fa-dance", color: "#6A5ACD" },
{ title: "What Do You Mean? - Justin Bieber", duration: "3:25", videoId: "u9Dg-g7t2l4", icon: "fa-question", color: "#FF6347" },
{ title: "Blinding Lights - The Weeknd", duration: "3:20", videoId: "4NRXx6U8ABQ", icon: "fa-star", color: "#33FF57" },
{ title: "You Are the Reason - Calum Scott", duration: "3:24", videoId: "h4ywwd1LctI", icon: "fa-heart", color: "#FF4500" },
{ title: "Someone You Loved - Lewis Capaldi", duration: "3:02", videoId: "zABLQcW2NEI", icon: "fa-sad-tear", color: "#2E8B57" },
{ title: "A Million Dreams - The Greatest Showman Cast", duration: "4:31", videoId: "gG4hS_jzZQo", icon: "fa-dream", color: "#FF69B4" },
{ title: "All The Stars - Kendrick Lamar & SZA", duration: "3:53", videoId: "Lh_BHtGfM0c", icon: "fa-star", color: "#FFD700" },
{ title: "Fight Song - Rachel Platten", duration: "3:24", videoId: "xo1VInw-SKc", icon: "fa-fist-raised", color: "#FF5733" },
{ title: "Umbrella - Rihanna ft. Jay-Z", duration: "4:36", videoId: "oRdxUFDoQe0", icon: "fa-umbrella", color: "#FF1493" },
{ title: "I Don't Care - Ed Sheeran & Justin Bieber", duration: "3:25", videoId: "dJd2KxCwF3I", icon: "fa-user-friends", color: "#FF6347" },
{ title: "Sucker - Jonas Brothers", duration: "3:01", videoId: "CnH6H6ERgI8", icon: "fa-star", color: "#FF4500" },
{ title: "Rolling in the Deep - Adele", duration: "3:48", videoId: "rY0WxgSXdEE", icon: "fa-music", color: "#A0522D" },
{ title: "Believer - Imagine Dragons", duration: "3:24", videoId: "7wtX6f6YzY4", icon: "fa-bolt", color: "#FF7F50" },
{ title: "What Makes You Beautiful - One Direction", duration: "3:27", videoId: "QJO3ROT-A4E", icon: "fa-heart", color: "#FF69B4" },
{ title: "The Climb - Miley Cyrus", duration: "3:31", videoId: "NAeXH4DNRB8", icon: "fa-mountain", color: "#4682B4" },
{ title: "Fight Song - Rachel Platten", duration: "3:24", videoId: "xo1VInw-SKc", icon: "fa-fist-raised", color: "#FF5733" },
{ title: "Young, Wild & Free - Snoop Dogg & Wiz Khalifa", duration: "3:28", videoId: "6yib52YdHOY", icon: "fa-smoke", color: "#FFD700" },
{ title: "Shape of You - Ed Sheeran", duration: "3:53", videoId: "JGwWNGJdvx8", icon: "fa-music", color: "#FF4500" },
{ title: "Shallow - Lady Gaga & Bradley Cooper", duration: "3:36", videoId: "bo_efYhYU2A", icon: "fa-star", color: "#C71585" },
{ title: "Happier - Marshmello ft. Bastille", duration: "3:34", videoId: "m8s8W2ef4ro", icon: "fa-smile", color: "#FFD700" },
{ title: "Dusk Till Dawn - Zayn ft. Sia", duration: "4:00", videoId: "m9cN4LP3M24", icon: "fa-moon", color: "#A9A9A9" },
{ title: "Old Town Road - Lil Nas X ft. Billy Ray Cyrus", duration: "2:37", videoId: "r7qovpF5s1c", icon: "fa-horse", color: "#8B4513" },
{ title: "Titanium - David Guetta ft. Sia", duration: "4:05", videoId: "JRfuAukI1IY", icon: "fa-shield-alt", color: "#FF6347" },
{ title: "Lean On - Major Lazer ft. MØ & DJ Snake", duration: "2:56", videoId: "Yq8n6eT2YlE", icon: "fa-balance-scale", color: "#8A2BE2" },
{ title: "I Like It - Cardi B, Bad Bunny & J Balvin", duration: "4:13", videoId: "iQ0KQg8S7I4", icon: "fa-heart", color: "#FF1493" },
{ title: "Truth Hurts - Lizzo", duration: "2:53", videoId: "zWSf7C7iA_M", icon: "fa-heartbreak", color: "#FF69B4" },
{ title: "Bad Guy - Billie Eilish", duration: "3:14", videoId: "DYZg6UoOod4", icon: "fa-skull-crossbones", color: "#1E90FF" },
{ title: "Can’t Stop the Feeling! - Justin Timberlake", duration: "3:56", videoId: "ru0K8z61A3Y", icon: "fa-dance", color: "#FF6347" },
{ title: "Cheap Thrills - Sia", duration: "3:32", videoId: "2b6mK74Xzqw", icon: "fa-dollar-sign", color: "#FF4500" },
{ title: "Wake Me Up - Avicii", duration: "4:07", videoId: "IcrbM1l_BoI", icon: "fa-sun", color: "#FFD700" },
{ title: "Perfect - Ed Sheeran", duration: "4:23", videoId: "2Vv-BfVoq4g", icon: "fa-heart", color: "#DC143C" },
{ title: "Ride - Twenty One Pilots", duration: "3:34", videoId: "dXL2yP0Am5c", icon: "fa-bicycle", color: "#4682B4" },
{ title: "Girls Like You - Maroon 5 ft. Cardi B", duration: "3:55", videoId: "aJ0b4h1xSuA", icon: "fa-girl", color: "#FF6347" },
{ title: "Say You Won't Let Go - James Arthur", duration: "3:31", videoId: "0yR7N2F1G1g", icon: "fa-heart", color: "#FF4500" },
{ title: "Counting Stars - OneRepublic", duration: "4:17", videoId: "mZB7h4Y7MrQ", icon: "fa-star", color: "#FFD700" },
{ title: "Castle on the Hill - Ed Sheeran", duration: "4:21", videoId: "i18S0E0htmU", icon: "fa-castle", color: "#A0522D" },
{ title: "Closer - The Chainsmokers ft. Halsey", duration: "4:04", videoId: "PT2zYZ1yR_8", icon: "fa-link", color: "#FF6347" },
{ title: "Can't Feel My Face - The Weeknd", duration: "3:35", videoId: "KE2Xj4c6gD4", icon: "fa-fire", color: "#FF4500" },
{ title: "Feel It Still - Portugal. The Man", duration: "2:43", videoId: "eC8Q1s4dLhM", icon: "fa-clipboard-list", color: "#4682B4" },
{ title: "Dancing With A Stranger - Sam Smith & Normani", duration: "3:22", videoId: "I-KV6fZ5KQ4", icon: "fa-dance", color: "#FF69B4" },
{ title: "Love Me Like You Do - Ellie Goulding", duration: "4:10", videoId: "mN0XjHkz8os", icon: "fa-heart", color: "#FF6347" },
{ title: "That's What I Like - Bruno Mars", duration: "3:26", videoId: "dX2mU57qH5Q", icon: "fa-gift", color: "#FFD700" },
{ title: "Sorry - Justin Bieber", duration: "3:20", videoId: "n1oP0VZP2Lw", icon: "fa-sorry", color: "#FF6347" },
{ title: "The Middle - Zedd, Maren Morris, Grey", duration: "3:04", videoId: "kA6Hgsb3hEY", icon: "fa-music", color: "#8A2BE2" },
{ title: "Meant to Be - Bebe Rexha ft. Florida Georgia Line", duration: "2:43", videoId: "dZBsl5J7U6A", icon: "fa-heart", color: "#FF4500" },
{ title: "Ain't Nobody - Chaka Khan", duration: "4:38", videoId: "g6H8rF9B1Ak", icon: "fa-music", color: "#8A2BE2" },
{ title: "We Don't Talk Anymore - Charlie Puth ft. Selena Gomez", duration: "3:38", videoId: "S9C8xYPz6z8", icon: "fa-user-friends", color: "#FF69B4" },
{ title: "Burn - Ellie Goulding", duration: "3:51", videoId: "nqeyH2mSWW0", icon: "fa-fire", color: "#FF4500" },
{ title: "Somebody That I Used to Know - Gotye", duration: "3:05", videoId: "8UVNT4wvIGY", icon: "fa-user-alt-slash", color: "#2E8B57" },
{ title: "Break Free - Ariana Grande ft. Zedd", duration: "3:34", videoId: "L5H9d1q5t0s", icon: "fa-chain-broken", color: "#FF69B4" },
{ title: "All of Me - John Legend", duration: "4:29", videoId: "450p7goxZyI", icon: "fa-heart", color: "#2E8B57" },
{ title: "Stitches - Shawn Mendes", duration: "3:27", videoId: "VJj9m3c8UHg", icon: "fa-thread", color: "#FF4500" },
{ title: "How Long - Charlie Puth", duration: "3:13", videoId: "ge89U2TCDf8", icon: "fa-clock", color: "#FFD700" },
{ title: "Ride It - Jay Sean", duration: "3:16", videoId: "1RpmVdW5N64", icon: "fa-music", color: "#FF6347" },
{ title: "Something Just Like This - The Chainsmokers & Coldplay", duration: "4:07", videoId: "FM7b9t9X8Js", icon: "fa-thumbs-up", color: "#A0522D" },
{ title: "Falling - Harry Styles", duration: "4:00", videoId: "U6Cw3GA8Ay0", icon: "fa-feather", color: "#FF69B4" },
{ title: "Never Enough - Loren Allred", duration: "3:28", videoId: "T4W3H6sM0tA", icon: "fa-heart", color: "#DC143C" },
];
const trackList = document.createElement('div');
trackList.style.cssText = 'margin-bottom: 15px; max-height: 300px; overflow-y: auto;';
tracks.forEach((track, index) => {
const trackRow = document.createElement('div');
trackRow.classList.add('track-row');
trackRow.dataset.trackIndex = index;
trackRow.innerHTML = `
<img src="https://img.youtube.com/vi/${track.videoId}/0.jpg" alt="${track.title}" style="width: 50px; height: 50px; border-radius: 8px; margin-right: 10px;">
<div style="flex-grow: 1;">
<span class="track-title">${track.title}</span>
<span class="duration">${track.duration}</span>
</div>
`;
// Add gradient background based on track color
trackRow.style.cssText = `
background: linear-gradient(135deg, ${track.color}, #FFC300);
color: #EAEAEA;
border-radius: 12px; /* Smoother rounded edges */
padding: 15px;
margin: 8px 0;
cursor: pointer;
display: flex;
align-items: center;
transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
position: relative;
overflow: hidden; /* For cool hover effects */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Add depth with shadow */
`;
// Add hover effect with scale and glow
trackRow.addEventListener('mouseover', () => {
trackRow.style.transform = 'scale(1.05)'; /* Slight enlarge effect */
trackRow.style.boxShadow = '0 8px 20px rgba(0, 0, 0, 0.4)'; /* More pronounced shadow */
trackRow.style.background = `linear-gradient(135deg, ${track.color}, #FF5733)`; /* Change gradient on hover */
});
trackRow.addEventListener('mouseout', () => {
trackRow.style.transform = 'scale(1)'; /* Reset scale */
trackRow.style.boxShadow = '0 4px 15px rgba(0, 0, 0, 0.2)'; /* Reset shadow */
trackRow.style.background = `linear-gradient(135deg, ${track.color}, #FFC300)`; /* Reset gradient */
});
// Hover effects
trackRow.addEventListener('mouseenter', () => {
trackRow.style.transform = 'scale(1.02)';
trackRow.style.background = `${track.color}`; // Brighter color on hover
});
trackRow.addEventListener('mouseleave', () => {
trackRow.style.transform = 'scale(1)';
trackRow.style.background = `linear-gradient(135deg, ${track.color}, #FFC300)`;
});
trackRow.addEventListener('click', function() {
playTrack(index);
});
trackList.appendChild(trackRow);
});
panel.appendChild(trackList);
// Control Panel
const controls = document.createElement('div');
controls.style.cssText = `
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 15px;
padding: 15px; /* Added extra padding for a more spacious layout */
background: rgba(25, 25, 30, 0.8); /* Darker semi-transparent background */
border-radius: 12px; /* Rounded edges for the panel */
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6); /* Deeper shadow for better depth */
`;
// Function to create control buttons
const createButton = (id, icon) => {
const button = document.createElement('button');
button.id = id;
button.className = 'control-btn';
button.innerHTML = `<i class="fas ${icon}"></i>`;
button.style.cssText = `
background: transparent;
border: none;
color: #EAEAEA;
font-size: 28px; /* Slightly larger font size */
cursor: pointer;
transition: transform 0.3s, color 0.3s, box-shadow 0.3s; /* Smoother transition */
`;
// Hover effect for buttons
button.addEventListener('mouseenter', () => {
button.style.transform = 'scale(1.1)'; // Slightly increase size on hover
button.style.color = '#4A90E2'; // Change color on hover
button.style.boxShadow = '0 0 15px rgba(74, 144, 226, 0.7)'; // Glow effect
});
button.addEventListener('mouseleave', () => {
button.style.transform = 'scale(1)'; // Reset size
button.style.color = '#EAEAEA'; // Reset color
button.style.boxShadow = 'none'; // Reset shadow
});
return button;
};
// Create and append buttons
const prevButton = createButton('prev', 'fa-backward');
const playButton = createButton('play', 'fa-play');
const nextButton = createButton('next', 'fa-forward');
controls.appendChild(prevButton);
controls.appendChild(playButton);
controls.appendChild(nextButton);
// Seek Bar
const seekBar = document.createElement('input');
seekBar.type = 'range';
seekBar.id = 'seek-bar';
seekBar.value = '0';
seekBar.step = '1';
seekBar.min = '0';
seekBar.max = '100';
seekBar.style.cssText = `
width: 100%;
margin-top: 15px;
border-radius: 8px;
background: #3E3E52; /* Track color */
-webkit-appearance: none; /* Remove default styling */
height: 8px; /* Slightly taller track */
`;
// Custom styling for seek bar thumb
seekBar.style.setProperty('--thumb-color', '#FFDA44'); // CSS variable for thumb color
seekBar.style.setProperty('--track-color', '#4A90E2'); // CSS variable for track color
// Seek bar thumb styling
seekBar.style.cssText += `
&::-webkit-slider-thumb {
-webkit-appearance: none; /* Remove default thumb styling */
appearance: none;
width: 16px; /* Increased thumb width */
height: 16px; /* Increased thumb height */
border-radius: 50%; /* Round thumb */
background: var(--thumb-color); /* Use custom thumb color */
cursor: pointer; /* Pointer cursor */
transition: background 0.3s; /* Smooth transition for color change */
}
&::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--thumb-color);
cursor: pointer;
transition: background 0.3s;
}
`;
// Append elements to the panel
panel.appendChild(controls);
panel.appendChild(seekBar);
// Append the panel to the body
document.body.appendChild(panel);
// Mini Panel
const miniPanel = document.createElement('div');
miniPanel.id = 'mini-panel';
miniPanel.style.cssText = `
position: fixed;
bottom: 80px;
right: 20px;
width: 320px; /* Slightly wider for balance */
background: linear-gradient(135deg, #2E2E2E, #3E3E3E); /* Smooth gray gradient */
color: #E0E0E0; /* Softer, more refined text color */
border-radius: 16px; /* Rounded corners for a modern look */
padding: 20px; /* Increased padding for spacious feel */
display: none;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); /* Softer shadow */
transition: all 0.4s ease-in-out; /* Smooth transition */
font-family: 'Poppins', sans-serif; /* Cleaner, modern font */
z-index: 900; /* Ensures lower positioning */
`;
// Mini Panel Content
miniPanel.innerHTML = `
<div style="padding: 15px; background: rgba(40, 40, 40, 0.85); border-radius: 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);">
<strong style="font-size: 18px; color: #FFD700;">Now Playing:</strong>
<span id="mini-currently-playing" style="color: #EAEAEA;">None</span><br>
<img id="mini-thumbnail" src="" alt="Thumbnail" style="width: 80px; height: 80px; border-radius: 12px; margin-top: 10px; transition: transform 0.3s ease-in-out, box-shadow 0.3s;">
<div style="display: flex; justify-content: space-around; margin-top: 20px;">
<button id="mini-prev" class="mini-control-btn" style="background: transparent; border: none; color: #FFD700; cursor: pointer; transition: color 0.3s, transform 0.3s;">
<i class="fas fa-backward"></i>
</button>
<button id="mini-play" class="mini-control-btn" style="background: transparent; border: none; color: #FFD700; cursor: pointer; transition: color 0.3s, transform 0.3s;">
<i class="fas fa-play"></i>
</button>
<button id="mini-next" class="mini-control-btn" style="background: transparent; border: none; color: #FFD700; cursor: pointer; transition: color 0.3s, transform 0.3s;">
<i class="fas fa-forward"></i>
</button>
</div>
</div>
`;
// Add hover effects to buttons
const buttons = miniPanel.querySelectorAll('.mini-control-btn');
buttons.forEach(button => {
button.addEventListener('mouseenter', () => {
button.style.color = '#FFDA44'; // Change color on hover
button.style.transform = 'scale(1.1)'; // Slightly increase size on hover
});
button.addEventListener('mouseleave', () => {
button.style.color = '#EAEAEA'; // Revert color
button.style.transform = 'scale(1)'; // Revert size
});
});
// Thumbnail hover effect
const thumbnail = miniPanel.querySelector('#mini-thumbnail');
thumbnail.addEventListener('mouseenter', () => {
thumbnail.style.transform = 'scale(1.05)'; /* Thumbnail enlarges slightly */
thumbnail.style.boxShadow = '0 8px 20px rgba(0, 0, 0, 0.8)'; /* Shadow deepens */
});
thumbnail.addEventListener('mouseleave', () => {
thumbnail.style.transform = 'scale(1)'; /* Returns to normal size */
thumbnail.style.boxShadow = 'none'; /* Removes shadow */
});
// Append the mini panel to the body
document.body.appendChild(miniPanel);
// Expandable/Collapsible toggle button
const toggleButton = document.createElement('button');
toggleButton.innerHTML = '<i class="fas fa-music"></i>';
toggleButton.style.cssText = `
position: fixed;
bottom: 30px; /* Slightly raised for better visibility */
right: 30px;
width: 70px; /* Slightly larger for emphasis */
height: 70px;
background: linear-gradient(135deg, #4A90E2, #50C9C3); /* Cool gradient */
color: white;
border: none;
border-radius: 50%; /* Circular shape */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); /* Deeper shadow for more depth */
font-size: 28px; /* Larger icon size */
cursor: pointer;
transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
outline: none;
z-index: 1000;
/* Add hover effects for interaction feedback */
&:hover {
background: linear-gradient(135deg, #50C9C3, #4A90E2); /* Reverse gradient on hover */
transform: scale(1.1); /* Slightly enlarge on hover */
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6); /* Larger shadow on hover */
}
/* Add active state for a press effect */
&:active {
transform: scale(0.95); /* Slight shrink on click */
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4); /* Smaller shadow on click */
}
`;
// Append button to the body
document.body.appendChild(toggleButton);
// Hover effects for toggle button
toggleButton.addEventListener('mouseenter', () => {
toggleButton.style.backgroundColor = '#357ABD'; // Darker shade on hover
toggleButton.style.boxShadow = '0 12px 20px rgba(0, 0, 0, 0.5)'; // Enhanced shadow
});
toggleButton.addEventListener('mouseleave', () => {
toggleButton.style.backgroundColor = '#4A90E2'; // Original color
toggleButton.style.boxShadow = '0 8px 16px rgba(0, 0, 0, 0.4)'; // Original shadow
});
// Toggle panel visibility
toggleButton.addEventListener('click', function() {
panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
toggleButton.style.transform = panel.style.display === 'block' ? 'rotate(90deg)' : 'rotate(0deg)';
toggleButton.style.backgroundColor = panel.style.display === 'block' ? '#5DADE2' : '#4A90E2'; // Change color based on state
});
// Append the button to the body
document.body.appendChild(toggleButton);
// Initialize YouTube Player
let player;
let currentTrackIndex = -1;
let updateSeekBarInterval;
window.onYouTubeIframeAPIReady = function() {
player = new YT.Player('yt-player', {
height: '0',
width: '0',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
};
// Hide the YouTube iframe (audio-only)
const youtubePlayer = document.createElement('div');
youtubePlayer.id = 'yt-player';
youtubePlayer.style.display = 'none';
document.body.appendChild(youtubePlayer);
function onPlayerReady(event) {
// Player is ready
}
function onPlayerStateChange(event) {
// Track state change
if (event.data === YT.PlayerState.ENDED) {
nextTrack();
}
}
// Play/Pause functionality
playButton.addEventListener('click', function() {
const state = player.getPlayerState();
if (state === YT.PlayerState.PLAYING) {
player.pauseVideo();
this.innerHTML = '<i class="fas fa-play"></i>';
document.getElementById('mini-play').innerHTML = '<i class="fas fa-play"></i>';
} else {
player.playVideo();
this.innerHTML = '<i class="fas fa-pause"></i>';
document.getElementById('mini-play').innerHTML = '<i class="fas fa-pause"></i>';
}
});
prevButton.addEventListener('click', function() {
prevTrack();
});
nextButton.addEventListener('click', function() {
nextTrack();
});
function playTrack(index) {
if (currentTrackIndex !== -1) {
player.stopVideo();
}
currentTrackIndex = index;
const track = tracks[currentTrackIndex];
player.loadVideoById(track.videoId);
document.getElementById('currently-playing').innerText = track.title;
document.getElementById('mini-currently-playing').innerText = track.title;
document.getElementById('mini-thumbnail').src = `https://img.youtube.com/vi/${track.videoId}/0.jpg`; // Thumbnail update
updateSeekBar();
updateMiniPanel();
playButton.innerHTML = '<i class="fas fa-pause"></i>';
document.getElementById('mini-play').innerHTML = '<i class="fas fa-pause"></i>';
}
function nextTrack() {
if (currentTrackIndex < tracks.length - 1) {
playTrack(currentTrackIndex + 1);
}
}
function prevTrack() {
if (currentTrackIndex > 0) {
playTrack(currentTrackIndex - 1);
}
}
function updateSeekBar() {
updateSeekBarInterval = setInterval(() => {
const currentTime = player.getCurrentTime();
const duration = player.getDuration();
if (duration) {
const seekBar = document.getElementById('seek-bar');
seekBar.value = (currentTime / duration) * 100;
}
}, 1000);
}
function updateMiniPanel() {
if (currentTrackIndex !== -1) {
miniPanel.style.display = 'block';
document.getElementById('mini-currently-playing').innerText = tracks[currentTrackIndex].title;
document.getElementById('mini-thumbnail').src = `https://img.youtube.com/vi/${tracks[currentTrackIndex].videoId}/0.jpg`; // Update thumbnail
}
}
// Mini panel button functionality
const miniPlayButton = document.getElementById('mini-play');
miniPlayButton.addEventListener('click', function() {
const state = player.getPlayerState();
if (state === YT.PlayerState.PLAYING) {
player.pauseVideo();
this.innerHTML = '<i class="fas fa-play"></i>';
playButton.innerHTML = '<i class="fas fa-play"></i>';
} else {
player.playVideo();
this.innerHTML = '<i class="fas fa-pause"></i>';
playButton.innerHTML = '<i class="fas fa-pause"></i>';
}
});
document.getElementById('mini-prev').addEventListener('click', function() {
prevTrack();
});
document.getElementById('mini-next').addEventListener('click', function() {
nextTrack();
});
// Add CSS styles for the new features
const css = document.createElement('style');
css.textContent = `
.control-btn, .mini-control-btn {
background: #4A90E2; /* Base color for buttons */
color: white; /* Text color */
border: none; /* No border */
border-radius: 8px; /* Rounded edges */
padding: 10px 15px; /* Internal padding */
cursor: pointer; /* Pointer on hover */
transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth color transition */
font-size: 18px; /* Font size */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for depth */
}
.control-btn:hover, .mini-control-btn:hover {
background-color: #357ABD; /* Darker shade on hover */
transform: translateY(-2px); /* Slightly lift the button */
}
.control-btn:focus, .mini-control-btn:focus {
outline: none; /* Remove default outline */
box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.6); /* Focus ring */
}
#seek-bar {
border-radius: 8px; /* Rounded edges */
margin-top: 10px; /* Space above the seek bar */
background: #3E3E52; /* Background color */
height: 8px; /* Height of the seek bar */
cursor: pointer; /* Pointer on hover */
}
#seek-bar::-webkit-slider-thumb {
-webkit-appearance: none; /* Remove default styling */
appearance: none; /* Remove default styling */
width: 16px; /* Thumb width */
height: 16px; /* Thumb height */
background: #FFDA44; /* Thumb color */
border-radius: 50%; /* Round shape */
cursor: pointer; /* Pointer on hover */
}
#seek-bar::-moz-range-thumb {
width: 16px; /* Thumb width */
height: 16px; /* Thumb height */
background: #FFDA44; /* Thumb color */
border-radius: 50%; /* Round shape */
cursor: pointer; /* Pointer on hover */
}
.track-row {
display: flex; /* Flexbox for alignment */
justify-content: flex-start; /* Align items to the left */
align-items: center; /* Center items vertically */
padding: 10px; /* Internal padding */
border-radius: 8px; /* Rounded edges */
margin: 5px 0; /* Vertical spacing between rows */
cursor: pointer; /* Pointer on hover */
transition: background 0.3s, transform 0.3s; /* Smooth transitions */
}
.track-row:hover {
background: rgba(255, 255, 255, 0.1); /* Light background on hover */
transform: scale(1.02); /* Slightly enlarge */
}
`;
document.head.appendChild(css);
})();