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 - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff; border-radius: 24px;13    box-shadow: 0 10px 30px rgba(0,0,0,0.08);14    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;15    color: #212121;16  }17  .header {18    position: relative;19    padding: 24px 36px 16px 36px;20  }21  .icon-btn {22    width: 72px; height: 72px; border: none; background: transparent; padding: 0; cursor: default;23  }24  .header-row {25    display: grid;26    grid-template-columns: 72px 1fr 72px;27    align-items: center;28    column-gap: 24px;29  }30  .search-bar {31    height: 88px;32    background: #F1F3F4;33    border: 1px solid #E0E0E0;34    border-radius: 20px;35    display: grid;36    grid-template-columns: 80px 1fr 80px;37    align-items: center;38    color: #757575;39  }40  .search-placeholder {41    font-size: 34px;42  }43  .search-icon, .mic-icon, .cart-icon svg, .back-icon svg { display: block; margin: 0 auto; }44  .right-rail {45    position: absolute;46    right: 36px;47    top: 380px;48    display: flex;49    flex-direction: column;50    gap: 36px;51  }52  .rail-btn {53    width: 84px; height: 84px;54    border-radius: 42px;55    border: 1px solid #E0E0E0;56    background: #fff;57    display: flex; align-items: center; justify-content: center;58  }59 60  .product-image {61    width: 960px; height: 600px;62    margin: 24px auto 24px auto;63    background: #E0E0E0;64    border: 1px solid #BDBDBD;65    border-radius: 16px;66    display: flex; align-items: center; justify-content: center;67    color: #616161; font-size: 36px; letter-spacing: 0.2px;68  }69 70  .pager-dots {71    display: flex; gap: 20px; justify-content: center; align-items: center;72    margin: 16px 0 28px 0;73  }74  .dot { width: 18px; height: 18px; border-radius: 9px; background: #BDBDBD; }75  .dot.active { background: #616161; }76 77  .content { padding: 0 36px; }78  .link { color: #1E6DFB; font-size: 40px; font-weight: 700; margin-bottom: 16px; }79  .title { font-size: 40px; line-height: 1.4; margin-top: 10px; }80  .title strong { font-weight: 800; }81 82  .rating-row {83    display: flex; align-items: center; gap: 18px; margin-top: 18px;84    font-size: 34px;85  }86  .stars { display: flex; gap: 10px; }87  .star svg { display: block; }88  .rating-text { color: #1A73E8; font-weight: 700; }89  .dot-sep { color: #9E9E9E; }90  .assured {91    display: inline-flex; align-items: center; gap: 10px;92    border: 1px solid #E0E0E0; padding: 8px 16px; border-radius: 20px;93    font-size: 30px; color: #616161;94  }95 96  .deal-tag {97    display: inline-block; background: #7E57C2; color: #fff;98    font-size: 34px; font-weight: 700; padding: 16px 24px; border-radius: 12px;99    margin-top: 36px; margin-bottom: 18px;100  }101 102  .price-row {103    display: flex; align-items: baseline; gap: 24px;104    font-size: 46px; margin: 8px 0 36px 0;105  }106  .off { color: #1F8B2E; font-weight: 800; }107  .strike { color: #9E9E9E; text-decoration: line-through; font-weight: 700; }108  .new-price { font-weight: 900; font-size: 60px; }109 110  .fab-brand {111    position: absolute; right: 36px; top: 1480px;112    width: 120px; height: 120px; border-radius: 60px;113    background: radial-gradient(circle at 30% 30%, #69B8FF, #2E6BFF);114    box-shadow: 0 8px 24px rgba(0,0,0,0.18);115    display: flex; align-items: center; justify-content: center;116    color: #fff; font-weight: 900; font-size: 56px;117  }118 119  .cta {120    position: absolute; left: 36px; right: 36px; bottom: 160px;121    display: grid; grid-template-columns: 220px 1fr 360px;122    gap: 24px;123  }124  .cta .box {125    height: 140px; border-radius: 20px; display: flex;126    align-items: center; justify-content: center; font-size: 40px;127    font-weight: 700;128    border: 1px solid #E0E0E0; background: #fff; color: #212121;129  }130  .cta .primary {131    background: #FFC107; border: none; color: #212121;132  }133  .cta .box .label { margin-left: 20px; }134  .cart-plus { display: flex; align-items: center; gap: 14px; }135 136  /* subtle system gesture bar */137  .gesture {138    position: absolute; left: 420px; right: 420px; bottom: 80px;139    height: 10px; background: #000; border-radius: 5px; opacity: 0.25;140  }141</style>142</head>143<body>144<div id="render-target">145 146  <div class="header">147    <div class="header-row">148      <button class="icon-btn back-icon">149        <svg width="56" height="56" viewBox="0 0 56 56">150          <polyline points="34,10 18,28 34,46" fill="none" stroke="#212121" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"></polyline>151        </svg>152      </button>153 154      <div class="search-bar">155        <div class="search-icon">156          <svg width="44" height="44" viewBox="0 0 24 24">157            <circle cx="10" cy="10" r="7" stroke="#616161" stroke-width="2" fill="none"></circle>158            <line x1="15.5" y1="15.5" x2="21" y2="21" stroke="#616161" stroke-width="2" stroke-linecap="round"></line>159          </svg>160        </div>161        <div class="search-placeholder">Search for products</div>162        <div class="mic-icon">163          <svg width="44" height="44" viewBox="0 0 24 24">164            <rect x="9" y="4" width="6" height="10" rx="3" fill="#616161"></rect>165            <path d="M5 11c0 4 3 6 7 6s7-2 7-6" stroke="#616161" stroke-width="2" fill="none" stroke-linecap="round"></path>166            <line x1="12" y1="17" x2="12" y2="21" stroke="#616161" stroke-width="2" stroke-linecap="round"></line>167            <line x1="8" y1="21" x2="16" y2="21" stroke="#616161" stroke-width="2" stroke-linecap="round"></line>168          </svg>169        </div>170      </div>171 172      <button class="icon-btn cart-icon">173        <svg width="56" height="56" viewBox="0 0 24 24">174          <circle cx="9" cy="20" r="2" fill="#212121"></circle>175          <circle cx="18" cy="20" r="2" fill="#212121"></circle>176          <path d="M3 5h3l2 10h10l2-7H9" stroke="#212121" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>177        </svg>178      </button>179    </div>180  </div>181 182  <div class="right-rail">183    <div class="rail-btn">184      <svg width="40" height="40" viewBox="0 0 24 24">185        <path d="M12 21s-7-4.6-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.4-7 10-7 10z" fill="none" stroke="#616161" stroke-width="2"></path>186      </svg>187    </div>188    <div class="rail-btn">189      <svg width="40" height="40" viewBox="0 0 24 24">190        <path d="M14 9l7-7v7h-7z" fill="none" stroke="#616161" stroke-width="2" stroke-linejoin="round"></path>191        <path d="M21 11v9H3V4h9" fill="none" stroke="#616161" stroke-width="2"></path>192      </svg>193    </div>194  </div>195 196  <div class="product-image">197    [IMG: Nike Running Shoe - side view]198  </div>199 200  <div class="pager-dots">201    <div class="dot active"></div>202    <div class="dot"></div>203    <div class="dot"></div>204    <div class="dot"></div>205  </div>206 207  <div class="content">208    <div class="link">View more from NIKE</div>209 210    <div class="title">211      <strong>NIKE</strong> Revolution 5 Running Shoes For Women (Multicolor)212    </div>213 214    <div class="rating-row">215      <div class="stars">216        <div class="star">217          <svg width="40" height="40" viewBox="0 0 24 24">218            <polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9" fill="#1F8B2E"></polygon>219          </svg>220        </div>221        <div class="star">222          <svg width="40" height="40" viewBox="0 0 24 24">223            <polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9" fill="#1F8B2E"></polygon>224          </svg>225        </div>226        <div class="star">227          <svg width="40" height="40" viewBox="0 0 24 24">228            <polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9" fill="#1F8B2E"></polygon>229          </svg>230        </div>231        <div class="star">232          <svg width="40" height="40" viewBox="0 0 24 24">233            <polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9" fill="#1F8B2E"></polygon>234          </svg>235        </div>236        <div class="star">237          <svg width="40" height="40" viewBox="0 0 24 24">238            <polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9" fill="#BDBDBD"></polygon>239          </svg>240        </div>241      </div>242      <div class="rating-text">Very Good</div>243      <div class="dot-sep">•</div>244      <div style="color:#1A73E8;">49 ratings</div>245      <div class="assured">246        <svg width="26" height="26" viewBox="0 0 24 24">247          <polygon points="12,2 15,9 22,9 17,13 19,20 12,16 5,20 7,13 2,9 9,9" fill="#FFC107"></polygon>248        </svg>249        Plus F-Assured250      </div>251    </div>252 253    <div class="deal-tag">Big Saving Deal</div>254 255    <div class="price-row">256      <div class="off">30% off</div>257      <div class="strike">₹3,695</div>258      <div class="new-price">₹2,586</div>259    </div>260  </div>261 262  <div class="fab-brand">F</div>263 264  <div class="cta">265    <div class="box cart-plus">266      <svg width="46" height="46" viewBox="0 0 24 24">267        <circle cx="9" cy="20" r="2" fill="#212121"></circle>268        <circle cx="18" cy="20" r="2" fill="#212121"></circle>269        <path d="M3 5h3l2 10h10l2-7H9" stroke="#212121" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>270        <line x1="20" y1="6" x2="20" y2="12" stroke="#212121" stroke-width="2"></line>271        <line x1="17" y1="9" x2="23" y2="9" stroke="#212121" stroke-width="2"></line>272      </svg>273      <span class="label">Add</span>274    </div>275    <div class="box">Pay with EMI</div>276    <div class="box primary">Buy now</div>277  </div>278 279  <div class="gesture"></div>280</div>281</body>282</html>