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; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #0e0e10;13 color: #ffffff;14 font-family: Arial, Helvetica, sans-serif;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 120px;24 padding: 0 30px;25 box-sizing: border-box;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #cfcfcf;30 font-size: 40px;31 }32 .status-left, .status-right {33 display: flex;34 align-items: center;35 gap: 22px;36 }37 .sb-icon { width: 34px; height: 34px; opacity: 0.85; }38 .battery {39 display: flex; align-items: center; gap: 12px; font-size: 36px; color: #e5e5e5;40 }41 .battery svg { width: 54px; height: 28px; }42 43 /* Search bar */44 .search-wrap {45 position: absolute;46 top: 140px;47 left: 60px;48 width: 960px;49 height: 110px;50 background: #1a1a1d;51 border-radius: 56px;52 box-sizing: border-box;53 display: flex;54 align-items: center;55 padding: 0 26px;56 gap: 20px;57 }58 .search-input {59 flex: 1;60 font-size: 44px;61 color: #eaeaea;62 white-space: nowrap;63 overflow: hidden;64 }65 .blue-highlight {66 background: #2a64ff;67 color: #fff;68 padding: 4px 6px;69 border-radius: 6px;70 }71 .icon-btn { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; }72 73 /* Filter chips */74 .filters {75 position: absolute;76 top: 276px;77 left: 60px;78 display: flex;79 gap: 26px;80 }81 .chip {82 display: inline-flex;83 align-items: center;84 gap: 16px;85 padding: 12px 22px;86 border-radius: 26px;87 background: #1f2024;88 color: #d7d7d7;89 font-size: 36px;90 border: 1px solid #2a2b30;91 }92 .chip svg { width: 32px; height: 32px; }93 94 /* Most relevant */95 .sort-row {96 position: absolute;97 top: 360px;98 left: 60px;99 display: flex;100 align-items: center;101 gap: 16px;102 color: #e6e6e6;103 font-size: 40px;104 }105 .sort-row svg { width: 26px; height: 26px; }106 107 /* Result item */108 .result {109 position: absolute;110 top: 480px;111 left: 0;112 width: 1080px;113 padding: 24px 60px;114 box-sizing: border-box;115 }116 .result-card {117 display: flex;118 align-items: flex-start;119 gap: 26px;120 }121 .thumb {122 width: 160px;123 height: 160px;124 background: #E0E0E0;125 border: 1px solid #BDBDBD;126 display: flex;127 align-items: center;128 justify-content: center;129 color: #757575;130 font-size: 28px;131 }132 .result-info {133 flex: 1;134 color: #eaeaea;135 }136 .file-title {137 font-size: 36px;138 line-height: 1.3;139 margin-bottom: 12px;140 }141 .meta {142 display: flex;143 align-items: center;144 gap: 30px;145 font-size: 32px;146 color: #9da0a6;147 }148 .right-meta {149 position: absolute;150 right: 120px;151 top: 24px;152 color: #cfcfcf;153 font-size: 32px;154 }155 .menu-dots {156 position: absolute;157 right: 60px;158 top: 34px;159 width: 16px;160 height: 60px;161 display: flex;162 flex-direction: column;163 justify-content: space-between;164 }165 .menu-dots span {166 width: 12px;167 height: 12px;168 background: #cfcfcf;169 border-radius: 50%;170 display: block;171 }172 173 /* Keyboard */174 .keyboard {175 position: absolute;176 left: 0;177 top: 1480px;178 width: 1080px;179 height: 920px;180 background: #111418;181 border-top: 1px solid #1f2328;182 }183 .kb-top {184 height: 120px;185 padding: 0 34px;186 box-sizing: border-box;187 display: flex;188 align-items: center;189 gap: 34px;190 }191 .kb-pill {192 width: 86px; height: 86px; background: #1a1f24; border-radius: 20px; display:flex; align-items:center; justify-content:center; color:#d5d5d5; font-size:32px; border:1px solid #2a3036;193 }194 .kb-mid {195 padding: 16px 40px 0 40px;196 box-sizing: border-box;197 }198 .rows { display: grid; grid-template-columns: repeat(10, 1fr); gap: 16px; }199 .key {200 height: 120px;201 background: #1b2025;202 border: 1px solid #2a3036;203 border-radius: 18px;204 display: flex;205 align-items: center;206 justify-content: center;207 color: #e8e8e8;208 font-size: 44px;209 }210 .row2, .row3 { margin-top: 16px; }211 .row4 { display: grid; grid-template-columns: repeat(9, 1fr); gap: 16px; margin-top: 16px; }212 213 .kb-bottom {214 position: absolute;215 bottom: 24px;216 left: 26px;217 width: 1028px;218 display: flex;219 align-items: center;220 justify-content: space-between;221 }222 .round-btn {223 width: 140px; height: 140px; border-radius: 70px;224 background: #7ec8a1;225 display:flex; align-items:center; justify-content:center;226 color:#0d2015; font-size: 42px; font-weight: bold;227 }228 .space {229 width: 520px; height: 120px; background:#1b2025; border:1px solid #2a3036; border-radius: 18px;230 }231 .dot-btn { width: 110px; height: 110px; border-radius: 18px; background:#1b2025; border:1px solid #2a3036; }232 .search-round {233 width: 140px; height: 140px; border-radius: 70px; background:#9ef0c3; display:flex; align-items:center; justify-content:center;234 }235 .mic-round {236 width: 110px; height: 110px; background:#1b2025; border:1px solid #2a3036; border-radius: 28px; display:flex; align-items:center; justify-content:center;237 }238 239 .caret-down path { fill: #cfcfcf; }240</style>241</head>242<body>243<div id="render-target">244 245 <!-- Status bar -->246 <div class="status-bar">247 <div class="status-left">248 <div>9:33</div>249 <svg class="sb-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#bdbdbd"/></svg>250 <svg class="sb-icon" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" fill="#bdbdbd"/></svg>251 <svg class="sb-icon" viewBox="0 0 24 24"><polygon points="12,3 3,21 21,21" fill="#bdbdbd"/></svg>252 <svg class="sb-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="6" fill="#bdbdbd"/></svg>253 </div>254 <div class="status-right">255 <div class="battery">256 <div>100%</div>257 <svg viewBox="0 0 36 18">258 <rect x="1" y="3" width="30" height="12" rx="3" ry="3" fill="none" stroke="#cfcfcf" stroke-width="2"/>259 <rect x="3" y="5" width="22" height="8" rx="2" ry="2" fill="#cfcfcf"/>260 <rect x="32" y="6" width="3" height="6" rx="1" ry="1" fill="#cfcfcf"/>261 </svg>262 </div>263 </div>264 </div>265 266 <!-- Search bar -->267 <div class="search-wrap">268 <div class="icon-btn">269 <svg viewBox="0 0 24 24" width="44" height="44">270 <path d="M15 5 L7 12 L15 19" fill="none" stroke="#eaeaea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>271 </svg>272 </div>273 <div class="search-input">274 <span class="blue-highlight">A_short_history_of_Germany</span>275 </div>276 <div class="icon-btn">277 <svg viewBox="0 0 24 24" width="44" height="44">278 <path d="M5 5 L19 19" stroke="#eaeaea" stroke-width="2"/>279 <path d="M19 5 L5 19" stroke="#eaeaea" stroke-width="2"/>280 </svg>281 </div>282 </div>283 284 <!-- Filters -->285 <div class="filters">286 <div class="chip">287 <svg viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="14" rx="2" fill="#cfcfcf"/></svg>288 <span>Date</span>289 <svg class="caret-down" viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9" /></svg>290 </div>291 <div class="chip">292 <svg viewBox="0 0 24 24"><path d="M4 4 H20 L12 14 Z" fill="#cfcfcf"/></svg>293 <span>Type</span>294 <svg class="caret-down" viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9" /></svg>295 </div>296 </div>297 298 <!-- Sort row -->299 <div class="sort-row">300 <span>Most relevant</span>301 <svg class="caret-down" viewBox="0 0 24 24"><path d="M6 9 L12 15 L18 9" /></svg>302 </div>303 304 <!-- Result item -->305 <div class="result">306 <div class="result-card">307 <div class="thumb">[IMG: Book cover]</div>308 <div class="result-info">309 <div class="file-title">310 <span class="blue-highlight">A_short_history_of_Germany</span> (IA_short historyofge00hawt).pdf311 </div>312 <div class="meta">313 <span>Dropbox</span>314 <span>Modified 11/9/23</span>315 </div>316 </div>317 <div class="right-meta">16 MB</div>318 <div class="menu-dots"><span></span><span></span><span></span></div>319 </div>320 </div>321 322 <!-- Keyboard -->323 <div class="keyboard">324 <div class="kb-top">325 <div class="kb-pill">⌘</div>326 <div class="kb-pill">🙂</div>327 <div class="kb-pill">GIF</div>328 <div class="kb-pill">⚙</div>329 <div class="kb-pill">G↔</div>330 <div class="kb-pill">🎨</div>331 <div class="kb-pill">🎤</div>332 </div>333 334 <div class="kb-mid">335 <div class="rows">336 <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>337 </div>338 <div class="rows row2">339 <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>340 </div>341 <div class="rows row3">342 <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>343 </div>344 <div class="row4">345 <div class="key">↩</div><div class="key">🌐</div><div class="key">⌨</div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key">•</div><div class="key">⎵</div>346 </div>347 </div>348 349 <div class="kb-bottom">350 <div class="round-btn">?123</div>351 <div class="space"></div>352 <div class="dot-btn"></div>353 <div class="search-round">354 <svg viewBox="0 0 24 24" width="60" height="60">355 <circle cx="10" cy="10" r="7" stroke="#0f2519" stroke-width="3" fill="none"/>356 <line x1="16" y1="16" x2="22" y2="22" stroke="#0f2519" stroke-width="3"/>357 </svg>358 </div>359 </div>360 </div>361 362</div>363</body>364</html>