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 Details - Large Sofa</title>7<style>8 /* Reset and base */9 html, body { margin: 0; padding: 0; }10 body { background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }11 *, *::before, *::after { box-sizing: border-box; }12 13 /* Render target (mobile screen) */14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #0f0f10; /* app background */20 color: #EAEAEA;21 }22 23 /* Status bar */24 .status-bar {25 height: 88px;26 background: #3c3f41;27 color: #f5f5f5;28 padding: 0 32px;29 display: flex;30 align-items: center;31 font-size: 38px;32 letter-spacing: 0.5px;33 }34 .status-left { display: flex; align-items: center; gap: 18px; }35 .status-right { margin-left: auto; display: flex; align-items: center; gap: 28px; opacity: 0.9; }36 .sb-dot { width: 10px; height: 10px; background: #EAEAEA; border-radius: 50%; display: inline-block; }37 38 /* App bar */39 .app-bar {40 height: 140px;41 background: #131313;42 display: flex;43 align-items: center;44 padding: 0 28px;45 position: relative;46 border-bottom: 1px solid #1f1f1f;47 }48 .app-actions { display: flex; align-items: center; gap: 28px; }49 .icon-btn { width: 84px; height: 84px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; }50 .icon-btn svg { width: 48px; height: 48px; fill: #e7e7e7; }51 52 .cart-icon {53 margin-left: auto;54 width: 96px; height: 96px;55 border-radius: 18px;56 display: flex; align-items: center; justify-content: center;57 position: relative;58 }59 .cart-icon svg { width: 60px; height: 60px; fill: #eaeaea; }60 .badge {61 position: absolute;62 top: 14px; right: 14px;63 background: #ff9b00;64 color: #fff;65 font-weight: 700;66 font-size: 28px;67 line-height: 1;68 padding: 10px 16px;69 border-radius: 24px;70 }71 72 /* Scrollable content area */73 .content {74 position: absolute;75 top: 228px; /* status + app bar */76 left: 0; right: 0;77 bottom: 210px; /* space for bottom bar */78 overflow-y: auto;79 padding: 18px 28px 24px;80 }81 82 .notice {83 color: #18b325;84 font-weight: 800;85 font-size: 42px;86 margin: 10px 8px 18px;87 }88 .divider-thick {89 height: 14px;90 background: #2b2b2b;91 border-radius: 6px;92 margin: 10px 0 22px;93 }94 95 .field { padding: 14px 8px 10px; }96 .field-label {97 font-size: 32px;98 color: #B9B9B9;99 margin-bottom: 10px;100 display: flex; align-items: center; justify-content: space-between;101 }102 .field-value {103 font-size: 56px;104 font-weight: 800;105 color: #FFFFFF;106 margin: 10px 0 18px;107 }108 .caret svg { width: 38px; height: 38px; fill: #B9B9B9; }109 110 .bullet-list { padding: 8px 6px; display: grid; gap: 26px; }111 .bullet {112 display: grid;113 grid-template-columns: 40px 1fr;114 gap: 18px;115 align-items: flex-start;116 }117 .check {118 width: 40px; height: 40px; margin-top: 8px;119 }120 .bullet p {121 margin: 0;122 color: #DEDEDE;123 font-size: 36px;124 line-height: 1.5;125 }126 .divider-thin {127 height: 12px; background: #2b2b2b; border-radius: 4px; margin: 18px 0;128 }129 130 .tabs {131 display: grid;132 grid-template-columns: 1fr 1fr 1fr;133 padding: 8px 6px 0;134 border-bottom: 3px solid #353535;135 }136 .tab {137 text-align: left;138 color: #DADADA;139 font-size: 40px;140 padding: 16px 10px 22px;141 position: relative;142 }143 .tab.active { color: #FFFFFF; font-weight: 700; }144 .tab.active::after {145 content: ""; position: absolute; left: 10px; right: 60px; bottom: -3px;146 height: 10px; background: #F2B134; border-radius: 6px;147 }148 149 .info-table {150 margin-top: 18px;151 border: 2px solid #303030;152 border-radius: 10px;153 overflow: hidden;154 }155 .row {156 display: grid;157 grid-template-columns: 1.2fr 1fr;158 border-top: 2px solid #303030;159 }160 .row:first-child { border-top: none; }161 .cell {162 padding: 28px;163 background: #2a2a2a;164 font-size: 36px;165 color: #e9e9e9;166 border-right: 2px solid #303030;167 }168 .cell:last-child { border-right: none; background: #1f1f1f; }169 170 /* Bottom action bar */171 .bottom-bar {172 position: absolute;173 left: 0; right: 0; bottom: 70px;174 height: 140px;175 background: #141414;176 border-top: 1px solid #232323;177 display: flex; align-items: center;178 padding: 0 28px;179 gap: 34px;180 }181 .circle-btn {182 width: 108px; height: 108px;183 border-radius: 54px;184 background: #1d1d1d;185 border: 2px solid #2a2a2a;186 display: flex; align-items: center; justify-content: center;187 }188 .circle-btn svg { width: 56px; height: 56px; fill: #FFFFFF; opacity: 0.9; }189 190 .cta {191 margin-left: auto;192 height: 100px;193 padding: 0 40px;194 display: flex; align-items: center; justify-content: center;195 border-radius: 14px;196 background: #262626;197 border: 2px solid #2e2e2e;198 color: #FFFFFF;199 font-size: 44px;200 font-weight: 800;201 letter-spacing: 1px;202 }203 204 /* Home indicator */205 .home-indicator {206 position: absolute;207 left: 50%;208 transform: translateX(-50%);209 bottom: 18px;210 width: 420px; height: 12px;211 background: #E9E9E9;212 border-radius: 8px;213 opacity: 0.92;214 }215</style>216</head>217<body>218<div id="render-target">219 220 <!-- Fake status bar -->221 <div class="status-bar">222 <div class="status-left">9:25</div>223 <div class="status-right">224 <!-- Simple generic status icons -->225 <svg width="42" height="42" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#dcdcdc"/></svg>226 <svg width="42" height="42" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="14" rx="2" fill="#dcdcdc"/></svg>227 <span class="sb-dot"></span>228 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M3 8h18l-2 10H5L3 8zm6-3h6l1 3H8l1-3z" fill="#dcdcdc"/></svg>229 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M18 8a6 6 0 1 1-12 0" stroke="#dcdcdc" stroke-width="2" fill="none"/><path d="M6 8V6a6 6 0 0 1 12 0v2" stroke="#dcdcdc" stroke-width="2" fill="none"/></svg>230 </div>231 </div>232 233 <!-- App bar -->234 <div class="app-bar">235 <div class="app-actions">236 <!-- Back chevron -->237 <span class="icon-btn" title="Back">238 <svg viewBox="0 0 24 24"><path d="M15.5 4l-8 8 8 8" /></svg>239 </span>240 <!-- Menu / previous icon -->241 <span class="icon-btn" title="Menu">242 <svg viewBox="0 0 24 24"><path d="M4 7h16M4 12h10M4 17h14" stroke="#e7e7e7" stroke-width="2" fill="none" stroke-linecap="round"/></svg>243 </span>244 </div>245 <div class="cart-icon" title="Cart">246 <svg viewBox="0 0 24 24"><path d="M7 4h12l-1.5 9H8.5L7 4zM6 4H4" stroke="#eaeaea" stroke-width="2" fill="none" stroke-linecap="round"/><circle cx="9" cy="20" r="1.8" fill="#eaeaea"/><circle cx="17" cy="20" r="1.8" fill="#eaeaea"/></svg>247 <span class="badge">0</span>248 </div>249 </div>250 251 <!-- Scrollable content -->252 <div class="content">253 <div class="notice">Order now and get it around Tuesday, December 05</div>254 <div class="divider-thick"></div>255 256 <!-- Size -->257 <div class="field">258 <div class="field-label">259 <span>Size</span>260 <span class="caret">261 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" /></svg>262 </span>263 </div>264 <div class="field-value">Large Sofa</div>265 </div>266 267 <div class="divider-thin"></div>268 269 <!-- Color -->270 <div class="field">271 <div class="field-label">272 <span>Color</span>273 <span class="caret">274 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" /></svg>275 </span>276 </div>277 <div class="field-value" style="font-size:52px;">Beige</div>278 </div>279 280 <div class="divider-thick"></div>281 282 <!-- Bulleted description -->283 <div class="bullet-list">284 <div class="bullet">285 <svg class="check" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="#B9B9B9"/><path d="M7 12.5l3 3 7-7" stroke="#0f0f10" stroke-width="2.5" fill="none" stroke-linecap="round"/></svg>286 <p>【STURDY STRUCTURE】: The couch’s frame is made of high-quality solid wood & metal, ensuring each and every part of the sofa is both firm and durable. Also, the sofa has 6 legs that evenly balance the weight, giving it a total capacity of over 800lbs.</p>287 </div>288 289 <div class="bullet">290 <svg class="check" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="#B9B9B9"/><path d="M7 12.5l3 3 7-7" stroke="#0f0f10" stroke-width="2.5" fill="none" stroke-linecap="round"/></svg>291 <p>【COMFORTABLE SUPPORT】: Inside the sofa cushions are high elastic sponges on top of the coils and combined with high quality & soft fabric equal increased comfort for all customers.</p>292 </div>293 294 <div class="bullet">295 <svg class="check" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="#B9B9B9"/><path d="M7 12.5l3 3 7-7" stroke="#0f0f10" stroke-width="2.5" fill="none" stroke-linecap="round"/></svg>296 <p>【HIGH QUALITY MATERIAL】: With solid wood legs, this sofa upholstery comprises of 100% polyester with high density elastic sponges. SEAT CUSHION THICKNESS: The seat cushion is a total of 6.7 inches thick.</p>297 </div>298 299 <div class="bullet">300 <svg class="check" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="#B9B9B9"/><path d="M7 12.5l3 3 7-7" stroke="#0f0f10" stroke-width="2.5" fill="none" stroke-linecap="round"/></svg>301 <p>【EASY ASSEMBLY】: All parts and instructions are included for easy assembly in less than 30 minutes.</p>302 </div>303 304 <div class="bullet">305 <svg class="check" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="#B9B9B9"/><path d="M7 12.5l3 3 7-7" stroke="#0f0f10" stroke-width="2.5" fill="none" stroke-linecap="round"/></svg>306 <p>【STORAGE INCLUDED】: A removeable storage box is available under the sofa seat cushion.</p>307 </div>308 </div>309 310 <div class="divider-thick"></div>311 312 <!-- Tabs -->313 <div class="tabs">314 <div class="tab active">Additional info</div>315 <div class="tab">Description</div>316 <div class="tab">Product review</div>317 </div>318 319 <!-- Info table -->320 <div class="info-table">321 <div class="row">322 <div class="cell">Brand</div>323 <div class="cell">Lepfun</div>324 </div>325 <div class="row">326 <div class="cell">Manufacturer</div>327 <div class="cell">Lepfun</div>328 </div>329 </div>330 331 <!-- Spacer at bottom of scroll -->332 <div style="height: 60px;"></div>333 </div>334 335 <!-- Bottom action bar -->336 <div class="bottom-bar">337 <div class="circle-btn" title="Wishlist">338 <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.35-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 11c0 5.65-7 10-7 10z" /></svg>339 </div>340 <div class="circle-btn" title="Share">341 <svg viewBox="0 0 24 24"><path d="M18 8a3 3 0 1 0-2.83-2H15a3 3 0 0 0 3 3zM6 14a3 3 0 1 0 2.83 2H9a3 3 0 0 0-3-3zm9.5-4.5l-7 4m0-4l7 4" stroke="#FFFFFF" stroke-width="2" fill="none" stroke-linecap="round"/></svg>342 </div>343 <div class="cta">ADD TO CART</div>344 </div>345 346 <!-- Home indicator -->347 <div class="home-indicator"></div>348</div>349</body>350</html>