Koko Ultra Simulator 2034

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Koko Ultra Simulator 2034</title>
<style>
*{box-sizing:border-box}
:root{--accent:#66aaff}
body{margin:0;font-family:Arial,sans-serif;background:#0877b9;color:white;overflow:hidden}
button{font:inherit;cursor:pointer}
#desktop{height:100dvh;width:100vw;position:relative;overflow:hidden;background:linear-gradient(135deg,#063b83,#0086c9 50%,#10265c)}
.wallpaper{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.orb{position:absolute;width:65vw;height:65vw;max-width:650px;max-height:650px;border-radius:50%;background:linear-gradient(135deg,#00e5ff88,#654cff44);right:-10%;top:8%;box-shadow:0 0 120px #00d9ff55}
.orb:after{content:"";position:absolute;inset:14%;border:3px solid #ffffff55;border-radius:50%;transform:rotateX(65deg) rotate(-20deg)}
.brand{position:absolute;right:6%;bottom:12%;font-size:clamp(30px,7vw,80px);font-weight:900;letter-spacing:-5px;opacity:.2;pointer-events:none}
#icons{position:absolute;top:12px;left:10px;display:grid;grid-template-columns:76px;gap:8px}
.icon{width:72px;min-height:76px;border:1px solid transparent;background:transparent;color:white;border-radius:8px;padding:6px 3px;text-align:center;font-size:12px;text-shadow:0 1px 4px #000;display:flex;flex-direction:column;align-items:center;gap:5px}
.icon:hover,.icon:focus{background:#ffffff22;border-color:#ffffff55}
.emoji{font-size:30px;line-height:34px}
#taskbar{position:absolute;bottom:0;left:0;right:0;height:53px;background:#102440d9;backdrop-filter:blur(20px);display:flex;align-items:center;padding:5px 10px;gap:7px;border-top:1px solid #ffffff44;z-index:1000}
.start{background:#2585e8;border:0;border-radius:9px;color:white;padding:10px 13px;font-weight:bold}
.taskbtn{background:#ffffff16;border:1px solid #ffffff22;color:white;padding:9px 12px;border-radius:7px}
#clock{margin-left:auto;text-align:right;font-size:12px;line-height:1.6;white-space:nowrap}
#startmenu{display:none;position:absolute;bottom:60px;left:8px;width:min(350px,94vw);height:min(480px,75vh);background:#14243bf5;border:1px solid #ffffff55;border-radius:16px;padding:18px;z-index:1001;box-shadow:0 12px 50px #0007;overflow:auto}
#startmenu h2{margin:0 0 12px}
.search{width:100%;padding:12px;border-radius:9px;border:1px solid #ffffff44;background:#ffffff12;color:white;margin-bottom:14px}
.appgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.appitem{background:#ffffff10;border:1px solid #ffffff15;color:white;border-radius:10px;padding:14px 3px;font-size:12px;display:flex;flex-direction:column;align-items:center;gap:8px}
.appitem .emoji{font-size:27px}
.window{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,94vw);height:min(550px,78vh);min-height:250px;background:#f4f7fb;color:#172033;border:1px solid #ffffffaa;border-radius:12px;box-shadow:0 22px 70px #00132b88;overflow:hidden;display:flex;flex-direction:column}
.titlebar{height:42px;flex-shrink:0;display:flex;align-items:center;padding:0 10px;gap:8px;background:#e7edf6;cursor:grab;user-select:none}
.titlebar strong{font-size:13px;flex:1}
.wincontrol{border:0;border-radius:6px;width:29px;height:27px;background:#d7dfec;color:#15233b}
.wincontrol.close{background:#e74b59;color:white}
.content{flex:1;min-height:0;overflow:auto;padding:16px}
.content button:not(.wincontrol){border:0;border-radius:8px;background:#147ce5;color:white;padding:10px 13px;margin:4px}
.content button.secondary{background:#dce8f8;color:#1b3a62}
.status{font-size:12px;color:#52657e}
.phone{width:min(300px,90%);height:430px;max-height:95%;margin:auto;background:#080b14;border:5px solid #343a49;border-radius:34px;padding:9px;box-shadow:0 10px 35px #0004;display:flex;flex-direction:column;overflow:hidden}
.phone-screen{position:relative;flex:1;border-radius:23px;overflow:hidden;background:linear-gradient(150deg,#142f6e,#8a52d4 65%,#f28cce);color:white;padding:18px 10px}
.phone-notch{width:75px;height:18px;border-radius:12px;background:#080b14;margin:-13px auto 13px;position:relative;z-index:2}
.phone-head{display:flex;justify-content:space-between;font-size:11px}
.phone-clock{font-size:40px;font-weight:bold;margin:28px 0 12px}
.phone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px 5px;margin-top:24px}
.phone-app{border:0;background:#ffffff20;color:white;border-radius:12px;padding:10px 2px;font-size:10px;display:flex;flex-direction:column;gap:5px;align-items:center}
.phone-app span{font-size:24px}
.phone-dock{display:flex;justify-content:space-around;background:#ffffff22;padding:9px 0;border-radius:14px;margin-top:20px}
.phone-dock button{background:transparent!important;padding:2px!important;font-size:22px}
.desktop-note{font-size:12px;color:#60718b}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:12px}
.card{border:1px solid #dce4ef;border-radius:12px;padding:14px;background:white}
.card .emoji{font-size:35px;margin-bottom:7px}
.card h3{margin:5px 0;font-size:15px}
.card p{font-size:12px;color:#64748b}
.gdwrap{background:#0a122b;border-radius:12px;padding:10px;color:white}
#gdcanvas{display:block;width:100%;height:240px;border-radius:8px;background:#111c3c;touch-action:manipulation}
.gdinfo{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0}
@media(max-width:500px){#icons{grid-template-columns:68px}.icon{width:65px;font-size:11px}.brand{letter-spacing:-2px;bottom:13%}.window{width:96vw;height:77vh}.content{padding:11px}#taskbar{gap:5px;padding:4px 6px}.taskbtn{padding:9px 7px}.start{padding:9px}}
</style>
</head>
<body>
<div id="desktop">
 <div class="wallpaper"><div class="orb"></div></div>
 <div class="brand">2034</div>
 <div id="icons">
  <button class="icon" data-app="pc"><span class="emoji">🖥️</span>Bu Bilgisayar</button>
  <button class="icon" data-app="store"><span class="emoji">🛍️</span>Uygulamalar</button>
  <button class="icon" data-app="iphone"><span class="emoji">📱</span>iPhone 20</button>
  <button class="icon" data-app="android"><span class="emoji">🤖</span>Android 26</button>
  <button class="icon" data-app="redmi"><span class="emoji">📲</span>Redmi Note</button>
  <button class="icon" data-app="gd"><span class="emoji">💀</span>Geometry Dash</button>
 </div>
 <div id="startmenu">
  <h2>🪟 Koko Başlat</h2>
  <input class="search" id="appsearch" placeholder="Uygulama ara...">
  <div class="appgrid" id="appgrid"></div>
  <p class="desktop-note">Koko Ultra Simulator · 2034</p>
 </div>
 <div id="taskbar">
  <button class="start" id="startbutton">🪟 Başlat</button>
  <button class="taskbtn" data-app="pc">🖥️</button>
  <button class="taskbtn" data-app="store">🛍️</button>
  <button class="taskbtn" data-app="gd">🎮</button>
  <div id="clock"><span id="time">19:34</span><br><span>18.10.2034</span></div>
 </div>
</div>
<script>
const desktop=document.getElementById('desktop');
const menu=document.getElementById('startmenu');
const apps=[
{id:'pc',icon:'🖥️',name:'Bu Bilgisayar'},
{id:'store',icon:'🛍️',name:'Uygulama Merkezi'},
{id:'iphone',icon:'📱',name:'iPhone 20 Simülatörü'},
{id:'android',icon:'🤖',name:'Android 26 Simülatörü'},
{id:'redmi',icon:'📲',name:'Redmi Note 13 Pro'},
{id:'gd',icon:'💀',name:'Geometry Dash'},
{id:'settings',icon:'⚙️',name:'Ayarlar'},
{id:'browser',icon:'🌐',name:'Mini Tarayıcı'},
{id:'about',icon:'✨',name:'Hakkında'}
];
let z=20,winCount=0,gdTimer=null,gdState=null;
function openApp(id){
 menu.style.display='none';
 const old=document.querySelector('.window[data-id="'+id+'"]');
 if(old){old.style.zIndex=++z;return}
 const app=apps.find(a=>a.id===id)||apps[0];
 const win=document.createElement('section');
 win.className='window';win.dataset.id=id;win.style.zIndex=++z;
 win.innerHTML=`<div class="titlebar"><span>${app.icon}</span><strong>${app.name}</strong><button class="wincontrol minimize" title="Küçült">—</button><button class="wincontrol maximize" title="Ekranı büyüt">□</button><button class="wincontrol close" title="Kapat">×</button></div><div class="content"></div>`;
 desktop.appendChild(win);winCount++;
 const content=win.querySelector('.content');
 content.innerHTML=renderApp(id);
 win.querySelector('.close').onclick=()=>{if(id==='gd')stopGD();win.remove()};
 win.querySelector('.minimize').onclick=()=>win.style.display='none';
 win.querySelector('.maximize').onclick=()=>{
 if(win.dataset.max==='1'){win.style.width='min(760px,94vw)';win.style.height='min(550px,78vh)';win.style.left='50%';win.style.top='50%';win.style.transform='translate(-50%,-50%)';win.dataset.max='0'}
 else{win.style.left='0';win.style.top='0';win.style.transform='none';win.style.width='100%';win.style.height='calc(100% - 53px)';win.dataset.max='1'}
 };
 win.addEventListener('pointerdown',()=>win.style.zIndex=++z);
 const bar=win.querySelector('.titlebar');
 bar.addEventListener('pointerdown',e=>{
 if(e.target.closest('button')||win.dataset.max==='1')return;
 const rect=win.getBoundingClientRect();const ox=e.clientX-rect.left,oy=e.clientY-rect.top;
 win.style.transform='none';win.style.left=rect.left+'px';win.style.top=rect.top+'px';
 const move=ev=>{win.style.left=Math.max(0,Math.min(innerWidth-win.offsetWidth,ev.clientX-ox))+'px';win.style.top=Math.max(0,Math.min(innerHeight-65,ev.clientY-oy))+'px'};
 const up=()=>{window.removeEventListener('pointermove',move);window.removeEventListener('pointerup',up)};
 window.addEventListener('pointermove',move);window.addEventListener('pointerup',up);
 });
 if(id==='gd')initGD(win);
}
function renderApp(id){
if(id==='pc')return `<h2>🖥️ Bu Bilgisayar</h2><p>Windows 12 Pro · 2034 Simülasyonu</p><div class="cards">${[['💾','Yerel Disk (C:)','256 GB simüle edilmiş disk'],['📁','Belgeler','Örnek belgeler'],['🖼️','Resimler','Örnek resim galerisi'],['🎮','Oyunlar','Geometry Dash ve diğerleri']].map(c=>`<div class="card"><div class="emoji">${c[0]}</div><h3>${c[1]}</h3><p>${c[2]}</p></div>`).join('')}</div><p class="desktop-note">Bu, tarayıcıda çalışan bir masaüstü simülatörüdür.</p>`;
if(id==='store')return `<h2>🛍️ Uygulama Merkezi</h2><p>Uygulama seç ve aç!</p><div class="cards">${apps.filter(a=>!['store'].includes(a.id)).map(a=>`<div class="card"><div class="emoji">${a.icon}</div><h3>${a.name}</h3><button data-open="${a.id}">Aç</button></div>`).join('')}</div>`;
if(id==='iphone')return phoneApp('iPhone 20 Ultra','🍎','iOS 30 konsept simülatörü','linear-gradient(145deg,#13172b,#4b5f98,#d9a6ce)');
if(id==='android')return phoneApp('Android 26','🤖','Gelecek Android konsepti','linear-gradient(145deg,#063f31,#168d70,#c0e9b1)');
if(id==='redmi')return phoneApp('Redmi Note 13 Pro','📲','Cihazın hayalî masaüstü simülasyonu','linear-gradient(145deg,#1e3166,#287ebd,#4fd5dc)');
if(id==='settings')return `<h2>⚙️ Ayarlar</h2><div class="card"><h3>🖥️ Görünüm</h3><p>Duvar kâğıdı ve masaüstü seçenekleri.</p><button data-action="wall">Duvar kâğıdını değiştir</button></div><div class="card"><h3>🔊 Ses</h3><p>Simülatör sesi için tarayıcı ayarlarını kullan.</p><button data-action="sound">Deneme sesi</button></div><div class="card"><h3>ℹ️ Sistem</h3><p>Windows 12 Pro · 2034 (kurgu simülasyonu)</p></div>`;
if(id==='browser')return `<h2>🌐 Mini Tarayıcı</h2><p>Simülasyon içi mini başlangıç sayfası.</p><input id="searchinput" class="search" style="background:#e7edf6;color:#172033" placeholder="Bir şey yaz..."><button data-action="search">Ara</button><div id="searchresult"></div><p class="desktop-note">Bu mini tarayıcı gerçek internete bağlanmaz.</p>`;
if(id==='about')return `<h2>✨ Koko Ultra Simulator</h2><p>Windows tarzı masaüstü ve telefon simülatörleri.</p><p>Tek HTML dosyası · Dokunmatik uyumlu · Çevrimdışı mini oyun</p><p class="desktop-note">Gerçek Windows, iOS veya Android işletim sistemlerini kurmaz.</p>`;
if(id==='gd')return `<h2>💀 Geometry Dash Mini</h2><p>Engellerin üzerinden atla! Dokun veya boşluk tuşuna bas.</p><div class="gdwrap"><canvas id="gdcanvas" width="640" height="240"></canvas><div class="gdinfo"><span id="gdscore">Skor: 0</span><span id="gdbest">Rekor: 0</span><button data-action="jump">⬆️ ZIPLA!</button><button data-action="restart">🔄 Yeniden</button></div><p id="gdmessage">Başlamak için ekrana dokun!</p></div>`;
return `<h2>Uygulama</h2><p>Hoş geldin!</p>`;
}
function phoneApp(title,icon,subtitle,bg){
return `<div style="height:100%;display:flex;flex-direction:column;align-items:center;gap:8px"><div class="phone"><div class="phone-screen" style="background:${bg}"><div class="phone-head"><span>9:41</span><span>●●● ▰</span></div><div class="phone-notch"></div><div style="font-size:12px;opacity:.9">${subtitle}</div><div class="phone-clock" id="phoneclock">09:41</div><div id="phoneview"><div style="font-size:12px">Pazar · Güzel bir gün!</div><div class="phone-grid">${[['📞','Telefon'],['💬','Mesajlar'],['📷','Kamera'],['🎮','Oyunlar'],['⚙️','Ayarlar'],['🌐','Tarayıcı']].map(a=>`<button class="phone-app" data-phone="${a[1]}"><span>${a[0]}</span>${a[1]}</button>`).join('')}</div><div class="phone-dock"><button data-phone="Telefon">📞</button><button data-phone="Mesajlar">💬</button><button data-phone="Kamera">📷</button><button data-phone="Tarayıcı">🌐</button></div></div></div></div><p class="desktop-note">${icon} ${title} · Etkileşimli konsept simülatörü</p></div>`;
}
document.addEventListener('click',e=>{
const icon=e.target.closest('[data-app]');if(icon){openApp(icon.dataset.app);return}
const open=e.target.closest('[data-open]');if(open){openApp(open.dataset.open);return}
const phone=e.target.closest('[data-phone]');if(phone){const box=phone.closest('.phone-screen').querySelector('#phoneview');const name=phone.dataset.phone;box.innerHTML=`<button data-phone="Ana Ekran" class="secondary">← Ana Ekran</button><h2>${name==='Ana Ekran'?'Ana Ekran':name}</h2><p>${({'Telefon':'📞 Demo telefon arayüzü. Gerçek arama yapmaz.','Mesajlar':'💬 Örnek mesajlar. Gerçek mesaj göndermez.','Kamera':'📷 Kamera uygulaması konsepti.','Oyunlar':'🎮 Oyun merkezine hoş geldin!','Ayarlar':'⚙️ Simülasyon ayarları.','Tarayıcı':'🌐 Mini tarayıcı ekranı.'})[name]||'Telefon ana ekranı'}</p>${name==='Ana Ekran'?'<p>Uygulamalarını seç!</p>':''}`;return}
const action=e.target.closest('[data-action]');if(action){const a=action.dataset.action;if(a==='wall'){document.querySelector('.orb').style.background='linear-gradient(135deg,#ff00cc88,#00ffcc55)';document.querySelector('.brand').textContent='ULTRA'}if(a==='sound'){try{const ac=new AudioContext(),o=ac.createOscillator(),g=ac.createGain();o.connect(g);g.connect(ac.destination);o.frequency.value=660;g.gain.value=.05;o.start();o.stop(ac.currentTime+.15)}catch(_){}}if(a==='search'){const input=document.getElementById('searchinput');const result=document.getElementById('searchresult');if(input&&result)result.innerHTML='<p>🔎 "'+escapeHTML(input.value)+'" araması bu çevrimdışı simülasyonda gösterilemiyor.</p>'}if(a==='jump')jumpGD();if(a==='restart')resetGD();return}
});
function escapeHTML(s){return String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]))}
document.getElementById('startbutton').onclick=()=>menu.style.display=menu.style.display==='block'?'none':'block';
function renderMenu(filter=''){document.getElementById('appgrid').innerHTML=apps.filter(a=>a.name.toLowerCase().includes(filter.toLowerCase())).map(a=>`<button class="appitem" data-app="${a.id}"><span class="emoji">${a.icon}</span>${a.name}</button>`).join('')}
document.getElementById('appsearch').addEventListener('input',e=>renderMenu(e.target.value));
renderMenu();
function tick(){const d=new Date();document.getElementById('time').textContent=d.toLocaleTimeString('tr-TR',{hour:'2-digit',minute:'2-digit'});const p=document.getElementById('phoneclock');if(p)p.textContent=d.toLocaleTimeString('tr-TR',{hour:'2-digit',minute:'2-digit'})}
setInterval(tick,1000);tick();
function initGD(win){
const canvas=win.querySelector('#gdcanvas'),ctx=canvas.getContext('2d');
gdState={win,canvas,ctx,x:55,y:180,vy:0,ground:190,obstacles:[],score:0,best:0,alive:false,started:false,last:0};
resetGD();
function frame(t){if(!gdState||gdState.win!==win)return;const s=gdState;const dt=Math.min(.03,(t-s.last)/1000||.016);s.last=t;
drawGD(s,dt);gdTimer=requestAnimationFrame(frame)}
gdTimer=requestAnimationFrame(frame);
}
function resetGD(){if(!gdState)return;const s=gdState;s.x=55;s.y=180;s.vy=0;s.obstacles=[];s.score=0;s.alive=true;s.started=true;s.last=0;const m=s.win.querySelector('#gdmessage');if(m)m.textContent='Haydi! Engellerden kaç!';}
function stopGD(){if(gdTimer)cancelAnimationFrame(gdTimer);gdTimer=null;if(gdState&&gdState.win===document.querySelector('.window[data-id="gd"]'))gdState=null}
function jumpGD(){if(!gdState||!gdState.alive)return;if(gdState.y>=gdState.ground-20)gdState.vy=-370;else if(gdState.y>gdState.ground-55)gdState.vy=-370}
function drawGD(s,dt){
const c=s.canvas,ctx=s.ctx,w=c.width,h=c.height;
ctx.clearRect(0,0,w,h);ctx.fillStyle='#101b3d';ctx.fillRect(0,0,w,h);
ctx.strokeStyle='#253969';ctx.lineWidth=1;
for(let x=0;x<w;x+=32){ctx.beginPath();ctx.moveTo(x,0);ctx.lineTo(x,h);ctx.stroke()}
for(let y=0;y<h;y+=32){ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(w,y);ctx.stroke()}
ctx.fillStyle='#24d5f7';ctx.fillRect(0,205,w,35);
ctx.fillStyle='#172b4b';ctx.fillRect(0,210,w,30);
if(s.alive){
s.vy+=850*dt;s.y+=s.vy*dt;
if(s.y>s.ground){s.y=s.ground;s.vy=0}
if(Math.random()<.025)s.obstacles.push({x:w+10,size:22+Math.random()*16});
s.obstacles.forEach(o=>o.x-=210*dt);
s.obstacles=s.obstacles.filter(o=>o.x>-50);
s.score+=dt*10;
for(const o of s.obstacles){if(o.x<s.x+25&&o.x+o.size>s.x&&s.y+22>205-o.size){s.alive=false;const m=s.win.querySelector('#gdmessage');if(m)m.textContent='Oyun bitti! Yeniden düğmesine bas.'}}
}
ctx.fillStyle='#ffd740';ctx.fillRect(s.x,s.y,24,24);
ctx.strokeStyle='#fff';ctx.lineWidth=2;ctx.strokeRect(s.x+5,s.y+5,14,14);
ctx.fillStyle='#ff5277';s.obstacles.forEach(o=>{ctx.beginPath();ctx.moveTo(o.x,205);ctx.lineTo(o.x+o.size/2,205-o.size);ctx.lineTo(o.x+o.size,205);ctx.closePath();ctx.fill()});
const score=s.win.querySelector('#gdscore');if(score)score.textContent='Skor: '+Math.floor(s.score);
}
document.addEventListener('keydown',e=>{if(e.code==='Space'){const w=document.querySelector('.window[data-id="gd"]');if(w&&w.style.display!=='none'){e.preventDefault();jumpGD()}}});
document.addEventListener('pointerdown',e=>{if(e.target.id==='gdcanvas')jumpGD()});
</script>
</body>
</html>