Spaces:

udd542
/

anycoder-95d68642

Running

App Files Files Community

udd542 commited on Jan 16

Commit

f02dd8f

verified ·

1 Parent(s): 17756c3

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +358 -279

index.html CHANGED Viewed

@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Android OS Simulator | Web Experience</title>
   <!-- Importing FontAwesome for Icons -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@@ -17,69 +17,80 @@
       --text-dark: #202124;
       --text-light: #5f6368;
       --white: #ffffff;
-      --shadow-soft: 0 2px 5px rgba(0,0,0,0.1);
-      --shadow-float: 0 10px 25px rgba(0,0,0,0.2);
-      --app-radius: 16px;
-      --phone-radius: 40px;
     }
     * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
-      user-select: none; /* Prevent text selection for app-like feel */
       -webkit-tap-highlight-color: transparent;
     }
     body {
-      background-color: #e0e0e0;
-      background-image: radial-gradient(#d1d1d1 1px, transparent 1px);
-      background-size: 20px 20px;
       font-family: 'Roboto', 'Segoe UI', sans-serif;
       height: 100vh;
       display: flex;
       justify-content: center;
       align-items: center;
       overflow: hidden;
     }
-    /* --- PHONE FRAME --- */
     .phone-frame {
-      width: 380px;
-      height: 780px;
-      background: var(--phone-border);
       border-radius: var(--phone-radius);
-      box-shadow:
-        0 0 0 4px #333,
-        0 0 0 7px #000,
-        0 20px 50px rgba(0,0,0,0.5);
       position: relative;
-      padding: 12px; /* Bezel thickness */
     }
-    /* Notch */
     .notch {
       position: absolute;
-      top: 12px;
       left: 50%;
       transform: translateX(-50%);
-      width: 150px;
-      height: 28px;
       background: #000;
-      border-bottom-left-radius: 16px;
-      border-bottom-right-radius: 16px;
       z-index: 100;
       display: flex;
       justify-content: center;
       align-items: center;
     }
     .camera {
-      width: 10px;
-      height: 10px;
       background: #1a1a1a;
       border-radius: 50%;
-      border: 2px solid #333;
     }
     /* Screen Area */
@@ -87,7 +98,7 @@
       width: 100%;
       height: 100%;
       background: #fff;
-      border-radius: 32px;
       overflow: hidden;
       position: relative;
       display: flex;
@@ -96,226 +107,286 @@
     /* --- STATUS BAR --- */
     .status-bar {
-      height: 40px; /* Increased to cover notch area conceptually */
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: 0 20px;
-      font-size: 0.8rem;
-      font-weight: 500;
       color: #000;
       z-index: 90;
-      padding-top: 10px;
     }
     .status-icons {
       display: flex;
-      gap: 8px;
-      font-size: 0.9rem;
     }
     /* --- NAVIGATION BAR --- */
     .nav-bar {
-      height: 60px;
-      background: #fff;
       display: flex;
       justify-content: space-around;
       align-items: center;
-      border-top: 1px solid #eee;
       z-index: 90;
-      padding-bottom: 5px;
     }
     .nav-btn {
-      width: 40px;
-      height: 40px;
       display: flex;
       justify-content: center;
       align-items: center;
       border-radius: 50%;
       cursor: pointer;
-      transition: background 0.2s;
       color: #333;
     }
     .nav-btn:active {
-      background: rgba(0,0,0,0.1);
     }
     .nav-home-circle {
-      width: 50px;
-      height: 18px;
-      border: 2px solid #333;
-      border-radius: 10px;
     }
     /* --- APP VIEWS --- */
     .view {
       flex: 1;
       position: absolute;
-      top: 40px; /* Below status bar */
       left: 0;
       width: 100%;
-      bottom: 60px; /* Above nav bar */
       background: #fff;
       overflow-y: auto;
-      transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
       transform: scale(1);
       opacity: 1;
-      display: none; /* Hidden by default */
     }
     .view.active {
       display: block;
       z-index: 10;
-      animation: openApp 0.3s forwards;
     }
     .view.hidden {
       display: none;
     }
-    @keyframes openApp {
-      from { transform: scale(0.9); opacity: 0; }
-      to { transform: scale(1); opacity: 1; }
     }
     /* --- HOME SCREEN --- */
     #home-view {
-      display: flex; /* Override default block for flex layout */
       flex-direction: column;
-      background: url('https://picsum.photos/seed/wallpaper2/400/800') no-repeat center center/cover;
     }
     .home-top-widget {
-      padding: 20px;
       color: white;
-      text-shadow: 0 2px 4px rgba(0,0,0,0.5);
     }
     .clock-widget {
-      font-size: 3.5rem;
       font-weight: 200;
     }
     .date-widget {
-      font-size: 1.1rem;
     }
     .app-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
-      gap: 15px;
-      padding: 20px;
       margin-top: auto;
-      margin-bottom: 20px;
     }
     .app-icon-container {
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: 5px;
       cursor: pointer;
     }
     .app-icon {
-      width: 55px;
-      height: 55px;
-      border-radius: 14px;
       background: white;
       display: flex;
       justify-content: center;
       align-items: center;
-      font-size: 1.5rem;
-      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
-      transition: transform 0.1s;
-    }
-    .app-icon:active {
-      transform: scale(0.9);
     }
     .app-name {
       color: white;
-      font-size: 0.75rem;
-      text-shadow: 0 1px 2px rgba(0,0,0,0.8);
       text-align: center;
     }
     /* Specific App Colors */
-    .icon-playstore { background: linear-gradient(135deg, #0F9D58 0%, #009688 100%); color: white; }
-    .icon-memory { background: linear-gradient(135deg, #4285F4 0%, #1976D2 100%); color: white; }
-    .icon-settings { background: #607D8B; color: white; }
-    .icon-browser { background: linear-gradient(135deg, #EA4335 0%, #C5221F 100%); color: white; }
-    .icon-camera { background: #333; color: white; }
-    .icon-music { background: linear-gradient(135deg, #FF4081 0%, #C2185B 100%); color: white; }
-    .icon-messages { background: linear-gradient(135deg, #1A73E8 0%, #0D47A1 100%); color: white; }
-    .icon-files { background: #FFC107; color: #333; }
     /* --- PLAY STORE APP --- */
     .store-header {
-      padding: 10px 15px;
       background: #fff;
       position: sticky;
       top: 0;
       z-index: 20;
-      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
     }
     .search-bar {
       background: #f1f3f4;
-      border-radius: 8px;
-      padding: 8px 15px;
       display: flex;
       align-items: center;
-      gap: 10px;
       color: #5f6368;
     }
     .search-bar input {
       border: none;
       background: transparent;
       outline: none;
       width: 100%;
-      font-size: 0.9rem;
     }
     .store-content {
-      padding: 15px;
     }
     .section-title {
-      font-size: 1.1rem;
-      font-weight: 600;
-      margin-bottom: 15px;
       margin-top: 10px;
     }
     .app-card {
       display: flex;
-      gap: 15px;
-      margin-bottom: 20px;
       cursor: pointer;
-      padding: 10px;
-      border-radius: 12px;
       transition: background 0.2s;
     }
     .app-card:active {
-      background: #f1f3f4;
     }
     .app-card-img {
-      width: 70px;
-      height: 70px;
-      border-radius: 12px;
       background: #eee;
       display: flex;
       justify-content: center;
       align-items: center;
-      font-size: 2rem;
       color: #555;
     }
     .app-card-info {
@@ -326,76 +397,78 @@
     }
     .app-card-title {
-      font-weight: 600;
-      font-size: 1rem;
     }
     .app-card-desc {
-      font-size: 0.8rem;
       color: var(--text-light);
-      margin-top: 2px;
     }
     .app-rating {
-      font-size: 0.75rem;
       color: var(--text-light);
-      margin-top: 4px;
     }
     .install-btn {
       background: var(--primary-green);
       color: white;
       border: none;
-      padding: 6px 16px;
-      border-radius: 4px;
-      font-weight: 500;
-      font-size: 0.85rem;
-      height: 35px;
       cursor: pointer;
       align-self: center;
-      transition: background 0.2s;
     }
-    .install-btn:hover {
-      background: #00704a;
     }
     .install-btn.downloading {
       background: transparent;
       color: var(--primary-green);
       cursor: default;
     }
     /* --- MEMORY/STORAGE APP --- */
     .storage-header {
       background: var(--primary-blue);
       color: white;
-      padding: 30px 20px 50px;
-      border-bottom-left-radius: 30px;
-      border-bottom-right-radius: 30px;
       text-align: center;
     }
     .storage-chart-container {
-      width: 150px;
-      height: 150px;
       margin: 0 auto;
       position: relative;
       border-radius: 50%;
-      background: conic-gradient(
-        var(--primary-blue) 0% 45%,
-        #FFC107 45% 70%,
-        #EA4335 70% 85%,
-        #eee 85% 100%
-      );
       display: flex;
       justify-content: center;
       align-items: center;
     }
     .storage-inner-circle {
-      width: 120px;
-      height: 120px;
       background: var(--primary-blue);
       border-radius: 50%;
       display: flex;
@@ -405,40 +478,41 @@
     }
     .storage-gb {
-      font-size: 1.8rem;
       font-weight: bold;
     }
     .storage-label {
-      font-size: 0.8rem;
       opacity: 0.9;
     }
     .storage-list {
-      padding: 20px;
-      margin-top: -30px;
     }
     .storage-item {
       background: white;
-      padding: 15px;
-      border-radius: 12px;
-      margin-bottom: 10px;
       display: flex;
       align-items: center;
-      gap: 15px;
       box-shadow: var(--shadow-soft);
     }
     .s-icon {
-      width: 40px;
-      height: 40px;
-      border-radius: 8px;
-      background: #eee;
       display: flex;
       justify-content: center;
       align-items: center;
       color: #555;
     }
     .s-info {
@@ -446,44 +520,55 @@
     }
     .s-name {
-      font-size: 0.9rem;
-      font-weight: 500;
     }
     .s-size {
-      font-size: 0.8rem;
       color: var(--text-light);
     }
     .progress-bar {
-      height: 4px;
       background: #eee;
-      border-radius: 2px;
       width: 100%;
-      margin-top: 8px;
     }
     .progress-fill {
       height: 100%;
-      border-radius: 2px;
     }
     /* --- SETTINGS APP --- */
     .settings-list {
-      padding: 10px;
     }
     .setting-item {
-      padding: 15px;
-      border-bottom: 1px solid #eee;
       display: flex;
       align-items: center;
-      gap: 15px;
       cursor: pointer;
     }
-    .setting-item:active { background: #fafafa; }
-    .setting-icon { color: var(--primary-blue); width: 24px; text-align: center; }
-    /* --- APP DETAIL MODAL (Simulated) --- */
     .app-detail-view {
       display: none;
       position: absolute;
@@ -494,65 +579,90 @@
       background: white;
       z-index: 50;
       flex-direction: column;
-      animation: openApp 0.2s forwards;
     }
     .detail-hero {
-      padding: 20px;
       display: flex;
-      gap: 20px;
       align-items: center;
     }
     .detail-icon {
-      width: 72px;
-      height: 72px;
-      border-radius: 16px;
       background: #eee;
       display: flex;
       justify-content: center;
       align-items: center;
-      font-size: 2rem;
     }
-    .detail-info h2 { font-size: 1.2rem; margin-bottom: 5px; }
-    .detail-info p { color: var(--text-light); font-size: 0.9rem; }
     .detail-actions {
-      padding: 0 20px 20px;
       display: flex;
-      gap: 10px;
     }
     .detail-stats {
-      padding: 20px;
       border-top: 1px solid #eee;
       display: flex;
       justify-content: space-around;
       text-align: center;
     }
-    .stat-box h4 { font-size: 1.2rem; color: var(--text-dark); }
-    .stat-box span { font-size: 0.8rem; color: var(--text-light); }
     /* --- ANYCODER LINK --- */
     .anycoder-link {
       text-align: center;
-      margin-top: 20px;
-      font-size: 0.9rem;
-      color: #555;
     }
     .anycoder-link a {
-      color: var(--primary-blue);
       text-decoration: none;
       font-weight: bold;
     }
     /* Scrollbar hiding */
     ::-webkit-scrollbar {
-        display: none;
     }
   </style>
 </head>
@@ -570,11 +680,14 @@
     <div class="screen">
       <!-- Status Bar -->
       <div class="status-bar">
-        <div id="status-time">12:00</div>
         <div class="status-icons">
           <i class="fa-solid fa-wifi"></i>
           <i class="fa-solid fa-signal"></i>
-          <i class="fa-solid fa-battery-three-quarters"></i>
         </div>
       </div>
@@ -624,7 +737,7 @@
       <!-- VIEW: PLAY STORE -->
       <div id="playstore-view" class="view">
         <div class="store-header">
-          <div style="font-weight: bold; font-size: 1.1rem; margin-bottom: 10px; color: var(--primary-green);">
             Google Play
           </div>
           <div class="search-bar">
@@ -635,7 +748,7 @@
         <div class="store-content">
           <div class="section-title">Recommended for you</div>
           <!-- App 1 -->
           <div class="app-card" onclick="openAppDetail('WhatsApp', '#25D366', 'fa-whatsapp', '4.5', 'Social')">
             <div class="app-card-img" style="background: #25D366; color: white;">
@@ -653,14 +766,16 @@
           <!-- App 2 -->
           <div class="app-card" onclick="openAppDetail('Instagram', '#C13584', 'fa-instagram', '4.2', 'Photo & Video')">
-            <div class="app-card-img" style="background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); color: white;">
               <i class="fa-brands fa-instagram"></i>
             </div>
             <div class="app-card-info">
               <div class="app-card-title">Instagram</div>
               <div class="app-card-desc">Connect with friends, share what you're up to.</div>
               <div class="app-rating">
-                <i class="fa-solid fa-star" style="color:#FFC107"></i> 4.2 <span style="margin-left:5px">• Photo & Video</span>
               </div>
             </div>
             <button class="install-btn" onclick="event.stopPropagation(); startDownload(this)">Install</button>
@@ -680,7 +795,7 @@
             </div>
             <button class="install-btn" onclick="event.stopPropagation(); startDownload(this)">Install</button>
           </div>
           <div class="section-title">Top Charts</div>
           <!-- App 4 -->
           <div class="app-card" onclick="openAppDetail('TikTok', '#000000', 'fa-tiktok', '4.4', 'Entertainment')">
@@ -691,30 +806,31 @@
               <div class="app-card-title">TikTok</div>
               <div class="app-card-desc">Real People. Real Videos.</div>
               <div class="app-rating">
-                <i class="fa-solid fa-star" style="color:#FFC107"></i> 4.4 <span style="margin-left:5px">• Entertainment</span>
               </div>
             </div>
             <button class="install-btn" onclick="event.stopPropagation(); startDownload(this)">Update</button>
           </div>
         </div>
-        <!-- Detail View Overlay (Inside Play Store) -->
         <div id="app-detail-overlay" class="app-detail-view">
-           <div style="padding: 10px; display: flex; align-items: center; gap: 10px;">
-             <i class="fa-solid fa-arrow-left" style="font-size: 1.2rem; cursor: pointer;" onclick="closeAppDetail()"></i>
-             <span style="font-weight: 600; font-size: 1.1rem; flex: 1; text-align: center; margin-right: 24px;">App Details</span>
-           </div>
-           <div id="detail-content"></div>
         </div>
       </div>
       <!-- VIEW: MEMORY APP -->
       <div id="memory-view" class="view">
         <div class="storage-header">
-          <h2 style="margin-bottom: 20px;">Storage Manager</h2>
           <div class="storage-chart-container">
             <div class="storage-inner-circle">
-              <div class="storage-gb">85<span style="font-size: 1rem;">GB</span></div>
               <div class="storage-label">Used of 128 GB</div>
             </div>
           </div>
@@ -726,7 +842,9 @@
             <div class="s-info">
               <div class="s-name">Games</div>
               <div class="s-size">38 GB</div>
-              <div class="progress-bar"><div class="progress-fill" style="width: 70%; background: var(--primary-blue);"></div></div>
             </div>
           </div>
@@ -735,7 +853,9 @@
             <div class="s-info">
               <div class="s-name">Images</div>
               <div class="s-size">22 GB</div>
-              <div class="progress-bar"><div class="progress-fill" style="width: 45%; background: #FFC107;"></div></div>
             </div>
           </div>
@@ -744,7 +864,9 @@
             <div class="s-info">
               <div class="s-name">Videos</div>
               <div class="s-size">15 GB</div>
-              <div class="progress-bar"><div class="progress-fill" style="width: 30%; background: #EA4335;"></div></div>
             </div>
           </div>
@@ -753,7 +875,9 @@
             <div class="s-info">
               <div class="s-name">System</div>
               <div class="s-size">10 GB</div>
-              <div class="progress-bar"><div class="progress-fill" style="width: 20%; background: #888;"></div></div>
             </div>
           </div>
         </div>
@@ -761,7 +885,7 @@
       <!-- VIEW: SETTINGS -->
       <div id="settings-view" class="view">
-        <h2 style="padding: 20px; font-weight: 500;">Settings</h2>
         <div class="settings-list">
           <div class="setting-item">
             <i class="fa-solid fa-wifi setting-icon"></i>
@@ -796,29 +920,33 @@
         </div>
       </div>
-      <!-- Placeholder Views for other apps -->
-      <div id="browser-view" class="view" style="background: #f1f3f4; display: flex; justify-content: center; align-items: center; color: #999;">
         <div style="text-align: center;">
-          <i class="fa-brands fa-chrome" style="font-size: 4rem; margin-bottom: 20px;"></i>
-          <p>Chrome Browser Placeholder</p>
         </div>
       </div>
-      <div id="camera-view" class="view" style="background: #000; display: flex; justify-content: center; align-items: center;">
-         <i class="fa-solid fa-camera-retro" style="font-size: 3rem; color: #333;"></i>
-         <div style="position: absolute; bottom: 20px; width: 60px; height: 60px; border-radius: 50%; border: 4px solid white; background: rgba(255,255,255,0.3);"></div>
       </div>
       <!-- Navigation Bar -->
       <div class="nav-bar">
         <div class="nav-btn" onclick="handleNav('back')">
-          <i class="fa-solid fa-chevron-left" style="font-size: 1.2rem;"></i>
         </div>
         <div class="nav-btn" onclick="handleNav('home')">
           <div class="nav-home-circle"></div>
         </div>
         <div class="nav-btn" onclick="handleNav('recent')">
-          <i class="fa-solid fa-square" style="font-size: 1.2rem;"></i>
         </div>
       </div>
@@ -828,26 +956,20 @@
   <script>
     // --- Navigation State ---
     let currentApp = null;
-    let appHistory = []; // To handle Back button
     function openApp(appId) {
-      // Push current state to history if not home
       if (currentApp && currentApp !== 'home') {
         appHistory.push(currentApp);
       }
-      // Hide all views
       document.querySelectorAll('.view').forEach(el => el.classList.remove('active'));
-      // Show target view
       const target = document.getElementById(appId + '-view');
       if (target) {
         target.classList.add('active');
         currentApp = appId;
       } else {
-        // If view doesn't exist, show a generic placeholder or alert
-        console.log("App " + appId + " not fully implemented.");
-        // Fallback to browser view for demo purposes
         document.getElementById('browser-view').classList.add('active');
         currentApp = 'browser';
       }
@@ -859,8 +981,7 @@
       } else if (action === 'back') {
         goBack();
       } else if (action === 'recent') {
-        // Simulate recent apps switcher
-        goHome(); // For simplicity, just go home
       }
     }
@@ -874,8 +995,6 @@
     function goBack() {
       if (appHistory.length > 0) {
         const prevApp = appHistory.pop();
-        // Swap logic because openApp pushes to history, but here we just want to show the previous
-        // A simple stack pop approach
         document.querySelectorAll('.view').forEach(el => el.classList.remove('active'));
         document.getElementById(prevApp + '-view').classList.add('active');
         currentApp = prevApp;
@@ -884,16 +1003,16 @@
       }
     }
-    // --- Play Store Logic ---
     function startDownload(btn) {
       btn.classList.add('downloading');
       btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i>';
-      // Simulate Fast Download
       setTimeout(() => {
         btn.innerHTML = '99%';
-      }, 500);
       setTimeout(() => {
         btn.classList.remove('downloading');
@@ -901,7 +1020,7 @@
         btn.style.color = '#01875f';
         btn.style.border = '1px solid #ddd';
         btn.innerHTML = 'Open';
-      }, 1200);
     }
     function openAppDetail(name, color, iconClass, rating, category) {
@@ -918,12 +1037,12 @@
             <p>${category}</p>
           </div>
         </div>
-        <div style="padding: 0 20px;">
-            <button class="install-btn" style="width: 100%; height: 45px; font-size: 1rem;" onclick="startDownload(this); this.innerText='Installing...';">Install</button>
         </div>
         <div class="detail-stats">
           <div class="stat-box">
-            <h4>${rating} <i class="fa-solid fa-star" style="font-size: 0.8rem; color:#FFC107"></i></h4>
             <span>Rating</span>
           </div>
           <div class="stat-box">
@@ -933,44 +1052,4 @@
           <div class="stat-box">
             <h4>E</h4>
             <span>Everyone</span>
-          </div>
-        </div>
-        <div style="padding: 20px; font-size: 0.9rem; color: #555; line-height: 1.5;">
-          <p>Welcome to ${name}. This is a simulated description of the app. Experience the best features available on the Android platform. Fast, secure, and reliable.</p>
-        </div>
-      `;
-      overlay.style.display = 'flex';
-    }
-    function closeAppDetail() {
-      document.getElementById('app-detail-overlay').style.display = 'none';
-    }
-    // --- System Clock ---
-    function updateClocks() {
-      const now = new Date();
-      let hours = now.getHours();
-      let minutes = now.getMinutes();
-      const ampm = hours >= 12 ? 'PM' : 'AM';
-      hours = hours % 12;
-      hours = hours ? hours : 12;
-      minutes = minutes < 10 ? '0' + minutes : minutes;
-      const timeString = hours + ':' + minutes;
-      document.getElementById('status-time').innerText = timeString;
-      document.getElementById('clock-widget').innerText = timeString;
-      const options = { weekday: 'short', month: 'short', day: 'numeric' };
-      document.getElementById('date-widget').innerText = now.toLocaleDateString('en-US', options);
-    }
-    setInterval(updateClocks, 1000);
-    updateClocks();
-  </script>
-</body>
-</html>

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Android 8K Ultra Simulator | Fast Experience</title>
   <!-- Importing FontAwesome for Icons -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
       --text-dark: #202124;
       --text-light: #5f6368;
       --white: #ffffff;
+      --shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.1);
+      --shadow-float: 0 20px 50px rgba(0, 0, 0, 0.3);
+      --app-radius: 20px;
+      --phone-radius: 45px;
+      /* Sizing Variables for "Big Display" */
+      --phone-width: min(90vw, 550px);
+      --phone-height: min(95vh, 950px);
     }
     * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
+      user-select: none;
       -webkit-tap-highlight-color: transparent;
+      /* Hardware Acceleration Hint */
+      backface-visibility: hidden;
     }
     body {
+      background-color: #121212;
+      /* Darker background to make the 8K screen pop */
+      background-image: radial-gradient(#1f1f1f 1px, transparent 1px);
+      background-size: 30px 30px;
       font-family: 'Roboto', 'Segoe UI', sans-serif;
       height: 100vh;
       display: flex;
+      flex-direction: column;
       justify-content: center;
       align-items: center;
       overflow: hidden;
     }
+    /* --- PHONE FRAME (Larger) --- */
     .phone-frame {
+      width: var(--phone-width);
+      height: var(--phone-height);
+      background: #000;
       border-radius: var(--phone-radius);
+      box-shadow:
+        0 0 0 3px #333,
+        0 0 0 8px #000,
+        0 30px 60px rgba(0, 0, 0, 0.7);
       position: relative;
+      padding: 14px;
+      transform: translateZ(0); /* GPU Boost */
+      transition: transform 0.3s ease;
     }
+    /* Notch - Slimmer for modern look */
     .notch {
       position: absolute;
+      top: 14px;
       left: 50%;
       transform: translateX(-50%);
+      width: 180px;
+      height: 32px;
       background: #000;
+      border-bottom-left-radius: 20px;
+      border-bottom-right-radius: 20px;
       z-index: 100;
       display: flex;
       justify-content: center;
       align-items: center;
     }
     .camera {
+      width: 14px;
+      height: 14px;
       background: #1a1a1a;
       border-radius: 50%;
+      border: 3px solid #222;
+      box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
     }
     /* Screen Area */
       width: 100%;
       height: 100%;
       background: #fff;
+      border-radius: 38px;
       overflow: hidden;
       position: relative;
       display: flex;
     /* --- STATUS BAR --- */
     .status-bar {
+      height: 50px;
       display: flex;
       justify-content: space-between;
       align-items: center;
+      padding: 0 25px;
+      font-size: 0.95rem;
+      font-weight: 600;
       color: #000;
       z-index: 90;
+      padding-top: 15px;
     }
     .status-icons {
       display: flex;
+      gap: 10px;
+      font-size: 1rem;
+      align-items: center;
+    }
+    .badge-8k {
+      font-size: 0.7rem;
+      background: #000;
+      color: #fff;
+      padding: 2px 6px;
+      border-radius: 4px;
+      margin-right: 8px;
+      font-weight: 800;
+      letter-spacing: 0.5px;
     }
     /* --- NAVIGATION BAR --- */
     .nav-bar {
+      height: 70px;
+      background: rgba(255, 255, 255, 0.95);
+      backdrop-filter: blur(10px);
       display: flex;
       justify-content: space-around;
       align-items: center;
       z-index: 90;
+      padding-bottom: 10px;
     }
     .nav-btn {
+      width: 50px;
+      height: 50px;
       display: flex;
       justify-content: center;
       align-items: center;
       border-radius: 50%;
       cursor: pointer;
+      transition: background 0.15s ease, transform 0.1s;
       color: #333;
     }
     .nav-btn:active {
+      background: rgba(0, 0, 0, 0.1);
+      transform: scale(0.9);
     }
     .nav-home-circle {
+      width: 60px;
+      height: 22px;
+      border: 2.5px solid #333;
+      border-radius: 12px;
     }
     /* --- APP VIEWS --- */
     .view {
       flex: 1;
       position: absolute;
+      top: 50px;
       left: 0;
       width: 100%;
+      bottom: 70px;
       background: #fff;
       overflow-y: auto;
+      /* Faster, snappier transition */
+      transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
       transform: scale(1);
       opacity: 1;
+      display: none;
+      will-change: transform, opacity;
     }
     .view.active {
       display: block;
       z-index: 10;
+      animation: openAppFast 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
     }
     .view.hidden {
       display: none;
     }
+    @keyframes openAppFast {
+      from {
+        transform: scale(0.92);
+        opacity: 0;
+        filter: brightness(1.2);
+      }
+      to {
+        transform: scale(1);
+        opacity: 1;
+        filter: brightness(1);
+      }
     }
     /* --- HOME SCREEN --- */
     #home-view {
+      display: flex;
       flex-direction: column;
+      /* High Res Wallpaper */
+      background: url('https://picsum.photos/seed/ultra/800/1200') no-repeat center center/cover;
     }
     .home-top-widget {
+      padding: 40px 30px;
       color: white;
+      text-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
     }
     .clock-widget {
+      font-size: 5rem;
       font-weight: 200;
+      letter-spacing: -2px;
     }
     .date-widget {
+      font-size: 1.4rem;
+      font-weight: 500;
+      opacity: 0.9;
     }
     .app-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
+      gap: 25px;
+      padding: 30px;
       margin-top: auto;
+      margin-bottom: 30px;
     }
     .app-icon-container {
       display: flex;
       flex-direction: column;
       align-items: center;
+      gap: 8px;
       cursor: pointer;
+      transition: transform 0.1s;
+    }
+    .app-icon-container:active {
+      transform: scale(0.9);
     }
     .app-icon {
+      width: 70px;
+      height: 70px;
+      border-radius: 18px;
       background: white;
       display: flex;
       justify-content: center;
       align-items: center;
+      font-size: 2rem;
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
     }
     .app-name {
       color: white;
+      font-size: 0.9rem;
+      font-weight: 500;
+      text-shadow: 0 2px 4px rgba(0, 0, 0, 1);
       text-align: center;
     }
     /* Specific App Colors */
+    .icon-playstore {
+      background: linear-gradient(135deg, #0F9D58 0%, #009688 100%);
+      color: white;
+    }
+    .icon-memory {
+      background: linear-gradient(135deg, #4285F4 0%, #1976D2 100%);
+      color: white;
+    }
+    .icon-settings {
+      background: #607D8B;
+      color: white;
+    }
+    .icon-browser {
+      background: linear-gradient(135deg, #EA4335 0%, #C5221F 100%);
+      color: white;
+    }
+    .icon-camera {
+      background: #333;
+      color: white;
+    }
+    .icon-music {
+      background: linear-gradient(135deg, #FF4081 0%, #C2185B 100%);
+      color: white;
+    }
+    .icon-messages {
+      background: linear-gradient(135deg, #1A73E8 0%, #0D47A1 100%);
+      color: white;
+    }
+    .icon-files {
+      background: #FFC107;
+      color: #333;
+    }
     /* --- PLAY STORE APP --- */
     .store-header {
+      padding: 15px 20px;
       background: #fff;
       position: sticky;
       top: 0;
       z-index: 20;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
     }
     .search-bar {
       background: #f1f3f4;
+      border-radius: 12px;
+      padding: 12px 20px;
       display: flex;
       align-items: center;
+      gap: 12px;
       color: #5f6368;
     }
     .search-bar input {
       border: none;
       background: transparent;
       outline: none;
       width: 100%;
+      font-size: 1rem;
     }
     .store-content {
+      padding: 20px;
     }
     .section-title {
+      font-size: 1.3rem;
+      font-weight: 700;
+      margin-bottom: 20px;
       margin-top: 10px;
     }
     .app-card {
       display: flex;
+      gap: 20px;
+      margin-bottom: 25px;
       cursor: pointer;
+      padding: 12px;
+      border-radius: 16px;
       transition: background 0.2s;
     }
     .app-card:active {
+      background: #f5f5f5;
     }
     .app-card-img {
+      width: 85px;
+      height: 85px;
+      border-radius: 18px;
       background: #eee;
       display: flex;
       justify-content: center;
       align-items: center;
+      font-size: 2.5rem;
       color: #555;
+      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     }
     .app-card-info {
     }
     .app-card-title {
+      font-weight: 700;
+      font-size: 1.15rem;
     }
     .app-card-desc {
+      font-size: 0.9rem;
       color: var(--text-light);
+      margin-top: 4px;
+      line-height: 1.3;
     }
     .app-rating {
+      font-size: 0.85rem;
       color: var(--text-light);
+      margin-top: 6px;
     }
     .install-btn {
       background: var(--primary-green);
       color: white;
       border: none;
+      padding: 8px 20px;
+      border-radius: 8px;
+      font-weight: 600;
+      font-size: 0.95rem;
+      height: 45px;
       cursor: pointer;
       align-self: center;
+      transition: all 0.2s;
+      box-shadow: 0 2px 5px rgba(1, 135, 95, 0.3);
     }
+    .install-btn:active {
+      transform: scale(0.95);
     }
     .install-btn.downloading {
       background: transparent;
       color: var(--primary-green);
       cursor: default;
+      box-shadow: none;
     }
     /* --- MEMORY/STORAGE APP --- */
     .storage-header {
       background: var(--primary-blue);
       color: white;
+      padding: 50px 30px 80px;
+      border-bottom-left-radius: 40px;
+      border-bottom-right-radius: 40px;
       text-align: center;
     }
     .storage-chart-container {
+      width: 200px;
+      height: 200px;
       margin: 0 auto;
       position: relative;
       border-radius: 50%;
+      background: conic-gradient(var(--primary-blue) 0% 45%,
+          #FFC107 45% 70%,
+          #EA4335 70% 85%,
+          #eee 85% 100%);
       display: flex;
       justify-content: center;
       align-items: center;
+      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
     }
     .storage-inner-circle {
+      width: 160px;
+      height: 160px;
       background: var(--primary-blue);
       border-radius: 50%;
       display: flex;
     }
     .storage-gb {
+      font-size: 2.5rem;
       font-weight: bold;
     }
     .storage-label {
+      font-size: 1rem;
       opacity: 0.9;
     }
     .storage-list {
+      padding: 30px;
+      margin-top: -50px;
     }
     .storage-item {
       background: white;
+      padding: 20px;
+      border-radius: 16px;
+      margin-bottom: 15px;
       display: flex;
       align-items: center;
+      gap: 20px;
       box-shadow: var(--shadow-soft);
     }
     .s-icon {
+      width: 50px;
+      height: 50px;
+      border-radius: 12px;
+      background: #f5f5f5;
       display: flex;
       justify-content: center;
       align-items: center;
       color: #555;
+      font-size: 1.2rem;
     }
     .s-info {
     }
     .s-name {
+      font-size: 1rem;
+      font-weight: 600;
     }
     .s-size {
+      font-size: 0.9rem;
       color: var(--text-light);
     }
     .progress-bar {
+      height: 6px;
       background: #eee;
+      border-radius: 3px;
       width: 100%;
+      margin-top: 10px;
     }
     .progress-fill {
       height: 100%;
+      border-radius: 3px;
     }
     /* --- SETTINGS APP --- */
     .settings-list {
+      padding: 15px;
     }
     .setting-item {
+      padding: 20px;
+      border-bottom: 1px solid #f0f0f0;
       display: flex;
       align-items: center;
+      gap: 20px;
       cursor: pointer;
+      font-size: 1rem;
     }
+    .setting-item:active {
+      background: #fafafa;
+    }
+    .setting-icon {
+      color: var(--primary-blue);
+      width: 28px;
+      text-align: center;
+      font-size: 1.2rem;
+    }
+    /* --- APP DETAIL MODAL --- */
     .app-detail-view {
       display: none;
       position: absolute;
       background: white;
       z-index: 50;
       flex-direction: column;
+      animation: openAppFast 0.2s forwards;
     }
     .detail-hero {
+      padding: 30px;
       display: flex;
+      gap: 25px;
       align-items: center;
     }
     .detail-icon {
+      width: 90px;
+      height: 90px;
+      border-radius: 20px;
       background: #eee;
       display: flex;
       justify-content: center;
       align-items: center;
+      font-size: 2.5rem;
+      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
     }
+    .detail-info h2 {
+      font-size: 1.5rem;
+      margin-bottom: 8px;
+    }
+    .detail-info p {
+      color: var(--text-light);
+      font-size: 1rem;
+    }
     .detail-actions {
+      padding: 0 30px 30px;
       display: flex;
+      gap: 15px;
     }
     .detail-stats {
+      padding: 30px;
       border-top: 1px solid #eee;
       display: flex;
       justify-content: space-around;
       text-align: center;
     }
+    .stat-box h4 {
+      font-size: 1.5rem;
+      color: var(--text-dark);
+    }
+    .stat-box span {
+      font-size: 0.9rem;
+      color: var(--text-light);
+    }
     /* --- ANYCODER LINK --- */
     .anycoder-link {
       text-align: center;
+      margin-bottom: 30px;
+      font-size: 1rem;
+      color: #888;
+      font-weight: 500;
     }
     .anycoder-link a {
+      color: #fff;
       text-decoration: none;
       font-weight: bold;
+      background: rgba(255,255,255,0.1);
+      padding: 5px 12px;
+      border-radius: 20px;
+      transition: background 0.3s;
     }
+    .anycoder-link a:hover {
+      background: rgba(255,255,255,0.2);
+    }
     /* Scrollbar hiding */
     ::-webkit-scrollbar {
+      width: 0px;
+      background: transparent;
     }
   </style>
 </head>
     <div class="screen">
       <!-- Status Bar -->
       <div class="status-bar">
+        <div style="display:flex; align-items:center;">
+            <span class="badge-8k">8K</span>
+            <div id="status-time">12:00</div>
+        </div>
         <div class="status-icons">
           <i class="fa-solid fa-wifi"></i>
           <i class="fa-solid fa-signal"></i>
+          <i class="fa-solid fa-battery-full"></i>
         </div>
       </div>
       <!-- VIEW: PLAY STORE -->
       <div id="playstore-view" class="view">
         <div class="store-header">
+          <div style="font-weight: 800; font-size: 1.4rem; margin-bottom: 15px; color: var(--primary-green);">
             Google Play
           </div>
           <div class="search-bar">
         <div class="store-content">
           <div class="section-title">Recommended for you</div>
           <!-- App 1 -->
           <div class="app-card" onclick="openAppDetail('WhatsApp', '#25D366', 'fa-whatsapp', '4.5', 'Social')">
             <div class="app-card-img" style="background: #25D366; color: white;">
           <!-- App 2 -->
           <div class="app-card" onclick="openAppDetail('Instagram', '#C13584', 'fa-instagram', '4.2', 'Photo & Video')">
+            <div class="app-card-img"
+              style="background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); color: white;">
               <i class="fa-brands fa-instagram"></i>
             </div>
             <div class="app-card-info">
               <div class="app-card-title">Instagram</div>
               <div class="app-card-desc">Connect with friends, share what you're up to.</div>
               <div class="app-rating">
+                <i class="fa-solid fa-star" style="color:#FFC107"></i> 4.2
+                <span style="margin-left:5px">• Photo & Video</span>
               </div>
             </div>
             <button class="install-btn" onclick="event.stopPropagation(); startDownload(this)">Install</button>
             </div>
             <button class="install-btn" onclick="event.stopPropagation(); startDownload(this)">Install</button>
           </div>
           <div class="section-title">Top Charts</div>
           <!-- App 4 -->
           <div class="app-card" onclick="openAppDetail('TikTok', '#000000', 'fa-tiktok', '4.4', 'Entertainment')">
               <div class="app-card-title">TikTok</div>
               <div class="app-card-desc">Real People. Real Videos.</div>
               <div class="app-rating">
+                <i class="fa-solid fa-star" style="color:#FFC107"></i> 4.4
+                <span style="margin-left:5px">• Entertainment</span>
               </div>
             </div>
             <button class="install-btn" onclick="event.stopPropagation(); startDownload(this)">Update</button>
           </div>
         </div>
+        <!-- Detail View Overlay -->
         <div id="app-detail-overlay" class="app-detail-view">
+          <div style="padding: 15px; display: flex; align-items: center; gap: 15px;">
+            <i class="fa-solid fa-arrow-left" style="font-size: 1.4rem; cursor: pointer;" onclick="closeAppDetail()"></i>
+            <span style="font-weight: 700; font-size: 1.2rem; flex: 1; text-align: center; margin-right: 30px;">App Details</span>
+          </div>
+          <div id="detail-content"></div>
         </div>
       </div>
       <!-- VIEW: MEMORY APP -->
       <div id="memory-view" class="view">
         <div class="storage-header">
+          <h2 style="margin-bottom: 30px; font-size: 1.8rem;">Storage Manager</h2>
           <div class="storage-chart-container">
             <div class="storage-inner-circle">
+              <div class="storage-gb">85<span style="font-size: 1.5rem;">GB</span></div>
               <div class="storage-label">Used of 128 GB</div>
             </div>
           </div>
             <div class="s-info">
               <div class="s-name">Games</div>
               <div class="s-size">38 GB</div>
+              <div class="progress-bar">
+                <div class="progress-fill" style="width: 70%; background: var(--primary-blue);"></div>
+              </div>
             </div>
           </div>
             <div class="s-info">
               <div class="s-name">Images</div>
               <div class="s-size">22 GB</div>
+              <div class="progress-bar">
+                <div class="progress-fill" style="width: 45%; background: #FFC107;"></div>
+              </div>
             </div>
           </div>
             <div class="s-info">
               <div class="s-name">Videos</div>
               <div class="s-size">15 GB</div>
+              <div class="progress-bar">
+                <div class="progress-fill" style="width: 30%; background: #EA4335;"></div>
+              </div>
             </div>
           </div>
             <div class="s-info">
               <div class="s-name">System</div>
               <div class="s-size">10 GB</div>
+              <div class="progress-bar">
+                <div class="progress-fill" style="width: 20%; background: #888;"></div>
+              </div>
             </div>
           </div>
         </div>
       <!-- VIEW: SETTINGS -->
       <div id="settings-view" class="view">
+        <h2 style="padding: 30px; font-weight: 600; font-size: 1.8rem;">Settings</h2>
         <div class="settings-list">
           <div class="setting-item">
             <i class="fa-solid fa-wifi setting-icon"></i>
         </div>
       </div>
+      <!-- Placeholder Views -->
+      <div id="browser-view" class="view"
+        style="background: #f1f3f4; display: flex; justify-content: center; align-items: center; color: #999;">
         <div style="text-align: center;">
+          <i class="fa-brands fa-chrome" style="font-size: 5rem; margin-bottom: 30px;"></i>
+          <p style="font-size: 1.2rem;">Chrome Browser Placeholder</p>
         </div>
       </div>
+      <div id="camera-view" class="view"
+        style="background: #000; display: flex; justify-content: center; align-items: center;">
+        <i class="fa-solid fa-camera-retro" style="font-size: 4rem; color: #333;"></i>
+        <div
+          style="position: absolute; bottom: 30px; width: 80px; height: 80px; border-radius: 50%; border: 5px solid white; background: rgba(255,255,255,0.3);">
+        </div>
       </div>
       <!-- Navigation Bar -->
       <div class="nav-bar">
         <div class="nav-btn" onclick="handleNav('back')">
+          <i class="fa-solid fa-chevron-left" style="font-size: 1.4rem;"></i>
         </div>
         <div class="nav-btn" onclick="handleNav('home')">
           <div class="nav-home-circle"></div>
         </div>
         <div class="nav-btn" onclick="handleNav('recent')">
+          <i class="fa-solid fa-square" style="font-size: 1.4rem;"></i>
         </div>
       </div>
   <script>
     // --- Navigation State ---
     let currentApp = null;
+    let appHistory = [];
     function openApp(appId) {
       if (currentApp && currentApp !== 'home') {
         appHistory.push(currentApp);
       }
       document.querySelectorAll('.view').forEach(el => el.classList.remove('active'));
       const target = document.getElementById(appId + '-view');
       if (target) {
         target.classList.add('active');
         currentApp = appId;
       } else {
         document.getElementById('browser-view').classList.add('active');
         currentApp = 'browser';
       }
       } else if (action === 'back') {
         goBack();
       } else if (action === 'recent') {
+        goHome();
       }
     }
     function goBack() {
       if (appHistory.length > 0) {
         const prevApp = appHistory.pop();
         document.querySelectorAll('.view').forEach(el => el.classList.remove('active'));
         document.getElementById(prevApp + '-view').classList.add('active');
         currentApp = prevApp;
       }
     }
+    // --- Play Store Logic (FAST) ---
     function startDownload(btn) {
       btn.classList.add('downloading');
       btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i>';
+      // FAST SIMULATION: Reduced timeouts
       setTimeout(() => {
         btn.innerHTML = '99%';
+      }, 300); // Was 500ms
       setTimeout(() => {
         btn.classList.remove('downloading');
         btn.style.color = '#01875f';
         btn.style.border = '1px solid #ddd';
         btn.innerHTML = 'Open';
+      }, 600); // Was 1200ms
     }
     function openAppDetail(name, color, iconClass, rating, category) {
             <p>${category}</p>
           </div>
         </div>
+        <div style="padding: 0 30px;">
+            <button class="install-btn" style="width: 100%; height: 55px; font-size: 1.1rem;" onclick="startDownload(this); this.innerText='Installing...';">Install</button>
         </div>
         <div class="detail-stats">
           <div class="stat-box">
+            <h4>${rating} <i class="fa-solid fa-star" style="font-size: 0.9rem; color:#FFC107"></i></h4>
             <span>Rating</span>
           </div>
           <div class="stat-box">
           <div class="stat-box">
             <h4>E</h4>
             <span>Everyone</span>
+          </div>