GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>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; position:relative; overflow:hidden;11 background:#ffffff; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;12 color:#222;13 }14 .content{ position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }15 .p-x{ padding-left:36px; padding-right:36px; }16 .row{ display:flex; align-items:center; }17 .space-between{ justify-content:space-between; }18 .muted{ color:#757575; }19 .divider{ height:1px; background:#eee; margin:24px 0; }20 .section-slab{ height:10px; background:#f5efff; margin:28px 0; }21 .statusbar{ height:64px; padding:0 24px; font-size:26px; color:#111; display:flex; align-items:center; justify-content:space-between; }22 .search-wrap{ padding:18px 24px; }23 .searchbar{24 flex:1; height:96px; background:#f0f2f5; border-radius:18px; border:1px solid #e0e0e0;25 display:flex; align-items:center; padding:0 24px; margin:0 18px;26 }27 .searchbar span{ color:#8a8a8a; font-size:30px; }28 .icon-btn{ width:72px; height:72px; display:flex; align-items:center; justify-content:center; }29 .rating-row{ padding:12px 36px; display:flex; align-items:center; justify-content:space-between; }30 .rating-left{ display:flex; align-items:center; gap:12px; }31 .green{ color:#1b8a2f; }32 .blue{ color:#1976d2; }33 .price-block{ padding:18px 36px 0 36px; }34 .tag-savings{35 display:inline-block; background:#6e3ccf; color:#fff; padding:14px 20px; border-radius:10px;36 font-weight:600; margin:12px 0 18px 0; position:relative; font-size:26px;37 }38 .price-line{ display:flex; align-items:baseline; gap:16px; }39 .price-line .off{ color:#1b8a2f; font-weight:800; font-size:48px; }40 .price-line .mrp{ color:#9e9e9e; text-decoration:line-through; font-size:34px; }41 .price-line .price{ font-size:54px; font-weight:800; }42 .emi{ margin-top:8px; font-size:30px; color:#4a4a4a; }43 .size-head{ padding:24px 36px 10px 36px; display:flex; align-items:center; justify-content:space-between; }44 .chips{ padding:8px 36px 24px 36px; display:flex; gap:28px; flex-wrap:wrap; }45 .chip{46 width:120px; height:120px; border-radius:60px; border:3px solid #333; display:flex; align-items:center; justify-content:center;47 font-weight:700; font-size:34px; background:#fff;48 }49 .chip.disabled{ border-color:#d6d6d6; color:#c7c7c7; background:#f8f8f8; }50 .info-note{51 margin:8px 36px 12px 36px; background:#fbf6ea; border:1px solid #eadfc3; border-radius:16px; padding:22px;52 display:flex; gap:16px; align-items:flex-start; color:#6d6a60; font-size:30px;53 }54 .address-row{ padding:28px 36px; display:flex; align-items:center; justify-content:space-between; }55 .btn-outline{56 border:1px solid #e0e0e0; padding:18px 28px; border-radius:14px; background:#fff; font-weight:600;57 }58 .list{ padding:0 0; }59 .list-item{60 padding:26px 36px; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; border-bottom:1px solid #f0f0f0;61 }62 .list-icon{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; color:#757575; }63 .list-text{ flex:1; }64 .list-text .title{ font-size:34px; font-weight:700; }65 .list-text .sub{ font-size:28px; color:#757575; margin-top:4px; }66 .deal{ padding:28px 36px; display:flex; gap:20px; align-items:center; }67 .deal-badge{68 width:140px; height:90px; background:#e9f1ff; border:1px solid #c9dbff; color:#234ea8;69 display:flex; align-items:center; justify-content:center; font-weight:900; border-radius:10px;70 }71 .deal .amt{ color:#1b8a2f; font-weight:900; }72 .offers-head{ padding:18px 36px; font-size:36px; font-weight:800; }73 .cta-bar{74 position:absolute; left:0; right:0; bottom:66px; padding:16px 24px; background:#fff; border-top:1px solid #eee; display:flex; gap:18px;75 }76 .cta{ flex:1; height:112px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:34px; }77 .cta.gray{ background:#fff; border:2px solid #e5e5e5; }78 .cta.yellow{ background:#ffc107; }79 .fab{80 position:absolute; right:28px; bottom:210px; width:136px; height:136px; border-radius:68px;81 background:linear-gradient(135deg,#2c5cf6,#2c5cf6); display:flex; align-items:center; justify-content:center;82 box-shadow:0 10px 24px rgba(0,0,0,0.2);83 }84 .gesture{ position:absolute; left:50%; transform:translateX(-50%); bottom:18px; width:360px; height:10px; border-radius:6px; background:#000; opacity:.15; }85 a{ color:#1976d2; text-decoration:none; }86</style>87</head>88<body>89<div id="render-target">90 <div class="content">91 <!-- Status bar (mock) -->92 <div class="statusbar">93 <div>11:46</div>94 <div class="row" style="gap:18px;">95 <span class="muted">• • •</span>96 <span class="muted">◬</span>97 <span class="muted">▮</span>98 </div>99 </div>100 101 <!-- Search header -->102 <div class="row search-wrap">103 <div class="icon-btn">104 <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">105 <path d="M15 18l-6-6 6-6"/>106 </svg>107 </div>108 <div class="searchbar">109 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#9e9e9e" stroke-width="2">110 <circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4.3-4.3"></path>111 </svg>112 <span style="margin-left:12px; flex:1;">Search for products</span>113 <svg width="34" height="34" viewBox="0 0 24 24" fill="#9e9e9e">114 <path d="M12 3a3 3 0 00-3 3v4a3 3 0 006 0V6a3 3 0 00-3-3zm-7 8v2l7 4 7-4v-2l-7 4-7-4z"/>115 </svg>116 </div>117 <div class="icon-btn">118 <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round">119 <path d="M6 6h15l-1.5 9h-12z"></path><circle cx="9" cy="20" r="1.5"></circle><circle cx="17" cy="20" r="1.5"></circle><path d="M6 6l-1-3H2"></path>120 </svg>121 </div>122 </div>123 124 <!-- Ratings -->125 <div class="rating-row">126 <div class="rating-left">127 <svg width="28" height="28" viewBox="0 0 24 24" fill="#1b8a2f"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z"/></svg>128 <svg width="28" height="28" viewBox="0 0 24 24" fill="#1b8a2f"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z"/></svg>129 <svg width="28" height="28" viewBox="0 0 24 24" fill="#1b8a2f"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z"/></svg>130 <svg width="28" height="28" viewBox="0 0 24 24" fill="#1b8a2f"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z"/></svg>131 <svg width="28" height="28" viewBox="0 0 24 24" fill="#1b8a2f"><path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1z"/></svg>132 <div style="margin-left:10px; font-weight:700; color:#1b8a2f;">Very Good</div>133 <div class="muted" style="margin-left:10px;">• 49 ratings</div>134 </div>135 <div class="row" style="gap:8px;">136 <svg width="26" height="26" viewBox="0 0 24 24" fill="#ffd54f" stroke="#ffb300" stroke-width="1">137 <path d="M12 2l2.2 4.5L19 7l-3.5 3.4.8 4.9L12 13.8 7.7 15.3l.8-4.9L5 7l4.8-.5L12 2z"/>138 </svg>139 <span class="muted" style="font-weight:700;">Plus</span>140 </div>141 </div>142 143 <!-- Price and offer -->144 <div class="price-block">145 <span class="tag-savings">Big Saving Deal</span>146 <div class="price-line">147 <div class="off">30% off</div>148 <div class="mrp">3,695</div>149 <div class="price">₹2,586</div>150 </div>151 <div class="emi">EMI from ₹127/month. <a href="#">View Plans</a></div>152 </div>153 154 <!-- Sizes -->155 <div class="size-head">156 <div style="font-size:36px; font-weight:800;">Size- UK/India</div>157 <a href="#" class="row" style="gap:10px; font-weight:700;">158 <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#1976d2" stroke-width="2">159 <rect x="3" y="6" width="18" height="12" rx="2"></rect>160 <path d="M7 10h10M7 14h6"></path>161 </svg>162 <span class="blue">Size Chart</span>163 </a>164 </div>165 <div class="chips">166 <div class="chip">2.5</div>167 <div class="chip">3.5</div>168 <div class="chip">4.5</div>169 <div class="chip">5.5</div>170 <div class="chip">6.5</div>171 <div class="chip disabled">7.5</div>172 </div>173 174 <!-- Info note -->175 <div class="info-note">176 <div class="list-icon">177 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#c2a874" stroke-width="2">178 <rect x="3" y="7" width="18" height="13" rx="2"></rect>179 <path d="M3 10l9 5 9-5"></path>180 </svg>181 </div>182 <div>Don't worry, we have a <b>10-day</b> return policy on this item. <a href="#">See Details</a></div>183 </div>184 185 <div class="section-slab"></div>186 187 <!-- Deliver to -->188 <div class="address-row">189 <div><span class="muted">Deliver to: </span><span style="font-weight:800;">New Delhi - 110054</span></div>190 <button class="btn-outline">Change</button>191 </div>192 193 <!-- Delivery details list -->194 <div class="list">195 <div class="list-item">196 <div class="list-icon">197 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#757575" stroke-width="2">198 <rect x="1" y="7" width="13" height="10" rx="2"></rect>199 <path d="M14 10h4l4 4v3h-3a2 2 0 01-2-2h-3zM6 21a2 2 0 100-4 2 2 0 000 4zm12 0a2 2 0 100-4 2 2 0 000 4z"/>200 </svg>201 </div>202 <div class="list-text">203 <div class="title"><span style="color:#1b8a2f;">FREE Delivery</span> ₹40 | Delivery by <b>1 Nov, Wednesday</b></div>204 <div class="sub">If ordered within <span style="color:#e53935; font-weight:700;">10m 27s</span></div>205 </div>206 <div class="list-icon">207 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>208 </div>209 </div>210 211 <div class="list-item">212 <div class="list-icon">213 <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#757575" stroke-width="2">214 <path d="M3 12h12"></path><path d="M6 9l-3 3 3 3"></path>215 </svg>216 </div>217 <div class="list-text">218 <div class="title">10 Days Return Policy</div>219 </div>220 <div class="list-icon">221 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>222 </div>223 </div>224 225 <div class="list-item">226 <div class="list-icon">227 <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#757575" stroke-width="2">228 <path d="M4 5h16v14H4z"></path><path d="M4 9h16"></path><path d="M8 13h4"></path>229 </svg>230 </div>231 <div class="list-text">232 <div class="title">Cash on Delivery Available</div>233 </div>234 <div class="list-icon">235 <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#bdbdbd" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>236 </div>237 </div>238 </div>239 240 <div class="section-slab"></div>241 242 <!-- WOW deal -->243 <div class="deal">244 <div class="deal-badge">WOW!</div>245 <div>246 <div style="font-size:36px; font-weight:800;">Get at <span class="amt">₹1,879</span></div>247 <div class="muted" style="margin-top:6px;">With Basket, Bank offers</div>248 </div>249 </div>250 251 <!-- All Offers -->252 <div class="offers-head">All Offers & Coupons</div>253 254 <!-- CTA bar -->255 <div class="cta-bar">256 <div class="cta gray">257 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" style="margin-right:12px;">258 <path d="M6 6h15l-1.5 9h-12z"></path><circle cx="9" cy="20" r="1.5"></circle><circle cx="17" cy="20" r="1.5"></circle><path d="M6 6l-1-3H2"></path>259 </svg>260 Pay with EMI261 </div>262 <div class="cta yellow">Buy now</div>263 </div>264 265 <!-- Floating action bubble -->266 <div class="fab">267 <svg width="56" height="56" viewBox="0 0 24 24" fill="#ffe24a" stroke="#fff" stroke-width="0">268 <circle cx="12" cy="12" r="10" fill="#ffe24a"></circle>269 <path d="M7 12h10M12 7v10" stroke="#2c5cf6" stroke-width="2"></path>270 </svg>271 </div>272 273 <!-- gesture bar -->274 <div class="gesture"></div>275 </div>276</div>277</body>278</html>