Spaces:

Shinhati2023
/

Metro_UI

Running

File size: 10,805 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Windows Phone 8 OS</title>
    <style>
        /* --- METRO UI STYLING --- */
        :root {
            --theme-color: #00aba9; /* Teal */
            --bg-color: #000000;
            --text-color: #ffffff;
        }

        body {
            margin: 0;
            background-color: #111;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: var(--text-color);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }

        /* The Phone Bezel */
        #phone-case {
            width: 360px;
            height: 640px;
            background: #222;
            border: 10px solid #444;
            border-radius: 20px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
        }

        /* The Screen */
        #screen {
            width: 100%;
            height: 100%;
            background-color: var(--bg-color);
            overflow-y: auto; /* Allow scrolling like a real phone */
            scrollbar-width: none; /* Hide scrollbar Firefox */
            position: relative;
        }
        #screen::-webkit-scrollbar { display: none; } 

        /* Start Screen Header */
        .header {
            padding: 20px 20px 10px 20px;
            font-size: 2rem;
            font-weight: 300;
        }
        .header span { font-weight: bold; }

        /* Tile Grid */
        .tile-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            padding: 0 20px 50px 20px;
        }

        .tile {
            background-color: var(--theme-color);
            height: 150px;
            position: relative;
            cursor: pointer;
            transition: transform 0.1s;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 10px;
            box-sizing: border-box;
        }

        .tile:active { transform: scale(0.98); }
        .tile.wide { grid-column: span 2; }
        .tile.green { background-color: #60a917; }
        .tile.blue { background-color: #2d89ef; }
        .tile.orange { background-color: #fa6800; }
        .tile.purple { background-color: #6459df; }

        .tile-icon { font-size: 40px; margin-bottom: auto; margin-top: 10px;}
        .tile-label { font-size: 14px; }

        /* Live Tile Animation (Gallery) */
        .live-tile-content {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-size: cover;
            background-position: center;
            animation: flipTile 6s infinite;
            opacity: 0.8;
        }
        
        @keyframes flipTile {
            0% { opacity: 0; }
            20% { opacity: 1; }
            80% { opacity: 1; }
            100% { opacity: 0; }
        }

        /* --- APPS (Overlays) --- */
        .app-screen {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: #000;
            transform: translateX(100%); /* Hidden by default */
            transition: transform 0.3s ease-out;
            z-index: 10;
            display: flex;
            flex-direction: column;
        }

        .app-screen.open { transform: translateX(0); }

        .app-header {
            padding: 15px;
            font-size: 24px;
            background: #1f1f1f;
            display: flex;
            align-items: center;
        }

        .back-btn {
            font-size: 24px;
            margin-right: 15px;
            cursor: pointer;
            border: 2px solid white;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 26px;
        }

        /* Gallery App Specifics */
        #gallery-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 5px;
            padding: 5px;
            overflow-y: auto;
        }
        .gallery-img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            background: #333;
        }

        /* Store App Specifics */
        .store-item {
            display: flex;
            padding: 15px;
            border-bottom: 1px solid #333;
        }
        .store-icon { width: 50px; height: 50px; background: grey; margin-right: 15px; }
        .btn-install { 
            margin-left: auto; 
            background: var(--theme-color); 
            border: none; 
            color: white; 
            padding: 5px 15px; 
            cursor: pointer;
        }

        /* Browser App Specifics */
        .browser-bar { display: flex; padding: 5px; background: #333; }
        .browser-bar input { flex: 1; padding: 5px; border: none; }
        iframe { flex: 1; border: none; background: white; }

    </style>
</head>
<body>

    <div id="phone-case">
        <div id="screen">
            <div class="header">Start</div>
            
            <div class="tile-container">
                <div class="tile blue" onclick="openApp('browser-app')">
                    <div class="tile-icon">🌐</div>
                    <div class="tile-label">Internet Explorer</div>
                </div>

                <div class="tile green" onclick="openApp('store-app')">
                    <div class="tile-icon">🛍️</div>
                    <div class="tile-label">Store</div>
                </div>

                <div class="tile wide purple" onclick="openApp('gallery-app')">
                    <div class="live-tile-content" id="live-tile-img"></div>
                    <div class="tile-icon">🖼️</div>
                    <div class="tile-label">Photos</div>
                </div>
                
                <div class="tile orange">
                    <div class="tile-icon">✉️</div>
                    <div class="tile-label">Mail</div>
                </div>
                <div class="tile wide">
                    <div class="tile-icon">📅</div>
                    <div class="tile-label">Calendar</div>
                </div>
            </div>
        </div>

        <div id="gallery-app" class="app-screen">
            <div class="app-header">
                <div class="back-btn" onclick="closeApp('gallery-app')">←</div>
                Camera Roll
            </div>
            <div id="gallery-grid">
                </div>
        </div>

        <div id="store-app" class="app-screen">
            <div class="app-header">
                <div class="back-btn" onclick="closeApp('store-app')">←</div>
                Store
            </div>
            <div style="padding: 10px;">
                <h3>Top Apps</h3>
                <div class="store-item">
                    <div class="store-icon" style="background:#2d89ef"></div>
                    <div>
                        <div>Social Connect</div>
                        <small>Free</small>
                    </div>
                    <button class="btn-install" onclick="alert('Downloading...')">Get</button>
                </div>
                <div class="store-item">
                    <div class="store-icon" style="background:#fa6800"></div>
                    <div>
                        <div>Fruit Slicer</div>
                        <small>$0.99</small>
                    </div>
                    <button class="btn-install" onclick="alert('Purchased!')">Buy</button>
                </div>
            </div>
        </div>

        <div id="browser-app" class="app-screen">
            <div class="app-header">
                <div class="back-btn" onclick="closeApp('browser-app')">←</div>
                Internet
            </div>
            <div class="browser-bar">
                <input type="text" id="url-input" value="https://www.wikipedia.org">
                <button onclick="loadUrl()">Go</button>
            </div>
            <iframe id="browser-frame" src="https://www.wikipedia.org"></iframe>
        </div>

    </div>

    <script>
        // --- CONFIGURATION ---
        // List the EXACT names of files you upload to Hugging Face here
        // If you upload 5 images, add them to this list.
        const uploadedImages = [
            'img1.jpg',
            'img2.jpg',
            'img3.jpg'
        ];

        // --- SYSTEM FUNCTIONS ---

        function openApp(appId) {
            document.getElementById(appId).classList.add('open');
            
            if(appId === 'gallery-app') {
                loadGallery();
            }
        }

        function closeApp(appId) {
            document.getElementById(appId).classList.remove('open');
        }

        // --- GALLERY LOGIC ---
        
        function loadGallery() {
            const grid = document.getElementById('gallery-grid');
            grid.innerHTML = ''; // Clear existing

            // Detect if no images defined
            if (uploadedImages.length === 0) {
                grid.innerHTML = '<p style="padding:20px">No images found. Upload files to Hugging Face and update the code.</p>';
                return;
            }

            uploadedImages.forEach(imgName => {
                const img = document.createElement('img');
                img.src = imgName; // In HF Static space, files are at root ./
                img.className = 'gallery-img';
                img.onerror = function() { this.style.display='none'; }; // Hide if missing
                grid.appendChild(img);
            });
        }

        // --- LIVE TILE LOGIC ---
        function startLiveTile() {
            if (uploadedImages.length > 0) {
                const tile = document.getElementById('live-tile-img');
                // Set initial
                tile.style.backgroundImage = `url('${uploadedImages[0]}')`;
                
                let index = 0;
                setInterval(() => {
                    index = (index + 1) % uploadedImages.length;
                    tile.style.backgroundImage = `url('${uploadedImages[index]}')`;
                }, 6000); // Change image every 6 seconds
            }
        }

        // --- BROWSER LOGIC ---
        function loadUrl() {
            let url = document.getElementById('url-input').value;
            if (!url.startsWith('http')) {
                url = 'https://' + url;
            }
            document.getElementById('browser-frame').src = url;
        }

        // Initialize
        startLiveTile();

    </script>
</body>
</html>