GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Q&A Product Page Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:#222; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background:#ffffff;14 border-radius: 20px;15 box-shadow: 0 8px 24px rgba(0,0,0,0.12);16 }17 /* Status bar */18 .status-bar {19 height: 90px;20 background:#f5f5f7;21 display:flex;22 align-items:center;23 padding: 0 28px;24 font-size:34px;25 color:#222;26 }27 .status-right {28 margin-left:auto;29 display:flex;30 align-items:center;31 gap:26px;32 color:#666;33 }34 /* Header search row */35 .header {36 background:#f5f5f7;37 padding: 20px 24px 28px 24px;38 border-bottom:1px solid #e6e6e6;39 }40 .search-row {41 display:flex;42 align-items:center;43 gap:18px;44 }45 .icon-btn {46 width:72px; height:72px;47 display:flex; align-items:center; justify-content:center;48 border-radius:16px;49 color:#333;50 }51 .search-box {52 flex:1;53 height:88px;54 background:#fff;55 border:1px solid #dcdcdc;56 border-radius:22px;57 display:flex;58 align-items:center;59 padding:0 22px;60 box-shadow: 0 1px 0 rgba(0,0,0,0.05);61 }62 .search-box input {63 border:none; outline:none; font-size:34px; flex:1; color:#222; background:transparent;64 }65 .title {66 font-size:48px; font-weight:700; margin: 26px 10px 0 10px; color:#222;67 }68 /* Q&A list */69 .list {70 padding: 8px 24px 0 24px;71 }72 .qa-item {73 border-bottom:1px solid #eaeaea;74 padding: 32px 0;75 position: relative;76 }77 .qa-item .more {78 position:absolute; right:10px; top:40px; color:#888;79 }80 .q-label, .a-label { font-weight:700; font-size:40px; }81 .q-text, .a-text { font-size:40px; line-height:1.3; margin-top:8px; }82 .a-label { margin-top:16px; }83 .meta {84 margin-top:22px;85 display:flex; align-items:center; gap:18px; flex-wrap:wrap;86 color:#666; font-size:34px;87 }88 .pill {89 display:flex; align-items:center; gap:12px;90 background:#f3f3f3; border:1px solid #d9d9d9;91 padding:14px 20px; border-radius:50px; color:#333;92 font-size:34px;93 }94 .badge {95 display:flex; align-items:center; gap:10px; color:#4a4a4a; font-size:32px;96 }97 /* All questions row */98 .all-questions {99 padding: 26px 24px;100 display:flex; align-items:center; border-top:1px solid #eaeaea;101 border-bottom:1px solid #eaeaea;102 }103 .all-questions .text { font-size:44px; font-weight:700; }104 .spacer { flex:1; }105 /* Similar products */106 .similar-title { font-size:48px; font-weight:700; margin: 28px 24px; }107 .products {108 display:flex; gap:30px; padding: 0 24px 240px 24px;109 }110 .prod {111 width:240px;112 display:flex; flex-direction:column; align-items:center; gap:16px;113 }114 .img {115 width:240px; height:220px; background:#E0E0E0; border:1px solid #BDBDBD;116 display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px; text-align:center; border-radius:8px;117 }118 .prod-name { font-size:34px; color:#333; text-align:center; }119 /* Bottom action bar */120 .bottom-bar {121 position:absolute; bottom:0; left:0; right:0;122 background:#ffffff;123 border-top:1px solid #e6e6e6;124 padding: 24px;125 display:flex; align-items:center; gap:24px;126 }127 .mini-btn {128 width:180px; height:120px; border:1px solid #d7d7d7; border-radius:24px;129 display:flex; align-items:center; justify-content:center; background:#fff;130 }131 .emi-btn {132 flex:1; height:120px; border:1px solid #d7d7d7; border-radius:24px; background:#ffffff;133 display:flex; align-items:center; justify-content:center; font-size:40px; color:#222; font-weight:600;134 }135 .buy-btn {136 width:360px; height:120px; border-radius:24px; background:#ffc53d;137 display:flex; align-items:center; justify-content:center; font-size:42px; font-weight:800; color:#3a2a00;138 box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08);139 }140 /* Floating support */141 .floating {142 position:absolute; right:32px; bottom:220px; width:160px; height:160px;143 background:#2e6ff2; border-radius:80px; box-shadow:0 6px 16px rgba(0,0,0,0.2);144 display:flex; align-items:center; justify-content:center;145 }146 .floating .inner {147 width:120px; height:120px; background:#ffd54d; border-radius:60px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:64px; color:#1e3fa1;148 }149 /* Gesture bar */150 .gesture {151 position:absolute; bottom:8px; left:50%; transform:translateX(-50%);152 width:360px; height:10px; background:#000; border-radius:6px; opacity:0.08;153 }154 /* small helpers */155 .muted { color:#777; }156</style>157</head>158<body>159<div id="render-target">160 161 <!-- Status Bar -->162 <div class="status-bar">163 <div>8:16</div>164 <div class="status-right">165 <span>◉</span>166 <span>ib</span>167 <span>LR</span>168 <span>•</span>169 <span>⏻</span>170 <span>🔊</span>171 <span>87%</span>172 </div>173 </div>174 175 <!-- Header with Search -->176 <div class="header">177 <div class="search-row">178 <div class="icon-btn" aria-label="Back">179 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>180 </div>181 <div class="search-box">182 <svg width="42" height="42" viewBox="0 0 24 24" style="margin-right:14px;"><circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/><path d="M20 20l-4.5-4.5" stroke="#777" stroke-width="2" stroke-linecap="round"/></svg>183 <input type="text" value="Search for products">184 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 3a4 4 0 014 4v3a4 4 0 01-8 0V7a4 4 0 014-4zm0 13v5" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/></svg>185 </div>186 <div class="icon-btn" aria-label="Cart">187 <svg width="46" height="46" viewBox="0 0 24 24"><path d="M6 6h14l-2 9H7L6 6z" fill="none" stroke="#333" stroke-width="2"/><circle cx="9" cy="20" r="1.5" fill="#333"/><circle cx="17" cy="20" r="1.5" fill="#333"/></svg>188 </div>189 </div>190 <div class="title">Questions and Answers</div>191 </div>192 193 <!-- Q&A List -->194 <div class="list">195 196 <!-- Item 1 -->197 <div class="qa-item">198 <div class="more">199 <svg width="32" height="32" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2" fill="#999"/><circle cx="12" cy="12" r="2" fill="#999"/><circle cx="19" cy="12" r="2" fill="#999"/></svg>200 </div>201 <div class="q-label">Q: Does the machine heat up quick??</div>202 <div class="a-label muted">A:</div>203 <div class="a-text">no</div>204 <div class="meta">205 <span class="muted">Harekrushna...</span>206 <div class="pill">207 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M6 14h3v6l6-11h3L12 3 6 14z" fill="#777"/></svg>208 Helpful for 9209 </div>210 <div class="pill">211 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M3 4h18v12H8l-5 4V4z" fill="none" stroke="#777" stroke-width="2"/></svg>212 1213 </div>214 </div>215 <div class="meta">216 <div class="badge">217 <svg width="32" height="32" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#4CAF50" stroke-width="2" fill="none"/><path d="M7 12l3 3 7-7" stroke="#4CAF50" stroke-width="2" fill="none" stroke-linecap="round"/></svg>218 Certified Buyer219 </div>220 </div>221 </div>222 223 <!-- Item 2 -->224 <div class="qa-item">225 <div class="more">226 <svg width="32" height="32" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2" fill="#999"/><circle cx="12" cy="12" r="2" fill="#999"/><circle cx="19" cy="12" r="2" fill="#999"/></svg>227 </div>228 <div class="q-label">Q: Can I use it in a 6 inch concrete slab for making holes</div>229 <div class="a-label muted">A:</div>230 <div class="a-text">yes</div>231 <div class="meta">232 <span class="muted">WalkersTec...</span>233 <div class="pill">234 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M6 14h3v6l6-11h3L12 3 6 14z" fill="#777"/></svg>235 Helpful for 2236 </div>237 <div class="pill">238 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M3 4h18v12H8l-5 4V4z" fill="none" stroke="#777" stroke-width="2"/></svg>239 </div>240 </div>241 <div class="meta">242 <div class="badge">243 <svg width="32" height="32" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#4CAF50" stroke-width="2" fill="none"/><path d="M7 12l3 3 7-7" stroke="#4CAF50" stroke-width="2" fill="none" stroke-linecap="round"/></svg>244 Flipkart Seller245 </div>246 </div>247 </div>248 249 <!-- Item 3 -->250 <div class="qa-item">251 <div class="more">252 <svg width="32" height="32" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2" fill="#999"/><circle cx="12" cy="12" r="2" fill="#999"/><circle cx="19" cy="12" r="2" fill="#999"/></svg>253 </div>254 <div class="q-label">Q: How many months warranty is there in this product</div>255 <div class="a-label muted">A:</div>256 <div class="a-text">2000</div>257 <div class="meta">258 <span class="muted">Flipkart Cust...</span>259 <div class="pill">260 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M6 14h3v6l6-11h3L12 3 6 14z" fill="#777"/></svg>261 Helpful for 12262 </div>263 <div class="pill">264 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M3 4h18v12H8l-5 4V4z" fill="none" stroke="#777" stroke-width="2"/></svg>265 29266 </div>267 </div>268 <div class="meta">269 <div class="badge">270 <svg width="32" height="32" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#4CAF50" stroke-width="2" fill="none"/><path d="M7 12l3 3 7-7" stroke="#4CAF50" stroke-width="2" fill="none" stroke-linecap="round"/></svg>271 Certified Buyer272 </div>273 </div>274 </div>275 276 <!-- All Questions -->277 <div class="all-questions">278 <div class="text">All Questions</div>279 <div class="spacer"></div>280 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>281 </div>282 283 <!-- Similar Products -->284 <div class="similar-title">Similar Products to Compare</div>285 <div class="products">286 <div class="prod">287 <div class="img">[IMG: Drill Case]</div>288 <div class="prod-name">Hillgrove</div>289 </div>290 <div class="prod">291 <div class="img">[IMG: Drill Kit]</div>292 <div class="prod-name">Hillgrove</div>293 </div>294 <div class="prod">295 <div class="img">[IMG: Drill Kit]</div>296 <div class="prod-name">DUMDAA</div>297 </div>298 </div>299 </div>300 301 <!-- Bottom Action Bar -->302 <div class="bottom-bar">303 <div class="mini-btn" aria-label="Cart Add">304 <svg width="64" height="64" viewBox="0 0 24 24">305 <path d="M6 6h14l-2 9H7L6 6z" fill="none" stroke="#333" stroke-width="2"/>306 <path d="M4 4h3" stroke="#333" stroke-width="2" stroke-linecap="round"/>307 <path d="M4 12h3" stroke="#333" stroke-width="2" stroke-linecap="round"/>308 <circle cx="9" cy="20" r="1.5" fill="#333"/><circle cx="17" cy="20" r="1.5" fill="#333"/>309 </svg>310 <svg width="34" height="34" viewBox="0 0 24 24" style="margin-left:10px;"><path d="M12 5v14M5 12h14" stroke="#2e6ff2" stroke-width="2" stroke-linecap="round"/></svg>311 </div>312 <div class="emi-btn">Pay with EMI</div>313 <div class="buy-btn">Buy now</div>314 </div>315 316 <!-- Floating support -->317 <div class="floating">318 <div class="inner">f</div>319 </div>320 321 <div class="gesture"></div>322</div>323</body>324</html>