iPhone 17 Pro Max - iOS 27 Liquid Glass

by LunarGalaxy87
128 lines5.7 KB
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iPhone 17 Pro Max - iOS 27 Liquid Glass</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body { background: #0c0c0c; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; font-family: 'SF Pro Display', -apple-system, sans-serif; overflow: hidden; }
        
        .phone-frame { 
            width: 360px; height: 780px; background: #000; border-radius: 65px; padding: 10px; 
            position: relative; border: 4px solid #222; box-shadow: 0 30px 80px rgba(0,0,0,0.8);
        }
        
        .screen { 
            width: 100%; height: 100%; background: linear-gradient(160deg, #1e293b, #0f172a, #000); 
            border-radius: 55px; overflow: hidden; position: relative; color: #fff;
        }
        
        /* Advanced Liquid Glass Layers */
        .glass-layer { 
            background: rgba(255, 255, 255, 0.08); 
            backdrop-filter: blur(45px) saturate(180%); 
            -webkit-backdrop-filter: blur(45px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.15);
        }
        
        .app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 40px 25px; }
        .app-icon { 
            width: 62px; height: 62px; border-radius: 24px; display: flex; flex-direction: column; 
            justify-content: center; align-items: center; cursor: pointer; transition: transform 0.4s ease;
            background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.05);
        }
        .app-icon:active { transform: scale(0.8); }
        
        #app-view { 
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; 
            transform: translateY(100%); transition: transform 0.7s cubic-bezier(0.3, 0, 0, 1); 
            border-radius: 55px; display: flex; flex-direction: column;
        }
        .active-app { transform: translateY(0) !important; }
        
        #camera-view { width: 100%; height: 100%; object-fit: cover; }
        .btn-exit { 
            position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); 
            padding: 12px 30px; border-radius: 30px; cursor: pointer; font-weight: 500;
            background: rgba(255,255,255,0.15); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.2);
        }
    </style>
</head>
<body>

<div class="phone-frame">
    <div class="screen">
        <div class="w-[120px] h-[30px] bg-black rounded-[20px] mx-auto mt-8"></div>
        <div class="text-center mt-2 text-sm font-medium tracking-tight text-white/70" id="clock">00:00</div>
        
        <div class="app-grid" id="grid"></div>

        <div class="absolute bottom-10 w-[85%] left-[7.5%] py-5 px-6 glass-layer rounded-[40px] flex justify-between">
            <div class="app-icon" onclick="openApp('Phone')">📞</div>
            <div class="app-icon" onclick="openApp('Safari')">🌐</div>
            <div class="app-icon" onclick="openApp('Music')">🎵</div>
            <div class="app-icon" onclick="openApp('Settings')">⚙️</div>
        </div>
    </div>

    <div id="app-view" class="glass-layer">
        <div id="app-content" class="flex-grow flex flex-col justify-center items-center text-white p-8"></div>
        <button class="btn-exit" onclick="closeApp()">Dismiss</button>
    </div>
</div>

<script>
    const apps = [
        { name: 'Calendar', icon: '📅', content: '📅 Liquid Flow: Your day is seamless.' },
        { name: 'Camera', icon: '📷', content: 'Camera' }, 
        { name: 'Mail', icon: '✉️', content: '✉️ Neural Inbox: Synced.' },
        { name: 'Maps', icon: '🗺️', content: '🗺️ Fluid Routing: Active.' },
        { name: 'Messages', icon: '💬', content: '💬 Flow State: Conversations active.' },
        { name: 'Notes', icon: '📝', content: '📝 Liquid Thoughts: Saving...' }
    ];

    const grid = document.getElementById('grid');
    apps.forEach(app => {
        const div = document.createElement('div');
        div.className = 'app-icon';
        div.innerHTML = `<span>${app.icon}</span><span class="text-[9px] mt-1 text-white/60">${app.name}</span>`;
        div.onclick = () => openApp(app.name);
        grid.appendChild(div);
    });

    async function openApp(name) {
        const content = document.getElementById('app-content');
        const view = document.getElementById('app-view');
        content.innerHTML = `<h1 class="text-4xl font-light mb-6 opacity-90">${name}</h1>`;
        
        if (name === 'Camera') {
            content.innerHTML = `<video id="camera-view" autoplay playsinline class="rounded-3xl"></video>`;
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } });
                document.getElementById('camera-view').srcObject = stream;
            } catch (e) { content.innerHTML = "Access Required."; }
        } else {
            const appData = apps.find(a => a.name === name);
            content.innerHTML += `<p class="text-xl opacity-70">${appData.content}</p>`;
        }
        view.classList.add('active-app');
    }

    function closeApp() {
        const video = document.querySelector('video');
        if (video && video.srcObject) video.srcObject.getTracks().forEach(track => track.stop());
        document.getElementById('app-view').classList.remove('active-app');
    }

    setInterval(() => {
        const now = new Date();
        document.getElementById('clock').innerText = now.getHours() + ":" + now.getMinutes().toString().padStart(2, '0');
    }, 1000);
</script>
</body>
</html>

```
Game Source: iPhone 17 Pro Max - iOS 27 Liquid Glass

Creator: LunarGalaxy87
Libraries: none
Complexity: moderate (128 lines, 5.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-17-pro-max-ios-27-lunargalaxy87" to link back to the original. Then publish at arcadelab.ai/publish.