GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Search Products UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #ffffff;14 border-radius: 18px;15 }16 17 /* Header / App bar */18 .header {19 position: relative;20 width: 100%;21 height: 360px;22 background: #5C8F3C; /* green */23 color: #fff;24 }25 .status-bar {26 height: 84px;27 padding: 0 32px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 font-size: 40px;32 opacity: 0.95;33 }34 .top-icons {35 display: flex;36 gap: 22px;37 align-items: center;38 }39 .appbar {40 height: 120px;41 display: flex;42 align-items: center;43 padding: 0 32px;44 gap: 24px;45 }46 .appbar-title {47 flex: 1;48 text-align: center;49 font-size: 56px;50 font-weight: 700;51 letter-spacing: 0.5px;52 }53 .icon-btn {54 width: 84px; height: 84px;55 display: flex; align-items: center; justify-content: center;56 }57 .search-area {58 padding: 20px 32px 24px;59 }60 .search-box {61 background: #ffffff;62 height: 112px;63 border-radius: 16px;64 display: flex;65 align-items: center;66 padding: 0 24px;67 box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);68 color: #333;69 gap: 18px;70 }71 .search-input {72 flex: 1;73 font-size: 46px;74 color: #333;75 }76 77 /* Content list */78 .content {79 position: absolute;80 top: 360px;81 left: 0;82 right: 0;83 bottom: 900px; /* leave room for keyboard overlay */84 background: #fff;85 overflow-y: auto;86 }87 .list {88 padding-top: 12px;89 }90 .list-item {91 height: 110px;92 display: flex;93 align-items: center;94 padding: 0 36px;95 font-size: 48px;96 color: #333;97 border-bottom: 1px solid #E6E6E6;98 justify-content: space-between;99 }100 .subtitle {101 height: 90px;102 background: #EFEFEF;103 color: #666;104 display: flex;105 align-items: center;106 padding: 0 36px;107 font-size: 42px;108 border-top: 1px solid #E0E0E0;109 border-bottom: 1px solid #E0E0E0;110 }111 112 /* Keyboard overlay */113 .keyboard {114 position: absolute;115 bottom: 0;116 left: 0;117 width: 100%;118 height: 900px;119 background: #1B1B1B;120 color: #fff;121 border-top-left-radius: 24px;122 border-top-right-radius: 24px;123 box-shadow: 0 -8px 24px rgba(0,0,0,0.25);124 padding: 24px 24px 32px;125 }126 .kbd-top {127 display: flex;128 align-items: center;129 justify-content: space-between;130 margin-bottom: 22px;131 }132 .kbd-suggestions {133 display: flex;134 gap: 28px;135 font-size: 44px;136 color: #bbb;137 }138 .keys-row {139 display: grid;140 grid-template-columns: repeat(10, 1fr);141 gap: 18px;142 margin-bottom: 22px;143 }144 .key {145 height: 120px;146 background: #2A2A2A;147 border-radius: 18px;148 display: flex;149 align-items: center;150 justify-content: center;151 font-size: 48px;152 color: #eaeaea;153 }154 .key.wide { grid-column: span 2; }155 .key.space { grid-column: span 5; }156 .key.search {157 background: #BFD2EA;158 color: #1b1b1b;159 font-weight: 700;160 }161 162 /* Simple svg icons */163 svg { display: block; }164</style>165</head>166<body>167<div id="render-target">168 <!-- Header area -->169 <div class="header">170 <div class="status-bar">171 <div>4:42</div>172 <div class="top-icons">173 <!-- simple icons -->174 <svg width="36" height="36" viewBox="0 0 24 24">175 <circle cx="12" cy="12" r="10" fill="#fff" opacity="0.2"></circle>176 </svg>177 <svg width="36" height="36" viewBox="0 0 24 24">178 <path d="M3 11h18v2H3z" fill="#fff"></path>179 </svg>180 <svg width="36" height="36" viewBox="0 0 24 24">181 <path d="M7 20h10a2 2 0 0 0 2-2V6l-4 2-4-2-4 2-4-2v12a2 2 0 0 0 2 2z" fill="#fff" opacity="0.8"></path>182 </svg>183 <svg width="36" height="36" viewBox="0 0 24 24">184 <rect x="5" y="4" width="14" height="16" rx="2" stroke="#fff" fill="none"></rect>185 <path d="M9 8h6M9 12h6M9 16h6" stroke="#fff"></path>186 </svg>187 </div>188 </div>189 190 <div class="appbar">191 <div class="icon-btn">192 <!-- back arrow -->193 <svg width="48" height="48" viewBox="0 0 24 24">194 <path d="M15 5l-7 7 7 7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>195 </svg>196 </div>197 <div class="appbar-title">Search Products</div>198 <div class="icon-btn">199 <!-- barcode icon -->200 <svg width="48" height="48" viewBox="0 0 24 24">201 <path d="M3 5h2v14H3zM7 5h1v14H7zM10 5h2v14h-2zM14 5h1v14h-1zM17 5h2v14h-2z" fill="#fff"></path>202 </svg>203 </div>204 </div>205 206 <div class="search-area">207 <div class="search-box">208 <!-- search icon -->209 <svg width="46" height="46" viewBox="0 0 24 24">210 <circle cx="11" cy="11" r="7" stroke="#4A4A4A" stroke-width="2" fill="none"></circle>211 <path d="M20 20l-4-4" stroke="#4A4A4A" stroke-width="2" stroke-linecap="round"></path>212 </svg>213 <div class="search-input">lean meat</div>214 <!-- clear icon -->215 <svg width="46" height="46" viewBox="0 0 24 24">216 <path d="M6 6l12 12M18 6L6 18" stroke="#4A4A4A" stroke-width="2" stroke-linecap="round"></path>217 </svg>218 </div>219 </div>220 </div>221 222 <!-- Content list -->223 <div class="content">224 <div class="list">225 <div class="list-item">226 <div>meat</div>227 <svg width="44" height="44" viewBox="0 0 24 24">228 <path d="M9 6l6 6-6 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>229 </svg>230 </div>231 <div class="list-item">232 <div>meat in Pet Food & Accessories</div>233 <svg width="44" height="44" viewBox="0 0 24 24">234 <path d="M9 6l6 6-6 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>235 </svg>236 </div>237 <div class="list-item">238 <div>meat up</div>239 <svg width="44" height="44" viewBox="0 0 24 24">240 <path d="M9 6l6 6-6 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>241 </svg>242 </div>243 <div class="list-item">244 <div>meat masala</div>245 <svg width="44" height="44" viewBox="0 0 24 24">246 <path d="M9 6l6 6-6 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>247 </svg>248 </div>249 <div class="list-item">250 <div>goldiee meat</div>251 <svg width="44" height="44" viewBox="0 0 24 24">252 <path d="M9 6l6 6-6 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>253 </svg>254 </div>255 <div class="list-item">256 <div>meat jerky</div>257 <svg width="44" height="44" viewBox="0 0 24 24">258 <path d="M9 6l6 6-6 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>259 </svg>260 </div>261 <div class="list-item">262 <div>chicken masal</div>263 <svg width="44" height="44" viewBox="0 0 24 24">264 <path d="M9 6l6 6-6 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>265 </svg>266 </div>267 268 <div class="subtitle">Popular Categories</div>269 270 <div class="list-item">271 <div>Pet Food & Accessories</div>272 <svg width="44" height="44" viewBox="0 0 24 24">273 <path d="M9 6l6 6-6 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>274 </svg>275 </div>276 <div class="list-item">277 <div>Masalas & Spices</div>278 <svg width="44" height="44" viewBox="0 0 24 24">279 <path d="M9 6l6 6-6 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>280 </svg>281 </div>282 <div class="list-item">283 <div>Tinned & Processed Food</div>284 <svg width="44" height="44" viewBox="0 0 24 24">285 <path d="M9 6l6 6-6 6" stroke="#9E9E9E" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>286 </svg>287 </div>288 </div>289 </div>290 291 <!-- Keyboard overlay -->292 <div class="keyboard">293 <div class="kbd-top">294 <div class="kbd-suggestions">295 <span>meat</span>296 <span>meats</span>297 <span>🍗</span>298 <span>🥓</span>299 </div>300 <svg width="56" height="56" viewBox="0 0 24 24">301 <path d="M12 4a6 6 0 0 0-6 6v6h12v-6a6 6 0 0 0-6-6zm0 16v2m-6 0h12" stroke="#fff" stroke-width="1.7" fill="none"></path>302 </svg>303 </div>304 305 <div class="keys-row">306 <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>307 <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>308 </div>309 <div class="keys-row">310 <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>311 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key">⌫</div>312 </div>313 <div class="keys-row">314 <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>315 <div class="key">n</div><div class="key">m</div><div class="key wide">,</div><div class="key wide">.</div><div class="key search">🔍</div>316 </div>317 <div class="keys-row">318 <div class="key wide">?123</div>319 <div class="key space">space</div>320 <div class="key wide">.</div>321 <div class="key wide">🎤</div>322 </div>323 </div>324</div>325</body>326</html>