GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Product Detail - Similar Shoes</title>5<meta name="viewport" content="width=1440, initial-scale=1">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1440px;10    height: 3120px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    color: #111;15  }16 17  /* Generic utilities */18  .row { display: flex; }19  .center { display: flex; align-items: center; justify-content: center; }20  .divider { height: 14px; background:#F2F2F2; width: 100%; }21  .thin-divider { height: 2px; background:#EAEAEA; width: 100%; }22 23  /* Top bar */24  .topbar {25    height: 160px;26    padding: 0 40px;27    display: flex;28    align-items: center;29    justify-content: space-between;30  }31  .top-actions { display: flex; gap: 42px; align-items: center; }32  .icon-btn { width: 96px; height: 96px; border-radius: 24px; }33  .icon { width: 60px; height: 60px; }34 35  /* Feature bullets */36  .bullets { padding: 0 60px 30px 60px; }37  .bullets ul { margin: 12px 0 28px 0; padding-left: 38px; }38  .bullets li { font-size: 48px; line-height: 1.5; color: #333; }39 40  /* Trust badges */41  .trust-wrap { padding: 64px 40px 60px 40px; }42  .trust-row { display: flex; gap: 20px; }43  .trust-tile {44    flex: 1;45    text-align: center;46    padding: 20px 10px;47  }48  .trust-ic-wrap {49    width: 150px; height: 150px;50    border-radius: 50%;51    background: #F4F8FF;52    margin: 0 auto 28px auto;53    border: 4px solid #E3EEF9;54  }55  .trust-title {56    font-size: 52px;57    font-weight: 700;58    margin-bottom: 8px;59  }60  .trust-sub {61    font-size: 44px;62    color: #5a5a5a;63  }64 65  /* Returns */66  .returns { padding: 40px 60px 40px 60px; }67  .returns h2 { margin: 20px 0 16px 0; font-size: 72px; }68  .returns p { margin: 0; font-size: 46px; color:#444; line-height: 1.45; }69  .returns a { color: #2F80ED; text-decoration: none; }70 71  /* Action row */72  .actions { padding: 30px 40px 40px 40px; display: flex; gap: 24px; }73  .square-btn {74    width: 220px; height: 180px;75    border: 2px solid #E5E5E5; border-radius: 34px; background:#FAFAFA;76    display: flex; align-items: center; justify-content: center;77  }78  .cta {79    flex: 1;80    height: 180px;81    background: #121212; color: #fff;82    border-radius: 36px;83    display: flex; align-items: center; justify-content: center;84    font-size: 64px; font-weight: 700;85    gap: 26px;86  }87 88  /* Similar section */89  .similar { padding: 40px 60px; }90  .similar h3 { margin: 6px 0 10px 0; font-size: 68px; }91  .similar .sub { font-size: 52px; color:#333; }92 93  .cards {94    padding: 20px 40px 120px 40px;95    display: flex; gap: 36px;96  }97  .card {98    position: relative;99    width: 660px;100    border: 2px solid #E7E7E7;101    border-radius: 28px;102    overflow: hidden;103    background: #fff;104  }105  .card-img {106    width: 100%;107    height: 880px;108    background: #E0E0E0;109    border-bottom: 2px solid #BDBDBD;110    color: #757575;111    display: flex; align-items: center; justify-content: center;112    text-align: center;113    padding: 30px;114    font-size: 40px;115  }116  .wish {117    position: absolute;118    right: 24px; bottom: 24px;119    width: 96px; height: 96px;120    background:#FFFFFF;121    border: 2px solid #E5E5E5;122    border-radius: 50%;123    display: flex; align-items: center; justify-content: center;124    box-shadow: 0 6px 14px rgba(0,0,0,0.06);125  }126  .card-body { padding: 28px 30px 34px 30px; }127  .brand { font-size: 44px; color:#4F4F4F; }128  .name { font-size: 50px; margin-top: 10px; margin-bottom: 18px; }129  .price-row { display:flex; align-items: baseline; gap: 24px; }130  .price { font-size: 54px; font-weight: 800; }131  .old { font-size: 44px; color:#9E9E9E; text-decoration: line-through; }132  .off { font-size: 44px; color:#1AA34A; font-weight: 700; }133 134  /* Simple helpers for rupee sign looks bold */135  .rs::before { content: "₹"; }136 137  /* Make sure everything fits within the height */138  .footer-space { height: 220px; }139</style>140</head>141<body>142<div id="render-target">143 144  <!-- Top navigation -->145  <div class="topbar">146    <div class="top-actions">147      <div class="icon-btn center" style="width:96px;height:96px;">148        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">149          <polyline points="15 18 9 12 15 6"></polyline>150        </svg>151      </div>152    </div>153    <div class="top-actions">154      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"></circle><line x1="21" y1="21" x2="16.6" y2="16.6"></line></svg>155      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 8.6c0 5.4-8.8 11-8.8 11S3.2 14 3.2 8.6A5.4 5.4 0 0 1 8.6 3.2c1.7 0 3.3.8 4.4 2 1.1-1.2 2.7-2 4.4-2a5.4 5.4 0 0 1 3.4 9.4z"/></svg>156      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 7h14l-1.5 9h-11z"></path><path d="M6 7l-1-3H3"></path><circle cx="9" cy="20" r="1.5"></circle><circle cx="18" cy="20" r="1.5"></circle></svg>157    </div>158  </div>159 160  <div class="thin-divider"></div>161 162  <!-- Feature bullets shown above the trust badges -->163  <div class="bullets">164    <ul>165      <li>Lace Fastening</li>166      <li>Regular Fit</li>167    </ul>168  </div>169 170  <div class="divider"></div>171 172  <!-- Trust badges row -->173  <div class="trust-wrap">174    <div class="trust-row">175      <div class="trust-tile">176        <div class="trust-ic-wrap center">177          <!-- Smiley user -->178          <svg viewBox="0 0 24 24" width="110" height="110">179            <circle cx="12" cy="8" r="3.2" fill="#60A5FA"></circle>180            <path d="M4 20a8 8 0 0 1 16 0" fill="none" stroke="#3B82F6" stroke-width="2.2" stroke-linecap="round"/>181          </svg>182        </div>183        <div class="trust-title">18 Million+</div>184        <div class="trust-sub">Happy Customers</div>185      </div>186      <div class="trust-tile">187        <div class="trust-ic-wrap center">188          <!-- Shield check -->189          <svg viewBox="0 0 24 24" width="110" height="110" fill="none" stroke="#3B82F6" stroke-width="2">190            <path d="M12 2l7 3v5c0 5-3.5 9-7 11-3.5-2-7-6-7-11V5l7-3z" fill="#E8F1FF"></path>191            <polyline points="8 12 11 15 16 9" stroke="#2F6FEB" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>192          </svg>193        </div>194        <div class="trust-title">Genuine</div>195        <div class="trust-sub">Product</div>196      </div>197      <div class="trust-tile">198        <div class="trust-ic-wrap center">199          <!-- Hands with shield simplified -->200          <svg viewBox="0 0 24 24" width="110" height="110" fill="none" stroke="#3B82F6" stroke-width="2">201            <path d="M7 12s-3 1-3 4 2 4 4 4h3" stroke="#9CC3FF" stroke-width="2" />202            <path d="M17 12s3 1 3 4-2 4-4 4h-3" stroke="#9CC3FF" stroke-width="2" />203            <path d="M12 6l3 1v2c0 2-1.5 3.6-3 4.5C10.5 12.6 9 11 9 9V7l3-1z" fill="#E8F1FF" stroke="#2F6FEB"/>204            <polyline points="10.5 9.5 11.8 10.8 14 8.5" stroke="#2F6FEB" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>205          </svg>206        </div>207        <div class="trust-title">Quality</div>208        <div class="trust-sub">Checked</div>209      </div>210    </div>211  </div>212 213  <div class="divider"></div>214 215  <!-- Returns section -->216  <div class="returns">217    <h2>Returns</h2>218    <p>This product is not returnable. For full details on our Returns Policies, please <a href="#">click here</a></p>219  </div>220 221  <div class="thin-divider"></div>222 223  <!-- Actions -->224  <div class="actions">225    <div class="square-btn">226      <!-- Share icon -->227      <svg viewBox="0 0 24 24" width="70" height="70" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">228        <circle cx="18" cy="5" r="3"></circle>229        <circle cx="6" cy="12" r="3"></circle>230        <circle cx="18" cy="19" r="3"></circle>231        <line x1="8.7" y1="10.7" x2="15.3" y2="6.3"></line>232        <line x1="8.7" y1="13.3" x2="15.3" y2="17.7"></line>233      </svg>234    </div>235    <div class="square-btn">236      <!-- Heart -->237      <svg viewBox="0 0 24 24" width="70" height="70" fill="none" stroke="#333" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">238        <path d="M20.8 8.6c0 5.4-8.8 11-8.8 11S3.2 14 3.2 8.6A5.4 5.4 0 0 1 8.6 3.2c1.7 0 3.3.8 4.4 2 1.1-1.2 2.7-2 4.4-2a5.4 5.4 0 0 1 3.4 9.4z"/>239      </svg>240    </div>241    <div class="cta">242      <svg viewBox="0 0 24 24" width="70" height="70" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">243        <path d="M6 7h14l-1.5 9h-11z"></path>244        <path d="M6 7l-1-3H3"></path>245      </svg>246      <span>Add To Bag</span>247    </div>248  </div>249 250  <div class="thin-divider"></div>251 252  <!-- Similar products -->253  <div class="similar">254    <h3>Similar To</h3>255    <div class="sub">Puma: Dwane IDP Running Shoes</div>256  </div>257 258  <div class="cards">259    <!-- Card 1 -->260    <div class="card">261      <div class="card-img">[IMG: Model in black tracksuit showcasing Puma running shoes]</div>262      <div class="wish">263        <svg viewBox="0 0 24 24" width="46" height="46" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">264          <path d="M20.8 8.6c0 5.4-8.8 11-8.8 11S3.2 14 3.2 8.6A5.4 5.4 0 0 1 8.6 3.2c1.7 0 3.3.8 4.4 2 1.1-1.2 2.7-2 4.4-2a5.4 5.4 0 0 1 3.4 9.4z"/>265        </svg>266      </div>267      <div class="card-body">268        <div class="brand">Puma</div>269        <div class="name">Dwane Idp Running Shoes</div>270        <div class="price-row">271          <div class="price rs">1600</div>272          <div class="old rs">3999</div>273          <div class="off">60% off</div>274        </div>275      </div>276    </div>277 278    <!-- Card 2 -->279    <div class="card">280      <div class="card-img">[IMG: Black and grey Puma running shoe on light background]</div>281      <div class="wish">282        <svg viewBox="0 0 24 24" width="46" height="46" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">283          <path d="M20.8 8.6c0 5.4-8.8 11-8.8 11S3.2 14 3.2 8.6A5.4 5.4 0 0 1 8.6 3.2c1.7 0 3.3.8 4.4 2 1.1-1.2 2.7-2 4.4-2a5.4 5.4 0 0 1 3.4 9.4z"/>284        </svg>285      </div>286      <div class="card-body">287        <div class="brand">Puma</div>288        <div class="name">Lyrid Running Shoes</div>289        <div class="price-row">290          <div class="price rs">2474</div>291          <div class="old rs">4499</div>292          <div class="off">45% off</div>293        </div>294      </div>295    </div>296  </div>297 298  <div class="footer-space"></div>299 300</div>301</body>302</html>