@keyframes spinAndColor { 0% { transform: rotate(0deg); color: #4CAF50; text-shadow: 0 0 10px #4CAF50; } 50% { transform: rotate(180deg); color: #F44336; text-shadow: 0 0 15px #F44336; } 100% { transform: rotate(360deg); color: #4CAF50; text-shadow: 0 0 10px #4CAF50; } } .radio-icon { animation: spinAndColor 3s infinite ease-in-out; transition: all 0.3s ease; } body { margin: 0; padding: 0; font-family: 'Cairo', sans-serif; color: white; background: linear-gradient(135deg, #1a1a1a 0%, #212121 50%, #2c2c2c 100%); height: 100vh; overflow-y: hidden; display: flex; flex-direction: column; align-items: center; touch-action: none; box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5); } *:focus { outline: none; box-shadow: 0 0 12px rgba(76, 175, 80, 0.7), 0 0 20px rgba(76, 175, 80, 0.3); } /* AppBar */ .app-bar { background: linear-gradient(135deg, #212121 0%, #1a1a1a 100%); width: 100%; padding: 16px; text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(76, 175, 80, 0.1); z-index: 10; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .app-bar h1 { margin: 0; font-size: 28px; font-weight: 700; color: #4CAF50; text-transform: uppercase; display: flex; align-items: center; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .radio-icon { font-size: 24px; margin-right: 8px; vertical-align: middle; } .radio-icon.playing { animation: spin-radio 2s linear infinite; } @keyframes spin-radio { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* الـ Wrapper */ .wrapper { width: 100%; /* Ensure it takes full available width */ max-width: 800px; /* Limits the overall width on larger screens */ /* Remove direct padding here, we'll manage it inside for better scrollbar control */ /* padding: 20px; */ /* REMOVE THIS LINE */ flex: 1; display: flex; flex-direction: column; box-sizing: border-box; padding-bottom: 70px; /* Keep this for space above footer */ min-height: calc(100vh - 70px); margin: 0 auto; /* This centers the wrapper */ background: rgba(255, 255, 255, 0.05); border-radius: 12px; overflow-y: auto; /* This is essential for the scrollbar */ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Crucial for scrollbar containment, especially in RTL */ padding-right: 20px; /* Keep padding on the right for content */ /* We will create "internal padding" for the scrollbar on the left */ padding-left: 0; /* Reset or remove padding-left directly on wrapper if it's causing issues */ /* Scrollbar styling for Firefox */ scrollbar-width: thin; scrollbar-color: #4CAF50 #303030; } /* Add a new inner container for padding to push content away from the scrollbar */ #stationsList { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; /* Keep this, but we'll apply internal padding for it */ margin-bottom: 16px; padding: 8px; animation: fadeIn 0.7s ease-in-out; touch-action: pan-y; width: 100%; /* This is the key change for #stationsList */ padding-left: 20px; /* Add padding here to push content away from the left edge (where scrollbar is in RTL) */ padding-right: 20px; /* Add padding for consistency on the right */ box-sizing: border-box; /* Ensure padding is included in its width */ } /* Webkit scrollbar styling (Chrome, Safari, Edge) */ .wrapper::-webkit-scrollbar { width: 8px; /* Width of the vertical scrollbar */ background: transparent; /* Make the scrollbar area transparent */ } .wrapper::-webkit-scrollbar-track { background: #303030; /* Color of the scrollbar track */ border-radius: 10px; } .wrapper::-webkit-scrollbar-thumb { background-color: #4CAF50; /* Color of the scrollbar thumb */ border-radius: 10px; border: 2px solid #303030; /* Add a border to the thumb to create inner spacing */ } /* You might want to apply the same scrollbar styling to #stationsList if it also has overflow */ #stationsList::-webkit-scrollbar { width: 8px; background: transparent; } #stationsList::-webkit-scrollbar-track { background: #303030; border-radius: 10px; } #stationsList::-webkit-scrollbar-thumb { background-color: #4CAF50; border-radius: 10px; border: 2px solid #303030; } #now-playing { background: rgba(76, 175, 80, 0.15); padding: 12px; margin-bottom: 8px; font-size: 18px; font-weight: 600; color: #4CAF50; text-align: center; border-radius: 12px; border: 1px solid rgba(76, 175, 80, 0.5); opacity: 0; transform: translateY(-10px); transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease; } #now-playing.visible { opacity: 1; transform: translateY(0); box-shadow: 0 0 15px rgba(76, 175, 80, 0.3); } #errorMessage { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: #F44336; padding: 12px 20px; font-size: 16px; font-weight: 500; color: white; text-align: center; border-radius: 12px; z-index: 1002; opacity: 0; transition: opacity 0.3s ease, box-shadow 0.3s ease; display: block; } #errorMessage.show { opacity: 1; box-shadow: 0 0 10px rgba(244, 67, 54, 0.5); } #searchInput { width: 100%; padding: 12px 40px 12px 16px; margin-bottom: 16px; margin-top: 8px; border-radius: 12px; border: 1px solid #4CAF50; background: #424242; color: white; font-size: 16px; font-family: 'Cairo', sans-serif; box-sizing: border-box; transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; position: relative; display: none; } #searchInput.visible { display: block; } #searchInput:focus { border-color: #66BB6A; box-shadow: 0 0 12px rgba(76, 175, 80, 0.7); transform: scale(1.02); } #searchInput::placeholder { color: #B0BEC5; } .tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; } .tab { background: #4CAF50; color: white; border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 16px; transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; } .tab:hover { background: #66BB6A; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3); } .tab.active { background: #FF9800; box-shadow: 0 0 15px rgba(255, 152, 0, 0.5); } #stationsList { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; margin-bottom: 16px; padding: 8px; animation: fadeIn 0.7s ease-in-out; touch-action: pan-y; width: 100%; } @keyframes fadeIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } .station-item { background: #303030; padding: 12px; border-radius: 12px; display: flex; align-items: center; cursor: pointer; transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1); } .station-item:hover { background: #424242; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3), 0 3px 6px rgba(0, 0, 0, 0.2); transform: translateY(-2px); } .station-item.playing { background: #FF9800; box-shadow: 0 0 20px rgba(255, 152, 0, 0.7), 0 4px 8px rgba(255, 152, 0, 0.3); } .station-item img { width: 50px; height: 50px; border-radius: 8px; margin-left: 12px; object-fit: cover; aspect-ratio: 1/1; transition: transform 0.3s ease; } .station-item:hover img { transform: scale(1.1); } .station-item span { flex: 1; font-size: 16px; font-weight: 500; color: white; transition: color 0.3s ease; } .station-item:hover span { color: #66BB6A; } .station-play-btn, .player-control-btn, #audio-player-control { background: linear-gradient(135deg, #388E3C 0%, #4CAF50 100%); border: none; color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-left: 12px; transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; font-family: 'Material Icons'; font-size: 24px; position: relative; overflow: hidden; } .station-play-btn::before, .player-control-btn::before, #audio-player-control::before { content: 'play_arrow'; font-family: 'Material Icons'; font-size: 24px; position: relative; z-index: 2; } .station-play-btn.playing::before, .player-control-btn.playing::before, #audio-player-control.playing::before { content: 'pause'; } .station-play-btn:hover, .player-control-btn:hover, #audio-player-control:hover { background: linear-gradient(135deg, #66BB6A 0%, #81C784 100%); box-shadow: 0 0 15px rgba(76, 175, 80, 0.8); } .station-play-btn.playing, .player-control-btn.playing, #audio-player-control.playing { background: linear-gradient(135deg, #FF9800 0%, #FFB300 100%); } .station-play-btn.playing:hover, .player-control-btn.playing:hover, #audio-player-control.playing:hover { background: linear-gradient(135deg, #FFB300 0%, #FFCA28 100%); } #audio-player-dummy, #video-player-dummy { width: 100%; margin-bottom: 16px; border-radius: 12px; background: linear-gradient(135deg, #424242 0%, #303030 100%); opacity: 0; transform: scale(0.95); transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease; display: none; position: relative; padding: 10px; box-sizing: border-box; height: 60px; align-items: center; } #audio-player-dummy.visible, #video-player-dummy.visible { opacity: 1; transform: scale(1); box-shadow: 0 0 25px rgba(76, 175, 80, 0.6); display: flex; } .player-img { width: 40px; height: 40px; border-radius: 8px; margin-left: 12px; object-fit: cover; aspect-ratio: 1/1; transition: transform 0.3s ease; } .player-img:hover { transform: scale(1.1); } .player-wave { position: absolute; top: 50%; right: 70px; transform: translateY(-50%); display: flex; gap: 4px; } .player-wave span { width: 4px; height: 20px; background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%); border-radius: 2px; animation: wave 1.2s infinite ease-in-out; display: none; box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); } .player-wave span:nth-child(2) { animation-delay: 0.3s; } .player-wave span:nth-child(3) { animation-delay: 0.6s; } .player-wave span:nth-child(4) { animation-delay: 0.9s; } #audio-player-dummy.visible .player-wave span, #video-player-dummy.visible .player-wave span { display: block; } .station-name { flex: 1; text-align: center; font-size: 16px; font-weight: 500; color: #4CAF50; margin: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.3s ease, text-shadow 0.3s ease; } .station-name:hover { color: #66BB6A; text-shadow: 0 0 10px rgba(76, 175, 80, 0.5); } @keyframes wave { 0%, 100% { height: 12px; transform: translateY(0); } 50% { height: 24px; transform: translateY(-5px); } } .player-control-btn, #audio-player-control { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); } #player { display: none !important; } #toggleMenu, #retryButton { background: linear-gradient(135deg, #388E3C 0%, #4CAF50 100%); border: none; padding: 12px 24px; color: white; font-size: 16px; font-family: 'Cairo', sans-serif; cursor: pointer; margin-bottom: 16px; border-radius: 12px; width: 100%; transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } #toggleMenu:hover, #retryButton:hover { background: linear-gradient(135deg, #66BB6A 0%, #81C784 100%); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(76, 175, 80, 0.4); } #video-placeholder, #hidden-video-iframe, #toggle-dailymotion { display: none !important; } footer { background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%); width: 100%; padding: 12px; text-align: center; color: #4CAF50; font-size: 14px; font-family: 'Cairo', sans-serif; font-weight: 600; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3); } /* شريط التنقل السفلي */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; width: 100vw; background: linear-gradient(135deg, #212121 0%, #1a1a1a 100%); display: flex; justify-content: space-around; padding: 10px 0; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4); z-index: 1001; box-sizing: border-box; transition: background 0.5s ease, box-shadow 0.3s ease; } .bottom-nav button { background: transparent; border: none; font-family: 'Material Icons'; font-size: 24px; cursor: pointer; padding: 10px; color: #4CAF50; transition: color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; } .bottom-nav button:hover { color: #66BB6A; transform: scale(1.2); box-shadow: 0 0 15px rgba(76, 175, 80, 0.5); } .bottom-nav button.active { color: #FF9800; box-shadow: 0 0 20px rgba(255, 152, 0, 0.7); } .bottom-nav button::after { content: ''; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background: #FF9800; transform: scaleX(0); transition: transform 0.3s ease; } .bottom-nav button.active::after { transform: scaleX(1); } #favoritesCount { font-size: 12px; background: #FF9800; color: white; border-radius: 50%; padding: 2px 6px; margin-right: 4px; transition: transform 0.3s ease; } .bottom-nav button:hover #favoritesCount { transform: scale(1.2); } /* تنسيق الساعة الديجيتال */ #clock-placeholder { width: 100%; margin-bottom: 16px; border-radius: 12px; background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%); padding: 10px; box-sizing: border-box; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; color: white; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 15px rgba(76, 175, 80, 0.3); direction: ltr; transition: background 0.5s ease, box-shadow 0.3s ease; } /* حجب الإعلانات */ iframe[src*="ads"], iframe[src*="doubleclick"], div[id^="ad-"], div[class^="ad-"], div[id^="ads-"], div[class^="ads-"], div[id*="sponsor"], div[class*="sponsor"], div[id*="promoted"], div[class*="promoted"], div[id*="banner"], div[class*="banner"], div[id*="advert"], div[class*="advert"], div[id*="advertisement"], div[class*="advertisement"] { display: none !important; visibility: hidden !important; max-height: 0 !important; overflow: hidden !important; } /* الوضع النهاري */ body.light-mode { background: linear-gradient(135deg, #E6F0FA 0%, #F8FAFC 50%, #FFFFFF 100%); color: #1A1A1A; box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.3); } body.light-mode .app-bar { background: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 100%); } body.light-mode .station-item { background: #F1F5F9; } body.light-mode .station-item:hover { background: #E2E8F0; } body.light-mode .station-item span { color: #1A1A1A; } body.light-mode #searchInput { background: #FFFFFF; border-color: #4CAF50; } body.light-mode .bottom-nav { background: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 100%); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1); } body.light-mode #clock-placeholder { background: linear-gradient(135deg, #424242 0%, #303030 100%); /* نفس لون الـ Dummy Player */ color: #FFD700; /* لون النص بقى كده عشان يظهر واضح على الخلفية الداكنة */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 15px rgba(66, 66, 66, 0.3); /* تعديل الظلال */ } /* زر المفضلة */ .fav-btn { background: #FFD700; color: #333; border: none; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; margin-left: 8px; transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; font-family: 'Material Icons'; font-size: 18px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .fav-btn:hover { box-shadow: 0 0 15px rgba(255, 215, 0, 0.8); transform: rotate(15deg) scale(1.1); } .fav-btn.favorited { background: #FFA500; } .fav-btn::before { content: 'star'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.3s ease; } .fav-btn:hover::before { transform: translate(-50%, -50%) scale(1.2); } /* إشعار منبثق */ .toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%); color: white; padding: 10px 20px; border-radius: 8px; font-size: 14px; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; z-index: 1002; } .toast.show { opacity: 1; transform: translateX(-50%) scale(1.05); box-shadow: 0 0 15px rgba(76, 175, 80, 0.5); } /* وضع توفير الطاقة */ body.power-save .player-wave, body.power-save .station-item:hover, body.power-save #audio-player-dummy, body.power-save #video-player-dummy { animation: none; box-shadow: none; } /* Responsive للتلفزيون */ @media screen and (min-width: 768px) { .app-bar h1 { font-size: 40px; } .radio-icon { font-size: 32px; } #now-playing, #errorMessage, #searchInput { font-size: 26px; } .station-item img { width: 80px; height: 80px; } .station-item span { font-size: 26px; } .station-play-btn, .player-control-btn, #audio-player-control { width: 48px; height: 48px; font-size: 22px; } .fav-btn { width: 36px; height: 36px; font-size: 18px; } #toggleMenu, #retryButton { font-size: 24px; padding: 20px 40px; } footer { font-size: 20px; } .player-wave span { width: 6px; height: 30px; } .station-name { font-size: 25px; } .bottom-nav button { font-size: 28px; padding: 12px; } #clock-placeholder { font-size: 24px; } .wrapper { padding: 10px; max-width: 1000px; } .player-img { width: 48px; height: 48px; } } /* تمركز الواجهة على الموبايل */ @media screen and (max-width: 768px) { .wrapper { display: flex; justify-content: center; align-items: center; padding: 20px 10px; width: 100%; max-width: 100%; } .app-bar, #stationsList, #now-playing, #errorMessage, #searchInput, #audio-player-dummy, #video-player-dummy, #toggleMenu, #retryButton, footer, #clock-placeholder { width: 100%; margin: 0 auto; padding-left: 0; padding-right: 0; } .bottom-nav { height: 60px; box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15); } .bottom-nav button { padding: 12px; font-size: 26px; } .station-item img { width: 40px; height: 40px; } } /* تغيير الخلفية بناءً على الوقت */ @supports (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) { body { background: linear-gradient(135deg, #1a1a1a 0%, #212121 50%, #2c2c2c 100%); } } @media (prefers-color-scheme: light) { body { background: linear-gradient(135deg, #E6F0FA 0%, #F8FAFC 50%, #FFFFFF 100%); color: #1A1A1A; } } } Radio By Peter

Radio By Peter radio

00:00:00