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; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif; color: #212121; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #ffffff; border-radius: 28px; box-shadow: 0 6px 24px rgba(0,0,0,0.15);12  }13 14  /* Top status bar */15  .statusbar {16    height: 120px; background: #202020; color: #fff;17    display: flex; align-items: center; padding: 0 40px; font-size: 38px;18  }19  .status-icons { margin-left: auto; display: flex; align-items: center; gap: 28px; }20  .status-dot { width: 18px; height: 18px; border-radius: 50%; background: #fff; opacity: 0.9; }21  .status-geo { width: 40px; height: 40px; border: 2px solid #fff; border-radius: 50%; }22  .status-battery { width: 60px; height: 36px; border: 3px solid #fff; border-radius: 8px; position: relative; }23  .status-battery::after { content: ""; position: absolute; right: -10px; top: 10px; width: 8px; height: 16px; background: #fff; border-radius: 2px; }24  .status-battery-fill { position: absolute; left: 4px; top: 4px; bottom: 4px; right: 14px; background: #4caf50; border-radius: 4px; }25 26  /* Promo banner */27  .promo {28    height: 130px; background: #a9d6ea;29    display: flex; align-items: center; padding: 0 32px; color: #0a2940; font-size: 36px; gap: 26px;30    border-bottom: 1px solid rgba(0,0,0,0.08);31  }32  .promo .chev {33    width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.12);34    display: flex; align-items: center; justify-content: center;35  }36  .promo a { color: #0077cc; text-decoration: none; margin-left: 12px; font-weight: 600; }37 38  /* App bar */39  .appbar {40    height: 140px; background: #c62828; color: #fff; display: flex; align-items: center;41    padding: 0 32px; gap: 22px; position: relative;42  }43  .appbar .title {44    font-size: 42px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;45    flex: 1;46  }47  .icon-btn {48    width: 84px; height: 84px; border-radius: 16px; border: 2px solid rgba(255,255,255,0.85);49    display: flex; align-items: center; justify-content: center;50    background: transparent;51  }52  .back-btn {53    width: 90px; height: 90px; border-radius: 50%; display: flex; align-items: center; justify-content: center;54    border: none; background: transparent;55  }56  .cart-badge {57    position: absolute; right: 36px; top: 16px; background: #fff; color: #c62828; border-radius: 24px;58    width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 28px; box-shadow: 0 2px 4px rgba(0,0,0,0.15);59  }60 61  /* Product hero */62  .hero {63    position: relative; background: #ffffff; padding: 40px 40px 30px;64  }65  .product-img {66    width: 100%; height: 900px; background: #E0E0E0; border: 1px solid #BDBDBD;67    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 40px; border-radius: 18px;68  }69  .floating-actions {70    position: absolute; right: 32px; top: 80px; display: flex; flex-direction: column; gap: 22px;71  }72  .circle-action {73    width: 130px; height: 130px; border-radius: 50%; background: #ffffff; box-shadow: 0 8px 22px rgba(0,0,0,0.18);74    display: flex; align-items: center; justify-content: center;75  }76 77  /* Carousel indicator */78  .pager {79    height: 110px; background: #efefef; display: flex; align-items: center; justify-content: center; gap: 16px;80  }81  .dot-red { width: 160px; height: 36px; background: #c84a4a; border-radius: 18px; }82  .dot-gray { width: 36px; height: 36px; background: #cfcfcf; border-radius: 18px; }83 84  /* Details */85  .details {86    padding: 40px 40px 20px; border-top: 1px solid #ddd;87  }88  .brand { color: #b89b4d; font-size: 36px; font-weight: 700; margin-bottom: 18px; }89  .prod-title { font-size: 52px; font-weight: 800; line-height: 1.18; margin: 0 0 20px; }90  .meta { color: #616161; font-size: 34px; margin-bottom: 22px; }91  .ratings { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }92  .reviews { color: #757575; font-size: 34px; }93  .price-line { font-size: 40px; font-weight: 800; margin-bottom: 12px; }94  .tax-note { color: #757575; font-size: 32px; margin-bottom: 20px; }95  .stock {96    display: inline-block; background: #4caf50; color: #fff; font-weight: 700; font-size: 34px;97    padding: 16px 28px; border-radius: 10px;98  }99 100  .section-title {101    margin-top: 36px; font-size: 40px; font-weight: 700; border-top: 1px solid #eee; padding-top: 26px;102  }103 104  /* Sticky View Bag */105  .viewbag-wrap {106    position: absolute; left: 0; right: 0; bottom: 160px; display: flex; justify-content: center; pointer-events: none;107  }108  .viewbag {109    width: 960px; height: 120px; border-radius: 60px; background: #ffffff; border: 10px solid #c62828;110    display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 44px; font-weight: 800; color: #212121;111    box-shadow: 0 10px 18px rgba(198,40,40,0.25); pointer-events: auto;112  }113 114  /* Simple bottom gesture indicator */115  .gesture {116    position: absolute; left: 50%; transform: translateX(-50%);117    bottom: 40px; width: 300px; height: 14px; background: #000; border-radius: 7px; opacity: 0.2;118  }119 120  /* Utility */121  .svg-white path, .svg-white circle, .svg-white rect { stroke: #fff; fill: none; }122  .svg-white-fill path, .svg-white-fill circle, .svg-white-fill rect { fill: #fff; }123  .svg-red-stroke path { stroke: #c62828; }124</style>125</head>126<body>127<div id="render-target">128 129  <!-- Status bar -->130  <div class="statusbar">131    <div>1:59</div>132    <div class="status-icons">133      <div class="status-dot"></div>134      <div class="status-dot"></div>135      <div class="status-dot"></div>136      <div class="status-geo"></div>137      <div class="status-battery"><div class="status-battery-fill"></div></div>138    </div>139  </div>140 141  <!-- Promo banner -->142  <div class="promo">143    <div class="chev">144      <svg width="28" height="28" viewBox="0 0 24 24"><path d="M15 6 L9 12 L15 18" stroke="#0a2940" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>145    </div>146    <div>Use code NEW10 and get addn. 10% off on cart value Rs. 2099 and above!!</div>147    <a href="#">SHOP NOW</a>148    <div class="chev">149      <svg width="28" height="28" viewBox="0 0 24 24"><path d="M9 6 L15 12 L9 18" stroke="#0a2940" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>150    </div>151  </div>152 153  <!-- App bar -->154  <div class="appbar">155    <button class="back-btn" aria-label="Back">156      <svg width="48" height="48" viewBox="0 0 24 24">157        <path d="M15 6 L9 12 L15 18" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>158      </svg>159    </button>160    <div class="title">Marvel Captain America Toy On Bag Plush Accessories for Kids a...</div>161    <div class="icon-btn" aria-label="Search">162      <svg width="44" height="44" viewBox="0 0 24 24">163        <circle cx="11" cy="11" r="6" stroke="#fff" stroke-width="2" fill="none"/>164        <path d="M20 20 L16 16" stroke="#fff" stroke-width="2" />165      </svg>166    </div>167    <div class="icon-btn" aria-label="Wishlist">168      <svg width="44" height="44" viewBox="0 0 24 24">169        <path d="M12 20 C10 18,4 14,4 9 C4 6.5,6 5,8 5 C9.5 5,11 6,12 7 C13 6,14.5 5,16 5 C18 5,20 6.5,20 9 C20 14,14 18,12 20 Z" stroke="#fff" stroke-width="2" fill="none"/>170      </svg>171    </div>172    <div class="icon-btn" aria-label="Cart">173      <svg width="44" height="44" viewBox="0 0 24 24">174        <rect x="6" y="8" width="12" height="10" rx="2" stroke="#fff" stroke-width="2" fill="none"/>175        <path d="M8 8 C8 6,10 5,12 5 C14 5,16 6,16 8" stroke="#fff" stroke-width="2" fill="none"/>176      </svg>177    </div>178    <div class="cart-badge">1</div>179  </div>180 181  <!-- Product hero -->182  <div class="hero">183    <div class="floating-actions">184      <div class="circle-action" aria-label="Share">185        <svg width="64" height="64" viewBox="0 0 24 24">186          <circle cx="6" cy="12" r="2.5" fill="#212121"/>187          <circle cx="18" cy="6" r="2.5" fill="#212121"/>188          <circle cx="18" cy="18" r="2.5" fill="#212121"/>189          <path d="M8.5 11 L15.2 7.3" stroke="#212121" stroke-width="2"/>190          <path d="M8.5 13 L15.2 16.7" stroke="#212121" stroke-width="2"/>191        </svg>192      </div>193      <div class="circle-action" aria-label="Like">194        <svg width="64" height="64" viewBox="0 0 24 24">195          <circle cx="12" cy="12" r="11" fill="#fff" stroke="#111" stroke-width="2"/>196          <path d="M12 18 C10.5 16.7,6 14,6 9.5 C6 7.5,7.5 6.5,9 6.5 C10.2 6.5,11.3 7.2,12 8.1 C12.7 7.2,13.8 6.5,15 6.5 C16.5 6.5,18 7.5,18 9.5 C18 14,13.5 16.7,12 18 Z" fill="#000"/>197        </svg>198      </div>199    </div>200    <div class="product-img">[IMG: Captain America plush on bag]</div>201  </div>202 203  <!-- Pager -->204  <div class="pager">205    <div class="dot-red"></div>206    <div class="dot-gray"></div>207    <div class="dot-gray"></div>208  </div>209 210  <!-- Details -->211  <div class="details">212    <div class="brand">Disney</div>213    <h1 class="prod-title">Marvel Captain America Toy On Bag Plush Accessories for Kids age 3Y+ - 25 Cm (Blue)</h1>214    <div class="meta">3 to 5 Years | Unisex | 149</div>215 216    <div class="ratings">217      <div style="display:flex; gap:10px;">218        <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2 L15 8 L22 9 L17 14 L18 21 L12 18 L6 21 L7 14 L2 9 L9 8 Z" stroke="#888" stroke-width="2" fill="none"/></svg>219        <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2 L15 8 L22 9 L17 14 L18 21 L12 18 L6 21 L7 14 L2 9 L9 8 Z" stroke="#888" stroke-width="2" fill="none"/></svg>220        <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2 L15 8 L22 9 L17 14 L18 21 L12 18 L6 21 L7 14 L2 9 L9 8 Z" stroke="#888" stroke-width="2" fill="none"/></svg>221        <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2 L15 8 L22 9 L17 14 L18 21 L12 18 L6 21 L7 14 L2 9 L9 8 Z" stroke="#888" stroke-width="2" fill="none"/></svg>222        <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 2 L15 8 L22 9 L17 14 L18 21 L12 18 L6 21 L7 14 L2 9 L9 8 Z" stroke="#888" stroke-width="2" fill="none"/></svg>223      </div>224      <div class="reviews">0 Reviews</div>225    </div>226 227    <div class="price-line">MRP ₹1499</div>228    <div class="tax-note">Price inclusive of all taxes</div>229    <div class="stock">In Stock</div>230 231    <div class="section-title">Check Availability</div>232  </div>233 234  <!-- Sticky View Bag -->235  <div class="viewbag-wrap">236    <div class="viewbag">237      <span>View Bag</span>238      <svg width="52" height="52" viewBox="0 0 24 24">239        <rect x="6" y="8" width="12" height="10" rx="2" stroke="#212121" stroke-width="2" fill="none"/>240        <path d="M8 8 C8 6,10 5,12 5 C14 5,16 6,16 8" stroke="#212121" stroke-width="2" fill="none"/>241      </svg>242    </div>243  </div>244 245  <div class="gesture"></div>246</div>247</body>248</html>