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 Reviews & Recliners</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #333; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 /* Status bar */17 .status-bar {18 height: 120px;19 background: #2b1f2a;20 color: #fff;21 display: flex;22 align-items: center;23 padding: 0 36px;24 font-weight: 600;25 font-size: 46px;26 letter-spacing: 1px;27 }28 .status-icons {29 margin-left: auto;30 display: flex;31 align-items: center;32 gap: 28px;33 }34 .top-appbar {35 height: 118px;36 background: #ffffff;37 border-bottom: 1px solid #eee;38 display: flex;39 align-items: center;40 padding: 0 28px;41 }42 .top-title {43 font-size: 38px;44 font-weight: 600;45 color: #222;46 }47 .appbar-actions {48 margin-left: auto;49 display: flex;50 gap: 36px;51 }52 .icon-btn { width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; }53 /* Content */54 .content {55 height: 1840px;56 overflow: hidden;57 padding: 24px 24px 0 24px;58 box-sizing: border-box;59 }60 .section {61 padding: 10px 16px 0 16px;62 }63 h2.title {64 font-size: 46px;65 line-height: 1.2;66 margin: 14px 0 10px;67 font-weight: 700;68 }69 .divider { height: 2px; background: #e6e6e6; margin: 22px 0; }70 .muted { color: #888; font-size: 36px; }71 .sub-title {72 color: #a8622f;73 font-size: 44px;74 font-weight: 800;75 margin: 28px 0 18px;76 }77 .row { display: flex; align-items: center; }78 .stars { display: flex; gap: 20px; }79 .star svg { width: 64px; height: 64px; }80 .upload-chip {81 margin-left: auto;82 display: inline-flex;83 align-items: center;84 gap: 14px;85 padding: 18px 24px;86 border: 2px solid #e3b48f;87 border-radius: 18px;88 color: #b5662c;89 font-weight: 700;90 font-size: 32px;91 background: #fff7f1;92 }93 .close-mini {94 margin-left: 16px;95 width: 44px; height: 44px;96 border-radius: 50%;97 border: 2px solid #ccc;98 color: #666;99 display: inline-flex;100 align-items: center;101 justify-content: center;102 font-weight: 700;103 }104 .textarea {105 margin-top: 26px;106 border: 2px solid #e0e0e0;107 border-radius: 18px;108 height: 280px;109 padding: 24px;110 font-size: 36px;111 color: #777;112 display: flex;113 align-items: flex-start;114 }115 .helper {116 margin-top: 14px;117 color: #8e8e8e;118 font-size: 32px;119 }120 .submit-row {121 display: flex;122 justify-content: flex-end;123 margin-top: 16px;124 }125 .btn-primary {126 padding: 26px 46px;127 background: #ff6d3a;128 color: #fff;129 border: none;130 border-radius: 10px;131 font-size: 34px;132 font-weight: 700;133 letter-spacing: 0.5px;134 }135 .accordion-header {136 display: flex;137 align-items: center;138 justify-content: space-between;139 font-size: 42px;140 padding: 22px 0;141 }142 .light-section {143 background: #fafafa;144 padding: 26px 16px 10px;145 margin-top: 18px;146 border-top: 1px solid #eee;147 }148 .promo-title {149 font-size: 48px;150 color: #7b4a22;151 font-weight: 800;152 margin: 12px 0 18px;153 }154 .gallery {155 display: grid;156 grid-template-columns: repeat(3, 1fr);157 gap: 18px;158 margin-bottom: 24px;159 }160 .img-ph {161 height: 230px;162 background: #E0E0E0;163 border: 1px solid #BDBDBD;164 display: flex;165 align-items: center;166 justify-content: center;167 color: #757575;168 font-size: 30px;169 text-align: center;170 border-radius: 8px;171 }172 .cta-row {173 display: grid;174 grid-template-columns: 1fr 1fr;175 gap: 18px;176 margin: 18px 4px 10px;177 }178 .btn-outline {179 padding: 30px 24px;180 border-radius: 12px;181 border: 3px solid #ff6d3a;182 color: #ff6d3a;183 font-weight: 800;184 font-size: 40px;185 text-align: center;186 background: white;187 }188 .btn-fill {189 padding: 30px 24px;190 border-radius: 12px;191 border: 3px solid #ff6d3a;192 background: #ff6d3a;193 color: #fff;194 font-weight: 800;195 font-size: 40px;196 text-align: center;197 }198 /* Bottom nav */199 .bottom-nav {200 position: absolute;201 left: 0; right: 0; bottom: 36px;202 height: 190px;203 border-top: 1px solid #eee;204 background: #fff;205 display: flex;206 align-items: center;207 justify-content: space-around;208 padding: 0 10px;209 }210 .nav-item {211 width: 180px;212 display: flex;213 flex-direction: column;214 align-items: center;215 gap: 8px;216 color: #777;217 font-size: 28px;218 text-align: center;219 }220 .nav-item.active { color: #ff6d3a; }221 .nav-icon { width: 54px; height: 54px; }222 .home-indicator {223 position: absolute;224 bottom: 8px;225 left: 50%;226 transform: translateX(-50%);227 width: 380px;228 height: 10px;229 border-radius: 6px;230 background: #cfcfcf;231 }232</style>233</head>234<body>235<div id="render-target">236 <!-- Status bar -->237 <div class="status-bar">238 11:55239 <div class="status-icons">240 <!-- Simple status icons -->241 <svg width="32" height="32" viewBox="0 0 24 24" fill="#fff" aria-hidden="true"><circle cx="12" cy="12" r="10" opacity="0.25"></circle><path d="M12 6v6l4 2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>242 <svg width="32" height="32" viewBox="0 0 24 24" fill="#fff"><path d="M9 11l3 3L22 4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>243 <svg width="32" height="32" viewBox="0 0 24 24" fill="#fff"><rect x="3" y="4" width="18" height="14" rx="2" fill="none" stroke="#fff" stroke-width="2"/><path d="M7 8h10v6H7z" fill="#fff"/></svg>244 <svg width="8" height="8"><circle cx="4" cy="4" r="4" fill="#fff" opacity="0.7"/></svg>245 <svg width="40" height="32" viewBox="0 0 24 24" fill="#fff"><path d="M3 13h18v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7z" opacity="0.25"/><path d="M7 8a5 5 0 0 1 10 0v5H7V8z" stroke="#fff" stroke-width="2" fill="none"/></svg>246 <svg width="32" height="32" viewBox="0 0 24 24" fill="#fff"><path d="M6 2h12v6H6z" opacity="0.25"/><path d="M18 7v10a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V7" stroke="#fff" stroke-width="2" fill="none"/></svg>247 </div>248 </div>249 250 <!-- Top app bar -->251 <div class="top-appbar">252 <div class="icon-btn">253 <svg width="44" height="44" viewBox="0 0 24 24" fill="none"><path d="M15 18l-6-6 6-6" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>254 </div>255 <div class="top-title"></div>256 <div class="appbar-actions">257 <div class="icon-btn" aria-label="search"><svg class="nav-icon" viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7" stroke="#6b6b6b" stroke-width="2"/><path d="M16.5 16.5L21 21" stroke="#6b6b6b" stroke-width="2" stroke-linecap="round"/></svg></div>258 <div class="icon-btn" aria-label="wishlist"><svg class="nav-icon" viewBox="0 0 24 24" fill="none"><path d="M12 21s-7-4.35-9-7.5C1 10 2.5 6 6 6c2 0 3.5 1.5 4 2 0.5-0.5 2-2 4-2 3.5 0 5 4 3 7.5-2 3.15-9 7.5-9 7.5z" stroke="#6b6b6b" stroke-width="2" fill="none"/></svg></div>259 <div class="icon-btn" aria-label="cart"><svg class="nav-icon" viewBox="0 0 24 24" fill="none"><path d="M3 4h2l2 12h10l2-8H7" stroke="#6b6b6b" stroke-width="2" fill="none" stroke-linecap="round"/><circle cx="9" cy="20" r="1.5" fill="#6b6b6b"/><circle cx="17" cy="20" r="1.5" fill="#6b6b6b"/></svg></div>260 </div>261 </div>262 263 <!-- Main content -->264 <div class="content">265 <div class="section">266 <h2 class="title">Customer Reviews & Images</h2>267 <div class="divider"></div>268 <div class="muted">Be the first one to review it and share your experience</div>269 270 <div class="sub-title">Submit A Review</div>271 272 <div class="row">273 <div class="stars">274 <span class="star">275 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="none" stroke="#bdbdbd" stroke-width="2"/></svg>276 </span>277 <span class="star">278 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="none" stroke="#bdbdbd" stroke-width="2"/></svg>279 </span>280 <span class="star">281 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="none" stroke="#bdbdbd" stroke-width="2"/></svg>282 </span>283 <span class="star">284 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="none" stroke="#bdbdbd" stroke-width="2"/></svg>285 </span>286 <span class="star">287 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="none" stroke="#bdbdbd" stroke-width="2"/></svg>288 </span>289 </div>290 <div class="upload-chip">291 <svg width="28" height="28" viewBox="0 0 24 24" fill="none"><rect x="3" y="6" width="18" height="12" rx="2" stroke="#b5662c" stroke-width="2"/><path d="M9 9h6l1 2h-8z" fill="#b5662c" opacity="0.25"/><circle cx="12" cy="12" r="2.2" stroke="#b5662c" stroke-width="2"/></svg>292 UPLOAD IMAGE293 </div>294 <div class="close-mini">×</div>295 </div>296 297 <div class="textarea">Describe your Shopping Experience</div>298 <div class="helper">Character Limit 0/300 Words</div>299 300 <div class="submit-row">301 <button class="btn-primary">SUBMIT</button>302 </div>303 304 <div class="divider" style="margin-top: 26px;"></div>305 306 <div class="accordion-header">307 <div>Q&A</div>308 <svg width="36" height="36" viewBox="0 0 24 24" fill="none"><path d="M6 9l6 6 6-6" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>309 </div>310 <div class="divider"></div>311 312 <div class="accordion-header">313 <div>Need Experts Advice?</div>314 <svg width="36" height="36" viewBox="0 0 24 24" fill="none"><path d="M6 9l6 6 6-6" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>315 </div>316 </div>317 318 <div class="light-section">319 <div class="promo-title">Check Out More Manual 1 Seater Recliners</div>320 <div class="gallery">321 <div class="img-ph">[IMG: Pink Recliner]</div>322 <div class="img-ph">[IMG: Blue Recliner]</div>323 <div class="img-ph">[IMG: Mauve Recliner]</div>324 </div>325 <div class="cta-row">326 <div class="btn-outline">ADD TO CART</div>327 <div class="btn-fill">BUY NOW</div>328 </div>329 </div>330 </div>331 332 <!-- Bottom navigation -->333 <div class="bottom-nav">334 <div class="nav-item active">335 <svg class="nav-icon" viewBox="0 0 24 24" fill="none"><path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2v-9z" stroke="#ff6d3a" stroke-width="2" fill="none"/></svg>336 <div>Home</div>337 </div>338 <div class="nav-item">339 <svg class="nav-icon" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="8" r="4" stroke="#777" stroke-width="2"/><path d="M4 20a8 8 0 0 1 16 0" stroke="#777" stroke-width="2" fill="none"/></svg>340 <div>My Account</div>341 </div>342 <div class="nav-item">343 <svg class="nav-icon" viewBox="0 0 24 24" fill="none"><rect x="3" y="6" width="18" height="12" rx="2" stroke="#777" stroke-width="2"/><path d="M3 10h18" stroke="#777" stroke-width="2"/></svg>344 <div>Gift Cards</div>345 </div>346 <div class="nav-item">347 <svg class="nav-icon" viewBox="0 0 24 24" fill="none"><path d="M6 20l6-16 6 16" stroke="#777" stroke-width="2"/><path d="M8 14h8" stroke="#777" stroke-width="2"/></svg>348 <div>Studios</div>349 </div>350 <div class="nav-item">351 <svg class="nav-icon" viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="7" height="7" stroke="#777" stroke-width="2"/><rect x="14" y="3" width="7" height="7" stroke="#777" stroke-width="2"/><rect x="3" y="14" width="7" height="7" stroke="#777" stroke-width="2"/><rect x="14" y="14" width="7" height="7" stroke="#777" stroke-width="2"/></svg>352 <div>Categories</div>353 </div>354 </div>355 <div class="home-indicator"></div>356</div>357</body>358</html>