GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Detail - Drill</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #ffffff;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;13    color: #263238;14  }15 16  .top-actions {17    position: absolute;18    top: 40px; left: 40px; right: 40px;19    height: 64px;20  }21  .action-left, .action-right { position: absolute; top: 0; height: 64px; display: flex; align-items: center; }22  .action-left { left: 0; }23  .action-right { right: 0; gap: 28px; }24 25  .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }26  .heart-chip {27    width: 84px; height: 84px; border-radius: 42px;28    background: #ffdfe9; display: flex; align-items: center; justify-content: center;29    box-shadow: 0 4px 12px rgba(0,0,0,0.12);30  }31 32  .product-image {33    position: absolute; left: 60px; right: 60px; top: 160px;34    height: 640px; border: 1px solid #BDBDBD; background: #E0E0E0;35    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;36  }37 38  .content {39    position: absolute; left: 60px; right: 60px; top: 850px;40  }41 42  .title {43    font-size: 54px; font-weight: 600; line-height: 1.25; margin-bottom: 24px;44  }45  .price {46    font-size: 66px; font-weight: 700; color: #263238; margin-bottom: 18px;47  }48 49  .rating-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }50  .stars { display: flex; gap: 6px; }51  .rating-count { color: #90A4AE; font-size: 34px; }52 53  .meta { font-size: 34px; line-height: 1.6; margin-bottom: 26px; }54  .meta .label { color: #607D8B; }55  .meta .value-red { color: #E53935; font-weight: 700; }56 57  .specs-card {58    background: #F4F6F8; border: 1px solid #E0E0E0; border-radius: 20px;59    padding: 28px; margin-top: 20px;60  }61  .specs-card h4 {62    margin: 0 0 18px 0; font-size: 38px; font-weight: 700;63  }64  .specs-card ul {65    margin: 0; padding-left: 34px; font-size: 34px; color: #455A64;66  }67 68  .qty-area { margin-top: 28px; }69  .qty-label { font-size: 38px; color: #455A64; margin-bottom: 18px; }70 71  .qty-controls { display: flex; align-items: center; gap: 18px; }72  .qty-box {73    width: 110px; height: 88px; border: 1px solid #E0E0E0; border-radius: 12px;74    display: flex; align-items: center; justify-content: center; font-size: 42px; color: #455A64; background: #ffffff;75  }76  .qty-num { width: 140px; }77 78  .cta-row { display: flex; gap: 28px; margin-top: 28px; }79  .btn {80    height: 110px; border-radius: 14px; display: flex; align-items: center; justify-content: center;81    font-size: 36px; font-weight: 700; text-transform: uppercase; border: none;82  }83  .btn-buy {84    background: #E53935; color: #ffffff; flex: 1;85    box-shadow: 0 4px 10px rgba(229,57,53,0.25);86  }87  .btn-cart {88    background: #ECEFF1; color: #607D8B; flex: 1;89    border: 1px solid #CFD8DC;90  }91 92  .store-card {93    position: absolute; left: 40px; right: 40px; bottom: 220px;94    background: #ffffff; border-radius: 24px; border: 1px solid #E0E0E0;95    box-shadow: 0 6px 18px rgba(0,0,0,0.08);96    padding: 28px;97  }98  .store-title { font-size: 44px; font-weight: 700; margin-bottom: 6px; }99  .store-sub { font-size: 30px; color: #90A4AE; }100 101  .floating-cart {102    position: absolute; right: 40px; bottom: 240px;103    background: #f8c8d6; border-radius: 28px; padding: 18px 22px;104    display: flex; align-items: center; gap: 16px; border: 1px solid #ef9fb4;105  }106  .cart-count {107    background: #E53935; color: #ffffff; font-weight: 700;108    width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center;109  }110  .thumb {111    width: 64px; height: 64px; background: #E0E0E0; border: 1px solid #BDBDBD;112    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 20px; border-radius: 8px;113  }114 115  .gesture-bar {116    position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%);117    width: 360px; height: 10px; background: #bdbdbd; border-radius: 5px;118  }119</style>120</head>121<body>122<div id="render-target">123  <!-- Top actions -->124  <div class="top-actions">125    <div class="action-left">126      <div class="icon-btn" aria-label="Close">127        <svg width="36" height="36" viewBox="0 0 36 36">128          <path d="M6 6 L30 30 M30 6 L6 30" stroke="#90A4AE" stroke-width="3" stroke-linecap="round"/>129        </svg>130      </div>131    </div>132    <div class="action-right">133      <div class="heart-chip" aria-label="Favorite">134        <svg width="36" height="36" viewBox="0 0 36 36">135          <path d="M18 31 C18 31 6 23 6 14 C6 9.6 9.6 6 14 6 C16.3 6 18.5 7.2 18.9 9.2 C19.3 7.2 21.5 6 24 6 C28.4 6 32 9.6 32 14 C32 23 18 31 18 31Z" fill="#E91E63"/>136        </svg>137      </div>138      <div class="icon-btn" aria-label="More">139        <svg width="28" height="28" viewBox="0 0 28 28">140          <circle cx="14" cy="5" r="2.5" fill="#90A4AE"/>141          <circle cx="14" cy="14" r="2.5" fill="#90A4AE"/>142          <circle cx="14" cy="23" r="2.5" fill="#90A4AE"/>143        </svg>144      </div>145    </div>146  </div>147 148  <!-- Product image -->149  <div class="product-image">[IMG: Blue Bosch Impact Drill]</div>150 151  <!-- Content -->152  <div class="content">153    <div class="title">Bosch GSB 550 Impact Drill</div>154    <div class="price">3,107.00</div>155 156    <div class="rating-row">157      <div class="stars" aria-label="rating 0">158        <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7-6.2-3.3-6.1 3.3 1.1-7-5-4.9 7-1z" fill="#FFA726"/></svg>159        <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7-6.2-3.3-6.1 3.3 1.1-7-5-4.9 7-1z" fill="#FFA726"/></svg>160        <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7-6.2-3.3-6.1 3.3 1.1-7-5-4.9 7-1z" fill="#FFA726"/></svg>161        <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7-6.2-3.3-6.1 3.3 1.1-7-5-4.9 7-1z" fill="#FFA726"/></svg>162        <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7-6.2-3.3-6.1 3.3 1.1-7-5-4.9 7-1z" fill="#FFA726"/></svg>163      </div>164      <div class="rating-count">(0)</div>165    </div>166 167    <div class="meta">168      <div><span class="label">SKU:</span> <span class="value-red">9604</span></div>169      <div><span class="label">Availability:</span> <span class="value-red">In stock (1000)</span></div>170    </div>171 172    <div class="specs-card">173      <h4>Powerful and reliable power tool</h4>174      <ul>175        <li>Powerful 550 watt motor</li>176        <li>13 mm keyed chuck, auxiliary handle and depth stop</li>177        <li>Fully ball-bearing-mounted construction for a long lifetime</li>178      </ul>179    </div>180 181    <div class="qty-area">182      <div class="qty-label">Select the quantity:</div>183      <div class="qty-controls">184        <div class="qty-box" aria-label="decrease">−</div>185        <div class="qty-box qty-num">1</div>186        <div class="qty-box" aria-label="increase">+</div>187      </div>188    </div>189 190    <div class="cta-row">191      <div class="btn btn-buy">Buy Now</div>192      <div class="btn btn-cart">ADD TO CART</div>193    </div>194  </div>195 196  <!-- Store card preview -->197  <div class="store-card">198    <div class="store-title">Top-Most Hardware</div>199    <div class="store-sub">, , , , -</div>200  </div>201 202  <!-- Floating cart chip -->203  <div class="floating-cart">204    <svg width="40" height="40" viewBox="0 0 24 24">205      <path d="M7 6h-2l-1 2v2h2l3 7h8l2-7h-12l-1-4zm3 14a2 2 0 100-4 2 2 0 000 4zm8 0a2 2 0 100-4 2 2 0 000 4z" fill="#6d1b23"/>206    </svg>207    <div class="cart-count">1</div>208    <div class="thumb">[IMG]</div>209  </div>210 211  <!-- Gesture bar -->212  <div class="gesture-bar"></div>213</div>214</body>215</html>