<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Bozuk FM</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="author" content="Barış Özgül">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style type="text/css">
.ws18 {font-size: 24px;}
.wpmd {font-size: 13px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;}
DIV { margin-top: 0px; margin-bottom: 0px; }
body { text-align:center; margin:0; padding:0; background-color:#000000; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; }
div#container { position:relative; width: 1400px; height: 1800px; margin: 0 auto; transform-origin: top center; transition: transform 0.1s ease-out; }
#efsaneScene { position: absolute; top: 0px; left: 0; width: 1400px; height: 1800px; overflow: hidden; pointer-events: none; z-index: 2; background: transparent; }
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap');
.miniLogo { position: absolute; top: 250px; left: -800px; font-family: 'Cinzel Decorative', 'Georgia', serif; font-weight: 700; font-size: 55px; letter-spacing: 4px; white-space: nowrap; background: linear-gradient(to right, #ff0055, #ff8c00, #ffeb3b, #00f0ff, #a020f0, #ff0055); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; border-top: 2px dashed rgba(0, 240, 255, 0.6); border-bottom: 2px dashed rgba(255, 0, 85, 0.6); padding: 15px 40px; filter: drop-shadow(0 0 15px rgba(0, 240, 255, 0.5)); animation: superSmoothMove 45s linear infinite, rainbowFlow 8s linear infinite, neonFlicker 4s linear infinite; }
@keyframes rainbowFlow { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
@keyframes superSmoothMove { 0% { left: -800px; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 1650px; opacity: 0; } }
@keyframes neonFlicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { filter: drop-shadow(0 0 15px rgba(0, 240, 255, 0.7)) drop-shadow(0 0 30px rgba(255, 0, 85, 0.5)); opacity: 1; } 20%, 24%, 55% { filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2)); opacity: 0.6; } }
.fairyNote { position: absolute; top: -100px; opacity: 0; font-weight: bold; filter: drop-shadow(0 0 12px currentColor); }
.glassBubbleHeart { position: absolute; top: -160px; display: inline-block; opacity: 0; background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.3) 25%, rgba(0, 240, 255, 0.25) 50%, rgba(255, 0, 128, 0.3) 75%, transparent 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 15px rgba(0, 240, 255, 0.6)); animation: heavyGravityFall linear infinite; }
@keyframes heavyGravityFall { 0% { transform: translateY(0) translateX(0) rotate(0deg) scale(0.7); opacity: 0; } 10% { opacity: 0.90; } 100% { transform: translateY(1800px) translateX(-40px) rotate(40deg) scale(1.2); opacity: 0; } }
@keyframes heavyGravityFallRight { 0% { transform: translateY(0) translateX(0) rotate(0deg) scale(0.7); opacity: 0; } 10% { opacity: 0.90; } 100% { transform: translateY(1800px) translateX(40px) rotate(-40deg) scale(1.2); opacity: 0; } }
.fairyDust { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ffffff; opacity: 0; animation: dustFallDown 16s linear infinite; }
@keyframes dustFallDown { 0% { transform: translateY(0) translateX(0) scale(0); opacity: 0; } 15% { opacity: 0.85; } 100% { transform: translateY(1800px) translateX(var(--xMove)) scale(1.6); opacity: 0; } }
.bio-deck { position:absolute; top:1520px; width:172px; height:172px; z-index:9; font-family:monospace; background:rgba(2, 6, 6, 0.8); border:1px solid rgba(0, 255, 255, 0.3); border-radius:6px; overflow: hidden; }
.l-pos { left:40px; } .r-pos { right:40px; }
.scanline { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(to bottom, transparent, #00ffff, transparent); animation: MoveScan 3s linear infinite; }
.inner-scanner { width:88px; height:88px; margin: 12px auto 0 auto; border: 1.5px solid #00ffff; border-radius:4px; overflow:hidden; }
.bio-gif { width:100%; height:100%; filter: grayscale(100%) sepia(100%) hue-rotate(145deg) saturation(6) brightness(1.1); }
.terminal-data-panel { margin:10px auto 0 auto; width:138px; border:1px solid #00ffff; padding:4px; text-align:center; font-size:9px; color:#00ffff; }
.stats-row { display:flex; justify-content:space-between; font-size:9px; color:#ffffff; border-top:1px dashed rgba(0,255,255,0.3); margin-top:3px; }
@keyframes MoveScan { 0% { top: -5%; } 100% { top: 105%; } }
.holo-btn { position: relative; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; text-decoration: none; border-radius: 50%; background: rgba(10, 10, 20, 0.8); border: 2px solid #00f2ff; box-shadow: 0 0 15px rgba(0, 242, 255, 0.3); overflow: hidden; transition: all 0.4s ease; }
.holo-btn::before { content: ""; position: absolute; width: 140%; height: 140%; background: conic-gradient(transparent, #00f2ff, transparent 30%); animation: rotateHolo 6s linear infinite; }
.core-pulse { position: relative; z-index: 2; width: 85%; height: 85%; background: rgba(0, 242, 255, 0.05); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #00f2ff; }
.text-area { text-align: center; color: #ffffff; font-family: monospace; }
.title { font-size: 9px; letter-spacing: 2.5px; font-weight: bold; }
.sub { font-size: 6px; color: #00f2ff; }
@keyframes rotateHolo { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.holo-btn:hover { background: #00f2ff; box-shadow: 0 0 30px #00f2ff; transform: scale(1.1); }
.holo-btn:hover .text-area { color: #001a1d; font-weight: bold; }
.holo-btn:hover .sub { color: #001a1d; }
</style>
</head>
<body bgColor="#000000" Link="#000000" VLink="#000000" ALink="#000000">
<div id="container">
<div id="image1" style="position:absolute; overflow:hidden; left:0px; top:0px; width:1400px; height:1800px; z-index:0">
<img src="https://i.ibb.co/1JwW5yFw/Tasaar-m-Sa-De.gif" alt="" border="0" width="1400" height="1800">
</div>
<div id="marquee1" style="position:absolute; overflow:hidden; left:103px; top:695px; width:1195px; height:29px; z-index:1">
<marquee width="1195" height="29" scrollamount="3">
<div class="wpmd">
<div>
<font color="#FF0000" face="Calibri" class="ws18"><b>• KURUCU • SAHİBİ: • </b></font>
<font color="#0066FF" face="Calibri" class="ws18"><b>SaDe</b></font>
<font color="#FF0000" face="Calibri" class="ws18"><b> • METİN: • </b></font>
<font color="#FFFFFF" face="Calibri" class="ws18"><b>DJ KADROMUZ • bLuE + SaDe VE MÜZİK DİYARİ • KEYİFLE DAKİKALAR...</b></font>
</div>
</div>
</marquee>
</div>
<div id="efsaneScene"></div>
<div id="deck-wrapper">
<div class="bio-deck l-pos">
<div class="scanline"></div>
<div class="inner-scanner"><img src="https://s1.directupload.eu/images/user/260421/nxpqzxb7.gif" class="bio-gif"></div>
<div class="terminal-data-panel"><div>▲ SaDe </div><div class="stats-row"><span>♬ MUSIC ♬</span><span class="deck-clock">00:00:00</span></div></div>
</div>
<div class="bio-deck r-pos">
<div class="scanline"></div>
<div class="inner-scanner"><img src="https://s1.directupload.eu/images/user/260421/nxpqzxb7.gif" class="bio-gif"></div>
<div class="terminal-data-panel"><div>▲ SaDe </div><div class="stats-row"><span>♬ MUSIC ♬</span><span class="deck-clock">00:00:00</span></div></div>
</div>
</div>
<div class="holo-btn-container">
<div style="position:absolute; left:270px; top:1500px; z-index:10;"><a href="https://flatcast.forum" target="_blank" rel="noopener noreferrer" class="holo-btn"><div class="core-pulse"><div class="text-area"><div class="title">Bozuk FM</div><div class="sub">HOME</div></div></div></a></div>
<div style="position:absolute; left:270px; top:1610px; z-index:10;"><a href="https://flatcast.forum" target="_blank" rel="noopener noreferrer" class="holo-btn"><div class="core-pulse"><div class="text-area"><div class="title">OYUN</div><div class="sub">PLAY</div></div></div></a></div>
<div style="position:absolute; left:1025px; top:1500px; z-index:10;"><a href="https://flatcast.forum" target="_blank" rel="noopener noreferrer" class="holo-btn"><div class="core-pulse"><div class="text-area"><div class="title">YOUTUBE</div><div class="sub">MEDIA</div></div></div></a></div>
<div style="position:absolute; left:1025px; top:1610px; z-index:10;"><a href="https://flatcast.forum" target="_blank" rel="noopener noreferrer" class="holo-btn"><div class="core-pulse"><div class="text-area"><div class="title">FACEBOOK</div><div class="sub">SOCIAL</div></div></div></a></div>
</div>
<div id="image2" style="position:absolute; overflow:hidden; left:12px; top:771px; width:20px; height:160px; z-index:3"><img src="http://img15.dreamies.de/img/176/b/scowzpn7060.gif" alt="" border=0 width=20 height=160></div>
<div id="image3" style="position:absolute; overflow:hidden; left:12px; top:1265px; width:20px; height:160px; z-index:4"><img src="http://img15.dreamies.de/img/176/b/scowzpn7060.gif" alt="" border=0 width=20 height=160></div>
<div id="image4" style="position:absolute; overflow:hidden; left:1367px; top:771px; width:20px; height:160px; z-index:5"><img src="http://img15.dreamies.de/img/176/b/scowzpn7060.gif" alt="" border=0 width=20 height=160></div>
<div id="image5" style="position:absolute; overflow:hidden; left:1367px; top:1265px; width:20px; height:160px; z-index:6"><img src="http://img15.dreamies.de/img/176/b/scowzpn7060.gif" alt="" border=0 width=20 height=160></div>
<div id="iframe-container" style="position:absolute; overflow:hidden; left:45px; top:750px; width:1308px; height:700px; z-index:6"><iframe src="https://hepbuluruz.com.tr/sohbet.php?room_id=1" width="1308" height="700" frameborder="0"></iframe></div>
<div id="html3" style="position:absolute; overflow:hidden; left:453px; top:1544px; width:498px; height:61px; z-index:5">
<script type="text/javascript" src="https://topwebhost.gr/radio/mrp.js"></script>
<script type="text/javascript">
MRP.insert({'url':'','codec':'mp3','volume':100,'autoplay':true,'jsevents':true,'buffering':0,'title':'~RaDYo*Bozuk FM~','welcome':'HOSGELDiNiZ','wmode':'transparent','skin':'longtail','width':498,'height':61});
</script>
</div>
</div>
<script>
(function(){
const area = document.getElementById("efsaneScene");
if(!area) return;
const vividColors = ["#ff4d6d", "#ff9c42", "#ffeb3b", "#00f0ff", "#c16cff"];
const notes = ["♪", "♫", "♬", "♩"];
const logo = document.createElement("div");
logo.className = "miniLogo";
logo.innerHTML = " Bozuk FM ";
area.appendChild(logo);
for(let i=0; i<12; i++){
const item = document.createElement("div");
item.className = "fairyNote";
item.innerHTML = notes[Math.floor(Math.random() * notes.length)];
const color = vividColors[Math.floor(Math.random() * vividColors.length)];
const size = (25 + Math.random() * 20) + "px";
const animName = Math.random() > 0.5 ? "heavyGravityFall" : "heavyGravityFallRight";
const duration = (18 + Math.random() * 8) + "s";
const delay = (-Math.random() * 25) + "s";
item.style.cssText = "left:"+(Math.random()*100)+"%; font-size:"+size+"; color:"+color+"; text-shadow: 0 0 12px "+color+", 0 0 30px "+color+"; animation:"+animName+" "+duration+" "+delay+" linear infinite;";
area.appendChild(item);
}
for(let i=0; i<8; i++){
const glassHeart = document.createElement("div");
glassHeart.className = "glassBubbleHeart";
glassHeart.innerHTML = "❤";
const animName = Math.random() > 0.5 ? "heavyGravityFall" : "heavyGravityFallRight";
const duration = (22 + Math.random() * 10) + "s";
const delay = (-Math.random() * 30) + "s";
const size = (90 + Math.random() * 45) + "px";
glassHeart.style.cssText = "left:"+(Math.random()*88)+"%; font-size:"+size+"; animation:"+animName+" "+duration+" "+delay+" linear infinite;";
area.appendChild(glassHeart);
}
for(let i=0; i<20; i++){
const dust = document.createElement("div");
dust.className = "fairyDust";
const color = vividColors[Math.floor(Math.random() * vividColors.length)];
const xMove = (-50 + Math.random() * 100) + "px";
const duration = (12 + Math.random() * 6) + "s";
const delay = (-Math.random() * 20) + "s";
dust.style.cssText = "left:"+(Math.random()*100)+"%; top:-20px; background:"+color+"; box-shadow: 0 0 10px "+color+", 0 0 20px "+color+"; --xMove:"+xMove+"; animation-duration:"+duration+"; animation-delay:"+delay+";";
area.appendChild(dust);
}
})();
(function(){
const updateDeckClock=()=>{
const now=new Date();
const t=now.toLocaleTimeString('tr-TR',{hour12:false});
document.querySelectorAll('.deck-clock').forEach(el=>el.textContent=t);
};
setInterval(updateDeckClock,1000);
updateDeckClock();
})();
(function(){
const scaleContainer = () => {
const container = document.getElementById("container");
if(!container) return;
const winWidth = window.innerWidth;
const baseWidth = 1400;
const baseHeight = 1800;
if(winWidth < baseWidth){
const scale = winWidth / baseWidth;
container.style.transform = "scale(" + scale + ")";
container.style.margin = "0 auto";
document.body.style.height = (baseHeight * scale) + "px";
} else {
container.style.transform = "";
container.style.margin = "0 auto";
document.body.style.height = "auto";
}
};
window.addEventListener("resize", scaleContainer);
window.addEventListener("load", scaleContainer);
scaleContainer();
})();
</script>
</body>
</html>
Demo ÖNIZLEME (https://flatcast.forum/b)