GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Amazon Search 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 border-radius: 18px;14 box-shadow: 0 2px 8px rgba(0,0,0,0.08);15 }16 17 /* Header / status area */18 .header {19 position: absolute;20 left: 0; top: 0;21 width: 100%; height: 280px;22 background: linear-gradient(180deg, #9cd9cf 0%, #b8e6db 100%);23 }24 .status-bar {25 position: absolute; left: 0; top: 12px; width: 100%; height: 60px;26 display: flex; align-items: center; justify-content: space-between;27 padding: 0 30px;28 color: #1f2937;29 font-size: 36px;30 letter-spacing: 0.5px;31 }32 .status-left { display: flex; align-items: center; gap: 18px; }33 .status-right { display: flex; align-items: center; gap: 22px; }34 35 .back-btn {36 position: absolute;37 left: 22px; top: 88px;38 width: 70px; height: 70px;39 display: flex; align-items: center; justify-content: center;40 border-radius: 14px;41 }42 .search-bar {43 position: absolute;44 left: 110px; top: 86px;45 width: 860px; height: 120px;46 background: #ffffff;47 border-radius: 20px;48 box-shadow: 0 2px 0 rgba(0,0,0,0.05) inset;49 display: flex; align-items: center;50 padding: 0 26px;51 gap: 20px;52 }53 .search-icon { width: 40px; height: 40px; }54 .search-placeholder {55 color: #6b7280; font-size: 40px;56 }57 58 /* List */59 .list {60 position: absolute;61 left: 0; top: 280px;62 width: 100%; background: #ffffff;63 }64 .list-item {65 display: flex; align-items: center;66 padding: 34px 32px;67 border-bottom: 1px solid #e6e6e6;68 }69 .clock {70 width: 46px; height: 46px; margin-right: 28px;71 }72 .li-text {73 flex: 1;74 display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;75 }76 .query {77 color: #0b4db7; font-weight: 700; font-size: 42px;78 }79 .category {80 color: #6b7280; font-size: 36px;81 }82 .close {83 width: 44px; height: 44px;84 }85 86 /* Action cards */87 .actions {88 position: absolute;89 left: 0; top: 1600px; width: 100%;90 display: flex; justify-content: space-between;91 padding: 0 28px;92 }93 .action-card {94 width: 504px; height: 136px;95 background: #ffffff;96 border: 1px solid #e5e7eb;97 border-radius: 22px;98 box-shadow: 0 4px 12px rgba(0,0,0,0.04);99 display: flex; align-items: center; gap: 24px;100 padding: 0 30px;101 color: #111827; font-size: 40px; font-weight: 600;102 }103 .action-icon { width: 64px; height: 64px; }104 105 /* Keyboard (simplified) */106 .keyboard {107 position: absolute; left: 0; bottom: 0;108 width: 100%; height: 740px;109 background: #f3eef8;110 border-top-left-radius: 22px; border-top-right-radius: 22px;111 box-shadow: 0 -2px 8px rgba(0,0,0,0.06) inset;112 }113 .kb-toolbar {114 height: 120px; display: flex; align-items: center; gap: 60px;115 padding: 0 40px; color: #374151;116 }117 .kb-icon {118 width: 76px; height: 76px; background: #ffffff;119 border: 1px solid #e5e7eb; border-radius: 18px;120 display: flex; justify-content: center; align-items: center;121 }122 .kb-rows { padding: 18px 24px; }123 .kb-row { display: flex; justify-content: space-between; margin-bottom: 24px; }124 .key {125 width: 92px; height: 110px; background: #ffffff;126 border: 1px solid #e5e7eb; border-radius: 26px;127 display: flex; align-items: center; justify-content: center;128 font-size: 46px; color: #111827;129 }130 .key.wide { width: 180px; }131 .space-row { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }132 .space {133 width: 540px; height: 118px; background: #ffffff;134 border: 1px solid #e5e7eb; border-radius: 30px;135 }136 .enter {137 width: 160px; height: 118px; background: #8dd39e;138 border-radius: 30px; display: flex; align-items: center; justify-content: center;139 color: #ffffff; font-size: 46px; font-weight: 700;140 }141 142 /* small helpers */143 .muted { color: #9ca3af; font-size: 32px; }144</style>145</head>146<body>147<div id="render-target">148 149 <!-- Header -->150 <div class="header">151 <div class="status-bar">152 <div class="status-left">153 <div>9:01</div>154 <div style="width:26px;height:26px;border:2px solid #2d3748;border-radius:4px"></div>155 <div style="width:26px;height:26px;border:2px solid #2d3748;border-radius:50%"></div>156 </div>157 <div class="status-right">158 <!-- wifi -->159 <svg class="wifi" width="44" height="28" viewBox="0 0 44 28" xmlns="http://www.w3.org/2000/svg">160 <path d="M2 8c9-7 31-7 40 0" stroke="#1f2937" stroke-width="3" fill="none" stroke-linecap="round"/>161 <path d="M8 14c6-5 22-5 28 0" stroke="#1f2937" stroke-width="3" fill="none" stroke-linecap="round"/>162 <circle cx="22" cy="22" r="3.5" fill="#1f2937"/>163 </svg>164 <!-- battery -->165 <svg class="battery" width="58" height="28" viewBox="0 0 58 28" xmlns="http://www.w3.org/2000/svg">166 <rect x="2" y="4" width="48" height="20" rx="4" stroke="#1f2937" stroke-width="3" fill="none"/>167 <rect x="6" y="8" width="32" height="12" rx="3" fill="#1f2937"/>168 <rect x="50" y="8" width="6" height="12" rx="2" fill="#1f2937"/>169 </svg>170 </div>171 </div>172 173 <div class="back-btn">174 <svg width="40" height="40" viewBox="0 0 24 24">175 <path d="M15 18l-6-6 6-6" stroke="#1f2937" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>176 </svg>177 </div>178 179 <div class="search-bar">180 <svg class="search-icon" viewBox="0 0 24 24">181 <circle cx="10" cy="10" r="7" stroke="#6b7280" stroke-width="2" fill="none"/>182 <path d="M21 21l-6-6" stroke="#6b7280" stroke-width="2" fill="none" stroke-linecap="round"/>183 </svg>184 <div class="search-placeholder">Search Amazon.in</div>185 </div>186 </div>187 188 <!-- Recent searches list -->189 <div class="list">190 191 <div class="list-item">192 <svg class="clock" viewBox="0 0 24 24">193 <circle cx="12" cy="12" r="9" stroke="#374151" stroke-width="2" fill="none"/>194 <path d="M12 7v6l4 2" stroke="#374151" stroke-width="2" fill="none" stroke-linecap="round"/>195 </svg>196 <div class="li-text">197 <div class="query">1kg of oatmeal</div>198 <div class="category">in All Categories</div>199 </div>200 <svg class="close" viewBox="0 0 24 24">201 <path d="M6 6l12 12M18 6L6 18" stroke="#111827" stroke-width="2.5" stroke-linecap="round"/>202 </svg>203 </div>204 205 <div class="list-item">206 <svg class="clock" viewBox="0 0 24 24">207 <circle cx="12" cy="12" r="9" stroke="#374151" stroke-width="2" fill="none"/>208 <path d="M12 7v6l4 2" stroke="#374151" stroke-width="2" fill="none" stroke-linecap="round"/>209 </svg>210 <div class="li-text">211 <div class="query">whole grain</div>212 <div class="category">in All Categories</div>213 </div>214 <svg class="close" viewBox="0 0 24 24">215 <path d="M6 6l12 12M18 6L6 18" stroke="#111827" stroke-width="2.5" stroke-linecap="round"/>216 </svg>217 </div>218 219 <div class="list-item">220 <svg class="clock" viewBox="0 0 24 24">221 <circle cx="12" cy="12" r="9" stroke="#374151" stroke-width="2" fill="none"/>222 <path d="M12 7v6l4 2" stroke="#374151" stroke-width="2" fill="none" stroke-linecap="round"/>223 </svg>224 <div class="li-text">225 <div class="query">grocery items</div>226 <div class="category">in All Categories</div>227 </div>228 <svg class="close" viewBox="0 0 24 24">229 <path d="M6 6l12 12M18 6L6 18" stroke="#111827" stroke-width="2.5" stroke-linecap="round"/>230 </svg>231 </div>232 233 <div class="list-item">234 <svg class="clock" viewBox="0 0 24 24">235 <circle cx="12" cy="12" r="9" stroke="#374151" stroke-width="2" fill="none"/>236 <path d="M12 7v6l4 2" stroke="#374151" stroke-width="2" fill="none" stroke-linecap="round"/>237 </svg>238 <div class="li-text">239 <div class="query">samsung s21 fe 5g</div>240 <div class="category">in All Categories</div>241 </div>242 <svg class="close" viewBox="0 0 24 24">243 <path d="M6 6l12 12M18 6L6 18" stroke="#111827" stroke-width="2.5" stroke-linecap="round"/>244 </svg>245 </div>246 247 <div class="list-item">248 <svg class="clock" viewBox="0 0 24 24">249 <circle cx="12" cy="12" r="9" stroke="#374151" stroke-width="2" fill="none"/>250 <path d="M12 7v6l4 2" stroke="#374151" stroke-width="2" fill="none" stroke-linecap="round"/>251 </svg>252 <div class="li-text">253 <div class="query">samsung s22 fe 5g mobile</div>254 <div class="category">in All Categories</div>255 </div>256 <svg class="close" viewBox="0 0 24 24">257 <path d="M6 6l12 12M18 6L6 18" stroke="#111827" stroke-width="2.5" stroke-linecap="round"/>258 </svg>259 </div>260 261 <div class="list-item">262 <svg class="clock" viewBox="0 0 24 24">263 <circle cx="12" cy="12" r="9" stroke="#374151" stroke-width="2" fill="none"/>264 <path d="M12 7v6l4 2" stroke="#374151" stroke-width="2" fill="none" stroke-linecap="round"/>265 </svg>266 <div class="li-text">267 <div class="query">samsung s22</div>268 <div class="category">in All Categories</div>269 </div>270 <svg class="close" viewBox="0 0 24 24">271 <path d="M6 6l12 12M18 6L6 18" stroke="#111827" stroke-width="2.5" stroke-linecap="round"/>272 </svg>273 </div>274 275 <div class="list-item">276 <svg class="clock" viewBox="0 0 24 24">277 <circle cx="12" cy="12" r="9" stroke="#374151" stroke-width="2" fill="none"/>278 <path d="M12 7v6l4 2" stroke="#374151" stroke-width="2" fill="none" stroke-linecap="round"/>279 </svg>280 <div class="li-text">281 <div class="query">stop watch timer for study</div>282 <div class="category">in All Categories</div>283 </div>284 <svg class="close" viewBox="0 0 24 24">285 <path d="M6 6l12 12M18 6L6 18" stroke="#111827" stroke-width="2.5" stroke-linecap="round"/>286 </svg>287 </div>288 289 <div class="list-item">290 <svg class="clock" viewBox="0 0 24 24">291 <circle cx="12" cy="12" r="9" stroke="#374151" stroke-width="2" fill="none"/>292 <path d="M12 7v6l4 2" stroke="#374151" stroke-width="2" fill="none" stroke-linecap="round"/>293 </svg>294 <div class="li-text">295 <div class="query">digital room clock</div>296 <div class="category">in All Categories</div>297 </div>298 <svg class="close" viewBox="0 0 24 24">299 <path d="M6 6l12 12M18 6L6 18" stroke="#111827" stroke-width="2.5" stroke-linecap="round"/>300 </svg>301 </div>302 303 <div class="list-item">304 <svg class="clock" viewBox="0 0 24 24">305 <circle cx="12" cy="12" r="9" stroke="#374151" stroke-width="2" fill="none"/>306 <path d="M12 7v6l4 2" stroke="#374151" stroke-width="2" fill="none" stroke-linecap="round"/>307 </svg>308 <div class="li-text">309 <div class="query">smart door locks</div>310 <div class="category">in All Categories</div>311 </div>312 <svg class="close" viewBox="0 0 24 24">313 <path d="M6 6l12 12M18 6L6 18" stroke="#111827" stroke-width="2.5" stroke-linecap="round"/>314 </svg>315 </div>316 317 </div>318 319 <!-- Action Cards -->320 <div class="actions">321 <div class="action-card">322 <svg class="action-icon" viewBox="0 0 24 24">323 <rect x="3" y="5" width="18" height="14" rx="3" stroke="#374151" stroke-width="2" fill="none"/>324 <rect x="7" y="9" width="10" height="6" fill="#374151"/>325 </svg>326 <div>Search with photo</div>327 </div>328 <div class="action-card">329 <svg class="action-icon" viewBox="0 0 24 24">330 <rect x="3" y="7" width="18" height="12" rx="3" stroke="#374151" stroke-width="2" fill="none"/>331 <circle cx="12" cy="13" r="4" fill="#374151"/>332 <rect x="6" y="3" width="4" height="3" rx="1" fill="#374151"/>333 </svg>334 <div>Search with camera</div>335 </div>336 </div>337 338 <!-- Keyboard -->339 <div class="keyboard">340 <div class="kb-toolbar">341 <div class="kb-icon">🔲</div>342 <div class="kb-icon">🙂</div>343 <div class="kb-icon">GIF</div>344 <div class="kb-icon">345 <svg width="36" height="36" viewBox="0 0 24 24">346 <circle cx="12" cy="12" r="10" stroke="#374151" stroke-width="2" fill="none"/>347 <path d="M12 2v20M2 12h20" stroke="#374151" stroke-width="2"/>348 </svg>349 </div>350 <div class="kb-icon">351 <svg width="36" height="36" viewBox="0 0 24 24">352 <circle cx="12" cy="12" r="9" stroke="#374151" stroke-width="2" fill="none"/>353 <circle cx="12" cy="12" r="4" fill="#374151"/>354 </svg>355 </div>356 <div style="margin-left:auto" class="kb-icon">357 <svg width="28" height="36" viewBox="0 0 24 24">358 <path d="M12 2c2 0 4 2 4 4v6c0 2-2 4-4 4s-4-2-4-4V6c0-2 2-4 4-4z" stroke="#374151" stroke-width="2" fill="none"/>359 <path d="M5 10v2a7 7 0 0 0 14 0v-2" stroke="#374151" stroke-width="2" fill="none"/>360 </svg>361 </div>362 </div>363 <div class="kb-rows">364 <div class="kb-row">365 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div>366 <div class="key">t</div><div class="key">y</div><div class="key">u</div><div class="key">i</div>367 <div class="key">o</div><div class="key">p</div>368 </div>369 <div class="kb-row" style="padding: 0 36px;">370 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div>371 <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>372 </div>373 <div class="kb-row" style="padding: 0 100px;">374 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>375 <div class="key">b</div><div class="key">n</div><div class="key">m</div>376 </div>377 <div class="space-row" style="padding: 0 24px;">378 <div class="key wide">?123</div>379 <div class="key wide">,</div>380 <div class="space"></div>381 <div class="key wide">.</div>382 <div class="enter">→</div>383 </div>384 </div>385 </div>386 387</div>388</body>389</html>