iPhone Ultra Simulator

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>iPhone Ultra Simulator</title>
<style>
*{box-sizing:border-box}
body{
  margin:0;background:#111;color:white;
  font-family:-apple-system,BlinkMacSystemFont,Arial;
  display:flex;justify-content:center;align-items:center;
  min-height:100vh
}
.phone{
  width:min(360px,95vw);height:720px;max-height:95vh;
  border:7px solid #555;border-radius:48px;
  overflow:hidden;position:relative;
  background:linear-gradient(145deg,#164a82,#9b68d5,#f3a5bb);
  box-shadow:0 0 35px #000
}
.status{
  height:48px;padding:15px 25px;
  display:flex;justify-content:space-between;
  font-size:13px;font-weight:bold
}
.island{
  position:absolute;top:10px;left:50%;
  transform:translateX(-50%);
  width:105px;height:27px;border-radius:30px;background:#000
}
.screen{padding:20px;height:calc(100% - 100px)}
.clock{text-align:center;font-size:55px;font-weight:200;margin-top:20px}
.date{text-align:center;font-size:16px}
.apps{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:20px 10px;margin-top:50px
}
.app{text-align:center;font-size:12px;cursor:pointer}
.icon{
  width:57px;height:57px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:29px;margin:auto auto 6px;
  background:#ffffff30;backdrop-filter:blur(12px);
  border:1px solid #ffffff40
}
.dock{
  position:absolute;bottom:14px;left:12px;right:12px;
  height:82px;border-radius:27px;background:#ffffff35;
  display:flex;justify-content:space-around;align-items:center;
  backdrop-filter:blur(15px)
}
.dock .icon{margin:0}
.panel{
  display:none;position:absolute;inset:0;
  background:#f4f4f8;color:#111;padding:55px 20px 25px;
  overflow:auto
}
.panel h2{margin-top:10px}
.panel button,.panel input{
  font-size:16px;padding:12px;border-radius:12px;
  border:0;margin:5px 0;max-width:100%
}
.panel button{background:#267cff;color:white;cursor:pointer}
.back{background:#ddd!important;color:#111!important}
.row{background:white;padding:15px;border-radius:12px;margin:8px 0}
.home{
  position:absolute;bottom:5px;left:50%;
  transform:translateX(-50%);
  width:110px;height:5px;border-radius:8px;background:#fff
}
</style>
</head>
<body>
<div class="phone">
  <div class="status"><span id="smalltime">9:41</span><span>●●●  Wi-Fi  ▰</span></div>
  <div class="island"></div>

  <div class="screen" id="homeScreen">
    <div class="clock" id="clock">9:41</div>
    <div class="date" id="date">iPhone Ultra</div>

    <div class="apps">
      <div class="app" onclick="openApp('Telefon')"><div class="icon">📞</div>Telefon</div>
      <div class="app" onclick="openApp('Mesajlar')"><div class="icon">💬</div>Mesajlar</div>
      <div class="app" onclick="openApp('Safari')"><div class="icon">🧭</div>Safari</div>
      <div class="app" onclick="openApp('Kamera')"><div class="icon">📷</div>Kamera</div>
      <div class="app" onclick="openApp('Fotoğraflar')"><div class="icon">🌄</div>Fotoğraflar</div>
      <div class="app" onclick="openApp('Müzik')"><div class="icon">🎵</div>Müzik</div>
      <div class="app" onclick="openApp('Ayarlar')"><div class="icon">⚙️</div>Ayarlar</div>
      <div class="app" onclick="openApp('Hesap Makinesi')"><div class="icon">🧮</div>Hesap</div>
      <div class="app" onclick="openApp('Notlar')"><div class="icon">📝</div>Notlar</div>
      <div class="app" onclick="openApp('Oyunlar')"><div class="icon">🎮</div>Oyunlar</div>
      <div class="app" onclick="openApp('Hava Durumu')"><div class="icon">🌤️</div>Hava</div>
      <div class="app" onclick="openApp('Saat')"><div class="icon">⏰</div>Saat</div>
    </div>
  </div>

  <div class="dock">
    <div class="app" onclick="openApp('Telefon')"><div class="icon">📞</div></div>
    <div class="app" onclick="openApp('Safari')"><div class="icon">🧭</div></div>
    <div class="app" onclick="openApp('Mesajlar')"><div class="icon">💬</div></div>
    <div class="app" onclick="openApp('Müzik')"><div class="icon">🎵</div></div>
  </div>

  <div class="panel" id="panel">
    <button class="back" onclick="goHome()">‹ Ana Ekran</button>
    <h2 id="title"></h2>
    <div id="content"></div>
  </div>
  <div class="home" onclick="goHome()"></div>
</div>

<script>
const panel=document.getElementById('panel');
const content=document.getElementById('content');
const title=document.getElementById('title');

function openApp(name){
  panel.style.display='block';
  title.textContent=name;
  content.innerHTML='';

  if(name==='Telefon'){
    content.innerHTML=`
      <div class="row">Numara: <input id="number" placeholder="Numara gir" inputmode="tel"></div>
      <button onclick="alert('Bu bir arama simülasyonudur: '+document.getElementById('number').value)">📞 Ara</button>
      <p>Gerçek arama yapmaz.</p>`;
  }else if(name==='Mesajlar'){
    content.innerHTML=`
      <div class="row">Mesajlar — Demo</div>
      <input id="msg" placeholder="Mesajını yaz">
      <button onclick="sendMessage()">Gönder</button>
      <div id="messages"></div>`;
  }else if(name==='Safari'){
    content.innerHTML=`
      <p>İnternet simülatörü</p>
      <input id="url" placeholder="example.com">
      <button onclick="browse()">Git</button>
      <div id="webresult" class="row">Bir adres gir.</div>`;
  }else if(name==='Kamera'){
    content.innerHTML=`
      <div style="height:250px;background:#222;border-radius:20px;display:grid;place-items:center;font-size:65px">📷</div>
      <button onclick="alert('Demo fotoğraf çekildi!')">📸 Fotoğraf Çek</button>
      <p>Bu kamera demo modundadır.</p>`;
  }else if(name==='Fotoğraflar'){
    content.innerHTML='<div class="row">🌅 Manzara</div><div class="row">🌃 Gece</div><div class="row">🌈 Renkler</div>';
  }else if(name==='Müzik'){
    content.innerHTML=`
      <div style="font-size:80px;text-align:center">🎵</div>
      <div class="row">Şimdi Çalıyor — Demo</div>
      <button onclick="music()">▶️ / ⏸️ Oynat / Duraklat</button>
      <p id="musicstatus">Müzik simülasyonu hazır.</p>`;
  }else if(name==='Ayarlar'){
    content.innerHTML=`
      <div class="row">📱 iPhone Ultra</div>
      <div class="row">🔋 Pil: <span id="battery">100%</span></div>
      <div class="row">🎨 Duvar Kâğıdı</div>
      <button onclick="wallpaper(1)">Mavi</button>
      <button onclick="wallpaper(2)">Pembe</button>
      <button onclick="wallpaper(3)">Mor</button>
      <button onclick="wallpaper(4)">Gece</button>`;
  }else if(name==='Hesap Makinesi'){
    content.innerHTML=`
      <input id="calc" placeholder="Örn: 12*(3+2)">
      <button onclick="calculate()">= Hesapla</button>
      <div id="answer" class="row">Sonuç burada</div>`;
  }else if(name==='Notlar'){
    content.innerHTML=`
      <textarea id="note" placeholder="Notunu yaz..." style="width:100%;height:180px;border-radius:12px;padding:12px"></textarea>
      <button onclick="saveNote()">Notu Kaydet</button>
      <p id="notestatus"></p>`;
  }else if(name==='Oyunlar'){
    content.innerHTML=`
      <div class="row">🎮 Mini oyun merkezi</div>
      <button onclick="guess()">Sayı Tahmin Oyunu</button>
      <p id="game"></p>`;
  }else if(name==='Hava Durumu'){
    content.innerHTML='<div style="font-size:60px">🌤️</div><h3>24°C</h3><p>Örnek hava durumu — canlı veri değil.</p>';
  }else if(name==='Saat'){
    content.innerHTML='<div style="font-size:50px" id="appclock"></div><p>Canlı saat</p>';
    updateClock();
  }
}
function goHome(){panel.style.display='none'}
function sendMessage(){
 const input=document.getElementById('msg');
 const box=document.getElementById('messages');
 if(input.value.trim()){
  const row=document.createElement('div');row.className='row';
  row.textContent='🟦 '+input.value;
  box.appendChild(row);input.value='';
 }
}
function browse(){
 const value=document.getElementById('url').value.trim();
 const box=document.getElementById('webresult');
 if(!value){box.textContent='Önce bir adres yaz.';return}
 box.innerHTML='';
 const a=document.createElement('a');
 a.href=/^https?:\/\//i.test(value)?value:'https://'+value;
 a.target='_blank';a.rel='noopener noreferrer';
 a.textContent=value+' adresini yeni sekmede aç';
 box.appendChild(a);
}
function music(){
 const el=document.getElementById('musicstatus');
 el.textContent=el.textContent.includes('Çalıyor')?'Duraklatıldı.':'Çalıyor (demo).';
}
function wallpaper(n){
 const b=document.querySelector('.phone');
 const backgrounds={
  1:'linear-gradient(145deg,#164a82,#59b6e9)',
  2:'linear-gradient(145deg,#ff8ca8,#f7c6e6)',
  3:'linear-gradient(145deg,#46217d,#b36be0)',
  4:'linear-gradient(145deg,#000,#24364f)'
 };
 b.style.background=backgrounds[n];
}
function calculate(){
 const s=document.getElementById('calc').value.trim();
 const out=document.getElementById('answer');
 if(!/^[0-9+\-*/().%\s]+$/.test(s)){out.textContent='Geçerli bir matematik işlemi gir.';return}
 try{
  const result=Function('"use strict";return ('+s+')')();
  out.textContent=Number.isFinite(result)?'Sonuç: '+result:'İşlem hesaplanamadı.';
 }catch(e){out.textContent='İşlem hatalı.'}
}
function saveNote(){
 document.getElementById('notestatus').textContent=
 'Not bu oturum için hazır. Sayfa kapanınca silinebilir.';
}
function guess(){
 const n=Math.floor(Math.random()*10)+1;
 const g=prompt('1 ile 10 arasında sayı tahmin et!');
 if(g===null)return;
 document.getElementById('game').textContent=
 Number(g)===n?'🎉 Bildin!':`Bu kez olmadı. Sayı ${n} idi.`;
}
function updateClock(){
 const d=new Date();
 const t=d.toLocaleTimeString('tr-TR',{hour:'2-digit',minute:'2-digit'});
 document.getElementById('clock').textContent=t;
 document.getElementById('smalltime').textContent=t;
 document.getElementById('date').textContent=
 d.toLocaleDateString('tr-TR',{weekday:'long',day:'numeric',month:'long'});
 const appclock=document.getElementById('appclock');
 if(appclock)appclock.textContent=t;
}
setInterval(updateClock,1000);
updateClock();
</script>
</body>
</html>