GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI Render</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: linear-gradient(#7db2d9, #a9c9ea 40%, #cfe3f7);13 }14 15 /* Subtle cloudy feel */16 .cloud {17 position: absolute;18 background: rgba(255,255,255,0.35);19 border-radius: 60px;20 filter: blur(6px);21 }22 .cloud.c1 { width: 420px; height: 120px; top: 260px; left: 60px; }23 .cloud.c2 { width: 520px; height: 150px; top: 540px; right: 90px; }24 .cloud.c3 { width: 360px; height: 110px; top: 860px; left: 140px; }25 .cloud.c4 { width: 440px; height: 130px; top: 1200px; right: 120px; }26 27 /* Status bar */28 .status-bar {29 position: absolute;30 top: 0;31 left: 0;32 width: 1080px;33 height: 92px;34 color: #ffffff;35 display: flex;36 align-items: center;37 padding: 0 28px;38 font-size: 42px;39 letter-spacing: 0.5px;40 mix-blend-mode: normal;41 }42 .status-left { flex: 1; }43 .status-center { flex: 1; text-align: center; opacity: 0.85; }44 .status-right { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 18px; }45 46 .icon {47 display: inline-flex;48 width: 42px; height: 42px;49 justify-content: center; align-items: center;50 }51 .battery {52 display: inline-flex; align-items: center; gap: 10px; font-size: 34px;53 }54 .battery svg { width: 60px; height: 34px; }55 56 /* Search overlay */57 .search-overlay {58 position: absolute;59 top: 120px;60 left: 20px;61 width: 1040px;62 border-radius: 14px;63 }64 .search-bar {65 height: 118px;66 background: rgba(0,0,0,0.80);67 border-radius: 14px;68 color: #fff;69 display: flex;70 align-items: center;71 padding: 0 24px;72 box-shadow: 0 6px 20px rgba(0,0,0,0.25);73 }74 .search-title {75 flex: 1;76 font-size: 56px;77 font-weight: 500;78 letter-spacing: 0.3px;79 }80 .search-actions { display: flex; gap: 26px; }81 .search-actions .icon svg { width: 48px; height: 48px; fill: #fff; }82 83 .suggestion {84 margin-top: 16px;85 background: rgba(0,0,0,0.85);86 color: #dcdcdc;87 border-radius: 12px;88 padding: 28px 24px;89 font-size: 44px;90 box-shadow: 0 6px 20px rgba(0,0,0,0.25);91 }92 93 /* Forecast row */94 .forecast-row {95 position: absolute;96 top: 340px;97 left: 20px;98 width: 1040px;99 display: grid;100 grid-template-columns: repeat(6, 1fr);101 gap: 16px;102 }103 .forecast-item {104 background: rgba(255,255,255,0.35);105 border-radius: 18px;106 padding: 18px;107 text-align: center;108 color: #1f3c5f;109 }110 .forecast-item .temp { font-size: 44px; font-weight: bold; }111 .forecast-item .time { font-size: 32px; margin-top: 6px; }112 .forecast-icon {113 width: 100%;114 height: 62px;115 margin-bottom: 10px;116 background: rgba(255,255,255,0.55);117 border: 1px solid rgba(140,160,180,0.6);118 border-radius: 12px;119 display: flex; align-items: center; justify-content: center;120 color: #5c728c;121 font-size: 28px;122 }123 124 /* Weather card */125 .weather-card {126 position: absolute;127 top: 520px;128 left: 20px;129 width: 1040px;130 height: 600px;131 background: rgba(255,255,255,0.20);132 backdrop-filter: blur(2px);133 border-radius: 22px;134 color: #0f3157;135 padding: 30px;136 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);137 }138 .wc-top {139 display: grid;140 grid-template-columns: 1.4fr 1fr 1.2fr;141 align-items: center;142 }143 .wc-time { font-size: 86px; font-weight: 600; color: #143a65; }144 .wc-center { text-align: center; }145 .wc-temp { font-size: 160px; font-weight: 700; color: #143a65; }146 .wc-right { text-align: right; font-size: 46px; color: #143a65; }147 .wc-right .wind { display: inline-flex; align-items: center; gap: 12px; }148 .wc-right svg { width: 56px; height: 56px; }149 150 .wc-details {151 margin-top: 20px;152 display: grid;153 grid-template-columns: 1.4fr 1fr 1.2fr;154 align-items: start;155 color: #143a65;156 font-size: 44px;157 }158 .wc-details .left p { margin: 10px 0; }159 .wc-details .right p { margin: 10px 0; text-align: right; }160 161 .wc-dots {162 margin-top: 24px;163 display: flex; justify-content: center; gap: 18px;164 }165 .wc-dot {166 width: 22px; height: 22px; border-radius: 50%;167 background: rgba(20,58,101,0.5);168 }169 170 .wc-tools {171 position: absolute;172 right: 30px;173 bottom: 26px;174 display: flex;175 gap: 18px;176 }177 .tool-btn {178 width: 110px; height: 110px;179 background: rgba(255,255,255,0.3);180 border-radius: 18px;181 display: flex; align-items: center; justify-content: center;182 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);183 }184 .tool-btn div {185 width: 90px; height: 90px;186 background: #E0E0E0;187 border: 1px solid #BDBDBD;188 display: flex; align-items: center; justify-content: center;189 color: #757575; font-size: 28px; text-align: center; padding: 6px;190 }191 192 /* Keyboard */193 .keyboard {194 position: absolute;195 bottom: 0;196 left: 0;197 width: 1080px;198 height: 980px;199 background: #111;200 border-top-left-radius: 24px;201 border-top-right-radius: 24px;202 box-shadow: 0 -10px 30px rgba(0,0,0,0.45);203 color: #eaeaea;204 }205 .kb-suggestions {206 height: 120px;207 display: flex; align-items: center;208 padding: 0 24px;209 gap: 40px;210 font-size: 46px;211 border-bottom: 1px solid #2a2a2a;212 }213 .kb-suggestions .pipe { color: #999; }214 .kb-suggestions .mic {215 margin-left: auto;216 width: 86px; height: 86px;217 background: #222; border-radius: 50%;218 display: flex; align-items: center; justify-content: center;219 }220 .kb-suggestions .mic svg { width: 48px; height: 48px; fill: #ddd; }221 222 .kb-grid {223 padding: 26px 18px;224 display: grid;225 grid-template-rows: repeat(4, 1fr);226 gap: 22px;227 height: 680px;228 }229 .kb-row {230 display: grid;231 grid-template-columns: repeat(10, 1fr);232 gap: 18px;233 }234 .key {235 background: #2b2b2b;236 color: #f0f0f0;237 height: 120px;238 border-radius: 16px;239 display: flex; align-items: center; justify-content: center;240 font-size: 52px;241 box-shadow: inset 0 -4px 0 rgba(255,255,255,0.08);242 }243 .key.small { font-size: 46px; }244 .kb-bottom {245 display: grid;246 grid-template-columns: 1.2fr 0.8fr 0.8fr 5fr 0.8fr 1.4fr;247 gap: 18px;248 padding: 16px 18px 26px 18px;249 align-items: center;250 }251 .key-round {252 height: 120px; background: #2b2b2b; border-radius: 26px;253 display: flex; align-items: center; justify-content: center;254 font-size: 48px; color: #f0f0f0;255 box-shadow: inset 0 -4px 0 rgba(255,255,255,0.08);256 }257 .space { height: 120px; background: #2b2b2b; border-radius: 26px; }258 .check {259 height: 120px; background: #b7f28f; color: #0b3c10;260 border-radius: 60px; display: flex; align-items: center; justify-content: center;261 font-size: 64px; font-weight: 700;262 }263 264 /* Simple SVG styling for white icons in search bar */265 .white-fill { fill: #fff; }266</style>267</head>268<body>269<div id="render-target">270 271 <!-- Decorative clouds -->272 <div class="cloud c1"></div>273 <div class="cloud c2"></div>274 <div class="cloud c3"></div>275 <div class="cloud c4"></div>276 277 <!-- Status bar -->278 <div class="status-bar">279 <div class="status-left">8:03</div>280 <div class="status-center">281 <span class="icon">•</span>282 <span class="icon">✉</span>283 <span class="icon">⌁</span>284 <span class="icon">⌖</span>285 </div>286 <div class="status-right">287 <span>93%</span>288 <span class="battery">289 <svg viewBox="0 0 60 34">290 <rect x="2" y="4" width="48" height="26" rx="4" fill="none" stroke="white" stroke-width="3"></rect>291 <rect x="50" y="12" width="8" height="10" rx="2" fill="white"></rect>292 <rect x="6" y="8" width="40" height="18" rx="3" fill="white"></rect>293 </svg>294 </span>295 </div>296 </div>297 298 <!-- Search overlay -->299 <div class="search-overlay">300 <div class="search-bar">301 <div class="icon">302 <svg viewBox="0 0 24 24" class="white-fill">303 <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>304 </svg>305 </div>306 <div class="search-title">Australia Plains</div>307 <div class="search-actions">308 <div class="icon">309 <svg viewBox="0 0 24 24" class="white-fill">310 <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>311 </svg>312 </div>313 </div>314 </div>315 <div class="suggestion">Australia Plains, Australia</div>316 </div>317 318 <!-- Forecast row -->319 <div class="forecast-row">320 <div class="forecast-item">321 <div class="forecast-icon">[IMG: Cloud]</div>322 <div class="temp">33°</div>323 <div class="time">10 am</div>324 </div>325 <div class="forecast-item">326 <div class="forecast-icon">[IMG: Sun]</div>327 <div class="temp">35°</div>328 <div class="time">12:00</div>329 </div>330 <div class="forecast-item">331 <div class="forecast-icon">[IMG: Sun]</div>332 <div class="temp">35°</div>333 <div class="time">3:00</div>334 </div>335 <div class="forecast-item">336 <div class="forecast-icon">[IMG: Cloud]</div>337 <div class="temp">31°</div>338 <div class="time">6:00</div>339 </div>340 <div class="forecast-item">341 <div class="forecast-icon">[IMG: Cloud]</div>342 <div class="temp">31°</div>343 <div class="time">9:00</div>344 </div>345 <div class="forecast-item">346 <div class="forecast-icon">[IMG: Moon]</div>347 <div class="temp">30°</div>348 <div class="time">12 am</div>349 </div>350 </div>351 352 <!-- Weather card -->353 <div class="weather-card">354 <div class="wc-top">355 <div class="wc-time">8 03 am</div>356 <div class="wc-center">357 <div class="wc-temp">28°</div>358 </div>359 <div class="wc-right">360 <div class="wind">361 <svg viewBox="0 0 24 24">362 <path d="M4 12h14l-3-3 1.4-1.4L22 13l-5.6 5.4L15 17l3-3H4v-2z" fill="#143a65"></path>363 </svg>364 <span>W</span>365 <span style="font-weight:600;">6 mph</span>366 </div>367 </div>368 </div>369 370 <div class="wc-details">371 <div class="left">372 <p>Mist</p>373 <p>Pressure 29.68"</p>374 </div>375 <div></div>376 <div class="right">377 <p>Feels like 32°</p>378 <p>Humidity 79%</p>379 </div>380 </div>381 382 <div class="wc-dots">383 <div class="wc-dot"></div>384 <div class="wc-dot" style="opacity:0.5;"></div>385 <div class="wc-dot" style="opacity:0.5;"></div>386 </div>387 388 <div class="wc-tools">389 <div class="tool-btn"><div>[IMG: Gallery]</div></div>390 <div class="tool-btn"><div>[IMG: Brightness]</div></div>391 <div class="tool-btn"><div>[IMG: Map]</div></div>392 </div>393 </div>394 395 <!-- Keyboard -->396 <div class="keyboard">397 <div class="kb-suggestions">398 <span>Plains</span>399 <span class="pipe">|</span>400 <span>Plans</span>401 <span class="pipe">|</span>402 <span>Platina</span>403 <div class="mic">404 <svg viewBox="0 0 24 24">405 <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V22h2v-4.08A7 7 0 0 0 19 11h-2z" fill="#ddd"></path>406 </svg>407 </div>408 </div>409 410 <div class="kb-grid">411 <div class="kb-row">412 <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>413 </div>414 <div class="kb-row">415 <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><div class="key">⟵</div>416 </div>417 <div class="kb-row">418 <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><div class="key">⌫</div><div class="key">·</div><div class="key">◦</div>419 </div>420 <div class="kb-row">421 <div class="key small">,</div><div class="key small">.</div><div class="key small">?</div><div class="key small">!</div><div class="key small">’</div><div class="key small">"</div><div class="key small">-</div><div class="key small">_</div><div class="key small">/</div><div class="key small">\</div>422 </div>423 </div>424 425 <div class="kb-bottom">426 <div class="key-round">?123</div>427 <div class="key-round">,</div>428 <div class="key-round">☺</div>429 <div class="space"></div>430 <div class="key-round">.</div>431 <div class="check">✓</div>432 </div>433 </div>434 435</div>436</body>437</html>