Radio
🔊
Selecteer een station Verzoekbox
body::before { content: ''; position: fixed; top: 50%; left: 50%; width: 1000px; height: 1000px; background: radial-gradient(circle, rgba(138, 43, 226, 0.2), transparent 70%); transform: translate(-50%, -50%); animation: ambientPulse 6s ease-in-out infinite; pointer-events: none; } @keyframes ambientPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; } 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; } } .player-container { max-width: 100%; background: linear-gradient(135deg, rgba(15, 12, 41, 0.95), rgba(48, 43, 99, 0.95), rgba(36, 36, 62, 0.95)); border-radius: 25px; padding: 5px 15px; box-shadow: 0 15px 60px rgba(138, 43, 226, 0.4), inset 0 2px 10px rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); border: 2px solid rgba(138, 43, 226, 0.5); position: relative; overflow: hidden; height: 35px; display: flex; align-items: center; } .player-container::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient( from 0deg, transparent, rgba(138, 43, 226, 0.4), rgba(255, 0, 255, 0.3), rgba(0, 255, 255, 0.2), transparent ); animation: rotateBorder 6s linear infinite; z-index: 0; pointer-events: none; } @keyframes rotateBorder { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .player-container::after { content: ''; position: absolute; inset: 2px; background: linear-gradient(135deg, rgba(15, 12, 41, 0.98), rgba(48, 43, 99, 0.98)); border-radius: 23px; z-index: 0; } .controls-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; width: 100%; } .search-icon { width: 25px; height: 25px; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(138, 43, 226, 0.8)); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); animation: iconGlow 3s ease-in-out infinite; } @keyframes iconGlow { 0%, 100% { filter: drop-shadow(0 0 8px rgba(138, 43, 226, 0.8)); } 50% { filter: drop-shadow(0 0 15px rgba(255, 0, 255, 1)); } } .search-icon:hover { filter: drop-shadow(0 0 15px rgba(138, 43, 226, 1)); transform: scale(1.2) rotate(5deg); } .station-btn { background: linear-gradient(135deg, #8a2be2 0%, #4b0082 100%); color: white; border: none; padding: 5px 12px; border-radius: 15px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; flex-shrink: 0; height: 25px; box-shadow: 0 4px 15px rgba(138, 43, 226, 0.5); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; } .station-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%); transition: width 0.5s, height 0.5s; } .station-btn:hover::before { width: 200%; height: 200%; } .station-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(138, 43, 226, 0.8); background: linear-gradient(135deg, #9b30ff 0%, #5a0099 100%); } .station-btn.active { background: linear-gradient(135deg, #ff00ff 0%, #ff1493 100%); box-shadow: 0 8px 25px rgba(255, 0, 255, 1); animation: activePulse 2s ease-in-out infinite; } @keyframes activePulse { 0%, 100% { box-shadow: 0 8px 25px rgba(255, 0, 255, 1); transform: scale(1); } 50% { box-shadow: 0 10px 35px rgba(255, 0, 255, 1); transform: scale(1.05); } } .visualizer { display: inline-flex; align-items: flex-end; justify-content: center; gap: 3px; height: 24px; margin: 0 10px; flex-shrink: 0; padding: 4px 12px; background: rgba(0, 0, 0, 0.7); border-radius: 15px; border: 2px solid transparent; background-clip: padding-box; position: relative; overflow: hidden; } .visualizer::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(45deg, #8a2be2, #ff00ff, #00ffff, #8a2be2 ); background-size: 400% 400%; border-radius: 15px; z-index: -1; animation: gradientBorder 3s ease infinite; } @keyframes gradientBorder { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .visualizer::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(138, 43, 226, 0.4) 20%, rgba(255, 0, 255, 0.4) 40%, rgba(0, 255, 255, 0.4) 60%, rgba(138, 43, 226, 0.4) 80%, transparent 100% ); background-size: 200% 100%; animation: visualizerSweep 2.5s linear infinite; border-radius: 15px; } @keyframes visualizerSweep { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .bar { width: 5px; background: linear-gradient(to top, #1a0033 0%, #8a2be2 20%, #ff00ff 60%, #00ffff 100% ); border-radius: 4px; animation: wave 0.8s ease-in-out infinite; box-shadow: 0 0 15px rgba(138, 43, 226, 1), 0 0 30px rgba(255, 0, 255, 0.8), 0 0 45px rgba(0, 255, 255, 0.5), inset 0 0 8px rgba(255, 255, 255, 0.6), inset 0 -2px 10px rgba(0, 255, 255, 0.8); transform-origin: bottom; position: relative; z-index: 1; filter: brightness(1); } .bar::before { content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(0, 255, 255, 0.8) 30%, transparent 70% ); border-radius: 50%; opacity: 0; animation: spark 0.8s ease-in-out infinite; filter: blur(1px); } .bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, transparent 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.6) 100% ); border-radius: 4px; opacity: 0; animation: shine 0.8s ease-in-out infinite; } @keyframes spark { 0%, 100% { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.5); } 50% { opacity: 1; transform: translateX(-50%) translateY(-8px) scale(1.2); } } @keyframes shine { 0%, 100% { opacity: 0; } 50% { opacity: 0.8; } } .bar:nth-child(1) { animation-delay: 0s; animation-duration: 0.65s; } .bar:nth-child(1)::before { animation-delay: 0s; animation-duration: 0.65s; } .bar:nth-child(1)::after { animation-delay: 0s; animation-duration: 0.65s; } .bar:nth-child(2) { animation-delay: 0.08s; animation-duration: 0.85s; } .bar:nth-child(2)::before { animation-delay: 0.08s; animation-duration: 0.85s; } .bar:nth-child(2)::after { animation-delay: 0.08s; animation-duration: 0.85s; } .bar:nth-child(3) { animation-delay: 0.16s; animation-duration: 0.7s; } .bar:nth-child(3)::before { animation-delay: 0.16s; animation-duration: 0.7s; } .bar:nth-child(3)::after { animation-delay: 0.16s; animation-duration: 0.7s; } .bar:nth-child(4) { animation-delay: 0.24s; animation-duration: 0.95s; } .bar:nth-child(4)::before { animation-delay: 0.24s; animation-duration: 0.95s; } .bar:nth-child(4)::after { animation-delay: 0.24s; animation-duration: 0.95s; } .bar:nth-child(5) { animation-delay: 0.32s; animation-duration: 0.75s; } .bar:nth-child(5)::before { animation-delay: 0.32s; animation-duration: 0.75s; } .bar:nth-child(5)::after { animation-delay: 0.32s; animation-duration: 0.75s; } .bar:nth-child(6) { animation-delay: 0.24s; animation-duration: 0.9s; } .bar:nth-child(6)::before { animation-delay: 0.24s; animation-duration: 0.9s; } .bar:nth-child(6)::after { animation-delay: 0.24s; animation-duration: 0.9s; } .bar:nth-child(7) { animation-delay: 0.16s; animation-duration: 0.8s; } .bar:nth-child(7)::before { animation-delay: 0.16s; animation-duration: 0.8s; } .bar:nth-child(7)::after { animation-delay: 0.16s; animation-duration: 0.8s; } .bar:nth-child(8) { animation-delay: 0.08s; animation-duration: 0.7s; } .bar:nth-child(8)::before { animation-delay: 0.08s; animation-duration: 0.7s; } .bar:nth-child(8)::after { animation-delay: 0.08s; animation-duration: 0.7s; } @keyframes wave { 0% { height: 4px; box-shadow: 0 0 10px rgba(138, 43, 226, 0.6), 0 0 20px rgba(255, 0, 255, 0.4), inset 0 0 5px rgba(255, 255, 255, 0.3); filter: brightness(0.7) saturate(0.8); } 15% { height: 10px; box-shadow: 0 0 15px rgba(138, 43, 226, 0.8), 0 0 25px rgba(255, 0, 255, 0.6), 0 0 35px rgba(0, 255, 255, 0.3), inset 0 0 8px rgba(255, 255, 255, 0.5); filter: brightness(1) saturate(1); } 30% { height: 16px; box-shadow: 0 0 20px rgba(138, 43, 226, 1), 0 0 35px rgba(255, 0, 255, 0.8), 0 0 50px rgba(0, 255, 255, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.7); filter: brightness(1.3) saturate(1.2); } 50% { height: 24px; box-shadow: 0 0 25px rgba(138, 43, 226, 1), 0 0 45px rgba(255, 0, 255, 1), 0 0 65px rgba(0, 255, 255, 0.8), 0 0 85px rgba(255, 255, 255, 0.5), inset 0 0 12px rgba(255, 255, 255, 1), inset 0 -3px 15px rgba(0, 255, 255, 1); filter: brightness(1.8) saturate(1.5); } 70% { height: 16px; box-shadow: 0 0 20px rgba(138, 43, 226, 1), 0 0 35px rgba(255, 0, 255, 0.8), 0 0 50px rgba(0, 255, 255, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.7); filter: brightness(1.3) saturate(1.2); } 85% { height: 10px; box-shadow: 0 0 15px rgba(138, 43, 226, 0.8), 0 0 25px rgba(255, 0, 255, 0.6), 0 0 35px rgba(0, 255, 255, 0.3), inset 0 0 8px rgba(255, 255, 255, 0.5); filter: brightness(1) saturate(1); } 100% { height: 4px; box-shadow: 0 0 10px rgba(138, 43, 226, 0.6), 0 0 20px rgba(255, 0, 255, 0.4), inset 0 0 5px rgba(255, 255, 255, 0.3); filter: brightness(0.7) saturate(0.8); } } .message-text { color: #e0e0e0; font-size: 11px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex-shrink: 0; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8); animation: textGlow 3s ease-in-out infinite; transition: all 0.3s ease; } .message-text:hover { color: #00ffff; text-shadow: 0 0 15px rgba(0, 255, 255, 1); transform: scale(1.05); } @keyframes textGlow { 0%, 100% { text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8); } 50% { text-shadow: 0 0 10px rgba(138, 43, 226, 0.6); } } .play-pause-btn { width: 25px; height: 25px; border-radius: 50%; background: linear-gradient(135deg, #ff00ff 0%, #00ffff 100%); border: 2px solid rgba(255, 255, 255, 0.4); cursor: pointer; font-size: 10px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; color: white; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); box-shadow: 0 4px 15px rgba(255, 0, 255, 0.6); position: relative; overflow: hidden; } .play-pause-btn::before { content: ''; position: absolute; inset: -3px; background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff); background-size: 200% 200%; border-radius: 50%; z-index: -1; filter: blur(8px); animation: buttonGlow 3s linear infinite; opacity: 0.8; } @keyframes buttonGlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .play-pause-btn:hover { transform: scale(1.2); box-shadow: 0 6px 30px rgba(255, 0, 255, 1); } .play-pause-btn:active { transform: scale(1.1); } .volume-control { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 100px; padding: 4px 8px; background: rgba(0, 0, 0, 0.2); border-radius: 12px; border: 1px solid rgba(138, 43, 226, 0.3); } .volume-slider { flex: 1; height: 5px; border-radius: 10px; background: rgba(255, 255, 255, 0.2); outline: none; -webkit-appearance: none; position: relative; } .volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, #ff00ff, #00ffff); cursor: pointer; box-shadow: 0 0 15px rgba(255, 0, 255, 1); transition: all 0.2s ease; } .volume-slider::-webkit-slider-thumb:hover { transform: scale(1.3); box-shadow: 0 0 20px rgba(255, 0, 255, 1); } .volume-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, #ff00ff, #00ffff); cursor: pointer; border: none; box-shadow: 0 0 15px rgba(255, 0, 255, 1); transition: all 0.2s ease; } .volume-slider::-moz-range-thumb:hover { transform: scale(1.3); box-shadow: 0 0 20px rgba(255, 0, 255, 1); } .now-playing { font-size: 11px; color: #00ffff; font-weight: 700; white-space: nowrap; flex-shrink: 0; text-shadow: 0 0 15px rgba(0, 255, 255, 1); max-width: 300px; overflow: hidden; text-overflow: ellipsis; animation: nowPlayingGlow 2s ease-in-out infinite; padding: 4px 10px; background: rgba(0, 255, 255, 0.1); border-radius: 10px; border: 1px solid rgba(0, 255, 255, 0.3); } @keyframes nowPlayingGlow { 0%, 100% { text-shadow: 0 0 15px rgba(0, 255, 255, 1); border-color: rgba(0, 255, 255, 0.3); } 50% { text-shadow: 0 0 25px rgba(0, 255, 255, 1); border-color: rgba(0, 255, 255, 0.6); } } .station-info { font-size: 9px; color: #a0a0a0; font-style: italic; opacity: 0.9; display: block; } .volume-icon { font-size: 14px; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.8)); animation: iconPulse 2s ease-in-out infinite; } @keyframes iconPulse { 0%, 100% { filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.8)); transform: scale(1); } 50% { filter: drop-shadow(0 0 15px rgba(0, 255, 255, 1)); transform: scale(1.1); } } .verzoekbox-icon { width: 380px; height: 35px; flex-shrink: 0; cursor: pointer; filter: drop-shadow(0 0 10px rgba(255, 0, 255, 0.8)); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); animation: verzoekboxGlow 3s ease-in-out infinite; } @keyframes verzoekboxGlow { 0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 0, 255, 0.8)); transform: scale(1); } 50% { filter: drop-shadow(0 0 20px rgba(255, 0, 255, 1)) drop-shadow(0 0 30px rgba(138, 43, 226, 0.8)); transform: scale(1.15); } } .verzoekbox-icon:hover { filter: drop-shadow(0 0 25px rgba(255, 0, 255, 1)) drop-shadow(0 0 35px rgba(138, 43, 226, 1)); transform: scale(1.15) rotate(-2deg); animation: none; } .verzoekbox-icon:active { transform: scale(3.95); } /* Responsive */ @media (max-width: 900px) { .volume-control { min-width: 80px; } .now-playing { max-width: 200px; } }
Radio
🔊
Selecteer een station Verzoekbox