GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Android Home Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: radial-gradient(1200px 1200px at 50% 20%, #2b2b2b 0%, #1a1a1a 40%, #121212 100%);12    color: #fff;13  }14 15  /* Status bar */16  .status {17    position: absolute; top: 0; left: 0; right: 0; height: 120px; padding: 0 30px;18    display: flex; align-items: center; justify-content: space-between; color: #fff; opacity: 0.95;19    font-weight: 600;20  }21  .status-left { display: flex; align-items: center; gap: 20px; }22  .time { font-size: 44px; letter-spacing: 0.5px; }23  .status-icon { width: 34px; height: 34px; opacity: 0.9; }24  .status-right { display: flex; align-items: center; gap: 24px; }25  .battery {26    width: 44px; height: 24px; border: 2px solid #fff; border-radius: 6px; position: relative;27  }28  .battery::after {29    content: ""; position: absolute; right: -8px; top: 7px; width: 6px; height: 10px; background: #fff; border-radius: 2px;30  }31  .battery-fill {32    position: absolute; left: 3px; top: 3px; height: 16px; width: 28px; background: #7fff7f; border-radius: 4px;33  }34 35  /* App grid */36  .apps {37    position: absolute; top: 180px; left: 60px; right: 60px;38    display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 60px; row-gap: 110px;39  }40  .app {41    display: flex; flex-direction: column; align-items: center;42  }43  .icon {44    width: 170px; height: 170px; border-radius: 50%;45    display: flex; align-items: center; justify-content: center;46    box-shadow: 0 6px 20px rgba(0,0,0,0.35);47  }48  .label {49    margin-top: 22px; font-size: 34px; color: #fff; text-align: center; max-width: 220px;50    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;51  }52 53  /* Icon color themes */54  .blue-grid { background: #2e6ea8; position: relative; overflow: hidden; }55  .blue-grid::before {56    content: ""; position: absolute; inset: 12px; background:57      linear-gradient(0deg, rgba(255,255,255,0.25) 1px, transparent 1px),58      linear-gradient(90deg, rgba(255,255,255,0.25) 1px, transparent 1px);59    background-size: 20px 20px, 20px 20px; border-radius: 50%;60  }61  .cream { background: #f1efe9; }62  .green { background: #1fb57a; }63  .teal { background: #1bb3a6; }64  .bright-blue { background: #19a7ff; }65  .magenta { background: linear-gradient(135deg, #ff4fb0, #a14cff); }66  .orange { background: #ff8a3d; }67 68  .icon svg { width: 80%; height: 80%; }69 70  /* Dock */71  .dock {72    position: absolute; left: 0; right: 0; bottom: 420px;73    display: flex; justify-content: center; gap: 80px;74  }75  .dock .slot {76    width: 140px; height: 140px; background: #fff; border-radius: 50%;77    display: flex; align-items: center; justify-content: center;78    box-shadow: 0 8px 24px rgba(0,0,0,0.35);79  }80  .dock svg { width: 64px; height: 64px; }81 82  /* Search bar */83  .search {84    position: absolute; left: 60px; right: 60px; bottom: 250px;85    height: 120px; background: #3b3b3b; border-radius: 60px; box-shadow: 0 10px 30px rgba(0,0,0,0.35);86    display: flex; align-items: center; justify-content: space-between; padding: 0 34px;87  }88  .search-left { display: flex; align-items: center; gap: 20px; color: #ddd; font-size: 36px; }89  .g-logo {90    width: 56px; height: 56px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center;91    font-weight: 800; color: #4285f4; font-family: Arial, Helvetica, sans-serif;92  }93  .search-right { display: flex; align-items: center; gap: 26px; }94  .pill-icon { width: 60px; height: 60px; background: rgba(255,255,255,0.08); border-radius: 50%;95    display: flex; align-items: center; justify-content: center; }96 97  /* Home indicator */98  .home-indicator {99    position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);100    width: 250px; height: 12px; background: #eaeaea; border-radius: 8px; opacity: 0.85;101  }102</style>103</head>104<body>105<div id="render-target">106 107  <!-- Status bar -->108  <div class="status">109    <div class="status-left">110      <div class="time">8:30</div>111      <!-- simple gear icon -->112      <svg class="status-icon" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">113        <path d="M10 2h4l1 3 3 1v4l-3 1-1 3h-4l-1-3-3-1V6l3-1 1-3Zm2 6a4 4 0 100 8 4 4 0 000-8z"/>114      </svg>115    </div>116    <div class="status-right">117      <div class="battery"><div class="battery-fill"></div></div>118    </div>119  </div>120 121  <!-- App grid -->122  <div class="apps">123    <!-- Row 1 -->124    <div class="app">125      <div class="icon blue-grid">126        <div style="font-size:64px; color:#fff;">🤖</div>127      </div>128      <div class="label">DBW Show...</div>129    </div>130 131    <div class="app">132      <div class="icon cream">133        <svg viewBox="0 0 100 100">134          <path d="M50 12 L78 40 L50 68 L22 40 Z" fill="#7a6e52"/>135          <circle cx="50" cy="40" r="12" fill="#b39c79"/>136        </svg>137      </div>138      <div class="label">Homecentre</div>139    </div>140 141    <div class="app">142      <div class="icon green">143        <svg viewBox="0 0 100 100">144          <polygon points="50,12 88,34 88,66 50,88 12,66 12,34" fill="#0d8f5c"/>145          <path d="M50 68c-12-8-20-22-12-30 6-6 14-2 12 6 2-8 10-12 16-6 8 8-4 22-16 30z" fill="#fff"/>146        </svg>147      </div>148      <div class="label">Khan Acad...</div>149    </div>150 151    <div class="app">152      <div class="icon teal">153        <svg viewBox="0 0 100 100">154          <circle cx="50" cy="50" r="36" fill="none" stroke="#fff" stroke-width="10"/>155          <circle cx="32" cy="48" r="6" fill="#fff"/>156          <circle cx="68" cy="38" r="6" fill="#fff"/>157          <circle cx="62" cy="66" r="6" fill="#fff"/>158          <path d="M32 48 L68 38 M32 48 L62 66" stroke="#fff" stroke-width="6"/>159        </svg>160      </div>161      <div class="label">Oppia</div>162    </div>163 164    <!-- Row 2 -->165    <div class="app">166      <div class="icon bright-blue">167        <div style="font-size:88px; color:#fff; line-height:1;">π</div>168      </div>169      <div class="label">Math</div>170    </div>171 172    <div class="app">173      <div class="icon magenta">174        <div style="font-size:74px; color:#fff; font-weight:800;">W</div>175      </div>176      <div class="label">WPS Office</div>177    </div>178 179    <div class="app">180      <div class="icon orange">181        <div style="font-size:72px; color:#fff;">🪑</div>182      </div>183      <div class="label">Pepperfry</div>184    </div>185 186    <!-- Empty grid cell to match layout spacing -->187    <div class="app"></div>188  </div>189 190  <!-- Dock icons -->191  <div class="dock">192    <div class="slot">193      <svg viewBox="0 0 24 24" fill="#2e6ea8">194        <path d="M6 2l4 4-3 3c1 2 3 4 5 5l3-3 4 4-2 3c-1 1-3 2-5 1C7 17 3 13 2 9c-1-2 0-4 1-5L6 2z"/>195      </svg>196    </div>197    <div class="slot">198      <svg viewBox="0 0 24 24" fill="#3a78ff">199        <path d="M4 4h16v10H13l-4 4v-4H4z"/>200      </svg>201    </div>202    <div class="slot">203      <svg viewBox="0 0 24 24">204        <circle cx="12" cy="12" r="10" fill="#f4b400"/>205        <path d="M12 2a10 10 0 018.7 5.1L12 12V2z" fill="#db4437"/>206        <path d="M12 12l-8.7-4.9A10 10 0 0112 2v10z" fill="#0f9d58"/>207        <circle cx="12" cy="12" r="4.5" fill="#4285f4"/>208      </svg>209    </div>210    <div class="slot">211      <svg viewBox="0 0 24 24" fill="#3b3b3b">212        <rect x="3" y="6" width="18" height="12" rx="2" fill="#606060"/>213        <rect x="8" y="10" width="8" height="6" rx="2" fill="#dddddd"/>214        <circle cx="17.5" cy="9" r="2" fill="#4285f4"/>215      </svg>216    </div>217  </div>218 219  <!-- Search bar -->220  <div class="search">221    <div class="search-left">222      <div class="g-logo">G</div>223      <div>Search</div>224    </div>225    <div class="search-right">226      <div class="pill-icon">227        <svg viewBox="0 0 24 24" fill="#4caf50"><path d="M10 2a8 8 0 106.3 13.3l5 5-1.4 1.4-5-5A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z"/></svg>228      </div>229      <div class="pill-icon">230        <svg viewBox="0 0 24 24" fill="#ff5252"><path d="M12 5l2-2h4a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2z"/></svg>231      </div>232      <div class="pill-icon">233        <svg viewBox="0 0 24 24" fill="#ffc107"><path d="M12 4l2 2h6v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6h6l2-2zM12 9a4 4 0 100 8 4 4 0 000-8z"/></svg>234      </div>235    </div>236  </div>237 238  <div class="home-indicator"></div>239</div>240</body>241</html>