GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Amazon Search UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(180deg, #bfe7dc 0%, #d6efe8 22%, #ffffff 55%);13 }14 15 /* Status bar */16 .status-bar {17 height: 80px;18 padding: 18px 28px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 color: #333;23 font-size: 30px;24 letter-spacing: 0.3px;25 }26 .status-icons {27 display: flex;28 align-items: center;29 gap: 22px;30 color: #111;31 }32 .status-icons .icon {33 width: 34px; height: 34px;34 }35 36 /* Search header */37 .search-header {38 height: 140px;39 display: flex;40 align-items: center;41 padding: 0 28px;42 gap: 18px;43 }44 .back-btn {45 width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;46 }47 .back-btn svg { width: 42px; height: 42px; fill: #131313; }48 49 .search-box {50 flex: 1;51 height: 110px;52 background: #fff;53 border-radius: 22px;54 display: flex;55 align-items: center;56 padding: 0 28px;57 box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;58 border: 1px solid #e9e9e9;59 }60 .search-box svg { width: 40px; height: 40px; fill: #333; }61 .search-placeholder {62 color: #555;63 font-size: 38px;64 margin-left: 18px;65 }66 67 /* Suggestion list */68 .suggestions { background: #fff; }69 .row {70 height: 120px;71 display: flex;72 align-items: center;73 padding: 0 28px;74 border-bottom: 1px solid #ececec;75 }76 .row .left-ico {77 width: 60px;78 display: flex;79 justify-content: center;80 }81 .row .left-ico svg { width: 36px; height: 36px; fill: #767676; }82 .row .label {83 flex: 1;84 font-size: 42px;85 display: flex;86 align-items: baseline;87 gap: 12px;88 }89 .label .query { color: #0a4abf; font-weight: 700; }90 .label .in { color: #7c7c7c; font-weight: 500; }91 .row .close {92 width: 70px; display: flex; justify-content: center; align-items: center;93 }94 .row .close svg { width: 36px; height: 36px; stroke: #1f1f1f; stroke-width: 4; fill: none; }95 96 /* Photo/camera buttons */97 .actions {98 background: #fff;99 padding: 24px 28px 28px;100 display: flex;101 gap: 28px;102 }103 .action-btn {104 flex: 1;105 height: 120px;106 border: 1px solid #dcdcdc;107 background: #ffffff;108 border-radius: 26px;109 display: flex; align-items: center; justify-content: center;110 gap: 18px;111 font-size: 38px; color: #222;112 box-shadow: 0 1px 0 rgba(0,0,0,0.03);113 }114 .action-btn .ico {115 width: 54px; height: 54px;116 display: inline-flex; align-items: center; justify-content: center;117 }118 .action-btn .ico svg { width: 54px; height: 54px; fill: #1f1f1f; }119 120 /* Keyboard mock */121 .keyboard {122 position: absolute;123 bottom: 0;124 left: 0;125 width: 1080px;126 height: 1240px;127 background: #f9e6e2;128 border-top: 1px solid #efdad4;129 padding: 30px 24px 24px;130 box-sizing: border-box;131 }132 .kb-toolbar {133 display: flex;134 justify-content: space-between;135 align-items: center;136 padding: 6px 8px 24px;137 }138 .kb-toolbar span { font-size: 36px; color: #5a5a5a; }139 140 .kb-row {141 display: flex;142 justify-content: center;143 gap: 20px;144 margin-bottom: 22px;145 }146 .key {147 height: 120px;148 min-width: 90px;149 padding: 0 20px;150 background: #fff1ed;151 border: 1px solid #f0d6cf;152 border-radius: 20px;153 box-shadow: 0 2px 0 rgba(0,0,0,0.07);154 display: flex; align-items: center; justify-content: center;155 font-size: 54px; color: #222;156 }157 .key.wide { min-width: 140px; }158 .key.extra-wide { min-width: 420px; }159 .key.dark {160 background: #fbded6;161 }162 .key.icon svg { width: 42px; height: 42px; fill: #222; }163 .enter-key {164 background: #f6b2a3;165 border-color: #ed9e8c;166 color: #fff;167 }168 169 /* Fine adjustments to align segments vertically */170 .spacer-8 { height: 8px; }171</style>172</head>173<body>174<div id="render-target">175 176 <!-- Top status bar -->177 <div class="status-bar">178 <div class="time">9:25</div>179 <div class="status-icons">180 <!-- Do-Not-Disturb -->181 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#222" stroke-width="2" fill="none"></circle><rect x="7" y="11" width="10" height="2" fill="#222"></rect></svg>182 <!-- WiFi -->183 <svg class="icon" viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0" stroke="#222" stroke-width="2" fill="none"/><path d="M5 12c3-3 11-3 14 0" stroke="#222" stroke-width="2" fill="none"/><path d="M9 16c2-2 4-2 6 0" stroke="#222" stroke-width="2" fill="none"/><circle cx="12" cy="19" r="1.5" fill="#222"/></svg>184 <!-- Battery -->185 <svg class="icon" viewBox="0 0 28 18"><rect x="1" y="3" width="22" height="12" rx="2" ry="2" stroke="#222" stroke-width="2" fill="none"></rect><rect x="3" y="5" width="16" height="8" fill="#222"></rect><rect x="23" y="7" width="3" height="6" fill="#222"></rect></svg>186 <span style="font-size:28px; color:#222;">99%</span>187 </div>188 </div>189 190 <!-- Search header -->191 <div class="search-header">192 <div class="back-btn" aria-label="Back">193 <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>194 </div>195 <div class="search-box">196 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#333" stroke-width="2" fill="none"></circle><path d="M16 16l5 5" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/></svg>197 <div class="search-placeholder">Search Amazon.in</div>198 </div>199 </div>200 201 <!-- Suggestions -->202 <div class="suggestions">203 <div class="row">204 <div class="left-ico">205 <svg viewBox="0 0 24 24">206 <circle cx="12" cy="12" r="9" fill="none" stroke="#777" stroke-width="2"></circle>207 <path d="M12 7v5l4 2" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>208 </svg>209 </div>210 <div class="label">211 <span class="query">laptop</span>212 <span class="in">in All Categories</span>213 </div>214 <div class="close">215 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6l-12 12" stroke-width="2" stroke="#222"/></svg>216 </div>217 </div>218 219 <div class="row">220 <div class="left-ico">221 <svg viewBox="0 0 24 24">222 <circle cx="12" cy="12" r="9" fill="none" stroke="#777" stroke-width="2"></circle>223 <path d="M12 7v5l4 2" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>224 </svg>225 </div>226 <div class="label"><span class="query">watches</span><span class="in">in All Categories</span></div>227 <div class="close"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6l-12 12" stroke-width="2" stroke="#222"/></svg></div>228 </div>229 230 <div class="row">231 <div class="left-ico">232 <svg viewBox="0 0 24 24">233 <circle cx="12" cy="12" r="9" fill="none" stroke="#777" stroke-width="2"></circle>234 <path d="M12 7v5l4 2" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>235 </svg>236 </div>237 <div class="label"><span class="query">gold coin 24k</span><span class="in">in All Categories</span></div>238 <div class="close"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6l-12 12" stroke-width="2" stroke="#222"/></svg></div>239 </div>240 241 <div class="row">242 <div class="left-ico">243 <svg viewBox="0 0 24 24">244 <circle cx="12" cy="12" r="9" fill="none" stroke="#777" stroke-width="2"></circle>245 <path d="M12 7v5l4 2" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>246 </svg>247 </div>248 <div class="label"><span class="query">watches</span><span class="in">in Watches</span></div>249 <div class="close"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6l-12 12" stroke-width="2" stroke="#222"/></svg></div>250 </div>251 252 <div class="row">253 <div class="left-ico">254 <svg viewBox="0 0 24 24">255 <circle cx="12" cy="12" r="9" fill="none" stroke="#777" stroke-width="2"></circle>256 <path d="M12 7v5l4 2" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>257 </svg>258 </div>259 <div class="label"><span class="query">on shoes for men</span><span class="in">in All Categories</span></div>260 <div class="close"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6l-12 12" stroke-width="2" stroke="#222"/></svg></div>261 </div>262 263 <div class="row">264 <div class="left-ico">265 <svg viewBox="0 0 24 24">266 <circle cx="12" cy="12" r="9" fill="none" stroke="#777" stroke-width="2"></circle>267 <path d="M12 7v5l4 2" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>268 </svg>269 </div>270 <div class="label"><span class="query">on shoes</span><span class="in">in All Categories</span></div>271 <div class="close"><svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6l-12 12" stroke-width="2" stroke="#222"/></svg></div>272 </div>273 274 <!-- Action buttons -->275 <div class="actions">276 <div class="action-btn">277 <span class="ico">278 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#222" stroke-width="2"></rect><circle cx="12" cy="12" r="3" fill="none" stroke="#222" stroke-width="2"></circle><rect x="9" y="4" width="6" height="3" fill="#222"></rect></svg>279 </span>280 <span>Search with photo</span>281 </div>282 <div class="action-btn">283 <span class="ico">284 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#222" stroke-width="2"></rect><circle cx="12" cy="12" r="3" fill="none" stroke="#222" stroke-width="2"></circle><path d="M4 9l2-2h3" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round"/></svg>285 </span>286 <span>Search with camera</span>287 </div>288 </div>289 </div>290 291 <!-- Keyboard Mock -->292 <div class="keyboard">293 <div class="kb-toolbar">294 <span>⌨︎</span>295 <span>mic</span>296 </div>297 298 <div class="kb-row">299 <div class="key">q</div>300 <div class="key">w</div>301 <div class="key">e</div>302 <div class="key">r</div>303 <div class="key">t</div>304 <div class="key">y</div>305 <div class="key">u</div>306 <div class="key">i</div>307 <div class="key">o</div>308 <div class="key">p</div>309 </div>310 311 <div class="kb-row">312 <div class="key">a</div>313 <div class="key">s</div>314 <div class="key">d</div>315 <div class="key">f</div>316 <div class="key">g</div>317 <div class="key">h</div>318 <div class="key">j</div>319 <div class="key">k</div>320 <div class="key">l</div>321 </div>322 323 <div class="kb-row">324 <div class="key dark">shift</div>325 <div class="key">z</div>326 <div class="key">x</div>327 <div class="key">c</div>328 <div class="key">v</div>329 <div class="key">b</div>330 <div class="key">n</div>331 <div class="key">m</div>332 <div class="key icon">333 <svg viewBox="0 0 24 24"><path d="M5 6l14 0" stroke="#222" stroke-width="2"/><path d="M6 6v12h12V6" stroke="#222" stroke-width="2" fill="none"/></svg>334 </div>335 </div>336 337 <div class="kb-row">338 <div class="key wide">?123</div>339 <div class="key wide">,</div>340 <div class="key extra-wide"> </div>341 <div class="key wide">.</div>342 <div class="key enter-key icon">343 <svg viewBox="0 0 24 24"><path d="M19 7v6a2 2 0 0 1-2 2H7" stroke="#fff" stroke-width="2" fill="none"/><path d="M10 18l-4-4 4-4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>344 </div>345 </div>346 </div>347 348</div>349</body>350</html>