GD-ML/AndroidCode
13.4k
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>Mobile Home Screen Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 border-radius: 36px;15 }16 17 /* Wallpaper placeholder */18 .wallpaper {19 position: absolute;20 inset: 0;21 background: #E0E0E0;22 border: 1px solid #BDBDBD;23 color: #757575;24 display: flex;25 align-items: flex-end;26 justify-content: flex-start;27 padding: 20px;28 font-size: 24px;29 line-height: 1.2;30 z-index: 0;31 user-select: none;32 }33 34 /* Status bar */35 .status-bar {36 position: absolute;37 top: 18px;38 left: 24px;39 right: 24px;40 height: 88px;41 display: flex;42 align-items: center;43 justify-content: space-between;44 color: #FFFFFF;45 z-index: 2;46 pointer-events: none;47 }48 .status-left {49 font-size: 48px;50 font-weight: 600;51 text-shadow: 0 2px 4px rgba(0,0,0,0.35);52 }53 .status-center {54 display: flex;55 align-items: center;56 gap: 16px;57 opacity: 0.95;58 }59 .status-center .dot {60 width: 18px; height: 18px; border-radius: 50%; background: #fff; opacity: 0.9;61 box-shadow: 0 1px 2px rgba(0,0,0,0.2);62 }63 .status-center .text-pill {64 font-size: 28px; padding: 4px 10px; border-radius: 16px; background: rgba(255,255,255,0.18);65 border: 1px solid rgba(255,255,255,0.25);66 }67 .status-right {68 display: flex; align-items: center; gap: 22px;69 }70 .status-icon svg { width: 44px; height: 44px; fill: white; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35)); }71 72 /* App grid */73 .app-grid {74 position: absolute;75 left: 60px;76 right: 60px;77 top: 240px;78 display: grid;79 grid-template-columns: repeat(4, 1fr);80 gap: 80px 36px;81 z-index: 1;82 }83 .app {84 display: flex;85 flex-direction: column;86 align-items: center;87 }88 .logo {89 width: 170px;90 height: 170px;91 border-radius: 50%;92 background: #FFFFFF;93 display: flex;94 align-items: center;95 justify-content: center;96 color: #111;97 font-size: 56px;98 font-weight: 700;99 box-shadow: 0 8px 18px rgba(0,0,0,0.18);100 }101 .logo.dark { background: #26323A; color: #fff; }102 .logo.red { background: #E53935; color: #fff; }103 .logo.ring { background: #111; color: #fff; font-size: 92px; }104 .logo-text-two {105 display: flex; flex-direction: column; align-items: center; line-height: 0.95; letter-spacing: 2px;106 }107 .app-label {108 margin-top: 16px;109 color: #FFFFFF;110 font-size: 34px;111 text-shadow: 0 2px 4px rgba(0,0,0,0.6);112 max-width: 220px;113 text-align: center;114 white-space: nowrap;115 overflow: hidden;116 text-overflow: ellipsis;117 }118 .spacer { visibility: hidden; }119 120 /* Dock */121 .dock {122 position: absolute;123 left: 120px;124 right: 120px;125 top: 1720px;126 display: flex;127 align-items: center;128 justify-content: space-between;129 z-index: 2;130 }131 .dock-icon {132 width: 150px;133 height: 150px;134 border-radius: 50%;135 background: #FFFFFF;136 display: flex;137 align-items: center;138 justify-content: center;139 box-shadow: 0 12px 24px rgba(0,0,0,0.22);140 }141 .dock-icon svg { width: 86px; height: 86px; }142 .dock-icon .chrome {143 width: 92px; height: 92px; border-radius: 50%;144 background:145 radial-gradient(circle at 50% 50%, #1a73e8 0 28%, transparent 29%),146 conic-gradient(#db4437 0 33%, #f4b400 0 66%, #0f9d58 0 100%);147 box-shadow: inset 0 0 0 8px #fff;148 }149 150 /* Search pill */151 .search {152 position: absolute;153 left: 70px;154 right: 70px;155 top: 1990px;156 height: 130px;157 background: #FFFFFF;158 border-radius: 90px;159 box-shadow: 0 10px 28px rgba(0,0,0,0.25);160 display: flex;161 align-items: center;162 padding: 0 28px 0 34px;163 z-index: 2;164 }165 .google-g {166 width: 56px; height: 56px; border-radius: 12px;167 background: conic-gradient(#4285F4 0 25%, #34A853 0 50%, #FBBC05 0 75%, #EA4335 0 100%);168 display: inline-block;169 mask: radial-gradient(circle at 35% 50%, transparent 19px, black 20px) exclude,170 linear-gradient(black, black);171 -webkit-mask-composite: source-out;172 mask-composite: exclude;173 }174 .search-placeholder {175 margin-left: 20px;176 color: #7A7A7A;177 font-size: 42px;178 }179 .search-actions {180 margin-left: auto;181 display: flex; gap: 18px; align-items: center;182 }183 .chip {184 width: 64px; height: 64px; border-radius: 50%;185 background: #F1F3F4; display: flex; align-items: center; justify-content: center;186 border: 1px solid #E0E0E0;187 }188 .chip svg { width: 34px; height: 34px; fill: #5f6368; }189 190 /* Navigation pill */191 .nav-pill {192 position: absolute;193 bottom: 26px;194 left: 50%;195 transform: translateX(-50%);196 width: 240px;197 height: 12px;198 background: rgba(255,255,255,0.9);199 border-radius: 12px;200 z-index: 2;201 box-shadow: 0 1px 3px rgba(0,0,0,0.2);202 }203</style>204</head>205<body>206<div id="render-target">207 208 <!-- Wallpaper placeholder (full screen) -->209 <div class="wallpaper">[IMG: Artistic wallpaper - brushstroke pattern]</div>210 211 <!-- Status bar -->212 <div class="status-bar">213 <div class="status-left">8:54</div>214 <div class="status-center">215 <div class="text-pill">ib</div>216 <div class="dot"></div>217 <div class="dot"></div>218 <div class="dot" style="opacity:0.55;"></div>219 <div class="text-pill">ovo</div>220 <div class="dot" style="opacity:0.55;"></div>221 </div>222 <div class="status-right">223 <div class="status-icon">224 <!-- Wi‑Fi -->225 <svg viewBox="0 0 24 24"><path d="M12 18.5c.8 0 1.5.7 1.5 1.5S12.8 21.5 12 21.5 10.5 20.8 10.5 20 11.2 18.5 12 18.5zm-6.7-4.8 1.4 1.4C8.3 13.5 10 13 12 13s3.7.5 5.3 2.1l1.4-1.4C16.8 11.2 14.5 10.5 12 10.5s-4.8.7-6.7 3.2zM2 9.2l1.4 1.4C6 7.9 8.8 7 12 7s6 .9 8.6 3.6L22 9.2C18.8 6.1 15.6 5 12 5 8.4 5 5.2 6.1 2 9.2z"/></svg>226 </div>227 <div class="status-icon">228 <!-- Battery -->229 <svg viewBox="0 0 24 24"><path d="M16 7h2c1.1 0 2 .9 2 2v6c0 1.1-.9 2-2 2h-2v2h-2v-2H8c-1.1 0-2-.9-2-2V9c0-1.1.9-2 2-2h6V5h2v2zm-8 2v6h10V9H8z"/></svg>230 </div>231 </div>232 </div>233 234 <!-- App grid -->235 <div class="app-grid">236 <!-- Row 1 -->237 <div class="app">238 <div class="logo red">239 <div class="logo-text-two" style="font-size:50px; font-weight:800; letter-spacing:1px;">240 <span>UNI</span><span>QLO</span>241 </div>242 </div>243 <div class="app-label">UNIQLO</div>244 </div>245 246 <div class="app">247 <div class="logo dark" style="font-size:64px; font-weight:700;">A&F</div>248 <div class="app-label">Abercrombie</div>249 </div>250 251 <div class="app">252 <div class="logo" style="font-size:76px; font-weight:900;">UO</div>253 <div class="app-label">Urban Outf...</div>254 </div>255 256 <div class="app">257 <div class="logo" style="font-size:84px; font-weight:700;">V</div>258 <div class="app-label">Valentino</div>259 </div>260 261 <!-- Row 2 -->262 <div class="app">263 <div class="logo" style="font-size:68px; font-weight:800;">bash</div>264 <div class="app-label">Bash</div>265 </div>266 267 <div class="app">268 <div class="logo" style="font-size:40px; font-weight:600; color:#2b2b2b;">Massimo D...</div>269 <div class="app-label">Massimo D...</div>270 </div>271 272 <div class="app">273 <div class="logo ring">a</div>274 <div class="app-label">ASOS</div>275 </div>276 277 <div class="app spacer">278 <div class="logo"></div>279 <div class="app-label">Empty</div>280 </div>281 </div>282 283 <!-- Dock icons -->284 <div class="dock">285 <div class="dock-icon" title="Phone">286 <svg viewBox="0 0 24 24" fill="#1a73e8">287 <path d="M6.6 10.2c1.2 2.3 3 4.2 5.3 5.3l1.8-1.8c.3-.3.8-.4 1.1-.2 1 .4 2 .7 3.1.7.6 0 1 .4 1 .9v3.1c0 .5-.4.9-1 .9C9.9 19.1 4.9 14.1 4.9 7.1c0-.6.4-1 .9-1h3.1c.5 0 .9.4.9 1 0 1.1.2 2.1.7 3.1.2.3.1.8-.2 1.1l-1.7 1.9z"/>288 </svg>289 </div>290 <div class="dock-icon" title="Messages">291 <svg viewBox="0 0 24 24" fill="#2962ff">292 <path d="M4 4h16c1.1 0 2 .9 2 2v9c0 1.1-.9 2-2 2H9l-5 3V6c0-1.1.9-2 2-2zm2 4v2h12V8H6zm0 4v2h8v-2H6z"/>293 </svg>294 </div>295 <div class="dock-icon" title="Chrome">296 <div class="chrome" aria-label="Chrome logo"></div>297 </div>298 <div class="dock-icon" title="Camera">299 <svg viewBox="0 0 24 24" fill="#37474f">300 <path d="M9 4h6l1.6 2H20c1.1 0 2 .9 2 2v9c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V8c0-1.1.9-2 2-2h3.4L9 4zm3 4.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11zm0 2a3.5 3.5 0 1 1 0 7 3.5 3.5 0 0 1 0-7z"/>301 </svg>302 </div>303 </div>304 305 <!-- Search bar -->306 <div class="search">307 <span class="google-g" aria-hidden="true"></span>308 <span class="search-placeholder">Search</span>309 <div class="search-actions">310 <div class="chip" title="Voice">311 <svg viewBox="0 0 24 24"><path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3zm-1 14.9V21h2v-3.1a7 7 0 0 0 6-6.9h-2a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9z"/></svg>312 </div>313 <div class="chip" title="Lens">314 <svg viewBox="0 0 24 24"><path d="M3 5a2 2 0 0 1 2-2h4v2H5v4H3V5zm16 0h-4V3h4a2 2 0 0 1 2 2v4h-2V5zM5 19h4v2H5a2 2 0 0 1-2-2v-4h2v4zm12 0v-4h2v4a2 2 0 0 1-2 2h-4v-2h4zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10z"/></svg>315 </div>316 </div>317 </div>318 319 <!-- Navigation pill -->320 <div class="nav-pill"></div>321</div>322</body>323</html>