GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#ffffff;11 }12 13 /* Status bar */14 .status-bar {15 position:absolute; top:0; left:0; width:100%; height:100px;16 background:#2c2d31; color:#fff;17 display:flex; align-items:center; justify-content:space-between;18 padding:0 32px; box-sizing:border-box; font-size:36px;19 }20 .status-left { display:flex; align-items:center; gap:16px; }21 .status-right { display:flex; align-items:center; gap:26px; }22 .sb-icon svg { fill:#fff; }23 .battery { display:flex; align-items:center; gap:10px; font-size:32px; }24 25 /* App bar */26 .app-bar {27 position:absolute; top:100px; left:0; width:100%; height:160px;28 background:#333438; color:#fff;29 display:flex; align-items:center; justify-content:space-between;30 padding:0 28px; box-sizing:border-box;31 }32 .app-left { display:flex; align-items:center; gap:24px; }33 .title-wrap { display:flex; flex-direction:column; }34 .title { font-size:46px; line-height:1.2; }35 .subtitle { font-size:32px; color:#cfcfcf; }36 .app-right { display:flex; align-items:center; gap:36px; }37 .app-icon svg { fill:#fff; }38 39 /* Tabs */40 .tabs {41 position:absolute; top:260px; left:0; width:100%; height:110px;42 background:#ffffff; display:flex; align-items:flex-end; padding:0 28px 0 28px;43 box-sizing:border-box; border-bottom:1px solid #e5e5e5;44 }45 .tab {46 font-size:40px; color:#7a7d80; padding:32px 32px 24px; margin-right:18px;47 border-bottom:6px solid transparent;48 }49 .tab.active { color:#202124; border-bottom-color:#1a73e8; }50 51 /* Search field */52 .search-row {53 position:absolute; top:370px; left:0; width:100%;54 padding:26px 28px; box-sizing:border-box;55 background:#fff;56 border-bottom:1px solid #f0f0f0;57 }58 .search-box {59 height:120px; border:1px solid #d9d9d9; border-radius:16px;60 display:flex; align-items:center; padding:0 24px; box-sizing:border-box;61 background:#fff;62 }63 .search-input { flex:1; font-size:44px; color:#202124; }64 .search-placeholder { color:#202124; }65 .search-icons { display:flex; align-items:center; gap:24px; }66 67 /* Suggestions */68 .suggestions {69 position:absolute; top:490px; left:0; width:100%; bottom:900px;70 overflow:hidden; background:#fff;71 }72 .s-item {73 display:flex; align-items:center; justify-content:space-between;74 padding:30px 28px; box-sizing:border-box; height:110px;75 border-bottom:1px solid #efefef;76 }77 .s-left { display:flex; align-items:center; gap:26px; }78 .s-text { font-size:42px; color:#3c4043; }79 .s-text strong { font-weight:700; color:#3c4043; }80 .s-icon svg { fill:#6f7175; }81 82 /* Keyboard */83 .keyboard {84 position:absolute; left:0; bottom:40px; width:100%; height:860px;85 background:#14181b; color:#e8eaed; box-sizing:border-box;86 border-top-left-radius:20px; border-top-right-radius:20px;87 padding-top:20px;88 }89 .kb-suggestions {90 display:flex; gap:16px; padding:0 28px 18px; box-sizing:border-box;91 }92 .chip {93 background:#22272b; color:#c6c8ca; padding:16px 22px; border-radius:26px; font-size:34px;94 border:1px solid #2c3136;95 }96 .kb-row { display:flex; gap:14px; padding:18px 20px; box-sizing:border-box; }97 .key {98 background:#1f2428; border:1px solid #2d3237; color:#e8eaed;99 height:120px; min-width:88px; flex:1; border-radius:24px;100 display:flex; align-items:center; justify-content:center; font-size:42px;101 }102 .key.small { flex:0 0 120px; }103 .key.wide { flex:2; }104 .key.green {105 background:#7fe5c3; border-color:#7fe5c3; color:#063b2d;106 }107 .key.round { border-radius:60px; }108 .key-icon svg { fill:#e8eaed; }109 .key.green svg { fill:#063b2d; }110 111 /* Gesture bar */112 .gesture {113 position:absolute; bottom:14px; left:50%; transform:translateX(-50%);114 width:300px; height:18px; background:#e6e6e6; border-radius:18px;115 }116 117 /* Icon base */118 .icon, .app-icon, .s-icon { width:48px; height:48px; }119 .icon svg, .app-icon svg, .s-icon svg { width:100%; height:100%; }120</style>121</head>122<body>123<div id="render-target">124 125 <!-- Status Bar -->126 <div class="status-bar">127 <div class="status-left">128 <div>2:03</div>129 </div>130 <div class="status-right">131 <div class="sb-icon icon">132 <!-- signal -->133 <svg viewBox="0 0 24 24"><path d="M2 16h3v6H2zM7 12h3v10H7zM12 8h3v14h-3zM17 4h3v18h-3z"/></svg>134 </div>135 <div class="sb-icon icon">136 <!-- wifi -->137 <svg viewBox="0 0 24 24"><path d="M12 18a2 2 0 1 0 .001 3.999A2 2 0 0 0 12 18zm-7-7 2 2a10 10 0 0 1 14 0l2-2a12.5 12.5 0 0 0-18 0zm3-3 2 2a6.5 6.5 0 0 1 8 0l2-2a8.5 8.5 0 0 0-12 0z"/></svg>138 </div>139 <div class="battery">140 <div class="sb-icon icon">141 <!-- battery -->142 <svg viewBox="0 0 28 24">143 <rect x="2" y="6" width="20" height="12" rx="2" fill="#fff"></rect>144 <rect x="4" y="8" width="14" height="8" fill="#2c2d31"></rect>145 <rect x="22" y="9" width="4" height="6" rx="1" fill="#fff"></rect>146 </svg>147 </div>148 <div>100%</div>149 </div>150 </div>151 </div>152 153 <!-- App Bar -->154 <div class="app-bar">155 <div class="app-left">156 <div class="app-icon">157 <!-- close -->158 <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>159 </div>160 <div class="app-icon">161 <!-- lock -->162 <svg viewBox="0 0 24 24"><path d="M6 10h12v10H6zM8 10V7a4 4 0 0 1 8 0v3" fill="#fff"/></svg>163 </div>164 <div class="title-wrap">165 <div class="title">Change search criteria</div>166 <div class="subtitle">google.com</div>167 </div>168 </div>169 <div class="app-right">170 <div class="app-icon">171 <!-- share -->172 <svg viewBox="0 0 24 24"><path d="M14 3l7 7-7 7v-4H7v-6h7V3z" /></svg>173 </div>174 <div class="app-icon">175 <!-- bookmark -->176 <svg viewBox="0 0 24 24"><path d="M6 3h12v18l-6-4-6 4z" /></svg>177 </div>178 <div class="app-icon">179 <!-- more -->180 <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>181 </div>182 </div>183 </div>184 185 <!-- Tabs -->186 <div class="tabs">187 <div class="tab active">Search</div>188 <div class="tab">Dates</div>189 <div class="tab">Guests</div>190 </div>191 192 <!-- Search field -->193 <div class="search-row">194 <div class="search-box">195 <div class="icon">196 <!-- back arrow -->197 <svg viewBox="0 0 24 24"><path d="M15 19L6 12l9-7v5h7v4h-7z" fill="#6f7175"/></svg>198 </div>199 <div class="search-input">200 <span class="search-placeholder">hotels in berlin</span>201 </div>202 <div class="search-icons">203 <div class="icon">204 <!-- clear X -->205 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#6f7175" stroke-width="2" fill="none" stroke-linecap="round"/></svg>206 </div>207 </div>208 </div>209 </div>210 211 <!-- Suggestions list -->212 <div class="suggestions">213 <div class="s-item">214 <div class="s-left">215 <div class="s-icon">216 <!-- bed icon -->217 <svg viewBox="0 0 24 24"><path d="M2 15h2v4h2v-4h12a3 3 0 0 0 0-6H8V7H6v2H2v6z"/></svg>218 </div>219 <div class="s-text">hotels in berlin <strong>germany</strong></div>220 </div>221 <div class="s-icon">222 <!-- northeast arrow -->223 <svg viewBox="0 0 24 24"><path d="M8 16l8-8v6h2V6h-8v2h6l-8 8z"/></svg>224 </div>225 </div>226 227 <div class="s-item">228 <div class="s-left">229 <div class="s-icon">230 <svg viewBox="0 0 24 24"><path d="M2 15h2v4h2v-4h12a3 3 0 0 0 0-6H8V7H6v2H2v6z"/></svg>231 </div>232 <div class="s-text"><strong>hostels</strong> in berlin</div>233 </div>234 <div class="s-icon"><svg viewBox="0 0 24 24"><path d="M8 16l8-8v6h2V6h-8v2h6l-8 8z"/></svg></div>235 </div>236 237 <div class="s-item">238 <div class="s-left">239 <div class="s-icon"><svg viewBox="0 0 24 24"><path d="M2 15h2v4h2v-4h12a3 3 0 0 0 0-6H8V7H6v2H2v6z"/></svg></div>240 <div class="s-text">hotels in berlin <strong>city centre</strong></div>241 </div>242 <div class="s-icon"><svg viewBox="0 0 24 24"><path d="M8 16l8-8v6h2V6h-8v2h6l-8 8z"/></svg></div>243 </div>244 245 <div class="s-item">246 <div class="s-left">247 <div class="s-icon"><svg viewBox="0 0 24 24"><path d="M2 15h2v4h2v-4h12a3 3 0 0 0 0-6H8V7H6v2H2v6z"/></svg></div>248 <div class="s-text">hotels in berlin <strong>ohio</strong></div>249 </div>250 <div class="s-icon"><svg viewBox="0 0 24 24"><path d="M8 16l8-8v6h2V6h-8v2h6l-8 8z"/></svg></div>251 </div>252 253 <div class="s-item">254 <div class="s-left">255 <div class="s-icon"><svg viewBox="0 0 24 24"><path d="M2 15h2v4h2v-4h12a3 3 0 0 0 0-6H8V7H6v2H2v6z"/></svg></div>256 <div class="s-text"><strong>cheap</strong> hotels in berlin</div>257 </div>258 <div class="s-icon"><svg viewBox="0 0 24 24"><path d="M8 16l8-8v6h2V6h-8v2h6l-8 8z"/></svg></div>259 </div>260 261 <div class="s-item">262 <div class="s-left">263 <div class="s-icon"><svg viewBox="0 0 24 24"><path d="M2 15h2v4h2v-4h12a3 3 0 0 0 0-6H8V7H6v2H2v6z"/></svg></div>264 <div class="s-text"><strong>best</strong> hotels in berlin</div>265 </div>266 <div class="s-icon"><svg viewBox="0 0 24 24"><path d="M8 16l8-8v6h2V6h-8v2h6l-8 8z"/></svg></div>267 </div>268 269 <div class="s-item">270 <div class="s-left">271 <div class="s-icon"><svg viewBox="0 0 24 24"><path d="M2 15h2v4h2v-4h12a3 3 0 0 0 0-6H8V7H6v2H2v6z"/></svg></div>272 <div class="s-text">hotels in berlin <strong>md</strong></div>273 </div>274 <div class="s-icon"><svg viewBox="0 0 24 24"><path d="M8 16l8-8v6h2V6h-8v2h6l-8 8z"/></svg></div>275 </div>276 277 <div class="s-item">278 <div class="s-left">279 <div class="s-icon"><svg viewBox="0 0 24 24"><path d="M2 15h2v4h2v-4h12a3 3 0 0 0 0-6H8V7H6v2H2v6z"/></svg></div>280 <div class="s-text">hotels in berlin <strong>mitte</strong></div>281 </div>282 <div class="s-icon"><svg viewBox="0 0 24 24"><path d="M8 16l8-8v6h2V6h-8v2h6l-8 8z"/></svg></div>283 </div>284 </div>285 286 <!-- Keyboard -->287 <div class="keyboard">288 <div class="kb-suggestions">289 <div class="chip">berlin</div>290 <div class="chip">Berlin</div>291 <div class="chip">Berliner</div>292 </div>293 294 <div class="kb-row">295 <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>296 </div>297 <div class="kb-row">298 <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>299 </div>300 <div class="kb-row">301 <div class="key small">302 <!-- shift -->303 <div class="key-icon"><svg viewBox="0 0 24 24"><path d="M12 4l8 8h-5v8H9v-8H4z"/></svg></div>304 </div>305 <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>306 <div class="key small">307 <!-- backspace -->308 <div class="key-icon"><svg viewBox="0 0 24 24"><path d="M5 7l5-4h11v18H10L5 17zm6 3 6 6m0-6-6 6" stroke="#e8eaed" stroke-width="2" fill="none" stroke-linecap="round"/></svg></div>309 </div>310 </div>311 <div class="kb-row">312 <div class="key small green round">?123</div>313 <div class="key small">,</div>314 <div class="key small">315 <!-- emoji -->316 <div class="key-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#e8eaed" stroke-width="2"/><circle cx="9" cy="10" r="1.2"/><circle cx="15" cy="10" r="1.2"/><path d="M8 15c1.3 1 2.7 1.5 4 1.5s2.7-.5 4-1.5" stroke="#e8eaed" stroke-width="2" fill="none" stroke-linecap="round"/></svg></div>317 </div>318 <div class="key wide">space</div>319 <div class="key small">320 <!-- mic -->321 <div class="key-icon"><svg viewBox="0 0 24 24"><path d="M12 4a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0V7a3 3 0 0 1 3-3zm-6 8a6 6 0 0 0 12 0M11 18v3h2v-3" fill="none" stroke="#e8eaed" stroke-width="2" stroke-linecap="round"/></svg></div>322 </div>323 <div class="key small green round">324 <!-- enter -->325 <div class="key-icon"><svg viewBox="0 0 24 24"><path d="M5 12h11v-3l4 4-4 4v-3H5z"/></svg></div>326 </div>327 </div>328 </div>329 330 <div class="gesture"></div>331 332</div>333</body>334</html>