AllaTurkaa

Arkadaşlar, Radyomuz için çok işlevsel bir kontrol paneli hazırladık. Bu widget, canlı yayın bilgileri, DJ kadromuz ve moderatörler için hızlı komutlar gibi tüm önemli bilgileri tek bir yerde toplar. Panel, tamamen HTML ve CSS ile hazırlanmıştır ve kurulumu son derece basittir.

I. Kurulum (iframe Kodu)

Bu paneli forumunuzda veya web sitenizde göstermek için aşağıdaki iframe kodunu kullanın. Panelinizde tüm DJ kartlarının ve akordeonların rahatça görünmesi için bu ölçüler önerilir:

Genişlik (En): 420px Yükseklik (Boy): 1300px

HTML II. Bölümler ve Kişiselleştirme Ayarları

Tüm ayarlar ve kişiselleştirmeler, verdiğimiz ana HTML kod bloğu içindeki <style> (Tasarım) ve <script> (İşlev) etiketlerinde yapılmaktadır. Lütfen kodları bu etiketler arasında arayın.

A) Görünüm ve Renk Ayarları (CSS)

Panelin temel tasarımını ve renklerini <style> etiketleri arasındaki CSS kodunu değiştirerek kişiselleştirin.

1. Ana Çerçeve Rengi: Arka plan rengini ve ana sınır rengini #main-control-panel bloğunda değiştirin.

CSS #main-control-panel { background: #2c3e50; /* Koyu Mavi Arkaplan Rengi */ border: 3px solid #f1c40f; /* Sarı Ana Sınır Rengi */ }

2. Geri Sayım Sayacı Rengi: Geri sayım sayacındaki ana metin rengini #countdown-display bloğunda değiştirin.

CSS #countdown-display { color: #2ecc71; /* Yeşil Sayaç Metin Rengi */ } B) Geri Sayım Sayacı Ayarı (JavaScript)

Bir sonraki canlı yayının tarih ve DJ adını ayarlamak için <script> etiketleri arasındaki şu iki satırı düzenleyin:

JavaScript const BROADCAST_DATE_TIME_STRING = '2025-10-10T22:00:00'; const DJ_NAME_TIMER = 'DJ Mert Yayını';

BROADCAST_DATE_TIME_STRING: Yıl-Ay-GünTSaat:Dakika:Saniye formatını kullanın. Örneğin: 2025-12-31T20:00:00 DJ_NAME_TIMER: Geri sayım sayacının üzerinde görünecek DJ adıdır.

C) Moderatör Hızlı Komutları Ayarı

Bu butonlar, tıklandığında metni panoya kopyalar ve ekranda "KOPYALANDI!" yazısı görünerek işlemi onaylar.

1. Butonda Görünen Metin: data-original-text alanını düzenleyerek butonun üzerindeki yazıyı değiştirin. 2. Kopyalanacak Gizli Metin: Kopyalanacak olan asıl uzun metin veya linki <span class="link-text"> etiketinin içini düzenleyerek değiştirin.

Örnek (Bağış Linki Butonu):

HTML https://bagis-linkiniz.com/djadi D) DJ Kadromuz (Akordeon Listesi)

Yeni bir DJ eklemek veya mevcut DJ'in bilgilerini düzenlemek için ilgili <div class="dj-card"> bloğunu kopyalayıp yapıştırın ya da düzenleyin.

1. Yayın Günü ve Saati: DJ'in yayın gün ve saatini bu alanda değiştirin:

HTML

2. Sosyal Medya Linkleri (3 Adet): Her DJ için Facebook, Instagram ve Twitter/Twitch/YouTube gibi 3 farklı link alanı tanımlanmıştır. Lütfen linkleri ve ikonları kendi DJ sayfalarınızla değiştirin.

HTML III. Geliştirmek İsteyenler İçin Not

Bu panel, HTML, CSS ve minimal JavaScript (Geri sayım ve Kopyala işlevi için) kullanılarak yazılmıştır. İleri düzey geliştirme yapmak isteyenler bu kodlar üzerinde çalışabilir. Panel, Font Awesome kütüphanesini kullanır.

Herkese iyi yayınlar dileriz. Bu panel sayesinde yayınlarınızın etkileşimini artırabilirsiniz.