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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1a1a1a; }9  #render-target { width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #ffffff; }10 11  /* Header */12  .header {13    height: 140px;14    padding: 20px 40px;15    display: flex;16    align-items: center;17    justify-content: space-between;18  }19  .header .left, .header .right { display: flex; align-items: center; gap: 36px; }20  .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }21  .divider { height: 1px; background: #e6e6e6; margin: 0 40px; }22 23  /* Shop in store row */24  .shop-row {25    padding: 28px 40px;26    display: flex; align-items: center; justify-content: space-between;27    border-bottom: 1px solid #efefef;28  }29  .shop-left { display: flex; align-items: center; gap: 24px; }30  .store-icon-box {31    width: 88px; height: 88px; background: #f4f4f4; border: 1px solid #d0d0d0;32    display: flex; align-items: center; justify-content: center; border-radius: 10px;33  }34  .shop-text .title { font-weight: 700; font-size: 42px; }35  .shop-text .sub { font-size: 30px; color: #6f6f6f; margin-top: 6px; }36 37  /* Section title */38  .section-title {39    font-size: 48px; font-weight: 700; margin: 36px 40px 8px 40px;40  }41 42  /* Product grid */43  .product-row {44    display: grid;45    grid-template-columns: 1fr 1fr;46    gap: 48px;47    padding: 16px 40px 0 40px;48  }49  .product-card { position: relative; padding-top: 10px; }50  .wish {51    position: absolute; top: -6px; right: 24px;52    width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;53  }54  .img-box {55    width: 460px; height: 460px; background: #E0E0E0; border: 1px solid #BDBDBD;56    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; border-radius: 8px;57  }58  .info { margin-top: 26px; }59  .name { font-size: 36px; font-weight: 800; letter-spacing: 0.5px; }60  .subtext { font-size: 32px; color: #6f6f6f; margin-top: 8px; }61  .price { font-size: 52px; font-weight: 800; margin-top: 18px; }62  .price-tag span {63    background: #FFD54F; padding: 10px 16px; border-radius: 8px; display: inline-block;64    font-size: 52px; font-weight: 800; color: #1a1a1a;65  }66  .red-underline { height: 6px; width: 160px; background: #D32F2F; margin-top: 8px; border-radius: 3px; }67 68  /* Floating add icons under products */69  .add-actions {70    display: grid; grid-template-columns: 1fr 1fr; gap: 48px;71    padding: 24px 40px;72  }73  .circle-add {74    width: 128px; height: 128px; background: #1e57a8; border-radius: 50%;75    display: flex; align-items: center; justify-content: center; margin: 0 auto;76    box-shadow: 0 6px 10px rgba(0,0,0,0.15);77  }78 79  /* Progress line */80  .progress-line {81    margin: 36px 40px 24px 40px;82    height: 1px; background: #eeeeee; position: relative;83  }84  .progress-line .segment {85    position: absolute; left: 0; top: -1px;86    height: 3px; width: 120px; background: #1a1a1a; border-radius: 2px;87  }88 89  /* CTA */90  .cta { padding: 8px 40px; }91  .cta-btn {92    width: 100%; height: 140px; background: #235aa3; color: #ffffff; font-size: 44px; font-weight: 700;93    border: none; border-radius: 80px; cursor: pointer;94    box-shadow: 0 6px 12px rgba(0,0,0,0.15);95  }96 97  /* Bottom nav */98  .bottom-nav {99    position: absolute; left: 0; bottom: 94px; width: 100%; height: 170px; background: #ffffff;100    border-top: 1px solid #e9e9e9; display: flex; align-items: center; justify-content: space-around;101  }102  .nav-item { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; }103  .nav-icon { stroke: #9e9e9e; }104  .nav-item.active .nav-icon { stroke: #000000; }105 106  /* Gesture bar */107  .gesture {108    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);109    width: 360px; height: 10px; background: #000; border-radius: 6px;110  }111</style>112</head>113<body>114<div id="render-target">115 116  <!-- Header with back, share and favorite -->117  <div class="header">118    <div class="left">119      <div class="icon-btn">120        <svg width="56" height="56" viewBox="0 0 24 24">121          <path d="M15 19L8 12l7-7" stroke="#000" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>122        </svg>123      </div>124    </div>125    <div class="right">126      <div class="icon-btn">127        <!-- Share icon (nodes) -->128        <svg width="56" height="56" viewBox="0 0 24 24">129          <circle cx="6" cy="12" r="2" fill="#000"></circle>130          <circle cx="18" cy="6" r="2" fill="#000"></circle>131          <circle cx="18" cy="18" r="2" fill="#000"></circle>132          <path d="M8 12l8-6M8 12l8 6" stroke="#000" stroke-width="2" fill="none"></path>133        </svg>134      </div>135      <div class="icon-btn">136        <!-- Heart outline -->137        <svg width="56" height="56" viewBox="0 0 24 24">138          <path d="M12 21s-8-6-8-11a5 5 0 0 1 8-3 5 5 0 0 1 8 3c0 5-8 11-8 11z" fill="none" stroke="#000" stroke-width="2"></path>139        </svg>140      </div>141    </div>142  </div>143  <div class="divider"></div>144 145  <!-- Shop in store row -->146  <div class="shop-row">147    <div class="shop-left">148      <div class="store-icon-box">149        <svg width="48" height="48" viewBox="0 0 24 24">150          <rect x="3" y="8" width="18" height="12" fill="none" stroke="#777" stroke-width="1.8"></rect>151          <path d="M3 8l3-4h12l3 4" fill="none" stroke="#777" stroke-width="1.8"></path>152          <rect x="7" y="12" width="5" height="8" fill="none" stroke="#777" stroke-width="1.5"></rect>153        </svg>154      </div>155      <div class="shop-text">156        <div class="title">Shop in store</div>157        <div class="sub">Check availability</div>158      </div>159    </div>160    <div class="icon-btn">161      <svg width="56" height="56" viewBox="0 0 24 24">162        <path d="M9 6l6 6-6 6" stroke="#000" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>163      </svg>164    </div>165  </div>166 167  <!-- Section: More like this -->168  <div class="section-title">More like this</div>169 170  <div class="product-row">171    <!-- Product 1 -->172    <div class="product-card">173      <div class="wish">174        <svg width="56" height="56" viewBox="0 0 24 24">175          <path d="M12 21s-8-6-8-11a5 5 0 0 1 8-3 5 5 0 0 1 8 3c0 5-8 11-8 11z" fill="none" stroke="#b0b0b0" stroke-width="2"></path>176        </svg>177      </div>178      <div class="img-box">[IMG: Padlock product]</div>179      <div class="info">180        <div class="name">ELLOVEN</div>181        <div class="subtext">padlock, grey</div>182        <div class="price">Rs. 199</div>183      </div>184    </div>185 186    <!-- Product 2 -->187    <div class="product-card">188      <div class="wish">189        <svg width="56" height="56" viewBox="0 0 24 24">190          <path d="M12 21s-8-6-8-11a5 5 0 0 1 8-3 5 5 0 0 1 8 3c0 5-8 11-8 11z" fill="none" stroke="#b0b0b0" stroke-width="2"></path>191        </svg>192      </div>193      <div class="img-box">[IMG: Holder for mobile phone, grey]</div>194      <div class="info">195        <div class="name">YUPPIENALLE</div>196        <div class="subtext">holder for mobile phone, grey</div>197        <div class="price price-tag"><span>Rs. 49</span></div>198        <div class="red-underline"></div>199      </div>200    </div>201  </div>202 203  <!-- Floating add buttons -->204  <div class="add-actions">205    <div class="circle-add">206      <svg width="76" height="76" viewBox="0 0 24 24">207        <path d="M3 9h18l-2 10H5L3 9z" fill="none" stroke="#fff" stroke-width="2"></path>208        <path d="M9 9l3-5 3 5" stroke="#fff" stroke-width="2" fill="none"></path>209        <path d="M12 13v4M10 15h4" stroke="#fff" stroke-width="2"></path>210      </svg>211    </div>212    <div class="circle-add">213      <svg width="76" height="76" viewBox="0 0 24 24">214        <path d="M3 9h18l-2 10H5L3 9z" fill="none" stroke="#fff" stroke-width="2"></path>215        <path d="M9 9l3-5 3 5" stroke="#fff" stroke-width="2" fill="none"></path>216        <path d="M12 13v4M10 15h4" stroke="#fff" stroke-width="2"></path>217      </svg>218    </div>219  </div>220 221  <!-- Progress line -->222  <div class="progress-line"><div class="segment"></div></div>223 224  <!-- CTA -->225  <div class="cta">226    <button class="cta-btn">Add to bag Rs. 199</button>227  </div>228 229  <!-- Bottom Navigation -->230  <div class="bottom-nav">231    <div class="nav-item active">232      <svg width="64" height="64" viewBox="0 0 24 24" class="nav-icon">233        <path d="M3 11l9-7 9 7v9H5v-9" fill="none" stroke-width="2"></path>234      </svg>235    </div>236    <div class="nav-item">237      <svg width="64" height="64" viewBox="0 0 24 24" class="nav-icon">238        <circle cx="11" cy="11" r="6" fill="none" stroke-width="2"></circle>239        <path d="M20 20l-3.5-3.5" stroke-width="2"></path>240      </svg>241    </div>242    <div class="nav-item">243      <svg width="64" height="64" viewBox="0 0 24 24" class="nav-icon">244        <circle cx="12" cy="8" r="4" fill="none" stroke-width="2"></circle>245        <path d="M4 21c0-4 4-7 8-7s8 3 8 7" fill="none" stroke-width="2"></path>246      </svg>247    </div>248    <div class="nav-item">249      <svg width="64" height="64" viewBox="0 0 24 24" class="nav-icon">250        <path d="M12 21s-8-6-8-11a5 5 0 0 1 8-3 5 5 0 0 1 8 3c0 5-8 11-8 11z" fill="none" stroke-width="2"></path>251      </svg>252    </div>253    <div class="nav-item">254      <svg width="64" height="64" viewBox="0 0 24 24" class="nav-icon">255        <path d="M6 8l2-4h8l2 4v12H6V8z" fill="none" stroke-width="2"></path>256        <path d="M10 12h4" stroke-width="2"></path>257      </svg>258    </div>259  </div>260 261  <!-- Gesture bar -->262  <div class="gesture"></div>263 264</div>265</body>266</html>