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: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: linear-gradient(180deg, #a9dde0 0%, #bfe9e3 45%, #eaf4f3 100%);13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 70px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 padding: 0 32px;26 color: #1b1b1b;27 font-weight: 600;28 font-size: 34px;29 }30 .status-right {31 display: flex;32 align-items: center;33 gap: 26px;34 }35 .status-icon {36 width: 32px;37 height: 32px;38 }39 40 /* Top search area */41 .top-bar {42 position: absolute;43 top: 70px;44 left: 0;45 width: 1080px;46 padding: 24px 32px;47 display: flex;48 align-items: center;49 gap: 22px;50 }51 .back-btn {52 width: 72px;53 height: 72px;54 display: flex;55 align-items: center;56 justify-content: center;57 border-radius: 16px;58 background: transparent;59 }60 .search-bar {61 flex: 1;62 height: 110px;63 background: #ffffff;64 border-radius: 20px;65 box-shadow: inset 0 0 0 1px #d9d9d9;66 display: flex;67 align-items: center;68 padding: 0 26px;69 gap: 24px;70 }71 .search-input {72 flex: 1;73 font-size: 44px;74 color: #333;75 }76 .placeholder { color: #8a8a8a; }77 .mic-btn {78 width: 64px;79 height: 64px;80 border-radius: 16px;81 background: #f1f5f9;82 display: flex;83 align-items: center;84 justify-content: center;85 box-shadow: inset 0 0 0 1px #d6dde6;86 }87 88 /* History list */89 .history {90 position: absolute;91 top: 210px;92 left: 0;93 width: 1080px;94 padding: 0 24px;95 }96 .history-item {97 height: 140px;98 display: grid;99 grid-template-columns: 100px auto 100px;100 align-items: center;101 border-bottom: 2px solid #e6e6e6;102 background: transparent;103 }104 .hist-left {105 display: flex;106 align-items: center;107 justify-content: center;108 color: #777;109 }110 .hist-mid {111 display: flex;112 flex-direction: column;113 gap: 12px;114 padding-right: 20px;115 }116 .hist-title {117 font-size: 44px;118 color: #0f57c1;119 font-weight: 700;120 line-height: 1.1;121 white-space: nowrap;122 overflow: hidden;123 text-overflow: ellipsis;124 }125 .hist-sub {126 font-size: 36px;127 color: #7d7d7d;128 }129 .hist-right {130 display: flex;131 align-items: center;132 justify-content: center;133 }134 .close-icon {135 width: 44px;136 height: 44px;137 border-radius: 50%;138 color: #555;139 }140 141 /* Action buttons */142 .action-row {143 position: absolute;144 bottom: 960px;145 left: 0;146 width: 1080px;147 padding: 0 24px;148 display: flex;149 gap: 28px;150 justify-content: space-between;151 }152 .action-btn {153 flex: 1;154 height: 140px;155 background: #ffffff;156 border-radius: 26px;157 box-shadow: inset 0 0 0 1px #dcdcdc;158 display: flex;159 align-items: center;160 gap: 28px;161 padding: 0 34px;162 font-size: 42px;163 color: #333;164 font-weight: 600;165 }166 .icon-box {167 width: 84px;168 height: 84px;169 border-radius: 18px;170 background: #eaf0f7;171 display: flex;172 align-items: center;173 justify-content: center;174 box-shadow: inset 0 0 0 1px #cdd7e3;175 }176 177 /* Keyboard */178 .keyboard {179 position: absolute;180 bottom: 0;181 left: 0;182 width: 1080px;183 height: 900px;184 background: #0f1114;185 color: #e9e9e9;186 box-shadow: 0 -6px 16px rgba(0,0,0,0.15);187 }188 .kb-toolbar {189 height: 120px;190 padding: 0 24px;191 display: flex;192 align-items: center;193 gap: 36px;194 color: #cfd2d7;195 font-size: 40px;196 }197 .kb-toolbar .tool {198 width: 110px;199 height: 72px;200 background: #1a1d22;201 border-radius: 18px;202 display: flex;203 align-items: center;204 justify-content: center;205 box-shadow: inset 0 0 0 1px #2b2f36;206 }207 208 .kb-rows {209 padding: 16px 22px 26px;210 display: flex;211 flex-direction: column;212 gap: 24px;213 }214 .kb-row {215 display: flex;216 justify-content: center;217 gap: 16px;218 }219 .key {220 width: 92px;221 height: 120px;222 background: #1a1d22;223 border-radius: 22px;224 box-shadow: inset 0 0 0 1px #2b2f36;225 display: flex;226 align-items: center;227 justify-content: center;228 font-size: 52px;229 color: #e9e9e9;230 }231 .key-wide { width: 190px; }232 .space { width: 520px; }233 .send {234 width: 120px;235 height: 120px;236 background: #cfe0fb;237 color: #143a73;238 border-radius: 26px;239 display: flex;240 align-items: center;241 justify-content: center;242 box-shadow: inset 0 0 0 1px #abc4e6;243 }244 .mic {245 width: 120px;246 height: 120px;247 background: #b7cdf2;248 color: #173a7a;249 border-radius: 26px;250 display: flex;251 align-items: center;252 justify-content: center;253 box-shadow: inset 0 0 0 1px #98b5dd;254 }255 256 /* Simple SVG icons */257 svg { display: block; }258</style>259</head>260<body>261<div id="render-target">262 263 <!-- Status Bar -->264 <div class="status-bar">265 <div>2:12</div>266 <div class="status-right">267 <!-- Do not disturb icon -->268 <svg class="status-icon" viewBox="0 0 24 24">269 <circle cx="12" cy="12" r="10" fill="#5c6773"></circle>270 <rect x="6" y="11" width="12" height="2.7" fill="#eaeef3"></rect>271 </svg>272 <!-- Wifi icon -->273 <svg class="status-icon" viewBox="0 0 24 24">274 <path d="M2 8c5-4 15-4 20 0" stroke="#5c6773" stroke-width="2" fill="none"/>275 <path d="M5 11c4-3 10-3 14 0" stroke="#5c6773" stroke-width="2" fill="none"/>276 <circle cx="12" cy="16" r="2" fill="#5c6773"/>277 </svg>278 <!-- Battery icon -->279 <svg class="status-icon" viewBox="0 0 28 24">280 <rect x="2" y="6" width="20" height="12" rx="2" fill="#5c6773"/>281 <rect x="4" y="8" width="14" height="8" rx="1" fill="#eaeef3"/>282 <rect x="22" y="9" width="4" height="6" rx="1" fill="#5c6773"/>283 </svg>284 </div>285 </div>286 287 <!-- Top search bar -->288 <div class="top-bar">289 <div class="back-btn">290 <svg width="48" height="48" viewBox="0 0 24 24">291 <path d="M15 5l-7 7 7 7" stroke="#1a1a1a" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>292 </svg>293 </div>294 <div class="search-bar">295 <svg width="48" height="48" viewBox="0 0 24 24">296 <circle cx="10" cy="10" r="7" stroke="#6b7280" stroke-width="2" fill="none"/>297 <path d="M21 21l-6-6" stroke="#6b7280" stroke-width="2" stroke-linecap="round"/>298 </svg>299 <div class="search-input"><span class="placeholder">Search Amazon.in</span></div>300 <div class="mic-btn">301 <svg width="36" height="36" viewBox="0 0 24 24">302 <rect x="9" y="4" width="6" height="10" rx="3" fill="#6b7280"/>303 <path d="M6 11c0 4 3 6 6 6s6-2 6-6" stroke="#6b7280" stroke-width="2" fill="none"/>304 <path d="M12 17v3" stroke="#6b7280" stroke-width="2"/>305 </svg>306 </div>307 </div>308 </div>309 310 <!-- History list -->311 <div class="history">312 <div class="history-item">313 <div class="hist-left">314 <svg width="44" height="44" viewBox="0 0 24 24">315 <circle cx="12" cy="12" r="10" stroke="#9aa1aa" stroke-width="2" fill="none"/>316 <path d="M12 6v6l4 2" stroke="#9aa1aa" stroke-width="2" stroke-linecap="round"/>317 </svg>318 </div>319 <div class="hist-mid">320 <div class="hist-title">nike badminton racket</div>321 <div class="hist-sub">in All Categories</div>322 </div>323 <div class="hist-right">324 <svg class="close-icon" viewBox="0 0 24 24">325 <path d="M6 6l12 12M18 6L6 18" stroke="#60646a" stroke-width="2.5" stroke-linecap="round"/>326 </svg>327 </div>328 </div>329 330 <div class="history-item">331 <div class="hist-left">332 <svg width="44" height="44" viewBox="0 0 24 24">333 <circle cx="12" cy="12" r="10" stroke="#9aa1aa" stroke-width="2" fill="none"/>334 <path d="M12 6v6l4 2" stroke="#9aa1aa" stroke-width="2" stroke-linecap="round"/>335 </svg>336 </div>337 <div class="hist-mid">338 <div class="hist-title">m size black van heusen party shirt fo…</div>339 <div class="hist-sub">in All Categories</div>340 </div>341 <div class="hist-right">342 <svg class="close-icon" viewBox="0 0 24 24">343 <path d="M6 6l12 12M18 6L6 18" stroke="#60646a" stroke-width="2.5" stroke-linecap="round"/>344 </svg>345 </div>346 </div>347 348 <div class="history-item">349 <div class="hist-left">350 <svg width="44" height="44" viewBox="0 0 24 24">351 <circle cx="12" cy="12" r="10" stroke="#9aa1aa" stroke-width="2" fill="none"/>352 <path d="M12 6v6l4 2" stroke="#9aa1aa" stroke-width="2" stroke-linecap="round"/>353 </svg>354 </div>355 <div class="hist-mid">356 <div class="hist-title">m size black van heusen shirt for men …</div>357 <div class="hist-sub">in All Categories</div>358 </div>359 <div class="hist-right">360 <svg class="close-icon" viewBox="0 0 24 24">361 <path d="M6 6l12 12M18 6L6 18" stroke="#60646a" stroke-width="2.5" stroke-linecap="round"/>362 </svg>363 </div>364 </div>365 366 <div class="history-item">367 <div class="hist-left">368 <svg width="44" height="44" viewBox="0 0 24 24">369 <circle cx="12" cy="12" r="10" stroke="#9aa1aa" stroke-width="2" fill="none"/>370 <path d="M12 6v6l4 2" stroke="#9aa1aa" stroke-width="2" stroke-linecap="round"/>371 </svg>372 </div>373 <div class="hist-mid">374 <div class="hist-title">apple laptop</div>375 <div class="hist-sub">in All Categories</div>376 </div>377 <div class="hist-right">378 <svg class="close-icon" viewBox="0 0 24 24">379 <path d="M6 6l12 12M18 6L6 18" stroke="#60646a" stroke-width="2.5" stroke-linecap="round"/>380 </svg>381 </div>382 </div>383 384 <div class="history-item">385 <div class="hist-left">386 <svg width="44" height="44" viewBox="0 0 24 24">387 <circle cx="12" cy="12" r="10" stroke="#9aa1aa" stroke-width="2" fill="none"/>388 <path d="M12 6v6l4 2" stroke="#9aa1aa" stroke-width="2" stroke-linecap="round"/>389 </svg>390 </div>391 <div class="hist-mid">392 <div class="hist-title">3 seater sofa</div>393 <div class="hist-sub">in All Categories</div>394 </div>395 <div class="hist-right">396 <svg class="close-icon" viewBox="0 0 24 24">397 <path d="M6 6l12 12M18 6L6 18" stroke="#60646a" stroke-width="2.5" stroke-linecap="round"/>398 </svg>399 </div>400 </div>401 </div>402 403 <!-- Search action buttons -->404 <div class="action-row">405 <div class="action-btn">406 <div class="icon-box">407 <svg width="42" height="42" viewBox="0 0 24 24">408 <rect x="3" y="6" width="18" height="12" rx="2" fill="#9fb2c9"/>409 <rect x="6" y="9" width="5" height="5" rx="1" fill="#e7effa"/>410 <path d="M14 9h4v5h-4z" fill="#c7d6ea"/>411 </svg>412 </div>413 <div>Search with photo</div>414 </div>415 <div class="action-btn">416 <div class="icon-box">417 <svg width="42" height="42" viewBox="0 0 24 24">418 <rect x="4" y="7" width="16" height="10" rx="2" fill="#9fb2c9"/>419 <circle cx="12" cy="12" r="3" fill="#e7effa"/>420 <rect x="7" y="5" width="3" height="3" rx="1" fill="#9fb2c9"/>421 <rect x="14" y="5" width="3" height="3" rx="1" fill="#9fb2c9"/>422 </svg>423 </div>424 <div>Search with camera</div>425 </div>426 </div>427 428 <!-- Keyboard -->429 <div class="keyboard">430 <div class="kb-toolbar">431 <div class="tool">⬛</div>432 <div class="tool">🙂</div>433 <div class="tool">GIF</div>434 <div class="tool">⚙️</div>435 <div class="tool">Gᵀ</div>436 <div class="tool">🎨</div>437 <div class="tool">🎙️</div>438 </div>439 <div class="kb-rows">440 <div class="kb-row">441 <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>442 <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>443 </div>444 <div class="kb-row">445 <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>446 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>447 </div>448 <div class="kb-row">449 <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>450 <div class="key">n</div><div class="key">m</div>451 </div>452 <div class="kb-row">453 <div class="key-wide">?123</div>454 <div class="key-wide">,</div>455 <div class="key-wide">🙂</div>456 <div class="key space"></div>457 <div class="key-wide">.</div>458 <div class="send">459 <svg width="40" height="40" viewBox="0 0 24 24">460 <path d="M3 12l18-8-6 8 6 8z" fill="#143a73"/>461 </svg>462 </div>463 </div>464 </div>465 </div>466 467</div>468</body>469</html>