GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Product Details - Cordless Screwdriver</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px; height: 2400px;9    position: relative; overflow: hidden;10    background: #ffffff;11    box-shadow: 0 0 0 1px #e0e0e0 inset;12  }13 14  /* Status bar */15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 100px; background: #121212; color: #fff;18    display: flex; align-items: center; justify-content: space-between;19    padding: 0 34px; font-size: 36px;20  }21  .status-icons { display: flex; align-items: center; gap: 22px; font-size: 30px; }22  .icon-signal, .icon-wifi, .icon-battery {23    width: 44px; height: 28px; position: relative;24  }25  .icon-signal::before {26    content: ""; position: absolute; bottom: 0; left: 0;27    width: 6px; height: 10px; background: #fff;28    box-shadow: 10px 0 0 #fff, 20px 0 0 #fff, 30px 0 0 #fff;29  }30  .icon-wifi::before {31    content: ""; position: absolute; inset: 0;32    border: 3px solid #fff; border-radius: 50%;33    clip-path: polygon(0 100%,100% 100%,50% 50%);34  }35  .icon-battery { width: 60px; }36  .icon-battery::before {37    content: ""; position: absolute; top: 2px; left: 2px; right: 10px; bottom: 2px;38    border: 3px solid #fff; border-radius: 4px;39  }40  .icon-battery::after {41    content: ""; position: absolute; top: 10px; right: 0; width: 10px; height: 16px; background: #fff; border-radius: 2px;42  }43  .battery-text { color: #fff; font-size: 30px; }44 45  /* Image hero */46  .hero {47    position: absolute; top: 100px; left: 0; right: 0;48    padding: 26px 36px 0;49  }50  .product-card {51    background: #fafafa; border-radius: 12px; border: 1px solid #e2e2e2;52    height: 980px; position: relative; overflow: hidden;53    display: flex; align-items: center; justify-content: center;54  }55  .product-img {56    width: 880px; height: 780px; background: #E0E0E0; border: 1px solid #BDBDBD;57    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px; text-align: center;58  }59 60  /* Top right wishlist bag icons */61  .top-actions {62    position: absolute; top: 24px; right: 28px; display: flex; gap: 26px;63  }64  .round-icon {65    width: 72px; height: 72px; border-radius: 50%;66    border: 2px solid #d0d0d0; background: #fff;67    display: flex; align-items: center; justify-content: center;68  }69  .round-icon svg { width: 38px; height: 38px; fill: none; stroke: #333; stroke-width: 3.5; }70 71  /* Discount ribbon */72  .discount-tag {73    position: absolute; left: 10px; top: 128px;74    background: #ff5c8a; color: #fff; padding: 12px 22px;75    border-radius: 60px; font-weight: bold; font-size: 32px;76    box-shadow: 0 2px 6px rgba(0,0,0,0.15);77  }78 79  /* Share floating button */80  .share-fab {81    position: absolute; right: 28px; top: 750px;82    width: 96px; height: 96px; border-radius: 20px;83    background: #fff; border: 1px solid #e5e5e5;84    display: flex; align-items: center; justify-content: center;85    box-shadow: 0 6px 16px rgba(0,0,0,0.08);86  }87  .share-fab svg { width: 48px; height: 48px; stroke: #777; stroke-width: 4; fill: none; }88 89  /* Seller section */90  .seller {91    position: absolute; left: 0; right: 0; top: 1125px;92    padding: 30px 36px; border-top: 1px solid #eee; border-bottom: 1px solid #eee;93    background: #fff;94  }95  .seller-row {96    display: flex; align-items: center; justify-content: space-between;97    font-size: 38px; color: #222; font-weight: 600;98  }99  .seller-sub { font-size: 36px; color: #444; font-weight: 700; margin-top: 16px; }100 101  /* Content sections */102  .section {103    position: absolute; left: 0; right: 0; top: 1288px;104    padding: 26px 36px; background: #fff;105  }106  .section-title {107    display: flex; align-items: center; justify-content: space-between;108    font-size: 40px; font-weight: 800; color: #222; padding: 16px 0;109  }110  .chev {111    width: 36px; height: 36px; border-right: 6px solid #777; border-bottom: 6px solid #777; transform: rotate(45deg);112    margin-right: 12px;113  }114  .desc {115    font-size: 34px; line-height: 1.55; color: #444; margin-top: 10px;116  }117  .bullets {118    margin-top: 24px; font-size: 34px; color: #222;119  }120  .bullets li { margin: 16px 0; }121 122  /* Return policy */123  .return-policy {124    position: absolute; left: 0; right: 0; top: 2060px;125    padding: 24px 36px;126  }127  .return-title { font-size: 40px; font-weight: 800; color: #222; }128 129  /* Bottom actions */130  .bottom-actions {131    position: absolute; left: 0; right: 0; bottom: 140px;132    padding: 24px 36px; display: flex; gap: 24px; align-items: center;133    background: #fff;134  }135  .wish-square {136    width: 120px; height: 120px; border-radius: 26px; border: 2px solid #e3e3e3;137    display: flex; align-items: center; justify-content: center; background: #fff;138  }139  .wish-square svg { width: 60px; height: 60px; stroke: #c54c6b; stroke-width: 4; fill: none; }140  .btn {141    flex: 1; height: 120px; border-radius: 28px; font-size: 42px; font-weight: 700; border: none; cursor: pointer;142  }143  .btn-buy { background: #ff4b61; color: #fff; }144  .btn-add { background: #e2435a; color: #fff; }145 146  /* Home indicator */147  .home-indicator {148    position: absolute; left: 50%; transform: translateX(-50%);149    bottom: 40px; width: 300px; height: 16px; background: #000; border-radius: 10px; opacity: 0.15;150  }151</style>152</head>153<body>154<div id="render-target">155 156  <!-- Status Bar -->157  <div class="status-bar">158    <div>4:11</div>159    <div class="status-icons">160      <div class="icon-signal"></div>161      <div class="icon-wifi"></div>162      <div class="battery-text">95%</div>163      <div class="icon-battery"></div>164    </div>165  </div>166 167  <!-- Product Hero -->168  <div class="hero">169    <div class="product-card">170      <div class="top-actions">171        <div class="round-icon" title="Wishlist">172          <svg viewBox="0 0 24 24">173            <path d="M12 21s-7-4.5-9-8.5C1.5 9 4 6.5 7 7.2c1.5.4 2.6 1.7 3 3 0-1.5 1.1-2.8 2.6-3.1 3-.7 5.6 1.8 4.9 5.4C16.5 16.5 12 21 12 21z"/>174          </svg>175        </div>176        <div class="round-icon" title="Bag">177          <svg viewBox="0 0 24 24">178            <path d="M6 8h12l-1 12H7L6 8z"/>179            <path d="M9 8V6a3 3 0 016 0v2"/>180          </svg>181        </div>182      </div>183 184      <div class="product-img">[IMG: iBELL Cordless Screwdriver Kit]</div>185 186      <div class="discount-tag">21% Off</div>187 188      <div class="share-fab" title="Share">189        <svg viewBox="0 0 24 24">190          <path d="M4 13c0-2 3-2 4 0l6-3c0-2 3-2 4 0M8 14l6 3"/>191        </svg>192      </div>193    </div>194  </div>195 196  <!-- Seller Section -->197  <div class="seller">198    <div class="seller-row">199      <div>Sold directly by</div>200      <div style="width: 24px; height: 24px; transform: rotate(45deg); border-right: 6px solid #333; border-bottom: 6px solid #333;"></div>201    </div>202    <div class="seller-sub">HITECH MACHINERIES AND EQUIPMENTS</div>203  </div>204 205  <!-- Product Description -->206  <div class="section">207    <div class="section-title">208      <div>PRODUCT DESCRIPTION</div>209      <div class="chev"></div>210    </div>211    <div class="desc">212      The multi‑feature driver not just fixes your screw in but also helps to get them out. Forward and reverse switch allows you to change the direction of drill helping you with removing screws or tighten. Also, the variable speed switch helps you control the speed which you work. Tackle any DIY tasks with the specially designed package which supports multiple applications. There is a screw bit for every occasion.213    </div>214    <ul class="bullets">215      <li>Tool socket: Hex 6.35 mm</li>216      <li>Battery life on Wood 200 Screws, on Aluminium 100 Screws, Suitable for any USB2.0 charger.</li>217      <li>Torque: 15+1 Settings</li>218      <li>Charging time: approx. 1.5 hr</li>219      <li>CE‑LNV7‑LA2Q</li>220    </ul>221  </div>222 223  <!-- Return Policy -->224  <div class="return-policy">225    <div class="return-title">RETURN POLICY</div>226  </div>227 228  <!-- Bottom Action Bar -->229  <div class="bottom-actions">230    <div class="wish-square">231      <svg viewBox="0 0 24 24">232        <path d="M12 21s-7-4.5-9-8.5C1.5 9 4 6.5 7 7.2c1.5.4 2.6 1.7 3 3 0-1.5 1.1-2.8 2.6-3.1 3-.7 5.6 1.8 4.9 5.4C16.5 16.5 12 21 12 21z"/>233      </svg>234    </div>235    <button class="btn btn-buy">Buy Now</button>236    <button class="btn btn-add">Add to Bag</button>237  </div>238 239  <div class="home-indicator"></div>240</div>241</body>242</html>