GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Product Detail - Running Shoes</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff; color: #222;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; width: 100%; height: 130px;17    background: #E6E6E6; display: flex; align-items: center; justify-content: space-between;18    padding: 0 36px; box-sizing: border-box; font-size: 36px; color: #333;19  }20  .status-icons { display: flex; align-items: center; gap: 26px; }21  .status-icons svg { width: 42px; height: 42px; fill: #555; }22  .battery { display: flex; align-items: center; gap: 8px; font-size: 32px; color: #555; }23 24  /* Main content */25  .content { position: absolute; top: 130px; left: 0; right: 0; bottom: 0; overflow: hidden; }26  .section { padding: 36px 40px; }27 28  /* Product image */29  .hero {30    position: relative; padding-top: 24px; padding-bottom: 20px;31  }32  .img-placeholder {33    width: 1000px; height: 560px; margin: 0 auto;34    background: #E0E0E0; border: 1px solid #BDBDBD;35    display: flex; align-items: center; justify-content: center; color: #757575;36    font-size: 34px; border-radius: 8px;37  }38  .float-btn {39    position: absolute; right: 40px;40    width: 110px; height: 110px; background: #fff; border-radius: 55px;41    box-shadow: 0 6px 18px rgba(0,0,0,0.12); display: flex; align-items: center; justify-content: center;42  }43  .float-btn svg { width: 56px; height: 56px; }44  .float-like { top: 60px; }45  .float-share { top: 200px; }46 47  /* Thumbnails */48  .thumbs { display: flex; gap: 22px; padding: 28px 0; }49  .thumb {50    width: 160px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;51    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; border-radius: 8px;52  }53  .thumb.active { border: 3px solid #4D74FF; }54  .thumb.dark { background: #6F6F6F; color: #fff; }55 56  /* Title and price */57  .title { font-size: 44px; font-weight: 600; line-height: 1.25; margin: 14px 0 12px; }58  .price { font-size: 56px; font-weight: 700; margin-top: 8px; }59  .badge {60    display: inline-flex; align-items: center; gap: 10px; margin-top: 16px;61    color: #4D74FF; background: #F2F4FF; border: 1px solid #D9DEFF;62    padding: 12px 16px; font-size: 28px; border-radius: 12px;63  }64  .badge svg { width: 30px; height: 30px; fill: #4D74FF; }65 66  .subtext { font-size: 32px; color: #555; margin-top: 18px; }67 68  /* Ratings */69  .ratings { display: flex; align-items: center; gap: 16px; margin-top: 16px; }70  .stars { display: flex; gap: 6px; }71  .stars svg { width: 34px; height: 34px; fill: #25B44A; }72  .rate-count { font-size: 30px; color: #777; }73  .divider { height: 2px; background: #ECECEC; margin: 24px 0; }74 75  /* Offers */76  .offers-row { display: flex; align-items: center; gap: 18px; font-size: 40px; font-weight: 600; }77  .offers-row .ticket { width: 44px; height: 44px; fill: #14A44D; }78 79  /* View similar card */80  .card {81    margin-top: 20px; border-top: 1px solid #ECECEC; border-bottom: 1px solid #ECECEC;82    background: #FAFAFA; padding: 26px 24px; display: flex; align-items: center; gap: 18px; font-size: 34px;83  }84  .card svg { width: 34px; height: 34px; fill: #8A8A8A; }85 86  /* Size section */87  .size-head { display: flex; align-items: center; justify-content: space-between; }88  .size-title { font-size: 42px; font-weight: 600; }89  .size-chart { display: inline-flex; align-items: center; gap: 10px; color: #5C46E6; font-size: 32px; }90  .size-chart svg { width: 34px; height: 34px; fill: #5C46E6; }91  .sizes { display: flex; gap: 26px; margin-top: 26px; flex-wrap: wrap; }92  .size-box {93    width: 160px; height: 100px; border: 2px solid #E0E0E0; border-radius: 14px;94    display: flex; align-items: center; justify-content: center; font-size: 34px; color: #333; background: #fff;95  }96  .size-more {97    width: 220px; height: 100px; border: 2px solid #E0E0E0; border-radius: 14px; color: #4D74FF; background: #F4F6FF;98    font-weight: 600;99  }100 101  /* Bottom bar */102  .bottom-bar {103    position: absolute; bottom: 0; left: 0; width: 100%; height: 180px;104    border-top: 2px solid #E6E6E6; background: #FFFFFF; display: flex; align-items: center; justify-content: center;105    padding: 0 40px; box-sizing: border-box; gap: 30px;106  }107  .btn {108    height: 112px; border-radius: 16px; font-size: 40px; font-weight: 700; padding: 0 60px; cursor: default;109    display: inline-flex; align-items: center; justify-content: center;110  }111  .btn-outline { border: 2px solid #DADADA; background: #fff; color: #3B3B3B; width: 440px; }112  .btn-primary { border: none; background: #5C46E6; color: #fff; width: 480px; box-shadow: 0 4px 12px rgba(92,70,230,0.35); }113 114  /* Home indicator */115  .home-indicator {116    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);117    width: 240px; height: 10px; background: #D8D8D8; border-radius: 6px;118  }119</style>120</head>121<body>122<div id="render-target">123 124  <!-- Status Bar -->125  <div class="status-bar">126    <div class="time">2:15</div>127    <div class="status-icons">128      <!-- Do not disturb icon -->129      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><rect x="6" y="11" width="12" height="2" fill="#E6E6E6"></rect></svg>130      <!-- Sync/refresh icon -->131      <svg viewBox="0 0 24 24"><path d="M6 12a6 6 0 0 1 10.8-3.6l1.7-1.7v6h-6l2.1-2.1A4.5 4.5 0 1 0 7.5 12h-1.5z"></path></svg>132      <!-- Search icon -->133      <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"></circle><rect x="15" y="15" width="7" height="2" transform="rotate(45 15 15)"></rect></svg>134      <!-- Dot -->135      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"></circle></svg>136      <!-- Battery + WiFi + percent -->137      <div class="battery">138        <svg viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" stroke="#555" fill="none" stroke-width="2"></rect><rect x="20" y="9" width="2" height="6" fill="#555"></rect><rect x="4" y="8" width="12" height="8" fill="#555"></rect></svg>139        <svg viewBox="0 0 24 24"><path d="M12 18c-2.5-2.5-6.5-2.5-9 0 3.5-3.5 9.5-3.5 13 0-1-1-2.5-1.5-4-1.5s-3 .5-4 1.5c1-1 2.5-1.5 4-1.5s3 .5 4 1.5z" fill="#555"></path></svg>140        62%141      </div>142    </div>143  </div>144 145  <div class="content">146    <!-- Product hero section -->147    <div class="section hero">148      <div class="img-placeholder">[IMG: Black Nike Running Shoe]</div>149      <div class="float-btn float-like" title="Wishlist">150        <svg viewBox="0 0 24 24"><path d="M12 21c-4.7-3.4-8-6.3-8-10.2 0-2.7 2.2-4.8 4.9-4.8 1.8 0 3.3.9 4.1 2.3.8-1.4 2.3-2.3 4.1-2.3 2.7 0 4.9 2.1 4.9 4.8 0 3.9-3.3 6.8-8 10.2z" fill="#444"></path></svg>151      </div>152      <div class="float-btn float-share" title="Share">153        <svg viewBox="0 0 24 24" fill="#444"><path d="M18 8l-6-6v4H6v4h6v4l6-6z"></path></svg>154      </div>155 156      <!-- Thumbnails -->157      <div class="thumbs">158        <div class="thumb active">[IMG]</div>159        <div class="thumb">[IMG]</div>160        <div class="thumb">[IMG]</div>161        <div class="thumb dark">+ 5</div>162      </div>163 164      <!-- Title -->165      <div class="title">Downshifter 11 Running Shoes For Men (Black)</div>166 167      <!-- Price and delivery -->168      <div class="price">₹3,995</div>169      <div class="badge">170        <!-- Truck icon -->171        <svg viewBox="0 0 24 24"><path d="M3 6h11v8H3zM14 8h4l3 3v3h-7zM5 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path></svg>172        Free Delivery173      </div>174      <div class="subtext">Free Delivery</div>175 176      <!-- Ratings -->177      <div class="ratings">178        <div class="stars">179          <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.4 3 1-6-4.3-4.2 6-.9 2.7-5.5 2.7 5.5 6 .9-4.3 4.2 1 6z"></path></svg>180          <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.4 3 1-6-4.3-4.2 6-.9 2.7-5.5 2.7 5.5 6 .9-4.3 4.2 1 6z"></path></svg>181          <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.4 3 1-6-4.3-4.2 6-.9 2.7-5.5 2.7 5.5 6 .9-4.3 4.2 1 6z"></path></svg>182          <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.4 3 1-6-4.3-4.2 6-.9 2.7-5.5 2.7 5.5 6 .9-4.3 4.2 1 6z"></path></svg>183          <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.4 3 1-6-4.3-4.2 6-.9 2.7-5.5 2.7 5.5 6 .9-4.3 4.2 1 6z"></path></svg>184        </div>185        <div class="rate-count">7,814 ratings & 688 reviews</div>186      </div>187 188      <div class="divider"></div>189 190      <!-- Available offers -->191      <div class="offers-row">192        <svg class="ticket" viewBox="0 0 24 24"><path d="M3 7h18v4a2 2 0 0 0 0 4v4H3v-4a2 2 0 0 0 0-4V7zM8 9h8v6H8z"></path></svg>193        Available offers194      </div>195 196      <!-- View Similar card -->197      <div class="card">198        <svg viewBox="0 0 24 24"><path d="M4 10h4l4-4v12l-4-4H4zM16 10h4v4h-4z"></path></svg>199        View Similar200      </div>201 202      <div class="divider"></div>203 204      <!-- Size section -->205      <div class="size-head">206        <div class="size-title">Size- UK/India</div>207        <div class="size-chart">208          <svg viewBox="0 0 24 24"><path d="M3 17h18v2H3v-2zm0-4h12v2H3v-2zm0-4h8v2H3V9z"></path></svg>209          Size Chart210        </div>211      </div>212 213      <div class="sizes">214        <div class="size-box">6</div>215        <div class="size-box">7</div>216        <div class="size-box">8</div>217        <div class="size-box">9</div>218        <div class="size-box size-more">+3 more</div>219      </div>220    </div>221  </div>222 223  <!-- Bottom action bar -->224  <div class="bottom-bar">225    <div class="btn btn-outline">Add to cart</div>226    <div class="btn btn-primary">Buy Now</div>227  </div>228 229  <div class="home-indicator"></div>230</div>231</body>232</html>