GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Amazon Product UI - Black Joggers</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: #FFFFFF;13 color: #222;14 }15 16 /* Header gradient area */17 .header {18 position: absolute;19 left: 0; top: 0;20 width: 1080px; height: 260px;21 background: linear-gradient(180deg,#a7e6df 0%, #c7f0ea 100%);22 }23 .status-bar {24 position: absolute; left: 24px; top: 18px;25 width: 1032px; height: 60px;26 display: flex; align-items: center; justify-content: space-between;27 color: #0a3b3a; font-weight: 600; font-size: 40px;28 }29 .status-icons {30 display: flex; align-items: center; gap: 28px; color: #0a3b3a;31 font-size: 28px;32 }33 .dot {34 width: 18px; height: 18px; background:#0a3b3a; border-radius: 50%;35 opacity: 0.9;36 }37 38 .back-btn {39 position: absolute; left: 26px; top: 102px; width: 60px; height: 60px;40 display: flex; align-items: center; justify-content: center;41 }42 43 .search-wrap {44 position: absolute; left: 120px; top: 96px;45 width: 840px; height: 92px; background: #fff;46 border-radius: 46px;47 box-shadow: 0 2px 0 rgba(0,0,0,0.08) inset;48 border: 1px solid #d9d9d9;49 display: flex; align-items: center; padding: 0 26px; gap: 20px;50 }51 .search-input {52 flex: 1; color: #6a6a6a; font-size: 36px;53 }54 .icon-btn {55 width: 60px; height: 60px; border-radius: 30px;56 display: flex; align-items: center; justify-content: center;57 color: #2f2f2f;58 }59 60 /* Description teaser text */61 .desc {62 position: absolute; left: 26px; top: 270px;63 width: 1028px; color: #666; font-size: 30px; line-height: 46px;64 }65 66 /* Product image area */67 .product-image {68 position: absolute; left: 0; top: 360px;69 width: 1080px; height: 1200px;70 background: #FFFFFF;71 border-top-left-radius: 22px; border-top-right-radius: 22px;72 }73 .img-box {74 position: absolute; left: 90px; top: 120px;75 width: 900px; height: 980px;76 background: #E0E0E0;77 border: 1px solid #BDBDBD;78 display: flex; align-items: center; justify-content: center;79 color: #757575; font-size: 36px; text-align: center;80 }81 82 /* Share circular button inside image */83 .share-bubble {84 position: absolute; right: 40px; top: 380px;85 width: 96px; height: 96px; border-radius: 48px;86 background: #fff; border: 1px solid #D9D9D9;87 display: flex; align-items: center; justify-content: center;88 box-shadow: 0 4px 10px rgba(0,0,0,0.08);89 z-index: 3;90 }91 92 /* Toast message over image */93 .toast {94 position: absolute; left: 210px; top: 900px;95 width: 660px; height: 220px; border-radius: 40px;96 background: #fff; border: 1px solid #E7E7E7;97 box-shadow: 0 14px 24px rgba(0,0,0,0.10);98 display: flex; flex-direction: column; justify-content: center; align-items: center;99 font-size: 46px; color: #1f1f1f; text-align: center;100 z-index: 4;101 }102 .toast small { font-size: 38px; color: #4b4b4b; margin-top: 14px; }103 104 /* Carousel dots row */105 .carousel-dots {106 position: absolute; left: 360px; bottom: 110px;107 display: flex; align-items: center; gap: 22px;108 }109 .dot-item {110 width: 24px; height: 24px; border-radius: 12px; background: #CFCFCF;111 }112 .dot-item.active { background: #888; }113 .play-icon {114 position: absolute; right: 120px; bottom: 100px;115 }116 117 /* Floating heart button */118 .heart-fab {119 position: absolute; left: 40px; bottom: 140px;120 width: 100px; height: 100px; border-radius: 50%;121 background: #ff4f74; display: flex; align-items: center; justify-content: center;122 box-shadow: 0 10px 20px rgba(0,0,0,0.18);123 z-index: 3;124 }125 .heart-fab svg { transform: translateY(2px); }126 127 /* Color section */128 .color-section {129 position: absolute; left: 24px; top: 1580px; width: 1032px;130 padding-top: 40px;131 }132 .color-section h3 {133 margin: 0 0 24px 0; font-size: 44px; color: #222;134 }135 .thumb-row {136 display: flex; gap: 36px; padding-bottom: 20px;137 }138 .thumb {139 width: 180px; height: 180px; border-radius: 90px;140 border: 6px solid #E0E0E0; overflow: hidden; background: #fff;141 display: flex; align-items: center; justify-content: center;142 }143 .thumb.active { border-color: #000; }144 .thumb .inner {145 width: 160px; height: 160px; border-radius: 80px;146 background: #E0E0E0; border: 1px solid #BDBDBD;147 display: flex; align-items: center; justify-content: center; color:#757575; font-size: 26px; text-align: center;148 }149 150 /* Bottom navigation bar */151 .bottom-nav {152 position: absolute; left: 0; bottom: 0;153 width: 1080px; height: 220px; background: #FAFAFA;154 border-top: 1px solid #E5E5E5;155 display: flex; align-items: center; justify-content: space-around;156 }157 .nav-item {158 width: 150px; height: 180px; display: flex; flex-direction: column;159 align-items: center; justify-content: center; gap: 14px; color: #1f1f1f;160 font-size: 36px;161 }162 .nav-item .label { font-size: 34px; color: #333; }163 .nav-item.active .label { color: #0b5c59; font-weight: 700; }164 165 /* Small helper dots under image thumbnails section */166 .mini-dots {167 position: absolute; left: 320px; top: 1460px;168 display: flex; gap: 20px;169 }170 .mini-dots span {171 width: 24px; height: 24px; border-radius: 12px; background: #bfbfbf;172 }173</style>174</head>175<body>176<div id="render-target">177 178 <!-- Gradient header -->179 <div class="header">180 <div class="status-bar">181 <div>10:02</div>182 <div class="status-icons">183 <div class="dot"></div>184 <div class="dot"></div>185 <div class="dot" style="opacity:0.6"></div>186 <!-- WiFi icon -->187 <svg width="48" height="48">188 <path d="M6 18 C18 10, 30 10, 42 18" stroke="#0a3b3a" stroke-width="4" fill="none"/>189 <path d="M12 24 C18 20, 30 20, 36 24" stroke="#0a3b3a" stroke-width="4" fill="none"/>190 <circle cx="24" cy="32" r="4" fill="#0a3b3a"></circle>191 </svg>192 <!-- Battery icon -->193 <svg width="60" height="32">194 <rect x="2" y="4" width="46" height="24" rx="4" ry="4" stroke="#0a3b3a" stroke-width="3" fill="none"></rect>195 <rect x="6" y="8" width="36" height="16" fill="#0a3b3a"></rect>196 <rect x="50" y="10" width="8" height="12" rx="2" fill="#0a3b3a"></rect>197 </svg>198 </div>199 </div>200 201 <!-- Back button -->202 <div class="back-btn">203 <svg width="56" height="56">204 <path d="M34 10 L18 28 L34 46" stroke="#153b39" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>205 </svg>206 </div>207 208 <!-- Search bar -->209 <div class="search-wrap">210 <div class="icon-btn">211 <svg width="44" height="44">212 <circle cx="18" cy="18" r="14" stroke="#333" stroke-width="3" fill="none"></circle>213 <line x1="30" y1="30" x2="42" y2="42" stroke="#333" stroke-width="3" stroke-linecap="round"></line>214 </svg>215 </div>216 <div class="search-input">Search Amazon.in</div>217 <div class="icon-btn">218 <!-- Camera icon -->219 <svg width="44" height="44">220 <rect x="6" y="12" width="32" height="22" rx="4" stroke="#333" stroke-width="3" fill="none"></rect>221 <circle cx="22" cy="23" r="6" stroke="#333" stroke-width="3" fill="none"></circle>222 <rect x="14" y="8" width="16" height="6" rx="2" fill="#333"></rect>223 </svg>224 </div>225 <div class="icon-btn">226 <!-- Mic icon -->227 <svg width="44" height="44">228 <rect x="18" y="10" width="8" height="16" rx="4" fill="#333"></rect>229 <path d="M12 22 C12 30, 32 30, 32 22" stroke="#333" stroke-width="3" fill="none"></path>230 <line x1="22" y1="30" x2="22" y2="38" stroke="#333" stroke-width="3"></line>231 </svg>232 </div>233 </div>234 </div>235 236 <!-- Description text snippet -->237 <div class="desc">238 Breathable Cargo Lower, Durable Sports Trackpants, Stretchable Waistline & 2 Pockets, Cotton Blend Loungewear, Easy Care Night Pants239 </div>240 241 <!-- Product image area -->242 <div class="product-image">243 <div class="img-box">[IMG: Black Joggers Product]</div>244 245 <!-- Share bubble -->246 <div class="share-bubble">247 <svg width="48" height="48">248 <circle cx="12" cy="24" r="6" fill="#333"></circle>249 <circle cx="36" cy="12" r="6" fill="#333"></circle>250 <circle cx="36" cy="36" r="6" fill="#333"></circle>251 <path d="M18 22 L30 14" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round"/>252 <path d="M18 26 L30 34" stroke="#333" stroke-width="4" fill="none" stroke-linecap="round"/>253 </svg>254 </div>255 256 <!-- Toast message -->257 <div class="toast">258 <div>Item saved to</div>259 <small>Shopping List</small>260 </div>261 262 <!-- Carousel dots -->263 <div class="carousel-dots">264 <div class="dot-item"></div>265 <div class="dot-item active"></div>266 <div class="dot-item"></div>267 <div class="dot-item"></div>268 <div class="dot-item"></div>269 <div class="dot-item"></div>270 </div>271 <div class="play-icon">272 <svg width="44" height="44">273 <polygon points="10,8 36,22 10,36" fill="#606060"></polygon>274 </svg>275 </div>276 277 <!-- Heart floating action button -->278 <div class="heart-fab">279 <svg width="50" height="50" viewBox="0 0 50 50">280 <path d="M25 42 C24 42, 10 32, 8 22 C6 14, 12 10, 18 12 C22 14, 24 18, 25 20 C26 18, 28 14, 32 12 C38 10, 44 14, 42 22 C40 32, 26 42, 25 42 Z" fill="#fff"></path>281 </svg>282 </div>283 </div>284 285 <!-- Mini dots just below image (like small pager under image previews) -->286 <div class="mini-dots">287 <span></span><span></span><span></span><span></span><span></span><span></span>288 </div>289 290 <!-- Color section with thumbnails -->291 <div class="color-section">292 <h3>Color: <span style="font-weight:700;">Black</span></h3>293 <div class="thumb-row">294 <div class="thumb">295 <div class="inner">[IMG: Grey Pants]</div>296 </div>297 <div class="thumb active">298 <div class="inner">[IMG: Black Pants]</div>299 </div>300 <div class="thumb">301 <div class="inner">[IMG: Olive Pants]</div>302 </div>303 </div>304 </div>305 306 <!-- Bottom navigation -->307 <div class="bottom-nav">308 <div class="nav-item active">309 <svg width="60" height="60">310 <path d="M8 30 L30 12 L52 30 L52 52 L8 52 Z" stroke="#0b5c59" stroke-width="3" fill="none"></path>311 <rect x="22" y="36" width="16" height="16" fill="#0b5c59"></rect>312 </svg>313 <div class="label">Home</div>314 </div>315 <div class="nav-item">316 <svg width="60" height="60">317 <circle cx="30" cy="20" r="10" fill="#333"></circle>318 <path d="M12 52 C12 36, 48 36, 48 52 Z" fill="#333"></path>319 </svg>320 <div class="label">You</div>321 </div>322 <div class="nav-item">323 <svg width="60" height="60">324 <rect x="10" y="20" width="40" height="28" rx="4" fill="#333"></rect>325 <rect x="18" y="10" width="24" height="10" rx="2" fill="#333"></rect>326 </svg>327 <div class="label">More</div>328 </div>329 <div class="nav-item">330 <svg width="70" height="60">331 <path d="M10 24 H60" stroke="#333" stroke-width="6"></path>332 <circle cx="20" cy="46" r="8" fill="#333"></circle>333 <circle cx="52" cy="46" r="8" fill="#333"></circle>334 </svg>335 <div class="label">Cart</div>336 </div>337 <div class="nav-item">338 <svg width="60" height="60">339 <rect x="12" y="14" width="36" height="6" fill="#333"></rect>340 <rect x="12" y="26" width="36" height="6" fill="#333"></rect>341 <rect x="12" y="38" width="36" height="6" fill="#333"></rect>342 </svg>343 <div class="label">Menu</div>344 </div>345 </div>346 347</div>348</body>349</html>