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, #CDEFE6 0%, #DBF4EE 12%, #F7F9F8 28%, #FFFFFF 60%);13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 120px;22 padding: 0 30px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #1b1b1b;27 font-size: 40px;28 }29 .status-left, .status-right {30 display: flex;31 align-items: center;32 gap: 24px;33 }34 .status-icon {35 width: 36px;36 height: 36px;37 }38 39 /* Header with back + search */40 .search-header {41 position: absolute;42 top: 120px;43 left: 0;44 width: 1080px;45 height: 160px;46 display: flex;47 align-items: center;48 gap: 24px;49 padding: 0 30px;50 }51 .back-btn {52 width: 96px;53 height: 96px;54 border-radius: 48px;55 display: flex;56 align-items: center;57 justify-content: center;58 }59 .search-box {60 flex: 1;61 height: 110px;62 background: #FFFFFF;63 border: 1px solid #CFCFCF;64 border-radius: 22px;65 display: flex;66 align-items: center;67 padding: 0 26px;68 box-shadow: 0 2px 6px rgba(0,0,0,0.06);69 }70 .search-box svg { width: 48px; height: 48px; fill: #4E4E4E; margin-right: 18px; }71 .search-placeholder {72 font-size: 40px;73 color: #6F6F6F;74 }75 76 /* Suggestions list */77 .suggestions {78 position: absolute;79 top: 300px;80 left: 0;81 width: 1080px;82 background: transparent;83 }84 .suggestion-item {85 display: flex;86 align-items: center;87 justify-content: space-between;88 padding: 28px 30px;89 border-bottom: 1px solid #E6E6E6;90 height: 140px;91 box-sizing: border-box;92 }93 .suggestion-left {94 display: flex;95 align-items: center;96 gap: 26px;97 }98 .history-icon {99 width: 54px;100 height: 54px;101 border-radius: 27px;102 border: 2px solid #7A7A7A;103 display: flex;104 align-items: center;105 justify-content: center;106 }107 .suggestion-text {108 font-size: 44px;109 line-height: 1.2;110 color: #0A4DB3; /* Amazon link-like blue */111 font-weight: 700;112 }113 .suggestion-sub {114 font-size: 36px;115 color: #6A6A6A;116 font-weight: 500;117 margin-left: 12px;118 }119 .clear-x {120 width: 70px;121 height: 70px;122 border-radius: 36px;123 border: 2px solid #BDBDBD;124 color: #4D4D4D;125 display: flex;126 align-items: center;127 justify-content: center;128 font-size: 46px;129 }130 131 /* Bottom search helpers */132 .helpers {133 position: absolute;134 left: 0;135 width: 1080px;136 bottom: 940px; /* sit above keyboard */137 display: flex;138 justify-content: space-between;139 padding: 0 30px;140 box-sizing: border-box;141 }142 .helper-btn {143 width: 500px;144 height: 120px;145 border: 2px solid #D8D8D8;146 background: #FFFFFF;147 border-radius: 28px;148 display: flex;149 align-items: center;150 justify-content: center;151 gap: 22px;152 box-shadow: 0 2px 6px rgba(0,0,0,0.05);153 }154 .helper-btn span {155 font-size: 40px;156 color: #2A2A2A;157 font-weight: 600;158 }159 .outline-icon {160 width: 64px;161 height: 64px;162 }163 164 /* Keyboard mock */165 .keyboard {166 position: absolute;167 left: 0;168 bottom: 0;169 width: 1080px;170 height: 900px;171 background: #F1F3EC;172 border-top: 1px solid #E0E0E0;173 box-sizing: border-box;174 padding: 26px 26px 90px;175 }176 .key-row {177 display: flex;178 gap: 22px;179 margin-bottom: 26px;180 justify-content: center;181 }182 .key {183 background: #FFFFFF;184 border: 1px solid #D9D9D9;185 border-radius: 26px;186 width: 86px;187 height: 110px;188 display: flex;189 align-items: center;190 justify-content: center;191 font-size: 46px;192 color: #333;193 box-shadow: 0 2px 0 rgba(0,0,0,0.06);194 }195 .key.wide { width: 140px; }196 .space { width: 600px; }197 .action-row {198 display: flex;199 align-items: center;200 justify-content: space-between;201 gap: 22px;202 }203 .circle-btn {204 width: 110px;205 height: 110px;206 border-radius: 28px;207 background: #DDEBD8;208 display: flex;209 align-items: center;210 justify-content: center;211 border: 1px solid #C7DAC3;212 font-size: 44px;213 color: #2F6E2F;214 }215 .enter-btn {216 width: 140px;217 height: 110px;218 border-radius: 28px;219 background: #DDEBD8;220 border: 1px solid #C7DAC3;221 display: flex;222 align-items: center;223 justify-content: center;224 font-size: 44px;225 color: #2F6E2F;226 }227 228 /* Home indicator bar */229 .home-indicator {230 position: absolute;231 bottom: 20px;232 left: 50%;233 transform: translateX(-50%);234 width: 420px;235 height: 12px;236 background: #BDBDBD;237 border-radius: 6px;238 opacity: 0.7;239 }240</style>241</head>242<body>243<div id="render-target">244 245 <!-- Status bar -->246 <div class="status-bar">247 <div class="status-left">248 <div style="font-weight:700;">10:35</div>249 <!-- simple search dot -->250 <svg class="status-icon" viewBox="0 0 24 24">251 <circle cx="10" cy="10" r="8" stroke="#3A3A3A" stroke-width="2" fill="none"></circle>252 <line x1="16" y1="16" x2="22" y2="22" stroke="#3A3A3A" stroke-width="2"></line>253 </svg>254 <div style="display:flex; align-items:center; gap:8px;">255 <svg class="status-icon" viewBox="0 0 24 24">256 <circle cx="12" cy="12" r="6" fill="#FDBE34"></circle>257 </svg>258 <span>16°</span>259 </div>260 <span style="font-size:36px;">•</span>261 </div>262 <div class="status-right">263 <!-- WiFi -->264 <svg class="status-icon" viewBox="0 0 24 24">265 <path d="M2 9c4-4 16-4 20 0" stroke="#333" stroke-width="2" fill="none"/>266 <path d="M6 13c3-3 9-3 12 0" stroke="#333" stroke-width="2" fill="none"/>267 <path d="M10 17c1-1 3-1 4 0" stroke="#333" stroke-width="2" fill="none"/>268 <circle cx="12" cy="19" r="1.5" fill="#333"></circle>269 </svg>270 <!-- Battery -->271 <svg class="status-icon" viewBox="0 0 30 24">272 <rect x="2" y="6" width="22" height="12" rx="2" ry="2" stroke="#333" stroke-width="2" fill="none"></rect>273 <rect x="26" y="10" width="2" height="4" fill="#333"></rect>274 <rect x="4" y="8" width="14" height="8" fill="#333"></rect>275 </svg>276 </div>277 </div>278 279 <!-- Header with search -->280 <div class="search-header">281 <div class="back-btn">282 <svg width="56" height="56" viewBox="0 0 24 24">283 <path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>284 </svg>285 </div>286 <div class="search-box">287 <svg viewBox="0 0 24 24">288 <circle cx="10" cy="10" r="7" stroke="#666" stroke-width="2" fill="none"></circle>289 <line x1="16" y1="16" x2="22" y2="22" stroke="#666" stroke-width="2"></line>290 </svg>291 <div class="search-placeholder">Search Amazon.in</div>292 </div>293 </div>294 295 <!-- Suggestions -->296 <div class="suggestions">297 298 <div class="suggestion-item">299 <div class="suggestion-left">300 <div class="history-icon">301 <svg viewBox="0 0 24 24" width="38" height="38">302 <path d="M12 3a9 9 0 1 0 9 9" stroke="#777" stroke-width="2" fill="none"/>303 <path d="M12 7v6l4 2" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>304 </svg>305 </div>306 <div>307 <span class="suggestion-text">van heusen men's shirt</span>308 <span class="suggestion-sub"> in All Categories</span>309 </div>310 </div>311 <div class="clear-x">✕</div>312 </div>313 314 <div class="suggestion-item">315 <div class="suggestion-left">316 <div class="history-icon">317 <svg viewBox="0 0 24 24" width="38" height="38">318 <path d="M12 3a9 9 0 1 0 9 9" stroke="#777" stroke-width="2" fill="none"/>319 <path d="M12 7v6l4 2" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>320 </svg>321 </div>322 <div>323 <span class="suggestion-text">mens shirt</span>324 <span class="suggestion-sub"> in All Categories</span>325 </div>326 </div>327 <div class="clear-x">✕</div>328 </div>329 330 <div class="suggestion-item">331 <div class="suggestion-left">332 <div class="history-icon">333 <svg viewBox="0 0 24 24" width="38" height="38">334 <path d="M12 3a9 9 0 1 0 9 9" stroke="#777" stroke-width="2" fill="none"/>335 <path d="M12 7v6l4 2" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>336 </svg>337 </div>338 <div>339 <span class="suggestion-text">apple watch</span>340 <span class="suggestion-sub"> in All Categories</span>341 </div>342 </div>343 <div class="clear-x">✕</div>344 </div>345 346 </div>347 348 <!-- Bottom helpers -->349 <div class="helpers">350 <div class="helper-btn">351 <div class="history-icon" style="border-color:#B6B6B6; width:72px; height:72px;">352 <svg class="outline-icon" viewBox="0 0 24 24">353 <rect x="4" y="6" width="16" height="12" stroke="#555" stroke-width="2" fill="none"></rect>354 <rect x="8" y="9" width="8" height="6" fill="#555"></rect>355 </svg>356 </div>357 <span>Search with photo</span>358 </div>359 <div class="helper-btn">360 <svg class="outline-icon" viewBox="0 0 24 24">361 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" stroke="#555" stroke-width="2" fill="none"></rect>362 <circle cx="12" cy="12" r="4" stroke="#555" stroke-width="2" fill="none"></circle>363 <rect x="7" y="3" width="3" height="3" fill="#555"></rect>364 </svg>365 <span>Search with camera</span>366 </div>367 </div>368 369 <!-- Keyboard mock -->370 <div class="keyboard">371 <div class="key-row">372 <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>373 <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>374 </div>375 <div class="key-row">376 <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>377 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>378 </div>379 <div class="key-row">380 <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>381 <div class="key">n</div><div class="key">m</div>382 <div class="key wide">⌫</div>383 </div>384 <div class="action-row">385 <div class="circle-btn">?123</div>386 <div class="circle-btn">,</div>387 <div class="space key"> </div>388 <div class="circle-btn">.</div>389 <div class="enter-btn">↵</div>390 </div>391 </div>392 393 <div class="home-indicator"></div>394 395</div>396</body>397</html>