iPhone Ultra × Windows 12 SUPER

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>iPhone Ultra × Windows 12 SUPER</title>
<style>
*{box-sizing:border-box}
body{
 margin:0;color:white;font-family:Arial,sans-serif;
 background:radial-gradient(circle at top left,#174c99,transparent 45%),
 radial-gradient(circle at bottom right,#5c247e,transparent 45%),#080d1c;
 min-height:100vh
}
header{
 padding:20px;text-align:center;background:#080d1ccc;
 border-bottom:1px solid #ffffff25;position:sticky;top:0;z-index:10;
 backdrop-filter:blur(15px)
}
header h1{margin:0;font-size:clamp(21px,4vw,38px)}
header p{color:#b9d8ff;margin-bottom:0}
nav{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:20px}
button{cursor:pointer;font:inherit}
nav button,.btn{
 border:1px solid #ffffff30;color:white;background:#ffffff12;
 border-radius:12px;padding:11px 16px;font-weight:bold
}
nav button.active,.btn.primary{
 background:linear-gradient(120deg,#268aff,#915bff)
}
nav button:hover,.btn:hover{filter:brightness(1.2)}
.layout{
 width:min(1250px,96%);margin:auto;padding:5px 0 35px;
 display:grid;grid-template-columns:1fr 1.25fr;gap:20px
}
.card{
 background:#ffffff0c;border:1px solid #ffffff25;
 border-radius:25px;padding:17px;min-width:0;
 box-shadow:0 20px 60px #0003
}
.card h2{font-size:19px;margin:0 0 15px}
.phone{
 max-width:330px;margin:auto;padding:8px;border-radius:37px;
 background:linear-gradient(135deg,#8798b8,#101526,#65718b);
 border:2px solid #9caed0
}
.phoneScreen{
 min-height:550px;border-radius:30px;padding:15px;
 position:relative;overflow:hidden;
 background:linear-gradient(150deg,#152f77,#7350bb 55%,#ed91bb)
}
.island{
 background:#080910;width:95px;height:24px;border-radius:20px;
 position:absolute;top:7px;left:50%;transform:translateX(-50%)
}
.status{display:flex;justify-content:space-between;font-size:12px}
.clock{text-align:center;margin:32px 0 6px;font-size:57px;font-weight:300}
.date{text-align:center;font-size:13px;margin-bottom:28px}
.apps{
 display:grid;grid-template-columns:repeat(4,1fr);
 gap:20px 7px
}
.app{
 text-align:center;background:transparent;border:0;color:white;
 padding:0;min-width:0
}
.icon{
 display:grid;place-items:center;width:48px;height:48px;
 margin:auto auto 6px;border:1px solid #ffffff40;
 border-radius:15px;background:#ffffff30;font-size:24px;
 box-shadow:0 5px 15px #0003
}
.app small{font-size:10px}
.phoneWidget{
 margin-top:25px;background:#ffffff26;border:1px solid #ffffff35;
 border-radius:15px;padding:13px;font-size:12px
}
.dock{
 display:flex;justify-content:space-around;margin-top:15px;
 background:#ffffff30;padding:10px;border-radius:17px
}
.dock button{background:none;border:0;font-size:23px}
.pc{
 position:relative;overflow:hidden;height:550px;border-radius:15px;
 background:
 radial-gradient(ellipse at 55% 50%,#63d4ff 0,transparent 28%),
 radial-gradient(ellipse at 60% 55%,#8a5dff 0,transparent 38%),
 linear-gradient(140deg,#071d43,#125c9c,#352478)
}
.pcTop{
 display:flex;justify-content:space-between;padding:12px;
 font-size:12px;background:#06142c30
}
.desktop{
 display:grid;grid-template-columns:repeat(3,75px);
 gap:16px;padding:15px
}
.deskApp{
 border:0;background:transparent;color:white;
 text-shadow:0 2px 5px black;font-size:11px;
 display:flex;flex-direction:column;align-items:center;
 gap:7px;border-radius:8px;padding:7px
}
.deskApp:hover{background:#ffffff20}
.deskApp span{font-size:30px}
.wall{
 position:absolute;right:18px;top:125px;text-align:right;
 font-size:clamp(20px,3vw,35px);font-weight:bold;
 text-shadow:0 4px 15px #0005;pointer-events:none
}
.wall small{display:block;font-size:12px;font-weight:normal}
.taskbar{
 position:absolute;bottom:0;left:0;right:0;height:52px;
 display:flex;align-items:center;justify-content:center;gap:5px;
 background:#ddecffe8;backdrop-filter:blur(15px);color:#172943;
 padding:5px
}
.taskbar button{
 background:transparent;border:0;border-radius:8px;
 font-size:20px;width:37px;height:38px
}
.taskbar button:hover{background:white}
.taskbar .search{font-size:11px;width:95px}
.tray{position:absolute;right:8px;font-size:10px}
.controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.controls button{flex:1}
.transfer{
 margin-top:18px;padding:15px;border:1px solid #65baff50;
 border-radius:14px;background:#258bff15;color:#d7ecff;
 text-align:center;font-size:13px
}
footer{text-align:center;color:#9eacc6;padding:20px;font-size:12px}
.window{
 position:absolute;z-index:5;left:50%;top:48%;
 transform:translate(-50%,-50%);width:90%;max-width:390px;
 max-height:75%;overflow:auto;color:#162641;
 background:#edf5ffef;border:1px solid #ffffffb0;
 border-radius:16px;box-shadow:0 20px 60px #0008;
 backdrop-filter:blur(20px)
}
.winTitle{
 display:flex;align-items:center;justify-content:space-between;
 padding:12px;border-bottom:1px solid #c3d3e6;font-weight:bold
}
.winTitle button{
 border:0;border-radius:8px;padding:5px 9px;background:#d9e8fa
}
.winContent{padding:15px;font-size:13px;line-height:1.6}
.winContent button{
 color:#163154;background:#d9eaff;border:1px solid #abc9eb;
 padding:8px 12px;border-radius:9px;margin:4px
}
.winContent input,.winContent textarea{
 width:100%;padding:10px;border:1px solid #aec3df;
 border-radius:9px;font:inherit;margin:5px 0
}
.startMenu{
 position:absolute;z-index:6;bottom:58px;left:50%;
 transform:translateX(-50%);width:min(330px,94%);
 background:#edf5ffef;color:#172944;padding:15px;
 border-radius:17px;border:1px solid white;
 box-shadow:0 15px 50px #0008
}
.startMenu h3{margin:0 0 12px}
.startGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.startGrid button{
 border:0;border-radius:9px;padding:10px 3px;
 background:#d9eaff;font-size:11px;color:#193252
}
.startGrid span{display:block;font-size:23px;margin-bottom:5px}
.toast{
 position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
 background:#edf5ff;color:#142744;padding:13px 19px;
 border-radius:14px;box-shadow:0 8px 35px #0007;
 z-index:20;display:none;max-width:90%;font-size:13px
}
.toast.show{display:block}
@media(max-width:800px){
 .layout{grid-template-columns:1fr;width:94%}
 .card{padding:13px}
 .phoneScreen{min-height:530px}
 .pc{height:530px}
}
</style>
</head>
<body>

<header>
 <h1>🚀 iPhone Ultra × Windows 12</h1>
 <p>SUPER SIMULATOR · İKİ CİHAZ · TEK DÜNYA</p>
</header>

<nav>
 <button class="active" data-view="both">🌌 İkisini göster</button>
 <button data-view="phone">📱 iPhone Ultra</button>
 <button data-view="pc">💻 Windows 12</button>
</nav>

<main class="layout" id="layout">

<section class="card" id="phoneCard">
 <h2>📱 iPhone Ultra</h2>
 <div class="phone">
  <div class="phoneScreen" id="phoneScreen">
   <div class="island"></div>
   <div class="status">
    <span id="phoneStatusTime">9:41</span>
    <span>●●● ᯤ 🔋</span>
   </div>
   <div class="clock" id="phoneClock">9:41</div>
   <div class="date" id="phoneDate">Güzel bir gün ✨</div>
   <div class="apps" id="phoneApps"></div>
   <div class="phoneWidget">
    <b>✨ Akıllı Widget</b>
    <p>iPhone Ultra hazır!</p>
    <span>💻 Windows 12 bağlantısı kullanılabilir.</span>
   </div>
   <div class="dock">
    <button data-app="Telefon">📞</button>
    <button data-app="Mesajlar">💬</button>
    <button data-app="Safari">🧭</button>
    <button data-app="Müzik">🎵</button>
   </div>
   <div id="phoneWindowHost"></div>
  </div>
 </div>
 <div class="controls">
  <button class="btn primary" id="phoneAction">📁 Dosyalar</button>
  <button class="btn" id="sendToPc">➡️ PC'ye gönder</button>
 </div>
</section>

<section class="card" id="pcCard">
 <h2>💻 Windows 12</h2>
 <div class="pc" id="pcScreen">
  <div class="pcTop">
   <span>🪟 Windows 12</span>
   <span id="pcTopClock">9:41</span>
  </div>
  <div class="desktop" id="desktopIcons"></div>
  <div class="wall">
   WINDOWS 12
   <small>Yeni nesil deneyim.</small>
  </div>
  <div class="taskbar">
   <button id="startButton" title="Başlat">⊞</button>
   <button id="homeButton" title="Ana ekran">⌂</button>
   <button id="pcFiles" title="Dosyalar">📁</button>
   <button id="pcBrowser" title="Tarayıcı">🌐</button>
   <button class="search" id="taskSearch">⌕ Ara</button>
   <span class="tray" id="trayClock">ᯤ 🔊 9:41</span>
  </div>
  <div id="windowHost"></div>
 </div>
 <div class="controls">
  <button class="btn primary" id="pcAction">⊞ Başlat menüsü</button>
  <button class="btn" id="sendToPhone">⬅️ Telefona gönder</button>
 </div>
</section>

<div class="transfer" id="transferLog" style="grid-column:1/-1">
 🔗 Bağlantı hazır! Bir uygulamaya dokun veya dosya gönder.
</div>
</main>

<footer>
 Hayalindeki teknoloji dünyası ✨<br>
 Bu, gerçek işletim sistemi olmayan bir arayüz simülasyonudur.
</footer>

<div class="toast" id="toast"></div>

<script>
const phoneApps=[
 ['Fotoğraflar','🖼️'],['Kamera','📷'],
 ['Haritalar','🗺️'],['Hava Durumu','🌤️'],
 ['Takvim','📅'],['Notlar','📝'],
 ['Dosyalar','📁'],['Ayarlar','⚙️']
];

const pcApps=[
 ['Dosya Gezgini','📁'],['Tarayıcı','🌐'],
 ['Fotoğraflar','🖼️'],['Not Defteri','📝'],
 ['Mağaza','🛍️'],['Ayarlar','⚙️']
];

const $=id=>document.getElementById(id);
let toastTimer,transferCount=0;

function safe(s){
 return String(s).replace(/[&<>"']/g,c=>({
 '&':'&amp;','<':'&lt;','>':'&gt;',
 '"':'&quot;',"'":'&#39;'
 }[c]));
}

function toast(msg){
 $('toast').textContent=msg;
 $('toast').classList.add('show');
 clearTimeout(toastTimer);
 toastTimer=setTimeout(()=>$('toast').classList.remove('show'),2400);
}

$('phoneApps').innerHTML=phoneApps.map(([n,e])=>
 `<button class="app" data-app="${n}">
 <span class="icon">${e}</span><small>${n}</small></button>`
).join('');

$('desktopIcons').innerHTML=pcApps.map(([n,e])=>
 `<button class="deskApp" data-app="${n}">
 <span>${e}</span>${n}</button>`
).join('');

function openApp(name,device='pc'){
 const host=device==='phone'?$ ('phoneWindowHost'):$('windowHost');
 const other=device==='phone'?$ ('windowHost'):$('phoneWindowHost');
 other.innerHTML='';
 host.innerHTML='';

 let content={
 'Fotoğraflar':`
  <div style="font-size:35px">🌄 🏞️ 🌌</div>
  <p>Hayal galerinde 3 örnek fotoğraf var.</p>
  <button data-action="photo">✨ Yeni anı oluştur</button>`,
 'Kamera':`
  <div style="font-size:40px">📷</div>
  <p>Simüle kamera önizlemesi</p>
  <button data-action="snap">◎ Fotoğraf çek</button>`,
 'Haritalar':`
  <div style="font-size:35px">🗺️</div>
  <p>Hayal Adası · Merkez Meydan · Teknoloji Parkı</p>`,
 'Hava Durumu':`
  <div style="font-size:35px">🌤️ 22°</div>
  <p>Hayal şehrinde hava harika!</p>`,
 'Takvim':`
  <h3>EKİM 2026</h3>
  <p>Bugün: Küçük hayaller, büyük fikirler ✨</p>`,
 'Notlar':`
  <textarea id="noteText" placeholder="Hayalini buraya yaz..."></textarea>
  <button data-action="saveNote">📝 Notu kaydet</button>`,
 'Dosyalar':`
  <p>📁 Belgeler　 🖼️ Fotoğraflar　 🎵 Müzik</p>
  <p>Örnek simülasyon dosyaları.</p>
  <button data-action="sendFile">📤 Diğer cihaza gönder</button>`,
 'Ayarlar':`
  <p>Wi-Fi　🟢 Açık</p><p>Bluetooth　🟢 Açık</p>
  <p>Tema: Gece gökyüzü</p>
  <button data-action="theme">🎨 Temayı değiştir</button>`,
 'Tarayıcı':`
  <p>🌐 <b>Hayal Web</b></p>
  <input id="query" placeholder="Bir şey ara...">
  <button data-action="search">Ara</button>
  <p id="result">Demo tarayıcı hazır.</p>`,
 'Safari':`
  <p>🧭 <b>Safari konsepti</b></p>
  <input id="query" placeholder="Adres veya arama">
  <button data-action="search">Git</button>
  <p id="result">Örnek tarayıcı ekranı.</p>`,
 'Not Defteri':`
  <textarea id="noteText" placeholder="Bir şeyler yaz..."></textarea>
  <button data-action="saveNote">💾 Kaydet</button>`,
 'Mağaza':`
  <p>🛍️ <b>Mini Uygulama Mağazası</b></p>
  <p>🎨 Tema Stüdyosu　🎵 Müzik　🧩 Mini Oyunlar</p>
  <button data-action="install">＋ Uygulama ekle</button>`,
 'Mesajlar':`
  <p>💬 <b>Demo mesajlar</b></p>
  <p>Arkadaş: “Yeni simülatör harika!”</p>
  <input id="message" placeholder="Mesaj yaz...">
  <button data-action="message">Gönder</button>`,
 'Telefon':`
  <p style="font-size:30px">📞</p>
  <p>Simülasyon tuş takımı</p>
  ${['1','2','3','4','5','6','7','8','9','*','0','#']
   .map(n=>`<button>${n}</button>`).join('')}`,
 'Müzik':`
  <div style="font-size:35px">🎵</div>
  <p>Şimdi çalıyor: Hayal Dünyası</p>
  <button data-action="music">▶ Oynat / Duraklat</button>`
 };

 const body=content[name]||
 `<div style="font-size:30px">✨</div>
 <p>${safe(name)} açıldı!</p>
 <p>Bu uygulama simülasyon modunda.</p>`;

 host.innerHTML=`
  <div class="window">
   <div class="winTitle">
    <span>${device==='phone'?'📱':'🪟'} ${safe(name)}</span>
    <button data-close>✕</button>
   </div>
   <div class="winContent">${body}</div>
  </div>`;

 host.querySelector('[data-close]').onclick=()=>host.innerHTML='';

 host.querySelectorAll('[data-action]').forEach(b=>{
  b.onclick=()=>{
   const action=b.dataset.action;
   if(action==='sendFile') transfer(device==='phone'?'pc':'phone');
   if(action==='photo'||action==='snap') toast('📸 Simülasyon tamamlandı!');
   if(action==='theme'){
    $('phoneScreen').style.filter='hue-rotate(45deg)';
    toast('🎨 Yeni tema uygulandı!');
   }
   if(action==='saveNote') toast('📝 Not bu demo oturumu için kaydedildi!');
   if(action==='install') toast('✅ Örnek uygulama eklendi!');
   if(action==='music') toast('🎵 Demo müzik oynatıcı değiştirildi!');
   if(action==='message'){
    const v=$('message').value.trim();
    toast(v?'💬 Demo mesaj gönderildi!':'Önce mesaj yaz.');
   }
   if(action==='search'){
    const v=$('query').value.trim();
    $('result').textContent=v
     ?'“'+v+'” için demo araması yapıldı. Gerçek internete bağlanılmadı.'
     :'Aramak için bir kelime yaz.';
   }
  };
 });
}

document.body.addEventListener('click',e=>{
 const b=e.target.closest('[data-app]');
 if(!b)return;
 const phone=!!b.closest('#phoneCard');
 openApp(b.dataset.app,phone?'phone':'pc');
});

function transfer(to){
 transferCount++;
 const message=to==='pc'
  ?'📱 iPhone → Windows: HayalDosyası_'+transferCount+'.txt gönderildi!'
  :'💻 Windows → iPhone: HayalDosyası_'+transferCount+'.txt gönderildi!';
 $('transferLog').textContent='🔗 '+message;
 toast(message);
}

$('sendToPc').onclick=()=>transfer('pc');
$('sendToPhone').onclick=()=>transfer('phone');
$('phoneAction').onclick=()=>openApp('Dosyalar','phone');
$('pcFiles').onclick=()=>openApp('Dosya Gezgini','pc');
$('pcBrowser').onclick=()=>openApp('Tarayıcı','pc');
$('taskSearch').onclick=()=>openApp('Tarayıcı','pc');

$('homeButton').onclick=()=>{
 $('windowHost').innerHTML='';
 $('phoneWindowHost').innerHTML='';
 document.querySelector('.startMenu')?.remove();
 toast('Ana ekrana dönüldü!');
};

function toggleStart(){
 document.querySelector('.startMenu')?.remove();
 $('windowHost').innerHTML='';
 const menu=document.createElement('div');
 menu.className='startMenu';
 menu.innerHTML=`
  <h3>⊞ Başlat</h3>
  <div class="startGrid">
  ${pcApps.map(([n,e])=>`
   <button data-start="${n}">
    <span>${e}</span>${n}
   </button>`).join('')}
  </div>
  <p style="font-size:11px">Hayal gücünle aç! ✨</p>`;
 $('pcScreen').appendChild(menu);
 menu.querySelectorAll('[data-start]').forEach(b=>{
  b.onclick=()=>{
   const name=b.dataset.start;
   menu.remove();
   openApp(name,'pc');
  };
 });
}

$('startButton').onclick=toggleStart;
$('pcAction').onclick=toggleStart;

document.querySelectorAll('[data-view]').forEach(b=>{
 b.onclick=()=>{
  document.querySelectorAll('[data-view]').forEach(x=>
   x.classList.toggle('active',x===b)
  );
  const view=b.dataset.view;
  $('phoneCard').style.display=view==='pc'?'none':'';
  $('pcCard').style.display=view==='phone'?'none':'';
  $('layout').style.gridTemplateColumns=
   view==='both'?'':'minmax(0,1fr)';
 };
});

function tick(){
 const d=new Date();
 const t=d.toLocaleTimeString('tr-TR',{
  hour:'2-digit',minute:'2-digit'
 });
 $('phoneClock').textContent=t;
 $('phoneStatusTime').textContent=t;
 $('phoneDate').textContent=d.toLocaleDateString('tr-TR',{
  weekday:'long',day:'numeric',month:'long'
 });
 $('pcTopClock').textContent=t;
 $('trayClock').textContent='ᯤ 🔊 '+t;
}
tick();
setInterval(tick,10000);
</script>
</body>
</html>