GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Search - GBP</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #FFFFFF;13 }14 15 /* Status bar */16 .status-bar {17 height: 120px;18 display: flex;19 align-items: center;20 justify-content: space-between;21 padding: 0 36px;22 color: #333;23 font-size: 34px;24 }25 .status-icons { display: flex; align-items: center; gap: 22px; }26 27 /* App bar with search */28 .app-bar {29 height: 150px;30 display: flex;31 align-items: center;32 padding: 0 24px;33 border-bottom: 1px solid #eee;34 }35 .app-bar .left, .app-bar .right {36 width: 100px; display: flex; align-items: center; justify-content: center;37 }38 .search-field {39 flex: 1;40 display: flex; align-items: center;41 height: 96px;42 border-radius: 12px;43 padding: 0 12px;44 color: #222;45 font-size: 50px;46 }47 48 /* Chips */49 .chips {50 display: flex; gap: 18px;51 padding: 24px 24px 18px 24px;52 }53 .chip {54 background: #F1F1F1; color: #666;55 padding: 22px 30px;56 border-radius: 36px;57 font-size: 34px;58 }59 60 /* Result list */61 .results {62 padding: 12px 24px;63 }64 .result-item {65 display: flex; gap: 24px; align-items: center;66 padding: 26px 0;67 }68 .img-placeholder {69 width: 160px; height: 104px;70 background: #E0E0E0;71 border: 1px solid #BDBDBD;72 border-radius: 8px;73 display: flex; justify-content: center; align-items: center;74 color: #757575; font-size: 28px; text-align: center;75 }76 .title { font-size: 44px; color: #222; font-weight: 600; }77 .subtitle { font-size: 32px; color: #777; margin-top: 6px; }78 79 /* Ad banner */80 .ad-banner {81 position: absolute; left: 0; right: 0; bottom: 980px;82 padding: 14px 18px;83 }84 .ad-card {85 background: #F8F8F8; border: 1px solid #DDD; border-radius: 12px;86 display: flex; align-items: center; gap: 18px;87 padding: 12px;88 margin: 0 12px;89 }90 .ad-wide {91 width: 360px; height: 120px;92 background: #E0E0E0; border: 1px solid #BDBDBD;93 display: flex; justify-content: center; align-items: center;94 color: #757575; font-size: 26px;95 border-radius: 8px;96 }97 .ad-icon {98 width: 110px; height: 110px;99 background: #E0E0E0; border: 1px solid #BDBDBD;100 display: flex; justify-content: center; align-items: center;101 color: #757575; font-size: 24px; border-radius: 24px;102 }103 .ad-text { flex: 1; }104 .ad-text .name { font-size: 38px; color: #222; font-weight: 600; }105 .ad-text .meta { font-size: 28px; color: #666; margin-top: 4px; display: flex; align-items: center; gap: 8px; }106 .ad-open {107 background: #36A269; color: #fff; font-size: 32px; font-weight: 600;108 padding: 18px 32px; border-radius: 40px; border: none;109 }110 111 /* Keyboard */112 .keyboard {113 position: absolute; left: 0; bottom: 0; width: 100%; height: 980px;114 background: #191919; color: #fff;115 display: flex; flex-direction: column;116 padding: 16px 20px 30px 20px;117 box-sizing: border-box;118 }119 .kb-suggestions {120 display: flex; align-items: center; justify-content: space-between;121 padding: 8px 8px 24px 8px; color: #DADADA;122 font-size: 30px;123 }124 .kb-sugg-left { display: flex; align-items: center; gap: 22px; }125 .kb-sugg-terms { display: flex; gap: 26px; align-items: center; }126 .kb-sugg-terms .term { color: #EEE; }127 .kb-row { display: flex; justify-content: center; gap: 16px; padding: 10px 0; }128 .key {129 background: #2B2B2B; border-radius: 18px; min-width: 90px; height: 120px;130 display: flex; align-items: center; justify-content: center;131 font-size: 40px; color: #fff;132 }133 .key.small { min-width: 120px; }134 .key.shift, .key.backspace { min-width: 140px; }135 .space { flex: 1; height: 120px; background: #2B2B2B; border-radius: 18px; }136 .key.circle {137 width: 120px; height: 120px; border-radius: 60px;138 background: #BBD3F7; color: #0F2A5B; font-weight: 600;139 }140 141 /* Home indicator */142 .home-indicator {143 position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);144 width: 220px; height: 10px; background: #FFFFFF; border-radius: 8px; opacity: 0.9;145 }146 147 /* Helpers */148 .divider { height: 1px; background: #eee; margin: 4px 0 0 0; }149</style>150</head>151<body>152<div id="render-target">153 154 <!-- Status bar -->155 <div class="status-bar">156 <div class="time">11:10</div>157 <div class="status-icons">158 <!-- Location/GPS (simple dot) -->159 <svg width="28" height="28" viewBox="0 0 24 24">160 <circle cx="12" cy="12" r="4" fill="#777"></circle>161 </svg>162 <!-- Do Not Disturb (moon) -->163 <svg width="28" height="28" viewBox="0 0 24 24">164 <path d="M15 4a8 8 0 1 0 7 12 7 7 0 0 1-7-12z" fill="#777"></path>165 </svg>166 <!-- WiFi -->167 <svg width="34" height="24" viewBox="0 0 24 24">168 <path d="M2 8c4-4 16-4 20 0" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>169 <path d="M5 12c3-3 11-3 14 0" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>170 <circle cx="12" cy="16" r="2" fill="#777"/>171 </svg>172 <!-- Battery -->173 <svg width="44" height="24" viewBox="0 0 30 18">174 <rect x="1" y="3" width="24" height="12" rx="2" stroke="#777" fill="none" stroke-width="2"/>175 <rect x="3" y="5" width="18" height="8" rx="1" fill="#777"/>176 <rect x="26" y="6" width="3" height="6" rx="1" fill="#777"/>177 </svg>178 </div>179 </div>180 181 <!-- App bar -->182 <div class="app-bar">183 <div class="left">184 <svg width="48" height="48" viewBox="0 0 24 24">185 <path d="M15 18L9 12l6-6" stroke="#333" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>186 </svg>187 </div>188 <div class="search-field">GBP</div>189 <div class="right">190 <svg width="46" height="46" viewBox="0 0 24 24">191 <path d="M6 6l12 12M6 18l12-12" stroke="#333" stroke-width="2.2" stroke-linecap="round"></path>192 </svg>193 </div>194 </div>195 196 <!-- Chips -->197 <div class="chips">198 <div class="chip">Currencies</div>199 <div class="chip">Crypto</div>200 <div class="chip">Metals</div>201 </div>202 203 <div class="divider"></div>204 205 <!-- Results -->206 <div class="results">207 <div class="result-item">208 <div class="img-placeholder">[IMG: UK Flag]</div>209 <div>210 <div class="title">GBP</div>211 <div class="subtitle">British Pound</div>212 </div>213 </div>214 </div>215 216 <!-- Ad banner above keyboard -->217 <div class="ad-banner">218 <div class="ad-card">219 <div class="ad-wide">[IMG: Banner Image]</div>220 <div class="ad-icon">[IMG: Omio App Icon]</div>221 <div class="ad-text">222 <div class="name">Omio</div>223 <div class="meta">224 <span>4.6</span>225 <svg width="24" height="24" viewBox="0 0 24 24">226 <path d="M12 3l3 6 6 .8-4.5 4 1.1 6.2L12 17l-5.6 3.9L7.5 14 3 9.8 9 9l3-6z" fill="#F5B301"></path>227 </svg>228 <span>FREE</span>229 </div>230 </div>231 <button class="ad-open">Open</button>232 </div>233 </div>234 235 <!-- Keyboard -->236 <div class="keyboard">237 <div class="kb-suggestions">238 <div class="kb-sugg-left">239 <!-- grid icon -->240 <svg width="40" height="40" viewBox="0 0 24 24">241 <g fill="#CFCFCF">242 <circle cx="5" cy="5" r="2"></circle>243 <circle cx="12" cy="5" r="2"></circle>244 <circle cx="19" cy="5" r="2"></circle>245 <circle cx="5" cy="12" r="2"></circle>246 <circle cx="12" cy="12" r="2"></circle>247 <circle cx="19" cy="12" r="2"></circle>248 </g>249 </svg>250 <div class="kb-sugg-terms">251 <span class="term">GBP</span>252 <span>|</span>253 <span class="term">HBO</span>254 <span>|</span>255 <span class="term">GB P</span>256 </div>257 </div>258 <!-- mic icon -->259 <svg width="40" height="40" viewBox="0 0 24 24">260 <path d="M12 15a4 4 0 0 0 4-4V7a4 4 0 1 0-8 0v4a4 4 0 0 0 4 4z" fill="#CFCFCF"/>261 <path d="M5 11c0 4 3 7 7 7s7-3 7-7" stroke="#CFCFCF" stroke-width="2" fill="none" stroke-linecap="round"/>262 <path d="M12 18v3" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round"/>263 </svg>264 </div>265 266 <div class="kb-row">267 <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>268 <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>269 </div>270 <div class="kb-row">271 <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>272 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>273 </div>274 <div class="kb-row">275 <div class="key shift">276 <svg width="34" height="34" viewBox="0 0 24 24">277 <path d="M12 4l7 7h-4v6H9v-6H5l7-7z" fill="#fff"></path>278 </svg>279 </div>280 <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>281 <div class="key backspace">282 <svg width="40" height="40" viewBox="0 0 24 24">283 <path d="M6 6l-4 6 4 6h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H6z" fill="#fff"></path>284 <path d="M9 9l6 6M15 9l-6 6" stroke="#191919" stroke-width="2" stroke-linecap="round"></path>285 </svg>286 </div>287 </div>288 <div class="kb-row">289 <div class="key small">?123</div>290 <div class="key small">,</div>291 <div class="key small">292 <svg width="36" height="36" viewBox="0 0 24 24">293 <circle cx="12" cy="8" r="3.5" fill="#fff"></circle>294 <path d="M3 20c2-5 16-5 18 0" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"></path>295 </svg>296 </div>297 <div class="space"></div>298 <div class="key small">.</div>299 <div class="key circle">300 <svg width="40" height="40" viewBox="0 0 24 24">301 <circle cx="10" cy="10" r="6.5" stroke="#0F2A5B" stroke-width="2" fill="none"></circle>302 <path d="M14.5 14.5L20 20" stroke="#0F2A5B" stroke-width="2" stroke-linecap="round"></path>303 </svg>304 </div>305 </div>306 307 <div class="home-indicator"></div>308 </div>309 310</div>311</body>312</html>