GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Product Q&A and Similar Items</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #f6d3df; /* pink header/background tint from screenshot */13 }14 /* Status bar */15 .statusbar {16 height: 64px;17 padding: 16px 24px 0 24px;18 font-size: 30px;19 color: #313131;20 display: flex;21 align-items: center;22 justify-content: space-between;23 }24 .status-icons span { margin-left: 18px; opacity: 0.85; }25 /* Search + top actions */26 .topbar {27 display: flex;28 align-items: center;29 padding: 10px 18px 18px 18px;30 }31 .icon-btn {32 width: 72px; height: 72px; border-radius: 36px;33 display: flex; align-items: center; justify-content: center;34 cursor: default;35 }36 .search-field {37 flex: 1;38 height: 88px;39 background: #fff;40 border-radius: 44px;41 display: flex;42 align-items: center;43 padding: 0 26px;44 box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;45 border: 1px solid #e7e7e7;46 margin-left: 6px;47 }48 .search-field input {49 flex: 1; border: none; outline: none; font-size: 34px; color: #333;50 }51 .search-icons { display: flex; align-items: center; gap: 18px; }52 .cart-wrapper {53 width: 86px;54 display: flex; align-items: center; justify-content: center; position: relative;55 }56 .badge {57 position: absolute; right: 10px; top: 4px;58 min-width: 40px; height: 40px; border-radius: 20px;59 background: #e53935; color: #fff; font-size: 26px; line-height: 40px; text-align: center;60 border: 2px solid #fff;61 }62 63 /* Content area */64 .content {65 position: absolute;66 top: 170px; /* below pink header area */67 left: 0;68 right: 0;69 bottom: 0;70 background: #ffffff;71 border-top-left-radius: 22px;72 border-top-right-radius: 22px;73 box-shadow: 0 -1px 0 rgba(0,0,0,0.04);74 }75 76 .review-block {77 padding: 26px 32px 6px 32px;78 color: #333;79 font-size: 34px;80 line-height: 44px;81 }82 .review-small {83 color: #6d6d6d; font-size: 28px; display: flex; align-items: center; gap: 20px; margin-top: 18px;84 }85 .chip {86 display: inline-flex;87 align-items: center;88 gap: 12px;89 padding: 10px 18px;90 font-size: 28px;91 background: #f3f4f6;92 border: 1px solid #e1e3e6;93 border-radius: 28px;94 margin-right: 16px;95 color: #333;96 }97 .divider { height: 18px; background: #f7f7f7; margin: 18px 0; }98 99 .row-link {100 padding: 22px 32px;101 display: flex; align-items: center; justify-content: space-between;102 font-size: 36px; font-weight: 600; color: #111;103 border-bottom: 1px solid #efefef;104 }105 106 .section-title {107 padding: 26px 32px 10px 32px;108 font-size: 38px; font-weight: 700; color: #202124;109 }110 .qa-item { padding: 10px 32px 16px 32px; }111 .qline, .aline { font-size: 34px; color: #111; margin: 12px 0; }112 .qline span.q { color: #0d47a1; font-weight: 700; margin-right: 8px; }113 .aline span.a { color: #2e7d32; font-weight: 700; margin-right: 8px; }114 .person { font-size: 30px; color: #333; margin-top: 6px; }115 .subrow { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }116 .left-mini { display: flex; align-items: center; gap: 14px; }117 .tick {118 width: 28px; height: 28px; border-radius: 50%; background: #1e88e5; color: #fff;119 display: inline-flex; align-items: center; justify-content: center; font-size: 20px;120 }121 .muted { color: #6d6d6d; font-size: 28px; }122 123 .ask-box {124 margin: 18px 32px;125 border: 2px solid #e8e8e8;126 border-radius: 18px;127 padding: 20px;128 }129 .ask-title { font-size: 34px; color: #333; }130 .ask-btn {131 margin-top: 16px;132 height: 90px;133 border-radius: 14px;134 border: 2px solid #cdd3d9;135 font-size: 34px;136 color: #0d47a1;137 display: flex; align-items: center; justify-content: center;138 background: #fafcff;139 }140 141 .compare-title {142 padding: 22px 32px 12px 32px;143 font-size: 40px; font-weight: 700; color: #111;144 }145 .carousel {146 display: flex; gap: 28px; padding: 8px 28px 160px 28px; overflow: hidden;147 }148 .card {149 width: 290px; border: 1px solid #e3e3e3; border-radius: 16px; padding: 16px; background: #fff;150 }151 .img {152 width: 100%; height: 210px; background: #E0E0E0; border: 1px solid #BDBDBD;153 display: flex; align-items: center; justify-content: center; color: #777; font-size: 26px; border-radius: 12px;154 }155 .tag { margin-top: 12px; font-size: 28px; color: #555; }156 .pname { font-size: 30px; color: #222; line-height: 36px; height: 72px; overflow: hidden; }157 158 /* Bottom sticky bar */159 .sticky-bar {160 position: absolute; bottom: 0; left: 0; right: 0; height: 138px; background: #fff;161 border-top: 1px solid #ececec; display: flex; align-items: center; padding: 18px 24px; gap: 22px;162 }163 .mini-btn {164 width: 160px; height: 100px; border: 1px dashed #c6c6c6; border-radius: 16px;165 display: flex; align-items: center; justify-content: center; color: #333; font-size: 30px;166 background: #fafafa;167 }168 .emi-btn {169 flex: 1; height: 100px; border: 1px solid #dfe3e6; border-radius: 16px; background: #f8fbff; color: #0d47a1; font-size: 36px;170 display: flex; align-items: center; justify-content: center;171 }172 .buy-btn {173 width: 380px; height: 100px; border-radius: 16px; background: #f8c446; color: #111; font-weight: 700; font-size: 38px;174 display: flex; align-items: center; justify-content: center;175 }176 /* Floating action button */177 .fab {178 position: absolute; right: 38px; bottom: 186px; width: 152px; height: 152px;179 background: radial-gradient(circle at 35% 35%, #ffeb3b 40%, #1565c0 42%);180 border-radius: 50%; box-shadow: 0 8px 20px rgba(0,0,0,0.2);181 display: flex; align-items: center; justify-content: center;182 }183 .fab span { font-size: 72px; color: #003; font-weight: 900; transform: translateX(-6px); }184 /* Simple SVG helpers */185 .svg { width: 44px; height: 44px; }186 .svg.lg { width: 52px; height: 52px; }187</style>188</head>189<body>190<div id="render-target">191 192 <!-- Pink header area -->193 <div class="statusbar">194 <div>7:27</div>195 <div class="status-icons">196 <span>◔</span>197 <span>◉</span>198 <span>✈</span>199 <span>🔋</span>200 </div>201 </div>202 203 <div class="topbar">204 <div class="icon-btn">205 <!-- back arrow -->206 <svg class="svg lg" viewBox="0 0 24 24">207 <path d="M15 4 L7 12 L15 20" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>208 </svg>209 </div>210 <div class="search-field">211 <svg class="svg" viewBox="0 0 24 24" style="margin-right:10px;">212 <circle cx="10" cy="10" r="7" stroke="#777" stroke-width="2" fill="none"></circle>213 <line x1="15" y1="15" x2="21" y2="21" stroke="#777" stroke-width="2"></line>214 </svg>215 <input type="text" value="Search for products" />216 <div class="search-icons">217 <!-- microphone -->218 <svg class="svg" viewBox="0 0 24 24">219 <rect x="9" y="3" width="6" height="10" rx="3" ry="3" fill="#666"></rect>220 <path d="M5 11 C5 15, 19 15, 19 11" stroke="#666" stroke-width="2" fill="none"></path>221 <line x1="12" y1="15" x2="12" y2="21" stroke="#666" stroke-width="2"></line>222 <line x1="9" y1="21" x2="15" y2="21" stroke="#666" stroke-width="2"></line>223 </svg>224 </div>225 </div>226 <div class="cart-wrapper">227 <!-- cart -->228 <svg class="svg lg" viewBox="0 0 24 24">229 <circle cx="9" cy="20" r="1.5" fill="#333"></circle>230 <circle cx="17" cy="20" r="1.5" fill="#333"></circle>231 <path d="M3 4 H6 L7.5 14 H18 L21 7 H8" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>232 </svg>233 <div class="badge">1</div>234 </div>235 </div>236 237 <!-- White content area -->238 <div class="content">239 240 <div class="review-block">241 Two boards made of engineering wood with black tape, all over finishing is not perfect. Single star less due to boards are not perfect. One littl...242 <div class="review-small">243 <span class="chip">Helpful for 9</span>244 <span class="chip">9</span>245 </div>246 <div class="review-small" style="margin-top: 18px;">247 <span style="color:#2e7d32;">✔ Verified Purchase</span>248 <span>· Apr, 2022</span>249 </div>250 </div>251 252 <div class="divider"></div>253 254 <div class="row-link">255 <div>All 11 reviews</div>256 <svg class="svg" viewBox="0 0 24 24">257 <path d="M8 4 L16 12 L8 20" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>258 </svg>259 </div>260 261 <div class="section-title">Questions and Answers</div>262 263 <div class="qa-item">264 <div class="qline"><span class="q">Q:</span>Can we adjust the height manually, if the motor fails ??</div>265 <div class="aline"><span class="a">A:</span>You can but require proper tools</div>266 <div class="person">Harsha M</div>267 <div class="subrow">268 <div class="left-mini">269 <div class="chip">Helpful for 7</div>270 <div class="chip">💬</div>271 </div>272 <div class="muted">⋮</div>273 </div>274 <div class="left-mini" style="margin-top: 16px;">275 <span class="tick">✔</span>276 <span class="muted">Certified Buyer</span>277 </div>278 </div>279 280 <div class="ask-box">281 <div class="ask-title">Didn't get the right answer you are looking for</div>282 <div class="ask-btn">POST YOUR QUESTION</div>283 </div>284 285 <div class="compare-title">Similar Products to Compare</div>286 287 <div class="carousel">288 <div class="card">289 <div class="img">[IMG: This item desk]</div>290 <div class="tag">This item</div>291 <div class="pname">GREEN SOUL ...</div>292 </div>293 <div class="card">294 <div class="img">[IMG: Gaming desk]</div>295 <div class="tag">SAVYA HOME</div>296 <div class="pname">Electric Height...</div>297 </div>298 <div class="card">299 <div class="img">[IMG: Office desk]</div>300 <div class="tag">Some brand</div>301 <div class="pname">Smart Height Adjustable Desk</div>302 </div>303 <div class="card">304 <div class="img">[IMG: Modern desk]</div>305 <div class="tag">Another brand</div>306 <div class="pname">Sit Stand Table</div>307 </div>308 </div>309 310 <!-- Floating button -->311 <div class="fab"><span>f</span></div>312 313 <!-- Bottom sticky buttons -->314 <div class="sticky-bar">315 <div class="mini-btn">🛍＋</div>316 <div class="emi-btn">Pay with EMI</div>317 <div class="buy-btn">Buy now</div>318 </div>319 320 </div>321 322</div>323</body>324</html>