GD-ML/AndroidCode
13.4k
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: Arial, sans-serif; color: #222; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Top app bar */18 .top-bar {19 height: 120px;20 padding: 0 40px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 }25 .top-left, .top-right {26 display: flex;27 align-items: center;28 gap: 30px;29 }30 .icon-btn {31 width: 56px;32 height: 56px;33 display: inline-flex;34 align-items: center;35 justify-content: center;36 color: #222;37 }38 .icon-btn svg { width: 40px; height: 40px; }39 40 /* Content */41 .content {42 padding: 0 50px;43 }44 .redacted-title {45 width: 520px;46 height: 34px;47 background: #000;48 border-radius: 6px;49 margin: 10px 0 24px;50 }51 .price {52 font-size: 36px;53 margin: 6px 0 28px;54 color: #111;55 }56 .origin {57 font-size: 32px;58 margin: 10px 0 26px;59 color: #222;60 }61 .view-more {62 font-size: 30px;63 color: #4a4a4a;64 text-decoration: underline;65 margin: 12px 0 70px;66 }67 68 .section-link {69 display: flex;70 align-items: center;71 justify-content: space-between;72 padding: 26px 0;73 border-top: 1px solid transparent;74 margin: 20px 0 20px;75 }76 .section-link .label {77 font-weight: 700;78 font-size: 36px;79 color: #111;80 }81 .chev svg { width: 28px; height: 28px; }82 83 .delivery-head {84 display: flex;85 align-items: center;86 justify-content: space-between;87 margin: 80px 0 20px;88 }89 .delivery-head .title {90 font-size: 44px;91 font-weight: 700;92 }93 .help-circle {94 width: 88px;95 height: 88px;96 border: 2px solid #DADADA;97 border-radius: 50%;98 display: flex;99 align-items: center;100 justify-content: center;101 color: #555;102 }103 .divider {104 height: 1px;105 background: #E8E8E8;106 margin: 18px 0 10px;107 }108 109 .delivery-block {110 padding: 36px 0 24px;111 }112 .delivery-row {113 display: flex;114 align-items: flex-start;115 gap: 28px;116 }117 .delivery-row .text-group {118 flex: 1;119 }120 .delivery-row .title {121 font-size: 36px;122 font-weight: 700;123 margin-bottom: 14px;124 }125 .subline {126 display: flex;127 align-items: flex-start;128 gap: 16px;129 color: #777;130 font-size: 30px;131 line-height: 1.4;132 margin: 8px 0;133 }134 .muted {135 color: #9B9B9B;136 }137 .thin-sep {138 height: 1px;139 background: #E5E5E5;140 margin: 26px 0;141 }142 143 /* Add to bag button */144 .cta {145 position: absolute;146 left: 60px;147 right: 60px;148 bottom: 220px;149 height: 120px;150 background: #1E5AA5;151 color: #fff;152 border-radius: 60px;153 display: flex;154 align-items: center;155 justify-content: center;156 font-size: 38px;157 font-weight: 700;158 box-shadow: 0 6px 16px rgba(30,90,165,0.25);159 }160 161 /* Bottom navigation */162 .bottom-nav {163 position: absolute;164 left: 0;165 right: 0;166 bottom: 0;167 height: 170px;168 background: #fff;169 border-top: 1px solid #EFEFEF;170 display: flex;171 align-items: center;172 justify-content: space-around;173 }174 .nav-item {175 width: 140px;176 height: 120px;177 display: flex;178 align-items: center;179 justify-content: center;180 color: #7A7A7A;181 }182 .nav-item svg { width: 54px; height: 54px; }183 184 /* Simple image placeholder style (not used here but kept for consistency) */185 .img-ph {186 background: #E0E0E0;187 border: 1px solid #BDBDBD;188 color: #757575;189 display: flex;190 align-items: center;191 justify-content: center;192 }193</style>194</head>195<body>196<div id="render-target">197 <!-- Top bar -->198 <div class="top-bar">199 <div class="top-left">200 <div class="icon-btn" aria-label="Back">201 <svg viewBox="0 0 24 24">202 <path d="M15 4 L7 12 L15 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>203 </svg>204 </div>205 </div>206 <div class="top-right">207 <div class="icon-btn" aria-label="Share">208 <svg viewBox="0 0 24 24">209 <circle cx="18" cy="5" r="2.5" fill="currentColor"/>210 <circle cx="6" cy="12" r="2.5" fill="currentColor"/>211 <circle cx="18" cy="19" r="2.5" fill="currentColor"/>212 <path d="M8.3 11.2 L15.7 6.6 M8.3 12.8 L15.7 17.4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>213 </svg>214 </div>215 <div class="icon-btn" aria-label="Favorite">216 <svg viewBox="0 0 24 24">217 <path d="M12 20 C12 20 4 15 4 9.5 C4 7 6 5 8.5 5 C10 5 11.3 5.8 12 7 C12.7 5.8 14 5 15.5 5 C18 5 20 7 20 9.5 C20 15 12 20 12 20 Z" fill="none" stroke="currentColor" stroke-width="2"/>218 </svg>219 </div>220 </div>221 </div>222 223 <!-- Content -->224 <div class="content">225 <div class="redacted-title" title="Product title redacted"></div>226 227 <div class="price">MRP Rs.279 (incl. tax)</div>228 <div class="origin">Country of Origin: POLAND</div>229 <div class="view-more">View more</div>230 231 <div class="section-link">232 <div class="label">Assembly and documents</div>233 <div class="chev">234 <svg viewBox="0 0 16 16"><path d="M4 2 L12 8 L4 14" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>235 </div>236 </div>237 238 <div class="section-link" style="margin-top: 40px;">239 <div class="label">Materials and care</div>240 <div class="chev">241 <svg viewBox="0 0 16 16"><path d="M4 2 L12 8 L4 14" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>242 </div>243 </div>244 245 <div class="delivery-head">246 <div class="title">Delivery and pick-up</div>247 <div class="help-circle" aria-label="Help">248 <svg viewBox="0 0 24 24">249 <circle cx="12" cy="12" r="10" fill="none" stroke="#D0D0D0" stroke-width="0"/>250 <text x="12" y="16" text-anchor="middle" font-size="16" fill="#666" font-family="Arial">?</text>251 </svg>252 </div>253 </div>254 <div class="divider"></div>255 256 <!-- Home Delivery -->257 <div class="delivery-block">258 <div class="delivery-row">259 <div class="icon-btn" aria-hidden="true" style="color:#222;">260 <svg viewBox="0 0 24 24">261 <rect x="2" y="8" width="12" height="7" fill="none" stroke="currentColor" stroke-width="2" rx="1"/>262 <path d="M14 10 L18 10 L21 13 L21 15 L14 15 Z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>263 <circle cx="6" cy="17.5" r="2" fill="none" stroke="currentColor" stroke-width="2"/>264 <circle cx="18" cy="17.5" r="2" fill="none" stroke="currentColor" stroke-width="2"/>265 </svg>266 </div>267 <div class="text-group">268 <div class="title">Home Delivery</div>269 <div class="subline">270 <svg viewBox="0 0 24 24" width="24" height="24">271 <circle cx="12" cy="12" r="9" fill="none" stroke="#B0B0B0" stroke-width="2"/>272 <path d="M5 19 L19 5" stroke="#B0B0B0" stroke-width="2" stroke-linecap="round"/>273 </svg>274 <div>Information currently unavailable.<br/>Please check again later.</div>275 </div>276 <div class="muted" style="font-size:28px; margin-top:16px;">Find all options at checkout</div>277 </div>278 </div>279 </div>280 281 <div class="thin-sep"></div>282 283 <!-- Click & Collect -->284 <div class="delivery-block">285 <div class="delivery-row">286 <div class="icon-btn" aria-hidden="true" style="color:#222;">287 <svg viewBox="0 0 24 24">288 <rect x="3" y="9" width="18" height="9" fill="none" stroke="currentColor" stroke-width="2"/>289 <path d="M5 9 L7 5 L17 5 L19 9" fill="none" stroke="currentColor" stroke-width="2"/>290 <rect x="6" y="12" width="3" height="3" fill="none" stroke="currentColor" stroke-width="2"/>291 </svg>292 </div>293 <div class="text-group">294 <div class="title">Click & Collect</div>295 <div class="subline">296 <svg viewBox="0 0 24 24" width="24" height="24">297 <circle cx="12" cy="12" r="9" fill="none" stroke="#B0B0B0" stroke-width="2"/>298 <path d="M5 19 L19 5" stroke="#B0B0B0" stroke-width="2" stroke-linecap="round"/>299 </svg>300 <div>Information currently unavailable.<br/>Please check again later.</div>301 </div>302 </div>303 </div>304 </div>305 306 <!-- Bottom spacing so content doesn't sit under nav -->307 <div style="height: 380px;"></div>308 </div>309 310 <!-- CTA -->311 <div class="cta">Add to bag Rs. 199</div>312 313 <!-- Bottom Navigation -->314 <div class="bottom-nav">315 <div class="nav-item" aria-label="Home">316 <svg viewBox="0 0 24 24">317 <path d="M3 11 L12 4 L21 11" fill="none" stroke="#7A7A7A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>318 <rect x="6" y="11" width="12" height="9" fill="none" stroke="#7A7A7A" stroke-width="2"/>319 </svg>320 </div>321 <div class="nav-item" aria-label="Search">322 <svg viewBox="0 0 24 24">323 <circle cx="11" cy="11" r="7" fill="none" stroke="#7A7A7A" stroke-width="2"/>324 <path d="M16 16 L21 21" stroke="#7A7A7A" stroke-width="2" stroke-linecap="round"/>325 </svg>326 </div>327 <div class="nav-item" aria-label="Account">328 <svg viewBox="0 0 24 24">329 <circle cx="12" cy="8" r="4" fill="none" stroke="#7A7A7A" stroke-width="2"/>330 <path d="M4 20 C4 15 8 14 12 14 C16 14 20 15 20 20" fill="none" stroke="#7A7A7A" stroke-width="2" stroke-linecap="round"/>331 </svg>332 </div>333 <div class="nav-item" aria-label="Favorites">334 <svg viewBox="0 0 24 24">335 <path d="M12 20 C12 20 4 15 4 9.5 C4 7 6 5 8.5 5 C10 5 11.3 5.8 12 7 C12.7 5.8 14 5 15.5 5 C18 5 20 7 20 9.5 C20 15 12 20 12 20 Z" fill="none" stroke="#7A7A7A" stroke-width="2"/>336 </svg>337 </div>338 <div class="nav-item" aria-label="Bag">339 <svg viewBox="0 0 24 24">340 <rect x="5" y="9" width="14" height="11" fill="none" stroke="#7A7A7A" stroke-width="2"/>341 <path d="M9 9 C9 6.5 10.5 5 12 5 C13.5 5 15 6.5 15 9" fill="none" stroke="#7A7A7A" stroke-width="2"/>342 </svg>343 </div>344 </div>345</div>346</body>347</html>