🎮ArcadeLab

iPhone Ultra × Windows 12 — Super Simulator

by GoldenRanger23
40 lines19.6 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">
<meta name="theme-color" content="#0a1020">
<title>iPhone Ultra × Windows 12 — Super Simulator</title>
<style>
:root{--accent:#69a7ff;--glass:rgba(18,27,48,.72);--line:rgba(255,255,255,.16);--text:#f6f8ff;--muted:#b8c5df;--wall1:#051a3c;--wall2:#155a95;--wall3:#6438a9}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:#070b16}button,input,textarea,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #95c5ff;outline-offset:2px}
body{background:radial-gradient(ellipse at 15% 0%,#173b6b 0,transparent 38%),radial-gradient(ellipse at 100% 70%,#3b1c64 0,transparent 35%),#070b16;min-height:100vh}
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px clamp(12px,3vw,30px);background:rgba(6,10,20,.82);backdrop-filter:blur(22px);border-bottom:1px solid #ffffff15}
.brand{display:flex;align-items:center;gap:11px;min-width:0}.brandmark{width:39px;height:39px;border-radius:13px;background:linear-gradient(145deg,#53ccff,#7964ff 55%,#ee7fca);display:grid;place-items:center;font-size:21px;box-shadow:0 8px 24px #467bff45}.brand h1{font-size:clamp(14px,2vw,20px);margin:0;letter-spacing:-.4px}.brand p{margin:3px 0 0;color:#aab7d2;font-size:11px}.top-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}.chip,.topbtn{border:1px solid #ffffff22;background:#ffffff0c;color:#eaf2ff;border-radius:12px;padding:9px 12px;font-size:12px}.topbtn.active{background:#2d78db;border-color:#70aaff}.statusdot{display:inline-block;width:7px;height:7px;background:#5de2ac;border-radius:50%;margin-right:6px;box-shadow:0 0 10px #5de2ac}
.hero{max-width:1500px;margin:0 auto;padding:17px clamp(10px,2vw,24px) 30px}.intro{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 3px 16px}.intro h2{font-size:clamp(18px,2.5vw,25px);margin:0;letter-spacing:-.5px}.intro p{color:var(--muted);margin:5px 0 0;font-size:12px}.live-pill{font-size:11px;border:1px solid #4bd9ab55;color:#a5f5d8;border-radius:999px;padding:7px 10px;white-space:nowrap;background:#0f9b6720}
.devices{display:grid;grid-template-columns:minmax(300px,.84fr) minmax(450px,1.28fr);gap:20px;align-items:start}.device-panel{border-radius:25px;border:1px solid #ffffff1a;background:linear-gradient(145deg,#ffffff0d,#ffffff05);padding:15px;min-width:0;box-shadow:0 20px 70px #0002}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 13px}.panel-title{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:750}.device-icon{width:31px;height:31px;border-radius:10px;background:#ffffff11;display:grid;place-items:center;font-size:17px}.device-state{font-size:10px;color:#b8c8e6;border:1px solid #ffffff18;padding:5px 8px;border-radius:9px}
/* iPhone */
.phone-shell{max-width:375px;margin:0 auto;background:linear-gradient(125deg,#ccd2de,#343a49 20%,#10131c 42%,#aeb9cc 62%,#252b38);padding:7px;border-radius:47px;box-shadow:0 20px 45px #0008,inset 0 0 0 1px #dbe2f355;position:relative}.phone-shell:before{content:"";position:absolute;left:-3px;top:105px;width:3px;height:54px;border-radius:4px 0 0 4px;background:#8992a4}.phone-shell:after{content:"";position:absolute;left:-3px;top:174px;width:3px;height:35px;border-radius:4px 0 0 4px;background:#8992a4}.phone-screen{height:620px;max-height:73vh;min-height:550px;position:relative;overflow:hidden;border-radius:40px;background:linear-gradient(155deg,var(--wall1),var(--wall2) 50%,var(--wall3));isolation:isolate}.phone-screen:before{content:"";position:absolute;width:290px;height:390px;border-radius:50%;background:#44aaff55;filter:blur(48px);top:-120px;right:-120px;pointer-events:none}.phone-screen:after{content:"";position:absolute;width:250px;height:250px;border-radius:50%;background:#d069e755;filter:blur(55px);bottom:10px;left:-120px;pointer-events:none}.dynamic-island{position:absolute;z-index:20;top:9px;left:50%;transform:translateX(-50%);width:98px;height:27px;border-radius:22px;background:#030409;box-shadow:inset 0 1px 2px #ffffff20}.island-camera{position:absolute;right:13px;top:8px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,#172b51 0,#08101d 75%);border:1px solid #162039}.phone-status{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:13px 22px 0;font-size:11px;font-weight:750;letter-spacing:.2px}.phone-status-right{display:flex;gap:5px;align-items:center}.signal{font-size:10px;letter-spacing:-2px}.battery{width:18px;height:9px;border:1px solid currentColor;border-radius:3px;position:relative;margin-left:1px}.battery:after{content:"";position:absolute;right:-3px;top:2px;width:2px;height:3px;background:currentColor;border-radius:0 2px 2px 0}.battery:before{content:"";position:absolute;inset:1px 3px 1px 1px;background:#74e7aa;border-radius:1px}.phone-home{position:relative;z-index:2;padding:0 19px 15px;height:calc(100% - 25px);display:flex;flex-direction:column}.phone-clock{font-size:57px;font-weight:250;line-height:1;text-align:center;margin:40px 0 4px;letter-spacing:-2px;text-shadow:0 2px 18px #0002}.phone-date{text-align:center;font-size:12px;color:#e4edff;margin-bottom:21px}.phone-widgets{display:grid;grid-template-columns:1.2fr 1fr;gap:8px;margin-bottom:18px}.widget{border:1px solid #ffffff2b;background:#ffffff19;backdrop-filter:blur(20px);border-radius:17px;padding:11px;min-height:67px;box-shadow:inset 0 1px #ffffff10}.widget-label{font-size:9px;opacity:.76;text-transform:uppercase;letter-spacing:.9px}.widget-value{font-size:16px;font-weight:730;margin-top:5px}.widget-sub{font-size:9px;opacity:.8;margin-top:3px}.app-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px 9px}.app-icon-btn{color:white;border:0;background:transparent;text-align:center;padding:0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px}.app-icon{width:49px;height:49px;border-radius:15px;background:linear-gradient(145deg,#ffffff3d,#ffffff16);border:1px solid #ffffff35;box-shadow:0 5px 12px #0002,inset 0 1px #ffffff25;display:grid;place-items:center;font-size:24px;transition:transform .16s}.app-icon-btn:active .app-icon{transform:scale(.91)}.app-label{font-size:9px;text-shadow:0 1px 4px #0008;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.phone-spacer{flex:1;min-height:11px}.phone-dock{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:9px;background:#ffffff26;border:1px solid #ffffff24;backdrop-filter:blur(30px);border-radius:22px}.dock-btn{border:0;background:transparent;color:white;padding:0;display:grid;place-items:center}.dock-btn .app-icon{width:46px;height:46px;border-radius:14px;background:#ffffff2c}.home-indicator{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);height:4px;width:105px;border-radius:3px;background:#fff9;z-index:25}.phone-overlay{position:absolute;z-index:18;inset:0;background:#02061180;backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:17px}.phone-overlay.show{display:flex}.phone-overlay-card{background:#101a2ceF;border:1px solid #ffffff2b;border-radius:23px;width:100%;padding:18px;box-shadow:0 20px 70px #0009}.overlay-heading{display:flex;justify-content:space-between;align-items:center;font-weight:750;margin-bottom:14px}.overlay-close{border:0;border-radius:9px;background:#ffffff16;color:white;padding:6px 9px}.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.quick-toggle{padding:14px 10px;text-align:left;border:1px solid #ffffff25;border-radius:14px;background:#ffffff10;color:white}.quick-toggle b{display:block;margin-bottom:5px}.quick-toggle small{color:#bdcae2;font-size:10px}.range-row{font-size:11px;margin-top:16px;color:#dce8ff}.range-row input{width:100%;accent-color:#7eb8ff;margin-top:7px}
/* Windows */
.pc-bezel{background:linear-gradient(150deg,#d0d8e7,#171d2a 14%,#080b12 50%,#4b5569 80%,#0a0d15);padding:7px;border-radius:19px;box-shadow:0 22px 45px #0008}.pc-screen{height:620px;max-height:73vh;min-height:550px;position:relative;border-radius:12px;overflow:hidden;background:radial-gradient(ellipse at 57% 48%,#62d8ff90 0,transparent 22%),radial-gradient(ellipse at 60% 50%,#a566ff99 0,transparent 38%),radial-gradient(ellipse at 54% 73%,#ff70ca3b 0,transparent 31%),linear-gradient(130deg,var(--wall1),var(--wall2) 60%,var(--wall3));isolation:isolate}.pc-screen:before{content:"";position:absolute;width:180px;height:460px;right:25%;top:3%;border-radius:100%;background:#4ec9ff55;filter:blur(35px);transform:rotate(26deg);pointer-events:none}.desktop-icons{position:absolute;z-index:1;top:11px;left:9px;display:grid;grid-template-columns:repeat(2,72px);grid-auto-rows:82px;gap:2px}.desktop-icon{border:1px solid transparent;background:transparent;color:white;text-shadow:0 2px 5px #0009;border-radius:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:10px;padding:4px}.desktop-icon:hover,.desktop-icon:focus-visible{background:#ffffff20;border-color:#ffffff25}.desktop-icon span{font-size:30px;filter:drop-shadow(0 3px 4px #0002)}.wall-logo{position:absolute;right:8%;top:32%;z-index:0;text-align:right;pointer-events:none;text-shadow:0 5px 30px #0005}.wall-logo .windows-word{font-size:clamp(22px,3vw,42px);font-weight:760;letter-spacing:-1.5px}.wall-logo small{display:block;font-size:10px;color:#ffffffbd;margin-top:5px;letter-spacing:2px;text-transform:uppercase}.taskbar{position:absolute;bottom:0;left:0;right:0;height:48px;z-index:12;background:rgba(234,243,255,.83);backdrop-filter:blur(25px);border-top:1px solid #ffffff8c;display:flex;align-items:center;justify-content:center;gap:5px;padding:4px 9px;color:#152643}.task-button{width:37px;height:37px;border:0;border-radius:9px;background:transparent;display:grid;place-items:center;font-size:20px;color:#142947;flex-shrink:0}.task-button:hover,.task-button.active{background:#ffffffd9}.task-search{height:32px;max-width:120px;width:24%;border:1px solid #c3cfdf;border-radius:18px;background:#ffffffbb;color:#24395a;text-align:left;padding:0 10px;font-size:10px;white-space:nowrap;overflow:hidden}.tray{position:absolute;right:7px;display:flex;align-items:center;gap:5px;font-size:9px}.tray button{border:0;background:transparent;border-radius:6px;padding:4px;color:#162746}.win-start{position:absolute;z-index:20;bottom:54px;left:50%;transform:translateX(-50%);width:min(355px,94%);border:1px solid #ffffffb8;border-radius:18px;color:#172844;background:rgba(241,247,255,.94);backdrop-filter:blur(30px);box-shadow:0 25px 70px #0007;padding:17px;display:none}.win-start.show{display:block;animation:pop .16s ease-out}.start-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}.start-avatar{height:32px;width:32px;background:linear-gradient(135deg,#54beff,#8a69ff);border-radius:11px;display:grid;place-items:center;color:white}.start-top strong{font-size:13px}.start-top small{display:block;color:#657895;font-size:10px}.start-search{width:100%;border:1px solid #bdcee3;background:white;border-radius:10px;padding:9px 11px;margin-bottom:13px;color:#172844;font-size:12px}.start-label{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:750;margin-bottom:8px}.start-apps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.start-app{border:0;border-radius:10px;background:transparent;padding:10px 3px;color:#19304e;font-size:10px}.start-app:hover{background:#dceaff}.start-app span{display:block;font-size:22px;margin-bottom:5px}.start-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #d5e0ef;margin-top:11px;padding-top:10px;font-size:10px}.start-footer button{border:0;background:transparent;border-radius:7px;padding:6px;color:#1f3656}.win-window{position:absolute;z-index:9;left:50%;top:44%;transform:translate(-50%,-50%);width:min(460px,94%);max-height:78%;background:rgba(245,249,255,.97);color:#172943;border-radius:14px;border:1px solid #ffffffda;box-shadow:0 25px 80px #0008;overflow:hidden;display:flex;flex-direction:column;animation:pop .15s ease-out}.window-titlebar{height:43px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 9px 0 13px;background:linear-gradient(#f7faff,#eaf1fb);border-bottom:1px solid #d1ddeb;font-size:12px;font-weight:750;flex-shrink:0}.window-title-left{display:flex;align-items:center;gap:8px}.window-controls{display:flex;gap:5px}.window-controls button{width:26px;height:25px;border:0;background:transparent;color:#243b5c;border-radius:6px}.window-controls button:last-child:hover{background:#e2555f;color:white}.window-controls button:hover{background:#d9e6f6}.window-body{overflow:auto;padding:16px;font-size:12px;line-height:1.5}.window-body h3{margin:0 0 11px;font-size:16px}.window-body p{margin:7px 0 12px}.window-body button,.secondary-btn{border:1px solid #b7cce6;border-radius:8px;padding:8px 11px;background:#e6f0ff;color:#183352;font-size:11px}.window-body button.primary{background:#2678e8;color:white;border-color:#2678e8}.field{width:100%;border:1px solid #bfd0e4;border-radius:8px;padding:10px;background:white;color:#172943;font-size:12px;margin:5px 0 10px}.note-area{min-height:190px;resize:vertical}.file-list{border:1px solid #d8e1ec;border-radius:9px;overflow:hidden}.file-row{display:flex;align-items:center;gap:9px;padding:10px;border-bottom:1px solid #e4eaf2}.file-row:last-child{border-bottom:0}.file-row .file-glyph{font-size:23px}.file-row strong{display:block;font-size:11px}.file-row small{display:block;color:#75859c;font-size:9px}.file-row button{margin-left:auto}.calc{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.calc-display{text-align:right;background:#e7eef8;border-radius:10px;padding:15px 10px;font-size:29px;min-height:62px;margin-bottom:9px;overflow:hidden}.calc button{font-size:16px!important;padding:12px 3px!important}.calc button.operator{background:#cde2ff}.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}.calendar div{padding:8px 0;border-radius:6px;font-size:11px}.calendar .dow{font-weight:750;color:#627896}.calendar .today{background:#2678e8;color:white}.settings-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #dbe5f0}.settings-row:last-child{border:0}.settings-row small{display:block;color:#7b8ba2;margin-top:3px}.switch{accent-color:#2478e8;width:18px;height:18px}.browser-bar{display:flex;gap:6px}.browser-bar .field{margin:0;min-width:0}.browser-result{border:1px solid #dbe5f0;border-radius:11px;padding:13px;margin-top:11px;background:white}.browser-result a{display:block;color:#2163bc;margin:4px 0;font-weight:700;text-decoration:none}.game-board{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:290px;margin:12px auto}.game-cell{aspect-ratio:1;border-radius:8px;background:#dce6f4;display:grid;place-items:center;font-size:23px;font-weight:800;color:#274568}.game-cell.filled{background:#8cc1ff;color:#132e56}.sim-toast{position:fixed;z-index:100;bottom:20px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#f3f7ff;color:#172943;padding:12px 16px;border-radius:13px;box-shadow:0 10px 35px #0006;font-size:12px;max-width:90vw;transition:.2s}.sim-toast.show{opacity:1;transform:translate(-50%,0)}.transfer-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:19px;padding:15px 16px;border-radius:17px;border:1px solid #65adff38;background:linear-gradient(110deg,#1a5a9720,#7144a61d)}.transfer-orb{height:39px;width:39px;flex-shrink:0;border-radius:13px;display:grid;place-items:center;background:#3c82e633;font-size:19px}.transfer-copy{flex:1;min-width:180px}.transfer-copy strong{display:block;font-size:12px}.transfer-copy small{display:block;color:#aebfda;font-size:11px;margin-top:4px}.transfer-buttons{display:flex;gap:7px;flex-wrap:wrap}.action{border:1px solid #ffffff22;border-radius:10px;padding:9px 12px;background:#ffffff0c;color:#e6efff;font-size:11px}.action.primary{background:linear-gradient(120deg,#2778e8,#765bea);border-color:transparent}.activity{margin-top:12px;display:flex;gap:8px;align-items:flex-start;font-size:10px;color:#9fb1ce}.activity span{color:#79e3ba}.fineprint{text-align:center;font-size:10px;color:#7485a5;margin:19px 0 2px}.hidden{display:none!important}@keyframes pop{from{opacity:0;transform:translate(-50%,-48%) scale(.98)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(max-width:930px){.devices{grid-template-columns:minmax(0,1fr);max-width:650px;margin:auto}.device-panel{padding:13px}.pc-screen{height:590px;max-height:none}.phone-screen{height:610px;max-height:none}.wall-logo{right:6%}.hero{padding-top:13px}.intro{align-items:flex-start}}
@media(max-width:480px){.topbar{padding:10px}.brand p{display:none}.chip{display:none}.topbtn{padding:8px}.hero{padding-left:8px;padding-right:8px}.device-panel{padding:9px;border-radius:20px}.panel-head{margin-bottom:9px}.phone-shell{padding:5px;border-radius:37px}.phone-screen{border-radius:32px;height:575px;min-height:575px}.phone-home{padding-left:13px;padding-right:13px}.phone-clock{font-size:52px;margin-top:39px}.phone-widgets{gap:6px;margin-bottom:15px}.widget{padding:9px;min-height:62px}.app-grid{gap:15px 5px}.app-icon{height:45px;width:45px;border-radius:14px;font-size:22px}.app-label{font-size:8px}.phone-dock{padding:8px;border-radius:18px}.dock-btn .app-icon{height:42px;width:42px}.pc-screen{height:540px;min-height:540px}.desktop-icons{grid-template-columns:repeat(2,60px);grid-auto-rows:73px;left:4px;top:6px}.desktop-icon span{font-size:25px}.wall-logo{top:38%;right:5%}.task-search{width:25%;padding:0 7px}.task-button{width:32px}.tray{right:3px;gap:1px}.tray button:nth-child(2){display:none}.transfer-bar{padding:12px}.transfer-buttons{width:100%}.transfer-buttons .action{flex:1}}
</style>
</head>
<body>
<header class="topbar">
  <div class="brand"><div class="brandmark">✦</div><div><h1>iPhone Ultra × Windows 12</h1><p>SUPER SIMULATOR · çift cihaz deneyimi</p></div></div>
  <div class="top-actions"><span class="chip"><span class="statusdot"></span>Demo bağlantısı hazır</span><button class="topbtn active" data-layout="both">İkisini göster</button><button class="topbtn" data-layout="phone">📱 Telefon</button><button class="topbtn" data-layout="pc">💻 Bilgisayar</button></div>
</header>
<main class="hero">
  <div class="intro"><div><h2>Hayalindeki teknoloji masası.</h2><p>Uygulamaları aç, ayarları değiştir ve iki simüle edilmiş cihaz arasında dosya gönder.</p></div><div class="live-pill">● SİMÜLASYON AKTİF</div></div>
  <div class="devices" id="devices">
    <section class="device-panel" id="phonePanel">
      <div class="panel-head"><div class="panel-title"><span class="device-icon">📱</span> iPhone Ultra</div><span class="device-state">Ultra • Concept OS</span></div>
      <div class="phone-shell"><div class="phone-screen" id="phoneScreen">
        <div class="dynamic-island"><span class="island-camera"></span></div>
        <div class="phone-status"><span id="phoneStatusClock">9:41</span><span class="phone-status-right"><span class="signal">▂▄▆</span> ᯤ <span class="battery"></span></span></div>
        <div class="phone-home">
          <div class="phone-clock" id="phoneClock">9:41</div><div class="phone-date" id="phoneDate">Pazar, 18 Ekim</div>
          <div class="phone-widgets"><div class="widget"><div class="widget-label">Bugün</div><div class="widget-value" id="phoneWeather">☀️ 22°</div><div class="widget-sub">Hayal şehri</div></div><div class="widget"><div class="widget-label">Bağlantı</div><div class="widget-value">💻 H

Game Source: iPhone Ultra × Windows 12 — Super Simulator

Creator: GoldenRanger23

Libraries: none

Complexity: simple (40 lines, 19.6 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-windows-12-super-simulator-goldenranger23" to link back to the original. Then publish at arcadelab.ai/publish.