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.0">6<title>Q&A Screen</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #FFFFFF; color: #1f1f1f;13 }14 15 /* Status bar */16 .status-bar {17 height: 96px;18 display: flex; align-items: center; justify-content: space-between;19 padding: 0 36px;20 font-weight: 600; font-size: 38px; color: #111;21 }22 .status-right { display: flex; gap: 28px; align-items: center; color: #444; }23 .status-icon { width: 40px; height: 40px; opacity: 0.8; }24 25 /* Top search row */26 .top-row {27 padding: 24px 30px 16px 24px;28 display: flex; align-items: center; gap: 24px;29 }30 .icon-btn {31 width: 72px; height: 72px; border-radius: 36px;32 display: flex; align-items: center; justify-content: center;33 }34 .search-box {35 flex: 1;36 background: #F1F2F4;37 border: 1px solid #E5E7EB;38 height: 96px; border-radius: 24px;39 display: flex; align-items: center;40 padding: 0 28px;41 gap: 20px;42 }43 .search-placeholder { color: #8A8A8A; font-size: 36px; }44 .search-actions { margin-left: auto; display: flex; gap: 20px; align-items: center; }45 .cart-wrap { position: relative; }46 .badge {47 position: absolute; top: -6px; right: -6px;48 background: #E53935; color: #fff; font-size: 28px; line-height: 28px;49 min-width: 40px; height: 40px; padding: 0 8px;50 border-radius: 20px; display: flex; align-items: center; justify-content: center;51 border: 2px solid #fff;52 }53 54 /* Verified row */55 .verified-row {56 display: flex; align-items: center; gap: 16px;57 padding: 8px 36px 20px 36px;58 color: #666; font-size: 32px;59 }60 61 /* Reviews link row */62 .reviews-link {63 display: flex; align-items: center; justify-content: space-between;64 padding: 30px 36px;65 border-top: 1px solid #eee; border-bottom: 1px solid #eee;66 font-size: 36px; color: #111; background: #fff;67 }68 .chev-right { width: 44px; height: 44px; }69 70 /* Q&A header */71 .qa-header {72 display: flex; align-items: center; justify-content: space-between;73 padding: 36px;74 }75 .qa-title { font-size: 52px; font-weight: 700; color: #111; }76 .search-btn {77 display: flex; align-items: center; gap: 16px;78 border: 1px solid #D6D6D6; border-radius: 18px;79 padding: 18px 26px; color: #2979FF; font-weight: 600; font-size: 36px; background: #fff;80 }81 .search-btn svg { width: 40px; height: 40px; }82 83 /* Q&A card */84 .qa-card { padding: 32px 36px; border-bottom: 1px solid #eee; position: relative; }85 .question { font-size: 40px; font-weight: 700; margin-bottom: 16px; color: #111; }86 .answer { font-size: 36px; color: #333; margin-bottom: 20px; }87 .author { font-size: 32px; color: #9aa0a6; margin-bottom: 22px; }88 .chip-row { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }89 .chip {90 display: inline-flex; align-items: center; gap: 14px;91 padding: 16px 22px; border: 1px solid #DADCE0; border-radius: 30px;92 font-size: 32px; color: #4a4a4a; background: #fff;93 }94 .verified { display: flex; align-items: center; gap: 12px; color: #666; font-size: 32px; margin: 8px 0 12px; }95 .other-answers { color: #5f6368; font-size: 34px; font-weight: 600; }96 .more-vert {97 position: absolute; right: 36px; top: 40px;98 width: 56px; height: 100px; display: flex; align-items: center; justify-content: center;99 color: #777;100 }101 102 /* Bottom action bar */103 .action-bar {104 position: absolute; bottom: 90px; left: 0; right: 0;105 display: flex; gap: 24px; padding: 24px 24px;106 }107 .action {108 flex: 1; height: 120px; border-radius: 24px; display: flex; align-items: center; justify-content: center;109 font-size: 40px; font-weight: 700;110 }111 .action.white { background: #fff; border: 1px solid #E5E7EB; color: #333; }112 .action.yellow { background: #FFC107; color: #111; }113 114 .cart-plus {115 flex: 0 0 240px; background: #fff; border: 1px solid #E5E7EB; color: #333;116 display: flex; align-items: center; justify-content: center; gap: 12px; border-radius: 24px;117 }118 119 /* Floating help button */120 .float-help {121 position: absolute; right: 36px; bottom: 280px;122 width: 120px; height: 120px; border-radius: 60px;123 background: #2368FF; box-shadow: 0 8px 20px rgba(0,0,0,0.2);124 display: flex; align-items: center; justify-content: center; color: #FFD500; font-size: 54px; font-weight: 900;125 }126 127 /* Home indicator */128 .home-indicator {129 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);130 width: 360px; height: 14px; background: #000; opacity: 0.12; border-radius: 8px;131 }132 133 /* Simple utility icons */134 svg { display: block; }135</style>136</head>137<body>138<div id="render-target">139 140 <!-- Status Bar -->141 <div class="status-bar">142 <div style="display:flex;align-items:center;gap:14px;">143 <span>10:36</span>144 <span style="width:36px;height:36px;border-radius:18px;background:#ddd;display:inline-block;"></span>145 </div>146 <div class="status-right">147 <!-- Wi-Fi -->148 <svg class="status-icon" viewBox="0 0 24 24">149 <path d="M2 8c5-5 15-5 20 0" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>150 <path d="M6 12c3-3 9-3 12 0" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>151 <circle cx="12" cy="16" r="2" fill="#555"></circle>152 </svg>153 <!-- Battery -->154 <svg class="status-icon" viewBox="0 0 28 16">155 <rect x="1" y="2" width="22" height="12" rx="2" ry="2" stroke="#555" fill="none" stroke-width="2"/>156 <rect x="3" y="4" width="16" height="8" fill="#555"/>157 <rect x="24" y="5" width="3" height="6" rx="1" fill="#555"/>158 </svg>159 </div>160 </div>161 162 <!-- Search Row -->163 <div class="top-row">164 <div class="icon-btn">165 <svg width="44" height="44" viewBox="0 0 24 24">166 <path d="M15 6 L9 12 L15 18" stroke="#333" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>167 </svg>168 </div>169 <div class="search-box">170 <svg width="42" height="42" viewBox="0 0 24 24">171 <circle cx="11" cy="11" r="7" stroke="#757575" stroke-width="2" fill="none"/>172 <path d="M20 20 L16 16" stroke="#757575" stroke-width="2" stroke-linecap="round"/>173 </svg>174 <div class="search-placeholder">Search for products</div>175 <div class="search-actions">176 <svg width="40" height="40" viewBox="0 0 24 24">177 <rect x="9" y="4" width="6" height="12" rx="3" fill="#757575"/>178 <rect x="11" y="16" width="2" height="3" fill="#757575"/>179 </svg>180 </div>181 </div>182 <div class="cart-wrap">183 <svg width="64" height="64" viewBox="0 0 24 24">184 <path d="M4 6h16l-2 9H7L5 6z" stroke="#333" stroke-width="1.8" fill="none"/>185 <circle cx="9" cy="19" r="2" fill="#333"/>186 <circle cx="17" cy="19" r="2" fill="#333"/>187 </svg>188 <div class="badge">1</div>189 </div>190 </div>191 192 <!-- Verified Purchase -->193 <div class="verified-row">194 <svg width="36" height="36" viewBox="0 0 24 24">195 <circle cx="12" cy="12" r="10" fill="#111"/>196 <path d="M8 12l2 2 4-4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>197 </svg>198 <span>Verified Purchase · 2 months ago</span>199 </div>200 201 <!-- Reviews quick link -->202 <div class="reviews-link">203 <div>All 214 reviews</div>204 <svg class="chev-right" viewBox="0 0 24 24">205 <path d="M9 6l6 6-6 6" stroke="#333" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>206 </svg>207 </div>208 209 <!-- Q&A Header -->210 <div class="qa-header">211 <div class="qa-title">Questions and Answers</div>212 <div class="search-btn">213 <svg viewBox="0 0 24 24">214 <circle cx="11" cy="11" r="7" stroke="#2979FF" stroke-width="2" fill="none"/>215 <path d="M20 20 L16 16" stroke="#2979FF" stroke-width="2" stroke-linecap="round"/>216 </svg>217 <span>Search</span>218 </div>219 </div>220 221 <!-- Q&A Card 1 -->222 <div class="qa-card">223 <div class="question">Q: What is the material used in iphone 15 body, is it titanuim or any other material?</div>224 <div class="answer">A: It's aluminium</div>225 <div class="author">Aravind Kart...</div>226 227 <div class="chip-row">228 <div class="chip"><span>👍</span> <span>Helpful for 146</span></div>229 <div class="chip"><span>👎</span> <span>61</span></div>230 </div>231 232 <div class="verified">233 <svg width="34" height="34" viewBox="0 0 24 24">234 <circle cx="12" cy="12" r="10" fill="#111"/>235 <path d="M8 12l2 2 4-4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>236 </svg>237 <span>Certified Buyer</span>238 </div>239 240 <div class="other-answers">Read other answers</div>241 242 <div class="more-vert">243 <svg width="10" height="40" viewBox="0 0 6 18">244 <circle cx="3" cy="3" r="2" fill="#777"/>245 <circle cx="3" cy="9" r="2" fill="#777"/>246 <circle cx="3" cy="15" r="2" fill="#777"/>247 </svg>248 </div>249 </div>250 251 <!-- Q&A Card 2 -->252 <div class="qa-card">253 <div class="question">Q: 128 gb is enough for iPhone 15 to buy.</div>254 <div class="answer">A: It's up to you how you use space. Manageable, it is better to buy 256 gb.</div>255 <div class="author">Mohammed ...</div>256 257 <div class="chip-row">258 <div class="chip"><span>👍</span> <span>Helpful for 10</span></div>259 <div class="chip"><span>👎</span> <span>1</span></div>260 </div>261 262 <div class="verified">263 <svg width="34" height="34" viewBox="0 0 24 24">264 <circle cx="12" cy="12" r="10" fill="#111"/>265 <path d="M8 12l2 2 4-4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>266 </svg>267 <span>Certified Buyer</span>268 </div>269 270 <div class="other-answers">Read other answers</div>271 272 <div class="more-vert">273 <svg width="10" height="40" viewBox="0 0 6 18">274 <circle cx="3" cy="3" r="2" fill="#777"/>275 <circle cx="3" cy="9" r="2" fill="#777"/>276 <circle cx="3" cy="15" r="2" fill="#777"/>277 </svg>278 </div>279 </div>280 281 <!-- Q&A Card 3 -->282 <div class="qa-card">283 <div class="question">Q: Digital zoom<br>Kitna h</div>284 <div class="answer">A: 10X</div>285 <div class="author">Siddhartha ...</div>286 287 <div class="chip-row">288 <div class="chip"><span>👍</span> <span>Helpful for 57</span></div>289 <div class="chip"><span>👎</span> <span>22</span></div>290 </div>291 292 <div class="verified">293 <svg width="34" height="34" viewBox="0 0 24 24">294 <circle cx="12" cy="12" r="10" fill="#111"/>295 <path d="M8 12l2 2 4-4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>296 </svg>297 <span>Certified Buyer</span>298 </div>299 300 <div class="other-answers">Read other answers</div>301 302 <div class="more-vert">303 <svg width="10" height="40" viewBox="0 0 6 18">304 <circle cx="3" cy="3" r="2" fill="#777"/>305 <circle cx="3" cy="9" r="2" fill="#777"/>306 <circle cx="3" cy="15" r="2" fill="#777"/>307 </svg>308 </div>309 </div>310 311 <!-- Bottom Action Bar -->312 <div class="action-bar">313 <div class="cart-plus">314 <svg width="56" height="56" viewBox="0 0 24 24">315 <path d="M4 6h16l-2 9H7L5 6z" stroke="#333" stroke-width="1.8" fill="none"/>316 <circle cx="9" cy="19" r="2" fill="#333"/>317 <circle cx="17" cy="19" r="2" fill="#333"/>318 </svg>319 <svg width="28" height="28" viewBox="0 0 24 24">320 <path d="M12 6v12M6 12h12" stroke="#333" stroke-width="2" stroke-linecap="round"/>321 </svg>322 </div>323 <div class="action white">Pay with EMI</div>324 <div class="action yellow">Buy now</div>325 </div>326 327 <!-- Floating help -->328 <div class="float-help">F</div>329 330 <!-- Home indicator -->331 <div class="home-indicator"></div>332 333</div>334</body>335</html>