GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Detail - Panko Bread Crumbs</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Status bar */17  .statusbar {18    position: absolute;19    top: 0; left: 0;20    width: 100%;21    height: 140px;22    background: #000;23    color: #fff;24  }25  .status-content {26    position: absolute;27    left: 40px; right: 40px; top: 40px;28    display: flex; justify-content: space-between; align-items: center;29    font-size: 46px; letter-spacing: 0.5px;30  }31  .status-right { display: flex; gap: 28px; align-items: center; }32 33  /* Back button */34  .back-btn {35    position: absolute;36    top: 170px; left: 40px;37    width: 72px; height: 72px;38    display: flex; align-items: center; justify-content: center;39  }40  .back-btn svg { width: 48px; height: 48px; stroke: #e66a00; stroke-width: 8; fill: none; }41 42  /* Product card */43  .product-card {44    position: absolute;45    top: 180px; left: 90px;46    width: 900px; height: 1080px;47    background: #f9f9f9;48    border-radius: 28px;49    box-shadow: 0 12px 24px rgba(0,0,0,0.12);50  }51  .card-inner {52    position: absolute;53    top: 40px; left: 40px; right: 40px; bottom: 40px;54    border-radius: 20px;55  }56  .share-btn {57    position: absolute;58    top: 30px; right: 30px;59    width: 60px; height: 60px;60    display: flex; align-items: center; justify-content: center;61  }62  .share-btn svg { width: 40px; height: 40px; stroke: #e66a00; stroke-width: 8; fill: none; }63  .img-placeholder {64    position: absolute;65    top: 120px; left: 80px; right: 80px; bottom: 80px;66    background: #E0E0E0;67    border: 1px solid #BDBDBD;68    display: flex; align-items: center; justify-content: center;69    color: #757575; font-size: 40px; text-align: center;70  }71 72  /* Pager indicator */73  .pager-indicator {74    position: absolute;75    top: 1280px; left: 0; right: 0;76    height: 14px;77    display: flex; justify-content: center;78  }79  .pager-dot {80    width: 88px; height: 12px; background: #e66a00; border-radius: 8px;81    opacity: 0.9;82  }83 84  /* Details section */85  .details {86    position: absolute;87    left: 60px; right: 60px; top: 1400px;88  }89  .title {90    font-size: 64px; line-height: 72px; color: #1f4b3a; font-weight: 700; margin: 0 0 24px 0;91  }92  .price-row {93    display: flex; align-items: center; justify-content: space-between;94    margin-top: 8px;95  }96  .price {97    font-size: 56px; font-weight: 800; color: #1f4b3a;98  }99  .veg-icon {100    width: 64px; height: 64px; border: 4px solid #95d35f; border-radius: 10px;101    position: relative;102    margin-right: 10px;103  }104  .veg-icon::after {105    content: "";106    position: absolute;107    width: 26px; height: 26px; border-radius: 50%;108    background: #55b947;109    top: 50%; left: 50%; transform: translate(-50%, -50%);110  }111  .divider {112    height: 2px; background: #e5e5e5; margin: 40px 0;113  }114 115  .row {116    display: flex; align-items: center; justify-content: space-between;117  }118  .label {119    font-size: 44px; color: #333; font-weight: 600;120  }121  .pill {122    padding: 20px 28px; border: 3px solid #e66a00; border-radius: 40px;123    color: #e66a00; font-size: 36px; font-weight: 700;124  }125  .section-title {126    font-size: 44px; color: #333; font-weight: 700;127  }128 129  /* Add to cart sheet */130  .add-sheet {131    position: absolute;132    left: 0; right: 0; bottom: 220px;133    padding: 20px 26px;134  }135  .sheet {136    background: #fff;137    border-radius: 28px;138    box-shadow: 0 10px 18px rgba(0,0,0,0.15);139    padding: 24px;140    border: 1px solid #eee;141  }142  .add-btn {143    width: 100%; height: 120px; background: #e66a00; color: #fff;144    border: none; border-radius: 20px; font-size: 44px; font-weight: 700; cursor: pointer;145  }146 147  /* Bottom navigation */148  .bottom-nav {149    position: absolute;150    left: 0; right: 0; bottom: 0;151    height: 220px; background: #fff; border-top: 2px solid #e6e6e6;152  }153  .nav-items {154    height: 100%;155    display: grid; grid-template-columns: repeat(5, 1fr);156    align-items: center; text-align: center;157  }158  .nav-item { color: #999; font-size: 32px; }159  .nav-item svg { width: 64px; height: 64px; stroke: #9e9e9e; stroke-width: 6; fill: none; }160  .nav-item.active { color: #e66a00; }161  .nav-item.active svg { stroke: #e66a00; }162 163</style>164</head>165<body>166<div id="render-target">167 168  <!-- Status bar -->169  <div class="statusbar">170    <div class="status-content">171      <div style="display:flex; align-items:center; gap:20px;">172        <span>7:50</span>173        <!-- simple cloud icon -->174        <svg viewBox="0 0 64 64" width="44" height="44" fill="#fff">175          <path d="M20 40h22a12 12 0 0 0 0-24c-2 0-4 1-6 2a14 14 0 0 0-26 8 10 10 0 0 0 10 14z"></path>176        </svg>177      </div>178      <div class="status-right">179        <!-- wifi -->180        <svg viewBox="0 0 64 64" width="44" height="44" fill="#fff">181          <path d="M32 50a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm-18-18c10-10 26-10 36 0l4-4c-12-12-32-12-44 0l4 4zm6-6c7-7 19-7 26 0l4-4c-9-9-25-9-34 0l4 4z"></path>182        </svg>183        <!-- battery -->184        <svg viewBox="0 0 80 64" width="60" height="44" fill="#fff">185          <rect x="6" y="14" width="56" height="36" rx="6"></rect>186          <rect x="66" y="22" width="8" height="20" rx="2"></rect>187          <rect x="12" y="20" width="42" height="24" fill="#000"></rect>188        </svg>189      </div>190    </div>191  </div>192 193  <!-- Back button -->194  <div class="back-btn">195    <svg viewBox="0 0 72 72">196      <path d="M48 12 L24 36 L48 60"></path>197    </svg>198  </div>199 200  <!-- Product card -->201  <div class="product-card">202    <div class="share-btn">203      <svg viewBox="0 0 64 64">204        <circle cx="16" cy="32" r="6"></circle>205        <circle cx="44" cy="18" r="6"></circle>206        <circle cx="44" cy="46" r="6"></circle>207        <path d="M20 30 L38 22 M20 34 L38 42"></path>208      </svg>209    </div>210    <div class="card-inner">211      <div class="img-placeholder">[IMG: Panko Bread Crumbs Pack]</div>212    </div>213  </div>214 215  <!-- Pager indicator -->216  <div class="pager-indicator"><div class="pager-dot"></div></div>217 218  <!-- Details -->219  <div class="details">220    <h1 class="title">Panko Bread Crumbs</h1>221 222    <div class="price-row">223      <div class="price">₹ 400</div>224      <div class="veg-icon"></div>225    </div>226 227    <div class="divider"></div>228 229    <div class="row">230      <div class="label">Pack Size</div>231      <div class="pill">1KG</div>232    </div>233 234    <div class="divider"></div>235 236    <div class="section-title">Product details</div>237  </div>238 239  <!-- Add to cart sheet -->240  <div class="add-sheet">241    <div class="sheet">242      <button class="add-btn">Add to cart</button>243    </div>244  </div>245 246  <!-- Bottom navigation -->247  <div class="bottom-nav">248    <div class="nav-items">249      <div class="nav-item active">250        <div>251          <svg viewBox="0 0 64 64">252            <path d="M12 28 L32 12 L52 28"></path>253            <rect x="18" y="28" width="28" height="24" rx="4"></rect>254          </svg>255        </div>256        <div>Home</div>257      </div>258      <div class="nav-item">259        <div>260          <svg viewBox="0 0 64 64">261            <circle cx="28" cy="28" r="16"></circle>262            <path d="M40 40 L54 54"></path>263          </svg>264        </div>265        <div>Search</div>266      </div>267      <div class="nav-item">268        <div>269          <svg viewBox="0 0 64 64">270            <rect x="10" y="18" width="44" height="28" rx="6"></rect>271            <circle cx="20" cy="32" r="2"></circle>272            <circle cx="44" cy="32" r="2"></circle>273          </svg>274        </div>275        <div>Offers</div>276      </div>277      <div class="nav-item">278        <div>279          <svg viewBox="0 0 64 64">280            <rect x="14" y="20" width="36" height="26" rx="4"></rect>281            <path d="M22 20 L22 12 M42 20 L42 12"></path>282            <circle cx="22" cy="50" r="4"></circle>283            <circle cx="42" cy="50" r="4"></circle>284          </svg>285        </div>286        <div>Cart</div>287      </div>288      <div class="nav-item">289        <div>290          <svg viewBox="0 0 64 64">291            <circle cx="32" cy="24" r="10"></circle>292            <path d="M14 54 C14 40 50 40 50 54"></path>293          </svg>294        </div>295        <div>Account</div>296      </div>297    </div>298  </div>299 300</div>301</body>302</html>