GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Amazon Search - UI Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width:1080px; height:2400px;10 position:relative; overflow:hidden;11 background: linear-gradient(180deg,#bfe6de 0%, #dff3ef 20%, #ffffff 45%, #ffffff 100%);12 }13 14 /* Status bar */15 .status-bar {16 position:absolute; top:0; left:0; width:100%; height:70px;17 display:flex; align-items:center; justify-content:space-between;18 padding:0 40px; color:#333; font-size:34px;19 }20 .status-right { display:flex; align-items:center; gap:24px; color:#2d2d2d; }21 .icon { display:inline-flex; align-items:center; justify-content:center; }22 .icon svg { width:36px; height:36px; }23 24 /* Top navigation with search */25 .top-area {26 position:absolute; top:70px; left:0; width:100%; height:160px;27 display:flex; align-items:center; gap:22px; padding:0 30px;28 }29 .back-btn {30 width:64px; height:64px; border-radius:32px;31 display:flex; align-items:center; justify-content:center;32 }33 .search-bar {34 flex:1; height:100px; background:#fff; border-radius:18px;35 box-shadow: 0 1px 0 rgba(0,0,0,0.08);36 border:1px solid #e5e5e5;37 display:flex; align-items:center; gap:22px; padding:0 26px;38 font-size:36px; color:#777;39 }40 .search-bar .placeholder { color:#666; }41 .search-bar svg { width:44px; height:44px; }42 43 /* List of recent searches */44 .list {45 position:absolute; top:230px; left:0; width:100%; 46 padding:0 26px;47 }48 .list-item {49 display:flex; align-items:center; justify-content:space-between;50 height:120px; border-bottom:1px solid #e9e9e9;51 }52 .item-left {53 display:flex; align-items:center; gap:26px;54 }55 .item-text { line-height:1.2; }56 .item-text .title { color:#0b3cff; font-size:44px; font-weight:700; }57 .item-text .subtitle { color:#7a7a7a; font-size:40px; }58 .x-btn { width:60px; height:60px; display:flex; align-items:center; justify-content:center; }59 .x-btn svg { width:34px; height:34px; stroke:#333; }60 61 /* two action buttons */62 .actions {63 position:absolute; top:1090px; left:0; width:100%;64 display:flex; gap:30px; padding:0 26px;65 }66 .action {67 flex:1; height:140px; border:1px solid #d9d9d9; border-radius:22px;68 background:#fff; display:flex; align-items:center; gap:22px; padding:0 26px;69 font-size:44px; color:#333;70 box-shadow: 0 1px 0 rgba(0,0,0,0.05);71 }72 .action svg { width:52px; height:52px; }73 74 /* Keyboard */75 .keyboard {76 position:absolute; bottom:0; left:0; width:100%; height:1080px;77 background:#fde9e4; border-top:1px solid #e5cbc5;78 padding-top:40px;79 }80 .kbd-toolbar {81 display:flex; align-items:center; gap:42px; padding:0 30px; color:#333; font-size:46px;82 }83 .small-icon { width:72px; height:72px; background:#f7d8d1; border:1px solid #e2bfb6; border-radius:16px; display:flex; align-items:center; justify-content:center; }84 .small-icon svg { width:44px; height:44px; }85 86 .keys { margin-top:28px; padding:0 18px; }87 .key-row { display:flex; gap:14px; justify-content:center; margin-bottom:22px; }88 .key {89 background:#fff; border:1px solid #e2bfb6; border-radius:26px;90 height:120px; min-width:92px;91 display:flex; align-items:center; justify-content:center;92 font-size:54px; color:#333;93 box-shadow: inset 0 -4px 0 rgba(230,170,160,0.35);94 }95 .key.wide-100 { min-width:100px; }96 .key.wide-110 { min-width:110px; }97 .key.backspace { min-width:150px; }98 .key.space { min-width:440px; }99 .key.wide-160 { min-width:160px; }100 .key.wide-120 { min-width:120px; }101 .key.wide-90 { min-width:90px; }102 .bottom-row { padding:0 24px; }103 .kbd-footer { position:absolute; bottom:26px; left:0; width:100%; text-align:center; }104</style>105</head>106<body>107<div id="render-target">108 109 <!-- Status Bar -->110 <div class="status-bar">111 <div>9:36</div>112 <div class="status-right">113 <!-- small circle icon -->114 <div class="icon">115 <svg viewBox="0 0 24 24">116 <circle cx="12" cy="12" r="9" fill="none" stroke="#444" stroke-width="2"></circle>117 <circle cx="12" cy="12" r="6" fill="#444"></circle>118 </svg>119 </div>120 <!-- wifi icon -->121 <div class="icon">122 <svg viewBox="0 0 24 24">123 <path d="M2 9c5-4 15-4 20 0" stroke="#444" stroke-width="2" fill="none"/>124 <path d="M6 13c3-3 9-3 12 0" stroke="#444" stroke-width="2" fill="none"/>125 <circle cx="12" cy="17" r="2" fill="#444"/>126 </svg>127 </div>128 <!-- battery icon -->129 <div class="icon">130 <svg viewBox="0 0 28 24">131 <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#444" stroke-width="2"></rect>132 <rect x="4" y="8" width="14" height="8" fill="#444"></rect>133 <rect x="22" y="9" width="4" height="6" fill="#444"></rect>134 </svg>135 </div>136 <div style="font-size:32px;">100%</div>137 </div>138 </div>139 140 <!-- Top Area with back and search -->141 <div class="top-area">142 <div class="back-btn">143 <svg viewBox="0 0 24 24">144 <path d="M15 5 L7 12 L15 19" stroke="#222" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>145 </svg>146 </div>147 <div class="search-bar">148 <svg viewBox="0 0 24 24">149 <circle cx="10" cy="10" r="7" stroke="#333" stroke-width="2" fill="none"></circle>150 <path d="M15 15 L21 21" stroke="#333" stroke-width="2"></path>151 </svg>152 <div class="placeholder">Search Amazon.in</div>153 </div>154 </div>155 156 <!-- Recent list -->157 <div class="list">158 159 <div class="list-item">160 <div class="item-left">161 <div class="icon">162 <svg viewBox="0 0 24 24">163 <circle cx="12" cy="12" r="9" stroke="#333" stroke-width="2" fill="none"></circle>164 <path d="M12 12 L12 7 M12 12 L16 14" stroke="#333" stroke-width="2" stroke-linecap="round"></path>165 </svg>166 </div>167 <div class="item-text">168 <div class="title">dark blue yoga pants</div>169 <div class="subtitle">in All Categories</div>170 </div>171 </div>172 <div class="x-btn">173 <svg viewBox="0 0 24 24">174 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#333" stroke-width="2"></path>175 </svg>176 </div>177 </div>178 179 <div class="list-item">180 <div class="item-left">181 <div class="icon">182 <svg viewBox="0 0 24 24">183 <circle cx="12" cy="12" r="9" stroke="#333" stroke-width="2" fill="none"></circle>184 <path d="M12 12 L12 7 M12 12 L16 14" stroke="#333" stroke-width="2" stroke-linecap="round"></path>185 </svg>186 </div>187 <div class="item-text">188 <div class="title">sofa</div>189 <div class="subtitle">in All Categories</div>190 </div>191 </div>192 <div class="x-btn">193 <svg viewBox="0 0 24 24">194 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#333" stroke-width="2"></path>195 </svg>196 </div>197 </div>198 199 <div class="list-item">200 <div class="item-left">201 <div class="icon">202 <svg viewBox="0 0 24 24">203 <circle cx="12" cy="12" r="9" stroke="#333" stroke-width="2" fill="none"></circle>204 <path d="M12 12 L12 7 M12 12 L16 14" stroke="#333" stroke-width="2" stroke-linecap="round"></path>205 </svg>206 </div>207 <div class="item-text">208 <div class="title">furniture</div>209 <div class="subtitle">in All Categories</div>210 </div>211 </div>212 <div class="x-btn">213 <svg viewBox="0 0 24 24">214 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#333" stroke-width="2"></path>215 </svg>216 </div>217 </div>218 219 <div class="list-item">220 <div class="item-left">221 <div class="icon">222 <svg viewBox="0 0 24 24">223 <circle cx="12" cy="12" r="9" stroke="#333" stroke-width="2" fill="none"></circle>224 <path d="M12 12 L12 7 M12 12 L16 14" stroke="#333" stroke-width="2" stroke-linecap="round"></path>225 </svg>226 </div>227 <div class="item-text">228 <div class="title">laptop</div>229 <div class="subtitle">in All Categories</div>230 </div>231 </div>232 <div class="x-btn">233 <svg viewBox="0 0 24 24">234 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#333" stroke-width="2"></path>235 </svg>236 </div>237 </div>238 239 <div class="list-item">240 <div class="item-left">241 <div class="icon">242 <svg viewBox="0 0 24 24">243 <circle cx="12" cy="12" r="9" stroke="#333" stroke-width="2" fill="none"></circle>244 <path d="M12 12 L12 7 M12 12 L16 14" stroke="#333" stroke-width="2" stroke-linecap="round"></path>245 </svg>246 </div>247 <div class="item-text">248 <div class="title">watches</div>249 <div class="subtitle">in All Categories</div>250 </div>251 </div>252 <div class="x-btn">253 <svg viewBox="0 0 24 24">254 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#333" stroke-width="2"></path>255 </svg>256 </div>257 </div>258 259 <div class="list-item">260 <div class="item-left">261 <div class="icon">262 <svg viewBox="0 0 24 24">263 <circle cx="12" cy="12" r="9" stroke="#333" stroke-width="2" fill="none"></circle>264 <path d="M12 12 L12 7 M12 12 L16 14" stroke="#333" stroke-width="2" stroke-linecap="round"></path>265 </svg>266 </div>267 <div class="item-text">268 <div class="title">gold coin 24k</div>269 <div class="subtitle">in All Categories</div>270 </div>271 </div>272 <div class="x-btn">273 <svg viewBox="0 0 24 24">274 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#333" stroke-width="2"></path>275 </svg>276 </div>277 </div>278 279 <div class="list-item">280 <div class="item-left">281 <div class="icon">282 <svg viewBox="0 0 24 24">283 <circle cx="12" cy="12" r="9" stroke="#333" stroke-width="2" fill="none"></circle>284 <path d="M12 12 L12 7 M12 12 L16 14" stroke="#333" stroke-width="2" stroke-linecap="round"></path>285 </svg>286 </div>287 <div class="item-text">288 <div class="title">watches</div>289 <div class="subtitle">in Watches</div>290 </div>291 </div>292 <div class="x-btn">293 <svg viewBox="0 0 24 24">294 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#333" stroke-width="2"></path>295 </svg>296 </div>297 </div>298 299 </div>300 301 <!-- Action buttons -->302 <div class="actions">303 <div class="action">304 <div class="icon">305 <svg viewBox="0 0 24 24">306 <rect x="2" y="4" width="20" height="16" rx="2" ry="2" fill="none" stroke="#333" stroke-width="2"></rect>307 <circle cx="8" cy="10" r="3" fill="#333"></circle>308 <path d="M12 14 L15 11 L19 15" stroke="#333" stroke-width="2" fill="none"></path>309 </svg>310 </div>311 <div>Search with photo</div>312 </div>313 <div class="action">314 <div class="icon">315 <svg viewBox="0 0 24 24">316 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#333" stroke-width="2"></rect>317 <rect x="7" y="3" width="10" height="4" fill="#333"></rect>318 <circle cx="12" cy="12" r="4" fill="none" stroke="#333" stroke-width="2"></circle>319 </svg>320 </div>321 <div>Search with camera</div>322 </div>323 </div>324 325 <!-- Keyboard -->326 <div class="keyboard">327 <div class="kbd-toolbar">328 <div class="small-icon">329 <svg viewBox="0 0 24 24">330 <circle cx="6" cy="6" r="2" fill="#333"></circle>331 <circle cx="12" cy="6" r="2" fill="#333"></circle>332 <circle cx="18" cy="6" r="2" fill="#333"></circle>333 <circle cx="6" cy="12" r="2" fill="#333"></circle>334 <circle cx="12" cy="12" r="2" fill="#333"></circle>335 <circle cx="18" cy="12" r="2" fill="#333"></circle>336 <circle cx="6" cy="18" r="2" fill="#333"></circle>337 <circle cx="12" cy="18" r="2" fill="#333"></circle>338 <circle cx="18" cy="18" r="2" fill="#333"></circle>339 </svg>340 </div>341 <div class="small-icon">342 <svg viewBox="0 0 24 24">343 <circle cx="12" cy="9" r="5" fill="none" stroke="#333" stroke-width="2"></circle>344 <path d="M4 20c6-6 10-6 16 0" stroke="#333" stroke-width="2" fill="none"></path>345 </svg>346 </div>347 <div style="font-size:40px; color:#333; background:#f7d8d1; border:1px solid #e2bfb6; border-radius:16px; padding:14px 20px;">GIF</div>348 <div style="font-size:40px; color:#333; background:#f7d8d1; border:1px solid #e2bfb6; border-radius:16px; padding:14px 20px;">G</div>349 <div class="small-icon">350 <svg viewBox="0 0 24 24">351 <circle cx="12" cy="12" r="8" fill="none" stroke="#333" stroke-width="2"></circle>352 <path d="M12 8 L12 12 L15 14" stroke="#333" stroke-width="2" fill="none"></path>353 </svg>354 </div>355 <div class="small-icon">356 <svg viewBox="0 0 24 24">357 <circle cx="8" cy="8" r="4" fill="#333"></circle>358 <circle cx="16" cy="12" r="3" fill="#555"></circle>359 <circle cx="10" cy="16" r="2" fill="#777"></circle>360 </svg>361 </div>362 <div class="small-icon">363 <svg viewBox="0 0 24 24">364 <rect x="8" y="3" width="8" height="12" rx="4" fill="none" stroke="#333" stroke-width="2"></rect>365 <path d="M12 15v4" stroke="#333" stroke-width="2"></path>366 </svg>367 </div>368 </div>369 370 <div class="keys">371 <!-- Row 1 -->372 <div class="key-row">373 <div class="key">q</div>374 <div class="key">w</div>375 <div class="key">e</div>376 <div class="key">r</div>377 <div class="key">t</div>378 <div class="key">y</div>379 <div class="key">u</div>380 <div class="key">i</div>381 <div class="key">o</div>382 <div class="key">p</div>383 </div>384 385 <!-- Row 2 -->386 <div class="key-row">387 <div class="key wide-100">a</div>388 <div class="key wide-100">s</div>389 <div class="key wide-100">d</div>390 <div class="key wide-100">f</div>391 <div class="key wide-100">g</div>392 <div class="key wide-100">h</div>393 <div class="key wide-100">j</div>394 <div class="key wide-100">k</div>395 <div class="key wide-100">l</div>396 </div>397 398 <!-- Row 3 -->399 <div class="key-row">400 <div class="key wide-110">z</div>401 <div class="key wide-110">x</div>402 <div class="key wide-110">c</div>403 <div class="key wide-110">v</div>404 <div class="key wide-110">b</div>405 <div class="key wide-110">n</div>406 <div class="key wide-110">m</div>407 <div class="key backspace">408 <svg viewBox="0 0 24 24" style="width:48px;height:48px;">409 <path d="M3 12 L8 6 H20 V18 H8 Z" fill="none" stroke="#333" stroke-width="2"></path>410 <path d="M11 9 L15 13 M15 9 L11 13" stroke="#333" stroke-width="2"></path>411 </svg>412 </div>413 </div>414 415 <!-- Bottom Row -->416 <div class="key-row bottom-row">417 <div class="key wide-160">?123</div>418 <div class="key wide-90">,</div>419 <div class="key wide-120">☺</div>420 <div class="key space"> </div>421 <div class="key wide-120">.</div>422 <div class="key wide-160">423 <svg viewBox="0 0 24 24" style="width:44px;height:44px;">424 <path d="M5 12 H18 M12 5 L18 12 L12 19" stroke="#333" stroke-width="2" fill="none"></path>425 </svg>426 </div>427 </div>428 </div>429 <div class="kbd-footer"></div>430 </div>431 432</div>433</body>434</html>