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 UI Mock</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: "Roboto", Arial, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #ffffff;20 }21 22 /* Top app header */23 .header {24 position: absolute;25 top: 0;26 left: 0;27 width: 1080px;28 height: 220px;29 background: #EEB45C;30 color: #ffffff;31 }32 .status-bar {33 height: 80px;34 padding: 0 32px;35 display: flex;36 align-items: center;37 justify-content: space-between;38 font-size: 38px;39 letter-spacing: 1px;40 }41 .status-left {42 display: flex;43 align-items: center;44 gap: 18px;45 }46 .ghost-dot {47 width: 16px;48 height: 16px;49 background: #fff;50 border-radius: 50%;51 opacity: 0.9;52 }53 .status-right {54 display: flex;55 align-items: center;56 gap: 22px;57 }58 .status-icon {59 width: 40px;60 height: 40px;61 }62 63 .app-bar {64 height: 120px;65 padding: 0 32px;66 display: flex;67 align-items: center;68 justify-content: space-between;69 }70 .app-left {71 display: flex;72 align-items: center;73 gap: 30px;74 }75 .app-right {76 display: flex;77 align-items: center;78 gap: 22px;79 }80 .app-icon {81 width: 64px;82 height: 64px;83 }84 .record-dot {85 width: 28px;86 height: 28px;87 background: #E84B3C;88 border-radius: 50%;89 }90 .divider {91 position: absolute;92 bottom: 0;93 left: 0;94 width: 1080px;95 height: 2px;96 background: rgba(255,255,255,0.35);97 }98 99 /* Main content area */100 .content {101 position: absolute;102 top: 220px;103 left: 0;104 right: 0;105 bottom: 1000px; /* space for ad + keyboard + home indicator */106 background: #ffffff;107 }108 109 /* Floating Action Button */110 .fab {111 position: absolute;112 right: 56px;113 bottom: 300px; /* sits above ad */114 width: 140px;115 height: 140px;116 background: #EEB45C;117 border-radius: 50%;118 box-shadow: 0 12px 20px rgba(0,0,0,0.2);119 display: flex;120 align-items: center;121 justify-content: center;122 }123 .fab svg {124 width: 72px;125 height: 72px;126 }127 128 /* Ad banner */129 .ad-banner {130 position: absolute;131 left: 0;132 right: 0;133 bottom: 780px; /* above keyboard */134 height: 200px;135 background: #f7f7f7;136 display: flex;137 align-items: stretch;138 border-top: 1px solid #e0e0e0;139 border-bottom: 1px solid #e0e0e0;140 }141 .ad-img {142 flex: 1;143 display: flex;144 align-items: center;145 justify-content: center;146 background: #E0E0E0;147 border-right: 1px solid #BDBDBD;148 color: #757575;149 font-size: 36px;150 }151 .ad-close {152 position: absolute;153 right: 16px;154 top: 16px;155 width: 56px;156 height: 56px;157 border: 2px solid #7ab6e6;158 border-radius: 6px;159 background: #ffffff;160 display: flex;161 align-items: center;162 justify-content: center;163 }164 .ad-close svg {165 width: 30px;166 height: 30px;167 stroke: #7ab6e6;168 }169 170 /* Keyboard mock */171 .keyboard {172 position: absolute;173 left: 0;174 right: 0;175 bottom: 60px; /* leave a little space for the gesture bar */176 height: 720px;177 background: #1F1F22;178 border-top: 1px solid rgba(255,255,255,0.08);179 padding: 18px 18px 24px;180 box-sizing: border-box;181 }182 .kbd-row {183 display: flex;184 justify-content: center;185 gap: 12px;186 margin: 12px 12px;187 }188 .kbd-top-actions {189 display: flex;190 justify-content: space-between;191 align-items: center;192 padding: 8px 10px 18px;193 }194 .action-icon {195 width: 92px;196 height: 72px;197 background: #2A2B2E;198 border-radius: 16px;199 display: flex;200 align-items: center;201 justify-content: center;202 color: #D8D8D8;203 font-size: 30px;204 }205 .key {206 min-width: 80px;207 height: 120px;208 background: #2A2B2E;209 color: #EDEDED;210 border-radius: 20px;211 display: flex;212 align-items: center;213 justify-content: center;214 font-size: 44px;215 box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25);216 }217 .key.wide {218 min-width: 180px;219 }220 .key.space {221 min-width: 520px;222 }223 .key.backspace svg,224 .key.search svg {225 width: 44px;226 height: 44px;227 }228 .key.small {229 min-width: 140px;230 font-size: 36px;231 color: #D0D0D0;232 }233 234 /* Gesture bar */235 .home-indicator {236 position: absolute;237 left: 50%;238 bottom: 22px;239 transform: translateX(-50%);240 width: 240px;241 height: 10px;242 background: #E6E6E6;243 border-radius: 8px;244 opacity: 0.9;245 }246 247 /* Tiny 2x2 color grid badge on header right */248 .color-grid {249 width: 62px;250 height: 62px;251 display: grid;252 grid-template-columns: 1fr 1fr;253 grid-template-rows: 1fr 1fr;254 gap: 4px;255 }256 .color-grid div {257 border-radius: 6px;258 }259</style>260</head>261<body>262<div id="render-target">263 264 <!-- Header -->265 <div class="header">266 <div class="status-bar">267 <div class="status-left">268 <div style="font-weight: 500;">5:25</div>269 <div class="ghost-dot"></div>270 <div class="ghost-dot"></div>271 <div class="ghost-dot"></div>272 <div class="ghost-dot"></div>273 <div class="ghost-dot" style="opacity:0.6;"></div>274 </div>275 <div class="status-right">276 <!-- Wi-Fi -->277 <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">278 <path d="M2 8c5-4 15-4 20 0"></path>279 <path d="M5 12c4-3 10-3 14 0"></path>280 <path d="M8 16c3-2 5-2 8 0"></path>281 <circle cx="12" cy="19" r="1.5" fill="#fff"></circle>282 </svg>283 <!-- Battery -->284 <svg class="status-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">285 <rect x="2" y="7" width="18" height="10" rx="2" ry="2"></rect>286 <rect x="4" y="9" width="10" height="6" fill="#fff" stroke="none"></rect>287 <path d="M22 10v4"></path>288 </svg>289 </div>290 </div>291 292 <div class="app-bar">293 <div class="app-left">294 <!-- Back Arrow -->295 <svg class="app-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">296 <path d="M15 5l-7 7 7 7"></path>297 </svg>298 <div class="record-dot"></div>299 <!-- Search Icon -->300 <svg class="app-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round">301 <circle cx="11" cy="11" r="7"></circle>302 <path d="M21 21l-4.3-4.3"></path>303 </svg>304 </div>305 <div class="app-right">306 <!-- Close Icon -->307 <svg class="app-icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round">308 <path d="M5 5l14 14M19 5L5 19"></path>309 </svg>310 <!-- 2x2 color grid badge -->311 <div class="color-grid">312 <div style="background:#F4D35E;"></div>313 <div style="background:#8BD17C;"></div>314 <div style="background:#6EC1E4;"></div>315 <div style="background:#EA5B62;"></div>316 </div>317 </div>318 </div>319 <div class="divider"></div>320 </div>321 322 <!-- Main content area (blank) -->323 <div class="content"></div>324 325 <!-- Floating action button -->326 <div class="fab" aria-label="Add">327 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round">328 <path d="M12 5v14M5 12h14"></path>329 </svg>330 </div>331 332 <!-- Ad banner -->333 <div class="ad-banner">334 <div class="ad-img">[IMG: Food ad banner]</div>335 <div class="ad-close" title="Close ad">336 <svg viewBox="0 0 24 24" fill="none" stroke-width="2.2" stroke-linecap="round">337 <path d="M5 5l14 14M19 5L5 19" />338 </svg>339 </div>340 </div>341 342 <!-- Keyboard -->343 <div class="keyboard">344 <div class="kbd-top-actions">345 <div class="action-icon">⌨</div>346 <div class="action-icon">😊</div>347 <div class="action-icon">GIF</div>348 <div class="action-icon">⚙</div>349 <div class="action-icon">G↔</div>350 <div class="action-icon">🎨</div>351 <div class="action-icon">🎙</div>352 </div>353 <div class="kbd-row">354 <div class="key">q</div>355 <div class="key">w</div>356 <div class="key">e</div>357 <div class="key">r</div>358 <div class="key">t</div>359 <div class="key">y</div>360 <div class="key">u</div>361 <div class="key">i</div>362 <div class="key">o</div>363 <div class="key">p</div>364 </div>365 <div class="kbd-row">366 <div class="key">a</div>367 <div class="key">s</div>368 <div class="key">d</div>369 <div class="key">f</div>370 <div class="key">g</div>371 <div class="key">h</div>372 <div class="key">j</div>373 <div class="key">k</div>374 <div class="key">l</div>375 </div>376 <div class="kbd-row">377 <div class="key small">⇧</div>378 <div class="key">z</div>379 <div class="key">x</div>380 <div class="key">c</div>381 <div class="key">v</div>382 <div class="key">b</div>383 <div class="key">n</div>384 <div class="key">m</div>385 <div class="key backspace">386 <svg viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2.2" stroke-linecap="round">387 <path d="M20 7H10l-5 5 5 5h10a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"></path>388 <path d="M12 9l6 6M18 9l-6 6"></path>389 </svg>390 </div>391 </div>392 <div class="kbd-row">393 <div class="key small">?123</div>394 <div class="key small">🙂</div>395 <div class="key space">space</div>396 <div class="key">.</div>397 <div class="key search" title="Search">398 <svg viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2.2" stroke-linecap="round">399 <circle cx="11" cy="11" r="7"></circle>400 <path d="M21 21l-4.3-4.3"></path>401 </svg>402 </div>403 </div>404 </div>405 406 <!-- Gesture bar -->407 <div class="home-indicator"></div>408 409</div>410</body>411</html>