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 UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #f4f6f7;13 border-radius: 24px;14 box-shadow: 0 2px 8px rgba(0,0,0,0.1);15 }16 17 /* Status bar */18 .status-bar {19 position: absolute; top: 0; left: 0; right: 0;20 height: 90px; background: #0b7fb0; color: #fff;21 display: flex; align-items: center; padding: 0 28px;22 font-weight: 500; letter-spacing: 0.5px;23 }24 .status-bar .time { font-size: 36px; }25 .status-icons { margin-left: auto; display: flex; align-items: center; gap: 24px; }26 .status-icons svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 3; }27 28 /* App bar / search field */29 .app-bar {30 position: absolute; top: 90px; left: 0; right: 0;31 height: 170px; background: #0b7fb0; color: #fff;32 display: flex; align-items: center; padding: 0 24px;33 }34 .app-bar .back, .app-bar .clear {35 width: 100px; height: 100px; border: none; background: transparent; cursor: default;36 display: flex; align-items: center; justify-content: center;37 }38 .app-bar .title-input {39 flex: 1; color: #fff; font-size: 54px; font-weight: 500;40 padding: 0 16px;41 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;42 }43 44 /* "You May Also Like" section */45 .promo-section {46 position: absolute; top: 260px; left: 0; right: 0;47 padding: 32px 28px 28px;48 background: linear-gradient(135deg, #e7efe8 0%, #e9f5f6 100%);49 }50 .promo-top {51 display: flex; align-items: flex-start;52 }53 .promo-text .heading {54 font-size: 42px; color: #424242; font-weight: 700;55 }56 .promo-text .sub {57 font-size: 30px; color: #7a8a8d; margin-top: 8px;58 }59 .promo-badge {60 margin-left: auto;61 width: 240px; height: 160px;62 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 14px;63 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 28px; text-align: center;64 }65 .promo-cards {66 margin-top: 26px;67 display: flex; gap: 24px;68 }69 .card {70 width: 220px; background: #fff; border-radius: 18px; padding: 22px;71 box-shadow: 0 1px 2px rgba(0,0,0,0.08);72 }73 .card .chip {74 font-size: 26px; color: #7c8a92; margin-bottom: 10px;75 }76 .card .name { font-size: 36px; color: #2d2d2d; font-weight: 600; }77 .card .desc { font-size: 28px; color: #607d8b; margin-top: 6px; }78 .card .discount { font-size: 28px; color: #1b9e48; margin-top: 10px; font-weight: 700; }79 .card-icon {80 width: 52px; height: 52px; border-radius: 10px; background: #e7f1f9;81 display: flex; align-items: center; justify-content: center; margin-bottom: 10px;82 }83 .card-icon svg { width: 30px; height: 30px; stroke: #0b7fb0; stroke-width: 2.5; fill: none; }84 85 /* Suggestions header */86 .suggestions-header {87 position: absolute; left: 0; right: 0; top: 600px;88 height: 90px; display: flex; align-items: center;89 background: #efefef; color: #6e6e6e; font-size: 34px; padding: 0 28px; font-weight: 600;90 border-top: 1px solid #e0e0e0;91 }92 93 /* Suggestions list */94 .suggestion-list {95 position: absolute; top: 690px; left: 0; right: 0; bottom: 840px;96 background: #fff;97 }98 .suggestion-item {99 display: flex; align-items: center; gap: 24px;100 padding: 26px 28px; border-bottom: 1px solid #eee;101 }102 .suggestion-item .sicon {103 width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;104 }105 .suggestion-item .text .title {106 font-size: 40px; color: #1f1f1f; line-height: 1.2;107 }108 .suggestion-item .text .subtitle {109 font-size: 28px; color: #778088; margin-top: 6px;110 }111 .suggestion-item:last-child { border-bottom: none; }112 113 /* Keyboard */114 .keyboard {115 position: absolute; left: 0; right: 0; bottom: 0;116 height: 840px; background: #121212; color: #eaeaea; padding: 22px 24px 34px;117 box-shadow: 0 -4px 12px rgba(0,0,0,0.25);118 }119 .kb-suggest {120 display: flex; align-items: center; gap: 28px; color: #c9c9c9;121 padding: 6px 4px 16px; font-size: 34px;122 }123 .kb-row {124 display: flex; gap: 16px; margin-top: 22px;125 }126 .key {127 background: #1f1f1f; border-radius: 18px; height: 130px; flex: 1;128 display: flex; align-items: center; justify-content: center; font-size: 42px;129 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);130 }131 .key.wide { flex: 2.6; }132 .key.space { flex: 7; }133 .key.small { flex: 1.2; }134 .key.search {135 width: 160px; height: 160px; border-radius: 80px; background: #aee3ff; color: #0b7fb0;136 display: flex; align-items: center; justify-content: center; margin-left: auto; font-size: 0;137 }138 .key.search svg { width: 54px; height: 54px; stroke: #0b7fb0; stroke-width: 4; fill: none; }139 .kb-bottom {140 display: flex; align-items: center; gap: 16px; margin-top: 22px;141 }142 .gesture-bar {143 position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);144 width: 260px; height: 12px; background: #ffffff; border-radius: 8px; opacity: 0.85;145 }146</style>147</head>148<body>149<div id="render-target">150 <!-- Status Bar -->151 <div class="status-bar">152 <div class="time">8:04</div>153 <div class="status-icons">154 <!-- Lock (simple) -->155 <svg viewBox="0 0 24 24"><path d="M7 11V8a5 5 0 1 1 10 0v3"/><rect x="5" y="11" width="14" height="10" rx="2"/></svg>156 <!-- Wi-Fi -->157 <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0"/><path d="M5 11c3-3 11-3 14 0"/><path d="M8 14c2-2 6-2 8 0"/><circle cx="12" cy="17" r="1.5"/></svg>158 <!-- Battery -->159 <svg viewBox="0 0 28 24"><rect x="2" y="6" width="20" height="12" rx="2"/><rect x="23" y="9" width="3" height="6" rx="1"/></svg>160 </div>161 </div>162 163 <!-- App Bar -->164 <div class="app-bar">165 <button class="back" aria-label="Back">166 <svg viewBox="0 0 24 24" width="42" height="42" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">167 <path d="M15 19L8 12l7-7"/>168 </svg>169 </button>170 <div class="title-input">Canon EOS 1000D Camera</div>171 <button class="clear" aria-label="Clear">172 <svg viewBox="0 0 24 24" width="42" height="42" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round">173 <path d="M6 6l12 12M18 6L6 18"/>174 </svg>175 </button>176 </div>177 178 <!-- You May Also Like -->179 <div class="promo-section">180 <div class="promo-top">181 <div class="promo-text">182 <div class="heading">You May Also Like</div>183 <div class="sub">Inspired by your browsing history</div>184 </div>185 <div class="promo-badge">[IMG: Instant Discount QCash badge]</div>186 </div>187 <div class="promo-cards">188 <div class="card">189 <div class="chip">Jobs</div>190 <div class="card-icon">191 <svg viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="12" rx="2"/><path d="M9 7V5h6v2"/></svg>192 </div>193 <div class="name">BPO/ Telecaller</div>194 <div class="discount">₹0 Discount</div>195 </div>196 <div class="card">197 <div class="chip">Lifestyle</div>198 <div class="card-icon">199 <svg viewBox="0 0 24 24"><path d="M4 18h16M6 10h12M9 6v8M15 6v8"/></svg>200 </div>201 <div class="name">Furniture</div>202 <div class="discount">₹0 Discount</div>203 </div>204 <div class="card">205 <div class="chip">Electronics</div>206 <div class="card-icon">207 <svg viewBox="0 0 24 24"><rect x="6" y="4" width="12" height="16" rx="2"/><path d="M9 18h6"/></svg>208 </div>209 <div class="name">Refrigerators</div>210 <div class="discount">₹0 Discount</div>211 </div>212 <div class="card">213 <div class="chip">Mobiles</div>214 <div class="card-icon">215 <svg viewBox="0 0 24 24"><rect x="7" y="3" width="10" height="18" rx="2"/><path d="M10 3h4M10 20h4"/></svg>216 </div>217 <div class="name">Apple Clones</div>218 <div class="discount">₹0 Discount</div>219 </div>220 </div>221 </div>222 223 <!-- Suggestions -->224 <div class="suggestions-header">Suggestions</div>225 <div class="suggestion-list">226 <div class="suggestion-item">227 <div class="sicon">228 <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#777" stroke-width="2.8">229 <circle cx="10" cy="10" r="6"></circle><path d="M15 15l6 6"></path>230 </svg>231 </div>232 <div class="text">233 <div class="title">canon eos camera</div>234 <div class="subtitle">in Camera & Accessories</div>235 </div>236 </div>237 <div class="suggestion-item">238 <div class="sicon">239 <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#777" stroke-width="2.8">240 <circle cx="10" cy="10" r="6"></circle><path d="M15 15l6 6"></path>241 </svg>242 </div>243 <div class="text">244 <div class="title">canon eos 1300d</div>245 <div class="subtitle">in Cameras - Digicams</div>246 </div>247 </div>248 <div class="suggestion-item">249 <div class="sicon">250 <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#777" stroke-width="2.8">251 <circle cx="10" cy="10" r="6"></circle><path d="M15 15l6 6"></path>252 </svg>253 </div>254 <div class="text">255 <div class="title">canon eos 1200d</div>256 <div class="subtitle">in Cameras - Digicams</div>257 </div>258 </div>259 <div class="suggestion-item">260 <div class="sicon">261 <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="#777" stroke-width="2.8">262 <circle cx="10" cy="10" r="6"></circle><path d="M15 15l6 6"></path>263 </svg>264 </div>265 <div class="text">266 <div class="title">canon eos 700d</div>267 <div class="subtitle">in Cameras - Digicams</div>268 </div>269 </div>270 </div>271 272 <!-- Keyboard -->273 <div class="keyboard">274 <div class="kb-suggest">275 <span>Camera</span>276 <span> Cameras</span>277 <span> 📱</span>278 <span> 📷</span>279 </div>280 <div class="kb-row">281 <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>282 </div>283 <div class="kb-row">284 <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>285 </div>286 <div class="kb-row">287 <div class="key small">⇧</div>288 <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>289 <div class="key small">290 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#eaeaea" stroke-width="2.5">291 <path d="M19 7l-7 7-4-4"/><path d="M5 17h14"/>292 </svg>293 </div>294 </div>295 <div class="kb-bottom">296 <div class="key wide">?123</div>297 <div class="key small">,</div>298 <div class="key space"></div>299 <div class="key small">.</div>300 <div class="key small">301 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#eaeaea" stroke-width="2.5">302 <path d="M4 7l7 7-7 7"/><path d="M20 7v14"/>303 </svg>304 </div>305 <div class="key search">306 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"></circle><path d="M15 15l6 6"></path></svg>307 </div>308 </div>309 <div class="gesture-bar"></div>310 </div>311</div>312</body>313</html>