iPhone Ultra Studio — Simülasyon
by GoldenRanger2360 lines19.8 KB
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="theme-color" content="#101421"><title>iPhone Ultra Studio — Simülasyon</title>
<style>
:root{--wall:linear-gradient(145deg,#122447 0%,#456fc0 42%,#a76bcc 73%,#f3a6bd 100%);--glass:rgba(255,255,255,.24);--ink:#17171b;--blue:#087cff}
*{box-sizing:border-box}html{min-height:100%;background:#090b11}body{margin:0;min-height:100vh;display:grid;place-items:center;padding:14px;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:radial-gradient(ellipse at 50% 0%,#34415d 0,#12151d 47%,#06070a 100%)}button,input,textarea,select{font:inherit}button{cursor:pointer}.phone{--wall:linear-gradient(145deg,#122447 0%,#456fc0 42%,#a76bcc 73%,#f3a6bd 100%);width:min(395px,97vw);height:min(850px,95dvh);min-height:590px;position:relative;overflow:hidden;isolation:isolate;border:7px solid #292b30;border-radius:54px;background:var(--wall);box-shadow:0 0 0 1px #888,0 25px 85px #000c;filter:brightness(1);touch-action:pan-y}
.wallpaper{position:absolute;inset:0;z-index:-3;background:var(--wall);transition:background .3s}.wallpaper:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 18% 22%,#ffffff30,transparent 35%),radial-gradient(ellipse at 88% 74%,#ff87db35,transparent 39%),linear-gradient(120deg,#ffffff08,transparent 55%)}
.status{height:42px;padding:12px 23px 0;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:750;text-shadow:0 1px 5px #0006;position:relative;z-index:8}.statright{display:flex;gap:5px;align-items:center}.battery{width:20px;height:10px;border:1px solid white;border-radius:3px;padding:1px;display:inline-block;position:relative}.battery:before{content:"";display:block;height:100%;width:76%;background:#fff;border-radius:1px}.battery:after{content:"";position:absolute;right:-3px;top:2px;width:2px;height:4px;background:#fff;border-radius:0 2px 2px 0}
.island{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:112px;height:31px;border-radius:24px;background:#030305;z-index:22;display:flex;align-items:center;justify-content:center;transition:all .25s;cursor:pointer;color:white;font-size:12px;overflow:hidden}.island:after{content:"";position:absolute;right:14px;width:7px;height:7px;background:#101b2a;border:1px solid #0b0b0b;border-radius:50%;box-shadow:0 0 0 2px #151515}.island.expanded{width:min(270px,76vw);height:68px;justify-content:flex-start;padding:0 19px;font-size:13px}.island.expanded:after{background:#39e78b;width:8px;height:8px}
.lock{position:absolute;inset:0;z-index:18;padding:100px 23px 35px;display:flex;flex-direction:column;align-items:center;text-align:center;background:linear-gradient(#07101a13,#07101a00);transition:transform .38s,opacity .3s}.lock.hidden{transform:translateY(-105%);opacity:0;pointer-events:none}.lockglyph{font-size:21px;margin-bottom:13px}.lockdate{font-size:17px;text-shadow:0 1px 8px #0007}.locktime{font-size:clamp(66px,19vw,88px);line-height:1.08;font-weight:200;letter-spacing:-4px;text-shadow:0 2px 12px #0005}.lockbottom{width:100%;display:flex;justify-content:space-between;margin-top:auto;align-items:center}.round{width:47px;height:47px;border:1px solid #ffffff65;border-radius:50%;background:#ffffff27;backdrop-filter:blur(16px);color:white;font-size:20px}.unlockhint{position:absolute;bottom:22px;font-size:12px;animation:blink 2s infinite;text-shadow:0 1px 4px #000}.lockbottom{margin-bottom:15px}@keyframes blink{50%{opacity:.45}}
.homeview{position:absolute;inset:43px 0 0;padding:13px 17px 118px;transition:opacity .25s;overflow:auto;scrollbar-width:none}.homeview::-webkit-scrollbar{display:none}.homeview.locked{opacity:0;pointer-events:none}.widget{min-height:93px;padding:14px 16px;border-radius:24px;background:#ffffff22;border:1px solid #ffffff35;backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:space-between;margin:2px 0 19px}.widget strong{display:block;font-size:28px;font-weight:500;letter-spacing:-1px}.widget small{font-size:10px;opacity:.88}.weathericon{font-size:35px;text-align:center}.appgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 6px}.app{border:0;background:transparent;color:white;text-align:center;padding:0;min-width:0;text-shadow:0 1px 4px #0008}.appicon{width:min(60px,15.7vw);height:min(60px,15.7vw);max-width:60px;max-height:60px;margin:0 auto 6px;border-radius:17px;display:grid;place-items:center;font-size:28px;background:var(--appcolor,#ffffff32);border:1px solid #ffffff48;box-shadow:0 5px 15px #0002;position:relative;overflow:hidden;text-shadow:none}.appicon:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,#ffffff2a,transparent 58%);pointer-events:none}.appname{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dock{position:absolute;z-index:6;bottom:24px;left:12px;right:12px;height:79px;border-radius:27px;background:#ffffff38;border:1px solid #ffffff3b;backdrop-filter:blur(25px);display:flex;justify-content:space-evenly;align-items:center}.dock .appicon{width:53px;height:53px;border-radius:16px;margin:0}.dock .appname{display:none}.pagehint{position:absolute;bottom:108px;left:0;right:0;text-align:center;font-size:9px;opacity:.55}
.homebar{position:absolute;z-index:50;bottom:7px;left:50%;transform:translateX(-50%);width:111px;height:5px;border-radius:9px;background:white;box-shadow:0 1px 5px #0006;cursor:pointer}.appwindow{position:absolute;inset:0;z-index:25;background:#f2f2f7;color:#17171b;display:none;flex-direction:column;overflow:auto;padding:48px 17px 32px;animation:pop .18s ease-out;scrollbar-width:thin}.appwindow.open{display:flex}@keyframes pop{from{opacity:.5;transform:scale(.97)}to{opacity:1;transform:scale(1)}}.apphead{display:flex;align-items:center;gap:10px;margin-bottom:15px;min-height:41px}.apphead h2{font-size:24px;margin:0;letter-spacing:-.6px}.back{border:0;border-radius:50%;width:38px;height:38px;background:#e1e1e7;color:#1477ee;font-size:25px;line-height:1}.card{background:white;border-radius:16px;padding:14px;margin:7px 0;box-shadow:0 1px 2px #00008}.rowbtn{width:100%;border:0;background:white;border-radius:13px;text-align:left;padding:15px;margin:4px 0;color:#16161a}.primary{border:0;border-radius:12px;background:#087cff;color:white;padding:12px 16px;font-weight:650}.soft{border:0;border-radius:12px;background:#e5e5eb;color:#17171b;padding:11px 14px}.field,textarea,select{width:100%;padding:13px;border:1px solid #d5d5dd;border-radius:12px;background:#fff;color:#111;margin:6px 0;outline-color:#1683ff}.field{min-height:44px}textarea{min-height:125px;resize:vertical}.muted{font-size:12px;color:#777}.toggle{float:right;width:44px;height:26px;border:0;border-radius:18px;background:#c8c8ce;padding:3px}.toggle:after{content:"";display:block;width:20px;height:20px;background:#fff;border-radius:50%;transition:transform .15s}.toggle.on{background:#34c759}.toggle.on:after{transform:translateX(18px)}.control{position:absolute;inset:0;z-index:30;display:none;padding:52px 17px 38px;background:#202839f2;backdrop-filter:blur(30px);color:white;overflow:auto}.control.open{display:block}.control h2{font-size:27px;margin:11px 0 19px}.ccgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.ccbox{border-radius:19px;background:#ffffff20;padding:13px;min-height:90px}.ccbox button{border:0;border-radius:12px;background:#ffffff24;color:white;padding:9px;margin:3px;font-size:12px}.ccbox .wide{width:100%;margin-top:9px}.ccslider{width:100%;accent-color:#fff;margin:12px 0}.notice{position:absolute;z-index:23;top:49px;left:15px;right:15px;border-radius:18px;padding:15px;background:#20232df0;backdrop-filter:blur(20px);color:white;display:none;box-shadow:0 10px 30px #0003}.notice.show{display:block}.toast{position:absolute;z-index:60;bottom:97px;left:50%;transform:translateX(-50%);background:#17191fee;color:white;padding:11px 15px;border-radius:22px;font-size:12px;white-space:nowrap;display:none;max-width:90%;overflow:hidden;text-overflow:ellipsis}.toast.show{display:block}.pill{border-radius:999px;background:#ececf1;padding:7px 11px;display:inline-block;font-size:12px;margin:3px}.calc-display{border:0;background:#f2f2f7;text-align:right;font-size:39px;width:100%;padding:18px 6px;color:#111}.calcgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.calcgrid button{aspect-ratio:1;border:0;border-radius:50%;font-size:22px;background:#d7d7dc;color:#111}.calcgrid button.op{background:#ff9f0a;color:white}.calcgrid button.dark{background:#555;color:white}.storeicon{width:40px;height:40px;border-radius:12px;display:inline-grid;place-items:center;font-size:21px;margin-right:9px;vertical-align:middle;background:#e8efff}.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.preview-grid button{aspect-ratio:1;border:0;border-radius:10px;font-size:30px}.tinybtn{padding:6px 9px!important}.devicefooter{text-align:center;color:#777;font-size:11px;padding:18px 4px 0}
@media(max-height:690px){.phone{min-height:550px}.homeview{padding-top:7px}.widget{min-height:72px;margin-bottom:13px}.appgrid{gap:12px 5px}.appicon{width:50px;height:50px;font-size:25px}.dock{height:69px}.lock{padding-top:76px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
</style></head>
<body>
<div class="phone" id="phone">
<div class="wallpaper" id="wallpaper"></div>
<div class="status"><span id="statusTime">9:41</span><span class="statright"><span id="signal">▴▴▴</span><span id="wifiIcon">◔</span><span id="batteryText">87%</span><span class="battery"></span></span></div>
<div class="island" id="island" title="Dynamic Island'a dokun"></div>
<section class="lock" id="lock"><div class="lockglyph" id="lockglyph">🔒</div><div class="lockdate" id="lockdate">Pazar, 18 Ekim</div><div class="locktime" id="locktime">9:41</div><div style="margin-top:13px;font-size:13px;opacity:.9">iPhone Ultra</div><div class="lockbottom"><button class="round" id="flashBtn" aria-label="El feneri">🔦</button><button class="round" id="cameraLock" aria-label="Kamera">📷</button></div><div class="unlockhint">Yukarı kaydır veya ekrana dokunarak kilidi aç</div></section>
<main class="homeview locked" id="homeview"><div class="widget"><div><small id="widgetdate">PAZAR, 18 EKİM</small><strong id="widgettime">9:41</strong><small id="widgetline">Güzel bir gün olsun ✨</small></div><div class="weathericon">☀️<small style="display:block;font-size:12px">24°</small></div></div><div class="appgrid" id="appgrid"></div><div class="pagehint">● ○ ○</div></main>
<div class="dock" id="dock"></div><div class="homebar" id="homebar" title="Ana ekrana dön"></div>
<section class="appwindow" id="appwindow"></section>
<section class="control" id="control"><h2>Kontrol Merkezi</h2><div class="ccgrid"><div class="ccbox"><button data-toggle="airplane" onclick="toggleControl(this,'airplane')">✈️ Uçak Modu</button><button data-toggle="wifi" onclick="toggleControl(this,'wifi')">📶 Wi‑Fi</button><button data-toggle="bluetooth" onclick="toggleControl(this,'bluetooth')">🔵 Bluetooth</button><button data-toggle="focus" onclick="toggleControl(this,'focus')">🌙 Odak</button></div><div class="ccbox">▶️ Şimdi Çalıyor<div style="opacity:.7;font-size:12px;margin-top:8px" id="ccTrack">Ultra Mix · Demo</div><button class="wide" onclick="playMusic()">▶︎ Oynat / Duraklat</button></div><div class="ccbox">☀️ Parlaklık<input class="ccslider" id="brightness" type="range" min="45" max="120" value="100" aria-label="Parlaklık"></div><div class="ccbox">🔊 Ses<input class="ccslider" id="volume" type="range" min="0" max="100" value="70" aria-label="Ses seviyesi"></div><div class="ccbox"><button onclick="openApp('Kamera');closeCC()">📷 Kamera</button><button onclick="openApp('Notlar');closeCC()">📝 Notlar</button><button onclick="showNotice('Yeni bir bildirim yok.')">🔔 Bildirimler</button></div><div class="ccbox"><button onclick="closeCC()">Tamam ✓</button><div class="muted" style="color:#eee;margin-top:6px">Dokunarak kontrol et</div></div></div><button class="primary" style="margin-top:17px" onclick="closeCC()">Kapat</button></section>
<div class="notice" id="notice">🔔 <b>Bildirim</b><div id="noticeText" style="margin-top:5px;font-size:13px">Yeni bir bildirim yok.</div></div><div class="toast" id="toast"></div>
</div>
<script>
'use strict';
const APPS=[['Telefon','📞','#35c96b'],['Mesajlar','💬','#38c96b'],['Safari','🧭','#dceeff'],['Kamera','📷','#35353c'],['Fotoğraflar','🌈','#fff'],['Müzik','🎵','#ff375f'],['Ayarlar','⚙️','#89898f'],['App Store','🅰️','#1683ff'],['Takvim','📅','#fff'],['Notlar','📝','#ffe36e'],['Saat','⏰','#33333a'],['Hava Durumu','🌤️','#54a8ff'],['Hesap Makinesi','🧮','#ff9e25'],['Haritalar','🗺️','#d7f3d4'],['Dosyalar','📁','#4797ff'],['Oyunlar','🎮','#8d65f5'],['Sağlık','❤️','#ff4662'],['Kitaplar','📚','#db7d45'],['Podcastler','🎙️','#9b6bff'],['Hatırlatıcılar','☑️','#fff']];
const installed=new Set(APPS.slice(0,16).map(a=>a[0]));let currentApp='',musicPlaying=false,callTimer=null,notes='',messages=[],volume=70,focusMode=false,callActive=false,stopwatchStart=0,stopwatchInterval=null,stopwatchElapsed=0;
try{notes=localStorage.getItem('ultraNotes')||'';messages=JSON.parse(localStorage.getItem('ultraMessages')||'[]')}catch(e){}
const $=id=>document.getElementById(id),grid=$('appgrid'),dock=$('dock'),win=$('appwindow');
function makeApp(a){const b=document.createElement('button');b.className='app';b.innerHTML=`<span class="appicon" style="--appcolor:${a[2]}">${a[1]}</span><span class="appname">${a[0]}</span>`;b.addEventListener('click',()=>openApp(a[0]));return b}
APPS.slice(0,16).forEach(a=>grid.appendChild(makeApp(a)));['Telefon','Safari','Mesajlar','Müzik'].forEach(n=>dock.appendChild(makeApp(APPS.find(a=>a[0]===n))));
function tick(){const d=new Date(),t=d.toLocaleTimeString('tr-TR',{hour:'2-digit',minute:'2-digit'}),date=d.toLocaleDateString('tr-TR',{weekday:'long',day:'numeric',month:'long'});['statusTime','locktime','widgettime'].forEach(id=>$(id).textContent=t);$('lockdate').textContent=date;$('widgetdate').textContent=date.toLocaleUpperCase('tr-TR');$('batteryText').textContent=Math.max(1,Math.round(87-Math.floor(Date.now()/60000)%30))+'%';if(currentApp==='Saat'){const el=$('clockApp');if(el)el.textContent=new Date().toLocaleTimeString('tr-TR')} }
tick();setInterval(tick,1000);
function unlock(){ $('lock').classList.add('hidden');$('homeview').classList.remove('locked') }
function closeApp(){win.classList.remove('open');currentApp='';clearInterval(stopwatchInterval);stopwatchInterval=null}
function goHome(){closeApp();closeCC();$('notice').classList.remove('show');if($('lock').classList.contains('hidden')){$('homeview').classList.remove('locked')}else unlock()}
$('lock').addEventListener('click',unlock);let touchStartY=0,touchStartX=0;
$('phone').addEventListener('touchstart',e=>{touchStartY=e.touches[0].clientY;touchStartX=e.touches[0].clientX},{passive:true});
$('phone').addEventListener('touchend',e=>{const dy=e.changedTouches[0].clientY-touchStartY,dx=e.changedTouches[0].clientX-touchStartX;if(dy < -45 && !$('lock').classList.contains('hidden'))unlock();else if(dy>65&&touchStartY<90&&$('lock').classList.contains('hidden'))openCC();else if(Math.abs(dx)>65&&Math.abs(dx)>Math.abs(dy)&&!win.classList.contains('open')&&$('lock').classList.contains('hidden')){toast(dx<0?'Sonraki ana ekran sayfası (demo)':'Önceki ana ekran sayfası (demo)')}},{passive:true});
$('homebar').onclick=()=>{if(win.classList.contains('open'))goHome();else if($('control').classList.contains('open'))closeCC();else if($('notice').classList.contains('show'))$('notice').classList.remove('show');else if($('lock').classList.contains('hidden'))goHome();else unlock()};
$('island').onclick=()=>{const i=$('island');i.classList.toggle('expanded');i.textContent=i.classList.contains('expanded')?(musicPlaying?'♫ Ultra Mix · Çalıyor':'● iPhone Ultra · Simülasyon'):'';if(i.classList.contains('expanded'))setTimeout(()=>{i.classList.remove('expanded');i.textContent=''},2800)};
$('flashBtn').onclick=e=>{e.stopPropagation();toast('🔦 El feneri demo olarak açıldı')};$('cameraLock').onclick=e=>{e.stopPropagation();unlock();openApp('Kamera')};
function openCC(){$('control').classList.add('open')}function closeCC(){$('control').classList.remove('open')}
function toggleControl(b,key){const on=b.dataset.on!=='1';b.dataset.on=on?'1':'0';b.style.background=on?'#287cff':'#ffffff24';if(key==='wifi')$('wifiIcon').textContent=on?'◔':'×';if(key==='airplane'&&on){$('signal').textContent='✈';$('wifiIcon').textContent='×'}if(key==='airplane'&&!on){$('signal').textContent='▴▴▴';$('wifiIcon').textContent='◔'}if(key==='focus'){focusMode=on;$('widgetline').textContent=on?'Odak modu açık 🌙':'Güzel bir gün olsun ✨';toast(on?'Odak modu açıldı':'Odak modu kapatıldı')}toast((b.textContent.trim())+(on?' açıldı':' kapatıldı'))}
$('brightness').addEventListener('input',e=>{$('phone').style.filter=`brightness(${Number(e.target.value)/100})`});$('volume').addEventListener('input',e=>{volume=Number(e.target.value)});
function toast(s){const t=$('toast');t.textContent=s;t.classList.add('show');clearTimeout(t._timer);t._timer=setTimeout(()=>t.classList.remove('show'),2200)}
function showNotice(s){$('noticeText').textContent=s;$('notice').classList.add('show');closeCC();setTimeout(()=>$('notice').classList.remove('show'),3800)}
function header(n){return `<div class="apphead"><button class="back" onclick="closeApp()" aria-label="Geri">‹</button><h2>${n}</h2></div>`}
function openApp(name){if(!installed.has(name)){toast('Bu uygulama yüklü değil. App Store’dan yükleyebilirsin.');return}closeCC();$('notice').classList.remove('show');currentApp=name;win.classList.add('open');win.scrollTop=0;let c='';
if(name==='Telefon')c=`<div class="card"><b>Favoriler</b><p class="muted">Son Aramalar · Kişiler · Tuş Takımı</p></div><input class="field" id="dial" inputmode="tel" placeholder="Numara gir veya tuşlara dokun"><div class="card" style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center">${['1','2','3','4','5','6','7','8','9','*','0','#'].map(n=>`<button class="soft" onclick="$('dial').value+= '${n}'">${n}</button>`).join('')}</div><button class="primary" style="width:100%;background:#35bd63" onclick="startCall()">📞 Ara</button><p class="muted">Bu uygulama arama simülasyonudur; gerçek arama yapmaz.</p><div id="callstate"></div>`;
else if(name==='Mesajlar')c=`<div class="card">💬 <b>Mesajlar</b><p class="muted">Demo sohbet · Yalnızca bu simülasyonda</p></div><div id="messageList">${messages.map(m=>`<div class="card" style="background:#d6f8d2;margin-left:25px">${esc(m)}</div>`).join('')}</div><input class="field" id="msgInput" placeholder="iMessage" onkeydown="if(event.key==='Enter')sendMsg()"><button class="primary" onclick="sendMsg()">Gönder ↑</button>`;
else if(name==='Safari')c=`<div style="text-align:center;font-size:37px;margin:20px">🧭</div><form onsubmit="browse(event)"><input class="field" id="urlInput" placeholder="Ara veya web sitesi adı"><button class="primary" type="submit">Git</button></form><div class="card" id="browseResult">Safari simülasyonu. Bir adres girdiğinde yeni sekmede açılır.</div><div><button class="soft" onclick="quickBrowse('https://www.google.com')">Google</button> <button class="soft" onclick="quickBrowse('https://www.wikipedia.org')">Wikipedia</button></div><p class="muted">Gerçek sayfalar tarayıcının yeni sekmesinde açılır.</p>`;
else if(name==='Kamera')c=`<div style="background:#17171b;border-radius:22px;min-height:360px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:24px;color:white"><div style="font-size:12px">SİNEMA VİDEO <b>FOTOĞRAF</b> PORTRE</div><div style="font-size:80px">📷</div><button class="round" style="background:#fff;color:#111;border:5px solid #ddd;width:65px;height:65pxGame Source: iPhone Ultra Studio — Simülasyon
Creator: GoldenRanger23
Libraries: none
Complexity: moderate (60 lines, 19.8 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: iphone-ultra-studio-sim-lasyon-goldenranger23" to link back to the original. Then publish at arcadelab.ai/publish.