GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Detail - Bosch GSB 550 Impact Drill</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    font-family: Arial, Helvetica, sans-serif;15    color: #263238;16  }17 18  .hero {19    position: relative;20    width: 100%;21    height: 720px;22    padding-top: 40px;23  }24  .top-actions {25    position: absolute;26    top: 40px;27    left: 36px;28    right: 36px;29    display: flex;30    justify-content: space-between;31    align-items: center;32    pointer-events: none;33  }34  .icon-btn {35    width: 56px;36    height: 56px;37    pointer-events: auto;38  }39  .icon-btn svg {40    width: 100%;41    height: 100%;42  }43  .product-image {44    margin: 40px auto 0;45    width: 900px;46    height: 520px;47    background: #E0E0E0;48    border: 1px solid #BDBDBD;49    display: flex;50    justify-content: center;51    align-items: center;52    color: #757575;53    font-size: 28px;54    border-radius: 6px;55  }56 57  .content {58    padding: 0 60px;59  }60  .title {61    font-size: 56px;62    font-weight: 600;63    margin: 40px 0 16px;64    letter-spacing: 0.3px;65  }66  .price {67    font-size: 64px;68    font-weight: 600;69    margin: 0 0 20px;70  }71  .rating {72    display: flex;73    align-items: center;74    gap: 8px;75    margin-bottom: 26px;76  }77  .stars {78    display: inline-flex;79    gap: 4px;80    vertical-align: middle;81  }82  .stars svg { width: 32px; height: 32px; }83  .rating-count {84    color: #78909C;85    font-size: 32px;86    margin-left: 12px;87  }88 89  .meta {90    font-size: 32px;91    margin-bottom: 10px;92    color: #607D8B;93  }94  .meta .value {95    color: #E53935;96    font-weight: 600;97  }98 99  .info-card {100    background: #ECEFF1;101    border-radius: 18px;102    padding: 28px 32px;103    margin: 30px 0 24px;104    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);105  }106  .info-card h3 {107    margin: 0 0 18px;108    font-size: 36px;109    font-weight: 700;110    color: #37474F;111  }112  .info-card ul {113    margin: 0;114    padding-left: 36px;115    font-size: 30px;116    line-height: 1.5;117    color: #37474F;118  }119 120  .qty-row {121    display: flex;122    align-items: center;123    justify-content: space-between;124    margin-top: 22px;125    margin-bottom: 22px;126  }127  .qty-row .label {128    font-size: 36px;129    color: #37474F;130  }131  .qty-controls {132    display: flex;133    align-items: center;134    gap: 18px;135  }136  .qty-box {137    width: 96px;138    height: 84px;139    border-radius: 12px;140    border: 1px solid #CFD8DC;141    background: #ffffff;142    display: flex;143    justify-content: center;144    align-items: center;145    font-size: 38px;146    color: #37474F;147  }148  .qty-minus svg, .qty-plus svg { width: 40px; height: 40px; }149  .qty-plus {150    border-color: #E53935;151  }152  .qty-plus svg line { stroke: #E53935; }153 154  .btn-row {155    display: flex;156    gap: 28px;157    margin-top: 16px;158    margin-bottom: 34px;159  }160  .btn {161    flex: 1;162    height: 120px;163    border-radius: 14px;164    display: flex;165    justify-content: center;166    align-items: center;167    font-size: 38px;168    font-weight: 700;169    letter-spacing: 0.6px;170    cursor: pointer;171    user-select: none;172  }173  .btn-buy {174    background: #E53935;175    color: #fff;176    box-shadow: 0 4px 10px rgba(229,57,53,0.25);177  }178  .btn-cart {179    background: #F5F7F8;180    color: #2E5364;181    border: 1px solid #CFD8DC;182  }183 184  .vendor-card {185    margin: 12px 0 0;186    background: #fff;187    border-radius: 24px;188    box-shadow: 0 8px 28px rgba(0,0,0,0.08);189    padding: 36px 36px;190    display: flex;191    justify-content: space-between;192    align-items: center;193  }194  .vendor-info h4 {195    font-size: 44px;196    margin: 0 0 10px;197    color: #37474F;198  }199  .vendor-info p {200    margin: 0;201    color: #90A4AE;202    font-size: 28px;203  }204  .cart-pill {205    background: #F8CDD2;206    border-radius: 28px;207    padding: 20px;208    display: flex;209    align-items: center;210    gap: 18px;211  }212  .cart-pill .count {213    width: 56px;214    height: 56px;215    background: #E53935;216    color: #fff;217    border-radius: 12px;218    display: flex;219    justify-content: center;220    align-items: center;221    font-weight: 800;222    font-size: 32px;223  }224  .cart-pill .preview {225    width: 90px;226    height: 90px;227    background: #E0E0E0;228    border: 1px solid #BDBDBD;229    display: flex;230    justify-content: center;231    align-items: center;232    color: #757575;233    font-size: 20px;234    border-radius: 8px;235  }236  .cart-pill .icon {237    width: 44px;238    height: 44px;239  }240 241  .home-bar {242    position: absolute;243    bottom: 24px;244    left: 50%;245    transform: translateX(-50%);246    width: 320px;247    height: 10px;248    border-radius: 6px;249    background: #B0BEC5;250    opacity: 0.7;251  }252</style>253</head>254<body>255<div id="render-target">256 257  <div class="hero">258    <div class="top-actions">259      <div class="icon-btn">260        <svg viewBox="0 0 24 24">261          <line x1="5" y1="5" x2="19" y2="19" stroke="#90A4AE" stroke-width="2" stroke-linecap="round"></line>262          <line x1="19" y1="5" x2="5" y2="19" stroke="#90A4AE" stroke-width="2" stroke-linecap="round"></line>263        </svg>264      </div>265      <div style="display:flex; gap:22px;">266        <div class="icon-btn">267          <svg viewBox="0 0 24 24">268            <path d="M12 21s-7-4.5-7-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4.5-7 9-11 9z" fill="none" stroke="#90A4AE" stroke-width="2" stroke-linejoin="round"></path>269          </svg>270        </div>271        <div class="icon-btn">272          <svg viewBox="0 0 24 24">273            <circle cx="12" cy="5" r="2" fill="#90A4AE"></circle>274            <circle cx="12" cy="12" r="2" fill="#90A4AE"></circle>275            <circle cx="12" cy="19" r="2" fill="#90A4AE"></circle>276          </svg>277        </div>278      </div>279    </div>280 281    <div class="product-image">[IMG: Blue Bosch Impact Drill product photo]</div>282  </div>283 284  <div class="content">285    <div class="title">Bosch GSB 550 Impact Drill</div>286    <div class="price">3,107.00</div>287 288    <div class="rating">289      <div class="stars">290        <svg viewBox="0 0 24 24">291          <path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z" fill="#FFC107"></path>292        </svg>293        <svg viewBox="0 0 24 24">294          <path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z" fill="#FFC107"></path>295        </svg>296        <svg viewBox="0 0 24 24">297          <path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z" fill="#FFC107"></path>298        </svg>299        <svg viewBox="0 0 24 24">300          <path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z" fill="#FFC107"></path>301        </svg>302        <svg viewBox="0 0 24 24">303          <path d="M12 17.3l6.2 3.7-1.6-6.9 5.4-4.7-7.1-.6L12 2 9.1 8.8l-7.1.6 5.4 4.7-1.6 6.9z" fill="#FFC107"></path>304        </svg>305      </div>306      <div class="rating-count">(0)</div>307    </div>308 309    <div class="meta">SKU: <span class="value">9604</span></div>310    <div class="meta">Availability: <span class="value">In stock (1000)</span></div>311 312    <div class="info-card">313      <h3>Powerful and reliable power tool</h3>314      <ul>315        <li>Powerful 550 watt motor</li>316        <li>13 mm keyed chuck, auxiliary handle and depth stop</li>317        <li>Fully ball-bearing-mounted construction for a long lifetime</li>318      </ul>319    </div>320 321    <div class="qty-row">322      <div class="label">Select the quantity:</div>323      <div class="qty-controls">324        <div class="qty-box qty-minus">325          <svg viewBox="0 0 24 24">326            <line x1="5" y1="12" x2="19" y2="12" stroke="#90A4AE" stroke-width="2" stroke-linecap="round"></line>327          </svg>328        </div>329        <div class="qty-box">1</div>330        <div class="qty-box qty-plus">331          <svg viewBox="0 0 24 24">332            <line x1="12" y1="5" x2="12" y2="19" stroke="#E53935" stroke-width="2" stroke-linecap="round"></line>333            <line x1="5" y1="12" x2="19" y2="12" stroke="#E53935" stroke-width="2" stroke-linecap="round"></line>334          </svg>335        </div>336      </div>337    </div>338 339    <div class="btn-row">340      <div class="btn btn-buy">Buy Now</div>341      <div class="btn btn-cart">ADD TO CART</div>342    </div>343 344    <div class="vendor-card">345      <div class="vendor-info">346        <h4>Top-Most Hardware</h4>347        <p>, , , -</p>348      </div>349      <div class="cart-pill">350        <svg class="icon" viewBox="0 0 24 24">351          <path d="M3 4h2l2 12h10l2-8H7" fill="none" stroke="#6D4C41" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>352        </svg>353        <div class="count">1</div>354        <div class="preview">[IMG]</div>355      </div>356    </div>357  </div>358 359  <div class="home-bar"></div>360</div>361</body>362</html>