GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Q&A and Review - Mobile UI</title>6<meta name="viewport" content="width=1440, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1440px;11 height: 3120px;12 position: relative;13 overflow: hidden;14 background: #2b2b2b; /* outer styles on root */15 color: #ECECEC;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1440px;24 height: 120px;25 background: #3a3a3a;26 color: #fff;27 display: flex;28 align-items: center;29 padding: 0 48px;30 box-sizing: border-box;31 font-weight: 600;32 letter-spacing: 0.5px;33 }34 .status-left, .status-right { display: flex; align-items: center; }35 .status-left { gap: 28px; font-size: 44px; }36 .status-right { margin-left: auto; gap: 28px; }37 .status-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }38 39 /* App bar */40 .app-bar {41 position: absolute;42 top: 120px;43 left: 0;44 width: 1440px;45 height: 160px;46 background: #1f1f1f;47 display: flex;48 align-items: center;49 padding: 0 48px;50 box-sizing: border-box;51 }52 .app-left { display: flex; align-items: center; gap: 36px; }53 .app-right { margin-left: auto; display: flex; align-items: center; gap: 28px; }54 .icon-btn { width: 88px; height: 88px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; }55 .cart {56 position: relative;57 width: 96px;58 height: 96px;59 display: inline-flex;60 align-items: center;61 justify-content: center;62 background: #2e2e2e;63 border-radius: 18px;64 }65 .badge {66 position: absolute;67 top: -6px;68 right: -6px;69 background: #F5A623;70 color: #000;71 font-weight: 800;72 font-size: 34px;73 line-height: 54px;74 width: 54px;75 height: 54px;76 border-radius: 50%;77 text-align: center;78 box-shadow: 0 2px 0 rgba(0,0,0,0.3);79 }80 81 /* Main content area */82 .content {83 position: absolute;84 top: 280px;85 left: 0;86 right: 0;87 bottom: 320px; /* leave room for bottom bar & indicator */88 padding: 24px 72px 120px 72px;89 box-sizing: border-box;90 overflow-y: auto;91 }92 93 .qa-card {94 border: 2px solid #8d8d8d;95 border-radius: 28px;96 padding: 40px 40px;97 margin-bottom: 32px;98 background: rgba(255,255,255,0.04);99 color: #e7e7e7;100 }101 .qa-card .q { font-size: 40px; line-height: 1.4; margin-bottom: 20px; }102 .qa-card .a { font-size: 40px; line-height: 1.5; color: #d6d6d6; }103 104 .section-title {105 font-size: 56px;106 font-weight: 800;107 margin: 64px 0 24px 0;108 }109 .progress {110 width: 1296px;111 height: 18px;112 background: #151515;113 border-radius: 10px;114 overflow: hidden;115 margin-bottom: 36px;116 }117 .progress .yellow {118 width: 520px; /* partial progress to match screenshot */119 height: 100%;120 background: #FFC53D;121 }122 123 .review {124 font-size: 40px;125 line-height: 1.6;126 color: #e9e9e9;127 margin-bottom: 60px;128 }129 130 .subsection {131 font-size: 52px;132 font-weight: 800;133 margin: 52px 0 24px 0;134 }135 136 .pros-list, .cons-list {137 list-style: none;138 padding: 0;139 margin: 0 0 24px 0;140 display: flex;141 flex-direction: column;142 gap: 28px;143 }144 .list-item {145 display: flex;146 align-items: center;147 gap: 24px;148 font-size: 44px;149 color: #f2f2f2;150 }151 .icon-circle {152 width: 72px;153 height: 72px;154 flex: 0 0 72px;155 display: inline-flex;156 align-items: center;157 justify-content: center;158 }159 160 /* Bottom bar */161 .bottom-bar {162 position: absolute;163 bottom: 72px;164 left: 0;165 width: 1440px;166 height: 200px;167 background: #0f0f0f;168 display: flex;169 align-items: center;170 padding: 0 72px;171 box-sizing: border-box;172 }173 .action-icons {174 display: flex;175 align-items: center;176 gap: 48px;177 }178 .add-to-cart {179 margin-left: auto;180 font-size: 64px;181 font-weight: 900;182 letter-spacing: 1px;183 color: #ffffff;184 }185 186 /* Home indicator */187 .home-indicator {188 position: absolute;189 bottom: 16px;190 left: 50%;191 transform: translateX(-50%);192 width: 360px;193 height: 16px;194 background: #e6e6e6;195 border-radius: 12px;196 opacity: 0.9;197 }198</style>199</head>200<body>201<div id="render-target">202 203 <!-- Status bar -->204 <div class="status-bar">205 <div class="status-left">206 <div>11:33</div>207 <div class="status-icon">208 <!-- Search icon -->209 <svg width="48" height="48" viewBox="0 0 48 48" fill="none">210 <circle cx="22" cy="22" r="12" stroke="#fff" stroke-width="4"></circle>211 <line x1="31" y1="31" x2="44" y2="44" stroke="#fff" stroke-width="4" stroke-linecap="round"></line>212 </svg>213 </div>214 <div style="font-weight:800; font-size:44px;">G</div>215 <div style="font-size:44px;">68°</div>216 <div class="status-icon">217 <!-- Small bag icon -->218 <svg width="48" height="48" viewBox="0 0 48 48">219 <rect x="10" y="14" width="28" height="26" rx="4" fill="#fff"></rect>220 <path d="M16 14c0-4 4-8 8-8s8 4 8 8" stroke="#1f1f1f" stroke-width="4" fill="none"></path>221 </svg>222 </div>223 </div>224 <div class="status-right">225 <div class="status-icon">226 <!-- WiFi -->227 <svg width="48" height="48" viewBox="0 0 48 48">228 <path d="M8 18c8-8 24-8 32 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"></path>229 <path d="M14 24c6-6 14-6 20 0" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"></path>230 <circle cx="24" cy="30" r="3" fill="#fff"></circle>231 </svg>232 </div>233 <div class="status-icon">234 <!-- Battery -->235 <svg width="48" height="48" viewBox="0 0 48 48">236 <rect x="6" y="12" width="34" height="24" rx="4" stroke="#fff" stroke-width="4" fill="none"></rect>237 <rect x="10" y="16" width="26" height="16" fill="#fff"></rect>238 <rect x="42" y="18" width="4" height="12" fill="#fff"></rect>239 </svg>240 </div>241 </div>242 </div>243 244 <!-- App bar -->245 <div class="app-bar">246 <div class="app-left">247 <div class="icon-btn">248 <!-- Back arrow -->249 <svg width="88" height="88" viewBox="0 0 48 48">250 <path d="M30 10L14 24l16 14" stroke="#fff" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>251 </svg>252 </div>253 <div class="icon-btn">254 <!-- Menu icon -->255 <svg width="88" height="88" viewBox="0 0 48 48">256 <rect x="8" y="12" width="32" height="4" fill="#fff"></rect>257 <rect x="8" y="22" width="24" height="4" fill="#fff"></rect>258 </svg>259 </div>260 </div>261 <div class="app-right">262 <div class="cart">263 <!-- Cart/box icon -->264 <svg width="72" height="72" viewBox="0 0 48 48">265 <rect x="8" y="12" width="32" height="28" rx="6" fill="#ffffff"></rect>266 <path d="M16 12c0-3 3-6 8-6s8 3 8 6" stroke="#2b2b2b" stroke-width="4" fill="none"></path>267 </svg>268 <div class="badge">0</div>269 </div>270 </div>271 </div>272 273 <!-- Content -->274 <div class="content">275 <div class="qa-card">276 <div class="q">Question : Does this come with the battery + battery charger?</div>277 <div class="a">Answer: Yes it comes with both</div>278 </div>279 280 <div class="qa-card">281 <div class="q">Question : Este producto sirve para muro</div>282 <div class="a">Answer: Yo lo he utilizado para todo tipo de trabajo casero (cemento, madera y metal) y a funcionado muy bien.</div>283 </div>284 285 <div class="section-title">Editorial Review</div>286 <div class="progress"><div class="yellow"></div></div>287 288 <p class="review">289 The Bielmeier 20V MAX Cordless Drill Set is a powerful and convenient tool for all household drilling projects. It comes with a charger, 29pcs drill bits, lithium-ion battery, and a keyless chuck of 38 inches. The drill is equipped with variable speed and an LED light to provide visibility in low light areas. However, the product does not come with a carry case, but a canvas bag that may not be durable. A few customers have reported difficulties in removing the chuck, and some language barriers have made it difficult to provide assistance via videos. The drill kit is lightweight, long-lasting, and works well for all types of home projects.290 </p>291 292 <div class="subsection">Pros</div>293 <ul class="pros-list">294 <li class="list-item">295 <span class="icon-circle">296 <svg width="72" height="72" viewBox="0 0 48 48">297 <circle cx="24" cy="24" r="22" fill="#79D16E"></circle>298 <path d="M14 25l6 6 14-14" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>299 </svg>300 </span>301 <span>Variable speed</span>302 </li>303 <li class="list-item">304 <span class="icon-circle">305 <svg width="72" height="72" viewBox="0 0 48 48">306 <circle cx="24" cy="24" r="22" fill="#79D16E"></circle>307 <path d="M14 25l6 6 14-14" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>308 </svg>309 </span>310 <span>LED light for visibility in low light areas</span>311 </li>312 <li class="list-item">313 <span class="icon-circle">314 <svg width="72" height="72" viewBox="0 0 48 48">315 <circle cx="24" cy="24" r="22" fill="#79D16E"></circle>316 <path d="M14 25l6 6 14-14" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>317 </svg>318 </span>319 <span>Comes with lithium-ion battery and charger</span>320 </li>321 <li class="list-item">322 <span class="icon-circle">323 <svg width="72" height="72" viewBox="0 0 48 48">324 <circle cx="24" cy="24" r="22" fill="#79D16E"></circle>325 <path d="M14 25l6 6 14-14" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>326 </svg>327 </span>328 <span>Lightweight and long battery life</span>329 </li>330 </ul>331 332 <div class="subsection">Cons</div>333 <ul class="cons-list">334 <li class="list-item">335 <span class="icon-circle">336 <svg width="72" height="72" viewBox="0 0 48 48">337 <circle cx="24" cy="24" r="22" fill="#E85A4F"></circle>338 <path d="M16 16l16 16M32 16l-16 16" stroke="#fff" stroke-width="4" stroke-linecap="round"></path>339 </svg>340 </span>341 <span>Does not include a hard case</span>342 </li>343 <li class="list-item">344 <span class="icon-circle">345 <svg width="72" height="72" viewBox="0 0 48 48">346 <circle cx="24" cy="24" r="22" fill="#E85A4F"></circle>347 <path d="M16 16l16 16M32 16l-16 16" stroke="#fff" stroke-width="4" stroke-linecap="round"></path>348 </svg>349 </span>350 <span>Some customers have reported difficulty in removing the chuck</span>351 </li>352 </ul>353 </div>354 355 <!-- Bottom bar -->356 <div class="bottom-bar">357 <div class="action-icons">358 <!-- Heart outline -->359 <svg width="72" height="72" viewBox="0 0 48 48">360 <path d="M24 41c9-6 16-13 16-21a9 9 0 0 0-16-5 9 9 0 0 0-16 5c0 8 7 15 16 21z" fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>361 </svg>362 <!-- Share icon -->363 <svg width="72" height="72" viewBox="0 0 48 48">364 <circle cx="10" cy="24" r="5" fill="#fff"></circle>365 <circle cx="34" cy="12" r="5" fill="#fff"></circle>366 <circle cx="34" cy="36" r="5" fill="#fff"></circle>367 <path d="M14 22l16-8M14 26l16 8" stroke="#fff" stroke-width="4" fill="none" stroke-linecap="round"></path>368 </svg>369 </div>370 <div class="add-to-cart">ADD TO CART</div>371 </div>372 373 <div class="home-indicator"></div>374</div>375</body>376</html>