GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile UI Mock</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #FFFFFF;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 90px;23 padding: 0 32px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #111;28 font-size: 34px;29 }30 .status-icons {31 display: flex;32 gap: 18px;33 align-items: center;34 }35 .dot {36 width: 12px;37 height: 12px;38 background: #333;39 border-radius: 50%;40 display: inline-block;41 }42 43 /* Search area */44 .search-wrap {45 position: absolute;46 top: 96px;47 left: 32px;48 width: 1016px;49 height: 128px;50 display: flex;51 align-items: center;52 background: #F1F3F4;53 border-radius: 64px;54 padding: 0 24px;55 box-sizing: border-box;56 }57 .icon-btn {58 width: 72px;59 height: 72px;60 border-radius: 36px;61 display: flex;62 align-items: center;63 justify-content: center;64 color: #5f6368;65 }66 .search-input {67 flex: 1;68 font-size: 48px;69 color: #1F1F1F;70 margin-left: 12px;71 letter-spacing: 0.5px;72 }73 .search-input b { font-weight: 600; }74 .clear-btn {75 width: 76px;76 height: 76px;77 border-radius: 38px;78 background: #fff;79 display: flex;80 align-items: center;81 justify-content: center;82 box-shadow: 0 1px 2px rgba(0,0,0,0.15);83 color: #5f6368;84 }85 86 /* Suggestion list */87 .suggestions {88 position: absolute;89 top: 244px;90 left: 0;91 width: 1080px;92 }93 .s-item {94 display: flex;95 align-items: center;96 padding: 28px 24px 28px 36px;97 height: 156px;98 border-bottom: 1px solid #eee;99 }100 .pin {101 width: 84px;102 height: 84px;103 border-radius: 42px;104 background: #F1F3F4;105 display: flex;106 align-items: center;107 justify-content: center;108 margin-right: 28px;109 color: #5f6368;110 }111 .s-text {112 flex: 1;113 }114 .s-title {115 font-size: 44px;116 color: #1F1F1F;117 font-weight: 700;118 line-height: 56px;119 }120 .s-sub {121 font-size: 34px;122 color: #6B6B6B;123 margin-top: 6px;124 }125 .chev {126 width: 72px;127 height: 72px;128 display: flex;129 align-items: center;130 justify-content: center;131 color: #5f6368;132 }133 134 /* Large spacer between list and keyboard */135 .white-space {136 position: absolute;137 left: 0;138 width: 1080px;139 height: 540px;140 bottom: 900px; /* sits right above keyboard */141 background: #fff;142 }143 144 /* Keyboard */145 .keyboard {146 position: absolute;147 bottom: 0;148 left: 0;149 width: 1080px;150 height: 900px;151 background: #1E1F22;152 color: #e8e8e8;153 box-shadow: 0 -2px 8px rgba(0,0,0,0.3);154 }155 .kb-toolbar {156 height: 120px;157 padding: 0 36px;158 display: flex;159 align-items: center;160 gap: 46px;161 color: #e0e0e0;162 }163 .kb-toolbar .tool {164 width: 88px;165 height: 88px;166 background: #2A2B2E;167 border-radius: 18px;168 display: flex;169 align-items: center;170 justify-content: center;171 }172 .kb-rows {173 padding: 12px 18px 18px;174 }175 .kb-row {176 display: grid;177 grid-template-columns: repeat(10, 1fr);178 gap: 12px;179 margin-bottom: 18px;180 }181 .kb-row.short {182 grid-template-columns: repeat(9, 1fr);183 margin-left: 50px;184 margin-right: 50px;185 }186 .key {187 background: #2A2B2E;188 border-radius: 18px;189 height: 120px;190 display: flex;191 align-items: center;192 justify-content: center;193 font-size: 46px;194 letter-spacing: 1px;195 }196 .kb-bottom {197 display: grid;198 grid-template-columns: 200px 120px 120px 1fr 120px 180px 160px;199 gap: 14px;200 padding: 6px 18px 24px;201 }202 .spacebar {203 background: #2A2B2E;204 border-radius: 22px;205 height: 130px;206 display: flex;207 align-items: center;208 justify-content: center;209 color: #cfcfcf;210 font-size: 38px;211 }212 .circle-search {213 width: 132px;214 height: 132px;215 border-radius: 66px;216 background: #C7D5EA;217 display: flex;218 align-items: center;219 justify-content: center;220 color: #0B4B91;221 }222 223 /* Helpers for SVG icons */224 svg { width: 44px; height: 44px; }225</style>226</head>227<body>228<div id="render-target">229 230 <!-- Status bar -->231 <div class="status-bar">232 <div style="font-weight:600;">11:04</div>233 <div class="status-icons">234 <span class="dot"></span>235 <span class="dot"></span>236 <span class="dot"></span>237 <span class="dot"></span>238 <span class="dot"></span>239 <div class="dot" style="width:10px;height:20px;border-radius:4px;"></div>240 </div>241 </div>242 243 <!-- Search field -->244 <div class="search-wrap">245 <div class="icon-btn">246 <svg viewBox="0 0 24 24" fill="#5f6368">247 <path d="M15.5 3.5 7 12l8.5 8.5-1.4 1.4L4.2 12l9.9-9.9z"/>248 </svg>249 </div>250 <div class="search-input"><b>Yk</b></div>251 <div class="clear-btn">252 <svg viewBox="0 0 24 24" fill="#5f6368">253 <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm3.5 13.1-1.4 1.4L12 13.4l-2.1 2.1-1.4-1.4L10.6 12 8.5 9.9l1.4-1.4L12 10.6l2.1-2.1 1.4 1.4L13.4 12l2.1 2.1z"/>254 </svg>255 </div>256 </div>257 258 <!-- Suggestions -->259 <div class="suggestions">260 <div class="s-item">261 <div class="pin">262 <svg viewBox="0 0 24 24" fill="#5f6368">263 <path d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>264 </svg>265 </div>266 <div class="s-text">267 <div class="s-title">Ykk Pvt Ltd Bawal</div>268 <div class="s-sub">Industrial Model Township, Jaliawas, Har...</div>269 </div>270 <div class="chev">271 <svg viewBox="0 0 24 24" fill="#5f6368">272 <path d="M5 19 19 5v8h2V3H11v2h8L5 19z"/>273 </svg>274 </div>275 </div>276 277 <div class="s-item">278 <div class="pin">279 <svg viewBox="0 0 24 24" fill="#5f6368">280 <path d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>281 </svg>282 </div>283 <div class="s-text">284 <div class="s-title">Region of Waterloo International A...</div>285 <div class="s-sub">Fountain Street North, Breslau, ON, Cana...</div>286 </div>287 <div class="chev">288 <svg viewBox="0 0 24 24" fill="#5f6368">289 <path d="M5 19 19 5v8h2V3H11v2h8L5 19z"/>290 </svg>291 </div>292 </div>293 294 <div class="s-item">295 <div class="pin">296 <svg viewBox="0 0 24 24" fill="#5f6368">297 <path d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>298 </svg>299 </div>300 <div class="s-text">301 <div class="s-title">Y K Nagar, Virar West</div>302 <div class="s-sub">Virar, Maharashtra</div>303 </div>304 <div class="chev">305 <svg viewBox="0 0 24 24" fill="#5f6368">306 <path d="M5 19 19 5v8h2V3H11v2h8L5 19z"/>307 </svg>308 </div>309 </div>310 311 <div class="s-item">312 <div class="pin">313 <svg viewBox="0 0 24 24" fill="#5f6368">314 <path d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>315 </svg>316 </div>317 <div class="s-text">318 <div class="s-title">Yk Candy Shop</div>319 <div class="s-sub">Rutland Street, Philadelphia, PA, USA</div>320 </div>321 <div class="chev">322 <svg viewBox="0 0 24 24" fill="#5f6368">323 <path d="M5 19 19 5v8h2V3H11v2h8L5 19z"/>324 </svg>325 </div>326 </div>327 </div>328 329 <div class="white-space"></div>330 331 <!-- Keyboard -->332 <div class="keyboard">333 <div class="kb-toolbar">334 <div class="tool">335 <svg viewBox="0 0 24 24" fill="#eaeaea"><path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg>336 </div>337 <div class="tool">338 <svg viewBox="0 0 24 24" fill="#eaeaea"><path d="M12 12c2.8 0 5-2.2 5-5S14.8 2 12 2 7 4.2 7 7s2.2 5 5 5zm-7 9c0-3.3 2.7-6 6-6h2c3.3 0 6 2.7 6 6v1H5v-1z"/></svg>339 </div>340 <div class="tool"><span style="font-weight:700;">GIF</span></div>341 <div class="tool">342 <svg viewBox="0 0 24 24" fill="#eaeaea"><path d="M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm8 3h-2.1a6 6 0 0 0-1.5-3.6l1.5-1.5-1.4-1.4-1.5 1.5A6 6 0 0 0 13 4.1V2h-2v2.1A6 6 0 0 0 7.4 6l-1.5-1.5L4.6 6l1.5 1.5A6 6 0 0 0 4.1 11H2v2h2.1a6 6 0 0 0 1.5 3.6L4 18.1l1.4 1.4 1.5-1.5A6 6 0 0 0 11 19.9V22h2v-2.1a6 6 0 0 0 3.6-1.5l1.5 1.5 1.4-1.4-1.5-1.5A6 6 0 0 0 19.9 13H22v-2z"/></svg>343 </div>344 <div class="tool">345 <svg viewBox="0 0 24 24" fill="#eaeaea"><path d="M3 5h18v2H3V5zm0 6h12v2H3v-2zm0 6h18v2H3v-2z"/></svg>346 </div>347 <div class="tool">348 <svg viewBox="0 0 24 24" fill="#eaeaea"><circle cx="12" cy="12" r="6"/><path d="M3 12h6M15 12h6M12 3v6M12 15v6"/></svg>349 </div>350 <div class="tool">351 <svg viewBox="0 0 24 24" fill="#eaeaea"><path d="M12 3a4 4 0 0 0-4 4v5a4 4 0 0 0 8 0V7a4 4 0 0 0-4-4zm-2 16h4v2h-4v-2z"/></svg>352 </div>353 </div>354 355 <div class="kb-rows">356 <div class="kb-row">357 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>358 </div>359 <div class="kb-row short">360 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>361 </div>362 <div class="kb-row" style="grid-template-columns: repeat(7, 1fr); padding: 0 60px;">363 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>364 </div>365 </div>366 367 <div class="kb-bottom">368 <div class="spacebar">?123</div>369 <div class="key">,</div>370 <div class="key">☺</div>371 <div class="spacebar">space</div>372 <div class="key">.</div>373 <div class="key">374 <svg viewBox="0 0 24 24" fill="#eaeaea"><path d="M22 12 13 3v6H2v6h11v6l9-9z"/></svg>375 </div>376 <div class="circle-search">377 <svg viewBox="0 0 24 24" fill="#0B4B91"><path d="M15.5 14h-.8l-.3-.3a6 6 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zM10 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/></svg>378 </div>379 </div>380 </div>381 382</div>383</body>384</html>