Windows 12 Ultra

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Windows 12 Ultra</title>

<style>
:root{
  --accent:#60a5fa;
  --glass:rgba(19,29,48,.88);
  --line:rgba(255,255,255,.15);
  --text:#f8fafc;
  --muted:#aab8ce;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:#07172d;
  overflow:hidden;
}
button,input,textarea{font:inherit}
button{
  color:inherit;
  border:1px solid var(--line);
  background:#ffffff0e;
  padding:9px 12px;
  border-radius:9px;
  cursor:pointer;
  transition:.15s;
}
button:hover{background:#ffffff22}
input,textarea{
  color:inherit;
  background:#101a2b;
  border:1px solid var(--line);
  border-radius:9px;
  padding:10px;
}
#desktop{
  position:fixed;
  inset:0 0 49px;
  background:
    radial-gradient(ellipse at 65% 45%,#1685ff55,transparent 35%),
    radial-gradient(ellipse at 48% 50%,#245bd877,transparent 43%),
    linear-gradient(135deg,#061326,#102e61,#040b19);
  overflow:hidden;
}
.wallpaper{
  position:absolute;
  width:65vw;
  height:45vw;
  max-width:850px;
  max-height:600px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(-20deg);
  border:45px solid #55aaff16;
  border-radius:50%;
  box-shadow:0 0 100px #278cff25,inset 0 0 90px #278cff22;
  pointer-events:none;
}
.wallpaper:before{
  content:"";
  position:absolute;
  inset:13%;
  border:30px solid #70c0ff20;
  border-radius:50%;
}
#icons{
  position:absolute;
  top:10px;
  left:7px;
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  gap:8px;
  height:calc(100% - 20px);
  align-content:flex-start;
}
.deskicon{
  width:79px;
  height:76px;
  background:transparent;
  border-color:transparent;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  font-size:11px;
  text-align:center;
  text-shadow:0 2px 5px #000;
}
.deskicon .emoji{font-size:28px}
.deskicon:hover{background:#ffffff18}
#clock{
  position:absolute;
  right:23px;
  top:23px;
  text-align:right;
  text-shadow:0 2px 15px #0008;
}
#time{font-size:35px;font-weight:300}
#date{font-size:12px;color:#d2dfef}
#taskbar{
  position:fixed;
  z-index:5000;
  left:0;right:0;bottom:0;
  height:49px;
  background:rgba(10,17,29,.78);
  border-top:1px solid #ffffff1b;
  backdrop-filter:blur(30px);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:5px;
  padding:0 10px;
}
.taskbtn{
  min-width:38px;
  height:38px;
  padding:5px 10px;
  background:transparent;
  border-color:transparent;
  font-size:19px;
}
#startButton{font-size:23px}
#taskApps{
  display:flex;
  gap:4px;
  max-width:42vw;
  overflow:auto;
}
#tray{
  position:absolute;
  right:12px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
}
#taskTime{text-align:right;line-height:1.3}
.panel{
  display:none;
  position:fixed;
  z-index:4000;
  left:50%;
  bottom:58px;
  transform:translateX(-50%);
  width:min(570px,calc(100vw - 16px));
  max-height:78vh;
  overflow:auto;
  background:rgba(18,27,44,.96);
  backdrop-filter:blur(35px);
  border:1px solid var(--line);
  border-radius:19px;
  padding:20px;
  box-shadow:0 20px 80px #0008;
}
.panel.show{display:block;animation:appear .15s}
@keyframes appear{
  from{opacity:0;translate:0 8px}
  to{opacity:1;translate:0 0}
}
.panel input{width:100%;margin-bottom:14px}
.pinned{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.pin{
  min-height:75px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-color:transparent;
  background:transparent;
  font-size:12px;
}
.pin span:first-child{font-size:27px}
.panelbottom{
  margin:15px -20px -20px;
  padding:15px 20px;
  background:#ffffff0a;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.window{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(850px,calc(100vw - 20px));
  height:min(570px,calc(100vh - 80px));
  min-width:min(300px,calc(100vw - 20px));
  min-height:260px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  resize:both;
  background:var(--glass);
  backdrop-filter:blur(30px);
  border:1px solid #ffffff24;
  border-radius:13px;
  box-shadow:0 25px 85px #0008;
}
.window.maximized{
  left:5px!important;
  top:5px!important;
  transform:none!important;
  width:calc(100vw - 10px)!important;
  height:calc(100vh - 59px)!important;
  resize:none;
}
.window.minimized{display:none}
.titlebar{
  min-height:43px;
  display:flex;
  align-items:center;
  gap:10px;
  padding-left:13px;
  background:#00000015;
  border-bottom:1px solid #ffffff10;
  cursor:move;
  user-select:none;
}
.titleicon{font-size:19px}
.titletext{
  flex:1;
  font-size:13px;
  overflow:hidden;
  white-space:nowrap;
}
.controls{display:flex;height:43px}
.controls button{
  width:42px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}
.controls .close:hover{background:#e33d50}
.body{flex:1;overflow:auto;min-height:0}
.toolbar{
  display:flex;
  align-items:center;
  gap:7px;
  padding:10px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line);
}
.toolbar input{flex:1;min-width:80px}
.pad{padding:17px}
.card{
  border:1px solid var(--line);
  background:#ffffff08;
  border-radius:13px;
  padding:14px;
  margin-bottom:12px;
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(125px,1fr));
  gap:10px;
}
.muted{color:var(--muted);font-size:12px}
h2{font-size:22px;font-weight:500;margin:5px 0 18px}
h3{font-size:15px;font-weight:600}
.bigemoji{font-size:48px}
.primary{background:var(--accent);color:#061326;border-color:transparent}
.light{
  background:#f3f6fb!important;
  color:#1d2939!important;
}
.light button{color:#1d2939}
.light input,.light textarea{
  color:#1d2939;
  background:white;
  border-color:#ccd5e2;
}
.appgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:10px;
}
.appcard{
  text-align:center;
  min-height:105px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.appcard .bigemoji{font-size:32px}
.phone{
  width:min(280px,100%);
  height:480px;
  max-height:calc(100vh - 100px);
  margin:15px auto;
  border:6px solid #080b12;
  border-radius:35px;
  padding:15px;
  background:linear-gradient(145deg,#202d51,#070e20);
  box-shadow:inset 0 0 0 1px #ffffff35,0 15px 40px #0005;
  position:relative;
  overflow:auto;
}
.phone-top{
  text-align:center;
  font-size:11px;
  padding-bottom:10px;
}
.phone-time{font-size:34px;text-align:center;margin-top:25px}
.phone-date{text-align:center;font-size:11px;margin-bottom:26px}
.phone-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px 8px;
  text-align:center;
}
.phone-grid button{
  padding:8px 2px;
  border:0;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  font-size:10px;
}
.phone-icon{
  width:45px;height:45px;
  display:grid;place-items:center;
  border-radius:13px;
  background:linear-gradient(135deg,#74c9ff,#2865df);
  font-size:23px;
}
#toast{
  position:fixed;
  right:16px;
  bottom:62px;
  z-index:9000;
  background:rgba(17,26,43,.96);
  border:1px solid var(--line);
  border-radius:13px;
  padding:15px;
  max-width:300px;
  display:none;
  box-shadow:0 10px 40px #0005;
}
#paintCanvas{
  display:block;
  width:100%;
  height:300px;
  background:white;
  border-radius:8px;
  touch-action:none;
  cursor:crosshair;
}
.game{
  text-align:center;
}
canvas.gamecanvas{
  width:100%;
  max-width:500px;
  height:auto;
  border:1px solid var(--line);
  border-radius:10px;
  background:#07111f;
}
#unoCards{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.unocard{
  width:49px;height:72px;
  font-weight:bold;
  border:3px solid white;
  border-radius:8px;
  padding:0;
  color:white;
  text-shadow:0 1px 2px #000;
}
@media(max-width:600px){
  #clock{right:14px;top:14px}
  #time{font-size:27px}
  #weather{display:none}
  #searchTask{display:none}
  #tray{right:6px}
  #taskbar{justify-content:flex-start}
  #taskApps{max-width:35vw}
  .window{resize:none}
  .pinned{grid-template-columns:repeat(4,1fr)}
}
</style>
</head>

<body>
<div id="desktop">
  <div class="wallpaper"></div>
  <div id="icons"></div>

  <div id="clock">
    <div id="time">12:00</div>
    <div id="date"></div>
  </div>
</div>

<div id="taskbar">
  <button class="taskbtn" id="startButton" title="Başlat">🪟</button>
  <button class="taskbtn" id="searchTask" title="Ara">🔎</button>
  <div id="taskApps"></div>
  <div id="tray">
    <button class="taskbtn" id="quickButton" title="Hızlı ayarlar">📶</button>
    <button class="taskbtn" id="calendarButton" title="Takvim">🗓️</button>
    <div id="taskTime"></div>
  </div>
</div>

<div class="panel" id="startPanel">
  <input id="startSearch" placeholder="Uygulama ara...">
  <div class="panelbottom" style="margin:0 0 12px;padding:8px 0;background:none">
    <b>📌 Sabitlenmiş uygulamalar</b>
    <span class="muted">Windows 12 Ultra</span>
  </div>
  <div id="pinned" class="pinned"></div>
  <div class="panelbottom">
    <span>👤 GoldenRanger23</span>
    <button onclick="toast('Güç','Simülasyonda gerçek bilgisayar kapanmaz.')">⏻ Güç</button>
  </div>
</div>

<div class="panel" id="searchPanel">
  <input id="globalSearch" placeholder="Uygulama, oyun veya ayar ara...">
  <div id="searchResults"></div>
</div>

<div class="panel" id="quickPanel">
  <h3>⚡ Hızlı Ayarlar</h3>
  <div class="grid">
    <button onclick="toggleQuick(this)">📶 Wi-Fi</button>
    <button onclick="toggleQuick(this)">🔵 Bluetooth</button>
    <button onclick="toggleQuick(this)">✈️ Uçak modu</button>
    <button onclick="toggleQuick(this)">🌙 Rahatsız etme</button>
  </div>
  <p>Parlaklık</p>
  <input type="range" min="40" max="120" value="100"
    oninput="document.getElementById('desktop').style.filter='brightness('+this.value+'%)'">
  <button onclick="openApp('settings')">⚙️ Tüm ayarlar</button>
</div>

<div class="panel" id="calendarPanel">
  <h2 id="calendarTime"></h2>
  <p id="calendarDate"></p>
  <div id="calendarGrid" class="grid"></div>
  <button onclick="openApp('calendar')">Takvimi aç</button>
</div>

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

<script>
"use strict";

const $ = s => document.querySelector(s);
const $$ = s => document.querySelectorAll(s);

const appList = [
  ["explorer","📁","Dosya Gezgini","Dosyaları keşfet"],
  ["browser","🌐","Microsoft Edge","Web'de gezin"],
  ["store","🛍️","Microsoft Store","Uygulamaları keşfet"],
  ["settings","⚙️","Ayarlar","Sistemi özelleştir"],
  ["phone","📱","Telefon","Mobil simülasyon"],
  ["notes","📝","Not Defteri","Notlarını kaydet"],
  ["calculator","🧮","Hesap Makinesi","Hesaplama yap"],
  ["paint","🎨","Paint","Resim çiz"],
  ["photos","🌄","Fotoğraflar","Galerini görüntüle"],
  ["calendar","🗓️","Takvim","Tarih ve saat"],
  ["clock","⏰","Saat","Dünya saatleri"],
  ["music","🎵","Medya Oynatıcı","Yerel medya seç"],
  ["uno","🃏","UNO","Kart oyunu"],
  ["snake","🐍","Yılan","Klasik mini oyun"],
  ["dash","🟪","Dash Jump","Engelleri aş"],
  ["racer","🏎️","Turbo Yarış","Araba yarışı"],
  ["world","🌎","Mini Dünya","Karakterini yönet"],
  ["achievements","🏆","Başarımlar","İlerlemene göz at"]
];

const names = Object.fromEntries(appList.map(a=>[a[0],a]));
let openWindows = {};
let zIndex = 20;
let activeWallpaper = 0;
let worldX = 45;
let worldEmoji = 0;

function safeGet(key, fallback=""){
  try {
    const v = localStorage.getItem(key);
    return v === null ? fallback : v;
  } catch(e) { return fallback; }
}
function safeSet(key,value){
  try { localStorage.setItem(key,value); } catch(e) {}
}

function toast(title,message){
  const t=$("#toast");
  t.innerHTML="<b>"+escapeHTML(title)+"</b><br><span class='muted'>"+
    escapeHTML(message)+"</span>";
  t.style.display="block";
  clearTimeout(window.toastTimer);
  window.toastTimer=setTimeout(()=>t.style.display="none",3000);
}

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

function updateClock(){
  const now=new Date();
  $("#time").textContent=now.toLocaleTimeString("tr-TR",{
    hour:"2-digit",minute:"2-digit"
  });
  $("#date").textContent=now.toLocaleDateString("tr-TR",{
    weekday:"long",day:"numeric",month:"long"
  });
  $("#taskTime").innerHTML=now.toLocaleTimeString("tr-TR",{
    hour:"2-digit",minute:"2-digit"
  })+"<br>"+now.toLocaleDateString("tr-TR");
  $("#calendarTime").textContent=now.toLocaleTimeString("tr-TR",{
    hour:"2-digit",minute:"2-digit"
  });
  $("#calendarDate").textContent=now.toLocaleDateString("tr-TR",{
    weekday:"long",year:"numeric",month:"long",day:"numeric"
  });
}
setInterval(updateClock,1000);
updateClock();

function iconHTML(id){
  const a=names[id];
  return a ? a[1] : "📦";
}

function makeDesktop(){
  $("#icons").innerHTML="";
  appList.slice(0,12).forEach(a=>{
    const b=document.createElement("button");
    b.className="deskicon";
    b.innerHTML='<span class="emoji">'+a[1]+'</span><span>'+a[2]+'</span>';
    b.ondblclick=()=>openApp(a[0]);
    b.onclick=()=>{
      $$(".deskicon").forEach(n=>n.style.background="transparent");
      b.style.background="#ffffff20";
    };
    b.ontouchend=()=>{};
    $("#icons").appendChild(b);
  });
}

function buildStart(){
  $("#pinned").innerHTML=appList.map(a=>
    '<button class="pin" data-id="'+a[0]+'"><span>'+a[1]+
    '</span><span>'+a[2]+'</span></button>'
  ).join("");
  $$("#pinned [data-id]").forEach(b=>
    b.onclick=()=>openApp(b.dataset.id)
  );
}
makeDesktop();
buildStart();

function closePanels(){
  $$(".panel").forEach(p=>p.classList.remove("show"));
}
function togglePanel(id){
  const p=$("#"+id);
  const was=p.classList.contains("show");
  closePanels();
  if(!was)p.classList.add("show");
}

$("#startButton").onclick=()=>togglePanel("startPanel");
$("#searchTask").onclick=()=>togglePanel("searchPanel");
$("#quickButton").onclick=()=>togglePanel("quickPanel");
$("#calendarButton").onclick=()=>togglePanel("calendarPanel");

document.addEventListener("pointerdown",e=>{
  if(!e.target.closest(".panel") &&
     !e.target.closest("#startButton") &&
     !e.target.closest("#searchTask") &&
     !e.target.closest("#quickButton") &&
     !e.target.closest("#calendarButton")){
    closePanels();
  }
});

function toggleQuick(b){
  b.classList.toggle("primary");
  toast(b.textContent,b.classList.contains("primary")?
    "Açıldı (simülasyon).":"Kapandı (simülasyon).");
}

function createCalendar(){
  const grid=$("#calendarGrid");
  const d=new Date();
  const first=new Date(d.getFullYear(),d.getMonth(),1).getDay();
  const count=new Date(d.getFullYear(),d.getMonth()+1,0).getDate();
  grid.innerHTML="<div style='grid-column:1/-1;font-weight:bold'>"+
    d.toLocaleDateString("tr-TR",{month:"long",year:"numeric"})+"</div>";
  ["P","S","Ç","P","C","C","P"].forEach(x=>{
    grid.innerHTML+="<span>"+x+"</span>";
  });
  for(let i=0;i<(first+6)%7;i++)grid.innerHTML+="<span></span>";
  for(let i=1;i<=count;i++){
    grid.innerHTML+='<button onclick="toast(\'Takvim\',\''+
      i+" "+d.toLocaleDateString("tr-TR",{month:"long"})+
      '\')">'+i+'</button>';
  }
}
createCalendar();

function windowContent(id){
  switch(id){
    case "explorer":
      return `<div class="toolbar">
        <button onclick="explorerGo('Ana Sayfa')">←</button>
        <button onclick="explorerGo('Ana Sayfa')">🏠</button>
        <input id="pathInput" value="Ana Sayfa" aria-label="Konum">
      </div>
      <div class="pad">
        <h2 id="explorerTitle">Hızlı erişim</h2>
        <div class="grid">
          ${[["📂","Belgeler"],["🖼️","Resimler"],["🎵","Müzik"],
          ["🎬","Videolar"],["⬇️","İndirilenler"],["🖥️","Masaüstü"]]
          .map(x=>`<button class="card" onclick="explorerGo('${x[1]}')">
          <div class="bigemoji">${x[0]}</div>${x[1]}</button>`).join("")}
        </div>
        <p class="muted">Bu, simülasyon dosya gezginidir. Gerçek cihaz dosyalarına erişmez.</p>
      </div>`;
    case "browser":
      return `<div class="toolbar">
        <button onclick="browserSearch('https://www.bing.com')">🏠</button>
        <input id="browserAddress" value="https://www.bing.com"
        placeholder="Web adresi veya arama">
        <button class="primary" onclick="browserGo()">Git ↗</button>
      </div>
      <div class="pad">
        <div class="card">
          <div class="bigemoji">🌐</div><h2>Microsoft Edge tarzı tarayıcı</h2>
          <p>Bir web adresi yaz veya internette ara.</p>
          <p class="muted">Bazı siteler güvenlik kuralları nedeniyle oyun penceresinde açılmaz; yeni sekmede açılabilir.</p>
          <button onclick="browserSearch('https://www.bing.com')">Bing'i aç ↗</button>
          <button onclick="browserSearch('https://www.wikipedia.org')">Wikipedia ↗</button>
        </div>
      </div>`;
    case "store":
      return `<div class="pad"><h2>🛍️ Microsoft Store</h2>
      <p class="muted">Simülasyon uygulama mağazası</p>
      <div class="grid">${appList.filter(a=>!["store","explorer"].includes(a[0]))
      .map(a=>`<div class="card"><div class="bigemoji">${a[1]}</div>
      <b>${a[2]}</b><p class="muted">${a[3]}</p>
      <button onclick="openApp('${a[0]}')">Aç</button></div>`).join("")}</div>
      </div>`;
    case "settings":
      return `<div class="pad"><h2>⚙️ Ayarlar</h2>
      <div class="grid">
        <div class="card"><h3>🎨 Kişiselleştirme</h3>
        <p class="muted">Renk ve masaüstü teması</p>
        <button onclick="setAccent('#60a5fa')">Mavi</button>
        <button onclick="setAccent('#a78bfa')">Mor</button>
        <button onclick="setAccent('#34d399')">Yeşil</button>
        <button onclick="setAccent('#fb7185')">Pembe</button>
        <button onclick="cycleWallpaper()">Duvar kâğıdını değiştir</button>
        </div>
        <div class="card"><h3>🌙 Görünüm</h3>
        <button onclick="document.body.classList.toggle('light')">Açık/koyu görünüm</button>
        <p class="muted">Görünüm bu simülasyon içindir.</p></div>
        <div class="card"><h3>💻 Sistem</h3>
        <p>Windows 12 Ultra Simulator</p>
        <p class="muted">Sürüm 12.0 · GoldenRanger23</p>
        <button onclick="toast('Sistem','Her şey yolunda!')">Durumu kontrol et</button>
        </div>
        <div class="card"><h3>🧹 Depolama</h3>
        <button onclick="if(confirm('Kaydedilmiş notlar silinsin mi?')){localStorage.removeItem('w12_notes');toast('Depolama','Notlar silindi')}">Notları temizle</button>
        </div>
      </div></div>`;
    case "notes":
      return `<div class="toolbar"><button onclick="saveNotes()">💾 Kaydet</button>
      <span class="muted" id="noteStatus">Otomatik kaydetme açık</span></div>
      <div class="pad"><textarea id="noteText" placeholder="Notlarını buraya yaz..."
      style="width:100%;height:330px;resize:vertical"></textarea>
      <p class="muted">Notlar mümkünse bu tarayıcıda saklanır.</p></div>`;
    case "calculator":
      return `<div class="pad" style="max-width:350px;margin:auto">
      <input id="calcDisplay" value="0" readonly style="width:100%;font-size:28px;text-align:right;margin-bottom:12px">
      <div class="grid" style="grid-template-columns:repeat(4,1fr)">
      ${["C","(",")","÷","7","8","9","×","4","5","6","−","1","2","3","+","±","0",".","="]
      .map(x=>`<button style="font-size:19px;min-height:48px"
      onclick="calcPress('${x}')">${x}</button>`).join("")}
      </div></div>`;
    case "paint":
      return `<div class="toolbar"><label>Renk <input id="paintColor" type="color" value="#206bff"></label>
      <label>Boyut <input id="paintSize" type="range" min="1" max="30" value="5"></label>
      <button onclick="clearPaint()">Temizle</button>