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=1440, initial-scale=1.0">6<title>Product Q&A - UI Render</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13 }14 #render-target {15 position: relative;16 width: 1440px;17 height: 3120px;18 overflow: hidden;19 background: #222222;20 border-radius: 48px;21 box-shadow: 0 20px 60px rgba(0,0,0,0.45);22 color: #EDEDED;23 }24 25 /* Status bar */26 .status-bar {27 position: relative;28 height: 120px;29 padding: 0 48px;30 display: flex;31 align-items: center;32 justify-content: space-between;33 color: #F2F2F2;34 }35 .status-left {36 display: flex;37 align-items: center;38 gap: 32px;39 font-size: 44px;40 font-weight: 600;41 }42 .status-icons {43 display: flex;44 align-items: center;45 gap: 28px;46 font-size: 36px;47 }48 .status-right {49 display: flex;50 align-items: center;51 gap: 28px;52 }53 .icon {54 display: inline-flex;55 width: 48px;56 height: 48px;57 align-items: center;58 justify-content: center;59 color: #F2F2F2;60 }61 .icon svg { width: 48px; height: 48px; }62 63 /* App bar */64 .app-bar {65 height: 160px;66 background: #1A1A1A;67 display: flex;68 align-items: center;69 justify-content: space-between;70 padding: 0 40px;71 border-bottom: 2px solid #0E0E0E;72 }73 .app-left {74 display: flex;75 align-items: center;76 gap: 36px;77 }78 .app-right {79 position: relative;80 display: flex;81 align-items: center;82 gap: 24px;83 padding-right: 16px;84 }85 .badge {86 position: absolute;87 right: 22px;88 top: 14px;89 background: #FFA726;90 color: #111;91 font-weight: 700;92 font-size: 30px;93 line-height: 30px;94 width: 54px;95 height: 54px;96 border-radius: 50%;97 display: flex;98 align-items: center;99 justify-content: center;100 border: 3px solid #111;101 }102 103 /* Content wrapper */104 .content {105 padding: 40px 48px 240px;106 }107 .section-title {108 font-size: 64px;109 font-weight: 800;110 color: #D6D6D6;111 margin-top: 36px;112 margin-bottom: 24px;113 }114 .progress-track {115 width: 92%;116 height: 22px;117 background: #333333;118 border-radius: 14px;119 overflow: hidden;120 box-shadow: inset 0 2px 0 rgba(0,0,0,0.6);121 margin-bottom: 32px;122 }123 .progress-fill {124 height: 100%;125 width: 38%;126 background: #F5B23D;127 }128 129 /* Q&A cards */130 .qa-card {131 width: calc(100% - 96px);132 margin: 26px 0;133 padding: 34px 40px;134 background: #2B2B2B;135 border: 3px solid #8A8A8A;136 border-radius: 32px;137 color: #EEEEEE;138 font-size: 40px;139 line-height: 1.45;140 }141 .qa-card b {142 color: #FFFFFF;143 font-weight: 700;144 }145 .answer {146 margin-top: 12px;147 color: #DADADA;148 }149 150 /* Editorial section */151 .editorial-text {152 font-size: 40px;153 line-height: 1.55;154 color: #E0E0E0;155 margin-top: 28px;156 width: calc(100% - 96px);157 }158 159 /* Bottom bar */160 .bottom-bar {161 position: absolute;162 bottom: 60px;163 left: 0;164 width: 100%;165 height: 180px;166 background: #0F0F0F;167 display: flex;168 align-items: center;169 justify-content: space-between;170 padding: 0 80px;171 border-top: 2px solid #1C1C1C;172 }173 .bottom-left {174 display: flex;175 align-items: center;176 gap: 80px;177 }178 .bottom-action {179 display: inline-flex;180 align-items: center;181 justify-content: center;182 width: 110px;183 height: 110px;184 border-radius: 24px;185 background: #212121;186 border: 2px solid #3A3A3A;187 }188 .cta {189 font-size: 60px;190 font-weight: 800;191 color: #FFFFFF;192 letter-spacing: 2px;193 }194 195 /* Home indicator */196 .home-indicator {197 position: absolute;198 bottom: 12px;199 left: 50%;200 transform: translateX(-50%);201 width: 420px;202 height: 14px;203 background: #FFFFFF;204 border-radius: 8px;205 opacity: 0.85;206 }207</style>208</head>209<body>210<div id="render-target">211 212 <!-- Status Bar -->213 <div class="status-bar">214 <div class="status-left">215 <div>11:34</div>216 <div class="status-icons">217 <span class="icon">218 <svg viewBox="0 0 24 24" fill="none">219 <circle cx="10" cy="10" r="7" stroke="#F2F2F2" stroke-width="2"></circle>220 <line x1="15.5" y1="15.5" x2="22" y2="22" stroke="#F2F2F2" stroke-width="2" stroke-linecap="round"></line>221 </svg>222 </span>223 <span style="font-weight:700; color:#FFFFFF; font-size:40px;">G</span>224 <span style="font-size:40px; color:#F2F2F2;">68°</span>225 <span class="icon">226 <svg viewBox="0 0 24 24" fill="none">227 <path d="M7 7h10v10H7z" stroke="#F2F2F2" stroke-width="2"></path>228 <path d="M9 7c0-2 2-3 3-3s3 1 3 3" stroke="#F2F2F2" stroke-width="2" stroke-linecap="round"></path>229 </svg>230 </span>231 </div>232 </div>233 <div class="status-right">234 <span class="icon">235 <svg viewBox="0 0 24 24" fill="none">236 <path d="M3 12c4-4 14-4 18 0" stroke="#F2F2F2" stroke-width="2" stroke-linecap="round"></path>237 <path d="M6 12c3-3 9-3 12 0" stroke="#F2F2F2" stroke-width="2" stroke-linecap="round"></path>238 <circle cx="12" cy="12" r="1.5" fill="#F2F2F2"></circle>239 </svg>240 </span>241 <span class="icon">242 <svg viewBox="0 0 28 24" fill="none">243 <rect x="2" y="6" width="20" height="12" rx="2" stroke="#F2F2F2" stroke-width="2"></rect>244 <rect x="23" y="9" width="3" height="6" rx="1" fill="#F2F2F2"></rect>245 <rect x="4" y="8" width="14" height="8" fill="#F2F2F2"></rect>246 </svg>247 </span>248 </div>249 </div>250 251 <!-- App Bar -->252 <div class="app-bar">253 <div class="app-left">254 <span class="icon">255 <svg viewBox="0 0 24 24" fill="none">256 <path d="M15 5l-7 7 7 7" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>257 </svg>258 </span>259 <span class="icon">260 <svg viewBox="0 0 24 24" fill="#FFFFFF">261 <rect x="4" y="6" width="16" height="2"></rect>262 <rect x="4" y="11" width="16" height="2"></rect>263 <rect x="4" y="16" width="12" height="2"></rect>264 </svg>265 </span>266 </div>267 <div class="app-right">268 <span class="icon">269 <svg viewBox="0 0 24 24" fill="none">270 <path d="M7 8h10v10H7z" stroke="#FFFFFF" stroke-width="2"></path>271 <path d="M9 8c0-2 2-3 3-3s3 1 3 3" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>272 </svg>273 </span>274 <div class="badge">0</div>275 </div>276 </div>277 278 <!-- Content -->279 <div class="content">280 <div class="section-title">Customer Question & Answer</div>281 <div class="progress-track">282 <div class="progress-fill"></div>283 </div>284 285 <div class="qa-card">286 <div><b>Question :</b> How can I easily turn out the chuck?</div>287 <div class="answer"><b>Answer:</b> Video could not be loaded</div>288 </div>289 290 <div class="qa-card">291 <div><b>Question :</b> This is the second electric drill kit I replaced. I don't see the chuck, so is the chuck in the product?</div>292 <div class="answer"><b>Answer:</b> Video could not be loaded</div>293 </div>294 295 <div class="qa-card">296 <div><b>Question :</b> Does the drill have a brushless motor?</div>297 <div class="answer"><b>Answer:</b> No</div>298 </div>299 300 <div class="qa-card">301 <div><b>Question :</b> Does this drill work to remove tires?</div>302 <div class="answer"><b>Answer:</b> No, this drill doesn't have the power to remove lug nuts when changing tires. I think you would need an impact wrench for that.</div>303 </div>304 305 <div class="qa-card">306 <div><b>Question :</b> Does this come with the battery + battery charger?</div>307 <div class="answer"><b>Answer:</b> Yes it comes with both</div>308 </div>309 310 <div class="qa-card">311 <div><b>Question :</b> Este producto sirve para muro</div>312 <div class="answer"><b>Answer:</b> Yo lo he utilizado para todo tipo de trabajo casero (cemento, madera y metal) y a funcionado muy bien.</div>313 </div>314 315 <div class="section-title" style="margin-top: 40px;">Editorial Review</div>316 <div class="progress-track">317 <div class="progress-fill" style="width: 34%;"></div>318 </div>319 <div class="editorial-text">320 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 in321 dim environments. Its ergonomic design makes it comfortable to hold for extended periods of time.322 </div>323 </div>324 325 <!-- Bottom Bar -->326 <div class="bottom-bar">327 <div class="bottom-left">328 <div class="bottom-action">329 <svg viewBox="0 0 24 24" fill="none" width="72" height="72">330 <path d="M12 20s-7-4.5-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.5-7 9-7 9z" stroke="#FFFFFF" stroke-width="2" fill="none"></path>331 </svg>332 </div>333 <div class="bottom-action">334 <svg viewBox="0 0 24 24" fill="none" width="72" height="72">335 <circle cx="6" cy="18" r="2.5" stroke="#FFFFFF" stroke-width="2"></circle>336 <circle cx="18" cy="6" r="2.5" stroke="#FFFFFF" stroke-width="2"></circle>337 <circle cx="18" cy="18" r="2.5" stroke="#FFFFFF" stroke-width="2"></circle>338 <path d="M8 17l8-8" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>339 <path d="M16 17l2-2" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>340 </svg>341 </div>342 </div>343 <div class="cta">ADD TO CART</div>344 </div>345 346 <div class="home-indicator"></div>347</div>348</body>349</html>