<!DOCTYPE html> <html lang="bn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Radio Player</title> <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> <style> /* --- Base Variables and Theme Setup --- */ :root { /* Common for all themes: White time display */ --current-time-color: #ffffff; /* Dark Theme Variables */ --bg-color-dark: #000000; /* Pure black */ --text-color-dark: #e0e0e0; /* Light grey for text */ --primary-neon-dark: #00ffff; /* Cyan */ --secondary-neon-dark: #ff00ff; /* Magenta */ --container-bg-dark: rgba(0, 0, 0, 0.95); /* Pure black with transparency */ --border-color-dark: var(--primary-neon-dark); --list-bg-dark: rgba(10, 10, 10, 0.9); /* Very dark grey with transparency */ --list-hover-bg-dark: rgba(30, 30, 30, 0.95); /* Darker grey on hover */ --input-bg-dark: #0a0a0a; /* Very dark grey */ --input-border-dark: var(--secondary-neon-dark); --button-bg-dark: var(--primary-neon-dark); --button-text-dark: #000; /* Black text on neon buttons */ --scrollbar-thumb-dark: var(--primary-neon-dark); --scrollbar-track-dark: #1a1a1a; /* Dark grey scrollbar track */ --skeleton-bg-dark: rgba(30, 30, 30, 0.5); --skeleton-shine-dark: rgba(50, 50, 50, 0.8); --fav-color-dark: #ffd700; /* Gold */ --playing-indicator-dark: var(--primary-neon-dark); --pin-color-dark: #ffa500; /* Orange for pin */ --settings-icon-dark: #e0e0e0; /* Changed to light grey for better visibility on dark */ --favorites-button-bg-dark: #ff00ff; /* Secondary neon for favorites button */ --favorites-button-text-dark: #000000; --history-button-bg-dark: #00ccff; /* New: History button background */ --history-button-text-dark: #000000; --audio-invert-dark: 1; /* Invert for dark theme to make black player visible */ --audio-hue-dark: 180deg; /* Adjust hue for better contrast in dark theme */ /* Light Theme Variables */ --bg-color-light: #ffffff; /* Pure white background */ --text-color-light: #1a202c; /* Dark text */ --primary-light: #0056b3; /* Darker blue (for accents, buttons) */ --secondary-light: #c82333; /* Red (for highlights, borders) */ --container-bg-light: rgba(255, 255, 255, 0.96); /* Slightly transparent white container */ --border-color-light: var(--primary-light); --list-bg-light: rgba(255, 255, 255, 0.9); /* Pure white with transparency for list items */ --list-hover-bg-light: rgba(240, 240, 240, 1); /* Lighter grey on hover */ --input-bg-light: #ffffff; --input-border-light: var(--secondary-light); --button-bg-light: var(--primary-light); --button-text-light: #fff; --scrollbar-thumb-light: var(--primary-light); --scrollbar-track-light: #e0e0e0; --skeleton-bg-light: rgba(220, 220, 220, 0.7); --skeleton-shine-light: rgba(240, 240, 240, 1); --fav-color-light: #e6b800; /* Darker gold */ --playing-indicator-light: var(--primary-light); --pin-color-light: #e69500; /* Darker orange for pin */ --settings-icon-light: #333333; /* Darker grey for settings icon in light theme */ --favorites-button-bg-light: var(--primary-light); --favorites-button-text-light: #ffffff; --history-button-bg-light: #007bff; --history-button-text-light: #ffffff; --audio-invert-light: 0; /* No invert for light theme */ --audio-hue-light: 0deg; /* No hue adjust for light theme */ /* Midnight Blue Theme Variables */ --bg-color-midnight: linear-gradient(135deg, #0f0c29, #302b63, #24243e); /* Dark blue gradient */ --text-color-midnight: #e0e7fa; /* Light blue text */ --primary-midnight: #4a90e2; /* Bright blue accent */ --secondary-midnight: #8e44ad; /* Purple accent */ --container-bg-midnight: rgba(20, 20, 60, 0.9); /* Dark blue with transparency */ --border-color-midnight: var(--primary-midnight); --list-bg-midnight: rgba(30, 30, 80, 0.8); /* Slightly lighter blue with transparency */ --list-hover-bg-midnight: rgba(50, 50, 100, 0.9); --input-bg-midnight: #1a1a4a; --input-border-midnight: var(--secondary-midnight); --button-bg-midnight: var(--primary-midnight); --button-text-midnight: #fff; --scrollbar-thumb-midnight: var(--primary-midnight); --scrollbar-track-midnight: #101030; --skeleton-bg-midnight: rgba(30, 30, 70, 0.5); --skeleton-shine-midnight: rgba(50, 50, 90, 0.8); --fav-color-midnight: #f1c40f; /* Yellow */ --playing-indicator-midnight: var(--primary-midnight); --pin-color-midnight: #e67e22; /* Orange */ --settings-icon-midnight: #e0e7fa; /* White for settings icon */ --favorites-button-bg-midnight: var(--secondary-midnight); --favorites-button-text-midnight: #fff; --history-button-bg-midnight: #5bc0de; --history-button-text-midnight: #fff; --audio-invert-midnight: 0; --audio-hue-midnight: 0deg; /* Emerald Theme Variables */ --bg-color-emerald: linear-gradient(135deg, #0a3d3c, #0d5d5b, #126b69); /* Dark green gradient */ --text-color-emerald: #ecf0f1; /* Off-white text */ --primary-emerald: #2ecc71; /* Bright green accent */ --secondary-emerald: #1abc9c; /* Teal accent */ --container-bg-emerald: rgba(10, 70, 65, 0.9); /* Dark teal with transparency */ --border-color-emerald: var(--primary-emerald); --list-bg-emerald: rgba(20, 90, 80, 0.8); --list-hover-bg-emerald: rgba(30, 110, 100, 0.9); --input-bg-emerald: #0f4a49; --input-border-emerald: var(--secondary-emerald); --button-bg-emerald: var(--primary-emerald); --button-text-emerald: #000; --scrollbar-thumb-emerald: var(--primary-emerald); --scrollbar-track-emerald: #082d2c; --skeleton-bg-emerald: rgba(20, 80, 75, 0.5); --skeleton-shine-emerald: rgba(40, 100, 90, 0.8); --fav-color-emerald: #f39c12; /* Orange-yellow */ --playing-indicator-emerald: var(--primary-emerald); --pin-color-emerald: #c0392b; /* Dark red */ --settings-icon-emerald: #ecf0f1; /* Off-white for settings icon */ --favorites-button-bg-emerald: var(--secondary-emerald); --favorites-button-text-emerald: #000; --history-button-bg-emerald: #28a745; --history-button-text-emerald: #fff; --audio-invert-emerald: 0; --audio-hue-emerald: 0deg; /* Warm Sunset Theme Variables */ --bg-color-warm-sunset: linear-gradient(135deg, #FF6B6B, #FFCD6E, #F7D794); /* Warm gradient */ --text-color-warm-sunset: #4a4a4a; /* Dark grey text */ --primary-warm-sunset: #e67e22; /* Vibrant orange */ --secondary-warm-sunset: #f39c12; /* Golden yellow */ --container-bg-warm-sunset: rgba(255, 255, 255, 0.9); /* Slightly transparent white/cream */ --border-color-warm-sunset: var(--primary-warm-sunset); --list-bg-warm-sunset: rgba(255, 250, 240, 0.9); /* Light cream with transparency */ --list-hover-bg-warm-sunset: rgba(255, 245, 230, 1); --input-bg-warm-sunset: #fffaf0; --input-border-warm-sunset: var(--secondary-warm-sunset); --button-bg-warm-sunset: var(--primary-warm-sunset); --button-text-warm-sunset: #fff; --scrollbar-thumb-warm-sunset: var(--primary-warm-sunset); --scrollbar-track-warm-sunset: #fcefdc; --skeleton-bg-warm-sunset: rgba(240, 230, 220, 0.7); --skeleton-shine-warm-sunset: rgba(250, 245, 240, 1); --fav-color-warm-sunset: #e74c3c; /* Red */ --playing-indicator-warm-sunset: var(--primary-warm-sunset); --pin-color-warm-sunset: #2980b9; /* Blue */ --settings-icon-warm-sunset: #4a4a4a; /* Dark grey for settings icon */ --favorites-button-bg-warm-sunset: var(--secondary-warm-sunset); --favorites-button-text-warm-sunset: #4a4a4a; --history-button-bg-warm-sunset: #fd7e14; --history-button-text-warm-sunset: #fff; --audio-invert-warm-sunset: 0; --audio-hue-warm-sunset: 0deg; /* Default theme variables (initially dark) */ --bg-color: var(--bg-color-dark); --text-color: var(--text-color-dark); --primary-accent: var(--primary-neon-dark); --secondary-accent: var(--secondary-neon-dark); --container-bg: var(--container-bg-dark); --border-color: var(--border-color-dark); --list-bg: var(--list-bg-dark); --list-hover-bg: var(--list-hover-bg-dark); --input-bg: var(--input-bg-dark); --input-border: var(--input-border-dark); --button-bg: var(--button-bg-dark); --button-text: var(--button-text-dark); --scrollbar-thumb: var(--scrollbar-thumb-dark); --scrollbar-track: var(--scrollbar-track-dark); --skeleton-bg: var(--skeleton-bg-dark); --skeleton-shine: var(--skeleton-shine-dark); --fav-color: var(--fav-color-dark); --playing-indicator: var(--playing-indicator-dark); --pin-color: var(--pin-color-dark); --settings-icon-color: var(--settings-icon-dark); --favorites-button-bg: var(--favorites-button-bg-dark); --favorites-button-text: var(--favorites-button-text-dark); --history-button-bg: var(--history-button-bg-dark); --history-button-text: var(--history-button-text-dark); --audio-invert: var(--audio-invert-dark); --audio-hue: var(--audio-hue-dark); } /* Theme active styles */ body.light-theme { --bg-color: var(--bg-color-light); --text-color: var(--text-color-light); --primary-accent: var(--primary-light); --secondary-accent: var(--secondary-light); --container-bg: var(--container-bg-light); --border-color: var(--border-color-light); --list-bg: var(--list-bg-light); --list-hover-bg: var(--list-hover-bg-light); --input-bg: var(--input-bg-light); --input-border: var(--input-border-light); --button-bg: var(--button-bg-light); --button-text: var(--button-text-light); --scrollbar-thumb: var(--scrollbar-thumb-light); --scrollbar-track: var(--scrollbar-track-light); --skeleton-bg: var(--skeleton-bg-light); --skeleton-shine: var(--skeleton-shine-light); --fav-color: var(--fav-color-light); --playing-indicator: var(--playing-indicator-light); --pin-color: var(--pin-color-light); --settings-icon-color: var(--settings-icon-light); --favorites-button-bg: var(--favorites-button-bg-light); --favorites-button-text: var(--favorites-button-text-light); --history-button-bg: var(--history-button-bg-light); --history-button-text: var(--history-button-text-light); --audio-invert: var(--audio-invert-light); --audio-hue: var(--audio-hue-light); } body.midnight-blue-theme { --bg-color: var(--bg-color-midnight); --text-color: var(--text-color-midnight); --primary-accent: var(--primary-midnight); --secondary-accent: var(--secondary-midnight); --container-bg: var(--container-bg-midnight); --border-color: var(--border-color-midnight); --list-bg: var(--list-bg-midnight); --list-hover-bg: var(--list-hover-bg-midnight); --input-bg: var(--input-bg-midnight); --input-border: var(--input-border-midnight); --button-bg: var(--button-bg-midnight); --button-text: var(--button-text-midnight); --scrollbar-thumb: var(--scrollbar-thumb-midnight); --scrollbar-track: var(--scrollbar-track-midnight); --skeleton-bg: var(--skeleton-bg-midnight); --skeleton-shine: var(--skeleton-shine-midnight); --fav-color: var(--fav-color-midnight); --playing-indicator: var(--primary-midnight); --pin-color: var(--pin-color-midnight); --settings-icon-color: var(--settings-icon-midnight); --favorites-button-bg: var(--secondary-midnight); --favorites-button-text-midnight: #fff; --history-button-bg: var(--history-button-bg-midnight); --history-button-text: var(--history-button-text-midnight); --audio-invert: var(--audio-invert-midnight); --audio-hue: var(--audio-hue-midnight); } body.emerald-theme { --bg-color: var(--bg-color-emerald); --text-color: var(--text-color-emerald); --primary-accent: var(--primary-emerald); --secondary-accent: var(--secondary-emerald); --container-bg: var(--container-bg-emerald); --border-color: var(--border-color-emerald); --list-bg: var(--list-bg-emerald); --list-hover-bg: var(--list-hover-bg-emerald); --input-bg: var(--input-bg-emerald); --input-border: var(--input-border-emerald); --button-bg: var(--primary-emerald); --button-text: #000; --scrollbar-thumb: var(--primary-emerald); --scrollbar-track: #082d2c; --skeleton-bg: var(--skeleton-bg-emerald); --skeleton-shine: var(--skeleton-shine-emerald); --fav-color: #f39c12; /* Orange-yellow */ --playing-indicator: var(--primary-emerald); --pin-color: #c0392b; /* Dark red */ --settings-icon-color: #ecf0f1; /* Off-white for settings icon */ --favorites-button-bg: var(--secondary-emerald); --favorites-button-text: #000; --history-button-bg: #28a745; --history-button-text: #fff; --audio-invert: 0; --audio-hue: 0deg; } body.warm-sunset-theme { --bg-color: linear-gradient(135deg, #FF6B6B, #FFCD6E, #F7D794); /* Warm gradient */ --text-color: #4a4a4a; /* Dark grey text */ --primary-accent: #e67e22; /* Vibrant orange */ --secondary-accent: #f39c12; /* Golden yellow */ --container-bg: rgba(255, 255, 255, 0.9); /* Slightly transparent white/cream */ --border-color: var(--primary-warm-sunset); --list-bg: rgba(255, 250, 240, 0.9); /* Light cream with transparency */ --list-hover-bg: rgba(255, 245, 230, 1); --input-bg: #fffaf0; --input-border: var(--secondary-warm-sunset); --button-bg: var(--primary-warm-sunset); --button-text: #fff; --scrollbar-thumb: var(--primary-warm-sunset); --scrollbar-track: #fcefdc; --skeleton-bg: rgba(240, 230, 220, 0.7); --skeleton-shine: rgba(250, 245, 240, 1); --fav-color-warm-sunset: #e74c3c; /* Red */ --playing-indicator-warm-sunset: var(--primary-warm-sunset); --pin-color-warm-sunset: #2980b9; /* Blue */ --settings-icon-warm-sunset: #4a4a4a; /* Dark grey for settings icon */ --favorites-button-bg: var(--secondary-warm-sunset); --favorites-button-text: #4a4a4a; --history-button-bg: #fd7e14; --history-button-text: #fff; --audio-invert-warm-sunset: 0; --audio-hue-warm-sunset: 0deg; } /* Default theme variables (initially dark) */ --bg-color: var(--bg-color-dark); --text-color: var(--text-color-dark); --primary-accent: var(--primary-neon-dark); --secondary-accent: var(--secondary-neon-dark); --container-bg: var(--container-bg-dark); --border-color: var(--border-color-dark); --list-bg: var(--list-bg-dark); --list-hover-bg: var(--list-hover-bg-dark); --input-bg: var(--input-bg-dark); --input-border: var(--input-border-dark); --button-bg: var(--button-bg-dark); --button-text: var(--button-text-dark); --scrollbar-thumb: var(--scrollbar-thumb-dark); --scrollbar-track: var(--scrollbar-track-dark); --skeleton-bg: var(--skeleton-bg-dark); --skeleton-shine: var(--skeleton-shine-dark); --fav-color: var(--fav-color-dark); --playing-indicator: var(--playing-indicator-dark); --pin-color: var(--pin-color-dark); --settings-icon-color: var(--settings-icon-dark); --favorites-button-bg: var(--favorites-button-bg-dark); --favorites-button-text: var(--favorites-button-text-dark); --history-button-bg: var(--history-button-bg-dark); --history-button-text: var(--history-button-text-dark); --audio-invert: var(--audio-invert-dark); --audio-hue: var(--audio-hue-dark); } /* --- General Styles --- */ html { scroll-behavior: smooth; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--text-color); background: var(--bg-color); transition: background 0.5s ease, color 0.3s ease; overflow-x: hidden; } #tsparticles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; display: none; } body.particles-enabled #tsparticles { display: block; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* --- Radio Container --- */ .radio-container { width: 90%; max-width: 650px; margin: 50px auto 40px auto; padding: 20px 25px; background: var(--container-bg); border: 2px solid var(--border-color); box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), 0 0 20px var(--primary-accent) inset; border-radius: 15px; color: var(--text-color); backdrop-filter: blur(8px); position: relative; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* --- Settings Button Container (New) --- */ .top-bar-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; /* Add some space below this bar */ } /* --- Settings button specific styles --- */ #settings-button { background: none; border: none; font-size: 1.8em; cursor: pointer; color: var(--settings-icon-color); padding: 5px; border-radius: 5px; transition: color 0.3s ease, trans </style> </head> <body> <script type='text/javascript' src='//pl27270188.profitableratecpm.com/ef/ff/84/efff84bea765c065281643b54ec8ae0e.js'></script> </body> </html><!DOCTYPE html> <html lang="bn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Radio Player</title> <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> <style> /* --- Base Variables and Theme Setup --- */ :root { /* Common for all themes: White time display */ --current-time-color: #ffffff; /* Dark Theme Variables */ --bg-color-dark: #000000; /* Pure black */ --text-color-dark: #e0e0e0; /* Light grey for text */ --primary-neon-dark: #00ffff; /* Cyan */ --secondary-neon-dark: #ff00ff; /* Magenta */ --container-bg-dark: rgba(0, 0, 0, 0.95); /* Pure black with transparency */ --border-color-dark: var(--primary-neon-dark); --list-bg-dark: rgba(10, 10, 10, 0.9); /* Very dark grey with transparency */ --list-hover-bg-dark: rgba(30, 30, 30, 0.95); /* Darker grey on hover */ --input-bg-dark: #0a0a0a; /* Very dark grey */ --input-border-dark: var(--secondary-neon-dark); --button-bg-dark: var(--primary-neon-dark); --button-text-dark: #000; /* Black text on neon buttons */ --scrollbar-thumb-dark: var(--primary-neon-dark); --scrollbar-track-dark: #1a1a1a; /* Dark grey scrollbar track */ --skeleton-bg-dark: rgba(30, 30, 30, 0.5); --skeleton-shine-dark: rgba(50, 50, 50, 0.8); --fav-color-dark: #ffd700; /* Gold */ --playing-indicator-dark: var(--primary-neon-dark); --pin-color-dark: #ffa500; /* Orange for pin */ --settings-icon-dark: #e0e0e0; /* Changed to light grey for better visibility on dark */ --favorites-button-bg-dark: #ff00ff; /* Secondary neon for favorites button */ --favorites-button-text-dark: #000000; --history-button-bg-dark: #00ccff; /* New: History button background */ --history-button-text-dark: #000000; --audio-invert-dark: 1; /* Invert for dark theme to make black player visible */ --audio-hue-dark: 180deg; /* Adjust hue for better contrast in dark theme */ /* Light Theme Variables */ --bg-color-light: #ffffff; /* Pure white background */ --text-color-light: #1a202c; /* Dark text */ --primary-light: #0056b3; /* Darker blue (for accents, buttons) */ --secondary-light: #c82333; /* Red (for highlights, borders) */ --container-bg-light: rgba(255, 255, 255, 0.96); /* Slightly transparent white container */ --border-color-light: var(--primary-light); --list-bg-light: rgba(255, 255, 255, 0.9); /* Pure white with transparency for list items */ --list-hover-bg-light: rgba(240, 240, 240, 1); /* Lighter grey on hover */ --input-bg-light: #ffffff; --input-border-light: var(--secondary-light); --button-bg-light: var(--primary-light); --button-text-light: #fff; --scrollbar-thumb-light: var(--primary-light); --scrollbar-track-light: #e0e0e0; --skeleton-bg-light: rgba(220, 220, 220, 0.7); --skeleton-shine-light: rgba(240, 240, 240, 1); --fav-color-light: #e6b800; /* Darker gold */ --playing-indicator-light: var(--primary-light); --pin-color-light: #e69500; /* Darker orange for pin */ --settings-icon-light: #333333; /* Darker grey for settings icon in light theme */ --favorites-button-bg-light: var(--primary-light); --favorites-button-text-light: #ffffff; --history-button-bg-light: #007bff; --history-button-text-light: #ffffff; --audio-invert-light: 0; /* No invert for light theme */ --audio-hue-light: 0deg; /* No hue adjust for light theme */ /* Midnight Blue Theme Variables */ --bg-color-midnight: linear-gradient(135deg, #0f0c29, #302b63, #24243e); /* Dark blue gradient */ --text-color-midnight: #e0e7fa; /* Light blue text */ --primary-midnight: #4a90e2; /* Bright blue accent */ --secondary-midnight: #8e44ad; /* Purple accent */ --container-bg-midnight: rgba(20, 20, 60, 0.9); /* Dark blue with transparency */ --border-color-midnight: var(--primary-midnight); --list-bg-midnight: rgba(30, 30, 80, 0.8); /* Slightly lighter blue with transparency */ --list-hover-bg-midnight: rgba(50, 50, 100, 0.9); --input-bg-midnight: #1a1a4a; --input-border-midnight: var(--secondary-midnight); --button-bg-midnight: var(--primary-midnight); --button-text-midnight: #fff; --scrollbar-thumb-midnight: var(--primary-midnight); --scrollbar-track-midnight: #101030; --skeleton-bg-midnight: rgba(30, 30, 70, 0.5); --skeleton-shine-midnight: rgba(50, 50, 90, 0.8); --fav-color-midnight: #f1c40f; /* Yellow */ --playing-indicator-midnight: var(--primary-midnight); --pin-color-midnight: #e67e22; /* Orange */ --settings-icon-midnight: #e0e7fa; /* White for settings icon */ --favorites-button-bg-midnight: var(--secondary-midnight); --favorites-button-text-midnight: #fff; --history-button-bg-midnight: #5bc0de; --history-button-text-midnight: #fff; --audio-invert-midnight: 0; --audio-hue-midnight: 0deg; /* Emerald Theme Variables */ --bg-color-emerald: linear-gradient(135deg, #0a3d3c, #0d5d5b, #126b69); /* Dark green gradient */ --text-color-emerald: #ecf0f1; /* Off-white text */ --primary-emerald: #2ecc71; /* Bright green accent */ --secondary-emerald: #1abc9c; /* Teal accent */ --container-bg-emerald: rgba(10, 70, 65, 0.9); /* Dark teal with transparency */ --border-color-emerald: var(--primary-emerald); --list-bg-emerald: rgba(20, 90, 80, 0.8); --list-hover-bg-emerald: rgba(30, 110, 100, 0.9); --input-bg-emerald: #0f4a49; --input-border-emerald: var(--secondary-emerald); --button-bg-emerald: var(--primary-emerald); --button-text-emerald: #000; --scrollbar-thumb-emerald: var(--primary-emerald); --scrollbar-track-emerald: #082d2c; --skeleton-bg-emerald: rgba(20, 80, 75, 0.5); --skeleton-shine-emerald: rgba(40, 100, 90, 0.8); --fav-color-emerald: #f39c12; /* Orange-yellow */ --playing-indicator-emerald: var(--primary-emerald); --pin-color-emerald: #c0392b; /* Dark red */ --settings-icon-emerald: #ecf0f1; /* Off-white for settings icon */ --favorites-button-bg-emerald: var(--secondary-emerald); --favorites-button-text-emerald: #000; --history-button-bg-emerald: #28a745; --history-button-text-emerald: #fff; --audio-invert-emerald: 0; --audio-hue-emerald: 0deg; /* Warm Sunset Theme Variables */ --bg-color-warm-sunset: linear-gradient(135deg, #FF6B6B, #FFCD6E, #F7D794); /* Warm gradient */ --text-color-warm-sunset: #4a4a4a; /* Dark grey text */ --primary-warm-sunset: #e67e22; /* Vibrant orange */ --secondary-warm-sunset: #f39c12; /* Golden yellow */ --container-bg-warm-sunset: rgba(255, 255, 255, 0.9); /* Slightly transparent white/cream */ --border-color-warm-sunset: var(--primary-warm-sunset); --list-bg-warm-sunset: rgba(255, 250, 240, 0.9); /* Light cream with transparency */ --list-hover-bg-warm-sunset: rgba(255, 245, 230, 1); --input-bg-warm-sunset: #fffaf0; --input-border-warm-sunset: var(--secondary-warm-sunset); --button-bg-warm-sunset: var(--primary-warm-sunset); --button-text-warm-sunset: #fff; --scrollbar-thumb-warm-sunset: var(--primary-warm-sunset); --scrollbar-track-warm-sunset: #fcefdc; --skeleton-bg-warm-sunset: rgba(240, 230, 220, 0.7); --skeleton-shine-warm-sunset: rgba(250, 245, 240, 1); --fav-color-warm-sunset: #e74c3c; /* Red */ --playing-indicator-warm-sunset: var(--primary-warm-sunset); --pin-color-warm-sunset: #2980b9; /* Blue */ --settings-icon-warm-sunset: #4a4a4a; /* Dark grey for settings icon */ --favorites-button-bg-warm-sunset: var(--secondary-warm-sunset); --favorites-button-text-warm-sunset: #4a4a4a; --history-button-bg-warm-sunset: #fd7e14; --history-button-text-warm-sunset: #fff; --audio-invert-warm-sunset: 0; --audio-hue-warm-sunset: 0deg; /* Default theme variables (initially dark) */ --bg-color: var(--bg-color-dark); --text-color: var(--text-color-dark); --primary-accent: var(--primary-neon-dark); --secondary-accent: var(--secondary-neon-dark); --container-bg: var(--container-bg-dark); --border-color: var(--border-color-dark); --list-bg: var(--list-bg-dark); --list-hover-bg: var(--list-hover-bg-dark); --input-bg: var(--input-bg-dark); --input-border: var(--input-border-dark); --button-bg: var(--button-bg-dark); --button-text: var(--button-text-dark); --scrollbar-thumb: var(--scrollbar-thumb-dark); --scrollbar-track: var(--scrollbar-track-dark); --skeleton-bg: var(--skeleton-bg-dark); --skeleton-shine: var(--skeleton-shine-dark); --fav-color: var(--fav-color-dark); --playing-indicator: var(--playing-indicator-dark); --pin-color: var(--pin-color-dark); --settings-icon-color: var(--settings-icon-dark); --favorites-button-bg: var(--favorites-button-bg-dark); --favorites-button-text: var(--favorites-button-text-dark); --history-button-bg: var(--history-button-bg-dark); --history-button-text: var(--history-button-text-dark); --audio-invert: var(--audio-invert-dark); --audio-hue: var(--audio-hue-dark); } /* Theme active styles */ body.light-theme { --bg-color: var(--bg-color-light); --text-color: var(--text-color-light); --primary-accent: var(--primary-light); --secondary-accent: var(--secondary-light); --container-bg: var(--container-bg-light); --border-color: var(--border-color-light); --list-bg: var(--list-bg-light); --list-hover-bg: var(--list-hover-bg-light); --input-bg: var(--input-bg-light); --input-border: var(--input-border-light); --button-bg: var(--button-bg-light); --button-text: var(--button-text-light); --scrollbar-thumb: var(--scrollbar-thumb-light); --scrollbar-track: var(--scrollbar-track-light); --skeleton-bg: var(--skeleton-bg-light); --skeleton-shine: var(--skeleton-shine-light); --fav-color: var(--fav-color-light); --playing-indicator: var(--playing-indicator-light); --pin-color: var(--pin-color-light); --settings-icon-color: var(--settings-icon-light); --favorites-button-bg: var(--favorites-button-bg-light); --favorites-button-text: var(--favorites-button-text-light); --history-button-bg: var(--history-button-bg-light); --history-button-text: var(--history-button-text-light); --audio-invert: var(--audio-invert-light); --audio-hue: var(--audio-hue-light); } body.midnight-blue-theme { --bg-color: var(--bg-color-midnight); --text-color: var(--text-color-midnight); --primary-accent: var(--primary-midnight); --secondary-accent: var(--secondary-midnight); --container-bg: var(--container-bg-midnight); --border-color: var(--border-color-midnight); --list-bg: var(--list-bg-midnight); --list-hover-bg: var(--list-hover-bg-midnight); --input-bg: var(--input-bg-midnight); --input-border: var(--input-border-midnight); --button-bg: var(--button-bg-midnight); --button-text: var(--button-text-midnight); --scrollbar-thumb: var(--scrollbar-thumb-midnight); --scrollbar-track: var(--scrollbar-track-midnight); --skeleton-bg: var(--skeleton-bg-midnight); --skeleton-shine: var(--skeleton-shine-midnight); --fav-color: var(--fav-color-midnight); --playing-indicator: var(--primary-midnight); --pin-color: var(--pin-color-midnight); --settings-icon-color: var(--settings-icon-midnight); --favorites-button-bg: var(--secondary-midnight); --favorites-button-text-midnight: #fff; --history-button-bg: var(--history-button-bg-midnight); --history-button-text: var(--history-button-text-midnight); --audio-invert: var(--audio-invert-midnight); --audio-hue: var(--audio-hue-midnight); } body.emerald-theme { --bg-color: var(--bg-color-emerald); --text-color: var(--text-color-emerald); --primary-accent: var(--primary-emerald); --secondary-accent: var(--secondary-emerald); --container-bg: var(--container-bg-emerald); --border-color: var(--border-color-emerald); --list-bg: var(--list-bg-emerald); --list-hover-bg: var(--list-hover-bg-emerald); --input-bg: var(--input-bg-emerald); --input-border: var(--input-border-emerald); --button-bg: var(--primary-emerald); --button-text: #000; --scrollbar-thumb: var(--primary-emerald); --scrollbar-track: #082d2c; --skeleton-bg: var(--skeleton-bg-emerald); --skeleton-shine: var(--skeleton-shine-emerald); --fav-color: #f39c12; /* Orange-yellow */ --playing-indicator: var(--primary-emerald); --pin-color: #c0392b; /* Dark red */ --settings-icon-color: #ecf0f1; /* Off-white for settings icon */ --favorites-button-bg: var(--secondary-emerald); --favorites-button-text: #000; --history-button-bg: #28a745; --history-button-text: #fff; --audio-invert: 0; --audio-hue: 0deg; } body.warm-sunset-theme { --bg-color: linear-gradient(135deg, #FF6B6B, #FFCD6E, #F7D794); /* Warm gradient */ --text-color: #4a4a4a; /* Dark grey text */ --primary-accent: #e67e22; /* Vibrant orange */ --secondary-accent: #f39c12; /* Golden yellow */ --container-bg: rgba(255, 255, 255, 0.9); /* Slightly transparent white/cream */ --border-color: var(--primary-warm-sunset); --list-bg: rgba(255, 250, 240, 0.9); /* Light cream with transparency */ --list-hover-bg: rgba(255, 245, 230, 1); --input-bg: #fffaf0; --input-border: var(--secondary-warm-sunset); --button-bg: var(--primary-warm-sunset); --button-text: #fff; --scrollbar-thumb: var(--primary-warm-sunset); --scrollbar-track: #fcefdc; --skeleton-bg: rgba(240, 230, 220, 0.7); --skeleton-shine: rgba(250, 245, 240, 1); --fav-color-warm-sunset: #e74c3c; /* Red */ --playing-indicator-warm-sunset: var(--primary-warm-sunset); --pin-color-warm-sunset: #2980b9; /* Blue */ --settings-icon-warm-sunset: #4a4a4a; /* Dark grey for settings icon */ --favorites-button-bg: var(--secondary-warm-sunset); --favorites-button-text: #4a4a4a; --history-button-bg: #fd7e14; --history-button-text: #fff; --audio-invert-warm-sunset: 0; --audio-hue-warm-sunset: 0deg; } /* Default theme variables (initially dark) */ --bg-color: var(--bg-color-dark); --text-color: var(--text-color-dark); --primary-accent: var(--primary-neon-dark); --secondary-accent: var(--secondary-neon-dark); --container-bg: var(--container-bg-dark); --border-color: var(--border-color-dark); --list-bg: var(--list-bg-dark); --list-hover-bg: var(--list-hover-bg-dark); --input-bg: var(--input-bg-dark); --input-border: var(--input-border-dark); --button-bg: var(--button-bg-dark); --button-text: var(--button-text-dark); --scrollbar-thumb: var(--scrollbar-thumb-dark); --scrollbar-track: var(--scrollbar-track-dark); --skeleton-bg: var(--skeleton-bg-dark); --skeleton-shine: var(--skeleton-shine-dark); --fav-color: var(--fav-color-dark); --playing-indicator: var(--playing-indicator-dark); --pin-color: var(--pin-color-dark); --settings-icon-color: var(--settings-icon-dark); --favorites-button-bg: var(--favorites-button-bg-dark); --favorites-button-text: var(--favorites-button-text-dark); --history-button-bg: var(--history-button-bg-dark); --history-button-text: var(--history-button-text-dark); --audio-invert: var(--audio-invert-dark); --audio-hue: var(--audio-hue-dark); } /* --- General Styles --- */ html { scroll-behavior: smooth; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--text-color); background: var(--bg-color); transition: background 0.5s ease, color 0.3s ease; overflow-x: hidden; } #tsparticles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; display: none; } body.particles-enabled #tsparticles { display: block; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* --- Radio Container --- */ .radio-container { width: 90%; max-width: 650px; margin: 50px auto 40px auto; padding: 20px 25px; background: var(--container-bg); border: 2px solid var(--border-color); box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), 0 0 20px var(--primary-accent) inset; border-radius: 15px; color: var(--text-color); backdrop-filter: blur(8px); position: relative; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* --- Settings Button Container (New) --- */ .top-bar-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; /* Add some space below this bar */ } /* --- Settings button specific styles --- */ #settings-button { background: none; border: none; font-size: 1.8em; cursor: pointer; color: var(--settings-icon-color); padding: 5px; border-radius: 5px; transition: color 0.3s ease, trans </style> </head> <body> <script type='text/javascript' src='//pl27270188.profitableratecpm.com/ef/ff/84/efff84bea765c065281643b54ec8ae0e.js'></script> </body> </html>