İndex Özellikleri :
✔ DJ resimleri sağdan sola kayan şerit (en az 20 resim)
✔ Altlarında 20 farklı renkli kayan isimler
✔ Chat alanı responsive (kullanıcının boyutuna göre otomatik genişleyip daralır)
✔ Chat altında detaylı radyo kuralları aşağıdan yukarı yavaş akış
DEMO İÇİN TIKLA
Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RadyoKanka | Profesyonel Yayın</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}
body{
background:#050510;
color:#fff;
overflow-x:hidden;
}
/* HEADER */
.header{
text-align:center;
padding:40px 20px;
background:linear-gradient(90deg,#0f0c29,#302b63,#24243e);
}
.logo{
font-size:42px;
font-weight:bold;
background:linear-gradient(90deg,#ff00cc,#00f2ff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.tagline{
margin-top:10px;
opacity:.8;
}
/* DJ SLIDER */
.dj-slider{
overflow:hidden;
background:#0b0f1f;
padding:20px 0;
}
.dj-track{
display:flex;
width:max-content;
animation:scrollLeft 40s linear infinite;
}
.dj{
width:180px;
margin:0 10px;
text-align:center;
}
.dj img{
width:100%;
height:180px;
object-fit:cover;
border-radius:15px;
box-shadow:0 0 20px rgba(0,255,255,.3);
}
@keyframes scrollLeft{
from{transform:translateX(100%)}
to{transform:translateX(-100%)}
}
/* İSİM KAYAN YAZI */
.name-marquee{
margin-top:10px;
white-space:nowrap;
overflow:hidden;
position:relative;
}
.name-track{
display:inline-block;
padding-left:100%;
animation:nameScroll 25s linear infinite;
}
.name-track span{
margin:0 25px;
font-weight:bold;
font-size:15px;
}
@keyframes nameScroll{
from{transform:translateX(0)}
to{transform:translateX(-100%)}
}
/* CHAT */
.chat-container{
width:95%;
max-width:1400px;
margin:40px auto;
}
.chat-box{
width:100%;
aspect-ratio:16/9;
min-height:400px;
border-radius:20px;
overflow:hidden;
box-shadow:0 0 40px rgba(0,255,255,.3);
}
.chat-box iframe{
width:100%;
height:100%;
border:0;
}
/* KURALLAR */
.rules-section{
width:95%;
max-width:1000px;
margin:40px auto;
height:250px;
overflow:hidden;
position:relative;
border-radius:15px;
background:#0b0f1f;
box-shadow:0 0 30px rgba(255,0,200,.2);
}
.rules-track{
position:absolute;
width:100%;
animation:scrollUp 60s linear infinite;
}
.rules-track p{
padding:10px 20px;
font-size:14px;
line-height:1.6;
color:#ccc;
}
@keyframes scrollUp{
from{transform:translateY(100%)}
to{transform:translateY(-100%)}
}
/* FOOTER */
.footer{
text-align:center;
padding:20px;
background:#000;
font-size:14px;
opacity:.7;
}
/* MOBİL */
@media(max-width:768px){
.dj{width:130px}
.dj img{height:130px}
.chat-box{aspect-ratio:auto;height:400px}
}
</style>
</head>
<body>
<div class="header">
<div class="logo">RADYOKANKA</div>
<div class="tagline">Kalbin Frekansı • 7/24 Canlı Yayın</div>
</div>
<!-- DJ RESİM SLIDER -->
<div class="dj-slider">
<div class="dj-track">
<!-- 20 RESİM -->
<!-- İstersen linkleri değiştir -->
<script>
for(let i=1;i<=20;i++){
document.write(`
<div class="dj">
<img src="https://picsum.photos/300?random=${i}">
</div>
`);
}
</script>
</div>
<!-- 20 FARKLI RENK İSİM -->
<div class="name-marquee">
<div class="name-track">
<span style="color:#ff0000">Kurucu Kanka</span>
<span style="color:#00ff00">Admin Mavi</span>
<span style="color:#00ffff">DJ Kardelen</span>
<span style="color:#ff00ff">DJ Gece</span>
<span style="color:#ffff00">DJ Ateş</span>
<span style="color:#ff8800">DJ Rüzgar</span>
<span style="color:#00aaff">Admin Seda</span>
<span style="color:#aa00ff">DJ Fırtına</span>
<span style="color:#ff4444">DJ Hüzün</span>
<span style="color:#44ff44">DJ Damar</span>
<span style="color:#44ffff">DJ Işık</span>
<span style="color:#ff44ff">DJ Gölge</span>
<span style="color:#ffaa00">DJ Sevda</span>
<span style="color:#8888ff">Admin Bora</span>
<span style="color:#ff6666">DJ Kral</span>
<span style="color:#66ff66">DJ Melek</span>
<span style="color:#66ffff">DJ Şahin</span>
<span style="color:#ff66ff">DJ Yıldız</span>
<span style="color:#ffffff">Kurucu Patron</span>
<span style="color:#00ffcc">DJ Asi</span>
</div>
</div>
</div>
<!-- CHAT -->
<div class="chat-container">
<div class="chat-box">
<iframe src="https://SENINCHATADRESIN/chat/"></iframe>
</div>
</div>
<!-- RADYO KURALLARI -->
<div class="rules-section">
<div class="rules-track">
<p>1. Tüm kullanıcılar saygılı olmak zorundadır.</p>
<p>2. Küfür, hakaret ve aşağılayıcı sözler yasaktır.</p>
<p>3. Siyasi propaganda yapmak yasaktır.</p>
<p>4. Reklam paylaşımı yasaktır.</p>
<p>5. Özel mesajla rahatsız etmek yasaktır.</p>
<p>6. DJ yayındayken söz kesilmez.</p>
<p>7. Yönetici kararlarına itiraz chat ortamında yapılmaz.</p>
<p>8. Caps Lock kullanımı yasaktır.</p>
<p>9. Kişisel bilgi paylaşımı yasaktır.</p>
<p>10. Trollük yapan kullanıcı uzaklaştırılır.</p>
<p>11. Radyo huzur ortamıdır.</p>
<p>12. Herkes eşittir.</p>
<p>13. DJ talepleri spam yapılmaz.</p>
<p>14. Flood yasaktır.</p>
<p>15. Sunucu güvenliği önemlidir.</p>
<p>16. Chat kurallarına uymayan atılır.</p>
<p>17. Yayın kayıt altına alınabilir.</p>
<p>18. Kültürlü sohbet esastır.</p>
<p>19. Aile ortamına uygun davranış zorunludur.</p>
<p>20. Kurallara uymayanlar süresiz banlanır.</p>
</div>
</div>
<div class="footer">
© 2026 RadyoKanka • Profesyonel Yayın Platformu
</div>
</body>
</html>
![[Resim: SADEDEN1121.jpg]](https://i.ibb.co/vCkXFnHc/SADEDEN1121.jpg)
![[Resim: sadeden7776.jpg]](https://i.ibb.co/kgz3m0kf/sadeden7776.jpg)
![[Resim: SADEDEN887.jpg]](https://i.ibb.co/PsDFWbDj/SADEDEN887.jpg)
![[Resim: SADEden890.jpg]](https://i.ibb.co/8nSzZWqn/SADEden890.jpg)
![[Resim: img_6984ff2e4a73b7.47428114.jpg]](https://r.bisoralim.com/upload/TUANA/img_6984ff2e4a73b7.47428114.jpg)
![[Resim: dfghjk.jpg]](https://r.bisoralim.com/upload/dfghjk.jpg)
![[Resim: bitanwsii_degerlim.jpg]](https://r.bisoralim.com/upload/bitanwsii_degerlim.jpg)
![[Resim: bitanesii134.jpg]](https://r.bisoralim.com/upload/bitanesii134.jpg)
![[Resim: hzjuki.gif]](https://r.bisoralim.com/upload/hzjuki.gif)
↑
Forum Duyurusu
Bisoralim Forum’a katıl, radyonu tanıt! Forum ayrıcalıklarından yararlan.'
Foruma Kayıt Ol