🎮ArcadeLab

iPhone Ultra Simulator | GoldenRanger23

by GoldenRanger23
554 lines19.7 KB
▶ Play
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>iPhone Ultra Simulator | GoldenRanger23</title>

<style>
:root {
  --wall: linear-gradient(145deg,#111947,#633c9b,#f18ca8,#ffcba1);
  --bright: 1;
}
* { box-sizing:border-box; }
body {
  margin:0; height:100dvh; overflow:hidden;
  background:#090a12; color:white;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
button,input,textarea { font:inherit; }
button { cursor:pointer; border:0; }
#stage {
  height:100%; display:grid; place-items:center; padding:10px;
  background:radial-gradient(ellipse at top,#353956,#08090e 70%);
}
#phone {
  width:min(390px,100%); height:min(844px,calc(100dvh - 20px));
  min-height:470px; position:relative; overflow:hidden;
  border:8px solid #292a31; border-radius:48px;
  background:var(--wall);
  box-shadow:0 0 0 2px #62636a,0 25px 80px #000b;
  filter:brightness(var(--bright));
}
#wallpaper {
  position:absolute; inset:0; background:var(--wall); overflow:hidden;
}
#wallpaper:before,#wallpaper:after {
  content:""; position:absolute; border-radius:50%;
  pointer-events:none;
}
#wallpaper:before {
  width:290px;height:490px;left:-100px;top:150px;
  background:linear-gradient(140deg,#50e0d4aa,#7161ffbb,#d18bff66);
  transform:rotate(25deg);
}
#wallpaper:after {
  width:280px;height:440px;right:-100px;top:230px;
  background:linear-gradient(25deg,#ffb45acc,#ff73a4aa,#7c55ff77);
  transform:rotate(-30deg);
}
#status {
  position:absolute;z-index:30;top:0;left:0;right:0;height:42px;
  display:flex;justify-content:space-between;padding:12px 20px 0;
  font-size:12px;font-weight:750;cursor:pointer;
}
#island {
  position:absolute;z-index:31;top:8px;left:50%;
  transform:translateX(-50%);width:110px;height:29px;
  border-radius:25px;background:#050506;
}
#island:after {
  content:"";position:absolute;right:13px;top:10px;
  width:7px;height:7px;border-radius:50%;background:#17203e;
}
.screen { position:absolute;inset:0;display:none;z-index:4; }
.screen.show { display:block; }

#lock {
  z-index:10;text-align:center;padding:90px 20px 25px;
  background:linear-gradient(#10133315,#090e2540);
}
#date { font-size:18px;text-transform:capitalize; }
#time {
  font-size:79px;font-weight:250;letter-spacing:-4px;
  line-height:1.2;text-shadow:0 3px 20px #0005;
}
.lock-widget {
  margin:25px auto 0;max-width:285px;padding:15px;
  border:1px solid #ffffff30;border-radius:23px;
  background:#ffffff1a;backdrop-filter:blur(18px);text-align:left;
}
.lock-widget strong { display:block;font-size:13px;margin-bottom:6px; }
.lock-widget span { font-size:12px;opacity:.85; }
#unlock {
  margin-top:95px;padding:13px 24px;border-radius:30px;
  color:white;background:#ffffff25;border:1px solid #ffffff55;
  backdrop-filter:blur(15px);font-weight:650;
}
.lock-bottom {
  position:absolute;bottom:30px;left:25px;right:25px;
  display:flex;justify-content:space-between;
}
.round {
  width:46px;height:46px;border-radius:50%;
  background:#ffffff25;border:1px solid #ffffff44;color:white;
  font-size:21px;
}
.home-indicator {
  position:absolute;z-index:60;bottom:5px;left:50%;
  transform:translateX(-50%);width:105px;height:4px;
  border-radius:6px;background:white;cursor:pointer;
}

#home { z-index:3;padding:51px 16px 25px; }
.widget {
  height:108px;border-radius:23px;padding:14px 16px;
  margin-bottom:18px;background:#ffffff1e;
  border:1px solid #ffffff22;backdrop-filter:blur(18px);
}
.widget-top { display:flex;justify-content:space-between;font-size:11px; }
.widget-title { font-size:22px;font-weight:750;margin-top:8px; }
.widget-sub { font-size:12px;margin-top:3px;opacity:.85; }
.grid { display:grid;grid-template-columns:repeat(4,1fr);gap:16px 6px; }
.app-icon {
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:0;background:transparent;color:white;min-width:0;
  text-shadow:0 1px 5px #0007;
}
.icon {
  width:56px;height:56px;border-radius:15px;
  display:grid;place-items:center;font-size:28px;
  box-shadow:0 4px 14px #0002;
  border-top:1px solid #ffffff80;
}
.label {
  font-size:10px;white-space:nowrap;max-width:82px;
  overflow:hidden;text-overflow:ellipsis;
}
.green { background:linear-gradient(#6cf18e,#05a95f); }
.blue { background:linear-gradient(#81deff,#1878e5); }
.pink { background:linear-gradient(145deg,#ffb8d0,#fa2c70); }
.grey { background:linear-gradient(145deg,#bac6d6,#657183); }
.photo { background:conic-gradient(#fd5e67,#fdbb45,#72d58c,#59b5ff,#c08bff,#fd5e67); }
.store { background:linear-gradient(145deg,#82c9ff,#196bdf); }
.note { background:linear-gradient(#fff5a6 0 25%,white 25%);color:#333; }
.red { background:linear-gradient(145deg,#ff746e,#d82944); }
.dark { background:linear-gradient(145deg,#555a65,#15171d); }
.purple { background:linear-gradient(145deg,#aa86ff,#6239d9); }
.orange { background:linear-gradient(145deg,#ffc65c,#ff822e); }
#search {
  width:180px;height:27px;border-radius:16px;
  background:#ffffff27;display:flex;align-items:center;
  justify-content:center;gap:7px;margin:17px auto 10px;
  color:white;font-size:11px;
}
#dock {
  position:absolute;left:12px;right:12px;bottom:19px;height:79px;
  padding:10px;border:1px solid #ffffff35;border-radius:26px;
  background:#ffffff30;backdrop-filter:blur(24px);
  display:flex;justify-content:space-around;align-items:center;
}
#dock .icon { width:53px;height:53px; }

#app {
  z-index:15;background:#f4f5f9;color:#171820;overflow:hidden;
}
#app.darkmode { background:#16171d;color:#f5f5fa; }
#app-header {
  height:78px;padding:41px 16px 10px;
  display:flex;align-items:center;justify-content:space-between;
  background:inherit;position:relative;z-index:2;
}
#app-title { font-size:18px;font-weight:750; }
#back { background:transparent;color:#1684ff;font-size:14px; }
#content {
  height:calc(100% - 78px);overflow:auto;
  padding:13px 15px 40px;overscroll-behavior:contain;
}
.panel {
  border-radius:17px;background:white;padding:14px;
  margin-bottom:12px;box-shadow:0 1px 4px #00000008;
}
.darkmode .panel,.darkmode .store-card {
  background:#252731;color:#f5f5fa;
}
.muted { font-size:12px;color:#7a7e89; }
.row {
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:11px 0;border-bottom:1px solid #8882;
}
.row:last-child { border-bottom:0; }
.field {
  width:100%;border:1px solid #d8dbe3;border-radius:12px;
  padding:12px;background:white;color:#222;outline:none;
}
.darkmode .field { background:#30323b;color:white;border-color:#494b53; }
.primary {
  background:#1684ff;color:white;padding:10px 14px;
  border-radius:12px;font-weight:650;
}
.secondary { background:#e8ebf2;color:#242630;padding:10px 13px;border-radius:12px; }
.darkmode .secondary { background:#424550;color:white; }
.hero {
  border-radius:22px;padding:18px;
  background:linear-gradient(135deg,#67bbff,#6264ee);
  color:white;margin-bottom:14px;min-height:100px;
}
.hero h2 { margin:0 0 7px;font-size:22px; }
.hero p { margin:0;font-size:13px;opacity:.9; }
.switch {
  width:44px;height:26px;border-radius:20px;
  background:#c7cad2;padding:3px;display:inline-flex;
  align-items:center;flex-shrink:0;
}
.switch:after {
  content:"";width:20px;height:20px;border-radius:50%;
  background:white;box-shadow:0 1px 3px #0003;
}
.switch.on { background:#32c65b;justify-content:flex-end; }
.calc {
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:9px;margin-top:15px;
}
.calc button {
  height:59px;border-radius:50%;font-size:21px;
  background:#e1e3e9;color:#202127;
}
.calc .op { background:#ff9f0a;color:white; }
.calc .fn { background:#b9bbc2;color:#222; }
#display {
  grid-column:1/-1;min-height:90px;display:flex;align-items:end;
  justify-content:end;padding:10px;font-size:44px;font-weight:300;
  overflow:hidden;
}
.note-area {
  width:100%;height:300px;border:0;resize:none;
  background:transparent;color:inherit;font-size:17px;outline:none;
}
.store-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:10px; }
.store-card {
  background:white;padding:13px;border-radius:17px;
  box-shadow:0 1px 4px #0001;
}
.store-emoji { font-size:34px; }
.store-card h3 { margin:7px 0 4px;font-size:14px; }
.store-card p { margin:0 0 9px;color:#787b85;font-size:11px; }
.gallery { display:grid;grid-template-columns:repeat(3,1fr);gap:4px; }
.tile {
  aspect-ratio:1;border-radius:7px;
  background:linear-gradient(135deg,#5fc9fa,#6c5ce7,#fa809b);
  display:grid;place-items:center;font-size:25px;overflow:hidden;
}
.tile img { width:100%;height:100%;object-fit:cover; }
#control {
  display:none;position:absolute;z-index:40;inset:0;
  background:#20243aee;backdrop-filter:blur(25px);padding:55px 17px;
}
#control.show { display:block; }
.control-grid { display:grid;grid-template-columns:1fr 1fr;gap:11px; }
.control-tile {
  padding:16px 12px;border-radius:18px;background:#41465c;
  color:white;text-align:left;min-height:79px;
}
.control-tile.on { background:#1684ff; }
.control-tile span { display:block; }
#toast {
  position:absolute;z-index:80;left:50%;bottom:55px;
  transform:translate(-50%,15px);opacity:0;pointer-events:none;
  background:#1b1b20ed;color:white;border-radius:14px;
  padding:11px 15px;font-size:13px;max-width:86%;
  text-align:center;transition:.2s;
}
#toast.show { opacity:1;transform:translate(-50%,0); }
#face {
  position:absolute;z-index:55;inset:0;display:none;
  place-items:center;background:#060812aa;backdrop-filter:blur(8px);
}
#face.show { display:grid; }
.face-card {
  padding:28px 24px;border-radius:27px;background:#202332ed;
  width:80%;text-align:center;
}
.face-icon { font-size:52px; }
.scan {
  height:3px;background:#58e7ff;box-shadow:0 0 14px #58e7ff;
  margin:20px 0;animation:scan 1s ease-in-out infinite alternate;
}
@keyframes scan {
  from { opacity:.3;transform:scaleX(.5); }
  to { opacity:1;transform:scaleX(1); }
}
@media(max-height:650px) {
  #phone { min-height:0;border-radius:35px; }
  #home { padding-top:44px; }
  .widget { height:83px;padding:9px 13px;margin-bottom:10px; }
  .widget-title { font-size:19px;margin-top:4px; }
  .grid { gap:9px 5px; }
  .icon { width:47px;height:47px;font-size:24px; }
  #dock { height:64px;bottom:15px; }
  #dock .icon { width:44px;height:44px; }
}
</style>
</head>

<body>
<div id="stage">
  <main id="phone">
    <div id="wallpaper"></div>

    <div id="status">
      <span id="status-time">9:41</span>
      <span>▮▮▮ ⌁ 100% ▰</span>
    </div>
    <div id="island"></div>

    <!-- KİLİT EKRANI -->
    <section id="lock" class="screen show">
      <div id="date">Pazar, 18 Ekim</div>
      <div id="time">9:41</div>

      <div class="lock-widget">
        <strong>☀️ Güzel bir gün seni bekliyor</strong>
        <span>iPhone Ultra • GoldenRanger23</span>
      </div>

      <button id="unlock">🔓 Kilidi Aç</button>

      <div class="lock-bottom">
        <button class="round" id="flash">🔦</button>
        <button class="round" id="lock-camera">📷</button>
      </div>
    </section>

    <!-- ANA EKRAN -->
    <section id="home" class="screen">
      <div class="widget">
        <div class="widget-top">
          <span id="home-date">BUGÜN</span>
          <span>☀️ 22°</span>
        </div>
        <div class="widget-title">Merhaba! 👋</div>
        <div class="widget-sub">iPhone Ultra'na hoş geldin.</div>
      </div>

      <div class="grid" id="app-grid"></div>

      <button id="search">⌕ Ara</button>
      <div id="dock"></div>
    </section>

    <!-- UYGULAMA EKRANI -->
    <section id="app" class="screen">
      <header id="app-header">
        <button id="back">‹ Ana Ekran</button>
        <span id="app-title">Uygulama</span>
        <span style="width:50px"></span>
      </header>
      <div id="content"></div>
    </section>

    <!-- DENETİM MERKEZİ -->
    <section id="control">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px">
        <strong style="font-size:24px">Denetim Merkezi</strong>
        <button class="round" id="control-close">×</button>
      </div>

      <div class="control-grid">
        <button class="control-tile on" data-toggle="wifi"><span style="font-size:23px">◔</span>Wi-Fi</button>
        <button class="control-tile on" data-toggle="bluetooth"><span style="font-size:23px">ᛒ</span>Bluetooth</button>
        <button class="control-tile" data-toggle="airplane"><span style="font-size:23px">✈️</span>Uçak Modu</button>
        <button class="control-tile" data-toggle="focus"><span style="font-size:23px">☾</span>Odak</button>
      </div>

      <div class="panel" style="margin-top:15px;background:#41465c;color:white">
        ☀️ Parlaklık
        <input id="brightness" type="range" min=".45" max="1.2" value="1" step=".05" style="width:100%">
      </div>
      <div class="panel" style="background:#41465c;color:white">
        🔊 Ses seviyesi
        <input type="range" min="0" max="100" value="65" style="width:100%">
      </div>
    </section>

    <!-- FACE ID ANİMASYONU -->
    <section id="face">
      <div class="face-card">
        <div class="face-icon">▣</div>
        <strong>Face ID</strong>
        <div class="scan"></div>
        <div id="face-text" style="font-size:13px">Yüzün taranıyor…</div>
      </div>
    </section>

    <div id="toast"></div>
    <div class="home-indicator" id="homebar"></div>
  </main>
</div>

<script>
const $ = id => document.getElementById(id);

const apps = [
  {id:"phone",name:"Telefon",emoji:"📞",color:"green"},
  {id:"messages",name:"Mesajlar",emoji:"💬",color:"green"},
  {id:"safari",name:"Safari",emoji:"🧭",color:"blue"},
  {id:"photos",name:"Fotoğraflar",emoji:"🌈",color:"photo"},
  {id:"camera",name:"Kamera",emoji:"📷",color:"grey"},
  {id:"settings",name:"Ayarlar",emoji:"⚙️",color:"grey"},
  {id:"store",name:"App Store",emoji:"A",color:"store"},
  {id:"music",name:"Müzik",emoji:"🎵",color:"pink"},
  {id:"calculator",name:"Hesap Makinesi",emoji:"➗",color:"dark"},
  {id:"notes",name:"Notlar",emoji:"📝",color:"note"},
  {id:"weather",name:"Hava Durumu",emoji:"🌤️",color:"blue"},
  {id:"clock",name:"Saat",emoji:"🕒",color:"dark"},
  {id:"calendar",name:"Takvim",emoji:"📅",color:"red"},
  {id:"files",name:"Dosyalar",emoji:"📁",color:"blue"}
];

const dockApps = ["phone","messages","safari","music"];
const walls = [
  "linear-gradient(145deg,#111947,#633c9b,#f18ca8,#ffcba1)",
  "linear-gradient(145deg,#003b46,#087e8b,#a4d6b4)",
  "linear-gradient(145deg,#10102c,#303f9f,#a54c9d)",
  "linear-gradient(145deg,#08090e,#343a40,#929aa5)"
];

let settings = {wifi:true,bluetooth:true,airplane:false,focus:false,dark:false};
let installed = JSON.parse(localStorage.getItem("g23-installs") || "[]");
let photos = JSON.parse(localStorage.getItem("g23-photos") || "[]");
let toastTimer;
let currentApp = "";
let cameraStream = null;

function toast(text) {
  $("toast").textContent = text;
  $("toast").classList.add("show");
  clearTimeout(toastTimer);
  toastTimer = setTimeout(() => $("toast").classList.remove("show"),2200);
}

function iconHTML(a) {
  return `<button class="app-icon" data-app="${a.id}">
    <span class="icon ${a.color}">${a.emoji}</span>
    <span class="label">${a.name}</span>
  </button>`;
}

function renderIcons() {
  $("app-grid").innerHTML = apps.map(iconHTML).join("");
  $("dock").innerHTML = dockApps.map(id => iconHTML(apps.find(a=>a.id===id)).replace("app-icon","app-icon dock-icon")).join("");

  document.querySelectorAll("[data-app]").forEach(btn => {
    btn.onclick = () => openApp(btn.dataset.app);
  });
}
renderIcons();

function updateTime() {
  const now = new Date();
  $("status-time").textContent = now.toLocaleTimeString("tr-TR",{hour:"2-digit",minute:"2-digit",hour12:false});
  $("time").textContent = now.toLocaleTimeString("tr-TR",{hour:"2-digit",minute:"2-digit",hour12:false});
  $("date").textContent = now.toLocaleDateString("tr-TR",{weekday:"long",day:"numeric",month:"long"});
  $("home-date").textContent = now.toLocaleDateString("tr-TR",{weekday:"long",day:"numeric",month:"long"}).toLocaleUpperCase("tr-TR");
}
updateTime();
setInterval(updateTime,1000);

function showScreen(id) {
  document.querySelectorAll(".screen").forEach(s=>s.classList.remove("show"));
  $(id).classList.add("show");
}

function unlock() {
  $("face").classList.add("show");
  $("face-text").textContent="Yüzün taranıyor…";
  setTimeout(()=>{$("face-text").textContent="Kimlik doğrulandı ✓";},800);
  setTimeout(()=>{
    $("face").classList.remove("show");
    showScreen("home");
    toast("iPhone Ultra açıldı! 🍎");
  },1350);
}
$("unlock").onclick=unlock;
$("flash").onclick=()=>toast("🔦 El feneri açıldı (simülasyon)");
$("lock-camera").onclick=()=>openApp("camera");
$("back").onclick=goHome;
$("homebar").onclick=goHome;
$("search").onclick=()=>openApp("safari");

function goHome() {
  stopCamera();
  $("control").classList.remove("show");
  showScreen("home");
  $("app").classList.remove("darkmode");
  currentApp="";
}

$("status").onclick=()=>$("control").classList.toggle("show");
$("control-close").onclick=()=>$("control").classList.remove("show");

document.querySelectorAll("[data-toggle]").forEach(btn=>{
  btn.onclick=()=>{
    const key=btn.dataset.toggle;
    settings[key]=!settings[key];
    btn.classList.toggle("on",settings[key]);
    if(key==="airplane" && settings.airplane) {
      settings.wifi=false;
      document.querySelector('[data-toggle="wifi"]').classList.remove("on");
    }
    toast(btn.textContent.trim()+" ayarı değişti");
  };
});

$("brightness").oninput=e=>document.documentElement.style.setProperty("--bright",e.target.value);

let touchStartY=0;
$("phone").addEventListener("touchstart",e=>touchStartY=e.touches[0].clientY,{passive:true});
$("phone").addEventListener("touchend",e=>{
  if(touchStartY<65 && e.changedTouches[0].clientY-touchStartY>60) {
    $("control").classList.add("show");
  }
},{passive:true});

function openApp(id) {
  stopCamera();
  currentApp=id;
  const a=apps.find(x=>x.id===id);
  $("app-title").textContent=a ? a.name : "Uygulama";
  $("app").classList.toggle("darkmode",settings.dark);
  $("control").classList.remove("show");
  $("content").innerHTML=appHTML(id);
  showScreen("app");
  bindApp(id);
}

function appHTML(id) {
  switch(id) {
    case "phone":
      return `<div class="hero" style="background:linear-gradient(135deg,#57d779,#148446)">
        <h2>Telefon</h2><p>Arama simülasyonu</p></div>
        <div class="panel"><input id="dial" class="field" placeholder="Numara gir" inputmode="tel" style="text-align:center;font-size:24px"></div>
        <div class="calc" id="dial-pad">
          ${["1","2","3","4","5","6","7","8","9","*","0","#"].map(n=>`<button data-digit="${n}">${n}</button>`).join("")}
          <button id="call" style="grid-column:2/4;border-radius:25px;background:#28c65a;color:white">📞 Ara</button>
        </div>`;

    case "messages":
      return `<p class="muted" style="text-align:center">Mesajlar • Demo</p>
        <div class="panel"><strong>🤖 Golden Bot</strong><p class="muted">Merhaba! iPhone Ultra'ya hoş geldin. 👋</p></div>
        <div id="chat"><div class="row"><span>📩 Bu bir simülasyon mesajıdır.</span></div></div>
        <form id="chat-form" style="display:flex;gap:8px;margin-top:15px">
          <input id="chat-text" class="field" placeholder="Mesaj yaz..." autocomplete="off">
          <button class="primary">↑</button>
        </form>`;

    case "safari":
      return `<div class="hero"><h2>🧭 Safari</h2><p>İnternette gezinmeye başla.</p></div>
        <div style="display:flex;gap:7px;margin-bottom:14px">
          <input id="url" class="field" placeholder="Adres veya arama yaz">
          <button id="go-url" class="primary">Git</button>
        </div>
        <div class="panel"><strong>Sık Kullanılanlar</strong>
          <div class="row"><span>🌐 Google</span><button class="secondary shortcut" data-url="https://www.google.com">Aç</button></div>
          <div class="row"><span>▶️ YouTube</sp

Game Source: iPhone Ultra Simulator | GoldenRanger23

Creator: GoldenRanger23

Libraries: none

Complexity: complex (554 lines, 19.7 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-simulator-goldenranger23-goldenranger23" to link back to the original. Then publish at arcadelab.ai/publish.