GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Amazon Search - Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(180deg, #b7e7de 0px, #bfeee2 180px, #ffffff 181px);13 }14 15 /* Header */16 .header {17 position: absolute;18 top: 38px;19 left: 0;20 width: 1080px;21 height: 170px;22 padding: 22px 24px;23 box-sizing: border-box;24 }25 .back-btn {26 position: absolute;27 left: 24px;28 top: 64px;29 width: 72px;30 height: 72px;31 display: flex;32 align-items: center;33 justify-content: center;34 }35 .search-pill {36 position: absolute;37 left: 114px;38 right: 24px;39 top: 40px;40 height: 110px;41 border-radius: 22px;42 background: #ffffff;43 box-shadow: 0 0 0 2px #e6eef0 inset;44 display: flex;45 align-items: center;46 padding: 0 28px;47 box-sizing: border-box;48 }49 .search-icon {50 width: 50px; height: 50px; margin-right: 18px;51 }52 .placeholder {53 color: #7f8d95;54 font-size: 44px;55 }56 57 /* Content list panel */58 .list {59 position: absolute;60 top: 208px;61 left: 0;62 width: 1080px;63 bottom: 820px; /* leaves space for keyboard */64 background: #ffffff;65 }66 .row {67 height: 146px;68 padding: 0 24px 0 24px;69 display: flex;70 align-items: center;71 box-sizing: border-box;72 border-bottom: 1px solid #eef1f3;73 }74 .row .clock {75 width: 54px;76 height: 54px;77 margin: 0 24px 0 12px;78 flex: 0 0 auto;79 }80 .row .text {81 flex: 1 1 auto;82 overflow: hidden;83 white-space: nowrap;84 text-overflow: ellipsis;85 display: flex;86 align-items: baseline;87 gap: 12px;88 }89 .title {90 color: #133ea5; /* Amazon-like blue */91 font-size: 46px;92 font-weight: 700;93 overflow: hidden;94 text-overflow: ellipsis;95 white-space: nowrap;96 max-width: 830px;97 }98 .meta {99 color: #9aa4ab;100 font-size: 38px;101 font-weight: 600;102 }103 .close {104 width: 52px;105 height: 52px;106 margin-left: 18px;107 flex: 0 0 auto;108 }109 110 /* Quick actions above keyboard */111 .quick-actions {112 position: absolute;113 left: 24px;114 right: 24px;115 bottom: 910px;116 display: flex;117 gap: 24px;118 }119 .qa-btn {120 flex: 1 1 0;121 height: 130px;122 border-radius: 26px;123 border: 2px solid #e7eaed;124 background: #ffffff;125 display: flex;126 align-items: center;127 padding: 0 28px;128 box-sizing: border-box;129 font-size: 44px;130 color: #2b2f33;131 font-weight: 700;132 gap: 26px;133 }134 .qa-icon {135 width: 70px; height: 70px;136 }137 138 /* Keyboard mock */139 .keyboard {140 position: absolute;141 left: 0;142 bottom: 0;143 width: 1080px;144 height: 820px;145 background: #121212;146 border-top: 1px solid #2b2b2b;147 box-sizing: border-box;148 padding: 22px 18px 28px;149 }150 .kbd-row {151 display: grid;152 grid-template-columns: repeat(10, 1fr);153 gap: 16px;154 margin: 26px 10px;155 }156 .key {157 height: 120px;158 background: #2a2a2a;159 color: #e8e8e8;160 border-radius: 18px;161 display: flex;162 align-items: center;163 justify-content: center;164 font-size: 46px;165 user-select: none;166 }167 .key.small { font-size: 38px; }168 .kbd-bottom {169 display: grid;170 grid-template-columns: 140px 140px 1fr 140px 140px;171 gap: 16px;172 margin: 24px 10px 0;173 }174 .send {175 position: absolute;176 right: 24px;177 bottom: 36px;178 width: 140px;179 height: 140px;180 background: #cfe3fb;181 color: #083a7b;182 border-radius: 70px;183 display: flex;184 align-items: center;185 justify-content: center;186 }187 188 /* Simple helper for SVGs inheriting color */189 svg { display: block; width: 100%; height: 100%; }190</style>191</head>192<body>193<div id="render-target">194 195 <!-- Header with back and search -->196 <div class="header">197 <div class="back-btn">198 <svg viewBox="0 0 24 24">199 <path d="M15.5 4.5L7 12l8.5 7.5" fill="none" stroke="#1f2a2e" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>200 </svg>201 </div>202 <div class="search-pill">203 <div class="search-icon">204 <svg viewBox="0 0 24 24">205 <circle cx="10" cy="10" r="7" stroke="#7a8a92" stroke-width="2.4" fill="none"/>206 <path d="M15.5 15.5L21 21" stroke="#7a8a92" stroke-width="2.6" stroke-linecap="round"/>207 </svg>208 </div>209 <div class="placeholder">Search Amazon.in</div>210 </div>211 </div>212 213 <!-- List of recent searches -->214 <div class="list">215 <div class="row">216 <div class="clock">217 <svg viewBox="0 0 24 24">218 <circle cx="12" cy="12" r="9" stroke="#98a3aa" stroke-width="2" fill="none"/>219 <path d="M12 7v5l4 2" stroke="#98a3aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>220 </svg>221 </div>222 <div class="text">223 <div class="title">iphone 15 pro max (256gb) in blue tit...</div>224 </div>225 <div class="close">226 <svg viewBox="0 0 24 24">227 <path d="M6 6l12 12M18 6L6 18" stroke="#1f2326" stroke-width="2.6" stroke-linecap="round"/>228 </svg>229 </div>230 </div>231 232 <div class="row">233 <div class="clock">234 <svg viewBox="0 0 24 24">235 <circle cx="12" cy="12" r="9" stroke="#98a3aa" stroke-width="2" fill="none"/>236 <path d="M12 7v5l4 2" stroke="#98a3aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>237 </svg>238 </div>239 <div class="text">240 <div class="title">iphone 15 pro max (256gb) in blue col...</div>241 </div>242 <div class="close">243 <svg viewBox="0 0 24 24">244 <path d="M6 6l12 12M18 6L6 18" stroke="#1f2326" stroke-width="2.6" stroke-linecap="round"/>245 </svg>246 </div>247 </div>248 249 <div class="row">250 <div class="clock">251 <svg viewBox="0 0 24 24">252 <circle cx="12" cy="12" r="9" stroke="#98a3aa" stroke-width="2" fill="none"/>253 <path d="M12 7v5l4 2" stroke="#98a3aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>254 </svg>255 </div>256 <div class="text">257 <div class="title">iphone 15 pro max in blue color</div>258 <div class="meta">in All ...</div>259 </div>260 <div class="close">261 <svg viewBox="0 0 24 24">262 <path d="M6 6l12 12M18 6L6 18" stroke="#1f2326" stroke-width="2.6" stroke-linecap="round"/>263 </svg>264 </div>265 </div>266 267 <div class="row">268 <div class="clock">269 <svg viewBox="0 0 24 24">270 <circle cx="12" cy="12" r="9" stroke="#98a3aa" stroke-width="2" fill="none"/>271 <path d="M12 7v5l4 2" stroke="#98a3aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>272 </svg>273 </div>274 <div class="text">275 <div class="title">duroflex sofa set for living room</div>276 <div class="meta">in All ...</div>277 </div>278 <div class="close">279 <svg viewBox="0 0 24 24">280 <path d="M6 6l12 12M18 6L6 18" stroke="#1f2326" stroke-width="2.6" stroke-linecap="round"/>281 </svg>282 </div>283 </div>284 285 <div class="row">286 <div class="clock">287 <svg viewBox="0 0 24 24">288 <circle cx="12" cy="12" r="9" stroke="#98a3aa" stroke-width="2" fill="none"/>289 <path d="M12 7v5l4 2" stroke="#98a3aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>290 </svg>291 </div>292 <div class="text">293 <div class="title">sofa set for living room</div>294 <div class="meta">in All Categories</div>295 </div>296 <div class="close">297 <svg viewBox="0 0 24 24">298 <path d="M6 6l12 12M18 6L6 18" stroke="#1f2326" stroke-width="2.6" stroke-linecap="round"/>299 </svg>300 </div>301 </div>302 303 <div class="row">304 <div class="clock">305 <svg viewBox="0 0 24 24">306 <circle cx="12" cy="12" r="9" stroke="#98a3aa" stroke-width="2" fill="none"/>307 <path d="M12 7v5l4 2" stroke="#98a3aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>308 </svg>309 </div>310 <div class="text">311 <div class="title">saffola classic masala oats</div>312 <div class="meta">in All Categ...</div>313 </div>314 <div class="close">315 <svg viewBox="0 0 24 24">316 <path d="M6 6l12 12M18 6L6 18" stroke="#1f2326" stroke-width="2.6" stroke-linecap="round"/>317 </svg>318 </div>319 </div>320 321 <div class="row">322 <div class="clock">323 <svg viewBox="0 0 24 24">324 <circle cx="12" cy="12" r="9" stroke="#98a3aa" stroke-width="2" fill="none"/>325 <path d="M12 7v5l4 2" stroke="#98a3aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>326 </svg>327 </div>328 <div class="text">329 <div class="title">saffola classic oats</div>330 <div class="meta">in All Categories</div>331 </div>332 <div class="close">333 <svg viewBox="0 0 24 24">334 <path d="M6 6l12 12M18 6L6 18" stroke="#1f2326" stroke-width="2.6" stroke-linecap="round"/>335 </svg>336 </div>337 </div>338 339 <div class="row">340 <div class="clock">341 <svg viewBox="0 0 24 24">342 <circle cx="12" cy="12" r="9" stroke="#98a3aa" stroke-width="2" fill="none"/>343 <path d="M12 7v5l4 2" stroke="#98a3aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>344 </svg>345 </div>346 <div class="text">347 <div class="title">standing desk</div>348 <div class="meta">in Computers & Accesso...</div>349 </div>350 <div class="close">351 <svg viewBox="0 0 24 24">352 <path d="M6 6l12 12M18 6L6 18" stroke="#1f2326" stroke-width="2.6" stroke-linecap="round"/>353 </svg>354 </div>355 </div>356 357 <div class="row">358 <div class="clock">359 <svg viewBox="0 0 24 24">360 <circle cx="12" cy="12" r="9" stroke="#98a3aa" stroke-width="2" fill="none"/>361 <path d="M12 7v5l4 2" stroke="#98a3aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>362 </svg>363 </div>364 <div class="text">365 <div class="title">standing desk</div>366 <div class="meta">in All Categories</div>367 </div>368 <div class="close">369 <svg viewBox="0 0 24 24">370 <path d="M6 6l12 12M18 6L6 18" stroke="#1f2326" stroke-width="2.6" stroke-linecap="round"/>371 </svg>372 </div>373 </div>374 375 <div class="row">376 <div class="clock">377 <svg viewBox="0 0 24 24">378 <circle cx="12" cy="12" r="9" stroke="#98a3aa" stroke-width="2" fill="none"/>379 <path d="M12 7v5l4 2" stroke="#98a3aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>380 </svg>381 </div>382 <div class="text">383 <div class="title">black sports shoes for women</div>384 <div class="meta">in Shoes</div>385 </div>386 <div class="close">387 <svg viewBox="0 0 24 24">388 <path d="M6 6l12 12M18 6L6 18" stroke="#1f2326" stroke-width="2.6" stroke-linecap="round"/>389 </svg>390 </div>391 </div>392 </div>393 394 <!-- Quick actions -->395 <div class="quick-actions">396 <div class="qa-btn">397 <div class="qa-icon">398 <svg viewBox="0 0 24 24">399 <rect x="3" y="5" width="18" height="14" rx="2" ry="2" fill="none" stroke="#55626a" stroke-width="2"/>400 <path d="M3 15l5-5 4 4 3-3 4 4" fill="none" stroke="#55626a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>401 </svg>402 </div>403 Search with photo404 </div>405 <div class="qa-btn">406 <div class="qa-icon">407 <svg viewBox="0 0 24 24">408 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#55626a" stroke-width="2"/>409 <circle cx="12" cy="12" r="4" fill="none" stroke="#55626a" stroke-width="2"/>410 <path d="M8 6l2-2h4l2 2" fill="none" stroke="#55626a" stroke-width="2" stroke-linecap="round"/>411 </svg>412 </div>413 Search with camera414 </div>415 </div>416 417 <!-- Keyboard mock -->418 <div class="keyboard">419 <div class="kbd-row">420 <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>421 </div>422 <div class="kbd-row">423 <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><div class="key small">⌫</div>424 </div>425 <div class="kbd-row">426 <div class="key small">⇧</div><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><div class="key">.</div><div class="key small">,</div>427 </div>428 <div class="kbd-bottom">429 <div class="key small">?123</div>430 <div class="key small">🌐</div>431 <div class="key">space</div>432 <div class="key small">.</div>433 <div class="key small">◂</div>434 </div>435 <div class="send">436 <svg viewBox="0 0 24 24">437 <path d="M4 20l16-8L4 4l3 6 7 2-7 2-3 6z" fill="#083a7b"/>438 </svg>439 </div>440 </div>441 442</div>443</body>444</html>