GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #121212;13 color: #fff;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 70px;23 padding: 18px 24px;24 box-sizing: border-box;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #fff;29 font-size: 30px;30 letter-spacing: 0.3px;31 }32 .status-right {33 display: flex;34 align-items: center;35 gap: 20px;36 }37 .icon-wifi, .icon-battery {38 width: 36px; height: 36px;39 }40 41 /* Toolbar */42 .toolbar {43 position: absolute;44 top: 70px;45 left: 0;46 width: 1080px;47 height: 80px;48 display: flex;49 align-items: center;50 justify-content: space-between;51 padding: 0 24px;52 box-sizing: border-box;53 }54 .toolbar-left {55 display: flex; align-items: center; gap: 18px;56 }57 .toolbar-right {58 display: flex; align-items: center; gap: 26px;59 }60 .home-btn {61 width: 52px; height: 52px; border-radius: 12px;62 display: flex; align-items: center; justify-content: center;63 color: #fff;64 }65 .avatar {66 width: 56px; height: 56px; border-radius: 50%;67 background: #D35528; display: flex; align-items: center; justify-content: center;68 font-weight: bold; font-size: 28px;69 }70 .tab-badge {71 width: 56px; height: 44px; border-radius: 12px; border: 2px solid #9E9E9E;72 display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600;73 }74 .menu-dots svg { width: 32px; height: 32px; fill: #fff; }75 76 /* Google 25 logo */77 .g25 {78 position: absolute;79 top: 190px;80 left: 0;81 width: 100%;82 text-align: center;83 font-size: 144px;84 font-weight: 800;85 letter-spacing: 2px;86 }87 .g25 .g { color: #4285F4; }88 .g25 .two { color: #EA4335; }89 .g25 .five { color: #FBBC04; }90 .g25 .g2 { color: #34A853; }91 .g25 .l { color: #4285F4; }92 .g25 .e { color: #EA4335; }93 94 /* Search bar */95 .search-bar {96 position: absolute;97 top: 360px;98 left: 40px;99 width: 1000px;100 height: 96px;101 border-radius: 48px;102 background: #1f1f1f;103 box-sizing: border-box;104 display: flex; align-items: center;105 padding: 0 28px;106 color: #B0B0B0;107 font-size: 34px;108 gap: 24px;109 }110 .search-spacer { flex: 1; }111 .icon { width: 44px; height: 44px; fill: #B0B0B0; }112 113 /* Tile shortcuts */114 .tiles {115 position: absolute;116 top: 500px;117 left: 24px;118 width: 1032px;119 display: flex;120 justify-content: space-between;121 }122 .tile {123 width: 196px;124 display: flex; flex-direction: column; align-items: center;125 color: #ddd;126 }127 .tile-img {128 width: 196px; height: 196px; border-radius: 24px;129 background: #E0E0E0; border: 1px solid #BDBDBD;130 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; text-align: center;131 }132 .tile-label {133 margin-top: 14px;134 font-size: 30px;135 color: #bdbdbd;136 }137 138 /* Circle app icons row */139 .app-row {140 position: absolute;141 top: 760px;142 left: 24px;143 width: 1032px;144 display: flex;145 justify-content: space-between;146 align-items: flex-start;147 }148 .app {149 width: 220px; display: flex; flex-direction: column; align-items: center;150 }151 .app-icon {152 width: 120px; height: 120px; border-radius: 60px;153 background: #1f1f1f; border: 2px solid #2e2e2e;154 display: flex; align-items: center; justify-content: center;155 }156 .app-label { margin-top: 18px; font-size: 30px; color: #cfcfcf; text-align: center; }157 158 /* Discover section */159 .discover-title {160 position: absolute;161 top: 940px;162 left: 24px;163 width: 1032px;164 display: flex; align-items: center; justify-content: space-between;165 font-size: 38px; font-weight: 600;166 }167 .gear { width: 40px; height: 40px; fill: #B0B0B0; }168 169 .card {170 position: absolute;171 top: 1010px;172 left: 24px;173 width: 1032px;174 background: #1b1b1b;175 border-radius: 24px;176 box-sizing: border-box;177 padding: 24px;178 }179 .card-row {180 display: flex; gap: 24px;181 }182 .card-text {183 flex: 1;184 }185 .card-title {186 font-size: 48px; line-height: 1.25; color: #fff; margin-bottom: 24px;187 }188 .card-meta {189 color: #9e9e9e; font-size: 28px; margin-top: 8px;190 }191 .card-thumb {192 width: 240px; height: 180px; border-radius: 16px;193 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;194 display: flex; align-items: center; justify-content: center; text-align: center; font-size: 26px;195 }196 .card-actions {197 margin-top: 18px; display: flex; gap: 24px; align-items: center; justify-content: flex-end;198 }199 .action-icon { width: 40px; height: 40px; fill: #B0B0B0; }200 201 /* Second large image area (partially visible) */202 .big-image {203 position: absolute;204 top: 1440px;205 left: 24px;206 width: 1032px;207 height: 540px;208 border-radius: 24px;209 background: #E0E0E0; border: 1px solid #BDBDBD;210 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;211 }212 213 /* Snackbar */214 .snackbar {215 position: absolute;216 bottom: 120px;217 left: 0;218 width: 1080px;219 height: 100px;220 background: #1f1f1f;221 display: flex; align-items: center; justify-content: space-between;222 padding: 0 36px; box-sizing: border-box;223 font-size: 36px; color: #eaeaea;224 }225 .undo { color: #7dd4c0; font-weight: 600; }226 227 /* Home indicator bar */228 .home-indicator {229 position: absolute;230 bottom: 40px;231 left: 0;232 width: 1080px;233 display: flex; justify-content: center;234 }235 .home-line {236 width: 340px; height: 10px; background: #e0e0e0; border-radius: 5px; opacity: 0.85;237 }238 239 /* helper */240 .muted { color: #B0B0B0; }241</style>242</head>243<body>244<div id="render-target">245 246 <!-- Status bar -->247 <div class="status-bar">248 <div>6:44</div>249 <div class="status-right">250 <!-- simple dots placeholders -->251 <div style="display:flex; gap:8px;">252 <span>•</span><span>•</span><span>•</span><span>•</span><span>•</span>253 </div>254 <svg class="icon-wifi" viewBox="0 0 24 24"><path fill="#fff" d="M12 18.5l-2-2c1.1-1.1 2.9-1.1 4 0l-2 2zm-4-4l-2-2c3.3-3.3 8.7-3.3 12 0l-2 2c-2.2-2.1-5.8-2.1-8 0zm-4-4l-2-2c5.5-5.5 14.5-5.5 20 0l-2 2c-4.4-4.3-11.6-4.3-16 0z"/></svg>255 <svg class="icon-battery" viewBox="0 0 24 24"><path fill="#fff" d="M16 7h1v2h2v6h-2v2h-1v2H4V7h12zm-2 2H6v8h8V9z"/></svg>256 </div>257 </div>258 259 <!-- Toolbar -->260 <div class="toolbar">261 <div class="toolbar-left">262 <div class="home-btn">263 <svg width="36" height="36" viewBox="0 0 24 24"><path fill="#fff" d="M12 3l9 8h-3v9H6v-9H3l9-8z"/></svg>264 </div>265 </div>266 <div class="toolbar-right">267 <div class="avatar">C</div>268 <div class="tab-badge">1</div>269 <div class="menu-dots">270 <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4z"/></svg>271 </div>272 </div>273 </div>274 275 <!-- Google 25 logo -->276 <div class="g25">277 <span class="g">G</span><span class="two">2</span><span class="five">5</span><span class="g2">g</span><span class="l">l</span><span class="e">e</span>278 </div>279 280 <!-- Search bar -->281 <div class="search-bar">282 <svg class="icon" viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"/></svg>283 <div class="muted">Search or type web address</div>284 <div class="search-spacer"></div>285 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3a5 5 0 015 5v2h-2V8a3 3 0 10-6 0v2H7V8a5 5 0 015-5zm-7 8h14v10H5V11zm7 3a3 3 0 110 6 3 3 0 010-6z"/></svg>286 <svg class="icon" viewBox="0 0 24 24"><path d="M4 5h16v14H4V5zm8 2l3 3h3v6H6V10h3l3-3z"/></svg>287 </div>288 289 <!-- Shortcut tiles -->290 <div class="tiles">291 <div class="tile">292 <div class="tile-img">[IMG: News Street Photo]</div>293 <div class="tile-label">News</div>294 </div>295 <div class="tile">296 <div class="tile-img">[IMG: Recipes Dishes]</div>297 <div class="tile-label">Recipes</div>298 </div>299 <div class="tile">300 <div class="tile-img">[IMG: Music Listener]</div>301 <div class="tile-label">Music</div>302 </div>303 <div class="tile">304 <div class="tile-img">[IMG: Health Classroom]</div>305 <div class="tile-label">Health</div>306 </div>307 <div class="tile">308 <div class="tile-img">[IMG: Education Chalkboard]</div>309 <div class="tile-label">Ed</div>310 </div>311 </div>312 313 <!-- App icons row -->314 <div class="app-row">315 <div class="app">316 <div class="app-icon">317 <span style="font-size:42px; color:#3b5998; font-weight:bold;">f</span>318 </div>319 <div class="app-label">Facebook</div>320 </div>321 <div class="app">322 <div class="app-icon">323 <span style="font-size:34px; color:#4fc3f7; font-weight:bold;">CB</span>324 </div>325 <div class="app-label">Cricbuzz.c...</div>326 </div>327 <div class="app">328 <div class="app-icon">329 <svg viewBox="0 0 24 24" width="42" height="42"><path fill="#ff0000" d="M4 7h16v10H4z"/><path fill="#fff" d="M10 9l5 3-5 3z"/></svg>330 </div>331 <div class="app-label">YouTube</div>332 </div>333 <div class="app">334 <div class="app-icon">335 <span style="font-size:40px; color:#fff; font-weight:bold;">W</span>336 </div>337 <div class="app-label">Wikipedia</div>338 </div>339 </div>340 341 <!-- Discover -->342 <div class="discover-title">343 <div>Discover</div>344 <svg class="gear" viewBox="0 0 24 24"><path d="M12 8a4 4 0 100 8 4 4 0 000-8zm9.4 4a7.4 7.4 0 01-.1 1.3l2.1 1.6-2 3.5-2.6-.8a7.7 7.7 0 01-1.1.7l-.4 2.7h-4l-.4-2.7c-.4-.2-.8-.4-1.1-.7l-2.6.8-2-3.5 2.1-1.6c-.1-.4-.1-.9-.1-1.3s0-.9.1-1.3L2.7 9.1l2-3.5 2.6.8c.3-.3.7-.5 1.1-.7L9 3h4l.4 2.7c.4.2.8.4 1.1.7l2.6-.8 2 3.5-2.1 1.6c.1.4.1.9.1 1.3z"/></svg>345 </div>346 347 <!-- Discover Card -->348 <div class="card">349 <div class="card-row">350 <div class="card-text">351 <div class="card-title">Google Pixel 8 and Pixel 8 Pro camera specs, features and pricing surface</div>352 <div class="card-meta">FoneArena.com · 2d</div>353 </div>354 <div class="card-thumb">[IMG: Pixel 8 Thumbnail]</div>355 </div>356 <div class="card-actions">357 <svg class="action-icon" viewBox="0 0 24 24"><path d="M13 5.5l5 5-5 5V13H7V11h6V5.5zM5 19h14v2H5z"/></svg>358 <svg class="action-icon" viewBox="0 0 24 24"><path d="M12 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4zm0 5a2 2 0 110 4 2 2 0 010-4z"/></svg>359 </div>360 </div>361 362 <!-- Big image section (next card preview) -->363 <div class="big-image">[IMG: Large Tech Banner]</div>364 365 <!-- Snackbar -->366 <div class="snackbar">367 <div>Item removed</div>368 <div class="undo">Undo</div>369 </div>370 371 <!-- Home indicator -->372 <div class="home-indicator"><div class="home-line"></div></div>373 374</div>375</body>376</html>