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">6<title>Product Detail - Recliner</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system,BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 color: #222;16 box-sizing: border-box;17 }18 .statusbar {19 height: 120px;20 background:#2b1f33;21 color:#fff;22 display:flex;23 align-items:center;24 justify-content:space-between;25 padding:0 36px;26 font-weight:600;27 letter-spacing:0.5px;28 }29 .status-icons { display:flex; align-items:center; gap:26px; }30 .dot { width:14px; height:14px; border-radius:50%; background:#fff; opacity:.9; }31 .status-shape { width:36px; height:24px; border:2px solid #fff; border-radius:4px; position:relative; }32 .status-shape:after { content:""; position:absolute; right:-8px; top:6px; width:4px; height:12px; background:#fff; border-radius:1px; }33 .topbar {34 height:120px;35 display:flex;36 align-items:center;37 justify-content:space-between;38 padding:0 28px;39 border-bottom:1px solid #ececec;40 background:#fff;41 }42 .icon-btn { width:92px; height:92px; display:flex; align-items:center; justify-content:center; }43 .icon-btn svg { width:48px; height:48px; fill:#333; }44 .breadcrumbs {45 height:100px;46 display:flex; align-items:center;47 padding:0 36px;48 background:#f7f7f7;49 color:#9e9e9e;50 font-size:28px;51 border-bottom:1px solid #eee;52 gap:16px;53 }54 .crumb-sep { color:#c2c2c2; }55 .content { padding:28px 36px 10px 36px; }56 .title { font-size:42px; line-height:1.25; margin:6px 0 10px 0; color:#2a2a2a; }57 .brand { font-size:32px; color:#ff6e32; margin-bottom:16px; }58 .rating-row { display:flex; align-items:center; gap:14px; font-size:28px; color:#555; margin-bottom:14px; }59 .stars svg { width:32px; height:32px; }60 .muted { color:#8a8a8a; }61 .bold { font-weight:700; color:#4d4d4d; }62 .image-area {63 position:relative;64 height:1050px;65 background:#fff;66 border-top:1px solid #eee;67 border-bottom:1px solid #eee;68 display:flex;69 align-items:center;70 justify-content:center;71 }72 .img-ph {73 width: 980px;74 height: 900px;75 background:#E0E0E0;76 border:1px solid #BDBDBD;77 color:#757575;78 display:flex; align-items:center; justify-content:center;79 font-size:34px;80 text-align:center;81 }82 .floating-pill {83 position:absolute; left:36px; bottom:90px;84 background:#fff;85 border:1px solid #e6e6e6;86 padding:24px 34px;87 border-radius:48px;88 display:flex; gap:18px; align-items:center;89 box-shadow:0 6px 18px rgba(0,0,0,0.08);90 font-size:32px;91 }92 .floating-round {93 position:absolute; right:40px; bottom:120px;94 width:110px; height:110px; border-radius:50%;95 background:#fff; border:1px solid #ececec;96 display:flex; align-items:center; justify-content:center;97 box-shadow:0 8px 20px rgba(0,0,0,0.15);98 }99 .floating-like {100 position:absolute; right:40px; bottom:20px;101 width:120px; height:120px; border-radius:50%;102 background:#fff; border:1px solid #ececec;103 display:flex; align-items:center; justify-content:center;104 box-shadow:0 8px 20px rgba(0,0,0,0.15);105 }106 .sticky-buy {107 position:absolute; right:24px; top:40px;108 display:flex; flex-direction:column; align-items:flex-end; gap:12px;109 }110 .close-x {111 width:60px; height:60px; border-radius:50%;112 background:#fff; border:1px solid #e6e6e6;113 display:flex; align-items:center; justify-content:center;114 box-shadow:0 4px 12px rgba(0,0,0,.1);115 }116 .buy-card {117 width:200px;118 background:#fff;119 border:1px solid #eaeaea;120 border-radius:12px;121 box-shadow:0 8px 20px rgba(0,0,0,.08);122 padding:18px;123 text-align:center;124 font-size:28px;125 }126 .dots {127 height:60px; display:flex; align-items:center; justify-content:center; gap:18px;128 }129 .dot-i { width:22px; height:22px; border-radius:50%; border:2px solid #cfcfcf; background:#fff; }130 .dot-i.active { background:#ff6e32; border-color:#ff6e32; }131 .purchase {132 position:relative;133 padding:28px 36px 26px 36px;134 background:#fff;135 border-top:1px solid #eee;136 }137 .purchase h3 { margin:4px 0 26px 0; font-size:40px; }138 .btn-row { display:flex; gap:24px; }139 .btn {140 flex:1;141 height:130px;142 font-size:36px;143 border-radius:14px;144 display:flex; align-items:center; justify-content:center;145 cursor:default;146 }147 .btn-outline {148 border:3px solid #ff6e32; color:#ff6e32; background:#fff;149 }150 .btn-solid {151 background:#ff6e32; color:#fff; border:3px solid #ff6e32;152 }153 .chat-float {154 position:absolute; right:24px; top:-26px;155 background:#ff6e32; color:#fff;156 padding:14px 22px;157 border-radius:12px;158 box-shadow:0 8px 18px rgba(0,0,0,.12);159 display:flex; align-items:center; gap:12px;160 font-size:30px;161 }162 .bottom-nav {163 position:absolute; left:0; right:0; bottom:40px;164 height:210px;165 background:#fff;166 border-top:1px solid #ececec;167 display:flex; align-items:center; justify-content:space-around;168 padding:0 10px;169 }170 .nav-item { display:flex; flex-direction:column; align-items:center; gap:16px; color:#7b7b7b; font-size:26px; }171 .nav-item svg { width:56px; height:56px; }172 .nav-item.active { color:#ff6e32; }173 .home-indicator {174 position:absolute; left:50%; transform:translateX(-50%);175 bottom:8px; width:260px; height:12px; background:#000; opacity:.12; border-radius:6px;176 }177 .eye { width:32px; height:32px; }178 .rating-row .count { color:#ff6e32; font-weight:700; }179</style>180</head>181<body>182<div id="render-target">183 184 <!-- Status bar -->185 <div class="statusbar">186 <div style="font-size:38px;">11:53</div>187 <div class="status-icons">188 <div class="dot"></div>189 <div class="dot" style="border:2px solid #fff; background:transparent;"></div>190 <div class="dot" style="width:14px; height:14px; border-radius:4px;"></div>191 <div class="dot" style="opacity:.6;"></div>192 <svg width="40" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M3 9l6 6-6 6V9zm18 12H11l6-6 4 4v2zM3 3h18v2H3z"/></svg>193 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><path d="M12 22c4.97 0 9-4.03 9-9h-2a7 7 0 11-7-7V4l4 3-4 3V8a5 5 0 105 5h2c0 6.08-4.92 11-11 11z"/></svg>194 <div class="status-shape"></div>195 </div>196 </div>197 198 <!-- App bar -->199 <div class="topbar">200 <div class="icon-btn" aria-label="Back">201 <svg viewBox="0 0 24 24"><path d="M15.5 4.5L7 12l8.5 7.5-1.5 1.5L4 12 14 3l1.5 1.5z"/></svg>202 </div>203 <div style="display:flex; gap:6px;">204 <div class="icon-btn" aria-label="Search">205 <svg viewBox="0 0 24 24"><path d="M10 4a6 6 0 014.8 9.6l4.3 4.3-1.4 1.4-4.3-4.3A6 6 0 1110 4zm0 2a4 4 0 100 8 4 4 0 000-8z"/></svg>206 </div>207 <div class="icon-btn" aria-label="Wishlist">208 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9.5-8.16C.94 10.1 2.2 6.5 5.66 6.5c2 0 3.2 1.34 3.84 2.37.64-1.03 1.84-2.37 3.84-2.37 3.46 0 4.72 3.6 3.16 6.34C19 16.65 12 21 12 21z" fill="none" stroke="#333" stroke-width="1.5"/></svg>209 </div>210 <div class="icon-btn" aria-label="Cart">211 <svg viewBox="0 0 24 24"><path d="M7 6h14l-2 9H9L7 6zm-2 0H3V4h3l3 12h11v2H8a2 2 0 01-2-1.5L5 6z"/></svg>212 </div>213 </div>214 </div>215 216 <!-- Breadcrumbs -->217 <div class="breadcrumbs">218 <span>Home</span><span class="crumb-sep">›</span>219 <span>Furniture</span><span class="crumb-sep">›</span>220 <span>Recliners</span><span class="crumb-sep">›</span>221 <span>1 Seater Recliners</span><span class="crumb-sep">›</span>222 <span>Manual 1 Seater</span>223 </div>224 225 <!-- Product text info -->226 <div class="content">227 <div class="title">Avalon Fabric Manual 1 Seater Recliner In Midnight Blue Colour,</div>228 <div class="brand">By Duroflex</div>229 230 <div class="rating-row">231 <span class="stars">232 <svg viewBox="0 0 24 24"><path fill="#ffb21a" d="M12 2l2.8 6h6.2l-5 3.7 1.9 6.3L12 15l-5.9 3 1.9-6.3-5-3.7h6.2z"/></svg>233 <svg viewBox="0 0 24 24"><path fill="#ffb21a" d="M12 2l2.8 6h6.2l-5 3.7 1.9 6.3L12 15l-5.9 3 1.9-6.3-5-3.7h6.2z"/></svg>234 <svg viewBox="0 0 24 24"><path fill="#ffb21a" d="M12 2l2.8 6h6.2l-5 3.7 1.9 6.3L12 15l-5.9 3 1.9-6.3-5-3.7h6.2z"/></svg>235 <svg viewBox="0 0 24 24"><path fill="#ffb21a" d="M12 2l2.8 6h6.2l-5 3.7 1.9 6.3L12 15l-5.9 3 1.9-6.3-5-3.7h6.2z"/></svg>236 <svg viewBox="0 0 24 24"><path fill="#ffb21a" d="M12 2l2.8 6h6.2l-5 3.7 1.9 6.3L12 15l-5.9 3 1.9-6.3-5-3.7h6.2z"/></svg>237 </span>238 <span class="count">5</span>239 <span class="muted">(24 Sold)</span>240 </div>241 242 <div class="rating-row muted">243 <svg class="eye" viewBox="0 0 24 24"><path fill="#9e9e9e" d="M12 5c5 0 9.27 3.11 11 7-1.73 3.89-6 7-11 7S2.73 15.89 1 12c1.73-3.89 6-7 11-7zm0 2C8.14 7 4.94 9.06 3.33 12 4.94 14.94 8.14 17 12 17s7.06-2.06 8.67-5C19.06 9.06 15.86 7 12 7zm0 2a3 3 0 110 6 3 3 0 010-6z"/></svg>244 <span><span class="bold">24 People</span> are Viewing this Product Right Now</span>245 </div>246 </div>247 248 <!-- Image area -->249 <div class="image-area">250 <div class="img-ph">[IMG: Midnight Blue Recliner]</div>251 252 <div class="sticky-buy">253 <div class="close-x">254 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#333" stroke-width="2" stroke-linecap="round"/></svg>255 </div>256 <div class="buy-card">257 <div style="display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:6px;">258 <svg width="28" height="28" viewBox="0 0 24 24" fill="#ff6e32"><path d="M17 1H7C5.34 1 4 2.34 4 4v16c0 1.66 1.34 3 3 3h10c1.66 0 3-1.34 3-3V4c0-1.66-1.34-3-3-3zm1 19c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v16z"/></svg>259 <span style="font-weight:700; color:#333;">Buy On</span>260 </div>261 <div style="font-weight:700; color:#333;">Phone</div>262 </div>263 </div>264 265 <div class="floating-pill">266 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M6 2h9l3 3v14a3 3 0 01-3 3H6a3 3 0 01-3-3V5a3 3 0 013-3zm0 2a1 1 0 00-1 1v14a1 1 0 001 1h9a1 1 0 001-1V6h-3a2 2 0 01-2-2H6z"/></svg>267 <span>View Similar Items</span>268 </div>269 270 <div class="floating-round" title="Share">271 <svg width="48" height="48" viewBox="0 0 24 24"><path fill="#333" d="M18 8a3 3 0 10-2.83-4H15a3 3 0 102.83 4H18zM6 14a3 3 0 100 6 3 3 0 000-6zm12-4a3 3 0 00-2.24 1.02L8.91 13.7A3 3 0 006 12a3 3 0 00-2.83 2H4a3 3 0 005.09 1.7l6.85-2.68A3 3 0 0018 14a3 3 0 100-6z"/></svg>272 </div>273 274 <div class="floating-like" title="Wishlist">275 <svg width="54" height="54" viewBox="0 0 24 24"><path d="M12 21s-7-4.35-9.5-8.16C.94 10.1 2.2 6.5 5.66 6.5c2 0 3.2 1.34 3.84 2.37.64-1.03 1.84-2.37 3.84-2.37 3.46 0 4.72 3.6 3.16 6.34C19 16.65 12 21 12 21z" fill="none" stroke="#333" stroke-width="1.6"/></svg>276 </div>277 </div>278 279 <!-- Dots -->280 <div class="dots">281 <div class="dot-i active"></div>282 <div class="dot-i"></div>283 <div class="dot-i"></div>284 <div class="dot-i"></div>285 <div class="dot-i"></div>286 <div class="dot-i"></div>287 <div class="dot-i"></div>288 <div class="dot-i"></div>289 <div class="dot-i"></div>290 </div>291 292 <!-- Purchase section -->293 <div class="purchase">294 <div class="chat-float">295 <svg width="30" height="30" viewBox="0 0 24 24" fill="#fff"><path d="M2 4h20v12H7l-5 4V4z"/></svg>296 <span>Let's Chat</span>297 </div>298 <h3>Select Colour</h3>299 <div class="btn-row">300 <div class="btn btn-outline">ADD TO CART</div>301 <div class="btn btn-solid">BUY NOW</div>302 </div>303 </div>304 305 <!-- Bottom navigation -->306 <div class="bottom-nav">307 <div class="nav-item active">308 <svg viewBox="0 0 24 24"><path fill="#ff6e32" d="M12 3l9 8h-3v8h-5v-5H11v5H6v-8H3l9-8z"/></svg>309 <div>Home</div>310 </div>311 <div class="nav-item">312 <svg viewBox="0 0 24 24"><path fill="#7b7b7b" d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z"/></svg>313 <div>My Account</div>314 </div>315 <div class="nav-item">316 <svg viewBox="0 0 24 24"><path fill="#7b7b7b" d="M20 6h-4l-2-2H6L4 6H2v14h20V6h-2zm-8 4h8v8H4v-8h8z"/></svg>317 <div>Gift Cards</div>318 </div>319 <div class="nav-item">320 <svg viewBox="0 0 24 24"><path fill="#7b7b7b" d="M3 9h18v11H3V9zm2-5h14l2 4H3l2-4z"/></svg>321 <div>Studios</div>322 </div>323 <div class="nav-item">324 <svg viewBox="0 0 24 24"><path fill="#7b7b7b" d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"/></svg>325 <div>Categories</div>326 </div>327 </div>328 329 <div class="home-indicator"></div>330</div>331</body>332</html>