GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Mobile Home UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: radial-gradient(1500px 1800px at 20% 10%, #1c1f23 0%, #14171a 35%, #0f1215 100%);14 }15 16 /* Status Bar */17 .status-bar {18 position: absolute;19 top: 24px;20 left: 36px;21 right: 36px;22 height: 72px;23 color: #fff;24 display: flex;25 align-items: center;26 justify-content: space-between;27 font-weight: 600;28 letter-spacing: 0.5px;29 }30 .status-left { font-size: 40px; }31 .status-right { display: flex; align-items: center; gap: 24px; }32 .sb-icon svg { width: 40px; height: 40px; }33 34 /* Apps Grid */35 .apps {36 position: absolute;37 top: 200px;38 left: 40px;39 right: 40px;40 display: grid;41 grid-template-columns: repeat(4, 1fr);42 grid-row-gap: 86px;43 grid-column-gap: 36px;44 }45 .app {46 text-align: center;47 color: #e5e7eb;48 }49 .app-icon {50 width: 180px;51 height: 180px;52 border-radius: 50%;53 background: #ffffff;54 box-shadow: 0 8px 20px rgba(0,0,0,0.35);55 margin: 0 auto 18px auto;56 position: relative;57 display: flex;58 align-items: center;59 justify-content: center;60 }61 .label {62 font-size: 36px;63 line-height: 1;64 text-shadow: 0 2px 3px rgba(0,0,0,0.35);65 }66 .notif-dot {67 position: absolute;68 top: 14px;69 right: 16px;70 width: 28px;71 height: 28px;72 background: #c7a5ff;73 border-radius: 50%;74 border: 3px solid #fff;75 }76 77 /* Dock icons */78 .dock {79 position: absolute;80 bottom: 420px;81 left: 0;82 width: 100%;83 display: flex;84 justify-content: center;85 gap: 80px;86 }87 .dock .app-icon {88 width: 140px;89 height: 140px;90 }91 92 /* Search bar */93 .search-bar {94 position: absolute;95 bottom: 140px;96 left: 50px;97 width: 980px;98 height: 120px;99 background: #2e3236;100 border-radius: 60px;101 box-shadow: 0 10px 24px rgba(0,0,0,0.45);102 display: flex;103 align-items: center;104 padding: 0 36px;105 color: #c9d1d9;106 }107 .search-left {108 display: flex; align-items: center; gap: 22px; font-size: 42px; font-weight: 600;109 }110 .search-right {111 margin-left: auto; display: flex; align-items: center; gap: 26px;112 }113 .search-icon svg { width: 52px; height: 52px; }114 115 /* Gesture bar */116 .gesture {117 position: absolute;118 bottom: 40px;119 left: 50%;120 transform: translateX(-50%);121 width: 320px;122 height: 10px;123 background: rgba(255,255,255,0.85);124 border-radius: 8px;125 }126 127 /* Simple brand backgrounds for icon variety */128 .bg-blue { background: #eaf3ff; }129 .bg-light { background: #ffffff; }130 .bg-black { background: #0f0f0f; }131 .bg-yellow { background: #f6db4b; }132 .bg-orange { background: #d8773c; }133 .bg-red { background: #ffffff; }134 135 /* Helper for tiny text inside icons */136 .mini-text { font-size: 28px; font-weight: 700; color: #111; }137</style>138</head>139<body>140<div id="render-target">141 142 <!-- Status Bar -->143 <div class="status-bar">144 <div class="status-left">11:13</div>145 <div class="status-right">146 <div class="sb-icon">147 <svg viewBox="0 0 24 24" fill="none">148 <path d="M2 12a10 10 0 0110-10 10 10 0 0110 10" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>149 <path d="M6 12a6 6 0 016-6 6 6 0 016 6" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>150 <circle cx="12" cy="12" r="2.5" fill="#ffffff"/>151 </svg>152 </div>153 <div class="sb-icon">154 <svg viewBox="0 0 24 24">155 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#ffffff" stroke-width="2" fill="none"/>156 <rect x="4" y="8" width="10" height="8" fill="#ffffff"/>157 <rect x="16" y="9" width="2.5" height="6" fill="#00d060"/>158 </svg>159 </div>160 </div>161 </div>162 163 <!-- Apps Grid (3 rows x 4 columns) -->164 <div class="apps">165 166 <!-- Notes -->167 <div class="app">168 <div class="app-icon bg-light">169 <svg viewBox="0 0 100 100">170 <rect x="0" y="0" width="100" height="32" fill="#ffbf2d"/>171 <rect x="14" y="44" width="72" height="6" fill="#cfcfcf"/>172 <rect x="14" y="60" width="72" height="6" fill="#cfcfcf"/>173 <rect x="14" y="76" width="56" height="6" fill="#cfcfcf"/>174 </svg>175 </div>176 <div class="label">Notes</div>177 </div>178 179 <!-- OneDrive -->180 <div class="app">181 <div class="app-icon bg-blue">182 <svg viewBox="0 0 100 100">183 <path d="M34 58c-1-8 6-20 20-20 10 0 16 6 18 12 8 1 14 7 14 14 0 10-9 16-20 16H38c-10 0-16-6-16-14 0-5 5-8 12-8z" fill="#3a8dde"/>184 <path d="M30 60c3-6 9-10 16-10 9 0 15 5 16 11" stroke="#1f78d1" stroke-width="4" fill="none" />185 </svg>186 </div>187 <div class="label">OneDrive</div>188 </div>189 190 <!-- TeraBox -->191 <div class="app">192 <div class="app-icon" style="background:#2ea6ff;">193 <svg viewBox="0 0 100 100">194 <path d="M32 58c0-9 7-16 18-16s18 7 18 16" fill="#ffffff"/>195 <path d="M50 40c7 0 14 6 14 14" stroke="#ffffff" stroke-width="6" stroke-linecap="round"/>196 <path d="M50 30 l0 22" stroke="#ffffff" stroke-width="8" stroke-linecap="round"/>197 <path d="M44 40 l6 -10 l6 10" fill="#ffffff"/>198 <rect x="64" y="72" width="30" height="18" rx="9" fill="#0a6fd6"/>199 <text x="79" y="85" font-size="14" text-anchor="middle" fill="#ffffff" font-weight="700">1024GB</text>200 </svg>201 </div>202 <div class="label">TeraBox</div>203 </div>204 205 <!-- Edmunds -->206 <div class="app">207 <div class="app-icon bg-light">208 <svg viewBox="0 0 100 100">209 <circle cx="50" cy="50" r="40" fill="#e9f2ff"/>210 <rect x="26" y="44" width="48" height="16" rx="6" fill="#3178f0"/>211 <circle cx="32" cy="64" r="6" fill="#3178f0"/>212 <circle cx="68" cy="64" r="6" fill="#3178f0"/>213 <rect x="40" y="36" width="20" height="10" rx="2" fill="#3178f0"/>214 </svg>215 </div>216 <div class="label">Edmunds</div>217 </div>218 219 <!-- Houzz -->220 <div class="app">221 <div class="app-icon" style="background:#2bc34a;">222 <svg viewBox="0 0 100 100">223 <path d="M20 70 V30 L50 45 V75 Z" fill="#ffffff"/>224 <path d="M50 75 V45 L80 30 V70 Z" fill="#111111"/>225 </svg>226 </div>227 <div class="label">Houzz</div>228 </div>229 230 <!-- AutoScout24 -->231 <div class="app">232 <div class="app-icon bg-yellow">233 <svg viewBox="0 0 100 100">234 <circle cx="50" cy="50" r="44" fill="#ffd94a"/>235 <rect x="26" y="30" width="48" height="22" rx="4" fill="#ffffff"/>236 <text x="50" y="46" font-size="16" font-weight="700" text-anchor="middle" fill="#111">Auto</text>237 <rect x="26" y="58" width="48" height="20" rx="4" fill="#2c61ff"/>238 <text x="50" y="72" font-size="16" font-weight="700" text-anchor="middle" fill="#fff">Scout24</text>239 </svg>240 </div>241 <div class="label">AutoScout24</div>242 </div>243 244 <!-- SSBeauty -->245 <div class="app">246 <div class="app-icon bg-light" style="background:#000000;">247 <div class="notif-dot"></div>248 <svg viewBox="0 0 100 100">249 <text x="50" y="58" font-size="42" font-weight="700" text-anchor="middle" fill="#ff2f8a">SS</text>250 <text x="64" y="74" font-size="26" font-weight="700" text-anchor="middle" fill="#ffffff">B</text>251 </svg>252 </div>253 <div class="label">SSBeauty</div>254 </div>255 256 <!-- adidas -->257 <div class="app">258 <div class="app-icon bg-black">259 <svg viewBox="0 0 100 100">260 <rect x="18" y="62" width="12" height="26" transform="skewX(-20)" fill="#ffffff"/>261 <rect x="40" y="50" width="12" height="38" transform="skewX(-20)" fill="#ffffff"/>262 <rect x="62" y="38" width="12" height="50" transform="skewX(-20)" fill="#ffffff"/>263 </svg>264 </div>265 <div class="label">adidas</div>266 </div>267 268 <!-- PUMA -->269 <div class="app">270 <div class="app-icon bg-black">271 <svg viewBox="0 0 100 100">272 <path d="M22 62 C30 54, 44 52, 58 56 C64 58, 70 56, 76 48 L72 44 C66 54, 58 54, 50 52 C40 50, 30 52, 24 58 Z" fill="#ffffff"/>273 </svg>274 </div>275 <div class="label">PUMA</div>276 </div>277 278 <!-- Dr. Driving -->279 <div class="app">280 <div class="app-icon bg-light">281 <svg viewBox="0 0 100 100">282 <rect x="28" y="46" width="44" height="16" rx="4" fill="#d94c3f"/>283 <rect x="34" y="40" width="32" height="10" rx="2" fill="#ff6f5a"/>284 <circle cx="32" cy="66" r="7" fill="#2a2a2a"/>285 <circle cx="68" cy="66" r="7" fill="#2a2a2a"/>286 <rect x="34" y="50" width="12" height="6" fill="#2a2a2a"/>287 <rect x="54" y="50" width="12" height="6" fill="#2a2a2a"/>288 </svg>289 </div>290 <div class="label">Dr. Driving</div>291 </div>292 293 <!-- Safeway -->294 <div class="app">295 <div class="app-icon bg-red">296 <svg viewBox="0 0 100 100">297 <circle cx="50" cy="50" r="38" fill="#ffffff"/>298 <path d="M50 24 C70 34, 70 66, 50 76 C30 66, 30 34, 50 24 Z" fill="#e02628"/>299 </svg>300 </div>301 <div class="label">Safeway</div>302 </div>303 304 <!-- Sketchbook -->305 <div class="app">306 <div class="app-icon bg-orange">307 <svg viewBox="0 0 100 100">308 <circle cx="50" cy="50" r="44" fill="#e1783f"/>309 <path d="M40 24 L60 24 L70 72 L30 72 Z" fill="#5c4a3c"/>310 <path d="M48 72 L52 72 L52 84 L48 84 Z" fill="#c4c4c4"/>311 <polygon points="50,30 58,50 42,50" fill="#f0d28a"/>312 </svg>313 </div>314 <div class="label">Sketchbook</div>315 </div>316 317 </div>318 319 <!-- Dock (Phone, Messages, Chrome, Camera) -->320 <div class="dock">321 <!-- Phone -->322 <div class="app-icon bg-light">323 <svg viewBox="0 0 100 100">324 <path d="M28 30 c20 24 24 28 42 42 c-6 6 -14 10 -18 8 c-10 -6 -26 -22 -34 -38 c-2 -4 2 -10 10 -12 z" fill="#1e7de2"/>325 </svg>326 </div>327 <!-- Messages -->328 <div class="app-icon bg-light">329 <svg viewBox="0 0 100 100">330 <rect x="20" y="24" width="60" height="40" rx="12" fill="#4c8bf5"/>331 <rect x="32" y="70" width="36" height="10" rx="5" fill="#4c8bf5"/>332 <rect x="30" y="36" width="40" height="10" rx="5" fill="#ffffff"/>333 </svg>334 </div>335 <!-- Chrome -->336 <div class="app-icon bg-light">337 <svg viewBox="0 0 100 100">338 <circle cx="50" cy="50" r="38" fill="#4db5ff"/>339 <path d="M50 12 A38 38 0 0 1 88 50 H58" fill="#f44336"/>340 <path d="M50 88 A38 38 0 0 1 12 50 L42 50" fill="#ffeb3b"/>341 <path d="M12 50 A38 38 0 0 1 50 12 L62 34" fill="#4caf50"/>342 <circle cx="50" cy="50" r="16" fill="#1e88e5"/>343 <circle cx="50" cy="50" r="9" fill="#e3f2fd"/>344 </svg>345 </div>346 <!-- Camera -->347 <div class="app-icon bg-light">348 <svg viewBox="0 0 100 100">349 <rect x="18" y="32" width="64" height="40" rx="8" fill="#c9c9c9"/>350 <rect x="30" y="26" width="20" height="10" rx="3" fill="#8e8e8e"/>351 <circle cx="50" cy="52" r="16" fill="#6ba2ff"/>352 <circle cx="50" cy="52" r="8" fill="#e6f2ff"/>353 </svg>354 </div>355 </div>356 357 <!-- Google Search Bar -->358 <div class="search-bar">359 <div class="search-left">360 <span style="display:inline-block;width:54px;height:54px;border-radius:50%;background:#fff;position:relative">361 <svg viewBox="0 0 24 24" style="position:absolute;left:6px;top:6px;width:42px;height:42px">362 <path d="M12 4a8 8 0 100 16" fill="none" stroke="#4285F4" stroke-width="3"/>363 <path d="M20 12h-8" stroke="#34A853" stroke-width="3"/>364 <path d="M12 4a8 8 0 015.5 2.2" stroke="#EA4335" stroke-width="3" fill="none"/>365 <path d="M12 20a8 8 0 01-5.5-2.2" stroke="#FBBC05" stroke-width="3" fill="none"/>366 </svg>367 </span>368 <span>Search</span>369 </div>370 <div class="search-right">371 <div class="search-icon">372 <svg viewBox="0 0 24 24">373 <path d="M11 4a7 7 0 110 14 7 7 0 010-14z" fill="#ffffff" opacity="0.2"/>374 <circle cx="11" cy="11" r="5" fill="#ffffff"/>375 <path d="M16.5 16.5 L22 22" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>376 </svg>377 </div>378 <div class="search-icon">379 <svg viewBox="0 0 24 24">380 <rect x="4" y="7" width="16" height="10" rx="3" fill="#ffffff"/>381 <circle cx="12" cy="12" r="3.5" fill="#4db5ff"/>382 </svg>383 </div>384 </div>385 </div>386 387 <!-- Gesture Home Indicator -->388 <div class="gesture"></div>389 390</div>391</body>392</html>