GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Detail - Cordless Drill</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    width: 1440px;11    height: 3120px;12    overflow: hidden;13    background: #2f2f2f;14    color: #ffffff;15  }16 17  /* Top status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1440px;23    height: 120px;24    background: #242424;25    color: #fff;26    display: flex;27    align-items: center;28    padding: 0 60px;29    box-sizing: border-box;30    font-size: 42px;31    letter-spacing: 0.5px;32  }33  .status-left { display: flex; align-items: center; gap: 40px; }34  .status-right {35    margin-left: auto;36    display: flex; align-items: center; gap: 40px;37  }38  .status-icon { width: 52px; height: 52px; opacity: 0.95; }39 40  /* Navigation bar */41  .nav-bar {42    position: absolute;43    top: 120px;44    left: 0;45    width: 1440px;46    height: 140px;47    background: #1f1f1f;48    display: flex;49    align-items: center;50    padding: 0 40px;51    box-sizing: border-box;52  }53  .nav-left { display: flex; align-items: center; gap: 40px; }54  .nav-icon { width: 96px; height: 96px; }55  .cart-box {56    margin-left: auto;57    width: 110px; height: 110px;58    border-radius: 12px;59    background: #2a2a2a;60    border: 2px solid #3a3a3a;61    position: relative;62    display: flex; justify-content: center; align-items: center;63  }64  .cart-badge {65    position: absolute; top: -6px; right: -6px;66    background: #ffb000; color: #000;67    min-width: 56px; height: 56px;68    border-radius: 28px;69    display: flex; align-items: center; justify-content: center;70    font-weight: 700; font-size: 36px;71    border: 2px solid #343434;72  }73 74  /* Content area */75  .content {76    position: absolute;77    top: 260px;78    left: 0;79    width: 100%;80    padding: 0 60px 260px 60px;81    box-sizing: border-box;82  }83  .description {84    font-size: 44px;85    line-height: 64px;86    color: #eaeaea;87    margin-bottom: 80px;88  }89  .section-title {90    font-size: 64px;91    font-weight: 800;92    margin: 60px 0 30px;93    color: #ffffff;94  }95  .list {96    display: flex; flex-direction: column; gap: 40px;97    margin-bottom: 80px;98  }99  .list-item {100    display: flex; align-items: center;101    gap: 32px;102  }103  .thumb {104    width: 72px; height: 72px;105  }106  .list-text {107    font-size: 46px; line-height: 60px; color: #f4f4f4;108  }109  .cons .list-text { color: #f0eaea; }110 111  /* Related products section */112  .related-title {113    font-size: 64px; font-weight: 800; margin-top: 40px; margin-bottom: 40px;114  }115  .progress-track {116    width: 1320px; height: 20px; background: #151515; border-radius: 10px; overflow: hidden;117    margin-bottom: 40px;118  }119  .progress-fill { width: 42%; height: 100%; background: #e19b1b; }120 121  .product-row {122    display: flex;123    gap: 36px;124    padding-bottom: 440px; /* space above bottom bar */125  }126  .product-card {127    width: 420px; 128    background: #333;129    border: 2px solid #3c3c3c;130    border-radius: 12px;131    overflow: hidden;132  }133  .product-image {134    width: 100%; height: 360px;135    background: #E0E0E0;136    border-bottom: 2px solid #bdbdbd;137    display: flex; align-items: center; justify-content: center;138    color: #757575; font-size: 36px;139  }140  .product-meta {141    padding: 24px;142    font-size: 38px; color: #dddddd;143  }144 145  /* Bottom action bar */146  .bottom-bar {147    position: absolute;148    left: 0; bottom: 120px;149    width: 100%; height: 220px;150    background: #121212;151    display: flex; align-items: center; justify-content: space-between;152    padding: 0 60px;153    box-sizing: border-box;154    border-top: 2px solid #222;155  }156  .bottom-actions { display: flex; align-items: center; gap: 80px; }157  .bar-icon { width: 100px; height: 100px; }158  .cta {159    margin-left: auto;160    font-size: 64px; font-weight: 800; letter-spacing: 1px; color: #ffffff;161  }162 163  /* Home indicator */164  .home-indicator {165    position: absolute;166    left: 50%; transform: translateX(-50%);167    bottom: 34px;168    width: 360px; height: 20px;169    background: #d9d9d9;170    border-radius: 10px;171    opacity: 0.7;172  }173</style>174</head>175<body>176<div id="render-target">177 178  <!-- Status bar -->179  <div class="status-bar">180    <div class="status-left">181      <div>11:33</div>182      <!-- simple search icon -->183      <svg class="status-icon" viewBox="0 0 24 24">184        <circle cx="10" cy="10" r="7" fill="none" stroke="#fff" stroke-width="2"/>185        <line x1="16" y1="16" x2="22" y2="22" stroke="#fff" stroke-width="2"/>186      </svg>187      <!-- Google G -->188      <div style="font-weight:700;">G</div>189      <div>68°</div>190      <!-- small bag icon -->191      <svg class="status-icon" viewBox="0 0 24 24">192        <rect x="4" y="7" width="16" height="14" rx="2" fill="none" stroke="#fff" stroke-width="2"/>193        <path d="M8 7a4 4 0 0 1 8 0" fill="none" stroke="#fff" stroke-width="2"/>194      </svg>195    </div>196    <div class="status-right">197      <!-- wifi -->198      <svg class="status-icon" viewBox="0 0 24 24">199        <path d="M2 8c5-5 15-5 20 0" fill="none" stroke="#fff" stroke-width="2"/>200        <path d="M5 12c4-4 10-4 14 0" fill="none" stroke="#fff" stroke-width="2"/>201        <path d="M8 16c3-3 5-3 8 0" fill="none" stroke="#fff" stroke-width="2"/>202        <circle cx="12" cy="19" r="1.8" fill="#fff"/>203      </svg>204      <!-- battery -->205      <svg class="status-icon" viewBox="0 0 24 24">206        <rect x="2" y="6" width="18" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/>207        <rect x="4" y="8" width="12" height="8" fill="#fff"/>208        <rect x="20" y="9" width="2" height="8" fill="#fff"/>209      </svg>210    </div>211  </div>212 213  <!-- Navigation bar -->214  <div class="nav-bar">215    <div class="nav-left">216      <!-- back chevron -->217      <svg class="nav-icon" viewBox="0 0 24 24">218        <path d="M15 5L8 12l7 7" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>219      </svg>220      <!-- hamburger -->221      <svg class="nav-icon" viewBox="0 0 24 24">222        <path d="M3 7h18M3 12h18M3 17h18" stroke="#fff" stroke-width="3" stroke-linecap="round"/>223      </svg>224    </div>225    <div class="cart-box">226      <!-- cart icon simple -->227      <svg viewBox="0 0 24 24" width="64" height="64">228        <path d="M3 5h3l2 12h10l2-9H7" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>229        <circle cx="10" cy="20" r="2" fill="#fff"/>230        <circle cx="18" cy="20" r="2" fill="#fff"/>231      </svg>232      <div class="cart-badge">0</div>233    </div>234  </div>235 236  <!-- Content -->237  <div class="content">238    <div class="description">239      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.240    </div>241 242    <div class="section-title">Pros</div>243    <div class="list pros">244      <div class="list-item">245        <svg class="thumb" viewBox="0 0 24 24">246          <path d="M2 12h4v10H2z" fill="#56d364"/>247          <path d="M6 12l5-10h4v10h6l-2 8H8z" fill="#56d364"/>248        </svg>249        <div class="list-text">Variable speed</div>250      </div>251      <div class="list-item">252        <svg class="thumb" viewBox="0 0 24 24">253          <path d="M2 12h4v10H2z" fill="#56d364"/>254          <path d="M6 12l5-10h4v10h6l-2 8H8z" fill="#56d364"/>255        </svg>256        <div class="list-text">LED light for visibility in low light areas</div>257      </div>258      <div class="list-item">259        <svg class="thumb" viewBox="0 0 24 24">260          <path d="M2 12h4v10H2z" fill="#56d364"/>261          <path d="M6 12l5-10h4v10h6l-2 8H8z" fill="#56d364"/>262        </svg>263        <div class="list-text">Comes with lithium-ion battery and charger</div>264      </div>265      <div class="list-item">266        <svg class="thumb" viewBox="0 0 24 24">267          <path d="M2 12h4v10H2z" fill="#56d364"/>268          <path d="M6 12l5-10h4v10h6l-2 8H8z" fill="#56d364"/>269        </svg>270        <div class="list-text">Lightweight and long battery life</div>271      </div>272    </div>273 274    <div class="section-title">Cons</div>275    <div class="list cons">276      <div class="list-item">277        <svg class="thumb" viewBox="0 0 24 24">278          <g transform="translate(24,24) scale(-1,-1)">279            <path d="M2 12h4v10H2z" fill="#f25f5c"/>280            <path d="M6 12l5-10h4v10h6l-2 8H8z" fill="#f25f5c"/>281          </g>282        </svg>283        <div class="list-text">Does not include a hard case</div>284      </div>285      <div class="list-item">286        <svg class="thumb" viewBox="0 0 24 24">287          <g transform="translate(24,24) scale(-1,-1)">288            <path d="M2 12h4v10H2z" fill="#f25f5c"/>289            <path d="M6 12l5-10h4v10h6l-2 8H8z" fill="#f25f5c"/>290          </g>291        </svg>292        <div class="list-text">Some customers have reported difficulty in removing the chuck</div>293      </div>294    </div>295 296    <div class="related-title">Other related products explored by People</div>297    <div class="progress-track">298      <div class="progress-fill"></div>299    </div>300 301    <div class="product-row">302      <div class="product-card">303        <div class="product-image">[IMG: Teal Cordless Drill Kit]</div>304        <div class="product-meta">Cordless Drill Kit • 29pcs Bits • Charger</div>305      </div>306      <div class="product-card">307        <div class="product-image">[IMG: DEKO Drill with Accessories]</div>308        <div class="product-meta">DEKO 28V Drill • Complete Set</div>309      </div>310      <div class="product-card">311        <div class="product-image">[IMG: Compact Drill Bundle]</div>312        <div class="product-meta">Compact Drill • Fast Charging • Bag</div>313      </div>314    </div>315  </div>316 317  <!-- Bottom action bar -->318  <div class="bottom-bar">319    <div class="bottom-actions">320      <!-- Heart -->321      <svg class="bar-icon" viewBox="0 0 24 24">322        <path d="M12 21s-7-5-7-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5-7 10-11 10z" fill="none" stroke="#fff" stroke-width="2"/>323      </svg>324      <!-- Share icon -->325      <svg class="bar-icon" viewBox="0 0 24 24">326        <circle cx="6" cy="12" r="3" fill="none" stroke="#fff" stroke-width="2"/>327        <circle cx="18" cy="6" r="3" fill="none" stroke="#fff" stroke-width="2"/>328        <circle cx="18" cy="18" r="3" fill="none" stroke="#fff" stroke-width="2"/>329        <path d="M8.8 10.8l6.4-3.6M8.8 13.2l6.4 3.6" fill="none" stroke="#fff" stroke-width="2"/>330      </svg>331    </div>332    <div class="cta">ADD TO CART</div>333  </div>334 335  <!-- Home indicator -->336  <div class="home-indicator"></div>337</div>338</body>339</html>