Spaces:
Running
Running
| <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> | |