Windows 11

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Windows 11</title> <style> *{box-sizing:border-box} body{margin:0;font-family:"Segoe UI",Arial,sans-serif;overflow:hidden;color:white} .desktop{height:100vh;background:radial-gradient(ellipse at 65% 45%,#39baff,#0879df 35%,#071b62 80%);position:relative} .icons{padding:15px;display:flex;flex-direction:column;align-items:flex-start;gap:20px} .icon{width:80px;text-align:center;cursor:pointer;padding:8px;border-radius:8px;font-size:12px} .icon:hover{background:#ffffff30} .icon span{display:block;font-size:35px;margin-bottom:5px} .taskbar{position:absolute;bottom:0;width:100%;height:58px;background:#e8eef5df;backdrop-filter:blur(20px);display:flex;justify-content:center;align-items:center;gap:12px} button{cursor:pointer;border:0;border-radius:8px;padding:10px;font-size:20px;background:transparent} button:hover{background:#cbd9eb} .clock{position:absolute;right:12px;color:#172033;font-size:12px;text-align:center} .start{display:none;position:absolute;bottom:68px;left:50%;transform:translateX(-50%);width:min(450px,95%);height:420px;background:#f3f6fcf2;color:#172033;border-radius:15px;padding:20px;box-shadow:0 10px 40px #001b4d66} .start h3{margin-top:0} .apps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .app{padding:16px 5px;text-align:center;cursor:pointer;border-radius:8px} .app:hover{background:#dce8f8} .app span{display:block;font-size:30px;margin-bottom:8px} .window{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(600px,94%);height:min(420px,65vh);background:#f5f7fb;color:#172033;border-radius:12px;box-shadow:0 15px 50px #001b4d66;overflow:hidden} .title{height:45px;background:#e5ebf4;display:flex;justify-content:space-between;align-items:center;padding-left:15px} .close{height:45px;width:50px;border-radius:0} .content{padding:20px;overflow:auto;height:calc(100% - 45px)} input,textarea{padding:10px;border:1px solid #aaa;border-radius:6px;max-width:100%;font:inherit} .action{font-size:14px;background:#176bd1;color:white;margin:5px} </style> </head> <body> <div class="desktop" id="desktop"> <div class="icons"> <div class="icon" onclick="openApp('Dosya Gezgini')"><span>📁</span>Dosya Gezgini</div> <div class="icon" onclick="openApp('Tarayıcı')"><span>🌐</span>Tarayıcı</div> <div class="icon" onclick="openApp('Geri Dönüşüm Kutusu')"><span>🗑️</span>Geri Dönüşüm Kutusu</div> </div> <div class="start" id="start"> <h3>Başlat</h3> <input placeholder="Ara..." style="width:100%"> <h3>Sabitlenmiş uygulamalar</h3> <div class="apps"> <div class="app" onclick="openApp('Tarayıcı')"><span>🌐</span>Tarayıcı</div> <div class="app" onclick="openApp('Dosya Gezgini')"><span>📁</span>Dosyalar</div> <div class="app" onclick="openApp('Ayarlar')"><span>⚙️</span>Ayarlar</div> <div class="app" onclick="openApp('Hesap Makinesi')"><span>🧮</span>Hesap Makinesi</div> <div class="app" onclick="openApp('Not Defteri')"><span>📝</span>Not Defteri</div> <div class="app" onclick="openApp('Oyunlar')"><span>🎮</span>Oyunlar</div> </div> </div> <div class="window" id="window"> <div class="title"><span id="title">Uygulama</span><button class="close" onclick="closeApp()">✕</button></div> <div class="content" id="content"></div> </div> <div class="taskbar"> <button onclick="toggleStart()">🪟</button> <button onclick="openApp('Dosya Gezgini')">📁</button> <button onclick="openApp('Tarayıcı')">🌐</button> <button onclick="openApp('Ayarlar')">⚙️</button> <button onclick="openApp('Hesap Makinesi')">🧮</button> <div class="clock" id="clock"></div> </div> </div> <script> function toggleStart(){ let s=document.getElementById('start'); s.style.display=s.style.display==='block'?'none':'block'; } function closeApp(){ document.getElementById('window').style.display='none'; } function openApp(name){ document.getElementById('start').style.display='none'; document.getElementById('title').