GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Amazon UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 80px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 padding: 0 32px;26 color: #222;27 font-weight: 600;28 font-size: 34px;29 background: linear-gradient(180deg, #9adfd2 0%, #bde9e2 60%, #ffffff 100%);30 }31 .status-right { display: flex; align-items: center; gap: 22px; }32 .status-dot { width: 20px; height: 20px; background:#111; border-radius:50%; }33 .status-icon { width: 36px; height: 36px; }34 35 /* Header / search area */36 .header {37 position: absolute;38 top: 80px;39 left: 0;40 width: 1080px;41 height: 290px;42 background: linear-gradient(180deg, #9adfd2 0%, #bde9e2 55%, #ffffff 100%);43 }44 .back-btn {45 position: absolute;46 top: 110px;47 left: 28px;48 width: 70px;49 height: 70px;50 display:flex; align-items:center; justify-content:center;51 border-radius: 40px;52 }53 .search-bar {54 position: absolute;55 top: 100px;56 left: 120px;57 width: 900px;58 height: 110px;59 background: #fff;60 border-radius: 24px;61 box-shadow: 0 2px 0 rgba(0,0,0,0.05);62 display: flex;63 align-items: center;64 padding: 0 26px;65 gap: 22px;66 border: 1px solid #e6e6e6;67 }68 .search-input {69 flex: 1;70 color: #555;71 font-size: 38px;72 }73 .icon-btn { width: 80px; height: 80px; border-radius: 18px; display:flex; align-items:center; justify-content:center; background:#f3f5f7; border:1px solid #e0e0e0; }74 75 /* Top product image area (partial shoes) */76 .top-images {77 position: absolute;78 top: 360px;79 left: 0;80 width: 1080px;81 height: 300px;82 display: flex;83 gap: 20px;84 padding: 0 40px;85 }86 .img-box {87 flex: 1;88 background: #E0E0E0;89 border: 1px solid #BDBDBD;90 display:flex; align-items:center; justify-content:center;91 color:#757575; font-size:30px;92 }93 94 /* Outfit feedback */95 .feedback {96 position: absolute;97 top: 680px;98 left: 0;99 width: 1080px;100 padding: 26px 40px;101 background: #fff;102 border-top: 1px solid #eee;103 border-bottom: 1px solid #eee;104 }105 .feedback-row { display:flex; align-items:center; justify-content: space-between; }106 .feedback-q { font-size: 40px; color:#222; font-weight:600; }107 .btns { display:flex; gap: 22px; }108 .btn {109 padding: 18px 34px;110 border:1px solid #d9d9d9;111 border-radius: 18px;112 font-size: 36px;113 color:#333;114 background:#fff;115 }116 .dots { margin-top: 22px; display:flex; gap:18px; justify-content:center; }117 .dot { width: 20px; height: 20px; border-radius: 50%; background:#c7c7c7; }118 .dot.active { background:#4f4f4f; }119 120 /* Brand section */121 .brand-section {122 position: absolute;123 top: 820px;124 left: 0;125 width: 1080px;126 padding: 36px 40px 20px;127 background:#fff;128 }129 .brand-header { display:flex; align-items:center; gap: 24px; }130 .badge {131 padding: 14px 22px;132 background:#6a6a6a;133 color:#fff;134 border-radius: 12px;135 font-weight:700;136 font-size: 34px;137 }138 .brand-title { font-size: 54px; font-weight:800; color:#111; }139 .bullet { display:flex; align-items:center; gap: 20px; margin-top: 26px; font-size: 38px; color:#333; }140 .check {141 width: 46px; height: 46px; border-radius:50%;142 border: 2px solid #3cb371; display:flex; align-items:center; justify-content:center;143 }144 .check svg { width: 28px; height: 28px; fill:#3cb371; }145 146 /* Product description */147 .section-title {148 position: absolute;149 top: 1090px;150 left: 40px;151 font-size: 62px;152 font-weight: 800;153 color:#111;154 }155 156 .banner {157 position: absolute;158 top: 1188px;159 left: 28px;160 width: 1024px;161 height: 320px;162 background:#E0E0E0;163 border:1px solid #BDBDBD;164 display:flex; align-items:center; justify-content:center;165 color:#757575; font-size:40px; font-weight:600;166 }167 168 .pants-img {169 position: absolute;170 top: 1540px;171 left: 140px;172 width: 800px;173 height: 900px;174 background:#E0E0E0;175 border:1px solid #BDBDBD;176 display:flex; align-items:center; justify-content:center;177 color:#757575; font-size:40px;178 }179 180 /* Bottom nav */181 .bottom-nav {182 position: absolute;183 bottom: 120px;184 left: 0;185 width: 1080px;186 height: 140px;187 border-top: 1px solid #e6e6e6;188 background:#fff;189 display:flex;190 align-items:center;191 justify-content: space-around;192 }193 .nav-item { display:flex; flex-direction:column; align-items:center; gap: 10px; color:#222; font-size:32px; }194 .nav-icon { width: 70px; height: 70px; }195 .gesture {196 position: absolute;197 bottom: 40px;198 left: 50%;199 transform: translateX(-50%);200 width: 600px;201 height: 20px;202 border-radius: 20px;203 background:#bdbdbd;204 opacity: 0.8;205 }206</style>207</head>208<body>209<div id="render-target">210 211 <!-- Status bar -->212 <div class="status-bar">213 <div>10:01</div>214 <div class="status-right">215 <div class="status-dot"></div>216 <div class="status-dot" style="background:#6b6b6b;"></div>217 <svg class="status-icon" viewBox="0 0 24 24">218 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#000"/>219 <rect x="20" y="10" width="2" height="4" fill="#000"/>220 </svg>221 </div>222 </div>223 224 <!-- Header -->225 <div class="header">226 <div class="back-btn">227 <svg width="50" height="50" viewBox="0 0 24 24">228 <path d="M15 18L9 12l6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>229 </svg>230 </div>231 <div class="search-bar">232 <svg width="46" height="46" viewBox="0 0 24 24">233 <circle cx="11" cy="11" r="7" stroke="#555" stroke-width="2" fill="none"/>234 <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#555" stroke-width="2"/>235 </svg>236 <div class="search-input">Search Amazon.in</div>237 <div class="icon-btn">238 <svg width="44" height="44" viewBox="0 0 24 24">239 <rect x="4" y="5" width="16" height="12" rx="2" fill="#333"/>240 <circle cx="12" cy="11" r="3" fill="#fff"/>241 </svg>242 </div>243 <div class="icon-btn">244 <svg width="44" height="44" viewBox="0 0 24 24">245 <path d="M12 3c3 0 6 2 6 6v2h-2V9c0-2.2-1.8-4-4-4s-4 1.8-4 4v2H6V9c0-4 3-6 6-6z" fill="#333"/>246 <rect x="9" y="14" width="6" height="7" rx="2" fill="#333"/>247 </svg>248 </div>249 </div>250 </div>251 252 <!-- Top product images -->253 <div class="top-images">254 <div class="img-box">[IMG: Black Shoe Left]</div>255 <div class="img-box">[IMG: Black Shoe Right]</div>256 </div>257 258 <!-- Outfit feedback -->259 <div class="feedback">260 <div class="feedback-row">261 <div class="feedback-q">Do you like this outfit?</div>262 <div class="btns">263 <div class="btn">Yes</div>264 <div class="btn">No</div>265 </div>266 </div>267 <div class="dots">268 <div class="dot active"></div>269 <div class="dot"></div>270 <div class="dot"></div>271 <div class="dot"></div>272 <div class="dot"></div>273 </div>274 </div>275 276 <!-- Brand section -->277 <div class="brand-section">278 <div class="brand-header">279 <div class="badge">Top Brand</div>280 <div class="brand-title">ONE SKY</div>281 </div>282 283 <div class="bullet">284 <div class="check">285 <svg viewBox="0 0 24 24"><path d="M20 6l-11 11-5-5" fill="none" stroke="#3cb371" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>286 </div>287 <div>98% positive ratings from 200+ customers</div>288 </div>289 290 <div class="bullet">291 <div class="check">292 <svg viewBox="0 0 24 24"><path d="M20 6l-11 11-5-5" fill="none" stroke="#3cb371" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>293 </div>294 <div>1K+ recent orders from this brand</div>295 </div>296 </div>297 298 <!-- Product Description -->299 <div class="section-title">Product Description</div>300 <div class="banner">[IMG: Men's TRACK PANTS Banner]</div>301 302 <div class="pants-img">[IMG: Track Pants Close-up]</div>303 304 <!-- Bottom navigation -->305 <div class="bottom-nav">306 <div class="nav-item">307 <svg class="nav-icon" viewBox="0 0 24 24">308 <path d="M3 11l9-7 9 7v9H3v-9z" fill="#111"/>309 </svg>310 <div>Home</div>311 </div>312 <div class="nav-item">313 <svg class="nav-icon" viewBox="0 0 24 24">314 <circle cx="12" cy="8" r="4" fill="#111"/>315 <path d="M4 21c0-4 4-6 8-6s8 2 8 6H4z" fill="#111"/>316 </svg>317 <div>You</div>318 </div>319 <div class="nav-item">320 <svg class="nav-icon" viewBox="0 0 24 24">321 <rect x="3" y="4" width="18" height="14" rx="2" fill="#111"/>322 <path d="M8 4v16M16 4v16" stroke="#fff" stroke-width="2"/>323 </svg>324 <div>More</div>325 </div>326 <div class="nav-item">327 <svg class="nav-icon" viewBox="0 0 24 24">328 <path d="M6 6h15l-2 10H7L6 6z" fill="#111"/>329 <circle cx="9" cy="20" r="2" fill="#111"/>330 <circle cx="17" cy="20" r="2" fill="#111"/>331 </svg>332 <div>Cart</div>333 </div>334 <div class="nav-item">335 <svg class="nav-icon" viewBox="0 0 24 24">336 <rect x="3" y="5" width="18" height="3" fill="#111"/>337 <rect x="3" y="11" width="18" height="3" fill="#111"/>338 <rect x="3" y="17" width="18" height="3" fill="#111"/>339 </svg>340 <div>Menu</div>341 </div>342 </div>343 344 <div class="gesture"></div>345</div>346</body>347</html>