Spaces:

Shinhati2023
/

Metro_UI

Running

App Files Files Community

Shinhati2023 commited on Nov 29, 2025

Commit

4f82099

verified ·

1 Parent(s): ec6174a

Create index.html

Browse files

Files changed (1) hide show

index.html +334 -18

index.html CHANGED Viewed

@@ -1,19 +1,335 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!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>