GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Search Page UI</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: #ffffff;13 }14 15 /* Top system/status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 120px;22 background: #d0d0d0;23 display: flex;24 align-items: center;25 padding: 0 40px;26 box-sizing: border-box;27 color: #111;28 font-size: 40px;29 letter-spacing: 1px;30 }31 .status-right {32 margin-left: auto;33 display: flex;34 align-items: center;35 gap: 26px;36 }37 .status-icon { width: 44px; height: 44px; }38 .battery {39 width: 80px; height: 40px;40 }41 42 /* Header area with back */43 .header {44 position: absolute;45 top: 120px;46 left: 0;47 width: 1080px;48 height: 160px;49 background: #d7d7d7;50 }51 .back-btn {52 position: absolute;53 left: 40px;54 top: 50px;55 width: 80px;56 height: 80px;57 }58 59 /* Main content */60 .content {61 position: absolute;62 top: 280px;63 left: 0;64 width: 1080px;65 height: 1320px;66 background: #ffffff;67 box-sizing: border-box;68 padding: 40px 40px 0 40px;69 }70 .title-row {71 display: flex;72 align-items: center;73 font-weight: 700;74 font-size: 54px;75 color: #222;76 }77 .title-row .clear {78 margin-left: auto;79 font-size: 42px;80 color: #555;81 }82 .list {83 margin-top: 30px;84 }85 .item {86 height: 160px;87 display: flex;88 align-items: center;89 border-bottom: 1px solid #eee;90 }91 .clock {92 width: 68px; height: 68px; margin-right: 28px;93 }94 .item-text {95 font-size: 44px;96 color: #222;97 }98 .chevron {99 margin-left: auto;100 width: 38px; height: 38px;101 }102 .sub-title {103 font-size: 50px;104 font-weight: 700;105 color: #222;106 margin-top: 38px;107 }108 109 /* Bottom quick actions bar */110 .actions-bar {111 position: absolute;112 left: 0;113 bottom: 900px; /* sits right above keyboard */114 width: 1080px;115 height: 150px;116 background: #ffffff;117 border-top: 1px solid #eaeaea;118 display: flex;119 align-items: center;120 justify-content: space-around;121 color: #333;122 }123 .action {124 display: flex;125 align-items: center;126 flex-direction: column;127 gap: 14px;128 font-size: 36px;129 }130 .action svg { width: 64px; height: 64px; }131 132 /* Keyboard mock */133 .keyboard {134 position: absolute;135 bottom: 0;136 left: 0;137 width: 1080px;138 height: 900px;139 background: #0f1a1d;140 color: #e0e6e8;141 box-sizing: border-box;142 padding: 30px 24px;143 }144 .kb-row {145 display: flex;146 justify-content: space-between;147 margin-bottom: 28px;148 }149 .key {150 width: 88px;151 height: 120px;152 background: #233037;153 border-radius: 24px;154 display: flex;155 align-items: center;156 justify-content: center;157 font-size: 52px;158 color: #cfd8dc;159 }160 .key.wide { width: 160px; }161 .space { flex: 1; height: 120px; margin: 0 18px; }162 .space .key { width: 100%; }163 .key.light { background: #2b3a41; }164 .search-btn {165 width: 160px; height: 160px; background: #9be7c3; border-radius: 80px;166 display: flex; align-items: center; justify-content: center;167 position: absolute; right: 40px; bottom: 30px;168 }169 .backspace { width: 120px; height: 120px; }170 .caps { width: 120px; height: 120px; }171 172 /* Chevron grey arrows in list */173 .chevron path { stroke: #555; }174 175</style>176</head>177<body>178<div id="render-target">179 180 <!-- Status bar -->181 <div class="status-bar">182 <div>1:44</div>183 <div class="status-right">184 <!-- WiFi -->185 <svg class="status-icon" viewBox="0 0 24 24">186 <path d="M2 8c5-4 15-4 20 0" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>187 <path d="M5 12c4-3 10-3 14 0" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>188 <circle cx="12" cy="16" r="2" fill="#222"></circle>189 </svg>190 <!-- Battery -->191 <svg class="battery" viewBox="0 0 50 24">192 <rect x="1" y="4" width="42" height="16" rx="3" ry="3" fill="none" stroke="#222" stroke-width="2"></rect>193 <rect x="4" y="7" width="30" height="10" rx="2" fill="#222"></rect>194 <rect x="44" y="9" width="4" height="6" fill="#222"></rect>195 </svg>196 <!-- Signal dot -->197 <svg class="status-icon" viewBox="0 0 24 24">198 <circle cx="12" cy="12" r="10" fill="#fff" stroke="#222" stroke-width="2"></circle>199 <circle cx="12" cy="12" r="5" fill="#222"></circle>200 </svg>201 <!-- Percent -->202 <div style="font-size:40px;">100%</div>203 </div>204 </div>205 206 <!-- Header with back arrow -->207 <div class="header">208 <svg class="back-btn" viewBox="0 0 24 24">209 <path d="M15 19L8 12l7-7" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>210 </svg>211 </div>212 213 <!-- Main content -->214 <div class="content">215 <div class="title-row">216 <div>Search history</div>217 <div class="clear">Clear</div>218 </div>219 220 <div class="list">221 <!-- Item 1 -->222 <div class="item">223 <svg class="clock" viewBox="0 0 24 24">224 <circle cx="12" cy="12" r="9" fill="none" stroke="#222" stroke-width="2"></circle>225 <path d="M12 6v6l4 2" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>226 </svg>227 <div class="item-text">h&m shoes</div>228 <svg class="chevron" viewBox="0 0 24 24">229 <path d="M9 5l7 7-7 7" stroke="#777" stroke-width="3" fill="none" stroke-linecap="round"/>230 </svg>231 </div>232 233 <!-- Item 2 -->234 <div class="item">235 <svg class="clock" viewBox="0 0 24 24">236 <circle cx="12" cy="12" r="9" fill="none" stroke="#222" stroke-width="2"></circle>237 <path d="M12 6v6l4 2" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>238 </svg>239 <div class="item-text">loafer</div>240 <svg class="chevron" viewBox="0 0 24 24">241 <path d="M9 5l7 7-7 7" stroke="#777" stroke-width="3" fill="none" stroke-linecap="round"/>242 </svg>243 </div>244 245 <!-- Item 3 -->246 <div class="item">247 <svg class="clock" viewBox="0 0 24 24">248 <circle cx="12" cy="12" r="9" fill="none" stroke="#222" stroke-width="2"></circle>249 <path d="M12 6v6l4 2" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/>250 </svg>251 <div class="item-text">loafar</div>252 <svg class="chevron" viewBox="0 0 24 24">253 <path d="M9 5l7 7-7 7" stroke="#777" stroke-width="3" fill="none" stroke-linecap="round"/>254 </svg>255 </div>256 </div>257 258 <div class="sub-title">Most popular searches</div>259 <!-- empty placeholder area -->260 <div style="height: 720px;"></div>261 </div>262 263 <!-- Quick actions bar -->264 <div class="actions-bar">265 <div class="action">266 <svg viewBox="0 0 24 24">267 <rect x="3" y="5" width="18" height="14" rx="3" fill="none" stroke="#333" stroke-width="2"></rect>268 <circle cx="12" cy="12" r="4" fill="none" stroke="#333" stroke-width="2"></circle>269 </svg>270 <div>Take Photo</div>271 </div>272 <div class="action">273 <svg viewBox="0 0 24 24">274 <rect x="3" y="3" width="18" height="18" rx="2" fill="none" stroke="#333" stroke-width="2"></rect>275 <rect x="7" y="7" width="10" height="10" rx="1" fill="none" stroke="#333" stroke-width="2"></rect>276 </svg>277 <div>Scan Code</div>278 </div>279 <div class="action">280 <svg viewBox="0 0 24 24">281 <path d="M12 3c3.9 0 7 3.1 7 7 0 5.2-7 11-7 11S5 15.2 5 10c0-3.9 3.1-7 7-7z" fill="none" stroke="#333" stroke-width="2"></path>282 <circle cx="12" cy="10" r="3" fill="none" stroke="#333" stroke-width="2"></circle>283 </svg>284 <div>Find Store</div>285 </div>286 </div>287 288 <!-- Keyboard mock -->289 <div class="keyboard">290 <!-- top utility icons row (minimal) -->291 <div style="display:flex; gap:30px; margin-bottom:20px; align-items:center;">292 <div style="width:70px; height:70px; background:#223038; border-radius:14px; display:flex; align-items:center; justify-content:center;">293 <svg viewBox="0 0 24 24" width="40" height="40">294 <circle cx="9" cy="9" r="5" fill="none" stroke="#cfd8dc" stroke-width="2"></circle>295 <rect x="12" y="12" width="7" height="7" fill="none" stroke="#cfd8dc" stroke-width="2"></rect>296 </svg>297 </div>298 <div style="color:#cfd8dc; font-size:36px;">GIF</div>299 <div style="color:#cfd8dc; font-size:36px;">⚙️</div>300 <div style="color:#cfd8dc; font-size:36px;">G</div>301 <div style="color:#cfd8dc; font-size:36px;">🎨</div>302 <div style="margin-left:auto; color:#cfd8dc; font-size:36px;">🎤</div>303 </div>304 305 <!-- rows -->306 <div class="kb-row">307 <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>308 <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>309 </div>310 <div class="kb-row">311 <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>312 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>313 </div>314 <div class="kb-row">315 <div class="key caps">⇧</div>316 <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>317 <div class="key">n</div><div class="key">m</div>318 <div class="key backspace">⌫</div>319 </div>320 <div class="kb-row" style="align-items:center;">321 <div class="key wide" style="background:#78b995; color:#083;">?123</div>322 <div class="key light">,</div>323 <div class="key light">☺</div>324 <div class="space"><div class="key light"></div></div>325 <div class="key light">.</div>326 </div>327 328 <!-- floating green search button -->329 <div class="search-btn">330 <svg viewBox="0 0 24 24" width="90" height="90">331 <circle cx="11" cy="11" r="7" fill="none" stroke="#083" stroke-width="2"></circle>332 <path d="M16.5 16.5L22 22" stroke="#083" stroke-width="2" stroke-linecap="round"></path>333 </svg>334 </div>335 </div>336 337</div>338</body>339</html>