GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Amazon Product UI - Reversible Octopus</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background: linear-gradient(180deg, #b7e6e6 0%, #c6efe9 40%, #ffffff 60%);11  }12 13  /* Status bar */14  .status-bar {15    height:90px; display:flex; align-items:center; justify-content:space-between;16    padding:0 40px; color:#2e2e2e; font-weight:600; font-size:40px;17  }18  .status-icons { display:flex; gap:28px; align-items:center; }19  .status-icons span { font-size:34px; color:#4a4a4a; }20 21  /* Top search header */22  .top-search {23    display:flex; align-items:center; gap:20px;24    padding:20px 30px;25  }26  .back-btn {27    width:72px; height:72px; border-radius:36px;28    display:flex; align-items:center; justify-content:center;29    background:#e9f7f6;30    border:1px solid #cfe8e6;31  }32  .search-pill {33    flex:1; height:110px; border-radius:22px;34    background:#ffffff; border:2px solid #d7e6e4;35    display:flex; align-items:center; padding:0 30px; gap:20px;36    box-shadow: 0 4px 6px rgba(0,0,0,0.06);37  }38  .search-pill input {39    border:none; outline:none; font-size:40px; flex:1; color:#333;40  }41  .search-pill input::placeholder { color:#8a8a8a; }42  .icon-btn {43    width:78px; height:78px; border-radius:12px; border:1px solid #dcdcdc;44    background:#f6f6f6; display:flex; align-items:center; justify-content:center;45  }46 47  /* Sponsored banner */48  .sponsored-row {49    display:flex; align-items:center; padding:12px 30px; gap:22px;50  }51  .small-avatar {52    width:120px; height:120px; background:#E0E0E0; border:1px solid #BDBDBD;53    display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px; border-radius:14px;54  }55  .banner-text { flex:1; }56  .banner-title { font-weight:700; font-size:36px; color:#222; line-height:1.25; }57  .price { color:#d64a2f; font-weight:800; font-size:44px; margin-top:4px; }58  .sponsored-tag { font-size:28px; color:#7b7b7b; }59 60  /* Product header */61  .section { padding:0 30px; }62  .link-blue { color:#0b6bdc; font-size:36px; margin:10px 0 20px 0; }63  .product-title { font-size:36px; color:#2a2a2a; line-height:1.35; }64  .rating-row { display:flex; align-items:center; justify-content:space-between; margin-top:18px; }65  .stars { color:#f59f00; font-size:36px; }66  .review-count { color:#444; font-size:32px; }67  .choice-row { display:flex; align-items:center; gap:14px; margin-top:20px; }68  .choice-badge {69    background:#232f3e; color:#fff; padding:16px 20px; border-radius:10px;70    font-size:30px; display:flex; align-items:center; gap:16px;71  }72  .choice-badge .triangle { width:0; height:0; border-left:12px solid transparent; border-right:12px solid transparent; border-top:18px solid #ff9900; }73  .choice-desc { font-size:30px; color:#333; }74 75  /* Image collage */76  .image-area {77    position:relative; height:820px; margin:26px 30px 20px 30px;78    border:1px solid #ccd3d7; border-radius:16px; background:#E0E0E0;79    display:flex; align-items:center; justify-content:center; color:#5e5e5e; font-size:40px;80  }81  .badge-off {82    position:absolute; left:24px; top:24px;83    width:150px; height:150px; background:#8a3d00; color:#fff; border-radius:75px;84    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:44px;85    box-shadow:0 4px 8px rgba(0,0,0,0.15);86  }87  .make-india {88    position:absolute; right:220px; top:90px; font-size:30px; color:#1f1f1f;89    background:#f3f3f3; border:1px solid #bdbdbd; padding:10px 16px; border-radius:8px;90  }91  .share-btn {92    position:absolute; right:24px; top:80px; width:90px; height:90px;93    border-radius:45px; background:#ffffff; border:1px solid #cfcfcf;94    display:flex; align-items:center; justify-content:center;95    box-shadow:0 2px 6px rgba(0,0,0,0.12);96  }97  .wish-btn {98    position:absolute; left:30px; bottom:20px; width:90px; height:90px;99    border-radius:45px; background:#ffffff; border:2px solid #cfd7dc;100    display:flex; align-items:center; justify-content:center;101  }102 103  /* Carousel dots */104  .carousel-dots {105    display:flex; align-items:center; justify-content:center; gap:22px;106    margin:10px 0 20px 0;107  }108  .dot {109    width:22px; height:22px; border-radius:11px; border:2px solid #b9c5cc; background:#fff;110  }111  .dot.active { background:#1f7ea6; border-color:#1f7ea6; }112 113  /* Attribute rows */114  .divider { height:1px; background:#e2e2e2; margin:0 0 0 0; }115  .attr-row {116    display:flex; align-items:center; justify-content:space-between;117    padding:26px 30px; font-size:38px; color:#212121;118  }119  .attr-row .value { font-weight:800; }120  .chev { transform:rotate(90deg); color:#666; }121 122  /* Bottom nav */123  .bottom-nav {124    position:absolute; bottom:0; left:0; right:0;125    height:160px; border-top:1px solid #dcdcdc; background:#ffffff;126    display:flex; align-items:center; justify-content:space-around;127  }128  .nav-item { display:flex; flex-direction:column; align-items:center; gap:10px; color:#222; font-size:34px; }129  .nav-icon {130    width:82px; height:82px; border-radius:18px; border:1px solid #dcdcdc; background:#f6f6f6;131    display:flex; align-items:center; justify-content:center;132  }133</style>134</head>135<body>136<div id="render-target">137 138  <!-- Status Bar -->139  <div class="status-bar">140    <div>11:12</div>141    <div class="status-icons">142      <span>◐</span>143      <span>✉️</span>144      <span>📶</span>145      <span>🔋</span>146    </div>147  </div>148 149  <!-- Top Search -->150  <div class="top-search">151    <div class="back-btn">152      <svg width="40" height="40" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" stroke="#2a2a2a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>153    </div>154    <div class="search-pill">155      <svg width="46" height="46" viewBox="0 0 24 24"><circle cx="10" cy="10" r="7" stroke="#7a7a7a" stroke-width="2" fill="none"/><path d="M21 21l-5-5" stroke="#7a7a7a" stroke-width="2" fill="none" stroke-linecap="round"/></svg>156      <input type="text" placeholder="Search Amazon.in">157      <div class="icon-btn">158        <svg width="40" height="40" viewBox="0 0 24 24"><rect x="5" y="4" width="14" height="14" rx="2" stroke="#555" stroke-width="2" fill="none"/><circle cx="12" cy="11" r="4" stroke="#555" stroke-width="2" fill="none"/><path d="M17.5 6.5l2 2" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/></svg>159      </div>160    </div>161  </div>162 163  <!-- Sponsored banner header -->164  <div class="sponsored-row">165    <div class="small-avatar">[IMG: Toy Avatar]</div>166    <div class="banner-text">167      <div class="banner-title">HUG 'n' FEEL SOFT TOYS Soft Toys Long Soft Lovable...</div>168      <div class="price">₹384.00</div>169    </div>170    <div class="sponsored-tag">Sponsored ⓘ</div>171  </div>172 173  <!-- Product info -->174  <div class="section">175    <div class="link-blue">Visit the Babique Store</div>176    <div class="product-title">Babique Octopus Sitting Plush Soft Toy Cute Kids Animal Home Decor Boys/Girls (17 Cm)</div>177 178    <div class="rating-row">179      <div class="stars">4.2 ★★★★☆</div>180      <div class="review-count">1,972</div>181    </div>182 183    <div class="choice-row">184      <div class="choice-badge">185        <div>Amazon's Choice</div>186        <div class="triangle"></div>187      </div>188      <div class="choice-desc">for "reversible octopus"</div>189    </div>190  </div>191 192  <!-- Product image collage -->193  <div class="image-area">194    <div class="badge-off">78% off</div>195    <div class="make-india">MAKE IN INDIA</div>196    <div class="share-btn">197      <svg width="40" height="40" viewBox="0 0 24 24">198        <circle cx="5" cy="12" r="3" fill="#666"/>199        <circle cx="19" cy="5" r="3" fill="#666"/>200        <circle cx="19" cy="19" r="3" fill="#666"/>201        <path d="M8 12l8-7M8 12l8 7" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>202      </svg>203    </div>204    <div class="wish-btn">205      <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 21s-7-4.4-9-8.7C1.3 9.2 3.4 6 6.7 6c2 0 3.3 1.1 4.3 2.3C12 6.9 13.3 6 15.3 6c3.3 0 5.4 3.2 3.7 6.3C19 16.6 12 21 12 21z" stroke="#5a6a74" stroke-width="2" fill="none" stroke-linejoin="round"/></svg>206    </div>207    [IMG: Reversible Octopus product collage]208  </div>209 210  <!-- Carousel dots -->211  <div class="carousel-dots">212    <div class="dot active"></div>213    <div class="dot"></div>214    <div class="dot"></div>215    <div class="dot"></div>216    <div class="dot"></div>217    <div class="dot"></div>218    <div class="dot"></div>219    <div class="dot"></div>220  </div>221 222  <!-- Attribute rows -->223  <div class="divider"></div>224  <div class="attr-row">225    <div>Colour:</div>226    <div class="value">Octopus</div>227  </div>228  <div class="divider"></div>229  <div class="attr-row">230    <div>Size:</div>231    <div class="value">17 Cm</div>232  </div>233  <div class="divider"></div>234  <div class="attr-row">235    <div>Style Name:</div>236    <div class="value">Reversible Octopus</div>237  </div>238  <div class="divider"></div>239  <div class="attr-row">240    <div>Pattern Name:</div>241    <div class="value">Octopus</div>242    <div class="chev">˅</div>243  </div>244 245  <!-- Bottom navigation bar -->246  <div class="bottom-nav">247    <div class="nav-item">248      <div class="nav-icon">249        <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 12l9-7 9 7v8H14v-5H10v5H3z" fill="none" stroke="#333" stroke-width="2"/></svg>250      </div>251      <div>Home</div>252    </div>253    <div class="nav-item">254      <div class="nav-icon">255        <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" stroke="#333" stroke-width="2" fill="none"/><path d="M4 21c2-4 6-5 8-5s6 1 8 5" stroke="#333" stroke-width="2" fill="none"/></svg>256      </div>257      <div>You</div>258    </div>259    <div class="nav-item">260      <div class="nav-icon">261        <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 6h18l-2 12H5L3 6z" stroke="#333" stroke-width="2" fill="none"/><circle cx="8" cy="20" r="2" fill="#333"/><circle cx="18" cy="20" r="2" fill="#333"/></svg>262      </div>263      <div>More</div>264    </div>265    <div class="nav-item">266      <div class="nav-icon">267        <svg width="40" height="40" viewBox="0 0 24 24"><path d="M6 6h14l-2 10H8L6 6z" stroke="#333" stroke-width="2" fill="none"/><text x="13" y="14" font-size="8" text-anchor="middle" fill="#333">1</text></svg>268      </div>269      <div>Cart</div>270    </div>271    <div class="nav-item">272      <div class="nav-icon">273        <svg width="40" height="40" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="2" fill="#333"/><rect x="4" y="11" width="16" height="2" fill="#333"/><rect x="4" y="17" width="16" height="2" fill="#333"/></svg>274      </div>275      <div>Menu</div>276    </div>277  </div>278 279</div>280</body>281</html>