GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FAFAFA;15 border-radius: 24px;16 box-shadow: 0 10px 30px rgba(0,0,0,0.08);17 color: #212121;18 }19 20 /* Status bar */21 .status-bar {22 position: absolute;23 top: 0;24 left: 0;25 width: 100%;26 height: 92px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 padding: 0 36px;31 font-size: 34px;32 color: #3c4043;33 }34 .status-icons { display: flex; align-items: center; gap: 18px; }35 .sb-dot { width: 10px; height: 10px; background: #757575; border-radius: 50%; display: inline-block; }36 37 /* Search bar */38 .search-wrap {39 position: absolute;40 top: 108px;41 left: 40px;42 width: 1000px;43 height: 116px;44 background: #fff;45 border: 1px solid #E0E0E0;46 border-radius: 58px;47 box-shadow: 0 8px 16px rgba(0,0,0,0.08);48 display: flex;49 align-items: center;50 padding: 0 28px;51 gap: 22px;52 }53 .search-placeholder {54 font-size: 38px;55 color: #8a8a8a;56 flex: 1;57 }58 .icon-32 { width: 42px; height: 42px; }59 .round-icon {60 width: 66px; height: 66px; border-radius: 33px;61 background: #F1F3F4; border: 1px solid #E0E0E0;62 display: flex; align-items: center; justify-content: center;63 }64 65 /* Chips row */66 .chips-row {67 position: absolute;68 top: 252px;69 left: 40px;70 width: 1000px;71 display: flex;72 gap: 18px;73 align-items: center;74 }75 .chip {76 background: #fff;77 border: 1px solid #E0E0E0;78 box-shadow: 0 4px 10px rgba(0,0,0,0.05);79 height: 92px;80 padding: 0 28px;81 border-radius: 46px;82 display: flex;83 align-items: center;84 gap: 18px;85 }86 .chip .label { font-size: 32px; color: #3c4043; }87 .divider-v {88 width: 2px; height: 52px; background: #E0E0E0; margin: 0 8px;89 }90 91 /* Recent header */92 .recent-header {93 position: absolute;94 top: 418px;95 left: 40px;96 width: 1000px;97 display: flex;98 align-items: center;99 justify-content: space-between;100 color: #4a4a4a;101 font-size: 34px;102 }103 .recent-list {104 position: absolute;105 top: 484px;106 left: 40px;107 width: 1000px;108 }109 .recent-item {110 display: flex;111 gap: 26px;112 padding: 28px 0;113 border-bottom: 1px solid #E0E0E0;114 }115 .bullet-icon {116 width: 64px; height: 64px; border-radius: 32px; background: #ECEFF1; border: 1px solid #D0D0D0;117 display: flex; align-items: center; justify-content: center;118 }119 .bullet-icon.pink { background: #FFCDD2; border-color: #F48FB1; }120 .place-texts { flex: 1; }121 .place-title { font-size: 36px; font-weight: 600; color: #202124; }122 .place-sub { font-size: 28px; color: #5f6368; margin-top: 6px; }123 .place-meta { font-size: 28px; color: #5f6368; margin-top: 10px; }124 .open { color: #2E7D32; font-weight: 600; }125 126 /* Keyboard mock */127 .keyboard {128 position: absolute;129 left: 0;130 bottom: 92px;131 width: 100%;132 height: 780px;133 background: #F0F1E9;134 border-top: 1px solid #DADCE0;135 }136 .kb-tools {137 height: 96px;138 display: flex;139 align-items: center;140 gap: 38px;141 padding: 0 30px;142 }143 .tool {144 display: flex; align-items: center; gap: 10px;145 color: #5f6368; font-size: 28px;146 }147 .tool .round { width: 54px; height: 54px; border-radius: 27px; background: #E8EAE6; border: 1px solid #D0D0D0; display:flex; align-items:center; justify-content:center; }148 149 .kb-row {150 display: flex;151 justify-content: center;152 gap: 12px;153 padding: 16px 16px;154 }155 .key {156 width: 92px; height: 112px; border-radius: 20px;157 background: #FFFFFF;158 border: 1px solid #E0E0E0;159 box-shadow: 0 2px 0 rgba(0,0,0,0.04) inset;160 display: flex; align-items: center; justify-content: center;161 font-size: 36px; color: #202124;162 }163 .key.small { width: 86px; }164 .key.wide { width: 160px; }165 .key.xwide { width: 540px; }166 .key.func { background: #E8EFE1; }167 .key.green { background: #CDE7C8; }168 169 /* Gesture bar */170 .gesture {171 position: absolute;172 bottom: 24px;173 left: 50%;174 transform: translateX(-50%);175 width: 210px; height: 16px;176 background: #9E9E9E; border-radius: 8px; opacity: 0.7;177 }178 179 /* Simple inline SVG wrapper tweak */180 .svg-icon { width: 36px; height: 36px; }181</style>182</head>183<body>184<div id="render-target">185 186 <!-- Status bar -->187 <div class="status-bar">188 <div>6:58</div>189 <div class="status-icons">190 <!-- simple status icons -->191 <svg class="svg-icon" viewBox="0 0 24 24">192 <circle cx="12" cy="12" r="8" fill="#616161"></circle>193 </svg>194 <svg class="svg-icon" viewBox="0 0 24 24">195 <rect x="2" y="10" width="20" height="6" rx="3" fill="#616161"></rect>196 </svg>197 <svg class="svg-icon" viewBox="0 0 24 24">198 <path d="M3 18h18M6 14h12M9 10h6M12 6h0" stroke="#616161" stroke-width="2" stroke-linecap="round"></path>199 </svg>200 <span class="sb-dot"></span>201 <svg class="svg-icon" viewBox="0 0 24 24">202 <path d="M12 2l4 7h-8l4-7zM6 22h12l-2-10H8l-2 10z" fill="#616161"></path>203 </svg>204 </div>205 </div>206 207 <!-- Search bar -->208 <div class="search-wrap">209 <svg class="icon-32" viewBox="0 0 24 24">210 <circle cx="10" cy="10" r="7" stroke="#757575" stroke-width="2" fill="none"></circle>211 <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#757575" stroke-width="2" stroke-linecap="round"></line>212 </svg>213 <div class="search-placeholder">Search here</div>214 <div class="round-icon">215 <svg class="svg-icon" viewBox="0 0 24 24">216 <rect x="9" y="4" width="6" height="10" rx="3" fill="#757575"></rect>217 <rect x="8" y="14" width="8" height="6" rx="3" fill="#757575"></rect>218 </svg>219 </div>220 </div>221 222 <!-- Chips -->223 <div class="chips-row">224 <div class="chip">225 <div class="round-icon" style="width:56px;height:56px;border-radius:28px;">226 <svg class="svg-icon" viewBox="0 0 24 24">227 <path d="M3 11l9-7 9 7v9H3z" fill="#616161"></path>228 </svg>229 </div>230 <div>231 <div class="label">Home</div>232 <div style="font-size:24px;color:#8a8a8a;">Set location</div>233 </div>234 </div>235 236 <div class="chip">237 <div class="round-icon" style="width:56px;height:56px;border-radius:28px;">238 <svg class="svg-icon" viewBox="0 0 24 24">239 <rect x="4" y="8" width="16" height="10" rx="2" fill="#5f6368"></rect>240 <rect x="8" y="5" width="8" height="3" rx="1" fill="#5f6368"></rect>241 </svg>242 </div>243 <div>244 <div class="label">Work</div>245 <div style="font-size:24px;color:#8a8a8a;">Westerstra...</div>246 </div>247 </div>248 249 <div class="chip">250 <div class="round-icon" style="width:56px;height:56px;border-radius:28px;">251 <svg class="svg-icon" viewBox="0 0 24 24">252 <circle cx="6" cy="12" r="2" fill="#616161"></circle>253 <circle cx="12" cy="12" r="2" fill="#616161"></circle>254 <circle cx="18" cy="12" r="2" fill="#616161"></circle>255 </svg>256 </div>257 <div class="label">More</div>258 </div>259 </div>260 261 <!-- Recent header -->262 <div class="recent-header">263 <div>Recent</div>264 <div class="round-icon" style="width:66px;height:66px;border-radius:33px;">265 <svg class="svg-icon" viewBox="0 0 24 24">266 <path d="M4 6h16M4 12h10M4 18h6" stroke="#616161" stroke-width="2" stroke-linecap="round"></path>267 </svg>268 </div>269 </div>270 271 <!-- Recent list -->272 <div class="recent-list">273 <div class="recent-item">274 <div class="bullet-icon">275 <svg class="svg-icon" viewBox="0 0 24 24">276 <circle cx="12" cy="12" r="9" fill="#B0BEC5"></circle>277 <path d="M12 6v6l4 2" stroke="#ffffff" stroke-width="2" stroke-linecap="round" fill="none"></path>278 </svg>279 </div>280 <div class="place-texts">281 <div class="place-title">Noorderlicht Café</div>282 <div class="place-sub">NDSM-Plein, Amsterdam, Netherlands</div>283 <div class="place-meta"><span class="open">Open</span> · Closes 10:00 pm</div>284 </div>285 </div>286 287 <div class="recent-item">288 <div class="bullet-icon">289 <svg class="svg-icon" viewBox="0 0 24 24">290 <circle cx="12" cy="12" r="9" fill="#B0BEC5"></circle>291 <path d="M12 6v6l4 2" stroke="#ffffff" stroke-width="2" stroke-linecap="round" fill="none"></path>292 </svg>293 </div>294 <div class="place-texts">295 <div class="place-title">Villa Care - Villa onderhoud</div>296 <div class="place-sub">Westerstraat, Amsterdam, Netherlands</div>297 </div>298 </div>299 300 <div class="recent-item">301 <div class="bullet-icon pink">302 <svg class="svg-icon" viewBox="0 0 24 24">303 <path d="M12 21s-7-4.5-7-9a4 4 0 018-1 4 4 0 018 1c0 4.5-7 9-7 9z" fill="#E91E63"></path>304 </svg>305 </div>306 <div class="place-texts">307 <div class="place-title">DutyFree - The Vayu Bar</div>308 <div class="place-sub">Saved in Favorites</div>309 <div class="place-meta"><span class="open">Open</span> · Closes 1:00 am</div>310 </div>311 </div>312 313 <div class="recent-item">314 <div class="bullet-icon">315 <svg class="svg-icon" viewBox="0 0 24 24">316 <circle cx="12" cy="12" r="9" fill="#B0BEC5"></circle>317 <path d="M12 6v6l4 2" stroke="#ffffff" stroke-width="2" stroke-linecap="round" fill="none"></path>318 </svg>319 </div>320 <div class="place-texts">321 <div class="place-title">Gouda</div>322 <div class="place-sub">Netherlands</div>323 </div>324 </div>325 326 <div class="recent-item">327 <div class="bullet-icon">328 <svg class="svg-icon" viewBox="0 0 24 24">329 <circle cx="12" cy="12" r="9" fill="#B0BEC5"></circle>330 <path d="M12 6v6l4 2" stroke="#ffffff" stroke-width="2" stroke-linecap="round" fill="none"></path>331 </svg>332 </div>333 <div class="place-texts">334 <div class="place-title">VW Gouda</div>335 <div class="place-sub">...</div>336 </div>337 </div>338 </div>339 340 <!-- Keyboard -->341 <div class="keyboard">342 <div class="kb-tools">343 <div class="tool"><div class="round"></div><span>🙂</span></div>344 <div class="tool"><div class="round"></div><span>GIF</span></div>345 <div class="tool"><div class="round"></div><span>⚙️</span></div>346 <div class="tool"><div class="round"></div><span>G✕</span></div>347 <div class="tool"><div class="round"></div><span>🎨</span></div>348 <div class="tool" style="margin-left:auto;">349 <div class="round">350 <svg class="svg-icon" viewBox="0 0 24 24">351 <circle cx="12" cy="12" r="9" fill="#757575"></circle>352 </svg>353 </div>354 </div>355 </div>356 357 <div class="kb-row">358 <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>359 <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>360 </div>361 <div class="kb-row">362 <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>363 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>364 </div>365 <div class="kb-row">366 <div class="key func wide">367 <svg class="svg-icon" viewBox="0 0 24 24">368 <path d="M6 18l4-6 4 6" stroke="#4a4a4a" stroke-width="2" fill="none" stroke-linecap="round"></path>369 </svg>370 </div>371 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>372 <div class="key">b</div><div class="key">n</div><div class="key">m</div>373 <div class="key func wide">374 <svg class="svg-icon" viewBox="0 0 24 24">375 <path d="M4 6h16v12H4z" fill="#4a4a4a"></path>376 <path d="M9 10l-3 3 3 3" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>377 </svg>378 </div>379 </div>380 <div class="kb-row">381 <div class="key func wide">?123</div>382 <div class="key func small">,</div>383 <div class="key func small">🙂</div>384 <div class="key xwide"></div>385 <div class="key func small">.</div>386 <div class="key green wide">387 <svg class="svg-icon" viewBox="0 0 24 24">388 <circle cx="11" cy="11" r="7" stroke="#2e7d32" stroke-width="2" fill="none"></circle>389 <line x1="15.5" y1="15.5" x2="21" y2="21" stroke="#2e7d32" stroke-width="2" stroke-linecap="round"></line>390 </svg>391 </div>392 </div>393 </div>394 395 <!-- Gesture bar -->396 <div class="gesture"></div>397 398</div>399</body>400</html>